Download PR 120 - Web Publishing

CA 272 - Professional
Web Site Development
Class 25 - Microformats,
Accessibility & Search Engine
Optimization
1
Print Style Sheet Review


Web Developer extension - good tool for
viewing print styles
Questions?




Applying print styles
Overriding screen styles
Content order
Hiding content
2
Intro to Microformats

Common patterns of content that do not have
HTML tags:






Contact info
Calendar/event info
Ratings & reviews
Relationships between people
Resumes
Content labeling (e.g., social bookmarking,
tagging)
3
Microformats




Humans can recognize contact info, events,
ratings, etc.
But, computers cannot
Microformats provide standard syntax for
marking up this data using existing HTML
tags
Mainly use divs, spans for elements, with
classes
4
hCard




Based on exising vCard format - standard for
exchanging contact info
hCard data can be harvested from Web page
and converted to vCard data for import into
Outlook and other address books
Online tools for creating hCards
Also microformats DW extension that helps
you create hCard content
5
hCalendar



hCalendar format is based on iCalendar
format - standard for calendar data
hCalendar can be converted into iCalendar
format which can be imported into Outlook
and other calendar apps
Online tools and DW extension for hCalendar
6
Tag-based Microformats






rel attribute of <a> specifies relationship of linked
doc to current page
rev attribute specifies relationship of current page to
linked doc
rel=“license” - Creative Commons licensing
rel=“tag” - link to ‘tag-space’ for tagging content
rel=“nofollow” - avoid giving PageRank
VoteLinks: rev=“vote-for”, “vote-against”, “voteabstain”
7
Relationship Microformats


XFN (XHMTL Friends Network)
rel=
 Child








Friend
Acquaintance
Contact
Met
Co-worker
Colleague
Co-resident
Neighbor









Parent
Sibling
Spouse
Kin
Muse
Crush
Date
Sweetheart
Me
8
‘Operator’ Extension

Firefox extension for leveraging
microformats:
https://addons.mozilla.org/en-US/firefox/addon/4106




Lets you view and export microformat data on
page
Can map addresses in Google maps
Can export vCards (from hCard data)
Etc.
9
Microformats Exercise







Open hCard creator:
http://microformats.org/code/hcard/creator
Type in your info (or dummy info)
Copy code
Paste into new HTML document
Examine code
How could we format this with CSS?
You need to include microformat in final
project
10
Accessibility

Accessibility: making your Web content readable and
understandable to the widest possible audience, including:



those with ‘disabilities’ or
technical requirements outside the mainstream – such as older
computers, screen readers, zoomed displays, etc.
U.S. government code Section 508 mandates that you
must make your site accessible if doing business with
government
11
Search Engine Optimization



Search engine optimization (SEO):
making your Web site appear and rank highly in
search engines for search terms that are relevant
to your content
interestingly, many accessibility tips also help
with SEO
Searchbot is a special needs user — e.g.,
searchbot cannot ‘see’ graphics
12
Importance of Web Standards
to Accessibility and SEO


Foundation of Accessibility and SEO is well-formed,
semantic content separate from presentation
Presentation is the main issue - different users have
different ways of perceiving content (e.g., blind must hear
your content)


Presentation should not get in the way of content
Content issues such as clear writing and serving nonnative speakers can be important, but not addressed here
13
Semantic Markup



Semantic markup – well-structured content with
headers, paragraphs, lists, etc.
Logical content order – for many users, content
will appear (or be read) in source order
Imagine that user cannot see your CSS or
graphics (Google also does not see)


Do not use graphics for important text
Image replacement
14
Accessible Navigation

Use list-based navigation with real (or imagereplaced) text for nav items (as we have
learned in class)




These work anywhere
Google can follow links to other pages in your site
and index them
Do not use image-based JavaScript rollovers for
navigation
Also suggest not using Flash for navigation
15
‘Skip Navigation’ Links


Provide ‘skip navigation’ links for users with
screen readers (also useful for text-based
browsers)
Requires <a> link at top of page to anchor at
top of main content:



<a href=“#main” id=“skipnav”>Skip navigation</a>
… [navigation] …
<a name=“main” id=“main”></a> … [main content]
Hide ‘skip links’ with CSS
16
Exercise: Skip Navigation

Open your float layout and add skip
navigation links:



Insert ‘main’ anchor before text in #mainContent
Insert link to #main at top of page: “Skip
navigation”; give id ‘skipnav’
Create CSS rule to hide link and anchor from
visual browsers:


Problem with display: none;
Try position: absolute; left: -5000px;
17
Review: CSS Image
Replacement




When we want to use a graphic to display text (e.g.,
Coca-Cola logo), we should use ‘image
replacement’
Insert real text:
<h1 id=“logo”>Coca-Cola</h1>
Replace with background image:
h1#logo { background: url(coke-logo.gif) 0 0 norepeat; width: 100px; height: 50px; text-indent: 5000px; }
Remember to be careful using background images
for important text - will not print
18
Other Accessibility Tips



Keep page size (kB) small
Use alt attribute on images - display or are
read by alternative browsers
Use relative font sizes (ems) so that users
can enlarge - IE cannot scale fonts with px
sizes


body { font-size: 62.5%; } /* sets to 10px */
p { font-size: 1.2em; } /* sets to 12px */
19
Other Accessibility Tips



Use DOCTYPE so browsers don’t have to guess
Use lang attribute of <html> (probably “en” for
English)
Use sufficient color contrast and visual clues


E.g., should change two aspects of links: color and
underlining
Don’t open new windows - harder for some users to
close them and they can’t use back-button
functionality
20
Other Accessibility Tips


Label form elements, use table headers, etc.
Use title attribute for elements that need
more explanation (e.g., ambiguous links)

Define acronyms and abbreviations:




<acronym title=“Extensible Hypertext Markup
Language”>XHTML</acronym>
Caption audio/video
Provide a site map
Provide an accessibility statement
21
Access keys

Can provide keyboard shortcuts for
commonly followed links - particularly:






Homepage - 1
Skip to main content - 2
Feedback/contact site author - 9
Syntax: <a href=“index.html” accesskey=“1”>
User types ALT-1 to follow link
Don’t overuse - can conflict with systemdefined or browser-defined shortcuts
22
Metadata: Page Titles




Meaningful page titles are important for
accessibility and search engines
Google displays ~ 65 characters
Use different page titles for EACH page
Instead of ‘Welcome to Widget World’ …


Widget World - Widget Parts for Commercial and
Industrial Grommets’ … or …
Widget World | Industrial - Grommet and Gasket
Applications’ (60 chars with spaces)
23
Metadata: Keywords


Keywords used to be considered very
important
Laundry list of relevant key phrases for
page/site:



widgets, grommets, gaskets, commercial parts …
Most search engines ignore now
Your Web page content should contain
keywords and phrases

Keyword density
24
Metadata: Page Description

Description is important for search engines Google uses as entry for search listing





Should be no more than 250 chars
Plain English
Work in keywords/phrases
Ideally, should be different for each page
Author - good idea to include
25
Exercise: Insert Metadata

In Dreamweaver:

Insert > HTML > Head Tags >



Keywords
Description
Meta - for other metadata, e.g., author:




Attribute: Name
Value: author
Content: [name of author]
Syntax: <meta name=“” content=“” />
26
Search Indexes vs. Directories

Search index: giant database of Web page that uses
‘spiders’ / ‘robots’ (searchbots) to automatically
comb Web and store Web page info (using
algorithms)



Info from Web pages
Google, Yahoo!, MSN
Search directory: manually categorized list of Web
pages


Info about Web pages
Open Directory Project, Yahoo! Directory (pay for inclusion)
27
Popular Search Engines*






Google - 49.2%
Yahoo - 23.8%
MSN - 9.6%
AOL - 6.3%
Ask - 2.6%
Others - 8.5%
* as of July 2006
Source: NetRatings for SearchEngineWatch.com
28
Important Search Providers



Google, Yahoo!, MSN, Ask, Open Directory
Project
ODP - volunteer-run, feeds data to search
engines
Other search engines draw data from other
indexes (e.g., AOL uses Google data)
29
Search Ranking Criteria


Ultimately: relevance of content and user’s
reliance on your information
Does your content contain key phrases that
users are searching?


Do other sites link to your content


Keyword density
PageRank (Google)
Many other criteria (e.g., how long your site
has been around)
30
Getting Your Site Listed


Search engines will typically find your site eventually
Can submit your site to index







E.g., Google: http://www.google.com/addurl/
Create a Google sitemap
Don’t get banned
Advertise: Google AdWords, Yahoo Search
Marketing
Get others to link to your site
Keep generating good content; rework existing
content to improve keyword density, etc.
Be patient
31
Google Webmaster Tools


Vital tool if you care about search engine ranking
(and Google in particular)
See how Google sees your site:



Site performance:




Crawl info - last indexed, any problems
Robots.txt validation (instructions for searchbot)
Top queries and ranking for various search terms
Index inclusion
Upload sitemap (XML format)
Specify preferred domain, other options
32
Google Analytics


Great, free tool for tracking visitors to your site
How to sign up:








Go to http://www.google.com/analytics/index.html
Click ‘Sign Up Now’
Create a Google account (if you need to)
 Gmail users already have Google account
Follow directions for creating Google Analytics account
Add Web Site Profile (site to be tracked)
Will need to add special <script> before closing </body>
tag on EVERY page to be tracked
Confirm you have added code
Google will begin tracking in few minutes after confirming
33
Homework


Create print style sheet for your float layout
Work on your final project:




Make sure you can add hCard microformat
… and “skip navigation” links
Know how to add metadata (description,
keywords, author)
Sign up for Google account (if you don’t have
one already)

You need to sign up for Webmaster tools and
Google Analytics for your final project site
34