Web design
Kniha o vytváření WWW stránek pro mírně pokročilé. Snažil jsem se o trochu odlišný pohled na věc. Místo obvyklého „máte k dispozici značku X a ta dělá YYY“ jsem dával přednost uspořádání „chcete-li vytvořit Q, můžete použít A nebo B a nebo také C, to však nedoporučuji, protože ZZZ“. Knihu doprovází CD-ROM s obrázky, zdrojovými texty, dokumenty a programy. Začátečníci najdou na CD-ROM úvod do tvorby WWW stránek.
Z dnešního pohledu už nemá jinou hodnotu, než vzpomínku na to, jak vypadal web design druhé poloviny 90. let.
Obsah
Prohlédněte si obálku knihy (39 KB), abyste ji v knihkupectví snadno poznali, a přečtěte si ukázkovou kapitolu, abyste věděli, zda ji máte hledat.
Stránka pro netrpělivé | 3 | |||
Předmluva | 5 | |||
Typografické konvence | 7 | |||
Obsah | 8 | |||
I | Design stránky a serveru | 17 | ||
1 | Jak psát pro Web | 19 | ||
2 | Jak psát pro Web II | 21 | ||
2.1 | Vědět pro koho píši | 21 | ||
2.2 | Prodává obsah | 22 | ||
2.3 | Stručnost | 23 | ||
2.4 | Přehlednost čili strukturovanost | 24 | ||
2.5 | Univerzalita | 25 | ||
2.6 | Rychlost | 27 | ||
2.7 | Obrácená pyramida | 31 | ||
2.8 | Desatera | 32 | ||
3 | Úprava textu | 35 | ||
3.1 | Znaky obyčejné a speciální | 35 | ||
3.2 | Vodorovné mezery | 37 | ||
3.3 | Řádkový zlom | 40 | ||
3.4 | Odstavce | 43 | ||
3.5 | Svislé mezery | 46 | ||
3.6 | Zarovnání textu | 47 | ||
4 | Jak se co píše | 51 | ||
4.1 | Pomlčky | 51 | ||
4.2 | Čísla, číslice, jednotky | 52 | ||
4.3 | Interpunkce, závorky a všeliké značky | 56 | ||
4.4 | Matematické vzorce | 58 | ||
5 | Písmo | 65 | ||
5.1 | Druhy a parametry písma | 65 | ||
5.2 | Vyznačování | 69 | ||
5.3 | Písmo na stránkách | 74 | ||
5.4 | Nadpisy | 77 | ||
5.5 | Výroba nadpisů v praxi | 81 | ||
5.5.1 | Nadpis se stínem | 81 | ||
5.5.2 | Svítící nadpis | 82 | ||
5.5.3 | Vyříznutý nadpis | 82 | ||
5.5.4 | Nápis vystřižený z obrázku | 83 | ||
5.5.5 | Závěrečné upozornění | 83 | ||
5.6 | Další informace | 83 | ||
6 | Speciálně formátovaný text | 85 | ||
6.1 | Odsazení bloku čili úzké řádky | 85 | ||
6.2 | Seznamy | 88 | ||
6.3 | Ukázky souborů a programů | 93 | ||
6.4 | Poznámky | 95 | ||
6.5 | Vícesloupcový text | 98 | ||
6.6 | Básně | 100 | ||
6.7 | Divadelní hra neboli drámo | 102 | ||
7 | Barvy | 105 | ||
7.1 | Špetka teorie | 105 | ||
7.2 | Bezpečné barvy | 109 | ||
7.3 | Vnímání barev | 111 | ||
7.4 | Harmonie a kontrast | 113 | ||
7.5 | Barvy na stránkách | 115 | ||
7.6 | Další informace | 118 | ||
8 | Tabulky | 119 | ||
8.1 | Nebezpečí tabulek | 119 | ||
8.2 | Rámečky ano či ne? | 122 | ||
8.3 | Tipy pro přípravu tabulek | 126 | ||
8.4 | Mezery mezi buňkami | 128 | ||
8.5 | Stránkotvorné tabulky | 131 | ||
8.6 | Kouzla a čáry | 135 | ||
9 | Rámy | 139 | ||
9.1 | Rámy nebo tabulky? | 140 | ||
9.2 | Přece jenom rámy... | 141 | ||
9.3 | Další informace | 144 | ||
10 | Čeština na stránkách | 145 | ||
10.1 | Řešení primitivovo | 145 | ||
10.2 | Řešení futuristovo | 146 | ||
10.3 | Řešení Indiánovo | 147 | ||
10.4 | Řešení Pytlíkovo | 147 | ||
10.5 | Řešení prodavače disků | 148 | ||
10.6 | Jak pracovat s češtinou | 149 | ||
10.7 | Další informace | 150 | ||
11 | Navigace | 151 | ||
11.1 | Odkazy | 151 | ||
11.2 | Navigační prvky stránky | 156 | ||
11.3 | Navigační lišty | 158 | ||
11.4 | Orientační mapa | 161 | ||
11.5 | Vyhledávání | 162 | ||
11.6 | Podpůrné programy | 163 | ||
11.7 | Externí hledači a spolupráce s nimi | 164 | ||
12 | Návrh serveru či prezentace | 167 | ||
12.1 | Základní principy | 168 | ||
12.2 | Struktura prezentace | 170 | ||
12.3 | Prototypy a standardní postupy | 171 | ||
II | Grafika a multimédia | 175 | ||
13 | Grafické formáty | 177 | ||
13.1 | GIF | 178 | ||
13.2 | JPEG | 182 | ||
13.3 | PNG | 184 | ||
13.4 | Firemní formáty | 188 | ||
13.5 | Který je nejlepší? | 188 | ||
13.6 | Další informace | 190 | ||
14 | Grafika pro Web | 191 | ||
14.1 | Proč nepoužívat knihovny ikon | 191 | ||
14.2 | Obrázkové CD-ROMy | 193 | ||
14.3 | Digitalizační nářadí | 194 | ||
14.4 | Koncové úpravy vzhledu | 195 | ||
14.5 | Vrhání stínu | 198 | ||
14.6 | Hladké hrany čili antialiasing | 200 | ||
14.7 | Zmenšování objemu dat | 201 | ||
14.8 | Obrázky pro ty ostatní aneb ALT | 203 | ||
14.9 | Grafika na pozadí stránky | 205 | ||
14.10 | Další informace | 207 | ||
15 | Obrázky s klikou | 209 | ||
15.1 | Klasika | 210 | ||
15.2 | Klika u klienta | 212 | ||
15.3 | Jak ji obejít | 213 | ||
15.4 | Podpůrné programy | 215 | ||
15.4.1 | MapThis | 216 | ||
15.4.2 | Live Image | 217 | ||
15.4.3 | MapEdit | 218 | ||
16 | Animace | 219 | ||
16.1 | Animované GIFy | 219 | ||
16.1.1 | Microsoft GIF Animator | 222 | ||
16.1.2 | Ulead GIF Animator | 223 | ||
16.1.3 | WhirlGif | 224 | ||
16.2 | Filmové klipy | 225 | ||
16.3 | Alternativní metody | 227 | ||
17 | Slova, hudba, šumy, svisty | 229 | ||
17.1 | Způsoby ukládání zvuku | 230 | ||
17.2 | Prostředky pro práci | 231 | ||
17.2.1 | GoldWave | 231 | ||
III | Aktivní stránky | 235 | ||
18 | Common Gateway Interface (CGI) | 237 | ||
18.1 | Jak pracuje | 237 | ||
18.2 | Hegemon zvaný Perl | 240 | ||
18.3 | Vstup programu | 240 | ||
18.4 | Výstup | 244 | ||
18.5 | Telefonní seznam - metoda GET | 245 | ||
18.6 | Dopis správci - metoda POST | 247 | ||
18.7 | Ladění CGI | 249 | ||
18.8 | CGI a bezpečnost | 253 | ||
18.9 | Další informace | 256 | ||
19 | Formuláře aneb příručka vyzvědače | 257 | ||
19.1 | Samotný nebo vestavěný? | 258 | ||
19.2 | Koncepce | 259 | ||
19.3 | Konstrukce formuláře | 262 | ||
19.4 | Předávání souborů | 264 | ||
20 | JavaScript a Java | 269 | ||
20.1 | JavaScript | 269 | ||
20.2 | JavaScript na stránkách | 270 | ||
20.3 | Java | 272 | ||
20.4 | Java na stránkách | 273 | ||
20.5 | Další informace | 274 | ||
IV | IV Nástroje | 275 | ||
21 | Adresy informací čili URL | 277 | ||
21.1 | Uniformní Rodinka | 277 | ||
21.2 | Základní tvar URL | 278 | ||
21.3 | Nejběžnější schémata | 281 | ||
21.3.1 | HTTP | 281 | ||
21.3.2 | FTP | 281 | ||
21.3.3 | Gopher | 282 | ||
21.3.4 | Mailto | 283 | ||
21.3.5 | News | 283 | ||
21.3.6 | NNTP | 284 | ||
21.3.7 | Telnet | 285 | ||
21.3.8 | File | 285 | ||
21.4 | Relativní URL | 286 | ||
21.4.1 | Jak určit základní URL | 287 | ||
21.4.2 | Analýza relativního URL | 288 | ||
21.4.3 | Neobvyklosti a nebezpečí | 290 | ||
22 | HyperText Markup Language verze 3.2 | 291 | ||
22.1 | Struktura dokumentu | 291 | ||
22.2 | Značky, atributy, symboly | 292 | ||
22.3 | Záhlaví stránky | 294 | ||
22.4 | Tělo stránky a komentáře | 298 | ||
22.5 | Písmo | 299 | ||
22.6 | Strukturování a formátování textu | 302 | ||
22.7 | Odkazy | 305 | ||
22.8 | Seznamy | 306 | ||
22.9 | Obrázky | 309 | ||
22.10 | Aplety | 311 | ||
22.11 | Tabulky | 312 | ||
22.12 | Formuláře a spolupráce s CGI programy | 317 | ||
22.13 | Klientova klika | 323 | ||
22.14 | Další informace | 324 | ||
23 | Kaskádové definice stylu | 327 | ||
23.1 | Základy CSS | 328 | ||
23.2 | Selektory | 329 | ||
23.3 | Vazba stylu a stránky | 334 | ||
23.4 | Dědičnost a kaskádování | 337 | ||
23.5 | Formátování | 339 | ||
23.6 | Vlastnosti | 343 | ||
23.6.1 | Písmo | 344 | ||
23.6.2 | Barva a pozadí | 346 | ||
23.6.3 | Text | 349 | ||
23.6.4 | Vlastnosti bloku | 351 | ||
23.6.5 | Klasifikační vlastnosti | 355 | ||
23.7 | CSS a klienti | 357 | ||
23.8 | Další informace | 358 | ||
24 | Rozšíření HTML a kaskádových stylů | 359 | ||
24.1 | Tabulky | 360 | ||
24.2 | Rámy | 364 | ||
24.3 | Vkládání dalších prvků na stránky | 374 | ||
24.4 | Vrstvy | 376 | ||
25 | HyperText Transfer Protocol (HTTP) | 379 | ||
25.1 | Základní model | 379 | ||
25.2 | Dotaz a odpověď | 381 | ||
25.3 | Metody | 382 | ||
25.4 | Základní hlavičky | 384 | ||
25.5 | Vylepšené dotazy | 385 | ||
25.6 | Vyrovnávací paměti | 386 | ||
26 | Programové vybavení | 389 | ||
26.1 | WWW klient | 389 | ||
26.1.1 | Netscape Communicator | 390 | ||
26.1.2 | Microsoft Internet Explorer | 391 | ||
26.1.3 | Amaya | 392 | ||
26.1.4 | Arachne | 394 | ||
26.1.5 | Lynx | 394 | ||
26.2 | WWW server | 394 | ||
26.2.1 | Apache | 395 | ||
26.2.2 | Microsoft Internet Information Server | 396 | ||
26.3 | Editor | 396 | ||
26.3.1 | vim (vi improved) | 397 | ||
26.3.2 | Microsoft FrontPage | 398 | ||
26.4 | Kontroly a prověrky | 398 | ||
26.4.1 | weblint | 399 | ||
26.5 | Výroba obrázků | 399 | ||
26.5.1 | Adobe Photoshop | 400 | ||
26.5.2 | Corel PHOTO-PAINT | 401 | ||
26.5.3 | Paint Shop Pro | 401 | ||
26.5.4 | GIMP | 402 | ||
27 | Doprovodný CD-ROM | 403 | ||
28 | Zajímavé odkazy | 405 | ||
Literatura | 407 | |||
Rejstřík | 409 |
Součástí knihy je CD-ROM, obsahující
- barevné verze prakticky všech obrázků
- zdrojové texty příkladů
- rozšiřující texty vlastní (základy programování v jazycích Java a JavaScript, prvních 10 kapitol seriálu HTML v příkladech pro počáteční seznámení s problematikou) i oficiální (dokumenty WWW konsorcia, vybraná RFC a podobně)
- programové vybavení a datové soubory
Doplňky
Referenční karta HTML 3.2 poskytuje přehled prvků a symbolů definovaných v této verzi HTML.
Odezva čtenářů
Tak Vám tedy moc pěkně děkuji, už dlouho mě žádná kniha tak dokonale nenaprdla, jako ta Vaše. Chvílemi jsem ji musel odložit a dlouho na ni uraženě hledět.
Na jaře tohoto roku jsem vybrečel na zaměstnavateli 1 MB Webu u Eunetu. Vzápětí jsem v šibeničním termínu a bez hlubších znalostí spáchal svoji WWW prvotinu, tehdá ještě za pomoci Notepadu. Na profesionály samozřejmě peníze nebyly. Má pýcha a nadšená hrdost (jde o první WWW stránky profesionálních hasičů v ČR) byla krutě raněna přečtením Vašich stránek, neboť jsem se dopustil téměř všech Vámi vytýkaných začátečnických chyb. Okolo stran 100–150 Vaší knihy jsem se už málem rozplakal.
Přesto bych chtěl za tuto Vaši práci poděkovat, dobře se to čte a ten CD je opravdu velmi výživný. Nezbývá mi nic jiného, než schrastit trochu času a pustit se do předělání našich stránek do podoby, která by neurážela odborníky Vašeho kalibru.
Miloš Jakubík
Dříve jsem odezvy čtenářů nekomentoval, ale u tohoto dopisu mám pocit, že bych měl. Známé rčení říká, že učený z nebe nespadl. Začátečnické chyby tudíž nelze nedělat, důležité je snažit se o vlastní rozvoj, abychom si je po čase uvědomili a uměli je odstranit. Pokud k tomu má kniha alespoň trochu přispěje, budu spokojen. Mimochodem – jedním z mých současných problémů je, kde najít čas na přepracování řady mých stránek z dřívějších dob, aby byly v souladu s tím, co jsem napsal.
Pavel Satrapa
Knihu vydal Neokortex, s. r. o. v roce 1997.
ISBN: 80-902230-1-X