Information Visualization Course

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

2. Lecture 8 – Overview • Interactivity Recap • Simple and Disjointed Rollovers and Image Map • Navigation Structures • Rollovers • Create Navigation using Rollovers – Demo • CSS Navigation using Lists • Exercise 2 Demo • Responsive Layout • Responsive Navigation • Animated Navigation • Simple Navigation using List and CSS • Image Map with Attached Behavior to Show / Hide Elements

3. Recap – Interaction Design • Interactivity Choices • Rollovers • “Jointed” = interact with page element and it changes its appearance  example • “Disjointed” = interact with page element and OTHER elements change  example • Image Maps • Interact with Hotspots = Circle, Rectangle, Polygon  example • AP Elements • Control Visibility  example

4. Recap – Disjointed Rollover 1. Select Graphic 2. Select “+” in Behavior Window 3. Select “Swap Image” 4. Select Image(s) to swap and browse to replacement image (* indicator now next to image) 5. Select “Preload Images” Importance of NAMING your graphic elements

5. Recap – “Behavior Management” • Changing Which Event Triggers Action • Select Event in “Behaviors” Window • Press on black triangleand pull down menu appears • Select which event triggers behavior(mouse click or mouse over etc.) • Multiple Behaviors • Can attach multiple actions to same object • Action for “MouseOver” (Default) • Action for “MouseClick” • Etc. • Press “+” icon and select

6. Recap – Image Map • Create Hotspot(s) • Select Image • Select hotspot tool in “Properties Inspector” • Make sure all Property Inspector options visible (if not, click bottom right triangle) • Rectangle / Circle: draw shape over hotspot region • Polygon: trace contour of hotspot region by clicking mouse • Select Hopsot using “hotspot selection arrow” • Attach Behavior

7. Navigation - Overview • Want to indicate “You are here” • Want interactive navigation elements • Move over navigation and its elements indicate “responsiveness” • FOUR Possible States:example “Up” Not selected (button up = not pressed) “Over” Mouse over button that is not selected “Down” Selected (button pressed down) “Over while down” Mouse over selected button

8. Navigation Display Options • Color • White  Red • Grey White • Black  White • Type Style • Regular  Bold • Regular  italics • Type Size • Background Color • Image

9. Demo – Create Navigation using Rollovers • Navigation Structure in Dreamwaver • Create Primary & Secondary Navigation Structures • Use “Rollovers” Why? • More flexibility • Can have many rollovers on same page • Navigation Graphics in Fireworks • How to create text navigation buttons • Download Files and Images • http://comminfo.rutgers.edu/~aspoerri/Teaching/WebDesign/Lectures/Lec8/Steps • Launch Dreamweaver • Initialize • File > New • View > select “Design” • View > Rulers > select “Show” and “Pixels” • Windows > select “Properties” and “Behaviors”

10. Step 1 (CS5) – Create Navigation using Image Rollovers • Insert “UP” Images • Place Cursor inside AP Element intended for navigation • Insert Images and Specify Alternate Text • Assign ID to Selected Image in Property Panel • Create Rollovers • Select image and click on “+” in Behaviors Panel • Select “Swap Image” • In “Swap Image” dialog, select image to swap in on MouseOver • Make sure to select both checkboxes (Preload and Restore) • Create “You Are Here” Indicator • Select image that needs to show “DOWN” image • Change image to DOWN image • Update rollover by double-clicking on “Swap Image” behavior • Change image to be swapped to DOWN image • Consult Also Step 2 Instructions • Final file “home_CS5”

11. Step 2a – Create Navigation Using Rollovers • Why use Rollovers? • There can be only one “Navigation Bar” per page • Want Primary and Secondary Navigation on same page • Easier to copy & paste • Open file “imago0” ( Final file “imago”) • Place Cursor before first image in 2nd navigationSelect “bar” image and press “left arrow” key • Insert > Images Objects > Rollover Image • Image Name = “Imago” • Original Image = “images/secondarynavi/IMAGOS.gif”Want “Down” / Selected image because on “imago” page • Rollover Image = “images/secondarynavi/IMAGOSMO.gif” • Specify hyperlink: browse to “imago” page l

12. Step 2b – Create Navigation Using Rollovers • Open file “poem0” • Need to Change “Up” into “Down for “Poem” category to indicate that we are on the “poems” page. • Select “Poem” image • In Property Window change “Scr”= “PoemsS” • In Behavior Window select “onMouseOver” and doubleclick • In Swap Image dialog select Poems image (has * next to it)and Set Source to = “PoemsSMO” • Final file “poem”

13. Step 3a - Create Images for Navigation • Launch Fireworks • Create file = “navi_categories” • File > New • Specify size: • Height = 30 pixels • Width = as wide as longest category text = 100 • Show Rulers: “View > Rulers” • To ensure that text in the different navigation images is aligned • Create horizontal and vertical guides • Click and drag from corresponding ruler • Position guide on canvas and release mouse button. • Reposition: select “Pointer Tool” and move guide to desired location • Move guide to specific position • Double-click the guide. • Enter new position in the Move Guide dialog box, and click OK.

14. Step 3b - Create Images for Navigation • Open file “navi_categories” • Create text for “UP” button • Unselected state: select 10-14pt, regular • Select “Text tool” and type your category • Automatically creates text object • To change text: select correct object & select text with “Text Tool” • To change color: select “Color Picker” and select new color • To move text: select “Pointer Tool” (you can use arrows)(move so it is centered) • Need to change image area • To enlarge: Image > Canvas Size • To reduce: Use “Crop Tool” (maintain standard height)

15. Step 3c - Create Images for Navigation • Create folder for navigation images • Create images for each state of a navigation category • “Over”: bold typeface and 10-14pt type size (possibly larger than “Up”) • “Up”: regular typeface and 10-14pt type size • Select object that contains “Over” text • Duplicate object (copy & paste) and Name = “xxx Up” • Select text in object and make it regular or smaller … • Center modified text (use “Pointer Tool”) • “Down”: regular typeface, 10-14pt type size and color = red or … • Select object that contains “Up” text • Duplicate object (copy & paste) and Name = “xxx Down” • Select text in object and change its color • “Over while down”: bold typeface, 10-14pt type size (possibly larger than “Down”) and color = red or … • Select object that contains “Over” text • Duplicate object (copy & paste) and Name = “xxx Over While Down” • Select text in new layer and change its color • Make sure the appropriate object are (de)selected for each state • File > Export Preview: select format • File name reflects state it presents • Repeat above for another category

16. CSS – Navigation Bar using Lists and CSS • <ul> • <li><a href="home.html">Home</a></li> • <li class="here"><a href=“features.html">Features</a></li> • </ul> • CSS property - display: block; and float: left; and clear: both; • Hyperlink States: a:link | a:visited | a:focus | a:hover | a:active Navigation = Lists of Links example

17. CSS – Navigation Bar using Lists and CSS (cont.) • Remove Bullets, Eliminate Padding and Margins #naviul { list-style-type: none; padding: 0px; margin: 0px; overflow: hidden; } • Display Link as Block (area of link clickable) and Constrain Width • #navia{display: block;width: 100px; } • Horizontal Navigation • Use floated <li> method for uniform look • #navili { float: left; } • You are Here Indicator • #navili.here a{ text & background properties } • and want CSS rules for different states of hyperlink

18. CSS – Navigation Bar and States of Link Element • Selecting Link Element based on their State Navigation Structure • Since a link can be in more than one state at a time, it is important to define rules in following order: • a:link • a:visited • a:focus • a:hover • a:active  LVFHA a:link, a:visited { color: #FFF; } a:focus, a:hover, a:active { color: #000; } #navi a:link, #navi a:visited { color: #FFF; } #navi a:focus, #navi a:hover, #navi a:active { color: #000; }

19. Demo -Exercise 2 Step–by–Step • Builds on what you created in Exercise 1 and you don't need to create new textual content. • Create Responsive Layout • Background image and screenshots not visible in mobile layout • 2 Create Responsive Navigation Structure • Create #animatedNav and #simpleNavdivs inside nav element • Create responsive CSS rules to make visible / invisible and control height • Create Animated Navigation using jQueryfor Summary • Understand and Customize code • Create Images for UP, Over While UP, DOWN and Over While DOWN • Create Simple Navigation for Mobile Pages • Understand and Customize Navigation using List and CSS • Create “You are Here” Indicator for page • File > Save As to create primary pages and customize “you are here” • Create AP Element that contains Image of Detail • Create Image Map and Attach Show / Hide Behavior • 6 Create Structure and CSS for Question / Answer Pairs • Have Question / Answer surrounded by rounded border

20. Exercise 2 Demo – Responsive Layout • 1 Responsive Layout • Modify > Media Queries … • Select Checkbox = Force devices to report actual width • Add query: Mobile and Max Width = 800px • Create new file: mobile.css • <link href="CSS/mobile.css" rel="stylesheet" type="text/css" media="only screen and (max-width:800px)"> • Create relevant CSS rules in mobile.css • Copy & paste section and header CSS rules to mobile.css • section: width: 90%, left, right: 5%, no float and no transparency • header: width: 480px; color: #000; • background-image: none; • Hide screenshots • Create .controlVisibility { visibility: hidden; height: 0px; } • Reverse rule in mystyles: .controlVisibility { visibility: visible; height: auto; } • Keep only what is different for mobile layout • File > Save All

21. Exercise 2 Demo – Responsive Navigation • 2 Responsive Navigation • Create #animatedNav and #simpleNav divs inside nav element • Create CSS rules to control visibility mystyles.css #animatedNav {visibility: visible; height: auto;} #simpleNav {visibility: hidden; height: 0px; color: #FFF;} mobile.css #animatedNav {visibility: hidden; height: 0px;} #animatedNav ul li a {height: 0px;} #simpleNav {visibility: visible; height: auto;}

22. Exercise 2 Demo – Animated Navigation • 3 Animated Navigation using jQueryfor Summary • Copy & Paste JavaScript code • Copy Code in AnimatedNav_JavaScript_toAdd.txtand Paste after internal CSS in summary.html • Remove Spry Menu Bar JavaScript before </body> • Navigation Images stored in images folder • Images = 320 x 200, Customize, save as “dw_one”, “dw_oneOver” etc. • Link to External CSS file • Download External CSS file and link to it: animated_nav.css • Review & Understand: li#oneNav etc • Replace Spry Menu Bar with Animated Navigtion Code list: <li id="oneNav"><a href=“summary.html">Summary</a></li> etc. • Internal CSS file • li {list-style-type:inherit;} • header and section elements: change top property • nav element: change left property • mobile.css:change header and nav properties as needed

23. Exercise 2 Demo – Simple Navigation • 4 Simple Navigation using List & CSS • Create List with Navigation Links in #simpleNav on all pages unordered list: <li"><a href=“summary.html">Summary</a></li> etc. • Link to External CSS file on all pages • Download External CSS file and link to it: simple_nav.css • Review and Customize to Create YOUR Look & Feel • Create “You Are Here” Indicator • Apply .here to appropriate li item • mobile.css: • Add propperty to #animatedNav: overflow: hidden;

24. Exercise 2 Demo – Image Map and Show/Hide AP Element • 5 Image Map and Show/Hide AP Element • Create AP Element that contains Image of Detail • visibility: hidden; • Create Image Map for screenshot contains detail • Select screenshot and Use Polygon Tool in Properties Panel • Attach “Show / Hide Element” Behavior to Hotsopt • Select hotspot in image map • Behaviors panel: • onMouseOver: Show AP Element with id=“detail” • onMouseOut: Hide AP Element with id=“detail”

25. Exercise 2 Demo – Style Question / Answer Pairs • 6 Style Question / Answer Pairs • Create Needed Structure • Create CSS for Question / Answer Pairs