# 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

- 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

- 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).

# 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

# The hCard Tutorial

- Homepage
- Click here for Part 1 of the hCard Tutorial
- Click here for Part 2 of the hCard Tutorial
- Click here for Part 3 of the hCard Tutorial
- Click here for Part 4 of the hCard Tutorial
- Click here for Part 5 of the hCard Tutorial