Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

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

Parent Feed: 

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?

Author: 
Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web