Microformats the hidden treasure
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Microformatsthe hidden treasure
What do we usethe web for?
i
feed ➙ RSS
feed ➙ RSS
events ➙ iCalendar
feed ➙ RSS
events ➙ iCalendar
person ➙ vCard
HTML
HTML
vCard iCalendar RSS
HTML
Print version vCard iCalendar RSS
HTML
Print version vCard iCalendar RSS You name
it
HTML
Print version vCard iCalendar RSS You name
it
CSS
CSS
HTML
Print version vCard iCalendar RSS You name
it
Microformats
CSS
HTML
Print version vCard iCalendar RSS You name
it
Microformats ?
Demo
rel
class
class
as a stylesheet selector
for general purpose processing by user
agents
<span class="phone">95123456</span>
<span class="phone">95123456</span> <span class="tel">95123456</span>
<span class="phone">95123456</span> <span class="tel">95123456</span> <span class="mobile">95123456</span>
<span class="phone">95123456</span> <span class="tel">95123456</span> <span class="mobile">95123456</span><span class="telephone">95123456</span>
<span class="phone">95123456</span> <span class="tel">95123456</span> <span class="mobile">95123456</span><span class="telephone">95123456</span> <span class="ph">95123456</span>
agreements
standards
formats
microformats
XHTML Friends Network• contact• acquaintance• friend• met• co-worker• colleague• co-resident• neighbor
• child• parent• spouse• kin• muse• crush• date• sweetheart
• me
<a href="http://maxdesign.com.au/"> Russ</a>
<a href="http://dmitry.baranovskiy.com/"> Dmitry</a>
XHTML Friends Network
<a href="http://maxdesign.com.au/" rel="friend met contact colleague"> Russ</a>
<a href="http://dmitry.baranovskiy.com/" rel="acquaintance met contact colleague"> Dmitry</a>
XHTML Friends Network↩
↩
hCard<div> <h3> Cameron Adams </h3> <div>Web Technologist</div> <dl> <dt>Web Page:</dt> <dd> <a href="http://themaninblue.com">The Man in Blue</a> </dd> </dl></div>
↩
hCard<div class="vcard"> <h3> Cameron Adams </h3> <div>Web Technologist</div> <dl> <dt>Web Page:</dt> <dd> <a href="http://themaninblue.com">The Man in Blue</a> </dd> </dl></div>
↩
hCard<div class="vcard"> <h3 class="fn"> Cameron Adams </h3> <div>Web Technologist</div> <dl> <dt>Web Page:</dt> <dd> <a href="http://themaninblue.com">The Man in Blue</a> </dd> </dl></div>
↩
hCard<div class="vcard"> <h3 class="fn n"> <span class="given-name">Cameron</span> <span class="family-name">Adams</span> </h3> <div>Web Technologist</div> <dl> <dt>Web Page:</dt> <dd> <a href="http://themaninblue.com">The Man in Blue</a> </dd> </dl></div>
↩
hCard<div class="vcard"> <h3 class="fn n"> <span class="given-name">Cameron</span> <span class="family-name">Adams</span> </h3> <div class="title">Web Technologist</div> <dl> <dt>Web Page:</dt> <dd> <a href="http://themaninblue.com">The Man in Blue</a> </dd> </dl></div>
↩
hCard<div class="vcard"> <h3 class="fn n"> <span class="given-name">Cameron</span> <span class="family-name">Adams</span> </h3> <div class="title">Web Technologist</div> <dl> <dt>Web Page:</dt> <dd><a class="url nickname" href="http://themaninblue.com">The Man in Blue</a></dd> </dl></div>
↩
hCard<div class="vcard"> <h3 class="fn n"> <span class="given-name">Cameron</span> <span class="family-name">Adams</span> </h3> <div class="title">Web Technologist</div> <dl> <dt>Web Page:</dt> <dd><a class="url nickname" rel="met friend colleague" href="http://themaninblue.com">The Man in Blue</a></dd> </dl></div>
↩↩
hCalendar<div> <h3> webDU—the web technology conference </h3> <p> webDU 2007 will be held 22–23 March at The Hilton Conference Centre in Sydney. </p></div>
hCalendar<div class="vevent"> <h3 class="summary"> webDU—the web technology conference </h3> <p> webDU 2007 will be held 22–23 March at <span class="location">The Hilton Conference Centre in Sydney</span>. </p></div>
hCalendar<div class="vevent"> <h3 class="summary"> webDU—the web technology conference </h3> <p> webDU 2007 will be held <abbr class="dtstart" title="2007-03-22">22</abbr>–<abbr class="dtend" title="2007-03-23">23 March</abbr> at <span class="location">The Hilton Conference Centre in Sydney</span>. </p></div>
↩↩
ISO 8601
2007-03-22T15:00:00+11:00
22 March 2007 3:00 PM
ISO 8601
2007-03-22T15:00:00+11:00
22 March 2007 3:00 PM
optional
20070322T150000+1100
Patterns
<abbr class="foo" title="ISO 8601"> Human Date Time</abbr>
ABBR Pattern
<object class="include" type="text/html" data="#idref"></object>
<a class="include" href="#idref">…</a>
Include Pattern
What is next?hAtom
hReviewxFolk
hResumeAddress
GeolocationRel-Tag
Rel-License
Title: Microformats—Empowering Your Markup for Web 2.0Author: John AllsoppPublisher: Friends of EdLanguage: EnglishISBN: 1590598148Published: March 26 2007
Title: Using Microformats
Author: Brian SudaPublisher: O’Reilly PublishingLanguage: EnglishISBN: 0596528213Published: September 18 2006
B
Linked in eventful
Pingerati
Related Documents
