1 / 21

COMM 1213 H1 COMP 4923 X1

COMM 1213 H1 COMP 4923 X1. HTML Page Structure and Navigation (Readings: Ch. 5 Lazar). Outline. Information Architecture Site Navigation. EG. Defintions. Information Architecture How large information spaces are organized for optimal user interaction Structure of website

shayla
Download Presentation

COMM 1213 H1 COMP 4923 X1

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. COMM 1213 H1COMP 4923 X1 HTML Page Structure and Navigation (Readings: Ch. 5 Lazar)

  2. Outline • Information Architecture • Site Navigation EG

  3. Defintions • Information Architecture • How large information spaces are organized for optimal user interaction • Structure of website • Site navigation • Provides a map through website • Good site navigation = easy to find content • “If the user can’t find it, the information is not there.”

  4. Analysis versus Design • Dealt with during design, just after requirements analysis • Requirements analysis  What • Design  How

  5. Important issues during analysis and design: • Purpose and title of webpage • Content to be developed • Consider how it will be developed • How often data will be updated • Who will perform the update • Relationship between content

  6. Determine Content Objects • A well-defined piece of content • Smallest granularity of content for the site • Static or dynamic (database driven) • More than one object can exist per page • Example: • catalog entries is an object • a specific item is an instance • Prioritize objects as to their importance – mandatory, desirable, optional • Rarely is all content provided in first release

  7. Organize Content Objects • Allocate objects to webpages – use a table • Cognitive models – how users organize information in their minds • Use paper prototypes (cards) and look for • Groupings • Flow • Hierarchy

  8. Organize Content Objects • Theoretical Foundations – Menu design • Hierarchical structure is preferred • Series of menus arranged in a tree structure • depth (number of menus levels) • Breadth (number of items per menu) • Short depth, wide breadth preferred .. Why? • Breadth should decreases as depth increases .. Why?

  9. Organize Content Objects • Theoretical Foundations – Menu design • No more than 4 or 5 clicks to desired content • Else …. cognitive overload • Humans can deal with 5-9 items / chunks • Consider a food menu structure: • Choice A – list of 500 food items • Choice B – 10 groups of items by country of origin • Choice C – 5 groups based on order of eating

  10. Web Navigation • Three types of information for user: • Where they have been • History, back button, visited link colors • Where they are • Title of page = “you are here” sign • Context = site map, bread crumbs, tabs • Where they can go • Descriptive, conveys structure, consistent throughout site

  11. Web Navigation • Four most common types: • Topical navigation • Organized by topic - Our course website • Audience-splitting navigation • Directs visitors based on their roles with respect to site - Acadia website • Metaphor navigation • Relate information to objects in user’s life • Organizational navigation • Based on organizational chart • OK for internal, but not external users

  12. Location of Navigation • Developer can not be certain of available screen space • Navigation must be easily visible • Top • Left • Combination of top and left

  13. Resources • Getting started with HTML from the W3C • W3C's Recommendation for HTML 4.0 is the authoritative specification for HTML • W3 Schools HTML Tutorial • HTML Goodies HTML Primer • An HTML Code Tutorial • Writing HTML a tutorial for creating web pages (a little old but a different perspective)

  14. THE ENDdanny.silver@acadiau.ca

  15. Architectural of the Internet Client 1 Acadia Server X Application TCP/IP Server Y Intranet Internet Client 2 Application Server C Server B Server C

  16. TCP/IP Protocol Architecture Transmission Control Protocol Internet Protocol

  17. TCP/IP Protocol Architecture • Internet Protocol (IP) – like a postcard that contains: • Destination address (131.162.201.7) • Return address • Block of data (content) • Transmission Control Protocol (TCP) • Ensures the post card gets through • Ensures the order of deliver • Handles errors and control flow

  18. Client-Server Applications that use the Internet Telnet Protocol Telnet Window Telnet Server FTP FTP Server FTP Client SMTP/POP eMail Client eMail Server TCP TCP IP IP Internet Network Network Physical Physical

  19. Major Architectural Components of the Web Client 1 Browser HTTP TCP/IP Server A HTTP Server App. Server Database Server Internet Client 2 Browser index.html URL Server B Server C

  20. Images • Various digital image formats can be embedded with in HTML: .gif, .jpg • Example • See www.bellsnwhistles.com as source of images and other objects. • Let’s down load one and try it … <BODY> <H1>My new baby girl.</H1> <IMG SRC=“NicoleSilver.jpg”> </BODY>

  21. Hyper Links <HTML><HEAD></HEAD> <BODY> <H1>My Oldest Daughter.</H1> <IMG SRC=“Natalie.jpg”> Natalie goes to <A HREF=“http://www.ems.ednet.ns.ca”>Evangeline Middle School</A> Which is in New Minas. Click <A HREF=“mailto:nsilver@ems.nsed.ca”>Here</A> to send her email. </BODY> </HTML>

More Related