hCard - opis mikroformatu do danych kontaktowychInternet rozwija się w kierunku semantycznej sieci. Chociaż większą część tego trendu biorą na swe barki programiści wyszukiwarek (synonim dla Google), to nie znaczy, że możesz pozostać bierny.

Nie chodzi jedynie o pisanie poprawnego, semantycznego kodu XHTML. To już było. Teraz nadchodzi czas mikroformatów!

hCard – ale o co chodzi?

hCard to format opisujący dane kontaktowe osób, instytucji, adresy miejsc itd. Idea powstania takiego formatu jest jasna – jeden uniwersalny format pozwala na łatwą wymianę, obróbkę i wreszcie wyszukiwanie danych. Dokładnie tak, jak w kontaktach biznesowych – wymieniasz wizytówki na spotkaniu zamiast spisywać adresy i telefony.

hCard – hOwto

Jak użyć mikroformatu hCard? Wystarczy zastosować odpowiednie klasy do opisu danych w ściśle określonym formacie. Jeżeli śmierdzi Ci to czytaniem dłuugiej specyfikacji, to się mylisz. Spójrz na ten przykład:

<div id="hcard-Artur-Polkowski" class="vcard">
   <a class="url fn n" href="http://kissdesign.pl">  <span class="given-name">Artur Polkowski</span></a>
   <div class="org">KISS design</div> //nazwa organizacji
   <a class="email" href="mailto:art.polkowski@gmail.com"> art.polkowski@gmail.com</a>
   <div class="adr">
      <div class="street-address">Łąkowa 15</div>
      <span class="locality">Poznań</span>, <span class="postal-code">60-900</span>
   </div>
   <div class="tel">605 444 555</div>
</div>

Voila!
W głównym obiekcie z klasą (koniecznie!) vcard, umieszczasz poszczególne informacje teleadresowe. Pełna specyfikacja hCard jest oczywiście szersza i obejmuje więcej opcjonalnych pól, ale dla większości przypadków, znajomość powyższych nazw klas jest wystarczająca. Nie musisz jednak ich wszystkich pamiętać. Skorzystaj z generatora hCard on-line. Dzięki niemu masz pewność, że Twój kod jest poprawny i gotowy do wklejenia wprost na stronę.

hCard – a jak to wygląda?

Tak jak zechcesz! Dzięki temu, że dane są opisane ściśle określonymi nazwami klas, nawet nie musisz samodzielnie pisać reguł css. Możesz skorzystać z gotowych! Ściągnij poniższą stylizację hCard w CSS mojego autorstwa!

Artur Polkowski

KISS design

Łąkowa 15

Poznań, 60-900

605 444 555

Szukasz inspiracji? Zobacz projekty pierwszych wizytówek!