This is an older presentation given in 2009. The goal was to advocate for the adoption of microformats to improve markup, SEO positioning, and modularize web development. The talk was first given at local user groups: Refresh Hampton Roads and the Web Usability and Standards User Group. Later, I gave the workshop to an internal audience: the UI Engineering team and, later, to a UI/UX Future Group
Nell’iperspazio con Rocket: il Framework Web di Rust!
Microformats Workshop (2009)
1. Microformats
future-proof our Web sites
prepare for Web 3.0
improve SEO
streamline Web development
reduce costs, long-term
Prepared by Kelley Walker, 2009.02
3. Location, location, locationX X XContent, Content, Content
• Words
• Images
• Sound
• Music
• Flash files
• Videos
Standards, standards,
standards
Increasingly:
• Dynamic
• Interactive with users
• Open to user control & manipulation
4. So, what are standards?
“(T)he web got off to a faster start than any
other medium. But its commercial success
preceded the development of industry
standards, throwing all of us into the
perilous position of creating products and
web sites that were continually made
obsolete by one proprietary browser or
device innovation after another."
- Jeffrey Zeldman
5. Browser wars
Browser makers introduced their own
formats and tried to force everyone
else to conform to their standards.
6. Even if we’ve never heard of
Web standards, it is by their
bugs that we shall know them
7. Standards: an old problem
Railroads developed without standards
Typical: 4' 8.5” gauge
Carson-Colorado line: 3’ gauge
Erie Railroad: 5’ gauge for bigger loads
Maine: 2’-3’ gauge (use less wood for ties)
10. Semantic Web
"… most information on the Web is designed for
human consumption, and … the structure of the data
is not evident to a robot browsing the web. … the
Semantic Web approach instead develops languages
for expressing information in a machine processable
form.“
--Tim Berners-Lee
The Web3.0 buzz started two years ago, getting a
boost from major companies like Microsoft, Google,
Yahoo. All of them increasingly embraced standards-
compliant, semantic-based Web design and
development
11. What is the semantic web?
Semantic markup makes our data structured and our
content more meaningful
Why does it matter. Consider this phrase:
“A man with a bone.”
What meanings are conjured up by the phrase?
13. It’s not just semantics
• The WHO (the organization) or The
Who (Band) or who?
• Manhattan (city) or Manhattan (drink)
or Manhattan (Sunseeker model)?
• Lincoln (equipment manufacturer) or
Lincoln (president) or Lincoln (city)?
14. What does it mean?
How does it mean?
With Semantic Markup
It’s also called (X)HTML
(X)HTML gives structure and meaning to content
Sometimes, developers use the word “tags”
<img> image
<p> paragraph
<cite> citation
<h1> heading
<em> emphasis
<strong> strong emphasis
<ul> unordered list
<blockquote>quoted content
15. interview transcript
classified advertisement
product listing (manufacturer’s showcase)
product review
product price or price range
video
phone #, hours, business location
event listing
floor plan
slide show
presentation
In HTML 4 there are about 50 elements to describe what our
content means. Maybe 50 sufficed in 1995, but it doesn't now,
especially if we want to get much more granular to describe page
content:
16. In order to create more granularity to
the structure and meaning of pages,
we could rewrite (X)HTML
17. Instead of an entire
rewrite of (X)HTML,
address a specific
problem and create a
MICROformat to solve
that problem.
Microformat movement:
20. The purpose – so content can be read and
understood by people, but can also be retrieved
and extracted by machines for the purposes of
indexing, searching for, saving, cross-referencing
that information for people.
are designed for humans first, machines second
are a simple, open data format
extend already existing, agreed upon standards
development starts with POSH – Plain Old Semantic HTML
allow for publishing and sharing information in structured, meaningful
ways
“enable users to own, control, move and share their data on the
web.“ -- according to Emily Lewis, a microformat evangelist who’s
written Microformats Made Simple
21. Widespread use
According to
Yahoo! SearchMonkey, there
are 1,450,000,000 web pages
that publish hCard and
36,200,000 pages marked up
with hCalendar
24. Refresh Hampton Roads
Monthly Meeting
posted on November 1, 2009
Date: November 3, 2009
18:00 - 20:00 EST
This meeting is public.
Filed under:
Business
Technology
Design
Usability
Web Standards
25. f
<div class = "vevent">
<h5 class = "summary"> Refresh Hampton Roads Monthly
Meeting</h5>
<div>posted on
<abbr class = "dtstamp" title=“20091101T1300Z">November 1,
2009 </abbr>
</div>
<div>Date:
<abbr class = "dtstart" title=“20001103T180000Z">November 3,
2009,
18:00 EST</abbr> -
<abbr class = "dtend" title = “20001103T190000Z">20:00 EST
</abbr>
</div>
<div>This meeting is <strong class = "class">public</strong>.</div>
<div>Filed under:</div>
<ul>
<li class="category">Business</li>
<li class="category">Technology</li>
<li class="category">Design</li>
<li class="category">Usability</li>
<li class="category">Web Standards</li>
</ul>
</div>
26. Microformats
are designed for humans first,
machines second
extend already existing, agreed
upon standards
allow for publishing and sharing
information in structured, meaningful
ways
use a simple, open data format
The promise of Web 3.0: transform a
web site into a read only API
27. A read only API?
Publish our sites once with (X)HTML
Using the hooks provided by microformats, the
content can be converted into other formats: XML,
RSS, Atom, JSON
There’s no need to create and maintain separate
data files for machine data or exchange (e.g., feeds)
We can work with third parties with the microformat
standard as our lingua franca. Existing conversion
tools transform it into their preferred data.
Optimus - http://microformatique.com/optimus/
30. What we’re already doing
The link rel=“nofollow” microformat
Our blog already uses the most widely
and successfully implemented
microformat, hAtom, which is for
marking up blog content. hAtom is
built into all blogging software:
Wordpress, Blogger, Livejournal,
Textpattern, Movable Type, etc.
31. Already widely implemented
Rel (relationship) tags make the
content more meaningful:
rel = “tag”
By adding rel = "tag" to a hyperlink, this
indicates that the destination of that hyperlink is
an author-designated "tag" (or keyword/subject)
for the destination page.
Other link relationships:
rel = “home”
rel = “license”
32. Implementation: Boattrader Blog
At the Florida boat show, Sea Ray introduced
its new line of pleasure boats, Bon Voyage and
Del Mar.
<a href=
http://www.boattrader.com/browse/make/sea-ray
rel=“tag”>Sea Ray</a>
<a href=
http://www.boattrader.com/browse/pleasure-boats
” rel=“tag”>pleasure boats</a>
33. Geolocation
We’ve discussed used the geolocation
metatag information
We can also wrap geolocation
microformats around dealer
information on dealer gallery pages,
ad listing detail pages, search results,
and dealer search results pages
ForRent has already implemented
hCard and geolocation
34. AP and hNews
developed by Associated Press
and Media Standards Trust
Perfect for our articles/news page
35. hListing
listing action: sell | rent | trade | meet | announce | offer | wanted | event | service
Lister: using hCard microformat: (full name || email || url || telephone)
Dtlisted: date listed
Dtexpired: date expired
Price:
Item Info: optional uses: fn || url || photo || geo || adr | // Uses hCard microformat
if it’s for person or business
Summary: summary of the item listed.
Description: description of item listed.
Item tags: keywords or phrases describing the item being offered, using rel-tag
microformat.
Permalink: permanent link to the listing (is not intended to expire).
36. hCard
Adds structure and meaning to contact information.
Business card-like information is automatically
extracted and imported into users’ address books. It
can be made available to third party apps.
Technorati's Contacts Feeds Service
Operator Plug-in for Firefox
Tails Export Plug-in for Firefox
Oomph Microformats Toolkit
37. Blogging platforms and social
media are using XFN
(X)HTML Friends Network - a set of relationship
defining links to other people’s web pages
Relationship Friend | Acquaintance | Contact
Physical Met
Professional Co-worker | Colleague
Geographical Co-resident | Neighbor
Family Child | Parent | Sibling | Spouse | Kin
Romantic Muse | Crush | Date | Sweetheart
Identity Me
38. For Developers: First, you
start with content
Miz Thang
Drama for Divas Unlimited
http://www.mizthang.com
Atlanta, GA 30301
miz.thang@mizthang.com
What is the basic structure and meaning:
39. POSHify
You work from the content, out, add valid and semantic markup:
<dl>
<dt>Miss Thang</dt>
<dd>
<ul>
<li>
<a href="http://www.mizthang.com">
Drama for Divas Unlimited
</a>
</li>
<li>Atlanta, GA 30301</li>
<li>
<a href="mailto:mizthang@mizthang.com">
mizthang@mizthang.com
</a>
</li>
</ul>
</dd>
</dl>
40. vCardize
<dl class=“vcard”>
<dt class=“fn”>Miss Thang</dt>
<dd>
<ul>
<li>
<a class = “url” href="http://www.mizthang.com">
Drama for Divas Unlimited
</a>
</li>
<li class=“adr”><span class=“locality”>Atlanta</span>, <abrr class=“region”
title=“Georgia”>GA</abbr> <span class=“postal-code”>30301</span></li>
<li>
<a class=“email” href="mailto:mizthang@mizthang.com">
mizthang@mizthang.com
</a>
</li>
</ul>
</dd>
</dl>
41. The Benefits
Improved SEO; better search results; may
even be able to use microformat hooks to
improve our search
Encouraging standards and consistency
reduces development time
Simple format – no steep learning curve
No need for special technologies
Makes data accessible; enables sharing
and re-use of structured data
Does not duplicate effort (RSS feeds
duplicate existing (X)HTML displays)
Enhances user experience
42. Who Benefits
Managers: streamlined dev process; SEO
improvements; happier developers
Designers: simple to learn; not daunting
technology; styling is easy using existing
CSS
Developers: less time deciding what to
name classes or how to mark up content.
Can spend more time writing styles
Content authors: makes content more
meaningful
Users: enhances UX; improves search;
plugins and third party apps built to make
organizing data easier
43.
44. Resources
The Microformats Wiki, www.microformats.org
Microformatique – microformat blog @ http://microformatique.com/
@microformats on Twitter -- http://twitter.com/microformats
@microformateers on Twitter – http://twitter.com/microformateers
Microformats Role Play –
http://visitmix.com/Articles/Microformats-Role-Play
Getting Semantic with Microformats –
http://ajaxian.com/archives/getting-semantic-with-microformats-series-by-emily-lewis
Update on Rich Snippets
--
http://googlewebmastercentral.blogspot.com/2009/10/help-us-make-web-better-updat
Webpatterns -- naming conventions and patterns for the Web:
http://www.webpatterns.org/
Semantic Class Names (several articles and resources)
-- http://microformats.org/wiki/semantic-class-names
Microformat Transformer -- http://microformatique.com/optimus/
Web 3.0 -- http://webr3.org/blog/featured/preparing-yourself-for-web-3-0-lod-
and-2010/
Microformat University --
http://www.virtualhosting.com/blog/2008/microformats-university-100-
articles-and-resources/
Microformats: Empowering Your Markup for Web 2.0 - John Allsopp
Microformats Made Simple by Emily Lewis
Editor's Notes
In order to talk about microformats, I want to go back to the beginning a bit, for a little background. In the beginning, when humankind was bequeathed the Web, it was common to think of the Web like real estate. And as with real estate, the mantra was location, location, location. People thought that it would be good to produce one web site, but buy up dozens, sometimes hundreds, of domain names with all of them pointing at, roughly, the same content. Ten years ago, when I worked for a startup, my boss bought up 78 different domains. For him, the idea was like having a Starbucks every ten blocks. The same coffee, the same coffee mugs, just a different address.
Today we know that the Web isn’t really about location, location, location. Instead, it’s about content, content, content – and that content earns you the location, location, location – which is to say, it buys you position on search results pages (SERPs).
Today’s and the future’s Web – increasingly dynamic and interactive, user controlled.
If the web is all about content, content, content (and not location, location, location), then whenever we talk about content, we need to talk about standards.
We’re familiar with standards. We know them by their bugs. Every time you encounter a bug on our Web site that only shows up in one browser and not others, that’s a problem that results from this chaotic lack of standards. More appropriately, it’s a problem of a browser not interpreting the existing standards correctly.
With the first industrial revolution in steam power technologies, railroad tracks developed without standards.The result? Different companies built tracks at different widths. It was common to build the track according to tradition: 4&apos; 8.5&quot;. Odd number, huh? Others built tracks at smaller gauges like the 3ft gauge Carson-Colorado line. To get to Nevada, a train coming from a 4&apos; 8.5” track would have to unload its cargo and passengers at a transfer station.
Railroad companies had their own version of the browser wars: the idea was to try to be an industry leader and force others to conform to your standards. Good for business, if it worked. It meant you&apos;d already invested the capital while your competitors would have to sink loads more capital into conforming to your standard and scrapping their previous investment. The heavy requirements for capital investment often put competitors out of business.
We’re already building our site with standards
We need to prepare for Web 3.0 – the Semantic Web
We say that when we think something’s trivial or nitpicking. But it’s not trivial at all when we consider the cases:
1998 – HTML4
2004 – HTML5 rewrite begins
2009 – will be years before HTML5 will be widely adopted
Today’s and the future’s Web – increasingly dynamic and interactive, user controlled.
Mapquest is an early adopter of microformats – already using hCalender, hCard, and geolocation microformats.
Use forrent url search URL for JSON and XML. Will need to open Wordpad to show the data conversion with line breaks.
What is JSON – JavaScript Object Notation, is a lightweight computer data interchange format. It is a text-based, human-readable format for representing simple data structures and associative arrays (called objects).
The JSON format is often used for serialization and transmitting structured data over a network connection. Its main application is in Ajax web application programming, where it serves as an alternative to the XML format.
Google’s long adopted microformats in google local, maps. This year, Google started using microformats to display “Rich Snippets”
The hAtom schema consists of the following:
hfeed (hfeed). optional.
feed category. optional. keywords or phrases, using rel-tag.
hentry (hentry).
entry-title. required. text.
entry-content. optional (see field description). text. [*]
entry-summary. optional. text.
updated. required using datetime-design-pattern. [*]
published. optional using datetime-design-pattern.
author. required using hCard. [*]
bookmark (permalink). optional, using rel-bookmark.
tags. optional. keywords or phrases, using rel-tag.
Microformat specifications and development work is supported by organizations and people such as Microsoft, Google, Yahoo, LinkedIn, Oodle, Facebook, Myspace, Hewlett Packard, Association for Computing Machinery, Wordpress’s Matt Mullenweg (photomat), Amazon’s Ian McAllister, Google’s Matt Cutts, Angstrom and KnowNow’s Rohit Khare and Adam Rifkin, Tantek Çelik, Frances Berriman of the BBC, Ben Ward at Yahoo Dev Network, ZDNet