microformats - how did we get here?

• separation of markup & style
• semantic (X)HTML proficiency
• class names for meaning/IA
• recognizing solved problems
• reusing vocabularies saves time
• reusing also shares meaning
• community established for learning, sharing, collaborating

microformats - common content first

• prioritization
• simple solutions to common problems/content first
• blogroll relationships - XFN
• licenses - rel-license
• lists & outlines - XOXO
• people & organizations - hCard
• events - hCalendar

microformats - common content cont'd

• topics - rel-tag
• ratings & reviews - hReview
• tagged links - xFolk
• locations - adr & geo
• episodic content - hAtom
• enclosed media - rel-enclosure
• for sale/wanted listings - hListing
• resumes - hResume

microformats - just better markup?

• cleanly separated valid semantic publishing
  • maintenance, changes, updates
  • collaboration, team work
  • accessibility
  • diverse device support
• new user benefits
  • easier to move data - less copy/paste
  • subscribing to structured content - events
  • better search
  • re-entering all my contacts problem

Technorati Contact page

• Technorati Contact hCard markup
• hCard to vCard converter
• Link to convert hCards to vCards
• Seamless import into a typical Address Book

hCard markup example

                           http://tantek.com/
                           Tantek 
                            Çelik

hCard markup example

<div              > 
 <a                  href="http://tantek.com/">
  <span                   >Tantek</span> 
  <span                    >Çelik</span>
 </a>
</div>

hCard markup example

<div class="vcard"> 
 <a class="url fn n" href="http://tantek.com/">
  <span class="given-name">Tantek</span> 
  <span class="family-name">Çelik</span>
 </a>
</div>

hCard markup example

<div class="vcard">
 <a class="url fn n" href="http://tantek.com/">
  <span class="given-name">Tantek</span> 
  <span class="family-name">Çelik</span>
 </a>
</div>

What are Microformats?

• Microformats enable the publishing and sharing of higher fidelity information on the Web.
• Building blocks that enable users to own, control, move, and share their data on the Web.
• Small bits of (X)HTML that identify richer data types like people and events in your webpages.
• The fastest and simplest way to provide an API for your website.

More than just "good class names"

• principles keep things "micro"
• process emphasizes getting real
• community minimizes duplicates

Microformats Principles

• solve a specific problem

• 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

• ...if I had insisted everyone use HTTP, this would also have been against the principle of minimal constraint. ... the Web would come as a set of ideas that could be adopted individually in combination with existing or future parts.

• ibid.

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"

Example: rel-license

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

Example: rel-license

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

Example: rel-license

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

Example: rel-license

<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

BarCamp home page

• BarCamp home page with hCalendar markup
• hCalendar to iCalendar converter
• Link to convert hCalendar to iCalendar and subcribe
• Seamless subscription into a calendar application
• Easier than implementing .ics support directly

Example: hCalendar

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

                         Microformats — The Big Pic…

    2007 February 7

Example: hCalendar

<ol                  >
 <li               >
  <a href="http://tantek.com/presentations/..." 
                >
   <span                >Microformats — The Big Pic…</span>

    2007 February 7

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

Example: hCalendar

<ol class="vcalendar">
 <li class="vevent">
  <a href="http://tantek.com/presentations/..." 
     class="url">
   <span class="summary">Microformats — The Big Pic…</span>
   <abbr class="dtstart" title="20070207T1145-0800">
    2007 February 7
   </abbr>
  </a>
 </li>
</ol>

Example: hCalendar

<ol class="vcalendar">
 <li class="vevent">
  <a href="http://tantek.com/presentations/..." 
     class="url">
   <span class="summary">Microformats — The Big Pic…</span>
   <abbr class="dtstart" title="20070207T1145-0800">
    2007 February 7
   </abbr>
  </a>
 </li>
</ol>

Recently released...

• June 2006: Yahoo! Local
  • Over 15 million local business listings with hCards
  • ... local events with hCalendar
  • ... reviews of businesses etc. with hReview
• Edgeio 500k+ hListings
• August 2006: 5M+ Flickr photos with geo
• October 2006: Zooomr profiles with hCard + XFN
• December 2006: Pingerati.net launched — updates distributor
• Technorati Contacts Service and Events Service launched
• Operator - Firefox extension detects hCard, hCalendar, geo, hReview, rel-tag, hResume, more every week
• January 2007: Linkedin - 9M+ hResumes

Operator Demo

Microformats Community

• IRC
  • irc.freenode.net #microformats
    • great place to lurk and learn
• Email
  • join microformats-discuss mailing list
  • public archives
• Blog
  • tag posts with "microformats" tag
• Wiki
  • if you find errors, please fix them, like Wikipedia
  • advocate microformats support on sites you use
  • add examples, help research, brainstorm, etc.
  • help translate!

Microformats Community - New

• Email
  • join microformats-new mailing list
  • for focusing new microformat development and process
• Help develop
  • citation
  • media-info
  • photo notes

Microformat Exercise for the Reader

• Create your own hCard
  • Use the hCard creator
  • or use hCard authoring tips to markup your contact info
• "Add to Address Book" link using Technorati Contacts Service
• Publish it on your site in your about/contact page
• Check it with Operator in Firefox
• Add a link to it in hCard New Examples wiki page
• Ping Pingerati.net with your about/contact page

Colophon

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

Thanks!

• microformats.org

• tantek.com/presentations/2007/02/microformats

Extra stuff