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

which microformats?

• 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
  • <abbr title="2012-09-21">21-09</abbr>
• alternative: value class pattern (VCP)
  • separate date & time (VCPDT)

    <span class="dtstart">
      <span class="value">2012-09-21</span> at
      <span class="value">15:25</span>
    </span>

  • empty span with value-title (VCPVT)

    <span class="latitude">38° 46' 9.692"
      <span class="value-title" title="38.769359"> </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: "p-summary"
  • easier to recognize as microformats: "h-card"
  • enables generic parsing

too much markup

• 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

microformats2: less markup

• flat sets of properties. no subproperties.
• common markup → common properties

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

    → name

  • <a class="h-card" href="http://tantek.com">Tantek Çelik</a>

    → url, name

  • <a class="h-card" href="http://tantek.com">
      <img src="IMG_0123.jpg" alt="Tantek Çelik"/>
    </a>

    → url, photo, name

HTML5 and data

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

HTML5 data tables

• Example: Unofficial XOXO Directory
• One big <table> with 500+ <tr>s
• One row of <th>s, the rest <td>s

HTML5: <time> element

• enhances VCPDT:

  <span class="dt-start">
    <time class="value">2012-09-21</time> at
    <time class="value">15:25</time>
  </span>

• or replaces VCPDT:

  <time class="dt-start"
        datetime="2012-09-21 15:25:00">
    21 September 2012 at 15:25
  </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="38.769359">38° 46' 9.692"
  </data>

microformats2 summary

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

microformats2 updates

• node.js microformats2 parser
• open source on github

1. How do I validate my microformats?

• Several microformats validators
• Get Operator for Firefox, turn on debug mode
• Try Google Rich Snippets Testing Tool
• microformats2: node.js parser

2. How do I get involved?

• Read (and edit!) the wiki:
  microformats.org/wiki
• Follow @microformats on Twitter
• Join IRC on Freenode: #microformats
• Help translate microformats:
  Microformats wiki translations