Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf ·...
Transcript of Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf ·...
![Page 1: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/1.jpg)
Table of Contents | All Slides | Link List | Examples | CSCI E-12
Building a WebsiteApril 1, 2009
Harvard UniversityDivision of Continuing Education
Extension School
Course Website: http://cscie12.dce.harvard.edu/
Copyright 1998-2008 David P. Heitmeyer
Instructor email: [email protected] staff email: [email protected]
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
1 of 76 4/1/2009 9:12 AM
![Page 2: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/2.jpg)
Building a Website
Nine Pillars of Successful Web Teams by JesseJames Garrett
User Research1.Site Strategy2.Technology Strategy3.Content Strategy4.Abstract Design5.Technology Implementation6.Content Production7.Concrete Design8.Project Management9.
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
2 of 76 4/1/2009 9:12 AM
![Page 3: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/3.jpg)
Building a Website: Resources
Web Style Guide, 3rd ed. by Lynch and Horton.Book and online.
Visual Design for the Modern Web by Penny McIntire.Available online through Harvard Library - Safari
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
3 of 76 4/1/2009 9:12 AM
![Page 4: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/4.jpg)
UsabilityJakob Nielsen's useit.com and his Alertbox Column
Usability 101: Introduction to UsabilityTop Ten Mistakes of Web Design
User Interface Engineering (UIE)
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
4 of 76 4/1/2009 9:12 AM
![Page 5: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/5.jpg)
StrategyAudience and GoalsContentOrganization
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
5 of 76 4/1/2009 9:12 AM
![Page 6: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/6.jpg)
Goals and Audience(s)
Why and Who
Most sites get a variety of usersSome audiences will be "primary", others "secondary"What are the target audience(s) and what are their information needs?
Most sites will have multiple audiences.
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
6 of 76 4/1/2009 9:12 AM
![Page 7: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/7.jpg)
Michigan State UniversityWhat audiences can be identified?
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
7 of 76 4/1/2009 9:12 AM
![Page 8: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/8.jpg)
AudienceWho are they?
demographicscomputer experience and technology profile
What are their goals?their information needstasks/actions they are performing
Know Your Audience
Be clear on who you are building for. Anticipate their needs.User testing, market research, focus groups.Jakob Nielsen's Alertbox: Why You Only Need to Test with 5 UsersFeedback from users - Watch what users do, not what they say.Alertbox: First Rule of Usability? Don't Listen to UsersAs target audiences increase, difficulty of Web design increases.
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
8 of 76 4/1/2009 9:12 AM
![Page 9: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/9.jpg)
Typical Audiences for an Academic Department
Undergraduate StudentsConcentratorsPotential concentratorsNon-concentrators
Graduate StudentsPotential Graduate StudentsFaculty
CurrentPotential
ResearchersPublic
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
9 of 76 4/1/2009 9:12 AM
![Page 10: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/10.jpg)
ContentWhat content already exists in other media types (brochures, pamphlets, statements, etc.).
Adapt it for the WebWhat content would be good to develop for the site?
Does it fit purpose of site?Does it suit the audience?Would people find this useful?
Define incremental goals to avoid "scope creep".Initial PhaseAdditional Phases
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
10 of 76 4/1/2009 9:12 AM
![Page 11: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/11.jpg)
Organization of ContentFrom Information Architecture for the World Wide Web (also available through Harvard Library Safari):
information architecture defined:
The combination of organization, labeling, and navigation schemes within an information system.1.The structural design of an information space to facilitate task completion and intuitive access to content.2.The art and science of structuring and classifying web sites and intranets to help people find andmanage information.
3.
An emerging discipline and community of practice focused on bringing principles of design andarchitecture to the digital landscape.
4.
Organize, Label, Navigate
Organize and CategorizeLabelNavigate
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
11 of 76 4/1/2009 9:12 AM
![Page 12: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/12.jpg)
Organize and Label
Organize
Sticky-notes, index cards, whiteboardPlan for future growth
Label
Know your audienceTest your labels (ask your audience)
Where can I get a driver for my HP8500N?What would expect to find in the category of Synergetic Integrated Scalable Enterprise Solutions?What IT degree programs are available?
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
12 of 76 4/1/2009 9:12 AM
![Page 13: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/13.jpg)
Categories and Labels from News SitesCNN
Fox News
ABC News MSNBC CBS NPR BBC
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
13 of 76 4/1/2009 9:12 AM
![Page 14: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/14.jpg)
Law of the Internet User Experience
Jakob's Law of the Internet User Experience:
Users spend most of their time onother sites.
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
14 of 76 4/1/2009 9:12 AM
![Page 15: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/15.jpg)
OrganizationHierarchical
Sequential
Webs
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
15 of 76 4/1/2009 9:12 AM
![Page 16: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/16.jpg)
Hierarchical
Library of Congress Classification
"Q" - Science"QC" - Physics
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
16 of 76 4/1/2009 9:12 AM
![Page 17: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/17.jpg)
Open Directory Project
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
17 of 76 4/1/2009 9:12 AM
![Page 18: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/18.jpg)
Yahoo! Categories
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
18 of 76 4/1/2009 9:12 AM
![Page 19: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/19.jpg)
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
19 of 76 4/1/2009 9:12 AM
![Page 20: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/20.jpg)
Taxonomy and FolksonomyTaxonomy
The science, laws, or principles of classification; systematics.Division into ordered groups or categories.
Folksonomy"Bottom-up" classification system that emerges from social tagging.A user-generated taxonomy.
CSCI E-12 tag cloud in Delicious:
Taxonomy in Amazon (for "Web Design in a Nutshell"):
Folksonomy in Amazon
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
20 of 76 4/1/2009 9:12 AM
![Page 21: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/21.jpg)
Ontology is Overrated: Categories, Links, and Tags by Clay Shirkey
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
21 of 76 4/1/2009 9:12 AM
![Page 22: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/22.jpg)
Too deep or too shallow?
Deep Shallow
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
22 of 76 4/1/2009 9:12 AM
![Page 23: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/23.jpg)
Sequential
When order is important or part of presentation.
Useful when "workflow" is important in web applications.
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
23 of 76 4/1/2009 9:12 AM
![Page 24: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/24.jpg)
WebsWikipedia.com
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
24 of 76 4/1/2009 9:12 AM
![Page 25: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/25.jpg)
Site ArchitectureTopicsAudienceTask-OrientedSearchInternal Organization
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
25 of 76 4/1/2009 9:12 AM
![Page 26: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/26.jpg)
Michigan State
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
26 of 76 4/1/2009 9:12 AM
![Page 27: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/27.jpg)
IBM
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
27 of 76 4/1/2009 9:12 AM
![Page 28: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/28.jpg)
Hewlett Packard
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
28 of 76 4/1/2009 9:12 AM
![Page 29: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/29.jpg)
Harvard Extension School
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
29 of 76 4/1/2009 9:12 AM
![Page 30: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/30.jpg)
Site ArchitectureCritical to site's successPrecede any design/visual elementsWork from paper or text-based Web sites
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
30 of 76 4/1/2009 9:12 AM
![Page 31: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/31.jpg)
Navigation SystemsWhere am I?Where can I go?
What is close by?What is further away?
Where have I been?
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
31 of 76 4/1/2009 9:12 AM
![Page 32: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/32.jpg)
Main Sections Current Page and Section More within Current Section
Harvard College
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
32 of 76 4/1/2009 9:12 AM
![Page 33: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/33.jpg)
Global NavigationAppears on every inner page.
Quicklinks
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
33 of 76 4/1/2009 9:12 AM
![Page 34: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/34.jpg)
Breadcrumb Navigation"Just wait, Gretel, until the moon rises, and then we shall see the crumbs of bread which I havestrewn about, they will show us our way home again.", Hansel in Hansel and Gretel
Breadcrumb Navigation Increasingly Useful, Jakob Nielsen's Alertbox, April 10, 2007.
DMOZ
Harvard Summer School
Construction Projects at FAS, Harvard University
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
34 of 76 4/1/2009 9:12 AM
![Page 35: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/35.jpg)
Clamshell navigation
O'Reilly Safari Harvard College
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
35 of 76 4/1/2009 9:12 AM
![Page 36: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/36.jpg)
Creating Links
Build confidence by making your links predictable and differentiable.
Pay attention to the scent of the site's links.
Links within navigation and content must be:
PredictableAm I getting 'closer' to my goal?DifferentiableWhat is the difference between clicking here or clicking there?
When creating links:
Be descriptiveUse "title" attribute to elaborateLink several words or a phrase, not just one or two words
Don't lie
Your links should have scent, and on a related note, your site should suck.
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
36 of 76 4/1/2009 9:12 AM
![Page 37: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/37.jpg)
Use "title" attributeTitle attribute can add information so that the link is more predictable and able to be differentiated from others.
Example 9.1Example 9.1 Source:
view plain print ?
<p><a href="http://www.president.harvard.edu/speeches/faust/070917_morningprayers.html" title="Text of talk given by President Drew Gilpin Faust at Morning P
1.
President Drew Gilpin Faust spoke</a> at <a href="http://www.memorialchurch.harvard.edu/services/morningprayers.shtml" title="Morning Prayers at The Memorial Church of Harvard University" shape
2.
prayers</a> on September 17, 2007.</p> 3.
Example 9.1 Rendered:
President Drew Gilpin Faust spoke at morning prayers on September 17, 2007.
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
37 of 76 4/1/2009 9:12 AM
![Page 38: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/38.jpg)
Deep LinkingLink directly to content within a site.Support deep linking to your site.
URLs that do not change
Alertbox: Deep Linking is Good Linking
Deep linking:
Register for Harvard Summer School so you can take CSCI S-1, "Great Ideas in Computer Science with Java".
<p> 1. <a href="http://www.summer.harvard.edu/2009/register/default.jsp"> 2. Register for Harvard Summer School</a> so you can take 3. <a href="http://www.summer.harvard.edu/2009/courses/31441.jsp"> 4. CSCI S-1, "Great Ideas in Computer Science with Java" 5. </a>. 6.</p> 7.
Not deep linking:
<p> 1. <a href="http://www.summer.harvard.edu/"> 2. Register for Harvard Summer School 3. </a> so you can take 4. <a href="http://www.summer.harvard.edu/2009/courses/"> 5. CSCI S-1, "Great Ideas in Computer Science with Java" 6. </a>. 7.</p> 8.
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
38 of 76 4/1/2009 9:12 AM
![Page 39: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/39.jpg)
Example from Logan Airport (BOS)Example from Boston's Logan Airport site:
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
39 of 76 4/1/2009 9:12 AM
![Page 40: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/40.jpg)
Example from Mass RMVTo renew your registration, visit http://www.mass.gov/rmv
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
40 of 76 4/1/2009 9:12 AM
![Page 41: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/41.jpg)
Losing the Scent
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
41 of 76 4/1/2009 9:12 AM
![Page 42: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/42.jpg)
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
42 of 76 4/1/2009 9:12 AM
![Page 43: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/43.jpg)
Please don't "Click Here"Example from Boston's Logan Airport site:
Sometimes you can "Click Here" to Elicit an Action
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
43 of 76 4/1/2009 9:12 AM
![Page 44: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/44.jpg)
Every Page NeedsTitle that "stands on its own"Creator (person or institution)Creation or Revision or Reviewed dateLink to home pagePossibly
URL of the pageLink to Privacy Statement, Terms of UseCopyright Statement
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
44 of 76 4/1/2009 9:12 AM
![Page 45: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/45.jpg)
Importance of a Good TitleBrowser
BookmarksHistoryWindow Title
Search Engine results
Bookmarks
Window Title
History
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
45 of 76 4/1/2009 9:12 AM
![Page 46: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/46.jpg)
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
46 of 76 4/1/2009 9:12 AM
![Page 47: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/47.jpg)
Search Enginestitlemeta descriptionmeta keywords
<head> 1. <title>Harvard College Admissions Office</title> 2. <meta name="keywords" content="harvard admissions, 3. harvard college admissions, harvard admissions office, 4. harvard college admissions office, 5. harvard undergraduate admissions, 6. harvard undergrad admissions, 7. harvard undergraduate admissions office, 8. visiting harvard, visiting harvard university, 9. harvard university admissions, 10. harvard university undergraduate admissions, 11. harvard college, travel to harvard" /> 12. <meta name="description" content="The main website for the 13. Harvard College Admissions Office which oversees 14. undergraduate admissions for Harvard University." /> 15.</head> 16.
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
47 of 76 4/1/2009 9:12 AM
![Page 48: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/48.jpg)
Visual Design
LogoTitleNavigationContent
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
48 of 76 4/1/2009 9:12 AM
![Page 49: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/49.jpg)
Creating Content
People scan Web content. Content designed for print publications will need to be made Web-friendly:
Information needs to be "chunked"For existing print content, reduce word count by 50%Use bullet lists, subheadingsAdd appropriate hyperlinksProvide print-friendly CSS or print-friendly versions for certain documents
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
49 of 76 4/1/2009 9:12 AM
![Page 50: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/50.jpg)
Technology Constraintsmonitorbrowserinternet connection speedplugins
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
50 of 76 4/1/2009 9:12 AM
![Page 51: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/51.jpg)
Design "Above the Fold"Check your pages for several window sizes:
800 × 6001024 × 7681280 × 1024
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
51 of 76 4/1/2009 9:12 AM
![Page 52: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/52.jpg)
Below the FoldAbove the fold:
Below the fold:
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
52 of 76 4/1/2009 9:12 AM
![Page 53: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/53.jpg)
Page Design: Fixed or Variable Width?Printing: 560 pixels for fixed widthReading: about the sameAvoid horizontal scrollingVariable width does not waste space, but may make text lines too long.
CNN - fixed width
W3C - flexible width
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
53 of 76 4/1/2009 9:12 AM
![Page 54: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/54.jpg)
Page WeightTake advantage of client-side caching: re-use URLs for CSS, images, javascript throughout the side.
Decide on per page kilobyte budget which reflects your audience.
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
54 of 76 4/1/2009 9:12 AM
![Page 55: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/55.jpg)
Download TimesA web page has a "page weight" (XHTML + CSS + images + JS + Flash + ...) of 184kb. How long does thistake to download?
184 kb = 184kb × 1024 bytes/kb × 8 bits/byte = 1,507,328 bits For a 56K modem: 1,507,328 bits / 56,000 bits/s = 26.9 s
HTTP Requests. A look at the HTTP requests needed to render www.extension.harvard.edu
Download Time Calculator
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
55 of 76 4/1/2009 9:12 AM
![Page 56: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/56.jpg)
Graph of download times:
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
56 of 76 4/1/2009 9:12 AM
![Page 57: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/57.jpg)
URLs as UIFile structure should resemble site organization.For some users, your URL can also function as a user-interface. (Alertbox: URL as UI)
http://www.adobe.com/software/dreamweaver/http://www.adobe.com/software/fireworks/http://www.adobe.com/software/flash/
Keep to less than 72 characters so that it doesn't "wrap" in an email or when printed.Often "advertised" or "published" URLs will be short and easy to remember. These URLs can beredirected to the true resource via Apache Redirect or Rewrite directivesOr use an URL shortener like bit.ly or TinyURL.com
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
57 of 76 4/1/2009 9:12 AM
![Page 58: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/58.jpg)
Homepage is often a Different Beast
Boeing
Harvard College
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
58 of 76 4/1/2009 9:12 AM
![Page 59: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/59.jpg)
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
59 of 76 4/1/2009 9:12 AM
![Page 60: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/60.jpg)
Reassuring Users with "Inukshuk" ContentFrom User Interface Engineering: Reassuring Users with Inukshuk Content
Carleton
Harvard College
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
60 of 76 4/1/2009 9:12 AM
![Page 61: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/61.jpg)
Examples of Website EvolutionThe Internet Archive Wayback Machine
Examples
Southwest AirlinesThe BBCCommonwealth of MassachusettsBoston.comUniversity of MichiganInternal Revenue ServiceThe White House
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
61 of 76 4/1/2009 9:12 AM
![Page 62: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/62.jpg)
Wrap-up of JavaScript and ObjectsMenusObjects
FlashAppletsSilverlight
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
62 of 76 4/1/2009 9:12 AM
![Page 63: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/63.jpg)
Dropdown MenusHarvardScience: Science and Engineering at Harvard University
Amazon.com
"Mega" Dropdown Menus
Jakob Nielsen's Alertbox, March 23, 2009: Mega Drop-Down Navigation Menus Work Well
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
63 of 76 4/1/2009 9:12 AM
![Page 64: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/64.jpg)
The White House
Food Network
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
64 of 76 4/1/2009 9:12 AM
![Page 65: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/65.jpg)
Dropdown Menus
The basics are:
Make the first list "inline"Hide the secondary listsUse the CSS ":hover" pseudo-class to change secondary list display property
Example 9.2Example 9.2 Source:
view plain print ?
<ul id="dropdown1" > 1. <li><a href="#" shape="rect" >AL East</a> 2. <ul> 3. <li><a href="#" shape="rect" >Baltimore</a></li> 4. <li><a href="#" shape="rect" >Boston</a></li> 5. <li><a href="#" shape="rect" >New York</a></li> 6. <li><a href="#" shape="rect" >Toronto</a></li> 7. <li><a href="#" shape="rect" >Tampa Bay</a></li> 8. </ul> </li> 9. <li><a href="#" shape="rect" >AL Central</a> 10. <ul> 11. <li><a href="#" shape="rect" >Chicago</a></li> 12. <li><a href="#" shape="rect" >Cleveland</a></li> 13. <li><a href="#" shape="rect" >Detroit</a></li> 14. <li><a href="#" shape="rect" >Kansas City</a></li> 15. <li><a href="#" shape="rect" >Minnesota</a></li> 16. </ul> </li> 17. <li><a href="#" shape="rect" >AL West</a> 18. <ul> 19. <li><a href="#" shape="rect" >Los Angeles</a></li> 20. <li><a href="#" shape="rect" >Oakland</a></li> 21. <li><a href="#" shape="rect" >Texas</a></li> 22. <li><a href="#" shape="rect" >Seattle</a></li> 23. </ul> </li> 24.</ul> 25.
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
65 of 76 4/1/2009 9:12 AM
![Page 66: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/66.jpg)
In style element (<style type="text/css">) within head element:
view plain print ?
ul { 1. padding: 0; 2. margin: 0; 3. list-style: none; 4. } 5.li { 6. float: left; 7. position: relative; 8. width: 10em; 9. } 10.li ul { 11. display: none; 12. position: absolute; 13. top: 1em; 14. left: 0; 15. } 16.li:hover ul { display: block; } 17. 18.
Example 9.2 Demonstrated
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
66 of 76 4/1/2009 9:12 AM
![Page 67: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/67.jpg)
Dropdown Menus
Example 9.3Example 9.3 Source:
view plain print ?
<ul id="dropdown2" > 1. <li><a href="#" shape="rect" >AL East</a> 2. <ul> 3. <li><a href="#" shape="rect" >Baltimore</a></li> 4. <li><a href="#" shape="rect" >Boston</a></li> 5. <li><a href="#" shape="rect" >New York</a></li> 6. <li><a href="#" shape="rect" >Toronto</a></li> 7. <li><a href="#" shape="rect" >Tampa Bay</a></li> 8. </ul> </li> 9. <li><a href="#" shape="rect" >AL Central</a> 10. <ul> 11. <li><a href="#" shape="rect" >Chicago</a></li> 12. <li><a href="#" shape="rect" >Cleveland</a></li> 13. <li><a href="#" shape="rect" >Detroit</a></li> 14. <li><a href="#" shape="rect" >Kansas City</a></li> 15. <li><a href="#" shape="rect" >Minnesota</a></li> 16. </ul> </li> 17. <li><a href="#" shape="rect" >AL West</a> 18. <ul> 19. <li><a href="#" shape="rect" >Los Angeles</a></li> 20. <li><a href="#" shape="rect" >Oakland</a></li> 21. <li><a href="#" shape="rect" >Texas</a></li> 22. <li><a href="#" shape="rect" >Seattle</a></li> 23. </ul> </li> 24.</ul> 25.
In style element (<style type="text/css">) within head element:
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
67 of 76 4/1/2009 9:12 AM
![Page 68: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/68.jpg)
view plain print ?
ul { 1. padding: 0; 2. margin: 0; 3. list-style: none; 4. } 5.li { 6. float: left; 7. position: relative; 8. width: 10em; 9. } 10.li ul { 11. display: none; 12. position: absolute; 13. top: 1.7em; 14. left: 0; 15. } 16. li > ul { 17. top: auto; 18. left: auto; 19. } 20.li:hover ul { display: block; } 21.#dropdown2 li { 22. border: thin solid navy; 23. font-family: calibri,verdana,tahoma,helvetica,sans-serif; 24. background-color: #ccf; 25. } 26.#dropdown2 ul li { background-color: #eef; } 27.#dropdown2 a {display:block; padding: 0.25em;} 28.#dropdown2 a:link, 29.#dropdown2 a:visited, 30.#dropdown2 a:hover, 31.#dropdown2 a:active 32. { text-decoration: none; font-weight: bold; } 33.#dropdown2 a:hover { background-color: navy; color: #ccf; } 34. 35.
Example 9.3 Demonstrated
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
68 of 76 4/1/2009 9:12 AM
![Page 69: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/69.jpg)
Some details for Opera and IE6For Opera, we need a few additional styles.
For IE6, we need JavaScript since the CSS "hover" pseudo-class is not supported for all elements.
See: A List Apart: Suckerfish Dropdowns
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
69 of 76 4/1/2009 9:12 AM
![Page 70: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/70.jpg)
Dropdown menus inspired by SuckerfishSon of Suckerfish Dropdowns
Well now they're back and they're more accessible, even lighter in weight (just 12 lines of JavaScript),have greater compatibility (they now work in Opera and Safari without a hack in sight) and can havemultiple-levels.
Superfish
Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSSdrop-down menu (so it degrades gracefully without JavaScript) and adds the followingmuch-sought-after enhancements.
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
70 of 76 4/1/2009 9:12 AM
![Page 71: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/71.jpg)
Adobe SWF and Flash and FlexFlash Player is the browser pluginSWF is file formatAuthoring tools: Flash and FlexActionScript is the proprietary scripting language (based on JavaScript)
Video
Charts
Webkinz
MLB Gameday
ESPN Gamecast
Flash Earth
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
71 of 76 4/1/2009 9:12 AM
![Page 72: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/72.jpg)
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
72 of 76 4/1/2009 9:12 AM
![Page 73: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/73.jpg)
Example Flash with XML/SWF ChartsXML/SWF ChartsCharts SWF is providedYou provide the data in an XML format
Files involved:
chart-object.htmlcharts.swfdata.xml
A closer look
Markup (note use of "object" with nested "embed"):
view plain print ?
<body> 1. <p>A Chart</p> 2. <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 3. codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" 4. width="400" height="250" id="charts" align=""> 5. <param name="movie" value= 6. "charts.swf?library_path=charts_library&xml_source=data.xml" /> 7. 8. <param name="quality" value="high" /> 9. <param name="bgcolor" value="#666666" /> 10. <embed src= 11. "charts.swf?library_path=charts_library&xml_source=data.xml" 12. quality="high" bgcolor="#666666" width="400" height="250" name= 13. "charts" align="" swliveconnect="true" 14. type="application/x-shockwave-flash" pluginspage= 15. "http://www.macromedia.com/go/getflashplayer" /> 16. </object> 17.</body> 18.
Screenshot of the chart itself:
XML Data (data.xml):
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
73 of 76 4/1/2009 9:12 AM
![Page 74: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/74.jpg)
view plain print ?
<chart> 1. <chart_data> 2. <row> 3. <null/> 4. <string>2004</string> 5. <string>2005</string> 6. <string>2006</string> 7. <string>2007</string> 8. </row> 9. <row> 10. <string>Region A</string> 11. <number>5</number> 12. <number>10</number> 13. <number>30</number> 14. <number>63</number> 15. </row> 16. <row> 17. <string>Region B</string> 18. <number>100</number> 19. <number>20</number> 20. <number>65</number> 21. <number>55</number> 22. </row> 23. <row> 24. <string>Region C</string> 25. <number>56</number> 26. <number>21</number> 27. <number>5</number> 28. <number>90</number> 29. </row> 30. </chart_data> 31.</chart> 32.
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
74 of 76 4/1/2009 9:12 AM
![Page 75: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/75.jpg)
Use "swfobject.js" to include SWF filesswfobject SWFObject is an easy-to-use and standards-friendly method to embed Flash content, whichutilizes one small JavaScript fileExample of Chart using SWFObject
view plain print ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
1.
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 2. <head> 3. <title>SWFObject v2.0</title> 4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 5. <script type="text/javascript" src="swfobject.js"></script> 6. </head> 7. <body> 8. <script type="text/javascript"> 9. flashvars = { library_path: 'charts_library', xml_source: 'data.xml' } 10. swfobject.embedSWF("charts.swf", "myContent", "600", "400", "9.0.0",'expressInstall.swf',flas11. </script> 12. 13. <div id="myContent"> 14. <p>Alternative content</p> 15. </div> 16. </body> 17.</html> 18.
Flash Embedding Cage Match, from A List ApartSWFObject project
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
75 of 76 4/1/2009 9:12 AM
![Page 76: Building a Website - cscie12.dce.harvard.edu › lecture_notes › 2009 › 20090401-1.pdf · 4/1/2009 · Building a Website: Resources Web Style Guide, 3rd ed. by Lynch and Horton.](https://reader033.fdocuments.us/reader033/viewer/2022042316/5f045dd97e708231d40da02b/html5/thumbnails/76.jpg)
Java AppletsUC Irvine Chemistry Educational AppletsChemical Kinetics Simulation
Math, Physics, and Engineering AppletsRipple Tank
Table of Contents | All Slides | Link List | Examples | CSCI E-12
Building a Website http://localhost:8080/cocoon/projects/cscie12/slides/20090401/handout.html
76 of 76 4/1/2009 9:12 AM