microformats html to api

MicroformatsHTML to API

Glenn JonesWebDD, 3 Feb 2007, Reading UK

Voting

Contacts

Reviews

Events

Articles

Bookmarks

Relationships

Licensing

Tagging

Posts

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>

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

Microformats Contact - hCard

Build on pre-existing pattern or standards

BEGIN:VCARDVERSION:2.1N:Glenn JonesFN:Glenn JonesORG:MadgexTITLE:Creative DirectorTEL;WORK;VOICE:+44 (0) 1273 775100ADR;POSTAL;ENCODING=QUOTED-PRINTABLE:;;Suite1=0AClarence House;30-31 North Street;Brigthon;BN1 1EB;United Kingdom…

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”

Elemental MicroformatsAn elemental microformat is a minimal solution to a

single problem, built from standard XHTML elements.

http://microformats.org/

rel-license

<a href="http://creativecommons.org/licenses/by-nc-sa/2.5/" rel="license">Some rights reserved</a>

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>

XFN (Xhtml Friends Network)

<ul><li><a href="http://jameswragg.com" rel="friend met co-worker colleague">James Wragg</a></li></ul>

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 barrgreat…

…<ul class="tags"> <li><a href="http://technorati.com/tag/dconstruct06" rel="tag">dconstruct06</a></li>

l h f h h ffb

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>

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>

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>

Operator

Discovery & Extraction

search.creativecommons.org

Search Engines

It’s your data

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

Microformats as an API

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

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

Design URLs for maximumclarity & discoverability?

http://webdd.backnetwork.com/people/person.aspx?person=glennjones

http://webdd.backnetwork.com/person/glennjones

Describe logical objects not physical file pathsRemove hierarchies where possible

Designing URLs into a schemato act as an API

/tags/people

/tag/creative/person/glennjones

/person/glennjones/tags/person/glennjones/tag/creative }Faceted

Structures

/tags/26/tags/?start=26&pagesize=25

URLs have semantic importance

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

It’s a "dog" not a " fish "

URLs – that look and act like method calls

http://webdd.backnetwork.com/tag/creative

backnetwork.tags.getList( “creative”)

Using HTTP Verbs that work

POSTGET

Read Create Update

http://webdd.backnetwork.com/people/ Createhttp://webdd.backnetwork.com/person/glennjones Update

Is this just not REST?(Representational State Transfer)

• URLs clarity & discoverability

• Uses HTTP Verbs GET, POST, PUT, DELETE• Deal with the concept of resources

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 entrymore chance of traction

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.

Microformats, the AK-47 of the web

Pat Ramsey

Thank You glennjones.net

Attribution. You must attribute the work in the mannerspecified by the author or licensor.

http://creativecommons.org/licenses/by/2.5/