Like what you see? Check out other labs at the MIX Online Lab »

Oomph: A Microformats Toolkit

Microformats are about enhancing the web, representing data in HTML and moving that data around. Oomph: A Microformats Toolkit is for web developers, designers and users, making it easier to create, consume, and style Microformats. Oomph makes consuming and producing content for the web just a little easier, more efficient, more fun. Now featuring Oomph2!

Download Oomph from Codeplex

Oomph artwork
You need Silverlight to view this video. It’s fast, it’s free and it’s awesome. Click here to get it.
  • Consume

    Consume Microformats

    With the Internet Explorer Add-in, web pages with Microformats light up. Want a cross-browser experience? Add a slick overlay that aggregates Microformats to any web page with one line of Javascript. Read More

  • Style

    Style Microformats

    Written for the hCard and hCalendar Microformat specifications, this set of 14 CSS styles will make your Microformatted content look beautiful and stylish. Read More

  • Create

    Create Microformats

    Do you publish content through a blog engine? Easily add Microformatted content to your blog posts with this Windows Live Writer Plug-in. Read More

Go Microformats!

The crew here at Mix Online believe in Microformats. But don't just believe us: look at the adoption of Microformats in the wild. There are over a billion web pages with content formatted to the hCard specification and nearly 100 million formatted to the hCalendar specification. Top web properties including Yahoo, LinkedIn, Eventful, Twitter and YouTube are using Microformats. At MIX06, Bill Gates, gave props to Microformats in his keynote: "We need Microformats and to get people to agree on them. It is going to bootstrap exchanging data on the web."

Oomph: A Microformat Toolkit

With the momentum of Microformats burgeoning, we decided to build Oomph: A Microformat Toolkit. Our main goal with Oomph is to make Microformats more accessible for developers and designers. Oomph is an amalgamation of applications: an Internet Explorer Add-in built in C++ that finds Microformats on a page; a cross-browser HTML overlay built using JQuery that aggregates Microformats; a set of beautiful CSS styles for Microformats; and a Windows Live Writer plug-in written in WinForms for inserting hCards. And, the entire project is up on Codeplex, ready for community contribution and extensibility.

Consume

Perhaps the most ambitious aspect of Oomph is the Internet Explorer Add-in and the accompanying cross-browser HTML overlay. For those who install the Add-in, pages with Microformats will "light up" aggregating and mapping the content as well as providing options to export the data. Architecturally, the Add-in actually injects a line of Javascript into web pages with Microformats. This Javascript can also be manually added to web pages, providing a cross-browser experience. You can see an example of this here.

Style

Because Microformats are based on a standard set of HTML class attributes, styling Microformats with CSS makes a lot of sense. As such, we are providing a set of CSS styles that can be used to make Microformatted content look great, including even a grunge themed style!

Create

Before you can style or consume Microformats, you need to create them. With this in mind, we have built an hCard Windows Live Writer Plug-in for adding contact information to your blog posts. The great thing about WLW is that it targets most blog platforms, including Windows Live Spaces, SharePoint, Wordpress, Blogger and many others. As blogs are becoming the CMS systems de rigueur, adding Microformats to blogs certainly adds up.

The History of Oomph

The first version of Oomph was released in October 2008. Oomph2 was made available in August 2009. Oomph2 includes several new features:

  • Complete Implementation of the Value Class Pattern
    The Value Class Pattern is an important update to the microformats specifications, which addresses significant issues around accessibility and internationalization. Oomph now successfully parses and renders hCalendars and hCards marked up according to this specification.
  • Support for hMedia
    Oomph will now parse and render audio, video and image content marked up with the hMedia microformat. In the case of audio and video, Oomph2 provides an inline media player for experiencing that content. You can see an example of this here.
  • ASP.NET Microformats Control
    With the ASP.NET Microformats control, you can easily add properly formatted microformats to your ASP.NET pages.  This control is particularly handy to use when programmatically creating microformatted content, aka populating pages with contacts from a database. Thanks to Mike Flynn for joining the Oomph project and contributing this code.
  • User Interface Enhancements
    Oomph2 has been redesigned to use its screen real estate more effectively as well as surfacing map information more directly. 
  • Bug Fixes and Code Refactoring
    Various issues reported by users around the first version of Oomph have been addressed.  Some code was refactored. In addition, Oomph2 uses jQuery 1.3.2.

Shout Outs

We would like to thank a whole range of people who have inspired and helped the project get off the ground:

Related Content