Microformats

March 13th 2006 SXSW Interactive

Tantek Çelik Chief Technologist
SXSW Interactive Speakers
- What just happened?
- SXSW Interactive Speakers 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://tantek.com/
                           Tantek 
                            Çelik

                     Chief Technologist
                      http://technorati.com
   Technorati

hCard markup example


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

hCard markup example


<address 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>
</address>

hCard markup example


<address 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>
</address>

More than just "good class names"
- principles keep things "micro"
- process emphasizes getting real
- community minimizes duplicates
Microformats Process
1. pick a specific, simple problem and define it
2. research & document current web publishing behavior
3. document existing formats in the problem area
4. brainstorm with implied schema / reuse names
5. iterate within the community
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
    - Oodle, Edgeio, WordPress plugin
  - hResume - resumes
    - SimplyHired is implementing
  - hReview - reviews
    - JudysBook, Reevoo, more…
  - rel-directory - directory inclusion
    - Technorati
  - rel-payment - for tip-jars
  - xFolk - link tagging
  - … and many more in development…
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.
Microformats 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
- Add a link to it in hCard New Examples
- Add yourself to this session's Attendees section
- Come to the Microformats lunch today
  - Microformats discussion & community meetup
  - 12:45pm - 1:45pm
  - Las Manitas / The Avenue, 211 Congress Ave., & 2nd st.
Colophon
Thanks!
- http://microformats.org/
Appendix: 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"
Appendix: Microformat 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
    - 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

March 13th 2006 SXSW Interactive

SXSW Interactive Speakers

hCard markup example

hCard markup example

hCard markup example

hCard markup example

More than just "good class names"

Microformats Process

Microformats: 2004 → 2006

Microformats: 2004 → 2006

Microformats Community

Microformats Exercise for the Reader

Colophon

Thanks!

http://microformats.org/

Appendix: Microformats Principles

Appendix: Microformat 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">`