Contact details in one click
At some stage everyone has laboriously copied and pasted contact details from a website into their address book. Wouldn't it be nice if you could just click a graphic and see the details turn up in your address book?
This tutorial will show how to create a button that will import contact details into an address book. All you need is some knowledge of XHTML and a graphics editor. But before the explanation you want to see it working don’t you?
How is it done? Meet Microformats ¶
Unless you have been hiding for the last year you will probably have heard of Microformats. The idea is that Microformats add an additional level of meaning to your XHTML using what’s already available. So if you know XHTML and CSS the good news is that Microformats will be easy.
Take this example of contact details on a web page:
<p>George Ornbo</p>
<p>Shape Shed</p>
<p>email: george@shapeshed.com</p>
<p>address: 22 Centre Square, 17 Hardwicks Way, London SW18 4AG, UK</p>
<p>tel: +44 (0)2081419116</p>
Microformats sprinkle in some class names to give further semantic meaning to the code. They also allow other programs to access the information contained within the class names. There is even a handy hcard generator to do the work for you. Otherwise you can review the hcard specification. You can attach the class name to any element so you are free to use the full power of XHTML to display it. So now my contact details look like this:
<div class="vcard">
<a class="url fn" href="/">George Ornbo</a>
<div class="org">Shape Shed</div>
<a class="email" href="mailto:george@shapeshed.com">george@shapeshed.com</a>
<div class="adr">
<div class="street-address">22 Centre Square, 17 Hardwicks Way</div>
<span class="locality">London</span>
<span class="postal-code">SW18 4AG</span>
<span class="country-name">UK</span>
</div>
<div class="tel">+44(0)208 1419116</div>
</div>
Have a look at the example page. You can place this XHTML in the same page or a page anywhere on the web - it doesn’t matter.
Creating the vcard ¶
Now I’ve got my contact details in semantic code I can do things with it. Like send it to a page that will generate a vCard. This is what we use with the image link. Brian Suda has a big Microformat brain and has written code to transfer an hCard on any page into a vCard. Amazing. So to generate a vCard from my XTHML page I just send the details to the script with the link: http://suda.co.uk/projects/X2V/get-vcard.php?uri=/examples/hcard/. The user doesn’t care of course and they get my contact details in just one click.
Amazed? This is just the beginning ¶
Using Microformats in your code is a great way to give people access to your data without building a full scale API. I believe we are just seeing the beginning of some amazing uses of Microformats that will allow relative novices to publish, manipulate and work with data published with just the power of HTML. Who needs a database?
Tags
Can you help make this article better? You can edit it here and send me a pull request.
See Also
-
Firebug is simply brilliant
Software comes and goes and rarely is there a piece of 'must have' software. Firebug, an extension for Firefox, deserves to be to be heralded as an outstanding piece of software and something no web developer should be without. -
Writing good XHTML and CSS Part 2
The second in a series of good practices for writing XHTML and CSS looking at writing clean, maintainable code and dealing with browser hell problems. -
Writing good XHTML and CSS Part 1
In two articles I’m going to outline my opinion on what you need to understand and write high quality XTHML and CSS. The articles will focus on producing code that stands up to the rigors of the web and future proofs code. The articles are aimed at coders starting out and looking to get to grips with writing professional front end code. Of course if you don’t agree with something the comments box is there for you to add your opinion. In part 1 I’m going to look at what you need to get off the ground.