1. Microformats

    Evolving the Web

    Tantek Çelik Chief Technologist Technorati
  2. (cc) Creative Commons BY
  3. Web History 1990s

    • HTML began structural and semantic
    • Browser Wars
    • Responses:
      • CSS: separate presentation
      • XML: clean up HTML "mess"
    • Implementations raced forward
  4. 2000-2001

    • Reliable CSS1 support ships!
      • IE5/Mac, Mozilla, IE6/Windows, Opera
    • XHTML introduced
    • Web designers transition to CSS
      • Fewer <font>s and <table>s
      • Replaced with CSS font-family, float etc.
      • Less HTML = smaller documents
      • First CSS hacks appear and spread
      • (X)HTML use and proficiency increased
    • "pure XML" replacement of HTML...
      • ...still incomplete.
  5. 2002-2003

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

    • More headings and paragraphs
    • Less <b>ed and <br>eakfast markup
      old: new:
      <b>had lunch</b>
      <br>
      i had lunch today 
      <br>
      <h3>had lunch</h3>
      <p>
      i had lunch today
      </p>
    • Advantages:
      • Search engine relevance
      • Easier to style more beautifully
    • CSS Zen Garden launches
  6. 2002-2003

    More semantic (X)HTML: better anchors & links

    • Blogging tools adopted semantic XHTML more quickly
    • Fewer <a>norexic </a>nchors
      old: new:
      <a name="post123"></a>
      ...
      <a href="#post123">#</a>
      <div id="post123">
      ...
      <a href="#post123" 
       rel="bookmark">#</a>
      </div>
    • Discoverable permalinks!
    • 'rel' attribute rediscovered by community
  7. 2003: XHTML extensions

    • XFN (XHTML Friends Network) extended 'rel' XFN Friendly
    • Authoring, Editing, Browsing Tools
      • implemented in days/weeks
    • XMDP (XHTML Meta Data Profiles) introduced
      • Formally reference, document XHTML extensions
  8. 2004: Patterns emerge

    • "microformats" concepts (O'Reilly ETech conference)
      • "lowercase semantic web" introduced as contrast
      • "microformats" term coined
      • license &s VoteLinks extensions to 'rel'
      • XOXO (eXtensible Open XHTML Outlines)
    • WHAT WG formed
    • XFN poster paper at ACM Hypertext 2004
    • Reuse vCard/iCal RFCs 1:1 in XHTML (FOO Camp)
    • Microformats principles documented
  9. 2005: Cambrian explosion

    • rel="tag" for distributed folksonomies
    • rel="nofollow" from Google to fight link spam
    • hCard, hCalendar iterated, implemented
    • hReview conceived, collaboratively written, published
    • XMDP poster paper (#915) at WWW2005
    • Microformats Workshop at Supernova Conference
    • microformats.org community launched
    • Open mailing list, wiki inspired many new efforts
  10. Why did we extend XHTML?

    • Limited elements
    • Limited compounds
    • New / precise semantics
    • Share / publish new types of info
    • Reveal the "lowercase semantic web"
  11. Requirements

    • Stylable!
    • Work in modern browsers today
    • Benefits with little/no costs
    • Easy to hand author
    • Embeddable in existing content and contexts
    • Avoid duplicating all content
    • Avoid requiring more file uploads
  12. What can you extend?

    • class [引用]

      The class attribute has several roles in HTML: ...

      For general purpose processing by user agents.

    • meta [引用]

      For the [name, content] attributes, the permitted values and their interpretation are profile dependent...

    • rel, rev, and profile [引用]

      Authors may wish to define additional link types not described in this specification. If they do so, they should use a profile...

  13. How should you extend HTML?

    • Avoid
    • Methodology
    • With profiles
    • Peer review
    • Community feedback
  14. Simple Parts

    • 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
  15. 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"
  16. Foundation: XMDP

    • XHTML Meta Data Profiles
    • use XHTML to extend itself!
    • dictionary of properties
    • description and/or dictionary of values
    • defines class values, meta properties/values, and new rel/rev
    • reference with <head profile="profileURI">
  17. 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.
    
  18. 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>
    
  19. 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>
    
  20. Microformat: linked license

    • Analogy: link to a stylesheet with rel="stylesheet"
    • Thus: link to a license with rel="license"
  21. rel-license example

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

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

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

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

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

    
     rel
     <dl>
     <dt id="license">license</dt>
     <dd>Indicates that the referred resource 
     is a license for the referring page.</dd>
     </dl>
    
  27. rel-license XMDP 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>
    
  28. rel-license XMDP 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>
    
  29. rel-license support

  30. Origin of XFN

    • Bloggers treat people as URLs
    • Blogrolls are a social network
    • * = met
    • XFN - XHTML Friends Network
    • 
      <a rel="met friend"
       href="http://jeff.example.com/blog/">Jeffrey</a>
      
  31. XFN implementations

  32. People & Events

    • Very common "structures" on weblogs
    • Create explicit structures
      • in order to easily publish, index, aggregate
    • Minimize impact on authors (and developers)
    • Avoid duplicating all content
    • Avoid requiring file uploads
  33. vCard & iCalendar

    • RFC2426 & RFC2445
    • Widely adopted and implemented
      • Not SGML/XML markup
    • XML/RDF variants exist
      • Can't be easily embedded/styled in (X)HTML
      • Places many constraints on authors
        • E.g. which elements and how to nest
    • Conclusion: Try 1:1 mapping into XHTML
  34. hCard

    hCard example

    
     http://tantek.com/
     Tantek 
     Çelik
     Chief Technologist
     http://technorati.com
     Technorati
    
  35. hCard

    hCard example

    
    <address > 
     <a href="http://tantek.com/">
     <span >Tantek</span> 
     <span >Çelik</span>
     </a>
     <span >Chief Technologist</span>
     <a 
     href="http://technorati.com">
     Technorati</a>
    </address>
    
  36. hCard

    hCard example

    
    <address class="vcard"> 
     <a class="url fn n" href="http://tantek.com/">
     <span class="given-name">Tantek</span> 
     <span class="family-name">Çelik</span>
     </a>
     <span class="title">Chief Technologist</span>
     <a class="org" 
     href="http://technorati.com">
     Technorati</a>
    </address>
    
  37. hCard

    hCard example

    
    <address class="vcard">
     <a class="url fn n" href="http://tantek.com/">
     <span class="given-name">Tantek</span> 
     <span class="family-name">Çelik</span>
     </a>
     <span class="title">Chief Technologist</span>
     <a class="org" 
     href="http://technorati.com">
     Technorati</a>
    </address>
    
  38. More hCard Examples

  39. hCalendar

    hCalendar example

    
     http://tantek.com/presentations/... 
     Microformats: Evolving ...
     January 18th, 2006
    
  40. hCalendar

    hCalendar example

    
    <ol >
     <li >
     <a href="http://tantek.com/presentations/..." 
     >
     <span >Microformats: Evolving ...</span>
     January 18th, 2006
     </a>
     </li>
    </ol>
    
  41. hCalendar

    hCalendar example

    
    <ol class="vcalendar">
     <li class="vevent">
     <a href="http://tantek.com/presentations/..." 
     class="url">
     <span class="summary">Microformats: Evolving ...</span>
     <abbr class="dtstart" title="20060118T1200-0800">
     January 18th, 2006
     </abbr>
     </a>
     </li>
    </ol>
    
  42. hCalendar

    hCalendar example

    
    <ol class="vcalendar">
     <li class="vevent">
     <a href="http://tantek.com/presentations/..." 
     class="url">
     <span class="summary">Microformats: Evolving ...</span>
     <abbr class="dtstart" title="20060118T1200-0800">
     January 18th, 2006
     </abbr>
     </a>
     </li>
    </ol>
    
  43. More hCalendar Examples

  44. Microformat: outlines

    • XOXO - eXtensible Open XHTML Outlines
    
     topic 1
     point A
     point B
     topic 2
     point C
    
  45. Microformat: outlines

    • XOXO - eXtensible Open XHTML 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>
    
  46. Microformat: outlines

    • XOXO - eXtensible Open XHTML 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>
    
  47. Microformat: outlines

    • XOXO - eXtensible Open XHTML 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>
    
  48. Microformat: presentations

    • a presentation is an outline
    • reuse XOXO
    • as slides
      • class="slide"
    • in a presentation
      • class="presentation"
    • S5+XOXO
  49. S5+XOXO

  50. More Microformats...

  51. Colophon

  52. Thanks!

    Question & Answer

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