• Najlepsze praktyki pisania kodu HTML, CSS i JavaScript
• Konkretny kod znaczników stylów
• Eliminacja złych nawyków programistycznych
• Tworzenie ogólnodostępnych witryn

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

Todd Parker, Patty Toland, Scott Jehl i Maggie Costello Wachs to ekipa firmy Filament Group Inc. Firma ta zajmuje się projektowaniem i rozwijaniem funkcjonalnych interfejsów dla witryn internetowych, urządzeń bezprzewodowych oraz aplikacji instalowanych i sieciowych. Szczególną uwagę poświęca się tam właściwościom użytkowym produktów, dbając o to, aby korzystanie z nich było łatwe i bezproblemowe. Firma sponsoruje zespół jQuery UI, dla którego zaprojektowała i stworzyła narzędzie ThemeRoller.com, oraz aktywnie pomaga w tworzeniu biblioteki jQuery UI i zestawu arkuszy CSS.

Osoby które kupowały "Tworzenie stron metodą stopniowego ulepszania. Witryny dostępne dla każdego", wybierały także:

• HTML5. Kurs video. Poziom pierwszy. Programowanie dla początkujących webmasterów 89,00 zł, (26,70 zł -70%)
• PHP 7.3. Kurs video. Tworzenie bezpiecznej strony typu e-commerce 115,69 zł, (41,65 zł -64%)
• Webflow. Kurs video. Projektowanie i tworzenie stron internetowych 159,00 zł, (63,60 zł -60%)
• Flask. Kurs video. Od pierwszej linijki kodu do praktycznego zastosowania 119,00 zł, (47,60 zł -60%)
• Node.js i TypeScript. Kurs video. Tworzenie skalowalnych mikroserwisów 169,00 zł, (67,60 zł -60%)

Spis treści

Tworzenie stron metodą stopniowego ulepszania. Witryny dostępne dla każdego -- 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)
• 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)
• 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)

Część II: Stopniowe ulepszanie - zagadnienia praktyczne

Rozdział 7. Tworzenie komponentów techniką stopniowego ulepszania (169)

• Sposób pisania kodu komponentów (170)
  
• Organizacja tej części książki (171)
  
• Przykładowy kod do pobrania (173)

Rozdział 8. Treść składana (175)

• Prześwietlanie (176)
  
• Tworzenie dostępnej treści zwijanej (178)
  
  • Kod bazowy (178)
  • Wersja rozszerzona (179)
  • Skrypt obsługujący zwijanie i rozwijanie treści (182)
• Korzystanie ze skryptu (184)

Rozdział 9. Karty (187)

• Prześwietlanie (187)
  
• Tworzenie kart (190)
  
  • Kod bazowy (190)
  • Wersja rozszerzona (192)
  • Skrypt kart (196)
• Dalsze rozszerzanie kart (199)
  
  • Zakładki i historia (199)
  • Automatyczne obracanie kart (202)
  • Wstawianie na karty treści zewnętrznej (203)
  • Wyświetlanie kart jako harmonijki (203)
• Korzystanie ze skryptu kart (204)

Rozdział 10. Chmurki (207)

• Prześwietlanie (208)
  
• Tworzenie chmurek za pomocą atrybutu title (211)
  
  • Kod bazowy (211)
  • Wersja rozszerzona (212)
  • Skrypt (214)
• Tworzenie chmurki z kotwicy (216)
  
• Tworzenie chmurki przy użyciu treści zewnętrznej (218)
  
• Korzystanie ze skryptu chmurek (219)

Rozdział 11. Kontrolki drzewiaste (221)

• Prześwietlanie (222)
  
• Tworzenie kontrolki drzewiastej (224)
  
  • Kod bazowy (225)
  • Wersja rozszerzona (226)
  • Skrypt rozszerzeń (230)
• Korzystanie ze skryptu (236)

Rozdział 12. Tworzenie wykresów przy użyciu elementu canvas (239)

• Prześwietlanie (240)
  
• Kod bazowy (242)
  
• Tworzenie dostępnych wykresów (244)
  
  • Pobieranie danych z tabeli (244)
  • Prezentowanie danych w elemencie canvas (249)
  • Zaawansowana stylizacja tabeli (256)
  • Dostępność danych tabeli (258)
• Techniki zaawansowane - wtyczka visualize.js (259)

Rozdział 13. Okna dialogowe i nakładki (263)

• Prześwietlanie (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)

• Prześwietlanie (284)
  
• Przyciski z elementu input (285)
  
  • Kod bazowy (285)
  • Wersja rozszerzona (287)
  • Skrypt zmieniający stany (291)
• Przyciski z zaawansowanym formatowaniem (291)
  
  • Kod bazowy (292)
  • Wersja rozszerzona (292)
  • Skrypt zamieniający elementy input na button (294)
• Korzystanie ze skryptu (296)
  
• Dalsze rozszerzanie funkcjonalności przycisków (297)

Rozdział 15. Pola wyboru, przyciski radiowe i rankingi gwiazdkowe (299)

• Prześwietlanie (300)
  
• Tworzenie niestandardowego pola wyboru (303)
  
  • Kod bazowy (303)
  • Wersja rozszerzona (305)
  • Skrypt pól wyboru (307)
• Niestandardowe przyciski radiowe (309)
  
  • Kod bazowy (310)
  • Wersja rozszerzona (310)
  • Skrypt przycisków radiowych (312)
• Dalsze modyfikowanie elementów input (315)
  
  • Kod bazowy (315)
  • Kod rozszerzony (316)
  • Skrypt komponentu rankingowego (318)
• Korzystanie ze skryptów (321)

Rozdział 16. Suwaki (323)

• Prześwietlanie (324)
  
• Tworzenie suwaka (327)
  
  • Kod bazowy (327)
  • Wersja rozszerzona (329)
  • Skrypt suwaków (335)
• Korzystanie ze skryptu suwaka (340)

Rozdział 17. Menu wyboru (343)

• Prześwietlanie (344)
  
• Tworzenie dostępnego menu wyboru (346)
  
  • Kod bazowy (346)
  • Wersja rozszerzona (347)
  • Skrypt rozszerzający (355)
• Zaawansowane stylizowanie menu wyboru (362)
  
• Korzystanie ze skryptu (364)

Rozdział 18. Konstruktor list (367)

• Prześwietlanie (368)
  
• Tworzenie konstruktora list (370)
  
  • Kod bazowy (370)
  • Wersja rozszerzona (371)
  • Skrypt konstruktora list (375)
• Wzbogacanie funkcjonalności konstruktora list - zaznaczanie wielu elementów, sortowanie, automatyczne uzupełnianie i menu kontekstowe (380)
  
  • Zaznaczanie wielu elementów (380)
  • Sortowanie za pomocą przeciągania i upuszczania (380)
  • Automatyczne uzupełnianie (380)
  • Menu kontekstowe (381)
• Korzystanie ze skryptu (381)

Rozdział 19. Pole plikowe (383)

• Prześwietlanie (384)
  
• Tworzenie niestandardowego pola plikowego (386)
  
  • Kod bazowy (386)
  • Kod rozszerzony (387)
  • Skrypt rozszerzający (390)
• Korzystanie ze skryptu (393)

Podsumowanie (395)

Skorowidz (397)