Prawda i tylko prawda o HTML5!

Dzięki nowym możliwościom HTML5 pozwala projektantom tworzyć lepsze, bardziej funkcjonalne strony WWW. Usługi geolokalizacyjne, przechowywanie danych w przeglądarce, zaawansowane wsparcie dla multimediów to tylko niektóre z nowości wprowadzonych w piątej wersji tego języka. Zastanawiasz się, jak wykorzystać ten potencjał?

Ta książka doskonale Ci to zademonstruje! Na początek poznasz krótką historię języka HTML i zobaczysz, z jakimi problemami jeszcze niedawno borykali się projektanci stron WWW. Następnie poznasz strukturę nowoczesnej strony WWW oraz elementy strukturalne HTML5. Niezwykle istotnym komponentem składni, pozwalającym na jeszcze lepsze indeksowanie witryn, są mikroformaty dostarczające cennych informacji wyszukiwarkom — rozdział piąty przedstawi Ci dogłębnie to zagadnienie. W dalszej części nauczysz się tworzyć atrakcyjne formularze oraz korzystać z potencjału nowego znacznika < canvas >. Na koniec poznasz format SVG oraz możliwości zastosowania HTML5 w rozwiązaniach mobilnych. Książka ta jest obowiązkową lekturą każdego projektanta stron WWW, który chce być na bieżąco z nowościami w sieci!

Dzięki tej książce:

• poznasz historię języka HTML
• właściwie zastosujesz elementy strukturalne HTML5
• zbudujesz funkcjonalny formularz
• poznasz format SVG i jego możliwości
• wykorzystasz potencjał HTML5 w Twoich projektach

Twórz nowoczesne witryny WWW dzięki HTML5!

Osoby które kupowały "HTML5. Wszystko, co powinniście wiedzieć o programowaniu. Przewodnik profesjonalisty", wybierały także:

• HTML5. Kurs video. Poziom pierwszy. Programowanie dla początkujących webmasterów 89,00 zł, (26,70 zł -70%)
• Tworzenie gier w języku HTML5 dla profesjonalistów. Wydanie II 67,42 zł, (20,90 zł -69%)
• HTML 5. Kurs video. Poziom drugi. Tworzenie profesjonalnych stron WWW 89,00 zł, (35,60 zł -60%)
• Sass od podstaw. Kurs video. Budowa kompleksowej strony w oparciu o metodologię BEM 47,93 zł, (22,05 zł -54%)
• HTML i CSS. Przewodnik dla pocz 69,00 zł, (34,50 zł -50%)

Spis treści

HTML5. Wszystko, co powinniście wiedzieć o programowaniu. Przewodnik profesjonalisty -- spis treści

O autorach (11)

O recenzencie technicznym (13)

Słowo wstępne (15)

Wstęp (17)

Rozdział 1. Nieco udramatyzowana historia języka HTML5 (19)

• O tym, jak astronauci architektury i W3C próbowali zabić HTML (19)
• Zapewne używacie już XML (20)
  • XHTML narodził się, ale co to właściwie oznaczało? (20)
  • Drakońska obsługa błędów (czyli dlaczego po prostu nie walnąć Cię pięścią w nos?) (21)
  • No dobrze, nie tak dosłownie, ale przeglądarka mogła to zrobić (21)
  • XHTML wciąż oznaczał coś lepszego od HTML (21)
  • Jednak szaleństwo dopiero się zaczynało (22)
• XHTML 2.0 - niekochany i samotny (22)
• HTML5 - nowa nadzieja... miejmy nadzieję (23)
  • W3C mówi: "Idźcie do diabła" (23)
  • Narodziny WHATWG (24)
  • To zupełnie nowy świat (24)
  • HTML5 i więcej! (25)
• HTML5 jest super, odlotowe i w ogóle (25)
  • Czy HTML5 to chwilowe zamieszanie, coś ważnego, czy jedno i drugie? (25)
• Hixie albo nic (26)
• XHTML 2.0 umarł i wszyscy są szczęśliwi (27)
• HTML5... hm... HTML, chwila... HTML.next? (27)
• Czy powinniśmy całkowicie pogrzebać W3C, czy je zaakceptować? (28)
  • Reforma (28)
  • Eliminacja (28)
  • Akceptacja (29)
• W jaki sposób nowe możliwości są obecnie dodawane do HTML5? (29)
• Rozbieżności pomiędzy WHATWG i W3C (30)
• TL;DR (31)
• Na czym będziemy się koncentrować? (31)

Rozdział 2. Wszystko, co powinniście wiedzieć o prostej postaci strony WWW w języku HTML5 (33)

• Zmiany formatowania wprowadzone w HTML5 (34)
• A co z rozwiązaniami skryptowymi oraz stylami CSS dla nowych elementów? (35)
• A co z HTML5 Boilerplate i Modernizr? (35)

Rozdział 3. Wszystko, co powinniście wiedzieć o określaniu struktury stron w HTML5 (37)

• Nieznaczny smak bólu - wyróżnianie sekcji (37)
• Skąd wzięły się te elementy? (38)
• Kogo to obchodzi? (39)
• Sprzeczności u podstaw nowych elementów HTML5 (39)
• Plan czego? (40)
• Czym są plany dokumentów i czy powinniśmy zwracać na nie uwagę? (41)
• W jaki sposób tworzy się plany (nawet nieświadomie) (41)
• Podział na sekcje jest starym problemem (43)
• Jeśli zwracamy uwagę na osoby niewidome, musimy zwracać uwagę na nagłówki (43)
• "Poprawiony" sposób tworzenia planów dokumentów w HTML5 był martwy, jeszcze zanim został wprowadzony (44)
• Przemycanie wielkich idei prowadzi do martwych idei (45)
• Rozgałęzienie specyfikacji (45)
• Element main jest wyjątkiem (mniej więcej) (46)
• Jak należy określać strukturę stron HTML5? (46)
• Określanie stylów nagłówków w HTML5 jest trochę szalone (47)
• To nie jest bez znaczenia - ludzie muszą tego uczyć (48)
• A co to dla nas oznacza? (49)
• Sensowne rozwiązanie strukturalnego kodu zapewniającego dostępność (49)
• Korzyści ze stosowania ról ARIA (50)
• Zalecenia dotyczące układu (50)

Rozdział 4. Wszystko, co powinniście wiedzieć o strukturalnych elementach HTML5 (51)

• header (51)
  • Tak naprawdę to do niczego nie służy (52)
  • Jak czytniki ekranowe mogą używać elementu header, skoro może się on pojawiać wszędzie? (52)
  • Alternatywa ARIA - banner (52)
  • Rekomendacja (53)
• nav (53)
  • Dobra intencja, lecz tragedia pod względem dostępności (53)
  • Alternatywa ARIA - navigation (54)
  • Rekomendacja (54)
• section oraz article (54)
  • section (54)
  • Sekcje == punkty planu (55)
  • Matrioszki (55)
  • Rekomendacja (55)
  • article (55)
  • Specyfikacje powinny precyzować (56)
  • Zagnieżdżanie elementów article w celu tworzenia artykułów i komentarzy (56)
  • Wyszukiwarki nie potrzebują elementów article (57)
  • Element article nie ma także zawierać głównej treści strony (57)
  • Rekomendacja (57)
  • A zatem, jaka jest różnica pomiędzy elementami article i section? (58)
• aside (58)
  • Element aside tworzy sekcje w dziwnych miejscach (59)
  • Alternatywa ARIA - complementary (59)
  • Rekomendacja (59)
• footer (59)
  • Także stopki do niczego nie służą (60)
  • Obszerna stopka? Powodzenia! (60)
  • Czy mogę prosić o stopkę? (60)
  • Alternatywa ARIA - contentinfo (60)
  • Rekomendacja (60)
• main (61)
  • Głównie bezużyteczna kontrowersja (62)
  • Alternatywa ARIA - main (62)
  • Rekomendacja (62)
• Inne punkty orientacyjne ARIA (62)
• Stało się coś śmiesznego... Łagodna degradacja umarła, a JavaScript stał się obowiązkowy (63)
  • Badania wykorzystania skryptów Yahoo (63)
  • Oto, co się dzieje... (64)
  • Co zrobić? A tak... XP (64)
• Och, społeczności projektantów... co się stało? (65)
• Wniosek - świętej pamięci strukturalne znaczniki HTML5 (65)

Rozdział 5. Wszystko, co powinniście wiedzieć o HTML5. Mikrosemantyka i Schema.org (67)

• Semantyka w skrócie (67)
• Te problemy zostały rozwiązane (68)
• Nie ma czegoś takiego jak kod bardziej semantyczny (68)
• Wielkie idee semantycznego kodu - Semantyczna Sieć (69)
• Semantyka jeszcze nie umarła (albo o tym, jak Google i spółka podrzucili mikrosemantyczną bombę) (69)
• Handel elektroniczny i prawdziwa (mikro)semantyka (70)
• Czy prawdziwa semantyka jest obecna? (71)
• Dlaczego warto zwracać uwagę na mikrosemantykę? (71)
• Schema.org - przyszłość semantyki? (72)
• Czy nie można było zrobić tego wcześniej? (72)
• Semantyczna Sieć, na jaką czekaliśmy? (73)
  • Mikroformaty (73)
  • RDFa (73)
  • Mikrodane (74)
• Mikrodane i Schema.org (74)
• W jaki sposób nie należy rozpoczynać inicjatywy (75)
• Co myślą osoby odpowiedzialne za Schema.org? (76)
• Podsumowanie - semantyka i HTML (77)

Rozdział 6. Wszystko, co powinniście wiedzieć o HTML5 i SEO (79)

• Średniowiecze SEO (79)
• Poupychaj swoje słowa kluczowe (79)
• HTML i SEO (80)
• A co jeśli to pomoże... jakoś? (80)
• Nieumarłe mity muszą odejść... w końcu (81)

Rozdział 7. Wszystko, co powinniście wiedzieć o innych elementach HTML5 (83)

• Bądź odważny i zgiń, próbując (83)
• Umieść to w odnośniku albo inne drobiazgi (84)
  • Umieszczanie elementów blokowych w odnośnikach (84)
  • mark (85)
  • figure oraz figcaption (85)
  • time (85)
  • details oraz summary (86)
  • small (87)
  • address (87)
  • cite (87)
• Czy w ogóle powinniśmy używać tych niejasnych małych znaczników? (87)

Rozdział 8. Wszystko, co powinniście wiedzieć o formularzach HTML5 (89)

• Powolne przechodzenie do rozwiązań natywnych (89)
• Formularze mogą poprawić lub popsuć witrynę (90)
• Dobre wiadomości i złe wiadomości (90)
• Zasoby sieciowe dotyczące formularzy HTML5 (91)
• Formularze HTML5 - podstawy (92)
  • Nowe typy pól - e-mail, URL, numer telefonu i terminy do wyszukiwania (92)
  • Atrybuty autocomplete, autofocus, readonly oraz spellcheck (93)
• Formularze HTML5 - ze znakiem zapytania... (94)
  • Atrybut placeholder (94)
  • progress (95)
  • meter (96)
• Formularze HTML5 - ja bym jeszcze tego nie robił, ale jeśli bardzo chcesz, to możesz spróbować (97)
  • Atrybut required (97)
  • Atrybut pattern (98)
  • Typ pola input - number (ze strzałkami) (98)
  • Typ pola input - range (suwak) (99)
  • Typ pola input - date (widżety wyboru czasu i kalendarze) (99)
• Typ pola input - color (wybór koloru) (101)
  • Elementy input i datalist (101)
• Ty hipokryto! Sądziłem, że stosowanie JavaScriptu jest najgorszym z możliwych rozwiązań (102)
• A co z dostępnością? (102)

Rozdział 9. Wszystko, co powinniście wiedzieć o elemencie canvas, grach i technologii Flash (103)

• Flash umiera i pozostał nam jedynie HTML5 (103)
• Czy płótna i HTML mogą wypełnić lukę? (104)
• Tworzenie treści HTML5 przy użyciu narzędzi dla technologii Flash (105)
• A później przydarzyły się aplikacje (105)
• Wraz z Flashem pochowajmy wszystko, co się z nim wiąże (106)
• Nie jesteśmy już na płótnie (107)
• Fajne rzeczy, które można robić, używając elementu canvas (108)
  • Etykietki (109)
  • Wykresy (109)
  • Wizualizacje (111)
  • Gry (114)
  • Operacje na obrazach (116)
  • Aplikacje internetowe korzystające z elementów canvas (117)
  • Rysowanie elementów interfejsu użytkownika (119)
  • Czasami dobra, a czasami zła emulacja płócien w przeglądarkach IE 6 - 8 (122)
• Przypadkowy świat standardów sieciowych (czyli jak to się stało, że istnieje element canvas?) (123)
• Elementy canvas a dostępność (124)
• Aktualny stan elementów canvas (125)
  • Prymitywne środowiska dla twórców (125)
  • Wydajność (125)
  • Ograniczona zgodność z przeglądarkami IE (126)
  • I znowu porównanie do szklanki (126)
• Gry HTML5 - płótna czy nie płótna? (126)
  • Czy to w ogóle są płótna? (127)
• Jak zacząć tworzenie gier przy użyciu elementów canvas? (127)
  • Gry HTML - poza HTML5 (127)
• Element canvas - czy jest w nim coś dla mnie? (128)
  • Element canvas dla projektantów stron (128)
  • Element canvas dla studentów i hobbystów (128)
  • Element canvas dla projektantów Flash (128)
  • Zastosuj go i sam się przekonaj (128)
• Przestrzenna przyszłość płaskich płócien - WebGL (129)
• Grafika 3D w Sieci - alternatywy dla WebGL (129)
• Pokażcie mi dema! (130)
  • HelloRun (130)
  • Epic Citadel (130)
  • Angry Birds (131)
  • Interaktywny film muzyczny "3 Dreams in Black" (132)
  • glfx.js - operacje na obrazach (132)
  • Quake II (132)
  • GT Racing - Motor Academy (134)
  • Skid Racer (134)
  • Inne produkty demonstrujące możliwości WebGL (135)
• Dla WebGL to wciąż dopiero początek (136)

Rozdział 10. Wszystko, co powinniście wiedzieć o audio i wideo w HTML5 (137)

• Elementy video i audio w działaniu (137)
• Element audio (138)
  • Atrybuty elementu audio (138)
• Element video (140)
  • Dostępność wideo (141)
  • API i zasoby sieciowe (142)
  • Kodeki, zabijacie nas (142)
  • Problemy z patentami (143)
  • H.264 na razie zostanie (144)
  • Google grozi, że Chrome będzie obsługiwać wyłącznie WebM, lecz nie spełnia tej groźby (144)
• Kodeki - co zrobić? (145)
• Przykra rzeczywistość (146)
• Typy wideo... o rany! (146)
• Określanie obsługiwanych typów wideo przy użyciu kodu JavaScript (147)
• Z pomocą spieszą odtwarzacze audio i wideo (147)
  • MediaElement (wideo i audio, bezpłatny) (148)
  • VideoJS (wideo, bezpłatny) (148)
  • Flowplayer (wideo, bezpłatny lub komercyjny) (149)
  • Inne odtwarzacze (149)
• Inne skazy na obrazie HTML5 wideo - DRM, strumieniowanie, prezentacje pełnoekranowe (150)
• DRM (150)
• Media strumieniowe (151)
• Fullscreen API (152)
• Czy element HTML5 audio jest gotowy do stosowania w grach? (153)
• Podsumowanie (154)

Rozdział 11. Wszystko, co powinniście wiedzieć o SVG - niegdyś konkurencie Flasha, a teraz... (155)

• SVG, SVG... (155)
• SVG - przeglądarki ją w końcu obsługują (156)
• Tak, istnieje sposób, by nawet już dziś na poważnie używać SVG (157)
• Wiele twarzy SVG (157)
• SVG na początku wieku - wielka niespełniona nadzieja (158)
• Wsparcie przeglądarek - Android, co do diabła? A, no i IE... (158)
• Przykładowe zastosowania SVG - czy do czegoś mogą się przydać? (159)
  • SVG Girl (159)
  • D3.js (161)
  • Wykresy tworzone przy użyciu biblioteki Highcharts (163)
• Rozwiązania wykorzystujące Snap.svg (163)
• Rozwiązania wykorzystujące bibliotekę Raphaël (165)
  • thirteen23 (165)
  • Markup.io (166)
  • DrawAStickman.com (167)
• Praca z SVG (167)
• Projektowanie elastycznych stron WWW a SVG (168)
• Kruczki SVG (168)
• SVG - spadkobierca Flasha? (169)

Rozdział 12. Wszystko, co powinniście wiedzieć o HTML5 w aplikacjach internetowych, zastosowaniach mobilnych i przyszłości (171)

• Wsparcie przeglądarek dla tworzenia aplikacji w HTML5 (171)
• HTML5 w świecie urządzeń mobilnych - WebKit i nie tylko (172)
• Rynek mobilny to ruchomy cel - znaczący ruch Microsoftu (173)
• Mozilla OS - ambitna platforma mobilna fundacji Mozilla oraz WebAPI (174)
• Zgodność obsługi HTML na urządzeniach mobilnych (175)
• HTML5 w systemach zarządzania treścią (175)
• Wiek JavaScript (176)
• JavaScript zabił gwiazdę HTML (176)
• Modernizr, kiedy mogę używać... i skrypty polyfill (177)
  • Modernizr (178)
  • Kiedy mogę użyć... (178)
  • Skrypty polyfill (178)
• HTML5 oraz jego API do tworzenia aplikacji (178)
• History API (179)
• Magazyn sieciowy HTML5 (i arkusze stylów generowane programowo) (180)
• Magazyn bazy danych (181)
• HTML5 Offline (pamięć podręczna aplikacji) (181)
• API do geolokalizacji (182)
• Inne API, które mogą nas zainteresować (183)
• Co nas czeka w przyszłości - HTML 5.1 (184)
• Podsumowanie (185)

Rozdział 13. Wszystko, co powinniście wiedzieć o przyszłości projektowania stron WWW - projektowanie pod kątem (187)

• Działania po omacku (188)
• Wydajność kontra produkcja (188)
• Zmieniając projekt, róbmy pomiary (188)
• Działajmy obiektywnie (189)

Skorowidz (191)