Web Directions North » Blog Archive » Microformats

Microformats - More Than Just Promise

Note: check the podcast and download the presentations to get all the details that were likely missed in this entry.

John Allsopp - Microformats for Developers

• probably the first 3 hour session on microformats
• if you’re an HTML developer, none of this is going to be really new - just the application

Part 1: know your microformats

• XHTML Friends Network (XFN) - taking the existing practice of linking to friends, associates, etc., and giving them more context (e.g. John links to Taktek on his site, adds rel=”colleague met friend” to the <a> element, signifies that Tantek is a friend, colleague and that John’s met him)
• XFN provides a “controlled vocabulary” for describing relationships.
• tools exist: XFN Creator, WordPress (built into “add links”), missed the rest, check the presentation
• hCard
  • hCard example: cambodian yellow pages
  • what is hCard? a simple, distributed format for representing people, companies, etc. - a 1:1 representation of the properties and values of the vCard standard - uses an existing standard rather than inventing something new
  • how do you use hCard? add vCard field names as class values on any HTML element
  • microformats use existing markup
  • compound microformats have a root element - hCard root elements have the class value “vcard”
  • most things are optional in the microformats standard
  • hCard: Names (formatted names and optional structured names)
  • class and rel can have multiple, space-separated values, and this is used extensively - e.g. class=”fn n url” - formatted name, name, and “a” url
  • hCard: Addresses (street-address, locality, region, postal-code, country-name)
  • the “adr” construct is so common, it is actually a microformat itself and can be used separately
  • all sounds a bit hard? hCard Creator, Dreamweaver toolbar, plugins for TextPattern and WordPress
• hCalendar - a simple, distributed calendaring and events format
  • how do you use hCalendar? add the semantics of iCalendar using classes
  • hCalendar root elements have the class value “vcalendar” (the old name for iCalendar)
  • again, using values from the existing standard and using them for class names
  • date and time - uses ISO8601 date time standard, plus the abbr design pattern, and the properties of hCalendar to add a start and end date and time (machine readable)
  • abbr design pattern - Date format = YYYYMMDD or YYYY-MM-DD; Time format = Date format + T + hh:mm:ss + (+/-TZ) - seconds and Timezone are optional
  • e.g. today’s Date format: Feb 7th 2007 is 2007-02-07
  • using the element, the machine readable part is in the “title” attribute, the human readable part is within the element
  • hCalendar also enables marking up other properties, such as urls, locations, participants (attendees, organizers, etc.)
  • lazy? tools include: hCalendar Creator, Dreamweaver toolbar, plugins for blog tools, etc. (see microformats wiki for links)
• hReview - used for embedding reviews
  • how do you use hReview? no existing specification to model after, so a combination of common conventions is used, also reusing other microformats (e.g. reviewer is embedded in an hCard)

Part 2: engines using microformats

• technorati microformats search indexes microformatted content, supports hCard, hCalendar and hReview
• Pingerati - notify Pingerati of new or changed microformatted content to distribute/update any services that use it as their central repository
• edgio aggregates classifieds from around the web, including those marked up in the draft hListing format

Part 3: publishers using microformats

• Flickr - geocode uses microformats
• Yahoo! Tech uses hReview, hCard
• Upcoming uses hCalendar, hCard
• LinkedIn uses the draft hResume format
• microformats aren’t hard, and aren’t a gamble - Firefox team is already talking about incorporating microformat features into FF3, lots of industry support, plus extensions like Tails for FF
• blog: http://microformatique.com
• book: Microformats: Empower your markup for Web 2.0 (friends of ED, coming in March)

Dan Cederholm - Microformats for Designers

• focusing on the visual side of microformats: styling microformats with CSS, the microformats logo, cork’d etc.
• what Dan hears a lot of: microformats are: confusing, a waste of time, something geeks do with a lot of time on their hands
• microformats spread by word of mouth - I markup some data this way, then someone else does, and so on…
• use what works today
• we’re not waiting around for organizations to get their act together, we’re using things like (X)HTML that exists today
• XFN example: uses rel element; XFN + CSS: use attribute selectors to style
• “ignore everything I’m saying, it doesn’t work in IE ”
• e.g. use CSS attribute selector to assign different icons in a list depending on relationship
• Wolfgang Bartleme’s microformat icons (url?)
• right off the bat, microformats are easy to style with css, and are semantic
• why *wouldn’t* I use them? no good reason not to
• the logo - download the presentation to see the progression of the design
• hCard styling example: using the technorati contact service, and hCard on your site, you can allow users to automatically import your contact data
• hCard Creator - really valuable for someone who thinks visually - all the classes/markup is there, and usually you don’t need extra markup.
• Just because the creator generates divs and spans, doesn’t mean you need to use those elements
• Keep in mind: use the most appropriate element available, div and span as a fallback, don’t worry about block-level vs. inline
• (see presentation for example of styling an hCard and live examples)
• Cork’d - microformats are used throughout, e.g. hReview, rel-tag for “tasting tags”, hCard for profile information
• (see presentation for example of styling an hReview)
• oblivious development - examples of developers extending site functionality based on microformats, extending cork’d without a public api existing (”accidental api”)
• references Drew McLellan’s “Can your website be your api?” presentation (link?)
• microformats work together - when you start combining microformats, you discover they are even more useful
• what good is one brick? but multiple bricks can build a wall…
• exposing microformats - e.g. John Hicks’ user stylesheet for styling microformats, microformats bookmarklet, operator extension for Firefox, Tails extension for Firefox
• Audience question: is there a way to limit access to microformats to people you trust? Tantek’s answer: microformats aren’t about access policies, but about consistent formatting. The site using the data determines the level of access to visitors, the same as any other data on that page.
• Audience question: what kind of sites are aggregating microformat data right now? Tantek’s answer: a bunch of sites, check on the microformats wiki (on the kreview-implementations page) for an up-to-date list
• Audience question: what are some existing standards that may be on the horizon for microformat implementation? Tantek’s answer: there’s interest in citation (brainstorm proposal exists) and media info (no proposal yet)
• Audience question: how concerned should developers be when working on a production site, about draft specifications changing when they go final, breaking early implementations? General answer: there’s already concern about forward compatibility, and there is something in the specification about retaining backward compatibility after a certain point in the development of the specification. If you’re depending on being aggregated, be more mindful of the changes that may occur when I microformat goes from draft to final.
• Audience question: can microformats be integrated with RSS feeds? is it normal? Tantek’s answer: yes, but there’s no real magic - microformats are just HTML, no voodoo. Use hAtom to mark up your blog posts and you just use one format in your HTML.
• Audience question: how are the naming conventions developed? Tantek’s answer: some use existing standards, others use logical, contextual property names. Root names define the scope, child properties are more generic and thus more flexible.
• check podcast for last few questions (inaudible from the back of the room)

Posted by Dan Rubin on 14/02/07 at 1:58 am

Images:

The images are downsized due to limited space here. The original dimensions may differ.
Click on the image to open it on a new tab.