• If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

View
 

WikihCards

Wiki hCards

 

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.

 

 

 

Live example

 

This is a plain text name, list of interests and a location

 

  • Tantek Çelik - microformats, WikihCards (San Francisco, CA)

 

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 "Add to address book " button, and (On a mac) it will automatically

  • open Address Book and
  • add an entry accordingly with all the info. No copy paste necessary.

 

 

Presto, if you've met me here, you can now put me in your address book with one click. Quick and fun.

 

 

 

Make your own

 

Everyone wants their own hCard. Here's how you can make one.

 

 

 

Step 1 span and id

 

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>

 

 

 

Step 2 name and URL

 

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>

 

 

 

Step 3 interests

 

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>

 

 

 

Step 4 location

 

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>

 

 

 

Step 5 photo

 

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>

 

 

 

Step 6 Add to Address Book button

 

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:

 

http://h2vx.com/vcf/

 

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>

 

 

 

The Result

 

Take that source, remove the line-breaks and excess white-space, and you get:

 

 

 

 

Your turn

 

Go to the SuperHappyDevHouse22 page.

 

Edit your name in the list of attendees, and make it a wiki hCard.

 

If everyone does this...

 

 

 

The Add Everyone Button

 

We can add a button like this:

 

Add to address book 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.

 

 

 

For more

 

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.