We've been working on an update to our Lab project, Oomph: A Microformats Toolkit. Our initial impetus to revisit Oomph was to implement the new value-class pattern and take a moment to fix a few minor bugs and refresh the UI a bit to create a cleaner User-Experience. We also wanted to include the emerging microformat, hMedia, which we think has great potential.

One of the nice things about hMedia is that it spans multiple media, specifically audio, video, and images, which is what people produce and consume on the web. This fact makes it attractive and we think it has good chances for widespread adoption. One of the nice aspects of hMedia is how it plays well with others. As an example, hMedia can be used in combination with other microformats such as hReview or hEvents, for instance in the case of a review of a particular song or a video of an event. This flexibility of use is not only one of the facets of hMedia in particular, but microformats in general.

With Oomph2, we are implementing the hMedia spec to help surface within the Oomph toolbar microformatted video, audio, and images buried within the content of the site. It's our goal to not only make the user-experience of consuming microformats better for the web-surfer, but provide value to the website owner who would like an easily-added feature to their site.

A very useful scenario we explored was the use-case of a user providing links to music or video files, but not providing a player with which to listen to or view those files. By tagging .mp3 or .wmv files with the hMedia class, Oomph is able to find the media files and provide a Silverlight media player. For example, Karsten posted some of his recent (and awesome) audio tracks and tagged them appropriately. On this simple page, Oomph provides a lot of functionality that Karsten had to worry about nothing to implement.

<li class="hmedia"><a rel="enclosure"
href="greenification.mp3"><span class="fn">
greenification</span></a></li>

Another use we've found for hMedia is its support of regular images. With the addition of Oomph2 to your site, all microformatted images are found, and surfaced within the Oomph2 toolbar. The result is, in essence, a free image-gallery viewer for your site: Click the gleam, and scroll through the tagged images in the site.

At http://thunderkick.us/index_hMedia.html you can find the working example of the screenshot below.

What I've done is wrap the thumnails with a class of hmedia:

<div class="avatar hmedia">
<a href="http://thunderkick.us/blog/?p=41">
<img class="photo" alt="MardiGras" height="50" 
src="... mardigras.jpg" 
width="50" /></a>
</div>

Then I added a reference to the Oomph JavaScript file:

<script type="text/javascript" src="http://visitmix.com/
labs/oomph/2.0/client/oomph.js"></script>

Keep in mind, this is still a work in progress, so this particular .js file will be changing over time. We'll be releasing Oomph2 Beta in the coming weeks. We're currently working through issues and welcome your suggestions, ideas, and, of course, accolades. Do you have music or video that you'd like to post on the web using hmedia? Would Oomph be of use to you? Let us know how you're using microformats, especially the new hMedia format Oomph. Also, be sure to leave us a comment below and follow us on Twitter at @mixonline for the latest project updates, articles, and opinions.