Microformat Demonstration

Roger Costello

Click arrow key () to navigate to next page

Power of Microformats

• The following slides demonstrate some of the things that can be done with Microformats.
• Microformats is an "enabling technology". It enables Web documents - HTML, XHTML, BLOGS, RSS, ATOM, XML - to be meaningfully processed, and mashed up with other information.
• Microformats are invisible to humans, visible to machines (Web applications).
• Microformats is a Web 2.0 technology.

"Show me a Map!"

• Here is a Web page displaying textual information about the Waldorf-Astoria. It is screaming for a Google Map to show where the Waldorf-Astoria is located.

geo Microformat

• Not visible on the screen, but visible to Web applications, is an embedded geo Microformat. A plugin in the browser detects the geo Microformat.

geo Microformat + Google Maps

"Show me a Map for each News Story!"

• This Web page contains news headlines. It is screaming for Google Maps to show the location of each news story.

geo, hAtom Microformats

• Not visible on the screen, but visible to Web applications, are the embedded geo and hAtom Microformats. A plugin in the browser detects the geo and hAtom Microformats.

geo + hAtom + Google Maps

"Hey Steven Hawking!"

• Here is a Web page displaying information about the physicist Steven Hawking. It sure would be nice to add Steven Hawking as a contact to my email system (e.g., Outlook).

hCard Microformat

• Not visible on the screen, but visible to Web applications, is the hCard Microformat. A plugin in the browser detects the hCard Microformat.

hCard Microformat + Outlook

"Show me other Photos!"

• Here is a Web page that is "tagged" with two tags: KeyWest and GreenParrotBar. "Hey Flickr, got any other photos with these tags?"

Rel-tag Microformat

• A plugin in the browser detects the rel-tag Microformat.

Rel-tag Microformat + Flickr

"Mark my Calendar"

• Here is a Web page with an announcement of the Web 2.0 Expo. I want to mark my Google Calendar with this event.

hCalendar Microformat

• Not visible on the screen, but visible to Web applications, is an embedded hCalendar Microformat. A plugin in the browser detects the hCalendar Microformat.

hCalendar + Google Calendar

Mashups!

• You have seen some of the power of Microformats. This is just the beginning.
• You have seen five examples of Microformats mashed up with other information:
  • geo Microformat + Google Maps
  • geo Microformat + hAtom Microformat + Google Maps
  • hCard Microformat + Outlook Contacts
  • rel-tag Microformat + Flickr
  • hCalendar Microformat + Google Calendar
• Want to learn more? Okay! Let's begin: Microformat Tutorial