IDZ DO

PRZYKADOWY ROZDZIA
SPIS TRECI

KATALOG KSIEK
KATALOG ONLINE
ZAMW DRUKOWANY KATALOG

TWJ KOSZYK
DODAJ DO KOSZYKA

CENNIK I INFORMACJE
ZAMW INFORMACJE
O NOWOCIACH
ZAMW CENNIK

CZYTELNIA
FRAGMENTY KSIEK ONLINE

Wydawnictwo Helion
ul. Chopina 6
44-100 Gliwice
tel. (32)230-98-63
e-mail: helion@helion.pl

Projektowanie serwisw
WWW. Standardy sieciowe
Autor: Jeffrey Zeldman
Tumaczenie: Janusz Grabis (rozdz. 19),
Szymon Kobalczyk (rozdz. 1016, dod. A)
ISBN: 83-7361-394-3
Tytu oryginau: Designing with Web Standards
Format: B5, stron: 408
Tworzenie serwisw WWW moe by bardzo frustrujcym zajciem. Jake czsto
spotykamy si z sytuacj, kiedy dopracowany i przetestowany w jednej przegldarce
serwis WWW wyglda koszmarnie w innej? Ile razy trzeba byo przepisywa kod
serwisu z powodu pojawienia si nowej przegldarki i nowych moliwoci?
Najwyszy czas na zmian. Standardy projektowania serwisw WWW opracowano
wanie po to, aby takie sytuacje nie miay miejsca. Maj one pomc projektantowi
w tworzeniu serwisw WWW, ktre bd wyglda tak samo dobrze w kadej
przegldarce i na kadym urzdzeniu.
Ksika ta jest nieocenionym rdem informacji dla kadego projektanta serwisw
WWW. Zawarte w niej informacje umoliwi stworzenie serwisu, ktry nie tylko bdzie
uniwersalny, czytelny, atwy w nawigacji, testowaniu i aktualizowaniu, ale take zgodny
ze wszystkimi wytycznymi konsorcjum W3C dotyczcymi projektowania sieciowego.
Czytajc t ksik, dowiesz si:
Dlaczego Twoje serwisy WWW wygldaj inaczej w rnych przegldarkach
Czym kieruj si twrcy standardw sieciowych
Jakie problemy wystpiy przy pierwszych prbach znormalizowania
metod projektowania
Jak stworzy czytelny i uniwersalny kod z wykorzystaniem jzyka XHTML
W jaki sposb stworzy strony WWW tak, aby byy poprawnie wywietlane
na rnych urzdzeniach
Jak zdefiniowa wygld strony za pomoc stylw CSS
Jak poradzi sobie z rnymi przegldarkami
Jak rozwiza problemy zwizane z czcionkami na stronach WWW
W jaki sposb zaimplementowa w serwisie WWW mechanizmy uatwie dostpu
Jak wykorzysta na stronie skrypty oparte na modelu DOM
(Document Object Model)
Dodatkowym, bardzo pomocnym materiaem, jest zestawienie informacji o uywanych
obecnie przegldarkach internetowych.

Spis treci
O Autorze ........................................................................................ 13
Wprowadzenie ................................................................................. 15
Nie wszystko dla wszystkich.............................................................................................15
Teoria a praktyka ........................................................................................................16
Ukady hybrydowe: rychy koniec? ............................................................................16
Cigo, nie zbir sztywnych regu .................................................................................19
Pokazuj, nie sprzedawaj..............................................................................................19
Niech praca sprzedaje si sama...................................................................................20
Sprzeda domowa .......................................................................................................21
Zapach zmian ....................................................................................................................21

Cz I

Houston, mamy problem .................................................23

Zanim zaczniesz .............................................................................. 25
Nakrcanie kosztw, zmniejszanie zwrotw ....................................................................25
Przerwanie cyklu starzenia si ..........................................................................................27
Czym jest zgodno w przd?...........................................................................................28
adnych zasad, adnego dogmatu.....................................................................................29
Praktyka, nie teoria............................................................................................................31
Czy ta podr jest naprawd potrzebna?...........................................................................32

Rozdzia 1. 99,9% witryn jest przestarzaych ...................................................... 35

Nowoczesne przegldarki i standardy sieciowe................................................................36
Nowy kod do nowej pracy ..........................................................................................36
Problem wersji ...............................................................................................................38
Mylenie wsteczne ............................................................................................................39
Przestarzae znaczniki: dodatkowy koszt dla wacicieli witryn ................................42
Zgodno wstecz.........................................................................................................43
Blokowanie uytkownikw nie wpywa dobrze na interesy.......................................45
Droga do Pacanowa ....................................................................................................48
Dobre traktowanie zego kodu ..........................................................................................49
Lek.....................................................................................................................................51

Projektowanie serwisw WWW. Standardy sieciowe

Rozdzia 2. Projektowanie i budowanie z uyciem standardw............................. 53

Pokonywanie trudnoci .....................................................................................................55
Koszt projektowania przed wprowadzeniem standardw.................................................56
Nowoczesna strona starymi metodami..............................................................................57
Trzy elementy standardw sieciowych .............................................................................60
Struktura......................................................................................................................60
Prezentacja ..................................................................................................................62
Zachowanie .................................................................................................................62
W praktyce ........................................................................................................................63
Zalety metod przejciowych..............................................................................................63
Projekt standardw sieciowych: przenono w zastosowaniu.........................................66
Jeden dokument dla wszystkich..................................................................................67
A List Apart: jedna strona, wiele widokw.......................................................................69
Projektowanie nie tylko z przeznaczeniem na ekran ..................................................71
Oszczdno czasu i kosztw, wzrost zyskw ...........................................................72
Co dalej?............................................................................................................................73
Przejciowa zgodno w przd ...................................................................................73
Cakowita zgodno w przd ......................................................................................75

Rozdzia 3. Problem ze standardami................................................................... 79

Mio popatrze, trudno zakodowa ...................................................................................79
Wsplne zamiary, wsplne rodki ..............................................................................81
Przyjcie standardw a rzeczywisto ........................................................................82
2000 rok, w ktrym przegldarki osigny dojrzao ...............................................83
IE5/Mac: przeczanie i powikszanie........................................................................84
Mocne posunicie Netscapea.....................................................................................84
Przeamanie tamy........................................................................................................87
Za mao, za pno?............................................................................................................88
CSS: pierwsze koty za poty .......................................................................................88
Ze przegldarki prowadz do zych praktyk ....................................................................89
Kltwa zego odwzorowywania..................................................................................90
Brak dziedziczenia ......................................................................................................91
Ze zachowanie ...........................................................................................................92
Dugo oczekiwany standard w jzykach skryptowych ...............................................92
Mao czytelne witryny, niezrozumiae nazewnictwo........................................................93
Problemy akademickie a problemy ekonomiczne ......................................................94
Konsorcjum sugeruje, firmy sprzedaj .......................................................................95
wiadomo produktu a wiadomo standardw......................................................95
Flash ..................................................................................................................................97
Warto Flasha............................................................................................................97
Problem z Flashem....................................................................................................100
Inny problem z Flashem............................................................................................100
Zgodno to brzydkie sowo ...........................................................................................101
Potga jzyka w formowaniu percepcji ....................................................................101
Problem z inspiracj..................................................................................................101
Inne problemy ...........................................................................................................102

Rozdzia 4. XML podbija wiat

(oraz inne opowieci o sukcesach standardw sieciowych) ............. 105
Uniwersalny jzyk (XML) ..............................................................................................106
Porwnanie XML-a i HTML-a.................................................................................106
Jeden rodzic, wiele dzieci .........................................................................................107
Niezbdny element profesjonalnego oprogramowania.............................................108
Bardziej popularny ni MTV ....................................................................................110

Spis treci

5
Pi spraw wiadczcych o potdze technologii ......................................................111
Pokana dawka wynalazkw ....................................................................................112
Narzdzia do publikacji dla caej reszty ...................................................................113
Do twoich usug ........................................................................................................115
XML a twoja witryna ......................................................................................................115
Cigle w fazie przedszkola .......................................................................................116
Zgodny z natury ..............................................................................................................116
Era wsppracy................................................................................................................117
Testy i specyfikacje...................................................................................................117
Jak mona ze sob wsppracowa? .........................................................................118
Standardy sieciowe i narzdzia .......................................................................................119
Grupa zadaniowa Dreamweaver ...............................................................................120
Narzdzia WYSIWYG przeomu wiekw (dwa z trzech nienajgorsze)...................121
FrontPage: niezgodny z zaoenia ............................................................................121
Nadejcie ukadw CSS ..................................................................................................122
Kampania uaktualniania przegldarek......................................................................122
Pocztek potopu ........................................................................................................125
Skd czerpa style? ...................................................................................................126
Chwilowa moda o ustalonym przeznaczeniu........................................................129
Upowszechnianie standardw sieciowych ......................................................................130
Witryny komercyjne daj si ponie fali.................................................................132
Wired Digital zmienia technologi ...........................................................................133
cznie standardw z metodami tradycyjnymi ........................................................135
Do akcji wkracza W3C .............................................................................................137
Podsumowanie ................................................................................................................137

Cz II

Projektowanie i budowanie ...........................................139

Rozdzia 5. Nowoczesny ukad znacznikw ....................................................... 141

Ukryty schemat kiepskiego kodu ....................................................................................144
Przeformuowanie ...........................................................................................................146
Podsumowanie ................................................................................................................148
Ktry XHTML jest dla mnie najlepszy? .........................................................................148
10 najwaniejszych powodw, dla ktrych warto wybra XHTML ........................149
5 powodw, dla ktrych nie warto wybiera XHTML-a..........................................150

Rozdzia 6. XHTML: restrukturyzacja sieci........................................................ 151

Konwersja do XHTML-a: proste zasady, atwe wytyczne .............................................152
Na pocztku poprawny typ dokumentu i przestrze nazw .......................................152
Zadeklaruj typ zawartoci strony ..............................................................................154
Wszystkie znaczniki pisz maymi literami ...............................................................156
Wartoci wszystkich atrybutw umieszczaj w cudzysowach..................................158
Wszystkie atrybuty wymagaj wartoci....................................................................159
Zamykaj wszystkie znaczniki ...................................................................................159
Zamykaj rwnie puste znaczniki .........................................................................160
Zakaz stosowania podwjnych mylnikw w komentarzach ...................................161
Koduj wszystkie znaki < i &.....................................................................................161
Podsumowanie zasad XHTML-a..............................................................................161
Kodowanie znakw: toporne, bardziej toporne i najbardziej toporne ............................162
Unicode i inne zestawy znakw................................................................................162
Leczenie strukturalne ......................................................................................................163
Sensowne kodowanie dokumentu.............................................................................163
Swoboda w ustalonych ramach.................................................................................164
Elementy wizualne i struktura.........................................................................................167

Projektowanie serwisw WWW. Standardy sieciowe

Rozdzia 7. Struktura w ukadzie cisym i hybrydowym:

gwarancja zwartych i trwaych stron............................................... 169
Czy kady element musi by strukturalny?.....................................................................170
div, id i inni pomocnicy ............................................................................................171
Odwa si robi mniej ..............................................................................................174
Ukady hybrydowe i spjny kod: co naley, a czego nie wolno .....................................175
Nazwijmy ze rzeczy po imieniu...............................................................................176
Powszechne bdy w ukadach hybrydowych...........................................................176
Znaczniki div s w porzdku ....................................................................................179
Pokocha atrybut id...................................................................................................180
Zakaz stosowania nadmiarowych komrek tabel .....................................................181
Przeterminowane metody w paradzie .............................................................................183
Czas map...................................................................................................................183
Cicie i skadanie ......................................................................................................184
W obronie ukadw tabelek nawigacyjnych .............................................................186
Nadmiarowa rozwleko tabel.................................................................................186
Powraca zy CSS.......................................................................................................187
Co dalej? ...................................................................................................................189

Rozdzia 8. XHTML w przykadach: ukad hybrydowy (cz I)........................... 191

Zalety metod hybrydowych zastosowanych w tym rozdziale.........................................191
Arkusze stylw zamiast JavaScriptu.........................................................................192
Podstawowe podejcie (wstp)........................................................................................192
Oddzielne tabele: korzyci pod wzgldem CSS i funkcji uatwie dostpu.............193
Skip navigation co i jak........................................................................................194
Dodatkowe atrybuty id..............................................................................................198
Pierwszy kod taki sam jak ostatni ...................................................................................199
Kod nawigacji: pierwsza tabela ................................................................................199
Prezentacja, semantyka, czysto i grzech................................................................200
Kod treci (druga tabela)...........................................................................................201

Rozdzia 9. Podstawy CSS ............................................................................... 203

Wstp do CSS..................................................................................................................203
Korzyci z CSS .........................................................................................................204
Anatomia stylw .............................................................................................................204
Selektory, deklaracje, waciwoci i wartoci...........................................................205
Wielokrotne deklaracje .............................................................................................206
Biaa przestrze i brak rozpoznawania wielkoci znakw .......................................207
Wartoci oglne i alternatywne ................................................................................207
Selektory grupowe ....................................................................................................208
Dziedziczenie i jego rozczanie...............................................................................209
Selektory kontekstowe (potomne) ............................................................................210
Selektory id i kontekstowe selektory id ....................................................................211
Selektory klas............................................................................................................212
czenie selektorw do tworzenia zaawansowanych efektw .................................213
Style zewntrzne, osadzone i inline ................................................................................215
Zewntrzne arkusze stylw.......................................................................................215
Style inline ................................................................................................................218
Metoda najlepszego moliwego scenariusza ...............................................................218
Od stylw osadzonych do zewntrznych: metoda dwch arkuszy...........................219
Wzgldne i absolutne cieki plikw........................................................................220
Korzyci pynce ze stosowania metod najlepszego moliwego scenariusza
i dwch arkuszy stylw ..........................................................................................220

Spis treci

Rozdzia 10. Zastosowanie CSS: ukad hybrydowy (cz II)............................... 221

Przygotowanie ilustracji..................................................................................................221
Ustalenie podstawowych parametrw.............................................................................223
Style oglne, wicej na temat skrtw i marginesw...............................................223
Elementy niewidoczne i blokowe .............................................................................224
Kolory odnonikw (wprowadzamy pseudoklasy)...................................................226
Poprawiamy inne pospolite elementy .......................................................................228
Wicej na temat rozmiarw czcionek .......................................................................229
Rozmieszczenie podziaw strony............................................................................232
Elementy nawigacyjne: pierwsze podejcie....................................................................234
CSS dla elementw nawigacyjnych: pierwsza prba przy drugim podejciu.................237
CSS dla elementw nawigacyjnych: ostatnie podejcie .................................................238
Czynnoci kocowe: style zewntrzne oraz efekt jeste tutaj .....................................239

Rozdzia 11. Praca z przegldark. Cz I:

przeczanie przez typ dokumentu i tryb standardowy...................... 243
Saga o przeczaniu przez deklaracj typu dokumentu...................................................244
Przecznik do wczania i wyczania standardw .................................................245
Przeczenie przecznika .........................................................................................246
Sterowanie wydajnoci przegldarki: przecznik typu dokumentu .............................247
Trzy tryby pracy przegldarek Gecko.......................................................................247
Kompletne i niekompletne deklaracje typu dokumentu ...........................................248
Pena lista kompletnych deklaracji typu dokumentu XHTML .................................249
witujmy rnorodno przegldarek! (A przynajmniej nauczmy si z ni y) .........252
Problem luk pomidzy obrazkami w Gecko.............................................................252
Od niech yje rnorodno do @#$! Tego $#@$............................................256

Rozdzia 12. Praca z przegldark. Cz II:

model ramkowy, bdy i sposoby radzenia sobie z nimi .................... 257
Model ramkowy i jego braki ...........................................................................................258
Jak dziaa model ramkowy?......................................................................................259
Jak model ramkowy zosta zamany? .......................................................................260
Sztuczka z modelem ramkowym: CSS stanie si bardziej demokratyczny
dziki odpowiednim zabezpieczeniom...................................................................266
Bd znakw odstpu w IE dla Windows........................................................................268
Bd waciwoci float w IE6 dla Windows ................................................................271
Flash i QuickTime: obiekty podania?..........................................................................273
Obiekty osadzane: opowie o prnoci i zemcie .................................................273
Dwie pieczenie na jednym ogniu: osadzanie obiektw multimedialnych
przy przestrzeganiu standardw .............................................................................274
yka dziegciu w beczce miodu: <object> nie dziaa ..............................................275
wiat, w ktrym omijanie bdw jest codziennoci ....................................................277

Rozdzia 13. Praca z przegldark. Cz III: typografia...................................... 279

Rozmiar ma znaczenie ....................................................................................................279
Kontrola uytkownika .....................................................................................................280
Horrory starej szkoy.......................................................................................................280
Punkty sporne............................................................................................................282
Nareszcie standardowy rozmiar ale na jak dugo? .....................................................283
Wszelkie starania zniweczone przez jedno kliknicie ..............................................285
Upojenie wszycieli: za reakcja na zmiany w przegldarkach................................285
Chimera i Safari: wietna wydajno, wstyd w kwestii rozmiarw .........................287
Jednostki em zawodz.....................................................................................................289
Ustawienia uytkownika a jednostki em...................................................................293

Projektowanie serwisw WWW. Standardy sieciowe

Piksele dowodz, e piksele dziaaj...............................................................................294
Najmniejsza jednostka: to rzecz cakowicie wzgldna .............................................295
Kopot z pikselami ....................................................................................................297
Metoda symbolicznych rozmiarw czcionek..................................................................299
Dlaczego wartoci symboliczne wygrywaj z jednostkami em i procentami?.........300
Pocztkowe problemy przy implementacji wartoci symbolicznych .......................301
Wartoci symboliczne dojrzewaj: metoda Fahrnera ...............................................302
Uyteczne czcionki: poszukiwania trwaj ................................................................304

Rozdzia 14. Podstawowe mechanizmy uatwie dostpu.................................... 305

Dostpno wedug podrcznikw..................................................................................306
Powszechna dezorientacja...............................................................................................308
Zy duch macza w tym palce ....................................................................................308
Prawo i kompozycja ........................................................................................................310
Wyjaniamy znaczenie paragrafu 508 ......................................................................310
Obalamy mity dostpnoci ..............................................................................................313
Mit: dostpno zmusza ci do tworzenia dwch wersji witryny.............................313
Mit: wersja tekstowa zaspakaja wymagania rwnego lub rwnorzdnego dostpu .. 313
Mit: dostpno kosztuje zbyt wiele .........................................................................314
Mit: dostpno wymusza tworzenie prymitywnych, sabej jakoci projektw.......316
Mit: zgodnie z paragrafem 508 witryna musi wyglda tak samo
we wszystkich przegldarkach i agentach uytkownika ........................................316
Mit: dostpno jest tylko dla osb niepenosprawnych .......................................317
Mit: Dreamweaver MX/Watchfires Bobby/
Tutaj wstaw nazw narzdzia rozwizuje wszelkie problemy dostpnoci ...........317
Mit: projektanci mog swobodnie ignorowa przepisy o dostpnoci,
jeli tak nakazuj im klienci ...................................................................................318
Udogodnienia dostpu element po elemencie.................................................................318
Obrazki......................................................................................................................319
Apple QuickTime i inne przesyane strumieniowo obrazy wideo............................321
Macromedia Flash 4/5...............................................................................................321
Macromedia Flash MX .............................................................................................322
Kolory .......................................................................................................................324
CSS ...........................................................................................................................324
Efekty rollover oraz inne zachowania implementowane w skryptach......................326
Formularze ................................................................................................................328
Mapy obrazu .............................................................................................................328
Ukady oparte na tabelach.........................................................................................328
Tabele przechowujce dane ......................................................................................329
Ramki i aplety ...........................................................................................................329
Elementy byskajce lub migajce............................................................................329
Sprawdzone narzdzia.....................................................................................................330
Korzystanie z serwisu Bobby..........................................................................................330
Interpretowanie list kontrolnych ...............................................................................331
Zachowaj kolejno: nasz dobry znajomy atrybut tabindex .....................................331
Planowanie dostpu: jak na tym skorzystasz ..................................................................336

Rozdzia 15. Wykorzystanie skryptw opartych na modelu DOM.......................... 339

Poznaj DOM....................................................................................................................339
Standardowy sposb na to, by strony WWW zachowyway si jak aplikacje .........340
Zatem gdzie to dziaa? ..............................................................................................342
Brakujca (inter)akcja: rodowiska nieobsugujce DOM .......................................343
Drobne detale DOM..................................................................................................345

Spis treci

9
Prosz, DOM, nie zrb im krzywdy................................................................................345
Pokazywanie i ukrywanie................................................................................................349
Dynamiczne menu (opuszczane i rozwijane)..................................................................353
Przeczniki stylw: uatwiaj dostp, oferuj wybr.....................................................354

Rozdzia 16. Przeprojektowywanie z zastosowaniem CSS.................................... 359

Definiujemy cele .............................................................................................................359
Charakter marki ........................................................................................................360
10 najwaniejszych celw.........................................................................................360
W tym szalestwie tkwi metoda ...............................................................................362
Ustalamy podstawowe parametry ...................................................................................365
Instalujemy pasek boczny .........................................................................................366
Ustalenie pooenia...................................................................................................367
Tworzymy kolorowe paski .......................................................................................369
Przestrze dla treci ..................................................................................................370
Projektowanie oparte na reguach ...................................................................................371
Przycisk strony gwnej z efektem rollover....................................................................374
Inne zastosowania metody Fahrnera zastpowania obrazkw (FZO) ......................376
Pasek nawigacyjny w CSS/XHTML...............................................................................379
Dodajemy style .........................................................................................................379
Czynnoci kocowe.........................................................................................................384

Dodatki .......................................................................................389
Dodatek A Nowoczesne przegldarki: dobre, ze i okropne................................ 391
Zgodne przegldarki: pierwsza fala ................................................................................392
Opera 7......................................................................................................................392
MSIE5+/Macintosh...................................................................................................392
Netscape 6+...............................................................................................................393
Mozilla 1.5 ................................................................................................................393
Safari .........................................................................................................................394
MSIE 6/Windows......................................................................................................394
MSIE 5.5/Windows...................................................................................................395
MSIE 5/Windows......................................................................................................395
Netscape 4.................................................................................................................396
MSIE 4 ......................................................................................................................396

Skorowidz...................................................................................... 397

Rozdzia 1.

99,9% witryn
jest przestarzaych
Jest taka choroba, ktra dotyka niemal kadej witryny znajdujcej 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,
ktrych wersje s oznaczone cyfr 4 lub 5. 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 Navigator, CompuServe,
AOL dla OS X, AOL China) 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 marginalna
ich cz dziaa doskonale. 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.
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.

Cz I Houston, mamy problem

36

Nowoczesne przegldarki
i standardy sieciowe
Mwic w tej ksice o nowoczesnych lub zgodnych ze standardami przegldarkach,
bdziemy mie 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: Mozilla 1.0+, Netscape
Navigator 6+, Microsoft Internet Explorer 6+ dla Windows, Microsoft Internet Explorer 5+ dla komputerw Macintosh i nowsze oraz Opera 7. Porwnanie najnowszych, zgodnych ze standardami przegldarek zostao umieszczone w dodatku A ksiki Nowoczesne
przegldarki: dobre, ze i okropne. Nie jest to lista wyczerpujca. Kada prba wyliczenia wszystkich przegldarek zgodnych ze standardami jest z gry skazana na niepowodzenie. Mimo e bdziemy 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.
Brak perfekcji przegldarek nie zwalnia z denia do zgodnoci ze standardami. Miliony
ludzi uywaj obecnie Internet Explorera 5 i 5.5 dla Windows. Jeli chodzi o zachowanie standardw, te przegldarki s gorsze od IE6/Windows, Netscape 6+ itd. 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. 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 Projektowanie i budowanie.

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, Netscape 6/7 i przegldarki bazujce na silniku Gecko nie
s nowszymi wersjami Netscape Navigatora 4. IE5+/Mac nie jest uaktualnion wersj
IE4/Mac. Opera 7 nie bazuje na tym samym kodzie, ktry napdza poprzednie wersje
przegldarki. 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.

Rozdzia 1. 99,9% witryn jest przestarzaych

37

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 mao
trwae metody produkcji.
Kiedy pka wyrostek robaczkowy u pacjenta, wykwalifikowani chirurdzy usuwaj go
cakowicie. Wyobra sobie teraz, e zamiast nich zabieg wykonuje staystka. Usuwa
zaledwie poow organu, przy okazji dgajc kilka ssiednich i na kocu zapominajc
zaszy pacjenta. Porwnanie jest troch makabryczne, ale doskonale oddaje podejcie
do obsugi standardw w starych przegldarkach: niebezpiecznie niekompletne, nieudolne
i ryzykowne dla zdrowia caej sieci.
Jeeli Netscape 4 ignoruje reguy CSS zastosowane do znacznika
 i dodaje losowe
biae znaki do kadego elementu struktury na stronie, a IE4 traktuje ten znacznik prawidowo, ale dla odmiany partaczy wyrwnywanie, to ktr ich wersj 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 Unix i Linux nie byli w ogle brani pod uwag).
Problemy z arkuszami stylw byy zaledwie kropl w morzu. 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.

Cz I Houston, mamy problem

38

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.
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
nowej przegldarki Netscape, chocia ta 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 Windows 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. Stosowane strategie wywouj zatem czsto efekty, ktrym miay zapobiega niekonsekwentne prezentowanie witryn w rnych przegldarkach (rysunek 1.1.).
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 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

Rozdzia 1. 99,9% witryn jest przestarzaych

39

Rysunek 1.1.
Witryna MSN Game Zone
(http://zone. msn.com/)
obsuguje 7 arkuszy
stylw, prezentuje si
jednak niepoprawnie
w najnowszych
przegldarkach.
Chwali si 14 skryptami,
wrd ktrych
jest bardzo opasy kod
detekcji przegldarek,
ale nawet to jej
nie pomaga.
Jak wida, wykorzystanie
duej iloci kodu
do rozwizania problemu
nie zawsze dziaa

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 strony, poczynajc od Amazon do Microsoft.com, od Sony po ZDNet. 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.

Cz I Houston, mamy problem

40

Rysunek 1.2. Jedna ze stron firmy Adobe (http://www.adobe.com/) wyglda le ze wzgldu

na nieprawidowe formatowanie odstpw midzy wierszami (kolejne wiersze zachodz na siebie).
Zamiast stworzy jeden lub dwa poczone arkusze stylw dziaajce we wszystkich przegldarkach,
projektanci przedobrzyli, tworzc style zalene od przegldarki i platformy o bardzo ubogim zestawie
funkcji. Pozostajc przy metodach starej szkoy, nie rozumiemy, e technologie CSS i XHTML
niemal zawsze eliminuj potrzeb tworzenia kilku wersji witryny

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). Taka praktyka wystawia na prb cierpliwo uytkownika korzystajcego z modemowego dostpu do sieci przez zapychanie cza rozwidlonym kodem, zagniedonymi tabelami, generowanymi w locie obrazkami, a take
przestarzaymi znacznikami i atrybutami.
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).

Kilka wersji kodu (ktry trzeba przesa kademu uytkownikowi) obcia cze waciciela witryny, podnoszc drastycznie koszty utrzymania serwisu. Im wiksza strona

Rozdzia 1. 99,9% witryn jest przestarzaych

41

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
3500 z. Przy wydatkach rzdu 64 000 z oszczdnoci wynosz 22 400 z.
Strona domowa Yahoo (rysunek 1.3) 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
  (rysunek 1.4) przez wydajne style CSS, koszt adowania
kadej strony zmalaby wielokrotnie, a zyski firmy w konsekwencji wzrosyby. Dlaczego
zatem Yahoo nie wykonao takiego kroku?
Rysunek 1.3.
Strona domowa Yahoo
(http://www.
yahoo.com/)

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 (ktrej nigdy nie posiadaa), lecz oferowanym usugom.
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.
1

Wszystkich interaktywnych cech witryny, jakie mona stworzy przy uyciu HTML-a i JavaScriptu
przyp. tum.

Cz I Houston, mamy problem

42
Rysunek 1.4.
Yahoo od rodka.
Zobacz rdo,
a przekonasz si, e kod
sucy do stworzenia
tej prosto wygldajcej
strony jest niewyobraalnie
skomplikowany

Przestarzae znaczniki: dodatkowy koszt

dla wacicieli witryn
Zamy, e kod jednej strony zbudowanej wedug starych zasad zajmuje 60 kB. Zastpienie znacznikw
  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

Rozdzia 1. 99,9% witryn jest przestarzaych

43

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.

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.
Jak to dziaa: Wiele firm oferujcych usugi hostingowe przydziela swoim uytkownikom wolny od opat miesiczny limit transferu plikw na przykad 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 Global Internet Solutions 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 (http://thewebfairy.com/gisol/). 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 1,5 centa za kady megabajt ponad limit. Strona o maym
ruchu sieciowym hostowana przez Pair.com moe utrzyma si rocznie za kwot 200
dolarw. 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
Netscape 7. 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.

Cz I Houston, mamy problem

44

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.

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.
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.

Rozdzia 1. 99,9% witryn jest przestarzaych

45

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.5,
1.6, 1.7, 1.8, 1.9).
Rysunek 1.5.
Strona domowa KPMG
(http://www.kpmg.com/)
przegldana
w Navigatorze.
Zupena rozsypka
ukadu jest efektem
zastosowania kodu
dziaajcego
wycznie w IE

Rysunek 1.6.
Serwis KPMG
jest rwnie
bezuyteczny
w Netscapeie 7.
Najwyraniej firma
nie przejmuje si
t grup klientw

Cz I Houston, mamy problem

46
Rysunek 1.7.
Ta sam strona,
tym razem w Internet
Explorerze 5
dla komputerw
Macintosh.
Widok nie jest
zachcajcy
(witryna dziaa
poprawnie przez
jaki czas, a nastpnie
zupenie nieoczekiwanie
rozsypuje si)

Rysunek 1.8.
KPMG widziany
przez IE6/Windows.
Tutaj serwis
w kocu dziaa

Nie bdziemy udawa, e rozumiemy podejcie biznesowe firmy, ktra z zaoenia mwi
NIE jednej czwartej swoich potencjalnych klientw. Tak dua liczba klientw stracona
przez krtkowzroczne podejcie nie powinna by 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

Rozdzia 1. 99,9% witryn jest przestarzaych

47

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

gwarancja, e Internet Explorer (lub nawet przegldarki dla komputerw stacjonarnych

jako kategoria oprogramowania) bd dominowa w przyszoci.
Klika lat przed powstaniem tej ksiki Netscape Navigator cieszy si wikszym powodzeniem na rynku ni Internet Explorer obecnie. W owym czasie funkcjonowa
pogld, i Netscape jest jedyn liczc si przegldark, rwnie wrd programistw
tworzcych strony internetowe. Niezliczone miliony dolarw pniej rynek uleg zmianie. Strony dziaajce wycznie pod Netscapeem zostay wyrzucone na mietnik obok
internetowej superautostrady, po ktrej miay si porusza.
Czy podobny los spotka witryny wycznie dla IE? Kopot polega na tym, e nie ma
odpowiedzi na to pytanie. Jedyn pewn rzecz w sieci jest zmiana. Odpowied twierdzc sugeruj jednak cigle rozwijajce si urzdzenia korzystajce z internetu, a take
pogld, i projektowanie z przeznaczeniem wycznie dla jednej przegldarki stacjonarnej, kosztem wszystkich innych, jest drog donikd.
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.

Cz I Houston, mamy problem

48

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 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 Netscapeie 4, nie dziaao
w Netscapeie 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 nieDHTML-owy JavaScript dla Netscapea 3 i nie-DHTML-owy kod dla IE3. W ostatecznoci pod uwag naleao jeszcze bra inne wersje kodu przeznaczone dla mniej

Rozdzia 1. 99,9% witryn jest przestarzaych

49

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., 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
bardo 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. 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.
Podobnie pierwsz rzecz, jakiej uczy si grafik komputerowy, jest to, e jako materiaw rdowych determinuje jako produktu kocowego. Zacznij od dobrej jakoci
fotografii wykonanej w duej rozdzielczoci, a otrzymasz porzdny wydruk lub obrazek
na stron WWW. Zacznij od niskiej jakoci fotki lub wykonanego w maej rozdzielczoci zdjcia cyfrowego, a otrzymasz wynik, na ktry nie warto bdzie nawet spojrze.
Z wysokiej jakoci rysunku mona wyprodukowa dobre logo dla witryny, ale operacja
odwrotna jest niemoliwa. Wkadasz mieci, otrzymujesz mieci.
Jednak tradycyjne przegldarki nie dziaaj w taki sposb. Ich swoboda w przyjmowaniu bdnych danych posunita jest do absurdu. Akceptuj wszystko, poczynajc

Cz I Houston, mamy problem

50

od le skonstruowanych znacznikw, przez niedziaajce odnoniki, a po bdny kod

JavaScript. W wikszoci przypadkw, mimo takich bdw, pokazuj stron tak, jakby
bya skonstruowana poprawnie. Ta swoboda od zawsze zachcaa czoowych projektantw i programistw do wyrabiania w sobie zych przyzwyczaje, ktrych sami
mogli by nawet niewiadomi. Jednoczenie przekonywaa pozostajcych bardziej w cieniu
fachowcw z brany do postrzegania technologii takich jak XHTML, CSS i JavaScript jako pogardliwie prymitywnych.
Przy braku szacunku dla narzdzia trudno stosowa go poprawnie. Rozwamy poniszy
fragment kodu zaczerpnity z drogiej komercyjnej strony nalecej do firmy wspzawodniczcej na wymagajcym rynku, przedrukowany tutaj znak w znak:



   


 
 
 !
"
"
"
"

Nonsensowny znacznik
  jest le zapisanym znacznikiem
 . Dziki zastosowaniu bardzo wydajnego narzdzia do publikowania witryn ta literwka przewija
si tysice razy przez kod strony. Jeli pominiemy sam bd, przedstawiony fragment
kodu powinien wyglda znajomo. By moe jest on wrcz odzwierciedleniem kodu,
ktry stosujesz na swoich stronach. W kontekcie tej konkretnej witryny cao mona
byo zredukowa do nastpujcej postaci:

# !
"#

Poczony z odpowiedni regu w arkuszu stylw ten prociutki, strukturalny fragment kodu bdzie robi dokadnie to samo, co nieefektywny, niestandardowy i bdny
kod przedstawiony wyej. Mniejsza ilo kodu wpynie pozytywnie na wydajno cza
serwera i klienta, a take uatwi przejcie do bardziej elastycznej formy strony wspomaganej przez znaczniki XML. Ta sama komercyjna strona zawiera rwnie bdny
skrypt w jzyku JavaScript:

$%$ &
'
 (""')"

*)')+,
"

Oprcz innych usterek pozbawiony cudzysoww atrybut okrelajcy jzyk styka si

z atrybutem wskazujcym rdo skryptu. Innymi sowy, przegldarka zostaa poproszona o uycie nieistniejcego jzyka skryptowego (
  ).
Jakby na to nie patrze, strona powinna przesta dziaa, informujc projektantw
o popenionym przez nich bdzie i motywujc do jego natychmiastowego usunicia.
Mimo to jeszcze do niedawna strona bya serwowana najpopularniejszym przegldarkom
w niezmienionej postaci. Jest to tylko jeden z niezliczonych przykadw zupenego
braku szacunku dla procesu projektowania interfejsu witryny przez dowiadczonych
programistw.

mietnik utrzymywany w kodzie

moe by niebezpieczny dla zdrowia witryny
W miar jak nowe przegldarki zaczynaj przestrzega standardw sieciowych, stawiaj
coraz bardziej rygorystyczne wymagania projektantom i programistom. Ich tolerancja
bdnego kodu oraz odnonikw jest coraz mniejsza. Znaczenia zaczyna nabiera zasada

Rozdzia 1. 99,9% witryn jest przestarzaych

51

wkadania mieci i otrzymywania mieci znajomo standardw sieciowych staje

si niezbdnym elementem wiedzy dla kadego, kto projektuje lub buduje witryny.
Wyrzdzon szkod mona naprawi. Moemy projektowa i budowa witryny w taki
sposb, aby dziaay na rnych przegldarkach i platformach, zapobiegajc jednoczenie problemom zwizanym z brakiem zgodnoci i blokowaniem uytkownikw.
W ten sposb zbudujemy pomost do potniejszej, bardziej dostpnej i racjonalnie
zaprojektowanej sieci.
Lek na przestarzao mona znale w zbiorze powszechnie wspieranych technologii
nazywanych standardami sieciowymi. Przez nauk projektowania i budowania z uyciem standardw sieciowych moemy zagwarantowa zgodno w przd kadej witrynie, jaka wyjdzie spod naszej rki.
Napisz raz, publikuj wszdzie, obietnica standardw sieciowych jest czym wicej
ni tylko pobonym yczeniem. Standardy sieciowe s wrd nas ju dzi, dziki zastosowaniu metod, jakie odkryjemy w tej ksice. Mimo e obecnie najpopularniejsze
na rynku przegldarki ostatecznie skoniy si ku obsudze standardw sieciowych,
wiadomo ta nie dotara jeszcze do kadego pracujcego w brany projektanta i programisty. Nowo powstajce strony nadal zawieraj niestandardowe znaczniki oraz
kod. Ta ksika ma odmieni ten stan.

Lek
Po dugiej batalii projektantw i programistw z producentami najpopularniejszych
na rynku przegldarek moemy w kocu skorzysta z technik, ktre gwarantuj jednakowy wygld i zachowanie stron we wszystkich przegldarkach.
Stworzone przez czonkw konsorcjum W3C i inne organizacje zajmujce si ustanawianiem standardw oraz obsugiwane przez wspczesne przegldarki firm Netscape,
Microsoft, Opera i innych, technologie takie jak CSS, XHTML, ECMAScript (standardowa wersja JavaScript) i W3C DOM pozwalaj projektantom:

bardziej precyzyjne kontrolowa ukad, pooenie i typografi w przegldarkach

graficznych z moliwoci zmiany prezentacji strony wedug potrzeb

uytkownika,

projektowa zaawansowane funkcje interaktywne witryn dziaajce w rnych

przegldarkach i na rnych platformach,

przestrzega praw i wytycznych dotyczcych funkcji uatwiania nawigacji

bez pogarszania wygldu, wydajnoci lub stopnia skomplikowania,

zmieni projekt witryny w cigu godzin, a nie tygodni, i tym samy zredukowa

koszty pracy,

obsugiwa wiele przegldarek bez koniecznoci tworzenia wielu wersji

witryny i z bardzo ma iloci lub brakiem rozwidlonego kodu,

Cz I Houston, mamy problem

52

obsugiwa niestandardowe urzdzenia, poczynajc od bezprzewodowych

gadetw i telefonw komrkowych z dostpem do sieci, a po czytniki kodu

Braillea oraz czytniki zawartoci ekranu stosowane przez osoby
niepenosprawne ponownie bez koniecznoci ponoszenia dodatkowych
kosztw i tworzenia wielu wersji witryny,

oferowa wersje stron do wydruku, czsto bez koniecznoci tworzenia

oddzielnych stron przeznaczonych specjalnie do wydruku lub bazowania

na drogich systemach do tworzenia dokumentacji drukowanej,

oddziela styl od struktury i zachowania, dostarcza kreatywne ukady stron

wsparte przez rygorystyczn struktur dokumentu umoliwiajc reprodukowanie

dokumentw sieciowych w zaawansowanych rodowiskach publikacji,

przej z HTML-a, jzyka starej sieci, na ukad znacznikw bazujcy

na niezwykle potnym standardzie, jakim jest XML,

zapewni, i dobrze zaprojektowane i zbudowane strony bd dziaa doskonale

w przegldarkach zgodnych ze standardami i zachowywa si poprawnie

w starszych programach,

zapewni, i dobrze zaprojektowane i zbudowane witryny bd dziaa w nowych

przegldarkach i urzdzeniach, cznie z tymi, ktrych jeszcze nie zbudowano

lub nawet nie wymylono. Jest to obietnica zgodnoci w przd,

i wicej, co pokae niniejsza ksika.

Zanim bdziemy mogli nauczy si, w jaki sposb standardy umoliwiaj realizacj
wymienionych wyej obietnic, musimy przyjrze si metodom starej szkoy, aby
dowiedzie si, w jaki sposb generuj one nieustajcy cykl starzenia si witryn. Wyjani
to rozdzia 2. Projektowanie i budowanie z uyciem standardw.