Scott came back from SXSW all jazzed about microformats …and really, who could blame him? It’s something so simple and easy to implement (it’s just markup) that to not embrace them is an act of stubborness.
But the first step in taking advantage of a microfomat is knowing of it’s existence. For that, we have Tails, a nifty Firefox extension that alerts you to the presence of a microformat. You do use Firefox, don’t you?
Microformats are an informal means of marking up web pages with semantically meaningful metadata to allow for greater interoperability with other applications.
Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards. Instead of throwing away what works today, microformats intend to solve simpler problems first by adapting to current behaviors and usage patterns (e.g. XHTML, blogging).
Ok, that’s nice, but what does it mean? Think of it with this example. If you have a page that contains contact information for a person, simply by adding a few classes to add some semantic meaning to the existing tags you could allow for a web browser or plugin to automatically recognize that there is contact information on that page and potentially prompt you to add it to your address book.
Campus Exercise
For this exercise, I’m going to take a sample page from the Campus Directory and using the hCard standard turn it into a Microformat compatible page.
Step 1: Code Clean-up
First step is to review the code that’s used to currently display the contact information.
The first glaring error in this code is the improper use of an unordered list tag (UL). Just reading the code aloud doesn’t make much sense. Now, I know the final product that the end user sees is understandable. However, Microformats are trying to make that code machine-readable and human-readable.
The final markup I came up with was this:
Finished Product
Ok, so now we’ve gone through and changed the markup to make it valid XHTML and semantically meaningful. Let’s take a look Looks about the same doesn’t it? I took out Department Phone because I imagine this is rarely used. If you’re looking for a person specifically you want to find their phone number. If you need their departments phone number you could look up the number on the department listing.
The Magic
I made a duplicate of the first version, and added the following code beneath the contact info which follows this basic format as a hyperlink:
Now when you view this version you’ll see a link that you can click that will convert the contact information on that page into a vCard file that will be downloaded to your computer and imported into either Apple’s Address Book or Microsoft Outlook.
Right now it’s using a utility on Technorati which could easily be reverse engineered to parse the hCard format. Want to make your own hCard? Try the hCard Creator It’s pretty simple.
Summary of Links
