Misha vyvolal na Yuhůůově weblogu diskuzi o účelnosti nadměrného používání atributu title. Co říká teorie?

Atribut title a (X)HTML

HTML 4.01 o atributu title říká zhruba toto:

Atribut title nabízí doplňující informace a elementu, pro který je zadaný.

Na rozdíl od elementu TITLE, který dává informace o celém dokumentu a může se v dokumentu vyskytnout jen jednou, atribut title může vysvětlovat libovolný počet elementů.

Atribut title se zapisuje jako jiné atributy. Přiklad zápisu title v odkazu:

Příklad

Kde používat title?

Čistě technicky vzato, je možné title použít tam, kde je to normou povoleno – ne každý atribut může mít atribut title, překvapivě mnoho jich ale title může mít. Jiná věc je, kde je takové použití vhodné. Já osobně používám atribut title v těchto případech:

• vysvětlení zkratek a zkratkových slov (značky abbr a acronym) uvnitř textu (pokud nedám přednost definici dl),
• vysvětlení pojmů – až potud asi není o čem diskutovat,
• v odkazech na tomto blogu (uvádím zdroj, čas vydání, název dokumentu – dávám přednost tomu, aby byl v textu odkazu, autor – upřednostňuji autora uvádět v textu s využitím značky cite)
• upřesnění možných nejasností:
  • upřesnění odkazů (např. v navigaci nebo v případě, že by odkaz byl velmi dlouhý),
  • (vysvětlení výrazu může narušit rytmus textu, v žádném případě nesmí být text bez zobrazeného title nesrozumitelný),
• různé humorné poznámky (které si prostě nemůžu občas odpustit).

Než se do mě pustíte, tak musím upozornit, že jsem měl včera na titulce jen 3 podtečkované (takto mám nastavený styl pro title-vysvětlivky). Nejsem tedy hlasatel tečkovaného náboženství.

Vždycky je důležité, aby dokument zůstal čitelný i bez zobrazeného atributu title! V title by neměla být ukryta žádná podstatná informace. Při používání title by měl autor brát zřetel na cílovou čtenářskou skupinu.

Co lidem vadí

Špatné použití title může mnoha lidem vadit:

• Nevidomým, kterým jejich čtečka špatně interpretuje normu.
• Lidem, kteří vytisknou špatně napsaný dokument a obsah atributu title nevidí.
• Bez myši nebo podobného zařízení se na title asi nedostanete -jako autoři na to myslete.
• Někteří návštěvníci se při čtení zadrhávají (tohle ale hrozí i při přezávorkování, při zbytečně rozvitých a převsuvkovaných větách).

Atribut title je potřeba, jako ostatně vše, používat z rozmyslem a rozvahou. Je potřeba vědět, pro jakou cílovou skupinu dokument tvoříte, pro jaký účel stránka slouží. Určitě neexistuje žádné dogma a žádný jednoznačný návod, jak atribut title správně použít.

Souvislosti

• Day 14: Adding titles to links – Mark Pilgrim
• Misha o používání title – Dušan Janovský

S generátory vycpávkového textu Lorem Ipsum se roztrhl pytel. V úterý jsem informoval, že je tady další Lorem ipsum česky (od Petra Staníčka) a dnes mě Dave Shea přivedl ke generátoru Ye Olde Lorem Ipsum Generator.

Ye Olde Lorem Ipsum Generator umí oproti známému lipsum.com pár dalších věcí, mj. umí generovat výstup v téměř dvacítce jazyků a kódů.

Když se na to tak dívám, tak stejně asi zůstanu u starého dobrého lipsum.com. A asi u něj zůstane i většina jeho stávajících uživatelů. Ale co kdyby ne?

The Web Standards Project zveřejnila dotazník pro všechny webdesignéry WaSP Survey. Pokud máte zájem a pár minut času, vyplňte anglický dotazník s 10 otázkami.

Když se věci dělají s nadhledem a pochopením věci, je možné si leccos dovolit. Víťa Dlouhý říká: 3 stejně vysoké sloupce? Tabulky jsou vhodnější.

Proč ne. CSS beztabulkový layout není zlaté prase. Ten kdo navrhne čistý tabulkový layout s plným využitím CSS a zásad přístupnosti, použitelnosti apod. není prase určitě. Lecjaký kód stránky udělaný v CSS beztabulkovém layoutu vypadá jako pěkná divočina. Mnohé tabulkové layouty mohou klidně dokonale oddělit obsah od formy. Vždycky to chce najít správnou míru a zvolit přiměřené prostředky.

Dodatek

Aby nedošlo k mýlce. Nekonvertoval jsem k tabulkářům. Pořád si stojím za svým. Podle normy se tabulky používají pro tabulková data, ne pro layout (rozvržení vzhledu stránky). Zmíněný článek je velmi vhodným návodem, jak napsat tabulkový layout čistě (a hlavně čisté tabulky obecně) a jak odstranit některé jeho nevýhody. To může být užitečné např. pro autory, kteří se z různých důvodů neodhodlali přejít k čistému CSS.

Souvislosti

• Tabulkový layout nezrychlíte – Dušan Janovský
• Tabulky pro třísloupcový layout – Petr Weida dokonce věnoval obrázek mému překlepu Weida/Dlouhý
• Tabulke né – Robert Madaj

Petr Staníček zveřejnil Pseudo-Czech Dummy Text – píše o tom ve spotu Generátor „dummy“ textu. Pro ty, kterým nestačí latinské Lorem ipsum je tady, vedle Cold Blooded Turkey, další nástroj.

Souvislosti

• Co to je Lorem ipsum – Petr Staníček
• Lorem ipsum – Jiří Bureš
• asdasd – Jiří Bureš

Nedělitelná mezera

Pro zápis nedělitelné mezery se používá v (X)HTML znaková entita   (nonbreakable space, no-break space, non-breaking space apod.). Nedělitelná mezera (tvrdá mezera, pevná mezera, nezlomitelná mezera) zabrání rozdělení slov např. na konci řádku. V češtině se takto spojují nejčastěji:

• jednopísmenné předložky (k, o, s, u, v) s následným slovem (v lese),
• verzálka A s následujícím slovem,
• iniciála s příjmením (J. Novák),
• titul a jméno (Ing. Kraus)
• hodnota veličiny a její jednotka (5 V – pět voltů),
• číslo a symbol procenta, měny apod. (100 % – sto procent),
• mezi čísla v kalendářních datech (7. 6. 2004),
• ve zkratkách (s. r. o. – zkracuje různá slova) atd.

Přestože používání nedělitelné mezery je dáno typografickými pravidly a učí se už na základní škole, je používání nedělitelné mezery při tvorbě webových stránek velmi řídký jev. Podle mě jsou hlavními příčinami neznalost a lenost (jak je to u vás?). Přitom mnoho HTML editorů používání nedělitelné mezery usnadňuje. Nepsaným standardem je klávesová zkratka Ctrl+Shift+mezera.

Nedělitelná mezera a editory

HTML editory se k existenci nedělitelné mezery staví různě. Některé editory vůbec nemají klávesovou zkratku vkládající nedělitelnou mezeru. Jaká je tedy situace na poli nejrozšířenějších HTML editorů?

1st Page 2000 2.0

Nedělitelná mezera se vyvolá klávesovou zkratkou Ctrl+mezera. Je možné editovat vlastní zkratky, ale nepodařilo se mi přesvědčit dialogové okno, aby akceptovalo mezerník.

Adobe GoLive 6

V okně Layout se pro nedělitelnou mezeru používá klávesová zkratka Shift+mezera.

FrontPage 2000

Zkratka Ctrl+Shift+mezera v editačním okně správně vloží nedělitelnou mezeru do HTML kódu. V HTML editoru už ale zkratka nefunguje (co vím, tak se tak chovají i novější verze FrontPage).

FrontPage 2002

Tak tady se zase Microsoftu povedla prasárna. Po zmáčknutí Ctrl+Shift+mezera se v HTML kódu objeví tento podivný kód: v lese. Po vytvoření stránky pak nezbývá, než nahrazovat.

FrontPage 2003

Nová verze a prasárna na entou. Tajně jsem doufal, že MS napraví kiks z XP verze, ale chyba lávky. Tentokrát vám nahrazování moc nepomůže, protože FrontPage 2003 generuje pro změnu tento kód: v lese. Nevíte někdo, jak přinutit FrontPage, aby to nedělal?

HomeSite 5

Ctrl+Shift+mezera funguje na výbornou.

Macromedia Dreamweaver

Tady nemůžu sloužit. Napište do komentářů, jak nedělitelná mezera funguje v tomto editoru. Dremweaver používá standardní zkratku ve Windows Ctrl+Shift+mezera.

Mozilla Editor (Composer)

Ať jsem hledal, jak jsem hledal, tak jsem klávesovou zkratku pro nedělitelnou mezeru nenašel.

PSPad

Tento český freeware editor nemá s vkládáním nedělitelné mezery žádný problém. Ctrl+Shift+mezera funguje bez problému.

Není tvrdá jako tvrdá

Typografie je umění. Znalec ví, že není jenom jediná mezera. Pro některé nedělitelné mezery se používá zúžená mezera, která se v HTML zapisuje  . Podpora zúžené mezery je ale v IE veškerá žádná. Takže nezbývá, než zůstat u  .

Souvislosti

• Webdesignerovy poznámky z typografie – Martin Víta
• Typografie na webu v kostce – Petr Staníček
• Základní pravidla hladké sazby – Jiří Anderle
• Typografie na Internetu – Typo.cz
• Pevná mezera v HTML – Miroslav Vejlupek
• Typografie na webu – Jan Bien

Skrýt či neskrýt? O to tu běží. Teda vlastně neběží. David Špinar ve spotu Zneviditelnění obsahu v CSS a problém hlasových čteček odkazuje na množství článků, které popisují způsob skrývání textu v grafických prohlížečích pomocí CSS a to, jak tyto skryté texty interpretují hlasové čtečky. Použití display: none nebo visibility:hidden nemusí být to pravé ořechové.

Jak tedy správně schovávat obsah? Tak na tuto otázku najdete ve zmíněném spotu odpověď taky. David nabízí dvě možnosti:

• Metoda pomocí vlastnosti text-indent se zápornou hodnotou.
• Metoda absolutně pozicovaného prvku vysunutého mimo obrazovku.

Mí Pražané mi rozumějí, prohlásil prý Wolfgang Amadeus Mozart. Měl k tomu jistě dobrý důvod. Hudba je univerzální vyjadřovací prostředek a Mozart byl génius. Autor webu to má určitě těžší. Přinejmenším totiž není žádný génius.

Každý autor by měl znát cílovou skupinu, pro kterou tvoří. Té musí přizpůsobit formu a hlavně obsah sdělení. Jinak nemůže očekávat úspěch. Na webu navíc těžko zajistíte, aby na vaše stránky přišel člověk, který nepatří do cílové skupiny, pro kterou jste stránky vytvořili. V tomhle to měl Mozart jednodušší. Do Stavovského asi nešel kdejaký hej nebo počkej.

Příklady táhnou

Jako příklad uvedu stránku, ze které uživatelé stahují komprimované instalace jedné aplikace. Na poměrně jednoduché stránce se nachází tento text:

Nejprve musíte stáhnout soubor s instalačním balíkem. Po stažení souboru archívu přejděte do složky na Vašem počítači, kam jste soubor uložili a rozbalte jej.

• Spusťte instalační program, který Vás provede zbytkem instalace.
• Pokud se jedná o upgrade, postupujte podle pokynů v přiložených textových souborech.

Aktuální verze

conVERTER 1.41

Download upgrade

conVERTER 1.40

Download instalace

Zkušený tvůrce webu najde v uvedeném textu hned několik chyb:

• Neznámé pojmy – co je instalační balík, co je soubor archivu a co je download a upgrade?
• Nejednotná terminologie – text odkazů v ukázce by měl odpovídat ostatním termínům na dané stránce a celém webu.
• Chybějící informace – ne každý ví, že ve stavovém řádku je u odkazů zobrazován cíl odkazu, podle kterého lze poznat typ souboru. K odkazům je nanejvýš vhodné doplnit typ stahovaných souborů a jejich velikost.

Možná namítnete, že každý uživatel PC ví, co zmíněné pojmy znamenají. Ale nenechejte se mýlit. Zrovna včera jsem dostal e-mail, kde mě nešťastný uživatel žádá o pomoc (ptá ce střeba co mám stáhnout dříve: instalační balík nebo soubor archívu). A já se mu nedivím a ani si o něm nic špatného nemyslím. Nepatřím k těm, kteří by ze svých nedostatků vinili neznalé uživatele.

Trnitá je cesta k porozumění

Myslete především na ty, kteří na vaše stránky chodí. Nejedná se totiž jenom o členy cílové skupiny. Na stránky přichází i lidé, kteří nejsou znalostně na úrovni daných stránek. Pomozte jim třeba tak, že stránky budou:

• Jednoduché – vyhýbejte se dlouhým a složitým větám. Jděte přímo k jádru věci.
• Přehledné – volte přiměřený design stránek, text dělte do odstavců, používejte nadpisy.
• Jednoznačné – používejte jednotné pojmy, podtrhávejte odkazy, nepodtrhávejte texty, které odkazy nejsou.
• Srozumitelné – piště česky (kde je možné užít českého slova nepoužívejte slova cizí).

A je toho samozřejmě víc. Ale odměnou může být vědomí, že mí návštěvníci mi rozumějí.

Brian Williams v novém A List Apart 182 publikoval další článek na téma stínování: Onion Skinned Drop Shadows. Přidává také malou galerii stínů.

Derek Featherstone v článku Print It Your Way přidává návod, jak vytvořit tiskovou verzi webu pomocí CSS. Pro znalce stará vesta. Ti, kteří pořád tvoří samostatné tiskové stránky, by si měli článek určitě přečíst.

David Špinar dnes na Lupě zveřejnil zajímavý článek Jak budou vypadat pravidla přístupného webu pro veřejnou správu? Článek je zajímavý. Poodkrývá i zákulisí vzniku ptováděcího předpisu. Obsah se mi líbí a se vším, co je v návrhu napsané, v podstatě souhlasím. Úředníci třeste se, autoři oprašte znalosti norem, občané jásejte! Nebo to zase bude jinak?