1. What are microformats?

    11 July 2006 An Event Apart, New York City

    Tantek Çelik Chief Technologist Technorati
  2. (cc) Creative Commons BY
  3. An Event Apart speakers

  4. hCard markup example

    
     http://zeldman.com/
     Jeffrey 
     Zeldman
     Founder and Creative Director
     http://happycog.com/
     Happy Cog Studios
    
  5. hCard markup example

    
    <div > 
     <a href="http://zeldman.com/">
     <span >Jeffrey</span> 
     <span >Zeldman</span>
     </a>
     <span >Founder and Creative Director</span>
     <a href="http://happycog.com/">
     Happy Cog Studios</a>
    </div>
    
  6. hCard markup example

    
    <div class="vcard"> 
     <a class="url fn n" href="http://zeldman.com/">
     <span class="given-name">Jeffrey</span> 
     <span class="family-name">Zeldman</span>
     </a>
     <span class="title">Founder and Creative Director</span>
     <a class="org" href="http://happycog.com/">
     Happy Cog Studios</a>
    </div>
    
  7. hCard markup example

    
    <div class="vcard">
     <a class="url fn n" href="http://zeldman.com/">
     <span class="given-name">Jeffrey</span> 
     <span class="family-name">Zeldman</span>
     </a>
     <span class="title">Founder and Creative Director</span>
     <a class="org" href="http://happycog.com/">
     Happy Cog Studios</a>
    </div>
    
  8. What are Microformats?

    • Microformats enable the publishing and sharing of higher fidelity information on the Web.
    • Small bits of (X)HTML that identify richer data types like people and events in your webpages.
    • Building blocks that enable users to own, control, move, and share their data on the Web.
  9. semantic markup history

    • 2000-2002

      • Broad CSS1 support

        • IE5/Mac, Moz, IE6/Win, Opera
      • web designers use more CSS

        • less presentational markup
        • <table> & <font>
        • float & font-family
        • Smaller documents
      • web designers rediscover semantic (X)HTML

      • less <b><br> more <h3><p>

      • Search engine relevance

        Easier to style

    • 2003

      • CSS Zen Garden launched

      • Blogging tools adopt more semantic (X)HTML

      • <a name> <div id>

        and <a rel="bookmark">

      • 'rel' attribute rediscovered

      • blogrolls link people/URLs

      • XFN Friendly extends 'rel'

        • <a rel="met friend"
           href="...">Jeffrey</a>
          
        • Built into blo.gs, WordPress, etc.
    • 2004

  10. Microformat: linked license

    • Analogy: link to a stylesheet with rel="stylesheet"
    • Thus: link to a license with rel="license"
  11. Example: rel-license

    
     http://creativecommons.org/licenses/by/2.5/
     Some rights reserved. CC by-2.5.
    
  12. Example: rel-license

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

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

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

  16. Example: blog quote

    • <cite> & <blockquote> elements
  17. Example: blog quote

    • <cite> & <blockquote> elements
    
    <p> Eric Meyer wrote:</p>
    <p>
     What's so interesting to me is that the guys who decided 
     to focus on the positive went out and did something; 
     those who want to mix in the negative seem to have 
     nothing to offer except complaints.
    </p>
    <p>An excellent contrast between those who want to 
    build new things and those who want to tear them down.
    </p>
    
  18. Example: blog quote

    • <cite> & <blockquote> elements
    
    <p><cite>Eric Meyer</cite> wrote:</p>
    <blockquote>
    <p>
     What's so interesting to me is that the guys who decided 
     to focus on the positive went out and did something; 
     those who want to mix in the negative seem to have 
     nothing to offer except complaints.
    </p>
    </blockquote>
    <p>An excellent contrast between those who want to 
    build new things and those who want to tear them down.
    </p>
    
  19. Example: blog quote

    • <cite> & <blockquote> elements
    
    <p><cite>Eric Meyer</cite> wrote:</p>
    <blockquote cite="http://meyerweb.../social-protocols/ ">
    <p>
     What's so interesting to me is that the guys who decided 
     to focus on the positive went out and did something; 
     those who want to mix in the negative seem to have 
     nothing to offer except complaints.
    </p>
    </blockquote>
    <p>An excellent contrast between those who want to 
    build new things and those who want to tear them down.
    </p>
    
  20. Example: blog quote

    • <cite> & <blockquote> elements
    
    <p><cite>Eric Meyer</cite> wrote:</p>
    <blockquote cite="http://meyerweb.../social-protocols/ ">
    <p>
     What's so interesting to me is that the guys who decided 
     to focus on the positive went out and did something; 
     those who want to mix in the negative seem to have 
     nothing to offer except complaints.
    </p>
    </blockquote>
    <p>An excellent contrast between those who want to 
    build new things and those who want to tear them down.
    </p>
    
  21. Example: blog quote with microformats

    • add a link, since the source is on the Web
    
    <p><cite >
    <a href="http://meyerweb.com"
     >Eric Meyer</a>
    </cite> wrote:</p>
    <blockquote cite="http://meyerweb.../social-protocols/ ">
    <p>
     What's so interesting to me is that the guys who decided 
     to focus on the positive went out and did something; 
     those who want to mix in the negative seem to have 
     nothing to offer except complaints.
    </p>
    </blockquote>
    <p>An excellent contrast between those who want to 
    build new things and those who want to tear them down.
    </p>
    
  22. Example: blog quote with microformats

    • add hCard since Eric is a person
    
    <p><cite class="vcard">
    <a href="http://meyerweb.com" class="url fn"
     >Eric Meyer</a>
    </cite> wrote:</p>
    <blockquote cite="http://meyerweb.../social-protocols/ ">
    <p>
     What's so interesting to me is that the guys who decided 
     to focus on the positive went out and did something; 
     those who want to mix in the negative seem to have 
     nothing to offer except complaints.
    </p>
    </blockquote>
    <p>An excellent contrast between those who want to 
    build new things and those who want to tear them down.
    </p>
    
  23. Example: blog quote with microformats

    • add XFN since we know Eric
    
    <p><cite class="vcard">
    <a href="http://meyerweb.com" class="url fn" 
     rel="met friend colleague">Eric Meyer</a>
    </cite> wrote:</p>
    <blockquote cite="http://meyerweb.../social-protocols/ ">
    <p>
     What's so interesting to me is that the guys who decided 
     to focus on the positive went out and did something; 
     those who want to mix in the negative seem to have 
     nothing to offer except complaints.
    </p>
    </blockquote>
    <p>An excellent contrast between those who want to 
    build new things and those who want to tear them down.
    </p>
    
  24. Example: blog quote with microformats

    • <cite>, <blockquote>, hCard & XFN
    
    <p><cite class="vcard">
    <a href="http://meyerweb.com" class="url fn" 
     rel="met friend colleague">Eric Meyer</a>
    </cite> wrote:</p>
    <blockquote cite="http://meyerweb.../social-protocols/ ">
    <p>
     What's so interesting to me is that the guys who decided 
     to focus on the positive went out and did something; 
     those who want to mix in the negative seem to have 
     nothing to offer except complaints.
    </p>
    </blockquote>
    <p>An excellent contrast between those who want to 
    build new things and those who want to tear them down.
    </p>
    
  25. More than just "good class names"

    • principles keep things "micro"
    • process emphasizes getting real
    • community minimizes duplicates
  26. Microformats Principles

    • solve a specific problem
    • The trick.... is to make sure that each limited mechanical part of the Web, each application, is within itself composed of simple parts that will never get too powerful.

    • —Tim Berners-Lee, Weaving The Web
  27. Microformats Principles

    • solve a specific problem
    • simple as possible
      • evolutionary improvements
    • humans first, machines second
      • presentable and parsable
      • adapt to current behaviors
    • reuse from widely adopted standards
      • semantic (X)HTML, schemas from interoperable RFCs
    • ...if I had insisted everyone use HTTP, this would also have been against the principle of minimal constraint. ... the Web would come as a set of ideas that could be adopted individually in combination with existing or future parts.

    • ibid.
  28. Microformats Principles

    • solve a specific problem
    • simple as possible
      • evolutionary improvements
    • humans first, machines second
      • presentable and parsable
      • adapt to current behaviors
    • reuse from widely adopted standards
      • semantic (X)HTML, schemas from interoperable RFCs
    • modularity / embeddability
    • decentralized development, content, services
      • explicitly encourage "spirit of the Web"
  29. Microformats Process

    • pick a specific, simple problem and define it
    • research & document current web publishing behavior
    • document existing formats in the problem area
    • brainstorm with implied schema / reuse names
    • iterate within the community
  30. BarCamp home page

  31. Example: hCalendar

    
     http://tantek.com/presentations/... 
     What are microformats?
     11 July 2006
    
  32. Example: hCalendar

    
    <ol >
     <li >
     <a href="http://tantek.com/presentations/..." 
     >
     <span >What are microformats?</span>
     11 July 2006
     </a>
     </li>
    </ol>
    
  33. Example: hCalendar

    
    <ol class="vcalendar">
     <li class="vevent">
     <a href="http://tantek.com/presentations/..." 
     class="url">
     <span class="summary">What are microformats?</span>
     <abbr class="dtstart" title="20060711T1030-0400">
     11 July 2006
     </abbr>
     </a>
     </li>
    </ol>
    
  34. Example: hCalendar

    
    <ol class="vcalendar">
     <li class="vevent">
     <a href="http://tantek.com/presentations/..." 
     class="url">
     <span class="summary">What are microformats?</span>
     <abbr class="dtstart" title="20060711T1030-0400">
     11 July 2006
     </abbr>
     </a>
     </li>
    </ol>
    
  35. Example: hCalendar + hCard

    
     http://aneventapart.com/events/2006/nyc/ 
     An Event Apart NYC
     7/10 -
     
     7/11/2006 at 
     
     Scandinavia House
     
     58 Park Avenue
     New York City ,
     NY 
     10016 
     
    
  36. Example: hCalendar + hCard

    
    <ol >
     <li >
     <a href="http://aneventapart.com/events/2006/nyc/" 
     >
     <span >An Event Apart NYC</span>
     7/10 -
     
     7/11/2006 </a> at 
     <div >
     <div >Scandinavia House</div>
     <div > 
     <div >58 Park Avenue</div>
     <span >New York City</span>,
     <span >NY</span> 
     <span >10016</span></div>
     </div>
     </li>
    </ol>
    
  37. Example: hCalendar + hCard

    
    <ol class="vcalendar">
     <li class="vevent">
     <a href="http://aneventapart.com/events/2006/nyc/" 
     class="url">
     <span class="summary">An Event Apart NYC</span>
     <abbr class="dtstart" title="20060710">
     7/10</abbr> -
     <abbr class="dtend" title="20060712"> 
     7/11/2006</abbr></a> at 
     <div class="location vcard">
     <div class="fn org">Scandinavia House</div>
     <div class="adr"> 
     <div class="street-address">58 Park Avenue</div>
     <span class="locality">New York City</span>,
     <span class="region">NY</span> 
     <span class="postal-code">10016</span></div> 
     </div>
     </li>
    </ol>
    
  38. Example: hCalendar + hCard

    
    <ol class="vcalendar">
     <li class="vevent">
     <a href="http://aneventapart.com/events/2006/nyc/" 
     class="url">
     <span class="summary">An Event Apart NYC</span>
     <abbr class="dtstart" title="20060710">
     7/10</abbr> -
     <abbr class="dtend" title="20060712"> 
     7/11/2006</abbr></a> at 
     <div class="location vcard">
     <div class="fn org">Scandinavia House</div>
     <div class="adr"> 
     <div class="street-address">58 Park Avenue</div>
     <span class="locality">New York City</span>,
     <span class="region">NY</span> 
     <span class="postal-code">10016</span></div> 
     </div>
     </li>
    </ol>
    
  39. Microformats: 2004 → 2006

  40. Microformats: 2004 → 2006

  41. Recently released...

  42. Microformats Community

  43. Microformat Exercise for the Reader

  44. Colophon

  45. Thanks!

AltStyle によって変換されたページ (->オリジナル) /