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
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Â
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
Hinweis der Redaktion
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