teaching standards-based, accessible web...
TRANSCRIPT
![Page 1: Teaching Standards-Based, Accessible Web Designstaff.washington.edu/tft/talks/csta2013/curriculum.pdfFeatures • Teaches standards-based and accessible web design • Is platform](https://reader034.vdocuments.mx/reader034/viewer/2022050218/5f644688c78f0d735428fa19/html5/thumbnails/1.jpg)
Terrill Thompson
AccessComputing, University of Washington
Joe McAuliffe
Squalicum High School
Kyle Ringo
Squalicum High School
Teaching Standards-Based,
Accessible Web Design
![Page 2: Teaching Standards-Based, Accessible Web Designstaff.washington.edu/tft/talks/csta2013/curriculum.pdfFeatures • Teaches standards-based and accessible web design • Is platform](https://reader034.vdocuments.mx/reader034/viewer/2022050218/5f644688c78f0d735428fa19/html5/thumbnails/2.jpg)
The Typical Computer User
![Page 3: Teaching Standards-Based, Accessible Web Designstaff.washington.edu/tft/talks/csta2013/curriculum.pdfFeatures • Teaches standards-based and accessible web design • Is platform](https://reader034.vdocuments.mx/reader034/viewer/2022050218/5f644688c78f0d735428fa19/html5/thumbnails/3.jpg)
![Page 4: Teaching Standards-Based, Accessible Web Designstaff.washington.edu/tft/talks/csta2013/curriculum.pdfFeatures • Teaches standards-based and accessible web design • Is platform](https://reader034.vdocuments.mx/reader034/viewer/2022050218/5f644688c78f0d735428fa19/html5/thumbnails/4.jpg)
![Page 5: Teaching Standards-Based, Accessible Web Designstaff.washington.edu/tft/talks/csta2013/curriculum.pdfFeatures • Teaches standards-based and accessible web design • Is platform](https://reader034.vdocuments.mx/reader034/viewer/2022050218/5f644688c78f0d735428fa19/html5/thumbnails/5.jpg)
Ability on a continuum
See
Hear
Walk
Read print
Write with pen or pencil
Communicate verbally
Tune out distraction
etc.
![Page 6: Teaching Standards-Based, Accessible Web Designstaff.washington.edu/tft/talks/csta2013/curriculum.pdfFeatures • Teaches standards-based and accessible web design • Is platform](https://reader034.vdocuments.mx/reader034/viewer/2022050218/5f644688c78f0d735428fa19/html5/thumbnails/6.jpg)
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
![Page 7: Teaching Standards-Based, Accessible Web Designstaff.washington.edu/tft/talks/csta2013/curriculum.pdfFeatures • Teaches standards-based and accessible web design • Is platform](https://reader034.vdocuments.mx/reader034/viewer/2022050218/5f644688c78f0d735428fa19/html5/thumbnails/7.jpg)
Web Design & Development I
Course Curriculum
http://uw.edu/accesscomputing/webd2
![Page 8: Teaching Standards-Based, Accessible Web Designstaff.washington.edu/tft/talks/csta2013/curriculum.pdfFeatures • Teaches standards-based and accessible web design • Is platform](https://reader034.vdocuments.mx/reader034/viewer/2022050218/5f644688c78f0d735428fa19/html5/thumbnails/8.jpg)
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
![Page 9: Teaching Standards-Based, Accessible Web Designstaff.washington.edu/tft/talks/csta2013/curriculum.pdfFeatures • Teaches standards-based and accessible web design • Is platform](https://reader034.vdocuments.mx/reader034/viewer/2022050218/5f644688c78f0d735428fa19/html5/thumbnails/9.jpg)
Example 1: Adding an image
<img src="/images/cstalogo.jpg"
width="481" height="126">
![Page 10: Teaching Standards-Based, Accessible Web Designstaff.washington.edu/tft/talks/csta2013/curriculum.pdfFeatures • Teaches standards-based and accessible web design • Is platform](https://reader034.vdocuments.mx/reader034/viewer/2022050218/5f644688c78f0d735428fa19/html5/thumbnails/10.jpg)
Student Photo #3
![Page 11: Teaching Standards-Based, Accessible Web Designstaff.washington.edu/tft/talks/csta2013/curriculum.pdfFeatures • Teaches standards-based and accessible web design • Is platform](https://reader034.vdocuments.mx/reader034/viewer/2022050218/5f644688c78f0d735428fa19/html5/thumbnails/11.jpg)
Adding an image correctly
<img src="/images/cstalogo.jpg"
width="481" height="126"
alt="CSTA: Computer Science
Teachers Association">
![Page 12: Teaching Standards-Based, Accessible Web Designstaff.washington.edu/tft/talks/csta2013/curriculum.pdfFeatures • Teaches standards-based and accessible web design • Is platform](https://reader034.vdocuments.mx/reader034/viewer/2022050218/5f644688c78f0d735428fa19/html5/thumbnails/12.jpg)
Example 2:
Adding functional images
<img src="leftarrow.png"
alt="Left arrow">
<img src="rightarrow.png"
alt="Right arrow">
![Page 13: Teaching Standards-Based, Accessible Web Designstaff.washington.edu/tft/talks/csta2013/curriculum.pdfFeatures • Teaches standards-based and accessible web design • Is platform](https://reader034.vdocuments.mx/reader034/viewer/2022050218/5f644688c78f0d735428fa19/html5/thumbnails/13.jpg)
Student Photo #2
![Page 14: Teaching Standards-Based, Accessible Web Designstaff.washington.edu/tft/talks/csta2013/curriculum.pdfFeatures • Teaches standards-based and accessible web design • Is platform](https://reader034.vdocuments.mx/reader034/viewer/2022050218/5f644688c78f0d735428fa19/html5/thumbnails/14.jpg)
Adding functional images
correctly
<img src="leftarrow.png"
alt="Previous">
<img src="rightarrow.png"
alt="Next">
![Page 15: Teaching Standards-Based, Accessible Web Designstaff.washington.edu/tft/talks/csta2013/curriculum.pdfFeatures • Teaches standards-based and accessible web design • Is platform](https://reader034.vdocuments.mx/reader034/viewer/2022050218/5f644688c78f0d735428fa19/html5/thumbnails/15.jpg)
Example 3:
Adding CSS hover effects
a:hover {
color: white;
background-color: #8E6DD7;
}
![Page 16: Teaching Standards-Based, Accessible Web Designstaff.washington.edu/tft/talks/csta2013/curriculum.pdfFeatures • Teaches standards-based and accessible web design • Is platform](https://reader034.vdocuments.mx/reader034/viewer/2022050218/5f644688c78f0d735428fa19/html5/thumbnails/16.jpg)
Student Photo #1
![Page 17: Teaching Standards-Based, Accessible Web Designstaff.washington.edu/tft/talks/csta2013/curriculum.pdfFeatures • Teaches standards-based and accessible web design • Is platform](https://reader034.vdocuments.mx/reader034/viewer/2022050218/5f644688c78f0d735428fa19/html5/thumbnails/17.jpg)
Adding CSS hover effects
correctly
a:hover, a:focus {
color: white;
background-color: #8E6DD7;
}
![Page 18: Teaching Standards-Based, Accessible Web Designstaff.washington.edu/tft/talks/csta2013/curriculum.pdfFeatures • Teaches standards-based and accessible web design • Is platform](https://reader034.vdocuments.mx/reader034/viewer/2022050218/5f644688c78f0d735428fa19/html5/thumbnails/18.jpg)
Example 4: Adding Video
<video controls src="myvideo.mp4">
</video>
![Page 19: Teaching Standards-Based, Accessible Web Designstaff.washington.edu/tft/talks/csta2013/curriculum.pdfFeatures • Teaches standards-based and accessible web design • Is platform](https://reader034.vdocuments.mx/reader034/viewer/2022050218/5f644688c78f0d735428fa19/html5/thumbnails/19.jpg)
MP3 in Firefox
![Page 20: Teaching Standards-Based, Accessible Web Designstaff.washington.edu/tft/talks/csta2013/curriculum.pdfFeatures • Teaches standards-based and accessible web design • Is platform](https://reader034.vdocuments.mx/reader034/viewer/2022050218/5f644688c78f0d735428fa19/html5/thumbnails/20.jpg)
Adding video more correctly
<video controls>
<source src="myvideo.mp4">
<source src="myvideo.webm">
</video>
![Page 21: Teaching Standards-Based, Accessible Web Designstaff.washington.edu/tft/talks/csta2013/curriculum.pdfFeatures • Teaches standards-based and accessible web design • Is platform](https://reader034.vdocuments.mx/reader034/viewer/2022050218/5f644688c78f0d735428fa19/html5/thumbnails/21.jpg)
Video without Captions
![Page 22: Teaching Standards-Based, Accessible Web Designstaff.washington.edu/tft/talks/csta2013/curriculum.pdfFeatures • Teaches standards-based and accessible web design • Is platform](https://reader034.vdocuments.mx/reader034/viewer/2022050218/5f644688c78f0d735428fa19/html5/thumbnails/22.jpg)
Adding video correctly
<video controls>
<source src="myvideo.mp4">
<source src="myvideo.webm">
<track kind="captions" src="mycaps.vtt">
</video>
![Page 23: Teaching Standards-Based, Accessible Web Designstaff.washington.edu/tft/talks/csta2013/curriculum.pdfFeatures • Teaches standards-based and accessible web design • Is platform](https://reader034.vdocuments.mx/reader034/viewer/2022050218/5f644688c78f0d735428fa19/html5/thumbnails/23.jpg)
Video with Captions
![Page 24: Teaching Standards-Based, Accessible Web Designstaff.washington.edu/tft/talks/csta2013/curriculum.pdfFeatures • Teaches standards-based and accessible web design • Is platform](https://reader034.vdocuments.mx/reader034/viewer/2022050218/5f644688c78f0d735428fa19/html5/thumbnails/24.jpg)
Unit 1: Designing and
Planning Web Pages
• Active vs. passive Internet use
• Evaluation tool—developing web-based
language
• Introduce web standards
![Page 25: Teaching Standards-Based, Accessible Web Designstaff.washington.edu/tft/talks/csta2013/curriculum.pdfFeatures • Teaches standards-based and accessible web design • Is platform](https://reader034.vdocuments.mx/reader034/viewer/2022050218/5f644688c78f0d735428fa19/html5/thumbnails/25.jpg)
Unit 2: Creating Content and
Structure with HTML
• Content first—barebones editor
• Vendor neutral instruction
• Project based--portfolio
• html 5
• Basic mark up for most web
communication
• reflections
![Page 26: Teaching Standards-Based, Accessible Web Designstaff.washington.edu/tft/talks/csta2013/curriculum.pdfFeatures • Teaches standards-based and accessible web design • Is platform](https://reader034.vdocuments.mx/reader034/viewer/2022050218/5f644688c78f0d735428fa19/html5/thumbnails/26.jpg)
Unit 3: Formatting Web Pages
with Style Sheets
• Attention shifts to presentation—CSS
• Understanding and applying
• Layout and stylizing projects
![Page 27: Teaching Standards-Based, Accessible Web Designstaff.washington.edu/tft/talks/csta2013/curriculum.pdfFeatures • Teaches standards-based and accessible web design • Is platform](https://reader034.vdocuments.mx/reader034/viewer/2022050218/5f644688c78f0d735428fa19/html5/thumbnails/27.jpg)
Unit 4: Graphics
• Ethics
• Vendor neutral instruction
• Project based
– Album
– Button
– Favicon
– Banner
![Page 28: Teaching Standards-Based, Accessible Web Designstaff.washington.edu/tft/talks/csta2013/curriculum.pdfFeatures • Teaches standards-based and accessible web design • Is platform](https://reader034.vdocuments.mx/reader034/viewer/2022050218/5f644688c78f0d735428fa19/html5/thumbnails/28.jpg)
Unit 5: Scripting
• Basic JavaScript
• Project based
– Starting simple: alert ("hello world!")
– Basic debugging techniques
– Clock
![Page 29: Teaching Standards-Based, Accessible Web Designstaff.washington.edu/tft/talks/csta2013/curriculum.pdfFeatures • Teaches standards-based and accessible web design • Is platform](https://reader034.vdocuments.mx/reader034/viewer/2022050218/5f644688c78f0d735428fa19/html5/thumbnails/29.jpg)
Unit 6: Quality Control
• Validating
– HTML
– CSS
– Accessibility
![Page 30: Teaching Standards-Based, Accessible Web Designstaff.washington.edu/tft/talks/csta2013/curriculum.pdfFeatures • Teaches standards-based and accessible web design • Is platform](https://reader034.vdocuments.mx/reader034/viewer/2022050218/5f644688c78f0d735428fa19/html5/thumbnails/30.jpg)
Unit 7: Website Management
and Authoring Tools
• Introduce an editor
• Vendor-neutral instruction
• Hosting and publishing
![Page 31: Teaching Standards-Based, Accessible Web Designstaff.washington.edu/tft/talks/csta2013/curriculum.pdfFeatures • Teaches standards-based and accessible web design • Is platform](https://reader034.vdocuments.mx/reader034/viewer/2022050218/5f644688c78f0d735428fa19/html5/thumbnails/31.jpg)
Unit 8: Client Website
• Culminating project
• Review development process
• Emphasis on meeting client’s needs
• Publication
![Page 32: Teaching Standards-Based, Accessible Web Designstaff.washington.edu/tft/talks/csta2013/curriculum.pdfFeatures • Teaches standards-based and accessible web design • Is platform](https://reader034.vdocuments.mx/reader034/viewer/2022050218/5f644688c78f0d735428fa19/html5/thumbnails/32.jpg)
Accessibility: Language
• ELL Students taking this web design
course become fluent in the language of
HTML while learning English
• Students in class whose first language
is Ukrainian, Punjabi, Mandarin,
Vietnamese, and Spanish
![Page 33: Teaching Standards-Based, Accessible Web Designstaff.washington.edu/tft/talks/csta2013/curriculum.pdfFeatures • Teaches standards-based and accessible web design • Is platform](https://reader034.vdocuments.mx/reader034/viewer/2022050218/5f644688c78f0d735428fa19/html5/thumbnails/33.jpg)
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
![Page 34: Teaching Standards-Based, Accessible Web Designstaff.washington.edu/tft/talks/csta2013/curriculum.pdfFeatures • Teaches standards-based and accessible web design • Is platform](https://reader034.vdocuments.mx/reader034/viewer/2022050218/5f644688c78f0d735428fa19/html5/thumbnails/34.jpg)
Not Just a Curriculum,
A Community
• Nearly 4000 registered teachers
worldwide
• Discussion list with 372 subscribers
• Teachers provide peer support:
– Help with coding problems
– Sharing resources
– Discussing teaching strategies
![Page 35: Teaching Standards-Based, Accessible Web Designstaff.washington.edu/tft/talks/csta2013/curriculum.pdfFeatures • Teaches standards-based and accessible web design • Is platform](https://reader034.vdocuments.mx/reader034/viewer/2022050218/5f644688c78f0d735428fa19/html5/thumbnails/35.jpg)
Countries with 10 or more teachers
![Page 36: Teaching Standards-Based, Accessible Web Designstaff.washington.edu/tft/talks/csta2013/curriculum.pdfFeatures • Teaches standards-based and accessible web design • Is platform](https://reader034.vdocuments.mx/reader034/viewer/2022050218/5f644688c78f0d735428fa19/html5/thumbnails/36.jpg)
Teaching the World (Countries with one or more teachers)
![Page 37: Teaching Standards-Based, Accessible Web Designstaff.washington.edu/tft/talks/csta2013/curriculum.pdfFeatures • Teaches standards-based and accessible web design • Is platform](https://reader034.vdocuments.mx/reader034/viewer/2022050218/5f644688c78f0d735428fa19/html5/thumbnails/37.jpg)
Web Design & Development I
Course Curriculum
http://uw.edu/accesscomputing/webd2