Web 2.0 Lessonplan Day1

This is what html looks like <html> <head> <title>JESS3</title> </head> <body> Hello world! </body> </html>

This is what a new document in Dreamweaver looks like <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> </head> <body> </body> </html>

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

Lets look at each part of that link <A Says that this is an anchor (<A ...>) tag HREF=”link.html"> 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". click here 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). </A> Closes the anchor

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

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

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

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

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 <object type="application/x-shockwave-flash" data="dewplayer.swf?mp3=jess3live.mp3" width="200" height="20"> <param name="movie" value="dewplayer.swf?mp3=jess3live.mp3" /> </object>

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

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="text/javascript" src="http://images.del.icio.us/static/js/playtagger.js"></script>

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. Like lots of userscripts, this is a “Greasemonkification” of an already existing javascript, in this case the “Del.icio.us Playtagger“, that lets webmasters insert an inline Flash player automatically for every linked MP3 url: 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.

Web 2.0 Lessonplan Day1

More Related Content

What's hot

Viewers also liked

Similar to Web 2.0 Lessonplan Day1

More from Jesse Thomas

Recently uploaded

Web 2.0 Lessonplan Day1