barcamp sd microformats

Microformats:Building A Better WebBuilding A Better Web

by Joshua BrewerBarCamp San Diego June 2, 2007

What are Microformats?

- New Transformer characters?- Time consuming added markup?- The latest Web 2.0 buzz?

Microformats are...“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).”

- http://microformats.org/about/

OR...

“ 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.”

- John Allsop

OR...

“A right-now solution for identifying and semantically describing everyday information so it can be better collected, parsed, and otherwise aggregated for other uses.”

Oh, no! More Standardista

Propaganda!More Standardista

Propaganda!

Oh, no! More Standardista Propaganda!

Just wait... the kool-aid is on its way.

Pish-POSH, who needs standars, anyway?

- We all do. Whether or not we want to admit it.

- Standards are good.

- Standards make way for lowered cost, widespread adoption and common understanding.

- “Professionals have an ethical and moral obligation to produce quality work.” - Andy Rutledge

What exactly are Web Standards? -Pages have a valid doctype declaration.

-Semantically correct markup that validates with W3C specs.

-Separation of content from presentation (using CSS).

-Accessible content and functionality (under a host of contexts and technologies).

-This is being refered to as “POSH” - plain old semantic HTML - and its good for what ails you.

First Things First

- HTML is not a presentational markup language.

Semantic HTML is the use of the most appropriate HTML elements and attributes for the content being marked up.

- Microformats are built upon semantic HTML.

- Without a strong understanding of semantic HTML, microformats won’t make much sense.

Enough preaching... get on with it!

The microformats approach includes a set of underlying principles, of which two of the most important are:

“solve a specific problem”

and

“reuse building blocks from widely adopted standards”

-relationships

-licenses

-people & organizations

-events

-tags (folksonomies)

-reviews

-resumes

-publishing (time-based content)

By providing a standardized way of marking up content that developers are already marking up in many different ways, microformats help us code more efficiently, data becomes clearer, easier to use and more consistently presented.

Plus, our code becomes easier to maintain.

Example time:Contact InformationContact Information

Dan Cederholm’s Simple Quiz helped shed light on this a couple years ago. http://www.simplebits.com/notebook/2004/08/04/sq.html

ABC Widgets, Inc.100 - 1234 West Main StreetAnytown, StateZipPh: 555-555-1234Fax: 555-555-1234

What would you do?

1.<address>  ABC Widgets, Inc.<br />  100 - 1234 West Main Street<br />  Anytown, State<br />  Zip<br />  Ph: 555-555-1234<br />  Fax: 555-555-1234<br /></address>

1.<div class="address">  <p>ABC Widgets, Inc.</p>  <p>100 - 1234 West Main Street</p>  <p>Anytown, State</p>  <p>Zip</p>  <p>Ph: 555-555-1234</p>  <p>Fax: 555-555-1234</p></div>

What would you do?

1.<dl class="address">  <dt>ABC Widgets, Inc.</dt>  <dd>100 - 1234 West Main Street</dd>  <dd>Anytown, State</dd>  <dd>Zip<dd>  <dd>Ph: 555-555-1234</dd>  <dd>Fax: 555-555-1234</dd></dl>

What would you do?

1.None of the above, or...

What would you do?

#5Microformated Contact InformationMicroformated Contact Information

Joshua BrewerBrewer Design Groupjoshua@brewerdesigngroup.com832 Desty StSan Diego, CA 92154(619) 871-2739

#5Microformated Contact InformationMicroformated Contact Information

<div class="vcard"><span class="fn">Joshua Brewer</span><div class="org">Brewer Design Group</div><a class="email" href="mailto:joshua@brewerdesigngroup.com">joshua@brewerdesigngroup.com</a><div class="adr"><div class="street-address">832 Desty Street</div><span class="locality">San Diego</span> , <abbr class="region" title="California">CA</abbr><span class="postal-code">92154</span></div><div class="tel"><span class="type">Cell:<span> <span class="value">(619) 871-2739</span></div></div>

#5Microformated Contact InformationMicroformated Contact Information

<div class="vcard"><span class="fn">Joshua Brewer</span><div class="org">Brewer Design Group</div><a class="email" href="mailto:joshua@brewerdesigngroup.com">joshua@brewerdesigngroup.com</a><div class="adr"><div class="street-address">832 Desty Street</div><span class="locality">San Diego</span> , <abbr class="region" title="California">CA</abbr><span class="postal-code">92154</span></div><div class="tel"><span class="type">Cell:<span> <span class="value">(619) 871-2739</span></div></div>

But it seems like more markup & more work?

REALLY?

I don’t think so...

- Time saved not trying to figure out how to mark something up.

- Tools available to help make it even easier.

- Increase your searchability

- Increase your “Mash-up-ability” - "Accidental API" - Brian Oberkirch

- Did I mention, it works now?

hCard

hCard is a simple, open, distributed format for representing people, companies, organizations, and places, using a 1:1 representation of vCard properties and values in semantic XHTML.

vCard is widely used in desktop address book–style applications such as Microsoft Outlook and Mac OS X’s Address Book.

My vCard...

My hCard...

Now I have my contact info ready and available anywhere at anytime to just about anyone.

Two Firefox extensions - Tails and Operator - make it very simple to add contacts, events and even locations.

Both scan the page for microformated content and allow you to interact with it.

The web is one of the greatest tools for communication.

Use what you got!- Remember that we have a straight-forward

markup language (HTML) that is not a proprietary data format.

- Kids in elementary school are learning how to write HTML.

- Few people publish with RDF, some with XML, but it ends up getting displayed on the web with... you guessed it... HTML (or XHTML - but that is another presentation altogether!)

-relationships

-licenses

-people & organizations

-events

-tags (folksonomies)

-reviews

-resumes

-publishing (time-based content)

- relationships - XFN

- licenses - rel-license

- people & organizations - hCard

- events - hCalendar

- tags (folksonomies) - rel-tag

- reviews - hReview

- resumes - hResume

- publishing (time-based content) - hAtom

Anyone browse the web on their phone?

- Microformated content will be easier to display with or without styling and increase page download speed.

- Mobile web is going to be huge. Do you want to be ready when the storm hits?

- Check this out:

Here’s what you can get out of using

Microformats

By providing a standardized way of marking up content that developers are already marking up in many different ways, microformats help us code more efficiently and it becomes easier to maintain code.

By making commonly published data available in standard formats, microformats help enable distributed software services such as aggregation and indexing, which would otherwise be extremely difficult or unfeasible to implement.

By using existing schemas where possible, microformats enable seamless interoperability between web-based content and desktop applications, such as Outlook and iCal for calendaring information, or Evolution, Address Book, and many others for vCard.

For example, in March 2006, during the keynote at Microsoft MIX06, none other than Bill Gates said,

“We need microformats and to get people to agree on them. It is going to bootstrap exchanging data on the Web . . . we need them for things like contact cards, events, directions.”

Why should you bother learning to use it?

Tools are emerging every day...

Drew Mclellan:

Kit Microformats Toolkit for PHP5 http://allinthehead.com/hkit

Dreamweaver Microformats toolbar

Assaf Arkin developed this Microformat Parser for Ruby (http://blog.labnotes.org/2005/11/20/microformat-parser-for-ruby)

Brian Suda developed XV2 - http://suda.co.uk/projects/X2V - used by Technorati to run their feed services

There are plugins for Wordpress, Textpattern, etc.

Other CMS are very customizable and can spit out microformated content with little extra effort.

Tools are emerging every day...

Not to mention...

- It is phenomenal what you can do with CSS to style it all.

- Take a look at Last.fm, Eventful.com, etc.

- We need a Microformats CSS Zen Garden (its in the works...)

Implemetation- after (or while) POSHifying your site...

- include appropriate microformats

- setup pinging http://pingerati.net/ to distribute your updates

- Technorati Contact hCard markup

- hCard to vCard converter

- Link to convert hCards to vCards

- Seamless import into a typical Address Book

Great examples

- Eventful.com

- Last.fm

- Upcoming.org

- Flickr

- Twitter

Thank You