Upload
karly-slawter
View
217
Download
0
Embed Size (px)
Citation preview
11
COMM 1213 H1COMM 1213 H1COMP 4923 X1COMP 4923 X1
HTML Page HTML Page Structure and Structure and
NavigationNavigation
(Readings: Ch. 5 Lazar)(Readings: Ch. 5 Lazar)
22
OutlineOutline
• Information ArchitectureInformation Architecture
• Site NavigationSite Navigation
EG
33
DefintionsDefintions
• Information Architecture Information Architecture – How large information spaces are organized for How large information spaces are organized for
optimal user interactionoptimal user interaction– Structure of websiteStructure of website
• Site navigationSite navigation– Provides a map through websiteProvides a map through website– Good site navigation = easy to find contentGood site navigation = easy to find content– ““If the user can’t find it, the information is not If the user can’t find it, the information is not
there.”there.”
44
Analysis versus DesignAnalysis versus Design
• Dealt with during design, just after Dealt with during design, just after requirements analysisrequirements analysis
• Requirements analysis Requirements analysis
WhatWhat
• Design Design How How
55
Important issues during Important issues during analysis and design:analysis and design:
• Purpose and title of webpagePurpose and title of webpage
• Content to be developedContent to be developed– Consider how it will be developedConsider how it will be developed
• How often data will be updatedHow often data will be updated– Who will perform the updateWho will perform the update
• Relationship between contentRelationship between content
66
Determine Content ObjectsDetermine Content Objects
• A well-defined piece of contentA well-defined piece of content• Smallest granularity of content for the siteSmallest granularity of content for the site• Static or dynamic (database driven)Static or dynamic (database driven)• More than one object can exist per pageMore than one object can exist per page• Example: Example:
– catalog entries is an objectcatalog entries is an object– a specific item is an instancea specific item is an instance
• Prioritize objects as to their importance – Prioritize objects as to their importance – mandatory, desirable, optionalmandatory, desirable, optional
• Rarely is all content provided in first releaseRarely is all content provided in first release
77
Organize Content ObjectsOrganize Content Objects
• Allocate objects to webpages – use a Allocate objects to webpages – use a tabletable
• Cognitive models – how users organize Cognitive models – how users organize information in their mindsinformation in their minds
• Use paper prototypes (cards) and look forUse paper prototypes (cards) and look for– GroupingsGroupings– FlowFlow– HierarchyHierarchy
88
Organize Content ObjectsOrganize Content Objects
• Theoretical Foundations – Menu designTheoretical Foundations – Menu design– Hierarchical structure is preferredHierarchical structure is preferred– Series of menus arranged in a tree structureSeries of menus arranged in a tree structure
•depth (number of menus levels)depth (number of menus levels)
•Breadth (number of items per menu)Breadth (number of items per menu)
– Short depth, wide breadth preferred .. Why?Short depth, wide breadth preferred .. Why?– Breadth should decreases as depth increases Breadth should decreases as depth increases
.. Why?.. Why?
99
Organize Content ObjectsOrganize Content Objects
• Theoretical Foundations – Menu designTheoretical Foundations – Menu design– No more than 4 or 5 clicks to desired contentNo more than 4 or 5 clicks to desired content– Else …. cognitive overloadElse …. cognitive overload– Humans can deal with 5-9 items / chunksHumans can deal with 5-9 items / chunks
• Consider a food menu structure:Consider a food menu structure:– Choice A – list of 500 food itemsChoice A – list of 500 food items– Choice B – 10 groups of items by country of Choice B – 10 groups of items by country of
originorigin– Choice C – 5 groups based on order of eatingChoice C – 5 groups based on order of eating
1010
Web NavigationWeb Navigation
• Three types of information for user:Three types of information for user:– Where they have beenWhere they have been
•History, back button, visited link colorsHistory, back button, visited link colors
– Where they areWhere they are•Title of page = “you are here” signTitle of page = “you are here” sign•Context = site map, bread crumbs, tabsContext = site map, bread crumbs, tabs
– Where they can goWhere they can go•Descriptive, conveys structure, consistent Descriptive, conveys structure, consistent
throughout sitethroughout site
1111
Web NavigationWeb Navigation• Four most common types:Four most common types:
– Topical navigationTopical navigation•Organized by topic - Our course websiteOrganized by topic - Our course website
– Audience-splitting navigationAudience-splitting navigation•Directs visitors based on their roles with respect to site - Directs visitors based on their roles with respect to site -
Acadia websiteAcadia website
– Metaphor navigationMetaphor navigation•Relate information to objectsRelate information to objects in user’s lifein user’s life
– Organizational navigationOrganizational navigation•Based on organizational chartBased on organizational chart•OK for internal, but not external usersOK for internal, but not external users
1212
Location of Navigation Location of Navigation
• Developer can not be certain of Developer can not be certain of available screen spaceavailable screen space
• Navigation must be easily visibleNavigation must be easily visible– TopTop– LeftLeft– Combination of top and leftCombination of top and left
1313
ResourcesResources• Getting started with HTML Getting started with HTML from the W3C from the W3C
• W3C'sW3C's Recommendation for Recommendation for HTML 4.0HTML 4.0 is the is the authoritative specification for HTML authoritative specification for HTML
• W3 Schools W3 Schools HTML TutorialHTML Tutorial
• HTML Goodies HTML Goodies HTML PrimerHTML Primer
• An An HTML Code Tutorial HTML Code Tutorial
• Writing HTMLWriting HTML a tutorial for creating web a tutorial for creating web pages (a little old but a different pages (a little old but a different perspective) perspective)
1515
Architectural of the InternetArchitectural of the Internet
InternetInternet
Application
Client 1
Server BServer C
TCP/IP
Application
Client 2
Server X
Server Y
Server C
Intranet
Intranet
Acadia
1616
TCP/IP Protocol ArchitectureTCP/IP Protocol Architecture
Transmission Control Protocol
Internet Protocol
1717
TCP/IP Protocol ArchitectureTCP/IP Protocol Architecture
• Internet Protocol (IP) – like a postcard Internet Protocol (IP) – like a postcard that contains:that contains:– Destination address (131.162.201.7)Destination address (131.162.201.7)– Return addressReturn address– Block of data (content)Block of data (content)
• Transmission Control Protocol (TCP)Transmission Control Protocol (TCP)– Ensures the post card gets throughEnsures the post card gets through– Ensures the order of deliverEnsures the order of deliver– Handles errors and control flowHandles errors and control flow
1818
Client-Server Applications Client-Server Applications that use the Internetthat use the Internet
Physical
Network
TCP
IP
Physical
Network
TCP
IPInternetInternet
Telnet Window Telnet Server
FTP Client FTP Server
eMail Client eMail ServerSMTP/POP
FTP
Telnet Protocol
1919
Major Architectural Major Architectural Components of the WebComponents of the Web
InternetInternet
Browser
DatabaseServer
Client 1
Server A
Server BServer C
URL
HTTPTCP/IP
Browser
Client 2 HTTPServer
App.Server
index.html
2020
ImagesImages• Various digital image formats can be embedded with in HTML: .gif, .jpgVarious digital image formats can be embedded with in HTML: .gif, .jpg• ExampleExample
• See See www.bellsnwhistles.comwww.bellsnwhistles.com as source of images and other objects. as source of images and other objects.• Let’s down load one and try it …Let’s down load one and try it …<BODY>
<H1>My new baby girl.</H1><IMG SRC=“NicoleSilver.jpg”></BODY>
2121
Hyper LinksHyper 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:[email protected]”>Here</A>
to send her email.</BODY></HTML>