Download Lec2Handout - Rutgers University

Info + Web Tech Course
Digital Media
Production
Anselm Spoerri PhD (MIT)
SC&I @ Rutgers University
[email protected]
[email protected]
Digital Media Production
© Anselm Spoerri
Lecture 2 – Overview
Web Design Principles
–
–
–
Narrative Structures
Site Planning
User Behavior & Design Implications
Web Design Basics
–
–
–
–
–
HTTP – HyperText Transfer Protocol
URL Basics
HTML Elements & Tags: Block-level vs. Inline Elements
XHTML: Rules, Doctype, Encoding
Links, Tables, Images
Text Editor, FTP & Permissions
Demo
–
–
Create Simple Web Page | Upload to Server | Set Permissions
Ex1 Demo
Lectures – Week 2 Content
http://comminfo.rutgers.edu/~aspoerri/Teaching/DMPOnline/Lectures.html#week2
Digital Media Production
© Anselm Spoerri
Narrative Structures
Digital Media Production
© Anselm Spoerri
Planning 1
Define Web Audience
– Who is your target audience?
– What do you want the site to accomplish?
Break Site into Categories
– Create Outline - Goal, Organization
– Create Simple Web Site Plan
– Hierarchy & hyperlinks
– Use sticky notes or Flowchart
Digital Media Production
© Anselm Spoerri
Planning 2
Collect & Organize Material
– Organizing files by folders
– Asset folder for images, sounds, videos, animations etc.
– Save source files
– File Name - lowercase, short, no spaces or special characters
– “myinterests” vs. “my_interests” vs. “my interests”
– Title web pages
Local Structure = Remote Structure
– Same folder and file structure on local & remote machines
– Home page = "index.html“
– “index.html” stored in folder “main”
– “http::/www.site.com/main/” will display “index”
– If home page has different name, then it needs to be named
Digital Media Production
© Anselm Spoerri
Web Design Overview
Sources
– Steve Krug’s “Don't make me think!”
– Alison Head’s “Design Wise”
– Yale Web Style Guidelines
Guiding Principles
User Behavior
Basics
Home Page
Lack of Control
Search & Testing
Digital Media Production
© Anselm Spoerri
Web Guiding Principles
Diversity of Users & Rapid Change
– Diverse users, diverse computers, diverse skills, diverse …
– Rapid evolution of technology and expectations
– Short attention span
Common Sense
– No right way to design
Make it short
– More likely to be used and remembered
Don't make me think
– Get rid of question marks - each item has clear purpose
Make it work at a glance
– People have little time
Support intented task - manage expectations
Digital Media Production
© Anselm Spoerri
Web User Behavior
Digital Media Production
© Anselm Spoerri
Web User Behavior
Digital Media Production
(cont.)
© Anselm Spoerri
Web User Behavior
Digital Media Production
(cont.)
© Anselm Spoerri
Web User Behavior
Digital Media Production
(cont.)
© Anselm Spoerri
Web User Behavior
Digital Media Production
(cont.)
© Anselm Spoerri
Web User Behavior
Scan pages
(cont.)
- don't read them
Look for anything = Search Interest
Decide quickly
– Eye-tracking studies
Choose first “reasonable item”
Muddle through
– Don't figure out how things work
Resist forming models
Stick to what works
Digital Media Production
© Anselm Spoerri
Web Design - Basics
 Stay above the fold
800 X 600 good
Digital Media Production
© Anselm Spoerri
Web Design – Basics
Digital Media Production
(cont.)
© Anselm Spoerri
Web Design – Basics
Digital Media Production
(cont.)
© Anselm Spoerri
Web Design – Basics
Digital Media Production
(cont.)
© Anselm Spoerri
Web Design – Basics
Digital Media Production
(cont.)
© Anselm Spoerri
Web Design – Basics
(cont.)
Design for scanning, not reading
– Visual Hierarchy
– Visual contrast - size, bold, color
– Important things = Visually prominent
– Related things = Spatially close, Nested
– Avoid “noise"
– Leverage Conventions
– Clear what's clickable
– Use underline and/or color coding
Less is more
– Cut ½ of words, then cut ½.
Digital Media Production
© Anselm Spoerri
Home Page Design
Home Page
– Identity & Mission, Hierarchy, Search, Timely Content,
Short-cuts, Registration.
– Everybody wants a piece
Answers Easily
– What can I do here?
– Why should be here?
– Where do I start?
Tagline is Important
– Clear, informative, concise
– Differentiated, clear benefits
– Personable, lively, sometimes clever
Problems with Pull-downs
– Hard to scan, Twitchy
– Have to seek them out
Digital Media Production
© Anselm Spoerri
Web Design – Lack of Control
Experience not the same
Limited Control over Web Display
Visual Appearance depends on
–
–
–
–
–
–
Type of computer - Windows vs. Mac
Monitor color resolution
Speed of Internet connection
Browser: Microsoft vs. Firefox vs. Safari - don't support same features
Default font may be different
Styles may differ
Digital Media Production
© Anselm Spoerri
Web Design – Search & Testing
Search Options
– Confuse and increase chances for failure
– Seldom worth the additional cognitive cost
– Amazon has no options at first - first experience is successful.
Typical Problems
– Users are unclear on the concept
– Words users are looking for aren't there
– There is too much going on
Great Site requires Testing
Digital Media Production
© Anselm Spoerri
Web Site Navigation 1
"Back" clicked 30-40%
Easy to figure out
“You are here”
Things at current level
Return to higher-levels and home page
Easy search and indexes
Easy feedback
Persistent navigation creates comfort
– “Home” and “forms” pages can be exemption
Digital Media Production
© Anselm Spoerri
Web Site Navigation 2
Top-level Navigation
–
–
–
–
Top Row or Left Column
Icons, image-maps, textual, pull-down
Highlight or color currently selected
To frame or not to frame?
Second-level Navigation
– Below Top Line or Left Column
Breadcrumbs
– SCILS > Information Library Studies > Courses > Graduate
Novel Navigation Metaphors
– TheBrain
– Star Tree for FlashKit by Inxight Software
Digital Media Production
© Anselm Spoerri
User Behavior – Summary
Scan pages - don't read them
Look for anything = Search Interest
Decide quickly
Choose first “reasonable item”
Muddle through
Don't figure out how things work
Resist forming models
Stick to what works
Digital Media Production
© Anselm Spoerri
Design Implications
Scan pages - don't read them
• Design for Scanning
Make text short - cut words
• Make page work at a glance
Sufficient left margin,
640x480 = main message
• Create Visual Hierarchy
Look for anything = Search Interest
Decide quickly
Choose first “reasonable item”
• Make obvious what you can do on a page
Muddle through
Don't figure out how things work
Resist forming models
• Don't make users think
Stick to what works
• Repetition & Consistency
• Make obvious what is clickable
Get rid of question marks
Each item = clear purpose
Grid Layout, Easy Navigation, Graphics,
Color Coding, Typography
Digital Media Production
© Anselm Spoerri
HTTP – HyperText Transfer Protocol
Protocol to Exchange Information over the Web
Internet  Web
– Internet = Collection of Global Networks
– Web: way to manage information exchange
There are many other uses for the Internet
– File transfer (FTP)
– Email (SMTP, POP, IMAP)
Digital Media Production
© Anselm Spoerri
Web Basics – URL
URL - Uniform Resource Locator
"http://www.abc.com/aaa/bbb/ccc.html"
http://" - hypertext transfer protocol - scheme
"
www.abc.com/" - server name
"
- domain name, owner, host
/aaa/bbb/ccc.html" - path
"
through
folder hierarchy
What is
– Server Name for SCI ?
– Path for MLIS program?
Digital Media Production
© Anselm Spoerri
Web Basics – URL
(cont.)
URL Basics
– Absolute URL
– "http://www.abc.com/aaa/bbb/ccc.html"
– "Complete street address"
– Info located on external server
– Relative URL
– "../../../xxx/yyy.htm"
– "../" = up 1 level => up 3 levels,
then subdir "xxx" to get to "yyy.htm"
– "Direction to neighbor's house"
– Anchor (same page), Internal (local)
Default “Home” Page = index.html
– Keeps out prying eyes out of directories (also instructor :)
Digital Media Production
© Anselm Spoerri
Web Standards
URL
– Where to find it
HTTP
– How to get it
HTML
– How to write and interpret the information
– Simple Document Structure Language for Web
– Advantages
– Adapts easily to different display capabilities
– Widely available display software (browsers)
– Disadvantages
– Does not directly control layout
Digital Media Production
© Anselm Spoerri
Web Basics – HTML Elements & Tags
HTML is made up of elements
• Elements are denoted in HTML by using
tags
• For the most part, you will enclose content you
are marking up in between tags
• Tags look like this: <tag>Content</tag>
(read as: open tag, content, close tag)
• Three major elements needed for an HTML page
• <html> - container for all of our HTML code
• <head> - put data for browser and other machines
• <body> - put content to show to the user
Digital Media Production
© Anselm Spoerri
HTML – Example
<html>
<head>
Machine readable code (metadata) goes here
</head>
<body>
User readable content goes here
</body>
</html>
Some text elements
<p>, <h1>, <h2>, <h3>, <ul>, <li>
paragraph, heading 1, heading 2, heading 3, unordered list, list item
Other elements
<img>, <a>, <strong>, <em>
image, anchor, strong, emphasis
Digital Media Production
© Anselm Spoerri
HTML – Block-level vs. Inline Elements
Block-level elements
(<p>, <h1>, <h2>, etc.)
• take up their own space vertically.
• force elements after them to jump to next line.
Inline-level elements
(<a>, <img>, <strong>, <em>, etc.)
• do not take up their own vertical space
• can be placed inside of other elements.
Note: cannot place a block-level element inside of
inline-level element
document will not validate properly if you do
Digital Media Production
© Anselm Spoerri
Basic HTML
Add Headings and Paragraphs
– <h1> </h1> header level one
– <h2> </h2> header level two
– <p> </p> paragraph
Adding emphasis to text
– <b></b>, <i></i>, <strong></strong>
Add links to other pages
Use various kinds of lists
Add images
Digital Media Production
© Anselm Spoerri
XHTML
XML = Language for creating other languages
– Custom markup language that contains tags for describe the data
that they contain.
– If a tag identifies the data, then the data becomes available for other
tasks.
– Not as lenient as HTML.
XHTML = HTML rewritten in XML
XHTML: Keep code Consistent & Well Structured
Use “Transitional” XHTML
– Allows for the use of deprecated HTML tags
Digital Media Production
© Anselm Spoerri
XHTML – Examples
XHTML elements must be in correct order
<p><em>Content</p></em>
 <p><em>Content</em></p>
XHTML elements must close
<p>Content
 <p>Content</p>
XHTML elements must be lowercase
<P>

<p>
XHTML documents must have one root
(Only one <html> element per document; no frames)
Digital Media Production
© Anselm Spoerri
XHTML – Examples
HTML = Orange
XHTML = Green
<p><i>Content</i></p>
<p><b>Content</b></p>
<p><em>Content</em></p>
<p><strong>Content</strong></p>
<br>
<br />
Digital Media Production
© Anselm Spoerri
XHTML – DOCTYPE declaration
Validation
‒ HTML = very forgiving markup language
‒ If content validates to a standard
 better optimized for search engines
‒ DOCTYPE = XHTML Transitional standard
(first line in html file)
‒
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
‒ Encoding specified inside <head>
‒ <meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
‒ http://validator.w3.org/
‒
More info: http://www.w3schools.com/Xhtml/xhtml_validate.asp
Digital Media Production
© Anselm Spoerri
XHTML – Page Layout
Two methods for creating Web Page Layout
‒ Tables (this lecture)
‒ DIVs and CSS (next lecture)
Table <table> <tr> <td> </td> </tr> </table>
‒ <table>
table
‒ <tr>
row
‒ <th>
header
‒ <td>
cell
‒ <table border="2" cellpadding="5">
‒ <tr width="100" height="50" valign="top">
‒ <td colspan="2"> <td rowspan="2">
Digital Media Production
© Anselm Spoerri
Table Example
<table>
<tr><td>
1.1
</td><td>
1.2
</td><td>
<tr><td>
<tr><td>
1.3
</td> </tr>
2.1
</td><td>
2.2
</td><td>
2.3
</td> </tr>
3.1
</td><td>
3.2
</td><td>
3.3
</td> </tr>
</table>
Digital Media Production
© Anselm Spoerri
Basic XHTML – Essential Elements to Include
<!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>
– <title>My Page</title>
– <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<body>
–
–
–
–
–
Headers: <h1> <h2> <h3> <h4> <h5>
Paragraphs:<p>
Tables: <table> <tr> <td> </td> </tr> </table>
Lists: <ol>, <ul> (can be nested)
Adding emphasis to text : <b>, <i>, <strong>
Add links to other pages (relative & absolute)
Add images
Font specification:
Digital Media Production
<font face="Arial" color="#000099">Text</font>
© Anselm Spoerri
Hyperlinks
<a> hyperlink tag
Use Attributes and Values
<a href="absolute or relative pathname"
target="_self"
[opens page in same browser window]
target="_blank" [opens page in new browser window]
>
Text of Hyperlink
</a>
Create Anchor: <a name="anchor name">
Link to Anchor: <a href="#anchor name">
Digital Media Production
© Anselm Spoerri
Images
<img> image tag
Use Attributes and Values
(src and alt are required to be valid XHTML)
<img src="pathname"
alt="my image"
[text to appear if image does not show]
height="100" width="100" [improves time to load page]
align="left" [image floats on left, text flows on right]
hspace="5" [deprecated for CSS]
vspace="5" [deprecated for CSS]
/>
[XHTML requires />]
Floating image needs to be placed right before text that
needs to flow or wrap around it.
<br clear="left" />
Digital Media Production
[stops elements from wrapping]
© Anselm Spoerri
Text Editor for Creating Web Pages
Windows: NotePad++
(will be used in demos)
http://sourceforge.net/projects/notepad-plus/
Mac: TextWrangler
http://www.barebones.com/products/textwrangler/
Download & Install before proceeding :)
Digital Media Production
© Anselm Spoerri
FTP – File Transfer Program and Key Ideas
Move Files between Machines
– Upload (put) moves from client to server
– Download (get) moves files from server to client
Both visual and command line interfaces available
Want to send package to
John Smith in USA
What is missing?
Want to Transfer File to Server – FTP
Need to know
• Server Address
• Username & Password
Digital Media Production
© Anselm Spoerri
FTP – File Transfer Protocol
Windows / Mac: Filezilla
http://filezilla-project.org/
Windows: WinSCP
http://winscp.net/eng/download.php
Mac: Fugu
http://www.nbcs.rutgers.edu/newdocs/mac_ssl/Fugu.htm
http://rsug.itd.umich.edu/software/fugu/download.html
Mac: Cyberduck
http://cyberduck.ch
To Do
‒ Install Filezilla on your Home computer
Digital Media Production
© Anselm Spoerri
FTP – File Transfer Protocol : Demo
Will use Filezilla FTP client
‒ I will connect from local computer to
“comminfo.rutgers.edu”
‒ You will connect from local computer to
“eden.rutgers.edu”
Digital Media Production
© Anselm Spoerri
FTP – File Transfer Protocol : Filezilla Main Window
SiteManager
Local
Digital Media Production
Remote
© Anselm Spoerri
FTP – File Transfer Protocol : Filezilla Site Manager
SFTP
Host: eden.rutgers.edu
Server Type: SFTP
User: Your Eden Userame
Password: Your Eden Password
Digital Media Production
© Anselm Spoerri
FTP – File Transfer Protocol : Filezilla Site Manager
Local Absolute Path \
Digital Media Production
Remote Absolute Path /
© Anselm Spoerri
Directory and File Permissions
Types of Permissions
– Read : for being able to read the file/directory
– Write : for being able to write in the file/directory
– Execute : for being able to access the file/directory
Who are Permissions set for?
– Owner : you
– Group : group you belong to (e.g., LIS department, etc)
– Others : the rest of the world
Digital Media Production
© Anselm Spoerri
Directory and File Permissions
(cont.)
Want a File to Save/Upload on your eden
account but others can not see/access it
then you should have the following
Owner
- Read(Yes) Write(Yes) Execute(Yes)
Group
- Read(No) Write(No)
Others
- Read(No)
Write(No)
Execute(No)
Execute(No)
700
Digital Media Production
© Anselm Spoerri
Directory and File Permissions
(cont.)
Want people to Access and View your files
(such as your web page which will be stored in directory
“public_html”) you should have the following set up
Owner
- Read(Yes) Write(Yes) Execute(Yes)
Group
- Read(Yes) Write(No)
Others
- Read(Yes)
Write(No)
Execute(Yes)
Execute(Yes)
755
Digital Media Production
© Anselm Spoerri
Difference between FTP and HTTP
FTP – File Transfer Protocol
– Protocol used to upload files from a workstation to a FTP
server or download files from a FTP server to a workstation.
– FTP is a two-way system as files are transferred back and
forth between server and workstation.
– When ftp appears in a URL it means that the user is connecting
to a file server and not a Web server and that some form of file
transfer is going to take place.
HTTP –Hyper Text Transfer Protocol
– Protocol used to transfer files from Web server to Browser
to view a Web page. Unlike FTP, where entire files are
transferred from one device to another and copied into
memory, HTTP only transfers the contents of a web page into a
browser for viewing.
– HTTP is a one-way system as files are transported only from
the server onto the workstation's browser.
– When http appears in a URL it means that the user is
connecting to a Web server and not a file server. The files are
transferred but not downloaded, therefore not copied into the
memory of the receiving device.
Digital Media Production
© Anselm Spoerri
Demo – View Source
Use Web Browser to find page:
http://comminfo.rutgers.edu/~aspoerri/Teaching/DMPOnline/Lectures/Lec2/Steps/notes.html
Use “Page” menu in IE select “View Source”
or “Tools” menu in Firefox select “Web
Developer > Page Source”
– Opens window with source code
Compare HTML source with Web page
– Observe how each effect is achieved
Digital Media Production
© Anselm Spoerri
Demo - Steps
Create Directory on desktop called “507”
– Make sure at the end of class you upload it on your eden
account since it is deleted when you logoff
Go in that directory
Open New File with Notepad++ / TextWrangler
Save as
– Save as type – All files (otherwise saves it as .txt by default)
– File name - test.html
Download the class HTML notes (notes.html)
from class web page
Practice HTML by editing test.html page
Digital Media Production
© Anselm Spoerri
Tips
Save Early, Save Often, just Save!
Reload Browser to see changes
File naming
–No spaces in filenames
– Punctuation matters
–Use lowercase filenames
Digital Media Production
© Anselm Spoerri
Demo – Steps
(cont.)
Upload your work to Your Eden Account
Content needs to be in public_html directory
– If you place “test.html” directly in public_html directory
you can see it
http://eden.rutgers.edu/~yourusername/test.html
– If you place an entire directory “507” in public_html
http://eden.rutgers.edu/~yourusernamelogin/507
you will see the contents of directory
– If the 507 directory contains the file “test.html” and you
want to see just that
http://eden.rutgers.edu/~yourusernamelogin/507/test.html
Digital Media Production
© Anselm Spoerri
URL & Eden – Key Ideas
Want to see public web pages of specific user on Eden
‒ Need to know
‒ Server Address
‒ Username and/or Folder
‒ Where are public web pages physically stored on server?
‒ public_html
‒ What is the URL so that you can access it via Browser?
‒ http://serveraddress/~username
‒ Why is public_html is not part of URL?
Digital Media Production
© Anselm Spoerri
Exercise 1
Exercise 1: HTML/XHTML – Create Project Outline
‒
Create at least 3 web pages.
‒
Use a table to structure the page so that it has:
‒ 3 columns: 50 | 500 | 100 pixels wide
‒ 4 rows: 50 | 50 | 500 | 50 pixels high
‒
Each page has one h1 tag and at least one h2 tag
Sans-serif font is used at least one word is bolded and italized
‒
Simple navigation structure using relative hyperlinks.
‒
Include at least one absolute hyperlink per page.
‒
Edit images found on flickr.com using free online tool.
Embed at least one image per page and text flows around it
Due Week 4
•
Submit URL of your Ex1 page that is stored on Eden server
Digital Media Production
© Anselm Spoerri
Exercise 1 Demo – Step 1
Create folder = “ex1” inside your “507” folder
Open New File with Notepad++ / TextWrangler
– Save as type – All files (otherwise saves it as .txt by default)
– File name - ex1_page1.html
– Add doctype, encoding and title and essential elements
(make sure to have closing tags)
Upload File to Eden, Set Permissions, Test in Browser
Digital Media Production
© Anselm Spoerri
Exercise 1 Demo – Step 2
Create Table
– One row with three cells and height = 50 and widths as
indicated in Ex2
– Add following text “1.1”, “1.2”, “1.3” to respective cells
Add Font specification so that text in table is shown Arial
and dark blue
Save Page
Upload File to Eden and Test in Browser
Digital Media Production
© Anselm Spoerri
Exercise 1 Demo – Step 3
Copy 1st Row code
Create 2nd Row by pasting copied code and customize
– Height = 50 and widths as indicated in Ex1
– Add following text “2.1”, “2.2”, “2.3” to respective cells
Create 3rd Row by pasting copied code and customize
– Height = 500 and widths as indicated in Ex1
– Add following text “3.1”, “3.2”, “3.3” to respective cells
Create 4th Row by pasting copied code and customize
– Height = 50 and widths as indicated in Ex1
– Add following text “4.1”, “4.2”, “4.3” to respective cells
Save Page
Upload File to Eden and Test in Browser
Digital Media Production
© Anselm Spoerri
Exercise 1 Demo – Step 4
Enter Following Content into 3rd Row and 2nd Column:
Heading 1 tag “Heading1”
Paragraph tag “Intro paragraph”
Heading 2 tag “Heading2”
Paragraph “Follow-up paragraph”
Save Page
Upload File to Eden and Test in Browser
Make sure content in 3rd row is top aligned
Digital Media Production
© Anselm Spoerri
Exercise 1 Demo – Step 5
Find Image and Save to Hard Disk
Insert Image before “follow-up” paragraph
Specify Height, Width, Alternate Text, Left Alignment
Save Page
Upload File to Eden and Test in Browser
Make sure there is visual gap between image and text
Digital Media Production
© Anselm Spoerri
Exercise 1 Demo – Step 6
Enter Following Content into 1st Row and 2nd Column:
“Page1 | Page2”
Attach relative hyperlink to “Page1” so that it links to
page “ex1_page1.html”
Attach relative hyperlink to “Page2” so that it links to
page “ex1_page2.html”
Save Page
Upload File to Eden and Test in Browser
Create “ex1_page2.html” page using Save As
Customize page
Upload File to Eden, Set Permissions and Test in Browser
Digital Media Production
© Anselm Spoerri
Exercise 1 Demo – Step 7
Create “you are here” indicator in Navigation Structure
Select “PageN” on “ex2_pageN” and remove hyperlink
Select “PageN” and make it bold
Select “PageN” and set font color to red ["#FF0000"]
Save Page
Upload File to Eden and Test in Browser
You will need to Validate Your Pages using
http://validator.w3.org/
[instructor will let you know which errors you can ignore]
Digital Media Production
© Anselm Spoerri