title: Microformats - Adding Semantics to Your Web Site - Web 3.0 in Action
gradient-colors: green lime


h1. Microformats Outline

Agenda

* What is the Semantic Web? What's Web 3.0?
* What are Microformats? Why do Microformats matter?
* Microformats and Browser Plugins and JavaScript APIs
* Microformats and Ruby on Rails
* Adding semantics to your web pages (marking up people, events, locations and more using Microformats) and enabling Google Map listings, exporting contacts to your address book and more.
* Creating RESTful web services using Microformats


h1. What is the Semantic Web? What's Web 3.0?

What's HTML?

* The world's most popular markup language.
* About 50 tags to markup hypertext documents.

Less than 50 tags -> lots of meaning (that is, semantics) gets lost when marking up documents.

Example:

{{{
<h1>VanDev: Microformats - Adding Semantics to Your Web Site</h1>

<p>Wednesday, April 16, 2008  <br>

UBC Robson Square<br>
800 Robson St.<br>
Vancouver, British Columbia<br>
</p>
}}}

HTML tags such as @h1@ (heading1) and @p@ (paragraph) and @br@ (break) are kind of meaningless (without semantics).


h1. Semantic Web - Web 3.0

Semantic Web - add semantics to your web page by marking up events, people, locations, resumes, listings, feeds and much more.

How? The "official" semantic web proposes new extension to web markup such as Resource Description Framework(RDF) or eXtensible Markup Language (XML)

The "pragmatic" semantic web proposes - let's just use conventions and best practices for today's web markup and today's browsers.


h1. Semantic Web Example Using Microformats

Let's add semantics using Microformats to the event example:

{{{
<div class="vevent">
  <h1 class="summary">VanDev: Microformats - Adding Semantics to Your Web Site</h1>

  <p><abbr class="dtstart" title="2008-04-16">Wednesday, April 16, 2008</abbr>
   </p>
</div>
}}}

That's all there's is to it.

Why use attributes such as @vevent@, @summary@ and @dtstart@?

Microformats build on existing standards! The event Microformat known as hCalendar builds on the existing internet standard called iCalendar (used by Apple's iCal and others) published by the Internet Society/Internet Engineering Task Force (IETF) as Request for Comments (RFC)#2445.

The same event marked-up in "classic" iCalendar format looks like:

{{{
BEGIN:VCALENDAR
VERSION:2.0
PRODID:-//VanDev//NONSGML Calendar Version 1.0//EN
BEGIN:VEVENT
SUMMARY:VanDev: Microformats - Adding Semantics to Your Web Site
DTSTAMP:20080416T000000Z
END:VEVENT
END:VCALENDAR
}}}

Now Microformat parsers in Ruby or JavaScript or built-into the browser (such as in Firefox 3) or using a browser plugin (such as in Firefox 1.x/2.x) can find out more about the event and offer mashup services such as export to your calendar, etctera by simply reading (and parsing) the web page.


h1.  Who's using Microformats?

* Google Maps
* Yahoo! Upcoming Event Listings
* Flickr Photos

How do I know? Let's try some mashups using Microformats.


h1. Firefox Microformat Browser Plugins

* Hello Operator - "Install Operator Firefox Browser Addon":https://addons.mozilla.org/en-US/firefox/addon/4106

h3. What's Operator?

Operator is a free, open source Firefox browser addon that lets you interact with semantic data on web pages,
including Microformats, RDFa and eRDF.



h1. Operator Actions / Mashup Samples

* Export Contact
* Add to Google Calendar
* Find with Google Maps
* Find photos on flickr
* Find bookmarks on del.icio.us
* Find blogs on Technorati


h1. Microformat Mashups Demos

# geo Microformat + Google Maps
# rel-tag Microformat + Flickr
# hCalendar Microformat + Google Calendar
# hCard Microformat +  Contact Adress Book Export/Import


h1. Mashup #1 w/ Maps  - Geo Microformat

Flickr 2.3 million photos geotagged this month

* Arc the Triumph -> http://flickr.com/photos/cuellar/244449798/
* Golden Bricks - Fall in Vancouver -> http://flickr.com/photos/januszbc/1776184496/
* Vancouver Sculpture Biennale -> http://flickr.com/photos/pandoras_box/487848863/
* New Westminster, SkyTrain Bridge -> http://flickr.com/photos/januszbc/2100964102/
* North Vancouver's Lynn Canyon -> http://flickr.com/photos/januszbc/2211044973/
* Last Day in Paris -> http://flickr.com/photos/danorbit/346563918/
* Grand Canyon -> http://flickr.com/photos/leviathor/220065623/

Many more: http://flickr.com/photos/tags/geotagged/interesting/


h1. Behind the scenes - Geo Microformat Code

{{{
<span class='geo'>
   <span class='latitude'>49.205486</span>
   <span class='longitude'>-122.892036</span>
</span>
}}}

Alternative geo Microformat:

{{{
<abbr title="49.205486;-122.892036" class="geo">
  North Vancouver's Lynn Canyon
</abbr>
}}}

Yes. That's it. That's all. A real-word geo microformat from Flickr (a Yahoo! service).


h1.  Mashup #2 - rel-tag Microformat Demos

http://rubybook.wordpress.com

Mashup Actions for microformats tag:

* Find bookmarks on del.icio.us
* Find photos on flickr  -> Get your microformats tatoo!
* Find events on upcoming
* Find videos on YouTube  -> Bill Gates: "We need microformats" video!


h1. Behind the scenes - rel-tag Microformat Code

{{{
<a href="http://wordpress.com/tag/microformats/" rel="tag">microformats</a>,
<a href="http://wordpress.com/tag/giantglobalgraph/" rel="tag">giantglobalgraph</a>
}}}

Yes. That's all, hence, the name rel-tag!


h1. Mashup #3 -  hCalendar Microformat + Google Calendar

http://upcoming.yahoo.com/event/448518/

Demo Tails Export - Click on HTML


h1. Mashup #4 - hCard Microformat +  Contact Adress Book Export/Import

Create a hcard sample using hcard creator and save it to your disk

* hCard creator -> http://microformats.org/code/hcard/creator


h1. Microformats and REST

REST - Best practices for existing protocols and formats

* protocols -> HTTP (Hypertext Transfer Protocol)
* formats   -> HTML (Hypertext Markup Language)

Microformats -> Best Practices for HTML (Add Semantics to web pages using today's browsers)


h1. Microformats and Ruby - What is Mofo?

Mofo - Ruby Microformat Parser Project @ mofo.rubyforge.org

# Getting Started w/ Mofo (see "Online Tutorial":http://rubybook.wordpress.com/2008/01/18/microformats/)
# Try hcard - create hcard using hcard creator and parse it using mofo

h3. More Microformats and Ruby Links

Article: Me and uformats (Microformats) - err.the_blog (Chris Wanstrath)
@ http://errtheblog.com/posts/35-me-and-uformats


h1. Creating RESTful web services using Microformats

Turn your web page into an API.

Instead of asking for the user's address, ask for a web page (URL/URI) and use Microformats to get the address.

Instead of asking for the event details, ask for a web page (URL/URI) to includes all the event details marked up using Microformats.

Subscribe to an event, contact card using a web page (similar to a web feed) and the event, contact card stays up-to-date.

Microformats in a way is a "legalized" and standardized way for screen scrapping.

The Ruby Mofo library is - surprise, surprise - built on Hpricot.


h1. Microformats Line-Up

* hCalendar ->   events
* hCard     ->   people, contacts (business cards)
* hResume   ->   resumes (including skills)
* hReview   ->   movie reviews, wine reviews, you name it reviews
* hListing  ->   product listing, classifieds

The rel family (link rel=relationship attribute)

{{{
<a href="http://creativecommons.org/licenses/by-nc/3.0/" rel="license">
  Create Commons Attribution Non-Commercial 3.0</a>
}}}

* rel-license  ->  license type (creative commons, cc)
* rel-tag      ->  tagging
* XFN (XHTML Friend Network)   ->   friends

{{{
<a href="http://geraldbauer.wordpress.com" rel="met colleague">
  Gerald Bauer's Blog</a>
}}}

http://gmpg.org/xfn/creator


h1. Microformat Support Built Into Firefox 3

JavaScript API - Intro @ developer.mozilla.org/en/docs/Using_microformats


h1. That's it - Thanks - Questions?

Join us for the upcoming "SemanticCamp Vancouver":http://semanticcamp.wordpress.com