Clicky

O is for… Oomph - Jim O'Neil - Technology Evangelist - Site Home - MSDN Blogs

O is for… Oomph

Jim O'Neil

Technology Evangelist

E-mail  Twitter  LinkedIn  RSS Feed  About me

Check out my new blog at http:>//codocent.com

O is for… Oomph

  • Comments 5

O

Oomph?!  no, I’m not making it up.  Oomph is a toolkit for developers facilitating the incorporation of microformats into web applications. 

Ok, so what are microformats, you ask?  Here’s a definition from the go-to site on the subject, microformats.org:

Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards. Instead of throwing away what works today, microformats intend to solve simpler problems first by adapting to current behaviors and usage patterns (e.g. XHTML, blogging).

A Microformat Primer

What microformats do is apply existing XHTML tags to provide semantic meaning to a set of data.  For instance, the vCard format (RFC2426) was introduced in the mid-90s as a file format to disseminate business contacts, but as you can see it’s a format meant for machines first:

BEGIN:VCARD
VERSION:2.1
N;LANGUAGE=en-us:O'Neil;Jim
FN:Jim O'Neil
ORG:Microsoft
TITLE:Developer Evangelist
ADR;WORK;PREF:;;201 Jones Road;Waltham;MA;02541;United States of America
LABEL;WORK;PREF;ENCODING=QUOTED-PRINTABLE:201 Jones Road=0D=0A=
Waltham MA 02451
URL;WORK:http://blogs.msdn.com/jimoneil
EMAIL;PREF;INTERNET:jim.oneil@microsoft.com
REV:20090411T015215Z
END:VCARD

The associated microformat is known as hCard and uses existing XHTML markup to contain the same information as part of a web page.   Here’s the equivalent hCard information, along with the markup:

Display

Jim O'Neil
Microsoft
201 Jones Road
Waltham, MA, 02451 United States
Markup
<div class="vcard">
   <a class="fn url" href="http://blogs.msdn.com/jimoneil">
Jim O'Neil</a> <div class="org">Microsoft</div> <a class="email" href="mailto:jim.oneil@microsoft.com"> jim.oneil@microsoft.com</a> <div class="adr"> <div class="street-address">201 Jones Road</div> <span class="locality">Waltham</span>, <span class="region">MA</span>, <span class="postal-code">02451</span> <span class="country-name">United States</span> </div> </div>

To the web page viewer the display looks no different than if had it been included with traditional markup; however, now that the markup exposes some semantics, it can be treated as a collection of data with specific meaning, and therein lies the value.

 

Oomph Microformat Toolkit

 

Oomph

 

The Oomph Microformat Toolkit, which you can download from CodePlex, facilitates the use of microformats with three primary offerings:

  • an aggregator that detects microformats on the page and provides an overlay allowing users to quickly store calendar appointments (hCalendar) and contact information (hCard) to their local machine
  • a library of 14 CSS styles to be applied to hCard and hCalendar microformats
  • a Live Writer plug-in to ease the effort in producing microformats

Aggregator

An IE add-in included with the toolkit enables end-users to have web pages light up with the gleam (the icon you should see at the upper left of this page) when microformats are detected.  The gleam can also be enabled by developers  simply referencing two JavaScript files (one for jQuery and one for Oomph) to their pages.  [Note: the IE add-in injects the needed JavaScript if not explicitly included on the page.  If you’re developing your own pages with microformats, including the JavaScript yourself will ensure a consistent cross-browser experience for your users].

When hovering over the gleam, an overlay appears providing an interface to add the detected hCalendar and hCard items to your local calendar and contact list. Since I included a sample hCard in my post above, this page itself should be exhibiting the gleam at the upper left corner and when clicked result in the following overlay: Oomph overlay

There are no event (hCalendar) entries, but my contact information does appear on the right, along with icons below it to add to my Outlook, Yahoo, or Mac contacts, and since my contact includes a location, I can select the map (or globe) icon at the upper left, and it will plot the locations on Virtual Earth!  Cool, huh!

Virtual Earth 

CSS Styles

If you don’t like the default overlay presentation, you can change it by modifying the oomph.js file that is part of the toolkit (and referenced on the target page).  Or, if you simply want to reskin the display, there are multiple CSS files accompanying the toolkit that you can install on your server and reference within your microformat-outfitted pages.   Here’s a couple of static samples (this page isn’t outfitted with the CSS file to see them ‘live’).

Notebook theme Rounded corner theme

 

Live Writer plug-in

imageThe Microsoft installer image includes the IE add-in, the CSS files referred to above, and a Live Writer plug-in to aid in authoring hCard microformats for your site.  The plug-in collects the contact information and generates the requisite markup.

There are a few more Live Writer plug-ins available outside of Oomph as well:

 

More Information

Here’s a number of additional Microsoft resources on Oomph and several links of note on the subject of microformats in general.

Oomph CodePlex project (documentation direct link)

Oomph on MIX On-Line

Oomph PDC Session (on Channel9)

Designing with Microformats (article by Tim Aidlin)

microformats.org

Microformats: Empowering Your Markup for Web 2.0 (on Amazon)

Join the Conversation
Leave a Comment
  • Please add 4 and 1 and type the answer here:
  • Post
Read What Other's Think
  • Jim that's for the blog article.  I am having a heck of time trying to deploy it though.

    I downloaded the toolkit, and I am able to create my hCard; however I can't figure out for the life of me, how to deploy the overlay in a Community Server blog.

    I did spend quite a bit of time on microformats.org - but can't seem to find what I am looking for.

    I know you are a busy guy; but any help would be greatly appreciated.

  • Did you add the two JavaScript file references to your page (one is jQuery the other is oomph.js, both hosted at visitmix.com - or you could host locally too).  Check page 4 of the "documentation direct link" I included at the end of the blog post (or just do an View Source on this page!).

    If you want to have it on EVERY page, in Community Server (at least the version we're using on MSDN), you can add markup to the "Raw Header" under Global Settings>Title, Description and New.  So put the tags for the JS file references there and it should carry forward across all your posts.

    Let me know if that does the trick for you - I presume you see the overlay on my page?

  • Worked like a charm! - Thanks so much Jim!

  • great news.  I installed the IE add-in and it's kind of cool - when you go to other pages that have hCard and hCal content the icon just shows up for those pages too.  A "pull" option versus a "push" one, but for IE only.

  • I just added the hCard content to my SideBar so no matter what page you are on when you visit my blog, it loads the "gleam"

Page 1 of 1 (5 items)