web-based application development lecture 7 january 31, 2006 anita raja
TRANSCRIPT
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
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 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