Microformats 101

2006 October 7 Silicon Valley Code Camp

Tantek Çelik Chief Technologist
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

                     Chief Technologist
                      http://technorati.com/
   Technorati

hCard markup example


<div              > 
 <a                  href="http://tantek.com/">
  <span                   >Tantek</span> 
  <span                    >Çelik</span>
 </a>
 <span              >Chief Technologist</span>
 <a             href="http://technorati.com/">
   Technorati</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>
 <span class="title">Chief Technologist</span>
 <a class="org" href="http://technorati.com/">
   Technorati</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>
 <span class="title">Chief Technologist</span>
 <a class="org" href="http://technorati.com/">
   Technorati</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.
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
Example: blog quote
- <cite> & <blockquote> elements

Example: blog quote

<cite> & <blockquote> elements


<p>      Eric Meyer        wrote:</p>

<p>
 What's so interesting to me is that the guys who decided 
 to focus on the positive went out and did something; 
 those who want to mix in the negative seem to have 
 nothing to offer except complaints.
</p>

<p>An excellent contrast between those who want to 
build new things and those who want to tear them down.
</p>

Example: blog quote

<cite> & <blockquote> elements


<p><cite>Eric Meyer</cite> wrote:</p>
<blockquote>
<p>
 What's so interesting to me is that the guys who decided 
 to focus on the positive went out and did something; 
 those who want to mix in the negative seem to have 
 nothing to offer except complaints.
</p>
</blockquote>
<p>An excellent contrast between those who want to 
build new things and those who want to tear them down.
</p>

Example: blog quote

<cite> & <blockquote> elements


<p><cite>Eric Meyer</cite> wrote:</p>
<blockquote cite="http://meyerweb.../social-protocols/">
<p>
 What's so interesting to me is that the guys who decided 
 to focus on the positive went out and did something; 
 those who want to mix in the negative seem to have 
 nothing to offer except complaints.
</p>
</blockquote>
<p>An excellent contrast between those who want to 
build new things and those who want to tear them down.
</p>

Example: blog quote

<cite> & <blockquote> elements


<p><cite>Eric Meyer</cite> wrote:</p>
<blockquote cite="http://meyerweb.../social-protocols/">
<p>
 What's so interesting to me is that the guys who decided 
 to focus on the positive went out and did something; 
 those who want to mix in the negative seem to have 
 nothing to offer except complaints.
</p>
</blockquote>
<p>An excellent contrast between those who want to 
build new things and those who want to tear them down.
</p>

Example: blog quote with microformats

add a link, since the source is on the Web


<p><cite              >
<a href="http://meyerweb.com"
                            >Eric Meyer</a>
</cite> wrote:</p>
<blockquote cite="http://meyerweb.../social-protocols/">
<p>
 What's so interesting to me is that the guys who decided 
 to focus on the positive went out and did something; 
 those who want to mix in the negative seem to have 
 nothing to offer except complaints.
</p>
</blockquote>
<p>An excellent contrast between those who want to 
build new things and those who want to tear them down.
</p>

Example: blog quote with microformats

add hCard since Eric is a person


<p><cite class="vcard">
<a href="http://meyerweb.com" class="url fn"
                            >Eric Meyer</a>
</cite> wrote:</p>
<blockquote cite="http://meyerweb.../social-protocols/">
<p>
 What's so interesting to me is that the guys who decided 
 to focus on the positive went out and did something; 
 those who want to mix in the negative seem to have 
 nothing to offer except complaints.
</p>
</blockquote>
<p>An excellent contrast between those who want to 
build new things and those who want to tear them down.
</p>

Example: blog quote with microformats

add XFN since we know Eric


<p><cite class="vcard">
<a href="http://meyerweb.com" class="url fn" 
  rel="met friend colleague">Eric Meyer</a>
</cite> wrote:</p>
<blockquote cite="http://meyerweb.../social-protocols/">
<p>
 What's so interesting to me is that the guys who decided 
 to focus on the positive went out and did something; 
 those who want to mix in the negative seem to have 
 nothing to offer except complaints.
</p>
</blockquote>
<p>An excellent contrast between those who want to 
build new things and those who want to tear them down.
</p>

Example: blog quote with microformats

<cite>, <blockquote>, hCard & XFN


<p><cite class="vcard">
<a href="http://meyerweb.com" class="url fn" 
  rel="met friend colleague">Eric Meyer</a>
</cite> wrote:</p>
<blockquote cite="http://meyerweb.../social-protocols/">
<p>
 What's so interesting to me is that the guys who decided 
 to focus on the positive went out and did something; 
 those who want to mix in the negative seem to have 
 nothing to offer except complaints.
</p>
</blockquote>
<p>An excellent contrast between those who want to 
build new things and those who want to tear them down.
</p>

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"
Microformats Process
- pick a specific, simple problem and define it
- research & document current web publishing behavior
- document existing formats in the problem area
- brainstorm with implied schema / reuse names
- iterate within the community
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 101

    7 October 2006

Example: hCalendar


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

    7 October 2006

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

Example: hCalendar


<ol class="vcalendar">
 <li class="vevent">
  <a href="http://tantek.com/presentations/..." 
     class="url">
   <span class="summary">Microformats 101</span>
   <abbr class="dtstart" title="20061007T1345-0700">
    7 October 2006
   </abbr>
  </a>
 </li>
</ol>

Example: hCalendar


<ol class="vcalendar">
 <li class="vevent">
  <a href="http://tantek.com/presentations/..." 
     class="url">
   <span class="summary">Microformats 101</span>
   <abbr class="dtstart" title="20061007T1345-0700">
    7 October 2006
   </abbr>
  </a>
 </li>
</ol>

Example: hCalendar + hCard




           http://siliconvalley-codecamp.com/

                         Silicon Valley Code Camp

    10/7       -
    
    10/8/2006            at 
  
                       Foothill College
                                                    
                                12345 El Monte Blvd.
                           Los Altos Hills       ,
                         CA                     
                              94022

Example: hCalendar + hCard


<ol                  >
 <li               >
  <a href="http://siliconvalley-codecamp.com/" 
                >
   <span                >Silicon Valley Code Camp</span>

    10/7       -
    
    10/8/2006       </a> at 
  <div                       >
   <div               >Foothill College</div>
   <div            >                                                 
    <div                       >12345 El Monte Blvd.</div>
    <span                 >Los Altos Hills</span>,
    <span               >CA</span>                                        
    <span                    >94022</span></div>
  </div>
 </li>
</ol>

Example: hCalendar + hCard


<ol class="vcalendar">
 <li class="vevent">
  <a href="http://siliconvalley-codecamp.com/" 
     class="url">
   <span class="summary">Silicon Valley Code Camp</span>
   <abbr class="dtstart" title="20061007">
    10/7</abbr> -
   <abbr class="dtend" title="20061009">    
    10/8/2006</abbr></a> at 
  <div class="location vcard">
   <div class="fn org">Foothill College</div>
   <div class="adr">                                                 
    <div class="street-address">12345 El Monte Blvd.</div>
    <span class="locality">Los Altos Hills</span>,
    <span class="region">CA</span>                                        
    <span class="postal-code">94022</span></div> 
  </div>
 </li>
</ol>

Example: hCalendar + hCard


<ol class="vcalendar">
 <li class="vevent">
  <a href="http://siliconvalley-codecamp.com/" 
     class="url">
   <span class="summary">Silicon Valley Code Camp</span>
   <abbr class="dtstart" title="20061007">
    10/7</abbr> -
   <abbr class="dtend" title="20061009">    
    10/8/2006</abbr></a> at 
  <div class="location vcard">
   <div class="fn org">Foothill College</div>
   <div class="adr">                                                 
    <div class="street-address">12345 El Monte Blvd.</div>
    <span class="locality">Los Altos Hills</span>,
    <span class="region">CA</span>                                        
    <span class="postal-code">94022</span></div> 
  </div>
 </li>
</ol>

Microformats: 2004 → 2006
- - XFN - distributed social network
    - blo.gs, WordPress, Rubhub, more…
  - rel-license - license links
  - XOXO - lists and outlines
  - VoteLinks - for/against/abstain a link
Microformats: 2004 → 2006
- - XFN - distributed social network
    - blo.gs, WordPress, Rubhub, more…
  - rel-license - license links
    - CC Creator, Yahoo CC search, Google Search
  - XOXO - lists and outlines
    - WordPress, Technorati, more…
  - VoteLinks - for/against/abstain a link
    - Technorati
  - hCalendar - events
    - Yahoo Upcoming.org, Eventful.com, more…
  - hCard - people & orgs
    - Avon.com, Eventful.com, more…
  - rel-tag - content tagging
    - Technorati, Ice Rocket, more…
- - adr & geo - for locations
  - hAtom - syndication
  - hListing - classifieds
    - Edgeio, Oodle, WordPress plugin
  - hResume - resumes
    - Linkedin and SimplyHired are implementing
  - hReview - reviews
    - JudysBook, Reevoo, more…
  - rel-directory - directory inclusion
    - Technorati Blog Finder
  - rel-payment - for tip-jars
  - xFolk - link tagging
  - … and many more in development…
Recently released...
- May 2006: Technorati Microformats Search preview
  - search for contacts, events, reviews
- Pingerati.net microformat updates distributor
- June 2006: Yahoo! Local
  - Over 15 million local business listings with hCards
  - ... local events with hCalendar
  - ... reviews of businesses etc. with hReview
- Edgeio 465,000+ hListings
- BlogSkins 340,000+ user profiles with hCard
- August 2006: 5M+ Flickr photos with geo
- October 2006: Zooomr profiles with hCard + XFN
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
  - add examples, help research, brainstorm, etc.
  - help translate!
Microformat Exercise for the Reader
- Create your own hCard
  - Use the hCard creator
  - or use hCard authoring tips to markup your contact info
- Publish it on your site in your about/contact page
- Add a link to it in hCard New Examples
- 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/2006/10/microformats-101
Extra stuff
semantic markup history
- 2000-2002
  - Broad CSS1 support
    - IE5/Mac, Moz, IE6/Win, Opera
  - web designers use more CSS
    - less presentational markup
    - <table> & <font>
    - float & font-family
    - Smaller documents
  - web designers rediscover semantic (X)HTML
  - less <b><br> more <h3><p>
  - Search engine relevance
    Easier to style
- 2003
  - CSS Zen Garden launched
  - Blogging tools adopt more semantic (X)HTML
  - <a name> → <div id>
    
    and <a rel="bookmark">
  - 'rel' attribute rediscovered
  - blogrolls link people/URLs
  - extends 'rel'
    - ```
    <a rel="met friend"
       href="…">Jeffrey</a>
```
- Built into blo.gs, WordPress, etc.
- 2004
  - O'Reilly ETech conference
    - "microformats" introduced
    - rel="license" & VoteLinks
    - XOXO (XHTML Outlines)
  - more semantic class names
  - FOO Camp brainstorms
    - A. Bosworth: HTML For Calendars
    - vCard/iCal as HTML classes?
    - Ray Ozzie told me to go for it
    - hCard and hCalendar drafted
  - microformats principles
  - microformats process
- less <b>ed & <br>eakfast
  - ```
  <b>lunch</b>
  <br>
  mmm… cheese sandwich
  <br>
```
- ```
<h3>lunch</h3>
<p>
mmm… cheese sandwich
</p>
```
- fewer <a>norexic </a>nchors
  - ```
  <a name="post123"></a> …
  <a href="#post123">#</a>
```
- ```
<div id="post123"> …
<a href="#post123" 
   rel="bookmark">#</a>
</div>
```
- XHTML Friends Network (XFN) extends 'rel'
  - ```
  <a rel="met friend"
     href="…">Jeffrey</a>
```
- Numerous XFN tools
  - Built into blo.gs, WordPress, etc.
  - Rubhub index
  - XHTMLFriends.net
  - Many more implementations

Microformats 101

2006 October 7 Silicon Valley Code Camp

Technorati Contact page

hCard markup example

hCard markup example

hCard markup example

hCard markup example

What are Microformats?

Microformat: linked license

Example: rel-license

Example: rel-license

Example: rel-license

Example: rel-license

rel-license support

Example: blog quote

Example: blog quote

Example: blog quote

Example: blog quote

Example: blog quote

Example: blog quote with microformats

Example: blog quote with microformats

Example: blog quote with microformats

Example: blog quote with microformats

More than just "good class names"

Microformats Principles

Microformats Principles

Microformats Principles

Microformats Process

BarCamp home page

Example: hCalendar

Example: hCalendar

Example: hCalendar

Example: hCalendar

Example: hCalendar + hCard

Example: hCalendar + hCard

Example: hCalendar + hCard

Example: hCalendar + hCard

Microformats: 2004 → 2006

Microformats: 2004 → 2006

Recently released...

Microformats Community

Microformat Exercise for the Reader

Colophon

Thanks!

microformats.org

Extra stuff

semantic markup history

2000-2002

Broad CSS1 support

web designers use more CSS

web designers rediscover semantic (X)HTML

less <b><br> more <h3><p>

Search engine relevance

Easier to style

2003

CSS Zen Garden launched

Blogging tools adopt more semantic (X)HTML

<a name> → <div id>

and <a rel="bookmark">

'rel' attribute rediscovered

blogrolls link people/URLs

extends 'rel'

2004

O'Reilly ETech conference

more semantic class names

FOO Camp brainstorms

microformats principles

microformats process

less <b>ed & <br>eakfast

fewer <a>norexic </a>nchors

XHTML Friends Network (XFN) extends 'rel'

Numerous XFN tools

less `<b><br>` more `<h3><p>`

`<a name>` → `<div id>`

and `<a rel="bookmark">`