Info + Web Tech Course Digital Media Production Anselm Spoerri PhD (MIT) SC&I @ Rutgers University aspoerri@rutgers.edu anselm.spoerri@gmail.com 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