Na adresu Internet Exploreru už dnes z mých úst poněkolikáté přilétla smršť nelichotivých slov. Tvořím javascriptovou aplikaci, k jejímuž běhu potřebuji generovat IFramy a do nich načítat stránky. To vše javascriptem. Nepřekvapí vás, že žádný z prohlížečů nevzdoruje mé snaze takovou měrou jako právě Explorer.

Zvykl jsem si tolerovat a obcházet úlety tohoto obskurního prohlížeče ve věcí kaskádových stylů, poněvadž v drtivé většině případů existuje metoda, kterou se dá Exploreru hlava zdárně zamotat. Na co si však asi nezvyknu, je Exploreří zvláštní chování při manipulaci s javascriptem. Ne, implementace javascriptu v IE není zase tak špatná, ale výsledný obrázek poněkud kazí drobné chybičky a nesrovnalosti. Myslel jsem si, že i je dokázi obejít poměrně snadno, však v jedné jediné věci si už druhý den nevím rady a dokonce i všemocný Google tentokrát bezradně krčí rameny.

IFrameObj = document.createElement('iframe');
bodyObj.appendChild(IFrameObj);
IFrameObj.src = 'data/page.html';

Najdete řešení?

Google mi vytrvale tvrdí, že řešení neexistuje. Pravděpodobně bych postupem času vynašel nějakou složitou obezličku, kterak potřebný dokument v IE vygenerovat dynamicky, ale do toho se mi pravda nechce a ani to nemám tak nevyhnutelně zapotřebí.

Ale přesto se obracím na vás – Čechoslováci jsou proslulí svojí vynalézavostí, tak se prosím pokuste najít řešení, jak snadno scriptem načíst do IFrame stránku tak, aby Explorer při jejím načtení „neškytl“. Děkuji vám!

Update – vyřešeno

Jako každý „neřešitelný“ problém, o kterém se nepíše, měl i tento velice jednoduché a programátorem trestuhodně přehlédnuté řešení. Jediná finta spočívala v prohození dvou řádků kódu – místo zařazení IFrame do stromu dokumentu a následného načtení stránky v něm stašilo udělat obojí opačně. Nejdřív nezařazenému IFrame (který existoval v paměti pouze jako abstrakt) přiřadit stránku a pak až jej i s načítanou stránkou zařadit do dokumentu. Výsledný kód:

IFrameObj = document.createElement('iframe');
IFrameObj.src = 'data/page.html';
bodyObj.appendChild(IFrameObj);

Když při :hover mění text svoji šířku, poukazuje to na nedostatečné splynutí webdesignerovy mysli s duchem internetu. Konkrétně se jedná o případ, kdy tvůrce webu chce, aby při najetí myši na odkaz změnil text odkazu svůj řez. Nebo aby se ztučnil. Vykreslil se kurzívou. Zvětšil prostrk mezi jednotlivými písmeny. Cokoliv, co většina z vás pravděpodobě považuje za nepřirozené.

Po delší době jsem zavítal na diskusi jakpsatweb.cz. Narazil jsem na poměrně zajímavý dotaz, který se týkal přesně problému, který jsem nastínil výše.

Zlobivá kurzíva

Uživatel Celebi žádal o pomoc při řešení problému, kdy při najetí myši na odkaz mění text odkazu sklon textu z normálního na kurzívu. Kurzívou psaný text je však o něco málo širší než text normální, proto se při najetí vždy následující text posunul, což samozřejmě není zamýšlené chování. Problém můžeme zapsat například takto:

<style type="text/css">
  * { font-family: "Times New Roman", serif; }
  a { color: red; }
  a:hover { color: blue; font-style: italic; }
</style>
...
<p>
  Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing</a> elit. In nulla mauris...
</p>

Podívejte se na ukázkovou stránku a najeďte na odkaz. Uvidíte, že zbytek řádku se posune vpravo, možná se i nějaké to slůvko přemístí na nový řádek, čímž způsobí hotové kaskádovité kataklyzma, kdy se přemístí i slovo z dalšího řádku, a to způsobí přesun slova z řádku následujícího… myslím, že nemusím pokračovat. Toto chování je tedy jednoznačně nežádoucí.

Rozbor problému

Hned na úvod musím říci, že všechny odpovědi v odkazované diskusi obsahovaly radu, aby se při hoveru styl písma vůbec neměnil. Toto je i mé stanovisko a předesílám, že v tomto případě více než v jakémkoliv jiném platí, že vyřešit problém znamená se mu vyhnout.

Jak však zjistit šířku tohoto prostoru? Nějaká konstanta nepřipadá v úvahu, což dokazuje toto řešení-neřešení:

<style type="text/css">
  * { font-family: "Times New Roman", serif; }
  a { color: red; padding-right: 0.7em; }
  a:hover { color: blue; font-style: italic; padding: 0; }
  .vetsi { font-size: 120%; }
</style>
<p>
  Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing</a> elit. In nulla mauris...
</p>
<strong><p class="vetsi">
  Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing</a> elit. In nulla mauris&hellip;
</p></strong>

Definoval jsem dva odstavce o odlišné velikosti textu (ukázka). Odkazům jsem „natvrdo“ přidal pravé vnitřní odsazení o šířce 0.7 čtverčíku, které při najetí myši zruším. Při standardní velikosti textu by mělo tohle nastavení ošetřit situaci v prvním odstavci. Druhému odstavci, ve kterém je definováno větší písmo, však tohle odsazení vyhovovat nebude. Šlo by jistě dosáhnout zajímavých výsledků při použití jiných kombinací jednotek, avšak univerzální řešení takto nestvoříte. Je to tedy slepá ulička.

Obecné řešení

Je třeba definovat kontejner o šířce, která bude stejná jako text odkazu po najetí myši. Do tohoto kontejneru pak odkaz umístit. Tím se zajistí optimální prostor pro rozšířený text. Vložíme tedy odkaz do neutrálního řádkového elementu, spanu. Tento span musí být stejně široký jako odkaz v hoveru. Vpíšeme do něj tedy stejný text jako do odkazu a nastavíme mu, aby jej vykresloval kurzívou. V této chvíli se nastavená kurzíva zdědí i odkazem, proto mu nastavíme normální sklon.

<style type="text/css">
  * { font-family: "Times New Roman", serif; }
  a { color: red; font-style: normal; }
  a:hover { color: blue; font-style: italic; }
  span { color: #bbb; font-style: italic; }
</style>
...
<p>
  Lorem ipsum dolor sit amet, <span>consectetuer adipiscing<a href="#">consectetuer adipiscing</a></span> elit. In nulla mauris...
</p>

Teď máme span široký jako text při hoveru + text bez hoveru (ukázka). Naším cílem je teď span o šířku odkazu bez hoveru zkrátit. Když se podíváte na příklad, jistě vás napadne řešení. Ano, stačí pomocný text ve spanu zneviditelnit, absolutní pozicování využít k vyjmutí odkazu z dokumentu a jeho přesunutí na začátek spanu. Tím se span zkrátí o šířku odkazu a ustálí se na šířce svého obsahu, která odpovídá šířce odkazu po najetí myši. Zní to složitě, vím, ale kód mluví zcela jasně:

<style type="text/css">
  * { font-family: "Times New Roman", serif; }
  a { color: red; font-style: normal; position: absolute; top: 0; left: 0; visibility: visible; }
  a:hover { color: blue; font-style: italic; }
  span { color: #bbb; font-style: italic; position: relative; visibility: hidden; white-space: pre; }
</style>
...
<p>
  Lorem ipsum dolor sit amet, <span>consectetuer adipiscing<a href="#">consectetuer adipiscing</a></span> elit. In nulla mauris...
</p>

Shrnutí

Zkušenější tvůrci mezi vámi se již ušklíbají. Ano, tohle řešení je samozřejmě v praxi nepoužitelné. Tolik zbytečného kódu kvůli jedné estetické libůstce, navíc nepřístupného, by mohl použít jen blázen. Přesně tak, po dnešku totiž může. :o)

Umíte lépe?

Uvedený kód jsem stvořil na koleni, je tedy velmi pravděpodobné, že existuje lepší řešení. Možná snad i řešení přístupné, nevyžadující obalové prvky a duplikaci textu. V tom případě bych byl rád, kdybyste se o takové řešení mohli podělit v komentářích. Díky!

Je tomu měsíc, kdy jsem natruc jednomu velkohubému prohlášení připravil test z teoretických znalostí (X)HTML a kaskádových stylů (viz tento článek). Při té příležitosti jsem nabídl, že dvacet dobrovolníků si bude moci test vyzkoušet v soutěži mezi sebou. Soutěžících jsem nakonec přijal trochu víc (viz článek) a od té doby se horečnatě testovalo, vyhodnocovalo, děkovalo, ba i spílalo.

Ceny do soutěže

Až v průběhu testování se ozvaly čtyři subjekty, že by měly zájem celou soutěž okořenit nějakou tou věcnou cenou. Bral jsem to jako příjemný bonus pro soutěžící a rád jsem všechny nabídky přijal. Dovolte mi prosím ještě jednou všem sponzorům poděkovat a připomenout či překvapit tím, co do soutěže věnovali.

Vilém Málek

Jako první se ozval Vilém Málek. Pravděpodobně jej znáte jako šéfredaktora Intervalu, rád bych však zopakoval, že v této soutěži působí jako „občan Málek“, tedy sám za sebe. Z vlastní kapsy přislíbil třem nejlepším zaopatřit knihu Google Hacking, což je téma velmi příhodné vzhledem k faktu, že v průběhu testu bylo zakázáno své odpovědi s tímto mechanickým vševědem konzultovat.

David Špinar, H1.cz

Za firmu H1.cz se ozval přímo její ředitel David Špinar. Vítězi soutěže H1.cz věnuje 256MB USB Flashdisk, soutěžícímu na druhém místě pak knihu Tvoříme přístupné webové stránky, jejímž autorem je právě jmenovaný David Špinar. Mimochodem, zrovna touto knihou teď po nocích listuji, velmi zajímavá.

Matěj Kloubek, Český Hosting

Jako třetí mě kontaktoval Matěj Kloubek a jménem firmy Český Hosting nabízí pro soutěžící velmi zajímavé výhody. Tři nejlepší obdrží od Českého Hostingu roční webhosting zcela zdarma, vítěz ještě navíc zdarma registraci jedné nadnárodní domény. Matěji Kloubkovi a tedy Českému Hostingu tímto i za soutěžící velice děkuji.

Petra Větrovská, Dobrý Web

Jako poslední se do řady sponzorů přidala Petra Větrovská za firmu Dobrý Web. Přišla se zcela specifickou nabídkou: soutěžícího, který se umístí na posledním místě, zve jakožto lektorka kurzu na kurz tvorby webu pomocí XHTML a CSS pořádaný firmou Dobrý Web. Pro posledního to je de facto výhra, protože úspěch či neúspěch v tomto testu zdaleka nevypovídá o tom, jak je dotyčný člověk schopen tvořit webové stránky v praxi.

Všem ostatním soutěžícím za účast mnohokrát děkuji. Musím říct, že se seběhla dobrá parta lidí, s každým z vás jsem rád pokecal, každého jsem rád poznal. Díky za to.

Test

Slíbil jsem, že po ukončení soutěže poskytnu test volně k použití. Ačkoliv v hodně okleštěné a „syrové“ verzi, zde jej máte – Test z teorie (X)HTML a CSS.

Důležité: pokud narazíte na jakoukoliv nesrovnalost či špatnou formulaci, pište mi prosím na mail, nikoliv sem do komentářů. V testu se záměrně vyskytuje několik „chytáků“, jichž jsem si vědom a které vám mohu individuálně na požádání vysvětlit, ale nemám sílu ani čas vyvracet masovou opozici. Díky za pochopení v tomto směru.

Opakovat! Pomůžete?

Ozývaly se hlasy, že by nebylo špatné učinit podobný test tradicí. Vůbec nejsem proti, budu však nutně potřebovat pomocnou ruku. Příští test (za půl roku nejdříve) bude ze stejného oboru, avšak zaměřený na praktické znalosti a postupy, po čemž po absolvování testu volal vlastně každý soutěžící. Potřebuji tedy dva až tři zkušené kodéry/webdesignery, kteří by mi pomohli test po odborné stránce připravit, vyladit a zorganizovat.

Dále pro tento test hledám sponzory (tentokrát s předstihem). Pokud chcete, aby se Vaše jméno či jméno Vaší firmy objevilo v souvislosti s touto, dle mého názoru zajímavou akcí či prostě jen fandíte kreativním webdesignerům, napište mi mail, prosím (j.polakovic@gmail.com).

A na závěr, pokud by někdo nabídl zajímavé místo k propagaci a uspořádání testu, vůbec bych se nebránil jeho přestěhování ze stránek mého osobního zápisníku.

Nejlepší je začít… od začátku. Jednoho hezkého dne jsem obdržel e-mail, ve kterém mne David Špinar zval na kurz tvorby přístupného webu, samozřejmě pod hlavičkou H1.cz. Nepřemýšlel jsem příliš dlouho, vidina zajímavě stráveného dne mne velice rychle zlomila k tomu, abych se slzou v oku opustil Brno a v komfortním žlutém autobusu zamířil směr Praha. Promítali Karlíka.

Praha – malý bloud

Na Florenci byla toho úterního dne zima, otravný déšť-nedéšť a rozmrzelý já. Na chlad nejsem ze slunného jihu zvyklý, déšť mám rád buď pořádný nebo naopak žádný a taky můj oblíbenec Burton mne Karlíkem trochu zklamal, umí lépe. Škoda, že jsem film neviděl v kině. Tak či tak jsem si na středu zakoupil zpáteční jízdenku a pomalu jsem se šoural směrem k metru.

Přiznávám, metro je jedna z věcí, které mám na Praze rád. Je to způsob přepravy mně velice blízký a v Brně ho nemáme. Což je škoda. Útěchou mi je, že máme perfektní šaliny, kdežto Pražáci jen rozvrzané tramvaje. Nu což. Dle instrukcí Davida Grudla, který už školení absolvoval, jsem zcela neomylně zamířil směrem k zastávce Vyšehradská, kde jsem vystoupil. Podle Davida jsem se odsud měl vydat co nejvíc dolů podél Nuseláku, že prý je školící středisko u jedné z jeho noh.

Když jsem se zorientoval a určil si směr, kterým bych se měl ubírat, všiml jsem si podivného jevu. Turista. Koukl do mapy, podíval se přesně tím směrem, kam jsem chtěl původně jít, a vyrazil. Od pohledu to byl člověk inteligentní a vzhledem k binaritě jeho batůžku, kdy měl jednu přezku rozepnutou a druhou zapnutou, dozajista i AjŤák. Mrkl jsem na hodinky, spousta času – uděláme si to zajímavější a půjdeme v jeho stopách. Třeba míří na to stejné místo. Bude sranda.

Praha – David Špinar

David Špinar je osobností výraznou, a to jak fyzicky, tak duševně. K té nehmotné části však později. Nestává se mi často, že bych k někomu musel zvedat zrak. Mých jedno sto devadesát centimetrů mi naopak vůči většině lidí dává výhodu například na koupališti, kdy je dosti obtížné mne utopit v mělké vodě. K Davidovi jsem však hlavu zvednout musel a i v jiných proporcích jsem nabyl přesvědčení, že kdybych s ním vedl při, raději bych ji řešil partičkou pexesa než na férovku.

Naštěstí se velice rychle ukázalo, že David je člověk klidný a pohodový. Mluví poměrně tiše a měkce, nekřičí, naopak výborně artikuluje a rozhodně se vám nestane, že byste mu nerozuměli. Tento fakt člověk s přibývajícími hodinami docenil čím dál víc. David mě doprovodil do místnosti, kde následně probíhalo samotné školení. Rychle jsem obhlédl vybavení učebny, zjistil jsem, že máme počítače, máme projektor, máme tabuli i žaluzie, takže zdánlivě nechybělo nic nezbytného.

Praha – Školení přístupnosti, dopoledne

Nakonec nás bylo osm včetně přednášejícího Davida Špinara. V jedné místnosti jsem se například potkal i s Jirkou Burešem (což už asi víte) a čerstvou posilou H1.cz Honzou Rozehnalem. Oba jmenovaní se však zlotřile usadili až do řady za mnou, při čemž zcela jistě sehrál svoji roli fakt, že ke mně ještě předtím přisedli tři vyslanci T-Mobilu.

Začali jsme malým představením sebe sama, obdrželi jsme program kurzu a také knihu Tvoříme přístupné webové stránky, kterou, jak víte, napsal přímo přednášející David Špinar. David začal úvodem do problematiky přístupnosti, velice srozumitelně a pro jistotu opakovaně zdůraznil, proč bychom se vůbec měli snažit tvořit co nejlépe přístupné webové stránky a co vlastně přístupností uživatelům tvůrce webu dává. Tento teoretický úvod, v knihách a článcích něco, co pohledem sotva přelétnu, protkl mnohými příklady z praxe, přičemž se Davidův monolog nejednou stočil k veřejné diskusi, nutno podotknout, že zajímavé.

S přibývajícími minutami vykládal David především o filosofii přístupnosti, dále různých omezeních, se kterými se může tvůrce stránek u uživatelů setkat a také o technologiích, které omezeným (nechápat prosím nijak pejorativně) uživatelům pomáhají se na webu pohybovat. V této úvodní části se ukázalo, že David je opravdu člověk na svém místě. Zdaleka se nedrží pouze „svého kopyta“, mnohdy jsme v diskusi dalece zabrousili do oblastí, které s přístupností menší či větší měrou souvisí, mluvím o použitelnosti a SEO. Atmosféra byla po celou dobu příjemná a uvolněná, minuty ubíhaly za zajímavého a místy i zábavného výkladu a diskuse, prostě paráda. Takto uplynulo dopoledne a ačkoliv venku stále skotačil déšť-nedéšť, vydali jsme se do blízké haly Folimanka, že v tamější restauraci poobědváme.

Po jistých peripetiích (opravdu se může stát, že v celé hospodě není jediné vejce?) většina z nás obdržela své jídlo, pouze jeden T-Mobilák stále čekal, až se najde extra šunka místo onoho vajíčka na jeho anglický steak. Dal jsem si ďábelské nudličky v chilli omáčce. Pociťuji vrozenou skepsi k jakémukoliv jídlu, které má ve svém názvu epiteta jako „ďábelský“, „čertovský“ či „satanův“, a byl jsem tedy zvědavý, jak ostrá moje krmě tedy bude. Byla dost ostrá, všechna čest. Víc bych se k tomu nevracel.

Příjemně nažhaven jsem se tedy odebral na druhou, odpolední polovinu kurzu, ve které jsme se měli věnovat především výkladu jednotlivých pravidel přístupnosti dle českého zákona.

Praha – Školení přístupnosti, odpoledne

Odpolední program byl dostlova nabitý praktickými informacemi. Jeden bod přístupnosti za druhým byl důkladně probrán a přítomnými řádně prodiskutován. Zmínil bych se zejména o zajímavých praktických informacích, které jsem se dozvěděl o hlasových čtečkách. Za deset minut David uvedl tolik příkladů a zajímavostí z praxe, kolik bych si na internetu sháněl a ověřoval polovinu dne. Taky jsem zjistil, že některé mnou používané postupy, kterými chci obsah zpřístupnit právě postiženým používajícím hlasové čtečky, jsou zcela zbytečné a neúčelné. Už jen proto mne osobně odpolední část kurzu zaujala ještě o trochu víc než ta dopolední.

S přibývajícím časem jsem se čím dál více ošíval, prosezené hodiny se na židli s nízkým opěradlem začaly projevovat. Celá akce se však už pomalu chýlila ke zdárnému konci. Sedmatřicátý bod, tabulky a končíme. V hlavě jsem si už pomalu skládal dohromady všechno to, co jsem vám zde napsal. David nám poděkoval za účast, navnadil nás na další kurzy pořádané Há jedničkou a školení oficiálně ukončil. Většina účastníků ještě zůstala u počítačů, aby si zkompletovala své poznámky či třeba zkontrolovala poštu, já jsem však měl trochu naspěch. Davidu Špinarovi jsem poděkoval, rozloučil se se zajímavými lidmi, které jsem na školení poznal, a vyrazil jsem do chladného pražského večera.

Resumé

Když jsem tak bloumal Prahou, přemýšlel jsem, co mi těch sedm hodin dalo a jestli ten čas stál za to. Stál, hned z několika důvodů. Předem musím zmínit osobu Davida Špinara, kdo jej zná osobně, bude vědět, o čem mluvím. Jedná se o pohodového člověka s opravdu hlubokými znalostmi webu. Zdaleka se nespecializuje pouze na „tu svoji přístupnost“, naopak ji velice zdárně dává do souvislosti s jinými významnými obory, především s použitelností a SEO, ale také s marketingem, kódováním a webovou psychologií. Jako lektor se mi velmi zamlouval, zdůraznil to podstatné a každé téma do hloubky rozebral a vysvětlil na různých praktických příkladech. Opravdu člověk na svém místě.

Organizace kurzu mi také přišla dobrá, účastník odchází s jasnou představou o praktické formě přístupnosti, umí jednotlivá pravidla aplikovat a řekl bych, že jim po školení i vnitřně rozumí. Ačkoliv budu srovnávat nesrovnatelné, kdyby se tímto přístupem inspirovalo české školství, mohli bychom mít my, středoškoláci, o dva měsíce prázdnin víc. A ještě bychom toho víc uměli. Úsměv.

Pokud bych někde viděl zápory, tak v absenci širšího workshopu, ve kterém by si účastníci na několika webech mohli vyzkoušet, jestli z probírané látky něco probrali. Jednotlivým bodům přístupnosti je na druhou stranu věnováno dost času, který zahrnuje i jejich ukázky v praxi. Chybí vážně pouze nějaký sumář, kde by účastník mohl ukázat a říct: „Vidím chybu tady, tady a tady!“ Abych však Davidovi nekřivdil, on nám navrhoval, že si kurz můžeme protáhnout a zabývat se čímkoliv, co navrhneme. Nebyla síla a upřímně řečeno ani příliš potřeba – pocit dobrý.

Když to však shrnu, plusy výrazně převažují nad mínusy. Připočtěte si ještě velice uvolněnou a přátelskou atmosféru po čas celého školení a vyjde vám, že kurz se rozhodně vyplatí navštívit. David Špinar je super, informace jsou podávané zajímavou a nenudící formou a když máte štěstí, i vaši „spolustudenti“ budou příjemní lidé. Mně osobně to ke kladnému hodnocení celé akce stačí.

Radek Hulán. Jméno, které mnozí lidé trávící svůj čas velkou měrou na internetu dobře znají. Má pověst neotesaného hulváta provokujícího masy. Osobně jsem jej vždy tituloval enfant terrible, tedy jako člověka, který koná a žije bez ohledu na společenské zvyklosti. Jakkoliv jej vnímáte, stále se jedná o osobu, která vás méně či více provokuje – jeho jméno rozhodně nezapomenete. Je to internetová celebrita a na vás zbývá pouze rozhodnutí, jestli v dobrém či špatném slova smyslu.

Asi jako každého z vás mne v různých situacích, kdy jsem se s Radkem Hulánem na internetu setkal, napadaly mnohé otázky.

Proč?
Myslí to ten člověk vážně?
To je fakt tak arogantní?
Musí opravdu ponižovat toho chudáka Pepu?

Na straně druhé se vyskytly situace, kdy jsem jeho agresivní, nebo chcete-li svérázný, přístup chápal. Už jen to, že jsem dokázal pochopit některé věci, které ostatní zavrhovali, mne udržovalo a udržuje ve striktně neutrálním postoji vůči Radkovi Hulánovi. Spíš jsem přemýšlel, že mnohem více než povahový rys bude jeho chování založeno na zkušenostech. V této situaci nebylo nic snazšího, než se jej na to zeptat.

Rozhovor probíhal po emailu, proto jsou jednotlivé otázky a odpovědi poměrně rozsáhlé. V rozhovoru jsem se Radka neptal na konrétní ani uplynulé dění na internetu. Dočtete se v něm, jak Radek chápe sám sebe, svoji pozici na světě a jak vnímá své okolí. Dle mého názoru je to velice zajímavé čtení. Radkovi za rozhovor děkuji.