La un moment dat fiecare are de copiat mult şi de inserat detalii de contact de la un site în cartea lor de adrese. Nu ar fi frumos dacă aţi putea să faceţi clic pe un grafic şi sa vedeti detalii regasindu-se în adresa dumneavoastră de carte?
Acest ghid va arăta cum să creaţi un buton care va importa detalii de contact într-o adresă de carte. Este nevoie de câteva cunoştinţe de XHTML şi un editor de grafică. Dar, înainte de explicaţie doriti sa vedeti ca merge nu-i asa?

Microformats adăuga un nou nivel sensulului de XHTML folosind ceea ce este deja disponibil. Deci, dacă ştii XHTML şi CSS vestea bună este că Microformats va fi uşor.
Luaţi acest exemplu de detalii de contact de pe o pagină de web:

<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 în unele clase de nume pentru a da mai departe semantic sensulului codului. Ele permit, de asemenea, alte programe de acces la informaţiile cuprinse în clasa nume. Există chiar şi un generator de hcard la îndemână pentru a face munca pentru tine. Altfel, vă puteţi trece în revistă hcard caietul de sarcini. Aveţi posibilitatea să ataşaţi clasa numele de orice element, astfel încât sunteti liberi de a utiliza pe deplin puterea de XHTML pentru a afişa o. Asa ca acum detalii mele de contact arata astfel:

<div class=”vcard”>
<a class=”url fn” href=”http://www.shapeshed.com”>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>

Arunca o privire la pagina de exemplu. Puteţi plasa acest XHTML în aceeaşi pagină sau o pagină de oriunde de pe web – nu contează.

Crearea de VCard

Acum ca am luat detalile de contact în semantic cod pot face lucruri cu el. de exemplu trimitandu-l la o pagină care va genera un vCard. Aceasta este ceea ce vom folosi cu imaginea link. Brian Suda are un mare Microformat creier şi a fost scris un cod pentru a transfera un hCard pe orice pagină într-un vCard.
Uimitor. Deci, pentru a genera o vCard de la pagina mea XTHML am trimis detalii la script-ul cu link-ul:  http://suda.co.uk/projects/X2V/get-vcard.php?uri=http://www.shapeshed .com / exemple / hcard /. Utilizatorul nu-i pasa desigur si ei vor lua datele de contact in doar un singur clic.
<a href=”http://suda.co.uk/projects/X2V/get-vcard.php?uri=http://www.shapeshed.com/examples/hcard/”><img src=”{filedir_1}hcard_example.jpg” alt=”Add me to your address book” title=”Add me to your address book” width=”400″ height=”121″ /></a>