Microformats

Evolving the Web

Tantek Çelik Chief Technologist
Web History 1990s
- HTML began structural and semantic
- Browser Wars
- Responses:
  - CSS: separate presentation
  - XML: clean up HTML "mess"
- Implementations raced forward
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.
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
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
2003: XHTML extensions
- XFN (XHTML Friends Network) extended 'rel'
- Authoring, Editing, Browsing Tools
  - implemented in days/weeks
- XMDP (XHTML Meta Data Profiles) introduced
  - Formally reference, document XHTML extensions
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
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
Why did we extend XHTML?
- Limited elements
- Limited compounds
- New / precise semantics
- Share / publish new types of info
- Reveal the "lowercase semantic web"
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
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...
How should you extend HTML?
- Avoid
- Methodology
- With profiles
- Peer review
- Community feedback
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
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"
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">

old:	new:
`<b>`had lunch`</b> <br>` i had lunch today `<br>`	`<h3>`had lunch`</h3> <p>` i had lunch today `</p>`

old:	new:
`<a name="post123"></a>` ... `<a href="#post123">#</a>`	`<div id="post123">` ... `<a href="#post123"` `rel="bookmark">#</a>` `</div>`

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.

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>

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>

Microformat: linked license
- Analogy: link to a stylesheet with rel="stylesheet"
- Thus: link to a license with rel="license"

rel-license example



         http://creativecommons.org/licenses/by/2.5/
         Some rights reserved. CC by-2.5.

rel-license example


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

rel-license example


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

rel-license example


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

rel-license XMDP profile



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

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>

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>

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>

rel-license support
- Creative Commons (cc) license chooser
- Yahoo! (cc) search
- Google "Usage Rights" search
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>
```
XFN implementations
- Numerous blogging/authoring tools
  - Built into WordPress and blo.gs blogroll UIs
- Rubhub index
- XHTMLFriends.net
- Many more implementations
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
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

hCard

hCard example



                           http://tantek.com/
                           Tantek 
                            Çelik

                     Chief Technologist

        http://technorati.com
   Technorati

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>

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>

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>

More hCard Examples
- hCard creator
- This presentation
- 40,000+ Avon reps, Griffith & Bath Universities
- 100,000+ venues on Eventful
- Technorati Contacts Feed Service
- Web Essentials 05 Presenters page
- Tools, plugins for MT, WordPress, TextPattern, kwiki
- See more examples in the wild at hCard spec

hCalendar

hCalendar example




           http://tantek.com/presentations/... 

                         Microformats: Evolving ...

    January 18th, 2006

hCalendar

hCalendar example


<ol                  >
 <li               >
  <a href="http://tantek.com/presentations/..." 
                >
   <span                >Microformats: Evolving ...</span>

    January 18th, 2006

  </a>
 </li>
</ol>

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>

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>

More hCalendar Examples
- hCalendar creator
- This presentation
- Laughing Squid, Sunnyvale House Concerts
- 100,000+ events on Eventful & Upcoming.org
- Technorati Events Feed Service
- Events on microformats.org
- subscribe to the events on a blog
- See more examples in the wild at hCalendar spec

Microformat: outlines

XOXO - eXtensible Open XHTML Outlines



     topic 1
         point A
         point B
     topic 2
         point C

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>

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>

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>

Microformat: presentations
- a presentation is an outline
- reuse XOXO
- as slides
  - class="slide"
- in a presentation
  - class="presentation"
- S5+XOXO

S5+XOXO


<ol class="xoxo presentation">
 <li class="slide">topic 1
 <ol><li>point A</li>
     <li>point B</li></ol></li>
 <li class="slide">topic 2
 <ol><li>point C</li></ol></li>
</ol>

You've just experienced it.
http://tantek.com/presentations/2006/01/microformats-evolution/

More Microformats...
- rel-directory
- hReview
- xFolk for link tagging
- rel-payment for tip-jars
- geo & adr for locations
- hResume
- listings (for sale / want)
- cite and media-info
Colophon
- XHTML
- CSS
- S5 v1.1xoxo
- XOXO
- hCard
- hCalendar
- rel="license"
- Some rights reserved. CC by-2.5
Thanks!

Microformats: Evolving the Web

January 18th, 2006, Cupertino

Microformats

Evolving the Web

Web History 1990s

2000-2001

2002-2003

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

2002-2003

More semantic (X)HTML: better anchors & links

2003: XHTML extensions

2004: Patterns emerge

2005: Cambrian explosion

Why did we extend XHTML?

Requirements

What can you extend?

How should you extend HTML?

Simple Parts

Microformats Principles

Foundation: XMDP

HTML4 XMDP example

HTML4 XMDP example

HTML4 XMDP example

Microformat: linked license

rel-license example

rel-license example

rel-license example

rel-license example

rel-license XMDP profile

rel-license XMDP profile

rel-license XMDP profile

rel-license XMDP profile

rel-license support

Origin of XFN

XFN implementations

People & Events

vCard & iCalendar

hCard

hCard example

hCard

hCard example

hCard

hCard example

hCard

hCard example

More hCard Examples

hCalendar

hCalendar example

hCalendar

hCalendar example

hCalendar

hCalendar example

hCalendar

hCalendar example

More hCalendar Examples

Microformat: outlines

Microformat: outlines

Microformat: outlines

Microformat: outlines

Microformat: presentations

S5+XOXO

More Microformats...

Colophon

Thanks!