Projektowanie serwisw WWW.

Standardy sieciowe. Wydanie II

Autor: Jeffrey Zeldman
Tumaczenie: Szymon Kobalczyk
ISBN: 83-246-0774-9
Tytu oryginau: Designing with Web Standards (2nd Edition)
Format: B5, stron: 464

Dostosuj swoje witryny do obowizujcych standardw

Poznaj standardowe technologie sieciowe
Naucz si pisa strony poprawnie wywietlane we wszystkich przegldarkach
Zredukuj koszty utrzymania witryny
Dziki ludziom takim jak Jeffrey Zeldman w wiecie technologii internetowych coraz
wiksz uwag przywizuje si do standardw. Dotyczy to take producentw
popularnych przegldarek internetowych, dlatego wreszcie moliwe jest tworzenie
efektownych witryn, ktre wygldaj identycznie u uytkownikw korzystajcych
z rnych programw. Jednak nie jest to jedyna zaleta stosowania standardw. Za ich
pomoc moesz sprawi, e Twoje strony bd dziaay szybciej, a ich aktualizacja
stanie si duo atwiejsza, co przeoy si rwnie na koszty utrzymania witryny.
rojektowanie serwisw WWW. Standardy sieciowe. Wydanie II to zaktualizowana
wersja niezwykle popularnego, praktycznego przewodnika po wiecie standardowych
technologii internetowych. Dowiesz si z niego, czym s standardy sieciowe oraz
dlaczego warto si do nich stosowa. Poznasz sposoby projektowania i tworzenia
witryn z uwzgldnieniem standardw. Nauczysz si korzysta z jzykw XHTML, XML,
CSS, ECMAScript oraz modelu DOM, ktre s wykorzystywane do pisania atwych w
pielgnacji serwisw WWW. Przeczytasz rwnie o mechanizmach uatwie dostpu
oraz mitach zwizanych z nimi. Jest to lektura obowizkowa dla wszystkich
projektantw i programistw, ktrzy chc tworzy nowoczesne witryny internetowe.

Wydawnictwo Helion
ul. Kociuszki 1c
44-100 Gliwice
tel. 032 230 98 63
e-mail: helion@helion.pl

Przegld standardw sieciowych

Projektowanie i tworzenie serwisw zgodnie ze standardami
Walka z szybko starzejcymi si witrynami
Nadawanie spjnego stylu witrynom za pomoc arkuszy CSS
Pisanie przejrzystego kodu za pomoc jzyka XHTML
Tworzenie skryptw manipulujcych modelem DOM
Obsuga rnych przegldarek
Stosowanie mechanizmw uatwie dostpu
Wykorzystuj sprawdzone techniki, ktre zaoszczdz czas i pienidze
zarwno Twoje, jak i uytkownikw Twoich witryn

Spis treci

Wprowadzenie ................................................................ 17
Nie wszystko dla wszystkich ........................................................................ 17
Teoria a praktyka .................................................................................. 19
Cigo, a nie zbir sztywnych regu .......................................................... 20
Pokazuj, nie sprzedawaj ........................................................................ 20
Niech praca sprzedaje si sama ............................................................. 21
Sprzeda wewntrz firmy ...................................................................... 22
Zapach zmian .............................................................................................. 23
Cz I > Houston, mamy problem
Zanim zaczniesz .............................................................. 27
Nakrcanie kosztw, zmniejszanie zwrotw ................................................. 28
Przerwanie cyklu starzenia si .................................................................... 30
Czym jest zgodno w przd? ....................................................................... 31
adnych zasad, adnego dogmatu ............................................................... 33
Praktyka, nie teoria ..................................................................................... 35
Czy ta podr jest naprawd potrzebna? ...................................................... 37
1

99,9% witryn wci jest przestarzaych .................................. 39

Nowoczesne przegldarki i standardy sieciowe .............................................. 40
Nowy kod do nowej pracy ...................................................................... 42
Problem wersji ......................................................................................... 43
Mylenie wsteczne ....................................................................................... 46
Przestarzae znaczniki: dodatkowy koszt dla wacicieli witryn ............. 50
Zgodno wstecz .................................................................................... 52
Blokowanie uytkownikw nie wpywa dobrze na interesy ..................... 53
Droga do Pacanowa .............................................................................. 57
Dobre traktowanie zego kodu ..................................................................... 58
Lek .............................................................................................................. 61

Projektowanie serwisw WWW. Standardy sieciowe

2

Projektowanie i budowanie z uyciem standardw .....................63

Pokonywanie trudnoci ................................................................................ 65
Koszt projektowania przed wprowadzeniem standardw ............................. 66
Nowoczesna strona starymi metodami ......................................................... 67
Krlestwo tragedii ....................................................................................... 71
Trzy elementy standardw sieciowych ......................................................... 74
Struktura .............................................................................................. 74
Prezentacja ........................................................................................... 77
Zachowanie ............................................................................................ 77
W praktyce .................................................................................................. 78
Zalety metod przejciowych ......................................................................... 79
Projekt standardw sieciowych: przenono w zastosowaniu ...................... 81
Jeden dokument dla wszystkich ............................................................. 82
A List Apart: jedna strona, wiele widokw .................................................. 84
Projektowanie nie tylko z przeznaczeniem na ekran .............................. 86
Oszczdno czasu i kosztw, wzrost zyskw ......................................... 87
Co dalej? ...................................................................................................... 88
Przejciowa zgodno w przd (projektowanie hybrydowe) .................... 88
Cakowita zgodno w przd .................................................................. 91

Problem ze standardami .....................................................95

Mio popatrze, trudno zakodowa ............................................................... 95
Wsplne zamiary, wsplne rodki .......................................................... 97
Przyjcie standardw a rzeczywisto .................................................... 98
2000 rok, w ktrym przegldarki osigny dojrzao .......................... 100
IE5/Mac: przeczanie i powikszanie .................................................. 100
Mocne posunicie Netscapea ............................................................... 101
Przeamanie tamy ................................................................................ 104
Za mao, za pno? .................................................................................... 105
CSS: pierwsze koty za poty ................................................................. 106
Ze przegldarki prowadz do zych praktyk .............................................. 107
Kltwa zego odwzorowywania ............................................................. 107
Brak dziedziczenia ............................................................................... 109
Ze zachowanie .................................................................................... 110
Dugo oczekiwany standard w jzykach skryptowych .......................... 111
Mao czytelne witryny, niezrozumiae nazewnictwo .................................... 112
Problemy akademickie a problemy ekonomiczne .................................. 113
Konsorcjum sugeruje, firmy sprzedaj ................................................ 114
wiadomo produktu a wiadomo standardw ................................ 114
Sowo na F ................................................................................................ 116
Warto Flasha ................................................................................... 117
Problem z Flashem .............................................................................. 119
Inny problem z Flashem ...................................................................... 119
Zgodno to brzydkie sowo ....................................................................... 120
Potga jzyka w formowaniu percepcji ................................................ 120
Problem z inspiracj ............................................................................ 121
Inne problemy ..................................................................................... 122

Spis treci
4

Wyszukiwanie, syndykacja, blogi, podkasty i dugi ogon

(oraz inne powody zwycistwa standardw sieciowych) ..............125
Uniwersalny jzyk (XML) ......................................................................... 127
Porwnanie XML-a i HTML-a ........................................................... 129
Jeden rodzic, wiele dzieci ..................................................................... 129
Niezbdny element profesjonalnego oprogramowania .......................... 130
Bardziej popularny ni biay raper ...................................................... 131
Pi spraw wiadczcych o potdze technologii .................................... 133
Zota ya innowacji ............................................................................ 134
Narzdzia do publikacji dla caej reszty ............................................... 139
Do twoich usug ................................................................................... 139
Aplikacje XML a twoja witryna ................................................................. 141
Kompatybilne z natury .............................................................................. 142
Nowa era wsppracy ................................................................................. 143
Testy i specyfikacje ............................................................................. 143
Jak mona ze sob wsppracowa? ..................................................... 144
Grupa robocza WHAT ........................................................................ 145
Internet Explorer 7 i projekt standardw sieciowych .......................... 145
Standardy sieciowe i narzdzia edycyjne ................................................... 146
Grupa zadaniowa Dreamweaver .......................................................... 146
Narzdzia WYSIWYG staj si penoletnie
(dwa z trzech to nie najgorzej) ............................................................ 148
Od FrontPage do Expression Web Designer ....................................... 148
Nadejcie ukadw CSS ............................................................................. 149
Kampania uaktualniania przegldarek ................................................ 150
Pocztek potopu .................................................................................. 154
Skd czerpa style? ............................................................................. 155
Najwiksza skarbnica wiedzy o CSS .................................................... 158
Chwilowa moda o ustalonym przeznaczeniu ........................................... 158
Upowszechnianie standardw sieciowych ................................................... 159
Witryny komercyjne daj si ponie fali ............................................. 162
Wired Digital zmienia technologi ....................................................... 162
Zachcanie projektantw ..................................................................... 164
Cigle pojawiaj si nowe hity ............................................................. 164
Droga do sukcesu jest wybrukowana walidacj ................................... 165

Cz II > Projektowanie i budowanie

5

Nowoczesny ukad znacznikw ............................................171

Ukryty schemat kiepskiego kodu ............................................................... 176
Przeformuowanie czego? .......................................................................... 178
Podsumowanie .......................................................................................... 180
Ktry XHTML jest dla mnie najlepszy? .................................................... 180
XHTML 2 nie dla kadego ............................................................. 181
10 najwaniejszych powodw, dla ktrych warto wybra XHTML ...... 182
5 powodw, dla ktrych nie warto wybiera XHTML-a ....................... 183

Projektowanie serwisw WWW. Standardy sieciowe

6

XHTML: restrukturyzacja sieci ............................................ 185

Konwersja do XHTML-a: proste zasady, atwe wytyczne .......................... 186
Dokument rozpoczynaj od deklaracji DOCTYPE i przestrzeni nazw .. 186
Zadeklaruj typ zawartoci strony ........................................................ 189
Wszystkie znaczniki pisz maymi literami ............................................ 191
Wartoci wszystkich atrybutw umieszczaj w cudzysowach ................ 194
Przypisuj wartoci wszystkim atrybutom ............................................ 195
Zamykaj wszystkie znaczniki ............................................................... 196
Zamykaj rwnie puste znaczniki ..................................................... 196
Nie umieszczaj podwjnych mylnikw w komentarzach ..................... 197
Koduj wszystkie znaki < i & ................................................................ 198
Podsumowanie zasad XHTML-a ............................................................... 198
Kodowanie znakw: nudne, bardzo nudne i potwornie nudne .............. 199
Leczenie strukturalne .......................................................................... 200
Sensowne kodowanie dokumentu ......................................................... 201
Elementy wizualne i struktura ................................................................... 205

Struktura w ukadzie cisym i hybrydowym:

gwarancja zwartych i trwaych stron .................................... 207
Czy kady element musi by strukturalny? ................................................ 208
div, id i inni pomocnicy ........................................................................ 209
Semantyczny kod i wielokrotne uycie ................................................. 214
Ukady hybrydowe i spjny kod: co naley, a czego nie wolno .................... 218
Nazwijmy ze rzeczy po imieniu ........................................................... 219
Powszechne bdy w ukadach hybrydowych ........................................ 219
Znaczniki div s w porzdku ................................................................ 223
Pokocha atrybut id ............................................................................ 224
Zakaz stosowania nadmiarowych komrek tabel .................................. 226
Parada przestarzaych metod .................................................................... 227
Czas map ............................................................................................. 227
Niezadowolenie z map .......................................................................... 228
Brak dostpu, brak struktury .............................................................. 229
Cicie i skadanie ................................................................................. 229
Dojrzewanie metody cicia i skadania ................................................. 230
Nadmierna rozwleko nadmiernie rozwlekych tabel ........................... 232
Powraca zy CSS ................................................................................. 233
Co dalej? .............................................................................................. 237

XHTML w przykadach: ukad hybrydowy (cz I) .................... 239

Zalety metod hybrydowych zastosowanych w tym rozdziale ....................... 239
Arkusze stylw zamiast JavaScriptu ................................................... 240
Podstawowe podejcie (wstp) ................................................................... 241
Oddzielne tabele: korzyci pod wzgldem CSS
i funkcji uatwie dostpu .................................................................... 241
Pomi nawigacj co i jak ................................................................ 242
Dodatkowe atrybuty id ........................................................................ 247

Spis treci
Pierwszy kod taki sam jak ostatni ............................................................. 249
Kod nawigacji (pierwsza tabela) .......................................................... 249
Prezentacja, semantyka, czysto i grzech ........................................... 250
Kod treci (druga tabela) .................................................................... 252
9

Podstawy CSS ................................................................253

Wstp do CSS ........................................................................................... 253
Korzyci z CSS .................................................................................... 254
Anatomia stylw ........................................................................................ 256
Selektory, deklaracje, waciwoci i wartoci ....................................... 256
Wielokrotne deklaracje ........................................................................ 257
Biaa przestrze i brak rozpoznawania wielkoci znakw .................... 258
Wartoci oglne i alternatywne ............................................................ 259
Selektory grupowe ............................................................................... 260
Dziedziczenie i jego przeciwnicy .......................................................... 260
Selektory potomne ............................................................................... 262
Selektory id i selektory potomne .......................................................... 263
Selektory klas ...................................................................................... 264
czenie selektorw do tworzenia zaawansowanych efektw ............... 265
Style zewntrzne, osadzone i bezporednie ................................................ 268
Zewntrzne arkusze stylw .................................................................. 268
Style bezporednie ............................................................................... 271
Metoda najlepszego moliwego scenariusza ............................................ 272
Od stylw osadzonych do zewntrznych: metoda dwch arkuszy ......... 272
Wzgldne i absolutne cieki plikw .................................................... 275
Korzyci pynce ze stosowania metod najlepszego moliwego
scenariusza i dwch arkuszy stylw ..................................................... 275

10 Zastosowanie CSS: ukad hybrydowy (cz II) .........................277

Przygotowanie ilustracji ............................................................................ 278
Ustalenie podstawowych parametrw ........................................................ 280
Style oglne, wicej na temat skrtw i marginesw ............................ 280
Elementy niewidoczne i blokowe .......................................................... 281
Kolory odnonikw (wprowadzamy pseudoklasy) ................................ 284
Poprawiamy inne pospolite elementy ................................................... 286
Wicej na temat rozmiarw czcionek ................................................... 288
Ustalenie ukadu strony ...................................................................... 292
Elementy nawigacyjne: pierwsze podejcie ................................................ 295
CSS dla elementw nawigacyjnych: pierwsza prba przy drugim podejciu 299
CSS dla elementw nawigacyjnych: ostatnie podejcie .............................. 301
Ostatnie kroki: style zewntrzne oraz efekt jeste tutaj ......................... 305

Projektowanie serwisw WWW. Standardy sieciowe

11 Praca z przegldark.
Cz I: przeczanie przez typ dokumentu i tryb standardowy .... 309
Saga o przeczaniu przez deklaracj typu dokumentu .............................. 310
Sterowanie interpretacj w przegldarce:
przecznik typu dokumentu ................................................................ 313
Pena lista kompletnych deklaracji typu dokumentu XHTML ............ 316
witujmy rnorodno przegldarek!
(A przynajmniej nauczmy si z ni y) ..................................................... 320
12 Praca z przegldark.
Cz II: model ramkowy, bdy i sposoby radzenia sobie z nimi ... 327
Model ramkowy i jego niedocignicia ....................................................... 328
Jak dziaa model ramkowy? ................................................................. 330
Jak model ramkowy zosta zepsuty? .................................................... 331
Sztuczka z modelem ramkowym: CSS stanie si bardziej
demokratyczny dziki odpowiednim zabezpieczeniom .......................... 338
Bd znakw odstpu w IE dla Windows ................................................... 341
Bd waciwoci float w IE6 dla Windows ............................................. 345
Float, Peek-a-Boo i co jeszcze ............................................................. 348
Flash i QuickTime: obiekty podania? ..................................................... 349
Obiekty osadzane: opowie o prnoci i zemcie ................................ 349
Dwie pieczenie na jednym ogniu: osadzanie obiektw
multimedialnych przy przestrzeganiu standardw ............................... 351
yka dziegciu w beczce miodu: <object> nie dziaa .......................... 352
wiat, w ktrym omijanie bdw jest codziennoci .................................. 353
13 Praca z przegldark. Cz III: typografia ............................. 357
Rozmiar ma znaczenie ............................................................................... 357
Kontrola uytkownika ............................................................................... 358
Horrory starej szkoy ................................................................................. 358
Punkty sporne ..................................................................................... 360
Nareszcie standardowy rozmiar ................................................................. 361
Wszelkie starania zniweczone przez jedno kliknicie ............................ 364
Upojenie wszycieli: za reakcja na zmiany w przegldarkach ............. 365
Standardowe rozmiary i najlepsze praktyki ......................................... 367
Jednostki em: rado i pacz ...................................................................... 368
Ustawienia uytkownika a jednostki em .............................................. 368
Pasja do pikseli ......................................................................................... 369
Najmniejsza jednostka: to rzecz cakowicie wzgldna .......................... 370
Kopot z pikselami ............................................................................... 372
Metoda symbolicznych wartoci rozmiarw czcionek ................................. 373
Dlaczego wartoci symboliczne wygrywaj z jednostkami em
i procentami? ...................................................................................... 373
Pocztkowe problemy w implementacji wartoci symbolicznych .......... 374
Twj rozmiar ....................................................................................... 378

Spis treci
14 Podstawowe mechanizmy uatwie dostpu ............................379
Dostpno wedug podrcznikw .............................................................. 381
Powszechna dezorientacja ......................................................................... 383
Zy duch macza w tym palce ................................................................ 383
Prawo a elementy ukadu .......................................................................... 387
Wyjaniamy znaczenie paragrafu 508 ................................................. 388
Obalamy mity dostpnoci ......................................................................... 390
Mit: dostpno zmusza ci do tworzenia dwch wersji witryny ........... 390
Mit: wersja tekstowa zaspokaja wymagania rwnego
lub rwnorzdnego dostpu ................................................................. 391
Mit: dostpno kosztuje zbyt wiele ..................................................... 391
Mit: dostpno wymusza tworzenie prymitywnych,
sabej jakoci projektw ....................................................................... 394
Mit: zgodnie z paragrafem 508 witryna musi wyglda tak samo
we wszystkich przegldarkach i agentach uytkownika ....................... 394
Mit: dostpno jest tylko dla osb niepenosprawnych .................... 395
Mit: Dreamweaver MX/Cynthia Says/LIFT/ Tutaj wstaw
nazw narzdzia rozwizuje wszystkie problemy dostpnoci ............... 395
Mit: projektanci mog swobodnie ignorowa przepisy
o dostpnoci, jeli tak nakazuj im klienci ......................................... 396
Uatwienia dostpu element po elemencie .................................................. 397
Obrazki ............................................................................................... 397
Apple QuickTime i inne przesyane strumieniowo obrazy wideo .......... 400
Macromedia Flash 4/5 ......................................................................... 400
Macromedia Flash MX i Flash 8 ......................................................... 401
Kolory ................................................................................................. 402
CSS ..................................................................................................... 403
Efekty najedania oraz inne zachowania implementowane
w skryptach .......................................................................................... 405
Formularze ......................................................................................... 407
Mapy obrazu ....................................................................................... 407
Ukady oparte na tabelach .................................................................. 408
Tabele przechowujce dane ................................................................. 408
Ramki i aplety ..................................................................................... 408
Elementy byskajce lub migajce ....................................................... 408
Sprawdzone narzdzia ............................................................................... 409
Pokochaj Cynthie ...................................................................................... 410
Zachowaj kolejno: nasz dobry znajomy atrybut tabindex .................. 411
Planowanie dostpu: jak na tym skorzystasz ............................................. 416
15 Wykorzystanie skryptw opartych na modelu DOM ....................419
DOM wedug podrcznikw ....................................................................... 420
Co to jest DOM? ........................................................................................ 422
Standardowy sposb na to, by strony WWW zachowyway si
jak aplikacje ....................................................................................... 422
Zatem gdzie to dziaa? ......................................................................... 424

10

Projektowanie serwisw WWW. Standardy sieciowe

Prosz, DOM, nie zrb im krzywdy ..................................................... 425
Przeczniki stylw: uatwiaj dostp, oferuj wybr ........................... 429
16 Przeprojektowywanie z zastosowaniem CSS ........................... 433
Definiujemy wymagania ............................................................................ 434
10 najwaniejszych wymaga .............................................................. 434
Kadziemy fundamenty ........................................................................ 436
Zabawa z nagwkami ......................................................................... 441
Zakoczenie ......................................................................................... 444
> Dodatki
Biblioteczka standardw sieciowych .................................... 457
Skorowidz .................................................................... 449

ROZDZIA PIERWSZY

99,9% witryn wci

jest przestarzaych

est taka choroba, ktra dotyka niemal kad witryn znajdujc

si obecnie w sieci, od najskromniejszej strony domowej po portale korporacyjnych gigantw. Przebiega i podstpna, rozprzestrzenia si niemal nierozpoznana, poniewa bazuje na standardach przemysu sieciowego. Chocia projektanci i waciciele stron mog o tym
jeszcze nie wiedzie, 99,9% witryn jest przestarzaych.
Strony mog wyglda i zachowywa si prawidowo w popularnych
przegldarkach. Ale poza tym tolerujcym bdy rodowiskiem zaczynaj by ju widoczne symptomy choroby i rozkadu.

W nowych wersjach przegldarki Microsoft Internet Explorer, Opera

Software, Netscape Navigator i Mozilla (przegldarka typu open
source bazujca na silniku Gecko, ktrego kod jest sterownikiem midzy innymi takich rodowisk jak Firefox, Camino i Netscape Navigator) starannie zbudowane ukady stron zaczynaj si rozpada,
a kosztowne mechanizmy zachowa przestaj funkcjonowa. Wraz
z ewolucj tych przegldarek wydajno stron bdzie stale spada.
W mniej znanych przegldarkach, urzdzeniach przystosowanych do
potrzeb osb niepenosprawnych, a take w zyskujcych popularno
palmtopach czy telefonach komrkowych z dostpem do sieci, wikszo stron nigdy nie dziaaa, podczas gdy pozostae dziaaj jedynie czciowo. W zalenoci od potrzeb i budetu waciciele witryn
oraz sami projektanci ignorowali tego typu rodowiska lub zauwaali
ich istnienie i zasilali je specjalnie przygotowanym kodem w taki sam
sposb, jak dla zwykych przegldarek.

40

Rozdzia 1 > 99,9% witryn wci jest przestarzaych

Aby zrozumie bezsens takich dziaa i zobaczy, w jaki sposb zwikszaj

one koszty i komplikuj rozwj witryny, nigdy nie doprowadzajc do osignicia zamierzonego celu, musimy przeanalizowa zachowanie nowoczesnych przegldarek i dostrzec rnice wystpujce midzy nimi a ich starszymi niezgodnymi wersjami.

Nowoczesne przegldarki i standardy sieciowe

Mwic w tej ksice o nowoczesnych lub zgodnych ze standardami
przegldarkach, mam na myli przegldarki, ktre rozpoznaj oraz obsuguj HTML i XHTML, kaskadowe arkusze stylw (CSS), ECMAScript
oraz model obiektw dokumentu (W3C DOM). Wszystkie standardy zebrane razem pozwol nam wznie si ponad prezentacyjny ukad znacznikw, niezgodne jzyki skryptowe oraz bdcy ich wynikiem nieustajcy
proces starzenia si witryn.
Do nowoczesnych przegldarek zaliczaj si midzy innymi: zdobywca wielu
nagrd, darmowa przegldarka Firefox 1.5+ oraz jej niemrawy komercyjny brat Netscape Navigator 8, Microsoft Internet Explorer 6 i nowsze
dla Windows, Safari 2.0+ firmy Apple dla systemu Macintosh OS X oraz
Opera 8.5+ firmy Opera Software. (Czy pominem Twoj ulubion zgodn ze standardami przegldark? Nie miaem zamiaru jej lekceway. Kada
prba wyliczenia wszystkich przegldarek zgodnych ze standardami jest
z gry skazana na niepowodzenie). Mimo e bd stosowa termin zgodna
ze standardami, prosz pamita o tym, co zostao powiedziane we wstpie: adna z przegldarek nie jest i nie moe by cakowicie zgodna ze standardami.
Jednak brak perfekcji przegldarek nie zwalnia z denia do zgodnoci ze
standardami. Miliony ludzi nadal uywaj Internet Explorera 5 i 5.5 dla
Windows. Jeli chodzi o zachowanie standardw, te przegldarki s gorsze od IE6+, Firefoxa, Opery i Safari. Czy to oznacza, e jeli nasz serwis
odwiedzaj uytkownicy tych przegldarek, powinnimy zapomnie o standardach sieciowych? A moe powinnimy zaproponowa im dokonanie uaktualnienia oprogramowania lub rezygnacj z naszych usug? Nie. Projektowanie zorientowane na standardy sieciowe nie oznacza i nie wymaga
projektowania wycznie dla najnowszych przegldarek.

Nowoczesne przegldarki i standardy sieciowe

Dziwny przypadek Internet Explorera 5

dla komputerw Macintosh
Przegldarka Internet Explorer 5 w wersji dla komputerw Macintosh, w rwnym stopniu wielbiona co pitnowana przez projektantw,
zajmuje szczeglne miejsce w historii standardw sieciowych. W latach 1990-tych inynier Tantek elik by reprezentantem Microsoftu
w ramach grup roboczych W3C HTML i CSS. Kiedy jego przeoeni
zlecili mu zarzdzanie zespoem tworzcym Internet Explorera 5 dla
komputerw Macintosh, Tantek woy w to zdanie ca swoj wiedz
i pasj do standardw sieciowych. Wsppracowa nawet bezporednio
z kluczowymi czonkami projektu standardw sieciowych w celu przetestowania zgodnoci przegldarki z nowatorskimi wczenie stronami opartymi na jednokolumnowym ukadzie CSS oraz obmylenia rozszerze interfejsu uytkownika, dziki ktrym strony byyby bardziej
przystpne. W efekcie powsta produkt, ktry obsugiwa standardy
sieciowe bardziej dogbnie i z wiksz dokadnoci ni jakikolwiek
inny przed nim. Internet Explorer 5 dla Macintoshy, cieszcy si sporym uznaniem od momentu udostpnienia w 2000 roku, by pierwsz
przegldarka zgodn ze standardami.
Niefortunnie dla Tanteka zgodno ze standardami Internet Explorera 5 dla Macintoshy sprawiaa, e Internet Explorer dla Windows wyglda przy nim jak zacofany starszy brat. Microsoft wynagrodzi
elika, zabraniajc mu dalszych prac nad przegldark, zamraajc
w ten sposb wszystkie bdy. Bdy te wyszy na jaw dopiero wwczas,
gdy na rynku pojawiy si inne przegldarki obsugujce standardy
sieciowe i projektanci zaczli poddawa CSS coraz ciszym prbom.
Jak mona si spodziewa, skoro inne przegldarki byy rozwijane,
a Internet Explorer 5 dla Macintosha nie, grupa jego uytkownikw
stopniaa. W styczniu 2006 roku Microsoft oficjalnie pogrzeba t
przegldark.
Wspczeni projektanci zazwyczaj s bardziej sfrustrowani przez brak
poprawnej obsugi zoonych ukadw CSS w tej przegldarce ni zainspirowani przez jej pioniersk przeszo. Aby odda sprawiedliwo tej
przegldarce, naley nadmieni e przestrzeganie standardw przez Internet Explorer 5 dla Macintoshy zmusio Microsoft do znacznej poprawy
obsugi standardw w wersji przegldarki dla Windows. Gdyby tak si
nie stao, nadal tworzylibymy ukady bazujce na tabelkach.

41

42

Rozdzia 1 > 99,9% witryn wci jest przestarzaych

Oprcz tego przydatne innowacje pochodzce z Internet Explorera 5

dla Macintoshy (jak narzdzie powikszenia tekstu) zostay zaadoptowane przez Firefoksa, Safari i wikszo innych nowoczesnych
przegldarek aczkolwiek, co smutne, Microsoft nadal nie uzna za
stosowne wprowadzenie ich do Internet Explorera dla Windows.
Podobnie uycie jzyka XHTML i stylw CSS nie jest rwnoznaczne z ignorowaniem uytkownikw Netscapea 4. Zaprojektowana i zbudowana zgodnie ze standardami strona najprawdopodobniej nie bdzie wywietlana dokadnie tak samo przez Netscapea 4 i bardziej zgodne ze standardami
przegldarki. W zalenoci od przyjtej metody projektowej jej wygld moe
by rny. Nie jest to jednak nic szczeglnego. (Wyjanimy to w drugiej
czci ksiki).

Nowy kod do nowej pracy

Nowoczesne przegldarki nie s jedynie nowszymi wersjami tej samej starej
serii. Rni si zdecydowanie od swoich poprzedniczek. W wielu przypadkach zostay przebudowane od podstaw. Mozilla Firefox, Camino, Netscape 7+ i przegldarki bazujce na silniku Gecko nie s nowszymi wersjami
Netscape Navigatora 4. IE5+/Mac nie by uaktualnion wersj IE4/Mac.
Opera 7 nie bazuje na tym samym kodzie, ktry napdza poprzednie
wersje przegldarek Opera. Wszystkie zostay zbudowane na bazie nowego kodu w celu realizacji nowego zadania, a mianowicie zachowania jak
najwikszej zgodnoci ze standardami sieciowymi opisanymi w tej ksice.
Przegldarki lat dziewidziesitych ubiegego stulecia skupiay si natomiast na firmowych technologiach i nie zwracay zbytnio uwagi na standardy. Niektre standardy byy przez nie wrcz cakowicie ignorowane. Sytuacja taka nie bya jednak traktowana jako powane utrudnienie w procesie
projektowania. Jeeli, na przykad, przegldarka nie obsugiwaa standardu
PNG (ang. Portable Network Graphic), projektanci nie uywali obrazkw
w tym formacie. Kopot polega na tym, e stare przegldarki wywiadczay
niedwiedzi przysug standardom, oferujc jedynie ich czciow obsug, czsto niezgodn z zaoeniami. Byle jakie wsparcie dla tak podstawowych standardw jak HTML stworzyo niejednorodne rodowisko publikacji, a w konsekwencji nietrwae metody produkcji.
Kiedy pka wyrostek robaczkowy u pacjenta, wykwalifikowani chirurdzy
usuwaj go cakowicie. Wyobramy sobie, co moe si sta, kiedy aden
chirurg nie jest dostpny? Co bdzie, kiedy pijany staysta usunie zaledwie

Problem wersji

poow wyrostka, przy okazji dgajc kilka ssiednich organw i na kocu

zapominajc zaszy pacjenta? Porwnanie jest troch makabryczne, ale doskonale oddaje podejcie do obsugi standardw w starych przegldarkach:
niebezpiecznie niekompetentne, nieudolne i ryzykowne dla zdrowia caej sieci.
Jeeli Netscape 4 ignoruje reguy CSS zastosowane do znacznika <body>
i dodaje losowe biae znaki do kadego elementu struktury na stronie,
a IE4 traktuje ten znacznik prawidowo, ale dla odmiany partaczy wyrwnywanie, to ktr wersj tych regu naley zastosowa w projekcie? Niektrzy programici w ogle rezygnowali z CSS. Inni stosowali jeden arkusz
stylw kompensujcy bdy IE4 i drugi kompensujcy gafy Netscapea 4.
Potrzebne byo rwnie stosowanie odmiennych stylw w zalenoci od tego,
czy odwiedzajcy stron jest uytkownikiem platformy Windows czy Macintosh uytkownicy systemw Linux mieli pecha.
CSS by zaledwie jedn z wielu przyczyn problemw. Przegldarki nie potrafiy jednakowo obsugiwa jzyka HTML, prezentowa tabel lub interpretowa jzykw skryptowych uywanych do tworzenia interaktywnych elementw strony. Nie istnia jeden sposb budowania struktury zawartoci
strony. (Dokadnie mwic, istnia taki sposb, ale nie by obsugiwany przez
adn z przegldarek). Nie byo adnego ustalonego sposobu produkowania stron (tzn. istnia, ale nie by obsugiwany przez przegldarki) lub dodawania zaawansowanych elementw do jej zawartoci (take taki sposb
istnia, lecz nie by rozpoznawany przez adn ze starych przegldarek).
Projektanci i programici, walczcy z cigle pojawiajcymi si niezgodnociami, wypracowali praktyk tworzenia wersji kodu dostosowanych do potrzeb kadej pojawiajcej si przegldarki. Byo to wszystko, co w owym
czasie moglimy zrobi, aby stworzy witryn dostpn dla wicej ni jednej
przegldarki lub systemu operacyjnego. Obecnie taka praktyka jest bdna,
poniewa nowoczesne przegldarki obsuguj te same otwarte standardy.
Mimo to funkcjonuje nadal, pochaniajc zasoby, fragmentujc sie i generujc niedostpne, mao uyteczne witryny, ktrych koszty nie s adekwatne
do tego co oferuj.

Problem wersji
Tworzenie wielu wersji niestandardowego kodu (kadej dostosowanej do
niestandardowych dziwactw tej lub innej przegldarki) stanowi rdo cigego starzenia si stron plagi dotykajcej wikszo witryn. Trudno
zwyciy w grze, ktrej cele i zasady zmieniaj si w trakcie meczu.

43

44

Rozdzia 1 > 99,9% witryn wci jest przestarzaych

Mimo swojej kosztownoci, bezsensownoci i nietrwaoci opisana praktyka nadal dominuje na rynku. Projektanci majcy do czynienia z przegldark obsugujc standardy sieciowe traktuj j jak jedn z tych, ktre nie
posiadaj tej cechy. Tworz kod, aby sprawdzi, czy jest to IE6, i karmi
j skryptami obsugiwanymi wycznie przez wytwory firmy Microsoft,
chocia IE6 radzi sobie ze standardami ECMAScript i DOM. Nastpnie
czuj si zmuszeni do napisania oddzielnych procedur dokonujcych detekcji nowych przegldarek bazujcych na silniku Mozilli, chocia te rwnie
potrafi obsuy wymienione standardy.
Jak sugeruje powyszy przykad, wikszo kodu podpatrujcego wersje
przegldarek i urzdze oraz generujcego indywidualny kod jest niepotrzebna w obecnym klimacie tolerancji dla standardw. Nawet przy regularnych uaktualnieniach na ktre niewielu wacicieli witryn moe sobie
pozwoli skrypty dokonujce detekcji czsto zawodz.
Na przykad przegldarka Opera dla systemw Windows i Macintosh identyfikuje si jako Internet Explorer. Robi to gwnie po to, aby unikn
blokowania przez witryny (w szczeglnoci nalece do sektora bankowego),
ktre dokonuj detekcji IE. Jednak skrypty napisane dla IE maj tendencj do wysypywania si w Operze. Kiedy zatem zidentyfikuje si ona
jako IE (jest to domylne ustawienie po zainstalowaniu) witrynie, ktrej
programista napisa kod specjalnie pod IE, liczba powstaych bdw oraz
poziom frustracji uytkownika ronie bardzo szybko. Maj oni moliwo
zmiany ustawie w taki sposb, aby Opera identyfikowaa si swoj prawdziw tosamoci, zamiast podszywa si pod IE. O tej opcji wie jednak
zaledwie garstka osb.
Oprcz skryptw dokonujcych detekcji programici pisz rwnie rozbudowany kod prezentacji strony, ktry wymaga wikszej przepustowoci od
cza klienta pragncego cign stron, jak i od udostpniajcego j
serwera. Rozbudowany kod zmniejsza dostpno strony dla wyszukiwarek
oraz niestandardowych przegldarek i urzdze internetowych (przez co
rwnie jej zawarto jest trudniejsza do odnalezienia przez potencjalnych
klientw). Stosowane strategie wywouj zatem czsto efekty, ktrym miay
zapobiega niekonsekwentne prezentowanie witryn w rnych przegldarkach (rysunki 1.1 i 1.2).
Rozbicie witryny na rne wersje niesie ze sob cigle rosnce koszty
oraz trudne do rozwizania problemy. Witryny DHTML produkowane
z uwzgldnieniem firmowych specyfikacji Netscapea 4.0 i Internet Explorera 4.0 nie dziaaj w wikszoci nowoczesnych przegldarek. Czy waciciel

Problem wersji

45

Rysunek 1.1.
W roku 2002 witryna
MSN Game Zone
(http://zone.msn.com/)
obsugiwaa 7 arkuszy
stylw, prezentuje si
jednak niepoprawnie
w wikszoci
nowoczesnych
przegldarek.
Chwali si 14 skryptami,
wrd ktrych jest
bardzo opasy kod
detekcji przegldarek,
ale nawet to jej nie
pomaga. Jak wida,
wykorzystanieduej
iloci kodu
do rozwizania
problemu nie zawsze
dziaa

Rysunek 1.2.
Uczciwie przyznaj,
e poprzedni zrzut
z ekranu pochodzi
sprzed 4 lat. Obecnie
ta sama strona wyglda
jeszcze gorzej,
gdy wrzucono na ni
jeszcze wicej kodu.
Sze lat po tym,
kiedy Microsoft
wypuci na rynek
pierwsz przegldark
zgodn ze standardami,
niektre fragmenty
witryny Microsoftu
nadal nie przestrzegaj
podstawowych zasad
projektowania w zgodzie
ze standardami
sieciowymi

46

Rozdzia 1 > 99,9% witryn wci jest przestarzaych

takiej witryny powinien wyda jeszcze wicej pienidzy na rozwizanie tego

problemu, zlecajc programistom stworzenie pitej lub szstej wersji strony?
A jeli nie ma na to pienidzy? Wielu uytkownikw zostanie zablokowanych.
Analogicznie projektanci mog marnowa wiele czasu i zasobw, tworzc
bezprzewodow wersj swojej strony tylko po to, aby przekona si, e
zastosowany przez nich jzyk znacznikw jest przestarzay lub strona nie
funkcjonuje w nowym urzdzeniu internetowym. Niektrzy w odpowiedzi na
ten problem tworz kolejn wersj witryny. Inni publikuj enujce komunikaty obiecujce wsparcie dla nowego urzdzenia w najbliszej przyszoci.
Nawet jeli programista lub projektant zetknie si ze standardowymi technologiami sieciowymi, takimi jak XHTML i CSS, jego przyzwyczajenia
pochodzce ze starej szkoy sprawiaj, i umyka mu sedno ich istnienia.
Zamiast zastosowa standardy do stworzenia jednej wersji, wielu programistw tworzy nadal co najmniej kilka wersji plikw CSS zalenych od
przegldarki i/lub platformy, ktre niemal nigdy nie dziaaj w oczekiwany sposb (rysunki 1.1 i 1.2).
Stosujc tego typu praktyki, marnujemy czas i pienidze, ktrych zwykle
nie mamy w nadmiarze, wrcz przeciwnie. Oliwy do ognia dolewa fakt,
e mimo wysokich kosztw stosowane praktyki nie rozwizuj problemu.
Strony zachowuj si niekonsekwentnie, a uytkownicy maj do nich utrudniony dostp.

Mylenie wsteczne
Zajrzyj do wntrza jakiejkolwiek wikszej komercyjnej strony, takiej jak
Amazon.com lub eBay.com. Zbadaj ich zawiy kod, osadzone kontrolki
ActiveX i JavaScript (czsto zawierajcy le dziaajce skrypty rozpoznawania przegldarek), a take z zaoenia le uyte style CSS o ile w ogle
je zastosowano. To cud, e te strony dziaaj w jakiejkolwiek przegldarce!
Dziaaj, poniewa pierwsze cztery lub pi pokole przegldarek Netscape
Navigator oraz Internet Explorer toleruje jedynie specyficzny dla siebie
kod. Taka sytuacja wrcz zachcaa do niechlujnego kodowania i tworzenia
skryptw zalenych od producenta oprogramowania, aby zwyciy w rynkowej wojnie przegldarek.
Czsto niezgodne ze standardami witryny dziaaj, poniewa ich waciciele
zainwestowali w drogie narzdzia do publikacji, ktre niweluj rnice midzy przegldarkami przez generowanie wielu wersji kodu dostosowanego do
danej przegldarki lub platformy (patrz Problem wersji).

Mylenie wsteczne

47

Znam wiele firm, ktre wyday ponad milion dolarw na przesadnie zoone,
ale niespecjalnie uyteczne systemy zarzdzania treci (CMS, ang. content
management system). Twrcy takich monstrualnych programw czciowo
usprawiedliwiaj ich oburzajce koszty, wskazujc na moliwo mozolnego generowania wszelkiego rodzaju niestandardowych wersji kodu. Poza
marnotrawstwem ogromnych iloci gotwki taka praktyka szkodzi take
moliwoci przeszukiwania takich stron przez zatopienie sensownych treci
w morzu nic nieznaczcych znacznikw (rysunek 1.3). Najbardziej ze wszystkich taka praktyka wystawia na prb cierpliwo uytkownika korzystajcego z modemowego dostpu do sieci przez zapychanie cza rozwidlonym
kodem, zagniedonymi tabelami, przernymi sztuczkami z obrazkami,
a take przestarzaymi znacznikami i atrybutami.
Rysunek 1.3.
Szybko! Sprbuj
znale na tej stronie
wane dla Yahoo
informacje
o Osobistoci roku
pord jej zagmatwanej,
niestrukturalnej skadni
HTML z 2001 roku.
Podpowied:
Jeli ty masz trudnoci
z jej odnalezieniem,
tak samo trudne bdzie
to dla czytnikw
i wyszukiwarek
(Yahoo.com)

48

Rozdzia 1 > 99,9% witryn wci jest przestarzaych

Co to jest rozwidlanie kodu?

Kod stanowi podstaw kadego oprogramowania, systemu operacyjnego, generalnie mwic wszystkiego, co ma jakikolwiek zwizek z technik cyfrow. Kiedy nad projektem pracuje wicej ni jedna grupa programistw, kod moe rozwidli si na kilka niezgodnych ze sob wersji,
szczeglnie jeli kada grupa prbuje rozwiza inny problem lub przychyli si do ustale, o ktrych inni nie syszeli. Taki brak konsekwencji
oraz sprawowania centralnej wadzy nad kodem jest rzecz z.
W tej ksice termin rozwidlanie kodu oznacza praktyk polegajc na
tworzeniu kilku rnych wersji kodu na potrzeby przegldarek, ktre
nie obsuguj standardw ECMAScript i DOM (patrz Problem wersji
powyej).
Kilka wersji kodu (ktry trzeba przesa kademu uytkownikowi) obcia
cze waciciela witryny, podnoszc drastycznie koszty utrzymania serwisu.
Im wiksza strona i wikszy ruch na niej, tym wicej pienidzy trzeba wyda
na utrzymanie serwerw wykonujcych zadania, ktrych mona unikn.
Liczby nie kami. Jeeli strona zredukuje swj kod o 35%, zredukuje rwnie o tyle samo koszty utrzymania cza. Firma wydajca 10 000 z rocznie
mogaby zaoszczdzi 3 500 z. Przy wydatkach rzdu 640 000 z oszczdnoci wynosz 224 000 z.
Strona domowa Yahoo (rysunek 1.4) jest adowana miliony razy dziennie.
Kady bajt zmarnowany na przestarzay kod przemnoony przez astronomiczn liczb odson daje w wyniku gigabajty danych przesyanych bez
potrzeby. Mona sobie tylko wyobrazi koszty ponoszone z tytuu takiego
marnotrawstwa. Gdyby Yahoo zastpio jedynie niestosowane ju znaczniki <font> (rysunki 1.3 i 1.5) przez wydajne style CSS, koszt adowania
kadej strony zmalaby wielokrotnie, a zyski firmy w konsekwencji wzrosyby. Dlaczego zatem Yahoo nie wykonao takiego kroku?
Tylko jedna odpowied wydaje si prawdziwa firma pragnie, aby strona wygldaa dokadnie tak samo w starych przegldarkach nieobsugujcych CSS, jak i w nowych zachowujcych zgodno z tym standardem.
Ironia polega na tym, e nikt poza zarzdem Yahoo nie przejmuje si jej
wygldem. Wiadomo bowiem, e olbrzymiego sukcesu witryna nie zawdzicza wcale szacie graficznej, lecz oferowanym usugom.

Mylenie wsteczne

49

Rysunek 1.4.
Strona domowa
Yahoo (http://
www.yahoo.com/)

Rysunek 1.5.
Yahoo od rodka.
Zobacz rdo,
a przekonasz si,
e kod sucy
do stworzenia
tej prosto
wygldajcej strony
jest niewyobraalnie
skomplikowany.
Mimo e Yahoo
zaczo w kocu
uywa CSS, robi
to w najmniej wydajny
sposb nadal uywa
znacznikw <font>
oprcz regu CSS!

50

Rozdzia 1 > 99,9% witryn wci jest przestarzaych

Przykad tej, skdind interesujcej, firmy (marnujcej swoje cza na

dostarczanie wygldu i zachowania1, ktrego nikt tak naprawd nie podziwia) mwi wszystko o zakorzenionym w umysach projektantw podziwie dla zgodnoci wstecz i jej zwizku z uytecznoci witryn oraz wasnymi zyskami.

Przestarzae znaczniki:
dodatkowy koszt dla wacicieli witryn
Zamy, e kod jednej strony zbudowanej wedug starych zasad zajmuje
60 kB. Zastpienie znacznikw <font> oraz innych przestarzaych znacznikw czystym kodem z kilkoma reguami CSS zmniejsza rozmiar strony
do 30 kB. (W praktyce moliwe jest zredukowanie 60-kilobajtowej strony
do 22 kB lub nawet mniej, ale dla zachowania atwoci oblicze przyjmijmy
okrg liczb, ktra reprezentuje oszczdnoci cza internetowego rzdu
50%). Rozwamy dwa typowe scenariusze przedstawione poniej.
Redukcja cza
Scenariusz: Samodzielnie utrzymywana witryna maego przedsibiorstwa
lub witryna naleca do sektora publicznego obsuguje cigy strumie
odwiedzajcych kilkaset odson w danej chwili. Po zredukowaniu rozmiaru stron o poow poprzez konwersj znacznikw prezentacji strony
do zwizego, czystego kodu XHTML firma oszczdza 1500 z miesicznie.
Jak to dziaa: Aby obsuy klientw przed konwersj, witryna potrzebowaa dwch linii T1 (1,544 Mb/s). Koszt dzierawy kadej z nich wynosi
1500 z na miesic. Po ogoleniu plikw i zredukowaniu ich rozmiaru
o 50%, firma dochodzi do wniosku, e jest w stanie obsuy t sam liczb klientw przez jedno cze T1, tym samym redukujc swoje koszty operacyjne o 1500 z miesicznie. Oprcz kosztw dzierawy cza zmniejsz
si rwnie nakady na sprzt komputerowy. Im prostszy jest kod strony,
tym szybciej jest ona dostarczana do uytkownika. Im szybciej jest dostarczana, tym mniej obcia serwer trzeba kupi, serwisowa i modyfikowa mniej serwerw. Jest to szczeglnie istotne w przypadku serwerw,
ktre musz generowa dynamiczn, sterowan bazami danych zawarto
czyli zawarto, jak posuguj si niemal wszystkie wspczesne witryny
komercyjne (w tym wikszo blogw).

Wszystkich interaktywnych cech witryny, jakie mona stworzy przy uyciu

HTML-a i JavaScriptu przyp. tum.

Mylenie wsteczne

Licznik megabajtw
Scenariusz: W miar rozwoju komercyjnie hostowanej witryny jej waciciele dochodz do wniosku, e kadego miesica pac nieuzasadnion kar
za transfer plikw, wynoszc dziesitki, a nawet setki zotych. Obcicie
rozmiaru plikw o poow sprowadza wysoko paconych rachunkw do
przyzwoitego poziomu.
Kod skondensowany a kod skompresowany
Gdy wygosiem wykad na temat standardw sieciowych, podszed do
mnie jeden z suchaczy twierdzc, i zyski wynikajce ze stosowania
czystego i dobrze uoonego kodu nie s wiksze ni w przypadku stosowania kompresji kodu HTML.
Oprcz kondensowania kodu przez pisanie go w sposb przejrzysty
i zwizy (tzn. stosowanie struktur semantycznych zamiast przestarzaego formatowania z uyciem jzyka HTML), mona rwnie zwyczajnie skompresowa kod w niektrych systemach serwerowych. Na
przykad Apache oferuje modu mod_zip kompresujcy pliki HTML
po stronie serwera. HTML jest ponownie rozpakowywany po stronie klienta.
Programista, z ktrym rozmawiaem, poda nastpujcy przykad: jeeli Amazon.com marnuje 40 kB na przestarzae znaczniki oraz inne
mieci, ale uywa moduu mod_zip i kompresuje pliki do rozmiaru
20 kB, to nadmiarowy kod stron tej witryny nie generuje wydatkw,
o ktrych mwiem na wykadzie oraz w tej ksice.
Jak si okazao, Amazon nie uywa moduu mod_zip. W rzeczywistoci
narzdzie to jest rzadko uywane w komercyjnych witrynach, przypuszczalnie ze wzgldu na dodatkowe obcienie zwizane z koniecznoci
kompresowania plikw przed wysaniem ich w wiat. Wracajc jednak
do dyskusji z programist, im mniejszy jest plik, tym lepiej zostanie
skompresowany. Jeeli oszczdzamy, kompresujc 80-kilobajtowy pliku
do rozmiaru 40 kB, wyobramy sobie, ile moemy zaoszczdzi, kompresujc 40 kB do 20 kB. Oszczdnoci w pojedynczej sesji mog wydawa si mae, ale ich warto kumuluje si. Z czasem mog znacznie zredukowa koszty operacyjne i zapobiec innym wydatkom (na
przykad dzierawie dodatkowego cza w celu zwikszenia przepustowoci serwerw).
Oszczdnoci na czu internetowym s tylko jedn z korzyci pyncych z pisania czystego, dobrze uoonego kodu, bardzo docenian przez
ksigowych oraz klientw i rwnie prawdziw dla tych, ktrzy stosuj
kompresj HTML-a.

51

52

Rozdzia 1 > 99,9% witryn wci jest przestarzaych

Jak to dziaa: Wiele firm oferujcych usugi hostingowe przydziela swoim

uytkownikom wolny od opat miesiczny limit transferu plikw na
przykad do 3 GB. Poniej tej wartoci pacimy zwyk stawk miesiczn.
Za przekroczenie limitu pobierane s dodatkowe opaty, czasami bardzo due.
W jednym niesawnym przypadku firma hostingowa znokautowaa niezalenego projektanta Ala Sacui szesnastoma tysicami dolarw dodatkowych
opat, kiedy jego niekomercyjna strona, Nosepilot.com, przekroczya dozwolony miesiczny limit transferu plikw. Jest to przypadek ekstremalny,
a klientowi ostatecznie udao si unikn zapacenia kary dziki udowodnieniu firmie zmiany warunkw oferowanej usugi bez powiadomienia klientw. Kogo jednak sta na ryzyko pacenia niewyobraalnych rachunkw lub
rozprawiania si z nieuczciw firm w sdzie?
Oczywicie nie kada firma hostingowa stosuje podobne praktyki. Pair.com
na przykad obcia klienta opat 4,95 dolarw za kady megabajt ponad
limit. Wiksze witryny, z wikszym ruchem na stronach oszczdzaj najwicej przez redukowanie rozmiaru plikw. Niezalenie od tego, czy strona
jest maa czy dua, odwiedzana przez miliony czy te przez garstk ludzi,
im mniejszy rozmiar plikw, tym mniejszy ruch w sieci i mniejsze prawdopodobiestwo przekroczenia limitw. A ju zupenie na marginesie, najlepiej
wybra firm, ktra stosuje nielimitowane transfery plikw, zamiast kara
swoich klientw za tworzenie popularnych stron.

Zgodno wstecz
Co programici uwaaj za zgodno wstecz? Zapytani odpowiedz: zapewnienie obsugi wszystkim uytkownikom. I jak tu spiera si z takim
argumentem?
W praktyce jednak zgodno wstecz oznacza stosowanie niestandardowych, zastrzeonych (lub niepraktykowanych) znacznikw oraz kodu, aby
kady uytkownik odwiedzajcy witryn mg dowiadczy tego samego,
niezalenie od tego, czy uywa IE2 czy Firefox 8.5. Zasada zgodnoci
wstecz traktowana jako wity Graal programowania brzmi niele
w teorii. Jednak jej koszt jest zbyt wysoki, a ona sama od zawsze opiera si
na faszywym zaoeniu.
Nie istnieje prawdziwa zgodno wstecz. Zawsze istnieje punkt odcicia.
Na przykad ani Mosaic (pierwsza przegldarka graficzna), ani Netscape 1.0
nie obsuguj ukadw opartych na tabelach HTML-owych. Zatem uytkownicy tych archaicznych przegldarek nie mog zobaczy tego samego, co
uytkownicy odrobin nowszych narzdzi typu Netscape 1.1 lub MSIE 2.

Mylenie wsteczne

53

Programici i klienci goszcy ide zgodnoci zmuszeni s do okrelenia bazowej przegldarki, na przykad Netscape 3, i przyjcia, e jest to najwczeniejsza przegldarka, ktra obsugiwa bdzie ich stron (uytkownicy
Netscapea 2 nie maj szczcia). Aby wypeni zobowizanie obsugi przegldarki bazowej, wprowadzaj do kodu szereg sztuczek, niestandardowych
trikw i okrnych rozwiza, ktre zwikszaj ciar kadej strony.
Jednoczenie pisz kilka skryptw, ktre rozpoznaj typ przegldarki i zasilaj j odpowiednim kodem. To dodatkowo zwiksza rozmiar stron, nakada obcienia na serwery i zapewnia nieustajcy proces starzenia si witryny a do wyczerpania pienidzy lub wypadnicia z brany.

Blokowanie uytkownikw
nie wpywa dobrze na interesy
Podczas gdy niektre firmy dokonuj zamachu na swoje dochody, prbujc
zapewni wsparcie nawet dla najstarszej przegldarki, inne decyduj si
na obsug wycznie jednej z nich. Ze wzgldu na bdne zaoenia ronie
liczba stron projektowanych wycznie do wsppracy z Internet Explorerem (czasem wycznie na platformie Windows), blokujc tym samym
15 25% potencjalnych uytkownikw i klientw (rysunki 1.6, 1.7, 1.8,
1.9, 1.10 i 1.11).
Rysunek 1.6.
Strona domowa KPMG
(http://www.kpmg.com/)
z roku 2003 przegldana
w Navigatorze.
Zupena rozsypka
ukadu jest efektem
zastosowania
kodu dziaajcego
wycznie w IE

Nie bd udawa, e rozumiem podejcie biznesowe firmy, ktra z zaoenia mwi NIE jednej czwartej swoich potencjalnych klientw. Tak dua
liczba klientw stracona przez krtkowzroczne podejcie nie powinna by

54

Rozdzia 1 > 99,9% witryn wci jest przestarzaych

Rysunek 1.7.
Serwis KPMG jest
rwnie bezuyteczny
w Netscapie 7

Rysunek 1.8.
Jeli ta strona bya
przeznaczona tylko
dla Internet Explorera,
to jak dziaaa
w Internet Explorerze 5
dla komputerw
Macintosh? Jak wida,
nie za bardzo

akceptowana przez adnego racjonalnego przedsibiorc lub instytucj publiczn z mandatem suenia spoeczestwu. Wedug statystyk sporzdzanych przez NUA Internet Surveys (http://www.nua.ie/surveys/) ponad
650 milionw ludzi korzysta z internetu (wrzesie 2002). Sam policz, czy
to si opaca.
Powiedz, e nie przejmujesz si utrat 25% uytkownikw, ktrzy pragn
odwiedzi twoj stron. Podejcie tylko IE jest pozbawione sensu rwnie
dlatego, e nie istnieje gwarancja, e Internet Explorer (lub nawet przegldarki dla komputerw stacjonarnych jako kategoria oprogramowania)

Mylenie wsteczne

55

Rysunek 1.9.
Ta sama strona
widziana przez
IE6/Windows. Tutaj
serwis w kocu dziaa

Rysunek 1.10.
Serwis poniekd dziaa
rwnie w Operze 7
dla Windows, kiedy
ta identyfikowaa si
jako IE (kiedy Opera
identyfikuje si jako
ona sama, serwis
przestaje dziaa)

bd dominowa w przyszoci. Z jednej strony, w chwili pisania tej ksiki

Firefox nieustannie odbiera udziay w runku Internet Explorer. Z drugiej
coraz wicej osb korzysta z internetu przy uyciu urzdze mobilnych.
W Stanach Zjednoczonych liczba urzdze stacjonarnych podczonych do
internetu nadal przewysza liczb urzdze mobilnych w Japonii sytuacja jest odwrotna. Mimo e stosunek ten cigle si zmienia, oglny trend
wskazuje na urzdzenia mobilne (www.gotmobile.com). W miar jak wszechobecny dostp do internetu zyskuje akceptacj i stwarza nowe rynki zbytu,
pomys uwzgldniania w projekcie dziwactw jakiejkolwiek przegldarki wydaje si coraz bardziej przeytkiem 20-tego wieku i staje si coraz mniej
sensowny.

56

Rozdzia 1 > 99,9% witryn wci jest przestarzaych

Rysunek 1.11.
Po gruntownym
przeprojektowaniu
nowa strona KPMG
wyglda poprawnie
i dziaa dobrze w wielu
przegldarkach
na rnych platformach.
Stao si tak za spraw
uaktualnionej skadni,
nieograniczonej tylko
do Internet Explorera

Poza tym, co pokae niniejsza ksika, standardy umoliwiaj projektowanie dla wszystkich przegldarek i urzdze z atwoci i szybkoci, z jak
robi si to obecnie dla jednej z nich. Gdzie pomidzy nakrcajc koszty
zgodnoci wstecz a krtkowzrocznoci polegajc na budowaniu dla jednej
przegldarki znajduje si jedyne suszne rozwizanie projektowanie z uyciem standardw sieciowych.
Zarwno technika tworzenia wielu wersji witryny, jak i jawnie podejmowanie decyzji obsugi wycznie jednej przegldarki nie pomog dzisiejszym
witrynom funkcjonowa w wiecie przyszego oprogramowania oraz rozwija
si w cigle ewoluujcym wiecie urzdze mobilnych. Jeeli obecne metody
bd kontynuowane, koszty oraz zoono witryn bdzie wzrasta do momentu, kiedy na ich tworzenie sta bdzie wycznie najwiksze firmy.
W naszych wysikach oferowania jednakowego wygldu i zachowania w rodowisku niezgodnych ze standardami przegldarek chcemy tworzy witryny wygldajce jak magazyny drukowane na papierze i zachowujce si
jak oprogramowanie stracilimy z oczu prawdziwy potencja sieci jako
bogatego i wielowarstwowego medium dostpnego dla wszystkich.
Zgubilimy go, kiedy projektanci i programici, walczcy o sprostanie wymaganiom produkcyjnym podczas bumu internetowego, nauczyli si niestandardowych metod tworzenia witryn zorientowanych na jeden wybrany

Mylenie wsteczne

produkt, w efekcie wprowadzajc nas do obecnej ery, ktr mona okreli

er niezgodnoci.
Na szczcie okres niezgodnoci w rozwoju sieci koczy si w chwili,
kiedy czytasz te sowa, zabierajc ze sob niezliczone witryny. Jeeli jeste
wacicielem, zarzdzasz, projektujesz lub budujesz strony, ten dzwon bije
rwnie dla ciebie.

Droga do Pacanowa
Na pocztku 1997 roku powszechn praktyk byo pisanie w jzyku JavaScript dla przegldarek Netscape i JScript (jzyku podobnym do JavaScriptu) dla przegldarek Microsoft. Rwnie powszechne byo stosowanie
JavaScriptu (obsugiwanego wycznie przez Netscapea) i ActiveX (dostpnego wycznie dla IE/Windows) do wysyania przegldarkom potrzebnego
im kodu. Tak postpowalimy z przegldarkami w wersji 3.0.
Praktyki takie nie przysugiway mniej znanym programom, takim jak Opera
czy choby Internet Explorer dla komputerw Macintosh, ale zadawalay
wikszo uytkownikw sieci i dziki temu szybko urosy do rangi normy
branowej. Jeeli chcielimy tworzy aktywne strony, ktre oferoway co
wicej ponad adny wygld, nie mielimy innego wyboru, jak tylko przestrzega ustalonych procedur.
Pod koniec roku 1997 wprowadzono na rynek przegldarki Netscape i Microsoft w wersji 4.0, zapewniajce potne moliwoci dynamicznego jzyka
HTML (DHTML), ktre, jak atwo mona zgadn, byy zupenie ze sob
niezgodne. Ponadto byy rwnie niezgodne ze swoimi poprzednimi wersjami (to, co dziaao w Netscapie 4, nie dziaao w Netscapie 3), nie wspominajc ju o zupenym braku zgodnoci z mao znanymi przegldarkami,
ktre pokornie obsugiway podstawowe standardy jak HTML zamiast tworzenia swoich wasnych jzykw i atrybutw.
Czy taka sytuacja bya normalna? Netscape i Microsoft sdziy, e tak, podobnie jak wielu programistw i projektantw. Pozostali, niezgadzajcy si
z t sytuacj, nie mieli alternatywy, musieli zagry zby i tworzy kilka
wersji witryny, aby zapewni jej profesjonalizm.
Na ile rnych sposobw naleao kodowa
By DHTML dla Netscapea 4. Nastpnie niezgodny DHTML dla Internet Explorera 4, ktry dziaa niemal wycznie w rodowiskach Windows. Do tego dochodziy nie-DHTML-owy JavaScript dla Netscapea 3

57

58

Rozdzia 1 > 99,9% witryn wci jest przestarzaych

i nie-DHTML-owy kod dla IE3. W ostatecznoci pod uwag naleao jeszcze bra inne wersje kodu przeznaczone dla mniej popularnych przegldarek. Nawet najmniej interesujca strona potrzebowaa zatem minimum kilku
rozwidle kodu.
Niektrzy projektanci ograniczali si do dwch wersji (jednej przeznaczonej dla IE4 i drugiej dla Netscapea 4.0), a wymagajcy uytkownicy
mieli do wyboru zaopatrzy si w czwart wersj przegldarki albo zapomnie o korzystaniu ze strony. Pozostali, z jeszcze mniejszymi budetami,
nastawiali si na obsug tylko jednej przegldarki i generalnie przegrywali.
Projekt standardw sieciowych, ktry wystartowa tu po pojawieniu si na
rynku przegldarek w wersji 4.0, oceni, i potrzeba pisania czterech lub
wicej niezgodnych wersji kadej funkcji zwiksza koszt projektowania i produkowania witryny o minimum 25% koszt ponoszony przez klienta.
rodowisko programistw odpowiedziao na t ocen wzruszeniem ramion.
Sie bya bardzo gorcym towarem, a klienci chtnie pacili bardzo wysokie
rachunki, dlaczego zatem due agencje interaktywne miay martwi si
wysokimi kosztami wynikajcymi z koniecznoci tworzenia kilku wersji kodu.
W kocu jednak baka mydlana prysa, budety zaczy male lub zamraa si, agencje zwalniay swoje obroty lub zupenie wypaday z rynku. Nagle
nie byo ju nikogo, kogo sta byo na trwonienie pienidzy w taki sposb.
Kiedy rynek zmienia si w nastpstwie zwolnie i bankructw, pojawia si
nowa generacja przegldarek obsugujcych stworzony przez W3C standard DOM. Co oznaczao to posunicie? Moliwo wyrzucenia na mietnik
kilku wersji witryny i stworzenia projektu w oparciu o nowy standard, ktry
w kocu pojawi si w zasigu rki. Jak mylcy ekonomicznie przemys
odpowiedzia na t dugo oczekiwan wiadomo? Kontynuowa pisanie
rozwidlonych wersji kodu, tworzy witryny przeznaczone wycznie dla IE/
Windows lub przechodzi na technologi Flash firmy Macromedia (obecnie
Adobe). Jak na biznes kreowany przez wizje przemys sieciowy potrafi by
nadzwyczajnie krtkowzroczny.

Dobre traktowanie zego kodu

Na pocztku zdobywania wiedzy z zakresu programowania adept sztuki
przechodzi przez faz wkadania mieci i otrzymywania mieci. Jzyki
takie jak C i Java nie zachcaj do stosowania poprawnych konstrukcji,
one tego wymagaj.