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