microformats, building blocks of the semantic web

microformatsbuilding blocks of the semantic web

microformats

µformats

lowercase semantic web

SAME THING

Designed for humans first 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 first by adapting to current behaviors and usage patterns (e.g. XHTML, blogging).http://microformats.org/about

http://microformats.org/about

http://microformats.org/about

Drag API

Pitch Here

feeds used to be for geeksauto-discovery in browsers changed that

xmlxhtml

xmlxhtmlmicroformats

xhtmlmicroformats

patterns

microformats

patternselemental µf

patternselemental µfcompound µf

design patternsposh pieces of the puzzle

class“general purpose processing by user agents”

reldescribes link relationships

revdescribes reverse link relationships

rev is falling out of favor :(

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

abbrhuman-friendly meets machine-readable

datetimeabbr with a dash of ISO8601

includeDRY, reuse content already on the page

hReview

hReview

hReview

item

hReview

hReview

hReview

elemental microformatsthe middle siblings

the easiest microformat evarstarting small…

rel-homelinks to the home page

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

rel-licenselinks to the content license

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

rel-enclosurelinks to a download

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

rel-taglinks to a tag for the current page

pitfall

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

what is the tag here?

http://technorati.com/tag/tech



tag





tag irrelevant




rel-* relies on the URLnot the text of the link

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


tag irrelevant




tagspace tag irrelevant



xfnhuman relationships as hyperlinks

xfn vocabularyIdentity

me

Friendship

contact

acquaintance

friend

Physical

met

Professional

co-worker

colleague

Romantic

muse

crush

date

sweetheart

Geographical

co-resident

neighbor

Family

childparentsiblingspousekin

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

compound microformatscenter of attention

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

start by using the creatorshttp://microformats.org/code/

http://microformats.org/code/

http://microformats.org/code/

!"#$%&%$!'()*+%#,-(*#.-'(*).--(

/#012

!"#$%&'#(&)*+,-*&.'*&(.#/%#$%&0,$&('#$1/2&+,/.#+.&1/0,$-#.1,/&%121.#3345&&6'*&'"#$%&0,$-#.7&8(*(&#&9:9&$*;$*(*/.#.1,/&,0&!"#$%&;$,;*$.1*(&#/%&!#38*(7&1/&(*-#/.1+&<=6>?5&@*)&8(*$(&+#/&),.'&*-)*%&'"#$%(&%1$*+.34&1/&.'*1$&A*)&;#2*(7&#/%&(.43*&.'*-&A1.'&"BB&.,&-#C*&.'*-&#;;*#$&#(&%*(1$*%5&D3(,7&'"#$%&*/#)3*(&#;;31+#.1,/(&.,&$*.$1*!*&1/0,$-#E.1,/&%1$*+.34&0$,-&A*)&;#2*(&A1.',8.&'#!1/2&.,&$*0*$*/+*&#&(*;#$#.*&!3*5

/#0345201

B1-13#$&.,&'"#$%7&.'*&)#(1(&0,$&'"#3*/%#$&#$*&.'*&1"#3*/%#$&;$,;*$.1*(&A'1+'&#$*&.'*&%121.#3&(.#/%#$%&0,$&(+'*%83*&%1(;3#45&@*)&8(*$(&+#/&*-)*%&#/%&(.43*&.'*1$&+#3*/%#$(&8(1/2&.'*(*&(.#/%#$%&(*-#/.1+(F-#$C8;7&#(&A*33&#(&#..#+'&.,&+,/!*$(1,/&#;E;31+#.1,/(&.'#.&#33,A&.'*1$&+#3*/E%#$&.,&)*&%,A/3,#%*%&.,&',-*&8(*$&+#3*/%#$&;$,2$#-(5&6'1(&#3(,&#33,A(&4,8$&(+'*%83*&.,&)*&(4/+G%&*#(134&,/&-#/4&%*!1+*(5

6&7<HI&J<=6>?&H$1*/%(&I*.A,$CK&1(&#&(1-;3*&A#4&.,&$*;$*(*/.&'8E-#/&$*3#.1,/('1;(&8(1/2&'4;*$E31/C(5&L/&$*+*/.&4*#$(7&)3,2(&#/%&)3,2$,33(&'#!*&)*+,-*&.'*&0#(.E*(.&2$,A1/2&#$*#&,0&.'*&@*)5&<HI&*/#)3*(&A*)&#8.',$(&.,&1/E%1+#.*&.'*1$&$*3#.1,/('1;J(K&.,&.'*&;*,;3*&1/&.'*1$&)3,2$,33(&(1-;34&)4&#%%1/2&#&M$*3M&#..$1)8.*&.,&.'*1$&N#&'$*0O&.#2(5

89:8;<18=>?5=89:8;<18=>?5=@<A5

B/0C*014*9AD1<?<190CEF

>1+$,0,$-#.(&#$*&+,/!*/.1,/(&0,$&-#$C1/2&8;&+,--,/34E*/+,8/.*$*%&%#.#&J(8+'&#(&31/C(7&+,/.#+.&1/0,$-#.1,/7&#/%&+#3*/E%#$&*!*/.(K&1/&*(.#)31('*%&3#/E28#2*(&(8+'&#(&=6>?5&P4&8(1/2&(.#/%#$%1Q*%&(.$8+.8$*(7&+3#((&/#-*(7&#/%&$*3&#..$1)8.*&!#38*(7&1/0,$-#.1,/&)*+,-*(&-,$*&#+E+*((1)3*&#/%&8(*083&.,&),.'&'8E-#/(&#/%&+,-;8.*$(5&6'1(&1(&#&2,,%&.'1/25

/#012*+1<:41CA4E

R&!+#$%

R&0/&

R&/&E&$*SG%&8/3*((&1-;31*%&)4&0/

J0#-134E/#-*7&21!*/E/#-*7&#%%1.1,/#3E/#-*7&',/,$1!+E;$*!T7&',/,$1!+E(8!TK

U;.1,/#3&!*3%(:

R&8$37&/1+C/#-*7&(,$.E(.$1/2

R&*-#13&J.4;*7&!#38*K7&.*3&J.4;*7&!#38*K

R&#%$&J;,(.E,!+*E),T7&*T.*/%*%E#%%$*((7&(.$**.E#%%$*((7&3,+#31.47&$*21,/7&;,(.#3E+,%*7&+,8/.$4E/#-*7&.4;*7&

!#38*K7&3#)*3

R&2*,&J3#.1.8%*7&3,/21.8%*K7&.Q

R&;',.,7&3,2,7&)%#4&JLBU&%#.*K

R&.1.3*7&$,3*7&,$2&J,$2#/1Q#.1,/E/#-*7&,$2#/1Q#.1,/E8/1.K

R&/,.*7&+#.*2,$47&(,8/%

R&81%7&+3#((7&C*47&-#13*$7&$*!

/#0345201*+1<:41CA4ER&!*!*/.&R&%.(.#$.&JLBU&%#.*K&R&(8--#$4U;.1,/#3&H1*3%(:R&3,+#.1,/R&8$3R&%.*/%&JLBU&%#.*KR&%8$#.1,/R&%*(+$1;.1,/R&81%R&+#.*2,$4

I,.*:&H,$&3*((&+,--,/34&8(*%&;$,;*$.1*(7&(**&.'*&'"#3*/%#$&(;*+5

6&7*143*G03H4E

R&0$1*/%7&#+S8#1/.#/+*7&+,/.#+.&J;1+C&,/*KR&-*.R&+,EA,$C*$7&+,33*#28*R&+,E$*(1%*/.7&/*12'),$&J;1+C&,/*KR&+'13%7&;#$*/.7&(1)31/27&(;,8(*7&C1/&J;1+C&,/*KR&-8(*7&+$8('7&%#.*7&(A**.'*#$.R&-*

.43:?H3*3A5IE*J*14E<H1D4E

B.#$.&A1.'&.'*(*&31/C(&.,&3*#$/&-,$*&#),8.&-1+$,0,$-#.(5

R -1+$,0,$-#.(5,$2

R -1+$,0,$-#.(5,$2FA1C1F1/.$,%8+.1,/

R -1+$,0,$-#.(5,$2FA1C1F;$*(*/.#.1,/(

R -1+$,0,$-#.(5,$2FA1C1F;,%+#(.(

R -1+$,0,$-#.(5,$2FA1C1F0#S

R -1+$,0,$-#.(5,$2FA1C1F1-;3*-*/.

R -1+$,0,$-#.(5,$2F%1(+8((

/#012*->09:34

N%1!&1%VW'+#$%EX$1/E"#.,/W&+3#((VW!+#$%WO&&N#&+3#((VW8$3&0/W&'$*0VW'..;:FF*$1/+#.,/5+#WOX$1/&"#.,/NF#O&N%1!&+3#((VW,$2WOL&Y83*&B.8%1,(NF%1!O&N%1!&+3#((VW#%$WO&&N(;#/&+3#((VW+,8/.$4E/#-*WO"#/#%#NF(;#/O&NF%1!ONF%1!O

9AD1<?<190CE;<18=KAIA=/D012

9AD1<?<190CE;<18=KAIA=/D012L4>09:34E

/#0345201*->09:34

N(;#/&+3#((VW!*!*/.WO

N#&+3#((VW8$3W&

'$*0VW'..;:FFAAA5A*)Z+,/5+,-FWO

&&N(;#/&+3#((VW(8--#$4WO@*)&Z5[&

",/0*$*/+*NF(;#/O:&

&&N#))$&+3#((VW%.(.#$.W&.1.3*VWZ[[\E

9[E[\WOU+.,)*$&\NF#))$OE

&&N#))$&+3#((VW%.*/%W&.1.3*VWZ[[\E

9[E[]WO^NF#))$O7&#.&.'*&

N(;#/&+3#((VW3,+#.1,/WOD$2*/.&

=,.*37&B#/&H$#/+1(+,7&"DNF(;#/O

&NF#ONF(;#/O

9AD1<?<190CE;<18=KAIA=/D0345201

9AD1<?<190CE;<18=KAIA=/D0345201L

4>09:34E

6&7*->09:34

_,*&#/%&P$#%&'#!*&-*.&*#+'&,.'*$&

.'$,82'&-8.8#3&#+S8#1/.#/+*(7&#/%&

'#%&#&0*A&1/.*$*(.1/2&+,/!*$(#.1,/(&

#.&;#$.1*(&A'*$*&.'*4&0,8/%&.'*4&'#%&

(*!*$#3&1/.*$*(.(&1/&+,--,/5&6'*4&

'#!*&31/C*%&.,&*#+'&,.'*$&#(&0,33,A(:&

N#&'$*0VW'..;:FF)$#%5*T#-;3*5,$2FW&

$*3VW-*.&0$1*/%WOP$#%NF#O&

N#&'$*0VW'..;:FF`,*5*T#-;3*5,$2FW&

$*3VW-*.&#+S8#1/.#/+*WO_,*NF#O

89:8;<18=>?5=A5C1<

89:8;<18=>?5=D140C<1

grab the pocket cheat sheethttp://microformats.org/wiki/cheat-sheet

http://microformats.org/wiki/cheat-sheet

http://microformats.org/wiki/cheat-sheet

hCardpeople, companies, organizations, and places

let’s make this an hCardAdam 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>

http://mvm.therealadam.com


http://punchline.therealadam.com


http://flickr.com/photos/therealadam/


http://del.icio.us/akeys


http://adamkeys.43people.com


http://therealadam.vox.com


http://twitter.com/therealadam


http://www.last.fm/user/therealadam/



<body class="vcard">

<h2>Where <span class="fn">Adam Keys</span> happens</h2>

















we’re donethat 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>The Real Adam</h1> <h2>Where <span class="fn">Adam Keys</span> happens</h2></div>

<h1 class="nickname">The Real Adam</h1>

<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>


<span class="title">software developer and writer</span>


<span class="title">software developer and writer</span> class="adr">



<span class="locality">Dallas</span> in the great state



<span class="locality">Dallas</span> in the great state<span class="region">Texas</span>. When not coding or writing, Adam spends

<ul> <li><a class="url" rel="me" <li><a class="url" rel="me" <li><a class="url" rel="me" <li><a class="url" rel="me" <li><a class="url" rel="me" <li><a class="url" rel="me" <li><a class="url" rel="me" <li><a class="url" rel="me"</ul>

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

















<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></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> </div></body>

















hCalendarcalendaring and events

let’s make this an hCalendarbetter 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 tobuild machine-readable data into your site or application without having to go tothe length of offering a full-blown API. There's also lots of great data availableas Microformats from sites like Yahoo! Upcoming and LinkedIn.

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

h2. Next Meeting!





<div class="vevent">

</div>

h2. Next Meeting!





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


</div>

h2. Next Meeting!







</div>

*When*: <abbr title="2007-10-02T19:00:00-05:00" class="dtstart">October 2, 7</abbr>-<abbr title="2007-10-02T21:00:00-05:00" class="dtend">9 PM</abbr>.

h2. Next Meeting!





%(description)Chris Griego will educate us on Microformats. They're a great way tobuild 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.%



</div>


h2. Next Meeting!





%(description)Chris Griego will educate us on Microformats. They're a great way tobuild 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.%



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


hReviewproducts, businesses, events, people, places, etc.

item

hCard

hCalendar

fn

item

hCard

hCalendar

fn

reviewer

hCard

item

hCard

hCalendar

fn

reviewer

hCard

tags

rel-tag

item

hCard

hCalendar

fn

reviewer

hCard

tags

rel-tag

permalink

rel-bookmark (posh)

item

hCard

hCalendar

fn

reviewer

hCard

tags

rel-tag

permalink

rel-bookmark (posh)

license

rel-license

hRésumébuilt almost entirely out of existing formats

contact

hCard

contact

hCard

skills

rel-tag

contact

hCard

skills

rel-tag

affiliations

hCard

contact

hCard

skills

rel-tag

affiliations

hCard

education

hCalendar

hCard

contact

hCard

skills

rel-tag

affiliations

hCard

education

hCalendar

hCard

experience

hCalendar

hCard

hAtomsyndication

microformats syndicatedNetNewsWire exposes them just like a browser

resourcesdon’t stop now

operatordiscover microformats on the web

microformats bookby John Allsopp

blog

wiki

irc: #microformats on freenode

mailling lists

microformats.org

ruby µf parsers

gem uformats # updated 2006-08-02

gem scrAPI # updated 2006-08-27

gem mofo # updated 2007-08-17

thanks for listening1. install operator

2. add rel-home

3. add an hCard

microformats, building blocks of the semantic web

Technology

adam keys

adam elsewhereman

real adam

machine punchline labs

people vox twitter

software developer

amateur humorist

great state of texas