hCard Microformat (part 5)

Roger Costello

Click arrow key () to navigate to next page

Compound vs Elemental

• hCard is called a "compound Microformat." This means that it contains properties and subproperties.
• There are other Microformats (e.g., the VoteLinks Microformat) that are singular and have no properties or subproperties. They are called elemental Microformats.

Case Sensitivity

• The property and subproperty names are case-sensitive.
• Use lowercase names: vcard, fn, n, given-name, family-name, and so on.

Root Class Name

• The root class name for all hCards is "vcard"
• Why isn't the root class name "hcard"? Answer: the hCard Microformat is a 1:1 mapping of the vCard specification. The hCard classnames are based on the names from vCard.

Valid hCard Root Elements

• Recall that the value of any HTML class attribute is a space-separated list of class names.
• Thus this is a valid hCard:

1. <div class="vcard author">...</div>

• Read as: "This 'div' element contains both data about a vcard and data about an author".

hCard for Other Things

• The previous slides have described how to use hCard to mark up person information.
• But hCard may also be used to markup company, organization, and place information.
• Some things to note when using hCard to markup company/organization information:
  • The formatted name (i.e., fn) and organization (i.e., org) properties are the same, so use class="fn org"
  • The name - n - property is meaningless (what's the family-name of an organization?), so don't use the n property.
  • All the other properties are the same as for marking up person data.

hCard Markup of Hotel Information

• Example: markup this data:

1. Waldorf-Astoria
2. 301 Park Ave.
3. New York, NY 10022
4. Reservations: 212.355.3000
5. Guest Facsimile: 212.872.7272

hCard Markup of Hotel Information

1. <div class="vcard">
2. <abbr class="geo" title="40.756561; -73.974056">
3. <span class="fn org">Waldorf-Astoria</span>
4. </abbr>
5. <div class="adr">
6. <span class="street-address">301 Park Ave.</span><br />
7. <span class="locality">New York</span>,
8. <abbr class="region" title="New York">NY</abbr>
9. <span class="postal-code">10022</span>
10. </div>
11. <div class="tel">
12. <abbr class="type" title="voice">Reservations:</abbr>
13. <span class="value">212.355.3000</span>
14. </div>
15. <div class="tel">
16. <abbr class="type" title="fax">Guest Facsimile:</abbr>
17. <span class="value">212.872.7272</span>
18. </div>
19. </div>

hCard Markup of Hotel Information

• Things to note about the marked up hotel information on the previous slide:
  • I enhanced the HTML data with geo data. I wrapped the name (Waldorf-Astoria) with the geo data. View example11 (Waldorf-Astoria.html)
  • I ran hCard2kml to generate KML. View example11 (Waldorf-Astoria.kml)
  • I dropped the KML file into Google Earth. See next slide for how it appears.

hCard Markup of Hotel Information

• Waldorf-Astoria.html --> hCard2kml.xsl --> Waldorf-Astoria.kml --> Google Earth

hCard for XML

• Thus far we have used hCard to mark up (X)HTML documents.
• But you can also use hCard to markup XML documents.
• Example: markup this XML document:

1. <hotel>
2. <name>Waldorf-Astoria</name>
3. <location>
4. <street>301 Park Ave.</street>
5. <city>New York</city>
6. <state>NY</state>
7. <zipcode>10022</zipcode>
8. </location>
9. </hotel>

hCard for XML

• Here is the marked up XML document:

1. <hotel class="vcard">
2. <name class="fn org">Waldorf-Astoria</name>
3. <location class="adr">
4. <street class="street-address">301 Park Ave.</street>
5. <city class="locality">New York</city>
6. <state class="region">NY</state>
7. <zipcode class="postal-code">10022</zipcode>
8. </location>
9. </hotel>

• XML Schema Best Practice: add an optional class attribute to all elements.

hCard and Microsoft Outlook

• If you use Outlook for email then you can automatically create contacts from documents that contain hCards.
• Suppose an HTML document contains an hCard of a person. You can generate a vCard from the hCard by using Brian Suda's xhtml2vcard.xsl tool.
• Then you can install the vCard as a contact in Outlook by following these steps:
  • Open Outlook
  • Click on the Contacts button
  • Under File select Import and Export then select Import a VCARD file (.vcf)

hCard Creator

• There is an online tool to help you automatically generate an hCard: hCard Creator
• Go to the Web site and type in your contact information.
• Now you can take that XHTML and copy and paste it into any (X)HTML document you create.
• Thus, you can instantly add business card information to a Web page!

hCard Tool - Smartzilla

• Smartzilla is a tool which enables you to extract an hCard out of a Web page and add the person as a contact.
• It is a Firefox browser extension.
• Go to this URL: http://www.stripytshirt.co.uk/features/firefox/smartzilla
• Scroll down and click on Install Smartzilla 0.3
• Now open Firefox. Under File select Open File. Open sz-0-3.xpi Select Install Now.
• Close Firefox and then restart it. (cont. on next slide)

hCard Tool - Smartzilla

• Go to a Web page that has an hCard in it.
• Right mouse click on the hCard and select Add to Contacts. Click Okay in the popup box.

hCard Tool - Tails

• Smartzilla requires you to know (or guess) that an hCard exists on a Web page.
• Tails allows you to determine if an hCard is on a Web page.
• Go to this URL: http://blog.codeeg.com/tails-firefox-extension
• Click on install Tails (v0.1.3) here.
• Open Firefox. Under File select Open File. Open tails-0-1-3.xpi
• Select Install Now.
• Close Firefox and then restart it. (cont. on next slide)

hCard Tool - Tails

• Go to a Web page that has an hCard in it.
• An icon shows whenever Microformats are present on the page. The icon is lime-colored, on the bottom right-hand side. Double click on it.

hCard Search Engine

• At this Web site you can search the Web for pages that contain hCards: http://kitchen.technorati.com/search

Mozilla Operator

• Operator is a "Microformat detection extension for Firefox".
• "Operator lets you combine pieces of information on Web sites with applications in ways that are useful. For instance, Flickr + Google Maps, Upcoming.org + Google Calendar, Yahoo! Local + your address book, and many more possibilities and permutations. All of these scenarios are possible due to Microformats, an emerging standard for injecting semantics into HTML."
• Overview: http://labs.mozilla.com/2006/12/introducing-operator
• Download: https://addons.mozilla.org/firefox/4106/

Mozilla Operator

• Install Operator and then open Waldorf-Astoria.html (example11)
• You will see a new toolbar on your browser:

Mozilla Operator

• Click on Google Maps (actually, click on the little triangle next to it), and it will display lat/lon values; now click on a lat/lon value; Operator will extract the geo information and display it on Google Maps!

Mozilla Operator

• Yahoo has marked up their Yahoo! Local pages using Microformats
• Go to Yahoo! Local. In the "Search For:" box enter "restaurants" (without the quotes). In the "Address, City & State" box enter "Boston, MA" (without the quotes). It will show you a bunch of restaurants in Boston. Select Meritage.

Mozilla Operator

Mozilla Operator

• Flickr allows you to geotag photos, i.e., associate geo-location information to your photos (how to geotag your Flickr photos).
• My Flickr photo has been geotagged.
• You can view a Google Map of where the photo was taken by using Operator - click on Google Maps in Operator's toolbar.

Mozilla Operator

• "You can use Operator to debug your Microformats. Holding down the Ctrl key when you select a Microformat action will show you the HTML that corresponds that Microformat. In addition, holding down the Shift key when you select a Microformat action will display our internal representation of the Microformat data."
• On the next slide you can see what Operator displays for Waldorf-Astoria.html when the Ctrl key is held down while selecting the Google Maps action.

Mozilla Operator

Mozilla Operator

• RSS and ATOM are ways to syndicate information. They are XML-based.
• hAtom is an HTML-based way to syndicate information.
• Here is an hAtom version of a CNN RSS feed; I have enriched it with a geo Microformat for each news item. On the Operator toolbar Google Maps(7) indicates that there are 7 maps that can be viewed (nearly every news item has a Google Map associated to it).

Operator Extensions

• People have contributed extensions to Operator.
• Each extension is Javascript code that gets added to Operator; the result of adding the extension is the Operator toolbar gets another menu.
• I recommend adding these two extensions to Operator:
  • Simile Timeline: this extension does a mashup of the event Microformat with MIT's timeline web service. The result is a timeline showing all the events on the current web page.
  • Exhibit: this extension does a mashup of the hCard Microformat with MIT's exhibit web service. The result is a user-sortable list of all the contact information on the current web page.

Adding an Extensions

• Here's how to add an extension to Operator:
  1. First install Operator.
  2. Download the Javascript extension (e.g. simile_timeline.js) to your desktop.
  3. Under the (Firefox) Tools menu, select Add-ons.
  4. In the section labeled Operator, click on Options
  5. Click on the tab labeled User Scripts.
  6. Click on the button labeled New.

Adding an Extensions

• Continued from previous page:
  7. Navigate to your desktop, where you saved the extension (e.g. simile_timeline.js), and Open it.
  8. Next click on the tab labeled Actions.
  9. Click on the button labeled New.
  10. Open the drop-down list and select the extension (e.g. Simile Timeline).
  11. Restart Firefox
  12. Now there should be a new menu on the Operator toolbar.

Page with Event Microformats

Page with Event Microformats

View Events in a Timeline

Portable Profiles

• An hCard about you contains identity information about you.
• A Web site could use your hCard to identify you, rather than forcing you to register.
• Videntity.org is a third-party OpenID identity provider which imports and exports your identity information by extracting your hCard from your Web page.
• "We're getting closer to the goal of banishing Web registration forms" [Dan Libby]

hCard References

• hCard FAQ
• hCard Implementations
• hCard Parsing