Microformats

Microformats Finally Coming of Age? Aaron T. Grogg Senior Front-End Developer People.com

Microformats
What are Microformats?
Why should I use them?
A few good mash-ups
But now...
So, where can we use these things at Time?
Resources

What are Microformats?
Simple data formats that add semantic value to HTML
Many different types:
hcalendar
hcard
hfeed
geo
xfn
...
Also ran: RDFa

hcalendar
"We will meet next Wednesday for another Watercooler."
<p>We will meet next Wednesday for another Watercooler.</p>

<p>We will meet <abbr class=" dtstart " title=" 2010-02-17 "> next Wednesday </abbr> for another Watercooler.</p>
<p class=" vevent ">We will meet <abbr class=" dtstart " title=" 2010-02-17T12:30:00-05:00 "> next Wednesday </abbr> for another <span class=" summary ">Watercooler</span>.</p>

hcard
"Aaron T. Grogg, Web Developer, http://aarontgrogg.com/"

<header class=" vcard ">
<h1 class=" org organization-name fn n "> <span class=" honorific-prefix ">Mr.</span> <span class=" given-name ">Aaron</span> <span class=" middle-name ">T</span>. <span class=" family-name ">Grogg</span> </h1> <h2 class=" title ">Web Developer</h2> <a class=" url " href="http://aarontgrogg.com/">http://aarontgrogg.com/</a> </header>

Why should I use them?
Initially fairly useless
Download vcard (if using FF and Operator/Tails) - http://rogieking.com/
Add Google Map to page - http://bit.ly/9PW2MG
Ooo, ahh, blah, blah blah....

A few good mash-ups
Huffduffer - http://huffduffer.com/aarontgrogg - grabs image from other social sites based on your URL
Oomph - http://visitmix.com/labs/oomph/2.0/client/style/firstrun.html - add Operator/Tails-like add-on through your site , not the browser
Google Social Graph - http://code.google.com/apis/socialgraph/ - track social references across the web
IdentEngine - http://identengine.com/ - uses semantic web APIs to bring together web "footprints"
UFXtract - http://ufxtract.com/ - extracts MFs from any web page, can output to JSON, JSON-P, XML or text.
But still...

But now...
Google Rich Snippets - http://bit.ly/aw6WW6 - a new presentation of snippets that applies Google's algorithms to highlight structured data embedded in web pages
Update on Rich Snippets - http://bit.ly/atmI8A
Rich Snippets in Custom Search - http://bit.ly/9jvoJS
Tips and Tricks - http://bit.ly/cmO4r9
Mobile - http://microformats.org/wiki/mobile
Treo and Nokia S60 support hcard and hcalendar
Sony Ericsson W810i supports hcard
BB, iPhone, Sidekick = absent...
And this just in... http://html5doctor.com/the-time-element/
Bruce Lawson, MFs and HTML5: <time datetime="2010-01-20" pubdate >

So, where can we use these things?
MyRecipes.com, EW.com, RealSimple.com
ratings / reviews
Time.com
vcard for each columnist
Google Map for each article location
other stories from around the web?
Golf.com
Google Map for each event location
hcalendar for each event location
TOH.com
Google Map for each project location
People.com
hcalendar for each award show

Resources
Learn About
http://microformats.org/
http://en.wikipedia.org/wiki/Microformat
http://microformats.org/wiki/what-are-microformats
http://net.tutsplus.com/tutorials/other/microformats-what-why-and-how/
http://twitter.com/microformats
Learn How To
http://www.xfront.com/microformats/Microformat-Demonstration.html
http://www.addedbytes.com/cheat-sheets/microformats-cheat-sheet/
http://microformats.org/code/hcard/creator
http://microformats.org/code/hcalendar/creator
http://gmpg.org/xfn/creator
Make Use of
https://addons.mozilla.org/en-US/firefox/addon/4106
https://addons.mozilla.org/en-US/firefox/addon/2240
http://zappatic.net/safarimicroformats/
http://visitmix.com/labs/oomph/
http://bit.ly/cmi1qv
http://bit.ly/a0xysk
http://leftlogic.com/lounge/articles/microformats_bookmarklet/

Thank you! http://bit.ly/watercooler-microformats

Microformats

by Aaron Grogg on Oct 13, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

Statistics

Microformats — Presentation Transcript