Microformats HTML to API
-
Upload
elliando-dias -
Category
Technology
-
view
1.110 -
download
1
Transcript of 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 © <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/