Web page structure
Read: The grid as visual organization
Use: Yahoo! UI Library: Grids CSS
Use: Designing with boxes and columns
Do: Redesign the Tsunami! web page
Read: An XHTML Roadmap for Designers
Do: Convert to XHTML
Read: RDFa for HTML Authors
Read: Introducing Rich Snippets
Do: Prepare the Tsunami for Google's rich snippets
Try: How to add a shortcut icon to a web page
Wonder: Browser bugs section
Shake your head: Some cross-browser strategies
Consider: Accessibility
Manipulating the DOM
Try: Acid test 1 [HTML 4 and CSS 1]
Try: Acid test 2 [CSS 1 and 2]
Try: Acid test 3 [CSS 2.1, DOM and EcmaScript]
Try: What does your user agent claim to support?
Consult: Gecko DOM Reference
Try: Target the DOM
Survey: One-date widgets
Survey: Multi-date widgets
Read: Exhibit: Lightweight structured data publishing
Admire: SIMILE Exhibits
Do: Sort the Dawgs!
Ajaxian web pages
Read: AJAX: A new approach to web applications
Consider: Web services at the UW
Admire: allcourses.xml
Read: Introduction to AJAX with XML
Use: Prototype.js
Do: ABC iSchool Course web services
Read: Greasemonkey
Do: Grease up the iSchool web page!
Read: DBpedia
Read: Wikipedia on a web page
Read: Gathering flowers from DBpedia
Do: SPARQL the Alaskan Malamutes (i.e., Huskies)!
Web page plugin: Silverlight
Read: Silverlight: An introduction
Read: Silverlight: Examples
Admire: Silverlight - gradient font
Admire: Silverlight - image as font
Admire: Silverlight opacity mask
Admire: Silverlight opacity with slider
Admire: Silverlight webclient to JSON object
Admire: Silverlight webclient to XML object
Admire: Silverlight DeepZoom
Web page motion
Read: Motion
Read: The art of animation
Consider: Time and motion in JavaScript
Admire: Husky Stadium in motion!
Do: Animate Bow Down to Washington
Survey: Sliders
Manipulating images
Use: Cookies
Do: MooTool iParent!
Use: The <Canvas> element
Use: Draw images
Use: Pop images
Use: Silverlight DeepZoom
Use: Fisheye images
Use: Scroll images
Use: Google maps, sort of
Use: Resize images
Use: Animate images
Admire: Hyperbolic tree visualization
Use: Code for hypertree
Use: Spin 360 images
Use: Center images
noobSlide at http://www.efectorelativo.net/laboratory/noobSlide/
Supersized at http://buildinternet.com/2009/02/supersized-full-screen-backgroundslideshow-jquery-plugin/
Animated JavaScript Slideshow at http://www.leigeber.com/2008/12/javascript-slideshow/
Moving boxes at http://css-tricks.com/moving-boxes/
Prototype Carousel at http://miedlar.com/dev/carousel/
Section A:
WF 9:30 - 10:50 am
F 11:00 - 12:50 pm
Section B:
TTh 9:30-10:50 am
Th 11:00-12:50 pm
Teaching assistant
xxxx
xxx AT u.washington.edu