Microformats: The What, Where, Why and How
-
Upload
mark-meeker -
Category
Technology
-
view
1.058 -
download
0
description
Transcript of 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 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/