Microformats, Building Blocks, and You
2007-06-07, Business Design Centre, 52 Upper Street, London
Tantek Çelik Chief Technologist
microformats
- simple ways to represent common semantics beyond HTML
- blogroll and profile relationships - XFN
- licenses - rel-license
- people & organisations - hCard
- events - hCalendar
- tags & topics - rel-tag
- reviews - hReview
- resumes - hResume
- time chunked content - hAtom
why microformats
- everyone wants to be more meaningful
- what Dan Cederholm said:
  - human readable - content and formats
  - takes the guesswork 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 & XHTML
- Use HTML 4 semantics, XHTML 1.0 syntax & 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
- a name for what we already do and want
- semantic, not presentational HTML tags/attributes
- don't abuse semantic tags (e.g. <table>, <blockquote>)
- use <p> instead of <br><br>
- use <h1>…<h6> headings instead of <b> & <font>
- avoid empty <a name="…"></a>anchors, use id="…"
- semantic class names
- for more POSH tips see: microformats.org/wiki/posh
building blocks: why POSH?
- in-situ site IA
- 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
    - Cheatsheets, authored with Pages on Mac, output to PDF
    - Looked fine on PC screen, printer printed gibberish
    - Accordingly to Joe Clark, PDF/A can be trusted
microformats and you
- after (or while) POSHifying your site...
- include appropriate microformats
- about/contact page hCard - nearly every site
- people & businesses hCards - every conference, some companies
- user profiles hCards - every SNS / Web 2.0 site?
- anything episodic - hAtom entries - anything blog-like
- event listings in hCalendar - conferences, schedules
- your resume in hResume - independent workers
- user reviews in hReview - rating sites
microformats and you: contact info
- hCard contact info examples
  - Ian McKellar
  - Richard Ishida (new!)
  - Snap
  - W3C webmaster Jean-Guilhem Rouel
  - Technorati
- steps
  - hCard markup visible info: name, URL, address, etc.
  - "Add to Address Book" for one-click user download
  - http://feeds.technorati.com/contacts/URL
    - or download open source X2V XSLT
    - and do the conversion yourself on ur backend
  - Seamless import into a typical Address Book

Contact markup example



                          
          http://technorati.com/  Technorati
                           
                              665 3rd St.
                                Suite 207
                         San Francisco
                       CA
                            94107
                            USA

Contact markup example


<div              > 
 <a                    
    href="http://technorati.com/">Technorati</a>
 <div            > 
  <div                       >665 3rd St.</div>
  <div                         >Suite 207</div>
  <span                 >San Francisco</span>
  <span               >CA</span>
  <span                    >94107</span>
  <div                     >USA</div>
 </div>
</div>

Contact markup example


<div class="vcard"> 
 <a class="url fn org" 
    href="http://technorati.com/">Technorati</a> 
 <div class="adr"> 
  <div class="street-address">665 3rd St.</div>
  <div class="extended-address">Suite 207</div>
  <span class="locality">San Francisco</span>
  <span class="region">CA</span>
  <span class="postal-code">94107</span>
  <div class="country-name">USA</div>
 </div>
</div>
<a href="http://feeds.technorati.com/contacts/…">
 Add to Address Book</a>

Contact markup example


<div class="vcard">
 <a class="url fn org" 
    href="http://technorati.com/">Technorati</a>
 <div class="adr"> 
  <div class="street-address">665 3rd St.</div>
  <div class="extended-address">Suite 207</div>
  <span class="locality">San Francisco</span>
  <span class="region">CA</span>
  <span class="postal-code">94107</span>
  <div class="country-name">USA</div>
 </div>
</div>
<a href="http://feeds.technorati.com/contacts/…">
 Add to Address Book</a>

microformats and you: people & businesses
- examples of lists of people and/or businesses
  - @media07 Europe speakers - conference presenters
  - @media07 Europe venue - interactive location, hotels, bars
  - Technorati Staff page - employees
  - UK Car Garages - business listings
  - 110th US Congress - politicians
  - This presentation - most mentions of people & companies
- steps
  - hCard markup like contacts, perhaps inline in prose
  - see Jeremy Keith's Natural language hCard essay
  - "Add to Address Book" links or perhaps buttons

Person markup example



                           http://tantek.com/
                           Tantek 
                            Çelik            is 
                     Chief Technologist        at
                   Technorati       .

Person markup example


<span              > 
 <a                  href="http://tantek.com/">
  <span                   >Tantek</span> 
  <span                    >Çelik</span></a> is
 <span              >Chief Technologist</span> at 
 <span            >Technorati</span>.
</span>

Person markup example


<span class="vcard"> 
 <a class="url fn n" href="http://tantek.com/">
  <span class="given-name">Tantek</span> 
  <span class="family-name">Çelik</span></a> is 
 <span class="title">Chief Technologist</span> at 
 <span class="org">Technorati</span>.
</span>

Person markup example


<span class="vcard">
 <a class="url fn n" href="http://tantek.com/">
  <span class="given-name">Tantek</span> 
  <span class="family-name">Çelik</span></a> is 
 <span class="title">Chief Technologist</span> at
 <span class="org">Technorati</span>.
</span>

Tantek Çelik is Chief Technologist at Technorati.

microformats and you: user profiles
- user profiles marked up with hCard
  - Cork'd profile
  - Flickr profile
  - Last FM profile
  - Technorati profile
  - Twitter profile
  - Upcoming profile
  - Yedda profile
  - and many more...
- steps
  - hCard profile info + XFN relationships
  - XFN rel="me" on links to other identity facet(s)
  - XFN rel="contact" on links to contacts etc.
  - ping pingerati.net with updates

Profile markup example


<span class="vcard">
 <a class="url fn n" href="http://tantek.com/">
  <span class="given-name">Tantek</span> 
  <span class="family-name">Çelik</span></a> is 
 <span class="title">Chief Technologist</span> at
 <span class="org">Technorati</span>.
</span>

Profile markup example


<span class="vcard"> 
 <a rel="me" 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> 
 <span class="org">Technorati</span>
</span>

Profile markup example


<span class="vcard">
 <a rel="me" 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> 
 <span class="org">Technorati</span>
</span>

microformats and you: user profiles (cont'd)
- subscribe to profiles
  - add hKit support to enable user profile importing/subscribing
  - shared user profiles are in reach
  - AKA portable social networks
  - watch getsatisfaction.com
microformats and you: anything episodic
- examples
- steps
  - hAtom markup visible episode summary, content, tags etc.
  - ping pingerati.net with updates
microformats and you: event listings
- examples
  - Barcamp - community organized conferences
  - Eventful - event database
  - ToupeePal - speaking / touring
  - Upcoming - user entered events
  - XTech 2007 schedule - conference program
  - and many more…
- steps
  - hCalendar markup event summary, time, location, etc.
  - "Add to Calendar" for one-click user download
  - http://feeds.technorati.com/events/URL
  - "Subscribe to Calendar" for one-click user subscription
  - webcal://feeds.technorati.com/events/URL
  - Seamless import & subscribe into calendar apps
    - Outlook 2007, Apple iCal.app, Mozilla Sunbird, etc.
  - hCalendar easier than direct .ics support
  - ping pingerati.net with updates
microformats and you: resumes
- examples
  - LinkedIn
  - and many individual sites
- steps
  - hResume markup visible info, jobs, education, skills.
  - ping pingerati.net with updates
microformats and you: user reviews
- examples
- steps
  - hReview markup item info, rating(s), tags, reviewer
  - ping pingerati.net with updates
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
Microformats Community
- IRC
  - irc.freenode.net #microformats
    - great place to lurk and learn
- 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!
- Blog
  - tag posts with "microformats" tag
- Email
  - join microformats-discuss mailing list
  - public archives
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 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/06/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 & XHTML

building blocks: POSH

building blocks: why POSH?

microformats and you

microformats and you: contact info

Contact markup example

Contact markup example

Contact markup example

Contact markup example

microformats and you: people & businesses

Person markup example

Person markup example

Person markup example

Person markup example

microformats and you: user profiles

Profile markup example

Profile markup example

Profile markup example

microformats and you: user profiles (cont'd)

microformats and you: anything episodic

microformats and you: event listings

microformats and you: resumes

microformats and you: user reviews

Microformats: 2004 → 2007

Microformats: 2004 → 2007

Recently released...

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