Terrill Thompson AccessComputing, University of Washington Joe McAuliffe Squalicum High School Kyle...
-
Upload
aron-cramp -
Category
Documents
-
view
216 -
download
1
Transcript of Terrill Thompson AccessComputing, University of Washington Joe McAuliffe Squalicum High School Kyle...
![Page 1: Terrill Thompson AccessComputing, University of Washington Joe McAuliffe Squalicum High School Kyle Ringo Squalicum High School Teaching Standards-Based,](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c855503460f9493b8b5/html5/thumbnails/1.jpg)
Terrill ThompsonAccessComputing, University of Washington
Joe McAuliffeSqualicum High School
Kyle RingoSqualicum High School
Teaching Standards-Based, Accessible Web Design
![Page 2: Terrill Thompson AccessComputing, University of Washington Joe McAuliffe Squalicum High School Kyle Ringo Squalicum High School Teaching Standards-Based,](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c855503460f9493b8b5/html5/thumbnails/2.jpg)
The Typical Computer User
![Page 3: Terrill Thompson AccessComputing, University of Washington Joe McAuliffe Squalicum High School Kyle Ringo Squalicum High School Teaching Standards-Based,](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c855503460f9493b8b5/html5/thumbnails/3.jpg)
![Page 4: Terrill Thompson AccessComputing, University of Washington Joe McAuliffe Squalicum High School Kyle Ringo Squalicum High School Teaching Standards-Based,](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c855503460f9493b8b5/html5/thumbnails/4.jpg)
![Page 5: Terrill Thompson AccessComputing, University of Washington Joe McAuliffe Squalicum High School Kyle Ringo Squalicum High School Teaching Standards-Based,](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c855503460f9493b8b5/html5/thumbnails/5.jpg)
Ability on a continuum
SeeHearWalk
Read printWrite with pen or pencilCommunicate verballyTune out distraction
etc.
![Page 6: Terrill Thompson AccessComputing, University of Washington Joe McAuliffe Squalicum High School Kyle Ringo Squalicum High School Teaching Standards-Based,](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c855503460f9493b8b5/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: Terrill Thompson AccessComputing, University of Washington Joe McAuliffe Squalicum High School Kyle Ringo Squalicum High School Teaching Standards-Based,](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c855503460f9493b8b5/html5/thumbnails/7.jpg)
Web Design & Development I Course Curriculum
http://uw.edu/accesscomputing/webd2
![Page 8: Terrill Thompson AccessComputing, University of Washington Joe McAuliffe Squalicum High School Kyle Ringo Squalicum High School Teaching Standards-Based,](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c855503460f9493b8b5/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: Terrill Thompson AccessComputing, University of Washington Joe McAuliffe Squalicum High School Kyle Ringo Squalicum High School Teaching Standards-Based,](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c855503460f9493b8b5/html5/thumbnails/9.jpg)
Example 1: Adding an image
<img src="/images/cstalogo.jpg" width="481" height="126">
![Page 10: Terrill Thompson AccessComputing, University of Washington Joe McAuliffe Squalicum High School Kyle Ringo Squalicum High School Teaching Standards-Based,](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c855503460f9493b8b5/html5/thumbnails/10.jpg)
Student Photo #3
![Page 11: Terrill Thompson AccessComputing, University of Washington Joe McAuliffe Squalicum High School Kyle Ringo Squalicum High School Teaching Standards-Based,](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c855503460f9493b8b5/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: Terrill Thompson AccessComputing, University of Washington Joe McAuliffe Squalicum High School Kyle Ringo Squalicum High School Teaching Standards-Based,](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c855503460f9493b8b5/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: Terrill Thompson AccessComputing, University of Washington Joe McAuliffe Squalicum High School Kyle Ringo Squalicum High School Teaching Standards-Based,](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c855503460f9493b8b5/html5/thumbnails/13.jpg)
Student Photo #2
![Page 14: Terrill Thompson AccessComputing, University of Washington Joe McAuliffe Squalicum High School Kyle Ringo Squalicum High School Teaching Standards-Based,](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c855503460f9493b8b5/html5/thumbnails/14.jpg)
Adding functional images correctly
<img src="leftarrow.png" alt="Previous">
<img src="rightarrow.png" alt="Next">
![Page 15: Terrill Thompson AccessComputing, University of Washington Joe McAuliffe Squalicum High School Kyle Ringo Squalicum High School Teaching Standards-Based,](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c855503460f9493b8b5/html5/thumbnails/15.jpg)
Example 3: Adding CSS hover effects
a:hover { color: white; background-color: #8E6DD7; }
![Page 16: Terrill Thompson AccessComputing, University of Washington Joe McAuliffe Squalicum High School Kyle Ringo Squalicum High School Teaching Standards-Based,](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c855503460f9493b8b5/html5/thumbnails/16.jpg)
Student Photo #1
![Page 17: Terrill Thompson AccessComputing, University of Washington Joe McAuliffe Squalicum High School Kyle Ringo Squalicum High School Teaching Standards-Based,](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c855503460f9493b8b5/html5/thumbnails/17.jpg)
Adding CSS hover effects correctly
a:hover, a:focus { color: white; background-color: #8E6DD7; }
![Page 18: Terrill Thompson AccessComputing, University of Washington Joe McAuliffe Squalicum High School Kyle Ringo Squalicum High School Teaching Standards-Based,](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c855503460f9493b8b5/html5/thumbnails/18.jpg)
Example 4: Adding Video
<video controls src="myvideo.mp4">
</video>
![Page 19: Terrill Thompson AccessComputing, University of Washington Joe McAuliffe Squalicum High School Kyle Ringo Squalicum High School Teaching Standards-Based,](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c855503460f9493b8b5/html5/thumbnails/19.jpg)
MP3 in Firefox
![Page 20: Terrill Thompson AccessComputing, University of Washington Joe McAuliffe Squalicum High School Kyle Ringo Squalicum High School Teaching Standards-Based,](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c855503460f9493b8b5/html5/thumbnails/20.jpg)
Adding video more correctly
<video controls>
<source src="myvideo.mp4">
<source src="myvideo.webm">
</video>
![Page 21: Terrill Thompson AccessComputing, University of Washington Joe McAuliffe Squalicum High School Kyle Ringo Squalicum High School Teaching Standards-Based,](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c855503460f9493b8b5/html5/thumbnails/21.jpg)
Video without Captions
![Page 22: Terrill Thompson AccessComputing, University of Washington Joe McAuliffe Squalicum High School Kyle Ringo Squalicum High School Teaching Standards-Based,](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c855503460f9493b8b5/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: Terrill Thompson AccessComputing, University of Washington Joe McAuliffe Squalicum High School Kyle Ringo Squalicum High School Teaching Standards-Based,](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c855503460f9493b8b5/html5/thumbnails/23.jpg)
Video with Captions
![Page 24: Terrill Thompson AccessComputing, University of Washington Joe McAuliffe Squalicum High School Kyle Ringo Squalicum High School Teaching Standards-Based,](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c855503460f9493b8b5/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: Terrill Thompson AccessComputing, University of Washington Joe McAuliffe Squalicum High School Kyle Ringo Squalicum High School Teaching Standards-Based,](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c855503460f9493b8b5/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: Terrill Thompson AccessComputing, University of Washington Joe McAuliffe Squalicum High School Kyle Ringo Squalicum High School Teaching Standards-Based,](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c855503460f9493b8b5/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: Terrill Thompson AccessComputing, University of Washington Joe McAuliffe Squalicum High School Kyle Ringo Squalicum High School Teaching Standards-Based,](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c855503460f9493b8b5/html5/thumbnails/27.jpg)
Unit 4: Graphics
• Ethics
• Vendor neutral instruction
• Project based– Album– Button– Favicon– Banner
![Page 28: Terrill Thompson AccessComputing, University of Washington Joe McAuliffe Squalicum High School Kyle Ringo Squalicum High School Teaching Standards-Based,](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c855503460f9493b8b5/html5/thumbnails/28.jpg)
Unit 5: Scripting
• Basic JavaScript
• Project based– Starting simple: alert ("hello world!")– Basic debugging techniques– Clock
![Page 29: Terrill Thompson AccessComputing, University of Washington Joe McAuliffe Squalicum High School Kyle Ringo Squalicum High School Teaching Standards-Based,](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c855503460f9493b8b5/html5/thumbnails/29.jpg)
Unit 6: Quality Control
• Validating– HTML– CSS– Accessibility
![Page 30: Terrill Thompson AccessComputing, University of Washington Joe McAuliffe Squalicum High School Kyle Ringo Squalicum High School Teaching Standards-Based,](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c855503460f9493b8b5/html5/thumbnails/30.jpg)
Unit 7: Website Management and Authoring Tools
• Introduce an editor
• Vendor-neutral instruction
• Hosting and publishing
![Page 31: Terrill Thompson AccessComputing, University of Washington Joe McAuliffe Squalicum High School Kyle Ringo Squalicum High School Teaching Standards-Based,](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c855503460f9493b8b5/html5/thumbnails/31.jpg)
Unit 8: Client Website
• Culminating project
• Review development process
• Emphasis on meeting client’s needs
• Publication
![Page 32: Terrill Thompson AccessComputing, University of Washington Joe McAuliffe Squalicum High School Kyle Ringo Squalicum High School Teaching Standards-Based,](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c855503460f9493b8b5/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: Terrill Thompson AccessComputing, University of Washington Joe McAuliffe Squalicum High School Kyle Ringo Squalicum High School Teaching Standards-Based,](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c855503460f9493b8b5/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: Terrill Thompson AccessComputing, University of Washington Joe McAuliffe Squalicum High School Kyle Ringo Squalicum High School Teaching Standards-Based,](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c855503460f9493b8b5/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: Terrill Thompson AccessComputing, University of Washington Joe McAuliffe Squalicum High School Kyle Ringo Squalicum High School Teaching Standards-Based,](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c855503460f9493b8b5/html5/thumbnails/35.jpg)
Countries with 10 or more teachers
![Page 36: Terrill Thompson AccessComputing, University of Washington Joe McAuliffe Squalicum High School Kyle Ringo Squalicum High School Teaching Standards-Based,](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c855503460f9493b8b5/html5/thumbnails/36.jpg)
Teaching the World (Countries with one or more teachers)
![Page 37: Terrill Thompson AccessComputing, University of Washington Joe McAuliffe Squalicum High School Kyle Ringo Squalicum High School Teaching Standards-Based,](https://reader035.fdocuments.us/reader035/viewer/2022062712/56649c855503460f9493b8b5/html5/thumbnails/37.jpg)
Web Design & Development I Course Curriculum
http://uw.edu/accesscomputing/webd2