NYC microformats workshop

Tantek Çelik

Building blocks

• Class design pattern
• abbr design pattern
  • datetime
  • date
• value-class-pattern

hCard

• Examples
  • Yelp
  • Google Maps
  • many more in the wild
• Tools
  • hCard creator
  • Firefox Operator
  • Safari plug-in
  • Oomph plug-in
  • X2V

hCard exercise

• exercise: my first hCard

hCalendar

• Examples
  • Upcoming
  • this event
  • many more in the wild
• Tools
  • hCalendar creator
  • Firefox Operator
  • Safari plug-in
  • Oomph plug-in
  • X2V

hCalendar exercise

• exercise: social event

hCalendar exercise

• exercise: workshops

Compound microformats

• hReview
• hResume
• hAtom

hReview exercise

• exercise: book review

microformats Principles

• • Solve a specific problem
  • Visible data is much better for humans than invisible metadata
  • Reuse building blocks from widely adopted standards
    • vCard: hCard
    • iCalendar: hCalendar
    • Atom: hAtom
• • Start as simple as possible
  • Pave the cow paths
  • Humans first, machines second
  • 80/20

Social Network Portability

hCard + XFN (rel="me")

• Implementations
  • Get Satisfaction
  • Dopplr
• Code
  • Ruby on Rails
  • Python
  • PHP
• Video
  • Plaxo shipped online identity aggregator based on microformats
  • What is your provenance?

Smell the microformats

• exercise: sentence

Smell the microformats

• exercise: about you

Smell the microformats

• exercise: drink tasting

Your site

• exercise: contact info

Your site

• exercise: events listing

Your site

• exercise: HTML5 events listing

Enhancing user experience exercises

• Download to Address Book
• Download or Add to Calendar
• Oomph

Reviews for rich snippets

• Workshop review
• Workshop aggregate review