Microformats
           HTML to API

Glenn Jones
WebDD, 3 Feb 2007, Reading UK
Contacts      Relationships
  Reviews
              Licensing
Events
                    Tagging
     Bookmarks
          ...
HTML is mostly a description of
    language not content
<div id= quot;column1quot; >
<h1>About Glenn Jones</h1>
<p>
I am ...
Microformats Contact - hCard
<div id= quot;column1quot; class=quot;vcardquot; >
<h1>About
<span class= quot;fnquot; >Glenn...
Build on pre-existing
        pattern or standards
BEGIN:VCARD
VERSION:2.1
N:Glenn Jones
FN:Glenn Jones
ORG:Madgex
TITLE:C...
Attributes used in Microformats

 Class
 “for general purpose processing by user agents”

 Rel
 “describes the relationshi...
Elemental Microformats
 An elemental microformat is a minimal solution to a
single problem, built from standard XHTML elem...
rel-license

<a href=quot;http://creativecommons.org/licenses/by-nc-
sa/2.5/quot; rel=quot;licensequot;>
Some rights reser...
rel-tag

<a href=quot;http://technorati.com/tag/webddquot;
rel=quot;tagquot;>WebDD</a>

<ul>
<li><a href=quot;http://techn...
XFN (Xhtml Friends Network)

<ul>
<li>
<a href=quot;http://jameswragg.comquot;
rel=quot;friend met co-worker colleaguequot...
hReview - Review
<div class=quot;hreviewquot;>
<abbr class=quot;ratingquot; title=quot;5quot;>5 of 5</abbr>
<span class=qu...
hCalendar - Event

<div class=quot;veventquot;>
<h1 class=quot;summaryquot;>WebDD</h1>
<p class=quot;descriptionquot;>A fr...
Multiple Microformats in
    Combination – hCard & XFN

<ul>
<li class=quot;vcardquot;>
<a class=quot;fn n urlquot; href=q...
Implied Relationships
<a href=quot;http://jameswragg.comquot;
rel=quot;friend met co-worker colleaguequot;>
James Wragg</a...
Operator




Discovery & Extraction
search.creativecommons.org




      Search Engines
It’s your data
<span class=quot;location vcardquot;> <span class=quot;fn
orgquot;>Paradise</span>, <abbr class=quot;geo adrquot; title=qu...
Microformats as an API
But that's the beauty of it! Something I'm
calling “oblivious development”. I've
always looked at microformats as
“plantin...
By definition microformats are
simple blocks data embedded across
  multiple pages with-in a web site


To create an API w...
Design URLs for maximum
    clarity & discoverability?
      http://webdd.backnetwork.com/
   people/person.aspx?person=gl...
Designing URLs into a schema
           to act as an API
/tags
/people
/tag/creative
/person/glennjones
/person/glennjones...
URLs have semantic importance

<a href=quot;http://webdd.backnetwork.com/tag/dog/quot;
rel=quot;tagquot;>Fish</a>

       ...
http://webdd.backnetwork.com/tag/creative
   backnetwork.tags.getList( “creative”)




  URLs – that look and act like
   ...
Using HTTP Verbs that work

          GET                    POST




          Read             Create       Update



  ...
Is this just not REST?
             (Representational State Transfer)




• URLs clarity & discoverability

• Uses HTTP Ve...
APIs are not just about the code
oblivious development by
      planting seeds

           vs
the conscious development
      of an interface
Can you develop a
Microformats API

      YES
Simplicity gives you

 lower barrier to entry
more chance of traction
Microformats, the
     AK-47 of the web
  I think history has shown us over and over again
that the most successful “thing...
Thank You
glennjones.net

 Attribution. You must attribute the work in the manner
           specified by the author or li...
Microformats HTML to API
Microformats HTML to API
Microformats HTML to API
Microformats HTML to API
Microformats HTML to API
Microformats HTML to API
Microformats HTML to API
Microformats HTML to API
Upcoming SlideShare
Loading in...5
×

Microformats HTML to API

1,130

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,130
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
15
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Microformats HTML to API

  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= 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. 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. 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. http://microformats.org/
  8. 8. rel-license <a href=quot;http://creativecommons.org/licenses/by-nc- sa/2.5/quot; rel=quot;licensequot;> Some rights reserved </a>
  9. 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. 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. 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. 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. 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. 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. 15. Operator Discovery & Extraction
  16. 16. search.creativecommons.org Search Engines
  17. 17. It’s your data
  18. 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. 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? 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. 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=quot;http://webdd.backnetwork.com/tag/dog/quot; rel=quot;tagquot;>Fish</a> It’s a quot;dogquot; not a quot; fish quot;
  25. 25. http://webdd.backnetwork.com/tag/creative backnetwork.tags.getList( “creative”) URLs – that look and act like method calls
  26. 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. 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 glennjones.net Attribution. You must attribute the work in the manner specified by the author or licensor. http://creativecommons.org/licenses/by/2.5/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×