-
Microformats
March 7th 2006
O'Reilly ETech
Tantek
Çelik
Chief Technologist
-
-
-
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
-
- pick a specific, simple problem and define it
- research & document current web publishing behavior
- document existing formats in the problem area
- brainstorm with implied schema / reuse names
- iterate within the community
-
Microformats: ETech 2004 → 2006
-
Microformats: ETech 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
- hCalendar - events
- Yahoo Upcoming.org, Eventful.com, more…
- hCard - people & orgs
- Avon.com, Eventful.com, more…
- rel-tag - content tagging
- Technorati, Ice Rocket, more…
-
-
Microformats Community
- IRC
- Email
- Blog
- Wiki
- read through it
- if you find errors, create an account
- fix typos, add examples, help research, brainstorm, etc.
-
Microformats Exercise for the Reader
- Create your own hCard
- 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 BOF Tonight
- Microformats discussion, Q & A, community meetup BOF
- 9:30pm - 10:30pm
- Elizabeth B
-
Colophon
-
Thanks!
-
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
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
- "microformats" introduced
- rel="license" & VoteLinks
- XOXO (XHTML Outlines)
FOO Camp brainstorms
-
-
XHTML Friends Network (XFN) extends 'rel'
-