K1045.qxd
30.11.2004
16:02
StrÆnka 5
Obsah O autorovi Odborní korektoři Poděkování Napište nám svoje náměty
Úvod
19
Teorie versus praxe Hybridní layout na vzestupu?
Kontinuální vývoj, nikoliv soubor neměnných pravidel Ukázat, neprodávat Nechejte vaši práci, aby se prodávala sama To stejné v menším měřítku Vítr změny
Část 1 Houstone, máme tady problém Než začnete Rostoucí náklady, klesající příjmy Únik ze začarovaného kruhu Co je to dopředná kompatibilita? Žádná pravidla, žádná dogmata Praxe, nikoliv teorie Je tato cesta opravdu nezbytná?
1
15 15 16 17
99,9 % stránek je zastaralých Moderní prohlížeče a webové standardy Nový kód pro nové úkoly Problémy s verzemi
Myslete na minulost
21 21
24 24 25 25 26
27 29 31 31 33 34 35 36
39 41 41 42
44
Zastaralý zdrojový kód: Náklady pro vlastníky stránek Zpětná kompatibilita Blokování uživatelů podnikání neprospívá Cesta do Hlupákova
45 48 48 51
Když se špatnému značkování přihodí dobré věci Léčba
52 53
Tvorba webů podle standardů XHTML, CSS, DOM, ECMAScript
5
K1045.qxd
30.11.2004
16:02
StrÆnka 6
Obsah
2
Tvorba a design stránek podle standardů Proskočit obručí Náklady na design v dobách před standardy Moderní stránka, archaické postupy „Svatá trojice“ webových standardů Struktura Prezentace Chování
Do akce Výhody smíšených metod Web Standards Project: přenositelnost v akci A List Apart: jedna stránka, mnoho pohledů Kam te dál
3
Problémy se standardy Příjemné na dívání, odporné pro používání 2000: Rok, kdy prohlížeče dospěly Příliš málo, příliš pozdě? Špatné prohlížeče vedou ke špatným návykům Zavádějící webové stránky, matoucí označení Sprosté slovo Flash „Dodržování standardů“ je neslušné slovo
4
57 59 59 63 63 64 65
65 66 67 71 75
81 83 86 90 91 94 99 102
XML dobývá svět (A jiné příběhy o úspěšnosti webových standardů) Univerzální jazyk (XML) Srovnání XML a HTML Jeden rodič, mnoho dětí Základní složka profesionálního a spotřebního softwaru Oblíbenější než televize MTV Silná data pěti cestami Lůno myšlenek Ostatní publikační nástroje K vašim službám
XML aplikace a vaše webová stránka Stále v plenkách
Přirozeně kompatibilní Nová éra spolupráce Soubory testů a specifikace Soubor testů
6
55
Tvorba webů podle standardů XHTML, CSS, DOM, ECMAScript
105 107 107 107 108 111 112 113 114 114
116 117
117 118 118 118
K1045.qxd
30.11.2004
16:02
StrÆnka 7
Obsah Internetové standardy a autorské nástroje Jednotka se zvláštním úkolem společnosti Dreamweaver Nástroje WYSIWYG dosahují plnoletosti (dva ze tří nejsou špatné) Program FrontPage: nevyhovující provedení
Historie vzniku rozložení CSS Kampaň za aktualizaci prohlížečů Lavinová reakce Nespočetné přestavby a pomocné webové stránky Snobství… jako prostředek boje za vyšší cíle
Šíření internetových standardů Komerční webové stránky dostávají odvahu Přestavby webové stránky Wired Digital Tradiční způsoby přijetí standardů W3C útočí
Celkové shrnutí
119 120 121 121
122 122 126 127 129
131 132 133 136 137
137
Část 2 Návrh a sestavení
139
5
141
Moderní značkování Skryté náklady nekvalitního značkování Transformace? Celkové shrnutí Která verze standardu XHTML je pro vás vhodná? 10 důvodů proč používat standard XHTML
6
Standard XHTML: Restrukturalizace sítě Internet Přechod na standard XHTML: Snadná pravidla, jednoduché směrnice Začněme správnou deklarací DOCTYPE a namespace Zveřejněte typ obsahu Všechny tagy pište malým písmem Hodnoty atributů uvádějte v uvozovkách Všechny atributy vyžadují hodnoty Uzavírejte všechny tagy Uzavírejte také „prázdné“ tagy V textu komentáře se nesmí vyskytovat dvojice pomlček Zakódujte znaky < a & Celkové shrnutí: pravidla standardu XHTML
Znakové kódování
Tvorba webů podle standardů XHTML, CSS, DOM, ECMAScript
145 147 148 148 149
151 153 153 155 156 158 159 160 160 161 161 162
162
7
K1045.qxd
30.11.2004
16:02
StrÆnka 8
Obsah Unicode a další znaková kódování
Struktura dokumentu Značkování dokumentu pro jeho smysl, ne styl Hlavní zásady
Vizuální prvky a struktura dokumentu
7
Prvky div, id a další Dovolíme si udělat méně
Smíšené rozvržení a kompaktní značkování: pro a proti Pojmenování nesprávných prvků Časté chyby ve smíšeném značkování div je docela v pořádku Milujeme atribut id Odstraňte redundantní buňky
Představujeme zastaralé metody Rok mapování Dělení obrázků Přednosti tabulkového rozvržení Redundantní tabulky a jejich nejednoznačnost Vznik nekvalitního CSS A jdeme dál
Používáme standard XHTML: smíšené rozvržení (část I) Přínosy přechodových metod Formátovací sady nahrazují JavaScript
Koncept (přehled) Oddělené tabulky: výhodné pro CSS a přístupnost Proč a nač odkaz Skip Navigation
První a zároveň poslední část kódu Kód navigace: první tabulka Prezentace, sémantika, nevinnost a hřích Kód obsahu: druhá tabulka
9
Základy CSS Stručný přehled CSS
8
163 163 164
166
Těsnější, hutnější webové stránky zaručeny: struktura a metastruktura striktního a smíšeného značkování 169 Musí být každý prvek strukturovaný?
8
162
Tvorba webů podle standardů XHTML, CSS, DOM, ECMAScript
171 172 174
176 176 177 179 180 181
182 183 184 185 185 186 188
189 191 191
191 191 193
197 198 198 200
201 203
K1045.qxd
30.11.2004
16:02
StrÆnka 9
Obsah Styly pod drobnohledem Selektory, deklarace, vlastnosti a hodnoty Vícenásobné deklarace Mezery a citlivost na velká/malá písmena Alternativní a generické hodnoty Seskupené selektory Dědičnost a možné nesnáze Kontextové (postupné) selektory Id selektory a kontextové id selektory Selektor třídy Kombinování selektorů pro vytváření efektů
Externí, vložené a řádkové styly Externí definice stylů Řádkové styly
Metoda návrhu pro „ideální případ“ Od vložených stylů k externím: metoda dvou oddělených definic Relativní a absolutní odkazy na soubor Srovnání metody „ideálního případu“ a dvou oddělených definic
204 205 206 206 207 208 208 210 211 212 213
215 215 218
218 219 220 220
10 CSS v akci: různé postupy při tvorbě a návrhu (část II) 223 Příprava obrázků Ustanovení základních pravidel Globální styly, blíže o zkráceném zápisu a okrajích Třída hide a hodnota block Několik slov o použití dalších běžných elementů Více o velikosti fontů Navrhujeme rozvržení stránky
Navigační prvky: zastavení první Navigační lišta v CSS: první pokus při druhém zastavení Navigační lišta v CSS: poslední zastavení Poslední úpravy: externí styly a efekt „nacházíte se zde“
11 Pracujeme s prohlížeči (část I): přepínač DOCTYPE a standardní režimy Sága o přepínání pomocí DOCTYPE Magické tlačítko pro zapnutí a vypnutí standardů
Řízení výkonnosti prohlížeče: přepínač DOCTYPE Tři režimy pro zmatení davů Kompletní a nekompletní DOCTYPE
Tvorba webů podle standardů XHTML, CSS, DOM, ECMAScript
225 227 227 228 231 232 234
237 240 241 242
247 249 250
251 252 252
9
K1045.qxd
30.11.2004
16:02
StrÆnka 10
Obsah Správný zápis různých forem DOCTYPE v XHTML
Sláva z rozmanitosti prohlížečů Prohlížeče s jádrem Gecko a děravé obrázky
12 Pracujeme s prohlížeči (část II): box model, chyby a okliky Box model a jeho nemoci Jak funguje box model Trik pro box model: lepší CSS pro všechny
Chyba u mezer v prohlížeči IE/Windows Chyba při použití float v IE 6 pro Windows Flash a QuickTime:skutečně po nich toužíme? Dvě cesty k jednomu cíli: multimediální prvky a standardy Z bláta do louže: nefunkční objekty
Všechno nějak jde
13 Pracujeme s prohlížeči (část III): typografie Na velikosti záleží Kontrola v rukou uživatele Trocha hrůzy z let minulých Jednotlivé rozdíly
Konečně standardní velikost – na jak dlouho? Jedno kliknutí a práce přijde vniveč Náznak nevědomosti: špatná reakce na změnu v prohlížečích
Trpký úděl jednotky em Uživatelské nastavení a jednotka em
Pixely jsou fajn a fungují! Nejmenší jednotka: zcela relativní záležitost Potíž s pixely
Metoda klíčových slov a velikost písma Proč jsou klíčová slova lepší než jednotka em nebo procenta
253
256 256
261 263 264 271
273 277 278 279 280
283
285 287 287 287 289
290 292 293
298 299
300 300 303
306 306
14 Základy přístupnosti
313
Téma přístupnosti v literatuře Pořádný zmatek
315 316
Začíná se blýskat na lepší časy
317
Design z pohledu práva Co se skrývá za paragrafem 508
10
Tvorba webů podle standardů XHTML, CSS, DOM, ECMAScript
319 319
K1045.qxd
30.11.2004
16:02
StrÆnka 11
Úvod Odhalení mýtů o přístupnosti Mýtus: přístupnost vás nutí vytvářet dvě verze webu Mýtus: čistě textová verze webu odpovídá požadavku na rovný nebo ekvivalentní přístup Mýtus: přístupnost je příliš drahá Proč si vystačit s málem, když lze plýtvat tisíci Mýtus: přístupnost nutně přináší nevzhledný, obyčejný design Mýtus: dle paragrafu 508 musí weby vypadat stejně ve všech prohlížečích Mýtus: přístupnost je vyhrazena jen pro postižené Mýtus: Dreamweaver MX či Watchfire’s Bobby jsou lékem na všechny problémy ohledně přístupnosti Mýtus: designéři mohou svévolně ignorovat přístupnost, když to chtějí zákazníci
321 321 322 322 323 324 325 325 326 326
Tipy pro přístupnost, element po elementu
327
Obrázky QuickTime a další druhy streamovaného videa Macromedia Flash 4/5 Macromedia Flash MX Barva CCS Překlápění obrázků a další kouzla se skripty Formuláře Obrazové mapy Tabulkové layouty Tabulky použité pro data Rámce a applety Svítící nebo blikající elementy
327 329 329 329 331 332 334 335 336 336 336 337 337
Bez potřebných nástrojů se neobejdete Pracujeme s Bobby Jak porozumět seznamům Atribut tabindex – náš dobrý přítel Dvě tváře jedné stránky
Plánování přístupu: jak z toho mít prospěch Přístupnost je pro vás přínosem
15 Pracujeme se skripty založenými na DOM Seznamte se s DOM Webové stránky se chovají jako aplikace V čem to funguje?
Tvorba webů podle standardů XHTML, CSS, DOM, ECMAScript
338 338 339 339 343
343 344
345 347 347 350
11
K1045.qxd
30.11.2004
16:02
StrÆnka 12
Obsah Chybějící (inter)akce: prostředí bez DOM Prokletí různé úrovně kompatibility s DOM
352
DOM pod drobnohledem
352
Trochu zábavy s DOM
352
DOM aneb každému to, co si zaslouží Jak to všechno funguje
Zobrazit a skrýt Dynamická menu (roletová a rozvinutelná) Přepínače stylů: lepší přístupnost, větší nabídka
16 Kompletní přestavba v duchu CSS Vytyčení cílů Osobitá povaha Deset hlavních cílů Metoda se špetkou šílenství v patách Jak jde všechno za sebou Zrození celku z jednotlivých částí
Stanovení základních parametrů Instalujeme vedlejší lištu Vše má své místo Potíže s vlastností float, část 999
Vytváříme barevné lišty Problém přizpůsobení barev
Místo pro obsah Jeden box uvnitř druhého
Design založený na pravidlech Tlačítko Domů s využitím CSS efektu překryvu obrázků Fahrnerova metoda záměny obrázků (FIR)
Další využití Fahrnerovy metody záměny obrázků Navigační lišta s využitím CSS/XHTML Trochu stylu neuškodí Odrážky a barevné výplně: jak spojit estetičnost s přístupností
A jdeme do finále
12
350
Tvorba webů podle standardů XHTML, CSS, DOM, ECMAScript
353 353
356 360 362
367 369 369 369 371 372 373
373 375 376 377
378 378
379 379
380 383 384
385 388 389 391
393
K1045.qxd
30.11.2004
16:02
StrÆnka 13
Obsah
Část 3 Příloha A
397
Moderní prohlížeče: není všechno zlato, co se třpytí První vlna standardům vyhovujících prohlížečů
Rejstřík
399 402
405
Tvorba webů podle standardů XHTML, CSS, DOM, ECMAScript
13
