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

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

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

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

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

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

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

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

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

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

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

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

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

24. Displaying Images General Form Example <img src = “http://www.nasa.gov/multimedia/imagegallery/ image_feature_73.html” />

25. Displaying Images … Here is the Horsehead Nebula …

26. Displaying Images Ch05-Ex-01

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

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

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

30. Displaying Images Deprecated align attribute in img tag

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

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

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

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

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

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

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

38. Creating Links Internal Location Link Click here Identifies an internal link

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

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

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

42. Images as Links

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

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

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