1. What are Microformats?

    Tantek Çelik Senior Technologist Technorati
  2. (cc) Creative Commons BY

  3. What are Microformats?

    • History
    • Principles
    • Foundation
    • Examples

  4. History: 2000+ More CSS, less HTML

    • Web designers transition to CSS
    • eliminated Web 1.0 <font>s and <table>s
      • replaced with CSS font-family, float etc.
    • documents got smaller
    • (X)HTML use and proficiency increased

  5. History: 2002 semantic (X)HTML

    • headings and paragraphs
    • no more <b>ed and <br>eakfast
      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 from heading tags
      • easier to style more beautifully
      • See CSS Zen Garden

  6. History: 2002 better anchors & links

    • discoverable permalinks
    • no more <a>norexic </a>nchors
      old: new:
      
<a name="post123"></a>
...
<a href="#post123">#</a>

      
<div id="post123">
...
<a href="#post123" 
 rel="bookmark">#</a>
</div>
    • 'rel' attribute rediscovered

  7. History: 2003 XHTML extensions

    • XFN Friendly
    • XFN (XHTML Friends Network) link rels conceived, published
    • Authoring, Editing, Browsing Tools
      • implemented in days/weeks
    • XMDP (XHTML Meta Data Profiles) introduced
      • Formally reference, document XHTML extensions

  8. History: 2004 patterns emerge

    • ETech conference: "real world semantics "
      • "lowercase semantic web" introduced as contrast
      • "microformats" term coined
      • license, VoteLinks "rel" extensions
      • XOXO (eXtensible Open XHTML Outlines) proposed
    • XFN poster paper at ACM Hypertext 2004
    • FOO Camp simple semantics sessions
      • reuse vCard/iCalendar RFCs 1:1 in XHTML
    • Microformats principles documented

  9. History: 2005 implementations plus

    • rel="tag" for distributed folksonomies
    • rel="nofollow" from Google to fight link spam
    • hCard, hCalendar iterated, implemented
    • SXSW "Elements of Meaningful XHTML"
    • hReview conceived, collaboratively written, published
    • XMDP poster paper (#915) at WWW2005

  10. 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"

  11. 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}">

  12. Foundation: 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>

  13. 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

  14. vCard & iCalendar

    • RFC 2426 & 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

  15. hCard & hCalendar

    • hCard = vCard RFC2426 mapped 1:1 into XHTML
    • hCalendar = iCalendar RFC2445 mapped 1:1 into XHTML
    • Reuse schema (names, properties etc.) as class values
    • Use most precise XHTML building blocks
    • If necessary use <abbr> for human vs. machine values

  16. hCard examples

  17. hCalendar examples

  18. Colophon

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