Microformats at Web 2.0 Expo April 2007

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

1 comments

Comments 1 - 1 of 1 previous next Post a comment

  • + stephenjudge Stephen Judge 3 years ago
    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.
Post a comment
Embed Video
Edit your comment Cancel

37 Favorites & 3 Groups

Microformats at Web 2.0 Expo April 2007 - Presentation Transcript

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

+ johnallsoppjohnallsopp, 3 years ago

custom

7200 views, 37 favs, 8 embeds more stats

A thorough, lively introduction to the motivations more

More info about this document

© All Rights Reserved

Go to text version

  • Total Views 7200
    • 7171 on SlideShare
    • 29 from embeds
  • Comments 1
  • Favorites 37
  • Downloads 0
Most viewed embeds
  • 9 views on http://www.abdulqabiz.com
  • 7 views on http://accesibilidadenlaweb20.blogspot.com
  • 5 views on http://explorcamp.pbwiki.com
  • 3 views on http://web2.pedagogicke.info
  • 2 views on http://www.pedagogicke.org

more

All embeds
  • 9 views on http://www.abdulqabiz.com
  • 7 views on http://accesibilidadenlaweb20.blogspot.com
  • 5 views on http://explorcamp.pbwiki.com
  • 3 views on http://web2.pedagogicke.info
  • 2 views on http://www.pedagogicke.org
  • 1 views on http://gonnipanchivaalchu.blogspot.com
  • 1 views on http://wildfire.gigya.com
  • 1 views on http://inet.cmpnet.com

less

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

Cancel
File a copyright complaint
Having problems? Go to our helpdesk?

Categories