Web-based Application Development Lecture 7 January 31, 2006 Anita Raja

Agenda Designing Display and Navigation WWG Chapter 2 Images, Links, and Multimedia PTW Chapter 5 Homework Submission Requirement You are responsible for making sure your hw is submitted on time via WebCT. Change in Office Hours (just for today) 10:50-11:45am

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

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 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

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

Programming the Web using XHTML and JavaScript Chapter 5 Images, Links, and Multimedia

Displaying Images General Form Example <img src = “ image_feature_73.html” />

Displaying Images … Here is the Horsehead Nebula …

Displaying Images Ch05-Ex-01

Displaying Images Absolute Path <img src = “ image_feature_73.html” /> Relative Path

Displaying Images Alternate Text Ch05-Ex-02 Ch05-Ex-02

Displaying Images Inline images “In line” with the rest of text like any other character Blah blah blah blah blah blah Image may not be the same size as the characters on the rest of the line How to align text with image?

Displaying Images Deprecated align attribute in img tag

Displaying Images property of the img element top or middle value img {vertical-align:middle} Ch05-Ex-03

Displaying Images Problem when text is more than just a few words. Cho5-Ex-04

Displaying Images Wrapping text around image float style property Image “floats” down to next open line Text flows around one side or the other left or right values for the float property Ch05-Ex-05

Displaying Images Centering (without flowing text) Place in a paragraph Center the paragraph Ch05-Ex-06

Displaying Images Sizing height and width attributes in img element Units are pixels Maintain aspect ratio!

Creating Links External Downloads and displays a new Web page Implemented by an anchor tag with a hypertext reference: some text the user sees

Creating Links Pathnames Absolute Relative highlights/index.html index.html Defaults to index.html

Creating Links Internal Location Link Click here Identifies an internal link

Creating Links Combined Form: url#id 0/assignments.htm#Lagerstrom-Ch-5

Images as Links Same format as before: some text But text replaced by an img element: Ch05-Ex-07

Images as Links Image Maps Graphics with “hotspots” that act as links Client-side and server-side Two-step process: Define hotspots Overlay graphic with hotspots

Images as Links

Images as Links Rectangle coords=“xl, yu, xr, yl” Circle coords=“xc, yc, r” Polygon coords=“x1, y1, x2, y2, … xn, yn”

Multimedia autostart=“false” height and width align loop=“true” CH05-Ex-09

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