Information Visualization Course

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

Lecture 4– Overview XHTML Elements Recap • Hierarchy of Tags • Block and Inline Elements • div | id | class Cascading Style Sheet = CSS • Formatting Rules • Inline | Internal | Externalspecification of CSS rules • CSS Demo • Cascade: Inheritance, Specificity and Location • Create Selectors Exercise 1 Step–by–Step Demo

Recap & New – Web Basics: HTML Elements & Tags • HTML is made up of elements • <tag>Content</tag>(read as: open tag, content, close tag) • Three major elements needed on 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 • Block-level elements  take up own space vertically(<p>, <h1>, <h2>, ...) • <div> page division • Inline-level elements placed inside other elements (<a>, <img>, <strong>, <em>, …)

Page Layout – DIVs • Two methods for creating Web Page Layout • Tables (last lecture) • DIVs and CSS (this lecture) • Structure Your Pages URL • Divide logical sections of document into div elements •  Produces “linear / natural flow” of divs • pageContent • header • navigation • main content • footer <div> <div> header content </div> <div> navigation content </div> <div> main content </div> <div> footer content </div> </div>

Page Structure – Hierarchy & Naming Elements • Body of (X)HTML document encloses Content of Web page. • Breaking up Page into Divisions (DIV) • Creating a Line Break: <br /> • Hierarchical Structure of Web pages • Elements contained inside another element (latter = parent, former = child) • Naming Elements • id="name"can be applied only once  unique #idName {…} define CSS rule • class="name"can be applied many times .className {…} define CSS rule • Useful with div (content blocks) and span (inline text) elements

Page Layout – DIVs with IDs • Name div elements with unique IDs • pageContent • header • navigation • main content • footer <div id="pageContent"> <div id="header"> text/images/links </div> <div id="navi"> text/images/links </div> <div id="content"> text/images/links </div> <div id="footer"> text/images/links </div> </div>

Mechanics – Web Basics: CSS • CSS = Cascading Style Sheets • Collection of Formatting Rules • Control Appearance of web page: blocks and text • Ensure a more Consistent Treatment of Page Layout and Appearance in Browsers • Separation of Content from Presentation • Easier to Maintain Appearance since Make Change in Single Location • Simpler and Cleaner HTML code  shorter loading times

Mechanics – Web Basics: CSS (cont.) • Cascading Style Sheets (CSS) • Control Text properties • Specific fonts and font sizes; bold, italics, underlining, and text shadows; text color and background color; link color and link underlining; etc. • Control Format & Position of Block-level Elements • Set margins and borders for block-level elements; position them in a specific location; add background color; float text around them; etc. • Liquid layouts: expand/contract based on Browser width. • Easy to apply Same Layout to Whole Site and only need to modify external CSS file. • Minus: Not all browsers support CSS the same way. •  DW helps to identify Compatibility Issues

Mechanics – Web Basics: CSS (cont.) • CSS Style Sheet stored • External CSS style sheet (.css file linked to page and using a link or an @import rule in the head section of a document). • Internal (or embedded) CSS style sheet (included in style tag in head portion of an HTML document). • Inline styles (defined within specific tag instance in HTML document) Using Inline styles is not recommended. • CSS Rule = Selector and Block of Declarations • Enclosed by {...} brackets and separated by ; • Declaration = Property: Value;

CSS – General Structure of CSS Rule • Basic syntax for Internal and External CSS: selector {property1: value1; property2: value 2;} HTML tag you want to modify Value you want property to take Property you want to change p { text-align: left; color: black; font-family: Arial; } • causes • Font to be left-aligned • Font to be Arial and black

CSS Rules – id and class Rules in Internal Style Sheet • <head> • <style type="text/css"> • /* Comment: pageContent ID and define font to use for page and the top and left margins as well page width. This pageContent div contains all the other divs */ • #pageContent { • font-family: Verdana, Geneva, sans-serif; • font-size: 12px; • margin-top: 10px; • margin-left: 50px; • width: 500px; • } • /* blue text class */ • .blueText { • color:#009; • } • </style> • </head>

CSS Rules – id and class Rules Applied in <body> • <body> • <div id="pageContent"> • <div id="content"> • <h1>Heading1</h1> • <p class="blueText">Open paragraph</p> • </div> • </div> • </body>

Location of CSS Style Definition • Inline style(causes only the tag to have desired properties) <p style="font-family:Arial; color:blue">Something blue </p> • Internal stylesheet(specific to a document) • Causes all tags in document to have property • <style> tag inside<head> tag of document <head> <style type="text/css"> p { font-family:Arial; color:blue;} </style> </head> • External stylesheet(can control multiple documents) • Ensure consistent appearance of website <head> <link rel="stylesheet" href="mystyle.css" type="text/css" /> </head>

CSS – Cascasde of How Rules are Applied • Style Rules “Cascade” from broad to narrow: • Browser’s Default Behavior • External Style Sheet • Internal Style Sheet • Inline Style

CSS Demo – Step 1 • Step 1 • Create “Blank” HTML Page in DW • Save as “page1.html” • Create nested div structure pageContent, header, navi, content, footer Inside content, create h1 and p block-level elements • Assign id names to DIVs

CSS Demo – Step 2 • Step 2 • Create Internal CSS Style Sheet <style type="text/css"> • Create CSS Rule for id="pageContent" font-family: Verdana, Geneva, sans-serif; font-size: 12px; margin-top: 10px; margin-left: 50px; width: 500px; • Create CSS Rule for class="blueText" color:#009;

CSS Demo – Step 3 • Step 3 • Create CSS Rule for id="header" font-size: 9px; border-bottom-width: thin; border-bottom-style: solid; border-bottom-color: #333; • Create CSS Rule for id="navi" font-size: 14px; background-color: #E1E3F7; padding: 5px; margin-top: 5px;

CSS Demo – Step 4 • Step 4 • Create CSS Rule for id="content" font-size: 12px; • Apply class="blueText" <p> tag inside div with id="content" • Create CSS Rule for id="footer" font-size: 10px; border-top-width: thin; border-top-style: solid; border-top-color: #666;

Mechanics – CSS: Cascade • Cascade: Inheritance, Specificity and Location. • Inheritance • Html = Hierarchical Structure of the content • Specificity • The more specific the selector, the stronger the rule • Location • Rules that appear later have more weight

Mechanics – CSS: Cascade • Cascade: Inheritance, Specificity and Location. • Inheritance • Html = Hierarchical Structure of the content Elements are contained / appear with other elements (h1 resides inside div). • Many properties, but not all, inherited by descendants of elements h1 is blue and has red border … blue is inherited but not red border by elements residing inside h1 element. • Inherited rules are considered the most general of all and are overruled by any other rule. • Specificity • The more specific the selector, the stronger the rule h1 with class X rule will overrule h1 rule. • The id attribute is considered the most specific.

Mechanics – CSS: Cascade • Cascade: Inheritance, Specificity and Location. • Location • Rules that appear later have more weight. Browser  External CSS  Internal CSS  Inline Style • You can declare a rule to be more important than others by adding !important at the end of the rule. • Summary • In the absence of a rule, many styles are inherited from parent element to child. With two competing rules, the more specific the rule, the more weight or importance it has – regardless of its location. With two rules of equal specificity, the one that appears later wins.

Mechanics – CSS: External & Internal Style Sheets • Linking to External Style Sheet • Dreamweaver places <link …/> code inside <head> tag. • Linking to several external style sheets: the later ones take precedence over earlier ones (location principle). • Creating Internal Style Sheet • <style type=”text/css”> … </style> • which can be exported in Dreamweaver. • Internal style sheet overridesexternal style sheets if and only if style tag comes after link tag. • Applying styles locally is not recommended. • To view other designer’s CSS code: view source code of Web page and look at internal style sheet and load URLs for external style sheets.

Mechanics – CSS: Selectors • Selectordetermines which elements the formatting will be applied to. • Declarations define the formatting. • Constructing Selectors that apply formatting based on: • type or name of element (e.g. tag) h1 {color: red;} • context element is found h1 em {color: red;} h1.news {color: red;} div#gaudi p = any p element contained in div whose id is equal to gaudi • class (.name) or id (#name) of an element strong.news {color: red;} div#gaudi {color: red;} • pseudo-class tag:first-line tag:first-letter • Specifying Groups of Elements: h1, h2 {color: red;}

Mechanics – CSS: Selectors (cont.) • 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

Mechanics – 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/

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.

Dreamweaver - Exercise 1 Step–by–Step • 1 Set up Local / Remote Site • 2 Create First Page | Initialize DW and Page • File > New and use HTML5 doctype • Create Layout using AP Elements • Rounded corners; Background transparency • 4 Convert Layout to HTML5 semantic tags • 5 Move Internal CSS to External CSS file • 6 Create Navigation using Spry Menu Bar • Specify primary navigation categories and relative hyperlinks • Specify secondary navigation and anchor links • Customize CSS for Spry Menu Bar • Create “You are Here” Indicator for page • File > Save As to create primary pages and customize “you are here” • Structure Text, Create Anchor & Format Text • 8 Capture, Edit & Insert Screenshots • 9 Upload Files to Remote Site

Dreamweaver – Set up Local / Remote Site • Local Folders • Create folder “320course” or “320” (if does not exist) • Open “320course” folder • Create folders for short assignments and exercises (if do not exist) • Launch Dreamweaver • Creating Folders in Dreamweaver(local or remote) • Site > Site View • Select Folder (into which you want to insert a folder) • File > New Folder • public_html folder • Contains all files that can be viewed by Internet Browser

Step 1 – Set up Local / Remote Site Site > New Site (if don’t already have Site Def on your computer) Select “Site” • Site > Site Name = “320course” for this demo • Site > Local Site Folder = “320course” in “My Documents” Select “Servers" Category in New Site Dialog • Click on + (Add new server) • Specify Server Name • Select “SFTP" in pull-down “Connect using” menu • SFTP Host =“eden.rutgers.edu” • Login = “yourusername” • Password = “yourpassword” • Root Directory = “public_html” Test and if successful Save Connect to Server • Select "Connect to Remote" icon Transfer files to server • Manually • File : drop onto file OR drop into folder that contains file you want to up/download • Folders: drop into folder that contains folder you want to up/download

Step 2a – Create First Page • File > New • Page Type = HTML • DocType = HTML 5 • Layout CSS = Add to Head(will later export CSS into linked external css file) • Click Create • Save Page as “summary.html” in “ex1” folder

Step 2b– Initialize DW and Page • Initialize Dreamweaver • View > select “Design” • View > Rulers > select “Show” and “Pixels” • View > Grid > select “Show Grid”, “Snap to Grid” and specify “Grid Settings” • Windows > select “Insert”, “Properties” and “CSS Styles” • Filename = lowercase and no spaces • Title Page • Modify > Page Properties • Page font = sans serif type, such as Verdana, Ariel, Helvetica • Size = 100% or 10 – 14px (usually) • Text color = white • Background image = screenshot of site being evaluated • Margin fields: set all to zero (if you don’t want any margins)

Step 3 – Create Page Layout using AP Elements • Window > Insert : Layout option selected • Create AP Element for Navigation • Select “Layout” View • Drag “Draw AP Div” from Insert : Layout panel onto page • Position AP Element using Properties Panel • Set Vis = visible in Properties Panel • Unselect AP Element (so that next AP element is not placed inside of it) • Create AP Elements for Header and Content • Assign IDs to AP Elements • Select AP element and in Properties Panel change CSS-P Element slot to • “nav” for navigation AP element • “header” for header AP element • “section” for content AP element • Style Content AP Element using CSS Styles panel • Rounded Border (part of Border properties), Padding (part of Box properties) • Background transparency: use rgba(100,100,100,0.85)

Step 4 – Convert Layout to HTML5 tags • Window > CSS Styles Panel open • Convert CSS for IDs to HTML5 tags • Select “All” in CSS Styles Panel • Select “#nav” CSS rule and change name to “nav” • Select “#header” CSS rule and change name to “header” • Select “#section” CSS rule and change name to “section” • Notice how now AP elements lose their position and are displayed in “linear flow” • Convert AP Elements to HTML5 tags • Select div and then use Tag Bar and right-click to select “Quick Tag Editor” • change <div id=“nav”> to <nav> • change <div id=“header”> to <header> • change <div id=“section”> to <section> • Notice how now AP elements have “regained” their position and are taken out of “linear flow”

Step 5 – Move Internal CSS to Exernal CSS file • Window > CSS Styles Panel open • Move Internal CSS to Exernal CSS file • Select “All” in CSS Styles Panel • Select all CSS styles listed below <style> • Right click and select “Move CSS Rules …” • Select “A new style sheet …” and specify CSS file name = “mystyles” • Notice linked files for DW page in top left bar • Save “mystyles.css” • CSS Location Principles • Make sure that link to external CSS file is before <style> tag

Step 6a – Create Navigation Structure using Spry Menu Bar • Insert Spry Menu Bar into nav element • Place Cursor inside nav element • Drag “Spry Menu Bar” from Insert : Layout panel onto page • Select “Horizontal” • Make sure that “SpryAssets” folder is inside “ex1” folderand update links to external CSS and JavaScript files accordingly • Create Primary and Secondary Categories • Spry Menu Bar selected and use Properties Panel • Primary: Summary | Audience | Task | Navigation | Functionality and specify relative navigation links • Secondary: create short question categories and specify anchor • Important: pagename.html#anchorname Example: audience.html#who • Test Page • Preview page in browser: secondary pull down is not fully visible • Select “nav” AP element and set z-index = 100 so that fully visible

Step 6b – Customize Spry Menu Bar & Create “You are here” • Customize Spry Menu Bar • Examine SpryMenuBarHorizontal.css • Identify CSS rules that need to be customized “look & feel” • Search for CSS rules with “background-color” specified and copy these rules • Create “You Are Here” Indicator • Create new CSS file and call it “SpryMenuBarHorizontal_custom”and save in SpryAssets folder • Insert external link to just created CSS file in <head> tag just after other CSS file for Spry Menu Bar • Paste copied CSS rules and rename by adding .here after aExample: a.here • Set background-color and color appropriately for different link states (and other properties as you see fit … you are the designer) • Apply CSS class “here” to appropriate <a> in primary navigation • File > Save All

Step 6c – Create Other Pages and Customize “You Are Here” • Create Other Pages • File > Save As summary page and name = “audience” • Specify unique title • Use File > As to create other primary pages and name appropriately and specify unique title • Customize “You Are Here” Indicator • Apply CSS class “here” to appropriate <a> in primary navigation • If there is already CSS class applied to <a> tag then add “here” and have a space between different class names

Step 7 – Structure Text, Create Anchor & Format Text • Create Text • Place Cursor insidesection and enter text • Press Enter to create headline3 and paragraph for each question & answer pair • Create Named Anchor • Place cursor before headline3 text • Insert > Named Anchor and specify anchor name (use consistent spelling) • Format Text using Property Inspector • Create appropriate CSS rules so that question and related answer spatially closer than next question • In CSS Styles Panel, select “mystyles” and add needed CSS rules • You are the Designer • You create and/or modify the needed CSS rules to achieve the "look & feel" you want

Step 8a – Capture, Edit Screenshots • Capture Screenshot • Whole Screen = Press "Prt Sc Sys Rq" in top row of keyboard • Selected Application = Press "Alt" + "Prt Sc Sys Rq" keys • Launch Fireworks • Edit Screenshot • Open new file in in Fireworks “File > New File” (and set image area to 1000 x 1000 pixels) • “Edit > Paste" from Clipboard into Fireworks • Select “Cropping Tool” in Fireworks • Select area of interest • Double-click to make cropping final • Save “cropped area” as a separate file using “File > Export” and in dialog select “Images Only” and save in “ex1” folder

Step 8b – Insert Screenshots • Insert Screenshot • Select Location in Dreamweaver file to insert screenshot • “Insert > Image” or click “Image Icon” in “Common” option in Insert window • Select image file (in “ex1” folder) to insert • Specify alternate text (shown if image can not be displayed) • Reduce Size of Image in Dreamweaver • Select image • Select image corner handle, while holding down SHIFT key, and drag to desired size • Image dimensions will be displayed in bold in Property Inspectorto indicate displayed size not equal actual size

Step 9 – Upload Files to Remote Site • Make Site Files visible • Window > Files (if window is not visible) • Click “Expand/Collapse” icon to see both Local and Remote files • Connect to Remote Server • Select "Connect to remote host " icon • Transfer Files to Remote Site • Manually “Drag & Drop” “ex1” folder to Remote Server(remember to drop “ex1” folder into “320course” folderand not into “ex1” folder on remote server)

Information Visualization Course