Movies and Microformats

This looks like a really old post (I mean, it's from 2006 for goodness sake). Stay for the retro vibes but be aware any information in this post is likely way out of date.

Following Tantek‘s inspiring presentation at this year’s @media, I’ve decided to step up my game a little and seeing a great movie at the weekend gave me the perfect opportunity to try it all out.

I’ve kept the whole thing pretty simple - the Microformats site has a bunch of examples of microformats in use already and hReview was the obvious choice.

The code runs like this. The hReview only requires the item being reviewed, but obviously for a review to be useful it needs a bit extra.

As the power of microformats comes from them being pulled out of context (eg Technorati’s new search tool), I wanted to attach my name and url to the review. This is done via the reviewer item, wrapped up in hCard.

<span class="reviewer vcard">
    <a class="url fn" href="http://www.liptrot.org/about">Adam Liptrot</a>
</span>

The reviewer also has the date of the review assigned to it. Dates are something which have to be machine-readable and so must have a format which is common.

This format is contained within the title attribute of the abbr tag, as it is effectively abbreviating the more readable ‘June 19th 2006’ or even ‘yesterday’. So we add the following after the link within the reviewer span:

<abbr class="dtreviewed" title="20060619">June 19th 2006</abbr>

Then we have the mandatory item which I’ve wrapped in a link to the IMDB site reference (oh, and I’ve added a language tag to the link too, as it’s a French film).

<div class="item">
    <a lang="fr" class="url fn" href="http://www.imdb.com/title/tt0390808/">36 Quai des Orfèvres</a>
</div>

Put it all together with a rating and the review itself and we get the full entry.

<div class="hreview">
    <span class="reviewer vcard">
        <a class="url fn" href="http://www.liptrot.org/about">Adam Liptrot</a>
        <abbr class="dtreviewed" title="20060619">June 19th 2006</abbr>
    </span>
    <div class="item">
        <a lang="fr" class="url fn" href="http://www.imdb.com/title/tt0390808/">36 Quai des Orfèvres</a>
    </div>
    <div>Rating:<span class="rating">4</span> out of 5</div>
    <div class="description">
        <p>Movie review goes here...</p>
    </div>
</div>

At some point in the next few weeks I’ll update my previous movie reviews in the same way.