Tajuk entri yang kurang menyerlah, tapi abaikan dahulu. Sebab entri kali ni agak panjang dan ‘kemungkinan’ berguna untuk blogger. Sebelum kita ketahui bagaimana untuk menggunakan hCard, mari kita ketahui dahulu apa itu hCard.

hCard? vCard?

Sebenarnya vCard yang muncul dahulu sebelum hCard. vCard adalah asas kepada hCard. hCard merupakan format vCard yang boleh diedar, yakni boleh dimuat turun dan disimpan dalam perisian seperti Address Book dalam komputer kita. Ingat lagi microformats? hCard adalah salah satu elemen dalam microformats. Itulah serba sedikit maklumat ringkas tentang vCard/hCard.

Contoh blog yang guna vCard

Cara nak buat?

Kita memerlukan sedikit pengetahuan dalam xhtml/css, namun Alhamdulillah terdapat servis online yang dapat menyiapkan markap xhtml tersebut iaitu hCard Creator. Cuma masalahnya, markap yang dihasilkan kurang menarik(Sebab tak nampak macam ayat lengkap). Contohnya:

Bat

HappyPeople Media

info_malaya@yahoo.com

Malaysia

+60125360932

YIM

This hCard created with the hCard creator.

Markap untuk maklumat di atas dalam bentuk xhtml seperti berikut:

<div id="hcard-Bat" class="vcard">
<a class="url fn n" href="http://bat.tumblr.com"> <span class="given-name">Bat</span>
<span class="additional-name"></span>
<span class="family-name"></span>
</a>
<div class="org">HappyPeople Media</div>
<a class="email" href="mailto:info_malaya@yahoo.com">info_malaya@yahoo.com</a>
<div class="adr">
<span class="country-name">Malaysia</span>
</div>
<div class="tel"> 60125360932</div>
<a class="url" href="ymsgr:sendIM?je_bart">YIM</a>
<p style="font-size:smaller;">This <a href="http://microformats.org/wiki/hcard">hCard</a> created with the <a href="http://microformats.org/code/hcard/creator">hCard creator</a>.</p>
</div>

Sekiranya kita ingin membuat ayat tentang diri kita, kita cuma perlu ubah struktur ayat sahaja. Jangan ubah nama ID dan classes pulak, nanti bot(Akan diterangkan selepas ini) tak reti nak baca. Contoh ubahan yang telah dibuat:

Nama saya di internet ialah Bat. Saya juga merupakan salah seorang pembangun di HappyPeople Media. Anda boleh hubungi saya melalui emel di info_malaya@yahoo.com, atau melalui telefon di +60125360932, atau pun melalui Yahoo Messenger,YIM.

This hCard created with the hCard creator.

Manakala markapnya seperti berikut:
<div id="hcard-Bat" class="vcard">
<p>Nama saya di internet ialah <a class="url fn n" href="http://bat.tumblr.com"> <span class="given-name">Bat</span></a>. Saya juga merupakan salah seorang pembangun di <span class="org">HappyPeople Media</span>. Anda boleh hubungi saya melalui emel di <a class="email" href="mailto:info_malaya@yahoo.com">info_malaya@yahoo.com</a>, atau melalui telefon di <span class="tel"> 60125360932</span>, atau pun melalui Yahoo Messenger,<a class="url" href="ymsgr:sendIM?je_bart">YIM</a>.</p>
<p style="font-size:smaller;">This <a href="http://microformats.org/wiki/hcard">hCard</a> created with the <a href="http://microformats.org/code/hcard/creator">hCard creator</a>.</p>
</div>

Tips: Gantikan <div> dan </div> kepada <span> dan </span> untuk mengelakkan ayat kita jatuh ke perenggan bawah.

Lepas tu?

Baik, sekarang maklumat tentang diri kita dah ditulis dalam bentuk markap yang boleh difahami oleh manusia dan juga bot(Lagi sekali, akan diterangkan selepas ini). Tapi masih tak cukup lagi, sebab takda ada pautan untuk pengguna muat turun vCard(hCard adalah format, iaitu format vCard) kita. Kita perlu guna khidmat Technorati untuk membantu kita. =)

Sekali lagi, berikut ialah maklumat diri yang telah dimuatkan pautan untuk muat turun vCard(Contoh diambil dari blog peribadi aku):

Nama saya di internet ialah Bat. Saya juga merupakan salah seorang pembangun di HappyPeople Media. Anda boleh hubungi saya melalui emel di info_malaya@yahoo.com, atau melalui telefon di +60125360932, atau pun melalui Yahoo Messenger,YIM.

This hCard created with the hCard creator.

Muat turun vCard saya.

Dan markapnya:
<div id="hcard-Bat" class="vcard">
<p>Nama saya di internet ialah <a class="url fn n" href="http://bat.tumblr.com"> <span class="given-name">Bat</span></a>. Saya juga merupakan salah seorang pembangun di <span class="org">HappyPeople Media</span>. Anda boleh hubungi saya melalui emel di <a class="email" href="mailto:info_malaya@yahoo.com">info_malaya@yahoo.com</a>, atau melalui telefon di <span class="tel"> 60125360932</span>, atau pun melalui Yahoo Messenger,<a class="url" href="ymsgr:sendIM?je_bart">YIM</a>.</p>
<p style="font-size:smaller;">This <a href="http://microformats.org/wiki/hcard">hCard</a> created with the <a href="http://microformats.org/code/hcard/creator">hCard creator</a>.</p>
<p>Muat turun <a href="http://feeds.technorati.com/contacts/http://bat.infomalaya.com/tentang">vCard</a> saya.</p>
</div>

Sila beri perhatian anda kepada pautan berikut seperti dalam markap,http://feeds.technorati.com/contacts/http://bat.infomalaya.com/tentang. Maklumat tentang aku disimpan di url http://bat.infomalaya.com/tentang, jadi kesimpulannya cuma perlu ubah pautan tadi ke http://feeds.technorati.com/contacts/[url maklumat diri yang mengandungi dalam blog masing-masing yang telah di'microformat'kan].

Apa yang berlaku sebenarnya ialah, pautan tadi sekiranya diklik, akan menghantar isyarat kepada technorati, dan bot/script mereka akan menterjemah maklumat laman web url tadi kepada fail yang boleh dimuat turun dan dibaca oleh perisian Address Book. Sebab itulah kita perlu menggunakan nama classes yang telah ditetapkan dalam format hCard, kan?

Apa lagi?

Kalau rasa nak cantikkan lagi style vCard anda, hanya perlu ubah kod CSS anda. Tiada masalah. =) Kalau nak guna style di blog peribadi aku pun boleh, ini kod dia:

Markup xhtml:
<ul id="chicklets">
<li class="hCard"><a href="http://feeds.technorati.com/contacts/http://bat.infomalaya.com/tentang">Muat turun vCard saya</a> [<a href="#">?</a>]</li>
<li class="twitter"><a href="http://twitter.com/bat">Ikuti saya di Twitter</a></li>
</ul>

CSS:
#chicklets
{
margin-top:10px;
}
.hCard
{
background:transparent url(images/hCard.png) no-repeat left center;
padding-left:33px;
}
.twitter
{
background:transparent url(images/twitter.png) no-repeat left center;
padding-left:33px;
}

*Twitter tu ‘tambahan’ sahaja, tak letak pun takpa, hehe =) Apa-apa pun, harap blogger terutamanya designer atau usahawan internet dapat menggunakan benda ni. Nampak profesional aku rasa kalau ada, pada pendapat aku la. =)

Bacaan tambahan

http://microformats.org/wiki/hcard
http://technorati.com/contacts/
http://microformats.org/wiki/semantic-xhtml

Sekian saja dari aku, dan minta maaf banyak-banyak sebab lama tak menulis kat sini. Kepada mereka yang telah memohon untuk menjadi penulis teknikal di InfoMalaya, anda akan dihubungi tidak lama lagi. Terima kasih kerana memohon. Sangat dihargai.