pelna-wersja-tworzenie-stron-metoda-stopniowego-ulepszania-witryny-dostepne-dla-kazdego_twstul.pdf

(4181 KB) Pobierz
656587750 UNPDF
656587750.003.png
Idź do
Tworzenie stron metod¹
stopniowego ulepszania.
Witryny dostêpne dla ka¿dego
Autorzy: Todd Parker, Scott Jehl,
Maggie Costello Wachs, Patty Toland
T³umaczenie: £ukasz Piwko
ISBN: 978-83-246-2797-4
Format: 168 × 237, stron: 416
• Spis treści
Katalog książek
Twój koszyk
Twórz strony dostêpne dla ka¿dej przegl¹darki i dowolnego po³¹czenia internetowego!
Obecnie tempo powstawania nowych stron i aplikacji jest zawrotne. Korzystanie z sieci
jest coraz ³atwiejsze, szybsze i bardziej dynamiczne. Co wiêcej, uwalniamy siê od kabli
dziêki rozwojowi telefonów komórkowych z dostêpem do internetu i kompaktowych
netbooków, zapewniaj¹cych nam po³¹czenie ze œwiatem niezale¿nie od miejsca,
w którym siê znajdujemy. Jednak to bogactwo internetowych zasobów ma równie¿ swoje
wady. Zaawansowane techniki znakomicie dzia³aj¹ w najnowszych przegl¹darkach,
obs³uguj¹cych technologie oparte na CSS i jêzyku JavaScript. Istnieje jednak mnóstwo
urz¹dzeñ, które w najlepszym wypadku obs³uguj¹ je tylko w ograniczonym stopniu,
przez co wysi³ki programisty mog¹ spe³zn¹æ na niczym. Projektanci i programiœci stron
internetowych musz¹ zatem pogodziæ trzy wzajemnie wykluczaj¹ce siê cele. Chc¹
wykorzystaæ wszystkie dostêpne i ekscytuj¹ce technologie, aby móc tworzyæ
przykuwaj¹ce uwagê interaktywne strony, nie trac¹c jednoczeœnie na ich dostêpnoœci.
A wszystko to powinni osi¹gn¹æ, tworz¹c czysty i ³atwy do utrzymania kod.
Stopniowe ulepszanie to technika tworzenia stron internetowych zapewniaj¹ca wszystkim
u¿ytkownikom dostêp do podstawowych treœci i opcji witryny – przy u¿yciu dowolnej
przegl¹darki i po³¹czenia. Jednoczeœnie posiadaczom szybszych po³¹czeñ i bardziej
zaawansowanych przegl¹darek oferuje ono ulepszon¹ wersjê strony.
„Tworzenie stron metod¹ stopniowego ulepszania. Witryny dostêpne dla ka¿dego” to
praktyczny przewodnik po zasadach tworzenia stron za pomoc¹ nowej metodologii.
Dziêki niemu dowiesz siê, dlaczego standardowe techniki tworzenia stron wykluczaj¹
niektórych u¿ytkowników z grona odbiorców, i jak analizowaæ projekty interfejsów, aby
by³y funkcjonalne na ka¿dym poziomie zaawansowania przegl¹darki. Poznasz pakiet
testów mo¿liwoœci przegl¹darek, a tak¿e najlepsze metody pisania kodu HTML, CSS
i JavaScript w technice stopniowego ulepszania.
Planowanie struktury i organizacji witryny
Pisanie semantycznego kodu
Stosowanie stylów
Elementy interaktywne
Testowanie mo¿liwoœci przegl¹darek
Karty
Okna dialogowe i nak³adki
Przyciski, pola wyboru, suwaki i menu
Konstruktor list
Dostarczaj pe³niê wra¿eñ wszystkim odbiorcom Twoich stron internetowych!
Cennik i informacje
o nowościach
Czytelnia
• Fragmenty książek
online
Kontakt
Helion SA
ul. Kościuszki 1c
44-100 Gliwice
tel. 32 230 98 63
© Helion 1991–2010
656587750.004.png 656587750.005.png
Spis treści
Podziękowania
11
Wstęp
13
CZĘŚĆ I METODA STOPNIOWEGO ULEPSZANIA OPARTA NA TESTACH
Rozdział 1. Nasze podejście
33
Sprawdzanie możliwości przeglądarek ...................................................................................34
Planowanie stopniowego ulepszania — prześwietlanie ........................................................36
Od prześwietlania do działania — technika stopniowego ulepszania ................................38
Praktyka.......................................................................................................................................40
Rozdział 2. Stopniowe ulepszanie w akcji — prześwietlanie 41
Prześwietlanie — informacje podstawowe .............................................................................42
Definiowanie hierarchii treści i znajdowanie odpowiedników HTML
dla komponentów .............................................................................................................43
Tworzenie bazowego kodu znaczników i bezpiecznych stylów ....................................45
Dodawanie rozszerzeń ........................................................................................................46
Przypadek 1. — Planowanie struktury i układu witryny z wiadomościami ......................48
Ocenianie organizacji treści i nadawanie nazw ...............................................................48
Organizowanie treści za pomocą standardowych elementów HTML .........................50
Struktura nawigacji..............................................................................................................50
Dodawanie treści warstwowej i animowanej ...................................................................51
Dynamiczne filtrowanie i sortowanie ...............................................................................52
Przypadek 2. — Kolejność czynności oraz sprawdzanie i wysyłanie danych
z formularza składania zamówienia .....................................................................................53
Rozkładanie na czynniki formularza składania zamówienia.........................................54
Stosowanie znaczników zapewniających dostępność .....................................................60
Definiowanie ograniczeń i walidacja.................................................................................62
Składanie wersji podstawowej i rozszerzonej...................................................................63
Przypadek 3. — Interaktywne wizualizowanie danych w kalkulatorze budżetu...............63
Wybór podstawowych elementów dla suwaków.............................................................64
Tworzenie dostępnych suwaków z kodu bazowego........................................................66
Tworzenie wykresu ..............................................................................................................67
656587750.006.png
4
TWORZENIE STRON METODĄ STOPNIOWEGO ULEPSZANIA. WITRYNY DOSTĘPNE DLA KAŻDEGO
Przypadek 4. — Funkcjonalność zwykłych programów w oknie przeglądarki:
menedżer zdjęć ........................................................................................................................69
Znakowanie elementów nawigacji globalnej....................................................................70
Skomplikowane interakcje..................................................................................................71
Tworzenie niestandardowych formularzy i nakładek ....................................................75
Obsługa przycisku Wstecz ..................................................................................................76
Lista kontrolna prześwietlania .................................................................................................77
Rozdział 3. Pisanie semantycznego kodu
79
Znakowanie tekstu i obrazów...................................................................................................80
Znakowanie tekstu...............................................................................................................81
Listy........................................................................................................................................86
Dane tabelaryczne................................................................................................................87
Obrazy ...................................................................................................................................89
Wstawianie plików multimedialnych ...............................................................................90
Osadzanie treści ze stron zewnętrznych ...........................................................................92
Znakowanie treści interaktywnej .............................................................................................93
Łącza ......................................................................................................................................93
Struktura formularza ...........................................................................................................94
Kontrolki formularza ..........................................................................................................96
Tworzenie kontekstu na stronie............................................................................................ 101
Elementy blokowe i śródliniowe..................................................................................... 102
Przypisywanie elementom identyfikatorów i klas........................................................ 103
Oznaczaj główne części strony za pomocą ról WAI-ARIA ........................................ 104
Kolejność elementów........................................................................................................ 105
Stosuj atrybut title ............................................................................................................. 107
Struktura dokumentu HTML................................................................................................ 108
Definiowanie typu dokumentu ....................................................................................... 109
Nagłówek dokumentu ...................................................................................................... 110
Dostępność............................................................................................................................... 115
Wytyczne dotyczące dostępności i regulacje prawne .................................................. 115
Wytyczne WCAG ............................................................................................................. 117
Rozdział 4. Efektywne stosowanie stylów
119
Sposoby wstawiania arkuszy stylów na stronę .................................................................... 120
Zapisywanie stylów w plikach zewnętrznych................................................................ 120
Dołączanie zewnętrznych arkuszy stylów ..................................................................... 121
Konwencje nazewnicze .................................................................................................... 123
656587750.001.png
SPIS TREŚCI
5
Style dla wersji podstawowej i rozszerzonej witryny ......................................................... 124
Bezpieczny arkusz stylów dla wersji podstawowej ....................................................... 124
Style w wersji rozszerzonej .............................................................................................. 125
Dostępność............................................................................................................................... 127
Błędy przeglądarek i różne sposoby interpretowania stylów............................................... 129
Komentarze warunkowe .................................................................................................. 129
Często spotykane problemy i ich rozwiązania .............................................................. 130
Rozdział 5. Rozszerzenia skryptowe i elementy interaktywne
135
Dodawanie skryptów do strony ............................................................................................ 136
Nie wpisuj skryptów bezpośrednio w kodzie strony.................................................... 136
Dołączanie zewnętrznych skryptów ............................................................................... 136
Rola JavaScriptu w kodzie podstawowym ........................................................................... 137
Najlepsze praktyki pisania rozszerzeń.................................................................................. 137
Uruchamianie skryptów, gdy treść jest gotowa ............................................................ 137
Dodawanie elementów interaktywności........................................................................ 138
Budowanie rozszerzonego kodu znacznikowego przy użyciu JavaScriptu............... 140
Zapewnianie widoczności treści ..................................................................................... 143
Stosowanie rozszerzeń stylistycznych ............................................................................ 144
Dostępność i właściwości użytkowe ..................................................................................... 145
Implementacja dostępu za pomocą klawiatury ............................................................ 146
Definiowanie atrybutów WAI-ARIA............................................................................. 147
Testowanie dostępności ................................................................................................... 148
Dostępność i właściwości użytkowe ............................................................................... 149
Rozdział 6. Testowanie możliwości przeglądarek 151
EnhanceJS — pakiet testów możliwości przeglądarek ....................................................... 152
Sposób działania testów ................................................................................................... 153
Stosowanie rozszerzeń przy użyciu EnhanceJS................................................................... 155
Konfigurowanie skryptu EnhanceJS..................................................................................... 157
Wczytywanie dodatkowych arkuszy stylów .................................................................. 158
Wczytywanie dodatkowych skryptów ........................................................................... 160
Modyfikowanie odnośnika do przełączania wersji ...................................................... 161
Wymuszanie określonego wyniku testu EnhanceJS .................................................... 162
Rozszerzanie zestawu testów EnhanceJS ............................................................................. 163
Modyfikowanie pakietu testów za pomocą opcji EnhanceJS...................................... 163
Tworzenie nowych lub dodatkowych egzemplarzy EnhanceJS ................................. 164
Wyświetlanie powiadomień o błędach .......................................................................... 165
Optymalizowanie skryptu EnhanceJS na serwerze ............................................................ 165
656587750.002.png

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika:

Zgłoś jeśli naruszono regulamin