Information Visualization Course

1. Information Visualization Course Web Design Prof. Anselm Spoerri aspoerri@rutgers.edu

2. Lecture 5– Overview • Meaning • Web Design Matrix: User Behavior  Design Implications  Design Specifics • Writing for the Web • Mechanics • Testing & Debugging Web Pages  Check Easy Stuff First • CSS • Recap • DIVs and Linear “Natural Flow” • Box Model • Floating Elements • HTML 5: Key Concepts • Exercise 1: Key Steps & Reminder • Image Editing using Fireworks • Web Graphics • Fireworks: Toolbox | Image Size & Resolution | Image Preview |Demo Steps • Image Composition Principles

3. Web User Behavior 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

4. Web Design Implications Scan pages - don't read them • Design for Scanning • Make page work at a glance • Create Visual Hierarchy Look for anything = Search Interest Decide quickly Choose first “reasonable item” • Make obvious what you can do on a page • Make obvious what is clickable Muddle through Don't figure out how things work Resist forming models • Don't make users think • Stick to what works • Repetition & Consistency

5. User Behavior  Design Implications  Design Specifics User BehaviorDesign Implications User Behavior  Design Implications  Design Specifics Scan pages - don't read them • Design for ScanningMake text short - cut words • Make page work at a glanceSufficient 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 • Make obvious what is clickable Muddle through Don't figure out how things work Resist forming models • Don't make users thinkGet rid of question marksEach item = clear purpose • Stick to what works • Repetition & ConsistencyGrid Layout, Easy Navigation, • Graphics,Color Coding, Typography • 1 Use Grid System • Maintain ConsistencyHelps you decide: location of primary & secondary navigation; location and sizes of images; location of headlines, main text, annotations etc. • Create Visual Hierarchy & Rhythm • Present Information Clearly & LogicallyUsers can read info more quickly.Facilitates understanding and recall. • Invisible Hand guiding users and creating sense of place

6. User Behavior  Design Implications  Design Specifics User BehaviorDesign Implications User Behavior  Design Implications  Design Specifics Scan pages - don't read them • Design for ScanningMake text short - cut words • Make page work at a glanceSufficient 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 • Make obvious what is clickable Muddle through Don't figure out how things work Resist forming models • Don't make users thinkGet rid of question marksEach item = clear purpose • Stick to what works • Repetition & ConsistencyGrid Layout, Easy Navigation, • Graphics,Color Coding, Typography • 2 Create Visual Hierarchy & Guide Eye • Important Things = Visually Prominent(More Important = Larger / Sharp Contrast)Use headlines to guide the eye • Visual ContrastUse sharp changes in size (headline), light intensity (bold), color, texture, motion to create contrast. • Proximity: related things spatially closeSpatial separation = conceptual separation.Don't mix alignment styles. • Use Grouping & Nesting to Increase Information Density(Short-term Memory = 3-7)Use bounding shapes.

7. User Behavior  Design Implications  Design Specifics User BehaviorDesign Implications User Behavior  Design Implications  Design Specifics Scan pages - don't read them • Design for ScanningMake text short - cut words • Make page work at a glanceSufficient 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 • Make obvious what is clickable Muddle through Don't figure out how things work Resist forming models • Don't make users thinkGet rid of question marksEach item = clear purpose • Stick to what works • Repetition & ConsistencyGrid Layout, Easy Navigation, • Graphics,Color Coding, Typography • 3 Typography Heuristics • Sans Serif type is easier to read on screen • Type size 10 -14 points • 7 - 10 words per line • Column width proportional to type size • Bold and italic for small blocks of text • Enough contrast between type & background

8. User Behavior  Design Implications  Design Specifics User BehaviorDesign Implications User Behavior  Design Implications  Design Specifics Scan pages - don't read them • Design for Scanning • Make page work at a glance • Create Visual Hierarchy Choose first “reasonable item” • Make obvious what you can do Muddle through • Don't make users think • Stick to what works • Repetition & Consistency 1 Use Grid System 2 Create Visual Hierarchy and Guide Eye 3 Typography Heuristics

9. Requirements for Web Pages Web Page needs to easily answer Web Navigation needs to easily answer • What can I do here?  Layout Presents Info Clearly & LogicallyFacilitates Understanding & Recall • Where do I start?  Visual Hierarchy Guides Eye to Important Things • What site is this?  Site ID – logo, image, text • What page am I on?  Page name • Major sections of site?  Primary Navigation Top Row or Left Column Simple text hyperlinks, icons, rollovers, image-maps, pull-downs • Options at this level?  Secondary Navigation Below Top Line or Left Column  Expanding / Nesting Hierarchies Static or Dynamic Outlines • Where I am? Go higher or home?  Color Coding, BreadcrumbsPrimary / Secondary Navigation

10. Primary Navigation Site ID Secondary Navigation Layout  Visual Hierarchy & Navigation Page Name Intro Text aaaaaaaaaaa bbbbbbbbbbb Intro Text aaaaaaaaaaa bbbbbbbbbbb Text or Thumbnails

11. Secondary Navigation Primary Navigation Site ID Layout  Visual Hierarchy & Navigation Page Name Intro Text Text or Thumbnails

12. Writing for the Web • Concise, SCANABLE and Objective • By Jacob Nielsen • People scan page • Study: 79% always scanned + only 16 % read word-by-word. • Make pages “scanable” • Start with conclusion • One idea per paragraph • Half the word count (or less) than conventional writing • Highlighted keywords • Meaningful sub-headings (not "clever" ones) • Bulleted lists • Credibility important and increased by: • High-quality graphics • Good writing • Use of outbound hyperlinks

13. Testing & Debugging Web Pages • Before looking for a big problem, check common little problems :) • Work incrementally • Use process of elimination (use comments to make code active / inactive). • Be careful about typos. • In CSS, not sure if the problem is with the property or the selector, use a very simple declaration (color: red).

14. Check Easy Stuff First - General • Refresh browser so that latest file is shown • Upload actual file and refresh browser so that latest file is shown • Upload file in the correct location • Make sure you save file • Upload any related files: CSS, images, SWF etc. • Make sure spelling of URL = spelling of filename. • Test in multiple browsers • Test on different computer than the one used to create the files

15. Check Easy Stuff First – HTML & XHTML • HTML • Make sure you used correct spelling of tags (DW should help with this) • Be careful about nesting and make sure you have closing tags • Use HTML Transitional • XHTML • Make sure all attribute value enclosed in straight, not curly, quotes (DW helps with this) • All elements have opening and closing tags (always put space before /). • XHTML is case-sensitive. • Include # when specifying hexadecimal colors (DW helps with this).

16. Check Easy Stuff First – CSS • Use colon (:) to separate your properties from value (color: red;). • Complete each property-value pair with semicolon (;) • No spaces between number and their units (16px). • Close brackets. • Don’t quote values. • Use accepted value (DW helps with this). • Don’t forget closing < /style> tag. • Make sure linked (X)HTML document to the proper CSS file(s). • Watch the spaces and punctuation between selectors. • Want <span class=“X”><a>link</a></span>

17. Check Easy Stuff First – Testing Your Page • Validate (X)HTML and CSS. • Open in Browser • Formatting correct? • Hyperlinks work & correct? • CSS file referenced properly? • All images appear?If not, check the easy stuff first, especially spelling of filenames and don’t use spaces in filenames and saved as GIF or JPEG. • Upload files to server (and set permissions if needed). • View pages in different browsers. • Still Stuck check for typos and check easy stuff first :)

18. Recap – Web Basics: CSS • CSS = Cascading Style Sheets Why use them? Ensure Consistent Treatment of Page Layout and Appearance in BrowsersSeparation of Content from PresentationSimpler and Cleaner HTML code  shorter loading times What can they do? Control Appearance of web page: blocks and text Where store them? External CSS file of web page: blocks and textEasier to Maintain Appearance since Make Change in Single Location

19. Recap – CSS: Selectors Summary and CSS Validator • Combining Selectors • Define Context div#intro • Spell out Element’s Name div#introp • Specify Class or Id of desired element div#introp.firstP • Specify Pseudo-class or Pseudo-element div#introp.firstP:first-letter example • CSS Validator http://jigsaw.w3.org/css-validator/

20. Recap – CSS: Cascade • Cascade: Inheritance, Specificity and Location. • Inheritance example • Html = Hierarchical Structure • Many properties, but not all, inherited by descendants of elements • Specificity example • The more specific the selector, the stronger the rule How do you create a specific CSS rule? • tag class (.name) id (#name)  context • Location example • Rules that appear later have more weight. •  Inherit from Parent  The More Specific the rule, the More Weight •  The one that Appears Later Wins.

21. Mechanics – CSS: DIVs and Linear “Natural Flow” • DIV and SPAN • Block Elementof content (<div> always new line) • Inline Elementdisplayed in current line (<span>) • Parents and Children = Hierarchy of Tags • elements contain other elements; • each element must be properly nested and have closing tags. • Structure Your Pages • Divide logical sections of document into div elements  Linear sequence of divs • Use header elements (h1, h2 …) • Use comments/* comments help */ • Linear “Natural Flow” by default • Elements displayed as (X)HTML flows from top to bottom with line breaks at beginning and end of each block-level element.

22. Mechanics – CSS: Box Model • Box Model = every element is enclosed in Invisible Box • Width and Height can be specified • Border : can specify all four borders separately also specify border-style: type; border-width: n; border-color: color; • Padding = space surrounding content inside of box (all four sides can be specified separately) • Margin = invisible space around border of box (-top, -bottom,-left, -right, auto) • Overflow : elements are not always contained in their boxes; can be: visible; hidden, scroll; auto (scroll appears when needed). • If width, margin, border and padding don’t equal size of containing block something’s got to give :)

23. Mechanics – CSS: Floating Elements • Making Elements Float so that they float in a sea of text • float: left / right  element is on left / right  text flows on right / left. • clear: left / right / both / none to keep elements from floating on left / right / both sides and none lets elements float on either side. • clear property stops affected element from displaying until designated side is free. • Add clear property to elements whose sides you want to be clear of floating elements. <div id=“yellow”> <div id=“green”> float:left float:left clear: left http://comminfo.rutgers.edu/~aspoerri/Teaching/WebDesign/Lectures/Lec5/Steps/float_and_clear.html

24. Floating DIVs – Demo Steps • Step-by-Step files: • http://comminfo.rutgers.edu/~aspoerri/Teaching/WebDesign/Lectures/Lec5/Steps/ • Step 1 – Create External CSS file • Step 2 – Add Floating Sidebar • Step 3 – Non-floating Footer and Floating Image • Step 4 – Embed YouTube Video / Screencast

25. Step 1 – Create External CSS file • Step 1 • Download fromhttp://comminfo.rutgers.edu/~aspoerri/Teaching/WebDesign/Lectures/Lec5/Steps • “start.html” • Create External CSS file “styles.css” Add at the top of file: @charset "utf-8"; /* CSS Document */ • Copy and Paste “Clean Slate” Code and Comment it Out • Place /* before “Clean Slate” code and */ after it (code goes gray) • Cut & Paste “start.html” Internal CSS Code into external CSS file • Save styles.css • Save “start.html” As “float_step1.html” (page loses formatting) • Create link to external CSS file in web page • <link rel="stylesheet" href=“styles.css" type="text/css" />

26. Step 2 – Add Floating Sidebar • Step 2 • Create Div with id=“rightSidebar” • Place this div in HTML hierarchy as child of “pageContent” div and before “content” div • Specify CSS Internally and then later move to external file <style type="text/css"> </style> • Create CSS code for Div with id=“rightSidebar” float:right; width:120px; height:100px; margin-top:20px; margin-left:10px; margin-bottom:10px; padding:5px; border-width:thin; border-style:solid; border-color:#C1F3BC; border-top: 20px solid #C1F3BC;

27. Step 3 – Non-floating Footer and Floating Image on Left • Step 3 • Specify CSS code clear:both for “footer” div clear:both; margin-top:10px; • Create DIV and Insert Image Create <div> after h1 Insert image <img src="116.jpg" alt="Intro Image" width="100" height="100" /> • Specify class=“floatLeft” and apply to DIV with Image float:left; margin-right:10px; margin-bottom:10px; border:medium; border-style:solid; border-color:black; • Add enough text in opening paragraph so that it wraps around image and sidebar

28. Step 4 – Embed YouTube Video / Screencast • Step 4 • Create DIV for Video / Screencast Create <div> after opening paragraph • Insert Table: Single Row and Two Cells • Copy & Paste YouTube Embed Code into Cell http://www.youtube.com/watch?v=h9bwDx1Vrm4 Make sure to set width = 200 and height = 150 in two places in <object> code • Copy & Paste Screencast into Cell Same steps as for YouTube video … embed on different page • Next Stepsmove Internal CSS code to External CSS file and remove comments for “clean slate” code and specify CSS rules that are needed and format page to create your visual look

29. HTML5 – Intro • Why HTML5? • Reduce the need for external plugins (like Flash) • Better error handling • More markup to replace scripting • HTML5 should be device independent • Based on HTML, CSS, DOM, and JavaScript • What is HTML5 • HTML5 specification – http://dev.w3.org/html5/spec/ • Officially Working Draft | “living standard” • Browser Support for HTML5 • HTML5 not yet official standard, no browser provides full HTML5 support. • But all major browsers continue to add support for new HTML5 features. • Understanding & implementing features is what matters.

30. HTML5 – New Capabilities • http://www.w3schools.com/html5/default.asp • Video specifies standard way to embed video (no plug-in) • Audio specifies standard way to embed audio (no plug-in) • Drag and Drop any element can be draggable what to drag | where to drop | do the drop • Canvas used to draw graphics, on the fly, on web page • SVG supported Scalable Vector Graphics to draw shapes • Geolocation can determine user's position with permission • Web Storage better local storage within browser than cookies • Web WorkersJavaScript runs in background without affecting page performance • Server-Sent Events page gets automatic updates from server

31. HTML5 – DOCTYPE | charset | lang | CSS & JavaScript links • HTML5 DOCTYPE: <!DOCTYPE html> • not case sensitive | version dropped • all browsers recognize shortened DOCTYPE & render in strict modeand deprecated elements will not work • Specify Character Set: <meta charset="UTF-8" /> • Specify Language: <html lang="en"> • <!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8" /> • Script and Link Declarations: type attribute optional <link rel="stylesheet" href="styles.css" /> <script src="scripts.js"></script>

32. HTML5 – New Elements New Media Elements <audio> sound content <video> video or movie <source> multiple media resources for <video> and <audio> <embed> container for external application or interactive content (a plug-in) <track> text tracks for <video> and <audio> New Form Elements • New form controls, like calendar, date, time, email, url, search New Semantic / Structural Elements • header, nav, aside, section, article and footer • Focus on your content and consider semantics of each element • Use div if you need containing element strictly for style purposes • Some older browsers treat new elements like inline elements header, footer, nav, article, aside, section { display: block; }

33. HTML5 – New Semantic / Structural Elements • header element • Used to contain headline(s) for a page and/or section. • Can contain logos and navigational aids. • nav element • Contains major navigation links. • Often contained by header. • aside element • Contains related information, such as sidebar or pull-quotes. • section element • Contains content that is related or grouped thematically. • Only if its content has own self-contained outline (h1,… h6). • Do not use simply for styling purposes – use divs and spans instead. • article element • Stand-alone content such as a blog entry. • footer element • Contains information about a page and/or section.

34. HTML5 – Element Flowchart http://html5doctor.com/happy-1st-birthday-us/#flowchart

35. CSS3 – Intro • http://www.w3schools.com/css3/default.asp • CSS3 backwards compatible, don’t have to change existing designs. • Borders Rounded, add shadow and use image as border. • Backgrounds new background properties and greater control. • Text Effects newfeatures such as text-shadow or word-wrap. • Fonts can use font you like by including font file on server. • 2D Transforms move, scale, turn, spin and stretch elements. • 3D Transforms format elements using 3D transforms. • Transitions add effect when changing from one style to another, such as on mouseover or mouseout events. • Animations specify CSS style inside @keyframes rule and animation will gradually change from the current style to the new style. • Multiple Columns can create multiple columns for laying out text. • User Interface user can resize elements and other features supported.

36. Exercise 1 – Key Steps & Things to Remember • Set up Local / Remote Site and Upload Files • SFTP | place in public_html • 2 Create First Page | Initialize DW and Page • HTML5doctype • Create Layout using AP Elements • Drag “Draw AP Div” into Design View and position • 4 Convert Layout to HTML5 semantic tags • Select Div in Tag Bar and use Quick Tag Editor • Move Internal CSS to External CSS file • Select CSS rules in CSS Styles Panel, right click and “Move Rules to” • 6 Create Spry Menu Bar with “You Are Here” Indicator • Make sure SpryAssets folder inside of ex1 folder • Copy CSS rules control appearance and add .here in rules • Apply CSS class “here” to appropriate primary navigation link • Secondary Link: primarypage.html#anchorname • Structure Text, Create Anchor & Format Text • Create Named Anchors • Place cursor before headline3 text • Insert > Named Anchor and specify anchor name (use consistent spelling)

37. Recap – Web Graphics • Bitmapped vs. Vector-based Graphics • Web Graphics File Formats • GIF • Cross Platform & Lossless Compression • Indexed Colors • Transparency • Create Animations • Best for: Solid Color, Simple Illustrations Small Photos • JPEG • Cross Platform & LOSSY Compression • No transparency • No Animation • Best for: Photos with Subtle Color Changes • Save Image for Web • RGB Mode • 72 ppi • Indexed Color Mode • Reduced Color Palette (e.g. Adaptive Palette) • Interlaced • Good Form: Alt-labels for Images

38. Web Graphics • PNG • Fireworks saves its documents as PNGs • Best to export PNG content as GIF or JPEG, since PNG can contain content not currently shown and produces larger file size. • Specify image size (width and height) for speedier viewing • DW includes this info automatically in web page. • Scaling image in Web page does not affect download time. • Making images float and have text flow to the right or left of it • Place image directly before the text it should “disrupt”. • Most browser surround clickable images with a border of same color as the links (generally blue): for no border, use a border value = 0. • Deprecated attributes for images • : border; align=”left/right” (use CSS float) • clear (use CSS clear) • <br clear=”left/right” /> (use CSS clear)

39. Fireworks – Setting Stage • Fireworks  Edit Digital Images • Document = Fireworks File = PNG • Document contains Layers which contain Objects • Ease-of-use Features • Property Inspector • Dynamic panel full of options that change as you work • Select Object  inspector shows size, transparency, blending & effects • Select Tool  inspector shows tool properties

40. Fireworks – Setting Stage • Collection of “Layers” You Choreograph • Layer can contain bitmaps, text or vector objects • Stacking order of “acetate layers” with varying transparencies • Manipulate visibility and appearance of layer • Save Your “Fireworks Score” so that you can change it easily  Fireworks file “.png” not equal to JPEG or GIF file • Publish Your Score in Different Formats Export as a GIF or JPEG

41. Blending Control Fireworks – Property Inspector Transparency Control Image Effects Control Can Add or Remove Effects

42. Bitmap graphics are comprised of pixels arranged in a grid. Bitmap graphics are resolution-dependent. Vector graphics describe images using lines and curves, called vectors, that include color and position information. Vector graphics are resolution-independent. Bitmap versus Vector graphics

43. Fireworks – Setting Stage (cont.) • Pixel-based versus Vector-based • Each representation has its on tools! • Want to Perform Operation • Select Object Or Move (selection) cursor across image area and different objects will be highlighted and you can select them  Get Visual Feedback in Image Area which object selected • Select Tool • Perform action(s) • (OK or Cancel Action(s)) • When in “Trouble” … • Make sure you selected intended object

44. Fireworks – Layers Panel • Layers Panel • Options menu • Name, hide, show, and change stacking order of layers and objects etc. • Name Layer or Object • Layers Panel • Double-click layer/object in Layers panel • Type name for layer/object and press Enter • Properties Inspector • Type name in “Name” field • Activate Layer • Click layer in Layers panel • Select object on that layer in Image • Web Layer • Special layer that contains web objects, such as slices & hotspots, used for assigning interactivity to exported Fireworks documents

45. Crop Tool Scale ToolScaling object enlarges or reduces it horizontally, vertically, or in both directions Fireworks Toolbox - Selection Pointer ToolUse to “reveal” and select objects “Behind tool” selects object that is behind another object Subselection Tool selects individual object within a group or points of vector object Small triangle in lower right corner indicates that it is part of a tool group. Click tool icon and hold down mouse button

46. Select Rectangle or Oval Lasso or Polygon Selection Fireworks Toolbox – Pixels = Bitmap Magic WandSelecting areas of similar color You specify range of colors to be included • Remove selection marquee: • Draw another marquee. • Click outside current selection. • Press Esc. • Choose Select > Deselect.

47. Fireworks - Selection • Rectangular or Rounded, Circleor Ellipse Selection • Click tool icon and hold down mouse buttonto choose shape of selection • Square or Circle - hold down shift key while drag mouse • Rounded  Select “Feather” in “Edge” Pull down in Property Inspector (see below) • Specify Size or Proportions

48. Fireworks – Lasso Selection • Lasso Selection • Click tool icon and hold down mouse to choose shape of selection • Both straight-edged and freehand segments possible • Lasso • Hold down mouse and draw shape - release of mouse closes shape • To draw a straight-edged selection border, hold down Alt key (in Windows) and click where segments should begin and end • Polygon • Mouse click creates corner - double click closes polygon

49. Fireworks Toolbox - Vector Write Text - Draw Lines, Paths …

50. Fireworks Toolbox - Colors Colors - Picker, Bucket …