Microformats are a new and simple to implement way to handle your existing
data on your website, to enable its exchange with web apps like Google
Maps or flickr or even with desktop apps like Mail or Outlook. Sweet. For getting started let's just take a small step with a really useful example - Making contact informations available for download directly to the visitors contact managing application like Outlook or Apple Mail in form of an hCard with the generous help of microformats.

Step 1 of 2 - Formatting your existing data

There are some specifications for formatting your existing contact informations, many examples are available over at the hCard wiki page, but for now let's have a look at my example:

<div class="vcard">

     <a class="url fn n" href="http://svenigson.com">

          <span class="given-name">Bence</span>

          <span class="additional-name">Michael</span>

          <span class="family-name">Kucsan</span>

     </a>

     <div class="org">Svenigson Studios</div>

     <div class="title">Interactive Designer & Developer</div>

     <div class="adr">

          <div class="street-address">Felsolover 72</div>

          <span class="locality">Sopron</span>

          <span class="region">Gyor-Moson-Sopron</span>

          <span class="postal-code">9400</span>

          <span class="country-name">Hungary</span>

     </div>

     <div class="tel">

          <span class="type">Cell</span>

          <span class="value">+36 70 505 ...</span>

     </div>

</div>

Of course with CSS you are able to style this as usual, and for the case - just like me - you don't have, and do not want to have these kind of informations on any of your site, simple add style="display: none;" to the ones you don't want to be displayed or to the vcard itself.

Step 2 of 2 - Adding a download link via Technorati

Wondering how to get this linked? Well, via the generous help of Technorati. There is a beta application available, calledTechnorati Contacts Feed Service at http://technorati.com/contact where you can type in the address of the page which contains your vcard informations and it collects the informations and generates an hCard, ready for download. Nice. So you only need to add a link on your site like:

<a href="http://technorati.com/contact/http://svenigson.com">Download vCard</a>

with replacing http://svenigson.com with the address of your page containing your vcard and you are done. From now on your visitors can easily download your contact informations and use them in their desktop applications just like this one:

Example - Download vCard With My Contact Informations

Firefox Extension and Mr.Cederholm's example of usage 

There is a super useful Firefox Extension - announced by Mozilla Labs - called Operator. Operator detects hCard, hCalendar, geo, hReview and rel-tag and allows you to combine those microformats with desktop applications and web services such as Google Maps and Yahoo! Calendar.

After installing this extension visiting sites which already adopted microformats is becoming enhanced with the ability to easily reuse their data. For example try Dan Cederholm's SimpleBits and you'll be instantly able to add the events he mentions on his site directly to your Google Calendar.

Isn't this great?