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




Jeffrey Barke . Senior Developer / In...
About microformats
What are microformats?

•   Designed for humans first and machines second, microformats are a set
    of simple, open data ...
What are microformats? (cont’d)

•   A microformat (sometimes abbreviated μF or uF) is a web-based data
    formatting app...
Why use microformats?

•   Aggregation sites
     – The general model is the user travels to a particular site, and then
 ...
Why use microformats? (cont’d)

•   Sharing information with a specific community
    – Let’s say you enjoy mountain biking...
Why use microformats? (cont’d)

•   CSS convenience
    – Use semantic classes for styling instead of ad-hoc names: “Why
 ...
Who’s creating the microformats?

•   Microformats emerged as part of a grassroots movement to make
    recognizable data ...
Who’s creating the microformats? (cont’d)

•   Neither CommerceNet nor Microformats.org is a standards body. The
    micro...
Where the specs are located and how to get involved

•   Blog: http://microformats.org/
•   Wiki: http://microformats.org/...
Using microformats
Microformat specifications and drafts

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

•   hCard is a simple, open, distributed format for representing people,
    companies, organizations, and places, ...
hCalendar

•   hCalendar is a simple, open, distributed calendaring and events format,
    based on the iCalendar standard...
Rel-License

•   Rel-License is a simple, open, format for indicating content licenses
    which is embeddable in HTML or ...
Rel-License (cont’d)

•   Creative Commons license chooser: http://creativecommons.org/license/
•   Dreamweaver Extension ...
Rel-Tag

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

•   Firefox extensions:
     – Operator
         • A microformat detection extension devel...
Tools for reading microformats (cont’d)

•   Operator builds on Tails Export by having a user interface that is based
    ...
Building your own applications on microformats

•   Great tutorial on mapping microformats with jQuery at 24 ways:
    htt...
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
...
Upcoming SlideShare
Loading in...5
×

microformats

852

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
852
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

microformats

  1. 1. Introduction to Microformats The New York Web Standards Meetup Group 22 May 2008 Jeffrey Barke . Senior Developer / Information Architect
  2. 2. About microformats
  3. 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. 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. 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. 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. 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. 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. 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. 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
  11. 11. Using microformats
  12. 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. 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. 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. 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. 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. 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
  18. 18. Consuming microformats
  19. 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. 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. 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. 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. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×