1. Microformats Practices

    13 September 2006 Future of Web Apps, San Francisco

    Tantek Çelik Chief Technologist Technorati
  2. (cc) Creative Commons BY
  3. Future of Web Apps home page

  4. hCard markup example

    
    
                               http://carsonsystems.com/blog/
                               Ryan 
                                Carson
    
                         Director
                          http://carsonsystems.com/
       Carson Systems
    
    
  5. hCard markup example

    
    <div              > 
     <a                  href="http://carsonsystems.com/blog/">
      <span                   >Ryan</span> 
      <span                    >Carson</span>
     </a>
     <span              >Director</span>
     <a             href="http://carsonsystems.com/">
       Carson Systems</a>
    </div>
    
  6. hCard markup example

    
    <div class="vcard"> 
     <a class="url fn n" href="http://carsonsystems.com/blog/">
      <span class="given-name">Ryan</span> 
      <span class="family-name">Carson</span>
     </a>
     <span class="title">Director</span>
     <a class="org" href="http://carsonsystems.com/">
       Carson Systems</a>
    </div>
    
  7. hCard markup example

    
    <div class="vcard">
     <a class="url fn n" href="http://carsonsystems.com/blog/">
      <span class="given-name">Ryan</span> 
      <span class="family-name">Carson</span>
     </a>
     <span class="title">Director</span>
     <a class="org" href="http://carsonsystems.com/">
       Carson Systems</a>
    </div>
    
  8. What are Microformats?

  9. Microformat: linked license

  10. Example: rel-license

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

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

    
    <a rel="license"
       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. rel-license support

  15. Example: blog quote

  16. Example: blog quote

    
    <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>
    
  17. Example: blog quote

    
    <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>
    
  18. Example: blog quote

    
    <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>
    
  19. Example: blog quote

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

    
    <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>
    
  21. Example: blog quote with microformats

    
    <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>
    
  22. Example: blog quote with microformats

    
    <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>
    
  23. Example: blog quote with microformats

    
    <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. More than just "good class names"

  25. Microformats Principles

  26. Microformats Principles

  27. Microformats Principles

  28. Microformats Process

  29. Future of Web Apps home page

  30. BarCamp home page

  31. Example: hCalendar

    
    
    
               http://tantek.com/presentations/... 
    
                             Microformats Practices
    
        13 September 2006
    
    
    
    
    
  32. Example: hCalendar

    
    <ol                  >
     <li               >
      <a href="http://tantek.com/presentations/..." 
                    >
       <span                >Microformats Practices</span>
    
        13 September 2006
    
      </a>
     </li>
    </ol>
    
  33. Example: hCalendar

    
    <ol class="vcalendar">
     <li class="vevent">
      <a href="http://tantek.com/presentations/..." 
         class="url">
       <span class="summary">Microformats Practices</span>
       <abbr class="dtstart" title="20060913T1400-0700">
        13 September 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">Microformats Practices</span>
       <abbr class="dtstart" title="20060913T1400-0700">
        13 September 2006
       </abbr>
      </a>
     </li>
    </ol>
    
  35. Example: hCalendar + hCard

    
    
    
               http://carsonworkshops.com/summit/
    
                             The Future of Web Apps
    
        9/13       -
        
        9/14/2006            at 
      
                           Palace of Fine Arts
                                                        
                                    3301 Lyon St.
                               San Francisco       ,
                             CA                     
                                  94123 
                             
    
    
    
  36. Example: hCalendar + hCard

    
    <ol                  >
     <li               >
      <a href="http://carsonworkshops.com/summit/" 
                    >
       <span                >The Future of Web Apps</span>
    
        9/13       -
        
        9/14/2006       </a> at 
      <div                       >
       <div               >Palace of Fine Arts</div>
       <div            >                                                 
        <div                       >3301 Lyon St.</div>
        <span                 >San Francisco</span>,
        <span               >CA</span>                                        
        <span                    >94123</span></div>
      </div>
     </li>
    </ol>
    
  37. Example: hCalendar + hCard

    
    <ol class="vcalendar">
     <li class="vevent">
      <a href="http://carsonworkshops.com/summit/" 
         class="url">
       <span class="summary">The Future of Web Apps</span>
       <abbr class="dtstart" title="20060913">
        9/13</abbr> -
       <abbr class="dtend" title="20060915">    
        9/14/2006</abbr></a> at 
      <div class="location vcard">
       <div class="fn org">Palace of Fine Arts</div>
       <div class="adr">                                                 
        <div class="street-address">3301 Lyon St.</div>
        <span class="locality">San Francisco</span>,
        <span class="region">CA</span>                                        
        <span class="postal-code">94123</span></div> 
      </div>
     </li>
    </ol>
    
  38. Example: hCalendar + hCard

    
    <ol class="vcalendar">
     <li class="vevent">
      <a href="http://carsonworkshops.com/summit/" 
         class="url">
       <span class="summary">The Future of Web Apps</span>
       <abbr class="dtstart" title="20060913">
        9/13</abbr> -
       <abbr class="dtend" title="20060915">    
        9/14/2006</abbr></a> at 
      <div class="location vcard">
       <div class="fn org">Palace of Fine Arts</div>
       <div class="adr">                                                 
        <div class="street-address">3301 Lyon St.</div>
        <span class="locality">San Francisco</span>,
        <span class="region">CA</span>                                        
        <span class="postal-code">94123</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!

  46. Extra stuff

  47. semantic markup history