Microformat Demonstration

Roger Costello

Click arrow key () to navigate to next page

Power of Microformats

"Show me a Map!"

Screenshot of Waldorf-Astoria.html

geo Microformat

Browser Web tool displays the lat/lon of the Waldorf-Astoria

geo Microformat + Google Maps

Google Earth display of the Waldorf-Astoria

"Show me a Map for each News Story!"

Screenshot of an HTML document containing news headlines

geo, hAtom Microformats

Browser Web tool displays the set of lat/lon values available

geo + hAtom + Google Maps

Google Map of one of the news stories

"Hey Steven Hawking!"

Screenshot of Steven-Hawking.html

hCard Microformat

Browser Web tool displays Steven Hawkingcontact information

hCard Microformat + Outlook

Steven Hawking contact information added to Outlook

"Show me other Photos!"

Screenshot of GreenParrotBar.html

Rel-tag Microformat

Browser Web tool displays the tags on the page

Rel-tag Microformat + Flickr

Flickr photos tagged KeyWest

"Mark my Calendar"

Screenshot of the Web page announcing Web 2.0 Expo

hCalendar Microformat

Browser Web tool displays the title of the event (Web 2.0 Expo)

hCalendar + Google Calendar

Event added to Google Calendar

Mashups!