hCard Microformat (part 3)

Roger Costello

Click arrow key () to navigate to next page

label Property

label - use to specify a delivery address label, such as you might put on a package for mailing.
This property can include a "type" subproperty, whose values are the same as the type subproperty in adr -- dom (domestic delivery address), parcel, home, work, pref (preferred delivery address).
Example: markup this HTML text using the hCard properties:

<pre>
John Q. Smith
10 Boylston St.
Boston, MA 01210
</pre>

label Property

Here is the marked up text:

<pre class="vcard">
<span class="fn n">
<span class="given-name">John</span>
<abbr class="additional-name" title="Quinlan">Q.</abbr>
<span class="family-name">Smith</span>
</span>
<span class="label">10 Bolyston St.
Boston, MA 01210</span>
</pre>

View example07 (using label).

label Property

We can use both the adr and label properties:

<div class="vcard">
<span class="fn n">
<span class="given-name">John</span>
<abbr class="additional-name" title="Quinlan">Q.</abbr>
<span class="family-name">Smith</span>
</span>
<br />
<span class="adr label">
<span class="street-address">10 Bolyston St.</span>
<span class="locality">Boston</span>,
<abbr class="region" title="Massachusetts">MA</abbr>
<span class="postal-code">01210</span>
</span>
</body>

View example07 (using label and adr).

Telecommunication Address Properties

These properties are used to provide telecommunications addressing information:
- tel (telephone)
- email
- mailer (email software being used)

tel Property

tel - use to specify the person's telephone number. The "type" subproperty is used to specify the intended use of the telephone number. Here are the values for the type subproperty:
- home
- msg (indicates the telephone number has an answering machine)
- work
- pref (indicates that this is the preferred number)
- voice (indicates that this is a voice number)
- fax
- cell
- video (indicates the number is for a video conferencing system)
- pager
- bbs (indicates the number is for a bulletin board system)

tel Property

type subproperty values (continued):
- modem
- isdn
- pcs (indicates a personal communication services number)
If no "type" subproperty is specified it defaults to "voice"
Example: markup this HTML text:

John Q. Smith's home telephone number is: 617-555-1234

tel Property

Here is the marked up text:

<div class="vcard">
<span class="fn n">
<span class="given-name">John</span>
<abbr class="additional-name" title="Quinlan">Q.</abbr>
<span class="family-name">Smith</span></span>'s
<span class="tel">
<span class="type">home</span>
telephone number is:
<span class="value">617-555-1234</span>
</span>
</div>

Note the use of the "value" property. It ensures that "tel" receives the proper value.
View example08 (using tel).

Lab 2

Markup this HTML using hCard properties:

<body>
<h1>Robert (Jake) Williams</h1>
<h2>VITA</h2>
<dl>
<dt>Home Address</dt>
<dd>1641 Beacon Street</dd>
<dd>Philadelphia, Pennsylvania 19123-7774</dd>
<dd>215/321-7654</dd>
</dl>
<dl>
<dt>Business Address</dt>
<dd>Pennsylvania Commission on Children and Youth</dd>
<dd>1436 Market Street</dd>
<dd>Philadelphia, Pennsylvania 19125-7707</dd>
<dd>215/321-7222</dd>
</dl>
... (continued on next slide)

Lab 2 (cont.)

Markup this HTML using hCard properties:

...
<dl>
<dt>Reference</dt>
<dd>Dr. Marie D. Fredericks</dd>
<dd>Dean, College Of Education Temple University</dd>
<dd>Philadelphia, Pennsylvania 19125-0021</dd>
<dd>215/321-7111</dd>
</dl>
</body>

Here is the HTML document: Vita-Robert-Williams.html
Hints: (1) there can be multiple occurrences of the "adr" property, (2) an HTML document may contain multiple hCards

Lab 2 (cont.)

Name the new version of the HTML file: Vita-Robert-Williams-revised.html
After marking up the HTML with the hCard properties:
1. Validate your HTML using the W3C HTML validator: http://validator.w3.org/
2. Use Brian Suda's xhtml2vcard.xsl tool to extract the hCard and generate a vCard (.vcf file). In the lab 2 folder is run.bat. Double click on it, and it will invoke Brian's tool.

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

Lab 3

Add Stephen Hawking to your Outlook contacts (import the .vcf file from Lab 1).
Add Robert Williams and Marie Fredericks to your Outlook contacts (import the .vcf file from Lab 2).

email Property

email - use to specify the email address of a person
A "type" subproperty can be used to specify the format or preference of the email address:
- internet (indicates it is an internet email address)
- x400 (indicates it is an X.400 address)
- pref (indicates the preferred email address when more than one is specified)
Example: markup this HTML text:

His email address is: jpublic@gmail.com

email Property

Here is the marked up text:

<div class="vcard">
<abbr class="fn" title="John Q. Smith">His</abbr>
email address is:
<a class="email" href="mailto:jpublic@gmail.com">jpublic@gmail.com</a>
</div>

Note: wrap an email address in an HTML anchor (<a>) tag.
The value of the email property is the value of the href attribute, omitting the "mailto:" prefix and any "?..." query suffix (if present).
View example09 (using email).

mailer Property

mailer - use to specify the type of email software that is used by the person.
Example: markup this HTML text:

The emailing software that he uses is: Microsoft Outlook

Here is the marked up text:

The emailing software that
<div class="vcard">
<abbr class="fn" title="John Q. Smith">he</abbr>
uses is:
<span class="mailer">Microsoft Outlook</span>
</div>

Geographical Properties

These properties are used to provide geographical position information:
- tz (time zone)
- geo (lat, lon)

tz Property

tz - use to specify the time zone where the person resides.
Example: markup this HTML text:

He lives in the EST time zone.

Here is the marked up text:

He lives in the
<abbr class="tz" title="-05:00">EST</abbr>
time zone

Note: use a utc-offset to specify the time zone.

geo Property

geo - use to specify the global position of the person. It has two subproperties - latitude and longitude.
latitude: use a positive number to specify a location north of the equator; use a negative number to specify a location south of the equator.
longitude: use a negative number to specify a location west of the prime meridian; use a positive number to specify a location east of the prime meridian.
The latitude and longitude values must be specified as a decimal value, and should be specified to six decimal places. This will allow for granularity to within a meter of the geographical position.

geo Property

Example: markup this HTML text:

His home GPS location is: 41.537063, -90.561585 (lat/lon)

Here is the marked up text:

His home GPS location is:
<div class="geo">
<span class="latitude">41.537063</span>,
<span class="longitude">-90.561585</span>
</div>
(lat/lon)

geo Property

Typically the creator of HTML text has no interest in displaying lat/lon decimal values on the browser screen. He just wants to display human-oriented text, e.g.,

His home is a big, brown house.

But he does want to make lat/lon geo info available to aggregators (Web tools).
The HTML text can be extended (without impact to what is seen on the browser screen) to incorporate the geo location information
Here is the marked up text:

<abbr class="geo" title="41.537063;-90.561585">His home</abbr> is a big, brown house.

geo Property

<abbr class="geo" title="41.537063;-90.561585">His home</abbr> is a big, brown house.

Note that the value of the lat/lon is encoded within the title attribute of the abbr element: latitude semicolon longitude.
Also note that we have extended the original HTML text with additional information (lat/lon information).

geo Best Practice

Example: which part of this hCard should you wrap with geo?

<div class="vcard">
<span class="fn n">
<span class="given-name">John</span>
<abbr class="additional-name" title="Quinlan">Q.</abbr>
<span class="family-name">Smith</span>
</span><br />
<span class="adr">
<span class="street-address">10 Bolyston St.</span><br />
<span class="locality">Boston</span>,
<abbr class="region" title="Massachusetts">MA</abbr>
<span class="postal-code">01210</span>
</span>
</div>

Should we wrap the name, the street address, the entire address, or the whole thing? View example10 (without geo).

geo Best Practice

Best Practice: wrap the name:

<div class="vcard">
<abbr class="geo" title="42.352163;-71.062867">
<span class="fn n">
<span class="given-name">John</span>
<abbr class="additional-name" title="Quinlan">Q.</abbr>
<span class="family-name">Smith</span>
</span>
</abbr><br />
<span class="adr">
<span class="street-address">10 Bolyston St.</span><br />
<span class="locality">Boston</span>,
<abbr class="region" title="Massachusetts">MA</abbr>
<span class="postal-code">01210</span>
</span>
</div>

hCard Mashup with Google Earth

Tool to convert an hCard to KML, for use in Google Earth

See hCard-to-KML tool

hCard Mashup with Google Earth

Here's the KML of the hCard displayed in Google Earth:

The KML of the hCard displayed in Google Earth

Lab 4

Markup this HTML text using the hCard properties. Enhance the information in this document with the lat/lon coordinates of Trump Tower (Lat: 40.762458, Lon: -73.974385).

<body>
<h1>Donald Trump</h1>
<p>Donald John Trump was born on June 14, 1946 (in Queens, New York) to Mary MacLeod Trump,
a native of Scotland, and the soon-to-be millionaire Fred Trump. Trump is an American
business executive, entrepreneur and author. He is the CEO of Trump Organization,
an American-based real estate developer in the real estate market and the founder of
Trump Entertainment, which operates gambling casinos. He enjoyed a great deal of
publicity following the success of his reality television show, The Apprentice
(in which he serves as both executive producer and host for the show).
He resides in Trump Tower at 725 Fifth Avenue at 56th Street in New York City, NY.
</p>
</body>

Here is the HTML document: Donald-Trump.html

Lab 4 (cont.)

Name the new version of the HTML file: Donald-Trump-revised.html
After marking up the HTML with the hCard properties:
1. Validate your HTML using the W3C HTML validator: http://validator.w3.org/
2. Use the hCard2kml.xsl tool to extract the hCard and generate a KML file. In the lab 4 folder is run.bat. Double click on it, and it will invoke the xhtml2kml.xsl tool tool.
3. Next, download Google Earth
4. Double click on the KML file and it will display on Google Earth!

geo Microformat

We have seen that geo is a "property" of the hCard Microformat.
geo is also a standalone Microformat. It can be used on its own, independent of hCard.

Continued ...

Click here for Part 4 of the hCard Tutorial
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 5 of the hCard Tutorial

08 March 2007

The hCard Microformat

hCard Microformat (part 3)

Roger Costello

label Property

label Property

label Property

Telecommunication Address Properties

tel Property

tel Property

tel Property

Lab 2

Lab 2 (cont.)

Lab 2 (cont.)

hCard and Microsoft Outlook

Lab 3

email Property

email Property

mailer Property

Geographical Properties

tz Property

geo Property

geo Property

geo Property

geo Property

geo Best Practice

geo Best Practice

hCard Mashup with Google Earth

hCard Mashup with Google Earth

Lab 4

Lab 4 (cont.)

geo Microformat

Continued ...