Přejít k navigační liště

Zdroják » Webdesign » Kódujeme sémanticky s Mikroformáty: Value Class Pattern

Kódujeme sémanticky s Mikroformáty: Value Class Pattern

Články Webdesign

Po dlouhé době se vracím s překladem (zatím) posledního dílu seriálu Emily Lewis – Getting Semantic With Microformats. Tentokrát se zaměříme na poslední výmysl týmu okolo Mikroformátů – Value Class Pattern. Tento vzor (pattern) řeší problémy s přístupností u mnoha mikroformátů, které používaly abbr. (např. pro označení data a času).

Seriál Kódujme sémanticky s mikroformáty je překladem anglického originálu, který na svém blogu A Blog Not Limited vydává webdesignerka Emily Lewis. Původní článek vyšel 2. června 2009 a v původním znění jej naleznete na A Blog Not Limited.

Ne, vaše oči vás neklamou. Je tu další článek série Kódujeme sémanticky s Mikroformáty. (Speciální díky patří Benu Wardovi za jeho technickou pomoc.)

Malé osvěžení paměti

Pokud nejste takový blázen do mikroformátů jako já, tak pravděpodobně nevíte, co to value class pattern je.

Pokud jste ale četli tento seriál pravidelně a neminuli jste díl Náměty a problémy, tak pravděpodobně víte víc, než tušíte.

Ale nechme předpoklady stranou a pojďme si raději připomenout základy.

hAccessibility

Web Standard Project ukázal na problém s přístupností v mikroformátech (a označil ho termínem hAccessibility) týkající se návrhového vzoru pro označení data a času (datetime design pattern).

V jádru tohoto problému je použití tagu abbr tak, že obaluje lidmi uchopitelnou informaci a v atributu title pak má hodnotu pro parsery ve formátu ISO 8601. Vypadá to takhle:

<abbr class="dtstart" title="2009-05-18">May 18, 2009</abbr>

Čtečka obrazovky pak uživateli čte: „dva nula nula nula devět pomlčka nula pět pomlčka jedna osm“. A ještě horší je to, pokud chceme uvést i čas, jako v následujícím případě:

<abbr class="dtstart" title="2009-05-18T10:30:00">May 18, 2009 at 10:30am</abbr>

Uživatel uslyší: „dva nula nula devět pomlčka nula pět pomlčka jedna osm T jedna nula dvojtečka tři nula dvojtečka nula nula“.

Komunita okolo přístupnosti (dle mne správně) tvrdí, že tohle rozhodně přístupné není. Komunita okolo mikroformátů naopak tvrdila, že:

  • Data ve formátu ISO 8601 jsou v podstatě celkem lidsky čitelná
  • Sémantická hodnota toho, že nabídneme přidanou hodnotu pomocí atributu abbr převyšuje případné problémy s přístupností, protože
  • většina čteček obrazovky nemá přednastaveno číst atribut title u  abbr

A tato debata se táhla celé roky.

Použitelnost

Ale nebyla to pouze přístupnost, co mikroformáty narušovaly. Byly tu také starosti o použitelnost spojené s použitím návrhového vzoru pro datum a čas.

Znovu byl problém s datem ve formátu ISO 8601 v title  tagu abbr. Tentokrát ale nebyl problém vztažen ke čtečkám obrazovky, ale k standardnímu chování prohlížeče. Většina prohlížečů totiž zobrazuje uživateli hodnotu title u abbr  jako tooltip:

microformats

Jen ti největší geekové mezi geeky pravděpodobně rozluští tuto informaci. Pro všechny ostatní je to prostě nějaká podivnost na stránce, která leda otravuje. A když si vezmeme, že části mikroformátů určené pro strojové zpracování by měly být neviditelné pro uživatele, tak tooltip rozhodně není neviditelný, a může být pro běžného uživatele celkem matoucí.

Za mikroformáty mezinárodní

Další často slýchaná stížnost na mikroformáty je, že nejsou mezinárodní. To znamená, že hodnoty požadované mikroformáty dávají význam pouze těm, kteří publikují v americké angličtině.

Podívejme se na hodnotu typu telefonu v hCard. Pokud chceme označit mobilní telefon, tak povinná hodnota je „cell“. Američan bude s největší pravděpodobností vědět, co to znamená, ale Britové používají pro tento typ telefonu označení „mobile“.

Je to tedy pro ně skutečně dobře použitelné?

Vstupte do světa value class pattern (vzor pro hodnoty atributu class)

Komunita okolo mikroformátů nějaký čas trpělivě pracovala na odstranění těchto problémů a přišla s řešením. Mimochodem i já jsem se do procesu psaní a testování toho, čemu se původně říkalo „value-excerption pattern“, zapojila.

A všechna ta dřina se nakonec vyplatila a vznikl value class pattern, který nabízí autorům hned několik možností pro označení jejich obsahu bez toho, aniž by se museli strachovat o výše zmíněnou použitelnost, přístupnost či o problémy s lokalizací.

Informace o datu a čase

Teď jsem to řekla, ale řeknu to ještě jednou: při použití value class pattern mají autoři několik možností, jak označit datum a čas na svých stránkách. Vyberete si ten, který se vám líbí; ten, který je nejlepší pro váš web. Osobně jsem z této svobody nadšená.

Pojďme se tedy podívat na některé možnosti toho, jak označit informaci o datu a čase.

Pořád můžete používat abbr

Value class pattern nezakazuje použití abbr a s ním spojeného návrhového vzoru pro označení data a času. Pokud jste ve výše zmíněné „debatě“ na straně těch, kteří věří, že použití atributu abbr a uvedení data a času v title, má sémantický význam, tak to prostě používejte.
Drobná změna ale stejně je. Předtím, než se objevil value class pattern, označovali jsme datum a čas pro dtstarthCalendar tak­to:

<abbr class="dtstart" title="2009-06-06T18:30:00">June 6, 2009 at 6:30pm</abbr>

Ale tato metoda je nyní považována za zastaralou. Ačkoli jí parsery rozumí, již to není doporučené řešení.

Jen poznámka, použití samotného abbr design pattern – pro vysvětlivky jmen zemí, souřadnice latitude/longitude, atd. – je stále naprosto v pořádku a doporučeno. Jsou to pouze informace o datu a čase, kde se věci trošku změnily.

Co jsou ty malé změny?

<p class=„dtstart“><abbr class=„value“ title=„2009-06-06T18:30:00“>June 6, 2009 at 6:30pm</abbr></p>

Všimněte si, že atribut dtstart je přiřazen tagu p (může to být i jakýkoli jiný element), zatímco tag abbr má nyní označení class="value". Hodnota title zůstává stejná.

Uvědomte si ale, že tento příklad má stále ty stejné problémy s použitelností a přístupností. Ale stejně to může být pro některé autory preferovaná metoda. Krása value class pattern je v tom, že si můžete vybrat metodu, která vám sedí nejvíce.

Zahoďte abbr design pattern

Pokud se trápíte problémy s přístupností a použitelností při použití abbr pro označení data a času, value class pattern je pro vás také, díky value-title subset.

Namísto použití abbr obsahujícího lidsky čitelný obsah a strojově čitelnou hodnotou v atributu title, můžete nyní použít span s class="value-title"  a s title, který obsahuje datum (a čas) v ISO 8601. Parsery poté poznají, že hodnota pro element označený value-title je obsažena v title  a ne jako vnitřní text tagu.

<p class="dtstart"><span class="value-title" title="2009-05-18T13:00:00">May 18, 2009 at 1pm</span></p>

Takhle dosáhneme cíle mikroformátů, obsáhneme lidsky i strojově čitelnou hodnotu a zároveň čtečky obrazovky nebudou číst informaci určenou pro strojové zpracování svým uživatelům. Většina prohlížečů ale stále zobrazí tooltip, výjimkou budiž Safari 3.0.3 na Windows XP.

Oddělení data a času

Abych ještě více demonstrovala, jak je value class pattern flexibilní, můžeme specifikovat hodnoty data a času každou zvlášť.

<p class="dtstart"><span class="value-title" title="2009-05-18">May 18, 2009</span> at<span class="value-title" title="13:00:00">1pm</span></p>

Znovu jsem v tomto příkladu vypustila abbr a používám span class="value-title". Ale tentokrát si všimněte, že jsem datum a čas specifikovala odděleně, každý ve svém elementu span class="value-title". Parsery poté zkombinují hodnotu data a času do jediné hodnoty.

A tato separace data a času může být použita i s abbr. Někteří lidé věří, že právě tohle řeší problémy s použitelností a tooltipy. Tedy že výsledné tooltipy zvlášť pro datum a pro čas jsou mnohem „použitelnější“ než tooltip obsahující jak datum, tak čas v jednom řetězci:

microformatsmicroformats

Ideální implementace by pak vypadala asi takto:

<p class="dtstart"><abbr class="value" title="2009-06-06">June 6, 2009</abbr> at <abbr class="value" title="18:30:00">6:30pm</abbr></p>

Prostě jen definujete datum a čas odděleně, každý se svou vlastní abbr class="value" a odpovídající hodnotou ISO 8601 v  title.

Všimněte si, že v tomto příkladě nepoužívám hodnotu value-title. To proto, že by neměla být používána s tagem  abbr .

Když používáte value class pattern v kombinaci s abbr design pattern, stačí přiřadit class="value" elementu abbr. Parsery již vědí, kde mají hledat hodnotu data a času, takže class="value-title" je nepotřebný a nevalidní.

Value-title s prázdnými <span> y

A je tu ještě další možnost; ta která odstraní jak tooltipy, tak problémy s čtečkami obrazovky.

Můžete také použít class="value-title" v kombinaci s prázdným elementem span… No, ne tak úplně prázdným. Se span, který obsahuje právě jednu mezeru:

<p class="dtstart"><span class="title-value" title="2009-05-18T13:00:00"> </span>May 18, 2009 at 1pm</p>

Konečný výsledek je stále stejný: uživatelé dostanou jasnou informaci o datu a parsery dostanou datum ve formátu ISO 8601. ALE: žádné problémy s přístupností a eliminovali jsme i „matoucí“ tooltipy.

K této konkrétní implementaci je tu pár pravidel, z nichž první je to, abyste tento přístup používali co nejméně. Tedy pouze tehdy, pokud prostě nemůžete použít jiný designový vzor. A když už ho použít musíte:

  • Prázdný element s value-title  by měl následovat okamžitě po začátku rodičovského elementu a být tak před lidmi čitelným obsahem a bez dalšího zanořování.
  • Prázdný element s value-title  by měl být použit pouze jednou. Neměl by být používán, když definujete datum a čas zvlášť, například u hodnoty dtstart v hCalendar.
  • Tento přístup s prázdným elementem by měl být aplikován pouze (alespoň pro teď) na:
    • Hodnoty data, času a časového pásma a doby trvání dle ISO 8601.
    • Vyjmenované hodnoty jako třeba podvlastnosti tel, email, adr v hCard.
    • Souřadnice pro latitude a longitude v geo mikroformátu.
    • Telefonní čísla.

Nejen pro hCalendar

Příklady, které jsem používala, se zatím soustředily na označení data a času tak, jak by se objevili v mikroformátu hCalendar. Ale value class pattern můžete použít s kterýmkoli mikroformátem, který nějakým způsobem pracuje s datem a časem. Například narozeniny v hCard:

<p class="bday">My birthday is on <span class="value-title" title="1974-09-04">September 4</span>.</p>

Nebo datum publikace v hAtom

<p class="published"><span class="value-title" title="2009-06-03">June 2, 2009</span></p>

Lokalizace

Zatím jsem o value class pattern mluvila pouze ve spojení s datem a časem. Ale vzpomínáte si na mou dřívější úvahu o problémech s mezinárodností mikroformátů? No, pojďme se podívat, jak nám pomůže value class pattern.

Typy telefonů

V mé předchozí zmínce jsem speciálně zmiňovala typy telefonů v hCard. Jediná validní hodnota pro označení přenosného telefonu je „cell“, ale ne každý takhle označuje tento typ telefonů.

Nyní můžete použít value class pattern k zobrazení lokálně platné hodnoty, které budou vaši uživatelé rozumět a zároveň parserům nabídnout požadovanou hodnotu pomocí span class="value-title" a atributu  title:

<p class="tel"><span class="type"><span class="value-title" title="cell">mobile</span></span>: <span class="value">505-123-4567</span></p>

V tomto příkladu používám value-title, takže parsery budou vědět, že mají číst atribut title (cell) a text uvnitř tagu obsahuje lokalizované označení (mobile).

Lokalizovaná telefonní čísla

Další příklad (který jsem „ukradla“ z mikroformátí wiki, protože toho moc nevím o mezinárodních hovorech) je na lokalizovaná telefonní čísla. V tomto případě britské číslo:

<p class="tel"><span class="type">Home</span>: <span class="value">+44</span> (0)<span class="value">1223 123 123</span></p>

Úvaha za touto implementací říká, že validní číslo je +441223123123. Ale Britové jsou zvyklí, že se do čísla vkládá navíc 0 pro lokální hovory. Jenže +4401223123123 je „nevalidní“ číslo.

Pomocí value class pattern tedy dáme britským uživatelům informaci, které je pro ně nejužitečnější a stále poskytneme validní data pro parsery. V tomto příkladě předvolba +44 je obalena pomocí span class="value", stejně jako číslo 1223 123 123. Ale 0 není obalena ničím. Parsery tedy spojí oba řetězce obaleny span class="value" a získají tak kompletní a validní data.

Existuje mnoho dalších příkladů na použití value class pattern. Ale tenhle článek už je mnohem delší, než jsem původně předpokládala že bude (nevím, proč mne to pořád překvapuje, když jsem tak upovídaná) a já mám jiné věci na práci… Takže vás již nechám zkoumat samotné.

Vyber si svůj jed

Nenaznačuji, že mikroformáty jsou jed (naopak jsou skvělé pochutiny), ale nějak se mi chtělo sem hodit bulvární nadpis.

Každopádně myšlenka je zachována – vy si vyberete, která implementace mikroformátů se vám líbí nejvíce. U value class pattern nejste svázáni žádným stylem značkování vašeho obsahu.

Osobně nejsem jeden z těch lidí, kteří by chtěli nadále používat tag abbr. Nepochopte mne špatně, vlastně si myslím, že abbr má sémantický význam pro to, aby v atributu title obsahovalo informace o datu a čase v ISO 8601.

Ale i přes mou velkou lásku k sémantice, nejsem úplný purista. Myslím si, že hodnota toho, že nás nesémantické span class="value-title" zbaví problémů s přístupností a použitelností, je mnohem větší, než moje touha mít sémantický kód.

Na druhou stranu rozhodně nejsem nadšena z používání prázdného tagu s value-title. Takže jeho používání moc nepodporuji. Pro většinu mých implementací data a času si myslím, že budu obalovat obsah pomocí span class="value-title" a datum uvedu v  title.

Je pravděpodobné, že budu nucena občas udělat výjimku, ale tohle se mi z value class pattern zatím líbí nejvíc. Je to flexibilní k požadavkům autora obsahu.

Aktualizujte své implementace

Ačkoli jsem si našla čas k napsání tohoto článku, ještě jsem s nenašla čas k aktualizaci mých existujících implementací mikroformátů. Ale udělám to, určitě to udělám. A doufám, že vy také.

Vývojáři již pracují na tom, aby aktualizovali své parsery tak, aby poznávali nový value class pattern. Optimus je v čele, od verze 0.8 podporuje value class pattern.

Takže se ujistěte, že uděláte svou část práce a aktualizujte svůj kód.

Seriál opět nekončí, pokud se v mikroformátech stane něco zajímavého, určitě o tom napíšu. Takže do té doby…

(Pozn. překladatele: do té doby si můžete koupit knížku autorky – Microformats Made Simple. Pochopitelně anglicky, že by se uvažovalo o českém překladu, se ke mě nedoneslo.)

Komentáře

Subscribe
Upozornit na
guest
9 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
nes_ro

V této oblasti jsem úplný neznalec, ale nebylo by lepší, kdyby se spojili W3C, velké webové prohlížeče a udělali třeba speciální HTML atributy pro mikroformáty?
Přišlo by mi logičtější a jednodušší udělat něco jako: May 18, 2009 at 10:30am

Radovan

V HTML5 sa daju predsa vyuzit vlastne datove atributy. Bolo by to zaujimave keby ho premietli do praxe s mikroformatmi.

karf

Vlastní datové atributy v HTML5 slouží k něčemu jinému – k přenášení uživatelských dat. Každý si tam může ve své webové aplikaci nacpat co chce a má jistotu, že mu do toho žádný robot nepoleze. Pokud by se tam začaly cpát mikroformáty, tak by se tím smysl data atributů zcela popřel.

onyx

Dát sémantiku do webových stránek je snem poslední doby. Na druhou stranu, dokud budou stránky tvořeny lidmi, asi se s tím těžko něco dá rozumně dělat.
Mikroformáty asi svůj smysl mají, ale na druhou stranu ani HTML specifikace, ani CSS specifikace nemluví nic o vyhrazených hodnotách atributu CLASS pro speciální účely. Pokud by se vyřešilo toto „naroubování“ mikroformátů nějakým vlastním atributem. A nebo, co to udělat úplně obráceně a zavést přímo tagy HCALLENDAR, XFN, HCARD, REL, HATOM a HRESUME, nebo tagy typu <MICROFORMAT TYPE=„hcallen­dar“><PARAM NAME=„type“ VALUE=„vevent“><PA­RAM NAME=„dtstart“ VALUE=„2008–09–13T09:00:00“><PARAM NAME=„dtend“ VALUE=„2008–09–13T09:00:00“><PARAM NAME=„description“ VALUE=„třídní sraz“></MICRO­FORMAT>

xurfa

Proč prostě někdo nepřidá do HTML nový atribut, který by znamenal „strojově čitelná hodnota“, např. „value=“? Pak by vše bylo košer a nikdo by si na nic nemohl stěžovat. Pak by se to použilo:

May 18, 2009

xurfa

Kua, ono to neescapuje, správně je:

<abbr class=„dtstart“ value=„2009–05–18“>May 18, 2009</abbr>

onyx

Zřejmě moc lidí nepovažuje mikroformáty za krok vzad. Spíš je děsí ten způsob, jak jsou provedeny. Přece jenom, zavedení vlastních tagů by bylo řešením čistějším.

Uznávám, že pokud se přidává do nějakého „stndardu“ nová vlastnost, musí se jít buď cestou „zanášení chyb“ do existujících definic nebo cestou „roubování na již existující“. Osobně si myslím, že přístup typu „validita nade vše“ není to pravé ořechové. Spíš jsem zastáncem přístupu „zanášení chyb“.
Pokud by přidal nové tagy nebo nové atributy, tak pro prohlížeč by to neměl být problém, protože při zpracování chybného HTML kódu ho stejně má prohlížeč zobrazit nebo jinak zpracovat. Navíc tento způsob byl úspěšně využíván před HTML 4.01.

Na jednu stranu se tvrdí, že hackovat CSS kvůli IE není dobrá cesta, ale hackovat HTML kvůli mikroformátům už dobrá cesta je?

Docela mě zaráží, proč se tolik straší s validitou? Důležité je přece, že se obsah správně zobrazí, ne? Po zkušenostech, kdy jsem řešil, zda stránku udělat validní nebo koukatelnou, jsem se rozhodl preferovat koukatelnost před validitou. Takže moje stránky sice nejsou validní, ale zobrazují se bez problémů a to i s proměnlivou šířkou. Navíc, jakou hodnotu má hodnocení validity HTML validátorem, který validuje chybně. Zvlášť v době, kdy většina webu validní není, protože XHTML dokumenty jsou posílány s mime typem text/html.

onyx

Jenom ještě poznámka k sémantice. Obávám se, že naroubovat na HTML takové prostředky, aby program rozumněl významu obsahu libovolné stránky a dokázal ho správně pochopit, se podaří jenom těžko.

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.

Pocta C64

Za prvopočátek své programátorské kariéry vděčím počítači Commodore 64. Tehdy jsem genialitu návrhu nemohl docenit. Dnes dokážu lehce nahlédnout pod pokličku. Chtěl bych se o to s vámi podělit a vzdát mu hold.