Microformats

Evolving the Web

Tantek Çelik Chief Technologist Technorati
(cc) Creative Commons BY
Archives questions
- How old are your email archives?
- What format do you keep them in?
- What app do you use to browse them?
- ...to search them?
- How many times have you moved them?
- What transfers and what doesn't?
- What do you leave behind?
More archives questions
- What about photos?
- ... or any other kind of data you create?
- What are the oldest data archives you have?
- What disk formats?
- ...or what bus/cable/connection format?
  - E.g. SCSI?
- What file formats?
Recovering your data
- What data do you move when your computer breaks?
- Or when one of your web services breaks?
  - Desktop.com and many others...
- Or when your hard disk crashes?
- Ever recovered from fragments of a file?
- What's recoverable and what isn't?
- What do you lose forever?
Why do we care?
- Archiving, moving, recovering data
- Microformats are NOT trying to solve all these
- Why is this important?
- Might help with designing open data formats
Obligatory Web 2.0 themes
- "You control your own data"
  - Users should own their own data
- Mix & match data & services
  - Requires open data formats & protocols
  - Users are free to move their data
  - away from "broken" interfaces/programs/sites
  - ...into new and better ones
- Why would any company support that?
Companies & open formats

Why companies are supporting open formats:
- Some actually "do the right thing"
- Trust
- More and better tools/source/tests
- Easy importing
- Network effects
- Outgrow the competition
Open data format requirements
- Highly interoperable
- "web friendly"
- Truly open
Web History 1990s
- HTML began structural and semantic
- Browser Wars
- Responses:
  - CSS: separate presentation
  - XML: clean up HTML "mess"
- Implementations raced forward
2000-2001
- Reliable CSS1 support ships!
  - IE5/Mac, Mozilla, IE6/Windows, Opera
- XHTML introduced
- Web designers transition to CSS
  - Fewer <font>s and <table>s
  - Replaced with CSS font-family, float etc.
  - More CSS, less HTML
  - Smaller documents
  - First CSS hacks appear and spread
  - (X)HTML use and proficiency increased
- "pure XML" replacement of HTML...
  - ...still incomplete.
2002-2003

Wired News redesign, CSS tipping point, semantic (X)HTML grows
- More headings and paragraphs
- Less <b>ed and <br>eakfast markup
  old: new:
  <b>had lunch</b> <br> i had lunch today <br>
  
  <h3>had lunch</h3> <p> i had lunch today </p>
- Advantages:
  - Search engine relevance
  - Easier to style more beautifully
- CSS Zen Garden launches
2002-2003

More semantic (X)HTML: better anchors & links
- Blogging tools adopted semantic XHTML more quickly
- Fewer <a>norexic </a>nchors
  old: new:
  <a name="post123"></a> ... <a href="#post123">#</a>
  
  <div id="post123"> ... <a href="#post123" rel="bookmark">#</a> </div>
- Discoverable permalinks!
- 'rel' attribute rediscovered by community
2003: XHTML extensions
- XFN (XHTML Friends Network) extended 'rel' XFN Friendly
- Authoring, Editing, Browsing Tools
  - implemented in days/weeks
- XMDP (XHTML Meta Data Profiles) introduced
  - Formally reference, document XHTML extensions
2004: Patterns emerge
- O'Reilly ETech conference: "real world semantics "
  - "lowercase semantic web" introduced as contrast
  - "microformats" term coined
  - license, VoteLinks "rel" extensions
  - XOXO (eXtensible Open XHTML Outlines) proposed
- XFN poster paper at ACM Hypertext 2004
- FOO Camp simple semantics sessions
  - reuse vCard/iCalendar RFCs 1:1 in XHTML
- Microformats principles documented
2005: Cambrian explosion
- rel="tag" for distributed folksonomies
- rel="nofollow" from Google to fight link spam
- hCard, hCalendar iterated, implemented
- hReview conceived, collaboratively written, published
- XMDP poster paper (#915) at WWW2005
- Microformats Workshop at Supernova Conference
- microformats.org community launched
- Open mailing list, wiki inspired many new efforts
Why did we extend XHTML?
- Limited elements
- Limited compounds
- New / precise semantics
- Share / publish new types of info
- Reveal the "lowercase semantic web"
Requirements
- Stylable!
- Works in modern browsers today
- Benefits with little/no costs
- Easy to hand author
- Embeddable in existing content and contexts
- Avoid duplicating all content
- Avoid requiring more file uploads
What can you extend?
- class [引用]
  The class attribute has several roles in HTML: ...
  
  For general purpose processing by user agents.
- meta [引用]
  For the [name, content] attributes, the permitted values and their interpretation are profile dependent...
- rel, rev, and profile [引用]
  Authors may wish to define additional link types not described in this specification. If they do so, they should use a profile...
How should you do so?
- Avoid
- Methodology
- With profiles
- Peer review
- Community feedback
Simple Parts
- 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
- modularity / embeddability
- decentralized development, content, services
  - explicitly encourage "spirit of the Web"
Foundation: XMDP
- XHTML Meta Data Profiles
- use XHTML to extend itself!
- dictionary of properties
- description and/or dictionary of values
- defines class values, meta properties/values, and new rel/rev
- reference with <head profile="{profileURI}">

old:	new:
`<b>`had lunch`</b> <br>` i had lunch today `<br>`	`<h3>`had lunch`</h3> <p>` i had lunch today `</p>`

old:	new:
`<a name="post123"></a>` ... `<a href="#post123">#</a>`	`<div id="post123">` ... `<a href="#post123"` `rel="bookmark">#</a>` `</div>`

HTML4 XMDP example


 author
 A person who wrote the document.
 keywords
 List of keywords/keyphrases of the document.
 copyright
 Copyright holder(s), statement of copyright.
 date
 Last updated date of the document, in ISO8601.
 identifier
 The normative URI for the document.
 rel
 script
 A reference to a client-side script. With the LINK
 element, the script is evaluated as the document loads and 
 may modify the contents of the document dynamically.

HTML4 XMDP example


 <dl class="profile">
 <dt id='author'> author</dt>
 <dd>A person who wrote the document.</dd>
 <dt id='keywords'> keywords</dt>
 <dd>List of keywords/keyphrases of the document.</dd>
 <dt id='copyright'> copyright</dt>
 <dd>Copyright holder(s), statement of copyright.</dd>
 <dt id='date'> date</dt>
 <dd>Last updated date of the document, in ISO8601.</dd>
 <dt id='identifier'>identifier</dt>
 <dd>The normative URI for the document.</dd>
 <dt id='rel'> rel</dt>
 <dd><dl>
 <dt id='script'> script</dt>
 <dd> A reference to a client-side script. With the LINK
 element, the script is evaluated as the document loads and 
 may modify the contents of the document dynamically.</dd> 
 </dl></dd> 
 </dl>

HTML4 XMDP example


 <dl class="profile">
 <dt id='author'> author</dt>
 <dd>A person who wrote the document.</dd>
 <dt id='keywords'> keywords</dt>
 <dd>List of keywords/keyphrases of the document.</dd>
 <dt id='copyright'> copyright</dt>
 <dd>Copyright holder(s), statement of copyright.</dd>
 <dt id='date'> date</dt>
 <dd>Last updated date of the document, in ISO8601.</dd>
 <dt id='identifier'>identifier</dt>
 <dd>The normative URI for the document.</dd>
 <dt id='rel'> rel</dt>
 <dd><dl>
 <dt id='script'> script</dt>
 <dd> A reference to a client-side script. With the LINK
 element, the script is evaluated as the document loads and 
 may modify the contents of the document dynamically.</dd> 
 </dl></dd> 
 </dl>

Microformat: linked license
- Analogy: linked stylesheet
- New rel value: "license"

rel-license example


 http://creativecommons.org/licenses/by/2.0/
 Some rights reserved. CC by-2.0.

rel-license example


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

rel-license example


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

rel-license example


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

rel-license profile


 rel
 
 license
 Indicates that the referred resource 
 is a license for the referring page.

rel-license profile


 rel
 <dl>
 <dt id="license">license</dt>
 <dd>Indicates that the referred resource 
 is a license for the referring page.</dd>
 </dl>

rel-license profile


<dl class="profile">
 <dt id="rel">rel</dt>
 <dd><dl>
 <dt id="license">license</dt>
 <dd>Indicates that the referred resource 
 is a license for the referring page.</dd>
 </dl></dd>
</dl>

rel-license profile


<dl class="profile">
 <dt id="rel">rel</dt>
 <dd><dl>
 <dt id="license">license</dt>
 <dd>Indicates that the referred resource 
 is a license for the referring page.</dd>
 </dl></dd>
</dl>

Origin of XFN
- Bloggers treat people as URLs
- Blogrolls are a social network
- * = met
- XFN - XHTML Friends Network
- ```
<a rel="met friend"
 href="http://jeff.example.com/blog/">Jeffrey</a>
```
XFN Demo
- Rubhub
- XHTMLFriends.net
People & Events
- Very common "structures" on weblogs
- Create explicit structures
  - in order to easily publish, index, aggregate
- Minimize impact on authors (and developers)
- Avoid duplicating all content
- Avoid requiring file uploads
vCard & iCalendar
- RFC2426 & RFC2445
- Widely adopted and implemented
  - Not SGML/XML markup
- XML/RDF variants exist
  - Can't be easily embedded/styled in (X)HTML
  - Places many constraints on authors
    - E.g. which elements and how to nest
- Conclusion: Try 1:1 mapping into XHTML

hCard

hCard example


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

hCard

hCard 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

hCard 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

hCard 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 hCard Examples
- hCard creator
- This presentation
- 40000+ Avon representatives
- Favelets for copying hCards
- Web Essentials 05 Presenters page
- See more examples in the wild at hCard spec

hCalendar

hCalendar example


 http://tantek.com/presentations/... 
 Microformats: Evolving ...
 October 4th, 2005

hCalendar

hCalendar example


<ol >
 <li >
 <a href="http://tantek.com/presentations/..." 
 >
 <span >Microformats: Evolving ...</span>
 October 4th, 2005
 </a>
 </li>
</ol>

hCalendar

hCalendar example


<ol class="vcalendar">
 <li class="vevent">
 <a href="http://tantek.com/presentations/..." 
 class="url">
 <span class="summary">Microformats: Evolving ...</span>
 <abbr class="dtstart" title="20051004T1200-0700">
 October 4th, 2005
 </abbr>
 </a>
 </li>
</ol>

hCalendar

hCalendar example


<ol class="vcalendar">
 <li class="vevent">
 <a href="http://tantek.com/presentations/..." 
 class="url">
 <span class="summary">Microformats: Evolving ...</span>
 <abbr class="dtstart" title="20051004T1200-0700">
 October 4th, 2005
 </abbr>
 </a>
 </li>
</ol>

More hCalendar Examples
- hCalendar creator
- This presentation
- Sunnyvale House Concerts site
- EVDB and Upcoming.org
- Favelets for hCalendars
- Web Essentials 05 Program
- subscribe to the events on a blog
Microformat: outlines
- XOXO - eXtensible Open XHTML Outlines
```
 topic 1
 point A
 point B
 topic 2
 point C
```

Microformat: outlines

XOXO - eXtensible Open XHTML Outlines


<ol>
 <li>topic 1
 <ol><li>point A</li>
 <li>point B</li></ol></li>
 <li>topic 2
 <ol><li>point C</li></ol></li>
</ol>

Microformat: outlines

XOXO - eXtensible Open XHTML Outlines


<ol class="xoxo">
 <li>topic 1
 <ol><li>point A</li>
 <li>point B</li></ol></li>
 <li>topic 2
 <ol><li>point C</li></ol></li>
</ol>

Microformat: outlines

XOXO - eXtensible Open XHTML Outlines


<ol class="xoxo">
 <li>topic 1
 <ol><li>point A</li>
 <li>point B</li></ol></li>
 <li>topic 2
 <ol><li>point C</li></ol></li>
</ol>

Microformat: presentations
- a presentation is an outline
- reuse XOXO
- as slides
  - class="slide"
- in a presentation
  - class="presentation"
- S5+XOXO

S5+XOXO


<ol class="xoxo presentation">
 <li class="slide">topic 1
 <ol><li>point A</li>
 <li>point B</li></ol></li>
 <li class="slide">topic 2
 <ol><li>point C</li></ol></li>
</ol>

You've just experienced it.
http://tantek.com/presentations/2005/10/microformats-evolution/

More Microformats...
- rel-directory
- hReview
- xFolk for link tagging
- rel-payment for tip-jars
- geo & adr for locations
- hResume
- listings (for sale / want)
- media-metadata
Colophon
- XHTML
- CSS
- S5 v1.1xoxo
- XOXO
- hCard
- hCalendar
- rel="license"
- Some rights reserved. CC by-2.0
Thanks!
Question & Answer

Microformats: Evolving the Web

October 4th, 2005

Microformats

Evolving the Web

Archives questions

More archives questions

Recovering your data

Why do we care?

Obligatory Web 2.0 themes

Companies & open formats

Why companies are supporting open formats:

Open data format requirements

Web History 1990s

2000-2001

2002-2003

Wired News redesign, CSS tipping point, semantic (X)HTML grows

2002-2003

More semantic (X)HTML: better anchors & links

2003: XHTML extensions

2004: Patterns emerge

2005: Cambrian explosion

Why did we extend XHTML?

Requirements

What can you extend?

How should you do so?

Simple Parts

Microformats Principles

Foundation: XMDP

HTML4 XMDP example

HTML4 XMDP example

HTML4 XMDP example

Microformat: linked license

rel-license example

rel-license example

rel-license example

rel-license example

rel-license profile

rel-license profile

rel-license profile

rel-license profile

Origin of XFN

XFN Demo

People & Events

vCard & iCalendar

hCard

hCard example

hCard

hCard example

hCard

hCard example

hCard

hCard example

More hCard Examples

hCalendar

hCalendar example

hCalendar

hCalendar example

hCalendar

hCalendar example

hCalendar

hCalendar example

More hCalendar Examples

Microformat: outlines

Microformat: outlines

Microformat: outlines

Microformat: outlines

Microformat: presentations

S5+XOXO

More Microformats...

Colophon

Thanks!