This is what html looks like

1
(No Transcript)
2
This is what html looks like

• lthtmlgt
• ltheadgt
• lttitlegtJESS3lt/titlegt
• lt/headgt
• ltbodygt
• Hello world!
• lt/bodygt
• lt/htmlgt

3
This is what a new document in Dreamweaver looks
like

• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Transitional//EN" "http//www.w3.org/TR/xhtml1/DTD
  /xhtml1-transitional.dtd"gt
• lthtml xmlns"http//www.w3.org/1999/xhtml"gt
• ltheadgt
• ltmeta http-equiv"Content-Type"
  content"text/html charsetUTF-8" /gt
• lttitlegtUntitled Documentlt/titlegt
• lt/headgt
• ltbodygt
• lt/bodygt
• lt/htmlgt

4
lta hreflink.htmlgtclick herelt/agt
5
Lets look at each part of that link

• ltA
• Says that this is an anchor (ltA ...gt) tag
• HREFlink.html"gt
• 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).
• lt/Agt
• Closes the anchor

6
lta hrefhttp//www.aarp.orggtltimg
srcaarpLogo.gifgtlt/agt
7
lta hrefhttp//www.aarp.orggtltimg
srchttp//assets.aarp.org/www.aarp.org_/build/te
mplates/style/aarpLogo.gifgtlt/agt
8
Ok, now we know what html is.Lets see how it is
being used.
9
Software / Applications
adiumfirefox-fireftp plugin for firefoxadobe
cs3
10
(No Transcript)
11
(No Transcript)
12
Del.icio.us
Add to del.icio buttonhttp//del.icio.us/help/bu
ttons
13
Website Field Trip
Digg labsdafontkirupacoolhuntingvirbywft
hydro74 freebiesnetfliximinlikewithyou
14
Make accounts with these sites
del.icio.usGoogle docsgmailgcalendargoogle
analyticsyoutubeyahooflickrmybloglogupcoming.
orgfacebook
linkedintwitter Threadlessvimeoblinksalebasec
ampmixxdiggpowncewritemapsslideshare
15
Project 1 Sitemaps
Lets take a look at the AARPs site structure,
talk about it and make a sitemap.What are the
components of a sitemap?Why is this
important?Writemaps VS illustratorlets look
at some of my fileshttp//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 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.
22
Project 2 FTP
ftp.jess3.comUsernameworkshopPassjess3that
is access to this folderhttp//jess3.com/worksho
p/
23
Project 3 Photo Gallery 1
Open up the simpleviewer folderLets 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 Docshttp//docs.google.com/we
will eventually get something like this.ltimg
src"http//spreadsheets.google.com/pub?keyp4oJtt
qpZsK4aFQ2wuK-eWwoid1outputimage" /gt
25
Project 4 Pie Charts
26
Project 5 Mp3 Player 1
ltobject type"application/x-shockwave-flash"
data"dewplayer.swf?mp3jess3live.mp3"
width"200" height"20"gtltparam name"movie"
value"dewplayer.swf?mp3jess3live.mp3"
/gtlt/objectgt
27
Project 5 Mp3 Player 1
Proper file namesJack Johnson - 07 - Wasting
Time.mp3jack_johnson-wasting_time.mp3
28
Project 5 Mp3 Player 1
ltobject type"application/x-shockwave-flash"
data"http//jess3.com/workshop/mp3/dewplayer.swf?
sonhttp//www.jess3.com/workshop/mp3/eddie_vedder
-society.mp3bgcolor353535" height"20"
width"200"gtltparam name"movie"
value"http//jess3.com/workshop/mp3/dewplayer.swf
?sonhttp//www.jess3.com/workshop/mp3/eddie_vedde
r-society.mp3ampampampbgcolor353535"gtlt/object
gtSecurity 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/playtaggerHow to
includeCopy the code below and place it in
anywhere in your HTML.ltscript type"text/javascri
pt" src"http//images.del.icio.us/static/js/playt
agger.js"gtlt/scriptgt
30

• 1. Get Greasemonkey.http//greasemonkey.mozdev.o
  rg/ If you havent heard of this Firefox
  extension (or still dont see why youd 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 systemfiletypemp3?
• 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/ltusernamegt/systemfiletype
  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.

31
(No Transcript)