Microformats Practices

13 September 2006 Future of Web Apps, San Francisco

Tantek Çelik Chief Technologist
Future of Web Apps home page
- Future of Web Apps 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://carsonsystems.com/blog/
                           Ryan 
                            Carson

                     Director
                      http://carsonsystems.com/
   Carson Systems

hCard markup example


<div              > 
 <a                  href="http://carsonsystems.com/blog/">
  <span                   >Ryan</span> 
  <span                    >Carson</span>
 </a>
 <span              >Director</span>
 <a             href="http://carsonsystems.com/">
   Carson Systems</a>
</div>

hCard markup example


<div class="vcard"> 
 <a class="url fn n" href="http://carsonsystems.com/blog/">
  <span class="given-name">Ryan</span> 
  <span class="family-name">Carson</span>
 </a>
 <span class="title">Director</span>
 <a class="org" href="http://carsonsystems.com/">
   Carson Systems</a>
</div>

hCard markup example


<div class="vcard">
 <a class="url fn n" href="http://carsonsystems.com/blog/">
  <span class="given-name">Ryan</span> 
  <span class="family-name">Carson</span>
 </a>
 <span class="title">Director</span>
 <a class="org" href="http://carsonsystems.com/">
   Carson Systems</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
Future of Web Apps home page
- Future of Web Apps home page with hCalendar markup
- hCalendar to iCalendar converter
- Link to convert hCalendar to iCalendar
- Seamless import into a calendar application
- Easier than implementing .ics support directly
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/... 

                         Microformats Practices

    13 September 2006

Example: hCalendar


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

    13 September 2006

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

Example: hCalendar


<ol class="vcalendar">
 <li class="vevent">
  <a href="http://tantek.com/presentations/..." 
     class="url">
   <span class="summary">Microformats Practices</span>
   <abbr class="dtstart" title="20060913T1400-0700">
    13 September 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 Practices</span>
   <abbr class="dtstart" title="20060913T1400-0700">
    13 September 2006
   </abbr>
  </a>
 </li>
</ol>

Example: hCalendar + hCard




           http://carsonworkshops.com/summit/

                         The Future of Web Apps

    9/13       -
    
    9/14/2006            at 
  
                       Palace of Fine Arts
                                                    
                                3301 Lyon St.
                           San Francisco       ,
                         CA                     
                              94123

Example: hCalendar + hCard


<ol                  >
 <li               >
  <a href="http://carsonworkshops.com/summit/" 
                >
   <span                >The Future of Web Apps</span>

    9/13       -
    
    9/14/2006       </a> at 
  <div                       >
   <div               >Palace of Fine Arts</div>
   <div            >                                                 
    <div                       >3301 Lyon St.</div>
    <span                 >San Francisco</span>,
    <span               >CA</span>                                        
    <span                    >94123</span></div>
  </div>
 </li>
</ol>

Example: hCalendar + hCard


<ol class="vcalendar">
 <li class="vevent">
  <a href="http://carsonworkshops.com/summit/" 
     class="url">
   <span class="summary">The Future of Web Apps</span>
   <abbr class="dtstart" title="20060913">
    9/13</abbr> -
   <abbr class="dtend" title="20060915">    
    9/14/2006</abbr></a> at 
  <div class="location vcard">
   <div class="fn org">Palace of Fine Arts</div>
   <div class="adr">                                                 
    <div class="street-address">3301 Lyon St.</div>
    <span class="locality">San Francisco</span>,
    <span class="region">CA</span>                                        
    <span class="postal-code">94123</span></div> 
  </div>
 </li>
</ol>

Example: hCalendar + hCard


<ol class="vcalendar">
 <li class="vevent">
  <a href="http://carsonworkshops.com/summit/" 
     class="url">
   <span class="summary">The Future of Web Apps</span>
   <abbr class="dtstart" title="20060913">
    9/13</abbr> -
   <abbr class="dtend" title="20060915">    
    9/14/2006</abbr></a> at 
  <div class="location vcard">
   <div class="fn org">Palace of Fine Arts</div>
   <div class="adr">                                                 
    <div class="street-address">3301 Lyon St.</div>
    <span class="locality">San Francisco</span>,
    <span class="region">CA</span>                                        
    <span class="postal-code">94123</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: ~~3M+~~ 5M+ Flickr photos with geo
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/09/microformats-practices/
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 Practices

13 September 2006 Future of Web Apps, San Francisco

Future of Web Apps home 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

Future of Web Apps home page

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/

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">`