This talk discusses: 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. Placelessness
And the Advance of Micropublishing
Alex Faaborg
Mozilla Corporation

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

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

4. This presentation will answer
4 questions

5. 1) What are microformats?

6. 2) Why does Mozilla care about
microformats?

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

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

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

10. Technologies like microformats are fundamental
to Human Computer Interaction

11. Information
Human Machine
Readable Readable

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

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

14. CAPTCHA
Not Machine
Human Machine
Readable
Readable

15. Firefox Dialog
Not Machine
Not Human
Human Machine
Readable
Readable

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

17. Microformat - hCard
Alex Faaborg
Mozilla
<div class=quot;vcardquot;>
<a class=quot;url fnquot; href=quot;http://blog.mozila.com/faaborg/quot;>Alex Faab
<div class=quot;orgquot;>Mozilla</div>
</div>
Machine
Human
Readable
Readable

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

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

20. 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

21. 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

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

23. 2) Why does Mozilla care about
microformats?

24. The evolution of the Web browser...

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

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

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

28. 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

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

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

31. RSS

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

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

47. hCard geo, adr hCalendar

48. These three types of information
are fundamental

49. People exist in space and time

50. exist in and

51. Space and Time also map to common
representations of information

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

56. please don’t hurt the web
use open standards

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

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

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

64. History

67. Bookmarks

69. Should Firefox display detected
microformats in the content area?

80. Modal interfaces suck

83. Don’t change the content area!

85. Microformat creation?

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

88. please don’t hurt the web
use open standards
1

89. 2

90. 3
C Photo by Orin Optiglot (Flickr)

91. 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