Your SlideShare is downloading. ×
microformats  more than just promise more than just promise john allsopp - westciv web 2.0 expo Creative Commons Attributi...
part I <ul><li>web 2.0? really? </li></ul>
<ul><li>browsers 1.0 </li></ul>
browsers 1.0 <ul><li>browsers are still little more than printers to the screen </li></ul><ul><li>what can we do with the ...
imagine <ul><li>being able to grab any contact details on a page, and add them to your address book </li></ul>
 
imagine <ul><li>or being able to grab event details from a page, and add them to your calendar software </li></ul>
 
imagine <ul><li>or display the location of a person, place, company, on an online map </li></ul>
 
browsers 2.0 <ul><li>Microformats enable this today - through extensions to Firefox like Operator </li></ul>
browsers 2.0 <ul><li>Microformats change the paradigm of browsers from information printers to “ information brokers ” (Re...
<ul><li>search 1.0 </li></ul>
<ul><li>We decide the general kind of page we want to read about </li></ul><ul><li>we search for one or more related keywo...
search 2.0 <ul><li>what’s good </li></ul><ul><li>what sucks </li></ul><ul><li>what’s going on </li></ul><ul><li>who is tha...
RDF versus ufs
RDF versus ufs
 
enablers <ul><li>by adding richer more meaningful semantics to web content, microformats enable much more intelligent sear...
part II <ul><li>know your microformats </li></ul>
XHTML Friends Network (XFN)
XFN <ul><li>What is it? </li></ul><ul><li>for marking up common professional and personal relationships with other people ...
XFN <ul><li>How do I use it? </li></ul><ul><li>In a link to a blog or other site associated with a person, add one or more...
XFN <ul><li><a href=” http://tantek.com ”  rel=”colleague met friend” >Tantek Çelik</a> </li></ul><ul><li>Signifies that T...
XFN <ul><li>Provides a set of possible values or “controlled vocabulary” for describing relationships. </li></ul><ul><li>s...
XFN <ul><li>XFN Creator  -  http://gmpg.org/xfn/creator </li></ul><ul><li>WordPress  - built into “add links” </li></ul><u...
Styling XFN <ul><li>microformats provide a framework for designers using CSS </li></ul>
XFN  + CSS <ul><li>The CSS attribute selector  </li></ul><ul><li>a[rel~=&quot;met&quot;}:after {  </li></ul><ul><ul><ul><l...
XFN  + CSS <ul><li>a[rel=&quot;friend&quot;] {  </li></ul><ul><li>background-image: url(...);  </li></ul><ul><li>backgroun...
XFN  + CSS <ul><li>Anyone see a problem? </li></ul>
XFN  + CSS <ul><li>It doesn’t work in IE6 </li></ul>
hCard
hCard <ul><li>What is it? </li></ul><ul><li>simple, open, distributed format for representing people, companies, organizat...
hCard <ul><li>What is it? </li></ul><ul><li>1:1 representation of the properties and values of the vCard standard </li></ul>
hCard <ul><li>How do you use it? </li></ul><ul><li>Add the  semantics  of vCard using the  class design pattern . </li></u...
hCard <ul><li><div> </li></ul><ul><li><img src=&quot;img/thedude.jpg&quot; alt=&quot;The Dude&quot; /> </li></ul><ul><li><...
hCard <ul><li><div  class=”vcard” > </li></ul><ul><li><img src=&quot;img/thedude.jpg&quot; alt=&quot;The Dude&quot; /> </l...
hCard <ul><li><div class=&quot;vcard&quot;> </li></ul><ul><li><img src=&quot;img/thedude.jpg&quot; alt=&quot;The Dude&quot...
hCard <ul><li><div class=&quot;vcard&quot;> </li></ul><ul><li><img src=&quot;img/thedude.jpg&quot; alt=&quot;The Dude&quot...
hCard <ul><li><div class=&quot;vcard&quot;> </li></ul><ul><li><img src=&quot;img/thedude.jpg&quot; alt=&quot;The Dude&quot...
hCard <ul><li><div class=&quot;vcard&quot;> </li></ul><ul><li><img src=&quot;img/thedude.jpg&quot; ...  class=   &quot; ph...
hCard <ul><li><div class=&quot;vcard&quot;> </li></ul><ul><li><img src=&quot;img/thedude.jpg&quot; ... class= &quot;photo&...
hCard <ul><li><div class=&quot;vcard&quot;> </li></ul><ul><li><img src=&quot;img/thedude.jpg&quot; ... class= &quot;photo&...
hCard <ul><li><div class=&quot;vcard&quot;> </li></ul><ul><li><img src=&quot;img/thedude.jpg&quot; ... class= &quot;photo&...
hCard <ul><li><div class=&quot;vcard&quot;> </li></ul><ul><li><img src=&quot;img/thedude.jpg&quot; ... class= &quot;photo&...
hCard <ul><li><div class=&quot;vcard&quot;> </li></ul><ul><li><img src=&quot;img/thedude.jpg&quot; ... class= &quot;photo&...
hCard <ul><li><div class=&quot;vcard&quot;> </li></ul><ul><li><img src=&quot;img/thedude.jpg&quot; ... class= &quot;photo&...
hCard <ul><li>all sounds a bit hard? </li></ul><ul><li>hCard Creator </li></ul><ul><li>Dreamweaver toolbar </li></ul><ul><...
styling hCard with CSS <ul><li>Every hCard provides a context for styling through the root element </li></ul><ul><li>We ca...
styling hCard with CSS courtesy Dan Cederholm
styling hCard with CSS <ul><li>div.vcard  {  </li></ul><ul><li>width: 26em; </li></ul><ul><li>margin: 0 auto;  </li></ul><...
styling hCard with CSS courtesy Dan Cederholm
styling hCard with CSS <ul><li>div.vcard img.photo {  </li></ul><ul><li>float: right;  </li></ul><ul><li>padding: 2px;  </...
styling hCard with CSS courtesy Dan Cederholm
styling hCard with CSS <ul><li>div.vcard h2  {  </li></ul><ul><li>margin: 0 105px 1em 0;  </li></ul><ul><li>padding: 6px 0...
styling hCard with CSS courtesy Dan Cederholm
styling hCard with CSS <ul><li>/* heading labels */  </li></ul><ul><li>div.vcard h3 { </li></ul><ul><li>float: left;   </l...
styling hCard with CSS courtesy Dan Cederholm
styling hCard with CSS <ul><li>div.vcard div.adr {  </li></ul><ul><li>background: url(img/icon-adr.gif) no-repeat 1px 3px;...
styling hCard with CSS courtesy Dan Cederholm
hCard for Designers <ul><li>Microformats provide structured data that designers can use for styling with CSS </li></ul>
hCalendar
hCalendar <ul><li>What is it? </li></ul><ul><li>simple, open, distributed calendaring and events format, based on the iCal...
hCalendar <ul><li>How do you use it? </li></ul><ul><li>Add the  semantics  of iCalendar using the  class design pattern . ...
hReview
hReview <ul><li>What is it? </li></ul><ul><li>simple, open, distributed format, suitable for embedding reviews (of product...
hReview <ul><li>How do you use it? </li></ul><ul><li>Add common semantics for reviews using the class design pattern. </li...
hReview <ul><li>Reviews commonly have </li></ul><ul><li>item reviewed </li></ul><ul><li>date reviewed </li></ul><ul><li>re...
but wait there’s more <ul><li>Yahoo! Tech and Local mark up millions of reviews (editorial and user generated) using hResu...
but wait there’s more <ul><li>hAtom  is the semantics of Atom in HTML </li></ul><ul><li>With it your page can be your feed...
but wait there’s more <ul><li>hResume  is a simple way of marking up Resumes </li></ul><ul><li>LinkedIn publishes every pu...
but wait there’s more <ul><li>with many more microformats under development, or waiting for you to find out about, or even...
Part III <ul><li>services using microformats </li></ul>
Technorati microformats search Indexes microformatted content supports hCard, hCalendar, hReview
Pingerati Notify Pingerati of new or changed microformatted content Other services can receive updates when content changes
aggregators <ul><li>Edgio aggregates classifieds listing from across the web, including the hListing draft microformat </l...
Part IV <ul><li>publishers using microformats </li></ul>
Flickr Geo microformat
Yahoo! Tech hReview, hCard
Upcoming hCalendar, hCard
LinkedIN hCard, hResume
Ma.gnolia every page is an hAtom feed every bookmark is an hAtom entry uses rel-tag for tagging uses hCard for contacts th...
Part V <ul><li>what you can do right now </li></ul>
what you can do right now <ul><li>Markup your contact details (company, individuals) using  hCard </li></ul>
what you can do right now <ul><li>Mark up news using  hAtom </li></ul>
what you can do right now <ul><li>Markup events you run or attend using  hCalendar   </li></ul>
what you can do right now <ul><li>use  rel-tag  for tagging content on your site </li></ul>
what you can do right now <ul><li>markup your locations using GEO </li></ul>
More? <ul><li>microformats.org </li></ul>
the book
Thank you <ul><li>[email_address] </li></ul><ul><li>http://microformatique.com </li></ul>
Upcoming SlideShare
Loading in...5
×

Microformats at Web 2.0 Expo April 2007

6,459

Published on

A thorough, lively introduction to the motivations for and uses of microformats, with examples.

Published in: Economy & Finance, Technology
1 Comment
38 Likes
Statistics
Notes
  • It would be great if you could enable the feature for this slideshow, to allow users to download your slideshow. You have already marked it as a CC Non-commersial Share alike. So it would be great if you would allow us to download it so we can share it.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
6,459
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
1
Likes
38
Embeds 0
No embeds

No notes for slide

Transcript of "Microformats at Web 2.0 Expo April 2007"

  1. 1. microformats more than just promise more than just promise john allsopp - westciv web 2.0 expo Creative Commons Attribution-Noncommercial-Share Alike 3.0 License
  2. 2. part I <ul><li>web 2.0? really? </li></ul>
  3. 3. <ul><li>browsers 1.0 </li></ul>
  4. 4. browsers 1.0 <ul><li>browsers are still little more than printers to the screen </li></ul><ul><li>what can we do with the data on a page other than read it? </li></ul>
  5. 5. imagine <ul><li>being able to grab any contact details on a page, and add them to your address book </li></ul>
  6. 7. imagine <ul><li>or being able to grab event details from a page, and add them to your calendar software </li></ul>
  7. 9. imagine <ul><li>or display the location of a person, place, company, on an online map </li></ul>
  8. 11. browsers 2.0 <ul><li>Microformats enable this today - through extensions to Firefox like Operator </li></ul>
  9. 12. browsers 2.0 <ul><li>Microformats change the paradigm of browsers from information printers to “ information brokers ” (Read/Write Web) or “ information switchboards ” (Alex Faaborg, Mozilla) </li></ul>
  10. 13. <ul><li>search 1.0 </li></ul>
  11. 14. <ul><li>We decide the general kind of page we want to read about </li></ul><ul><li>we search for one or more related keywords </li></ul><ul><li>the search engine returns a list of matches </li></ul><ul><li>we decide which of these matches to read </li></ul><ul><li>we read the page </li></ul>
  12. 15. search 2.0 <ul><li>what’s good </li></ul><ul><li>what sucks </li></ul><ul><li>what’s going on </li></ul><ul><li>who is that? </li></ul>
  13. 16. RDF versus ufs
  14. 17. RDF versus ufs
  15. 19. enablers <ul><li>by adding richer more meaningful semantics to web content, microformats enable much more intelligent search </li></ul>
  16. 20. part II <ul><li>know your microformats </li></ul>
  17. 21. XHTML Friends Network (XFN)
  18. 22. XFN <ul><li>What is it? </li></ul><ul><li>for marking up common professional and personal relationships with other people </li></ul>
  19. 23. XFN <ul><li>How do I use it? </li></ul><ul><li>In a link to a blog or other site associated with a person, add one or more of the XFN keywords as the value of the rel attribute </li></ul>
  20. 24. XFN <ul><li><a href=” http://tantek.com ” rel=”colleague met friend” >Tantek Çelik</a> </li></ul><ul><li>Signifies that Tantek is a friend, a colleague and that I’ve met him. </li></ul>
  21. 25. XFN <ul><li>Provides a set of possible values or “controlled vocabulary” for describing relationships. </li></ul><ul><li>several categories, including physical, professional, family, romantic </li></ul>
  22. 26. XFN <ul><li>XFN Creator - http://gmpg.org/xfn/creator </li></ul><ul><li>WordPress - built into “add links” </li></ul><ul><li>Plug-ins for Bloxsom and MoveableType </li></ul><ul><li>DreamWeaver toolbar from WaSP </li></ul>
  23. 27. Styling XFN <ul><li>microformats provide a framework for designers using CSS </li></ul>
  24. 28. XFN + CSS <ul><li>The CSS attribute selector </li></ul><ul><li>a[rel~=&quot;met&quot;}:after { </li></ul><ul><ul><ul><li>content: '*'; </li></ul></ul></ul><ul><li>} </li></ul>Tantek Çelik *
  25. 29. XFN + CSS <ul><li>a[rel=&quot;friend&quot;] { </li></ul><ul><li>background-image: url(...); </li></ul><ul><li>background-repeat: no-repeat; </li></ul><ul><li>background-position: center left; </li></ul><ul><li>padding-left: 32px; </li></ul><ul><li>color: #a8c90b; </li></ul><ul><li>} </li></ul>Tantek Çelik *
  26. 30. XFN + CSS <ul><li>Anyone see a problem? </li></ul>
  27. 31. XFN + CSS <ul><li>It doesn’t work in IE6 </li></ul>
  28. 32. hCard
  29. 33. hCard <ul><li>What is it? </li></ul><ul><li>simple, open, distributed format for representing people, companies, organizations, and places </li></ul><ul><li>... </li></ul>
  30. 34. hCard <ul><li>What is it? </li></ul><ul><li>1:1 representation of the properties and values of the vCard standard </li></ul>
  31. 35. hCard <ul><li>How do you use it? </li></ul><ul><li>Add the semantics of vCard using the class design pattern . </li></ul><ul><li>Adds vCard’s field names as class values on any HTML element </li></ul>
  32. 36. hCard <ul><li><div> </li></ul><ul><li><img src=&quot;img/thedude.jpg&quot; alt=&quot;The Dude&quot; /> </li></ul><ul><li><h2> </li></ul><ul><li><a href=&quot; http://www.lebowskifest.com &quot;> </li></ul><ul><li><span>Jeffrey</span> </li></ul><ul><li><span>Lebowski</span> </li></ul><ul><li></a> </li></ul><ul><li></h2> </li></ul><ul><li><h3>address</h3> </li></ul><ul><li><div> </li></ul><ul><li><div>123 Palm Drive</div> </li></ul><ul><li><span>Los Angeles</span>, </li></ul><ul><li><span>CA</span>, </li></ul><ul><li><span>123456</span> </li></ul><ul><li></div> </li></ul><ul><li><h3>phone</h3> </li></ul><ul><li><div>+1 (123) 456-7899</div> </li></ul><ul><li><h3>email</h3> </li></ul><ul><li><a href=&quot;mailto...&quot;>thedude@urban...com</a> </li></ul><ul><li></div> </li></ul>compound microformats have a root element. hCard root elements have the class value “vcard”
  33. 37. hCard <ul><li><div class=”vcard” > </li></ul><ul><li><img src=&quot;img/thedude.jpg&quot; alt=&quot;The Dude&quot; /> </li></ul><ul><li><h2> </li></ul><ul><li><a href=&quot; http://www.lebowskifest.com &quot;> </li></ul><ul><li><span>Jeffrey</span> </li></ul><ul><li><span>Lebowski</span> </li></ul><ul><li></a> </li></ul><ul><li></h2> </li></ul><ul><li><h3>address</h3> </li></ul><ul><li><div> </li></ul><ul><li><div>123 Palm Drive</div> </li></ul><ul><li><span>Los Angeles</span>, </li></ul><ul><li><span>CA</span>, </li></ul><ul><li><span>123456</span> </li></ul><ul><li></div> </li></ul><ul><li><h3>phone</h3> </li></ul><ul><li><div>+1 (123) 456-7899</div> </li></ul><ul><li><h3>email</h3> </li></ul><ul><li><a href=&quot;mailto...&quot;>thedude@urban...com</a> </li></ul><ul><li></div> </li></ul>
  34. 38. hCard <ul><li><div class=&quot;vcard&quot;> </li></ul><ul><li><img src=&quot;img/thedude.jpg&quot; alt=&quot;The Dude&quot; /> </li></ul><ul><li><h2> </li></ul><ul><li><a href=&quot; http://www.lebowskifest.com &quot;> </li></ul><ul><li><span>Jeffrey</span> </li></ul><ul><li><span>Lebowski</span> </li></ul><ul><li></a> </li></ul><ul><li></h2> </li></ul><ul><li><h3>address</h3> </li></ul><ul><li><div> </li></ul><ul><li><div>123 Palm Drive</div> </li></ul><ul><li><span>Los Angeles</span>, </li></ul><ul><li><span>CA</span>, </li></ul><ul><li><span>123456</span> </li></ul><ul><li></div> </li></ul><ul><li><h3>phone</h3> </li></ul><ul><li><div>+1 (123) 456-7899</div> </li></ul><ul><li><h3>email</h3> </li></ul><ul><li><a href=&quot; mailto ...&quot;>thedude@urban...com</a> </li></ul><ul><li></div> </li></ul>Names Formatted names and (optional) structured names
  35. 39. hCard <ul><li><div class=&quot;vcard&quot;> </li></ul><ul><li><img src=&quot;img/thedude.jpg&quot; alt=&quot;The Dude&quot; /> </li></ul><ul><li><h2> </li></ul><ul><li><a class= &quot;fn n&quot; href=&quot; http://www.....com &quot;> </li></ul><ul><li><span class=&quot;given-name&quot; >Jeffrey</span> </li></ul><ul><li><span class=&quot;family-name&quot; >Lebowski</span> </li></ul><ul><li></a> </li></ul><ul><li></h2> </li></ul><ul><li><h3>address</h3> </li></ul><ul><li><div> </li></ul><ul><li><div>123 Palm Drive</div> </li></ul><ul><li><span>Los Angeles</span>, </li></ul><ul><li><span>CA</span>, </li></ul><ul><li><span>123456</span> </li></ul><ul><li></div> </li></ul><ul><li><h3>phone</h3> </li></ul><ul><li><div>+1 (123) 456-7899</div> </li></ul><ul><li><h3>email</h3> </li></ul><ul><li><a href=&quot; mailto ...&quot;>thedude@urban...com</a> </li></ul><ul><li></div> </li></ul>
  36. 40. hCard <ul><li><div class=&quot;vcard&quot;> </li></ul><ul><li><img src=&quot;img/thedude.jpg&quot; alt=&quot;The Dude&quot; /> </li></ul><ul><li><h2> </li></ul><ul><li><a class= &quot;fn n&quot; href=&quot; http://www.....com &quot;> </li></ul><ul><li><span class=&quot;given-name&quot;>Jeffrey</span> </li></ul><ul><li><span class=&quot;family-name&quot;>Lebowski</span> </li></ul><ul><li></a> </li></ul><ul><li></h2> </li></ul><ul><li><h3>address</h3> </li></ul><ul><li><div> </li></ul><ul><li><div>123 Palm Drive</div> </li></ul><ul><li><span>Los Angeles</span>, </li></ul><ul><li><span>CA</span>, </li></ul><ul><li><span>123456</span> </li></ul><ul><li></div> </li></ul><ul><li><h3>phone</h3> </li></ul><ul><li><div>+1 (123) 456-7899</div> </li></ul><ul><li><h3>email</h3> </li></ul><ul><li><a href=&quot; mailto ...&quot;>thedude@urban...com</a> </li></ul><ul><li></div> </li></ul>URLs and Photos class=”photo” class=”url”
  37. 41. hCard <ul><li><div class=&quot;vcard&quot;> </li></ul><ul><li><img src=&quot;img/thedude.jpg&quot; ... class= &quot; photo &quot; /> </li></ul><ul><li><h2> </li></ul><ul><li><a class= &quot;fn n url &quot; href=&quot; http://www.....com &quot;> </li></ul><ul><li><span class=&quot;given-name&quot;>Jeffrey</span> </li></ul><ul><li><span class=&quot;family-name&quot;>Lebowski</span> </li></ul><ul><li></a> </li></ul><ul><li></h2> </li></ul><ul><li><h3>address</h3> </li></ul><ul><li><div> </li></ul><ul><li><div>123 Palm Drive</div> </li></ul><ul><li><span>Los Angeles</span>, </li></ul><ul><li><span>CA</span>, </li></ul><ul><li><span>123456</span> </li></ul><ul><li></div> </li></ul><ul><li><h3>phone</h3> </li></ul><ul><li><div>+1 (123) 456-7899</div> </li></ul><ul><li><h3>email</h3> </li></ul><ul><li><a href=&quot; mailto ...&quot;>thedude@urban...com</a> </li></ul><ul><li></div> </li></ul>
  38. 42. hCard <ul><li><div class=&quot;vcard&quot;> </li></ul><ul><li><img src=&quot;img/thedude.jpg&quot; ... class= &quot;photo&quot; /> </li></ul><ul><li><h2> </li></ul><ul><li><a class= &quot;fn n url&quot; href=&quot; http://www.....com &quot;> </li></ul><ul><li><span class=&quot;given-name&quot;>Jeffrey</span> </li></ul><ul><li><span class=&quot;family-name&quot;>Lebowski</span> </li></ul><ul><li></a> </li></ul><ul><li></h2> </li></ul><ul><li><h3>address</h3> </li></ul><ul><li><div> </li></ul><ul><li><div>123 Palm Drive</div> </li></ul><ul><li><span>Los Angeles</span>, </li></ul><ul><li><span>CA</span>, </li></ul><ul><li><span>123456</span> </li></ul><ul><li></div> </li></ul><ul><li><h3>phone</h3> </li></ul><ul><li><div>+1 (123) 456-7899</div> </li></ul><ul><li><h3>email</h3> </li></ul><ul><li><a href=&quot; mailto ...&quot;>thedude@urban...com</a> </li></ul><ul><li></div> </li></ul>Addresses street-address locality region postal-code country-name
  39. 43. hCard <ul><li><div class=&quot;vcard&quot;> </li></ul><ul><li><img src=&quot;img/thedude.jpg&quot; ... class= &quot;photo&quot; /> </li></ul><ul><li><h2> </li></ul><ul><li><a class= &quot;fn n url&quot; href=&quot; http://www.....com &quot;> </li></ul><ul><li><span class=&quot;given-name&quot;>Jeffrey</span> </li></ul><ul><li><span class=&quot;family-name&quot;>Lebowski</span> </li></ul><ul><li></a> </li></ul><ul><li></h2> </li></ul><ul><li><h3>address</h3> </li></ul><ul><ul><ul><ul><li><div class=&quot;adr&quot; > </li></ul></ul></ul></ul><ul><li><div class=&quot;street-address&quot; >123 Palm Drive</div> </li></ul><ul><li><span class=&quot;locality&quot; >Los Angeles</span>, </li></ul><ul><li><span class=&quot;region&quot; >CA</span>, </li></ul><ul><li><span class=&quot;postal-code&quot; >123456</span> </li></ul><ul><li></div> </li></ul><ul><li><h3>phone</h3> </li></ul><ul><li><div>+1 (123) 456-7899</div> </li></ul><ul><li><h3>email</h3> </li></ul><ul><li><a href=&quot; mailto ...&quot;>thedude@urban...com</a> </li></ul><ul><li></div> </li></ul>
  40. 44. hCard <ul><li><div class=&quot;vcard&quot;> </li></ul><ul><li><img src=&quot;img/thedude.jpg&quot; ... class= &quot;photo&quot; /> </li></ul><ul><li><h2> </li></ul><ul><li><a class= &quot;fn n url&quot; href=&quot; http://www.....com &quot;> </li></ul><ul><li><span class=&quot;given-name&quot;>Jeffrey</span> </li></ul><ul><li><span class=&quot;family-name&quot;>Lebowski</span> </li></ul><ul><li></a> </li></ul><ul><li></h2> </li></ul><ul><li><h3>address</h3> </li></ul><ul><ul><ul><ul><li><div class=&quot;adr&quot;> </li></ul></ul></ul></ul><ul><li><div class=&quot;street-address&quot;>123 Palm Drive</div> </li></ul><ul><li><span class=&quot;locality&quot;>Los Angeles</span>, </li></ul><ul><li><span class=&quot;region&quot;>CA</span>, </li></ul><ul><li><span class=&quot;postal-code&quot;>123456</span> </li></ul><ul><li></div> </li></ul><ul><li><h3>phone</h3> </li></ul><ul><li><div>+1 (123) 456-7899</div> </li></ul><ul><li><h3>email</h3> </li></ul><ul><li><a href=&quot; mailto ...&quot;>thedude@urban...com</a> </li></ul><ul><li></div> </li></ul>
  41. 45. hCard <ul><li><div class=&quot;vcard&quot;> </li></ul><ul><li><img src=&quot;img/thedude.jpg&quot; ... class= &quot;photo&quot; /> </li></ul><ul><li><h2> </li></ul><ul><li><a class= &quot;fn n url&quot; href=&quot; http://www.....com &quot;> </li></ul><ul><li><span class=&quot;given-name&quot;>Jeffrey</span> </li></ul><ul><li><span class=&quot;family-name&quot;>Lebowski</span> </li></ul><ul><li></a> </li></ul><ul><li></h2> </li></ul><ul><li><h3>address</h3> </li></ul><ul><li><div class=&quot;adr&quot;> </li></ul><ul><li><div class=&quot;street-address&quot;>123 Palm Drive</div> </li></ul><ul><li><span class=&quot;locality&quot;>Los Angeles</span>, </li></ul><ul><li><span class=&quot;region&quot;>CA</span>, </li></ul><ul><li><span class=&quot;postal-code&quot;>123456</span> </li></ul><ul><li></div> </li></ul><ul><li><h3>phone</h3> </li></ul><ul><li><div>+1 (123) 456-7899</div> </li></ul><ul><li><h3>email</h3> </li></ul><ul><li><a href=&quot; mailto ...&quot;>thedude@urban...com</a> </li></ul><ul><li></div> </li></ul>newfangled stuff class=”email” class=”tel”
  42. 46. hCard <ul><li><div class=&quot;vcard&quot;> </li></ul><ul><li><img src=&quot;img/thedude.jpg&quot; ... class= &quot;photo&quot; /> </li></ul><ul><li><h2> </li></ul><ul><li><a class= &quot;fn n url&quot; href=&quot; http://www.....com &quot;> </li></ul><ul><li><span class=&quot;given-name&quot;>Jeffrey</span> </li></ul><ul><li><span class=&quot;family-name&quot;>Lebowski</span> </li></ul><ul><li></a> </li></ul><ul><li></h2> </li></ul><ul><li><h3>address</h3> </li></ul><ul><ul><ul><ul><li><div class=&quot;adr&quot;> </li></ul></ul></ul></ul><ul><li><div class=&quot;street-address&quot;>123 Palm Drive</div> </li></ul><ul><li><span class=&quot;locality&quot;>Los Angeles</span>, </li></ul><ul><li><span class=&quot;region&quot;>CA</span>, </li></ul><ul><li><span class=&quot;postal-code&quot;>123456</span> </li></ul><ul><li></div> </li></ul><ul><li><h3>phone</h3> </li></ul><ul><li><div class=&quot;tel&quot; >+1 (123) 456-7899</div> </li></ul><ul><li><h3>email</h3> </li></ul><ul><li><a class=&quot;email&quot; href=&quot; mailto ...&quot;>...</a> </li></ul><ul><li></div> </li></ul>
  43. 47. hCard <ul><li><div class=&quot;vcard&quot;> </li></ul><ul><li><img src=&quot;img/thedude.jpg&quot; ... class= &quot;photo&quot; /> </li></ul><ul><li><h2> </li></ul><ul><li><a class= &quot;fn n url&quot; href=&quot; http://www.....com &quot;> </li></ul><ul><li><span class=&quot;given-name&quot;>Jeffrey</span> </li></ul><ul><li><span class=&quot;family-name&quot;>Lebowski</span> </li></ul><ul><li></a> </li></ul><ul><li></h2> </li></ul><ul><li><h3>address</h3> </li></ul><ul><ul><ul><ul><li><div class=&quot;adr&quot;> </li></ul></ul></ul></ul><ul><li><div class=&quot;street-address&quot;>123 Palm Drive</div> </li></ul><ul><li><span class=&quot;locality&quot;>Los Angeles</span>, </li></ul><ul><li><span class=&quot;region&quot;>CA</span>, </li></ul><ul><li><span class=&quot;postal-code&quot;>123456</span> </li></ul><ul><li></div> </li></ul><ul><li><h3>phone</h3> </li></ul><ul><li><div class=&quot;tel&quot;>+1 (123) 456-7899</div> </li></ul><ul><li><h3>email</h3> </li></ul><ul><li><a class=&quot;email&quot; href=&quot; mailto ...&quot;>...</a> </li></ul><ul><li></div> </li></ul>
  44. 48. hCard <ul><li>all sounds a bit hard? </li></ul><ul><li>hCard Creator </li></ul><ul><li>Dreamweaver toolbar </li></ul><ul><li>plugins for TextPattern and Wordpress </li></ul>
  45. 49. styling hCard with CSS <ul><li>Every hCard provides a context for styling through the root element </li></ul><ul><li>We can use the .vcard class to select any element inside an hCard with the (much underused) descendent selector </li></ul>
  46. 50. styling hCard with CSS courtesy Dan Cederholm
  47. 51. styling hCard with CSS <ul><li>div.vcard { </li></ul><ul><li>width: 26em; </li></ul><ul><li>margin: 0 auto; </li></ul><ul><li>padding: 2em 2em 3em 2em; </li></ul><ul><li>line-height: 1.5em; </li></ul><ul><li>border-top: 1px solid #fff; </li></ul><ul><ul><li>background: url(img/bg.gif) no-repeat </li></ul></ul><ul><ul><li>bottom right; </li></ul></ul><ul><li>} </li></ul>courtesy Dan Cederholm
  48. 52. styling hCard with CSS courtesy Dan Cederholm
  49. 53. styling hCard with CSS <ul><li>div.vcard img.photo { </li></ul><ul><li>float: right; </li></ul><ul><li>padding: 2px; </li></ul><ul><li>border: 4px double #d3d0c2; </li></ul><ul><li>background: #fff; </li></ul><ul><li>} </li></ul>courtesy Dan Cederholm
  50. 54. styling hCard with CSS courtesy Dan Cederholm
  51. 55. styling hCard with CSS <ul><li>div.vcard h2 { </li></ul><ul><li>margin: 0 105px 1em 0; </li></ul><ul><li>padding: 6px 0 26px 0; </li></ul><ul><li>font-size: 140%; </li></ul><ul><li>font-weight: normal; </li></ul><ul><li>text-align: center; </li></ul><ul><li>color: #933; </li></ul><ul><li>border-top: 1px solid #d3d0c2; </li></ul><ul><li>background : url(img/ornament.gif) no-repeat 50% 100%; </li></ul><ul><li>} </li></ul><ul><li>div.vcard h2 a.url { </li></ul><ul><li>color: #933; </li></ul><ul><li>text-decoration: none; </li></ul><ul><li>} </li></ul>courtesy Dan Cederholm
  52. 56. styling hCard with CSS courtesy Dan Cederholm
  53. 57. styling hCard with CSS <ul><li>/* heading labels */ </li></ul><ul><li>div.vcard h3 { </li></ul><ul><li>float: left; </li></ul><ul><li>width: 6em; </li></ul><ul><li>margin: 0; </li></ul><ul><li>padding: 0; </li></ul><ul><li>font-family: &quot;Lucida Grande&quot;, Verdana, sans-serif; </li></ul><ul><li>font-size: 70%; </li></ul><ul><li>font-weight: normal; </li></ul><ul><li>text-transform: uppercase; </li></ul><ul><li>letter-spacing: 2px; </li></ul><ul><li>text-align: right; </li></ul><ul><li>color: #999; </li></ul><ul><li>} </li></ul>courtesy Dan Cederholm
  54. 58. styling hCard with CSS courtesy Dan Cederholm
  55. 59. styling hCard with CSS <ul><li>div.vcard div.adr { </li></ul><ul><li>background: url(img/icon-adr.gif) no-repeat 1px 3px; </li></ul><ul><li>} </li></ul><ul><li>div.vcard div.tel { </li></ul><ul><li>background: url(img/icon-phone.gif) no-repeat 1px 3px; </li></ul><ul><li>} </li></ul><ul><li>div.vcard a.email { </li></ul><ul><li>display: block; </li></ul><ul><li>background: url(img/icon-email.gif) no-repeat 0 3px; </li></ul><ul><li>} </li></ul>courtesy Dan Cederholm
  56. 60. styling hCard with CSS courtesy Dan Cederholm
  57. 61. hCard for Designers <ul><li>Microformats provide structured data that designers can use for styling with CSS </li></ul>
  58. 62. hCalendar
  59. 63. hCalendar <ul><li>What is it? </li></ul><ul><li>simple, open, distributed calendaring and events format, based on the iCalendar standard </li></ul>
  60. 64. hCalendar <ul><li>How do you use it? </li></ul><ul><li>Add the semantics of iCalendar using the class design pattern . </li></ul><ul><li>Adds iCalendar’s field names as class values on any HTML element </li></ul>
  61. 65. hReview
  62. 66. hReview <ul><li>What is it? </li></ul><ul><li>simple, open, distributed format, suitable for embedding reviews (of products, services, businesses, events, etc.) in X/HTML </li></ul>
  63. 67. hReview <ul><li>How do you use it? </li></ul><ul><li>Add common semantics for reviews using the class design pattern. </li></ul>
  64. 68. hReview <ul><li>Reviews commonly have </li></ul><ul><li>item reviewed </li></ul><ul><li>date reviewed </li></ul><ul><li>reviewer </li></ul><ul><li>description </li></ul><ul><li>tags </li></ul>
  65. 69. but wait there’s more <ul><li>Yahoo! Tech and Local mark up millions of reviews (editorial and user generated) using hResume </li></ul>
  66. 70. but wait there’s more <ul><li>hAtom is the semantics of Atom in HTML </li></ul><ul><li>With it your page can be your feed </li></ul><ul><li>Magnolia provides every bookmark marked up with hAtom </li></ul>
  67. 71. but wait there’s more <ul><li>hResume is a simple way of marking up Resumes </li></ul><ul><li>LinkedIn publishes every public profile using hResume - that’s 9 million + of them </li></ul>
  68. 72. but wait there’s more <ul><li>with many more microformats under development, or waiting for you to find out about, or even develop </li></ul>
  69. 73. Part III <ul><li>services using microformats </li></ul>
  70. 74. Technorati microformats search Indexes microformatted content supports hCard, hCalendar, hReview
  71. 75. Pingerati Notify Pingerati of new or changed microformatted content Other services can receive updates when content changes
  72. 76. aggregators <ul><li>Edgio aggregates classifieds listing from across the web, including the hListing draft microformat </li></ul><ul><li>Revish aggregates reviews published using hReview, and combines them with reviews by users of their site </li></ul>
  73. 77. Part IV <ul><li>publishers using microformats </li></ul>
  74. 78. Flickr Geo microformat
  75. 79. Yahoo! Tech hReview, hCard
  76. 80. Upcoming hCalendar, hCard
  77. 81. LinkedIN hCard, hResume
  78. 82. Ma.gnolia every page is an hAtom feed every bookmark is an hAtom entry uses rel-tag for tagging uses hCard for contacts their website IS their API
  79. 83. Part V <ul><li>what you can do right now </li></ul>
  80. 84. what you can do right now <ul><li>Markup your contact details (company, individuals) using hCard </li></ul>
  81. 85. what you can do right now <ul><li>Mark up news using hAtom </li></ul>
  82. 86. what you can do right now <ul><li>Markup events you run or attend using hCalendar </li></ul>
  83. 87. what you can do right now <ul><li>use rel-tag for tagging content on your site </li></ul>
  84. 88. what you can do right now <ul><li>markup your locations using GEO </li></ul>
  85. 89. More? <ul><li>microformats.org </li></ul>
  86. 90. the book
  87. 91. Thank you <ul><li>[email_address] </li></ul><ul><li>http://microformatique.com </li></ul>

×