This page you are on right now is a wiki.
hCard is essentially a vCard represented in HTML (hence the "h" in hCard).
It's just HTML. Semantic HTML. Plain Old Semantic HTML (POSH). Based on the microformats principles and process. Check those links later for more details later.
This is a plain text name, list of interests and a location
If you want this information, you have to copy and paste it one chunk of text at a time into your address book.
Tedious and boring.
This is a a live wiki hCard:
One click on the " " button, and (On a mac) it will automatically
Presto, if you've met me here, you can now put me in your address book with one click. Quick and fun.
Everyone wants their own hCard. Here's how you can make one.
Every hCard starts with an element with class name of "vcard".
You can use any element. We're going to use a span.
We give the element a unique id while we're at it. You'll see why later.
(code has extra white-space and line-breaks for readability)
* <span class="vcard" id="tantek-hcard"> </span>
Add your name and URL. Mark them up with class names of "fn" and "url" and "uid".
* <span class="vcard" id="tantek-hcard"> <a class="fn url uid" href="http://tantek.com">Tantek Çelik</a> </span>
Mark up interests with class name of "category".
Mark up linked interests also with class name of "url".
* <span class="vcard" id="tantek-hcard"> <a class="fn url uid" href="http://tantek.com">Tantek Çelik</a> - <a class="url category" href="http://microformats.org/">microformats</a>, <span class="category"> WikihCards </span> </span>
Add your city and state and mark them up with "adr" to group them, and "locality" and "region" respectively to distinguish them.
* <span class="vcard" id="tantek-hcard"> <a class="fn url uid" href="http://tantek.com">Tantek Çelik</a> - <a class="url category" href="http://microformats.org/">microformats</a>, <span class="category"> WikihCards </span> (<span class="adr"> <span class="locality">San Francisco</span>, <abbr class="region" title="California">CA</abbr> </span>) </span>
Add your photo as an image tag, with a little CSS to shrink it down and line up nicely with the text, like sparkline (OB Tufte Reference).
* <span class="vcard" id="tantek-hcard"> <img class="photo" style="margin-bottom: -2px; width: 12px; height: 12px" alt="" src="http://tantek.com/icon-2007-128px.png" /> <a class="fn url uid" href="http://tantek.com">Tantek Çelik</a> - <a class="url category" href="http://microformats.org/">microformats</a>, <span class="category"> WikihCards </span> (<span class="adr"> <span class="locality">San Francisco</span>, <abbr class="region" title="California">CA</abbr> </span>) </span>
Now for the UI magic. Add an icon and a hyperlink for the add to address book feature. No scripting needed.
Yes this works even with Javascript turned off. This even works on a Treo.
We borrow an icon from Technorati. Hey, what's a few hot linked images among friends?
http://static.technorati.com/static/img/icn/icn-dl-vcard.png
We also use a free hCard to vCard conversion web service at:
Just append the URL to your hCard (here's where that id that we marked up in step 1 comes in handy) and your conversion URL is complete.
http://h2vx.com/vcf/shdh.pbwiki.com/WikihCards%23tantek-hcard
Note: %23 is URL-escaped #
* <span class="vcard" id="tantek-hcard"> <a title="Add to address book" href="http://h2vx.com/vcf/shdh.pbwiki.com/WikihCards%23tantek-hcard"> <img style="margin-bottom: -2px" alt="Add to address book" src="http://static.technorati.com/static/img/icn/icn-dl-vcard.png" /> <img class="photo" style="margin-bottom: -2px; width: 12px; height: 12px" alt="" src="http://tantek.com/icon-2007-128px.png" /> </a> <a class="fn url uid" href="http://tantek.com">Tantek Çelik</a> - <a class="url category" href="http://microformats.org/">microformats</a>, <span class="category"> WikihCards </span> (<span class="adr"> <span class="locality">San Francisco</span>, <abbr class="region" title="California">CA</abbr> </span>) </span>
Take that source, remove the line-breaks and excess white-space, and you get:
Go to the SuperHappyDevHouse22 page.
Edit your name in the list of attendees, and make it a wiki hCard.
If everyone does this...
We can add a button like this:
Add all attendees to Address Book
So with one-click you can add everyone to your address book, with the details they've chosen to share.
Check out http://microformats.org/wiki/hcard for more on hCard details.
Play with the hCard creator live form code generator.
Based on Tantek's WikihCards page.
Return to SuperHappyDevHouse22_LightningTalks / SuperHappyDevHouse22 / FrontPage.