What are microformats?

11 July 2006 An Event Apart, New York City

Tantek Çelik Chief Technologist
An Event Apart speakers
- An Event Apart speakers page with hCard markup
- hCard to vCard converter
- Link to convert hCards to vCards
- Seamless import into a typical Address Book

hCard markup example



                           http://zeldman.com/
                           Jeffrey 
                            Zeldman

                     Founder and Creative Director
                      http://happycog.com/
   Happy Cog Studios

hCard markup example


<div              > 
 <a                  href="http://zeldman.com/">
  <span                   >Jeffrey</span> 
  <span                    >Zeldman</span>
 </a>
 <span              >Founder and Creative Director</span>
 <a             href="http://happycog.com/">
   Happy Cog Studios</a>
</div>

hCard markup example


<div class="vcard"> 
 <a class="url fn n" href="http://zeldman.com/">
  <span class="given-name">Jeffrey</span> 
  <span class="family-name">Zeldman</span>
 </a>
 <span class="title">Founder and Creative Director</span>
 <a class="org" href="http://happycog.com/">
   Happy Cog Studios</a>
</div>

hCard markup example


<div class="vcard">
 <a class="url fn n" href="http://zeldman.com/">
  <span class="given-name">Jeffrey</span> 
  <span class="family-name">Zeldman</span>
 </a>
 <span class="title">Founder and Creative Director</span>
 <a class="org" href="http://happycog.com/">
   Happy Cog Studios</a>
</div>

What are Microformats?
- Microformats enable the publishing and sharing of higher fidelity information on the Web.
- Small bits of (X)HTML that identify richer data types like people and events in your webpages.
- Building blocks that enable users to own, control, move, and share their data on the Web.
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
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

Example: hCalendar




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

                         What are microformats?

    11 July 2006

Example: hCalendar


<ol                  >
 <li               >
  <a href="http://tantek.com/presentations/..." 
                >
   <span                >What are microformats?</span>

    11 July 2006

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

Example: hCalendar


<ol class="vcalendar">
 <li class="vevent">
  <a href="http://tantek.com/presentations/..." 
     class="url">
   <span class="summary">What are microformats?</span>
   <abbr class="dtstart" title="20060711T1030-0400">
    11 July 2006
   </abbr>
  </a>
 </li>
</ol>

Example: hCalendar


<ol class="vcalendar">
 <li class="vevent">
  <a href="http://tantek.com/presentations/..." 
     class="url">
   <span class="summary">What are microformats?</span>
   <abbr class="dtstart" title="20060711T1030-0400">
    11 July 2006
   </abbr>
  </a>
 </li>
</ol>

Example: hCalendar + hCard




           http://aneventapart.com/events/2006/nyc/ 

                         An Event Apart NYC

    7/10       -
    
    7/11/2006            at 
  
                       Scandinavia House
                                                    
                                58 Park Avenue
                           New York City       ,
                         NY                     
                              10016

Example: hCalendar + hCard


<ol                  >
 <li               >
  <a href="http://aneventapart.com/events/2006/nyc/" 
                >
   <span                >An Event Apart NYC</span>

    7/10       -
    
    7/11/2006       </a> at 
  <div                       >
   <div               >Scandinavia House</div>
   <div            >                                                 
    <div                       >58 Park Avenue</div>
    <span                 >New York City</span>,
    <span               >NY</span>                                        
    <span                    >10016</span></div>
  </div>
 </li>
</ol>

Example: hCalendar + hCard


<ol class="vcalendar">
 <li class="vevent">
  <a href="http://aneventapart.com/events/2006/nyc/" 
     class="url">
   <span class="summary">An Event Apart NYC</span>
   <abbr class="dtstart" title="20060710">
    7/10</abbr> -
   <abbr class="dtend" title="20060712">    
    7/11/2006</abbr></a> at 
  <div class="location vcard">
   <div class="fn org">Scandinavia House</div>
   <div class="adr">                                                 
    <div class="street-address">58 Park Avenue</div>
    <span class="locality">New York City</span>,
    <span class="region">NY</span>                                        
    <span class="postal-code">10016</span></div> 
  </div>
 </li>
</ol>

Example: hCalendar + hCard


<ol class="vcalendar">
 <li class="vevent">
  <a href="http://aneventapart.com/events/2006/nyc/" 
     class="url">
   <span class="summary">An Event Apart NYC</span>
   <abbr class="dtstart" title="20060710">
    7/10</abbr> -
   <abbr class="dtend" title="20060712">    
    7/11/2006</abbr></a> at 
  <div class="location vcard">
   <div class="fn org">Scandinavia House</div>
   <div class="adr">                                                 
    <div class="street-address">58 Park Avenue</div>
    <span class="locality">New York City</span>,
    <span class="region">NY</span>                                        
    <span class="postal-code">10016</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
    - Oodle, Edgeio, WordPress plugin
  - hResume - resumes
    - SimplyHired is 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
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
  - read through it
  - if you find errors, create an account
    - GivennameFamilyname
  - fix typos, add examples, help research, brainstorm, etc.
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!
- http://microformats.org/
- http://tantek.com/presentations/2006/07/what-are-microformats/

What are microformats?

11 July 2006 An Event Apart, New York City

An Event Apart speakers

hCard markup example

hCard markup example

hCard markup example

hCard markup example

What are Microformats?

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

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!

http://microformats.org/

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

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

and `<a rel="bookmark">`