Successfully reported this slideshow.



Published on

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this


  1. 1. Microformats HTML to API Glenn Jones WebDD, 3 Feb 2007, Reading UK
  2. 2. Contacts Relationships Reviews Licensing Events Tagging Bookmarks Voting Posts Articles
  3. 3. HTML is mostly a description of language not content <div id= "column1" > <h1>About Glenn Jones</h1> <p> I am a web designer and information architect working and living in Brighton. I am currently the Creative Director of Madgex </p> </div>
  4. 4. Microformats Contact - hCard <div id= "column1" class="vcard" > <h1>About <span class= "fn" >Glenn Jones</span></h1> <p> I am a web designer and information architect working and living in Brighton. I am currently the <span class=“title">Creative Director</span> of <span class="org">Madgex</span> </p> </div>
  5. 5. Build on pre-existing pattern or standards BEGIN:VCARD VERSION:2.1 N:Glenn Jones FN:Glenn Jones ORG:Madgex TITLE:Creative Director TEL;WORK;VOICE:+44 (0) 1273 775100 ADR;POSTAL;ENCODING=QUOTED-PRINTABLE:;;Suite 1=0AClarence House;30-31 North Street;Brigthon;BN1 1EB;United Kingdom …
  6. 6. Attributes used in Microformats Class “for general purpose processing by user agents” Rel “describes the relationship from the current document to the anchor specified by the href attribute” Rev “describe a reverse link from the anchor specified by the href attribute to the current document”
  7. 7. Elemental Microformats An elemental microformat is a minimal solution to a single problem, built from standard XHTML elements.
  8. 8. rel-license <a href=" sa/2.5/" rel="license"> Some rights reserved </a>
  9. 9. rel-tag <a href="" rel="tag">WebDD</a> <ul> <li><a href="" rel="tag">Design</a></li> <li><a href="" rel="tag">Development</a></li> </ul>
  10. 10. XFN (Xhtml Friends Network) <ul> <li> <a href="" rel="friend met co-worker colleague"> James Wragg</a> </li> </ul>
  11. 11. hReview - Review <div class="hreview"> <abbr class="rating" title="5">5 of 5</abbr> <span class="type">event</span> <h2 class="summary">dconstruct overall</h2> <div class="description"><strong>Well dconstruct all done, </strong>good all round I thought although hard to stay awake during the folksonomy stuff!! Jeff barr great… …<ul class="tags"> <li><a href="" rel="tag">dconstruct06</a></li>
  12. 12. hCalendar - Event <div class="vevent"> <h1 class="summary">WebDD</h1> <p class="description">A free, one day community conference for Web Developers and Designers</p> <p>On <abbr class="dtstart" title="20070203T0930">3th February 9:30am</abbr>, <abbr class="dtend" title="20070204T1700"> 5:00pm</abbr> 2007 </p> </div>
  13. 13. Multiple Microformats in Combination – hCard & XFN <ul> <li class="vcard"> <a class="fn n url" href="" rel="friend met co-worker colleague"> <span class="firstname">James</span> <span class="givenname">Wragg</span></a> </li> </ul>
  14. 14. Implied Relationships <a href="" rel="friend met co-worker colleague"> James Wragg</a> <p id="footer">Copyright &copy; <address> <a rel="me" href="">Glenn Jones</a> </address> <p>
  15. 15. Operator Discovery & Extraction
  16. 16. Search Engines
  17. 17. It’s your data
  18. 18. <span class="location vcard"> <span class="fn org">Paradise</span>, <abbr class="geo adr" title="30.266935;- 97.739267"> <span class="street-address">401 East 6th St</span> </abbr> </span>
  19. 19. Microformats as an API
  20. 20. 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, Cork’d
  21. 21. By definition microformats are simple blocks data embedded across multiple pages with-in a web site To create an API we need to bring all this information together into a coherent schema
  22. 22. Design URLs for maximum clarity & discoverability? people/person.aspx?person=glennjones person/glennjones Describe logical objects not physical file paths Remove hierarchies where possible
  23. 23. Designing URLs into a schema to act as an API /tags /people /tag/creative /person/glennjones /person/glennjones/tags Faceted /person/glennjones/tag/creative } Structures /tags/26 /tags/?start=26&pagesize=25
  24. 24. URLs have semantic importance <a href="" rel="tag">Fish</a> It’s a "dog" not a " fish "
  25. 25. backnetwork.tags.getList( “creative”) URLs – that look and act like method calls
  26. 26. Using HTTP Verbs that work GET POST Read Create Update Create Update
  27. 27. Is this just not REST? (Representational State Transfer) • URLs clarity & discoverability • Uses HTTP Verbs GET, POST, PUT, DELETE • Deal with the concept of resources
  28. 28. APIs are not just about the code
  29. 29. oblivious development by planting seeds vs the conscious development of an interface
  30. 30. Can you develop a Microformats API YES
  31. 31. Simplicity gives you lower barrier to entry more chance of traction
  32. 32. Microformats, the AK-47 of the web I think history has shown us over and over again that the most successful “things” are those that are only as complex as they needed to be. I can think of the AK-47 rifle, for example… With Web 2.0, we’re seeing that as well. Pat Ramsey
  33. 33. Thank You Attribution. You must attribute the work in the manner specified by the author or licensor.