events/2012-07-14-open-web-camp-4

One of several microformats events.

Details

When

2012-07-14 from 9:00 to 18:00

Where

PayPal Town Hall, 2161 N 1st St., San Jose, CA

What

Open Web Camp IV

Web

http://lanyrd.com/2012/openwebcamp-iv/

http://plancast.com/p/b9be/open-web-camp-iv

Add this event to your calendar

Open Web Camp IV

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

• 9:30 - 10:30am HTML5 and microformats 2 - the next evolutionary step for web data
  • location: Room Fireside B, PayPal Town Hall
  • http://openwebcamp.org/events/56
  • http://lanyrd.com/2012/openwebcamp-iv/swrty
  • http://plancast.com/p/bu8p/html5-microformats-20-tantek

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.

Tags

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.

Attendees

• Tantek Çelik
• … add yourself here!

Photographs

• Search for photographs from this event on Flickr: Photographs tagged microformats-meetup-2012-07-14 or for all photographs from microformats meetups.

Add a photograph from this event here.

Notes

Presentation slides:

• http://tantek.com/presentations/2012/07/html5-microformats2/

Topics:

• HTML5
• microformats-2
• ...

Notes taken during the session on the etherpad: https://etherpad.mozilla.org/owc4

• hashtag: #owc4
• http://openwebcamp.org

More notes here:

• http://manymedia.com/2012/07/microformats/

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

• http://openwebcamp.org/events/56
• µ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 http://creativecommons.org/publicdomain/zero/1.0/
    • Means that work is not lost if microformats.org 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
  • hAtom
    • Readablity (consuming hAtom)
    • WordPress (hAtom already in default template)
  • hCard
    • consumed by search engines
  • hproduct
    • consumed by search engines
  • hRecipe
    • Food sites and Google search
  • hResume
    • Guardian Jobs
    • Madgex (UK) wrote a client to consume
  • hReview
  • rel-me
    • Rel Value Wiki - existing-rel-values
    • Smallest microformat 'rel="me"'
  • rel-author
    • Google consumes this and tries to match to Google profiles
  • rel-license

• 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!"

• microformats2 http://microformats.org/wiki/microformats-2
  • prefixed class names
  • flat sets of optional properties
  • single-class markup for common uses

(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?"

• http://www.svforum.org/index.cfm?fuseaction=Calendar.eventDetail&eventID=11142
• http://tantek.com/presentations/20040928sdforumws/semantic-xhtml.html

Questions:

• 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
  • data-* attributes are for site-specific data and script libraries only - not semantic markup, see FAQ: http://microformats.org/wiki/html5#data_attributes
• What was the name of the hCalendar to iCal converter?
  • http://H2VX.com - see H2VX
• What about date and time elements with ISO datetime attrs, and use JS to fill element with locale time?
• How many have used Schema.org? (only 2 people in room)
  • Which vocabularies? (Product, Article - could use hProduct and hAtom instead)

• Is there a hHiringPost? ;-) (maybe an hJob or hCareer format?)
  • There's an hListing draft and a related job-listing effort as well - take a look and provide feedback!
  • http://microformats.org/wiki/hlisting
  • http://microformats.org/wiki/job-listing

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

• upcoming and recent events
• events in 2012
• events in 2011
• events in 2010
• events in 2009
• events in 2008
• events in 2007
• events in 2006
• Template for an individual event page