Kódujme sémanticky s mikroformáty: hCard (dokončení)

Články ‐ Honza Sládek ‐ Webdesign ‐ 12. 11. 2008

Mikroformát hCard je určen k sémantickému zápisu kontaktních údajů do (X)HTML kódu webových stránek a aplikací. Dnes si představíme jeho použití pro zápis firemní vizitky, ukážeme si, jak lze hCard kombinovat s mikroformátem XFN a předvedeme, jak hCard může využít koncový uživatel.

Seriál: Kódujme sémanticky s mikroformáty (11 dílů)

Kódujme sémanticky s mikroformáty: úvod 15. 10. 2008
Kódujme sémanticky s mikroformáty: 1. část – rel 22. 10. 2008
Kódujme sémanticky s mikroformáty: 2. část – XFN 29. 10. 2008
Kódujme sémanticky s mikroformáty: 3. část – hCard 5. 11. 2008
Kódujme sémanticky s mikroformáty: hCard (dokončení) 12. 11. 2008
Kódujme sémanticky s mikroformáty: 4. část – hCalendar 19. 11. 2008
Kódujme sémanticky s mikroformáty: hCalendar (dokončení) 26. 11. 2008
Kódujme sémanticky s mikroformáty: hAtom 3. 12. 2008
Kódujme sémanticky s mikroformáty: hResume 10. 12. 2008
Kódujme sémanticky s mikroformáty: náměty a problémy 17. 12. 2008
Kódujeme sémanticky s Mikroformáty: Value Class Pattern 2. 12. 2009

Nálepky:

Celý seriál je překladem anglického originálu, který na svém blogu A Blog Not Limited vydává webdesignerka Emily Lewis.

V minulém článku jsme si představili mikroformát hCard, dnes popis hCard dokončíme a představíme si nástroje, které hCard používají.

Pár pravidel a jedna připomínka

Teď, když jsme prošli příklad hCard, si řekneme několik pravidel:

Vlastnosti a podvlastnosti hCard jsou case-senstive (tj. je u nich důležité, zda jsou písmena malá nebo velká)
Hlavní vlastnost vcard nemůže být kombinována s žádnou další vlasností. Takže class="vcard fn" je nevalidní.
Vlastnosti nemohou být kombinovány s podvlastnostmi. Takže class="tel value" je nevalidní.

To není tak zlé, ne? Mikroformáty jsou přece standard, takže je samozřejmé, že tu bude pár pravidel.

A nezapomeňte: používání mikroformátů není o (X)HTML značkách, ale o hodnotách class a dalších atributech – vlastnostech a podvlastnostech. Můžete použít v podstatě jakýkoli (X)HTML element, na který si vzpomenete, a pořád mít mikroformáty validní, samozřejmě dokud správně přiřazujete vlastnosti a podvlastnosti.

Ale když už se budete zatěžovat přijmutím sémantiky mikroformátů, nebylo by od věci přijmout také sémantický kód.

Nezapomeňte profil

Jak jsem již zmínila ve spojitosti s XFN, doporučuje se vložit do <head> webové stránky s mikroformátem hCard jeho profil:

<head profile="http://purl.org/uF/hCard/1.0/">

W3C umožňuje vícenásobné hodnoty profilu oddělené mezerou, takže může najednou deklarovat profil jak pro hCard tak pro XFN:

<head profile="http://gmpg.org/xfn/11 http://purl.org/uF/hCard/1.0/">

Nedávno jsem objevila kombinovaný profil pro všechny mikroformáty, které nejsou ve stádiu návrhu, a který můžete použít v hlavičce stránek ( <head>):

<head profile="http://purl.org/uF/2008/03/">

Takže pokud na stránkách používáte jeden či více mikroformátů, můžete použít právě tento kombinovaný profil, tedy pokud používané mikroformáty nejsou ve stádiu návrhu. Pro mikroformáty ve stádiu návrhu ale stále musíte specifikovat jejich vlastní profil. Prozatím jsou ale všechny mikroformáty, kterými jsem se v seriálu zabývala, již stabilní verze (s výjimkou rel-home).

Nastavení atributu profile ovšem není nutné a prakticky žádný nástroj pracující s mikroformáty toto nastavení nevyžaduje (pozn. redakce).

hCard a běžný jazyk

Před nějakou dobou jsem četla skvělý článek od Jeremyho Keitha, který navrhoval používat hCard v běžném jazyce.

V podstatě navrhoval aplikovat vlastnosti a podvlastnosti hCard na kontaktní informace (jako je jméno, webová stránka, e-mail), které se objevují v obyčejných větách, jako protiklad k „vytržení“ kontaktních informací z textu, jako jsem to udělala já v prvním příkladě.

Koncept je velmi jednoduchý a otevírá spoustu možností, jak používat hCard, takže jsem se samozřejmě rozhodla používat jej i na A Blog Not Limited, a sice v patičce, kde si dělám tak trošku reklamu:

<div id="creator" class="vcard">
   <h3><a href="/about/">The Coolest Person I Know</a></h3>
   <a href="/about/">
     <img src="/images/emilyLewisThumb.jpg" width="80" height="80" class="photo" alt="Emily Lewis" />
   </a>

   <p>Yeah, that would be me: <a class="fn email" href="mailto:emily@ablognotlimited.com">Emily Lewis</a>.</p>
   <p>I'm a <span class="title">web designer</span> living in
     <span class="adr">
       <span class="locality">Albuquerque</span>, <span class="region">New Mexico</span>
       <span class="postal-code nonVisual"> 87106 </span>
       <acronym class="country-name nonVisual" title="United States of America">USA</acronym>
     </span>,
     and I'm a "standardista."</p>

   <p>I specialize in hand-coding semantic <acronym title="eXtensible Hypertext Markup Language">(X)HTML</acronym>
     and <acronym title="Cascading StyleSheets">CSS</acronym>, designing accessible web sites,
     and writing and optimizing web content.</p>

   <p><a href="http://www.ablognotlimited.com" rel="home me" class="url">A Blog Not Limited</a>
     is my personal blog where I pontificate about web design, web standards,
     semantics and whatever else strikes my fancy.</p>
</div>

Rozdíly

Kromě toho, že v tomto příkladě se promíchává obsah hCard s obsahem, který s hCard nemá nic společného, je zde i několik drobných změn v použití vlastností a podvlastností hCard:

V tomto příkladě uvádím pouze své křestní jméno a příjmení, takže používám pouze class="fn". Vzpomeňte si, že vlastnost n může být implicitní, pokud jsou obsahem právě dvě slova.
V popisu uvádím svou pracovní pozici, takže jsem přidala class="title", což je jedna z mnoha vlastností, které poskytují informace o pracovních vztazích dané osoby. Tato vlastnost říká, že se jedná o pracovní pozici.
Přiložila jsem také svou fotografii, takže jsem přidala class="photo" značce <img />

Ale tyto odlišnosti nemají vůbec co dělat s tím, že používám hCard v běžném jazyce. Byly to jen správné hodnoty k popisu obsahu v tomto konkrétním příkladě.

Kombinujeme hCard a XFN

Koncept použití hCard v běžném jazyce otevírá řadu různých možností, ve kterých můžeme hCard použít. Již jsem jej aplikovala na informace, které se týkají mě, ale často ve svých článcích odkazuji na své přátele a kolegy … takže dává smysl označit tyto odkazy za pomoci hCard.

A dokonce je úplně jedno, že již tyto informace mám označeny hodnotami XFN. Jedna z nejlepších věcí na mikroformátech je, že se dají jednoduše kombinovat.

V závislosti na kontextu odkazu používám trošku odlišný kód. Pro situace kde odkazuji na článek, který někdo napsal (třeba jako ten z odkazu výše od Jeremyho Keitha), používám <cite> jako obalový element pro vcard:

<p> … the brilliant
  <cite class="vcard">
    <a href="http://adactio.com" rel="muse colleague" class="url fn">
      Jeremy Keith
    </a>
  </cite>,
  who suggests using
  <a href="http://adactio.com/journal/1122/">
    hCard in natural language
  </a>.
</p>

A v situacích, kde prostě odkazuji na nějakou osobu, používám jako obalový element pro vcard <span>:

<span class="vcard">
  <a href="http://www.jenschwedler.com/" class="url fn" rel="met colleague co-worker friend">
    Jen Schwedler
  </a>
</span>

A nakonec, pokud na osobu odkazuji jen křestním jménem, používám jako obalový element vcard <abbr> a v hodnotě title uvádím celé jméno:

<span class="vcard">
  <abbr class="fn" title="Ian Pitts">
    <a href="http://www.iso-100.com/" class="url" rel="met colleague co-worker friend">
      Ian
    </a>
  </abbr>
</span>

Ve všech těchto příkladech jsou však drobné odchylky v kódu způsobeny pouze mým pohledem na sémantickou část věci. Mikroformáty hCard a XFN jsou pořád stejné:

Vlastnost fn pro jméno.
Vlastnost url pro webové stránky.
Hodnoty rel jak se zrovna hodí.

Kdybych o těchto lidech měla další informace (jako třeba pracovní pozici, e-mail atd.), kód by vypadal obdobně ovšem s dalšími vlastnostmi a podvlastnostmi.

Organizace a firmy

Ačkoli já osobně jsem zatím nepotřebovala použít hCard pro popis firmy nebo organizace na svém blogu, chtěla bych vám ukázat příklad, jak by to mohlo vypadat:

<div class="vcard">
  <p class="fn org">Big Ass Blow-Up Dolls</p>
  <img src="logo.png" class="logo" width="69" height="69" alt="Big Ass Blow-Up Dolls" />
  <p class="adr">
    <span class="street-address">6969 Happiness Avenue</span>,
    <span class="locality">Los Angeles</span>,
    <abbr class="region" title="California">CA</abbr>
    <span class="postal-code">69069</span>
  </p>
  <ul>
    <li class="tel"><span class="value">696-969-6969</span></li>
    <li><a class="email" href="mailto:goodtimes@babud.com">Email Us</a></li>
    <li><a class="url" href="http://www.babud.com/">Visit Our Web Site</a></li>
  </ul>
</div>

Jak můžete vidět, hCard pro organizace a firmy je v podstatě stejný jako pro jednotlivce. Hlavní odlišnosti jsou:

K vlastnosti fn pro jméno je pro název organizace přidána vlasnost org. A s organizacemi či firmami nikdy nepoužíváte vlastnost n.
Místo vlastnosti photo se pro <img /> používá vlastnost logo.

Místa

To, co jsem popsala pro organizace a firmy, se vztahuje i na místa. Jednoduše odkazujete na jméno místa s vlastnostmi fn org a používáte informace o adrese tak, jak jsem demonstrovala výše.

Tady je příklad použití hCard v běžném jazyce pro popis místa:

<p class="vcard">
  During my visit to <span class="locality">Altanta</span>,
  <abbr title="Georgia" class="region">GA</abbr>,
  I plan to check out <span class="fn org">Centennial Olympic Park</span>.
</p>

Ještě uvádím několik specifických vlasností hCard pro popis míst (ačkoli nejsou omezeny pouze pro použití s místy)

Vlastnost geo specifikuje GPS souřadnice místa a používá dvě podhodnoty: latitude a longitude.
Podhodnota latitude specifikuje číselnou hodnotu, která označuje vertikální pozici místa ve vztahu k rovníku.
Podhodnota longitude specifikuje číselnou hodnotu, která označuje horizontální pozici místa ve vztahu k nultému poledníku.

Pojďme mluvit o výhodách

Nyní, když jsem vám ukázala několik příkladů hCard, je čas si projít výhody plynoucí z používání.

Sémantika

Věděli jste, že to přijde. Řekla jsem to minule a řeknu to znovu: Používání mikroformátů přidává strukturu a význam webovému obsahu a dělá jej čitelný jak pro lidi, tak pro stroje. A to vše s existujícími standardy pro kódování a značení informací. Také to podporuje rozšíření webových standardů, z čehož těží všichni.

Sdílejte kontaktní informace

Tím, že použijete hCard k označení kontaktních informací, automaticky umožňujete zkonvertování těchto informací do stahovatelné vCard, která pak může být použita programy jako je Microsoft Outlook nebo Address Book.

Můžete použít jak službu Technorati contact feed, kterou jsem již zmínila, nebo si vytvořit svou vlastní a umístit ji na svůj server. Plus je zde několik rozšíření pro prohlížeče, které automaticky exportují informace z hCard do vCard.

Firefox

Operator 0.9.3 rozpoznává hCard a dává uživateli možnost exportovat kontaktní informace pro použití v jeho preferovaném elektronickém adresáři.

Také si na na screenshotu můžete všimnout seznamu s dalšími možnostmi, Operator totiž umožňuje použít hCard informace pro vyhledávání na jiných stránkách, včetně Google Maps:

Tails Export 0.3.5 je další rozšíření pro Firefox, které umožňuje export informací z hCard pro použití v elektronických adresářích:

Safari

Safari Microformats Plugin je užitečný pro identifikaci mikroformátu hCard na stránce a uložení informací do elektronického adresáře.

Nejsem zanícený uživatel Safari a instalace tohoto pluginu pro mě byla příliš náročná… takže jsem ho nenainstalovala a nemůžu vám proto ukázat screenshot.

Bookmarklets

Koncept použitý ve zmíněném Safari Microformats Plugin byl implementován do, na prohlížeči nezávislého, microformats bookmarkletu a já mohu potvrdit, že výsledek je celkem pěkný:

Ještě přikládám odkaz na seznam dalších dostupných hCard bookmarkletů.

Vyhledávání

Webový obsah označený mikroformáty má přirozeně větší význam. To by mohlo pomoci vyhledávačům lépe zhodnotit obsah který poskytujete a (možná) vylepšit vaši pozici ve výsledcích vyhledávání.

Když ovšem přijde řeč na vyhledávání, nikdy nemáte žádnou záruku. Ale kvalitní obsah ve správném kontextu je vždycky dobrý začátek. Kromě toho některé vyhledávače implementují hCard do svých vlastních aplikací a služeb:

Google přidal mikroformát hCard do Google Maps.
Technorati Microformats Search vyhledává hCard a další mikroformáty včetně hCalendar a hReview.
Yahoo Local značkuje své výsledky za pomoci hCard, hCalendar a hReview.

Sociální sítě

Sociální sítě používají mikroformát hCard na stránkách profilů s kontaktními informacemi uživatele, stejně tak na stránkách se seznamy kontaktů/kamarádů:

Twitter používá hCard v profilech uživatelů a na seznamech lidí, které sledujete nebo kteří sledují vás.
ClaimID používá hCard v uživatelských veřejných profilech.
Last.fm používá hCard v profilech uživatelů a kromě fn používá i photo a url.

A to je jen pár příkladů. Podívejte se na kompletní seznam služeb, které používají hCard.

Nástroje pro jednodušší život

Byla bych nedbalá, kdybych vám neukázala pár užitečných nástrojů, které vám pomohou implementovat mikroformát hCard bez toho, aniž byste museli kód psát ručně a pamatovat si všechny ty hodnoty (ačkoli takhle to ráda dělám já):

hCard creator je jednoduchý formulář, který vygeneruje hCard ze zadaných informací.
hCard microformat validator je služba, které dáte URL stránky s mikroformátem hCard a ona zkontroluje, zda správně používáte vlastnosti a podvlastnosti.
Ještě je zde hCard cheatsheet pro rychlou nápovědu k vlastnostem a podvlastnostem.

Je toho ještě mnohem víc

Zašla jsem občas do velmi specifických detailů týkajících se mikroformátu hCard. Ale je toho ještě tolik, co jsem ani nezmínila.

Vřele doporučuji udělat si trošku času a pročíst si všechny dostupné vlastnosti a podvlastnosti mikroformátu hCard a prohlédnout si pár příkladů mikroformátu hCard v praxi.

V příštím díle

V další, již 4., části našeho seriálu se podíváme na mikroformát hCalendar. Těšte se.

Tento článek je překladem textu Getting Semantic With Microformats, Part 3: hCard, jehož autorkou je Emily Lewis a je zde zveřejněn včetně obrázků s laskavým svolením autorky.

Honza Sládek

Návrhář uživatelských zážitků. Spoluzaložil Clevis s.r.o., školí responsive a mobile webdesign, organizuje konferenci Webovina a soutěž pro mladé Junior Internet.

Odebírat

1 Komentář

Nejstarší

Nejnovější Most Voted

Inline Feedbacks

Zobrazit všechny komentáře

Uli

16 let před

Nemůžu se dopátrat jedné věci. Je mořné uvádět typ telefonu nějak jinak než idielně, respektive aby byl vidět český název a ne třeba:

/div class="tel"/
/span class="type"/home//span/:
/span class="value"/+420…//span/
//div/

nejde použít něco jako:

/div class="tel"/
/span class="type:home"/+420…//span/
//div/

Dík za radu.

Odpovědět