2. This is what html looks like <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title>JESS3</title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li>Hello world! </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
3. This is what a new document in Dreamweaver looks like <ul><li><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> </li></ul><ul><li><html xmlns="http://www.w3.org/1999/xhtml"> </li></ul><ul><li><head> </li></ul><ul><li><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </li></ul><ul><li><title>Untitled Document</title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
4. <a href=“link.html”>click here</a>
5. Lets look at each part of that link <ul><li><A </li></ul><ul><li>Says that this is an anchor (<A ...>) tag </li></ul><ul><li>HREF=”link.html"> </li></ul><ul><li>Says that the Hypertext REFerence for this anchor is the file ”link.html". When an anchor makes a hypertext reference, we call it a "link". </li></ul><ul><li>click here </li></ul><ul><li>This is the text which appears on the web page. This text is usually highlighted in some way, such as coloring it blue, to indicate that it is "hypertext" (if you click on it, something happens). </li></ul><ul><li></A> </li></ul><ul><li>Closes the anchor </li></ul>
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="http://spreadsheets.google.com/pub?key=p4oJttqpZsK4aFQ2wuK-eWw&oid=1&output=image" />
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="application/x-shockwave-flash" data="http://jess3.com/workshop/mp3/dewplayer.swf?son=http://www.jess3.com/workshop/mp3/eddie_vedder-society.mp3&bgcolor=353535" height="20" width="200"><param name="movie" value="http://jess3.com/workshop/mp3/dewplayer.swf?son=http://www.jess3.com/workshop/mp3/eddie_vedder-society.mp3&amp;amp;bgcolor=353535"></object> Security restrictions for cross-domain. The *.mp3 file must be in the same domain as the swf file