You are on page 1of 17

Id do

Spis treci
Przykadowy rozdzia
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

Kontakt
Helion SA
ul. Kociuszki 1c
44-100 Gliwice
tel. 32 230 98 63
e-mail: helion@helion.pl
Helion 19912010

Tworzenie stron metod


stopniowego ulepszania.
Witryny dostpne dla kadego
Autorzy: Todd Parker, Scott Jehl,
Maggie Costello Wachs, Patty Toland
Tumaczenie: ukasz Piwko
ISBN: 978-83-246-2797-4
Tytu oryginau: Designing with Progressive Enhancement:
Building the Web that Works for Everyone
Format: 168237, stron: 416
Twrz strony dostpne dla kadej przegldarki i dowolnego poczenia internetowego!
Obecnie tempo powstawania nowych stron i aplikacji jest zawrotne. Korzystanie z sieci
jest coraz atwiejsze, szybsze i bardziej dynamiczne. Co wicej, uwalniamy si od kabli
dziki rozwojowi telefonw komrkowych z dostpem do internetu i kompaktowych
netbookw, zapewniajcych nam poczenie ze wiatem niezalenie od miejsca,
w ktrym si znajdujemy. Jednak to bogactwo internetowych zasobw ma rwnie swoje
wady. Zaawansowane techniki znakomicie dziaaj w najnowszych przegldarkach,
obsugujcych technologie oparte na CSS i jzyku JavaScript. Istnieje jednak mnstwo
urzdze, ktre w najlepszym wypadku obsuguj je tylko w ograniczonym stopniu,
przez co wysiki programisty mog spezn na niczym. Projektanci i programici stron
internetowych musz zatem pogodzi trzy wzajemnie wykluczajce si cele. Chc
wykorzysta wszystkie dostpne i ekscytujce technologie, aby mc tworzy
przykuwajce uwag interaktywne strony, nie tracc jednoczenie na ich dostpnoci.
A wszystko to powinni osign, tworzc czysty i atwy do utrzymania kod.
Stopniowe ulepszanie to technika tworzenia stron internetowych zapewniajca wszystkim
uytkownikom dostp do podstawowych treci i opcji witryny przy uyciu dowolnej
przegldarki i poczenia. Jednoczenie posiadaczom szybszych pocze i bardziej
zaawansowanych przegldarek oferuje ono ulepszon wersj strony.
Tworzenie stron metod stopniowego ulepszania. Witryny dostpne dla kadego to
praktyczny przewodnik po zasadach tworzenia stron za pomoc nowej metodologii.
Dziki niemu dowiesz si, dlaczego standardowe techniki tworzenia stron wykluczaj
niektrych uytkownikw z grona odbiorcw, i jak analizowa projekty interfejsw, aby
byy funkcjonalne na kadym poziomie zaawansowania przegldarki. Poznasz pakiet
testw moliwoci przegldarek, a take najlepsze metody pisania kodu HTML, CSS
i JavaScript w technice stopniowego ulepszania.
Planowanie struktury i organizacji witryny
Pisanie semantycznego kodu
Stosowanie stylw
Elementy interaktywne
Testowanie moliwoci przegldarek
Karty
Okna dialogowe i nakadki
Przyciski, pola wyboru, suwaki i menu
Konstruktor list
Dostarczaj peni wrae wszystkim odbiorcom Twoich stron internetowych!

Spis treci
Podzikowania
Wstp

11
13

CZ I METODA STOPNIOWEGO ULEPSZANIA OPARTA NA TESTACH


Rozdzia 1. Nasze podejcie

33

Sprawdzanie moliwoci przegldarek ...................................................................................34


Planowanie stopniowego ulepszania przewietlanie........................................................36
Od przewietlania do dziaania technika stopniowego ulepszania ................................38
Praktyka.......................................................................................................................................40
Rozdzia 2. Stopniowe ulepszanie w akcji przewietlanie

41

Przewietlanie informacje podstawowe .............................................................................42


Definiowanie hierarchii treci i znajdowanie odpowiednikw HTML
dla komponentw.............................................................................................................43
Tworzenie bazowego kodu znacznikw i bezpiecznych stylw ....................................45
Dodawanie rozszerze ........................................................................................................46
Przypadek 1. Planowanie struktury i ukadu witryny z wiadomociami ......................48
Ocenianie organizacji treci i nadawanie nazw ...............................................................48
Organizowanie treci za pomoc standardowych elementw HTML .........................50
Struktura nawigacji..............................................................................................................50
Dodawanie treci warstwowej i animowanej ...................................................................51
Dynamiczne filtrowanie i sortowanie ...............................................................................52
Przypadek 2. Kolejno czynnoci oraz sprawdzanie i wysyanie danych
z formularza skadania zamwienia .....................................................................................53
Rozkadanie na czynniki formularza skadania zamwienia.........................................54
Stosowanie znacznikw zapewniajcych dostpno .....................................................60
Definiowanie ogranicze i walidacja.................................................................................62
Skadanie wersji podstawowej i rozszerzonej...................................................................63
Przypadek 3. Interaktywne wizualizowanie danych w kalkulatorze budetu...............63
Wybr podstawowych elementw dla suwakw.............................................................64
Tworzenie dostpnych suwakw z kodu bazowego........................................................66
Tworzenie wykresu..............................................................................................................67

TWORZENIE STRON METOD STOPNIOWEGO ULEPSZANIA. WITRYNY DOSTPNE DLA KADEGO

Przypadek 4. Funkcjonalno zwykych programw w oknie przegldarki:


meneder zdj........................................................................................................................69
Znakowanie elementw nawigacji globalnej....................................................................70
Skomplikowane interakcje..................................................................................................71
Tworzenie niestandardowych formularzy i nakadek ....................................................75
Obsuga przycisku Wstecz..................................................................................................76
Lista kontrolna przewietlania .................................................................................................77
Rozdzia 3. Pisanie semantycznego kodu

79

Znakowanie tekstu i obrazw...................................................................................................80


Znakowanie tekstu...............................................................................................................81
Listy........................................................................................................................................86
Dane tabelaryczne................................................................................................................87
Obrazy ...................................................................................................................................89
Wstawianie plikw multimedialnych ...............................................................................90
Osadzanie treci ze stron zewntrznych ...........................................................................92
Znakowanie treci interaktywnej .............................................................................................93
cza ......................................................................................................................................93
Struktura formularza...........................................................................................................94
Kontrolki formularza ..........................................................................................................96
Tworzenie kontekstu na stronie............................................................................................ 101
Elementy blokowe i rdliniowe..................................................................................... 102
Przypisywanie elementom identyfikatorw i klas........................................................ 103
Oznaczaj gwne czci strony za pomoc rl WAI-ARIA ........................................ 104
Kolejno elementw........................................................................................................ 105
Stosuj atrybut title............................................................................................................. 107
Struktura dokumentu HTML................................................................................................ 108
Definiowanie typu dokumentu....................................................................................... 109
Nagwek dokumentu...................................................................................................... 110
Dostpno............................................................................................................................... 115
Wytyczne dotyczce dostpnoci i regulacje prawne .................................................. 115
Wytyczne WCAG ............................................................................................................. 117
Rozdzia 4. Efektywne stosowanie stylw

119

Sposoby wstawiania arkuszy stylw na stron .................................................................... 120


Zapisywanie stylw w plikach zewntrznych................................................................ 120
Doczanie zewntrznych arkuszy stylw ..................................................................... 121
Konwencje nazewnicze .................................................................................................... 123

SPIS TRECI

Style dla wersji podstawowej i rozszerzonej witryny ......................................................... 124


Bezpieczny arkusz stylw dla wersji podstawowej ....................................................... 124
Style w wersji rozszerzonej .............................................................................................. 125
Dostpno............................................................................................................................... 127
Bdy przegldarek i rne sposoby interpretowania stylw............................................... 129
Komentarze warunkowe .................................................................................................. 129
Czsto spotykane problemy i ich rozwizania .............................................................. 130
Rozdzia 5. Rozszerzenia skryptowe i elementy interaktywne

135

Dodawanie skryptw do strony ............................................................................................ 136


Nie wpisuj skryptw bezporednio w kodzie strony.................................................... 136
Doczanie zewntrznych skryptw............................................................................... 136
Rola JavaScriptu w kodzie podstawowym ........................................................................... 137
Najlepsze praktyki pisania rozszerze.................................................................................. 137
Uruchamianie skryptw, gdy tre jest gotowa ............................................................ 137
Dodawanie elementw interaktywnoci........................................................................ 138
Budowanie rozszerzonego kodu znacznikowego przy uyciu JavaScriptu............... 140
Zapewnianie widocznoci treci ..................................................................................... 143
Stosowanie rozszerze stylistycznych ............................................................................ 144
Dostpno i waciwoci uytkowe ..................................................................................... 145
Implementacja dostpu za pomoc klawiatury ............................................................ 146
Definiowanie atrybutw WAI-ARIA............................................................................. 147
Testowanie dostpnoci ................................................................................................... 148
Dostpno i waciwoci uytkowe............................................................................... 149
Rozdzia 6. Testowanie moliwoci przegldarek

151

EnhanceJS pakiet testw moliwoci przegldarek ....................................................... 152


Sposb dziaania testw ................................................................................................... 153
Stosowanie rozszerze przy uyciu EnhanceJS................................................................... 155
Konfigurowanie skryptu EnhanceJS..................................................................................... 157
Wczytywanie dodatkowych arkuszy stylw.................................................................. 158
Wczytywanie dodatkowych skryptw ........................................................................... 160
Modyfikowanie odnonika do przeczania wersji ...................................................... 161
Wymuszanie okrelonego wyniku testu EnhanceJS .................................................... 162
Rozszerzanie zestawu testw EnhanceJS ............................................................................. 163
Modyfikowanie pakietu testw za pomoc opcji EnhanceJS...................................... 163
Tworzenie nowych lub dodatkowych egzemplarzy EnhanceJS ................................. 164
Wywietlanie powiadomie o bdach .......................................................................... 165
Optymalizowanie skryptu EnhanceJS na serwerze ............................................................ 165

TWORZENIE STRON METOD STOPNIOWEGO ULEPSZANIA. WITRYNY DOSTPNE DLA KADEGO

CZ II STOPNIOWE ULEPSZANIE ZAGADNIENIA PRAKTYCZNE


Rozdzia 7. Tworzenie komponentw technik stopniowego ulepszania

169

Sposb pisania kodu komponentw .................................................................................... 170


Organizacja tej czci ksiki................................................................................................. 171
Przykadowy kod do pobrania............................................................................................... 173
Rozdzia 8. Tre skadana

175

Przewietlanie .......................................................................................................................... 176


Tworzenie dostpnej treci zwijanej..................................................................................... 178
Kod bazowy ....................................................................................................................... 178
Wersja rozszerzona........................................................................................................... 179
Skrypt obsugujcy zwijanie i rozwijanie treci ............................................................ 182
Korzystanie ze skryptu ........................................................................................................... 184
Rozdzia 9. Karty

187

Przewietlanie .......................................................................................................................... 187


Tworzenie kart......................................................................................................................... 190
Kod bazowy ....................................................................................................................... 190
Wersja rozszerzona........................................................................................................... 192
Skrypt kart.......................................................................................................................... 196
Dalsze rozszerzanie kart......................................................................................................... 199
Zakadki i historia ............................................................................................................. 199
Automatyczne obracanie kart ......................................................................................... 202
Wstawianie na karty treci zewntrznej......................................................................... 203
Wywietlanie kart jako harmonijki ................................................................................ 203
Korzystanie ze skryptu kart ................................................................................................... 204
Rozdzia 10. Chmurki

207

Przewietlanie .......................................................................................................................... 208


Tworzenie chmurek za pomoc atrybutu title .................................................................... 211
Kod bazowy ....................................................................................................................... 211
Wersja rozszerzona........................................................................................................... 212
Skrypt.................................................................................................................................. 214
Tworzenie chmurki z kotwicy ............................................................................................... 216
Tworzenie chmurki przy uyciu treci zewntrznej........................................................... 218
Korzystanie ze skryptu chmurek........................................................................................... 219

SPIS TRECI

Rozdzia 11. Kontrolki drzewiaste

221

Przewietlanie .......................................................................................................................... 222


Tworzenie kontrolki drzewiastej........................................................................................... 224
Kod bazowy ....................................................................................................................... 225
Wersja rozszerzona........................................................................................................... 226
Skrypt rozszerze.............................................................................................................. 230
Korzystanie ze skryptu ........................................................................................................... 236
Rozdzia 12. Tworzenie wykresw przy uyciu elementu canvas

239

Przewietlanie .......................................................................................................................... 240


Kod bazowy.............................................................................................................................. 242
Tworzenie dostpnych wykresw......................................................................................... 244
Pobieranie danych z tabeli............................................................................................... 244
Prezentowanie danych w elemencie canvas .................................................................. 249
Zaawansowana stylizacja tabeli....................................................................................... 256
Dostpno danych tabeli ................................................................................................ 258
Techniki zaawansowane wtyczka visualize.js................................................................. 259
Rozdzia 13. Okna dialogowe i nakadki

263

Przewietlanie .......................................................................................................................... 264


Tworzenie okna dialogowego................................................................................................ 266
Kod bazowy ....................................................................................................................... 267
Wersja rozszerzona........................................................................................................... 268
Skrypt okna dialogowego................................................................................................. 273
Dalsza praca nad oknem dialogowym.................................................................................. 278
Korzystanie ze skryptu ........................................................................................................... 278
Rozdzia 14. Przyciski

283

Przewietlanie .......................................................................................................................... 284


Przyciski z elementu input..................................................................................................... 285
Kod bazowy ....................................................................................................................... 285
Wersja rozszerzona........................................................................................................... 287
Skrypt zmieniajcy stany.................................................................................................. 291
Przyciski z zaawansowanym formatowaniem..................................................................... 291
Kod bazowy ....................................................................................................................... 292
Wersja rozszerzona........................................................................................................... 292
Skrypt zamieniajcy elementy input na button ............................................................ 294

TWORZENIE STRON METOD STOPNIOWEGO ULEPSZANIA. WITRYNY DOSTPNE DLA KADEGO

Korzystanie ze skryptu ........................................................................................................... 296


Dalsze rozszerzanie funkcjonalnoci przyciskw ............................................................... 297
Rozdzia 15. Pola wyboru, przyciski radiowe i rankingi gwiazdkowe

299

Przewietlanie .......................................................................................................................... 300


Tworzenie niestandardowego pola wyboru ........................................................................ 303
Kod bazowy ....................................................................................................................... 303
Wersja rozszerzona........................................................................................................... 305
Skrypt pl wyboru............................................................................................................. 307
Niestandardowe przyciski radiowe....................................................................................... 309
Kod bazowy ....................................................................................................................... 310
Wersja rozszerzona........................................................................................................... 310
Skrypt przyciskw radiowych ......................................................................................... 312
Dalsze modyfikowanie elementw input............................................................................. 315
Kod bazowy ....................................................................................................................... 315
Kod rozszerzony................................................................................................................ 316
Skrypt komponentu rankingowego................................................................................ 318
Korzystanie ze skryptw ........................................................................................................ 321
Rozdzia 16. Suwaki

323

Przewietlanie .......................................................................................................................... 324


Tworzenie suwaka................................................................................................................... 327
Kod bazowy ....................................................................................................................... 327
Wersja rozszerzona........................................................................................................... 329
Skrypt suwakw ................................................................................................................ 335
Korzystanie ze skryptu suwaka ............................................................................................. 340
Rozdzia 17. Menu wyboru

343

Przewietlanie .......................................................................................................................... 344


Tworzenie dostpnego menu wyboru.................................................................................. 346
Kod bazowy ....................................................................................................................... 346
Wersja rozszerzona........................................................................................................... 347
Skrypt rozszerzajcy ......................................................................................................... 355
Zaawansowane stylizowanie menu wyboru ........................................................................ 362
Korzystanie ze skryptu ........................................................................................................... 364

SPIS TRECI

Rozdzia 18. Konstruktor list

367

Przewietlanie .......................................................................................................................... 368


Tworzenie konstruktora list .................................................................................................. 370
Kod bazowy ....................................................................................................................... 370
Wersja rozszerzona........................................................................................................... 371
Skrypt konstruktora list ................................................................................................... 375
Wzbogacanie funkcjonalnoci konstruktora list zaznaczanie wielu elementw,
sortowanie, automatyczne uzupenianie i menu kontekstowe...................................... 380
Zaznaczanie wielu elementw......................................................................................... 380
Sortowanie za pomoc przecigania i upuszczania...................................................... 380
Automatyczne uzupenianie............................................................................................ 380
Menu kontekstowe ........................................................................................................... 381
Korzystanie ze skryptu ........................................................................................................... 381
Rozdzia 19. Pole plikowe

383

Przewietlanie .......................................................................................................................... 384


Tworzenie niestandardowego pola plikowego.................................................................... 386
Kod bazowy ....................................................................................................................... 386
Kod rozszerzony................................................................................................................ 387
Skrypt rozszerzajcy ......................................................................................................... 390
Korzystanie ze skryptu ........................................................................................................... 393
Podsumowanie

395

Skorowidz

397

ROZDZIA PIERWSZY. NASZE PODEJCIE

33

Rozdzia pierwszy

Nasze podejcie
Najnowsze innowacje w zakresie technologii internetowych gwnie wprowadzane za
pomoc zaawansowanych technik CSS, dziaajcych po stronie klienta JavaScriptu i Ajaksa,
oraz wtyczek typu Flash zamieniy nowoczesne witryny internetowe w atrakcyjne wizualnie aplikacje o duych moliwociach interakcyjnych. Jest jednak jeden problem rne
przegldarki i urzdzenia na rne sposoby obsuguj wymienione technologie. Mimo i
nowoczesne przegldarki i najnowsze urzdzenia przenone potrafi wywietli nawet
najbardziej skomplikowane interfejsy, stanowi one tylko cz wszystkich odbiornikw
stron internetowych. A jak ju wspominalimy wczeniej, tworzc witryn lub aplikacj
dostpn tylko wskiej grupie najnowszych urzdze i przegldarek, znacznie utrudniamy
sobie dotarcie do jak najszerszego grona odbiorcw.
Chcemy sprawi, aby tre, przesanie i funkcjonalno naszych klientw byy dostpne
dla kadego nie tylko dla tych, ktrzy maj nowoczesne przegldarki obsugujce najnowoczeniejsze technologie, lecz kadego, kto ma urzdzenie z dostpem do sieci. Dlatego
kilka lat temu postanowilimy zastosowa filozofi stopniowego ulepszania w projektach
naszych klientw.
Teoretycznie idea stopniowego ulepszania jest prosta twrz strony zgodne ze standardami i przy uyciu czystego HTML-a, aby mie pewno, e praktycznie kade urzdzenie
wywietli ich tre w jaki uyteczny sposb. Nastpnie na na ten szkielet warstwy CSS
i JavaScript, z ktrych bd mogy skorzysta te przegldarki, ktre obsuguj te technologie.
Gdy zaczlimy stosowa to podejcie do tworzenia stron i przetestowalimy nasz produkt,
dokonalimy wanego odkrycia zapomnielimy, e wiele starych przegldarek i nowszych
urzdze przenonych tylko czciowo obsuguje CSS i JavaScript oraz e uytkownicy
mog wycza ich obsug, aby zwikszy szybko, podnie poziom bezpieczestwa
lub polepszy jakie waciwoci uytkowe. Obecnie skomplikowane interfejsy aplikacji
i widgety s tworzone przy uyciu cile wsppracujcego kodu CSS i JavaScript wyobra
sobie korzystanie z kalendarza lub paska przewijania w przegldarce, ktra obsuguje
JavaScript, ale niepoprawnie obsuguje CSS (rezultat byby opakany).

34

TWORZENIE STRON METOD STOPNIOWEGO ULEPSZANIA. WITRYNY DOSTPNE DLA KADEGO

Podczas testowania naszych witryn utworzonych przy zastosowaniu technik stopniowego


ulepszania znalelimy kilka przegldarek, ktre doskonae strony zamieniay w bezuyteczny baagan, poniewa uruchamiay skrypty i stosoway style, ktre nie w peni byy
przez nie obsugiwane. Jak wic dowiedzie si, ktre przegldarki poprawnie zastosuj
nasze ulepszenia?
Doszlimy do wniosku, e aby mie pewno, i stopniowe ulepszanie pozwoli opracowa
produkt dostpny dla kadego, musimy zrobi trzy rzeczy:
 Krytycznie przejrze projekt i upewni si, e kady jego element nawet najspryt-

niejszy komponent Web 2.0 lub Ajax powsta w oparciu o semantyczny kod HTML
o prawidowej strukturze, ktry nawet w przegldarkach nieobsugujcych CSS i JavaScriptu zachowuje przynajmniej swoje podstawowe funkcje.
 Przetestowa poziom obsugi CSS i JavaScriptu w przegldarce przed zastosowaniem

ulepsze, aby zdecydowa, czy w przegldarce tej poprzesta na podstawowej funkcjonalnoci, czy doda dla niej ulepszenia.
 W przypadku przegldarek obsugujcych rozszerzone funkcje naley zapewni jak

najwyszy poziom dostpnoci do strony za pomoc klawiatury oraz doda elementy


wspomagajce prac czytnikw ekranu.
W tym rozdziale opisany jest test sprawnoci przegldarek, za pomoc ktrego okrelamy,
czy danej przegldarce mona zaserwowa rozszerzon wersj witryny. Nastpnie przejdziemy do szczegowego przedstawienia techniki stopniowego ulepszania, ktr stosujemy w naszych projektach na co dzie. T cz zaczniemy od opisu czynnoci nazywanej
przez nas przewietlaniem (ang. x-ray perspective). Polega ona na przeanalizowaniu skomplikowanego projektu interfejsu, wyodrbnieniu semantycznego kodu HTML, na bazie
ktrego oparta bdzie podstawowa funkcjonalno, oraz zaplanowaniu zaawansowanych
elementw CSS i JavaScript przeznaczonych dla nowoczesnych przegldarek przy jednoczesnym zachowaniu penej zgodnoci z czytnikami ekranu.

Sprawdzanie moliwoci przegldarek


Z naszych wstpnych bada stopniowego ulepszania wynika, e wikszo programistw
rozszerza funkcjonalno swoich stron na jeden z dwch sposobw dostarczajc rozszerzon funkcjonalno wszystkim przegldarkom, ktre maj wczon obsug JavaScriptu
lub kierujc rozszerzenia do wybranych przegldarek za pomoc techniki wykrywania typu
przegldarki (ang. browser sniffing).
Wykrywanie typu przegldarki wykluczylimy od razu z kilku powodw:
 Efektywne wykrywanie przegldarek wymaga drobiazgowej wiedzy na temat ich zacho-

wa (oraz wszystkich ich wersji), przez co utrzymanie odpowiadajcych za to skryptw


jest bardzo trudnym i nigdy niekoczcym si zadaniem.

ROZDZIA PIERWSZY. NASZE PODEJCIE

35

 Z definicji metoda ta nie jest przyszociowa. Mona wykrywa tylko te przegldarki,

ktre s dostpne obecnie, a wszystkie te, ktre pojawi si w przyszoci, bd blokowane, dopki nie doda si ich do listy.
 Nawet najpeniejsza lista dopuszczonych przegldarek moe nie spenia swojego

zadania, poniewa niektre przegldarki s skonfigurowane w taki sposb, aby zgaszay


si jako inna aplikacja, aby obej wanie te techniki (nazywa si to czasami robieniem
w balona ang. browser spoofing).
Zatem pierwsze z wymienionych podej dostarczanie ulepsze przegldarkom z wczon obsug JavaScriptu wydaje si lepszym rozwizaniem, poniewa wikszo
przegldarek obsugujcych JavaScript jest w stanie poradzi sobie z rozszerzeniami.
Przypomnijmy jednak, e napotkalimy zaskakujco duo przypadkw tylko czciowego
obsugiwania pewnych ulepsze przez niektre przegldarki, co powodowao bdy JavaScript i ukadu stron.
Po uwanym przeanalizowaniu tych sytuacji odkrylimy dwa gwne powody ich wystpowania: niektre przegldarki le interpretoway kod CSS, poniewa obsugiway niezgodnie ze standardami model polowy (ang. box model), pozycjonowanie, pywanie
elementw i wiele innych czsto uywanych wasnoci CSS. Inne natomiast niepoprawnie
wykonyway funkcje JavaScript, jak operowanie na modelu DOM, obsuga zdarze, zmienianie rozmiaru okna oraz wykonywanie da Ajax.
Zastosowanie techniki stopniowego ulepszania byoby znacznie atwiejsze, gdybymy
mieli jaki niezawodny sposb na uzyskanie przekroju moliwoci przegldarek. Wwczas
moglibymy dostarcza rozszerzenia tylko tym aplikacjom, dla ktrych mielibymy pewno, e CSS i JavaScript s obsugiwane poprawnie.
Majc ten cel w pamici, metod prb i bdw opracowalimy szkielet testowy funkcjonalnoci przegldarek. Podstawowa lista funkcji do sprawdzenia w zakresie obsugi JavaScriptu
bya w zasadzie oczywista zastosowalimy metod o nazwie wykrywanie obiektw
(ang. object detection), ktra polegaa na pytaniu przegldarki, czy rozpoznaje rodzime
obiekty, takie jak funkcja document.getElementById i otrzymywaniu jednoznacznej odpowiedzi prawda lub fasz. Kady test zosta napisany w taki sposb, aby przegldarki,
ktre nie rozpoznaway jakiego kodu JavaScript, nie zgaszay adnych bdw.
Znacznie trudniej byo sprawdzi, czy dana przegldarka poprawnie obsugiwaa zaawansowane techniki CSS. Nie da si po prostu sprawdzi, czy przegldarka poprawnie obsuguje
okrelone wasnoci CSS, takie jak elementy pywajce, pozycjonowanie, pionowe uoenie
elementw czy przezroczysto, za pomoc metody wykrywania obiektw.
Dlatego opracowalimy zestaw testw CSS. Kady z nich wstawia na stron za pomoc JavaScriptu niewidoczne elementy HTML, stosuje zestaw zaawansowanych regu CSS, a nastpnie uruchamia funkcj JavaScript sprawdzajc wynik. Aby na przykad dowiedzie si,

36

TWORZENIE STRON METOD STOPNIOWEGO ULEPSZANIA. WITRYNY DOSTPNE DLA KADEGO

czy przegldarka poprawnie obsuguje pozycjonowanie, test umieszcza za pomoc CSS


w okrelonym miejscu element div, a nastpnie uruchamia skrypt porwnujcy uzyskane
wsprzdne tego elementu z danymi wzorcowymi.
Jeli przegldarka przejdzie wszystkie testy z powodzeniem, mamy pewno, e obsuguje CSS i JavaScript w zgodny ze standardami i spjny sposb, a wic powinna poradzi
sobie z rozszerzon funkcjonalnoci witryny. W tym momencie test dynamicznie aduje
zaawansowane arkusze stylw i skrypty przeksztacajce podstawowy kod HTML we
wzbogacone rodowisko oraz dodaje odnonik, za pomoc ktrego mona wrci do
wersji podstawowej. Dodatkowo dodaje plik cookie umoliwiajcy pominicie wykonywania testw po raz drugi, dziki czemu nastpne otwarcie strony bdzie szybsze.
Gdy zaczlimy stosowa nasz pakiet testw, zauwaylimy wiele korzyci pyncych z jego
uywania w naszych implementacjach stopniowego ulepszania. Przede wszystkim, pozwoli
nam skutecznie odrni przegldarki mogce poprawnie zastosowa rozszerzone funkcje
od przegldarek, ktre tego nie potrafiy. Dziki temu znacznie zmniejszylimy ryzyko
zrujnowania podstawowej wersji strony przez le obsuone rozszerzenia. Ponadto dziki
temu, e rozszerzenia byy adowane tylko w przegldarkach, ktre pomylnie przeszy
testy, pozostaym przegldarkom moglimy dostarczy znacznie prostszy i lejszy kod
adne wielkie iloci kodu znacznikw, style ani skrypty nie s adowane z gry. W ten
sposb znacznie skrcilimy czas pobierania stron i ograniczylimy liczb niepotrzebnych
odwoa do serwera.
Nasz pakiet testw ma budow modularn i jest bardzo elastyczny. Mona go dostosowa
do sprawdzania wybranych funkcji CSS i JavaScript wymaganych w konkretnym projekcie.
Jeli na przykad w tworzonej witrynie nie s wykorzystywane skomplikowane struktury
elementw pywajcych albo skrypty Ajax, moemy odpowiadajce im testy wyczy.
W swoich projektach nasz pakiet testw dzieli przegldarki tylko na podstawowe i rozszerzone, co pozwala nam zapanowa nad kodem i uatwia jego utrzymanie. To binarne
rozdzielenie jest dla nas sposobem na dotarcie do moliwie jak najwikszej liczby urzdze
przy jak najmniejszym wysiku. Na tej podstawie mona oczywicie opracowa bardziej
zaawansowane skrypty, dzielce przegldarki na wicej bardziej szczegowych grup albo
dostarczajce funkcje zoptymalizowane pod ktem konkretnych urzdze, np. iPhone
lub Kindle.
Struktur i dziaanie tego pakietu testw szczegowo omwimy w rozdziale 6., w ktrym
rwnie przedstawimy kilka sytuacji, w ktrych podejcie modularne moe by korzystne.

Planowanie stopniowego ulepszania przewietlanie


Dostrajajc nasz pakiet testw moliwoci przegldarek, zaczlimy rozwija technik
rozkadania skomplikowanych projektw interfejsw sieciowych w celu przygotowania
ich do zaprojektowania zgodnie z technik stopniowego ulepszania.

ROZDZIA PIERWSZY. NASZE PODEJCIE

37

Czasami udawao si bez problemu znale odpowiedni element HTML do obsugi zaawansowanych skadnikw projektu indywidualnie wystylizowane menu rozwijane wyglda
i zachowuje si tak podobnie do elementu select, e oczywiste byo, i naley go uy.
Analogicznie stylizowanie pl wyboru moe stanowi nie lada wyzwanie, ale od samego
pocztku wiadomo, e to jest tylko pole wyboru.
Niestety, nie zawsze byo tak atwo. Ktry z podstawowych elementw HTML powinien
zosta uyty do reprezentowania ajaksowego komponentu do oceniania za pomoc gwiazdek w stylu Netflix? To samo dotyczy widocznych na wielu stronach internetowych
z wiadomociami komponentw z kartami most popular/emailed/commented czy
suwakw zakresu daty i ceny sucych do filtrowania wynikw w witrynie Kayak i innych
witrynach e-commerce. Nie wspomnimy ju o jeszcze bardziej skomplikowanych, ale bardzo
popularnych aplikacjach wykorzystujcych Ajax, w ktrych stosowane s techniki przecigania i upuszczania oraz wiele innych zaawansowanych rodzajw interakcji, takich
jak np. Gmail. aden z elementw podstawowego jzyka HTML nie pasuje w naturalny
sposb do tych obiektw.
Jednake, mimo i wszystkie przedstawione przykady opisuj wysoce zindywidualizowane i interaktywne elementy, oferowane przez nie funkcje wybieranie opcji na skali,
przechodzenie z jednego bloku treci do innego, sortowanie, wyszukiwanie i pobieranie
danych mona bez wtpienia uzyska rwnie za pomoc standardowego HTML-a.
Trzeba tylko troch pomyle i rozoy je na czynniki w celu okrelenia elementw HTML,
ktre rwnie mog zosta uyte do wykonania tego samego zadania.
Najtrudniejsze w tym wszystkim jest zajrze pod style, animacje i inne zachowania, aby
zobaczy podstawowe komponenty lece u samego podoa. Ten proces analizowania
komponentw nazwalimy przewietlaniem. Np. kod CSS i skrypty decydujce o interaktywnoci suwaka byy skr i ubraniem. Natomiast w podstawowej wersji szkieletem byo
tekstowe pole wejciowe suce do ustawiania wysokich i niskich wartoci liczbowych
albo przyciski radiowe reprezentujce niewielki zestaw opcji do wyboru albo nawet menu
wyboru zawierajce dug list opcji.
Przewietlanie staje si bardziej skomplikowane i interesujce, gdy przewietla si skomplikowane projekty, np. witryny zawierajce rne rodzaje treci i interaktywne komponenty, aplikacje sieciowe zawierajce tre dynamiczn oraz skomplikowane ukady
i schematy pracy, ktre dostarczaj tre w zalenoci od dziaa uytkownika. I to tylko
kilka z wielu moliwych przykadw.
W skali makro przeprowadzamy proces przewietlania, ktrego celem jest okrelenie,
jak wiksze czci strony (lub wzorce na wielu stronach witryny) wsppracuj ze sob,
znalezienie wzorcw zachowa, ktre mogyby stanowi wskazwk na temat kluczowych
elementw treci i funkcjonalnoci, oraz ocenienie, jak mona zoptymalizowa te zasoby,
aby dziaay jak najlepiej zarwno w podstawowej, jak i rozszerzonej wersji.

38

TWORZENIE STRON METOD STOPNIOWEGO ULEPSZANIA. WITRYNY DOSTPNE DLA KADEGO

Podczas tej wysokopoziomowej analizy podstawowe zasady na poziomie komponentw


i elementw pozostaj niezmienione w kadym przypadku chodzi o zidentyfikowanie
wszystkich najwaniejszych informacji i funkcji potrzebnych uytkownikowi, znalezienie
elementw HTML, ktre mona wykorzysta w okrelonej sytuacji (na podstawie formatw
treci, wymaga w zakresie danych lub zasad biznesowych, oglnego przepywu), oraz
zdecydowanie si na standardowe elementy HTML, ktre najlepiej speni stawiane zadanie.
Bardziej szczegowo o przewietlaniu napiszemy w rozdziale 2., w ktrym dodatkowo
przedstawimy kilka procesw dekonstrukcji na kilku skomplikowanych projektach. Natomiast przewietlaniem pojedynczych komponentw interfejsu zajmiemy si w rozdziaach 18. i 19. Zobaczymy, jak techniki stopniowego ulepszania pozwalaj uzyska cel
utworzenia jak najpeniejszych, najlepiej dostpnych i najbardziej uytecznych wersji
rozszerzonej i podstawowej witryny.
Zanim jednak przejdziemy do szczegowego omwienia praktycznego zastosowania
techniki przewietlania, przedstawimy proces, ktry opracowalimy w celu zastosowania
techniki stopniowego ulepszania w naszych projektach.

Od przewietlania do dziaania
technika stopniowego ulepszania
W miar udoskonalania naszego pakietu testowego i stosowania techniki przewietlania
po jakim czasie wypracowalimy swoist terminologi, za pomoc ktrej opisywalimy
nasz proces stopniowego ulepszania. Dostarczamy dwie wersje produktw podstawow,
ktra dziaa we wszystkich urzdzeniach z dostpem do internetu (na ile to moliwe),
oraz rozszerzon, ktra jest dostarczana tylko odpowiednio zaawansowanym przegldarkom. Kod pierwszej z nich stanowi podstaw, na ktrej opiera si wszystko pozostae,
dlatego nazwalimy go kodem bazowym. Natomiast kod HTML, CSS i skrypty odpowiadajce za zaawansowane funkcje prezentacyjne i zachowania zyskay miano zasobw
zaawansowanych lub rozszerzonych.
Aby z powodzeniem dostarczy te dwie wersje uytkownikom, musimy przestrzega trzech
podstawowych zasad stopniowego ulepszania:
 Zacz od czystej treci i kodu HTML o poprawnej strukturze.
 Precyzyjnie oddzieli warstw prezentacyjn od ukadu.
 Nieinwazyjnie doczy zaawansowane zachowania i style po skrupulatnym przemyle-

niu zagadnie zwizanych z dostpnoci.


Poniewa podstawowa wersja jest tworzona w celu umoliwienia dostpu do niej kademu,
prac musimy zacz od klarownej treci i poprawnie skonstruowanego pod wzgldem
semantycznym kodu HTML. Taki kod HTML suy jako funkcjonalna podstawa, na bazie

ROZDZIA PIERWSZY. NASZE PODEJCIE

39

ktrej mona zbudowa dodatki rozszerzajce. Jest prawdopodobne, e bdzie ona


dziaa w wikszej liczbie rnych urzdze, a ponadto stanowi klarown struktur do
poruszania si dla technik wspomagajcych.
Konstrukcja kodu znacznikw w treci strony ma ogromny wpyw na to, jak mona bdzie
zastosowa rozszerzenia, np. CSS i JavaScript, oraz to, w jakim stopniu strona bdzie
dostpna dla niewidomych uytkownikw. Najlepiej do stylizowania i dodawania elementw interaktywnych nadaj si strony o jasnej i precyzyjnie zorganizowanej strukturze.
Ponadto taki kod atwiej wykorzysta te w innych projektach.
Warunkiem, od ktrego spenienia zaley to, czy uda si osign solidn podstaw suc
do opracowania zarwno podstawowej, jak i rozszerzonej wersji strony, jest zrozumienie
waciwoci, moliwoci i ogranicze semantyki jzyka HTML oraz znajomo elementw
i atrybutw dostpnych w aktualnie obowizujcej wersji tego jzyka (nie wspominajc
o nowych waciwociach, bdcych jeszcze w fazie powstawania specyfikacji). Dostpne
moliwoci i najlepsze praktyki, ktre zalecamy, s opisane w rozdziale 3.
Druga kluczowa zasada, ktrej cile si trzymamy w naszym podejciu stopniowego
ulepszania, to oddzielenie ukadu od treci. Najpierw budujemy szkielet strony, a dopiero
potem wypeniamy go treci. To pozwala nam znacznie uproci proces tworzenia spjnego systemu szablonw dla caego projektu. Ponadto oddzielamy od treci cay kod CSS
dotyczcy prezentacji i stylu.
Gdy struktura i styl strony powstaj niezalenie od jej treci, atwiej jest tworzy rne
wersje tego samego ukadu i dostarcza wersje dziaajce optymalnie w rnych przegldarkach i urzdzeniach, poniewa aden strukturalny kod CSS nie wpywa na styl treci.
To z kolei pozwala nam wzi pod uwag rozszerzone typy mediw standardowe
ekrany komputerowe, wywietlacze telefonw komrkowych i urzdzenia wspomagajce
dla niepenosprawnych i selektywnie dostarcza podstawowe i zaawansowane style do
wybranych z nich. W rozdziale 4. pokazujemy, ktre rodzaje stylw mona bezpiecznie
stosowa w wikszoci rodowisk, jak zachowuj si i wzajemnie oddziauj midzy sob
skomplikowane reguy CSS oraz jak mona scentralizowa i zoptymalizowa style, aby
otrzyma najczystsze i najbardziej niezawodne wersje podstawow i rozszerzon.
Zaawansowane zachowania i elementy prezentacyjne uzyskane za pomoc JavaScriptu
mog znacznie wzbogaci doznania uytkownika. Jeli jednak zastosuje si je niewaciwie lub bezmylnie, mog one rwnie sprawi, e witryna bdzie cakowicie bezuyteczna dla wielu uytkownikw. Istniej bardzo dobre wytyczne i jasno okrelone najlepsze
praktyki tworzenia i dodawania skryptw w taki sposb, aby nieinwazyjnie wzbogacay
strony i bezpiecznie je ulepszay w przegldarkach, ktre potrafi z nich skorzysta, oraz
zapewniajce, e podstawowa funkcjonalno nie zostanie zatracona. Te zasady i techniki
oraz zwizane z nimi zagadnienia dotyczce dostpnoci s opisane w rozdziale 5.

40

TWORZENIE STRON METOD STOPNIOWEGO ULEPSZANIA. WITRYNY DOSTPNE DLA KADEGO

Wyposaeni w dodatkow wiedz na temat wsppracy midzy kodem HTML, CSS i nieinwazyjnym JavaScriptem, szczegowo przyjrzymy si naszemu pakietowi testw w rozdziale 6. Dowiemy si, jak wykorzystywane s w nim opisane powyej zasady i techniki
w celu umoliwienia zastosowania bardziej niezawodnego podejcia stopniowego ulepszania.

Praktyka
W kilku nastpnych rozdziaach zwile opisujemy najlepsze praktyki, ktre naley zna,
aby mc zaimplementowa stopniowe ulepszanie w realnych projektach dla klientw.
Natomiast w dalszych rozdziaach nauczymy si pisa poprawny kod HTML, efektywnie
stosowa CSS oraz dodawa rozszerzenia za pomoc JavaScriptu. Na zakoczenie szczegowo opiszemy nasz pakiet testw.

You might also like