Neobsahuje názory Henryka Laholy

Mikroformáty

Další velký český web implementoval mikroformáty. Tak vidíte, že to není tak těžké. A proč je vy nepoužíváte? Jakou máte výmluvu?

Když jsem připravoval přednášku na WebExpo, narazil jsem na téma mikroformátů u dobré poloviny z oblastí, o nichž jsem chtěl hovořit. Takže jsem nakonec část prezentace věnoval jim (slajdy 5 až 12).

Mikroformáty totiž nejsou nic jiného, než praktickým projevem všech těch řečí o sémantice, co vedli staří HTML bardi před pěti lety. (Pixy, pamatujou?) Vzpomínáte, ne? Že tabulka je tabulka a ne nástroj na layout. Že hlavní vlastností nadpisu není to, že je červený, velký a tučný, ale že to je nadpis, a že by tedy měl být v H tagu a ne v tagu FONT. Že zkrátka každý obsah patří do vlastního tagu, nadpisy do H, seznamy do UL/OL atakdále, aby analyzátor pochopil, co je co.

Krásná myšlenka, že?

Bohužel narazila na drobný problém: HTML nemá zas tolik tagů, aby dokázaly pokrýt všechny nuance a potřeby, takže se to řešilo alespoň zaDIVováním a přiřazením odpovídajících id a class. Ostatně, stejně to kodér potřeboval do CSS...

Například taková adresa na stránkách, míněna ta "lidská" adresa... V podstatě každý kodér ji umístil do DIVu, kterému dal class="adresa". A pokud chtěl, aby i jednotlivé prvky nějak vypadaly, tak je oSPANoval a dal jednotlivým spanům nějaké atributy, class="psc" třeba. :)

No a tady jsme u mikroformátů. Mikroformáty totiž nejsou nic jiného, než určitá "standardizace" toho, jak se mají tyhle class jmenovat. Nejde o nic jiného než o dohodu, jak (třeba) adresu v HTML označit tak, aby analyzátor pochopil ze zdrojáku, že TOTO je adresa a TOTO je v té adrese jméno člověka a TAMTO jméno ulice. To je celé.

Takže například mikroformáty vzaly standard elektronických "vizitek" vCard, jeho syntaxi přispůsobily HTML a vznikl hCard. Není to nic složitého ani děsivého ani nic, co je třeba se dlouze učit. Dobrý kodér na specifikaci mikroformátů koukne a řekne "Hm, to je toho, vždyť to tak dělám, jen to jinak pojmenovávám". S minimálním úsilím (=kouknout na specifikaci a změnit svůj zvyk) pak jeho weby budou "mikroformát-ready".

A k čemu že to? No sémantika, drazí, sémantika. Prohlížeč, vybavený patřičným nářadím (v podstatě všechny nové verze) umí s mikroformáty pracovat, takže dokáže v HTML najít adresu a tu nabídnout  k uložení do adresáře. Najde telefon a nabídne, že zavolá dotyčného. Něco takového je možné pouze v případě, že se kodéři dohodnou a budou "stejné věci označovat stejně". A mikroformáty jsou právě ta dohoda JAK to označovat. Můžeteto považovat za součást "best coding practices", esi chcete, nemusíte si pak připadat, že se učíte nějakou novou kravinu, jen prostě dodržujete určitá dohodnutá pravidla. ;)

Ale nejde jen o adresu. Mikroformáty jsou definované i pro další informace, jako je například zeměpisná pozice (délka + šířka). Patřičné nástroje si s takto označenou pozicí poradí a dokáží ji např. zobrazit na mapě. Prohlížeč může k takto označené pozici přímo přidat kontextovou volbu "Zobrazit na mapě"... Ostatně, geocaching server samosebou GEO mikroformát používá.

Pomocí mikroformátů lze označit i datum a místo konání nějaké akce. Typický příklad: srazy.info. Tam se implementace mikroformátu hCalendar přímo nabízí – teď má Medhi v kódu stránky na srazy.info datum, čas a místo vloženo do tagu P s nějakým class atributem. Stačí, když jména těch atributů přepíše tak, aby byly "hCalendar-compatible" – a získá tak "zadarmo" sémantickou přidanou hodnotu. S hCalendar pak dokáží jiné služby a aplikace pracovat a správně jej naimportovat např. do seznamu úkolů. Co ty na to, Medhi? Práce na půl hodinky... :)

Na Bloguje jsem zavedl další mikroformát XFN kdysi před lety. XFN je "XHTML Friends Network" a přidává k A HREF odkazům informaci o tom, jaký má autor stránky vztah k autorovi odkazované stránky. Mohu si označit stránky, které jsou "moje", mohu dát najevo že se s autorem osobně znám, že je autorem Sestra Z Hradce apod. K čemu že to? Lze to použít k přenosu profilů... Přijdete na novou sociální síť a místo toho, abyste hledal své známé a označoval je jednoho po druhém, tak zkrátka jen odkážete na svou stránku, tam si sociální síť už v XFN najde, kdo je s kým kamarád. :)

Když to shrnu: Mikroformáty mohou být užitečné (s větší penetrací mikroformátových prohlížečů a nástrojů), přidávají do (X)HTML sémantickou informaci, pro slušného HTML kodéra není žádný problém je implementovat (stačí "pět minut pozornosti")...

A proč?

Ze stejného důvodu, z jakého cpeme titulky do H a text do P: Aby v tom nebyl bordel a abychom si rozuměli.

PS: K tématu najdete víc v seriálu o mikroformátech na Zdrojáku. Doporučuju k přečtení...

AKTUALIZACE – Medhi nelenil a Srazy.info už mají mikroformát hCalendar implementovaný. Viz screenshot. Gratulujem! ;)

 

Dne 20.11.2008

Twittni

Přidej do: Přidat na Conota Linkuj si ! asdf.sk StumbleUpon Toolbar Stumble It!

Komentáře

[1] (medhi - Mail - WWW) 20.11.2008, 14:38:27 [X] [D]
Dobře dobře :) Už se na to chystám od doby tvé prezentace na Webexpu, mám to tu dokonce na papíru. Sundám z něj tu skleničku a kapesník a jdu na to. Tak za půl hodinky na http://srazy.info

[2] (Tasselhof [openID] - Mail - WWW) 20.11.2008, 14:45:38 [X] [D]
Otázka do pléna: A může mikroformáty používat i špatný kodér? (třeba já?)

[3] (Arthur Dent [openID] - Mail - WWW) 20.11.2008, 14:52:26 [X] [D]
[1] Už se těšíme...

[2] Rozhodně

[4] (Jan Horna - Mail - WWW) 20.11.2008, 15:13:36 [X] [D]
Na mém webu webnahovno.cz je mám, není to nic složitého přece :) Jinak dobrá série ta na Zdrojáku.

[5] (rarouš [openID] - Mail ) 20.11.2008, 15:55:13 [X] [D]
Teď to můžu napsat, ale důkaz nemám už žádnej, ale Atlasí firemní vizitky používaly vCard již najaře a nikdo o tom nepsal. :) Teď, co se spustil ten supa web najisto, není po mikroformátech ani stopa... :(

[6] (Lokutus - WWW) 20.11.2008, 16:06:48 [X] [D]
Já teda nejsem kódér (ani dekódér), ale tohle mě zajímá. Chystám jeden projekt (nebudu ho vyvíjet já) a zajímalo by mě, zda by mikroformáty v něm měly využití. Je někde k dohledání nějaký souhrn (tabulka) mikroformátů a jejich podpory?

[7] (Arthur Dent [openID] - Mail - WWW) 20.11.2008, 16:16:36 [X] [D]
[6] Koukni na ten seriál na Rootu, pak můžeš pokračovat na http://microformats.org nebo na http://microformats.cz/

[5] Na ja, takový je život... Že vy jste neposlali TZ na Lupu, že je máte, co? ;)

[8] (Martin Hassman [openID] - Mail - WWW) 20.11.2008, 16:17:34 [X] [D]
[6] V angličtině http://microformats.org/ v češtině asi nejlépe na http://zdrojak.root.cz...roformaty/ a pár dalších odkazů je na http://microformats.cz/ Pokud víte o dalších zdrojích, připište, rád je zalinkuju.

[9] (medhi - Mail - WWW) 20.11.2008, 16:30:06 [X] [D]
Tak mikroformáty na srazy.info implementovány, opravdu jednoduché, otázka 15 minut. Nejlepší je podívat se na nějaký příklad na http://microformats.org/ a podle toho doplnit do zdroje názvy tříd, sem tam něco obalit do divu navíc.

[10] (rarouš [openID] - Mail ) 20.11.2008, 16:43:28 [X] [D]
[7] je dost možný, že jsem o tom věděl jen já :D a já TZ fakt nepíšu.

[11] (Arthur Dent [openID] - Mail - WWW) 20.11.2008, 16:45:48 [X] [D]
[10] Nojo, já taky ne. aTo děláme chybu, protože znáš to - "když chceš, aby si tvého nijak zajímavého počinu Lupa všimla, musíš se trochu snažit" (volně dle D. Antoše)

[12] (AlešD - Mail - WWW) 20.11.2008, 19:17:41 [X] [D]
Tak já půjdu proti proudu:

nejsem přesvědčený o tom, že mikroformáty jsou nějakou sémantickou výhrou. Spíš připomínají berlu, kterou se sémantickému webu snažíme přiblížit a to ještě tak nějak oklikou.

Ještě vezmu na milost vCard, protože mě v PDA fungují hCard a transformace je snadná. Ale takové FXN mě významově opravdu míjí. Co je prosím pěkně sémantického na informaci, že s autorkou odkazovaného článku právě spávám (třeba :-).

Trošku jsem se o tom v minulosti hádal (na webu Likáše Havrlanta) v souvislosti s třídami a identifikátory nazvanými header, content, column, footer, jejichž standardizaci bych považoval za užitečnější. Ale pak jsem pochopil, že je to venkoncem jedno, píšu to podle sebe a je to. A HTML 5 se s tím už nějak popasuje.

[13] (Arthur Dent [openID] - Mail - WWW) 20.11.2008, 19:42:37 [X] [D]
[12] Sémantická výhra? Inu, jasně že ne. Otázka zní takto: Je pro sémantický web přínosnější informace typu "událost" či "kontakt" psát podle sebe, nebo se dohodnout na tom, že budou v elementu s určitým způsobem pojmenovanou třídou? Mikroformáty nejsou nic jiného než dohoda "budeme to psát takto", v podstatě "coding patterns". A i když HTML5 některé podobné prvky přidá, tak i pak budou mít mikroformáty své místo, protože definice nového mikroformátu bude rozhodně snazší proces než přidání nového tagu do nové verze HTML.

[14] (Martin Hassman [openID] - Mail - WWW) 20.11.2008, 19:52:42 [X] [D]
[12-13] Pokud vím, neexistuje žádný konflikt mezi stávajícími mikroformáty a HTML5. Pokud existují styčné plochy, tak se jedná o vylepšení, např. kritizovaný abbr pattern pro určení času půjde v HTML5 vyjádřit novou značkou time.

[15] (AlešD - Mail - WWW) 20.11.2008, 20:36:47 [X] [D]
Ano, dohoda: "budeme psát takto" jsou vlastně celé mikroformáty.

Ale v podstatě jde o to co to přinese čtenářům -> podpora v prohlížečích, konkrétně v IE. Pokud to bude záležitost "zasvěcených", třeba jako XHTML, tak tomu prorokuji docela chmurnou budoucnost stejně jako XHTML. Přál bych si, aby se alespoň vCard chytly.

Už jsem prostě takhle konzervativní, než abych nadšeně opěvoval něco,co je tady mezi námi alespoň 2-4 roky.

[16] (Arthur Dent [openID] - Mail - WWW) 20.11.2008, 20:48:54 [X] [D]
[15] Podpora v prohlížečích? Co třeba takhle: http://factoryjoe.com...croformats/

Jistě se shodneme na tom, že přínos to bude mít pro uživatele ve chvíli, kdy kodéři začnou tuhle dohodu dodržovat. Vidím tu paralelu s dodržováním "validního HTML 4" - jaké to mělo okamžité "přínosy pro čtenáře"?

A neodpustím si rýpnutí - už je to tu "dva až čtyři roky", ale spousta kodérů se rozhodla, že to bude psát podle sebe. A to přesně proč? V čem je ten problém, který vám brání se k oné dohodě přidat, nota bene když už tu je 2-4 roky? Můj článek je určen právě takovým, co "vědí", ale co to "prostě dělat nebudou", protože... proč? Nebudou tu argumenty velmi podobné těm, které padaly proti "validnímu HTML"?

[17] (Martin Hassman [openID] - Mail - WWW) 20.11.2008, 20:49:12 [X] [D]
[15] Podpora pro IE existuje, viz http://zdrojak.root.cz...microsoft/ Standardní součástí IE8 se sice nestane, ale pokud IE8 uspěje s webslices a akcelerátory, tak by se tahle podpora mikroformátů mohla do IE9 dostat (je to po nich další logický krok).

[18] (AlešD - Mail - WWW) 20.11.2008, 21:29:19 [X] [D]
Ano, jako advokát diabolicus si dovoluji skepsi, ale opravdu rád bych se dočkal doby, kdy se třeba konkrétně mikroformáty budou všobecně uznávanou technologií. Nicméně mi současné nadšení z nich připomíná dobu nedávno minulou, kdy byly slibovány světlé zítřky se skvělým X.

Jest však faktem, že to zkusím někam dát a počkám na nějaké měřitelné výsledky.

[19] (Arthur Dent [openID] - Mail - WWW) 20.11.2008, 22:02:12 [X] [D]
[18] Co je všeobecné uznání? Je to implementace v prohlížečích? Je to podpora od Googlu a Myspace? Je to RFC? Adopce pod milá křídla konsorcia W3C? Nebo snad to, že je bude automaticky do webíků cpát i "Béda Webdesing Studio"? Nebo snad zahrnutí v Dreamweaveru a FrontPage (ať už se to jmenuje jak chce)?

Já bych to "nadšení" zas neviděl tak nadšené... Je to ostatně stejné pokaždé, když je nějaká snaha se na něčem dohodnout - část lidí se dohodne, další uznají, že je lepší dohoda nějaká než žádná, no a ti ostatní mají pocit, že ti, co se dohodli, je do něčeho nutí ("A just to budu dělat po svym!") ;)

[20] (Timy - Mail - WWW) 20.11.2008, 23:52:25 [X] [D]
Mně se moc nelíbí ten systém tříd; když se podívám na ukázkový příklad hCard na Zdrojáku (http://jdem.cz/aghj5), tak je to strašně „selfnotexplain“ nebo jak to nazvat :-). Prostě kouknu na to a nerozumím tomu, protože je tam moc nadbytečných informací, je to nepřehledné. Samé spany, které slouží jen k tomu, abychom mohli přiřadit třídu. Hezčí řešení by bylo použít přímo nové elementy, třeba apod., to by se mi líbilo. Bohužel si odpovím sám — nebylo by to validní, což by asi někomu vadilo a MSIE by tyto neznámé elementy neuměl stylovat (FF a Opera umí stylovat i neHTML elementy).

Ale tak je pořád lepší než drátem do oka, funguje to, implementace prostá a snad to někomu bude k užitku — takže to zkusím alespoň někde hodit, minimálně ten hCard. Díky za podnět ;-).

[21] (Arthur Dent [openID] - Mail - WWW) 21.11.2008, 00:17:34 [X] [D]
[20] Tak nevím, to bych asi zase narazil na otázku: "Použít nevalidní element" vs "použít validní konstrukci, která se hůř čte"?

Schválně... [div class="street"] vs [street] (nemáme špičaté závorky) - jedno se "hůř čte", ale ta informace je určená pro stroj, druhé je nevalidní a z hlediska systémovosti ještě horší než "browser specific" tagy v HTML NoName.

Já vím, já vím, nelíbí se nám to, ale musíme se smířit s tím, že CLASS a ID JSOU v (X)HTML sémantické atributy. Jak kdysi v jedné diskusi tvrdil jeden známý HTMLkář: Z hlediska sémantiky je jedno, jestli je to napsáno jako [adress] nebo [span class="address"], z obojího je jasné, že to je adresa. Takže klid, dýchat zhluboka, a říkejte si se mnou: Stejně tu adresu styluju. Stejně událost styluju. Stejně styluju geopozici. Balím to do nějakého tagu a dávám tomu nějaký class. O nic nejde, jen tu třídu nebudu pojmenovávat ADRESA ani ADDR ani kontakt, ale vcard. Navíc obalím zvlášť jméno a ulici. Uživatel na stránce neuvidí rozdíl, stejně píšu konstrukce jako je "span v a". Tak o co jde? Stejně to tak dělám, stačí jen když budu používat nějaká dohodnutá jména tříd, ne ta svoje.

Ech, vlastně, to by takhle nešlo... :)

[22] (zlosyn - Mail ) 21.11.2008, 00:36:15 [X] [D]
Hjo ještě by se mohl někdo zasadit o protlačení atributů jako IČ, DIČ nebo jiných národnostně specifických věcí (SSN existuje ?)... rozhodně bych to uvítal víc než naprosto k ničemu class="tag"

[23] (zlosyn - Mail ) 21.11.2008, 00:55:45 [X] [D]
ehm rel="tag", uz blbnu

[24] (Jiří Bureš - WWW) 21.11.2008, 09:00:35 [X] [D]
OT: Martine, neplánuješ změnit/zrušit ty divné odkazy všude v textu na misantrop.eu? Vždycky když dám Shift+LMB, tak to nic neudělá. Je to k nepoužití.

[25] (Arthur Dent [openID] - Mail - WWW) 21.11.2008, 13:10:12 [X] [D]
[24] Prosím? Co že chceš? Co ti nic nedělá? Co je divný?

[26] (Jiří Bureš - WWW) 21.11.2008, 13:31:41 [X] [D]
[25] Myslím veškeré hypertextové odkazy v článcích, které bych rád otvíral "do nového okna" pomocí Shift + levé tlačítko myši (Maxthon nad IE7). Nevím, co všechno to hafo javascriptů dělá, ale mně to blokuje otvírání odkazů z Tvých článků. Opera + FF je OK.

[27] (Arthur Dent [openID] - Mail - WWW) 21.11.2008, 13:32:49 [X] [D]
[26] Mně to funguje i v IE. Udělej si něco se svým Maxthonem, Jiří! :)

[28] (rony [openID] - Mail - WWW) 21.11.2008, 14:51:58 [X] [D]
Laicka otazka: nie je niekde pekna tabulka, kde by bolo co mozno najstrucnejsi ale najuplnejsi zoznam "dohodnutych" nazvov "objektov"

nejako takto:

name - meno a priezvisko osoby (meno prve, priezvisko druhe)
street - nazov ulice

mam pocit, ze tych dohodnutych prvkov moze byt viac a mikroformat iba zluci par z nich a vytvori si nejaku mnozinu cojaviem hCard.

postreh:

sranda je, ze pokial ide o to ukladat data do sialenych SQL tabuliek, tak vsetci su viacmenej zajedno, ze to treba rozbit pomaly na atomy a rozskatulkovat, porozsypat do roztodivnych konstrukcii desiatok sad tabuliek, ciselnikov a podobnych veci.

Ked sa naopak o to iste snazis vo vrstve HTML, tak narazas na neuveritelny odpor :-)

[29] (AlešD - Mail - WWW) 21.11.2008, 17:17:31 [X] [D]
rony:
Normalizace relační databáze má naprosto jiný účel (jednoznačnost, rychlost, datový objem databáze atd...), než sémantika HTML (významové vyznačení částí textu), to snad ani nelze srovnát 8-|

"nie je niekde pekna tabulka, kde by bolo co mozno najstrucnejsi ale najuplnejsi zoznam "dohodnutych" nazvov "objektov""

třeba tady: http://microformats.org...fications

[30] (danaketh - Mail - WWW) 21.11.2008, 18:00:43 [X] [D]
S mikroformáty je sranda a přitom jsou tak jednoduchý... Asi je doplním i do už hotových projektů. Jenom by to chtělo přimou podporu prohlížečů bez nutnosti pluginů jako je Operator.

[31] (Martin ) 21.11.2008, 19:21:11 [X] [D]
Ty javascriptové mybloglog odkazy jsou příšerný výstřelek. Nevidím, kam to vede => neklikám na to. I když bych kolikrát chtěl.

[32] (Arthur Dent [openID] - Mail - WWW) 21.11.2008, 19:27:27 [X] [D]
[31] Já taky neklikám. Mně stačí, když vidím, kolik lidí kam kliká.

[33] (rony [openID] - Mail ) 21.11.2008, 19:54:56 [X] [D]
[29] tomu verim, preto to pouzivam ako priklad protikladu a nie porovnanie :-)

[34] (Patrick.Zandl@seznam.cz[[openidhttp://id.seznam.cz/351e9a100eea8 [openID] ) 11.12.2008, 18:01:06 [X] [D]
Omlouvám se za pokus, ale je to pokus :(

[35] (Arthur Dent [openID] - Mail - WWW) 11.12.2008, 18:29:25 [X] [D]
[34] Seznam už implementoval OpenID? :)