Microformats, Building Blocks of the Semantic Web

microformats
building blocks of the semantic web

Designed for humans ﬁrst and machines
second, microformats are a set of simple,
open data formats built upon existing and
widely adopted standards. Instead of
throwing away what works today,
microformats intend to solve simpler
problems ﬁrst by adapting to current
behaviors and usage patterns (e.g.
XHTML, blogging).
http://microformats.org/about

feeds used to be for geeks
auto-discovery in browsers changed that

microformats
elemental µf
patterns

compound µf
elemental µf
patterns

design patterns
posh pieces of the puzzle

class
“general purpose processing by user agents”

rel
describes link relationships

rev
describes reverse link relationships

rev is falling out of favor :(

those 3 are all you need
not one of them was a tag, all attributes

abbr
human-friendly meets machine-readable

datetime
abbr with a dash of ISO8601

<%= @time.utc.iso8601 %>
<abbr title=quot;2007-10-02T19:00:00-0500quot;>
Oct 2 @ 7pm</abbr>

include
DRY, reuse content already on the page

item

hReview

hReview

hReview

elemental microformats
the middle siblings

the easiest microformat evar
starting small…

rel-home
links to the home page

<%=
link_to 'Home',
root_url,
:rel => 'home'
%>

rel-license
links to the content license

<%=
link_to 'Terms',
license_path,
:rel => 'license'
%>

rel-enclosure
links to a download

<%=
link_to 'Download',
@file.public_filename,
:rel => 'enclosure'
%>

rel-tag
links to a tag for the current page

what is the tag here?

<a href=quot;http://technorati.com/tag/techquot; rel=quot;tagquot;>fish</a>



tag



tag irrelevant

rel-* relies on the URL
not the text of the link

good tags == pretty urls
42 < 42-tech < tech


tag irrelevant


tagspace tag irrelevant

xfn
human relationships as hyperlinks

xfn vocabulary
Identity Professional Geographical
me co-worker co-resident
Friendship colleague neighbor
contact Romantic Family
acquaintance muse child
parent
friend crush
sibling
Physical date spouse
met sweetheart kin

<%=
link_to @adam.name,
@adam,
:rel => 'friend met
colleague muse'
%>

compound microformats
center of attention

the main wiki pages are specs
specs are great for parsers, not publishers

start by using the creators
http://microformats.org/code/

B/0C*014*9AD1<?<190CEF .43:?H3*3A5IE*J*14E<H1D4E
>1+$,0,$-#.(&#$*&+,/!*/.1,/(& B.#$.&A1.'&.'*(*&31/C(&.,&3*#$/&
0,$&-#$C1/2&8;&+,--,/34E -,$*&#),8.&-1+$,0,$-#.(5
*/+,8/.*$*%&%#.#&J(8+'&#(&31/C(7&
R -1+$,0,$-#.(5,$2
+,/.#+.&1/0,$-#.1,/7&#/%&+#3*/E
%#$&*!*/.(K&1/&*(.#)31('*%&3#/E R -1+$,0,$-#.(5,$2FA1C1F1/.$,%8+.1,/
28#2*(&(8+'&#(&=6>?5&P4&8(1/2& R -1+$,0,$-#.(5,$2FA1C1F;$*(*/.#.1,/(
(.#/%#$%1Q*%&(.$8+.8$*(7&+3#((&
R -1+$,0,$-#.(5,$2FA1C1F;,%+#(.(
/#-*(7&#/%&$*3&#..$1)8.*&!#38*(7&
1/0,$-#.1,/&)*+,-*(&-,$*&#+E R -1+$,0,$-#.(5,$2FA1C1F0#S
+*((1)3*&#/%&8(*083&.,&),.'&'8E R -1+$,0,$-#.(5,$2FA1C1F1-;3*-*/.
!quot;#$%&%$!'()* -#/(&#/%&+,-;8.*$(5&6'1(&1(&#&
R -1+$,0,$-#.(5,$2F%1(+8((
+%#,-(*#.-'(*).--( 2,,%&.'1/25

/#012*+1<:41CA4E /#012*->09:34
/#012
R&!+#$%
!quot;#$%&'#(&)*+,-*&.'*&(.#/%#$%& N%1!&1%VW'+#$%EX$1/Equot;#.,/W&
R&0/&
0,$&('#$1/2&+,/.#+.&1/0,$-#.1,/& +3#((VW!+#$%WO
R&/&E&$*SG%&8/3*((&1-;31*%&)4&0/
%121.#3345&&6'*&'quot;#$%&0,$-#.7& &&N#&+3#((VW8$3&0/W&
J0#-134E/#-*7&21!*/E/#-*7&
8(*(&#&9:9&$*;$*(*/.#.1,/&,0& '$*0VW'..;:FF*$1/+#.,/5+#WOX$1/&
#%%1.1,/#3E/#-*7&',/,$1!+E;$*!T7&
!quot;#$%&;$,;*$.1*(&#/%&!#38*(7&1/& quot;#.,/NF#O
',/,$1!+E(8!TK
U;.1,/#3&!*3%(:
(*-#/.1+&<=6>?5&@*)&8(*$(&+#/& &N%1!&+3#((VW,$2WOL&Y83*&
R&8$37&/1+C/#-*7&(,$.E(.$1/2
),.'&*-)*%&'quot;#$%(&%1$*+.34&1/& B.8%1,(NF%1!O
R&*-#13&J.4;*7&!#38*K7&.*3&J.4;*7&!#38*K
.'*1$&A*)&;#2*(7&#/%&(.43*&.'*-& &N%1!&+3#((VW#%$WO
R&#%$&J;,(.E,!+*E),T7&*T.*/%*%E
A1.'"BB&.,&-#C*&.'*-&#;;*#$& &&N(;#/&+3#((VW+,8/.$4E
#%%$*((7&(.$**.E#%%$*((7&3,+#31.47&$*21,/7&
#(&%*(1$*%5&D3(,7&'quot;#$%&*/#)3*(& /#-*WOquot;#/#%#NF(;#/O
;,(.#3E+,%*7&+,8/.$4E/#-*7&.4;*7&
#;;31+#.1,/(&.,&$*.$1*!*&1/0,$-#E &NF%1!ONF%1!O
!#38*K7&3#)*3
R&2*,&J3#.1.8%*7&3,/21.8%*K7&.Q
.1,/&%1$*+.34&0$,-&A*)&;#2*(&

grab the pocket cheat sheet
R&;',.,7&3,2,7&)%#4&JLBU&%#.*K
A1.',8.&'#!1/2&.,&$*0*$*/+*&#& 9AD1<?<190CE;<18=KAIA=/D012
R&.1.3*7&$,3*7&,$2&J,$2#/1Q#.1,/E/#-*7&
(*;#$#.*&!3*5 9AD1<?<190CE;<18=KAIA=/D012L
,$2#/1Q#.1,/E8/1.K
4>09:34E
R&/,.*7&+#.*2,$47&(,8/%
R&81%7&+3#((7&C*47&-#13*$7&$*!
/#0345201*->09:34
/#0345201 /#0345201*+1<:41CA4E

http://microformats.org/wiki/cheat-sheet
R&!*!*/.& N(;#/&+3#((VW!*!*/.WO
B1-13#$&.,&'quot;#$%7&.'*&)#(1(&0,$&
N#&+3#((VW8$3W&
R&%.(.#$.&JLBU&%#.*K&
'quot;#3*/%#$&#$*&.'*&1quot;#3*/%#$& '$*0VW'..;:FFAAA5A*)Z+,/5+,-FWO
R&(8--#$4
;$,;*$.1*(&A'1+'&#$*&.'*&%121.#3& &&N(;#/&+3#((VW(8--#$4WO@*)&Z5[&
U;.1,/#3&H1*3%(:
(.#/%#$%&0,$&(+'*%83*&%1(;3#45& quot;,/0*$*/+*NF(;#/O:&
R&3,+#.1,/
@*)&8(*$(&+#/&*-)*%&#/%&(.43*& &&N#))$&+3#((VW%.(.#$.W&.1.3*VWZ[[E
R&8$3
.'*1$&+#3*/%#$(&8(1/2&.'*(*& 9[E[WOU+.,)*$&NF#))$OE
R&%.*/%&JLBU&%#.*K &&N#))$&+3#((VW%.*/%W&.1.3*VWZ[[E
(.#/%#$%&(*-#/.1+(F-#$C8;7&#(&

hCard
people, companies, organizations, and places

let’s make this an hCard
Adam won’t mind

<body>
<div id=quot;headerquot;>
<h1>The Real Adam</h1>
<h2>Where Adam Keys happens</h2>
</div>

<p id=quot;blurbquot;>
Adam Keys is a software developer and writer who lives in and about
Dallas in the great state of Texas. When not coding or writing, Adam
spends his time being a sucker for animals, an amateur humorist, an
arbitrator of what is geek-chic and an aspiring erudite.
</p>

<div id=quot;elsewherequot;>
<h3>Adam Elsewhere</h3>

<ul>
<li><a href=quot;http://mvm.therealadam.comquot;>Man vs. Machine</a></li>
<li><a href=quot;http://punchline.therealadam.comquot;>Punchline Labs</a></li>
<li><a href=quot;http://flickr.com/photos/therealadam/quot;>Flickr</a></li>
<li><a href=quot;http://del.icio.us/akeysquot;>del.icio.us</a></li>
<li><a href=quot;http://adamkeys.43people.com/quot;>43 People</a></li>
<li><a href=quot;http://therealadam.vox.com/quot;>Vox</a></li>
<li><a href=quot;http://twitter.com/therealadamquot;>Twitter</a></li>
<li><a href=quot;http://www.last.fm/user/therealadam/quot;>Last.fm</a></li>
</ul>
</div>
</body>

<body>class=quot;vcardquot;>
<body
<h2>Where Adam Keys happens</h2>
</div>

</p>


<ul>
</ul>
</div>
</body>

<body>class=quot;vcardquot;>
<body
<h2>Where Adam Keys happens</h2>Keys</span> happens</h2>
<span class=quot;fnquot;>Adam
</div>

</p>


<ul>
</ul>
</div>
</body>

we’re done
that is, now we have a valid hCard

<h2>Where <span class=quot;fnquot;>Adam Keys</span> happens</h2>
</div>

Adam Keys is a software developer and writer
who lives in and about Dallas in the great state
of Texas. When not coding or writing, Adam spends
his time being a sucker for animals, an amateur humorist, an
</p>

Adam Keys is a <span class=quot;titlequot;>software developer and writer</span>
software developer and writer
</p>

<p id=quot;blurbquot;>class=quot;adrquot;>
</p>

who lives in and about Dallasclass=quot;localityquot;>Dallas</span> in the great state
<span in the great state
</p>

who lives in and about Dallasclass=quot;localityquot;>Dallas</span> in the great state
<span in the great state
of Texas.class=quot;regionquot;>Texas</span>. Adam spends
<span When not coding or writing, When not coding or writing, Adam spends
</p>

<ul>
<li><a class=quot;urlquot; rel=quot;mequot;
href=quot;http://mvm.therealadam.comquot;>Man vs. Machine</a></li>
href=quot;http://punchline.therealadam.comquot;>Punchline Labs</a></li>
href=quot;http://flickr.com/photos/therealadam/quot;>Flickr</a></li>
href=quot;http://del.icio.us/akeysquot;>del.icio.us</a></li>
href=quot;http://adamkeys.43people.com/quot;>43 People</a></li>
href=quot;http://therealadam.vox.com/quot;>Vox</a></li>
href=quot;http://twitter.com/therealadamquot;>Twitter</a></li>
href=quot;http://www.last.fm/user/therealadam/quot;>Last.fm</a></li>
</ul>

<ul>
<li><a class=quot;urlquot; rel=quot;mequot; href=quot;http://mvm.therealadam.comquot;>Man vs. Machine</a></li>
<li><a class=quot;urlquot; rel=quot;mequot; href=quot;http://punchline.therealadam.comquot;>Punchline Labs</a></
<li><a class=quot;urlquot; rel=quot;mequot; href=quot;http://flickr.com/photos/therealadam/quot;>Flickr</a></li>
<li><a class=quot;urlquot; rel=quot;mequot; href=quot;http://del.icio.us/akeysquot;>del.icio.us</a></li>
<li><a class=quot;urlquot; rel=quot;mequot; href=quot;http://adamkeys.43people.com/quot;>43 People</a></li>
<li><a class=quot;urlquot; rel=quot;mequot; href=quot;http://therealadam.vox.com/quot;>Vox</a></li>
<li><a class=quot;urlquot; rel=quot;mequot; href=quot;http://twitter.com/therealadamquot;>Twitter</a></li>
<li><a class=quot;urlquot; rel=quot;mequot; href=quot;http://www.last.fm/user/therealadam/quot;>Last.fm</a></li>
</ul>

<body class=quot;vcardquot;>
<h1 class=quot;nicknamequot;>The Real Adam</h1>
</div>

<p id=quot;blurbquot; class=quot;adrquot;>
who lives in and about <span class=quot;localityquot;>Dallas</span> in the great state
of <span class=quot;regionquot;>Texas</span>. When not coding or writing, Adam spends
</p>


<ul>
<li><a class=quot;urlquot; rel=quot;mequot; href=quot;http://mvm.therealadam.comquot;>Man vs. Machine</a></l
<li><a class=quot;urlquot; rel=quot;mequot; href=quot;http://punchline.therealadam.comquot;>Punchline Labs</
<li><a class=quot;urlquot; rel=quot;mequot; href=quot;http://flickr.com/photos/therealadam/quot;>Flickr</a><
<li><a class=quot;urlquot; rel=quot;mequot; href=quot;http://del.icio.us/akeysquot;>del.icio.us</a></li>
<li><a class=quot;urlquot; rel=quot;mequot; href=quot;http://adamkeys.43people.com/quot;>43 People</a></li>
<li><a class=quot;urlquot; rel=quot;mequot; href=quot;http://therealadam.vox.com/quot;>Vox</a></li>
<li><a class=quot;urlquot; rel=quot;mequot; href=quot;http://twitter.com/therealadamquot;>Twitter</a></li>
<li><a class=quot;urlquot; rel=quot;mequot; href=quot;http://www.last.fm/user/therealadam/quot;>Last.fm</a><
</ul>
</div>
</body>

hCalendar
calendaring and events

let’s make this an hCalendar
better late than never

h2. Next Meeting!

*When*: October 2, 7-9 PM.

*What*: Chris Griego drops the Microformats knowledge

Chris Griego will educate us on Microformats. They're a great way to
build machine-readable data into your site or application without having to go to
the length of offering a full-blown API. There's also lots of great data available
as Microformats from sites like Yahoo! Upcoming and LinkedIn.

*Where*: Improving's new offices -- HowToGetToImproving

h2. Next Meeting!

<div class=quot;veventquot;>

*What*: Chris Griego drops the Microformats knowledge


</div>

h2. Next Meeting!


Chris Griego drops the Microformats knowledge
*What*: %(summary)Chris Griego drops the Microformats knowledge%


</div>

h2. Next Meeting!

*When*: <abbr title=quot;2007-10-02T19:00:00-05:00quot; class=quot;dtstartquot;>October 2, 7</abbr>
October 2, 7-9 PM.
-<abbr title=quot;2007-10-02T21:00:00-05:00quot; class=quot;dtendquot;>9 PM</abbr>.



</div>

h2. Next Meeting!

October 2, 7-9 PM.


%(description)Chris Griego will educate us on Microformats. great way to
Chris Griego will educate us on Microformats. They're a They're a great way to
LinkedIn.
as Microformats from sites like Yahoo! Upcoming and LinkedIn.%

</div>

h2. Next Meeting!

October 2, 7-9 PM.


%(description)Chris Griego will educate us on Microformats. great way to
Chris Griego will educate us on Microformats. They're a They're a great way to
LinkedIn.
as Microformats from sites like Yahoo! Upcoming and LinkedIn.%

Improving's new offices -- HowToGetToImproving
*Where*: %(location)Improving%'s new offices -- HowToGetToImproving
</div>

hReview
products, businesses, events, people, places, etc.

item
hCard
hCalendar
fn
reviewer
hCard

item tags
hCard rel-tag
hCalendar
fn
reviewer
hCard

item tags
hCard rel-tag
hCalendar permalink
fn rel-bookmark (posh)
reviewer
hCard

item tags
hCard rel-tag
hCalendar permalink
fn rel-bookmark (posh)
reviewer license
hCard rel-license

hRésumé
built almost entirely out of existing formats

contact
hCard
skills
rel-tag

contact
hCard
skills
rel-tag
afﬁliations
hCard

contact education
hCard hCalendar
skills hCard
rel-tag
afﬁliations
hCard

contact education
hCard hCalendar
skills hCard
rel-tag experience
afﬁliations hCalendar
hCard hCard

microformats syndicated
NetNewsWire exposes them just like a browser

operator
discover microformats on the web

microformats book
by John Allsopp

microformats.org

blog
wiki
irc: #microformats on freenode
mailling lists

ruby µf parsers

gem uformats # updated 2006-08-02
gem scrAPI # updated 2006-08-27
gem mofo # updated 2007-08-17

thanks for listening
1. install operator
2. add rel-home
3. add an hCard

Microformats, Building Blocks of the Semantic Web

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Microformats, Building Blocks of the Semantic Web

Similar to Microformats, Building Blocks of the Semantic Web (20)

Recently uploaded

Recently uploaded (20)

Microformats, Building Blocks of the Semantic Web