List Info

Thread: My experience creating an hcard 'me card'




My experience creating an hcard 'me card'
country flaguser name
United States
2007-05-10 10:46:16
Hi,

I just added hcard to my homepage [1], with a link to
convert it to
vcard uing the Technorati contacts service [2].

I did a little test and confirmed that the contacts service
follows the
fragment identifier in the URL (#me)- which is awesome
because even if I
have multiple hcards on the page, the contacts service will
only decode
the 'me card', which is what I wanted.  Yay!

I also wanted to indicate somehow that this card is the
authoritative
card for my homepage - the simplest way to do this was to
make the url
component of the vcard equal to the homepage url (which is
of course
what you'd expect).

After reading a previous related discussion [3], I played
with using
rel=self to further indicate that this hcard is
authoritative, but by
the definition of rel=self, this usage would only be correct
if the url
also contained the fragment pointing to the hcard.  But if I
make my
vcard url contain a fragment, then people clicking this link
would be
partially scrolled down the page when arriving.  Really,
rel=self
indicates more the canonical location of the hcard itself,
rather than
the fact that it is authoritative for the page.

Given that, I think that having an hcard contain a url equal
to the
homepage URL is good enough - if I just gave someone my
homepage URL,
they could deduce which hcard on the page is authoritative
for that URL,
because it contains a link to that URL.

However, if I gave someone a link to one of my blog entries,
it would be
harder for them to know that this card was authoritative for
that entry
- but I don't have as much of a problem with that.

Just thought that I would share this experience - I haven't
seen
discussion around indicating that an hcard is authoritative
for a
webpage via this simple method, so I thought people might
find it
interesting.

My only sticky point now is sharing my photo - the
Technorati contacts
service doesn't fetch the hcard photo, and neither does my
mac's Address
Book.app.  Fetching the photo and inlining it in the vcard,
albeit to
compensate for the limitations of desktop apps, would be a
nice feature
for an hcard-to-vcard service.

Cheers,
Keith

[1] http://nearlyfree.or
g/blog/keith

[2] http://feeds.technorati.com/
contacts/http%3A%2F%2Fnearlyfree.org%2Fblog%2Fkeith%23me


[3] http://microformats.org/wiki/hcard-issu
es#Canonical.2FAuthoritative_Hcard
_______________________________________________
microformats-discuss mailing list
microformats-discussmicroformats.org
http://microformats.org/mailman/listinfo/microforma
ts-discuss

Re: My experience creating an hcard 'me card'
user name
2007-05-10 11:16:45
On 5/10/07, Keith Grennan <keithnearlyfree.org> wrote:
> However, if I gave someone a link to one of my blog
entries, it would be
> harder for them to know that this card was
authoritative for that entry
> - but I don't have as much of a problem with that.

--- this is where the rel="me" can help to
consolidate identity.[1]

> My only sticky point now is sharing my photo - the
Technorati contacts
> service doesn't fetch the hcard photo, and neither does
my mac's Address
> Book.app.  Fetching the photo and inlining it in the
vcard, albeit to
> compensate for the limitations of desktop apps, would
be a nice feature
> for an hcard-to-vcard service.

This is correct, this is a limitation of desktop apps they
do not
derefference the URL to find the image. There is away around
this by
using the DATA URI to encode, but there are drawbacks
because IE7
doesn't support the DATA URI.[2]

I have been experimenting with the DATA URI and CSS on my
own site:
http://suda.co.uk/contact/


the resulting hcard has the PHOTO base64 encoded
http://feeds.technorati.com/contact/http://suda.co.
uk/contact

PHOTO;ENCODING=b;TYPE=png:iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCA
MAAAA......

To hide the image from IE6/7 i am using the not() operator
which is
not suported to show it to advanced browsers which also
support the
DATA URI.

#gravatar img.photo { display:none }
#gravatar>img.photo:not([border]) { display:block }

I hope this helps.
-brian

[1] - http://www.gmpg.org/xfn/
and/
[2] - http://mic
roformats.org/wiki/hcard-parsing

-- 
brian suda
http://suda.co.uk
_______________________________________________
microformats-discuss mailing list
microformats-discussmicroformats.org
http://microformats.org/mailman/listinfo/microforma
ts-discuss

[1-2]

about | contact  Other archives ( Real Estate discussion Medical topics )