Microformats Intro

27 September 2006 The New Context Conference 2006

Tantek Çelik Chief Technologist Technorati
(cc) Creative Commons BY
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
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: 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
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!
- http://microformats.org/
- http://tantek.com/presentations/2006/09/microformats-intro/
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
  - XFN Friendly 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'
  XFN Friendly
  - ```
  <a rel="met friend"
   href="...">Jeffrey</a>
```
- Numerous XFN tools
  - Built into blo.gs, WordPress, etc.
  - Rubhub index
  - XHTMLFriends.net
  - Many more implementations

Microformats Intro

27 September 2006 The New Context Conference 2006

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

Microformats Principles

Microformats Principles

Microformats Principles

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

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