# 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