• Save
Microformats at Web 2.0 Expo April 2007
Upcoming SlideShare
Loading in...5
×
 

Microformats at Web 2.0 Expo April 2007

on

  • 10,822 views

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

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

Statistics

Views

Total Views
10,822
Views on SlideShare
10,782
Embed Views
40

Actions

Likes
38
Downloads
0
Comments
1

11 Embeds 40

http://accesibilidadenlaweb20.blogspot.com 10
http://www.abdulqabiz.com 9
http://explorcamp.pbwiki.com 5
http://www.slideshare.net 4
http://accesibilidadenlaweb20.blogspot.com.es 3
http://web2.pedagogicke.info 3
http://www.pedagogicke.org 2
http://inet.cmpnet.com 1
http://wildfire.gigya.com 1
http://gonnipanchivaalchu.blogspot.com 1
http://www.techgig.com 1
More...

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 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.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Microformats at Web 2.0 Expo April 2007 Microformats at Web 2.0 Expo April 2007 Presentation Transcript

  • 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
  • part I
    • web 2.0? really?
    • browsers 1.0
  • 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?
  • imagine
    • being able to grab any contact details on a page, and add them to your address book
  •  
  • imagine
    • or being able to grab event details from a page, and add them to your calendar software
  •  
  • imagine
    • or display the location of a person, place, company, on an online map
  •  
  • browsers 2.0
    • Microformats enable this today - through extensions to Firefox like Operator
  • 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
  • search 2.0
    • what’s good
    • what sucks
    • what’s going on
    • who is that?
  • RDF versus ufs
  • RDF versus ufs
  •  
  • enablers
    • by adding richer more meaningful semantics to web content, microformats enable much more intelligent search
  • part II
    • know your microformats
  • XHTML Friends Network (XFN)
  • XFN
    • What is it?
    • for marking up common professional and personal relationships with other people
  • 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
  • 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.
  • XFN
    • Provides a set of possible values or “controlled vocabulary” for describing relationships.
    • several categories, including physical, professional, family, romantic
  • XFN
    • XFN Creator - http://gmpg.org/xfn/creator
    • WordPress - built into “add links”
    • Plug-ins for Bloxsom and MoveableType
    • DreamWeaver toolbar from WaSP
  • Styling XFN
    • microformats provide a framework for designers using CSS
  • XFN + CSS
    • The CSS attribute selector
    • a[rel~=&quot;met&quot;}:after {
        • content: '*';
    • }
    Tantek Çelik *
  • 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 *
  • XFN + CSS
    • Anyone see a problem?
  • XFN + CSS
    • It doesn’t work in IE6
  • hCard
  • hCard
    • What is it?
    • simple, open, distributed format for representing people, companies, organizations, and places
    • ...
  • hCard
    • What is it?
    • 1:1 representation of the properties and values of the vCard standard
  • 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
  • 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”
  • 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>
  • 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
  • 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>
  • 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”
  • 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>
  • 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
  • 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>
  • 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>
  • 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”
  • 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>
  • 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>
  • hCard
    • all sounds a bit hard?
    • hCard Creator
    • Dreamweaver toolbar
    • plugins for TextPattern and Wordpress
  • 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
  • styling hCard with CSS courtesy Dan Cederholm
  • 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
  • styling hCard with CSS courtesy Dan Cederholm
  • styling hCard with CSS
    • div.vcard img.photo {
    • float: right;
    • padding: 2px;
    • border: 4px double #d3d0c2;
    • background: #fff;
    • }
    courtesy Dan Cederholm
  • styling hCard with CSS courtesy Dan Cederholm
  • 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
  • styling hCard with CSS courtesy Dan Cederholm
  • 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
  • styling hCard with CSS courtesy Dan Cederholm
  • 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
  • styling hCard with CSS courtesy Dan Cederholm
  • hCard for Designers
    • Microformats provide structured data that designers can use for styling with CSS
  • hCalendar
  • hCalendar
    • What is it?
    • simple, open, distributed calendaring and events format, based on the iCalendar standard
  • 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
  • hReview
  • hReview
    • What is it?
    • simple, open, distributed format, suitable for embedding reviews (of products, services, businesses, events, etc.) in X/HTML
  • hReview
    • How do you use it?
    • Add common semantics for reviews using the class design pattern.
  • hReview
    • Reviews commonly have
    • item reviewed
    • date reviewed
    • reviewer
    • description
    • tags
  • but wait there’s more
    • Yahoo! Tech and Local mark up millions of reviews (editorial and user generated) using hResume
  • 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
  • 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
  • but wait there’s more
    • with many more microformats under development, or waiting for you to find out about, or even develop
  • Part III
    • services using microformats
  • 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
    • 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
  • Part IV
    • publishers using microformats
  • 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 their website IS their API
  • Part V
    • what you can do right now
  • what you can do right now
    • Markup your contact details (company, individuals) using hCard
  • what you can do right now
    • Mark up news using hAtom
  • what you can do right now
    • Markup events you run or attend using hCalendar
  • what you can do right now
    • use rel-tag for tagging content on your site
  • what you can do right now
    • markup your locations using GEO
  • More?
    • microformats.org
  • the book
  • Thank you
    • [email_address]
    • http://microformatique.com