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= "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. 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. 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="http://creativecommons.org/licenses/by-nc-
sa/2.5/" rel="license">
Some rights reserved
</a>

9. rel-tag
<a href="http://technorati.com/tag/webdd"
rel="tag">WebDD</a>
<ul>
<li><a href="http://technorati.com/tag/design"
rel="tag">Design</a></li>
<li><a href="http://technorati.com/tag/development"
rel="tag">Development</a></li>
</ul>

10. XFN (Xhtml Friends Network)
<ul>
<li>
<a href="http://jameswragg.com"
rel="friend met co-worker colleague">
James Wragg</a>
</li>
</ul>

12. 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="http://technorati.com/tag/dconstruct06"
rel="tag">dconstruct06</a></li>

13. 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>

14. Multiple Microformats in
Combination – hCard & XFN
<ul>
<li class="vcard">
<a class="fn n url" href="http://jameswragg.com"
rel="friend met co-worker colleague">
<span class="firstname">James</span> <span
class="givenname">Wragg</span></a>
</li>
</ul>

15. Implied Relationships
<a href="http://jameswragg.com"
rel="friend met co-worker colleague">
James Wragg</a>
<p id="footer">Copyright &copy;
<address>
<a rel="me"
href="http://www.glennjones.net/about">Glenn
Jones</a>
</address>
<p>

16. Operator
Discovery & Extraction

19. search.creativecommons.org
Search Engines

20. It’s your data

25. <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>

26. Microformats as an API

27. 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

28. 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

29. 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

30. 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

31. URLs have semantic importance
<a href="http://webdd.backnetwork.com/tag/dog/"
rel="tag">Fish</a>
It’s a "dog" not a " fish "

33. http://webdd.backnetwork.com/tag/creative
backnetwork.tags.getList( “creative”)
URLs – that look and act like
method calls

34. Using HTTP Verbs that work
GET POST
Read Create Update
http://webdd.backnetwork.com/people/ Create
http://webdd.backnetwork.com/person/glennjones Update

35. Is this just not REST?
(Representational State Transfer)
• URLs clarity & discoverability
• Uses HTTP Verbs GET, POST, PUT, DELETE
• Deal with the concept of resources

36. APIs are not just about the code

37. oblivious development by
planting seeds
vs
the conscious development
of an interface

38. Can you develop a
Microformats API
YES

39. Simplicity gives you
lower barrier to entry
more chance of traction

40. 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

41. 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/