Presentation and documentation are online @

http://www.uwplatt.edu/web/presentations

Microformats

... a set of simple open data format standards that many are actively developing and implementing for more/better structured blogging and web microcontent publishing in general.

As legend has it at the 2004 SxSW conference...

Eric Meyer, Tantek Çelik and Matthew Mullenweg had a hallway discussion.

The discussion was about an asterisk * next to names of people they had 'met' IRL.

Their discussion turned into the very first microformat:
XHTML Friends Network (XFN)

• Solve a specific problem
• Start simply
• Design for humans first, machines second
• Reuse currently adopted standards
• Modular and embeddable
• Encourage decentralized development, content and services

• Too much (disparate) information
  • 20+ BILLION indexed items in Google (as of 2006)
  • Opinions, information and reviews hosted everywhere
  • No centrally 'controlled' system of info
• Keyword searching only:
  1 - 10 of about 313,000 for "why microformats?"
• (un)Semantic Web

How do we markup information with richer semantics without breaking what we already have?

• We begin with POSH
• 
• NO, no, noooo.
  Not that spice one!

• Plain
• Old
• Semantic
• HTML

• The acronym POSH was coined as a shorthand abbreviation for "plain old semantic HTML".

Put simply, it's Web Standards!

Most of us have been doing web standards for years. If you are new, I recommend, The Web Standards Project for more info.

• Validate (http://validator.w3.org) your POSH
• Drop presentational TABLEs, spacer GIFs, and presentational-html
• Fix your <B>ed and <BR>eakfast markup
• Eliminate Anorexic Anchors
• Use good semantic-class-names

*

Bloggers started to mark people they had 'met' with an asterisk in their Blogroll.

• Jeffrey Zeldman *
• Eric Meyer *
• John Allsopp
• Steve Krug *
• Molly E. Holzschlag

Blogroll: list of blog site you read.

By using the approved "rel" attribute in the anchor tag, we move from this:

To the semantic XFN:

The XHTML blogroll:

The CSS to do what was already happening:

• Eric Meyer *
• John Allsopp

• friendship (pick 1)
  • contact
  • acquaintance
  • friend
• physical
  • met
• professional
  • co-worker
  • colleague
• geographical (pick 1)
  • co-resident
  • neighbor

• family (pick 1)
  • child
  • parent
  • sibling
  • spouse
  • kin
• romantic
  • muse
  • crush
  • date
  • sweetheart
• identity
  • me

Imagine that you put contact info on a website.

As a human, we interpret that information as contact info because we adapt and infer meaning.

Computers 'display' the information, however they don't know the meaning.

The Internet Engineering Task Force (IETF) has developed a standard for contact information:

vCard (RFC 2426)

Computers understand specific code:

What... the... heck... is... THIS???

The vCard format has some very specific properties that we can re-use:

• post-office-box
• extended-address
• street-address
• locality
• region
• postal-code
• country-name

So we re-use the properties established by the IETF on vCard and put them directly into XHTML

We can use the 'class' attributes hold the vCard properties.

When they are put together, it forms: hCard (XHTML structred vCard)

The following are the REQUIRED "class" properties:

• fn - formatted name
• n (family-name, given-name, additional-name, honorific-prefix, honorific-suffix)

Optional:

• nickname, sort-string
• url, email (type, value), tel (type, value)
• adr (post-office-box, extended-address, street-address, locality, region, postal-code, country-name, type, value), label
• geo (latitude, longitude), tz
• photo (32, 64, 96), logo, sound, bday
• title, role, org (organization-name, organization-unit)
• category, note, class, key, mailer, uid, rev

Though our example hCard seemed very structured, hCard (and all microformats) are FLEXIBLE!

A basic hCard can be written like this:

Use "div" when you need a block element

Use "span" when you need an inline element

A basic hCard email can be written like this:

Use "div" when you need a block element

Use "span" when you need an inline element

With a valid hCard, you can even generate a very nice looking business card!

hCard example

To see Microformats in action, get the Operator Add On

The best part is the Operator Add On can be extended with user scripts.

Event information can be microformatted too!

IETF to the rescue again through: iCalendar (RFC 2445)

The "root" of any event is vevent

The "root" of any calendar is a vCalendar

XHTML formated iCalendar is hCalendar

The following are the REQUIRED "class" properties:

• dtstart "date start" (ISO date)
• summary

ISO date: International standard date notation is:

• YYYY-MM-DD OR YYYYMMDD
• YYYY-MM-DD hh:mm:ss OR YYYYMMDDThhmmss
• YYYY-MM OR YYYYMM
• YYYY

• location
• url
• dtend (ISO date), duration (ISO date duration)
• rdate, rrule
• category, description
• uid
• geo (latitude, longitude)

Not only can you mark up contacts, but you can also add a vcard for location.

You can also group events together into a full calendar.

Sample HELIX 2009 hCalendar schedule. Based on Conference Schedule Creator.

rel

rel - describes the relationship of the anchor's href to the current document

rev

rev - a reverse link from the author specified by the href to the current document

rel & rev

Both allow authors to define additional link 'types'

• rel="license" - i.e. Creative Commons, copyright info links, etc.
• rel="tag" - links to anysite that utilizes tags
  • <a href="http://flickr.com" rel="tag">PSUweb2008</a>
  • <a href="http://technorati.com/tag/casa" rel="tag" lang="es">casa</a>

• rev="vote-for" - in favor of the following idea / document
• rev="vote-against" - against the following idea / document
• rev="vote-abstain" - no opinion on the following idea / document
• My vote is for <a href="http://www.packers.com" rev="vote-for"> Green Bay</a> over <a href="http://www.bears.com" rev="vote-against"> Chicago</a>.

• version - optional [text - current 0.3]
• summary - optional [text]
• type - optional [product | business | event | person | place | website | url]
• item - REQUIRED uses [fn (url || photo) | hCard (for business or person) | hCalendar (for event)]
• reviewer - optional uses [hCard]
• dtreviewed - optional uses [ISO (8601)]
• rating - optional [fixed point integer (1.0-5.0) | worst (1.0) | best (5.0) | value (explicit)]

Ratings can be customized if you wish.

• summary - optional [text]
• contact - REQUIRED [<address> + hCard]
• experience - optional [hCalendar with events and hCard for company]
• education - optional [hCalendar with events and hCard for school]
• skill - optional [rel-tag keywords or phrases]
• affiliations - optional [hCard of the organization]
• publications - optional [<cite>]

When in doubt, go back to the source:

• John Allsopp's book, "Microformats - Empowering Your Markup for Web 2.0"
• http://www.microformats.org
  • Specifications, Discussions, Wiki, and Microformats "In the Wild"
  • Microformat generator forms

• Solve a specific problem
• Start simply
• Design for humans first, machines second
• Reuse currently adopted standards
• Modular and embeddable
• Encourage decentralized development, content and services

"The less people know about how sausages and laws are made, the better they'll sleep at night."

Otto von Vismark, Minister-President of Prussia

Microformats

They may seem to be chaotic, however we are following currently approved recommendations and adopting them to the web.

Microformats are still in their infancy, but the potential is incredible!

Presentation and documentation are online @

http://www.uwplatt.edu/web/presentations

Email: frommelt@uwplatt.edu

Copyright Daniel M. Frommelt, 2009. This work is the intellectual property of the author. Permission is granted for this material to be shared for non-commercial, educational purposes, provided that this copyright statement appears on the reproduced materials and notice is given that the copying is by permission of the author. To disseminate otherwise or to republish requires written permission from the author.