The document discusses Microformats, which are simple and open data formats built upon existing and widely adopted standards like HTML and XHTML. Microformats aim to make web pages more machine-readable by embedding semantic metadata in HTML/XHTML documents. Examples shown include hCard for contact information, hCalendar for events, and Geo microformat for geographic coordinates. The document also discusses how Microformats can be combined with other technologies like GRDDL to extract RDF for the Semantic Web.

1. Microformats
Web of Data
brian@suda.co.uk
http://suda.co.uk/publications/Web2Expo/

2. Microformats:
The Nanotechnology of
the Semantic Web
Jeremy Keith
Wednesday, 7th November
9:00am

4. What are microformats

5. What is a web of data?

6. Evolution of the Browser
http://blog.mozilla.com/faaborg/2007/04/19/web-2.0-expo-presentation/

7. 1993: Book

8. 2005: Radio

9. 2008: Switchboard

10. Operator & FireFox3

15. hCard

16. Web 2.0 Expo
Messe Berlin GmbH

17. <div class=“vcard”>
Messe Berlin GmbH
Messedamm 22
14055 Berlin, Germany
</div>

18. <div class=“vcard”>
<div class=“fn org”>Messe Berlin GmbH</div>
Messedamm 22
14055 Berlin, Germany
</div>

19. <div class=“vcard”>
<div class=“fn org”>Messe Berlin GmbH</div>
<div class=“adr”>
Messedamm 22
14055 Berlin, Germany
</div>
</div>

20. <div class=“vcard”>
<div class=“fn org”>Messe Berlin GmbH</div>
<div class=“adr”>
<div class=“street-address”>
Messedamm 22</div>
<span class=“postal-code”>14055</span>
<span class=“locality”>Berlin</span>
<span class=“country-name”>Germany</span>
</div>
</div>

21. <div class=“vcard”>
<a href=“http://www1.messe-berlin.de/”
class=“url fn org”>Messe Berlin GmbH</a>
<div class=“adr”>
<div class=“street-address”>
Messedamm 22</div>
<span class=“postal-code”>14055</span>
<span class=“locality”>Berlin</span>
<span class=“country-name”>Germany</span>
</div>
</div>

22. <div class=“vcard”>
<abbr title=“52.50475;13.279375” class=“geo”>
<a href=“http://www1.messe-berlin.de/”
class=“url fn org”>Messe Berlin GmbH</a></abbr>
<div class=“adr”>
<div class=“street-address”>
Messedamm 22</div>
<span class=“postal-code”>14055</span>
<span class=“locality”>Berlin</span>
<span class=“country-name”>Germany</span>
</div>
</div>

24. hCalendar

25. Web2.0 Expo
this session

26. <div class=“vevent”>
Microformats: Web of Data
November 6th, 9:00-9:50
New York 3
</div>

27. <div class=“vevent”>
<span class=“summary”>
Microformats: Web of Data
</span>
November 6th, 9:00-9:50
New York 3
</div>

28. <div class=“vevent”>
<a href=“http://berlin.web2expo.com/conference/”
class=“url summary”>Microformats: Web of Data</a>
November 6th, 9:00-9:50
New York 3
</div>

29. <div class=“vevent”>
<a href=“http://berlin.web2expo.com/conference/”
class=“url summary”>Microformats: Web of Data</a>
November 6th, 9:00-9:50
<span class=“location”>New York 3</span>
</div>

30. <div class=“vevent”>
<a href=“http://berlin.web2expo.com/conference/”
class=“url summary”>Microformats: Web of Data</a>
<abbr class=“dtstart” title=“2007-11-06T08:00:00Z”>
November 6th, 9:00</abbr>-
<abbr class=“dtend” title=“2007-11-06T08:50:00Z”>
9:50</abbr>
<span class=“location”>New York 3</span>
</div>

32. Geo

33. <abbr title=“52.50475;13.279375” class=“geo”>
Messe Berlin GmbH
</abbr>

36. UNIX Pipes

37. for the Web

38. HTML | WebService

45. HTML | WebService | app

48. http://suda.co.uk/projects/
X2V/get-vcal.php?uri=http://
upcoming.yahoo.com/
event/183827/

50. HTML | Tidy | XSLT | Maps

51. HTML

53. Tidy

55. XSLT

57. Maps

59. http://maps.google.com/maps?
q=http:%2F%2Fsuda.co.uk%2Fproje
cts%2Fmicroformats%2Fgeo%2Fget-
geo.php%3Furi%3Dhttp%253A%252
F%252Fcgi.w3.org%252Fcgi-bin%2
52Ftidy%253FdocAddr%253Dhttp%
25253A%25252F%25252Fsudabot.
com%25252Fweb2expo%26type%3
Dkml

60. Four services, loosely
coupled & piped together

61. But wait....

62. there’s more!

63. HTML | Translation | Tidy | XSLT | Maps

69. http://maps.google.com/maps?
q=http:%2F%2Fsuda.co.uk%2Fprojects%
2Fmicroformats%2Fgeo%2Fget-geo.php
%3Furi%3Dhttp%253A%252F%252Fcgi.
w3.org%252Fcgi-bin%252Ftidy%253FdocAd
dr%253Dhttp%25253A%25252F%25252Fba
belfish.altavista.com%25252Fbabelfish%252
52Ftrurl_pagecontent%25253Flp%25253Den
_de%252526url%25253Dhttp%2525253A%
2525252F%2525252Fsuda.co.uk%2525252F
Web2Expo%2525252F%26type%3Dkml

70. http://icanhaz.com/berlin-web2expo-map
http://tinyurl.com/2xck2d

71. http://qrcode.kaywa.com/img.php?s
=12&d=http%3A%2F%2Ficanhaz.
com%2Fberlin-web2expo-map

72. Data Importing

79. Data Sources

85. Libraries
PHP: http://allinthehead.com/hkit
XSLT: http://hg.microformats.org
Python: http://www.plaxo.com/info/opensocialgraph
Ruby: http://code.google.com/p/identity-matcher/
XSL & JS: http://code.google.com/p/mf-optimus/
Textpattern: http://textpattern.org/plugins/525/pnh_mf
http://www.webstandards.org/action/dwtf/microformats/
Django: http://code.google.com/p/django-psn/
http://microformats.org/wiki/implementations

86. screen-shots here

87. Microformats + GRDDL = RDF

88. With important applications such as
connecting microformats to the
Semantic Web, GRDDL is a mechanism to
extract RDF statements from suitable
XHTML and XML content using programs
such as XSLT transformations. GRDDL
allows powerful mash-ups at very low cost.

97. Resources
http://suda.co.uk/publications/Web2Expo/
http://suda.co.uk/projects/microformats/cheatsheet/
mailto:brian@suda.co.uk
http://microformats.org/
http://del.icio.us/tags/microformats/
http://www.pingerati.net/
http://kitchen.technorati.com/search/
http://hg.microformats.org
http://www.oreilly.com/catalog/microformats/
https://addons.mozilla.org/en-US/firefox/addon/4106

99. Allsopp
Also Available
L
JOHN ALLSOPP
Foreword by Tantek Çelik
MICROFORMATS
open
integrate
plications
ing right
and are fast
developers.
tact details,
and desktop
ites except a
g commonly
today’s Web.
technologies
b tools, and,
s.
lores why, in
ork; and the
very current
and uses of
urvey of the
case studies
icroformats
hn Allsopp,
Empowering Your Markup for Web 2.0
ou painlessly
Use rich semantics in your markup to make it machine-readable
Y
as well as human-readable
Make your websites “mashup-ready” for a new generation of
web applications
Understand this fast-growing technology through this book’s
m real-world examples, case studies, tools, and much more
que.com/
olor not accurate spine = 0.000quot; 000 page count
http://microformatique.com/book/

100. (EN) http://www.oreilly.com/catalog/microformats/
(D) http://www.oreilly.de/catalog/pdf_microformatsger/
(FR) http://www.oreilly.fr/catalogue/2354020031