View stunning SlideShares in full-screen with the new iOS app!Introducing SlideShare for AndroidExplore all your favorite topics in the SlideShare appGet the SlideShare app to Save for Later — even offline
View stunning SlideShares in full-screen with the new Android app!View stunning SlideShares in full-screen with the new iOS app!
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".
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).
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
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-/
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.
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.
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.
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.
Lets make a sitemap -open visualvocab.pdf and IA_elements.ia
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.
Project 2; FTP ftp.jess3.com Username:workshop Pass:jess3 that is access to this folder; http://jess3.com/workshop/
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!
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" />
Project 5; Mp3 Player 1 Proper file names Jack Johnson - 07 - Wasting Time.mp3 jack_johnson-wasting_time.mp3
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
1. Get Greasemonkey.http://greasemonkey.mozdev.org/ If you haven’t heard of this Firefox extension (or still don’t see why you’d even need to switch to Firefox!)
2. Install the Del.icio.us MP3 userscript.
3. The result: on any webpage with linked MP3 links, the power of Greasemonkey makes the inline player appear, exactly like in the playtagger examples. Now you can listen to the audio right away, and decide whether you want to have it on your MP3 player for off-line listening. If so, click the “tag this” button and save the MP3 link to del.icio.us like you would do with any other link - use e.g. the tag “tolisten” as a reminder (analogous to the often-used tags “toread” or “toprint” in del.icio.us :-) ).
4. Now filter your del.icio.us account with the “magic” tag “system:filetype:mp3″:
del.icio.us filtered with mp3 system tag
Not only you have the list of all your mp3 files, the corresponding rss link http://del.icio.us/rss/<username>/system:filetype:mp3 under the icon will be a full-fledged podcast (= with mp3 enclosures) you can feed to your podcatcher (=podcasting client).
You do not need to assign this “system” tag yourself in order to be able to filter on it - Del.icio.us infers them from the file extension - did you know del.icio.us has similar tags for video, images and documents as well?
5. By refining your selection with your own tags (such as “tolisten”, or “jazz”, or “interview”, whatever), you create your own shareable playlists.