HCDE: Week 07

Agenda

  • Homework review
    • Wireframes
    • Color palette
  • Overview: Forms
  • In-class exercise – building a contact form
    • Download this zipped folder (and extract it)
    • Upload the file that is in the “scripts” folder … to your “scripts” folder on the web server
    • Open the HTML files in Brackets
    • We’ll walk through customization and then you’ll upload via Filezilla
    • Test the form (so be sure to use an email address you can access in class for the “send to” address)
    • Google will warn you:
      wa
  • In-class consultation (one-on-one) with Thomas and Kathy
  • Assignment for next Wednesday: assignment 7: contact form 

Resources

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)