Home

Microformats and Media... RFC if you like JS or CSS

2008, April 17 - 2:16pm — dopry

I have a love hate relationship with microformats. The apostles who think they're the end all be all of the semantic web drive me insane. 'Semantic Web' aside, microformats are a powerful approache to reusable design. Consistent markup with the appropriate JS or CSS can make for great reusable UI widgets.

This morning I was dabbling with derivative which goes through some acrobatics to display multiple media types, in light of the classes I recently added to the tags imagecache produces, I thought it would be awsome to use a simple microformat for files. Some quick Googling (proper verbs what is english coming to) led me to http://microformats.org/wiki/file-format-examples.

I'm seriously considering merging both examples from the page into something like:

The Gorge - MPEG video (22MB, 320x200, 228s, MP3 192Kbps audio, MPEG-2 video)

<?php
// ignore the php tags.

<div class="hFileFormat">
  <a type="video/mpeg; 
                  audio-codec=MP3,
                  audio-codec-sample-rate=192Kbps, 
                  video-codec=MPEG-2"
       length=23068672
       href="/angels_arete.mpg">The Gorge - MPEG video</a>

  <!-- should meta-data be in a wrapper or have a general class? -->
  <abbr class="size-in-octets" title="23068672">22MB</abbr>,
  <abbr class="duration-in-seconds" title="228.23">228.23s</abbr>
  <abbr class="width-in-px" title="320">320px</abbr>
  <abbr class="height-in-px" title="200">200px</abbr>
  <span class="custom copyright-year">2006</span>
  <!-- allow addition of custom meta data with .custom -->

  <!-- should codec data be in wrapper or have a general class? -->   
  <span class="audio-codec ">MP3</span>
  <abbr class="audio-codec-sample-rate" title=192000>192Kbps 
</abbr>
  <abbr class="audio-code-bit-depth" title=16>16bit</abbr>

  <!-- should codec data be in wrapper or have a general class? -->   
  <span class="video-codec">MPEG-2</span> 
  <span class="video-codec-sample-rate" title=200000>200K</span>
  <!-- include additional codec data if present -->
</div>

?>

The format will need some refinement, so I am to soliciting feedback from people familiar with JQuery and CSS. Are there limitations to the markup? Can it be more succinct? Can it be made more self explanatory? Are there ways to make it an easier target for selectors? Is anyone else doing anything similar?

Comments

2008, April 21 - 2:53pm — mozillaman

Very nice! +1 This would be

Very nice! +1

This would be cool for FLV/H.264/MP3, having a JavaScript that would detect this code on a page and make a nice Flash movie viewer. Same could be done with WMV/WMA and silverlight.

Robin