Microformats, Building Blocks of the Semantic Web

microformats building blocks of the semantic web

microformats

µformats

µf

lowercase semantic web

SAME THING

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

why?

Drag API Pitch Here

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

xml

xhtml xml

microformats xhtml xml

microformats xhtml patterns

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=\"2007-10-02T19:00:00-0500\"> Oct 2 @ 7pm</abbr>

include DRY, reuse content already on the page

hReview hReview hReview

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

pitfall

what is the tag here? <a href=\"http://technorati.com/tag/tech\" rel=\"tag\">fish</a>

what is the tag here? <a href=\"http://technorati.com/tag/tech\" rel=\"tag\">fish</a> tag

what is the tag here? <a href=\"http://technorati.com/tag/tech\" rel=\"tag\">fish</a> tag irrelevant

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

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

<a href=\"http://technorati.com/tag/tech\" rel=\"tag\">fish</a> tag irrelevant

<a href=\"http://technorati.com/tag/tech\" rel=\"tag\">fish</a> 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*-*/. !\"#$%&%$!'()* -#/(&#/%&+,-;8.*$(5&6'1(&1(&#& R -1+$,0,$-#.(5,$2F%1(+8(( +%#,-(*#.-'(*).--( 2,,%&.'1/25 /#012*+1<:41CA4E /#012*->09:34 /#012 R&!+#$% !\"#$%&'#(&)*+,-*&.'*&(.#/%#$%& N%1!&1%VW'+#$%EX$1/E\"#.,/W& R&0/& 0,$&('#$1/2&+,/.#+.&1/0,$-#.1,/& +3#((VW!+#$%WO R&/&E&$*SG%&8/3*((&1-;31*%&)4&0/ %121.#3345&&6'*&'\"#$%&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& !\"#$%&;$,;*$.1*(&#/%&!#38*(7&1/& \"#.,/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 ),.'&*-)*%&'\"#$%(&%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&'\"#$%&*/#)3*(& /#-*WO\"#/#%#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#$&.,&'\"#$%7&.'*&)#(1(&0,$& N#&+3#((VW8$3W& R&%.(.#$.&JLBU&%#.*K& '\"#3*/%#$&#$*&.'*&1\"#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& \",/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=\"header\"> <h1>The Real Adam</h1> <h2>Where Adam Keys happens</h2> </div> <p id=\"blurb\"> 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=\"elsewhere\"> <h3>Adam Elsewhere</h3> <ul> <li><a href=\"http://mvm.therealadam.com\">Man vs. Machine</a></li> <li><a href=\"http://punchline.therealadam.com\">Punchline Labs</a></li> <li><a href=\"http://flickr.com/photos/therealadam/\">Flickr</a></li> <li><a href=\"http://del.icio.us/akeys\">del.icio.us</a></li> <li><a href=\"http://adamkeys.43people.com/\">43 People</a></li> <li><a href=\"http://therealadam.vox.com/\">Vox</a></li> <li><a href=\"http://twitter.com/therealadam\">Twitter</a></li> <li><a href=\"http://www.last.fm/user/therealadam/\">Last.fm</a></li> </ul> </div> </body>

<body>class=\"vcard\"> <body <div id=\"header\"> <h1>The Real Adam</h1> <h2>Where Adam Keys happens</h2> </div> <p id=\"blurb\"> 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=\"elsewhere\"> <h3>Adam Elsewhere</h3> <ul> <li><a href=\"http://mvm.therealadam.com\">Man vs. Machine</a></li> <li><a href=\"http://punchline.therealadam.com\">Punchline Labs</a></li> <li><a href=\"http://flickr.com/photos/therealadam/\">Flickr</a></li> <li><a href=\"http://del.icio.us/akeys\">del.icio.us</a></li> <li><a href=\"http://adamkeys.43people.com/\">43 People</a></li> <li><a href=\"http://therealadam.vox.com/\">Vox</a></li> <li><a href=\"http://twitter.com/therealadam\">Twitter</a></li> <li><a href=\"http://www.last.fm/user/therealadam/\">Last.fm</a></li> </ul> </div> </body>

<body>class=\"vcard\"> <body <div id=\"header\"> <h1>The Real Adam</h1> <h2>Where Adam Keys happens</h2>Keys</span> happens</h2> <span class=\"fn\">Adam </div> <p id=\"blurb\"> 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=\"elsewhere\"> <h3>Adam Elsewhere</h3> <ul> <li><a href=\"http://mvm.therealadam.com\">Man vs. Machine</a></li> <li><a href=\"http://punchline.therealadam.com\">Punchline Labs</a></li> <li><a href=\"http://flickr.com/photos/therealadam/\">Flickr</a></li> <li><a href=\"http://del.icio.us/akeys\">del.icio.us</a></li> <li><a href=\"http://adamkeys.43people.com/\">43 People</a></li> <li><a href=\"http://therealadam.vox.com/\">Vox</a></li> <li><a href=\"http://twitter.com/therealadam\">Twitter</a></li> <li><a href=\"http://www.last.fm/user/therealadam/\">Last.fm</a></li> </ul> </div> </body>

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

<div id=\"header\"> <h1>The Real Adam</h1> <h2>Where <span class=\"fn\">Adam Keys</span> happens</h2> </div>

<div id=\"header\"> <h1 class=\"nickname\">The Real Adam</h1> <h1>The Real Adam</h1> <h2>Where <span class=\"fn\">Adam Keys</span> happens</h2> </div>

<p id=\"blurb\"> 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>

<p id=\"blurb\"> Adam Keys is a <span class=\"title\">software developer and writer</span> 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>

<p id=\"blurb\">class=\"adr\"> Adam Keys is a <span class=\"title\">software developer and writer</span> 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>

<p id=\"blurb\">class=\"adr\"> Adam Keys is a <span class=\"title\">software developer and writer</span> software developer and writer who lives in and about Dallasclass=\"locality\">Dallas</span> in the great state <span 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>

<p id=\"blurb\">class=\"adr\"> Adam Keys is a <span class=\"title\">software developer and writer</span> software developer and writer who lives in and about Dallasclass=\"locality\">Dallas</span> in the great state <span in the great state of Texas.class=\"region\">Texas</span>. Adam spends <span When not coding or writing, 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>

<ul> <li><a class=\"url\" rel=\"me\" href=\"http://mvm.therealadam.com\">Man vs. Machine</a></li> <li><a class=\"url\" rel=\"me\" href=\"http://punchline.therealadam.com\">Punchline Labs</a></li> <li><a class=\"url\" rel=\"me\" href=\"http://flickr.com/photos/therealadam/\">Flickr</a></li> <li><a class=\"url\" rel=\"me\" href=\"http://del.icio.us/akeys\">del.icio.us</a></li> <li><a class=\"url\" rel=\"me\" href=\"http://adamkeys.43people.com/\">43 People</a></li> <li><a class=\"url\" rel=\"me\" href=\"http://therealadam.vox.com/\">Vox</a></li> <li><a class=\"url\" rel=\"me\" href=\"http://twitter.com/therealadam\">Twitter</a></li> <li><a class=\"url\" rel=\"me\" href=\"http://www.last.fm/user/therealadam/\">Last.fm</a></li> </ul>

<ul> <li><a class=\"url\" rel=\"me\" href=\"http://mvm.therealadam.com\">Man vs. Machine</a></li> <li><a class=\"url\" rel=\"me\" href=\"http://punchline.therealadam.com\">Punchline Labs</a></ <li><a class=\"url\" rel=\"me\" href=\"http://flickr.com/photos/therealadam/\">Flickr</a></li> <li><a class=\"url\" rel=\"me\" href=\"http://del.icio.us/akeys\">del.icio.us</a></li> <li><a class=\"url\" rel=\"me\" href=\"http://adamkeys.43people.com/\">43 People</a></li> <li><a class=\"url\" rel=\"me\" href=\"http://therealadam.vox.com/\">Vox</a></li> <li><a class=\"url\" rel=\"me\" href=\"http://twitter.com/therealadam\">Twitter</a></li> <li><a class=\"url\" rel=\"me\" href=\"http://www.last.fm/user/therealadam/\">Last.fm</a></li> </ul>

<body class=\"vcard\"> <div id=\"header\"> <h1 class=\"nickname\">The Real Adam</h1> <h2>Where <span class=\"fn\">Adam Keys</span> happens</h2> </div> <p id=\"blurb\" class=\"adr\"> Adam Keys is a <span class=\"title\">software developer and writer</span> who lives in and about <span class=\"locality\">Dallas</span> in the great state of <span class=\"region\">Texas</span>. 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=\"elsewhere\"> <h3>Adam Elsewhere</h3> <ul> <li><a class=\"url\" rel=\"me\" href=\"http://mvm.therealadam.com\">Man vs. Machine</a></l <li><a class=\"url\" rel=\"me\" href=\"http://punchline.therealadam.com\">Punchline Labs</ <li><a class=\"url\" rel=\"me\" href=\"http://flickr.com/photos/therealadam/\">Flickr</a>< <li><a class=\"url\" rel=\"me\" href=\"http://del.icio.us/akeys\">del.icio.us</a></li> <li><a class=\"url\" rel=\"me\" href=\"http://adamkeys.43people.com/\">43 People</a></li> <li><a class=\"url\" rel=\"me\" href=\"http://therealadam.vox.com/\">Vox</a></li> <li><a class=\"url\" rel=\"me\" href=\"http://twitter.com/therealadam\">Twitter</a></li> <li><a class=\"url\" rel=\"me\" href=\"http://www.last.fm/user/therealadam/\">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=\"vevent\"> *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 </div>

h2. Next Meeting! <div class=\"vevent\"> *When*: October 2, 7-9 PM. Chris Griego drops the Microformats knowledge *What*: %(summary)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 </div>

h2. Next Meeting! <div class=\"vevent\"> *When*: <abbr title=\"2007-10-02T19:00:00-05:00\" class=\"dtstart\">October 2, 7</abbr> October 2, 7-9 PM. -<abbr title=\"2007-10-02T21:00:00-05:00\" class=\"dtend\">9 PM</abbr>. Chris Griego drops the Microformats knowledge *What*: %(summary)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 </div>

h2. Next Meeting! <div class=\"vevent\"> *When*: <abbr title=\"2007-10-02T19:00:00-05:00\" class=\"dtstart\">October 2, 7</abbr> October 2, 7-9 PM. -<abbr title=\"2007-10-02T21:00:00-05:00\" class=\"dtend\">9 PM</abbr>. Chris Griego drops the Microformats knowledge *What*: %(summary)Chris Griego drops the Microformats knowledge% %(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 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 LinkedIn. as Microformats from sites like Yahoo! Upcoming and LinkedIn.% *Where*: Improving's new offices -- HowToGetToImproving </div>

h2. Next Meeting! <div class=\"vevent\"> *When*: <abbr title=\"2007-10-02T19:00:00-05:00\" class=\"dtstart\">October 2, 7</abbr> October 2, 7-9 PM. -<abbr title=\"2007-10-02T21:00:00-05:00\" class=\"dtend\">9 PM</abbr>. Chris Griego drops the Microformats knowledge *What*: %(summary)Chris Griego drops the Microformats knowledge% %(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 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 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

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

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

hAtom syndication

microformats syndicated NetNewsWire exposes them just like a browser

resources don’t stop now

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

4 comments

Notes on slide 1

8 Favorites & 1 Group