Spis treści

Spis treści
O autorach
O recenzencie technicznym
Słowo wstępne
Wstęp
O tym, jak astronauci architektury i W3C próbowali zabić HTML
Zapewne używacie już XML
XHTML narodził się, ale co to właściwie oznaczało?
Drakońska obsługa błędów (czyli dlaczego po prostu nie walnąć Cię pięścią w
nos?)
No dobrze, nie tak dosłownie, ale przeglądarka mogła to zrobić
XHTML wciąż oznaczał coś lepszego od HTML
Jednak szaleństwo dopiero się zaczynało
XHTML 2.0 - niekochany i samotny
W3C mówi: "Idźcie do diabła"
Narodziny WHATWG
To zupełnie nowy świat
Hixie albo nic
XHTML 2.0 umarł i wszyscy są szczęśliwi
HTML5... hm... HTML, chwila... HTML.next?
Czy powinniśmy całkowicie pogrzebać W3C, czy je zaakceptować?
Reforma
Eliminacja
Akceptacja
W jaki sposób nowe możliwości są obecnie dodawane do HTML5?
Rozbieżności pomiędzy WHATWG i W3C
TL;DR
Na czym będziemy się koncentrować?
Zmiany formatowania wprowadzone w HTML5
A co z rozwiązaniami skryptowymi oraz stylami CSS dla nowych elementów?
Nieznaczny smak bólu - wyróżnianie sekcji
Skąd wzięły się te elementy?
Kogo to obchodzi?
Sprzeczności u podstaw nowych elementów HTML5
Plan czego?
Czym są plany dokumentów i czy powinniśmy zwracać na nie uwagę?
W jaki sposób tworzy się plany (nawet nieświadomie
Podział na sekcje jest starym problemem
Jeśli zwracamy uwagę na osoby niewidome, musimy zwracać uwagę na nagłówki
Poprawiony" sposób tworzenia planów dokumentów w HTML5 był martwy, jeszcze
zanim został wprowadzony
Przemycanie wielkich idei prowadzi do martwych idei
Rozgałęzienie specyfikacji
Element main jest wyjątkiem (mniej więcej)
Jak należy określać strukturę stron HTML5?
Określanie stylów nagłówków w HTML5 jest trochę szalone
To nie jest bez znaczenia - ludzie muszą tego uczyć
A co to dla nas oznacza?
Sensowne rozwiązanie strukturalnego kodu zapewniającego dostępność
Korzyści ze stosowania ról ARIA
Zalecenia dotyczące układu
Tak naprawdę to do niczego nie służy
Jak czytniki ekranowe mogą używać elementu header, skoro może się on pojawiać
wszędzie?
Alternatywa ARIA - banner
Rekomendacja
nav
Dobra intencja, lecz tragedia pod względem dostępności
Alternatywa ARIA - navigation
Rekomendacja
section oraz article
section
Sekcje == punkty planu
Matrioszki
Rekomendacja
article
Specyfikacje powinny precyzować
Zagnieżdżanie elementów article w celu tworzenia artykułów i komentarzy
Wyszukiwarki nie potrzebują elementów article
element article nie ma także zawierać głównej treści strony
Rekomendacja
A zatem, jaka jest różnica pomiędzy elementami article i section?
aside
Element aside tworzy sekcje w dziwnych miejscach
Alternatywa ARIA - complementary
Rekomendacja
footer
Także stopki do niczego nie służą
Obszerna stopka? Powodzenia!
Czy mogę prosić o stopkę?
Alternatywa ARIA - contentinfo
Rekomendacja
main
Głównie bezużyteczna kontrowersja
Alternatywa ARIA - main
Rekomendacja
Inne punkty orientacyjne ARIA
Stało się coś śmiesznego... Łagodna degradacja umarła, a JavaScript stał się
obowiązkowy
Badania wykorzystania skryptów Yahoo
Oto, co się dzieje...
Co zrobić? A tak... XP
Och, społeczności projektantów... co się stało?
Semantyka w skrócie
Te problemy zostały rozwiązane
Nie ma czegoś takiego jak kod bardziej semantyczny
Wielkie idee semantycznego kodu - Semantyczna Sieć
Semantyka jeszcze nie umarła (albo o tym, jak Google i spółka podrzucili
mikrosemantyczną bombę)
Handel elektroniczny i prawdziwa (mikro)semantyka
Czy prawdziwa semantyka jest obecna?
Dlaczego warto zwracać uwagę na mikrosemantykę?
Schema.org - przyszłość semantyki?
Czy nie można było zrobić tego wcześniej?
Semantyczna Sieć, na jaką czekaliśmy?
Mikroformaty
RDFa
Mikrodane
Mikrodane i Schema.org
W jaki sposób nie należy rozpoczynać inicjatywy
Co myślą osoby odpowiedzialne za Schema.org?
Średniowiecze SEO
Poupychaj swoje słowa kluczowe
HTML i SEO
A co jeśli to pomoże... jakoś?
Nieumarłe mity muszą odejść... w końcu
Bądź odważny i zgiń, próbując
Umieść to w odnośniku albo inne drobiazgi
Umieszczanie elementów blokowych w odnośnikach
mark
figure oraz figcaption
time
details oraz summary
small
address
cite
Czy w ogóle powinniśmy używać tych niejasnych małych znaczników?
Powolne przechodzenie do rozwiązań natywnych
Formularze mogą poprawić lub popsuć witrynę
Dobre wiadomości i złe wiadomości
Zasoby sieciowe dotyczące formularzy HTML5
Nowe typy pól - e-mail, URL, numer telefonu i terminy do wyszukiwania
Atrybuty autocomplete, autofocus, readonly oraz spellcheck
Atrybut placeholder
progress
meter
Atrybut required
Atrybut pattern
Typ pola input - number (ze strzałkami)
Typ pola input - range (suwak)
Typ pola input - date (widżety wyboru czasu i kalendarze)
Typ pola input - color (wybór koloru)
Elementy input i datalist
Ty hipokryto! Sądziłem, że stosowanie Javacriptu jest najgorszym z możliwych
rozwiązań
A co z dostępnością?
Rozdział 9. Wszystko, co powinniście wiedzieć o elemencie canvas, grach i
technologii Flash
Flash umiera i pozostał nam jedynie HTML5
Czy płótna i HTML mogą wypełnić lukę?
Tworzenie treści HTML5 przy użyciu narzędzi dla technologii Flash
A później przydarzyły się aplikacje
Wraz z Flashem pochowajmy wszystko, co się z nim wiąże
Nie jesteśmy już na płótnie
Fajne rzeczy, które można robić, używając elementu canvas
Etykietki
Wykresy
Wizualizacje
Gry
Operacje na obrazach
Aplikacje internetowe korzystające z elementów canvas
Rysowanie elementów interfejsu użytkownika
Czasami dobra, a czasami zła emulacja płócien w przeglądarkach IE 6 - 8
Przypadkowy świat standardów sieciowych (czyli jak to się stało, że istnieje
element canvas?)
Elementy canvas a dostępność
Aktualny stan elementów canvas
Prymitywne środowiska dla twórców
Wydajność
Ograniczona zgodność z przeglądarkami IE
I znowu porównanie do szklanki
Czy to w ogóle są płótna?
Jak zacząć tworzenie gier przy użyciu elementów canvas?
Element canvas - czy jest w nim coś dla mnie?
Element canvas dla projektantów stron
Element canvas dla studentów i hobbystów
Element canvas dla projektantów Flash
Zastosuj go i sam się przekonaj
Przestrzenna przyszłość płaskich płócien - WebGL
Grafika 3D w Sieci - alternatywy dla WebGL
Pokażcie mi dema!
HelloRun
Epic Citadel
Angry Birds
Interaktywny film muzyczny "3 Dreams in Black"
glfx.js - operacje na obrazach
Quake II
GT Racing - Motor Academy
Skid Racer
Inne produkty demonstrujące możliwości WebGL
Dla WebGL to wciąż dopiero początek
Elementy video i audio w działaniu
Element audio
Atrybuty elementu audio
Element video
Dostępność wideo
API i zasoby sieciowe
Kodeki, zabijacie nas
Problemy z patentami
H.264 na razie zostanie
Google grozi, że Chrome będzie obsługiwać wyłącznie WebM, lecz nie spełnia tej
groźby
Kodeki - co zrobić?
Przykra rzeczywistość
Typy wideo... o rany!
Określanie obsługiwanych typów wideo przy użyciu kodu JavaScript
Z pomocą spieszą odtwarzacze audio i wideo
MediaElement (wideo i audio, bezpłatny)
VideoJS (wideo, bezpłatny)
Flowplayer (wideo, bezpłatny lub komercyjny)
Inne odtwarzacze
Inne skazy na obrazie HTML5 wideo -DRM strumieniowanie, prezentacje
pełnoekranowe
DRM
Media strumieniowe
Fullscreen API
Czy element HTML5 audio jest gotowy do stosowania w grach?
Podsumowanie
Rozdział 11. Wszystko, co powinniście wiedzieć o SVG - niegdyś konkurencie
Flasha, a teraz...
SVG, SVG...
SVG - przeglądarki ją w końcu obsługują
Tak, istnieje sposób, by nawet już dziś na poważnie używać SVG
Wiele twarzy SVG
SVG na początku wieku - wielka niespełniona nadzieja
Wsparcie przeglądarek - Android, co do diabła? A, no i IE...
Przykładowe zastosowania SVG - czy do czegoś mogą się przydać?
SVG Girl
D3.js
Wykresy tworzone przy użyciu biblioteki Highcharts
Rozwiązania wykorzystujące Snap.svg
Rozwiązania wykorzystujące bibliotekę Rapha‰l
thirteen23
Markup.io
DrawAStickman.com
Praca z SVG
Projektowanie elastycznych stron WWW a SVG
Kruczki SVG
SVG - spadkobierca Flasha?
Rozdział 12. Wszystko, co powinniście wiedzieć o HTML5 w aplikacjach
internetowych, zastosowaniach mobilnych i przyszłości
Wsparcie przeglądarek dla tworzenia aplikacji w HTML5
HTML5 w świecie urządzeń mobilnych - WebKit i nie tylko
Rynek mobilny to ruchomy cel - znaczący ruch Microsoftu
Mozilla OS - ambitna platforma mobilna fundacji Mozilla oraz Webil
Zgodność obsługi HTML na urządzeniach mobilnych
HTML5 w systemach zarządzania treścią
Wiek JavaScript
JavaScript zabił gwiazdę HTML
Modernizr, kiedy mogę używać... i skrypty polyfill
Modernizr
Kiedy mogę użyć...
Skrypty polyfill
HTML5 oraz jego API do tworzenia aplikacji
History API
Magazyn sieciowy HTML5 (i arkusze stylów generowane programowo)
Magazyn bazy danych
HTML5 Offline (pamięć podręczna aplikacji)
API do geolokalizacji
Inne API, które mogą nas zainteresować
Co nas czeka w przyszłości - HTML 5.1
Podsumowanie
Rozdział 13. Wszystko, co powinniście wiedzieć o przyszłości projektowania stron
WWW - projektowanie pod kątem
Działania po omacku
Wydajność kontra produkcj
Zmieniając projekt, róbmy pomiary
Działajmy obiektywnie
Skorowidz