Microformats, Building Blocks, and You
2007-05-25, Metropolitan III, Westin San Francisco Market Street
Tantek Çelik Chief Technologist
microformats
- simple ways to represent common semantics beyond HTML
- blogroll relationships - XFN
- licenses - rel-license
- people & organizations - hCard
- events - hCalendar
- tags and topics - rel-tag
- reviews - hReview
- resumes - hResume
- time chunked content - hAtom
- in ur new microformats pocket cheatsheets by Erin Caton
why microformats
- everybody wants to be more meaningful
- what Dan Cederholm said:
  - human readable - content and formats
  - takes the guess work out of marking up certain things
  - stylable with css
  - applications: user download/subscribe, search engines
  - "Accidental API" - Brian Oberkirch
  - works now.
microformats and internationalization
- Richard Ishida mentioned dates and names
- microformats use the ISO8601 standard for dates and times
- ISO8601 wasn't designed to be human readable
- ... but has become human readable over time
- 2003-02-01 more cross-culturally understandable than 03/02/01
- hCard microformat re-uses IETF standard vCard vocabulary
- e.g. given-name family-name (not first last)
- reuse intl standards/terms = more intl to start with
- lesson for terminology: reuse, don't reinvent
- some concerns with tel/adr 'types' e.g. 'fax', 'home', 'work'
building blocks: HTML and XHTML
- HTML 4.0 semantics, XHTML 1.0 syntax and structure
  - Why not use XHTML 1.1?
    - no benefit
    - required mime type not supported by IE
  - Why not use XHTML 2.0?
    - not supported
    - backward incompatible - cognitive dissonance
  - Why use XHTML instead of HTML?
    - well-formed XML = simple API for free
    - Dan Cederholm's cork'd/GRDDL example
building blocks: POSH
- POSH = Plain Old Semantic HTML
- semantic, not presentational HTML tags/attributes
- don't abuse semantic tags (e.g. table, blockquote)
- use <p> instead of <br><br>
- use headings instead of <b> and <font>
- avoid empty anchors, use 'id' on any element
- semantic class names
- for more POSH tips see: microformats.org/wiki/posh
building blocks: why POSH?
- keep your site IA in-place
- easier to style with CSS
- better default behaviors from more user agents
- accessibility - screen readers
- diverse device support - mobile
- search engine optimization
  - rant tangent
  - avoid unindexed formats exclusively for text, e.g. Flash
  - PDF cannot be trusted, degrades worse than HTML
  - had to use a bitmap to print your cheatsheets
building blocks: microformats and pingerati
- after (or while) POSHifying your site...
- include appropriate microformats
- setup pinging http://pingerati.net/ to distribute your updates
microformats and you
- common examples of when to use which microformats
- about/contact page
  - hCard + Add to Address Book link
- conference page of speakers
  - e.g. @media07 SF speakers
- user profile pages
  - hCard + XFN, ping pingerati.net with updates
  - e.g. Cork'd, Flickr, Technorati, Twitter, Upcoming, Zooomr…
  - add hKit support to import/subscribe others' profile hCards
  - shared user profiles are in reach
  - watch getsatisfaction.com
microformats and you (cont'd)
- common examples of when to use which microformats (cont'd)
- anything episodic
  - hAtom, ping pingerati.net with updates
- event listings
  - hCalendar, ping pingerati.net with updates
  - e.g. Toupeepal.com, BarCamp.org
- your resume
  - hResume, ping pingerati.net when you update it
- reviews, from users etc.
  - hReview + rel-tag, ping…
  - e.g. cork'd wine
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>

BarCamp home page
- BarCamp home page with hCalendar markup
- hCalendar to iCalendar converter
- Link to convert hCalendar to iCalendar and subscribe
- Seamless subscription into a calendar application
  - Outlook 2007, Apple iCal.app both support .ics
- hCalendar easier than direct .ics support
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
- April 2007: members of the 110th US Congress
- May 2007: Twitter - 100k+ hCards + XFN + hAtom
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 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/05/microformats-bb-you
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, Building Blocks, and You

microformats

why microformats

microformats and internationalization

building blocks: HTML and XHTML

building blocks: POSH

building blocks: why POSH?

building blocks: microformats and pingerati

microformats and you

microformats and you (cont'd)

Technorati Contact page

hCard markup example

hCard markup example

hCard markup example

hCard markup example

BarCamp home page

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