INFO 343 Autumn 2009

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

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!

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)!

Read: JSONP, jQuery and Yahoo! Query Language

Do: JSONP Blizzard, Jonathan and Paws (i.e., More Huskies)!

Read: Silverlight: An introduction

Read: Silverlight: Examples

Admire: Silverlight - gradient font

Admire: Silverlight - image as font

Admire: Silverlight opacity mask

Do: Focus on a Husky!

Admire: Silverlight opacity with slider

Admire: Silverlight webclient to JSON object

Admire: Silverlight webclient to XML object

Admire: Silverlight DeepZoom

View: Snow in Shoreline, February 25, 2009

Read: Silverlight Geek Tutorials

Read: Motion

Read: The art of animation

Consider: Time and motion in JavaScript

Use: JavaScript motion tween

Admire: Husky Stadium in motion!

Do: Animate Bow Down to Washington

Survey: Sliders

Do: Express-O-matic for By George

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/

CSS Sprites: Image Slicing's Kiss of Death