Workshop for Environments for Humans, covering the history and foundation 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 and authoring tools.
2. • I’m a web designer for Pitney Bowes
Business Insight
• I love web standards, semantic
markup and CSS, accessibility, usability
and microformats
• I write about web design (and other
topics) at A Blog Not Limited
• I just wrote Microformats Made Simple
2 Microformats Workshop The Workshop Summits
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
3 Microformats Workshop The Workshop Summits
5. Microformats Wiki: What Are Microformats
Microformats enable the
publishing and sharing of higher
fidelity information on the web.
Designed for humans first and machines
second, microformats are a set of simple,
open data formats built upon existing and
widely adopted standards.
5 Microformats Workshop The Workshop Summits
6. Microformats Wiki: What Are Microformats
Smart
content
Building blocks that
enable users to own,
control, move and share Markup, with
their data on the web. more meaning
6 Microformats Workshop The Workshop Summits
7. Sounds complicated.
Let’s make it easier.
7 Microformats Workshop The Workshop Summits
8. Microformats are sets of
HTML attributes and values
that are applied to common
web content to describe that
content and give it more
meaning.
8 Microformats Workshop The Workshop Summits
9. 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
9 Microformats Workshop The Workshop Summits
10. 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
10 Microformats Workshop The Workshop Summits
11. Formal vs. draft specifications
Formal microformats are those that are
stable and unlikely to change.
Draft microformats are relatively far
along in the specification process, but
haven’t been formally completed. They are
subject to change.
11 Microformats Workshop The Workshop Summits
12. THE BASICS
Use existing standards
• (X)HTML
• rel
• class
• rev
• vCard: hCard
• iCalendar: hCalendar
• Atom: hAtom
• Other microformats and naming principles
12 Microformats Workshop The Workshop Summits
13. THE BASICS
Emphasize semantics
• Core purpose is meaning
• POSH - Plain Old Semantic HTML
• “Self-describing” - Chris Mills
• <p> for paragraph content
• <ul>, <ol>, <dl> for list content
• <h1>-<h6> for heading content
13 Microformats Workshop The Workshop Summits
14. THE BASICS
Address a specific “problem”
• Common, real-world web content
• People
• Organizations
• Events
• Blog posts
• Reviews
• Tags
14 Microformats Workshop The Workshop Summits
15. THE BASICS
Intentionally simple
• Easy to learn and use
• Based on current human behavior on the web
• Aimed at 80% of use-cases; the most common
15 Microformats Workshop The Workshop Summits
16. THE BASICS
Humans first, machines second
• Human-readable content
• From a user’s perspective, web content published with
microformats is indistinguishable from that published
without.
• “Invisible” metadata for machines
• Search engines, user agents, applications, etc.
• Allows human-readable content to be extracted and used
for a wide range of purposes.
16 Microformats Workshop The Workshop Summits
17. Why?
17 Microformats Workshop The Workshop Summits
18. THE BENEFITS
Semantics
• Meaning for machines
• Content published with microformats is parsable. It can
be extracted and indexed, downloaded, searched for,
saved, cross-referenced and combined.
• Web site becomes an API, enabling sharing and re-use of
content
18 Microformats Workshop The Workshop Summits
19. THE BENEFITS
User experience enhancements
• More meaningful search results
• Google Rich Snippets
• Download to address book
• Download to calendar
19 Microformats Workshop The Workshop Summits
21. DEMO: Google Rich Snippets
Visit http://google.com and search for “coffee san francisco”
21 Microformats Workshop The Workshop Summits
22. DEMO: Google Rich Snippets
Scroll down to see how the Rich Snippet displays hReview
information*
*NOTE: Google is still rolling out this feature, so not all search users will see Rich Snippets
22 Microformats Workshop The Workshop Summits
23. THE BENEFITS
Minimal investment
• Easy to learn
• Easy to implement
• No need for special software
• No need to learn new technologies
23 Microformats Workshop The Workshop Summits
24. THE BENEFITS
Encourages standards
• Web standards
• Valid, semantic markup
• Standard workflows and processes for development
teams
• Consistent markup
• Standard naming conventions for styling
24 Microformats Workshop The Workshop Summits
25. A BIT OF HISTORY
Enrich content with semantics
• Early 2000s
• Semantic, structural markup
• Separate CSS for presentation
• 2003-04
• XFN
• rel-license
• rel-tag
• VoteLinks
25 Microformats Workshop The Workshop Summits
26. AND TODAY
6,137,400,000+ published
• 1,660,000,000 - hCard • 807,000,000 - hAtom
• 44,100,000 - hCalendar • 452,000,000 - XFN
• 60,600,000 - hReview • 768,000,000 - adr
• 108,000,000 - hResume • 148,000,000 - geo
Yahoo! SearchMonkey results as of 12/17/09
26 Microformats Workshop The Workshop Summits
27. AND TODAY
Everyone’s doing it
• XFN: Twitter Flickr 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
27 Microformats Workshop The Workshop Summits
28. AND TODAY
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
Microformats Wiki: Examples in the Wild
28 Microformats Workshop The Workshop Summits
30. Elemental microformats
• Single attribute-value pair
• Often used as building blocks for other microformats
30 Microformats Workshop The Workshop Summits
31. ELEMENTALS
rel-tag
Describes the relationship of links containing tags
(keywords) to your content:
<a href="/tags/microformats/"
rel="tag">microformats</a>
The rel="tag" attribute-value pair indicates the link
destination (href) is to a page that tells what the
current page - or part of the current page - is about.
31 Microformats Workshop The Workshop Summits
32. ELEMENTALS
What can you do with rel-tag?
• Context-specific search
• Technorati's Tags
• Operator Plug-in for Firefox
32 Microformats Workshop The Workshop Summits
33. Operator Plug-in:
Contextual search in
action
33 Microformats Workshop The Workshop Summits
34. DEMO: Operator Plug-in
Using Firefox, visit https://addons.mozilla.org/en-US/firefox/addon/
4106 and install the plug-in (“Add to Firefox”)
34 Microformats Workshop The Workshop Summits
35. DEMO: Operator Plug-in
Using Firefox with plug-in installed, visit http://ablognotlimited.com/
s/130 and scroll down to see tags for this post
35 Microformats Workshop The Workshop Summits
37. ELEMENTALS
rel-me
Assigned to links to sites that represent you online:
<a href="http://ablognotlimited.com" rel="me">
A Blog Not Limited</a>
37 Microformats Workshop The Workshop Summits
38. ELEMENTALS
What can you do with rel-me?
• Identity consolidation
• Ident Engine
• Huffduffer
38 Microformats Workshop The Workshop Summits
39. blog
portfolio
39 Microformats Workshop The Workshop Summits
40. blog
portfolio
40 Microformats Workshop The Workshop Summits
41. Ident Engine:
Identity consolidation
in action
41 Microformats Workshop The Workshop Summits
42. DEMO: Ident Engine
Visit http://identengine.com/identity-discovery.htm and enter URL
of a profile page
42 Microformats Workshop The Workshop Summits
45. DEMO: Huffduffer
Visit http://huffduffer.com/signup/ and, if you don’t already have an
account, submit your details using a web site with rel-me (i.e.
Twitter profile)
45 Microformats Workshop The Workshop Summits
47. ELEMENTALS
XFN
me is just one of the values for the XFN microformat
XFN is used to describe social relationships among
people
47 Microformats Workshop The Workshop Summits
48. ELEMENTALS
XFN
Relationship XFN rel Values
Friendship (one value) contact acquaintance friend
Professional (one or both values) colleague co-worker
Family (one value) kin spouse child parent sibling
Romantic (any or all values) muse crush date sweetheart
Physical met
Geographic (one value) neighbor co-resident
Identity me
48 Microformats Workshop The Workshop Summits
49. ELEMENTALS
XFN
For links to other people’s identities online, you can
apply XFN to indicate your social relationship with
that person:
<a href="http://www.christopherschmitt.com/"
rel="colleague muse">
49 Microformats Workshop The Workshop Summits
51. Compound microformats
• Several attribute-value pairs (properties and sub-
properties)
• Utilize other microformats as building blocks
51 Microformats Workshop The Workshop Summits
52. 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.
• H2VX Contacts Conversion Service
• Operator Plug-in for Firefox
• Tails Export Plug-in for Firefox
• Oomph Microformats Toolkit
52 Microformats Workshop The Workshop Summits
54. DEMO: Oomph Microformats Toolkit
Visit http://visitmix.com/labs/oomph/2.0/client/style/firstrun.html
and click the glowing icon in the upper left corner
54 Microformats Workshop The Workshop Summits
55. DEMO: Oomph Microformats Toolkit
Options to export contact’s electronic business card
55 Microformats Workshop The Workshop Summits
58. 1
Start with Content
Do you have contact information for a person, place or
STEP
organization?
Emily Lewis
A Blog Not Limited
Albuquerque, NM 87106
emily@ablognotlimited.com
58 Microformats Workshop The Workshop Summits
59. 2
Add POSH http://www.emilylewisdesign.com/MicroformatsWorkshop/hCard-POSH.html
STEP
Apply valid, semantic markup
<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>
59 Microformats Workshop The Workshop Summits
60. 3
Add hCard
STEP
Add the root vcard to an element containing all of the contact
information
Then, add the relevant hCard properties and sub-properties via
the class attribute
Web Content class Value
• Name (first and last) • fn
• Web site • url
• Address • adr
• City • locality
• State/province • region
• ZIP code • postal-code
• Email address • email
60 Microformats Workshop The Workshop Summits
61. COMPOUNDS
Final hCard http://www.emilylewisdesign.com/MicroformatsWorkshop/hCard-Final.html
<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>
61 Microformats Workshop The Workshop Summits
62. A CLOSER LOOK
Non-semantic elements
<li class="adr">
<span class="locality">Albuquerque</span>,
<abbr title="New Mexico" class="region">NM</abbr>
<span class="postal-code">87106</span>
</li>
62 Microformats Workshop The Workshop Summits
63. A CLOSER LOOK
Don’t forget about validation!
• W3C Markup Validation Service
• Optimus Microformats Transformer
63 Microformats Workshop The Workshop Summits
64. DEMO: Markup validation
Visit http://validator.w3.org/ and enter URL for page with hCard
64 Microformats Workshop The Workshop Summits
68. Also 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
68 Microformats Workshop The Workshop Summits
69. COMPOUNDS
hCalendar
Adds semantics to event information.
Event information published with hCalendar can be
extracted and imported into users' calendars
• H2VX Events Conversion Service
• Operator Plug-in for Firefox
• Tails Export Plug-in for Firefox
• Oomph Microformats Toolkit
69 Microformats Workshop The Workshop Summits
70. H2VX:
Electronic calendar
in action
70 Microformats Workshop The Workshop Summits
71. DEMO: H2VX
Visit http://h2vx.com/ics/ and enter URL for page with hCalendar
(i.e. http://environmentsforhumans.com/workshop-summits/)
71 Microformats Workshop The Workshop Summits
72. DEMO: H2VX
Select “Download” to add .ics to your electronic calendar
72 Microformats Workshop The Workshop Summits
76. 1
Start with Content
Do you have event information?
STEP
010 b rating d
SX SWi 2 c e cele n behin
n feren passio
ay co ty and
A 5-d eativi media
r
the c olest new
the coologies 0
techn , 201
12-16 enter
• March e ntion
C
n Conv
• Austi
76 Microformats Workshop The Workshop Summits
77. 2
Add POSH http://www.emilylewisdesign.com/MicroformatsWorkshop/hCalendar-POSH.html
STEP
Apply valid, semantic markup
<h1><a href="http://sxsw.com/interactive">SXSWi 2010</a></h1>
<p>A 5-day conference celebrating the creativity and passion
behind the coolest new media technologies.</p>
<ul>
<li>March 12-16, 2010</li>
<li>Austin Convention Center</li>
</ul>
77 Microformats Workshop The Workshop Summits
78. 3
Add hCalendar
STEP
Add the root vevent to an element containing all of the event
information
Then, add the relevant hCalendar properties and sub-properties
via the class attribute
Web Content class Value
• Event name • summary
• Web site • url
• Description • description
• Type of event • category
• Start date • dtstart
• End date • dtend
• Location • location
78 Microformats Workshop The Workshop Summits
79. COMPOUNDS
Final hCalendar http://www.emilylewisdesign.com/MicroformatsWorkshop/hCalendar-Final.html
<div class="vevent">
<h1 class="summary"><a href="http://sxsw.com/interactive"
class="url">SXSWi 2010</a></h1>
<p class="description">A 5-day <span
class="category">conference</span> celebrating the creativity
and passion behind the coolest new media technologies.</p>
<ul>
<li><span class="dtstart"><span class="value-title"
title="2010-03-12"> </span>March 12</span>-<span
class="dtend"><span class="value-title" title="2010-03-16"> </
span>16, 2009</span></li>
<li class="location">Austin Convention Center</li>
</ul>
</div>
79 Microformats Workshop The Workshop Summits
80. A CLOSER LOOK
Non-semantic elements
<div class="vevent"> ... </div>
<p class="description">A 5-day <span
class="category">conference</span> celebrating the
creativity and passion behind the coolest new media
technologies.</p>
<li><span class="dtstart"><span class="value-title"
title="2010-03-12"> </span>March 12</span>-<span
class="dtend"><span class="value-title"
title="2010-03-16"> </span>16, 2009</span></li>
80 Microformats Workshop The Workshop Summits
81. A CLOSER LOOK
Value class pattern
Offers authors several options for marking up date-
time information, including the empty <span>
method:
<span class="dtstart"><span class="value-title"
title="2010-03-12"> </span>March 12</span>
• Machine-readable date information is the title
attribute value
• Screen-readers won’t read the title value
• No tooltip
81 Microformats Workshop The Workshop Summits
82. For ev
moreen
seman
t
power ic
!
Combining microformats
82 Microformats Workshop The Workshop Summits
83. COMBINING MICROFORMATS
hCard with rel-me http://www.emilylewisdesign.com/MicroformatsWorkshop/hCard-relMe.html
<dl class="vcard">
<dt class="fn">Emily Lewis</dt>
<dd>
<ul>
<li><a href="http://www.ablognotlimited.com"
class="url" rel="me">
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>
83 Microformats Workshop The Workshop Summits
85. Resources
85 Microformats Workshop The Workshop Summits
86. RESOURCES
My new book!
Available for sale on Amazon
Want a preview? Check out
Rough Cuts excerpts
86 Microformats Workshop The Workshop Summits
87. RESOURCES
My blog tutorials
Getting Semantic With Microformats:
• rel-home, rel-tag, rel-license
• XFN
• hCard
• hCalendar
• hAtom
• hResume
• Themes & Issues
87
• Value class pattern Microformats Workshop The Workshop Summits
88. 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
88 Microformats Workshop The Workshop Summits
90. RESOURCES
Additional reading
• Microformats Role Play
• Discovering Magic
• The Value Class Pattern
• More on developing naming conventions,
Microformats and HTML5
• Styling hReview Microformats
• Styling XFN and rel-license links
• Styling hCard
90 Microformats Workshop The Workshop Summits
91. Questions?
91 Microformats Workshop The Workshop Summits