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 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:

Intermed. Ruby on Rails Workshop (Incl. Facebook and Mobile Web)

Friday, January 25, 2008
BCIT Downtown Campus
555 Seymour Street
Vancouver, British Columbia

HTML tags such as `h1` (heading1) and `p` (paragraph) and `br` (break) are kind of meaningless (without semantics). 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. Semantic Web Example Using Microformats ======================================= Let's add semantics using Microformats to the event example:

Intermed. Ruby on Rails Workshop (Incl. Facebook and Mobile Web)

Friday, January 25, 2008

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:-//RailsAdvance//NONSGML Workshop Calendar Version 1.0//EN BEGIN:VEVENT SUMMARY:Intermed. Ruby on Rails Workshop (Incl. Facebook and Mobile Web) DTSTAMP:20080125T000000Z 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. Who's using Microformats? ========================= - Google Maps - Yahoo! Upcoming Event Listings - Flickr Photos How do I know? Let's try some mashups using Microformats. Firefox Microformat Browser Plugins =================================== - Hello Operator - Install Operator 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 Microformat Mashups Demos ========================= 1. geo Microformat + Google Maps 2. rel-tag Microformat + Flickr 3. hCalendar Microformat + Google Calendar 4. hCard Microformat + Contact Adress Book Export/Import 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/` Behind the scenes - Geo Microformat Code ======================================== 49.205486 -122.892036 Alternative geo Microformat: North Vancouver's Lynn Canyon Yes. That's it. That's all. A real-word geo microformat from Flickr (a Yahoo! service). 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! Behind the scenes - rel-tag Microformat Code ============================================ , Yes. That's all, hence, the name rel-tag! Mashup #3 - hCalendar Microformat + Google Calendar ==================================================== `http://upcoming.yahoo.com/event/390146/` Demo Tails Export - Click on HTML 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 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) 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 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. 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) Create Commons Attribution Non-Commercial 3.0 - rel-license -> license type (creative commons, cc) - rel-tag -> tagging - XFN (XHTML Friend Network) -> friends Sample: Gerald Bauer's Blog `http://gmpg.org/xfn/creator` Microformat Support Built Into Firefox 3 ======================================== JavaScript API - Intro @ `developer.mozilla.org/en/docs/Using_microformats` More Microformats and Ruby Links ================================ Article: Me and uformats (Microformats) - err.the_blog (Chris Wanstrath) @ `http://errtheblog.com/posts/35-me-and-uformats`