Transcript Document

The World Wide Web
Things to know when one of
your many hats is
“Department Webmaster”
or web content editor, web contributor, web developer,
web designer, web administrator, web producer
program administrative assistant (other job related duties) etc.
Steve Bean, web developer
www.college.emory.edu
About You
• Name one of your favorite websites
• What was your first car?
Overview
• Web Communications
• Emory’s Web Resources & Practices
• Web Maintenance Tips & Tools
• Emerging Web Technologies
Web Communications
Growing importance for communication/collaboration
• Evolution of the WWW, sub-part of the Internet
– Netscape kicked-off Web version 1.0
– E-commerce provided incentives to expand
– 2000’s the century of transporting knowledge
(Thomas Friedman)
• People go to the WWW to find information
– “if it’s not on the Web, it doesn’t exist”
• College websites represent Emory to all
– First experience with the University or College might come
from a department website
Web Communications
Number of websites
Netcraft's latest Web survey found 101,435,253
websites in November 2006
Web Communications
Gone in 43 seconds!
Nielsen//NetRatings (http://www.nielsen-netratings.com/)
Web Communications
What makes visitors happy?
•
•
•
•
•
•
•
High quality content
Often updated
Minimal download time
Ease of use
Relevant to users needs
Unique to online medium
Net-centric organizational culture
(Jacob Nielson)
Web Communications
Information Architecture
• Site navigation
– Create a clear visual hierarchy
– Group by audience or task vs organization structure
– Main navigation on every page, sub-navigation for sections
– Breadcrumbs (“you are here”)
Web Communications
Good Design
• “Don’t make me think” (Steve Krug)
– What’s the point of the website?
– Can I find what I’m looking for?
• Usability
– Use familiar controls
– “My car has the same basic controls (interface) as
my first car had”
1932 Ford Roadster
2001 Porsche
Rose Pruyneth, Pennsylvania State University (http://blogs.das.psu.edu/webcontent/wp-content/uploads/id/)
Web Communications
Accessibility awareness
• ADA, section 508 of the Rehabilitation Act of 1973
• Compliance makes websites user friendly for all
(www.w3.org/WAI/)
• Alt image tags, CSS layout, avoid frames, avoid
popup windows, text and background color
combinations (avoid red/blue)
(poor example: www.globalaigs.org)
Web Communications
Writing for the Web
• People read websites slower (~25% less)
– Most just scan information, less than 16% read every word
• Short paragraphs keep it interesting
– Use bullet lists to organize lists
• Headings improve visual scanning
(“scent of information”, Jared Spool)
• Links help segment & make content easier to find
– Use trigger words
– Longer is better
• Active voice is better than passive voice
Web Communications
Active voice: subject performs the action
Web Communications
Passive voice: subject receives the action
Web Communications
Poor layout & formatting
Web Communications
Better layout & formatting
Questions
?
Emory’s Web Resources & Practices
Initial Setup Process
• Macromedia Dreamweaver (DW) Installed
– Most common version is currently 2004 MX
– Latest version is Dreamweaver 8
• Web account access
– Department’s web admin sends request to
[email protected]
– Define a new site in DW using provided URLs & instructions
• University web server (Maple)
– Maintained by AAIT
• Contact 7-7777 or (http://help.emory.edu) for support issues
– Production & Development environments
– Supported architectures: ColdFusion 7, PHP, Perl, Oracle 9.2
Emory’s Web Resources & Practices
• Fundamental Standards
–
–
–
–
–
–
Emory identity (http://www.identity.emory.edu)
Adobe Sabon Font (https://www.software.emory.edu/express/)
Include University & College links
Footer tag for last update & copyright info
Adobe PDFs for downloadable documents
Define acronyms
• Example: Online Pathway to University Standards (OPUS)
• EC services for department website design
(http://www.college.emory.edu/webprojects)
Emory’s Web Resources & Practices
Legal FAQs
• Advertising from third-parties is not allowed
– Example: Amazon.com offers payment for
textbook ads, logo links for web design firms
• Photo Releases
– Not needed if taken on Emory’s premises unless
the subject requests otherwise (implied consent)
• Copyright Clearance
– Any non-Emory work must have clearance from
the copyright owner
Emory’s Web Resources & Practices
Copyright protection & infringement avoidance
• What is covered?
– protects fixed, original and creative expressions
• Fair use: the four factors
–
–
–
–
The purpose and character of your use
The nature of the copyrighted work
The amount and substantiality of the portion taken
The effect of the use upon the potential market
• References
– US Copyright Office
(http://www.copyright.gov)
– Copyright Clearance Center
(http://www.copyright.com)
– Stanford University Fair Use Guidelines
(http://fairuse.stanford.edu)
Questions
?
Web Maintenance Tips & Tools
• File Management
– Archive periodic backups for easy rollbacks
– Remove old files - if it is on the web server anyone can find it
– Organization: nested folders
Web Maintenance Tips & Tools
• Tools from the World Wide Web Consortium W3C
– Check for dead links (http://validator.w3.org/checklink)
– Validate HTML 4.01 & CSS syntax (http://validator.w3.org)
QuickTime™ and a
TIFF(Uncompres sed) decompressor
are needed t o see this pict ure.
QuickTime™ and a
TIFF(Uncompres sed) decompressor
are needed t o see this pict ure.
• Dreamweaver tools
– find & replace, spell checker, MS Word clean-up
• Images
– Sizing: crop, less than 100K file size, resolution min.150 ppi
File formats: JPEGs, GIFs, PNG
Web Maintenance Tips & Tools
Web traffic statistics
• Difference between Hits, Vistors, Visits
Web Maintenance Tips & Tools
Emory’s WebTrends service
(http://webstats.emory.edu/)
Web Maintenance Tips & Tools
Google’s services
• Search (https://services.google.com/publicservice/)
– College website example: (http://www.college.emory.edu/search.html)
• Calendar (http://www.google.com/calendar/)
– Chemistry dept example: (http://www.chemistry.emory.edu/seminars/)
• Web traffic analytics (http://www.google.com/analytics/)
Web Maintenance Tips & Tools
Search Engine Optimization (SEO)
• Ways to improve the rankings
• Use descriptive page titles and alt tags
• Use appropriate headings/subheadings
• Meta tags: description, keywords
• Regularly update content
• External links to a website
– http://searchenginewatch.com
Questions
?
Emerging Web Technologies
• The Millennial Generation
– Born to be wired
(Mark Greenfield, University of Buffalo, http://tinyurl.com/yfmrk3)
– “Email is for older people, Instant Messaging is for my friends”
• Web 2.0
– Message Boards (BBS, Newsgroups)
• Shared posts based on a selected topic or forum
– BLOGs
(O’Reilly: http://tinyurl.com/y3uhod)
• Journal entries posted by a person with comments added by others
– Wikis
(http://wikipedia.org/wiki/wiki)
• Collaborative authoring to refine and update page(s) of content
– RSS feeds (Real Simple Syndication)
• Method for sharing and distributing content to other webpages
– Media rich content (Podcasts, MP3s, Video, Flash)
Review
• Web Communications
• Emory’s Web Resources & Practices
• Web Maintenance Tips & Tools
• Emerging Web Technologies
Questions
?
More Resources
•
•
•
•
•
•
http://www.highedweb.org/
http://www.useit.com/
http://www.uie.com/
http://www.webmonkey.com/
http://www.csszengarden.com/
http://www.htmlgoodies.com/
Keywords
• WebDav
– Web-based distributed authoring and
versioning (a file transfer protocol)
• URL
– Uniform Resource Locator (web address)
• CSS
– Cascading Style Sheets
Slides
• http://tinyurl.com/yd5872