microformats

41
Microformats HTML to API Glenn Jones WebDD, 3 Feb 2007, Reading UK

Upload: srini-rajaram

Post on 17-May-2015

929 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: Microformats

MicroformatsHTML to API

Glenn JonesWebDD, 3 Feb 2007, Reading UK

Page 2: Microformats

Voting

Contacts

Reviews

Events

Articles

Bookmarks

Relationships

Licensing

Tagging

Posts

Page 3: Microformats

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>

Page 4: Microformats

<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

Page 5: Microformats

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…

Page 6: Microformats

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”

Page 7: Microformats

Elemental MicroformatsAn elemental microformat is a minimal solution to a

single problem, built from standard XHTML elements.

http://microformats.org/

Page 8: Microformats

rel-license

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

Page 9: Microformats

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>

Page 10: Microformats

XFN (Xhtml Friends Network)

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

Page 11: Microformats
Page 12: Microformats

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

Page 13: Microformats

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>

Page 14: Microformats

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>

Page 15: Microformats

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>

Page 16: Microformats

Operator

Discovery & Extraction

Page 17: Microformats
Page 18: Microformats
Page 19: Microformats

search.creativecommons.org

Search Engines

Page 20: Microformats

It’s your data

Page 21: Microformats
Page 22: Microformats
Page 23: Microformats
Page 24: Microformats
Page 25: Microformats

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

Page 26: Microformats

Microformats as an API

Page 27: Microformats

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

Page 28: Microformats

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

Page 29: Microformats

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

Page 30: Microformats

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

Page 31: Microformats

URLs have semantic importance

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

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

Page 32: Microformats
Page 33: Microformats

URLs – that look and act like method calls

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

backnetwork.tags.getList( “creative”)

Page 34: Microformats

Using HTTP Verbs that work

POSTGET

Read Create Update

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

Page 35: Microformats

Is this just not REST?(Representational State Transfer)

• URLs clarity & discoverability

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

Page 36: Microformats

APIs are not just about the code

Page 37: Microformats

oblivious development by planting seeds

vs

the conscious development of an interface

Page 38: Microformats

Can you develop a Microformats API

YES

Page 39: Microformats

Simplicity gives you

lower barrier to entrymore chance of traction

Page 40: Microformats

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

Page 41: Microformats

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/