Microformats

Evolving the Web

Tantek Çelik Chief Technologist

First, something useful

• Did you go to the Web 2.0 conference?
• Whether you did or didn't...
• Go check out the list of speakers...

What just happened?

• Web 2.0 speakers page marked up with the hCard microformat
• Ran it through the hCard to vCard converter
• And it "just worked" with a typical Address Book

What are Microformats?

• Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards.
• Simple conventions for embedding semantics in HTML to enable decentralized development.

No, really, what are Microformats?

• Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards. Instead of throwing away what works today, microformats intend to solve simpler problems first by adapting to current behaviors and usage patterns (e.g. semantic XHTML, blogging).

But what specifically are Microformats?

• Simple conventions
• for embedding semantic markup
  • for a specific problem domain
• in human-readable (X)HTML/XML documents, Atom/RSS feeds, and "plain" XML
  • that normalize existing content usage patterns
  • using brief, descriptive class names and rel values
  • often based on existing interoperable standards
• to enable decentralized development
  • of resources, tools, and services

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'
• 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 blo.gs and WordPress blogroll UIs
• Rubhub index
• XHTMLFriends.net
• Many more implementations

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

Upcoming.org home page

• upcoming.org
• Subscribe to hCalendar from upcoming.org home page

Principle: 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"

Microformat: linked license

• Analogy: link to a stylesheet with rel="stylesheet"
• Thus: link to a license with rel="license"

rel-license code example

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

rel-license code example

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

rel-license code example

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

rel-license code example

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

rel-license support

• Creative Commons (cc) license chooser
• Yahoo! (cc) search
• Google "Usage Rights" search

vCard & iCalendar

• RFC2426 & RFC2445
• Very 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 code example

                           http://tantek.com/
                           Tantek 
                            Çelik

                     Chief Technologist

        http://technorati.com
   Technorati

hCard

hCard code 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 code 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 code 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
  • Soon on upcoming.org also!
• 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 code example

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

                         Microformats: Evolving ...

    January 18th, 2006

hCalendar

hCalendar code example

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

    February 24th

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

hCalendar

hCalendar code 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="20060224">
    February 24th
   </abbr>
  </a>
 </li>
</ol>

hCalendar

hCalendar code 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="20060224">
    February 24th
   </abbr>
  </a>
 </li>
</ol>

More hCalendar Examples

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

Microformat: outlines

XOXO code example

• 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

• 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/02/microformats-evolution/

More Microformats...

• rel-directory
• rel-payment for tip-jars
• geo & adr for locations
• xFolk for link tagging
• hReview (new! v0.3)
• hAtom
• hResume
• hListing proposal
• media-info being developed

Colophon

• XHTML
• CSS
• S5 v1.1xoxo
• XOXO
• hCard
• hCalendar
• rel="license"
• Some rights reserved. CC by-2.5

Thanks!