Professional Documents
Culture Documents
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
Spis treci
Podzikowania
Wstp
11
13
33
41
79
119
SPIS TRECI
135
151
169
175
187
207
SPIS TRECI
221
239
263
283
299
323
343
SPIS TRECI
367
383
395
Skorowidz
397
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
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
35
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
36
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
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-
39
40
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.