web-based application development lecture 7 january 31, 2006 anita raja
TRANSCRIPT
![Page 1: Web-based Application Development Lecture 7 January 31, 2006 Anita Raja](https://reader030.vdocuments.site/reader030/viewer/2022032706/56649ddf5503460f94ad925b/html5/thumbnails/1.jpg)
Web-based Application Development
Lecture 7
January 31, 2006
Anita Raja
![Page 2: Web-based Application Development Lecture 7 January 31, 2006 Anita Raja](https://reader030.vdocuments.site/reader030/viewer/2022032706/56649ddf5503460f94ad925b/html5/thumbnails/2.jpg)
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
![Page 3: Web-based Application Development Lecture 7 January 31, 2006 Anita Raja](https://reader030.vdocuments.site/reader030/viewer/2022032706/56649ddf5503460f94ad925b/html5/thumbnails/3.jpg)
The Web Wizard’s Guide to Web Design
Chapter 2
Designing Display and Navigation
![Page 4: Web-based Application Development Lecture 7 January 31, 2006 Anita Raja](https://reader030.vdocuments.site/reader030/viewer/2022032706/56649ddf5503460f94ad925b/html5/thumbnails/4.jpg)
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?
![Page 5: Web-based Application Development Lecture 7 January 31, 2006 Anita Raja](https://reader030.vdocuments.site/reader030/viewer/2022032706/56649ddf5503460f94ad925b/html5/thumbnails/5.jpg)
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
![Page 6: Web-based Application Development Lecture 7 January 31, 2006 Anita Raja](https://reader030.vdocuments.site/reader030/viewer/2022032706/56649ddf5503460f94ad925b/html5/thumbnails/6.jpg)
Navigation Through the Site
Why is site identification important? How is it accomplished?
Text (name of organization) Logo (graphic)
![Page 7: Web-based Application Development Lecture 7 January 31, 2006 Anita Raja](https://reader030.vdocuments.site/reader030/viewer/2022032706/56649ddf5503460f94ad925b/html5/thumbnails/7.jpg)
![Page 8: Web-based Application Development Lecture 7 January 31, 2006 Anita Raja](https://reader030.vdocuments.site/reader030/viewer/2022032706/56649ddf5503460f94ad925b/html5/thumbnails/8.jpg)
![Page 9: Web-based Application Development Lecture 7 January 31, 2006 Anita Raja](https://reader030.vdocuments.site/reader030/viewer/2022032706/56649ddf5503460f94ad925b/html5/thumbnails/9.jpg)
Navigation Through the Site
Common visual theme Identifies Reinforces
Balance: Content Navigation Organization identity
![Page 10: Web-based Application Development Lecture 7 January 31, 2006 Anita Raja](https://reader030.vdocuments.site/reader030/viewer/2022032706/56649ddf5503460f94ad925b/html5/thumbnails/10.jpg)
Navigation Through the Site
“Place” within books, magazines, movies Intuitive Familiar
Place within Web sites? Menus
Horizontal Vertical
![Page 11: Web-based Application Development Lecture 7 January 31, 2006 Anita Raja](https://reader030.vdocuments.site/reader030/viewer/2022032706/56649ddf5503460f94ad925b/html5/thumbnails/11.jpg)
![Page 12: Web-based Application Development Lecture 7 January 31, 2006 Anita Raja](https://reader030.vdocuments.site/reader030/viewer/2022032706/56649ddf5503460f94ad925b/html5/thumbnails/12.jpg)
![Page 13: Web-based Application Development Lecture 7 January 31, 2006 Anita Raja](https://reader030.vdocuments.site/reader030/viewer/2022032706/56649ddf5503460f94ad925b/html5/thumbnails/13.jpg)
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 …
![Page 14: Web-based Application Development Lecture 7 January 31, 2006 Anita Raja](https://reader030.vdocuments.site/reader030/viewer/2022032706/56649ddf5503460f94ad925b/html5/thumbnails/14.jpg)
![Page 15: Web-based Application Development Lecture 7 January 31, 2006 Anita Raja](https://reader030.vdocuments.site/reader030/viewer/2022032706/56649ddf5503460f94ad925b/html5/thumbnails/15.jpg)
Navigation Through the Site
Cascading titles (“breadcrumbs”)
![Page 16: Web-based Application Development Lecture 7 January 31, 2006 Anita Raja](https://reader030.vdocuments.site/reader030/viewer/2022032706/56649ddf5503460f94ad925b/html5/thumbnails/16.jpg)
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
![Page 17: Web-based Application Development Lecture 7 January 31, 2006 Anita Raja](https://reader030.vdocuments.site/reader030/viewer/2022032706/56649ddf5503460f94ad925b/html5/thumbnails/17.jpg)
![Page 18: Web-based Application Development Lecture 7 January 31, 2006 Anita Raja](https://reader030.vdocuments.site/reader030/viewer/2022032706/56649ddf5503460f94ad925b/html5/thumbnails/18.jpg)
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
![Page 19: Web-based Application Development Lecture 7 January 31, 2006 Anita Raja](https://reader030.vdocuments.site/reader030/viewer/2022032706/56649ddf5503460f94ad925b/html5/thumbnails/19.jpg)
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)
![Page 20: Web-based Application Development Lecture 7 January 31, 2006 Anita Raja](https://reader030.vdocuments.site/reader030/viewer/2022032706/56649ddf5503460f94ad925b/html5/thumbnails/20.jpg)
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).
![Page 21: Web-based Application Development Lecture 7 January 31, 2006 Anita Raja](https://reader030.vdocuments.site/reader030/viewer/2022032706/56649ddf5503460f94ad925b/html5/thumbnails/21.jpg)
Organizational Identity
Visual identity Symbol
Nike swoosh GE symbol Ford oval
Color (IBM blue)
![Page 22: Web-based Application Development Lecture 7 January 31, 2006 Anita Raja](https://reader030.vdocuments.site/reader030/viewer/2022032706/56649ddf5503460f94ad925b/html5/thumbnails/22.jpg)
Organizational Identity
Colors Logo Font Design features
Shapes Ford’s oval motif
Patterns Mascots
Look and feel
![Page 23: Web-based Application Development Lecture 7 January 31, 2006 Anita Raja](https://reader030.vdocuments.site/reader030/viewer/2022032706/56649ddf5503460f94ad925b/html5/thumbnails/23.jpg)
Programming the Web using XHTML and JavaScript
Chapter 5
Images, Links, and Multimedia
![Page 24: Web-based Application Development Lecture 7 January 31, 2006 Anita Raja](https://reader030.vdocuments.site/reader030/viewer/2022032706/56649ddf5503460f94ad925b/html5/thumbnails/24.jpg)
Displaying Images General Form
<img src=“URL goes here” />
Example
<img src =
“http://www.nasa.gov/multimedia/imagegallery/ image_feature_73.html” />
![Page 25: Web-based Application Development Lecture 7 January 31, 2006 Anita Raja](https://reader030.vdocuments.site/reader030/viewer/2022032706/56649ddf5503460f94ad925b/html5/thumbnails/25.jpg)
Displaying Images<html>
…
Here is the Horsehead Nebula
<img src=… />
…
</html>
![Page 26: Web-based Application Development Lecture 7 January 31, 2006 Anita Raja](https://reader030.vdocuments.site/reader030/viewer/2022032706/56649ddf5503460f94ad925b/html5/thumbnails/26.jpg)
Displaying Images Ch05-Ex-01
![Page 27: Web-based Application Development Lecture 7 January 31, 2006 Anita Raja](https://reader030.vdocuments.site/reader030/viewer/2022032706/56649ddf5503460f94ad925b/html5/thumbnails/27.jpg)
Displaying Images Absolute Path
<img src =
“http://www.nasa.gov/multimedia/imagegallery/image_feature_73.html” />
Relative Path
<img src =“image_feature_73.html” />
![Page 28: Web-based Application Development Lecture 7 January 31, 2006 Anita Raja](https://reader030.vdocuments.site/reader030/viewer/2022032706/56649ddf5503460f94ad925b/html5/thumbnails/28.jpg)
Displaying Images Alternate Text Ch05-Ex-02<img src=“image_73.html” /><img src=“image_73.html” alt=“Horsehead
Nebula” /> Ch05-Ex-02
![Page 29: Web-based Application Development Lecture 7 January 31, 2006 Anita Raja](https://reader030.vdocuments.site/reader030/viewer/2022032706/56649ddf5503460f94ad925b/html5/thumbnails/29.jpg)
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?
![Page 30: Web-based Application Development Lecture 7 January 31, 2006 Anita Raja](https://reader030.vdocuments.site/reader030/viewer/2022032706/56649ddf5503460f94ad925b/html5/thumbnails/30.jpg)
Displaying Images Deprecated align attribute in img tag
<img src=“…” align=“top”>
![Page 31: Web-based Application Development Lecture 7 January 31, 2006 Anita Raja](https://reader030.vdocuments.site/reader030/viewer/2022032706/56649ddf5503460f94ad925b/html5/thumbnails/31.jpg)
Displaying Images <vertical-align> property of the img element
top or middle value
<style …>img {vertical-align:middle}
</style>
Ch05-Ex-03
![Page 32: Web-based Application Development Lecture 7 January 31, 2006 Anita Raja](https://reader030.vdocuments.site/reader030/viewer/2022032706/56649ddf5503460f94ad925b/html5/thumbnails/32.jpg)
Displaying Images Problem when text is more than just a few
words.
Cho5-Ex-04
![Page 33: Web-based Application Development Lecture 7 January 31, 2006 Anita Raja](https://reader030.vdocuments.site/reader030/viewer/2022032706/56649ddf5503460f94ad925b/html5/thumbnails/33.jpg)
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
![Page 34: Web-based Application Development Lecture 7 January 31, 2006 Anita Raja](https://reader030.vdocuments.site/reader030/viewer/2022032706/56649ddf5503460f94ad925b/html5/thumbnails/34.jpg)
Displaying Images Centering (without flowing text)
Place in a paragraph Center the paragraph
Ch05-Ex-06
![Page 35: Web-based Application Development Lecture 7 January 31, 2006 Anita Raja](https://reader030.vdocuments.site/reader030/viewer/2022032706/56649ddf5503460f94ad925b/html5/thumbnails/35.jpg)
Displaying Images Sizing
height and width attributes in img element Units are pixels
<img … height=“50” width=“50” … >
Maintain aspect ratio!
![Page 36: Web-based Application Development Lecture 7 January 31, 2006 Anita Raja](https://reader030.vdocuments.site/reader030/viewer/2022032706/56649ddf5503460f94ad925b/html5/thumbnails/36.jpg)
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>
![Page 37: Web-based Application Development Lecture 7 January 31, 2006 Anita Raja](https://reader030.vdocuments.site/reader030/viewer/2022032706/56649ddf5503460f94ad925b/html5/thumbnails/37.jpg)
Creating Links Pathnames
Absolutehttp://www.nasa.gov/multimedia/highlights/index.html Relativehighlights/index.html
index.html Defaults to index.html
![Page 38: Web-based Application Development Lecture 7 January 31, 2006 Anita Raja](https://reader030.vdocuments.site/reader030/viewer/2022032706/56649ddf5503460f94ad925b/html5/thumbnails/38.jpg)
Creating Links Internal
Location
<a id=“some_label”> Link
<a href=“#some_label”>Click here</a>
Identifies an internal link
![Page 39: Web-based Application Development Lecture 7 January 31, 2006 Anita Raja](https://reader030.vdocuments.site/reader030/viewer/2022032706/56649ddf5503460f94ad925b/html5/thumbnails/39.jpg)
Creating Links Combined
Form: url#id
http://www.sis.uncc.edu/~anraja/courses/2300/assignments.htm#Lagerstrom-Ch-5
![Page 40: Web-based Application Development Lecture 7 January 31, 2006 Anita Raja](https://reader030.vdocuments.site/reader030/viewer/2022032706/56649ddf5503460f94ad925b/html5/thumbnails/40.jpg)
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
![Page 41: Web-based Application Development Lecture 7 January 31, 2006 Anita Raja](https://reader030.vdocuments.site/reader030/viewer/2022032706/56649ddf5503460f94ad925b/html5/thumbnails/41.jpg)
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
![Page 42: Web-based Application Development Lecture 7 January 31, 2006 Anita Raja](https://reader030.vdocuments.site/reader030/viewer/2022032706/56649ddf5503460f94ad925b/html5/thumbnails/42.jpg)
Images as Links<map id=“map_name”>
</map>
<area shape=“rect” coords=“43, 70, 97, 120” href=“…” />
![Page 43: Web-based Application Development Lecture 7 January 31, 2006 Anita Raja](https://reader030.vdocuments.site/reader030/viewer/2022032706/56649ddf5503460f94ad925b/html5/thumbnails/43.jpg)
Images as Links Rectangle
coords=“xl, yu, xr, yl” Circle
coords=“xc, yc, r” Polygon
coords=“x1, y1, x2, y2, … xn, yn”
![Page 44: Web-based Application Development Lecture 7 January 31, 2006 Anita Raja](https://reader030.vdocuments.site/reader030/viewer/2022032706/56649ddf5503460f94ad925b/html5/thumbnails/44.jpg)
Multimedia <embed src=“…” /> autostart=“false” height and width align loop=“true” CH05-Ex-09
![Page 45: Web-based Application Development Lecture 7 January 31, 2006 Anita Raja](https://reader030.vdocuments.site/reader030/viewer/2022032706/56649ddf5503460f94ad925b/html5/thumbnails/45.jpg)
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