Microformats HTML to API

  • 1,020 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,020
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
14
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Microformats HTML to API Glenn Jones WebDD, 3 Feb 2007, Reading UK
  • 2. Contacts Relationships Reviews Licensing Events Tagging Bookmarks Voting Posts Articles
  • 3. HTML is mostly a description of language not content <div id= quot;column1quot; > <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. Microformats Contact - hCard <div id= quot;column1quot; class=quot;vcardquot; > <h1>About <span class= quot;fnquot; >Glenn Jones</span></h1> <p> I am a web designer and information architect working and living in Brighton. I am currently the <span class=“titlequot;>Creative Director</span> of <span class=quot;orgquot;>Madgex</span> </p> </div>
  • 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. 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. Elemental Microformats An elemental microformat is a minimal solution to a single problem, built from standard XHTML elements. http://microformats.org/
  • 8. rel-license <a href=quot;http://creativecommons.org/licenses/by-nc- sa/2.5/quot; rel=quot;licensequot;> Some rights reserved </a>
  • 9. rel-tag <a href=quot;http://technorati.com/tag/webddquot; rel=quot;tagquot;>WebDD</a> <ul> <li><a href=quot;http://technorati.com/tag/designquot; rel=quot;tagquot;>Design</a></li> <li><a href=quot;http://technorati.com/tag/developmentquot; rel=quot;tagquot;>Development</a></li> </ul>
  • 10. XFN (Xhtml Friends Network) <ul> <li> <a href=quot;http://jameswragg.comquot; rel=quot;friend met co-worker colleaguequot;> James Wragg</a> </li> </ul>
  • 11. hReview - Review <div class=quot;hreviewquot;> <abbr class=quot;ratingquot; title=quot;5quot;>5 of 5</abbr> <span class=quot;typequot;>event</span> <h2 class=quot;summaryquot;>dconstruct overall</h2> <div class=quot;descriptionquot;><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=quot;tagsquot;> <li><a href=quot;http://technorati.com/tag/dconstruct06quot; rel=quot;tagquot;>dconstruct06</a></li>
  • 12. hCalendar - Event <div class=quot;veventquot;> <h1 class=quot;summaryquot;>WebDD</h1> <p class=quot;descriptionquot;>A free, one day community conference for Web Developers and Designers</p> <p>On <abbr class=quot;dtstartquot; title=quot;20070203T0930quot;>3th February 9:30am</abbr>, <abbr class=quot;dtendquot; title=quot;20070204T1700quot;> 5:00pm</abbr> 2007 </p> </div>
  • 13. Multiple Microformats in Combination – hCard & XFN <ul> <li class=quot;vcardquot;> <a class=quot;fn n urlquot; href=quot;http://jameswragg.comquot; rel=quot;friend met co-worker colleaguequot;> <span class=quot;firstnamequot;>James</span> <span class=quot;givennamequot;>Wragg</span></a> </li> </ul>
  • 14. Implied Relationships <a href=quot;http://jameswragg.comquot; rel=quot;friend met co-worker colleaguequot;> James Wragg</a> <p id=quot;footerquot;>Copyright &copy; <address> <a rel=quot;mequot; href=quot;http://www.glennjones.net/aboutquot;>Glenn Jones</a> </address> <p>
  • 15. Operator Discovery & Extraction
  • 16. search.creativecommons.org Search Engines
  • 17. It’s your data
  • 18. <span class=quot;location vcardquot;> <span class=quot;fn orgquot;>Paradise</span>, <abbr class=quot;geo adrquot; title=quot;30.266935;- 97.739267quot;> <span class=quot;street-addressquot;>401 East 6th St</span> </abbr> </span>
  • 19. Microformats as an API
  • 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. 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. Design URLs for maximum clarity & discoverability? http://webdd.backnetwork.com/ people/person.aspx?person=glennjones http://webdd.backnetwork.com/ person/glennjones Describe logical objects not physical file paths Remove hierarchies where possible
  • 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. URLs have semantic importance <a href=quot;http://webdd.backnetwork.com/tag/dog/quot; rel=quot;tagquot;>Fish</a> It’s a quot;dogquot; not a quot; fish quot;
  • 25. http://webdd.backnetwork.com/tag/creative backnetwork.tags.getList( “creative”) URLs – that look and act like method calls
  • 26. Using HTTP Verbs that work GET POST Read Create Update http://webdd.backnetwork.com/people/ Create http://webdd.backnetwork.com/person/glennjones Update
  • 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. APIs are not just about the code
  • 29. oblivious development by planting seeds vs the conscious development of an interface
  • 30. Can you develop a Microformats API YES
  • 31. Simplicity gives you lower barrier to entry more chance of traction
  • 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. Thank You glennjones.net Attribution. You must attribute the work in the manner specified by the author or licensor. http://creativecommons.org/licenses/by/2.5/