Open Web Camp IV

From Microformats Wiki
Jump to navigation Jump to search

One of several microformats events.


2012-07-14 from 9:00 to 18:00
PayPal Town Hall, 2161 N 1st St., San Jose, CA
Open Web Camp IV

Add this event to your calendar microformat_hcalendar.png

Open Web Camp IV

Open Web Camp IV (#owc4) - featuring a session on microformats-2:

microformats are published on millions of sites, providing a standard simple API for the data on those pages with no additional URLs, file formats, callbacks etc. Similar approaches have been tried as well (e.g. RDFa, microdata).

Lessons learned over 8 years have been incorporated into new HTML5 elements and microformats 2.0 for better accessibility, more efficient markup, improved semantics and a direct mapping to JSON for API and other data consumers.


Use the following tags on related content (blog posts, photos, tweets): tags: html5-microformats2 html5 microformats2 microformats openwebcamp owc4 san-jose microformats-session microformats-session-2012-07-14

If you use Twitter, mention @microformats in tweets about the event, and track them on Twitter Search.




Add a photograph from this event here.


Presentation slides:


Notes taken during the session on the etherpad:

More notes here:

09:30am HTML5 and microformats 2 - the next evolutionary step for web data

  • µformats 7 years old
  • slide breakdown of structured microdata in 2012 (need URL)
    • µformats dominate breakdown
    • maybe ~25% RDFa
    • maybe ~5% microdata
    • xx% of web using structured data
  • Role of simplicity and openness
    • one person, TBL
    • released HTML and HTTP unencumbered
    • All µformats work is contributed to public domain under a Creative Commons Type 0 (CC0) license
      • Means that work is not lost if goes away
      • Multiple Translations of specifications and documentation completed and underway
  • Why Microformats?
    • Futureproofing
    • Serendipity (making it easier for others coming after you)
    • less-work (well known, reusable class names)
    • site features/UI (vcard and ical formats)
    • cheap Don't Repeat Yourself (DRY) API instead of repeating content via e.g. XML/JSON endpoint or response type
    • search results
  • Paring Microformats Examples
  • 7 Years of Alternative Approaches
    • Structured Blogging
    • Google Base (was this Metabase before? no - nothing to do with it)
    • ...
  • 3 Lessons Learned
    • Accessibility: Humans First
      • Originally using title attribute, which interfered with screen readers
      • Any use of title attribute must be human readable
      • Value Class Pattern instead
    • Class Collisions and Losses
      • common class names such as 'summary' and 'description'
      • updates remove and rewrite markup
      • introducing prefixed class names in microformats2
        • Makes it more obvious
        • 'h-', 'p-', 'u-', 'dt-', 'e-'
    • Still too much markup needed
      • Too many extra spans and divs
        • leads to non-trivial error rates
      • Solutions
        • flat sets of properties, required properties don't work in practice (90210 problem)
        • imply common properties (name, url, photo)
          • <span class="h-card">Jane User</span>
  • HTML5 and Data
    • Data Tables
      • See OWC Schedule Page
      • Schedule table, each row implies the same time-slot, leverage that
    • time and date elements
      • one time element instead of three spans
      • "If a five-year-old can do ISO Dates, anyone can!"

(Historical Note: Tantek and Kevin Marks gave a very early microformats presentation here at EBay almost 8 years ago!) - "Can your website be your API?"


  • How many write HTML? (~ 75% of people in the room)
  • How many have written/published microformats? (~ 50% of people in the room)
  • what are the most common mistakes made when implementing microformats?
    • misspelling root class name, e.g. hcard instead of vcard (note: fixed in microformats2 - all root class names are same as microformat, e.g. h-card, h-event etc.)
    • miscapitalizaing root class name, e.g. hReview instead of hreview
    • omitting "n" property in hCard when specifying "given-name", "family-name" (note: fixed in microformats2 - flat set of properties, no more "n" property in h-card)
  • what are the most innovative ways microformats are being used?
  • Guerrilla microformats, what are your experiences with just-adding-them
  • Data Attribute instead of class names? +1
  • What was the name of the hCalendar to iCal converter?
  • What about date and time elements with ISO datetime attrs, and use JS to fill element with locale time?
  • How many have used (only 2 people in room)
    • Which vocabularies? (Product, Article - could use hProduct and hAtom instead)

Articles and Blog Posts

Articles and blog posts following up on the meetup. Add a link to your post in the list below:

Also, find posts on this meetup on Google Blog Search or Technorati.

Related Pages