LIS65 4 lecture 3 omeka installation and system overview start
Lecture 4 – Overview
-
Upload
quon-owens -
Category
Documents
-
view
26 -
download
0
description
Transcript of Lecture 4 – Overview
© Anselm Spoerri
Lecture 4 – Overview
Exercise 2
Meaning– Web Design Recap
– Writing for the Web
Mechanics– Testing & Debugging Web Pages Check Easy Stuff First
– CSS– DIVs and Linear “Natural Flow”
– Box Model
– AP Elements more flexible page layouts
– Dreamweaver– Step-by-step demo using AP Elements
© Anselm Spoerri
Exercises 2
Create a draft of "Why be a Librarian in the 21st Century?" in outline form.
Describe your Vision of "Librarian in the 21st Century" (value / skills etc.)
Provide an outline of your relevant Interests and Passions.
Break down your site into categories. Create organization and associated file hierarchy.
Each web page contains primary navigation structure.
© Anselm Spoerri
Exercises 2 (cont.)
Each web page has a clear layout and visual hierarchyand reflecting what have learned so far (margins, typography etc.)
Each page has a brief sentence describing its goal and an outline of ideas to be covered or linked to.
– If possible create hyperlinks to other pages that expand an idea.
Create page that contains links to site whose layout / design you would like to emulate.
Create at least one web page that contains a table, where at least three cells contain an image
© Anselm Spoerri
Recap – Web Guiding Principles
Common Sense– No right way to design, but there are better ways :)
Make it short– More likely to be used and remembered– Cut in ½ and cut in ½ again
Don't make me think– Get rid of question marks - each item has clear purpose
Make it work at a glance– People have little time
Support intented task - manage expectations
© Anselm Spoerri
User Behavior Design Implications Design Specifics
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
• Design for Scanning Make text short - cut words • Make page work at a glance Sufficient left margin, 640x480 = main message• Create Visual Hierarchy
• Make obvious what you can do • Make obvious what is clickable
• Don't make users think Get rid of question marks
Each item = clear purpose
• Repetition & Consistency Grid Layout, Easy Navigation,
Graphics, Color Coding, Typography
User Behavior Design ImplicationsUser Behavior Design Implications Design Specifics
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
© Anselm Spoerri
User Behavior Design Implications Design Specifics
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.
• Design for Scanning Make text short - cut words • Make page work at a glance Sufficient left margin, 640x480 = main message• Create Visual Hierarchy
• Make obvious what you can do • Make obvious what is clickable
• Don't make users think Get rid of question marks
Each item = clear purpose
• Repetition & Consistency Grid Layout, Easy Navigation,
Graphics, Color Coding, Typography
User Behavior Design ImplicationsUser Behavior Design Implications Design Specifics
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
© Anselm Spoerri
User Behavior Design Implications Design Specifics
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
• Design for Scanning Make text short - cut words • Make page work at a glance Sufficient left margin, 640x480 = main message• Create Visual Hierarchy
• Make obvious what you can do • Make obvious what is clickable
• Don't make users think Get rid of question marks
Each item = clear purpose
• Repetition & Consistency Grid Layout, Easy Navigation,
Graphics, Color Coding, Typography
User Behavior Design ImplicationsUser Behavior Design Implications Design Specifics
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
© Anselm Spoerri
User Behavior Design Implications Design Specifics
1 Use Grid System
2 Create Visual Hierarchy and Guide Eye
3 Typography Heuristics
• Design for Scanning
• Make page work at a glance • Create Visual Hierarchy
• Make obvious what you can do
• Don't make users think
• Repetition & Consistency
User Behavior Design ImplicationsUser Behavior Design Implications Design Specifics
Scan pages - don't read them
Choose first “reasonable item”
Muddle through
Stick to what works
© Anselm Spoerri
Recap – Web Page Needs to Answer
What can I do here? – Create Layout to Present Info Clearly & Logically
– Use Grid System to Facilitate Understanding & Recall
Where do I start?– Create Visual Hierarchy to Guide Eye
How can I navigate?
– Create Primary & Secondary Navigation– Provide Site ID, Page Name
© Anselm Spoerri
Layout Visual Hierarchy & Navigation
Site ID Primary NavigationS
eco
nd
ary
N
avig
ati
on
Page Name
Intro Textaaaaaaaaaaa
bbbbbbbbbbb
Text or Thumbnails
Intro Textaaaaaaaaaaabbbbbbbbbbb
© Anselm Spoerri
Layout Visual Hierarchy & Navigation
Site ID Primary Navigation
Secondary Navigation
Page Name
Intro Text
Text or Thumbnails
© Anselm Spoerri
Design Strategy Tools
Create Layout Grid– Create Master DIV with DIVs of varying sizes
– DIV can contain a table with cells …– DIV = AP Element
– Use Dreamweaver to create layout/grid tables– Use Fireworks to crop images to desired size
Create Visual Hierarchy– More Important = Larger / Sharp Contrast– Use Fireworks to create and edit distinct imagery
Create Navigation Structure– Designate specific areas for Primary / Secondary Navigation– Use CSS to create interactive navigation structure– Use Fireworks to create visual navigations elements
Use Dreamweaver to create interactive navigation
© Anselm Spoerri
Basic Design Principles
Alignment– Don't Mix Alignment Styles – Simplicity and Left-Aligned– Create Sufficient Left Margin– Constrain Total Width of Page
Proximity– Related Things Close Together
– Spatial Separation = Conceptual Separation
Repetition & Consistency– Grid Layout, Navigation, Graphics Color Coding, Typeface– Creates Ease of Use
Contrast– Bigger, Bolder, Color, Spatial Distance– Guide the Eye and Create Visual Hierarchy
© Anselm Spoerri
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
© Anselm Spoerri
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).
© Anselm Spoerri
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
© Anselm Spoerri
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).
© Anselm Spoerri
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>
© Anselm Spoerri
Check Easy Stuff First – Testing Your Page
1. Validate (X)HTML and CSS.
2. Open in Browser
3. Formatting correct?
4. Hyperlinks work & correct?
5. CSS file referenced properly?
6. 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.
7. Upload files to server (and set permissions if needed).
8. View pages in different browsers.
9. Still Stuck check for typos and check easy stuff first :)
© Anselm Spoerri
Mechanics – CSS: DIVs and Linear “Natural Flow”
Recap
• 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 (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.
© Anselm Spoerri
Mechanics – CSS: Box Model
Box Model = every element is enclosed in Invisible Box
• Width and Height can be specified
• Padding = space surrounding content inside of box (all four sides can be specified separately)
• Border : can specify all four borders separately also specify border-style: type; border-width: n; border-color: color;
• 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
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 3D.
• 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
Create Layout using AP Elements, then convert to Tables• Modify > Convert > AP Divs to Table …• Issue of “overlapping AP Elements”
• Modify > Arrange > Prevent AP Element Overlaps
© Anselm Spoerri
AP Elements Panel
AP Elements Panel
• Window > AP Elementsin 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 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 > Align > Alignment option
– Create Nested AP Elements
– Place insertion point inside existing AP Element
and choose Insert > Layout Objects > 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
Create & Manipulate AP Elements
© 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 JavaScript, 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
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.
Controlling Where Elements Float
• Control on which sides elements can float next to for an elementand which sides they cannot by using the clear property.
• 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.
© Anselm Spoerri
AP Elements and Elastic Layout
Incorporate AP Elements into Elastic Layout– AP Elements takes “div” out of the “linear flow” of page
position: relative
– 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 element will not show up in AP Panel in DW
© Anselm Spoerri
AP Elements and Elastic Layout (cont.)
#container { /* elastic properties */}
#mainContent {/* properties */ }
#apDiv1 { position: absolute; left: 25px; top: 25px; }
<div id=“container”>
<div id=“mainContent”>
<div id=“apDiv1”>Hello</div>
</div>
</div>
apDiv1 will NOT move with #container when browser width is changed
How to change this?
Add position: relative to #container declaration
#container {position: relative; /* elastic properties */; }
© Anselm Spoerri
Download files and Initialize
Create folder “mplec4”
Download Files and Imageshttp://www.scils.rutgers.edu/~aspoerri/Teaching/MPOnline/Lectures/Lecture4/stepbystep/
– Select ZIP file = “stepbystep.zip”– File Download Dialog: select “Open”– Extract into “mplec4” and make sure to extract all files
(Being able to use WinZip is prerequisite for this course)
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
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 = 0px; T = 0px; W = 600px; H = 600px 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: tracingimage1, tracingimage2, tracingimage3
© Anselm Spoerri
Step 2a – Create AP Elements with Images
Create AP Elements with Images– Click “Draw AP Div” button in “Insert” panel, then drag to draw
– AP Element0: W = 800; H = 800; ID = Main;
– AP Element1: W = 160; H = 120; ID = Paris; Overflow = hidden;
– AP Element2: 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 F12 for IE): notice overflow hidden
Select image and resize to 160 x 120 and ID = paris
Press F12: whole image now visible
– “Furcup” AP Element: Insert image “furcup” and resize to 160 x 120 and ID = furcup
© Anselm Spoerri
Step 2b – Create Text AP Elements and Manage Visibility
Open file “layers1”
Create AP Elements with Text– Click “Draw AP Div” (AP Element) button in “Insert” panel, then drag to draw
– AP Element3: W = 250, H = 150, ID = IntroText, Visibility = Hidden
– AP Element4: select and copy “IntroText” AP Element,
deselect and paste; rename it “ParisText” in AP Elements Panel
(notice: new AP element is in exact same position as “IntroText” as we want it;but it is not nested inside “Main” AP Element)
hold Control key as you drag “ParisText” below “Main”
– AP Element5: copy & paste “IntroText” and rename “FurcupText”
Perform same steps as for “ParisText”
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 “IntoText” = visible
and drag “IntroText” to top of stack
– Make “ParisText” and “FurcupText” = invisible
© Anselm Spoerri
Step 2c – Use AP Elements to create “disjointed” rollover
Open file “layers2”
Attach “Show-Hide Elements” Behavior to Images– Select “paris” image
– “Behavior” Window: click “+” and select “Show-Hide Elements”
– “Show Hide Elements” Dialog: select “IntroText” and “hide”– “ParisText” = show and “”FurcupText” = hide
– “Behavior” Window: select event associated with “paris” imageand click on pull-down menu to select “(onMouseOver)”
– Attach behavior for “(onMouseOut)” to image “paris”where now “IntroText” = show and “ParisText” & “FurcupText” = hide
© Anselm Spoerri
Step 3 – AP Elements and Elastic Layout
#container { /* elastic properties */}
#mainContent {/* properties */ }
#apDiv1 { position: absolute; left: 25px; top: 25px; }
<div id=“container”>
<div id=“mainContent”>
<div id=“apDiv1”>Hello</div>
</div>
</div>
apDiv1 will NOT move with #container when browser width is changed
How to change this?
Add position: relative to #container declaration
#container {position: relative; /* elastic properties */; }
© 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. onLoad or onClick 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
onClick – User clicks element and releases mouse
onDblClick – User double-clicks the specified element
onLoad – Generated when an image or page is loaded
onMouseDown – User presses the mouse button
onMouseOver – Mouse first moves over specified element
onMouseUp – Generated when a pressed mouse button is released
© Anselm Spoerri
Resources: Conversion – AP Element & Tables
Modify > Convert > AP Element to Table
• No overlapping AP Elements– Cannot create table from overlapping AP Elements, because table cells
cannot overlap
• Modify > Arrange > Prevent AP Element Overlaps– Dreamweaver does not automatically fix existing overlapping AP Elements
when you turn on “Prevent AP Element Overlaps”
Modify > Convert > Table to AP Elements– Can't perform conversion in a template document