1. Microformats: Evolving the Web

    Tantek Çelik Chief Technologist Technorati
  2. (cc) Creative Commons BY
  3. Semantic Tables Update

  4. Archives questions

  5. More archives questions

  6. Moving your data

  7. Recovering your data

  8. More recovering your data

  9. Why do we care?

  10. Obligatory Web 2.0 themes

  11. Companies & open formats

    Why companies are supporting open formats:

  12. Open data formats

  13. Web (1.0) History 2000-2001

  14. Jeffrey Zeldman
  15. 2000-2001

    Results of broad CSS1 support

  16. 2002-2003

    Wired News redesign, CSS tipping point, semantic (X)HTML grows

  17. 2002-2003

    More semantic (X)HTML: better anchors & links

  18. 2003: XHTML extensions

  19. 2004: Patterns emerge

  20. 2005 Cambrian explosion

  21. Why did we extend XHTML?

  22. Requirements

  23. What can you extend?

  24. How should you do so?

  25. Simple Parts

  26. Microformats Principles

  27. Foundation: XMDP

  28. HTML4 XMDP example

    
    
                          author
           A person who wrote the document.
                          keywords
           List of keywords/keyphrases of the document.
                          copyright
           Copyright holder(s), statement of copyright.
                          date
           Last updated date of the document, in ISO8601.
                          identifier
           The normative URI for the document.
                          rel
    
                            script
             A reference to a client-side script. With the LINK
         element, the script is evaluated as the document loads and 
         may modify the contents of the document dynamically.
    
    
  29. HTML4 XMDP example

    
     <dl class="profile">
      <dt id='author'>    author</dt>
       <dd>A person who wrote the document.</dd>
      <dt id='keywords'>  keywords</dt>
       <dd>List of keywords/keyphrases of the document.</dd>
      <dt id='copyright'> copyright</dt>
       <dd>Copyright holder(s), statement of copyright.</dd>
      <dt id='date'>      date</dt>
       <dd>Last updated date of the document, in ISO8601.</dd>
      <dt id='identifier'>identifier</dt>
       <dd>The normative URI for the document.</dd>
      <dt id='rel'>       rel</dt>
       <dd><dl>
        <dt id='script'>    script</dt>
        <dd> A reference to a client-side script. With the LINK
         element, the script is evaluated as the document loads and 
         may modify the contents of the document dynamically.</dd> 
       </dl></dd>   
     </dl>
    
  30. HTML4 XMDP example

    
     <dl class="profile">
      <dt id='author'>    author</dt>
       <dd>A person who wrote the document.</dd>
      <dt id='keywords'>  keywords</dt>
       <dd>List of keywords/keyphrases of the document.</dd>
      <dt id='copyright'> copyright</dt>
       <dd>Copyright holder(s), statement of copyright.</dd>
      <dt id='date'>      date</dt>
       <dd>Last updated date of the document, in ISO8601.</dd>
      <dt id='identifier'>identifier</dt>
       <dd>The normative URI for the document.</dd>
      <dt id='rel'>       rel</dt>
       <dd><dl>
        <dt id='script'>    script</dt>
        <dd> A reference to a client-side script. With the LINK
         element, the script is evaluated as the document loads and 
         may modify the contents of the document dynamically.</dd> 
       </dl></dd>   
     </dl>
    
  31. Microformat: linked license

  32. rel-license example

    
    
             http://creativecommons.org/licenses/by/2.0/
             Some rights reserved. CC by-2.0.
    
    
  33. rel-license example

    
    <a 
       href="http://creativecommons.org/licenses/by/2.0/">
             Some rights reserved. CC by-2.0.
    </a>
    
  34. rel-license example

    
    <a rel="license"
       href="http://creativecommons.org/licenses/by/2.0/">
             Some rights reserved. CC by-2.0.
    </a>
    
  35. rel-license example

    
    <a rel="license"
       href="http://creativecommons.org/licenses/by/2.0/">
             Some rights reserved. CC by-2.0.
    </a>
    
  36. rel-license profile

    
    
               rel
               
                  license
              Indicates that the referred resource 
              is a license for the referring page.
    
    
    
  37. rel-license profile

    
    
               rel
         <dl>
          <dt id="license">license</dt>
          <dd>Indicates that the referred resource 
              is a license for the referring page.</dd>
     </dl>
    
    
  38. rel-license profile

    
    <dl class="profile">
     <dt id="rel">rel</dt>
     <dd><dl>
          <dt id="license">license</dt>
          <dd>Indicates that the referred resource 
              is a license for the referring page.</dd>
     </dl></dd>
    </dl>
    
  39. rel-license profile

    
    <dl class="profile">
     <dt id="rel">rel</dt>
     <dd><dl>
          <dt id="license">license</dt>
          <dd>Indicates that the referred resource 
              is a license for the referring page.</dd>
     </dl></dd>
    </dl>
    
  40. Origin of XFN

  41. XFN Demo

  42. People & Events

  43. vCard & iCalendar

  44. hCard

  45. More hCard Examples

  46. hCalendar

  47. more hCalendar

  48. Microformat: outlines

    
    
         topic 1
             point A
             point B
         topic 2
             point C
    
    
    
  49. Microformat: outlines

    
    <ol>
     <li>topic 1
     <ol><li>point A</li>
         <li>point B</li></ol></li>
     <li>topic 2
     <ol><li>point C</li></ol></li>
    </ol>
    
  50. Microformat: outlines

    
    <ol class="xoxo">
     <li>topic 1
     <ol><li>point A</li>
         <li>point B</li></ol></li>
     <li>topic 2
     <ol><li>point C</li></ol></li>
    </ol>
    
  51. Microformat: outlines

    
    <ol class="xoxo">
     <li>topic 1
     <ol><li>point A</li>
         <li>point B</li></ol></li>
     <li>topic 2
     <ol><li>point C</li></ol></li>
    </ol>
    
  52. Microformat: presentations

  53. S5+XOXO

  54. More Microformats...

  55. Colophon

  56. Thanks!

    Question & Answer