Talk for Voices That Matter - Web Design conference covering the basics of microformats, as well as examples and exercises to help publish microformats (XFN, hCard and hCalendar). Also includes numerous demonstrations and microformats resources, including validation, authoring and parsing tools.
2. • Freelance web designer
• Lover of web standards, semantic
markup and CSS, accessibility,
usability and microformats
• Writer of web design/development
topics at A Blog Not Limited,
ScriptJunkie and MIX Online
• Author of Microformats Made Simple
Practical Microformats Voices That Matter
3. Today, you’ll learn
• What are microformats
• Benefits of microformats
• How to enrich your content with some common
microformats
• Where you can see microformats in action
• Lots of resources to help you publish
microformats
Practical Microformats Voices That Matter
4. What are microformats?
Microformats: Web Semantics & More
Practical Microformats Voices That Matter
5. What are microformats?
Microformats: Web Semantics & More
Practical Microformats Voices That Matter
6. Designed for humans first and machines
second, microformats are a set of simple,
open data formats built upon existing and
widely adopted standards.
Microformats: Web Semantics & More
Practical Microformats Voices That Matter
7. Microformats enable the
publishing and sharing of higher
fidelity information on the web.
Microformats: Web Semantics & More
Practical Microformats Voices That Matter
8. Building blocks that
enable users to own,
control, move and share
their data on the web.
Microformats: Web Semantics & More
Practical Microformats Voices That Matter
9. Smart
content
Building blocks that
enable users to own,
control, move and share
their data on the web.
Microformats: Web Semantics & More
Practical Microformats Voices That Matter
10. Smart
content
Building blocks that
enable users to own,
control, move and share Markup, with
their data on the web. more meaning
Microformats: Web Semantics & More
Practical Microformats Voices That Matter
11. Huh?
Practical Microformats Voices That Matter
12. Microformats are sets of HTML
attributes and values that are applied to
common web content - people, events,
blog posts, reviews, tags - to provide
more meaning.
Practical Microformats Voices That Matter
13. Microformats are sets of HTML
attributes and values that are applied to
common web content - people, events,
blog posts, reviews, tags - to provide
more meaning.
Content published with microformats can
be extracted by software and indexed,
downloaded, searched for, saved, cross-
referenced or combined.
Practical Microformats Voices That Matter
14. Formal microformats
• hCalendar: event information
• hCard: contact information
• rel-license: license links
• rel-nofollow: restricting increased page rank for links
• rel-tag: tag links
• VoteLinks: for, against and abstain links
• XFN: distributed social networks
• XOXO: outline content
Practical Microformats Voices That Matter
15. And even more drafts
• hAtom: syndicated • hProduct: consumer
content products
• hAudio: audio content • hRecipe: food and
beverage recipes
• hListing: open,
distributed listings • hResume: Résumés
and C.V.s
• hMedia: video, images
and audio media • hReview: reviews
• hNews: journalistic • xFolk: bookmarks
news
Practical Microformats Voices That Matter
17. FUNDAMENTALS
The basics
• Use existing standards: (X)HTML
• Emphasize semantics (POSH)
• Intentionally simple
• Address a specific “problem”
• Humans first, machines second
Practical Microformats Voices That Matter
18. FUNDAMENTALS
The benefits
• Semantics
• User experience enhancements
• More meaningful search results & better findability
• Encourages consistency and standards
• Minimal development effort
• No need for software or special technologies
• Enables sharing and re-use of your web content
elsewhere
Practical Microformats Voices That Matter
19. FUNDAMENTALS
Who benefits?
• Managers
• Developers
• Designers
• Content Authors
• Users
Practical Microformats Voices That Matter
21. EVERYONE BENEFITS
*BLATANT PLUG WARNING*
Check out Microformats Role Play for more on how microformats benefit different people
Practical Microformats Voices That Matter
22. Sounds good, but is
anyone really using them?
Practical Microformats Voices That Matter
23. 6,137,400,000
Practical Microformats Voices That Matter
25. Everyone’s doing it
• XFN: Twitter Flickr Google Buzz Huffduffer Digg
LinkedIn Plaxo Technorati Last.fm Google Social Graph API
Ident Engine
• rel-license: Creative Commons Yahoo! CC Search
Google "Usage Rights" search
• hCard: Google Rich Snippets Google Maps Yahoo! Local
Google Profiles Twitter Last.fm MySpace
• hCalendar: Yahoo! Upcoming MapQuest Local Facebook
Last.fm Eventful Google Rich Snippets
Practical Microformats Voices That Matter
26. Everyone’s doing it
• hResume: LinkedIn SimplyHired Stack Overflow
• hReview: Google Rich Snippets Yelp Yahoo! Local
Technorati New York Times Travel Cork’d
• hListing: Every Car Listed RealEstate.com dealtagger
• hRecipe: Food Network Williams Sonoma Recipes Google
Rich Snippets
Microformats Wiki: Examples in the Wild
Practical Microformats Voices That Matter
27. Enough with the sales
pitch, let’s get started!
Practical Microformats Voices That Matter
28. ELEMENTALS
rel-me
Assigned to links to sites that represent you online:
<a href="http://ablognotlimited.com">
A Blog Not Limited</a>
Practical Microformats Voices That Matter
29. ELEMENTALS
rel-me
Assigned to links to sites that represent you online:
<a href="http://ablognotlimited.com" rel="me">
A Blog Not Limited</a>
Practical Microformats Voices That Matter
30. ELEMENTALS
rel-me
Assigned to links to sites that represent you online:
<a href="http://ablognotlimited.com" rel="me">
A Blog Not Limited</a>
One of the values of XFN. Aids in online identity
consolidation.
Practical Microformats Voices That Matter
31. blog
Practical Microformats Voices That Matter
32. blog
portfolio
Practical Microformats Voices That Matter
33. blog
portfolio
Practical Microformats Voices That Matter
34. blog
portfolio
Practical Microformats Voices That Matter
35. blog
portfolio
Practical Microformats Voices That Matter
36. blog
portfolio
Practical Microformats Voices That Matter
37. blog
portfolio
Practical Microformats Voices That Matter
38. blog
portfolio
Practical Microformats Voices That Matter
39. blog
portfolio
Practical Microformats Voices That Matter
40. blog
portfolio
Practical Microformats Voices That Matter
41. blog
portfolio
Practical Microformats Voices That Matter
42. blog
portfolio
Practical Microformats Voices That Matter
43. blog
portfolio
Practical Microformats Voices That Matter
44. DIY DEMOS
Identity consolidation
• Create a new account at Huffduffer using a URL
containing rel="me" (i.e. Twitter profile)
• Visit Ident Engine’s Identity Discovery and enter a
profile URL that uses rel="me"
• Add a <link> to your Google Profile with rel="me"
to your site for automatic discovery with Buzz
Practical Microformats Voices That Matter
45. COMPOUNDS
hCard
Adds semantics to contact information for people,
places and organizations/companies.
Contact information published with hCard can be
transformed into an electronic business card.
hCard also improves the findability of your contact
information.
Practical Microformats Voices That Matter
46. STEP 1
Consider your content
Emily Lewis
A Blog Not Limited
Albuquerque, NM 87106
emily@ablognotlimited.com
Practical Microformats Voices That Matter
47. STEP 2
POSHify
<dl>
<dt>Emily Lewis</dt>
<dd>
<ul>
<li><a href="http://www.ablognotlimited.com">
A Blog Not Limited</a></li>
<li>Albuquerque, <abbr title="New Mexico">NM</abbr>
87106</li>
<li><a href="mailto:emily@ablognotlimited.com">
emily@ablognotlimited.com</a></li>
</ul>
</dd>
</dl>
Practical Microformats Voices That Matter
48. STEP 3
Add hCard
<dl>
<dt>Emily Lewis</dt>
<dd>
<ul>
<li><a href="http://www.ablognotlimited.com">
A Blog Not Limited</a></li>
<li>Albuquerque, <abbr title="New Mexico">NM</abbr>
87106</li>
<li><a href="mailto:emily@ablognotlimited.com">
emily@ablognotlimited.com</a></li>
</ul>
</dd>
</dl>
Practical Microformats Voices That Matter
65. Final hCard
Practical Microformats Voices That Matter
66. Final hCard
<dl class="vcard">
<dt class="fn">Emily Lewis</dt>
<dd>
<ul>
<li><a href="http://www.ablognotlimited.com"
class="url">A Blog Not Limited</a></li>
<li class="adr"><span class="locality">Albuquerque
</span>, <abbr title="New Mexico" class="region">NM</abbr>
<span class="postal-code">87106</span></li>
<li><a href="mailto:emily@ablognotlimited.com"
class="email">emily@ablognotlimited.com</a></li>
</ul>
</dd>
</dl>
Practical Microformats Voices That Matter
67. Worth noting
• Markup doesn't matter, but it should be POSH
• Attribute values are case-sensitive
• Root properties cannot be combined with
sub-properties
• You don't need additional class values for styling,
but you can use them
Practical Microformats Voices That Matter
68. DIY DEMOS
Electronic business card
• Go to H2VX Contacts Conversion, enter URL of a
page with hCard and select “download.” Or copy the
generated URL and paste into your own markup.
• Using Firefox, install the Operator add-on and visit a
page with hCard. Next, select “contacts” from the
new Operator toolbar.
• Add the Oomph Microformats Toolkit to your site
with hCard. Once installed, select the “gleam” icon
from the upper left-hand corner. Select any of the
“contacts” export options.
Practical Microformats Voices That Matter
69. COMPOUNDS
hCalendar
Adds semantics to event information.
Event information published with hCalendar can be
extracted and imported into users' calendars.
hCalendar also improves the findability of your event
information.
Practical Microformats Voices That Matter
70. STEP 1
Consider your content
at M atter ing on
h s
Voi ces T c e focun web
feren ents i
p th conancem
In-de g adv io ns by rs and
e xcitin with sess y autho
, r
d esign ted indust
c
respe rs.
leade 10
2 9, 20
e 28- rence
• Jun on Bay Confe
Missi r
• ente
C
Practical Microformats Voices That Matter
71. STEP 2
POSHify
<h1><a href="http://www.voicesthatmatter.com/
webdesign2010">Voices That Matter</a></h1>
<p>In-depth conference focusing on exciting advancements
in web design, with sessions by respected industry authors
and leaders.</p>
<ul>
<li>June 28-29, 2010</li>
<li><a href="http://www.acc-
missionbayconferencecenter.com">Mission Bay Conference
Center</a></li>
</ul>
Practical Microformats Voices That Matter
72. STEP 3
Add hCalendar
<h1><a href="http://www.voicesthatmatter.com/
webdesign2010">Voices That Matter</a></h1>
<p>In-depth conference focusing on exciting advancements
in web design, with sessions by respected industry authors
and leaders.</p>
<ul>
<li>June 28-29, 2010</li>
<li><a href="http://www.acc-
missionbayconferencecenter.com">Mission Bay Conference
Center</a></li>
</ul>
Practical Microformats Voices That Matter
73. STEP 3
Add hCalendar
<div class="vevent">
<h1><a href="http://www.voicesthatmatter.com/
webdesign2010">Voices That Matter</a></h1>
<p>In-depth conference focusing on exciting advancements
in web design, with sessions by respected industry authors
and leaders.</p>
<ul>
<li>June 28-29, 2010</li>
<li><a href="http://www.acc-
missionbayconferencecenter.com">Mission Bay Conference
Center</a></li>
</ul>
</div>
Practical Microformats Voices That Matter
74. STEP 3
Add hCalendar
<div class="vevent">
<h1 class="summary"><a href="http://
www.voicesthatmatter.com/webdesign2010">Voices That
Matter</a></h1>
<p>In-depth conference focusing on exciting advancements
in web design, with sessions by respected industry authors
and leaders.</p>
<ul>
<li>June 28-29, 2010</li>
<li><a href="http://www.acc-
missionbayconferencecenter.com">Mission Bay Conference
Center</a></li>
</ul>
</div>
Practical Microformats Voices That Matter
75. STEP 3
Add hCalendar
<div class="vevent">
<h1 class="summary"><a href="http://
www.voicesthatmatter.com/webdesign2010" class="url">Voices
That Matter</a></h1>
<p>In-depth conference focusing on exciting advancements
in web design, with sessions by respected industry authors
and leaders.</p>
<ul>
<li>June 28-29, 2010</li>
<li><a href="http://www.acc-
missionbayconferencecenter.com">Mission Bay Conference
Center</a></li>
</ul>
</div>
Practical Microformats Voices That Matter
76. STEP 3
Add hCalendar
<div class="vevent">
<h1 class="summary"><a href="http://
www.voicesthatmatter.com/webdesign2010" class="url">Voices
That Matter</a></h1>
<p class="description">In-depth conference focusing on
exciting advancements in web design, with sessions by
respected industry authors and leaders.</p>
<ul>
<li>June 28-29, 2010</li>
<li><a href="http://www.acc-
missionbayconferencecenter.com">Mission Bay Conference
Center</a></li>
</ul>
</div>
Practical Microformats Voices That Matter
77. STEP 3
Add hCalendar
<div class="vevent">
<h1 class="summary"><a href="http://
www.voicesthatmatter.com/webdesign2010" class="url">Voices
That Matter</a></h1>
<p class="description">In-depth conference focusing on
exciting advancements in web design, with sessions by
respected industry authors and leaders.</p>
<ul>
<li><span class="dtstart">June 28</span>-29, 2010</li>
<li><a href="http://www.acc-
missionbayconferencecenter.com">Mission Bay Conference
Center</a></li>
</ul>
</div>
Practical Microformats Voices That Matter
78. STEP 3
Add hCalendar
<div class="vevent">
<h1 class="summary"><a href="http://
www.voicesthatmatter.com/webdesign2010" class="url">Voices
That Matter</a></h1>
<p class="description">In-depth conference focusing on
exciting advancements in web design, with sessions by
respected industry authors and leaders.</p>
<ul>
<li><span class="dtstart"><span class="value-title"
title="2010-06-28"> </span>June 28</span>-29, 2010</li>
<li><a href="http://www.acc-
missionbayconferencecenter.com">Mission Bay Conference
Center</a></li>
</ul>
</div>
Practical Microformats Voices That Matter
79. STEP 3
Add hCalendar
<div class="vevent">
<h1 class="summary"><a href="http://
www.voicesthatmatter.com/webdesign2010" class="url">Voices
That Matter</a></h1>
<p class="description">In-depth conference focusing on
exciting advancements in web design, with sessions by
respected industry authors and leaders.</p>
<ul>
<li><span class="dtstart"><span class="value-title"
title="2010-06-28"> </span>June 28</span>-<span
class="dtend">29, 2010</span></li>
<li><a href="http://www.acc-
missionbayconferencecenter.com">Mission Bay Conference
Center</a></li>
</ul>
</div>
Practical Microformats Voices That Matter
80. STEP 3
Add hCalendar
<div class="vevent">
<h1 class="summary"><a href="http://
www.voicesthatmatter.com/webdesign2010" class="url">Voices
That Matter</a></h1>
<p class="description">In-depth conference focusing on
exciting advancements in web design, with sessions by
respected industry authors and leaders.</p>
<ul>
<li><span class="dtstart"><span class="value-title"
title="2010-06-28"> </span>June 28</span>-<span
class="dtend"><span class="value-title"
title="2010-06-29"> </span>29, 2010</span></li>
<li><a href="http://www.acc-
missionbayconferencecenter.com">Mission Bay Conference
Center</a></li>
</ul>
</div> Practical Microformats Voices That Matter
81. STEP 3
Add hCalendar
<div class="vevent">
<h1 class="summary"><a href="http://
www.voicesthatmatter.com/webdesign2010" class="url">Voices
That Matter</a></h1>
<p class="description">In-depth conference focusing on
exciting advancements in web design, with sessions by
respected industry authors and leaders.</p>
<ul>
<li><span class="dtstart"><span class="value-title"
title="2010-06-28"> </span>June 28</span>-<span
class="dtend"><span class="value-title"
title="2010-06-29"> </span>29, 2010</span></li>
<li class="location"><a href="http://www.acc-
missionbayconferencecenter.com">Mission Bay Conference
Center</a></li>
</ul>
</div> Practical Microformats Voices That Matter
82. Final hCalendar
<div class="vevent">
<h1 class="summary"><a href="http://
www.voicesthatmatter.com/webdesign2010" class="url">Voices
That Matter</a></h1>
<p class="description">In-depth conference focusing on
exciting advancements in web design, with sessions by
respected industry authors and leaders.</p>
<ul>
<li><span class="dtstart"><span class="value-title"
title="2010-06-28"> </span>June 28</span>-<span
class="dtend"><span class="value-title"
title="2010-06-29"> </span>29, 2010</span></li>
<li class="location"><a href="http://www.acc-
missionbayconferencecenter.com">Mission Bay Conference
Center</a></li>
</ul>
</div> Practical Microformats Voices That Matter
83. DIY DEMOS
Electronic calendar
• Go to H2VX Events Conversion, enter URL of a
page with hCalendar and select “download.” Or copy
the generated URL and paste in your own markup.
• Using Chrome, install the Michromeformats
extension and visit a page with hCalendar. Next,
select the new uf icon from your address bar and
download the .ics file.
Practical Microformats Voices That Matter
93. RESOURCES
My book!
Microformats Made Simple
Practical Microformats Voices That Matter
94. RESOURCES
My book!
Microformats Made Simple
Want a preview? Check out
Rough Cuts excerpts
*BLATANT PLUGS NOT OVER YET*
Practical Microformats Voices That Matter
95. RESOURCES
My blog tutorials
Getting Semantic With Microformats:
• rel-home, rel-tag, rel-license
• XFN
• hCard
• hCalendar
• hAtom
• hResume
• Themes & Issues
• Value class pattern
Practical Microformats Voices That Matter
96. RESOURCES
Great stuff from other folks
• Microformats Wiki
• A good resource once you understand the basics
• Microformats: Empowering Your Markup for Web 2.0 by
John Allsopp
• microformatique
• Follow @microformats
• Send questions to @microformateers
Practical Microformats Voices That Matter
98. RESOURCES
Validate, extract, transform
• H2VX • Tails Export Add-on for
Firefox
• Optimus-Microformats
Transformer • Semantic Checker Add-
on for Firefox
• Microform.at
Transformer • Michromeformats
extension for Chrome
• Oomph Microformats
Toolkit • SafariMicroformats
plug-in for Safari
• Operator Add-on for
Firefox
Practical Microformats Voices That Matter
99. RESOURCES
Additional reading
• Microformats Role Play
• The Value Class Pattern
• More on developing naming conventions,
Microformats and HTML5
• Styling hReview Microformats
• Styling XFN and rel-license links
• Styling hCard
Practical Microformats Voices That Matter