140 likes | 229 Views
Explore the world of microformats, adding meaning to web content with "class" and "rel" attributes in existing XHTML. Learn how microformats bridge the gap between human-readable content and machine-understandable data. Discover the simplicity and power of microformats in web design.
E N D
Microformats and hAtom David P. Janes Founder, BlogMatrix
Microformats at 10,000 feet • existing XHTML presentation • PLUS “class” and “rel” attributes added to express semantics
Microformats close up • augment existing presentation with semantic data • the (lower case) semantic web realized in XHTML • built on what people are doing, not what we think they should be doing • built from existing standards and composited from other microformats
Microformats are not… • a new language or data format • a panacea, an open ended solution, the answer to all questions • a new approach to the web • scraping
Microformats are • incremental • simple • humans first, machine second… • … but well-defined
An example. This… <a href="http://tantek.com/"> Tantek Çelik </a> Technorati
… becomes this … <div class="vcard"> <a class="url fn" href="http://tantek.com/"> Tantek Çelik </a> <div class="org">Technorati</div> </div>
… and means this … BEGIN:VCARD VERSION:3.0 N:Çelik;Tantek FN:Tantek Çelik URL:http://tantek.com ORG:Technorati END:VCARD
Example Microformats • hCalendar • hCard • RelNoFollow • RelTag • XFN • XOXO • … and hAtom
The Microformat Process • thoroughly document examples from the web • identify: • common semantic elements from examples • analogies to existing standards • the potential to reuse existing microformats • and reuse (or properly use) HTML elements • design…
Microformats Design Patterns • class • rel • abbr • datetime
Why Microformats (and not something else)? • easy to produce • tweaking existing templates • same database • … still work needed on tools … • easy to consume • javascript • Greasemonkey • and from any language
hAtom • systematically identifies microcontent • weblogs • newspages • many uses • better searches • reblogging • printing… • easy to generate • just template work
What does it look like? <div class="feed"> <div class="entry"> <h3>...</h3> <div class="content">...</div> <address>...</div> <abbr class="published" title="20051125T184500Z">.. </abbr> </div> </div>