microformats

Introduction to MicroformatsThe New York Web Standards Meetup Group22 May 2008

Jeffrey Barke . Senior Developer / Information Architect

About microformats

What are microformats?

• Designed for humans first and machines second, microformats are a setof simple, open data formats built upon existing and widely adoptedstandards. –Dan Cedarholm with Tantek Çelik for launch ofmicroformats.org

• Microformats are simple conventions for embedding semantics in HTMLto enable decentralized development. –from the mailing list

• Microformats are carefully designed (X)HTML class names that extendthe semantics of (X)HTML and enable authors to publish highersemantic fidelity content such as people, events, reviews, etc. –TantekÇelik

• Microformats are a way of identifying and labeling classes of commonlyused data that make it easier for humans or computers to locate ordistribute such information on websites. --Dave Sanford

Source: http://microformats.org/wiki/what-are-microformats

Introduction to Microformats • The New York Web Standards Meetup Group / 22 May 2008

What are microformats? (cont’d)

• A microformat (sometimes abbreviated μF or uF) is a web-based dataformatting approach that seeks to re-use existing content as metadata,using only XHTML and HTML classes and other attributes. Thisapproach is intended to allow information intended for end-users (suchas contact information, geographic coordinates, calendar events, andthe like) to also be automatically processed by software.

Source: http://en.wikipedia.org/wiki/Microformats


Why use microformats?

• Aggregation sites– The general model is the user travels to a particular site, and then

proceeds to enter data (classified add, review, list of friends) for aparticular purpose. Your information is scattered all over the Web,and you have to pick which sites you want to use.

– The combination of blogging and microformats is now reversing thismodel. Now, your information remains in your blog, and the Websites come to you. For instance, if you want to sell something, youcan blog about it using an hListing, and a site like edgeio will findit when it aggregates classified advertisements across the Web.

Source: http://blog.mozilla.com/faaborg/2006/12/11/microformats-part-0-introduction/


Why use microformats? (cont’d)

• Sharing information with a specific community– Let’s say you enjoy mountain biking, and would like to share various

trails with other people who also enjoy mountain biking. If youposted this information to your blog, you could geocast (RSS with apayload of geo), the locations of the mountain bike trails, and otherpeople in the community could subscribe to this feed using anapplication like Google Earth.

• Targeted search– Let’s say you are creating a web comic, and you want other people

to be able to find it. By posting your comic with a microformatagreed upon by the web comic community, the rest of thecommunity will be able to easily find your work using a searchengine.

Source: http://blog.mozilla.com/faaborg/2006/12/11/microformats-part-0-introduction/


Why use microformats? (cont’d)

• CSS convenience– Use semantic classes for styling instead of ad-hoc names: “Why

invent your own class names when you can re-use pre-definedones that give your site extra functionality for free?”

• Enhanced user experience (with the proper browser or plugins)– Version 3 of the Firefox as well as version 8 of Internet Explorer are

expected to include native support for microformats• Ability to leverage markup for your own uses (we’ll see an example of

this later)


Who’s creating the microformats?

• Microformats emerged as part of a grassroots movement to makerecognizable data items (such as events, contact details or geographicallocations) capable of automated processing by software, as well asdirectly readable by end-users.

• As the microformats community grew, CommerceNet, a nonprofitorganization that promotes electronic commerce on the Internet, helpedsponsor and promote the technology and support the microformatscommunity in various ways. CommerceNet also helped co-found themicroformats community site microformats.org.



Who’s creating the microformats? (cont’d)

• Neither CommerceNet nor Microformats.org is a standards body. Themicroformats community is an open wiki, mailing list, and Internet relaychat (IRC) channel. Most of the existing microformats were created atthe Microformats.org wiki and associated mailing list, by a process ofgathering examples of web publishing behaviour, then codifying it. Someother microformats (such as rel=nofollow and unAPI) have beenproposed, or developed, elsewhere.

• Some names associated with microformats:– Dan Cedarholm– Tantek Çelik– Drew McLellan– Eric A. Meyer



Where the specs are located and how to get involved

• Blog: http://microformats.org/• Wiki: http://microformats.org/wiki/Main_Page• Email list: http://microformats.org/discuss/• IRC: irc://irc.freenode.net#microformats


Using microformats

Microformat specifications and drafts

• http://microformats.org/wiki/Main_Page#Specifications• The ones I use:

– Specifications• hCalendar• hCard• rel-license• rel-nofollow• rel-tag

– Drafts• adr• geo


hCard

• hCard is a simple, open, distributed format for representing people,companies, organizations, and places, using a 1:1 representation ofvCard (RFC2426) properties and values in semantic HTML or XHTML

• Spec: http://microformats.org/wiki/hcard• Probably easiest way to learn the format is by example:

http://microformats.org/code/hcard/creator• The root class name for an hCard is "vcard". An element with a class

name of "vcard" is itself called an hCard.


hCalendar

• hCalendar is a simple, open, distributed calendaring and events format,based on the iCalendar standard (RFC2445), suitable for embedding inHTML or XHTML, Atom, RSS, and arbitrary XML.

• Spec: http://microformats.org/wiki/hcalendar• Probably easiest way to learn the format is by example:

http://microformats.org/code/hcalendar/creator• Note–the dtstart and dtend classes must be applied to abbr

elements.• DATE_FORMAT(startdate, \'%Y-%m-%dT%H:%i:00\') AS

startdate


Rel-License

• Rel-License is a simple, open, format for indicating content licenseswhich is embeddable in HTML or XHTML, Atom, RSS, and arbitraryXML

• Spec: http://microformats.org/wiki/rel-license• Rel-License is one of several MicroFormats. By adding rel="license" to a

hyperlink, a page indicates that the destination of that hyperlink is alicense for the current page.– E.g. with the following hyperlink: <a

href="http://creativecommons.org/licenses/by/2.0/" rel="license">ccby 2.0</a> the author indicates that the page is licensed under aCreative Commons 2.0 Attribution Required license.

• Multiple such rel="license" hyperlinks indicate that the page is availableunder any of the referred licenses. E.g. the following hyperlinks could beused to declare that a page is available under either a CreativeCommons 2.0 Attribution Required license or the Apache 2.0 license.


Rel-License (cont’d)

• Creative Commons license chooser: http://creativecommons.org/license/• Dreamweaver Extension suite

(http://www.webstandards.org/action/dwtf/microformats/) fromthe Web Standards Project (http://webstandards.org/) enables theauthoring of rel-license links from within Dreamweaver 8. Includes (cc)defaults.


Rel-Tag

• Spec: http://microformats.org/wiki/rel-tag• By adding rel="tag" to a hyperlink, a page indicates that the destination

of that hyperlink is an author-designated "tag" (or keyword/subject) forthe current page. Note that a tag may just refer to a major portion of thecurrent page (i.e. a blog post). e.g. by placing this link on a page, <ahref="http://technorati.com/tag/tech" rel="tag">tech</a> the authorindicates that the page (or some portion of the page) has the tag "tech".The linked page SHOULD exist, and it is the linked page, rather than thelink text, that defines the tag. The last path component of the URL is thetext of the tag, so <a href="http://technorati.com/tag/tech"rel="tag">fish</a> would indicate the tag "tech" rather than "fish".


Consuming microformats

Tools for reading microformats

• Firefox extensions:– Operator

• A microformat detection extension developed by Michael Kaply atIBM.

• https://addons.mozilla.org/en-US/firefox/addon/4106– Tails

• The first microformat detection extension for Firefox by Robert deBruin.

• http://blog.codeeg.com/tails-firefox-extension-03/

Source: http://labs.mozilla.com/2006/12/introducing-operator/


Tools for reading microformats (cont’d)

• Operator builds on Tails Export by having a user interface that is basedaround actions the user can take, instead of data types. Operator alsoincludes support for the microformats geo and rel-tag, and is compatiblewith Firefox 2.

• Address book + Operator• Blog post tag + Operator• Maps + Operator• Calendar + Operator


Building your own applications on microformats

• Great tutorial on mapping microformats with jQuery at 24 ways:http://24ways.org/2007/unobtrusively-mapping-microformats-with-jquery– Unobtrusive JavaScript– jQuery– Google Maps API– Mapstraction– http://24ways.org/examples/unobtrusively-mapping-microformats-

with-jquery/restaurants-plain.html– http://24ways.org/examples/unobtrusively-mapping-microformats-

with-jquery/restaurants.html


Some sites that use microformats

• Flickr• Meetup.com• Technorati• Upcoming.org• Yahoo! Local


Microformat buttons

• http://www.factorycity.net/projects/microformats-icons/• http://microformats.org/wiki/buttons


microformats

Technology

use microformats

existing microformats

microformats ability

microformats community

mailing list microformats

tantek elik microformats

web comic community

introduction introduction