Webdesign s webovými standardy

CYAN

MAGENTA

YELOW

CYAN

BLACK

MAGENTA

E N C Y K L O P E D I E

ZONER software, s.r.o. významný producent software v oblasti digitální fotografie, počítačové grafiky a multimédií, poskytovatel internetových služeb, souvisejících s prezentací na internetu a e-komercí, a nakladatelství odborné literatury.

Kniha by vás měla vybavit znalostmi, které jsou potřebné k tomu, abyste mohli používat řešení založená na webových standardech ve svých vlastních projektech. S její pomocí budete schopni činit lepší volby v rámci kódu a stylu.

Z obsahu ve stručnosti vybíráme:

- Tvorba nadpisů a citací

- Použití kaskádových stylů

- Praktické využití tabulek

- Styly pro tisk

- Webové formuláře

- Tvorba CSS layoutů

- Prvky <strong> <em> a další

- Kaskádové styly pro text

- Odkazy v HTML

- Překlápění obrázků a CSS

E N C Y K LO P E D I E W E B D E S I G N E R A Pod tímto logem vycházejí publikace určené pro každého, kdo se zajímá o tvorbu webových stránek. Od ryze praktických příruček a průvodců až po komplexní publikace o všem, co potřebuje webdesignér při každodenní práci. Na slevy, které můžete získat, a vydavatelský plán, v němž vedle knih domácích odborníků najdete celou řadu titulů světově uznávaných autorů, se informujte na adrese vydavatelství.

Věrným čtenářům je určen výhodný PRÉMIOVÝ PLUS PROGRAM.

www.zoner.cz Fotografie z nabídky fotobanky HELLER.CZ

- Minimalizace velikosti kódu

© Foto: Jiří Heller, www.heller.cz

- Práce se seznamy

KATALOGOVÉ ČÍSLO: ZR416

ISBN 80-86815-15-3

Webdesign s webovými standardy

Publikace, kterou držíte v rukou, představuje praktickou kuchařku webových standardů. Respektovaný webový designér Dan Cederholm v ní bez zbytečné omáčky vysvětluje, jak využít webové standardy (za které je zodpovědné konsorcium W3C) pro vytvoření estetických, rychle se načítajících a současně platných (validních) webových stránek. V každé kapitole autor srovnává běžné metody webového designu s nejnovějšími metodami založenými na respektování webových standardů.

WEBDESIGN s webovými STANDARDY • Co jsou to webové standardy a jak je využívat při tvorbě stránek.

• Úskalí tvorby layoutů založených na XHTML a CSS.

• Práce se seznamy, nadpisy

a tabulkami založená na respektování standardů W3C

• Správné použití formulářů, citací a odkazů.

• Velké množství praktických postupů využitelných v praxi.

© Foto: Jiří Heller

Zoner Press tel.: 532 190 883 fax: 543 257 245 e-mail: knihy@zoner.cz http://www.zonerpress.cz ZONER software, s.r.o., Koželužská 7, 602 00 Brno

web_standards.indd 1

YELOW

W E B D E S I G N E R A

Dan Cederholm

Webdesign s webovými standardy

MAGENTA

BLACK

ENCYKLOPEDIE WEBDESIGNERA

Dan Cederholm

CYAN

YELOW

BLACK

Dan Cederholm

www.zonerpress.cz 9 7 8 8 0 8 6

8 1 5 1 5 2

CYAN

MAGENTA

YELOW

BLACK 17.12.2004 16:53:47

Webdesign s webovými STANDARDY

WEBDESIGN s webovými

STANDARDY

Dan Cederholm

Original English language edition entitled WEB STANDARDS SOLUTIONS: THE MARKUP AND STYLE HANDBOOK, 1st edition, June 2004, 1-59059-381-2, by Cederholm, Dan; published by Apress L.P., 2560 Ninth Street, Suite 219, Berkley, CA 9 47 10, USA. Copyright © 2004 by Apress L.P. Czech language edition Copyright © 2004 ZONER software s.r.o.

All rights reserved. No part of this book may be reproduced, stored in a retrieval system or transmitted in any form or by any means without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

CZECH language edition published by ZONER software s.r.o. Copyright © 2004 Autorizovaný překlad anglického vydání nazvaného WEB STANDARDS SOLUTIONS: THE MARKUP AND STYLE HANDBOOK, první vydání, červen 2004, 1-59059-381-2, autor Cederholm, Dan; vydal Apress L.P., 2560 Ninth Street, Suite 219, Berkley, CA 9 47 10, USA. Copyright © 2004 by Apress L.P. České vydání Copyright © 2004 ZONER software s.r.o.

Všechna práva vyhrazena. Žádná část této publikace nesmí být reprodukována, ukládána na záložních systémech nebo předávána žádnou formou nebo způsobem bez přechozího písemného svolení vydavatele s výjimkou stručných citací zařazených v recenzích nebo posudcích. České vydání vydal ZONER software s.r.o.

Copyright © 2004.

Webdesign s webovými standardy Autor: Dan Cederholm Copyright © ZONER software s.r.o. Vydání první v září 2004. Všechna práva vyhrazena.

KATALOGOVÉ ČÍSLO: ZR416 Zoner Press ZONER software s.r.o.

Koželužská 7 602 00 Brno Překlad: Jaroslav Blažek Odpovědný redaktor: Miroslav Kučera DTP: Miroslav Kučera © Cover foto: Jiří Heller HELER.CZ s.r.o. www.heller.cz © Cover a layout: Ing. Pavel Kristián Informace, které jsou v této knize zveřejněny, mohou byt chráněny jako patent. Jména produktů byla uvedena bez záruky jejich volného použití. Při tvorbě textů a vyobrazení bylo sice postupováno s maximální péčí, ale přesto nelze zcela vyloučit možnost výskytu chyb.

Vydavatelé a autoři nepřebírají právní odpovědnost, ani žádnou jinou záruku za použití chybných údajů a z toho vyplývajících důsledků.

Všechna práva vyhrazena. Žádná část této publikace nesmí být reprodukována, ani distribuována žádným způsobem, ani prostředkem, ani reprodukována v databázi, či na jiném záznamovém prostředku, či v jiném systému bez výslovného svolení vydavatele, s výjimkou zveřejnění krátkých částí textu pro potřeby recenzí.

Veškeré dotazy týkající se distribuce směřujte na: Zoner Press ZONER software s.r.o.

Koželužská 7 602 00 Brno tel.: 532 190 883 fax: 543 257 245 e-mail: knihy@zoner.cz http://www.zonerpress.cz

ISBN 80-86815-15-3

5

Přehled část I

Plné využití možností značkovacího jazyka

21

KAPITOLA

1

Práce se seznamy . . . . . . . . . . . . . . . . . . . . . . . . . . .

23

KAPITOLA

2

Tvorba nadpisů . . . . . . . . . . . . . . . . . . . . . . . . . . . .

37

KAPITOLA

3

Jsou tabulky nástrojem ďábla? . . . . . . . . . . . . . . . . . . . . .

49

KAPITOLA

4

Citace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

69

KAPITOLA

5

Webové formuláře . . . . . . . . . . . . . . . . . . . . . . . . . .

79

KAPITOLA

6

Prvky <strong> <em> a další . . . . . . . . . . . . . . . . . . . . . .

97

KAPITOLA

7

Odkazy v HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . 111

KAPITOLA

8

Další typy seznamů . . . . . . . . . . . . . . . . . . . . . . . . . . 123

KAPITOLA

9

Minimalizace velikosti kódu . . . . . . . . . . . . . . . . . . . . . . 135

část II

Styly jednoduše a efektivně

149

KAPITOLA

10

Použití kaskádových stylů . . . . . . . . . . . . . . . . . . . . . . . 151

KAPITOLA

11

Styly pro tisk . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165

KAPITOLA

12

Tvorba CSS layoutů . . . . . . . . . . . . . . . . . . . . . . . . . . 175

KAPITOLA

13

Kaskádové styly pro text . . . . . . . . . . . . . . . . . . . . . . . . 199

KAPITOLA

14

Nahrazování obrázkem . . . . . . . . . . . . . . . . . . . . . . . . 211

KAPITOLA

15

Styl pro prvek <body> . . . . . . . . . . . . . . . . . . . . . . . . . 229

KAPITOLA

16

Vaše další kroky . . . . . . . . . . . . . . . . . . . . . . . . . . . 237 Rejstřík . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243

7

Obsah

část I KAPITOLA

KAPITOLA

Předmluva O autorovi O technickém recenzentovi Poděkování

14 15 15 16

Úvod Co to jsou webové standardy?

Proč webové standardy?

Proč XHTML? Strukturovaný kód Počátky knihy Uspořádání knihy Sdělte nám svůj názor

17 17 17 18 19 19 20 20

Plné využití možností značkovacího jazyka 1

2

21

Práce se seznamy . . . . . . . . . . . . . . . . . . . . . . . . . . .

23

Jdeme nakupovat Čas na kvíz Metoda A: Zlom pomocí značky <br /> Metoda B: Odrážka Metoda C: Přiblížení Metoda D: Dobře zabalený dáreček Shrnutí Něco navíc Odrážky a zase odrážky Vlastní odrážky jsou nápaditější Využití seznamů pro navigaci Upravené navigační záložky

23 24 24 25 26 27 28 29 29 30 31 34

Tvorba nadpisů . . . . . . . . . . . . . . . . . . . . . . . . . . . .

37

Jaký je nejlepší způsob vytvářenínadpisu dokumentu?

Metoda A: Smysluplná?

Metoda B: Kombinace <p> a <b> Metoda C: Styl a podstata Shrnutí Něco navíc Jednoduché formátování nadpisu Přidání pozadí

37 37 38 39 41 42 42 43

8

Webdesign s webovými standardy Vyměnitelné ikony Snadné úpravy Efekt chameleona

KAPITOLA

KAPITOLA

KAPITOLA

3

4

5

45 45 46

Slovo závěrem

48

Jsou tabulky nástrojem ďábla? . . . . . . . . . . . . . . . . . . . . .

49

Dokonale tabulkové Tabulka, kterou by mohli tolerovat všichni Přidání souhrnu Hlavička(y) tabulky Vztah hlavičky a samotných dat Použití atributu abbr Prvky <thead> <tfoot> a <tbody> Jsou tabulky nástrojem ďábla?

Něco navíc Vytvoření mřížky Pryč s trhlinami Uživatelské přizpůsobení hlaviček Hlavičky s obrázkem v pozadí Přidělení ikon prvkům ID Slovo na závěr

49 50 52 53 54 56 57 59 59 59 60 62 63 65 68

Citace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

69

Metoda A: Postrádá význam Metoda B: Co atribut class?

Metoda C: Nejlepší je <blockquote> Šroubovák na zatlučení hřebíku Shrnutí Něco navíc Citát pro zvědavé oči Citáty uvnitř kódu Styl pro prvek <blockquote> Pár slov na závěr

69 70 70 71 71 72 72 72 73 78

Webové formuláře . . . . . . . . . . . . . . . . . . . . . . . . . .

79

Jaké máme možnosti při vytváření formuláře?

Metoda A: Použití tabulky Metoda B: Bez tabulky, ale úzké Metoda C: Jednoduchá a přístupnější Metoda D: Definování formuláře Shrnutí

79 79 80 81 84 86

9

Obsah

KAPITOLA

6

Něco navíc Báječný tabindex Atribut accesskey pro navštěvované formuláře Styly pro formuláře Několik slov na závěr

87 87 88 89 96

Prvky <strong>, <em> a další . . . . . . . . . . . . . . . . . . . . .

97

Přístup prezentační vs. přístup strukturní Proč je <strong> a <em> lepší než <b> a <i>?

A co <em>?

Pouze tučné nebo kurzívu prosím Tučné písmo i kurzíva Shrnutí Něco navíc Prvky fráze Design s prvkem <cite> Prvky <abbr> a <acronym> Prvek <code> Prvek <samp> Prvek <var> Prvek <kbd> Slova na závěr KAPITOLA

7

Odkazy v HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . 111 Odkaz na konkrétní část stránky Metoda A: Prázdné name Metoda B: Vše je ve name Metoda C: Zbavte se name Metoda D: Vše v jednom Sdílení jmen Shrnutí Něco navíc Atribut title Stylizování odkazů Zvedáme kotvy

KAPITOLA

8

97 98 99 99 101 102 102 103 103 105 107 108 108 109 109

111 111 112 113 114 115 115 116 116 117 121

Další typy seznamů . . . . . . . . . . . . . . . . . . . . . . . . . . 123 Nejlepší způsob zápisu očíslovaného seznamu položek Metoda A: Neuspořádaný pořádek Metoda B: Setříděný seznam Nejlepší způsob vytváření množinytermínů a popisků Metoda A

123 124 125 127 127

10

Webdesign s webovými standardy Metoda B Shrnutí Něco navíc Označit jednotlivé části Uživatelská čísla Přidání čísel k CSS Výsledky Slovo závěrem

KAPITOLA

9

Minimalizace velikosti kódu . . . . . . . . . . . . . . . . . . . . . . 135 Mimimalizace kódu stránek vytvářených pomocí webových standardů Potomci selektorů Metoda A: class – práce všeho druhu Metoda B: Přirozený výběr Nepotřebný <div> Metoda A: Šikovný <div> Metoda B: Zbavme se <div> Příklady navíc Shrnutí Něco navíc Základní kód Přidání stylu Uživatelské odrážky Přidání okraje Závěr

část II KAPITOLA

Styly jednodušea efektivně 10

128 130 130 131 131 132 133 134

135 136 136 137 140 140 140 141 141 141 142 143 144 145 147

149

Použití kaskádových stylů . . . . . . . . . . . . . . . . . . . . . . . 151 Jak se na dokument aplikuje CSS Metoda A: Prvek <style> Metoda B: Externí seznamy stylů Metoda C: @import Sloučení metod B a C za účelem vytvoření vícenásobných seznamů stylů Styly lo-fi a hi-fi Osvojte si kaskády Metoda D: Styly uvnitř kódu Shrnutí Něco navíc Alternativní styly Závěr

151 151 153 153 156 157 157 159 160 161 161 164

11

Obsah KAPITOLA

11

Styly pro tisk . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165 Jak specifikovat styly pro tisk?

Typy médií Dva způsoby zacílení Metoda A: Atribut media Metoda B: @media nebo @import Povoleno více hodnot Oddělení stylu screen od stylu print Vytvoření tiskového stylu Shrnutí

KAPITOLA

12

Tvorba CSS layoutů . . . . . . . . . . . . . . . . . . . . . . . . . . 175 Jak mohu využít CSS k vytvoření dvousloupcového rozvržení?

Metoda A: "Plovoucí" postranní lišta Metoda B: Dvojité plovoucí sloupce Metoda C: Plovoucí hlavní obsah Metoda D: Určení polohy Shrnutí Něco navíc Problém s obdélníkovým modelem Falešné sloupce Balíme to

KAPITOLA

13

14

175 176 181 182 185 192 192 192 196 198

Kaskádové styly pro text . . . . . . . . . . . . . . . . . . . . . . . . 199 Jak vylepšit hypertextové odkazy? Časy se mění Změna výšky řádku Všechno v rodině Prostrkání (nebo též proložení) znaků Iniciálky Zarovnání Transformace textu Malé verzálky – kapitálky Odsazení odstavce Shrnutí

KAPITOLA

165 166 166 166 167 167 168 169 173

199 200 200 201 202 204 205 207 208 209 210

Nahrazování obrázkem . . . . . . . . . . . . . . . . . . . . . . . . 211 Jak lze využít CSS k nahrazení textu obrázky Žádné dokonalé řešení neexistuje Používat s obezřelostí Metoda A: Náhrada obrázku podle Fahrnera Kód

211 211 212 212 212

12

Webdesign s webovými standardy Značka navíc CSS vstupuje do hry Přiřadit pozadí Výhody Nevýhody Zvažte pro a proti

Metoda B: Nahrazení obrázkem – metoda Leahy/Langridge Kód a CSS Trápení s obdélníkovým modelem (Box model) Nevýhody Metoda C: Pharkova metoda Kód a CSS Pořád tomu něco chybí Shrnutí Něco navíc Prohození loga Příklad Dvě loga CSS Jak realizovat odkaz Výsledky Přístupné rollovery s obrázkem na záložkách Problém Řešení Kód: všechny je budeme spravovat pomocí jednoho seznamu Jeden obrázek tři stavy CSS: A tady začíná magie Výsledky Proč to použít?

Počkat, text není v měřítku!

Kompatibilita Celkové shrnutí KAPITOLA

15

213 213 213 214 214 215

215 215 216 216 217 217 217 218 219 219 219 220 220 221 221 222 222 223 223 224 224 226 226 226 227 227

Styl pro prvek <body> . . . . . . . . . . . . . . . . . . . . . . . . . 229 Dva, někdy tři sloupce Struktura kódu a stylu Náš <body> má třídu Nejde jen o sloupečky "Jste zde" Navigační seznamy Určení částí

229 230 232 233 234 234 235

13

Obsah Magické CSS Shrnutí KAPITOLA

16

235 236

Vaše další kroky . . . . . . . . . . . . . . . . . . . . . . . . . . . 237 Kam budou směřovat vaše další kroky?

Organizace a publikace Vlivné a inspirativní weblogy Knihy

237 237 239 241

Rejstřík . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243

14

Webdesign s webovými standardy

Předmluva Ve svých rukách držíte kuchařku webových standardů. Jasnými příklady a bez zbytečných slov navíc v ní designér Dan Cederholm ukazuje, jak využít standardy k vytvoření krásných a použitelných rozhraní přístupných všem. Dan tu není proto, aby nějak kreativně nebo obchodně propagoval na standardech založený webový design. To už udělali jiní. Upřímně řečeno, pokud jste se obtěžovali vybrat si tuto knihu a prolistovat ji, už pravděpodobně znáte výhody, které design založený na standardech skýtá z hlediska přístupnosti, dlouhověkosti a obchodu. Nepotřebujete další přehled, ani povzbuzení – potřebujete praktický pohled na komponenty s příklady z reálného světa. Právě to tato kniha obsahuje.

Realistickým přirozeným jazykem – stejným, jaký naleznete na velkém počtu webových stránek – zkoumá Dan univerzální prvky webových serverů jako je rozdělení stránek a navigace. Za použití učební metody, kterou již dříve používal na stránkách SimpleBits.com ukazuje, jak webové standardy usnadňují vytváření různých úprav (když vás šéf nebo klient požádá o změnu na poslední chvíli), a co je nejdůležitější – snadnější použití těchto univerzálních komponent ve stránkách. Zde je jeden jednoduchý příklad toho, jak tato kniha funguje a proč stojí za váš čas a peníze: Webový server, který navrhujete, vyžaduje na svých primárních stránkách třísloupcový layout a dvousloupcový layout na stránkách s vnitřním obsahem. Přístup ze staré školy by byl sestavit dvě hlavní šablony v podobě dvou vzájemně nesouvisejících formátovacích tabulek v HTML. Moderní přístup doporučený Konsorciem World Wide Web (World Wide Web Consortium, W3C) a praktikovaný dnešními designéry řídícími se standardy, je strukturovat obsah s minimálním sémantickým kódem XHTML a pro samotný layoutu použít kaskádové styly (Cascading Style Sheets, CSS).

Jako zkušený webový designér můžete přirozeně předpokládat, že budete muset zhotovit dvě rozdílné šablony XHTML a dva různé seznamy stylů, abyste mohli vyprodukovat dvou a třísloupcový design, ale jak ukazuje tato kniha, k vytvoření obou designů postačí jediná struktura v XHTML a jediný seznam stylů. Přepnutí z jednoho rozložení do druhého pak není složitější než použití atributu class na značku <body>.

Tato knížečka je naplněna podobnými postupy a metodami, které jsem právě uvedl – metodami, které zvýší vaši výkonnost a zjednoduší vaši práci a současně povzbudí vaši tvořivost. Některé z nich vymyslel Dan, jiné pocházejí z líhnoucího se tělesa moderních praktik vyvinutých předvojem webových designérů tvořících na základě standardů. Znalosti zde obsažené rozhodně potřebujete. To, jak je nejlépe ovládnout, je už jenom ve vašich rukách. Bavte se.

Jeffrey Zeldman

15

O autorovi Dan Cederholm je oceňovaný webový designér konzultant a autor, který se specializuje na navrhování a vytváření stránek za použití webových standardů.

Během roku 2003 se Dan proslavil svými designy webových stránek Fast Company and Inc., pro které použil metody vyhovující standardům a revolučních technik CSS. Dan také spravuje populární weblog SimpleBits, do kterého přispívá svými články a komentářemi ohledně webových technologií a života vůbec. Jeho poradenská firma téhož jména se zaměřuje na uplatňování metod uvedených v této knize při vytváření simplistických a atraktivních rozhraní.

Na konferencích jako je třeba SXSW Interactive (Austin Texas USA) se Dan dělí o svůj jednoduchý přístup k webovému designu a vývoji. Přitom propaguje kód založený na standardech a techniky stylizace, které sám shromáždil.

Bydlí ve městě Salem (Massachusetts, USA) spolu se svou ženou Kerry, dvěma kočkami a jedním gekonem.

O technickém recenzentovi Drew McLellan je vývojář webových aplikací a autor. Bydlí na západ od Londýna. Svoje dny tráví v čele úspěšné kreativní agentury zabývající se vývojem webu a v noci píše a rediguje technické knihy. Náměty jeho práce se zabývá osobní webový server (www.allinthehead.com). Drew je autor knihy Dreamweaver MX Web Development (New Riders Publishing). Publikuje technické články na stránkách jako např. A List Apart (www.alistapart.com) a Macromedia (www.macromedia.com). Je členem uskupení Web Standards Project (www.webstandards.org), pro které zajišťuje aktivity v oblasti public relations a různé další služby.

Až vyroste, chtěl by být kosmonautem.

16

Webdesign s webovými standardy

Poděkování Jsem velice vděčný následujícím lidem, bez kterých bych knihu nenapsal: Chris Mills – od začátku mi pomáhal, vedl mne přes všechna úskalí a zajistil, že se nakonec celá kniha dala dohromady.

Drew McLellan – dával mi pěkné a dobré rady vedení a velmi mi pomohl i prakticky.

Všichni od Apress/friends of ED, kteří na knize tvrdě pracovali, obzvláště Sofia Marchant, Ami Knox a Ellie Fountain.

Jeffrey Zeldman – bez něj bych se k psaní knihy vůbec neodhodlal a jemu dluží webové standardy více než komukoliv jinému.

Douglas Bowman – za to, že projevil bezvadnou inspiraci pro design a dokázal, že layout vytvořený pomocí CSS je schopný skvělého fungování i na rozsáhlých komerčních stránkách.

Dave Shea – za osazení zahrady a dokázání, že design založený na CSS je schopen víceméně všeho, co po něm žádáme.

Jason Kottke – za inspirující otázky. Čtenáři SimpleBits – za cennou diskusi, která podpořila napsání této knihy.

Eric Meyer, Christopher Schmitt, Tantek Çelik, Molly Holzschlag, Todd Dominey, Mike Davidson, Ryan Carver, Dan Rubin, D. Keith Robinson, Mark Pilgrim, Joe Clark, Craig Saila, Nick Finck, Owen Briggs, Simon Willison, Ian Lloyd, Dan Benjamin – to jsou všechno lidé, jejichž online a "offline" snahy v oblasti webových standardů pomohly tisícům lidí, včetně mě. Členové skupiny Web Standards Project – jejich vzdělávání je neustále přínosem pro webové designery a vývojáře z celého světa.

Moji bývalí kolegové z webového týmu při Fast Company and Inc. – obzvláště Rob Roesler, který mi poskytl velikou podporu; David Searson, od kterého jsem se naučil více, než si kdy dokáže sám představit; Bob Joyal – totéž; Paul Maiorana – že se smířil s mojí cestovatelskou mánií; Daigo Fujiwara; Paul Cabana; Nick Colletta; Heath Row; Irina Lodkin; Carole Matthews; Becca Rees; Alex Ashton; Peter Wilkinson; a také Linda Tischler, která mne přivedla do FC. Moje rodina a přátelé a ze všeho nejvíce – moje žena Kerry, pro její neúnavnou podporu, ať už se dělo cokoliv.

A děkuji také tobě – čtenáři této knihy.

17

Úvod Tato kniha je určena k tomu, aby vás vybavila takovými prostředky, které jsou potřebné k tomu, abyste mohli ve svých webových projektech použít vlastní řešení na základě webových standardů a získali schopnost učinit lepší rozhodnutí v rámci kódu a stylu. V každé kapitole budeme srovnávat běžné postupy webového designu a pokusíme se zodpovědět na otázku, proč je jeden způsob lepší než jiný. Prozkoumáním těchto srovnání budeme schopni použít pro úlohy – v rámci našich projektů – ty nejlepší nástroje. Ze všeho nejdříve se ale musíme ujistit, že si rozumíme – tato kniha je naplněna různými akronymy, bloky kódu a koncepty, které jsou možná pro někoho cizí.

Nejdříve si ale popovídejme o webových standardech.

Co to jsou webové standardy?

Citujme World Wide Web Consortium (www.w3.org/Consortium/): "Konsorcium World Wide Web bylo vytvořeno v říjnu 1994 za účelem plného využití potenciálu World Wide Web pomocí vývoje společných protokolů, které prosazují jeho rozvoj a zajišťují jeho univerzálnost.

W3C je organizace s okolo 400 členy na celém světě a pro své příspěvky k růstu Webu si získala mezinárodní věhlas."

W3C, které založil Tim Berners-Lee, je zodpovědné za webové standardy, které tvoří dnešní Web. V knize se budeme zabývat primárně dvěma ze standardů: XHTML (eXtensible HyperText Markup Language), který představuje sématickou verzi HTML 4.01 společně se syntaxí XML; a CSS (Kaskádové styly; Cascading Style Sheets), které jsou používány ke stylizaci webových stránek.

Proč webové standardy?

Včera jsem si koupil žaluzie. Změřil jsem okno, šel jsem do obchodu, vytáhl jsem 60cm žaluzie z police a přinesl jsem je domů. Pasují dokonale. Minulý rok jsme si s manželkou koupili novou myčku na nádobí. Vyhodili jsme starou a objednali novou. Když nový model, přišel dokonale pasoval na místo starého. Tím se snažím říci pouze toto – vylepšování domácnosti je snazší, existují-li standardy. Někdo jako já pak může klidně vkráčet do obchodu a koupit nějakou nádrž do drtiče odpadků, přičemž nádrž bude mít s velikou pravděpodobností rozměry, které budou pasovat. Také mohu zakoupit novou kliku ke dveřím a v devíti případech z deseti se bude ke dveřím hodit bez větších úprav.

Dopředu dané standardní míry usnadňují život lidem, kteří budují a spravují domy. Když nový majitel potřebuje modernizovat nebo spravovat svůj dům, existující standardy mu opravu nebo vylepšení velmi usnadní.

Ne vždy tomu tak ovšem bylo. Ne všechny domy postavené před dvacátým stoletím spojovaly nějaké standardy. To ovšem neznamená, že domy postavené bez standardů by byly špatnými domy. Pouze to znamená, že aktualizace, oprava nebo údržba těchto domů vyžaduje nějakou práci navíc.

Lidé si často kupují staré domy a renovují je. Jakmile dokončí tvrdou dřinu s renovací domu, může vlastník využít všech výhod standardních velikostí a rozměrů a údržba domu je tak něj snazší.

18

Webdesign s webovými standardy

Tato kniha ale není o domech. Předcházející analogii ale lze velmi snadno aplikovat na Web – použitím standardů na našich webových stránkách značně usnadníme jejich údržbu. Naši kolegové weboví designéři a vývojáři se v nich budou moci mnohem lépe orientovat a chápat jak, jsou stránky strukturovány a stylizovány.

Historicky se designéři a vývojáři spoléhali na nafouklý kód, aby docílili designů, které dosud zaplavují dnešní Web. Vnořené tabulky do hloubky tří úrovní a více, použití průhledných obrázků formátu GIF pro vytvoření na pixel přesných layoutů atd. – to vše bylo po léta normou, nicméně, se zvýšením podpory standardů v oblíbených prohlížečích dosáhla schopnost kombinovat hubený strukturovaný kód a CSS takové úrovně, že být v souladu se standardy už není synonymem nudného designu.

Trend se mění a ti, kdo si uvědomili výhody webových standardů, získají před ostatními z branže webového designu a vývoje velký náskok. K tomu zcela jistě dojde.

Pochopením a používáním standardů získáte přístup k následujícím výhodám:

• Redukce rozsahu kódu – Méně kódu znamená rychlejší stránky. Méně kódu také znamená více kapacity na serveru, což zase znamená méně peněz vynaložených na místo na serveru a na šířku přenosového pásma.

• Větší oddělení obsahu od vzhledu – Použitím CSS ke kontrole designu webového serveru se usnadní aktualizace a případné změny designu. Změny v rozsahu celých webových serverů lze učinit okamžitě – pouhou aktualizací jediného seznamu stylů.

• Vylepšená přístupnost – Webové standardy nám umožňují dosáhnout zobrazení na největším možném počtu prohlížečů a zařízení. Obsah lze snadno přečíst v jakémkoliv prohlížeči, mobilním telefonu, PDA nebo pomocí jakéhokoliv pomocného softwaru.

• Dopředná kompatibilita – Vytvářením stránek za pomoci webových standardů zabezpečujete jejich čitelnost v budoucnosti. Každá z předcházejících výhod je dostatečným důvodem pro použití webových standardů a tato kniha ukáže, jak otřást vašimi zlozvyky. Najdete v ní také tipy a triky pro vytvoření atraktivních designů založených na standardech.

Proč XHTML? Ukázky kódu v této knize jsou vytvořeny v XHTML (eXtensible HyperText Markup Language). Technicky vzato, XHTML je přeformulované HTML 4 v XML. Co to znamená? No, HTML snad znáte, ne?

Tak XHTML je prakticky totéž, jenom s několika pravidly navíc.

Citujme ještě jednou W3C (www.w3.org/TR/xhtml1/#xhtml): "Rodina XHTML je dalším krokem ve vývoji Internetu. Přestoupením na XHTML ještě dnes spokojení vývojáři vstoupí do světa XML spolu se všemi jeho průvodními přínosy. Přitom si mohou zůstat jisti jak zpětnou, tak i dopřednou kompatibilitou svých obsahů."

To je dobrá startovní pozice – dopředná kompatibilita. Když dnes vytvoříme webové stránky pomocí XHTML, činíme kroky k zajištění kompatibility těchto stránek s prohlížeči a ostatními zařízeními budoucnosti.

Úvod

19

XHTML je také navrženo tak, aby bylo čitelné tím největším počtem prohlížečů zařízení a softwaru.

Kód napsaný v XHTML má lepší šance na to, že bude pochopen, ať už jej bude číst cokoliv.

Pravidla ale existují.

Ve světě XHTML existují pro to, co je považováno za platný kód, mnohem přísnější pravidla. Všechny značky a atributy musí být psány malými písmeny, všechny atributy musí být uzavřeny uvozovkami a všechny značky musí být nakonec uzavřeny. To je několik pravidel zděděných z XML – tato pravidla jsou pro vás dobrá.

Lpění na přísnějších pravidlech, které určují správné a platné XHTML, vede k tomu, že designéři a vývojáři mohou snadněji ladit kód (což je obzvláště užitečné v případě, kdy více autorů pracuje na jednom kódu), přičemž jejich stránky budou mít lepší šanci zobrazit se správně v prohlížečích, které také rozumějí standardům. V této knize budeme pro všechny naše příklady používat XHTML.

Strukturovaný kód V knize budu možná často používat slovo "sémantický". Občas budu také používat i termín "strukturovaný kód". Tyto dva termíny jsou navzájem zaměnitelné. Když mluvím o sémantice, chci tím říci, že usilujeme o použití pouze takových značek, které implikují nějaký význam, nikoliv instrukce pro vzhled.

Zpracováváte seznam položek? Pak jej také jako seznam položek do kódu zapište. Nebo snad chcete uvést tabulku dat? Strukturujte ji podle toho. Strukturováním webových stránek sémantickým kódem se blížíme k oddělení obsahu od vzhledu. A díky tomu budou mít naše stránky větší naději, že budou správně (tj. tak, jak bylo zamýšleno) pochopeny větší škálou prohlížečů a zařízení.

Jak jsem již zmínil, v historii se weboví designéři spoléhali na vnořené tabulky s výplňovou grafikou, aby dosáhli layoutu sedícího na pixel přesně. Prvek <table> byl použit k umístění každé komponenty webové stránky, přičemž přidával obludné množství nepotřebného kódu. A to všechno vedlo k vytvoření stránek, které jsou prakticky nečitelné pro všechny, kteří používají textové prohlížeče, zařízení s malou obrazovkou nebo nějaký podpůrný software. Nafouklý kód doslova dusil (a stále dusí) celý Web. Ve všech kapitolách této knihy vysvětlím, jak pomáhá sémantický kód v zeštíhlování stránek, které se současně stávají přístupnější, a které lze snadno stylizovat pomocí CSS.

Počátky knihy Na začátku bylo vše docela nevinné. Uvažoval jsem o tom, že na své osobní stránky umístím jednoduchý kvíz. Měl obsahovat otázky s mnoha volbami, přičemž každá z odpovědí by vedla ke stejnému nebo podobnému výsledku. Proč je jedna metoda lepší než druhá? Taková měla být skutečná odpověď na otázky kvízu.

Cílem kvízu bylo ukázat výhody a nevýhody každé metody. Také bylo konstatováno, že ani jednu z více metod, které jsou tvořeny platným kódem, nelze vždy označit za nejlepší řešení. Čtenáři mohli přidat svůj komentář a sdělit svůj názor na věc. Skrze tuto diskusi jsem pak objevil ty prostředky, o kterých jsem hovořil dříve. Pokud můžeme pochopit, proč je důležité použít hlavičky stránky a správné seznamy, pak nám nic nebrání v tom, abychom tyto informace použili v našich každodenních projektech.

20

Webdesign s webovými standardy

Také je důležité uvést, že se nesnažím nařizovat nějaké zvláštní způsoby zápisu kódu u vybraných prvků stránky – jako u všeho ostatního ve webovém designu, i zde existuje mnoho různých způsobů, kterými lze dosáhnout stejných výsledků. Použijte to, co je pro danou úlohu tím nejlepším řešením – nicméně, pochopením různých předností a nevýhod několika různých metod budete moci si vybrat lépe, až přijde ten správný čas.

Uspořádání knihy Kniha se skládá ze dvou částí. První se zabývá náměty vztahujícími se ke kódu, druhá pokrývá CSS. Každá kapitola zodpovídá specifickou otázku a často uvádí více metod vedoucích k dosažení stejných výsledků. Na každou metodu se podíváme blíže a upozorníme na její silná a slabá místa. Na konci mnoha kapitol se také nachází část pojmenovaný jako "Něco navíc", která se zavrtává hlouběji do pokročilého kódu a námětů CSS, které mají k dané kapitole nějaký vztah.

Doufám že si čtení knihy užijete. Pusťme se do toho.

Sdělte nám svůj názor Jako čtenáři této knihy se stáváte těmi nejdůležitějšími kritiky a komentátory. Vážíme si vašeho názoru a chtěli bych vědět, co děláme správně, co bychom mohli dělat lépe, ve kterých oblastech bychom měli publikovat naše další knihy a také bychom chtěli znát vaše podnětné myšlenky, o které jste ochotni se s námi podělit.

Jako odborný redaktor Zoner Press vítám vaše názory. Můžete mi psát – poslat e-mail nebo dopis – a sdělit mi, co se vám v této knize líbilo nebo nelíbilo, stejně tak, co bychom měli udělat, aby naše další knihy byly lepší. Pokud mi napíšete, nezapomeňte prosím připojit název knihy, ISBN, jméno autora, vaše jméno, telefon, fax nebo e-mail. Prosím vězte, že nemohu pomoci s technickými problémy, které se týkají obsahu knihy a že díky velkému množství e-mailů, které dostávám, nemohu zaručit odpověď na každou zprávu – v tomto směru doporučuji využít adresu interval.cz.

E-mail: miroslav.kucera@zoner.com Adresa: Zoner Press ZONER software s.r.o Miroslav Kučera Koželužská 7 602 00 Brno

1

Práce se seznamy

Seznamy. Najdete je prakticky na každé webové stránce. Seznamy hyperlinků, seznamy zboží v nákupním košíku, seznamy oblíbených filmů nebo dokonce seznamy určené k navigaci pro dané webové stránky. Zatímco někomu se to může zdát nepodstatné, v této kapitole budeme mluvit o způsobu kódování takových seznamů. Objevíme při tom výhody (a nevýhody) několika běžných metod. Později si nabyté znalosti ověříme v praxi při stylizování několika příkladů běžných seznamů.

Jdeme nakupovat Původně jsem zamýšlel použít jako úvodní příklad nějaký dlouhý seznam. Pak jsem si ale uvědomil, že nemám vůbec představu o tom, jaké položky by měl takový seznam zahrnovat, a tak jsem zvolil jednoduchý seznam zboží k nakoupení…

Dejme tomu, že na svých webových stránkách chcete uveřejnit seznam, jaký si děláte, když jdete nakupovat. Ponechme stranou, proč by se měl takový seznam vyskytovat na webových stránkách. Pouze potřebujeme jakýkoliv důvod, abychom mohli začít uvažovat o seznamech. Řekněme, že bychom chtěli, aby měl seznam na stránce podobu vertikální posloupnosti položek, z nichž každá by měla pro sebe jeden řádek.

Apples Spaghetti Green Beans Milk

24

Webdesign s webovými standardy

To je zdánlivě jednoduchá úloha. Existuje ale – a to platí pro všechny aspekty designu a vývoje webových stránek – více možností, jak dosáhnout téhož (nebo podobného) výsledku. Zde budu, jako i ve všech ostatních příkladech uvedených v této knize, prezentovat problém z hlediska XHTML (eXtensible HyperText Markup Language). Zvolené metody budou používat platné kódování a budou splňovány standardy vycházející ze směrnic W3C (World Wide Web Consortium www.w3.org/).

Nyní můžeme buďto jednoduše přidat za každou položkou značku <br /> nebo vytvořit prvky seznamu. Podívejme se na tři různé možnosti a důsledky využití každé jednotlivé z nich.

Čas na kvíz Jaká z následujících metod je pro vytvoření seznamu na nákup nejvhodnější?

Metoda A: Zlom pomocí značky <br /> Apples<br /> Spaghetti<br /> Green Beans<br /> Milk<br />

Metoda A byla jistě po léta hojně používaná, možná dokonce na milionech webových stránek. Ve skutečnosti si jsem jist, že každý jsme se – alespoň jednou – prohřešili tím, že jsme tento přístup aplikovali.

Nemám pravdu? Chceme, aby byla každá položka seznamu na další řádce, což zajistíme vložením značky zalomení (zde právoplatnou uzavírací verzí XHTML, tj. <br />), která za každou položkou zalomí řádek. A vypadá to, že to funguje.

Co kdybychom ale chtěli nákupní seznam stylizovat jinak, než ostatní prvky stránky? Co kdybychom např. chtěli, aby se v seznamu objevily červené čáry místo standardních modrých, nebo aby se velikost textu lišila od textu ve zbytku stránky? To zde nemůžeme. Nemáme na výběr jiné styly písma, než jaké jsou nastavené pro celý dokument (pokud vůbec nějaké přednastavené styly v našem dokumentu existují). A protože u seznamu není žádný okolní prvek, nemůžeme mu přiřadit žádná specifická CSS pravidla.

Zalamování řádků Řekněme také, že jsme do seznamu přidali zvlášť dlouhou položku, např.: "Five Foot Loaf of Anthony’s Italian Bread". V závislosti na umístění seznamu na stránce, může – v případě nedostatku místa v horizontálním rozměru nebo pokud nestačí šířka okna prohlížeče – vzniknout nebezpečí zalomení dlouhých položek na další řádku.

Také by bylo pěkné vzít v úvahu možnost uživatelů s oslabeným zrakem, kteří zvětšují velikost písma.

Když uživatel zvětší velikost písma, tak se položky, které by se ještě akorát vešly do úzkých sloupců jako na obrázku 1-1, zalomí tak, jak jsme to nepředvídali (viz obrázek 1-2) a zmaří veškerý design.

Kapitola 1 – Práce se seznamy

25

Obrázek 1-1. Příklad s výchozí velikostí textu

Obrázek 1-2. Tentýž příklad se zvětšeným písmem

Vím, že mám koupit chleba, ale znázorněné uspořádání (obrázek 1-2) je trošku matoucí.

Podobné dilema se zalomením na nás vybafne v případě, že si prohlížíme dlouhé řádky na malých obrazovkách zařízení typu mobilní telefon nebo PDA (Personal Digital Assistant, osobní digitální asistent).

Zásadový technofil se může do supermarketu vydat s Palm Pilotem v ruce místo s tradičním kouskem papíru vytrženým ze zápisníku; ovšem, až bude hledat "Anthony’s Italian", může se velice zapotit.

Na tomto příkladě se snažím ukázat, že použití Metody A nepočítá s přizpůsobivostí, jaké mohou webové stránky nabývat v závislosti na proměnných, které jsou mimo oblast působnosti návrháře stránky.

Metoda B: Odrážka <li>Apples<br /> <li>Spaghetti<br /> <li>Green Beans<br /> <li>Milk<br />

Všude tam, kde je použit prvek <li>, vloží nejkompetentnější prohlížeče vlevo od položky seznamu odrážku. Chceme-li vkládat na každý řádek s novou položkou značku odrážky, můžeme zvolit Metodu B, tj. vložení samotného <li>. Některé z těchto kompetentních prohlížečů nicméně nezobrazí odrážku, dokud nebude prvek <li> vnořen v jednom ze svých vlastních rodičů, třeba v mocném <ul>. Druhým rodičem <li> je prvek <ol> značící "setříděné seznamy" (ordered lists), které proberu na jiném místě této knihy.

Odrážka do jisté míry řeší problém zalomení. Každá nová položka nákupního seznamu je předznamenána odrážkou vlevo. V případě, že se část nějaké položky při zalomení přesune na další řádek, měla by

26

Webdesign s webovými standardy

nepřítomnost odrážky postačovat k tomu, abychom ji odlišili od zcela nové položky. S Metodou B je ale v nepořádku ještě něco jiného (kromě výsledného zobrazení seznamu) – není totiž platná.

"Kontrola platnosti!"

Podle specifikace XHTML 1.0, v souladu s W3C, musí být všechny značky uzavřeny; kdybychom chtěli s každou položkou seznamu značku <li> otevřít a nechat ji neuzavřenou, jak jsme to předvedli v našem příkladu, velká hanba nám!

Napodobili jsme automatické zalamování řádků, které nastává, když se použije nesetříděný seznam přidáním značky <br /> na konec. Existuje ale podstatně lepší způsob.

Důsledné psaní platného kódu je velmi cenným přístupem. Po zajištění, že je náš kód platný, se budeme méně obávat eventuálního výskytu problémů zapříčiněných neuzavřenými nebo nesprávně vnořenými prvky. Nezapomínejme také, že pokud se na náš kód podívá někdo jiný, snadněji se v něm bude orientovat a přesně pochopí, co se kde odehrává.

Pro ověření platnosti vašich souborů (vložením URI nebo přímo souboru) použijte on-line ověřovací nástroj W3C na adrese http://validator.w3.org/. Později budete šťastni, že jste tak učinili.

Metoda C: Přiblížení <li>Apples</li> <li>Spaghetti</li> <li>Green Beans</li> <li>Milk</li>

Metoda C nás přivádí blíže lepšímu řešení, ale má jeden velký nedostatek v potenciálně zřejmém ohledu – stále to není platný kód.

Každou značku <li> jsme řádně uzavřeli a jelikož jde o prvky na úrovni bloku, jejich použití eliminuje potřebu značky <br />, která dělá totéž – každou položku seznamu vloží na svůj vlastní řádek. Nicméně, chybí nám vnější struktura – nějaký prvek, který by říkal, že tato skupina položek tvoří seznam.

Také je důležité na tento problém pohlížet ze sémantického úhlu pohledu, tj., že seznam je skupinou položek, které k sobě navzájem patří, a proto by tak měly být označeny. A dále, použitím správných značek pro seznam velice jasně prohlížeči, softwaru nebo zařízení řekneme, že: "Tato skupina položek je seznam!" To je dobrý příklad toho, že významem sémantického kódu je ustanovení vztahu mezi strukturou a podstatou prvků.

Kapitola 1 – Práce se seznamy

27

Blokové uspořádání versus zápis uvnitř kódu Prvky HTML mohou být v zásadě uspořádány v blocích nebo v textu kódu. Blokové prvky začínají na vlastním řádku a jsou následovány zalomením řádku. Naproti tomu – prvky zapsané do těla kódu (tzn. inline prvky) jsou zobrazeny na stejném řádku jako ostatní prvky téhož typu. Blokové prvky mohou obsahovat jiné blokové prvky nebo prvky zapsané do textu kódu, zatímco prvky zapsané přímo do textu kódu nemohou obsahovat blokové prvky.

Příklady blokových prvků jsou <div> <h1> až <h6> <form>. Příkladem inline prvků jsou například prvky <span>, <strong>, <em> a další.

Pokud bychom se na náš nákupní seznam měli podívat čistě očima XML, pravděpodobně bychom jej zapsali následovně: <grocerylist> <item>Apples</item> <item>Spaghetti</item> <item>Green Beans</item> <item>Milk</item> </grocerylist>

Celý seznam má kontejnerový prvek <grocerylist> do kterého patří všechny položky seznamu. Takovéto seskupování položek usnadní život aplikacím založeným na XML, které se mohou snažit extrahovat položky ze seznamu.

Nějaký vývojář by mohl např. vytvořit seznam XSLT stylů, který převede seznam položek do formátu XHTML, do prostého textu nebo dokonce do dokumentu ve formátu PDF. Vzhledem k předpověditelné povaze skupiny položek seznamu nebude mít software s nalezením informací a s jejich zužitkováním žádné potíže.

I když se v této knize nezabývám přímo XML, jsou odpovídající zásady přeneseny do světa XHTML. Smysluplným strukturováním XHTML kódu totiž dokážeme podstatně zlepšit jeho flexibilitu.

Podívejme se nyní podrobně na Metodu D. Dobře vidíme, jak to všechno do sebe zapadá – uplatníme zde strukturu, kterou většina prohlížečů a zařízení bezproblémů přečte a která nám současně umožní stylizovat náš seznam několika různými způsoby.

Metoda D: Dobře zabalený dáreček <ul> <li>Apples</li> <li>Spaghetti</li> <li>Green Beans</li> <li>Milk</li> </ul>

28

Webdesign s webovými standardy

Čím je metoda D tak zvláštní? Především je zcela platná. Řádný nesetříděný seznam obsahuje prvek <ul>, který zahrnuje řadu položek uzavřených mezi počátečními a koncovými prvky <li>. Možná si myslíte, že se tu snažíme pouze ukázat, jak vyhovovat platnosti pouze pro platnost samotnou. Podívejme se na to v praxi.

Protože jsme správně vytvořili kód pro náš nákupní seznam, bude každá položka na zvláštním řádku (kvůli blokové povaze značek <li>). Většina vizuálních prohlížečů vedle každé položky zobrazí odrážku a odsadí případně zalomené řádky (viz obrázek 1-3).

Obrázek 1-3. Výchozí provedení nesetříděného seznamu

Uživatelé PDA, mobilních telefonů nebo jiných zařízení s malou obrazovkou budou uvidí tento seznam organizovaný podobným způsobem. Jelikož jsme dané zařízení upozornili na charakter dat (zde se jedná seznam), může se tak příslušné zařízení samo rozhodnout, jak tento seznam podle svých schopností zobrazit nejlépe.

Pokud se nějaký dlouhý řádek – v důsledku zvětšené velikosti písma nebo úzkého okna prohlížeče – zalomí na více řádků, bude zalomený řádek zobrazen s takovým odsazením, aby byl zarovnán stejně jako text umístěný nad ním. Rozlišení jednotlivých položek bude tedy zcela přehledné, ať už bude stav prohlížeče jakýkoliv.

Shrnutí Poté, co jsem metody pečlivě rozebral, bude se hodit malý přehled s jejich výhodami a nevýhodami: Metoda A:

• Opomíjí možnost specifického stylizování seznamu.

• V případě zalamování delších řádků v užších sloupcích nebo na malých obrazovkách může vést k matoucím výsledkům.

• Chybí jí sémantický smysl.

Metoda B:

• Přidání odrážky pomůže naznačit novou položku, ale některé prohlížeče ji nemusí zobrazovat není-li přítomen její rodičovský prvek <ul>.

• Nepřítomnost prvku <ul> nebo uzavíracího prvku </li> ztěžuje úpravu stylu.

• Neplatná.

29

Kapitola 1 – Práce se seznamy Metoda C:

• Použití uzavíracího prvku </li> eliminuje potřebu použití značky <br • Opominutí prvku <ul> ztěžuje použití různých stylů.

• Neplatná.

/>.

Metoda D:

• • • • •

Platná!

Je vybavena sémantickým smyslem a má strukturu.

Odrážky se ve většině prohlížečů zobrazí vlevo od položky.

Zalomené řádky většina prohlížečů odsadí.

Lze snadno stylizovat pouhou aplikací CSS.

Jak je vidět, zdánlivě nevinná otázka nás může dovést k rozsáhlým poznatkům. A i když už na všech svých stránkách používáte výhradně Metodu D, je docela pěkné vědět, proč děláte věci tak, jak je děláte.

Takové otázky typu "proč" si budeme klást v celé této knize, přičemž jejich zodpovídáním budete získávat stále více zkušeností, což vám ulehčí v budoucnu nalezení toho nejlepšího řešení pro danou situaci.

Něco navíc Podívejme se na různé způsoby využití kódu našeho nákupního seznamu s použitím CSS pro vytvoření různého vizuálního formátování. V této části zahodíme všechna výchozí nastavení, přidáme si vlastní odrážky a pak to celé převrátíme do horizontální polohy, čímž získáme pár zajímavých tipů pro vytváření navigačnícg lišt.

Odrážky a zase odrážky "Odrážky na mém nákupním seznamu opravdu vypadají moc příšerně. Raději tedy budu dále používat ty klasické zalamovací značky <br/>."

Ke starým zvykům se vracet nemusíme, můžeme i nadále používat strukturu nesetříděných seznamů, přičemž s pomocí CSS vypneme odrážky a zrušíme odsazení položek (pokud vám jde o tohle). Klíčem je ponechání struktury seznamu a přenechání nastavení detailů vzhledu na samotném CSS. Nejdříve přidejte pravidlo CSS, které vypne odrážky: ul { list-style: none; }

Výsledky jsou vidět na obrázku 1-4.

30

Webdesign s webovými standardy

Obrázek 1-4. Seznam bez odrážek

Nyní zrušíme odsazení jednotlivých položek. Implicitně je nastavena jistá míra výplně nalevo od každého nesetříděného seznamu. Nebojte se – pomocí následujícího stylu toto odsazení snadno zrušíme: ul { list-style: none; padding-left: 0; }

Výsledky vidíme na Obrázku 1-5.

Obrázek 1-5. Seznam s vypnutými odrážkami a odsazením

Zatímco příklad na obrázku 1-5 vypadá, jako bychom jej vytvořili výhradně s využitím prvků <br />, ve skutečnosti je jedná o týž strukturovaný a platný nesetříděný seznam položek. Můžeme jej zobrazit v jakémkoliv prohlížeči nebo na jakémkoliv zařízení. Případná změna vzhledu je pak díky použití kaskádových stylů opravdu triviální záležitostí.

Vlastní odrážky jsou nápaditější Možná byste chtěli ve svém seznamu odrážky použít, nicméně, nelíbí se vám, jak vypadají. Díky možnostem CSS můžete tyto klasické odrážky nahradit odrážkami vlastními, grafickými. V tom případě můžete zvolit ze dvou možností, z nichž já dávám přednost té druhé, protože se s ní dosahuje (při použití v různých prohlížečích) podstatně konzistentnějších výsledků.

První možností je použití vlastnosti list-style-image, pomocí které specifikujete obrázek, který se má vložit místo standardní odrážky. ul { list-style-image: url(fancybullet.gif); }

14

Nahrazování obrázkem

S tím, jak stále více návrhářů a vývojářů vzhlíží k výhodám používání webových standardů, obzvláště pak CSS, jsou dennodenně objevovány nové techniky a hranice možností se stále posouvají. Pravidelně jsou vypracovávány nové, lepší způsoby dosahování daných cílů.

Nejlepší příklad tohoto vývoje lze nalézt v umění "nahrazování obrázkem", což je technika použití CSS za účelem nahrazení obyčejného hypertextového odkazu stylizovanými obrázky.

Jak lze využít CSS k nahrazení textu obrázky Bylo by ideální mít veškerou grafiku týkající se prezentace (tj. nepodstatnou, dekorativní) uvnitř CSS. Umožnilo by to snadno vyměnit aktualizované obrázky a přitom ponechat kód přesně takový, jaký je.

Také můžeme zajistit, aby všechny prohlížeče a zařízení zpracovaly ze všeho nejdříve samotný kód, ať už pokročilé CSS vyžadované pro náhradu textu obrázky plně podporují nebo ne. Takovéto přednosti jsem kázal v celé knize.

Žádné dokonalé řešení neexistuje Nalézt "dokonalou" metodu výměny obrázků odkazovaných pouze pomocí CSS za texty je ovšem jako hledat Svatý Grál. Taková metoda prostě ještě nebyla nalezena. Existují metody, které fungují ve všech prohlížečích, ale selhávají v podpůrném software typu čteček obrazovky. Existují další metody, které fungují dobře, pokud ovšem uživatelé nespecifikují, že jejich prohlížeč nezobrazuje obrázky a přitom stále umožňují použití CSS.

212

Webdesign s webovými standardy

Žádná z metod dostupných v době psaní těchto řádek sice neuspokojuje každého uživatele, ale uvedené techniky jsou dnes používány na různých stránkách. Při aplikování nějaké metody náhrady obrázky bychom měli postupovat opatrně a chápat nevýhody, které jsou s ní spojené.

Používat s obezřelostí Účelem této kapitoly je vysvětlit flexibilitu, kterou s sebou náhrada obrázky přináší, ale také ukázat, co na ní je neuspokojující. Časem možná nadšenci pro CSS naleznou nějaké lepší způsoby, jak dosáhnout týchž výsledků. Do té doby si budeme muset vystačit s tím, co máme, a zvážit všechna pro a proti.

Abychom se s myšlenkou náhrady obrázky seznámili, podívejme se na několik oblíbených metod počínaje technikou náhrady obrázky podle Fahrnera (Fahrner Image Replacement; FIR), kterou to všechno začalo.

Metoda A: Náhrada obrázku podle Fahrnera FIR, pojmenována po autorovi techniky Toddu Fahrnerovi, je původní metodou nahrazování textu pomocí vlastnosti CSS obrázek na pozadí (background-image). Tuto metodu popularizoval Douglas Bowman ve své fantastické příručce "Použití obrázku pozadí k náhradě textu" (Using Background image to Replace Text; www.stopdesign.com/also/articles/replace_text/) publikované v březnu 2003.

Předveďme si metodu na jednoduchém příkladu, ve kterém pomocí FIR prohodíme značku hlavičky daného textu se stylizovanou grafikou.

Kód Kód, který pro náhradu použijeme, bude následující: <h1 id="fir">Fahrner Image Replacement</h1>

Jednoduchá značka hlavičky s textem, který si přejeme později nahradit grafikou. Jistě si všimnete, že prvku <h1> jsme přiřadili jednoznačný id, abychom nad touto speciální hlavičkou měli pomocí CSS plnou kontrolu.

Obrázek 14-1 nám ukazuje výsledky kódu v typickém prohlížeči – hlavička se vypíše výchozím písmem prohlížeče (v tomto případě v písmu Verdana). Dosud to je předpověditelné a nudné.

Obrázek 14-1. Výchozí podoba hlavičky.

Kapitola 14 – Nahrazování obrázků

213

Značka navíc FIR požaduje zavedení značky navíc (v dodatku k prvku hlavičky), která v sobě zahrne text kódu. Mohli bychom k tomu sice použít jakoukoliv značku, ale obecnost prvku <span> jej činí pro tento úkol dokonalým. Když se podíváme na nestylizovaný kód, nebude mít prvek <span> žádný vliv na vzhled.

Modifikovaný kód nyní vypadá takto: <h1 id="fir"><span>Fahrner Image Replacement</span></h1>

Nyní, když máme na svém místě dodatečný prvek <span>, jsme připraveni na CSS.

CSS vstupuje do hry Podstatou Metody A je použití dvou prvků, které máme k uskutečnění dvou odlišných úkolů. Pomocí prvku <span> text "schováme" a pak prvku <h1> přiřadíme obrázek pozadí stylizovaného typu. Právě tyto dva kroky vyžadují dva prvky.

Schování textu Nejprve schovejme text použitím vlastnosti display u prvku <span>: #fir span { display: none; }

To zcela schová text umístěný v této speciální hlavičce uvnitř značek <span>. Prohlížeče nic nezobrazí.

To je první krok – zcela se zbavit textu. Není potřeba ukazovat výsledný vzhled; jak jistě sami chápete, stránka by byla prázdná.

Přiřadit pozadí Vytvořil jsem, podle mého názoru, vkusnou grafickou verzi textu ve Photoshopu (viz obrázek 14-2). Ve svém oblíbeném obrázkovém editoru byste mohli udělat něco podobného. Poznamenejte si rozměry v pixelech, za malý okamžik je budeme potřebovat.

Obrázek 14-2. Obrázek který použijeme k nahrazení textu (fir.gif).

Rozměry obrázku na obrázku 14-2 jsou 287 pixelů na šířku a 29 pixelů na výšku. Jak obrázek, tak rozměry vložíme jako pozadí do kódu prvku <h1>: #fir { width: 287px; height: 29px;

214

Webdesign s webovými standardy

background: url(fir.gif) no-repeat; } #fir span { display: none; }

Minule jsme text schovali pomocí vlastnosti display prvku <span>. Zde specifikujeme výšku a šířku obrázku použitého k nahrazení, jakož i obrázek samotný, za použití vlastnosti background.

Otevřeli jsme "obrázek" u prvku <h1> který sdílí stejné rozměry jako obrázek (287×29 pixelů). Obrázek prosvitne za textem, který jsme schovali pomocí vlastnosti display.

Obrázek 14-3 nám ukazuje výsledek hlavičky v prohlížeči. Vše, co vidíme, je stylizovaný obrázek. Skvělé!

Obrázek 14-3. Výsledky použití metody FIR (Fahrner Image Replacement).

Výhody Použitím metody CSS místo kódu zajistíme, že prohlížeče a zařízení, které CSS nepodporují, zobrazí čistý text. Vyměňování grafiky je tak snadné, jako aktualizace jediného souboru CSS; nemusíme aktualizovat kód.

Spolu s těmito výhodami ale přichází i několik stinných stránek, které je velice důležité zmínit.

Nevýhody Expert na přístupnost Joe Clark učinil rozsáhlý výzkum toho, jak selhává metoda FIR u uživatelů, kteří používají čtečky obrazovky nebo jiný podpůrný software ke čtení webových stránek.

Výsledky jeho testů si lze v úplnosti přečíst v jeho článku "Skutečnosti a názory na FIR" (Facts and Opinion About Fahrner Image Replacement; www.alistapart.com/articles/fir/). V něm ukazuje (mimo jiné), že většina čteček obrazovky se (možná chybně) řídí touto deklarací CSS: #fir span { display: none; }

Text se neschová pouze vizuálně, čtečky obrazovky jej také kvůli tomuto pravidlu úplně vynechají. Někdo může tvrdit, že vlastnost display by měly vzhledem k její povaze rozeznat pouze zařízení s obrazovkou a že by snad měly být vytvořeny nové typy médií CSS specificky pro čtečky obrazovky, aby

Kapitola 14 – Nahrazování obrázků

215

měli návrháři lepší kontrolu nad tím, jak různé systémy mohou prezentovat budoucí techniky náhrady obrázkem; nebo že by se měl software pro čtení obrazovky držet jednoho z existujících typů médií, jakým je např. aural.

Mimo záležitost se zobrazením textu u čteček obrazovky má FIR ještě dvě další nevýhody:

• Pro správné fungování této metody je nutné použít sémanticky nevýznamný prvek <span>.

• Ve výjimečném případě, kdy uživatelé ve svém prohlížeči zablokují zobrazení obrázků (často z důvodů šetření šířkou pásma), ale ponechají možnost funkce CSS, nezobrazí se ani text ani obrázek na pozadí.

Zvažte pro a proti Faktem zůstává, že použitím metody FIR návrháři riskují, že postižení nebudou mít přístup k celému obsahu. Totéž (vzdáleně) riskují u uživatelů, kteří používají kombinace "obrázky ano/CSS ne". Trik spočívá v uvážení výhod a nevýhod, pochopení stinných stránek a v opatrnosti.

Existuje pár případů, kdy by FIR ještě bylo smysluplné. O dva z nich se s vámi podělím v části "Něco navíc" na konci této kapitoly.

Kvůli těmto objevům v oblasti přístupnosti, které vypluly na povrch, začali další návrháři a vývojáři provádět úpravy konceptu nahrazování obrázkem a nacházeli nové způsoby, jak běžný text "schovat" a přitom vložit obrázek do pozadí. Podívejme se na pár dalších metod.

Metoda B: Nahrazení obrázkem – metoda Leahy/Langridge Metoda LIR, kterou současně vyvinuli Seamus Leahy (www.moronicbajebus.com/playground/ cssplay/image-replacement/) a Stuart Langridge (www.kryogenix.org/code/browser/lir/), se vydává na cestu zvládnutí problematiky nahrazování obrázkem bez použití bezvýznamného prvku <span>, který vyžadovala metoda FIR. Místo použití vlastnosti display ke schování textu, LIR text odstraňuje nastavením výšky obsahujícího prvku (v našem příkladu je jím <h1>) na hodnotu 0 a dále nastavením výplně navrchu tak, aby se rovnala výšce obrázku, který má být k nahrazení použit.

Kód a CSS Jelikož nepotřebujeme v této metodě dodatečný prvek <span>, náš kód se zredukuje na pouhé: <h1 id="lir">Leahy/Langridge Image Replacement</h1>

A CSS, které nám nahrazení textu obrázkem (na obrázek 14-4) zaručí, je následující jednoduchá deklarace: #lir {

216

Webdesign s webovými standardy

padding: 90px 0 0 0; overflow: hidden; background: url(lir.gif) no-repeat; height: 0px !important;

/* pro většinu prohlížečů */

height /**/:90px;

/* pro IE5/Win */

}

Obrázek 14-4. Obrázek lir.gif vytvořený v obrázkovém editoru.

Obrázek vybraný pro náhradu za text má výšku 90 pixelů, proto je pro výplň navrchu nastavena stejná hodnota. Pro většinu prohlížečů nastavujeme výšku na hodnotu 0, což v podstatě odstraní text (nebo cokoliv jiného, co je v prvku <h1> obsaženo). Abychom zajistili, že předchozí hodnota se rozpozná přednostně před hodnotou následující (pouze pro IE5/Windows), použili jsme pravidla !important.

Kompetentní prohlížeče budou druhé pravidlo pro výšku ignorovat, zatímco IE5/Windows jej rozpozná.

Trápení s obdélníkovým modelem (Box model) Poslední pravidlo se používá k urovnání nepochopení obdélníkového modelu CSS ze strany IE5/Windows (viz "Problém s obdélníkovým modelem" v kapitole 12). Jelikož výplň je v IE5/Windows přidána k hodnotám výšky a šířky, budeme muset specificky u těchto prohlížečů zacházet s upravenou hodnotou.

Výška bude v tomto případě vždy rovna výšce obrázku, který používáme k nahrazení.

Nevýhody Zatímco metoda B umožňuje zapomenout na dodatečný prvek <span> (oříznutí kódu se vždy hodí) sdílí s metodou A jistou nevýhodu. Je jí skutečnost, že uživatelé, kteří mají vypnuté zobrazování obrázků a aktivované CSS, neuvidí vůbec nic.

Mohli bychom také tvrdit, že další nevýhodou metody LIR je to, že vyžaduje trik na řešení problému s obdélníkovým modelem, aby se IE5/Windows choval správně.

Jelikož metoda B nepoužívá ke schování textu vlastnost display, mohlo by se předpokládat, že tato metoda je lepší pro uživatele využívající software ke čtení obrazovky, ale stejně jako metodu A, i metodu Leahy/Langridge bychom měli užívat s maximální obezřetností. Musíme vzít v úvahu záležitost s přístupností varianty "obrázky vypnuté/CSS zapnuté".

Kapitola 14 – Nahrazování obrázků

217

Podívejme se na další variaci nahrazování obrázkem vyvinutou M. Rundlem.

Metoda C: Pharkova metoda Jednou z úžasných vlastností Webu je to, že lidé neustále vylepšují techniky a hledají alternativní způsoby k dosažení daných cílů. V srpnu 2003 přišel vývojář Mike Rundle se svou vlastní variací nahrazování obrázkem (http://phark.typepad.com/phark/2003/08/accessible_imag.html). Použil k tomu unikátní myšlenku přiřazení velké záporné hodnoty odsazení pro text, který chceme schovat.

Text je tedy stále na obrazovce, ale má takové odsazení, že ani na největších monitorech jej neuvidíme.

Nápadité!

Kód a CSS Jako Metoda B, tak i Pharkova metoda (podle přezdívky Mikeova webového serveru) se také za účelem správného fungování vyhýbá potřebě zvláštního kódu. Kód naší hlavičky by vypadal takto: <h1 id="phark">The Phark Method</h1>

Prvek <span> navíc, který jsme potřebovali v případě metody FIR, není touto metodou vyžadován.

Podívejme se na zjednodušující CSS použité ke schování textu a jeho nahrazení obrázkem z obrázku 14-5.

Obrázek 14-5. Obrázek o výšce 26 pixelů, který použijeme jako náhradu (phark.gif). #phark { height: 26px; text-indent: -5000px; background: url(phark.gif) no-repeat; }

Jak vidíte, metoda C je zdaleka nejlepší a nevyžaduje trik na řešení problému s obdélníkovým modelem ("Box Model Hack"), ani dodatečný kód. Odsazením textu o nesmyslné množství záporných pixelů text vytěsníme tak, že je pro uživatele neviditelný.

Podobně jako u metody B uživatelé softwaru na čtení obrazovek by měli stále moci text v pohodě číst, což je jistě zlepšení.

Pořád tomu něco chybí Přestože se Pharkova metoda zavádí nejlépe, stále nedokáže vyřešit situaci "obrázky vypnuté/CSS zapnuté". I když by se to mohlo jevit jako velice vzácná situace, znamená to stále, že v době psaní těchto řádků neexistuje dokonalé řešení.

218

Webdesign s webovými standardy

Zrekapitulujme si každou z diskutovaných metod a povšimněme si jejich rozdílů.

Shrnutí Podívali jsme se zblízka na tři oblíbené metody náhrady obrázkem počínaje původní metodou FIR a dvěma jejími následovníky konče. Žádná z technik sice není dokonalým řešením problému, ale např. metoda M. Rundlea se k ideálu velice blíží, a může se uplatnit ve skutečném světě, pokud ovšem její nástrahy a nevýhody nebudeme brát na lehkou váhu.

Vypišme si hlavní rozdíly mezi třemi metodami: Metoda A:

• Vyžaduje bezvýznamný dodatečný prvek <span>.

• Software na čtení obrazovky běžně používaný v době psaní těchto odstavců nic nevysloví kvůli tomu, že bere na vědomí vlastnost display (založeno na objevech J. Clarka).

• Ve variantě "obrázky vypnout/CSS zapnout" se nic neobjeví.

Metoda B:

• • • •

Nevyžaduje dodatečný kód.

Software na čtení obrazovky by měl číst text normálně.

Pro IE5/Windows je nutné použít "Box Model Hack".

V případě nastavení "obrázky vypnout/CSS zapnout" se neobjeví nic.

Metoda C:

• Nevyžaduje dodatečný kód.

• Software na čtení obrazovky by měl číst text normálně.

• V situaci, kdy je nastaveno "obrázky vypnout/CSS zapnout", se nic neobjeví.

Poslední nevýhody metody C sdílejí všechny současné populární metody. Stále další a další vývojáři však objevují nové způsoby zpracování techniky nahrazení obrázkem a proto věřím, že nakonec bude nalezeno řešení, které uspokojí každého.

Do té doby existuje pár praktických aplikací obecné myšlenky nahrazení obrázkem a my se na dvě z nich podíváme v části "Něco navíc" této kapitoly.

Je důležité zmínit, že návrhář D. Shea, který se drží standardů, stav nahrazování obrázkem široce sledoval a udržoval pěkně organizovanou stránku, která zahrnuje všechny metody popisované v této kapitole a ještě nějaké další. Určitě jeho stránky sledujte (je tam např. článek věnovaný přehledu technik "Revised Image Replacement"; www.mezzoblue.com/tests/revised-image-replacement/).“

Kapitola 14 – Nahrazování obrázků

219

Něco navíc V části "něco navíc" se podívejme na dva případy, kdy by bylo v reálném světě oprávněné využít náhradu obrázkem. Nejdříve se budeme zabývat užitečným trikem s prohozením loga, který mi poprvé vysvětlil D. Bowman, významný popularizátor originální techniky FIR metody A. Pak vám sdělím, jak byly za použití náhrady obrázkem bez JavaScriptu navrženy záložky navigačního systému na stránkách Fast Company ’s.

Prohození loga V této kapitole jsme viděli, jak lze CSS použít k náhradě textu obrázkem. Každá z metod k tomu používaných je stižena určitými nedostatky. Tyto nedostatky ale zůstanou stranou, když jednu z těchto metod použijete k nahrazení obrázku … jiným obrázkem.

Ale proč byste to měli chtít udělat?

Hi-fi a lo-fi Jedním důvodem prohození obrázků by mohlo být použití různých log webového serveru – jednoho loga pro prohlížeče, které umí CSS používat normálně (s odkazem ve vlastnosti background) a jiného loga, které přijímají starší prohlížeče, příruční zařízení, čtečky obrazovky atd.

To se hodí obzvláště tehdy, když hi-fi (high-fidelity, vysoce věrné) logo používá průhlednost nebo barvy specifické pro CSS design vašich stránek. Když není CSS podporováno nebo aktivováno, budete možná chtít, aby nestylizovaná verze zobrazila lo-fi (low-fidelity, snížená věrnost) verzi loga, která ještě vypadá dobře.

Příklad Abych se vyhnul právníkům specializujícím se na autorská práva, použiji opět příklad z mého vlastního webového serveru. Nejen, že tu prohazuji loga, ale počítám také s tím, že na jakékoliv stránce jiné, než je domovská stránka, lze stále kliknout na verzi loga určenou pro CSS a použít ji jako odkaz na stránku index.

Podívejme se na kód, který používám na své domovské stránce pro logo, a na kód pro další stránky.

Pro domovskou stránku: <div id="logo"> <span><img src="/images/logo_lofi.gif" width="173" height="31" alt="SimpleBits" /> </span> </div>

Na všech ostatních stránkách je logo, které uživatele po kliknutí nasměruje zpět na domovskou stránku.

220

Webdesign s webovými standardy

<div id="logo"> <span><a href="/"><img src="/images/logo_lofi.gif" width="173" height="31" alt="SimpleBits" /></a></span> </div>

Dvě loga Obrázek 14-6 a 14-7 ukazují loga, která jsem použil. První je na stránce zapsáno kódem pro nestylizovanou verzi (lo-fi), druhé bude odkazováno CSS pro moderní verze prohlížečů (hi-fi).

Obrázek 14-6. Obrázek logo_lofi.gif, který uvidí nestylizované prohlížeče (lo-fi).

Obrázek 14-7. Obrázek logo_corn.gif, který uvidí prohlížeče akceptující CSS (hi-fi).

Text hi-fi loga je bílý a má bílé průhledné pozadí, které má sedět na pozadí barvy kukuřice. Proto by vypadalo v prohlížečích pro nestylizovanou verzi stránek divně. Z tohoto důvodu jsem se rozhodl prohodit loga pomocí CSS – abych mohl zvolit jedno z nich podle schopností prohlížeče.

CSS Dotáhněme to tedy do konce společně s CSS, které to všechno umožní.

Nejdříve schováme řádkový obrázek nastavením jeho šířky na hodnotu 0. Vzpomeňme, že nepoužíváním vlastnosti display ke schování lo-fi loga máme lepší šanci u softwaru na čtení obrazovky, který čte schovaný obrázek (prostřednictvím poskytnutého textu): #logo img { display: block; width: 0; }

Za další, přiřkněme hi-fi logo prostřednictvím vlastnosti background prvku <span>, který jsem tam přimontoval. Ano, je to bezvýznamné a bezvýznamné sémanticky, ale udělejme v tomto případě výjimku. #logo span { width: 173px; height: 31px;