Ok, so what are microformats, you ask? Here’s a definition from the go-to site on the subject, microformats.org:
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).
A Microformat Primer
What microformats do is apply existing XHTML tags to provide semantic meaning to a set of data. For instance, the vCard format (RFC2426) was introduced in the mid-90s as a file format to disseminate business contacts, but as you can see it’s a format meant for machines first:
ADR;WORK;PREF:;;201 Jones Road;Waltham;MA;02541;United States of America
LABEL;WORK;PREF;ENCODING=QUOTED-PRINTABLE:201 Jones Road=0D=0A=
Waltham MA 02451
The associated microformat is known as hCard and uses existing XHTML markup to contain the same information as part of a web page. Here’s the equivalent hCard information, along with the markup:
<div class="vcard"> <a class="fn url" href="http://blogs.msdn.com/jimoneil">
Jim O'Neil</a> <div class="org">Microsoft</div> <a class="email" href="mailto:email@example.com"> firstname.lastname@example.org</a> <div class="adr"> <div class="street-address">201 Jones Road</div> <span class="locality">Waltham</span>, <span class="region">MA</span>, <span class="postal-code">02451</span> <span class="country-name">United States</span> </div> </div>
To the web page viewer the display looks no different than if had it been included with traditional markup; however, now that the markup exposes some semantics, it can be treated as a collection of data with specific meaning, and therein lies the value.
The Oomph Microformat Toolkit, which you can download from CodePlex, facilitates the use of microformats with three primary offerings:
- an aggregator that detects microformats on the page and provides an overlay allowing users to quickly store calendar appointments (hCalendar) and contact information (hCard) to their local machine
- a library of 14 CSS styles to be applied to hCard and hCalendar microformats
- a Live Writer plug-in to ease the effort in producing microformats
When hovering over the gleam, an overlay appears providing an interface to add the detected hCalendar and hCard items to your local calendar and contact list. Since I included a sample hCard in my post above, this page itself should be exhibiting the gleam at the upper left corner and when clicked result in the following overlay:
There are no event (hCalendar) entries, but my contact information does appear on the right, along with icons below it to add to my Outlook, Yahoo, or Mac contacts, and since my contact includes a location, I can select the map (or globe) icon at the upper left, and it will plot the locations on Virtual Earth! Cool, huh!
If you don’t like the default overlay presentation, you can change it by modifying the
oomph.js file that is part of the toolkit (and referenced on the target page). Or, if you simply want to reskin the display, there are multiple CSS files accompanying the toolkit that you can install on your server and reference within your microformat-outfitted pages. Here’s a couple of static samples (this page isn’t outfitted with the CSS file to see them ‘live’).
Live Writer plug-in
The Microsoft installer image includes the IE add-in, the CSS files referred to above, and a Live Writer plug-in to aid in authoring hCard microformats for your site. The plug-in collects the contact information and generates the requisite markup.
There are a few more Live Writer plug-ins available outside of Oomph as well:
Here’s a number of additional Microsoft resources on Oomph and several links of note on the subject of microformats in general.
Oomph PDC Session (on Channel9)
Designing with Microformats (article by Tim Aidlin)
Microformats: Empowering Your Markup for Web 2.0 (on Amazon)