Published on

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 1. 06/02/09 HUGE / ParentsConnect / HUGE 45 Main Street, 2nd Floor NY NY 11201 718.625.4843 www.hugeinc.com Microformats “ Designed for humans first and machines second” microformats.org March 21th, 2008
  2. 2. What is the Semantic Web? <ul><li>“ The first step is putting data on the Web in a form that machines can naturally understand, or converting it to that form. This creates what I call a Semantic Web – a web of data that can be processed directly or indirectly by machines” </li></ul><ul><li>Tim Benners-Lee, 1999 </li></ul>06/02/09 HUGE / Microformats /
  3. 3. Machine-processable Data 06/02/09 HUGE / Microformats / <ul><li>Smart data </li></ul><ul><li>Data and meta data </li></ul><ul><li>Data and the description of its meaning </li></ul><ul><li>Example: XML </li></ul>
  4. 4. XML Example 06/02/09 HUGE / Microformats / <ul><ul><li><contacts> </li></ul></ul><ul><ul><li><contact id=“1” age=“28” friendOf=“2,3”> </li></ul></ul><ul><ul><li><first-name>Rafael</first-name> </li></ul></ul><ul><ul><li><last-name>Mumme</last-name> </li></ul></ul><ul><ul><li></contact> </li></ul></ul><ul><ul><li><contact id=“2” age=“15” friendOf=“1,3”> </li></ul></ul><ul><ul><li><first-name>Lukas</first-name> </li></ul></ul><ul><ul><li><last-name>Mairl</last-name> </li></ul></ul><ul><ul><li></contact> </li></ul></ul><ul><ul><li><contact id=“3” age=“25” friendOf=“1,2”> </li></ul></ul><ul><ul><li><first-name>Josef</first-name> </li></ul></ul><ul><ul><li><last-name>Pfleger</last-name> </li></ul></ul><ul><ul><li></contact> </li></ul></ul><ul><ul><li></contacts> </li></ul></ul>
  5. 5. Why XML? 06/02/09 HUGE / Microformats / <ul><ul><li>Markup is separate from content and may contain content </li></ul></ul><ul><ul><li>Hierarchical structure </li></ul></ul><ul><ul><li>Relational and object-oriented data models </li></ul></ul><ul><ul><li>Provides a simple and robust mechanism for encoding semantic information </li></ul></ul>XML OO Relational Element Class Entity Atribute Data member Relation
  6. 6. What is Semantic HTML? <ul><li>Semantic HTML is the use of the most appropriate HTML elements and attributes for the content we are marking up. </li></ul>06/02/09 HUGE / Microformats /
  7. 7. Microformats <ul><li>“ 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).” </li></ul><ul><li>microformats.org </li></ul>06/02/09 HUGE / Microformats /
  8. 8. The not-yet-semantic Web <ul><li>July 20 2006: I went to see the latest Woody Allen film today. It was pretty good. I’d give it a thumb and a half up  </li></ul><ul><li>Title: Pirates of the Caribbean 2; Director: Gore Verbinski; Rating: 8 out of 10 </li></ul><ul><li>Man, the CGI in superman roxor, but the film suxor </li></ul>06/02/09 HUGE / Microformats /
  9. 9. hReview <ul><li>5 out of 5 stars </li></ul><ul><li>Crepes on Cole is awesome </li></ul><ul><li>Reviewer: Tantek </li></ul><ul><li>Crepes on Cole is one of the best little creperies in San Francisco. Excellent food and service. Plenty of tables in a variety of sizes for parties large and small. Window seating makes for excellent people watching to/from the N-Judah which stops right outside </li></ul>06/02/09 HUGE / Microformats /
  10. 10. hReview: code <ul><li><div class=&quot; hreview &quot;> </li></ul><ul><li><span class=&quot; rating &quot;>5</span> out of 5 stars </li></ul><ul><li><h1 class=&quot; summary &quot;>Crepes on Cole is awesome</h1> </li></ul><ul><li><span class=&quot; reviewer vcard &quot;> </li></ul><ul><li>Reviewer: <span class=&quot; fn &quot;>Tantek</span> </li></ul><ul><li></span> </li></ul><ul><li><div class=&quot; description item vcard &quot;> </li></ul><ul><li><p><span class=&quot; fn org &quot;>Crepes on Cole</span> is one of the best little creperies in <span class=&quot; adr &quot;><span class=&quot; locality &quot;>San Francisco</span></span>. Excellent food and service. Plenty of tables in a variety of sizes for parties large and small. Window seating makes for excellent people watching to/from the N-Judah which stops right outside</p> </li></ul><ul><li></div> </li></ul><ul><li></div> </li></ul>06/02/09 HUGE / Microformats /
  11. 11. corkd.com 06/02/09 HUGE / Microformats /
  12. 12. 06/02/09 HUGE / Microformats / imdb.net
  13. 13. Decentralized Information 06/02/09 HUGE / Microformats /
  14. 14. adr <ul><li>186 W 80th street </li></ul><ul><li>New York, NY 10024 </li></ul>06/02/09 HUGE / Microformats /
  15. 15. adr: code <ul><li><div class=&quot;adr&quot;> </li></ul><ul><li><span class=&quot;street-address&quot;>186 W 80th street</span> <span class=&quot;locality&quot;>New York</span> <span class=&quot;region&quot;>NY</span> <span class=&quot;postal-code&quot;>10024</span> </li></ul><ul><li></div> </li></ul>06/02/09 HUGE / Microformats /
  16. 16. upcoming.yahoo.com 06/02/09 HUGE / Microformats /
  17. 17. Benefits <ul><li>Standard markup </li></ul><ul><li>Efficiency and easy maintenance </li></ul><ul><li>Enable distributed software services such as aggregation and indexing </li></ul><ul><li>Enable seamless interoperability between web-based content and desktop applications </li></ul><ul><li>Does not break your code </li></ul>06/02/09 HUGE / Microformats /
  18. 18. Principles <ul><li>Solve a specific problem </li></ul><ul><li>Start as simply as possible </li></ul><ul><li>Are designed for humans first, machines second </li></ul><ul><li>Reuse building blocks from adopted standards </li></ul><ul><li>Are modular and embeddable </li></ul><ul><li>Enable and encourage decentralized development, content, and services </li></ul>06/02/09 HUGE / Microformats /
  19. 19. IE8 WebSlices <ul><li><div class=&quot; hslice &quot; id=&quot;123&quot;> </li></ul><ul><ul><li><h1 class=&quot; entry-title &quot;>HUGE's Work</h1> </li></ul></ul><ul><ul><li><ul class=&quot; entry-content &quot;> </li></ul></ul><ul><ul><li><li> </li></ul></ul><ul><ul><li><strong>jetBlue</strong> </li></ul></ul><ul><ul><li><p> As Jetblue’s long-term interactive partner, HUGE helped the airline develop a phenomenally successful online travel website-mainly by keeping things powerfully simple.<br /> </li></ul></ul><ul><ul><li><a href=&quot;http://hugeinc.com/casestudies/clients.php?ID=9&quot;>View case study</a> </li></ul></ul><ul><ul><li></p> </li></ul></ul><ul><ul><li></li> </li></ul></ul><ul><ul><li>… </li></ul></ul><ul><ul><li></ul> </li></ul></ul><ul><li></div> </li></ul>06/02/09 HUGE / Microformats /
  20. 20. IE8 WebSlices 06/02/09 HUGE / Microformats /
  21. 21. More… <ul><li>http://microformats.org/ </li></ul><ul><li>hCalendar </li></ul><ul><li>hCard </li></ul><ul><li>rel-license </li></ul><ul><li>rel-nofollow </li></ul><ul><li>rel-tag </li></ul><ul><li>VoteLinks </li></ul><ul><li>XFN - XFN creator </li></ul><ul><li>XMDP </li></ul><ul><li>XOXO </li></ul><ul><li>… </li></ul>06/02/09 HUGE / Microformats /
  22. 22. Bibliography <ul><li>Book: Microformats, Empowering Your Markup for Web 2.0 - John Allsop </li></ul><ul><li>Book: The Semantic Web - Michael C. Daconta & Leo Joseph Obrst & Kevin T. Smith </li></ul><ul><li>Site: microformats.org </li></ul><ul><li>Site: blogs.msdn.com/ie/ </li></ul>06/02/09 HUGE / Microformats /