Freeman E. - HTML5. Rusz głową!

Description

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! 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