A real life use case of Microformat hCard in action

Just yesterday, I was writing about rel=me, XFN, and microformats, check out the post A simple data portability project or is it if you haven’t read it already or just want some background on rel=me, XFN, and microformats.

Today I plan to attend the monthly DataPortability meetup at LinkedIn office in Mountain View. For directions, I would normally go through a series of steps to open a new tab, load google maps, find LinkedIn, etc. However, with my new found microformat knowledge, I immediately noticed that the Firefox Operator plugin lit up when the event page is loaded. As it turns out, upcoming.yahoo.com, the event service provider in this case, supports microformats.

Here’s the Operator showing the contact details for the event
Event hCard Contact
To map it out, I clicked on “Find with Google Maps” and presto, it shows up on Google maps, very cool. Note that the contact information is using the hCard microformat. And hCard is actually based on another standard, vcard. hCard is just vcard expressed in HTML format. Here’s the actual HTML for that information

<div class="venue location vcard">
<span class="fn org">
<a href="/venue/59005/">LinkedIn</a>
<div class="address adr">
<span class="street-address">2029 Stierlin Court</span>
<span class="locality">Mountain View</span>
<span class="region">California</span>
<span class="postal-code">94043</span>
...rest deleted from brevity

The hCard bits are represented in class="street-address", class="locality", class="region", etc., attributes.

Here's the Operator showing the event calendar details
Event hCard Calendar
If you wish to add this event to your favorite calendar like Outlook, click on "Export Event" or perhaps "Add to Yahoo calendar" or "Add to Google calendar".

Here's the Operator showing the various event tagspaces
Event tags
Tagspaces is also another microformat standard but so far it hasn't been useful to me as a user. Tags are widely implemented in popular social networking sites, though in some places they are called keywords, e.g., if you add a video clip from the movie "Rush Hour 3", you can tag it with "Jackie Chan", "Martials arts", "Kungfu", "comedy", etc, you get the idea. The more tags you add, the easier it is for someone else to find it.

However, it hasn't translated well with most of the tags I have seen so far. Take a look at the tags for the event page, it lists "dataportability", "microformats", "relme", "upcomingevent472061". For "dataportability", it then list sub options for "Find products on Amazon.com", etc. Without putting my technical hat on, I would be totally puzzled by "dataportability", "microformats", "relme", "upcomingevent472061", let alone find "dataportability" product on Amazon.com. In fact, I tried to find dataportability product on Amazon.com and guess what, it came up zippo as it should because there is no such thing. However to a first time user seeing and trying it, a likely first impression is that it is useless and broken. On other microformat capable pages, I saw duplicate (sometimes 3 or 4 times) tags making it even more confusing, this probably could have been handled by Operator removing the duplicate entries though but there shouldn't be dups in the first place. Anyway, I do think this is a useful feature but it requires more usability thoughts for Joe Blow users.

2 Responses to “A real life use case of Microformat hCard in action”

  1. 1 James Burke May 4, 2008 at 9:07 pm

    For another good real-life example have a look at this TV listings page from the UK (preferably with the Firefox Operator plugin) – http://twurl.nl/mp7cok (http://www.radiotimes.com)

    PS – thanks for the highlighting my blog post in your previous post.

  2. 2 Bob Ngu May 4, 2008 at 11:36 pm

    Thanks for the tip, James. I am finding new hCard / Microformats producers every day since I wrote about rel=me, so add another one to the list.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s