information visualization course n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Information Visualization Course PowerPoint Presentation
Download Presentation
Information Visualization Course

Loading in 2 Seconds...

play fullscreen
1 / 25

Information Visualization Course - PowerPoint PPT Presentation


  • 115 Views
  • Uploaded on

Information Visualization Course. Web Design. Prof. Anselm Spoerri aspoerri@rutgers.edu. Lecture 8 – Overview. Interactivity Recap Simple and Disjointed Rollovers and Image Map Navigation Structures Rollovers Create Navigation using Rollovers – Demo CSS Navigation using Lists

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Information Visualization Course' - lucine


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
information visualization course
Information Visualization Course

Web Design

Prof. Anselm Spoerri

aspoerri@rutgers.edu

lecture 8 overview
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
recap interaction design
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

recap disjointed rollover
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

recap behavior management
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
recap image map
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
navigation overview
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

navigation display options
Navigation Display Options
  • Color
    • White  Red
    • Grey White
    • Black  White
  • Type Style
    • Regular  Bold
    • Regular  italics
  • Type Size
  • Background Color
  • Image
demo create navigation using rollovers
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”
step 1 cs5 create navigation using image rollovers
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”
step 2a create navigation using rollovers
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

step 2b create navigation using rollovers
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”
step 3a create images for navigation
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.
step 3b create images for navigation
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)
step 3c create images for navigation
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
css navigation bar using lists and css
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

css navigation bar using lists and css cont
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
css navigation bar and states of link element
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; }

demo exercise 2 step by step
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
exercise 2 demo responsive layout
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
exercise 2 demo responsive navigation
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;}

exercise 2 demo animated navigation
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
exercise 2 demo simple navigation
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;
exercise 2 demo image map and show hide ap element
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”
exercise 2 demo style question answer pairs
Exercise 2 Demo – Style Question / Answer Pairs
  • 6 Style Question / Answer Pairs
    • Create Needed Structure
    • Create CSS for Question / Answer Pairs