microformats
- 1. Introduction to Microformats The New York Web Standards Meetup Group 22 May 2008 Jeffrey Barke . Senior Developer / Information Architect
- 3. What are microformats? • Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards. –Dan Cedarholm with Tantek Çelik for launch of microformats.org • Microformats are simple conventions for embedding semantics in HTML to enable decentralized development. –from the mailing list • Microformats are carefully designed (X)HTML class names that extend the semantics of (X)HTML and enable authors to publish higher semantic fidelity content such as people, events, reviews, etc. –Tantek Çelik • Microformats are a way of identifying and labeling classes of commonly used data that make it easier for humans or computers to locate or distribute 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
- 4. What are microformats? (cont’d) • A microformat (sometimes abbreviated μF or uF) is a web-based data formatting approach that seeks to re-use existing content as metadata, using only XHTML and HTML classes and other attributes. This approach is intended to allow information intended for end-users (such as contact information, geographic coordinates, calendar events, and the like) to also be automatically processed by software. Source: http://en.wikipedia.org/wiki/Microformats Introduction to Microformats • The New York Web Standards Meetup Group / 22 May 2008
- 5. 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 a particular 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 this model. Now, your information remains in your blog, and the Web sites come to you. For instance, if you want to sell something, you can blog about it using an hListing, and a site like edgeio will find it when it aggregates classified advertisements across the Web. Source: http://blog.mozilla.com/faaborg/2006/12/11/microformats-part-0- introduction/ Introduction to Microformats • The New York Web Standards Meetup Group / 22 May 2008
- 6. 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 you posted this information to your blog, you could geocast (RSS with a payload of geo), the locations of the mountain bike trails, and other people in the community could subscribe to this feed using an application 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 microformat agreed upon by the web comic community, the rest of the community will be able to easily find your work using a search engine. Source: http://blog.mozilla.com/faaborg/2006/12/11/microformats-part-0- introduction/ Introduction to Microformats • The New York Web Standards Meetup Group / 22 May 2008
- 7. 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-defined ones 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) Introduction to Microformats • The New York Web Standards Meetup Group / 22 May 2008
- 8. Who’s creating the microformats? • Microformats emerged as part of a grassroots movement to make recognizable data items (such as events, contact details or geographical locations) capable of automated processing by software, as well as directly readable by end-users. • As the microformats community grew, CommerceNet, a nonprofit organization that promotes electronic commerce on the Internet, helped sponsor and promote the technology and support the microformats community in various ways. CommerceNet also helped co-found the microformats community site microformats.org. Source: http://en.wikipedia.org/wiki/Microformats Introduction to Microformats • The New York Web Standards Meetup Group / 22 May 2008
- 9. Who’s creating the microformats? (cont’d) • Neither CommerceNet nor Microformats.org is a standards body. The microformats community is an open wiki, mailing list, and Internet relay chat (IRC) channel. Most of the existing microformats were created at the Microformats.org wiki and associated mailing list, by a process of gathering examples of web publishing behaviour, then codifying it. Some other microformats (such as rel=nofollow and unAPI) have been proposed, or developed, elsewhere. • Some names associated with microformats: – Dan Cedarholm – Tantek Çelik – Drew McLellan – Eric A. Meyer Source: http://en.wikipedia.org/wiki/Microformats Introduction to Microformats • The New York Web Standards Meetup Group / 22 May 2008
- 10. 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 Introduction to Microformats • The New York Web Standards Meetup Group / 22 May 2008
- 12. 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 Introduction to Microformats • The New York Web Standards Meetup Group / 22 May 2008
- 13. hCard • hCard is a simple, open, distributed format for representing people, companies, organizations, and places, using a 1:1 representation of vCard (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. Introduction to Microformats • The New York Web Standards Meetup Group / 22 May 2008
- 14. hCalendar • hCalendar is a simple, open, distributed calendaring and events format, based on the iCalendar standard (RFC2445), suitable for embedding in HTML 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 Introduction to Microformats • The New York Web Standards Meetup Group / 22 May 2008
- 15. Rel-License • Rel-License is a simple, open, format for indicating content licenses which is embeddable in HTML or XHTML, Atom, RSS, and arbitrary XML • 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 a license for the current page. – E.g. with the following hyperlink: <a href="http://creativecommons.org/licenses/by/2.0/" rel="license">cc by 2.0</a> the author indicates that the page is licensed under a Creative Commons 2.0 Attribution Required license. • Multiple such rel="license" hyperlinks indicate that the page is available under any of the referred licenses. E.g. the following hyperlinks could be used to declare that a page is available under either a Creative Commons 2.0 Attribution Required license or the Apache 2.0 license. Introduction to Microformats • The New York Web Standards Meetup Group / 22 May 2008
- 16. Rel-License (cont’d) • Creative Commons license chooser: http://creativecommons.org/license/ • Dreamweaver Extension suite (http://www.webstandards.org/action/dwtf/microformats/) from the Web Standards Project (http://webstandards.org/) enables the authoring of rel-license links from within Dreamweaver 8. Includes (cc) defaults. Introduction to Microformats • The New York Web Standards Meetup Group / 22 May 2008
- 17. 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) for the current page. Note that a tag may just refer to a major portion of the current page (i.e. a blog post). e.g. by placing this link on a page, <a href="http://technorati.com/tag/tech" rel="tag">tech</a> the author indicates 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 the link text, that defines the tag. The last path component of the URL is the text of the tag, so <a href="http://technorati.com/tag/tech" rel="tag">fish</a> would indicate the tag "tech" rather than "fish". Introduction to Microformats • The New York Web Standards Meetup Group / 22 May 2008
- 19. Tools for reading microformats • Firefox extensions: – Operator • A microformat detection extension developed by Michael Kaply at IBM. • https://addons.mozilla.org/en-US/firefox/addon/4106 – Tails • The first microformat detection extension for Firefox by Robert de Bruin. • http://blog.codeeg.com/tails-firefox-extension-03/ Source: http://labs.mozilla.com/2006/12/introducing-operator/ Introduction to Microformats • The New York Web Standards Meetup Group / 22 May 2008
- 20. Tools for reading microformats (cont’d) • Operator builds on Tails Export by having a user interface that is based around actions the user can take, instead of data types. Operator also includes support for the microformats geo and rel-tag, and is compatible with Firefox 2. • Address book + Operator • Blog post tag + Operator • Maps + Operator • Calendar + Operator Introduction to Microformats • The New York Web Standards Meetup Group / 22 May 2008
- 21. 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 Introduction to Microformats • The New York Web Standards Meetup Group / 22 May 2008
- 22. Some sites that use microformats • Flickr • Meetup.com • Technorati • Upcoming.org • Yahoo! Local Introduction to Microformats • The New York Web Standards Meetup Group / 22 May 2008
- 23. Microformat buttons • http://www.factorycity.net/projects/microformats-icons/ • http://microformats.org/wiki/buttons Introduction to Microformats • The New York Web Standards Meetup Group / 22 May 2008