A Look at the Practical Applications of Microformats

HTML used to semantically describe what information looks like. HTML is now leaving the styling of information up to Cascading Style Sheets and is becoming more interested in describing what the data is. There are tags to let the browser know what information is a header, paragraph, list, etc. Microformats take the concept of describing data up a notch. Microformats are pieces of semantic data embedded into HTML that uses existing standards to describe what the information is. Once a user agent (such as a web browser) knows what certain pieces of data are, it can export the data to a more appropriate context. In this article we’re going to look at two microformats in particular: hCard, hCalendar.

Both hCard and hCalendar are based off of already existing standards (vCard – RFC#2426 and iCalelndar – RFC#2445 respectively). With some XSLT transformations or Javascript parsing, we can export the microformatted data in a webpage to other pages or into other data formats. For example, sites like upcoming.org mark up events with the hCalendar microformat. If we plan on attending these events, we can add it our Google Calendar, Yahoo Calendar, or 30Boxes to remind us about the event at a later date.

One of, if not the most popular microformat user-agent is the Firefox extension Operator by Michael Kaply. Currently, Michael is working on adding microformat functionality and javascript functions for microformats to Firefox 3. This means we’ll be seeing a lot of these features in the next version of Firefox. Operator supports a wide range of microformats, but as previously mentioned we’re only going to stick to hCard, hCalendar and we’re going to talk a bit about rel-tag. The premise of operator is simple: if it detects any microformatted data, it allows you to take some sort of action. If you find a person or place marked up with hCard, you can export it as a vCard or add to yahoo contacts. Exporting an hCard as a vCard will allow you to save a contact to programs like Address Book, Outlook or any program that supports the vCard standard.

I’ve already mentioned what you can do with information marked up with hCalendar, so let’s look at rel-tag. Rel-tag is simply marking up up the “rel” property of a hyperlink with the value “tag.” Once Operator knows that the link is a tag, it can then look for that same tag at sites like flickr, technorati, and del.icio.us. A common use for tags is looking up additional information about something you’re reading. Blog posts for example are usually tagged, so people can find pictures on flickr, related blog posts on technorati, or related sites on del.icio.us.

Let’s take a moment to recap and see why we like microformats and operator. For one we don’t have to input data ourselves. Since the data is already online we’re simply copying it to our application of choice. With this comes the advantage of actions becoming point and click. If you want to add an event to your Google Calendar, you point and click on the add to Google Calendar option. Pretty simple.

One area that can benefit from microformats is the cell phone market. I’ve already written about the iPhone as a microformat killer-app, but I wanted to expand this idea to include both cellular phones and internet-enabled PDAs. Cell phones and PDAs both have notoriously horrible input interfaces. Don’t you dread typing out a long text message, let alone trying to search for something on a cell phone browser? What about trying to write something out in Graffiti? What if these devices had the point and click ease of use that operator has? With REAL browsers coming to next-gen cell phones such as the iPhone, I see no reason why microformats shouldn’t be a part of this market. Imagine adding a person’s contact information into your cell phone via their hCard. You have all of the information you need about them ready to and be entered into your cell phone at the tap of a stylus. The same can be said about events and adding it to your calendar application on your cell phone or PDA.

With these smaller devices, ease of input usually suffers. In this case microformats make a great alternative to user input and can help overcome these shortcomings. It really can be just as easy as point and click.

One thought on “A Look at the Practical Applications of Microformats

  1. One quick nitpick…

    HTML used to semantically describe what information looks like.

    Actually, HTML was never supposed to do that. Designers just effed up HTML to make it do what they wanted to do—mostly because the CSS support in browsers was shite.

    But back to your main topic… it’s all going to be a question of “Where are the user agents?”. Yes, Microformats would be PERFECT on a phone or other device. But there’s the question of how to get the agents on the phone.

    Open platforms should allow you to do this… if only the agents existed. From what I know, the best mobile browser available today is the OperaMini browser. But can that do anything with microformats? I don’t believe so. Somebody could write a plugin to do this (does Opera allow plugins?) or maybe a mobile Firefox is the answer.

    Then there’s iPhone. Super. They’re going to have Safari. But we probably can’t install any plug-ins. Bookmarklets aren’t as efficient. This leaves it up to Apple to implement Microformat features. I love Apple, but I’m a bit doubtful that they will do that. I’m sure they’ll try to introduce their own super smart phone number and address identification system. Unfortunately, that doesn’t help us with hCal.

    It’s all about usability. Microformats can be a real boon. I just hope SOMEONE allows us to take advantage of this on mobile devices.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>