1 / 45

Web-based Application Development

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.

esteban-ivarra
Télécharger la présentation

Web-based Application Development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

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

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

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

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

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

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

  9. 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 …

  10. Navigation Through the Site Cascading titles (“breadcrumbs”)

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

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

  13. 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)

  14. 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).

  15. Organizational Identity • Visual identity • Symbol • Nike swoosh • GE symbol • Ford oval • Color (IBM blue)

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

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

  18. Displaying Images • General Form <img src=“URL goes here” /> • Example <img src = “http://www.nasa.gov/multimedia/imagegallery/image_feature_73.html” />

  19. Displaying Images <html> … Here is the Horsehead Nebula <img src=… /> … </html>

  20. Displaying Images • Ch05-Ex-01

  21. Displaying Images • Absolute Path <img src = “http://www.nasa.gov/multimedia/imagegallery/image_feature_73.html” /> • Relative Path <img src =“image_feature_73.html” />

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

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

  24. Displaying Images • Deprecated align attribute in img tag <img src=“…” align=“top”>

  25. Displaying Images • <vertical-align> property of the img element • top or middle value <style …> img {vertical-align:middle} </style> • Ch05-Ex-03

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

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

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

  29. Displaying Images • Sizing • height and width attributes in img element • Units are pixels <img … height=“50” width=“50” … > • Maintain aspect ratio!

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

  31. Creating Links • Pathnames • Absolute http://www.nasa.gov/multimedia/highlights/index.html • Relative highlights/index.html index.html • Defaults to index.html

  32. Identifies an internal link Creating Links • Internal • Location <a id=“some_label”> • Link <a href=“#some_label”>Click here</a>

  33. Creating Links • Combined • Form: url#id http://www.sis.uncc.edu/~anraja/courses/2300/assignments.htm#Lagerstrom-Ch-5

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

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

  36. Images as Links <map id=“map_name”> </map> <area shape=“rect” coords=“43, 70, 97, 120” href=“…” />

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

  38. Multimedia • <embed src=“…” /> • autostart=“false” • height and width • align • loop=“true” • CH05-Ex-09

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

More Related