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

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

http://www.bmw.com/com/en/index_highend.html


Why is site identification important? How is it accomplished?

Text (name of organization) Logo (graphic)


Common visual theme Identifies Reinforces

Balance: Content Navigation Organization identity


“Place” within books, magazines, movies Intuitive Familiar

Place within Web sites? Menus

Horizontal Vertical


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 …


Cascading titles (“breadcrumbs”)


Pop-up menus Answers two key questions:

What else is available? Where do I go next?

Above the scroll! Keyword search


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 GE symbol Ford oval

Color (IBM blue)

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

<img src=“URL goes here” />

Example

<img src =

“http://www.nasa.gov/multimedia/imagegallery/ image_feature_73.html” />

Displaying Images<html>

…

Here is the Horsehead Nebula

<img src=… />

…

</html>

Displaying Images Ch05-Ex-01

Displaying Images Absolute Path

<img src =

“http://www.nasa.gov/multimedia/imagegallery/image_feature_73.html” />

Relative Path

<img src =“image_feature_73.html” />

Displaying Images Alternate Text Ch05-Ex-02<img src=“image_73.html” /><img src=“image_73.html” alt=“Horsehead

Nebula” /> Ch05-Ex-02

Displaying Images Inline images

“In line” with the rest of text like any other character

Blah blah blah <img …> 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

<img src=“…” align=“top”>

Displaying Images <vertical-align> property of the img element

top or middle value

<style …>img {vertical-align:middle}

</style>

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

<img … height=“50” width=“50” … >

Maintain aspect ratio!

Creating Links External

Downloads and displays a new Web page Implemented by an anchor tag with a hypertext

reference:

<a href=“…”>some text the user sees</a>

Creating Links Pathnames

Absolutehttp://www.nasa.gov/multimedia/highlights/index.html Relativehighlights/index.html

index.html Defaults to index.html

Creating Links Internal

Location

<a id=“some_label”> Link

<a href=“#some_label”>Click here</a>

Identifies an internal link

Creating Links Combined

Form: url#id

http://www.sis.uncc.edu/~anraja/courses/2300/assignments.htm#Lagerstrom-Ch-5

Images as Links Same format as before:

<a href=“…”>some text</a> But text replaced by an img element:

<a href=“…”><img src=“…” /></a> 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<map id=“map_name”>

</map>

<area shape=“rect” coords=“43, 70, 97, 120” href=“…” />

Images as Links Rectangle

coords=“xl, yu, xr, yl” Circle

coords=“xc, yc, r” Polygon

coords=“x1, y1, x2, y2, … xn, yn”

Multimedia <embed src=“…” /> 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

Documents

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