Web-based Application Development Lecture 6 January 26, 2006 Anita Raja

Agenda Attributes, Lists and Tables (concluded) PTW Chapter 4 Designing Display and Navigation WWG Chapter 2

Tags and Attributes Styles have properties h2 {text-align:center} Attributes have values … No quotation marks Quotation marks

Tags and Attributes size= “1” to “7” (smallest to largest) color= “red”, “blue”, etc. face= “Arial”, “Courier”, etc.

Tags and Attributes Alignment = “left”, “center”, “right” Using tags: Centering this text is centered

Tags and Attributes Preferred method using styles: h2 {text-align:center} p {text-align:center}

Tags and Attributes Background colors tag bgcolor and text attributes Using tags (deprecated):

Tags and Attributes Using styles in the body: body {background-color:yellow; color:blue}

Tags and Attributes Horizontal rules Using tags: Using styles: hr {height:7px; width:75%; background-color:red} Ch04-Ex-01

Displaying Lists Ordered: 1. Item 1 2. Item 2 Unordered: Item 1 Item 2

Displaying Lists Ordered lists: Item 1 Item 2 Block-level element Items indented relative to other text Ch04-Ex-02 Optional in HTML, Required in XHTML

Displaying Lists Unordered lists: Item 1 Item 2 Block-level element Items indented relative to other text Ch04-Ex-03 Optional in HTML, Required in XHTML

Displaying Lists Nesting Ch04-Ex-04 … … … …

Displaying Lists Customizing list displays Add a “type” attribute to tag Values may be “disc”, “circle”, or “square” …

Displaying Lists “type” is a deprecated attribute so… ul {list-style:square}

Displaying Lists Definition lists (def line, def term, def data) term definition term definition Ch04-Ex-05

Tables One or more rows, each divided into … One or more “cells” containing data … Repeat for each cell in row Repeat for each row in table

Tables Initially, table borders are invisible unless the “border” attribute is included or Ch04-Ex-06

Tables In cells where each row has the same number of columns … Each cell in a column is as wide as the widest cell in that column Text within cells is automatically aligned to the left

Tables Table headers & replace & Makes data bold and centered Ch04-Ex-07 Table captions … Place before or after table Ch04-Ex-08

Tables Alignment In tag … Horizontal alignment: align=“left” (center, right) Vertical alignment: valign=“top” (middle, bottom)

Tables Padding White space between cell edges and text Ch04-Ex-09 Spacing Width of dividers between cells Ch04-Ex-10

Tables Table width – legitimate use Cell width – deprecated

Tables Cells spanning multiple columns Ch04-Ex-11 Cells spanning multiple rows Ch04-Ex-12

Assignment Debugging Exercise, p. 106 Correct errors Post corrected document to your Web space as “Lagerstrom-Ch-4.html” Grade based on: Appearance Technical correctness of code

The Web Wizard’s Guide to Web Design Chapter 2 Designing Display and Navigation

Introduction “A well-designed Web site doesn’t just look good; it also works well.”

Introduction Remember: form follows function. Base site design on what users need to do. Functionality common to most Web sites: Display of information Navigation through the site Choosing & finding Feedback & interaction Communicating the organization’s identity

The Display of Information To decide which display works best, consider the user How does the target audience think?

The Display of Information Classical printed display styles Magazine: 2-3 columns, images interspersed Newspaper: 6-7 columns Book: 1 column, images at top/bottom Early Web design looked like existing printed pages Problem: screens aren’t pages

The Display of Information PagesScreens 16” wide10” wide High resolution: Magazine: 200 dpi Newspaper: 300 dpi 9 point type easy to read Low resolution: 75 dpi* 12-point type Built-in navigationMust be provided * Dot = Pixel

The Display of Information General rules: Use relatively large type (12-point or more) Single column ≈ 5” wide White space around edges

The Display of Information Use of thumbnails Small in size Download quickly Two-stage interactive displays User selects appropriate level of detail

The Display of Information Warning Modeling on traditional media may not be effective Web pages are different Size Resolution Interactivity!

Watching and Listening Screens are not radios or televisions May disturb others Users want more control Embedded or not? Fully embedded: user has no control Embedded with user controls Separate window, user controls Limited in size and quality Does the sound/video advance the purpose of the site?

Tables and Lists How should information be presented? Plain text Bulleted lists Numbered lists Tables (rows and columns) Use tables to compare information in two dimensions Models & features of products

Tables and Lists Restricted screen width: Most screens are 800 pixels wide -300 pixels for borders, scrollbars, and navigation 500 pixels left 100 characters of 12-pt text.

Navigation Through the Site Unlike books, magazines, & newspapers, there is no common Web format to specify: Whose site am I looking at? Where am I within the site? What else is available from this site? Where should I go next? How do I get there? How do I find whatever I’m looking for?

Navigation Through the Site BMW – good navigation? BMW Did the BMW site: Answer all the questions? Without using too much space? In the simplest manner? Without distracting from the main site content? Navigation should be consistent across whole site

Navigation Through the Site Why is site identification important? How is it accomplished? Text (name of organization) Logo (graphic)

Navigation Through the Site Common visual theme Identifies Reinforces Balance: Content Navigation Organization identity

Navigation Through the Site “Place” within books, magazines, movies Intuitive Familiar Place within Web sites? Menus Horizontal Vertical

Navigation Through the Site Menus: Provide means of navigation Show site organization Indicate current location Keep size small, content short Not every page needs a menu Keep style consistent throughout site Site maps …

Navigation Through the Site Cascading titles (“breadcrumbs”)

Navigation Through the Site Pop-up menus – iMovie101iMovie101 Answers two key questions: What else is available? Where do I go next? Above the scroll! Keyword search

Navigation Through the Site Don’t have to provide every navigation aid to every user on every page Arrange aids so they: Obvious Consistent Easy to use Take up as little “floor space” as possible

Feedback and Interaction Internet is two-way State interactivity goals in site’s purpose Is collecting user information important? Explicit (user is aware) Must allocate space on page(s) Provide functionality (error checking, other) Implicit (user is not aware)

Feedback and Interaction Methods of interactivity Forms (what information will be collected?) Discussion boards Asynchronous Chat rooms Synchronous At early design stages just decide which forums are appropriate and support the site’s purpose(s).

Organizational Identity Visual identity Symbol Nike swoosh Nike GE symbol GE Ford oval Ford Color (IBM blue)IBM Sound Domino’s Pizza

Organizational Identity Colors Logo Font Design features Shapes Ford’s oval motif Patterns Mascots Look and feel

Assignment Hands-On Exercise #5, p. 54 For a corporate site you select … Analyze it in terms of the design features covered in the chapter Identify: Common themes Good and bad elements (if any) In addition to your analysis, turn in a hardcopy of any relevant pages from the site you selected.