Web 2.0 Lessonplan Day1

Jesse ThomasJESS3.com


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 labsdafontkirupacoolhuntingvirbywft + hydro74 freebiesnetfliximinlikewithyou


Make accounts with these sites

del.icio.usGoogle docsgmailgcalendargoogle analyticsyoutubeyahooflickrmybloglogupcoming.orgfacebook

linkedintwitter Threadlessvimeoblinksalebasecampmixxdiggpowncewritemapsslideshare


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 fileshttp://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 fireftphttp://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:workshopPass: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 Docshttp://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 4; Pie Charts


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>



Proper file names

Jack Johnson - 07 - Wasting Time.mp3

jack_johnson-wasting_time.mp3



http://del.icio.us/help/playtagger

How to includeCopy 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

Technology

Transcript of Web 2.0 Lessonplan Day1