4 Easy-to-Use Microformat Tools to Beef Up Your Site

What’s the point of semantic markup if users will never know or even care about it? There are a number of good answers, of course. Developers like web pages created with semantic markup because that makes it easy to add presentational and behavioral layers to the underlying structural code, and because it means future maintenance gets easier.

Beyond that, however, developers can make such semantic markup useful for site visitors by exposing that information with a variety of easy to use tools. Here are some examples of such tools that turn semantic information, in the form of microformats on a web page, into something useful for a site visitor with nearly no extra effort required.

hCa* microformat to vCa* file converters

The two most widely used microformats are the hCard and hCalendar microformats, each modeled after the preexisting vCard and vCalendar specifications, respectively. vCard files and thus the hCard microformat, too, are electronic business cards that encode a person’s contact information. vCalendar files and the hCalendar microformat encode event and scheduling information in a similarly platform-independent way.

Lots of applications and web sites such as Google Calendar make use of these file formats to import and export data. By converting an hCard or hCalendar to a standalone file you can seamlessly integrate your web site and your user’s software on the cheap.

Numerous translators have been written that let you extract the microformatted data out of public web pages. All a web developer needs to do is provide a link to a URL at one of these translator services that, when clicked, will cause the visitor’s browser to download a vCard or vCalendar file.

One such converter application is Brian Suda’s X2V project. A great example of this is the recent Web Directions South ’08 programme schedule. Since the entire conference schedule was marked up using hCalendar, a simple link like this offers users the capability to download the whole thing.

<a href="http://suda.co.uk/projects/X2V/get-vcal.php?uri=http://south08.webdirections.org/?page_id=88">download this schedule</a>

Another one of these services is Technorati’s Event Feed Service. Technorati’s service distinguishes itself by also letting users “subscribe” to a web page with hCalendar information so that when the page changes, their calendar automatically updates, too. The sidebar on the BarCamp wiki does this by including the following simple link.

<a title="Subscribe to the Upcoming Camps schedule in iCal, Sunbird, or Evolution" href="webcal://feeds.technorati.com/events/barcamp.org/">Subscribe to hCalendar</a>

Oomph: A Microformats Toolkit

You probably can’t make a simpler user interface than a link, but if you’re looking for something to make your hCard and hCalendar microformats a bit more interactive then Oomph may be a solution. Oomph is the microformats “toolkit” that has come from Microsoft’s MIX Labs. It’s really a number of different things that are packaged together so it’s easy for developers to create and expose microformats on their websites.

One component in particular is a cross-browser JavaScript widget that places a little icon on the top-left corner of the browser viewport when it detects that an hCard or hCalendar microformat is on the page. When users click on the icon, an overlay panel appears showing a number of options for viewing and exporting the embedded semantic data. hCalendar information appears on the left and hCard information is on the right. If more than one appears, next and previous buttons become available to browse through the list.

A screenshot of the Oomph microformat overlay panel in use on a WordPress blog.

Oomph is still pretty new, but it’s gaining traction pretty quickly, in part thanks to some positive reviews and because getting the Oomph toolkit’s microformat overlay on your site couldn’t be easier. Just insert a single script element on your pages that references the Oomph client JavaScript library, like so:

<script type="text/javascript" src="http://visitmix.com/labs/oomph/1.0/Client/oomph.min.js"></script>

Oomph depends on jQuery, so unless you’ve already got jQuery on your pages, you’ll also need to add this script element right before the previous one:

<script type="text/javascript" src="http://visitmix.com/labs/oomph/1.0/Client/jquery-1.2.6.min.js"></script>

If you’re running a WordPress-powered site, there’s even a plugin called WP-Oomph (written by yours truly) which does all this for you. On the other side of the coin, you can insert the Oomph JavaScript into web sites you visit as a user by using the Oomph GreaseMonkey script as you browse the web yourself.

Mapanui: A Pocket Map for your Browser

Although Oomph provides some mapping functionality, Mapanui is a similar but potentially more precise overlay panel because it uses the geo microformat if it’s available in an hCard or hCalendar (or anywhere else, for that matter). SitePoint first wrote about Mapanui after WebJam 8, but it’s worth taking another minute for a closer look.

As Alex said, Mapanui is a simple maps application that seamlessly creates a floating Google Maps pane over any web site. Like Oomph, it scans and extracts data from any hCard-formatted address data it finds on the page, but unlike Oomph it can also identify geo-tagged microformats and shows those locations in the floating maps pane, too. Mapanui’s site suggests you integrate it with a site by adding HTML like this wherever you want the link or button to activate Mapanui to show up:

<div class="vcard">
  <div class="street-address">Golden Gate Bridge</div>
  <span class="locality">San Francisco</span>,
  <span class="country-name">USA</span>,
<span class="geo" style="display:none"><span class="latitude">37.8187740</span><span class="longitude">-122.4784150</span></span>
</div>
<div id="mapanuiBkmrklt"><a href="javascript:(function(){function%20l(u,i,t,b){var%20d=document;if(!d.getElementById(i)){var%20s=d.createElement('script');s.src=u;s.id=i;d.getElementsByTagName('head')[0].appendChild(s);}s=setInterval(function(){u=0;try{u=t.call()}catch(i){}if(u){clearInterval(s);b.call()}},200)}l('http://www.mapanui.com/bookmarklet/bkmrklt.js','MapanuiJS',function(){return!!(typeof%20MAPANUI=='function')},function(){MAPANUI()})})();">Locate me</a></div>

Of course, you can replace the “Locate me” text with whatever you like and the hCard/geo microformats don’t have to be next to the activation button. As long as the JavaScript shown still gets called, Mapanui will find the correct data on the page. Some web publishing tools may strip out javascript: URIs and onclick attributes from links, so in some situations it may be necessary (and usually preferable) to attach this code to elements with event handlers.

Here is a live example of locating San Francisco’s Golden Gate Bridge, which is at 37.8187740 latitude and -122.4784150 longitude. You can also grab the Mapanui bookmarklet and add it to your bookmarks toolbar to invoke Mapanui as a user of any web site you visit.

Ultimately, microformats are a bit like plumbing. They don’t do very much on their own, but if you make use of the data they provide, you can quickly and easily create useful functionality your visitors will be thankful for.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • André Luís

    Great to see you promoting the amazing Suda’s X2V! :) We also used it on the page for the schedule of SHiFT08 and we even went one step further. We used Google Chart API to create a QR code of the extractor url, thus allowing capable phones (like Nokia’s N80 and similar) to import *directly* to your phone the entire schedule of the conference.

    You can see it live at http://shift.pt/page/schedule

  • http://MeitarMoscovitz.com/ Meitar

    @André Luís: Thanks so much for your comment. Your tip regarding using the Google Chart API to link the extractor URL for mobile phones is awesome! As an aside, have you seen SitePoint’s recent blog post about the Google Chart API? And naturally, I’ve been in love with X2V ever since I found it. ;)

  • http://www.para-diddledesign.com somecallmejosh

    You may also want to check out the Dreamweaver extension at:
    http://www.webstandards.org/action/dwtf/microformats

  • http://MeitarMoscovitz.com/ Meitar

    @somecallmejosh: That looks cool. Other than making it easier for site developers to create microformatted markup, does the DreamWeaver microformats extension do anything for site visitors? Thanks again for the link; I know just the person who’d love to see that if she doesn’t already know about it. :)

  • Anonymous

    great article…. :)

  • http://www.inhousewebsolutions.ca Kevin

    All this mirco formatting stuff has been giving me a headache and I have been looking for a post or something like this for sometime now.

    Thanks a lot for this post!