1. Microformats — The Big Picture

    2007 February 7 — Web Directions North

    Tantek Çelik Chief Technologist Technorati
  2. (cc) Creative Commons BY
  3. microformats - how did we get here?

  4. microformats - common content first

  5. microformats - common content cont'd

  6. microformats - just better markup?

  7. Technorati Contact page

  8. hCard markup example

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

    
    <div              > 
     <a                  href="http://tantek.com/">
      <span                   >Tantek</span> 
      <span                    >Çelik</span>
     </a>
    </div>
    
  10. 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>
    
  11. 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>
    
  12. What are Microformats?

  13. More than just "good class names"

  14. Microformats Principles

  15. Microformats Principles

  16. Microformats Principles

  17. Microformat: linked license

  18. Example: rel-license

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

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

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

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

  23. Microformats Process

  24. BarCamp home page

  25. Example: hCalendar

    
    
    
               http://tantek.com/presentations/... 
    
                             Microformats — The Big Pic…
    
        2007 February 7
    
    
    
    
    
  26. Example: hCalendar

    
    <ol                  >
     <li               >
      <a href="http://tantek.com/presentations/..." 
                    >
       <span                >Microformats — The Big Pic…</span>
    
        2007 February 7
    
      </a>
     </li>
    </ol>
    
  27. Example: hCalendar

    
    <ol class="vcalendar">
     <li class="vevent">
      <a href="http://tantek.com/presentations/..." 
         class="url">
       <span class="summary">Microformats — The Big Pic…</span>
       <abbr class="dtstart" title="20070207T1145-0800">
        2007 February 7
       </abbr>
      </a>
     </li>
    </ol>
    
  28. Example: hCalendar

    
    <ol class="vcalendar">
     <li class="vevent">
      <a href="http://tantek.com/presentations/..." 
         class="url">
       <span class="summary">Microformats — The Big Pic…</span>
       <abbr class="dtstart" title="20070207T1145-0800">
        2007 February 7
       </abbr>
      </a>
     </li>
    </ol>
    
  29. Microformats: 2004 → 2007

  30. Microformats: 2004 → 2007

  31. Recently released...

  32. Operator Demo

  33. Microformats Community

  34. Microformats Community - New

  35. Microformat Exercise for the Reader

  36. Colophon

  37. Thanks!

  38. Extra stuff

  39. semantic markup history