hCard microformat on profile pages

[GoogleCodeExporter]

What would you like dabr to do?

Add hCard microformat to profile pages

How would you prefer dabr to do it?

Change (URLs redacted for readability):

<table><tbody><tr><td><a href="..." target="_blank"><img src="..."
height="48" width="48" class="photo"></a></td>
<td><b><a tooltip="linkalert-tip" href="user/dabr">dabr</a></b>
<small>
<br>Bio: An open source mobile twitter website by @davidcarrington
<br>Link: <a href="http://dabr.co.uk" target="_blank">http://dabr.co.uk</a>
<br>Location: Maidenhead, UK

to:

<table class="vcard"><tbody><tr><td><a href="..." target="_blank"><img
src="..." height="48" width="48"></a></td>
<td><b><a href="user/dabr" class="fn">dabr</a></b>
<small>
<br><span class="note">Bio: An open source mobile twitter website by
@davidcarrington</span>
<br>Link: <a href="http://dabr.co.uk" target="_blank" class="url"
rel="me">http://dabr.co.uk</a>
<br>Location: <span class="label">Maidenhead, UK</span>

By adding classes "vcard", "photo" "fn" & "url" and spans with classes
"note" and "label"; plus rel="me"

Original issue reported on code.google.com by pigsotwing on 21 Dec 2009 at 12:49

[GoogleCodeExporter]

rel="me" could be added, even if the hCard microformat is not.

Original comment by pigsotwing on 21 Dec 2009 at 12:56

[GoogleCodeExporter]

please ignore 

   tooltip="linkalert-tip"

that's added by one of my local scripts.

Original comment by pigsotwing on 21 Dec 2009 at 1:01

[GoogleCodeExporter]

also, in:

<a href="user/dabr" class="fn">dabr</a>

you could use rel-tag:

<a href="user/dabr" class="fn" rel="tag">dabr</a>

Original comment by pigsotwing on 21 Dec 2009 at 1:04

[GoogleCodeExporter]

Aaaargh! I put class="photo" on the "before" rather than the "after" code. 
Sorry. I
am an idiot.

Also,I have just counted, and implementing all the above will add no more than 
123
characters (~ 0.1Kb) to the page. At the time of writing, 
http://dabr.co.uk/user/dabr
is 58Kb.

Original comment by pigsotwing on 21 Dec 2009 at 2:41

[GoogleCodeExporter]

It's not the page content that's an issue. The HTML itself needs to be under 
25KB to 
ensure compatibility with as many phones as possible. As you say, an extra 
0.1KB in 
this particular case isn't so bad, as the page is currently 17KB.

What are the use cases for adding hCard info to profile pages?

Original comment by david.carrington on 21 Dec 2009 at 11:19

[GoogleCodeExporter]

@davidcarrington - Primarily, ease if adding the contact to address books (or
updating existing address book entries by merging in the additional details). 

The rel-tag component facilitates easy look-up of the user name in various 
search
engines and social media sites.

Also gives added semantic richness for third-party tools to use.

Note that twitter uses microformats, so this only restores their functionality.

Looking at your own profile,better markup, when the user's real name is present,
would be to change:

    <a href="user/davidcarrington">davidcarrington</a> 
    (David Carrington)

to:

    <a href="user/davidcarrington" class="nickname">davidcarrington</a>
    (<span class="fn">David Carrington</span>)

and only use my original mark-up when the real name is not present.

Original comment by pigsotwing on 22 Dec 2009 at 9:53