1. Microformats

    WOW Best Practices in Web Design

    2007 May 3-4, Rooms 207-208, MGM Grand, Las Vegas, NV
    Tantek Çelik Chief Technologist Technorati
  2. (cc) Creative Commons BY
  3. Technorati Contact page

  4. hCard markup example

    
    
                               http://tantek.com/
                               Tantek 
                                Çelik
    
    
  5. hCard markup example

    
    <div              > 
     <a                  href="http://tantek.com/">
      <span                   >Tantek</span> 
      <span                    >Çelik</span>
     </a>
    </div>
    
  6. hCard markup example

    
    <div class="vcard"> 
     <a class="url fn n" href="http://tantek.com/">
      <span class="given-name">Tantek</span> 
      <span class="family-name">Çelik</span>
     </a>
    </div>
    
  7. hCard markup example

    
    <div class="vcard">
     <a class="url fn n" href="http://tantek.com/">
      <span class="given-name">Tantek</span> 
      <span class="family-name">Çelik</span>
     </a>
    </div>
    
  8. microformats - how did we get here?

  9. microformats - common content first

  10. BarCamp home page

  11. Example: hCalendar

    
    
    
               http://tantek.com/presentations/... 
    
                             Microformats at WOW
    
        2007 May 3
    
    
    
    
    
  12. Example: hCalendar

    
    <ol                  >
     <li               >
      <a href="http://tantek.com/presentations/..." 
                    >
       <span                >Microformats at WOW</span>
    
        2007 May 3
    
      </a>
     </li>
    </ol>
    
  13. Example: hCalendar

    
    <ol class="vcalendar">
     <li class="vevent">
      <a href="http://tantek.com/presentations/..." 
         class="url">
       <span class="summary">Microformats at WOW</span>
       <abbr class="dtstart" title="2007-05-03T09:00-0700">
        2007 May 3
       </abbr>
      </a>
     </li>
    </ol>
    
  14. Example: hCalendar

    
    <ol class="vcalendar">
     <li class="vevent">
      <a href="http://tantek.com/presentations/..." 
         class="url">
       <span class="summary">Microformats at WOW</span>
       <abbr class="dtstart" title="2007-05-03T09:00-0700">
        2007 May 3
       </abbr>
      </a>
     </li>
    </ol>
    
  15. What are Microformats?

  16. microformats - just better markup?

  17. Microformats Principles

  18. Microformats Principles

  19. Microformats Principles

  20. Microformat: linked license

  21. Example: rel-license

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

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

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

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

  26. Microformats: 2004 → 2007

  27. Microformats: 2004 → 2007

  28. Recently released...

  29. Operator Demo

  30. Microformats Community

  31. Microformat Exercise for the Reader

  32. Colophon

  33. Thanks!

  34. Extra stuff

  35. semantic markup history