Jak vytvořit hCard?

26.1.2007 23:27 | Přečteno: 1294× | microformats | poslední úprava: 26.1.2007 23:32

Velmi užitečnou specifikací z rodiny microformat je hCard. Jedná se o způsob jak vyznačit v XHTML kódu vizitku. K čemu je to dobré? Představte si, že webové stránce najdete kontakt, který si potřebujete uložit. Vezmete tušku, opíšete si ho do notýsku a pak pro jistotu ještě do nějakého adresáře. Ale proč by nemohlo jít kontakt přímo vyexportovat do vizitky, třeba vCard?

Jde to a není to ani moc komplikované, snad akorát trochu ukecané.

<div class="vcard"> <span class="fn n"><span class="given-name">Radomil</span> <span class="family-name">Gott</span></span><br/> <a href="mailto:radomil.gott@le.cz" title="radomil.gott@le.cz" class="email">radomil.gott@le.cz</a> </div>

Popis polí je k dispozici na hcard-cheatsheet. Důležité je nezapomenout na pole fn, které je povinné. Další příklady jsou vidět např. na www.linuxexpres.cz/kontakty. Jsou tam vidět i vizitky organizace, telefony, faxy. Trochu nepříjemná je definice telefonu, kde je nutné uvést typ (pracovní,mobil,fax,..) a tato informace je viditelná. Lze ji sice skrýt pomocí CSS, ale to už je sémanticky špatně.

No a jen dodám, že pro vizualizaci potřebujete např. extension operator. (nebo počkat na firefox 3 :))

       

Komentáře

[Zdeněk Burda]

<div class="vcard">
<span class="fn n"><span class="given-name">Radomil</span>
<span class="family-name">Gott</span></span><br>
<a href="mailto:radomil.gott@le.cz" title="radomil.gott@le.cz" class="email">radomil.gott@le.cz</a>
</div>

[Zdeněk Burda]

Hmm, koukám že než jsem to naťukal tak jsi to v textu stačil opravit...

[Baf]

:) jo chvilku mi to trvalo, ale uz je to ok

[Messa]

Vy v LinuxExpresu máte asi hodně rádi spam, že

[Baf]

v uvedenem prikladu je email, ale neni nutne aby tam byl. Muze tam byt postovni adresa nebo treba web. Ochrana proti spamu je trochu jina kapitola. A je jasne, ze presnejsi vyznaceni kontktnich udaju je zneuzitelne.

[petr_p]

Rad bych pozadal vsechny webopisce, aby zverenovane telefonni cislo zapisovali jako hypertextovy odkaz se schematem tel:.

Kdyz ma uzivatel k dispozici VoIP klienta ci jiny zpusob, jak vytocit telefonni cislo z pocitace, je pak prijemne jen klinout a nemuset cislo opisovat (a resit pripadne predvolby).

[Bluebear]

To bych raději nedělal, kvůli spambotům...

[Baf]

tohle ma jedno riziko, vetsina lidi to uvidi jako odkaz, ktery nefunguje. Ale kdyz spojis ty veci dohromady, tj. bezpecne vyznaceni telefonu pomoci hCard, podporu prohlizece a hw podporu pak je realizovatelne to, ze telefoni cisla ti prohlizec automaticky nahradi linkem tel:. jen v pripade ze uzivatel ma moznost telefonovat. Semanticky web.

[Daniel Kvasnička ml.]

Dobre reseni je take nepsat cislo s mezerami, ale kazde trojcisli uzavrit do SPANu s prislusnym marginem. Na pohled je cislo prehledne, po zkopirovani mezery nejsou a nemusi je clovek umazavat.

[Ritchie]

Proč je toto řešení špatně? Protože používá atribut určený k definici třídy kaskádových stylů k něčemu úplně jinému. Od čeho je XHTML eXtensible? Právě proto, by se dalo přizpůsobit potřebám tvůrce webu. Od čeho tu jsou jmenné prostory? Aby se dalo snadno zkombinovat např. XHTML a vCard.

[Baf]

Ja bych to tak nezavrhoval. Chapu, ze tady jsou potencialni problemy, napr. ze pouziju jmena trid aniz bych tusil, ze se jedna o microformat. Co ale velka vyhoda je to, ze neni nutne cekat na vyrobce prohlizecu. Jakakoliv zmena v Internet Exploreru trva nekolik let. IE7 dodnes neumi cele CSS2 a chteli bychom CSS3. A bohuzel je to a bude majoritni prohlizec. Takze tohle je reseni, ktere se da pouzit uz nyni, prohlizecum nevadi a kdo chce vic si nainstaluje extension. I kdyz po technicke strance neni dokonale.