evolution of data on the web

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

why microformats?

1. less work - re-usable class names
2. site features/UI -
3. cheap DRY API - compare to XML[1]/JSON
4. search results
   
5. web sites consuming microformats
   Readability, , Foursquare

microformats parsed by

• hAtom - Readability (hNews), numerous customers
• hCard - H2VX Operator
• hCalendar - H2VX Operator
• hProduct -
• hRecipe -
• hResume - , library clients
• hReview -
• hReview-aggregate -
• rel-me - , RelMeAuth/IndieAuth
• rel-author -
• rel-license - advanced search

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

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.

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

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>
     

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>

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