HCDE: Week 07

Agenda

• Homework review
  • Wireframes
  • Color palette
• Overview: Forms
• In-class exercise – building a contact form
  • Download this zipped folder (and extract the file)
  • Open the HTML file in Brackets
  • We’ll walk through customization and then you’ll upload via Filezilla to your working directory
  • Test the form (you must use an email address you can access in class)
    • faculty.uw.edu/kegill/hcde532/working/contact-demo.html
  • You must validate the service by sending yourself a test message
• In-class consultation (one-on-one) with Thomas and Kathy
• Assignment for next Wednesday: assignment 7: contact form 

Resources

• Form styles (CSS)
• W3C Form tutorial
• Your first form (Mozilla Developer Network)

Homework review

Due today at 9 am:  assignment 6: visual design
The assignment URL for the PDF of wireframes showing your grids should be xxx.washington.edu/yourNetID/pdf/assignment-06.pdf

NOTE:  some of you have full-color comps (a step ahead) but no grid lines (the goal of this assignment). See Aastha and Jake for two different approaches

1. Aastha | https://staff.washington.edu/aastha11/pdf/assignment-06.pdf
2. Alice | https://students.washington.edu/uwalice/pdf/assignment-06.pdf
3. Chun-Fang (Jenni) | https://students.washington.edu/jennicf/pdf/assignment-06.pdf – 404
4. David | https://students.washington.edu/molinero/pdf/assignment-06.pdf
5. Jake | https://students.washington.edu/grhodes/pdf/assignment-06.pdf
6. Jihoon |  http://students.washington.edu/jihoons/pdf/assignment-06.pdf – 404
7. Julie |  https://students.washington.edu/jstu2/pdf/assignment-06.pdf – 404
8. Laura | https://students.washington.edu/lmeise/pdf/assignment-06.pdf – 404
9. Pierre | https://staff.washington.edu/pdelcour/pdf/assignment-06.pdf
10. Putri | http://staff.washington.edu/putrih/pdf/assignment-06.pdf
11. Rachel | https://students.washington.edu/xukun/pdf/assignment-06.pdf – 404
12. Thana-On  | https://students.washington.edu/thanaon/pdf/assignment-06.pdf
13. Tucker |  https://students.washington.edu/tstandle/pdf/assignment-06.pdf
14. Yaonan (Natalie) | https://students.washington.edu/yaonah/pdf/assignment-06.pdf
15. Ziyan |  https://students.washington.edu/ziyan053/pdf/assignment-06.pdf

From last week – color palettes (has anyone fiddled with this since last week? LOL)
Assignment URL xxx.washington.edu/yourNetID/hcde532/color-palette.html
You need to identify background/foreground (text), links, and headings.

 See David and Ziyan for two different approaches

1. Aastha | https://staff.washington.edu/aastha11/hcde532/color-palette.html (“links” and “link text” are the same thing)
2. Alice | https://students.washington.edu/uwalice/hcde532/color-palette.html (the link color will not have sufficient contrast and is not significantly different from header color)
3. Chun-Fang (Jenni) | https://students.washington.edu/jennicf/hcde532/color-palette.html – 404
4. David | https://students.washington.edu/molinero/hcde532/color-palette.html
5. Jake | https://students.washington.edu/grhodes/hcde532/color-palette.html (check the contrast with the dark amber – I don’t think it will be sufficient for readability — what color will your visited links be?)
6. Jihoon |  http://students.washington.edu/jihoons/hcde532/color-palette.html
7. Julie |  https://students.washington.edu/jstu2/hcde532/color-palette.html (how are the colors to be used? which will be link colors?)
8. Laura | https://students.washington.edu/lmeise/hcde532/color-palette.html – 404
9. Pierre | https://staff.washington.edu/pdelcour/hcde532/color-palette.html (how are the colors to be used?)
10. Putri | http://staff.washington.edu/putrih/hcde532/color-palette.html (make sure your gray gives sufficient contrast for readability – what will your visited links look like?)
11. Rachel | https://students.washington.edu/xukun/hcde532/color-palette.html (how will the colors be used?)
12. Thana-On  | https://students.washington.edu/thanaon/hcde532/color-palette.html (how are the colors to be used?)
13. Tucker |  https://students.washington.edu/tstandle/hcde532/color-palette.html (how are the colors to be used?)
14. Yaonan (Natalie) | https://students.washington.edu/yaonah/hcde532/color-palette.html (what color will your visited links be?
15. Ziyan |  https://students.washington.edu/ziyan053/hcde532/color-palette.html (double-check contrast if the headers are to have a different backgrond)