CC-BY-3.0

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 Google Microsoft Bing Yandex
   Rich Snippet search result of a restaurant with rating
5. web sites consuming microformats
   Readability, Spinn3r, Foursquare

which microformats?

• hAtom - Google 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
  • <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.

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: "p-summary"
  • easier to recognize as microformats: "h-card"
  • enables generic parsing

c. too much markup

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

3. today: HTML5 &
microformats2

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 data tables: result

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>

today: microformats2

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

microformats support coming in FirefoxOS

Q & A

(削除) Q & A (削除ここまで) FAQ

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

17 translations!