If you’re a web developer you’ve probably heard of Microformats. I came across them about 6 months ago and wasn’t too impressed. But the more I thought about them the more I liked the idea. It wasn’t until I read a microformat post on errtheblog that I decided to give microformats a shot.

Microformats are basically a collection of standard ways to markup your content so that both humans and machines can easily read the content. It’s all a matter of assigning particular names to your markup elements. events, reviews and people are some examples of existing microformats.

Thinking about Finetoothcog and the data it collected I started to see a stolen bike as an event and saw how hCalendar would be applicable to a stolen bike.

Below is the code I used to make the stolen bike listings implement the hCalendar standard.

Having <div class="vevent">...</div> indicates that whatever is inside the vevent is an event. Then you add things such as event summary <span class="summary">...</span> and start time <abbr class="dtstart" title="2006-01-01">January 1st 2006</abbr>

It was all very easy and straight forward, the only thing that took a little tweaking was the abbr tag. When I first implemented the abbr it had a dotted line displayed under the data. I was able to get rid of this dotted line by setting the border to none. abbr {border:none;}

Perhaps you are thinking “well microformats are cool and all but what does it get me?” Well now that the stolen bikes are microformatted you can subscribe to the stolen bikes with your iCal thanks to a sweet little feed service at Technocrati

Update:
Bryan sent me a cool GreaseMonkey script he wrote. This script takes the microformats and overlays a graph on the page showing the number of bikes stolen on each date.

Nice combination of Microformats and Firefox extensions Bryan!

This entry was posted on Thursday, November 23rd, 2006 at 12:30 am and is filed under Finetoothcog. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

If you’re a web developer you’ve probably heard of Microformats. I came across them about 6 months ago and wasn’t too impressed. But the more I thought about them the more I liked the idea. It wasn’t until I read a microformat post on errtheblog that I decided to give microformats a shot.

Microformats are basically a collection of standard ways to markup your content so that both humans and machines can easily read the content. It’s all a matter of assigning particular names to your markup elements. events, reviews and people are some examples of existing microformats.

Thinking about Finetoothcog and the data it collected I started to see a stolen bike as an event and saw how hCalendar would be applicable to a stolen bike.

Below is the code I used to make the stolen bike listings implement the hCalendar standard.

Having <div class="vevent">...</div> indicates that whatever is inside the vevent is an event. Then you add things such as event summary <span class="summary">...</span> and start time <abbr class="dtstart" title="2006-01-01">January 1st 2006</abbr>

It was all very easy and straight forward, the only thing that took a little tweaking was the abbr tag. When I first implemented the abbr it had a dotted line displayed under the data. I was able to get rid of this dotted line by setting the border to none. abbr {border:none;}

Perhaps you are thinking “well microformats are cool and all but what does it get me?” Well now that the stolen bikes are microformatted you can subscribe to the stolen bikes with your iCal thanks to a sweet little feed service at Technocrati

Update:
Bryan sent me a cool GreaseMonkey script he wrote. This script takes the microformats and overlays a graph on the page showing the number of bikes stolen on each date.

Nice combination of Microformats and Firefox extensions Bryan!

This entry was posted on Thursday, November 23rd, 2006 at 12:30 am and is filed under Finetoothcog. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.