Information Visualization Course Web Design Prof Anselm Spoerri
Information Visualization Course Web Design Prof. Anselm Spoerri aspoerri@rutgers. edu © Anselm Spoerri
Lecture 6 – Overview Recap – Competitive Site Analysis CSS – Recap: DIVs & Linear “Natural Flow” and Box Model & Floating DIVs – AP Elements more flexible page layouts – Positioning Demo: absolute vs. relative – “Clean Slate” CSS Web Page / CSS Templates – Advantages and Challenges of using Templates – Fixed or Liquid Three Columns Layout Create 1 st Website Using Dreamweaver CS 6 – Flexible Layout – Mobile Layout Dreamweaver: AP Elements Demo © Anselm Spoerri
Group Assignment – Competitive Site Analysis (outline) Competitive Site Analysis Team of Three Group Analyzes where. RU content and site – Use framework of questions presented in class to identify issues and offer brief solutions. – What should be the primary and secondary navigation categories? Why? Each team member selects a different site to analyze – Select site to emulate / learn from for these three types of pages: – Home Page | Browse Page | Individual Item Page – Identify Layout elements, Content items and Interactions supported – Create schematic wireframe of pages and annotate elements to describe their purposes and interactions supported – Explain why to you think the layout, content items and/or interactions are well designed and should be emulated by where. RU Group Recommendation – Which site(s) should where. RU emulate for home, browse and item pages – Provide wireframe sketches for how where. RU can emulate the site(s) © Anselm Spoerri
where. RU http: //whereru. rutgers. edu Target audience? – Prospective Student – Rutgers Community : bring it together – Alumni What do you want the site to accomplish? – Rich Visual Experience – Experience Rutgers Virtually – Put Rutgers on the Map Break Site into Categories – – Location: University | Camden | Newark | New Brunswick Media Types: Gigapan | Photosynth | Video | Virtual Tours Display Types: Showcase | Map | Browse | Individual Item Categories: Architecture & History | Arts & Culture | Athletics | Events | Libraries | Research | Student Life Sites to Emulate? Learn from? © Anselm Spoerri
where. RU – Home Page – Identity & Mission – Timely Content How best to do it? – Search Answers Easily – What can I do here? Typical problem: Users are unclear on the concept How best to explain where. RU concept in concise way? – Why should be here? – Where do I start? © Anselm Spoerri
Recap – 1. Conceptualization and Research Large design firms: more time spent on research and identifying clients' needs than other stages of production. For large sites, includes case studies, interviews, market research. Strategy Why are you creating this web site? What do you expect to accomplish? What are you offering your audience? What do you want users to do on your web site? After they've left? What brings your visitors back? General Site Description What kind of site is it? (Promotional? Info-gathering? Publication? Point of sale? ) What features will it have? What are your most important messages? Who are your competitors? What are they doing right? What could be improved upon? © Anselm Spoerri
Recap – 1. Conceptualization and Research (cont. ) Target Audience Who is your primary audience? How Internet-savvy are they? How technically savvy? Average user's connection speed? Platform? Monitor size? Browser use? How often do you expect them to visit your site? How long will they stay during an average visit? Content Who is responsible for generating original content? How will content be submitted (process and format)? How often will the information be updated (daily, weekly, monthly)? © Anselm Spoerri
Recap – CSS: DIVs and Linear “Natural Flow” DIV and SPAN Block Element of content (<div> always new line) Inline Element displayed 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 (h 1, h 2 …) 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. © Anselm Spoerri
Recap – CSS: 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 : ) © Anselm Spoerri
Recap – 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 clear: left http: //comminfo. rutgers. edu/~aspoerri/Teaching/Web. Design/Lectures/Lec 5/Steps/float_and_clear. html © Anselm Spoerri
Mechanics – CSS: AP Element = AP Div AP Element = Absolutely Positioned Element = AP Div Specify exact coordinates with respect to: • • Body / AP parent element (position: absolute) Browser window (position: fixed) [not all browsers support it] then set top, right, bottom and/or left: value; takes element out of “natural/normal flow” • More Layout Control & Flexibility • • Layout flexibility like in print design Change visibility of AP Elements • Nesting AP Elements • Inherit properties from parent AP Element such as visibility AP elements can overlap specify a stacking order (z-index) to position elements in 3 D. Vertical-align: baseline/ middle / sub / super / top / bottom / text-top / text-bottom © Anselm Spoerri
Mechanics – CSS: AP Element = AP Div (cont. ) position: relative If desired, add position: relative to ancestor element to which you want your absolutely positioned element to be offset; otherwise element will be offset with respect to body or AP parent. relative positioning refers to element’s original position, not the surrounding elements relative AP element will not show up in AP Panel in DW Renaming AP Elements Change ID name in Property Inspector or AP Elements Panel © Anselm Spoerri
AP Elements Panel Window > AP Elements in Standard Mode + Layout View Visibility – open eye = visible; closed eye = hidden; no eye = inherits Stacking Order – The greater the z-index, the higher up in the stack Rename ID name Nesting AP Elements Prevent overlaps checkbox © Anselm Spoerri
Create & Manipulate AP Elements Create AP Element – Standard Mode + Layout View – Insert > Layout Object > AP Div or Click “Draw AP Div” button in “Insert” panel, then drag to draw Manipulate AP Elements – Must select AP Element before you can move, resize, or align it – Resize and move AP Element via its Handles – Align AP Element – Select AP Elements, then Modify > Alignment option – Create Nested AP Elements – Place insertion point inside existing AP Element and choose Insert > Layout > Draw AP Div – Drag Draw AP Element button from Insert panel and drop inside AP Element – Hold Control key and drag AP Element to target AP Element in AP Elements Panel © Anselm Spoerri
AP Div Properties CSS-P Element = ID name (can change here and CSS code gets updated) Position - L and T (left and top) – Relative to top left corner of page or parent AP Element (if nested) Size - W and H specify the width and height of AP Element – Overridden if the content of the AP Element exceeds the specified size Possible Dimensions – px, pt, in, mm, cm, % – Abbreviations must follow the value without a space Z-Index - determines stacking order of the AP Element – Higher-numbered AP Elements appear above lower-numbered AP Elements Visibility - visible, hidden, inherit – Use a scripting language, such as Java. Script, to control the visibility Overflow – what to do if contents of AP Element exceed its set size – Visible (increases AP Element size) Hidden (clips content) Scroll (adds scroll bars) Auto (scroll bars only if excess). © Anselm Spoerri
CSS – Positioning and “Clean Slate” Learn CSS Positioning in 10 Steps http: //www. barelyfitz. com/screencast/html-training/css/positioning/ – position: absolute; – position: relative; CSS: Creating “Clean Slate” html, body, h 1, h 2, h 3, h 4, h 5, h 6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote { padding: 0; margin: 0; font-size: 100%; font-weight: normal; } © Anselm Spoerri
Web Design Templates Lots of HTML+CSS templates available for free. Open relevant HTML and CSS files in Code Editor and customize. First work out design (page structure and CSS), then add content. Skeletal Designs Solve common problem: How to create the basic layout of site. Commonly has header / banner area, content area, sidebar, navigation structure, and footer area. Complete Designs Skeletal layout plus a pre-fab look and feel -- colors, graphics, font choices, borders, accent graphics, starter banners, list styles. Plus: if you can find one close to the look you're going for, you'll have much less work to do. Minus: can be hard to find one that feels "just right, " and it can be harder to customize some aspects of these sites than working up from a lower level. © Anselm Spoerri
Three Columns – Fixed Widths Example <div class="container"> ></div> header s i d e b a r 1 footer content s i d e b a r 2 <div class="header" <div class="sidebar 1"> <!-- float = left; -- > 180 px; --> <!-- width = </div> <div class="content"> <!-- float = left; -- > 600 px; --> <!-- width = </div> <div class="sidebar 2"> > 180 px; --> <!-- float = left; -© Anselm Spoerri <!-width =
Three Columns – Liquid Widths Example <div class="container"> <div class="header" ></div> <div class="sidebar 1"> header s i d e b a r 1 footer content <!-- float = left; --> s i d e b a r 2 <!-- width = 20%; --> </div> <div class="content"> <!-- float = left; --> <!-- width = 60%; --> </div> <div class="sidebar 2"> <!-- float = left; --> <!-- width = 20%; --> </div> <div class="footer" > <!-- clear = both; --> </div> © Anselm Spoerri
Mechanics – Lynda. Campus: 1 st Site using DW CS 6 Flexible Layout Sakai > Resources > Lec 6: index_begin 04. html – AP elements: convert Left, Width from px to % – section element: float to the right and set right marigin as % – Need to set position: relative; so that it moves with page – Background Image to scale and cover – Create new CSS rule for body tag: background-size: cover; © Anselm Spoerri
Mechanics – Lynda. Campus: 1 st Site using DW CS 6 Mobile Layout Sakai > Resources > Lec 6: index_begin 04_3. html – Select Live View to preview page in DW in predefined sizes (remember to unselect if you want to edit page) – Modify > Media Queries … – Select Checkbox = Force devices to report actual width – Add query: Mobile and Max Width = 800 px – Create new file: mobile. css – <link href="CSS/mobile. css" rel="stylesheet" type="text/css" media="only screen and (max-width: 800 px)"> – 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: 480 px; Need to change top for section. – background-size: auto; – Keep only what is different for mobile layout – File > Save All © Anselm Spoerri
Dreamweaver: AP Elements Demo Download Files and Images Demo Use Tracing Image to Guide Placement of AP Elements Use AP Elements to create “disjointed” rollover without need to use GIF or JPEG images example Launch Dreamweaver Panels open: Properties, Insert, AP Elements Show Rulers and Grid Resources Behaviors, Events, Conversion of AP Elements to Table © Anselm Spoerri
Step 1 – Tracing Image Example – File > New: HTML and <blank> Layout and Transitional – Modify > Page Properties : select sans serif typeface – Modify > Page Properties : select “Tracing Image” category – Browse for tracing image = “i-R_Opening_Page” and set transparency = 50% – Standard Mode: – Create main AP Element that will hold other elements L = 0 px; T = 0 px; W = 600 px; H = 600 px view in Split View – Create four AP Elements (along earth contour) nested in main AP Element – Enter text : experiment with size / bolding to create “visual flow” – Experiment with visibility setting of main and/or “children” AP Elements Step-by-Step files: tracingimage 1, tracingimage 2, tracingimage 3 © Anselm Spoerri
Step 2 a – Create AP Elements with Images – Click “Draw AP Div” button in “Insert” panel, then drag to draw – AP Element 0: W = 800; H = 800; ID = Main; – AP Element 1: W = 160; H = 120; ID = Paris; Overflow = hidden; – AP Element 2: W = 160; H = 120; ID = Furcup; Overflow = hidden; – Select AP Elements (using SHIFT select) and apply “Modify > Align = Left” – “Paris” AP Element: Insert image “paris” … Preview in Browser (press F 12 for IE): notice overflow hidden Select image and resize to 160 x 120 and ID = paris Press F 12: whole image now visible – “Furcup” AP Element: Insert image “furcup” and resize to 160 x 120 and ID = furcup © Anselm Spoerri
Step 2 b – Create Text AP Elements and Manage Visibility Open file “layers 1” Create AP Elements with Text – Click “Draw AP Div” (AP Element) button in “Layout” toolbar, then drag to draw – AP Element 3: W = 250, H = 150, ID = Intro. Text, Visibility = Hidden – AP Element 4: select and copy “Intro. Text” AP Element, deselect and paste; rename it “Paris. Text” in AP Elements Panel (notice: new AP element is in exact same position as “Intro. Text” as we want it; but it is not nested inside “Main” AP Element) hold Control key as you drag “Paris. Text” below “Main” – AP Element 5: copy & paste “Intro. Text” and rename “Furcup. Text” Perform same steps as for “Paris. Text” Enter text into AP Elements – Select AP Element in “AP Element” Panel and enter text AP Elements / AP Element Visibility Management – “AP Elements” Window: click in “eye” column to make “Into. Text” = visible and drag “Intro. Text” to top of stack – Make “Paris. Text” and “Furcup. Text” = invisible © Anselm Spoerri
Step 2 c – Use AP Elements to create “disjointed” rollover Open file “layers 2” Attach “Show-Hide Elements” Behavior – Select “paris” image (can also select AP div that contains image) – “Behavior” Window: click “+” and select “Show-Hide Elements” – “Show Hide Elements” Dialog: select “Intro. Text” and “hide” – “Paris. Text” = show and “”Furcup. Text” = hide – “Behavior” Window: select event associated with “paris” image and click on pull-down menu to select “(on. Mouse. Over)” – Attach behavior for “(on. Mouse. Out)” to image “paris” (can also select AP div that contains image) where now “Intro. Text” = show and “Paris. Text” & “Furcup. Text” = hide © Anselm Spoerri
Resources: Behaviors - General How to Attach Behavior to Text – Can not attach a behavior to plain text. – Easiest way is to add a null link (#) to the text, then attach a behavior to the null link. Behaviors Window – Window > Behaviors – Press (+) to attach action. Press (-) to remove selected action. – Actions for a given event are executed in specified order. Use (up) and (down) arrow buttons move the selected action. – Order of execution of actions can be changed only for a particular event, e. g. on. Load or on. Click event. – Different events appear depending on the object selected. Make sure the correct page element or tag is selected. – To select a specific tag, use the tag selector at the bottom left of the Document window. – “Show Events For” specifies the browsers in which the current behavior should work. © Anselm Spoerri
Resources: Events – Useful Subset on. Click – User clicks element and releases mouse on. Dbl. Click – User double-clicks the specified element on. Load – Generated when an image or page is loaded on. Mouse. Down – User presses the mouse button on. Mouse. Over – Mouse first moves over specified element on. Mouse. Up – Generated when a pressed mouse button is released © Anselm Spoerri
- Slides: 28