Najlepszy podręcznik do HTML5!
Chcesz tworzyć strony internetowe, które są dynamiczne, interaktywne, bogate w treści i utrzymują łączność z innymi serwisami. Chwila, na pewno chodzi Ci o strony internetowe? A może lepiej użyć HTML5 do tworzenia pełnokrwistych aplikacji internetowych? A jeżeli już, to czemu nie skorzystać z najnowszych technologii, które sprawdzą się zarówno w przeglądarkach desktopowych, jak i urządzeniach mobilnych? Poza tym na pewno interesują Cię nowe możliwości oferowane przez HTML5, takie jak geolokalizacja, wideo, grafika 2D, składowanie danych, wątki robocze i wiele innych, prawda?
Kolejna książka z serii "Rusz głową!" to najlepszy sposób na opanowanie nowości HTML5. Niezwykle atrakcyjna forma graficzna oraz nowoczesna metodologia nauki sprawiają, że już za kilkanaście dni będziesz specjalistą w zakresie HTML5. Dowiedz się, jak wykorzystać usługi geolokalizacyjne, jak rysować na płótnie (canvas) oraz składować dane na komputerze użytkownika. Sprawdź również, co możesz zyskać dzięki WebSockets oraz jak wycisnąć siódme poty z języka JavaScript. Nauka HTML5 jeszcze nigdy nie była tak łatwa! Spróbuj sam!
Poznaj HTML5 i korzystaj z:
usług geolokalizacyjnych
elementów multimedialnych
bazy danych w przeglądarce
zaawansowanych funkcji graficznych
Najnowsze standardy, najlepsze praktyki - Twoja przepustka do świata aplikacji internetowych!
Author(s): Eric Freeman, Elisabeth Robson
Series: Rusz głową!
Publisher: Helion
Year: 2013
Spis treści
Wprowadzenie
Dla kogo jest ta książka?
Wiemy, co sobie myślisz
Wiemy też, co sobie myśli Twój mózg
Metapoznanie — myślenie o myśleniu
Redaktorzy techniczni
Podziękowania
1. Witaj w Webowicach
JUŻ DZIŚ przesiądź sie na HTML5!
Wprowadzenie do MASZYNKI DO HTML5. Zaktualizuj swój HTML już dziś!
Jesteś bliżej znaczników HTML5, niż myślisz!
Wywiad tygodnia: Najnowszy HTML wyznaje swoje sekrety
Czy mógłby się w końcu pokazać PRAWDZIWY HTML5?
Jak tak naprawdę działa HTML5?
Kto się czym zajmuje?
Twoja pierwsza misja: rekonesans wśród przeglądarek
Co możesz zrobić w JavaScripcie?
Piszemy poważny kod w JavaScripcie
Piszemy poważny kod w JavaScripcie — rozwiązanie
Celne spostrzeżenia
Rozwiązania ćwiczeń
2. Odrobina kodu
Mechanizm działania JavaScriptu
Co możesz zrobić w JavaScripcie?
Deklarowanie zmiennych
Jak nazywać zmienne
Sztuka wyrażania (się)
Powtarzaj to w kółko...
Podejmowanie decyzji w JavaScripcie
Podejmowanie wielu decyzji i blok wyłapujący
Jak i gdzie dodać JavaScript do strony
Jak JavaScript współpracuje ze stroną
Jak upiec swój własny DOM
Pierwsza degustacja modelu DOM
HTML5 jest z Marsa, JavaScript jest z Wenus
Nie możesz mieszać w strukturze DOM, zanim cała strona nie zostanie załadowana
Do czego jeszcze może się przydać DOM?
Pomówmy jeszcze chwilę o JavaScripcie, czyli jak przechowywać wiele wartości
Sloganomat
Celne spostrzeżenia
Rozwiązania ćwiczeń
3. Odrobina interakcji
Przygotuj się na potańcówkę w Webowicach
Zaczynamy...
Ale nic się nie dzieje po kliknięciu przycisku „Dodaj piosenkę”
Obsługa zdarzeń
Trzeba to dobrze zaplanować...
Dostajemy się do przycisku „Dodaj piosenkę”
Wskazujemy przyciskowi funkcję obsługi zdarzenia
Przyjrzyjmy się temu bliżej...
Pobieranie tytułu piosenki
Jak umieścić piosenkę na stronie
Jak utworzyć nowy element
Dodawanie elementu do struktury DOM
Łączymy to wszystko ze sobą...
...i bierzemy na jazdę próbną
Podsumowanie — co udało się nam zrobić?
Jak dodać przygotowany kod
Integrowanie z przygotowanym kodem
Celne spostrzeżenia
Rozwiązania ćwiczeń
4. Z JavaScriptem na poważnie
Poszerzanie słownictwa
Jak utworzyć własną funkcję
Jak działa funkcja
Anatomia funkcji
Zmienne lokalne i globalne
Poznaj zasięg lokalnych i globalnych zmiennych
Och! A czy wspomnieliśmy, że funkcje są również wartościami?
Czy ktoś tu powiedział „obiekt”?!
Jak utworzyć obiekt w JavaScripcie
Przykładowe operacje na obiektach
Pomówmy o przekazywaniu obiektów do funkcji
Obiekty mogą mieć też zachowania...
Tymczasem w kinie Webowice...
Dodajemy słowo kluczowe „this”
Jak utworzyć konstruktor
Jak naprawdę działa this
Pierwsza jazda próbna konstruktora
Czym tak naprawdę jest obiekt window?
Bierzemy window.onload pod lupę
Ponowne spojrzenie na obiekt document
Bierzemy document.getElementById pod lupę
Jeszcze jeden obiekt do przeanalizowania — obiekt reprezentujący element
Celne spostrzeżenia
5. Geolokalizacja
Lokalizacja, lokalizacja i jeszcze raz lokalizacja
Szerokość i długość...
W jaki sposób Geolocation API określa Twoje położenie
W porządku, ale gdzie właściwie jesteś?
Jak to wszystko współdziała
Odkrywanie lokalizacji naszej tajnej siedziby
Piszemy kod wyznaczający odległość
Jak umieścić mapę na stronie
Wbijanie pinezek w mapę...
Inne wspaniałości oferowane przez API Google’a
Pomówmy o dokładności
„Gdziekolwiek pójdziesz, tam będziesz”
Zaczynamy pracę nad aplikacją
Modyfikujemy istniejący kod...
Czas się ruszyć!
Masz kilka opcji...
Czas na timeout i maximumAge
Nie próbujcie robić tego w domu! (Badanie granic wytrzymałości geolokalizacji)
Kończymy pracę nad aplikacją
Integrowanie aplikacji z nową funkcją
Celne spostrzeżenia
Rozwiązania ćwiczeń
6. Aplikacje otwarte na innych
Firma Megagumy potrzebuje aplikacji internetowej
Trochę więcej szczegółów na temat przedsięwzięcia
Jak zgłaszać żądania do usług sieciowych
Jak zgłosić żądanie z poziomu JavaScriptu
Wystarczy tego XML-a, poznaj JSON-a
Piszemy funkcję zwrotną onload
Wyświetlanie danych o sprzedaży gum
Jak postawić własny serwer WWW
Poprawiamy kod, by korzystał z JSON-a
Przesiadamy się na prawdziwy serwer
Jednym słowem, zawiecha!
Wciąż wisisz, pamiętasz? To błąd...
Zasady bezpieczeństwa w przeglądarce
Jakie mamy możliwości?
Poznaj JSONP
O co chodzi z tym „P” w JSONP?
Zmodyfikujmy w końcu naszą aplikację
Krok 1. Zajmujemy się elementem skryptu...
Krok 2. Czas na odmierzanie czasu
Krok 3. Piszemy na nowo obsługę JSONP
Prawie zapomnieliśmy — miejcie się na baczności przed straszliwą pamięcią podręczną przeglądarki
Jak usunąć powtarzające się dane
Dodanie do adresu parametru lastreporttime
Celne spostrzeżenia
7. Element canvas
Nasz nowy projekt: TweetowaKoszulka
Przyglądamy się „makiecie”
Jak umieścić element canvas na stronie
Jak zobaczyć element canvas
Rysowanie na płótnie
Jak wyjść z twarzą z opresji
TweetowaKoszulka — obraz całości
Najpierw umieśćmy HTML na swoim miejscu
Teraz możemy dodać formularz
Czas na obliczenia — w roli głównej JavaScript
Piszemy funkcję drawSquare
Dodajemy wywołanie metody fillBackgroundColor
Tymczasem na TweetowaKoszulka.com...
Rysujemy z geekami...
Rozkładamy metodę arc na części pierwsze
Smaczki metody arc
Ja mówię stopnie, a Ty radiany
Wracamy do kodu rysującego kółka
Piszemy funkcję drawCircle...
Pobieranie tweetów
Zbliżenie na tekst na płótnie
Ożywiamy funkcję drawText
Kończymy funkcję drawText
Celne spostrzeżenia
Rozwiązania ćwiczeń
8. Element video
Poznaj TV Webowice
Podłącz odbiornik i sprawdź, czy działa...
Jak działa element video
Dokładna inspekcja atrybutów...
Co musisz wiedzieć o formatach wideo?
Trudna sztuka żonglowania formatami...
Czy dobrze zrozumiałem, że jest jakieś API?
Planujemy program dla TV Webowice
Jak napisać funkcję obsługi zdarzenia ended
Jak działa metoda canPlayType
Odpakowujemy testową budkę
Przeglądamy pozostałą część fabrycznego kodu
Funkcje setEffect i setVideo
Implementujemy własne kontrolki wideo
Przełączanie testowych plików wideo
Czas na efekty specjalne
Jak przetwarzać wideo
Jak przetwarzać wideo z użyciem bufora
Używamy elementu canvas jako bufora
Teraz zajmiemy się efektami
Jak korzystać ze zdarzeń błędów
Celne spostrzeżenia
Rozwiązania ćwiczeń
9. Mechanizm Web Storage
Jak działało składowanie danych w przeglądarce (1995 – 2010)
Jak działa mechanizm Web Storage w HTML5
Przypominajki...
Czy przypadkiem localStorage i tablice nie są bliźniakami?
Tworzymy interfejs
Teraz dodamy trochę JavaScriptu
Kończymy pracę nad interfejsem użytkownika
Musimy się zatrzymać na mały przegląd
Zrób to sam: konserwacja aplikacji
Mamy odpowiednią technologię...
Przerabiamy aplikację, by korzystała z tablicy
Modyfikujemy funkcję createSticky, by używała tablicy
Usuwanie notatek
Funkcja deleteSticky
Jak wskazać notatkę do usunięcia
Jak z obiektu zdarzenia wyciągnąć usuwaną notatkę
Notatkę usuwamy także ze struktury DOM
Ulepszamy interfejs użytkownika — dodajemy możliwość wyboru koloru
JSON.stringify nie tylko do tablic
Nie próbujcie robić tego w domu! (Rozsadzamy 5-megabajtową składnię danych)
Poznałeś już localStorage. Jak i kiedy go zastosować?
Celne spostrzeżenia
Rozwiązania ćwiczeń
10. Wątki robocze
Te okropne powolne skrypty
Jak JavaScript spędza czas
Kiedy jednowątkowość się NIE sprawdza
Nowy wątek przybywa z pomocą
Jak działają wątki robocze
Twój pierwszy wątek roboczy
Tworzymy kod zarządzający wątkami — manager.js
Odbieranie komunikatu z wątku
Teraz napiszemy kod wątku
Wirtualna eksploracja nieznanych lądów
Jak wyznaczyć zbiór Mandelbrota
Jak używać wielu wątków
Budujemy aplikację Eksplorator fraktali
Kod gotowy do użycia
Tworzenie wątków i zlecanie im zadań
Piszemy kod
Uruchamiamy wątki
Implementujemy wątek
Wracamy do kodu — jak przetworzyć wyniki otrzymane z wątku
Dopasowujemy płótno do okna przeglądarki
Upierdliwy szef programista
Laboratorium
Celne spostrzeżenia
Rozwiązania ćwiczeń
Dodatek. Dziesięć najciekawszych tematów
1. Modernizr
2. Dźwięk
3. jQuery
4. Umarł XHTML, niech żyje XHTML
5. SVG
6. Aplikacje internetowe działające offline
7. Gniazda
8. Jeszcze raz o elemencie canvas
9. API selektorów
10. To nie wszystko!
Przewodnik HTML5 po nowych konstrukcjach
Przewodnik po elementach semantycznych w HTML5
Przewodnik po właściwościach CSS3
Skorowidz
