microformats: the what, where, why and how

Mark MeekerArchitect, UI Engineering

Orbitz TechTalkChicago, IllinoisOctober 31, 2007

Microformats:The What, Why, Where and How

• What are microformats?

• Why are they important?

• Where can they be found?

• How are they created?

What are microformats?

Information

Browser

Moscone Center747 Howard StreetSan Francisco, California 94103

Browser Human Readable

API

<rsp stat="ok" version="1.0"><event id="262789" name="JavaOne 2008" tags="" description="" start_date="2008-05-06" end_date="2008-05-09" start_time="" end_time="" personal="0" selfpromotion="0" metro_id="2" venue_id="1398" user_id="75537" category_id="5" url="http://java.sun.com/javaone/sf/index.jsp" date_posted="2007-09-06" latitude="37.7841" longitude="-122.401" geocoding_precision="address" geocoding_ambiguous="0" venue_name="Moscone Center" venue_address="747 Howard Street" venue_city="San Francisco" venue_state_name="California" venue_state_code="ca" venue_state_id="5" venue_country_name="United States" venue_country_code="us" venue_country_id="1" venue_zip="94103" venue_url="http://www.moscone.com/" venue_phone="(415) 974-4000"/>

</rsp>

<rsp stat="ok" version="1.0"><event id="262789" name="JavaOne 2008" tags="" description="" start_date="2008-05-06" end_date="2008-05-09" start_time="" end_time="" personal="0" selfpromotion="0" metro_id="2" venue_id="1398" user_id="75537" category_id="5" url="http://java.sun.com/javaone/sf/index.jsp" date_posted="2007-09-06" latitude="37.7841" longitude="-122.401" geocoding_precision="address" geocoding_ambiguous="0" venue_name="Moscone Center" venue_address="747 Howard Street" venue_city="San Francisco" venue_state_name="California" venue_state_code="ca" venue_state_id="5" venue_country_name="United States" venue_country_code="us" venue_country_id="1" venue_zip="94103" venue_url="http://www.moscone.com/" venue_phone="(415) 974-4000"/>

</rsp>

API Machine Readable

Both?

<div> <p>747 Howard St.</p> <p>San Francisco </p> <p>California</p> <p>94103</p> </div>

<div class=”adr”> <p class=”street-address”>747 Howard St.</p> <p class=”locality”>San Francisco </p> <p class=”region”>California</p> <p class=”postal-code”>94103</p> </div>

Map the Location?

Add to Calendar?

Add to Address Book?

Synch to Phone?

Use in Mash-Up?

Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards. Instead of throwing away what works today, microformats intend to solve simpler problems first by adapting to current behaviors and usage patterns (e.g. XHTML, blogging).

source: http://microformats.org/about

Why microformats?

Information Broker

• Building blocks of information

• Introduce consistent way to identify common pieces of data

• Build, own and share your information on the web

• Support aggregation sites

• Provide an API for your website

Discoverability

Discoverability

Discoverability

Discoverability

Discoverability

Discoverability

Discoverability

Discoverability

• What if everyone started to mark-up pages with microformats?

• How easy would it be to tie data on un-connected sites together?

• What kind of mash-ups would result?

“Planting seeds”

But that’s the beauty of it! Something I’m calling “oblivious development”. I’ve always looked at microformats as “planting seeds” that later grow into things you never even thought of.

- Dan Cederholm, simplebits.com & cork’d.com

“Planting seeds”

I’m not interested in the ideas I can think of, but instead of all the possible ideas I can’t.

- Brian Suda

How do they work and where can they be found?

Design patterns

class

<span class=”tel”>1-555-123-1234</span>

Design patterns

class

<span class=”tel”>1-555-123-1234</span>

Design patterns

class

<span class=”tel”>1-555-123-1234</span>

Design patterns

rel

<a rel=”tag” href=”/tags/ajax”>jquery</a>

Design patterns

rel

<a rel=”tag” href=”/tags/ajax”>jquery</a>

Design patterns

abbr

<abbr class=”dtstart” title=”20070906”> September 6th, 2007</abbr>

Design patterns

abbr

<abbr class=”dtstart” title=”20070906”> September 6th, 2007</abbr>

Design patterns

abbr

<abbr class=”dtstart” title=”20070906”> September 6th, 2007</abbr>

Design patterns

abbr

<abbr class=”dtstart” title=”20070906”> September 6th, 2007</abbr>

hCard(people and orgs)

hCard

• Represents:

• people

• organizations

• companies

• places

• Parallels the values in the vCard standard

hCard

<div class="vcard"> <p class="org fn">Fairmont San Jose</p> <div class="adr"> <p class="street-address">170 S Market St</p> <p> <span class="locality">San Jose</span>, <span class="region">CA</span> <span class="postal-code">95113</span> </p> </div> <div class="tel">1-800-346-5550</div></div>

hCard

<div class="vcard"> <p class="org fn">Fairmont San Jose</p> <div class="adr"> <p class="street-address">170 S Market St</p> <p> <span class="locality">San Jose</span>, <span class="region">CA</span> <span class="postal-code">95113</span> </p> </div> <div class="tel">1-800-346-5550</div></div>

Google Maps

Google Map locations now output in hCard format.

Flickr

Flickr outputs geo microformat for geo-tagged images

hCalendar(events)

hCalendar

• Represents calendar items and events

• Mirrors the iCalendar specification, used by iCal and Outlook

hCalendar

<div class="vevent"> <p class="summary">The Rich Web Experience</p> <p> <abbr class="dtstart" title="2007-09-06"> Sept. 6, 2007 </abbr> - <abbr class="dtend" title="2007-09-09"> Sept. 8, 2007 </abbr> </p> <p class="location">San Jose, CA</p></div>

hCalendar

<div class="vevent"> <p class="summary">The Rich Web Experience</p> <p> <abbr class="dtstart" title="2007-09-06"> Sept. 6, 2007 </abbr> - <abbr class="dtend" title="2007-09-09"> Sept. 8, 2007 </abbr> </p> <p class="location">San Jose, CA</p></div>

Upcoming.com

Upcoming.com uses hCal for events. With a browser plugin you can export directly from

the webpage to your calendar.

hReviews(reviews)

hReview

• Encourage sharing, distribution, and aggregation of reviews

• Represents a review of something (item, event, location, website, etc)

• item being reviewed

• date of review (hCal)

• reviewer (hCard)

• description

• tags (rel-tag)

Yahoo Tech(http://tech.yahoo.com)

Yahoo Tech marks up all of the product reviews on their site with hReview

Cork’d(http://corkd.com)

Wine Review site, Cork’d uses hReviews for user’s reviews of wines on the site.

hResume(resumes)

hResume

• Represents a resume

• Contact details

• Education

• Experience

• Skills

• Affilliations

• Publications

LinkedIn

LinkedIn publishes the over 9 million resumes on their site with hResume.

hListing(listings)

hListing

• Represents an item being listed for exchange.

• Listing action [sell, rent, trade, ...]

• Lister (hCard)

• Price

• Summary

• Description

• Tags (rel-tag)

Edgeio

Edgeio aggregates classifieds posted around the web and supports pulling in hListings

• hCalendar (events)

• hCard (people/orgs)

• hListing (classifieds)

• hResume (resumes)

• hReviews (reviews)

• hAtom (syndication)

• adr & geo (locations)

• rel-license (license links)

• rel-tag (content tags)

• XOXO (lists)

• VoteLinks (voting)

• XFN (social networking)

and more (see microformats.org)

How can microformats be used?

It is an API

http://www.siatec.net/timeline/index.php

Greasemonkey

Operator

• Allows for interacting with microformats on the page via toolbar

• Firefox extension

• https://addons.mozilla.org/en-US/firefox/addon/4106

• Extensible via ‘user scripts’

• http://www.kaply.com/weblog/operator-user-scripts/

Operator

Operator

Tails

• Allows for interacting with microformats on the page via sidebar

• Firefox extension

• https://addons.mozilla.org/en-US/firefox/addon/2240

Tails

Tails

Webcards

• Offers in-page notification of and interaction with microformats

• Firefox extension

• http://www.whymicroformats.com/webcards

Webcards

Bookmarklet

• Calls out hCards and hCalendars

• Bookmarklet targeted for Safari

• http://leftlogic.com/lounge/articles/microformats_bookmarklet

Bookmarklet

Technorati microformat search

(http://kitchen.technorati.com/search/)search for hCards, hCalendars, hReviews

Converters

• X2V

• http://suda.co.uk/projects/X2V/

• Technocrati

• http://technorati.com/events/

• http://technorati.com/contacts/

Tools to convert from hCard to vCard andhCal to iCal for easy importing

What’s next formicroformats?

What’s next?

• New formats in draft

• Tools integration / plug-ins

• Microformat generators

• Microformat support in Firefox 3

• Dreamweaver Plug-in

Planting Seeds

• Unanticipated mash-ups?

• SEO Implications?

• Portable social networks?

How can you get startedwith microformats?

Getting started...

• Add an hCard to your blog

• Install Operator/Tails and start discovery

• Geo-tag your photos on flickr

• Build a mash-up

• Write a Greasemonkey script

• Subscribe to microformats-discuss

Where is more info on microformats?

Resources

Websites:

http://microformats.org - wiki- email discussion lists

http://microformatique.comhttp://planetmicroformats.comhttp://microformats.co.ukhttp://whymicroformats.com

Cheetsheet:http://suda.co.uk/projects/microformats/cheatsheet/

Resources

Title: Microformats: Empowering Your Markup for Web 2.0

Author: John Allsopp

Title: Using Microformats(O’Reilly Shortcut Series)

Author: Brian Suda

Questions?

Based on the work of:John Allsopp / Dan Cederholm / Tanktek Çelik /Alex Faaborg

Michael Kaply / Jeremy Keith / Drew McLellan / Chris Messina / Brian Suda

Attribution-Share Alike 3.0http://creativecommons.org/licenses/by-sa/3.0/