2. Hi!
ā¢ 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
Microformats: Web Semantics & More
3. Today, youāll learn:
ā¢ What are microformats
ā¢ Beneļ¬ts 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
Microformats: Web Semantics & More
6. Designed for humans ļ¬rst and machines
second, microformats are a set of simple,
open data formats built upon existing and
widely adopted standards.
Microformats: Web Semantics & More
8. Building blocks that
enable users to own,
control, move and share
their data on the web.
Microformats: Web Semantics & More
9. Smart
content
Building blocks that
enable users to own,
control, move and share
their data on the web.
Microformats: Web Semantics & More
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
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.
Microformats: Web Semantics & More
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.
Microformats: Web Semantics & More
15. XFN & Identity consolidation
Assigned to links to sites that represent you online:
Microformats: Web Semantics & More
16. XFN & Identity consolidation
Assigned to links to sites that represent you online:
<a href="http://ablognotlimited.com" rel="me">
A Blog Not Limited</a>
Microformats: Web Semantics & More
33. The basics
ā¢ Use existing standards: (X)HTML
ā¢ Emphasize semantics (POSH)
ā¢ Intentionally simple
ā¢ Address a speciļ¬c āproblemā
ā¢ Humans ļ¬rst, machines second
Microformats: Web Semantics & More
34. The beneļ¬ts
ā¢ Semantics
ā¢ User experience enhancements
ā¢ More meaningful search results
ā¢ Encourages consistency and standards
ā¢ Minimal development effort
ā¢ No need for software or special technologies
ā¢ Enables sharing and re-use of your web content
Microformats: Web Semantics & More
35. Who beneļ¬ts?
ā¢ Managers
ā¢ Developers
ā¢ Designers
ā¢ Content Authors
ā¢ Users
Microformats: Web Semantics & More
37. EVERYONE BENEFITS
*BLATANT PLUG WARNING*
Check out Microformats Role Play for more on how microformats beneļ¬t different people
Microformats: Web Semantics & More
39. Another elemental: rel-tag
Describes the relationship of links to keywords
(tags) for your content
<a href="/tags/microformats" rel="tag">
microformats</a>
Microformats: Web Semantics & More
40. Another elemental: rel-tag
Describes the relationship of links to keywords
(tags) for your content
<a href="/tags/microformats" rel="tag">
microformats</a>
Indicates the link destination (href) is to a page that
tells what the current page - or part of the current
page - is about.
Microformats: Web Semantics & More
46. hCard
Contact information - person, place, organization/
company - published with hCard can be transformed
into an electronic business card.
Microformats: Web Semantics & More
47. hCard
Contact information - person, place, organization/
company - published with hCard can be transformed
into an electronic business card.
ā¢ H2VX Contacts Conversion Service
Microformats: Web Semantics & More
48. hCard
Contact information - person, place, organization/
company - published with hCard can be transformed
into an electronic business card.
ā¢ H2VX Contacts Conversion Service
ā¢ Operator Plug-in for Firefox
Microformats: Web Semantics & More
49. hCard
Contact information - person, place, organization/
company - 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
Microformats: Web Semantics & More
50. hCard
Contact information - person, place, organization/
company - 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
Microformats: Web Semantics & More
51. hCard
Contact information - person, place, organization/
company - 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
ā¢ Technorati's Contacts Feeds Service
Microformats: Web Semantics & More
60. Worth noting
ā¢ Markup doesn't matter, but it should be POSH
Microformats: Web Semantics & More
61. Worth noting
ā¢ Markup doesn't matter, but it should be POSH
ā¢ Sometimes you need to add non-semantic
elements such as <span> and <div>
Microformats: Web Semantics & More
62. Worth noting
ā¢ Markup doesn't matter, but it should be POSH
ā¢ Sometimes you need to add non-semantic
elements such as <span> and <div>
ā¢ Attribute values are case-sensitive
Microformats: Web Semantics & More
63. Worth noting
ā¢ Markup doesn't matter, but it should be POSH
ā¢ Sometimes you need to add non-semantic
elements such as <span> and <div>
ā¢ Attribute values are case-sensitive
ā¢ Root properties cannot be combined with
sub-properties
Microformats: Web Semantics & More
64. Worth noting
ā¢ Markup doesn't matter, but it should be POSH
ā¢ Sometimes you need to add non-semantic
elements such as <span> and <div>
ā¢ 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
Microformats: Web Semantics & More
66. hCalendar
Event information published with hCalendar can be
extracted and imported into users' calendars
ā¢ H2VX Events Conversion Service
Microformats: Web Semantics & More
67. hCalendar
Event information published with hCalendar can be
extracted and imported into users' calendars
ā¢ H2VX Events Conversion Service
ā¢ Operator Plug-in for Firefox
Microformats: Web Semantics & More
68. hCalendar
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
Microformats: Web Semantics & More
69. hCalendar
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
Microformats: Web Semantics & More
70. hCalendar
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
ā¢ Technorati's Events Feeds Service
Microformats: Web Semantics & More
73. 1 Content
STEP
009 a t DOE ,
Inter Lab 2 a imed elopers
k shop ite dev
a y wor , webs a nage
rs
A 4-d asters r s&m
w ebm p develope es.
we b ap et resourc 09
of in tern 9, 20
e r 16-1
o vemb tional
ā¢ N khaven Na
Broo atory
ā¢ abor
L
Microformats: Web Semantics & More
74. 2 POSHify
STEP
Microformats: Web Semantics & More
75. 2 POSHify
STEP
<h1><a href=āhttp://www.bnl.gov/
interlab09/ā>InterLab 2009</a></h1>
<p>A 4-day workshop aimed at DOE webmasters,
website developers, web app developers & managers
of internet resources.</p>
<ul>
<li>November 16-19, 2009</li>
<li><a href=āhttp://www.bnl.gov/ā>Brookhaven
National Laboratory</a></li>
</ul>
Microformats: Web Semantics & More
76. 3 Add hCalendar
STEP
Microformats: Web Semantics & More
77. 3 Add hCalendar
STEP
<div class="vevent">
<h1><a href=āhttp://www.bnl.gov/interlab09/ā
class="summary url">InterLab 2009</a></h1>
<p class="description">A 4-day workshop aimed at
DOE webmasters, website developers, web app
developers & managers of internet resources.</p>
<ul>
<li><span class="dtstart"><span class=āvalue-
titleā title=ā2009-11-16ā> </span>November
16</span>-<span class="dtend"><span
class=āvalue-titleā title=ā2009-11-19ā> </
span>19, 2009</span></li>
<li class="location"><a href=āhttp://
www.bnl.gov/ā>Brookhaven National
Laboratory</a></li>
</ul>
</div> Microformats: Web Semantics & More
81. hCalendar with hCard
<div class=āveventā>
...
<li class=ālocation vcardā>
<a href=āhttp://www.bnl.gov/ā class=āfn org
urlā>Brookhaven National Laboratory</a>
<ul class=āadrā>
<li class=āpost-office-boxā>P.O. Box 5000</li>
<li><span class=ālocalityā>Upton</span>, <abbr
title=āNew Yorkā class=āregionā>NY</abbr>
<span class=āpostal-codeā>11973</span></li>
</ul>
</li>
...
</div>
Microformats: Web Semantics & More
82. Microformats you can use now
ā¢ 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 Microformats: Web Semantics & More
85. 6,137,400,000
Yahoo! SearchMonkey results as of 12/17/09
Microformats: Web Semantics & More
86. 60,600,000 - hReview
1,660,000,000 - hCard
2,090,000,000 - rel-tag
807,000,000 - hAtom
6,137,400,000
Yahoo! SearchMonkey results as of 12/17/09
452,000,000 - XFN
108,000,000 - hResume
148,000,000 - geo
768,000,000 - adr
44,100,000 - hCalendar
Microformats: Web Semantics & More
87. Microformats in the wild
ā¢ 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 Proļ¬les Twitter Last.fm
ā¢ hCalendar: Yahoo! Upcoming MapQuest Local
Facebook, Last.fm Eventful
ā¢ hResume: LinkedIn SimplyHired
Microformats: Web Semantics & More
91. My new book!
Available for sale on Amazon
Microformats: Web Semantics & More
92. My new book!
Available for sale on Amazon
Want a preview? Check out
Rough Cuts excerpts
*BLATANT PLUGS NOT OVER YET*
Microformats: Web Semantics & More
93. My blog tutorials
Getting Semantic With Microformats:
ā¢ rel-home, rel-tag, rel-license
ā¢ XFN
ā¢ hCard
ā¢ hCalendar
ā¢ hAtom
ā¢ hResume
ā¢ Themes & Issues
ā¢ Value class pattern Microformats: Web Semantics & More
94. 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
Microformats: Web Semantics & More
95. Authoring tools
ā¢ hCard Creator
ā¢ hCalendar Creator
ā¢ hReview Creator
ā¢ Optimus Microformats Transformer also offers a
validator
ā¢ Jeffrey Zeldman's Web Standards Advisor
Dreamweaver plug-in
Microformats: Web Semantics & More
96. Questions? Comments?
ā¢ emily@ablognotlimited.com
ā¢ @emilylewis
ā¢ Introduce yourself and letās talk!
Microformats: Web Semantics & More