Placelessness
And the Advance of Micropublishing
Alex Faaborg
Mozilla Corporation

mozilla Labs
The mockups shown in this presentation are not
necessarily planned features for Firefox 3

However
These are topics we are spending a lot of time
thinking about / designing / prototyping /
hacking / testing / rethinking /
iterating on

This presentation will answer
4 questions

1) What are microformats?

2) Why does Mozilla care about
microformats?

3) What does a microformat-aware
Web browser look like?

4) Why should Web sites expose their
content using microformats?

1) What are microformats?
... and why are we talking about this in a
session about Design and User Experience?

Technologies like microformats are fundamental
to Human Computer Interaction

Information
Human Machine
Readable Readable

Plain Text
Alex Faaborg
http://mozilla.com
Mozilla
Not Machine
Human Machine
Readable
Readable

vCard
BEGIN:VCARD
VERSION:3.0
FN:Alex Faaborg
URL:http://www.mozilla.com
ORG:Mozilla
END:VCARD
Machine
Not Human
Human
Readable
Readable

CAPTCHA
Not Machine
Human Machine
Readable
Readable

Firefox Dialog
Not Machine
Not Human
Human Machine
Readable
Readable

HTML
Alex Faaborg
Mozilla
<div>
<a href=\"http://blog.mozila.com/faaborg/\">Alex Faaborg</a>
<div>Mozilla</div>
</div>
Not Machine
Human Machine
Readable (content)
Readable Readable

Microformat - hCard
Alex Faaborg
Mozilla
<div class=\"vcard\">
<a class=\"url fn\" href=\"http://blog.mozila.com/faaborg/\">Alex Faab
<div class=\"org\">Mozilla</div>
</div>
Machine
Human
Readable
Readable

What are microformats?
... a way to create information that is both
human and machine readable

What are microformats?
...they give humans and computers a common
ground for discussing information

Information like:
Contacts - hCard
Calendar Events - hCalendar
Locations - geo, adr
Tags - rel-tag
Spam URLs - rel-nofollow
Relationships - XFN
Reviews - hReview
Resumes - hResume
Feeds - hAtom
Licenses - rel-license
Voting on Links - VoteLinks ↓ A whole lot more

Information like:
Contacts - hCard
Calendar Events - hCalendar
Locations - geo, adr
Tags - rel-tag
Spam URLs - rel-nofollow
Relationships - XFN
Reviews - hReview
Resumes - hResume
Feeds - hAtom
Licenses - rel-license
Voting on Links - VoteLinks ↓ A whole lot more

Ways to learn more about microformats:
microformats.org
Ask a question,
get a book
Tuesday, 1:30
In 2003
Wednesday, 4:30
In 2008

2) Why does Mozilla care about
microformats?

The evolution of the Web browser...

1993 Web Browser as Book
C Photo by Derbeth (Flickr)

2005 Web Browser as Radio
C Photo by Darius Capulet (Flickr)

2008 Web Browser as Switchboard
C Photo by Neil Rickards (Flickr)

1993 2005 2008
Book Radio Switchboard
Bookmarks Live Bookmarks Microformat Detection
Back and Next RSS Reader Integration Application Integration
You find the You subscribe to the You move the
information information information around

Multiple types of
information
Not hard wired: the user is in
control of the associations
C Photo by Neil Rickards (Flickr)

At each stage the Web browser has been trying
to keep up with the evolution of the Web

RSS

The same thing is happening now for other
types of structured data

There are a lot of microformats,
which ones should a web browser
natively support?

hCard geo, adr hCalendar

These three types of information
are fundamental

People exist in space and time

exist in and

Space and Time also map to common
representations of information

The Web
+
Further customization
provided by the extension
development community.
The Web
New Microformats

please don’t hurt the web
use open standards

3) What does a microformat-aware
Web browser look like?

Demo:
How can microformats help you get a beer,
tonight

Created by Mike Kaply, IBM
Try it out: labs.mozilla.com

History

Bookmarks

Should Firefox display detected
microformats in the content area?

Modal interfaces suck

Don’t change the content area!

Microformat creation?

4) Why should Web sites expose their
content using microformats?

please don’t hurt the web
use open standards
1

2

3
C Photo by Orin Optiglot (Flickr)

This presentation was
based on work by:
Tanktek Çelik
Ray Ozzie
Michael Kaply
Chris Messina
Wolfgang Bartelme
John Allsopp
Mike Beltzner
Mike Shaver
John Lilly
Basil Hashem
Questions... Sean Martell
Sherman Dickman
Seth Spitzer
faaborg@mozilla.com
C Attribution-ShareAlike 3.0
blogs.mozilla.com/faaborg
http://creativecommons.org/licenses/by-sa/3.0/
labs.mozilla.com