CC-BY-3.0

etherpad.mozilla.org/cascadesf

evolution of data on the web

1. microformats in 2012
2. challenges & lessons
3. HTML5 & microformats2 today

1. microformats in 2012

2012 Web Data Commons - microformats ~70% domains

simplicity & openness

public domain / CC0

17 translations!

why microformats?

1. less work - re-usable class names
2. site features/UI - Download hCard to Address Book Download hCalendar to Calenar
3. cheap DRY API - compare to XML[1]/JSON
4. search results
   Rich Snippet search result of a restaurant with rating
5. web sites consuming microformats
   Readability, Spinn3r, Foursquare

microformats parsed by

• hAtom - Readability (hNews), numerous Spinn3r customers
• hCard - Google Microsoft Bing Yandex Readability H2VX Foursquare Firefox Operator Microformats for Chrome
• hCalendar - Google Microsoft Bing Yandex H2VX Firefox Operator Microformats for Chrome
• hProduct - Google Microsoft Bing Yandex
• hRecipe - Google Microsoft Bing Yandex Microformats for Chrome
• hResume - Guardian Jobs, Madgex Labs library clients
• hReview - Google Microsoft Bing Yandex Microformats for Chrome
• hReview-aggregate - Google Microsoft Bing Microformats for Chrome
• rel-me - Google, RelMeAuth/IndieAuth
• rel-author - Google
• rel-license - Google advanced search

2. challenges & lessons

7 years of alternative approaches

• 2005-2009(?): StructuredBlogging
• 2005-2011: Google Base schema
• 2007-2011(?): Google Data API/Elements
• 2009-2009(?): Yahoo et al CommonTag.org
• 2009-2011(?): Google rdf.data-vocabulary.org
• 2010-present Facebook OGP meta tags
• 2011-present Google+MS(Y!) Schema.org
• 2012-present Twitter Cards meta tags
• 2012-present OpenMetadata.org

lessons learned

a. accessibility
humans first

accessibility - humans first

• abbr title - must be human readable & listenable
• alternative: value class pattern (VCP)
  • separate date & time (VCPDT)

    <span class="dtstart">
     <span class="value">2012年07月21日</span> at
     <span class="value">10:00am</span>
    </span>

  • empty span with value-title (VCPVT)

    <span class="latitude">51° 30' 48.45"
     <span class="value-title" 
     title="51.513458"></span>
    </span>

• inelegant but workable, for now.

b. class collisions
and losses

class collisions and losses

• class="summary", "description"
• site design updates remove & rewrite markup
• answer: prefixed class names
  • 'h-','p-','u-','dt-','e-'
  • avoids collisions
  • easier to recognize as microformats
  • enables generic parsing

c. too much markup

too much markup: problem

• too many extra spans/divs

  <span class="vcard">
   <span class="fn">Tantek Çelik</span>
  </span>

• subproperties cumbersome (e.g. hCard 'n')

  <span class="vcard">
   <span class="fn n">
   <span class="given-name">Glenda</span>
   <span class="additional-name">Watson</span>
   <span class="family-name">Hyatt</span>
   </span>
  </span>

• even bigger problem in microdata, RDFa

  itemscope itemtype itemprop itemref itemid
  vocab typeof property rel

too much markup: solutions

• flat sets of properties. no subproperties.
• imply common properties (name, url, photo)

  <span class="h-card">Tantek Çelik</span>
   

3. today: HTML5 &
microformats2

HTML5 and data

• data tables: <table> <th id> <td headers>
• new in HTML5: <time> & <data>
• microformats 2

HTML5: <time> element

• enhances VCPDT:

  <span class="dt-start">
   <time class="value">2012年07月21日</time> at
   <time class="value">10:00am</time>
  </span>

• or replaces VCPDT:

  <time class="dt-start">
   datetime="2012-07-21T10:00:00">
   July 21st, 2012 at 10:00am
  </time>

• Trade-off: DRY vs. locale-specific datetimes

HTML5: <time> recent enhancements

• year: © <time>2012</time>
• year-month: (email list, blog archives)

  <time datetime="2012-07">July 2012</time>
  

• month-day

  Birthdate: <time datetime="--03-11">03-11</time>
  

• duration

  The Game Has Changed: <time>205s</time>
  Dark Side of The Moon: <time datetime="42m 59s">42:59</time>
  

• Thanks: microformats contributions to WHATWG

HTML5 new element: <data>

• replaces VCPVT:

  <data class="latitude"
   value="51.513458">51° 30' 48.45"
  </data>

today: microformats2

microformats2

1. prefixed class names (h- p- u- dt- e-)
2. flat sets of properties
3. single class markup for common uses
4. live documentation:
   microformats.org/wiki/microformats2