1. Terrill Thompson AccessComputing, University of Washington tft@uw.edu @terrillthompson Teaching Standards-Based, Accessible Web Design

2. The Typical Computer User

5. Ability on a continuum See Hear Walk Read print Write with pen or pencil Communicate verbally Tune out distraction etc.

6. Teaching Respect for Diversity while Teaching Coding All this diversity provides technology teachers with a great opportunity! There is no technology without users Each user is different When learning to code, students should actively consider their users, including user differences

7. Web Design & Development I Course Curriculum http://uw.edu/accesscomputing/webd2

8. Features Teaches standards-based and accessible web design Is platform and vendor-neutral (teaches concepts, not specific tools) Standards-based, accessible design is taught early as a core design principle, and reinforced throughout the course For assignments students must use valid code & conform to accessibility standards

9. Example 1: Adding an image

10. Student Photo #3

11. Adding an image correctly

12. Example 2: Adding functional images <img src="leftarrow.png" alt="Left arrow"> <img src="rightarrow.png" alt="Right arrow">

13. Student Photo #2

14. Adding functional images correctly <img src="leftarrow.png" alt="Previous"> <img src="rightarrow.png" alt="Next">

15. Example 3: Adding CSS hover effects a:hover { color: white; background-color: #8E6DD7; }

16. Student Photo #1

17. Adding CSS hover effects correctly a:hover, a:focus { color: white; background-color: #8E6DD7; }

18. Example 4: Adding Video

19. MP3 in Firefox

20. Adding video more correctly

21. Video without Captions

22. Adding video correctly

23. Video with Captions

24. Unit 1: Designing and Planning Web Pages Active vs. passive Internet use What makes a quality web site? Students develop their own evaluation tool Introduce web standards and accessibility

25. Unit 2: Creating Content and Structure with HTML Content first—coding in HTML editor Vendor neutral instruction Project based—portfolio HTML5 Reflections

26. Unit 3: Formatting Web Pages with Style Sheets Attention shifts to presentation—CSS Understanding and applying Layout and stylizing projects Students learn about good use of color –Contrast –Avoiding color to communicate information

27. Unit 4: Graphics Ethics (copyright) Effective use of graphics Students add a variety of images to their web portfolio: –Photo album –Buttons –Favicon –Banner Students learn to describe images using alt text

28. Unit 5: Scripting Basic JavaScript Starting simple: alert ("hello world!”) Basic debugging techniques Building a clock –Write the current time to an empty div (HTML) –Apply CSS to make it look like a clock –Continually update the time –Consider accessibility of this clock

29. Unit 6: Quality Control Validating –HTML –CSS –Accessibility Conduct usability tests

30. Unit 7: Website Management and Authoring Tools Introduce web authoring tools Vendor-neutral instruction Hosting and publishing Today’s web: –Content management systems –Wikis, Google sites, & other tools Implications for careers

31. Unit 8: Client Website Culminating project Emphasis on meeting client’s needs Final product must validate, including accessibility check

32. Learning Web Coding = Career Opportunities Technology is the great equalizer and for students whose first language is not English, speaking HTML opens new doors. Example: Las Chicas del Mount Vernon

33. Not Just a Curriculum, A Community Over 4000 registered teachers worldwide Discussion list with over 400 subscribers Teachers provide peer support: –Help with coding problems –Sharing resources –Discussing teaching strategies

34. Countries with 10 or more teachers

35. Teaching the World (Countries with one or more teachers)

36. Resources The curriculum: –http://uw.edu/accesscomputing/webd2http://uw.edu/accesscomputing/webd2 These slides: –http://staff.washington.edu/tfthttp://staff.washington.edu/tft