Microformats:
Building A Better Web
Building A Better Web
by Joshua Brewer
BarCamp 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!
Oh, no! More
More Standardista
Standardista
Propaganda!
More Standardista
Propaganda!
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 Information
Contact Information
Dan Cederholm’s Simple Quiz helped shed light
on this a couple years ago. h
ttp://www.simplebits.com/notebook/2004/08/04/sq.html
ABC Widgets, Inc.
100 - 1234 West Main Street
Anytown, State
Zip
Ph: 555-555-1234
Fax: 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>

What would you do?
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...

#5
Microformated Contact Information
Microformated Contact Information
Joshua Brewer
Brewer Design Group
joshua@brewerdesigngroup.com
832 Desty St
San Diego, CA 92154
(619) 871-2739

#5
Microformated Contact Information
Microformated 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>

#5
Microformated Contact Information
Microformated 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?

every day...
Drew Mclellan:
Kit Microformats Toolkit for PHP5
http://allinthehead.com/hkit
Dreamweaver Microformats toolbar

every day...
Assaf Arkin developed this Microformat Parser
for Ruby (
http://blog.labnotes.org/2005/11/20/microformat-parser-fo
)
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.

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