I taught a web2.0 course for AARP.

4. <a href=“link.html”>click here</a>

6. <a href=“http://www.aarp.org”> <img src=“aarpLogo.gif”></a>

7. <a href=“http://www.aarp.org”><img src=“http://assets.aarp.org/www.aarp.org_/build/templates/style/aarpLogo.gif”></a>

8. Ok, now we know what html is. Lets see how it is being used.

9. Software / Applications adium firefox -fireftp plugin for firefox adobe cs3

12. Del.icio.us Add to del.icio button http://del.icio.us/help/buttons

13. Website Field Trip Digg labs dafont kirupa coolhunting virb ywft + hydro74 freebies netflix iminlikewithyou

14. Make accounts with these sites del.icio.us Google docs gmail gcalendar google analytics youtube yahoo flickr mybloglog upcoming.org facebook linkedin twitter Threadless vimeo blinksale basecamp mixx digg pownce writemaps slideshare

15. Project 1; Sitemaps Lets take a look at the AARP’s site structure, talk about it and make a sitemap. What are the components of a sitemap? Why is this important? Writemaps VS illustrator lets look at some of my files http://www.jess3.com/UI-/

16. Overview; Sitemaps A visual vocabulary is a set of symbols used to describe something (usually a system, structure, or process). The vocabulary described here may be used by an information architect or interaction designer to describe, at a high level, the structure and/or flow of the user experience of a Web site.

17. When diagramming interaction design, our connectors also need to convey directionality to indicate how the user will move through the system toward completion of a particular task. Turning our connectors into arrows will do the trick nicely. We use the terms downstream and upstream to refer to the position of elements relative to this forward movement. Note that these arrows are not like the arrows indicating a one-way street, but rather like the arrows indicating the way to the food court in the mall . The user is not prohibited from moving in the opposite direction; the arrow merely indicates the direction in which the user is likely to want to go.

18. The rounded-corner rectangle is used to identify a group of pages that share one or more common attributes (such as appearing in a pop-up window, or having some unique design treatment). Use labels to identify these attributes or (as with connectors), refer to notes elsewhere in the document if you have a lot to say.

19. Some interaction designs require a sequence of steps (like a login procedure, for instance) to appear repeatedly in different contexts throughout the design. Often these sequences are merely a component of one or more larger tasks the user is trying to accomplish. (This is like to the concept of a subroutine in computer programming.) Such a reusable sequence is called a flow.

20. Lets make a sitemap -open visualvocab.pdf and IA_elements.ia

21. Project 2; FTP Open up fireftp http://fireftp.mozdev.org/ FTP stands for File Transfer Protocol. It is the sister of the more commonly used HTTP. Both protocols deal with transferring data across the internet. FTP is a way for you to take files from your computer and upload them to another computer, usually a web server. Or, it is also a way of downloading files from another computer to yours.

22. Project 2; FTP ftp.jess3.com Username:workshop Pass:jess3 that is access to this folder; http://jess3.com/workshop/

23. Project 3; Photo Gallery 1 Open up the simpleviewer folder Lets get some photos ready for the gallery. And think of captions too! Limitation: SimpleViewer is designed for viewing around 50 images per gallery. More images than this can cause slow performance on older machines, as all the images are loaded into memory simultaneously. Split them up into multiple galleries!

24. Project 4; Pie Charts Open up Google Docs http://docs.google.com/ we will eventually get something like this. <img src=&quot;http://spreadsheets.google.com/pub?key=p4oJttqpZsK4aFQ2wuK-eWw&oid=1&output=image&quot; />

25. Project 4; Pie Charts

26. Project 5; Mp3 Player 1 <object type=&quot;application/x-shockwave-flash&quot; data=&quot;dewplayer.swf?mp3=jess3live.mp3&quot; width=&quot;200&quot; height=&quot;20&quot;> <param name=&quot;movie&quot; value=&quot;dewplayer.swf?mp3=jess3live.mp3&quot; /> </object>

27. Project 5; Mp3 Player 1 Proper file names Jack Johnson - 07 - Wasting Time.mp3 jack_johnson-wasting_time.mp3

28. Project 5; Mp3 Player 1 <object type=&quot;application/x-shockwave-flash&quot; data=&quot;http://jess3.com/workshop/mp3/dewplayer.swf?son=http://www.jess3.com/workshop/mp3/eddie_vedder-society.mp3&bgcolor=353535&quot; height=&quot;20&quot; width=&quot;200&quot;><param name=&quot;movie&quot; value=&quot;http://jess3.com/workshop/mp3/dewplayer.swf?son=http://www.jess3.com/workshop/mp3/eddie_vedder-society.mp3&amp;amp;amp;bgcolor=353535&quot;></object> Security restrictions for cross-domain. The *.mp3 file must be in the same domain as the swf file

29. Project 5; Mp3 Player 2 http://del.icio.us/help/playtagger How to include Copy the code below and place it in anywhere in your HTML. <script type=&quot;text/javascript&quot; src=&quot;http://images.del.icio.us/static/js/playtagger.js&quot;></script>