hcard-brainstorming

2005-11-11T19:59:32Z

KarlDubost: /* hCardBrainstorming */ RFC2806 for hcard

= hCardBrainstorming =
__TOC__
== Authors ==
* [http://suda.co.uk/ Brian Suda]
* [http://tantek.com/log/ Tantek Çelik], [http://technorati.com Technorati, Inc]

== Examples ==

* See [[hcard-examples]].
** We should provide 1:1 hCard examples for each example in [http://www.ietf.org/rfc/rfc2426.txt RFC 2426].

=== John Smith ===
<pre><nowiki>
BEGIN:VCARD
VERSION:2.0
N:Smith;John
FN:John Smith
TEL;CELL:314-123-4567
TEL;FAX:314-123-4568
TEL;WORK:314-123-4569
URL:www.example.com
org:Example Oragnization;Marketing and Communications
EMAIL;INTERNET:john.smith@example.com
TITLE:Director, Marketing & Web Services
ADR;;123 Main Street;Any Town;MO;12345;USA
NOTE;quoted-printable:"A personal signature here"
END:VCARD
</nowiki></pre>
This is one way to encode the vCard in HTML
<pre><nowiki>
<div class="vcard">
<a href="mailto:john.smith@example.com">
<span class="fn n">
<span class="given-name">John</span>
<span class="family-name">Smith</span>
</span>
</a><br />


<span class="tel">314-123-4567</span><br />
<span class="tel">314-123-4568</span><br />
<span class="tel">314-123-4569</span><br />

<p>I work for
<span class="org">
<a href="http://www.example.com" class="organizational-name">Example Oragnization</a>
in the <span class="organizational-unit">Marketing and Communications</span>
</span>
department as <span class="title">Director, Marketing & Web Services</span>
</p>

<address>
<span class="street">123 Main Street</span><br />
<span class="locality">Any Town</span>,
<span class="region">MO</span>
<span class="postal-code">12345</span><br />
<span class="country-name">USA</span><br />
</address>

<div class="note">A personal signature here</div>

</div>
</nowiki></pre>
This would display as:<br />
[mailto:john.smith@example.com John Smith]<br />
314-123-4567<br />
314-123-4568<br />
314-123-4569<br />
<br />
I work for [http://www.example.com/ Example Oragnization] in the Marketing and Communications department as Director, Marketing & Web Services<br />
<br />
123 Main Street<br />
Any Town, MO 12345<br />
USA<br />
<br />
A personal signature here<br />
<br />

=== Baron von Münchhausen ===
<pre><nowiki>
BEGIN:VCARD
VERSION:2.0
N:Hieronymus;Karl;Friedrich;;Baron von Münchhausen;
FN:Karl Friedrich Hieronymus
NICKNAME:Baron von Münchhausen,The Baron of Lies,Freddy
SORT-STRING:Hieronymus
END:VCARD
</nowiki></pre>
This is one way to encode the vCard in HTML
<pre><nowiki>
<div class="vcard" xml:lang="de">
<span class="n">
<span class="fn">
<span class="given-name">Karl</span>
<span class="additional-names">Friedrich</span>
<span class="family-name"><span class="sort-string">H</span>ieronymus</span>,
</span>
<span class="honorific-suffixes">Baron von Münchhausen</span>
</span>
<h2>Nicknames</h2>
<ul class="nicknames">
<li>Baron von Münchhausen</li>
<li>The Baron of Lies</li>
<li>Freddy</li>
</ul>
</div>
</nowiki></pre>
This would display as:<br />
Karl Friedrich Hieronymus, Baron von Münchhausen<br />
<br />
Nicknames
* Baron von Münchhausen
* The Baron of Lies
* Freddy

=== Examples from the RFC ===
These examples were taken from the vCard RFC 2426.
<pre><nowiki>
N:Public;John;Quinlan;Mr.;Esq.
NICKNAME:Jim,Jimmie
PHOTO;VALUE=uri:http://www.abc.com/pub/photos/jqpublic.gif
LOGO;VALUE=uri:http://www.abc.com/pub/logos/abccorp.jpg
BDAY:1987-09-27T08:30:00-06:00
TEL;TYPE=work,voice,pref,msg:+1-213-555-1234
EMAIL;TYPE=internet:jqpublic@xyz.dom1.com\
TZ:-05:00
CATEGORIES:INTERNET,IETF,INDUSTRY,INFORMATION TECHNOLOGY
NOTE:This fax number is operational 0800 to 1715 EST\, Mon-Fri.
UID:s19950401-080045-40000F192713-0052
URL:http://www.swbyps.restaurant.french/~chezchic.html

<div class="vcard">
<a href="mailto:jqpublic@xyz.dom1.com" class="email n">
<span class="honorific-prefixes">Mr.</span> <span class="given-name">John</span>
<span class="additional-names">Quinlan</span> <span class="family-name">Public</span>
<span class="honorific-suffixes">Esq.</span>
</a>
<ul class="nickname">
<li>Jim</li>
<li>Jimmie</li>
</ul>
<img src="http://www.example.com/pub/photos/jqpublic.gif" class="photo" />
<img src="http://www.example.com/pub/logos/abccorp.jpg" class="logo" />

<abbr title="1987-09-27T08:30:00-06:00" class="bday">Sept. 27th 1987</abbr>


<div class="tel">+1-213-555-1234</div>


<abbr title="-050000" class="tz">Eastern Standard Time</abbr>

<ul class="categories">
<li>INTERNET</li>
<li>IETF</li>
<li>INDUSTRY</li>
<li>INFORMATION TECHNOLOGY</li>
</ul>

<div class="note">This fax number is operational 0800 to 1715 EST\, Mon-Fri.</div>
<a href="http://www.swbyps.restaurant.french/~chezchic.html" class="url"></a>
</div>
</nowiki></pre>

<pre><nowiki>
BEGIN:vCard
VERSION:3.0
FN:Frank Dawson
ORG:Lotus Development Corporation
ADR;TYPE=WORK,POSTAL,PARCEL:;;6544 Battleford Drive;Raleigh;NC;27613-3502;U.S.A.
TEL;TYPE=VOICE,MSG,WORK:+1-919-676-9515
TEL;TYPE=FAX,WORK:+1-919-676-9564
EMAIL;TYPE=INTERNET,PREF:Frank_Dawson@Lotus.com
EMAIL;TYPE=INTERNET:fdawson@earthlink.net
URL:http://home.earthlink.net/~fdawson
END:vCard

<div class="vcard">
<a href="http://home.earthlink.net/~fdawson" class="url fn">Frank Dawson</a>
<div class="org">Lotus Development Corporation</div>


<div class="adr">
<span class="street-address">6544 Battleford Drive</span>
<span class="locality">Raleigh</span>
<span class="region">NC</span>
<span class="postal-code">27613-3502</span>
<span class="country-name">U.S.A.</span>
</div>


<div class="tel">+1-919-676-9515</div>
<div class="tel">+1-919-676-9564</div>


<a class="email" href="mailto:Frank_Dawson@Lotus.com">Frank_Dawson@Lotus.com</a>
<a class="email" href="mailto:fdawson@earthlink.net">fdawson@earthlink.net</a>
</div>

BEGIN:vCard
VERSION:3.0
FN:Tim Howes
ORG:Netscape Communications Corp.
ADR;TYPE=WORK:;;501 E. Middlefield Rd.;Mountain View;CA; 94043;U.S.A.
TEL;TYPE=VOICE,MSG,WORK:+1-415-937-3419
TEL;TYPE=FAX,WORK:+1-415-528-4164
EMAIL;TYPE=INTERNET:howes@netscape.com
END:vCard

<div class="vcard">
<a href="mailto:howes@netscape.com" class="fn email">Tim Howes</a>
<div class="org">Netscape Communications Corp.</div>


<div class="adr">
<span class="street-address">501 E. Middlefield Rd</span>
<span class="locality">Mountain View</span>
<span class="region">CA</span>
<span class="postal-code">94043</span>
<span class="country-name">U.S.A.</span>
</div>


<div class="tel">+1-415-937-3419</div>
<div class="tel">+1-415-528-4164</div>

</div>

</nowiki></pre>

=== Using RFC2806 with hCard ===

[http://www.ietf.org/rfc/rfc2806.txt RFC 2806] defines the telephone scheme "tel:", "fax:" and "modem:" to handle phone communications with URIs in the same way, "mailto:" is defined for email. It's part of the list or registered schemes by IANA : [http://www.iana.org/assignments/uri-schemes Uniform Resource Identifier (URI) SCHEMES]

<pre><nowiki>
tel telephone [RFC2806]
fax fax [RFC2806]
modem modem [RFC2806]
</nowiki></pre>

It is practical to write your tel number like this.

<pre><nowiki>
<a class="tel" href="tel:+1-919-555-7878>+1-919-555-7878</a>
</nowiki></pre>

or even

<pre><nowiki>
<a class="tel" href="tel:+1-919-555-7878>Mr Smith's phone</a>
</nowiki></pre>

You can add support for "tel:" to your desktop and to your browser

* For Gnome, edit ~/.gnome/Gnome and add something to the URL Handlers section. (Dan Connolly uses this to get galeon to launch telnum from [http://dev.w3.org/cvsweb/2001/telagent/ telagent sources] for tel URIs)
* In Mozilla, [http://dizzy.mozdev.org/ Dizzy]
* In Internet Explorer, [http://msdn.microsoft.com/workshop/networking/pluggable/overview/overview.asp Asynchronous Pluggable Protocols]

On the CSS front… You could for example add automagically an icon. I have put the property !important for those who wants to add it to their own stylesheet in their browsers, so they know type of links when browsing.

<pre><nowiki>
a[href^="tel:"]:before {
content: '\260f ' !important;
padding-left: 20px !important; }

a[href^="mailto:"]:before {
content: '\2709 ' !important;
padding-left: 20px !important; }
</nowiki></pre>

== Encoding "modern" attributes ==

Since vCard was first established, various interactive communication technologies and addressing schemes have been widely adopted. Although there aren't specific properties for these technologies / addressing schemes, they can be captured as URLs or email addresses as follows:

* AOL Instant Messenger (AIM) ids, simply store "aim:goim?screenname=" urls, e.g.
** <code><a class="url" href="aim:goim?screenname=yournamehere">...</code>
* iChat mac.com addresses, simply store "@mac.com" email addresses, e.g.
** <code><a class="email" href="mailto:steve@mac.com">...</code>
* MSN Instant Messenger, you can simple store "@hotmail.com" or "@msn.com" or "@passport.com" email addresses.
* Internet Relay Chat (IRC), use "irc:" URLs.

== Encoding Company data as a Business Card (proposal) ==
In the wild there are several hCards that do not currently validate because they are businesses that have omitted the "fn" property in favour of the "org" property.
# if there is an "fn" property use that value
# if the "fn" property is missing, but an "org" property is available, duplicate the value for both
# the "n" property is manditory, and must somehow be derived from "org", probably use the entire value as "family-name"

== CSS Styles ==
Not only can you create semantics with the hCard values, but you can add CSS styles to them as well. You are free to style the terms in any way you want, but here we can list a few ideas for how to style terms.

If you want to encode hCard data, but do NOT want to display it in the HTML code, then you can hide that tag in CSS with the following code:
<pre><nowiki>
<span style="display: none">Hidden Data</span>
</nowiki></pre>
Transforming applications will still find the data and use it when converting hCards to vCards.

== Auto-Discovery ==
There is currently a debate over the best way to add an auto discovery link to your HTML to extract the vCard.

On the page with the hCard encoding, the best link would be as follows:
<code><nowiki> <link rel="alternate" type="text/vcard" href="..." /> </nowiki></code>
this HTML page is an alternate view of the vCard.

When on a different page, referencing that encoded page in the href would NOT be an alternate view of the current page. So a different rel type must be established to decribe that relationship. The ideas vary from specific to vague. The list and categories follow:
<pre><nowiki>
rel="contactinfo"
rel="profile"
rel="author"
rel='PIM'
rel='person'
rel='about'
rel='contact'
rel='hcard'
rel='microformat'
</nowiki></pre>
Example of mixing two rel types to a single page.
rel="hcard xfn"

NOTE: this one is probably ruled out because you could assume you are linking directly to a vCard, which is not true.
rel="vcard"

=== Auto-Discovery for XFN ===

An author will typically their XFN information on a specific page, rather than all pages. In particular, a specific page separate from the home page of their blog, and thus it would be useful to have an explicit rel value to assist in auto-discovery of XFN information.

This was suggested by Jens Alfke on 20050606 at the WWDC blogger's dinner.

== Issues with vCard Applications ==
The following are major vCard application and a description of the features they support and don't support.

=== Apple Address Book ===
* There are issues with importing UTF-8 vCards
* LOGO property is not supported
* only ONE URL is supported
* PHOTO property can only be encoded, no URL references allowed
* SOURCE property is not supported

=== Windows Address Book ===
(not yest tested)

=== Mozilla Thunderbird ===
(not yest tested)

=== Other? ===
(not yest tested)

== Open Questions ==

Q: since many of the components would be using CSS classes for encoding data, it is possible to MIX two different profiles. (e.g. hCard and XFN) There are no real constraints on where/how to enforce class names, these are based on the html profile, since it is difficult to associate the text within the attribute to a specific profile.

<pre><nowiki>
...
<a href="mailto:joe.smith@example.com" class="fn" rel="met">Joe Smith</a>
...
</nowiki></pre>

-- [http://suda.co.uk/ Brian Suda]

Q: Preserving White space? Should the transforming applications preserve extra white space characters? For example:
<pre><nowiki>
<a href="http://mywebsite.com/" class="fn n">
<span class="given-name">John</span>
<span class="other-names">Q.</span>
<span class="family-name">Public</span>
</a>
</nowiki></pre>

When transformed into a vCard, the N property will pick apart the span tags and create the value for N correctly seperated by colons. The FN property will take a string and simply display it. There are two possible renderings for FN:
<pre><nowiki>
John Q. Public

John
Q.
Public
</nowiki></pre>

Either the white-space is preserved or it is not. Which should the transforming applications render?

-- [http://suda.co.uk/ Brian Suda]

A: The parsing application should follow the white space collapsing rules of the mime type it retrieves. I.e. if it retrieves a "text/html" document, it should do HTML white space collapsing.

-- [http://tantek.com/log/ Tantek]

Many of the Questions and Answers are relevant to both ["hCal"] and hCard.

Q: Would it be appropriate to wrap the name of the vCard owner with <dfn/>? This may give the hCard some added semantic value in the XHTML document.
<pre><nowiki>
<span class="agent">
<span class="vcard">
<span class="email">
<a class="internet" href="mailto:jfriday@host.com">
<dfn>
<span class="fn">Joe Friday</span>
</dfn>
</a>
</span>
<span class="tel">+1-919-555-7878</span>
<span class="title">Area Administrator, Assistant</span>
</span>
</span>
</nowiki></pre>
-- [http://www.ben-ward.co.uk/ Ben Ward]

== Applications ==
Applications that are hCard aware or can convert hCard to vCard formats.

=== Copy hCards favelet(s) ===
* I think a Favelet would work nicely here. When you find a page that is hCard friendly, you click the favlet and you get yourself a vCard. This is done! See X2V in the implementations section of the [[hcard|hCard]] spec.

=== Distributed Commentor Icons ===

* See [http://thedredge.org/2005/06/using-hcards-in-your-blog/ using hCards in your blog] for an example of hCards used for comment authors (commentors). The system used there, "Gravatars", is a centralized site that serves commentor icons that requires login etc.

What if we gave each commentor the option of hosting their own icon?

A distributed commentor icon implementation could work like this:

# Given the URL of a commentor, look for an <code><address></code> element with classname of "vcard" at the commentor's URL. The <code><address></code> element is supposed to be the contact information for the page (see [[hcard-faq|hCard FAQ]] for more info), so this makes sense.
# Next, look for the first element inside that hcard that has a classname of "logo".
# Hopefully that element is an <code><img></code>, and if so, use its src to get the commentor's icon.
# Presto. You've got distributed commentor icons!

== Spam prevention ==
hCard uses <code>mailto:</code> links, and therefore
it automatically "inherits" the disadvantage of <code>mailto:</code> links:
These links can be easily detected by emails spiders (used by spammers).

There are ways to prevent email address detection by simple email spiders, while
still retaining full compatibility with (X)HTML applications.
One common way is to "encode" the the "m" of "mail" and "@" with character entities:

Example of the original link:
<pre><nowiki>
<a class="email" href="mailto:john.smith@example.com">john.smith@example.com</a>
</nowiki></pre>

Example of the "encoded" link:
<pre><nowiki>
<a class="e&#109;ail" href="&#109;ailto:john.smith&#064;example.com">john.smith&#064;example.com</a>
</nowiki></pre>

Simple email spiders which do not do character entity decoding will therefore not be able to find your email address.

''Note:'' Perhaps there are or will be email spiders which can decode entities, so the this technique will only help with some (cheap) email spiders.
(See also: http://rbach.priv.at/Misc/2005/EmailSpiderTest)

== Tutorials ==
* How to hCard encode entries in Popular blog software.
* Good reasons to publish your hCard
** as a business, get people to put you in their address book so they'll find you later
** as a business with an email list, get people to add you (with email address) to their address book so that your email list works via whitelisting via the address book.

== Parsing ==
See separate [[hcard-parsing|hCard parsing]] page.

== TODO ==

* The [[hcard-profile]] needs verification and perhaps a URL for retrieving the actual XMDP, rather than as <pre> text on a wiki page.
* Complete translating the examples from the vCard spec into hCard, and place them on a separate hCard examples page.
* Create a "rich" but realistic hCard example, say for example for a salesperson, who wants to put a whole bunch of contact information on their website in order to be found/contacted easily.
* Provide examples of how to encode instant messaging (IM) accounts. Figure out what would the mailto: or aim: URL in hCard look like in vCard. And take a look at what vCard applications do today with IM addresses.

== References ==
=== Normative References ===
* [http://www.ietf.org/rfc/rfc2426.txt RFC 2426] vCard RFC
* [http://www.ietf.org/rfc/rfc2397 RFC 2397] data URI RFC
* [http://gmpg.org/xmdp/ XMDP]
=== Informative References ===
* [http://www.imc.org/pdi/ Personal Data Interchange (PDI) at the Internet Mail Consortium]
* [http://tantek.com/log/2004/07.html#d27t1049 Markup language design notes]
* [http://tantek.com/log/2002/12.html#L20021216t2238 A Touch of Class]

== Other Implementations/Ideas ==
* [http://www.w3.org/TR/2001/NOTE-vcard-rdf-20010222/ Representing vCard Objects in RDF/XML] This could allow conversion of vCard data from XHTML to RDF and from RDF to XHTML
* It would also be possible to convert XFN and hCard to FoaF and back.

== Rejected Suggestions ==

Suggestion: ''The use of class="url" on an <a> tag to represent an hCard URL property is redundant. By virtue of the <a> tag you know this is a URL.''

Rejected. This is a bad suggestion because although it appears to reduce redunancy and keep things cleaner, it also creates a few problems. Without explicitly noting that this is a URL then any <a> tags within a 'vcard' would be considered a URL, for example:
<pre><nowiki>
<span class="vcard">
...
<ul class="categories">
<li><a href="http://w3c.org">W3C</a></li>
</ul>
...
</span>
</nowiki></pre>

There is no way to "turn-off" the encoding of the W3C URL, whereas if "url" needed to be explicitly listed in the class attribute list, then by NOT listing it you could effectively turn it off.

Microformats Wiki - User contributions [en]

hcard-brainstorming