Microformats

Orbitz IDEAS - October, 2007

Transcript

1. Orbitz*IDEAS* October,'2007 Mark*Meeker* MICROFORMATS THE WHAT, WHY WHERE & HOW
2. • What are microformats? • Why are they important? • Where can they be found? • How are they created?
3. What are microformats?
4. Information
5. Browser
7. Moscone Center 747 Howard Street San Francisco, California 94103
8. Browser Human Readable
9. API
10. <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>
11. <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>
12. API Machine Readable
13. Both?
14. <div> <p>747 Howard St.</p> <p>San Francisco </p> <p>California</p> <p>94103</p> </div>
15. <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>
16. Map the Location?
19. Add to Calendar?
22. Add to Address Book?
25. Synch to Phone?
26. Use in Mash-Up?
27. 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
28. Why microformats?
29. 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
30. Discoverability
31. Discoverability
32. Discoverability
33. Discoverability
34. Discoverability
35. Discoverability
36. Discoverability
37. 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?
38. “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
39. “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
40. How do they work and where can they be found?
41. Design patterns class <span class=”tel”>1-555-123-1234</span>
42. Design patterns class <span class=”tel”>1-555-123-1234</span>
43. Design patterns class <span class=”tel”>1-555-123-1234</span>
44. Design patterns rel <a rel=”tag” href=”/tags/ajax”>jquery</a>
45. Design patterns rel <a rel=”tag” href=”/tags/ajax”>jquery</a>
46. Design patterns abbr <abbr class=”dtstart” title=”20070906”> September 6th, 2007 </abbr>
47. Design patterns abbr <abbr class=”dtstart” title=”20070906”> September 6th, 2007 </abbr>
48. Design patterns abbr <abbr class=”dtstart” title=”20070906”> September 6th, 2007 </abbr>
49. Design patterns abbr <abbr class=”dtstart” title=”20070906”> September 6th, 2007 </abbr>
50. hCard (people and orgs)
51. hCard • Represents: • people • organizations • companies • places • Parallels the values in the vCard standard
52. 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>
53. 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>
54. Google Maps Google Map locations now output in hCard format.
55. Flickr Flickr outputs geo microformat for geo- tagged images
56. hCalendar (events)
57. hCalendar • Represents calendar items and events • Mirrors the iCalendar specification, used by iCal and Outlook
58. 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>
59. 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>
60. Upcoming.com Upcoming.com uses hCal for events. With a browser plugin you can export directly from the webpage to your calendar.
61. hReviews (reviews)
62. 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)
63. Yahoo Tech (http://tech.yahoo.com) Yahoo Tech marks up all of the product reviews on their site with hReview
64. Cork’d (http://corkd.com) Wine Review site, Cork’d uses hReviews for user’s reviews of wines on the site.
65. hResume (resumes)
66. hResume • Represents a resume • Contact details • Education • Experience • Skills • Affilliations • Publications
67. LinkedIn LinkedIn publishes the over 9 million resumes on their site with hResume.
68. hListing (listings)
69. hListing • Represents an item being listed for exchange. • Listing action [sell, rent, trade, ...] • Lister (hCard) • Price • Summary • Description • Tags (rel-tag)
70. Edgeio Edgeio aggregates classifieds posted around the web and supports pulling in hListings
71. • 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)
72. How can microformats be used?
73. It is an API
74. http://www.siatec.net/timeline/index.php
75. Greasemonkey
76. 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/
77. Operator
78. Operator
79. Tails • Allows for interacting with microformats on the page via sidebar • Firefox extension • https://addons.mozilla.org/en-US/firefox/addon/2240
80. Tails
81. Tails
82. Webcards • Offers in-page notification of and interaction with microformats • Firefox extension • http://www.whymicroformats.com/webcards
83. Webcards
84. Bookmarklet • Calls out hCards and hCalendars • Bookmarklet targeted for Safari • http://leftlogic.com/lounge/articles/microformats_bookmarklet
85. Bookmarklet
86. Technorati microformat search (http://kitchen.technorati.com/search/) search for hCards, hCalendars, hReviews
87. Converters • X2V • http://suda.co.uk/projects/X2V/ • Technocrati • http://technorati.com/events/ • http://technorati.com/contacts/ Tools to convert from hCard to vCard and hCal to iCal for easy importing
88. What’s next for microformats?
89. What’s next? • New formats in draft • Tools integration / plug-ins • Microformat generators • Microformat support in Firefox 3 • Dreamweaver Plug-in
90. Planting Seeds • Unanticipated mash-ups? • SEO Implications? • Portable social networks?
91. How can you get started with microformats?
92. 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
93. Where is more info on microformats?
94. Resources Websites: http://microformats.org - wiki - email discussion lists http://microformatique.com http://planetmicroformats.com http://microformats.co.uk http://whymicroformats.com Cheetsheet: http://suda.co.uk/projects/microformats/cheatsheet/
95. Resources Title: Microformats: Empowering Your Markup for Web 2.0 Author: John Allsopp Title: Using Microformats (O’Reilly Shortcut Series) Author: Brian Suda
96. Questions?
97. 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.0 http://creativecommons.org/licenses/by-sa/3.0/