HTML5. Podręcznik programisty - ebook

HTML5 pozwala twórcom stron internetowych tworzyć oparte o standardy sieciowe, działające w przeglądarkach, niezwykle bogate aplikacje o dużych możliwościach. Aplikacje te są zaopatrzone w najróżniejsze funkcjonalności - od przeciągania i upuszczania do natywnego dźwięku i wideo - i wszystko to oferują bez żadnych dodatkowych wtyczek. Krótko mówiąc, każdy twórca stron internetowych musi opanować HTML5, a im szybciej to zrobi, tym większą będzie miał przewagę. "HTML5. Podręcznik programisty" zawiera rady ekspertów i sprawdzony kod, potrzebne do tego, by od razu rozpocząć budowę wysokiej jakości aplikacji HTML5.

Autorzy tej książki, Chuck Hudson i Tom Leadbetter, prezentują przetestowane, modularne przepisy na poziomach dla początkujących, średnio zaawansowanych i zaawansowanych. Dowiesz się konkretnie, jak zapewniać nowoczesne zachowania aplikacji poprzez integrację nowych i ulepszonych elementów HTML5 z CSS3, multimediami i API języka JavaScript. Zgodnie z obecnymi standardami książka skupia się w pierwszym rzędzie na funkcjach HTML5 obsługiwanych w przeglądarkach oraz określa dla nich poziom wsparcia.

Tematyka książki obejmuje:

• zrozumienie i stosowanie nowych strukturalnych elementów HTML5
• wykorzystanie grupowania, poziomu tekstu i zmienionej semantyki
• zarządzanie obsługą HTML5 w przeglądarkach
• używanie nowych technik dotyczących układu i stylizacji w CSS3
• maksymalizację interaktywności za pomocą formularzy internetowych HTML5
• osadzanie przy użyciu HTML5 dźwięku i wideo
• rysowanie na elemencie canvas
• sterowanie historią przeglądarki
• integrowanie informacji o położeniu za pomocą API Geolocation
• implementowanie przechowywania danych po stronie klienta
• obsługę plików lokalnych
• zarządzanie komunikacją i wątkami
• optymalizację zachowań przeglądarki w HTML5
• integrację danych urządzeń

Wstęp (13)

Podziękowania (21)

O autorach (23)

Rozdział 1 Nowe elementy strukturalne w HTML5 (25)

• PRZEPIS DLA POCZĄTKUJĄCYCH. Budowa startowego dokumentu HTML5 (26)
  
  • doctype (26)
  • Kodowanie znaków (26)
  • JavaScript i łącza CSS (27)
  • Styl używanej składni (27)
• Skąd pochodzą wszystkie nowe elementy? (28)
• PRZEPIS DLA POCZĄTKUJĄCYCH. Wykorzystanie elementu header do utworzenia nagłówka witryny (29)
• PRZEPIS DLA POCZĄTKUJĄCYCH. Wykorzystanie elementu hgroup do grupowania nagłówków (31)
• PRZEPIS DLA POCZĄTKUJĄCYCH. Tworzenie nawigacji przy użyciu elementu nav (31)
• PRZEPIS DLA POCZĄTKUJĄCYCH. Użycie elementu article (34)
• PRZEPIS DLA ŚREDNIO ZAAWANSOWANYCH. Grupowanie treści przy użyciu elementu section (35)
  
  • Którego elementu powinieneś używać: article czy section? (36)
• PRZEPIS DLA POCZĄTKUJĄCYCH. Tworzenie paska bocznego za pomocą elementu aside (37)
• PRZEPIS DLA POCZĄTKUJĄCYCH. Użycie elementu footer (39)
• PRZEPIS DLA ŚREDNIO ZAAWANSOWANYCH. Wykorzystanie narzędzia HTML5 Outliner do utworzenia prawidłowej struktury dokumentu (41)
• PRZEPIS DLA ZAAWANSOWANYCH. Wykorzystanie wszystkich nowych elementów do utworzenia strony z wiadomościami (43)
• PRZEPIS DLA ZAAWANSOWANYCH. Wykorzystanie wszystkich nowych elementów do utworzenia strony z wynikami wyszukiwania (46)
  
  • Podsumowanie (50)

Rozdział 2 Grupowanie, poziom tekstu i zmiany semantyczne (51)

• PRZEPIS DLA POCZĄTKUJĄCYCH. Oznaczanie rysunków i ich podpisów elementami figure i figcaption (51)
• PRZEPIS DLA POCZĄTKUJĄCYCH. Oznaczanie daty i czasu za pomocą elementu time (53)
• PRZEPIS DLA POCZĄTKUJĄCYCH. Tworzenie widżetu przełącznika za pomocą elementu details (54)
• PRZEPIS DLA POCZĄTKUJĄCYCH. Użycie elementu address do danych kontaktowych (56)
• PRZEPIS DLA POCZĄTKUJĄCYCH. Podświetlanie tekstu za pomocą elementu mark (57)
• PRZEPIS DLA POCZĄTKUJĄCYCH. Użycie elementu s do pokazania niepoprawnej lub nieistotnej treści (58)
• Zmiany dotyczące istniejących elementów (58)
  
  • Element cite (58)
  • Element ol (59)
  • Element dl (61)
  • Element small (63)
  • Elementy b oraz strong (63)
  • Elementy i oraz em (64)
  • Element abbr (64)
  • Element hr (64)
  • Elementy, których już nie ma (64)
• PRZEPIS DLA POCZĄTKUJĄCYCH. Opakowywanie elementów łączami (65)
• PRZEPIS DLA ŚREDNIO ZAAWANSOWANYCH. Dodawanie informacji semantycznych za pomocą mikrodanych (66)
• PRZEPIS DLA ŚREDNIO ZAAWANSOWANYCH. Stosowanie WAI-ARIA z HTML5 (67)
• PRZEPIS DLA ZAAWANSOWANYCH. Oznaczanie komentarzami strony z artykułem (69)
• Podsumowanie (71)

Rozdział 3 Obsługa przeglądarek w HTML5 (73)

• PRZEPIS DLA POCZĄTKUJĄCYCH. Obsługa Internet Explorera (73)
  
  • Użycie JavaScriptu do uzyskania kompatybilności z HTML5 (73)
  • Uzyskiwanie kompatybilności CSS-a (74)
• Szablony (boilerplates) (75)
• PRZEPIS DLA POCZĄTKUJĄCYCH. Testowanie działania nowych możliwości HTML5 (75)
• PRZEPIS DLA ŚREDNIO ZAAWANSOWANYCH. Wykorzystanie jQuery do zastąpienia kalendarza (77)
• PRZEPIS DLA ŚREDNIO ZAAWANSOWANYCH. Wykorzystanie biblioteki Modernizr do wykrywania możliwości (79)
• Polyfilling (wielowypełnianie) (82)
• Użyteczne strony sprawdzające HTML5 (84)
• Podsumowanie (84)

Rozdział 4 Nowe techniki dotyczące układu i stylizacji w CSS3 (85)

• PRZEPIS DLA ŚREDNIO ZAAWANSOWANYCH. Tworzenie dostosowującego się projektu za pomocą CSS3 Media Queries (85)
  
  • Kiedy używać zapytań o media (90)
  • Obsługa iPhone'a i urządzeń z systemem Android (91)
• PRZEPIS DLA POCZĄTKUJĄCYCH
• Korzystanie z własnych czcionek przy użyciu @font-face (92)
  
  • Formaty plików i działanie czcionek w różnych przeglądarkach (93)
  • Usługi związane z krojami pisma (94)
• PRZEPIS DLA ŚREDNIO ZAAWANSOWANYCH. Tworzenie przycisków za pomocą gradientów CSS i wielu teł (95)
• PRZEPIS DLA ŚREDNIO ZAAWANSOWANYCH. Upiększanie witryny za pomocą transformacji i przejść (98)
• PRZEPIS DLA ZAAWANSOWANYCH. Tworzenie animacji za pomocą CSS-a (103)
• Podsumowanie (106)

Rozdział 5 Formularze internetowe HTML5 (107)

• Walidacja (107)
• Typy wejściowe HTML 4 (107)
• PRZEPIS DLA POCZĄTKUJĄCYCH. Tworzenie formularza do danych kontaktowych (109)
  
  • input type="email" (109)
  • input type="tel" (110)
  • input type="url" (111)
• PRZEPIS DLA POCZĄTKUJĄCYCH. Tworzenie formularza wyszukiwania przy użyciu input type="search" (112)
• PRZEPIS DLA POCZĄTKUJĄCYCH. Tworzenie kontrolek kalendarza i czasu (113)
  
  • input type="datetime" (113)
  • input type="datetime-local" (113)
  • input type="date" (114)
  • input type="time" (114)
  • input type="month" (115)
  • input type="week" (115)
  • Nakładanie ograniczeń na daty i godziny (115)
• PRZEPIS DLA POCZĄTKUJĄCYCH. Tworzenie pola do wprowadzania liczby (116)
• PRZEPIS DLA POCZĄTKUJĄCYCH. Tworzenie suwaka (bez potrzeby użycia JavaScriptu) (117)
• PRZEPIS DLA POCZĄTKUJĄCYCH. Tworzenie próbnika kolorów (117)
• PRZEPIS DLA POCZĄTKUJĄCYCH. Wyświetlanie wyników za pomocą elementu output (118)
• PRZEPIS DLA POCZĄTKUJĄCYCH. Użycie tekstu zastępczego formularza (119)
• PRZEPIS DLA POCZĄTKUJĄCYCH. Autouzupełnianie za pomocą atrybutu list i elementu datalist (120)
• PRZEPIS DLA POCZĄTKUJĄCYCH. Śledzenie postępu wykonania zadania za pomocą elementu progress (121)
• PRZEPIS DLA POCZĄTKUJĄCYCH. Wskazywanie wyniku pomiaru za pomocą elementu meter (122)
• PRZEPIS DLA POCZĄTKUJĄCYCH. Przechodzenie do elementu form po załadowaniu strony (123)
• PRZEPIS DLA POCZĄTKUJĄCYCH. Zezwalanie na wiele wartości (124)
• PRZEPIS DLA POCZĄTKUJĄCYCH. Prosta walidacja przy użyciu atrybutu required (125)
• PRZEPIS DLA ŚREDNIO ZAAWANSOWANYCH. Pisanie własnych reguł walidacji (126)
• PRZEPIS DLA POCZĄTKUJĄCYCH. Nakładanie ograniczeń na wprowadzane dane (126)
  
  • step (126)
  • min i max (127)
  • formnovalidate i novalidate (127)
• PRZEPIS DLA ŚREDNIO ZAAWANSOWANYCH. Dostosowywanie formularza i nadawanie mu stylu (128)
• Komunikaty błędów (129)
• PRZEPIS DLA ZAAWANSOWANYCH. Wszystko razem - tworzenie formularza rejestracyjnego (130)
• Podsumowanie (132)

Rozdział 6 Rysowanie na płótnie (133)

• Element canvas - informacje ogólne (133)
  
  • Początki (134)
  • Współrzędne x i y (135)
• PRZEPIS DLA POCZĄTKUJĄCYCH. Nałożenie siatki na płótno (135)
• Narzędzia płótna (139)
• PRZEPIS DLA POCZĄTKUJĄCYCH. Tworzenie prostych kształtów i linii (139)
  
  • Rysowanie i formatowanie prostokąta lub kwadratu (139)
  • Stosowanie gradientów w kształtach (141)
  • Rysowanie linii i ścieżek (142)
• PRZEPIS DLA ŚREDNIO ZAAWANSOWANYCH. Rysowanie wielokątów za pomocą ścieżki (144)
• PRZEPIS DLA ŚREDNIO ZAAWANSOWANYCH. Rysowanie łuków i okręgów (146)
  
  • Rysowanie krzywych (147)
• PRZEPIS DLA POCZĄTKUJĄCYCH. Dodawanie tekstu (147)
• PRZEPIS DLA POCZĄTKUJĄCYCH. Wstawianie obrazka (148)
• PRZEPIS DLA ŚREDNIO ZAAWANSOWANYCH. Przycinanie obrazka (149)
• PRZEPIS DLA ŚREDNIO ZAAWANSOWANYCH. Animacja mapy sprite'ów (150)
• Przekształcenia płótna (153)
• PRZEPIS DLA ZAAWANSOWANYCH. Animowanie obrazka (154)
• PRZEPIS DLA ZAAWANSOWANYCH. Animacja pionowego wykresu słupkowego (157)
• Podsumowanie (162)

Rozdział 7 Osadzanie wideo w HTML5 (163)

• PRZEPIS DLA POCZĄTKUJĄCYCH. Dołączanie filmów za pomocą elementu video (163)
  
  • Obsługa w przeglądarkach i urządzeniach (164)
  • HTML5 i kodeki wideo (164)
  • Dlaczego kodeki powinny Cię interesować? (165)
• PRZEPIS DLA ŚREDNIO ZAAWANSOWANYCH. Włączanie wideo we wszystkich przeglądarkach (166)
  
  • Dodawanie zastępczej treści dla starszych przeglądarek (166)
  • Nowe atrybuty wideo (169)
• PRZEPIS DLA ŚREDNIO ZAAWANSOWANYCH. Tworzenie wideo z napisami (172)
  
  • Inne możliwości formatowania napisów (174)
• API mediów (175)
• PRZEPIS DLA ZAAWANSOWANYCH. Tworzenie niestandardowych kontrolek (176)
• Podsumowanie (183)

Rozdział 8 Osadzanie dźwięku w HTML5 (185)

• PRZEPIS DLA POCZĄTKUJĄCYCH. Umieszczanie dźwięku za pomocą elementu audio (185)
• PRZEPIS DLA ŚREDNIO ZAAWANSOWANYCH. Umieszczanie dźwięku we wszystkich przeglądarkach (186)
  
  • Dodawanie zastępczej treści dla starszych przeglądarek (186)
• Nowe atrybuty elementu audio (187)
• API mediów (189)
• PRZEPIS DLA ŚREDNIO ZAAWANSOWANYCH. Tworzenie miksera (190)
• PRZEPIS DLA ZAAWANSOWANYCH. Dodawanie internetowego radia (194)
• Podsumowanie (201)

Rozdział 9 Dokonywanie zmian w historii przeglądarki (203)

• Podstawy historii (203)
  
  • Kompatybilność przeglądarek (204)
• PRZEPIS DLA POCZĄTKUJĄCYCH. Dodawanie do historii wpisów za pomocą pushState (204)
• PRZEPIS DLA POCZĄTKUJĄCYCH. Tworzenie przeglądarki obrazków (207)
• PRZEPIS DLA ŚREDNIO ZAAWANSOWANYCH. Pobieranie stanu w przeglądarce obrazków (209)
• PRZEPIS DLA POCZĄTKUJĄCYCH. Zmiana historii za pomocą replaceState (211)
• PRZEPIS DLA ŚREDNIO ZAAWANSOWANYCH. Zmiana historii strony (213)
• PRZEPIS DLA ZAAWANSOWANYCH. Używanie zaawansowanychobiektów danych stanu do przenoszenia informacji pomiędzystronami (215)
• PRZEPIS DLA ŚREDNIO ZAAWANSOWANYCH. Testowanie bezpieczeństwa historii (218)
• Pomocne biblioteki (220)
• Podsumowanie (221)

Rozdział 10 Wykorzystanie Geolocation API do uzyskania informacji o położeniu geograficznym (223)

• Omówienie Geolocation API (223)
  
  • Kompatybilność przeglądarek (224)
  • Gdzie na świecie się znajdujesz - getCurrentPosition (224)
• PRZEPIS DLA POCZĄTKUJĄCYCH. Ustalanie położenia geograficznego za pomocą zwykłego wywołania getCurrentPosition (225)
  
  • Poufność informacji o położeniu (228)
• PRZEPIS DLA ŚREDNIO ZAAWANSOWANYCH. Wyświetlanie na mapie informacji o lokalizacji przy użyciu getCurrentPosition (228)
• PRZEPIS DLA ŚREDNIO ZAAWANSOWANYCH. Określanie odległości za pomocą opcji lokalizacji (233)
• PRZEPIS DLA ZAAWANSOWANYCH. Podążanie za poruszającym się obiektem dzięki watchPosition (239)
• Podsumowanie (245)

Rozdział 11 Przechowywanie danych po stronie klienta (247)

• Przechowywanie danych po stronie klienta - przegląd (247)
  
  • Bezpieczeństwo danych (248)
  • Klucze i wartości - sessionStorage i localStorage (249)
• PRZEPIS DLA POCZĄTKUJĄCYCH. Pobieranie i ustawianie danych w pamięci sesji (250)
  
  • Narzędzia dla programistów Chrome służące do oglądania zawartości pamięci (252)
• PRZEPIS DLA POCZĄTKUJĄCYCH. Nadawanie stylów z pamięci sesji (253)
• PRZEPIS DLA ŚREDNIO ZAAWANSOWANYCH. Zapisywanie formularzy za pomocą lokalnego przechowywania danych (257)
• PRZEPIS DLA ZAAWANSOWANYCH. Przechwytywanie zdarzeń w pamięci lokalnej (261)
• Web SQL Database API (267)
• PRZEPIS DLA ZAAWANSOWANYCH. Użycie sieciowej bazy danych do stworzenia listy zakupów (270)
• Podsumowanie (277)

Rozdział 12 Komunikacja i wątki (279)

• Przegląd WebSocket API (279)
• PRZEPIS DLA POCZĄTKUJĄCYCH. Rozmawianie przez gniazda sieciowe (280)
• Realizacja wielowątkowości za pomocą wątków roboczych (283)
• PRZEPIS DLA POCZĄTKUJĄCYCH. Tworzenie wątku roboczego (285)
• PRZEPIS DLA ŚREDNIO ZAAWANSOWANYCH. Dodawanie dwukierunkowej komunikacji (288)
• PRZEPIS DLA ZAAWANSOWANYCH. Wykorzystywanie współdzielonych wątków roboczych (291)
• Podsumowanie (296)

Rozdział 13 Zachowanie przeglądarek w HTML5 (297)

• Drag and Drop API (297)
• PRZEPIS DLA POCZĄTKUJĄCYCH. Przeciąganie i upuszczanie pomiędzy elementami div (299)
• PRZEPIS DLA ZAAWANSOWANYCH. Wykorzystanie zdarzeń i obiektu dataTransfer (302)
• Pamięć podręczna aplikacji i jej API (309)
  
  • Pamięć podręczna przeglądarki a bezpieczeństwo (310)
  • Odwołania do pliku manifestu (310)
• PRZEPIS DLA POCZĄTKUJĄCYCH. Tworzenie pliku manifestu (310)
  
  • CACHE (311)
  • FALLBACK (311)
  • NETWORK (312)
  • Aktualizacja pamięci podręcznej poprzez manifest (312)
• PRZEPIS DLA POCZĄTKUJĄCYCH. Korzystanie ze stron internetowych offline (312)
• API pamięci podręcznej aplikacji (315)
• Notification API (316)
  
  • Uprawnienia dotyczące powiadomień (317)
  • Kompatybilność przeglądarek (318)
• PRZEPIS DLA POCZĄTKUJĄCYCH. Wyświetlanie prostego powiadomienia (318)
• PRZEPIS DLA ZAAWANSOWANYCH. Tworzenie strony powiadomień o tweetach (322)
• Podsumowanie (329)

Rozdział 14 Praca z plikami lokalnymi (331)

• Przegląd File API (331)
  
  • Bezpieczeństwo File API (331)
• PRZEPIS DLA POCZĄTKUJĄCYCH. Odczyt atrybutów pliku (332)
• PRZEPIS DLA POCZĄTKUJĄCYCH. Przetwarzanie wielu plików za pomocą przeciągania i upuszczania (334)
• Interfejs FileReader (337)
• PRZEPIS DLA ŚREDNIO ZAAWANSOWANYCH. Podgląd obrazków przy użyciu readAsDataURL (338)
• PRZEPIS DLA ZAAWANSOWANYCH. Parsowanie pliku CSV za pomocą readAsText (342)
• Rozszerzone specyfikacje File API (349)
• PRZEPIS DLA ZAAWANSOWANYCH. Tworzenie lokalnego pliku (350)
• Podsumowanie (355)

Rozdział 15 Integracja z urządzeniami przenośnymi (357)

• Krótka historia API urządzeń (357)
• Contacts API (359)
• PRZEPIS DLA POCZĄTKUJĄCYCH. Pobieranie wszystkich kontaktów i numerów telefonu (360)
• Messaging API (363)
• Network Information API (364)
• HTML Media Capture (365)
• PRZEPIS DLA ŚREDNIO ZAAWANSOWANYCH. Przechwytywanie obrazu za pomocą elementu input typu file (365)
• DeviceOrientation Event Specification (368)
• PRZEPIS DLA ŚREDNIO ZAAWANSOWANYCH. Tworzenie poziomicy (369)
• Podsumowanie (373)

Przepisy (375)

Skorowidz (379)