Microformats

Data Formats That Put Humans First

2007 April 30 — Lando 4204, The Venetian, Las Vegas, NV
Tantek Çelik Chief Technologist
Disclosure / Past Affiliations
- worked for Microsoft for 7+ years (1997-2004)
- IE5/Mac
- represented in W3C CSS, HTML, XForms groups
- browser engines for various set-top boxes
- other things I can't talk about
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>

microformats - how did we get here?
- separation of markup & style
- return to semantic HTML (POSH)
- 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
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
  - Outlook 2007, Apple iCal.app both support .ics
- hCalendar easier than direct .ics support

Example: hCalendar




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

                         Microformats: for Humans

    2007 April 30

Example: hCalendar


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

    2007 April 30

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

Example: hCalendar


<ol class="vcalendar">
 <li class="vevent">
  <a href="http://tantek.com/presentations/..." 
     class="url">
   <span class="summary">Microformats: for Humans</span>
   <abbr class="dtstart" title="2007-04-30T13:30-0700">
    2007 April 30
   </abbr>
  </a>
 </li>
</ol>

Example: hCalendar


<ol class="vcalendar">
 <li class="vevent">
  <a href="http://tantek.com/presentations/..." 
     class="url">
   <span class="summary">Microformats: for Humans</span>
   <abbr class="dtstart" title="2007-04-30T13:30-0700">
    2007 April 30
   </abbr>
  </a>
 </li>
</ol>

What are Microformats?
- Microformats enable the publishing and sharing of higher fidelity information on the Web.
- Building blocks that enable users to own, control, and share their data on the Web.
- Small bits of HTML that represent data types like people and events in your webpages.
- Fastest & simplest way to publish an API for your website.
microformats - just better markup?
- built on valid semantic HTML (POSH)
  - as with HTML, broadly human read/writable/editable
  - easier maintenance, updates, collaboration, team work
  - better default behaviors from more user agents
  - accessibility - screen readers
  - diverse device support - mobile
  - search engine optimization
- 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/3.0/
         Some rights reserved. CC by-3.0.

Example: rel-license


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

Example: rel-license


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

Example: rel-license


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

rel-license support
- Creative Commons (cc) license chooser
- Yahoo! (cc) search
- Google "Usage Rights" search
Microformats: 2004 → 2007
- - 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 → 2007
- - 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
    - Y! Upcoming, Eventful, LiveClipboard, more…
  - hCard - people & orgs
    - Y! Local, Flickr/Zooomr/Technorati profiles, LiveClipboard, more…
  - rel-tag - content tagging
    - Technorati, Ice Rocket, more…
- - adr & geo - for locations
    - Flickr geotagged photos
  - hAtom - syndication
    - Wordpress templates
  - hListing - classifieds
    - Edgeio, Oodle, WordPress plugin
  - hResume - resumes
    - Linkedin, Operator
  - hReview - reviews
    - Cork'd, JudysBook, Reevoo, more…
  - rel-directory - directory inclusion
    - Technorati Blog Finder
  - rel-payment - for tip-jars
  - xFolk - link tagging
  - … and many more…, e.g. directions.
Recently released...
- 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
- March 2007: SXSW 2007 - 500+ speaker 1000+ band hCards
- hCard in Wikipedia bios with Infobox templates
- Today: members of the 110th US Congress
Operator Demo
- 110th US Congress
  - Thanks to Carl of the Sunlight Foundation
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!
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 Technorati Contacts Service
- Publish it on your site in your about/contact page
- Check it with Operator in Firefox
- Add LiveClipboard support for Web copy/paste
- Add a link to it in hCard New Examples wiki page
- Ping Pingerati.net with your about/contact page
- Add it to the Attending section of this event's wiki page
Colophon
- XHTML
- CSS
- S5 v1.1xoxo
- XOXO
- hCard
- hCalendar
- rel="license"
- Some rights reserved. CC by-3.0
Thanks!
- microformats.org
- tantek.com/presentations/2007/04/microformats
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

Data Formats That Put Humans First

Disclosure / Past Affiliations

Technorati Contact page

hCard markup example

hCard markup example

hCard markup example

hCard markup example

microformats - how did we get here?

microformats - common content first

BarCamp home page

Example: hCalendar

Example: hCalendar

Example: hCalendar

Example: hCalendar

What are Microformats?

microformats - just better markup?

Microformats Principles

Microformats Principles

Microformats Principles

Microformat: linked license

Example: rel-license

Example: rel-license

Example: rel-license

Example: rel-license

rel-license support

Microformats: 2004 → 2007

Microformats: 2004 → 2007

Recently released...

Operator Demo

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