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

8 Wprowadzenie Autorzy Autorzy książki HTML5. Rusz głową! Eric Freeman Eric jest według Kathy Sierry — współtwórczyni serii Rusz głową!, „jednym z nielicznych osobników biegłych w języku, praktyce i kulturze wielu różnych światów, takich jak choćby hipsterscy hakerzy, wiceprezesi korporacji, inżynierowie czy think tanki”. Niedawno Eric zakończył blisko dziesięcioletnią współpracę z firmą The Walt Disney, gdzie piastował funkcję dyrektora ds. technicznych w Disney Online i Disney.com. Teraz Eric poświęca swój czas firmie WickedlySmart, którą założył wraz z Elisabeth. Z wykształcenia Eric jest informatykiem. Podczas studiów miał okazję poznać wizjonera — Davida Gelerntera, który w tym czasie robił doktorat na Uniwersytecie Yale. Jego praca doktorska dotyczyła alternatyw dla metafory pulpitu oraz strumieni aktywności. Eric brał czynny udział w tych pracach. W wolnym czasie Eric poświęca się muzyce. Ostatni jego projekt, powstały we współpracy z pionierem muzyki ambient — Steve’em Roachem, jest dostępny w sklepie AppStore pod nazwą Immersion Station. Eric mieszka wraz z żoną i córką na wyspie Bainbridge. Jego córka jest częstym gościem w studiu nagraniowym, gdzie z lubością oddaje się manipulowaniu przełącznikami jego syntezatorów i efektów dźwiękowych. Eric pasjonuje się również wszelkimi aspektami edukacji i odżywiania, szukając sposobów na ich wzbogacenie. Jeżeli chcesz się z nim skontaktować, pisz na adres eric@wickedlysmart.com lub odwiedź jego stronę: http://ericfreeman.com. Elisabeth zajmuje się inżynierią oprogramowania, pisaniem i szkoleniami. Pasjonuje się technologią od czasu, gdy studiowała na Uniwersytecie Yale, gdzie zdobyła tytuł magistra informatyki, zajmując się współbieżnymi wizualnymi językami programowania i architekturą oprogramowania. Elisabeth zainteresowała się internetem już na samym początku jego istnienia. Była jednym z twórców nagradzanej witryny The Ada Project, czyli jednej z pierwszych witryn pomagających kobietom związanym z informatyką znaleźć pracę. Jest współzałożycielką firmy WickedlySmart, czyli internetowego centrum edukacyjnego dotyczącego technologii internetowych. Zajmuje się tam pisaniem książek, artykułów, przygotowywaniem materiałów wideo i wieloma innymi sprawami. Wcześniej Elisabeth była kierownikiem projektów w wydawnictwie O’Reilly Media i zajmowała się produkowaniem warsztatów oraz kursów online dotyczących różnych zagadnień związanych z technologią. Wtedy odkryła w sobie pasję do tworzenia takich materiałów dydaktycznych, które naprawdę pomagają ludziom zrozumieć technologię. Przed pracą w wydawnictwie Elisabeth prowadziła badania nad cyfrowymi mediami w firmie The Walt Disney Company. Kiedy nie siedzi przed komputerem, chętnie wybiera się na piesze wycieczki, jeździ na rowerze, pływa kajakiem, mając zawsze pod ręką kamerę, albo przyrządza wegetariańskie posiłki. Jeżeli chcesz się z nią skontaktować, pisz na adres beth@wickedlysmart.com lub odwiedź jej blog: http://elisabethrobson.com. Elisabeth Robson

9 Spis treści Spis treści (skrócony) Wprowadzenie 21 1. Poznajemy HTML5. Witaj w Webowicach 33 2. Wstęp do JavaScriptu i struktury DOM. Odrobina kodu 65 3. Zdarzenia, ich obsługa i takie tam. Odrobina interakcji 113 4. Funkcje i obiekty w JavaScripcie. Z JavaScriptem na poważnie 139 5. Twoja strona wie, gdzie jesteś. Geolokalizacja 189 6. Rozmawiamy z siecią. Aplikacje otwarte na innych 235 7. Odkryj w sobie artystę. Element canvas 301 8. Telewizja po liftingu. Element video... gościnnie występuje canvas 367 9. Lokalne składowanie danych. Mechanizm Web Storage 429 10. Zaprzęgamy JavaScript do pracy. Wątki robocze 487 Dodatek. Dziesięć najciekawszych tematów (o których nie wspomnieliśmy) 543 Skorowidz 561 Wprowadzenie Twój mózg koncentruje się na programowaniu w HTML5. Starasz się czegoś nauczyć, ale Twój mózg robi Ci wątpliwą przysługę i nie przykłada się do utrwalania zdobytej wiedzy. Pewnie sobie myśli: „Lepiej zostawię więcej miejsca na ważniejsze informacje, jak na przykład to, jakich dzikich zwierząt powinienem unikać albo czy jazda nago na snowboardzie będzie dobrym pomysłem”. Jak w takim razie oszukać mózg, by zaczął myśleć, że od znajomości HTML5 i JavaScriptu zależy Twoje życie? Dla kogo jest ta książka? 22 Wiemy, co sobie myślisz 23 Wiemy też, co sobie myśli Twój mózg 23 Metapoznanie — myślenie o myśleniu 25 Redaktorzy techniczni 30 Podziękowania 31 W Spis treści (z prawdziwego zdarzenia)

10 Spis treści Poznajemy HTML5 Witaj w Webowicach HTML pokonał długą i krętą drogę. Jasne, że HTML na początku był zwykłym językiem znacznikowym, ale ostatnio przybyło mu trochę mięśni. Stał się teraz językiem dostosowanym do tworzenia prawdziwych aplikacji internetowych z możliwością lokalnego składowania danych, rysowania 2D, pracy offline, obsługi gniazd i wątków, a na tym nie koniec. HTML ma w swojej historii wiele nie najlepszych, a nawet dramatycznych momentów (do wszystkiego z czasem dojdziemy).W tym rozdziale wybierzemy się na krótką przejażdżkę po Webowicach, by poznać wszystko to, co składa się na HTML5. No dalej, wskakuj! Kierunek Webowice — od zera do HTML5 w 3,8 strony (na pełnym gazie). 1 JUŻ DZIŚ przesiądź się na HTML5! 34 Wprowadzenie do MASZYNKI DO HTML5. Zaktualizuj swój HTML już dziś! 36 Jesteś bliżej znaczników HTML5, niż myślisz! 39 Wywiad tygodnia: Najnowszy HTML wyznaje swoje sekrety 43 Czy mógłby się w końcu pokazać PRAWDZIWY HTML5? 44 Jak tak naprawdę działa HTML5? 46 Kto się czym zajmuje? 48 Twoja pierwsza misja: rekonesans wśród przeglądarek 49 Co możesz zrobić w JavaScripcie? 54 Piszemy poważny kod w JavaScripcie 57 Piszemy poważny kod w JavaScripcie — rozwiązanie 58 Celne spostrzeżenia 63 Rozwiązania ćwiczeń 64 3U]HFLċJQLM L XSXĤþ %XIRURZDQLH RIIOLQH *HRORNDOL]DFMD :LGHR (OHPHQW FDQYDV )RUPXODU]H :ċWNL URERF]H *QLD]GD KWPO KHDG WLWOH VFULSW ERG\ h1 Sh2 HP 'ĮZLĐN /RNDOQH VNâDGRZDQLH GDQ\FK Znaczniki

11 Spis treści Wstęp do JavaScriptu i struktury DOM Odrobina kodu JavaScript zabierze Cię w całkiem nowe miejsca. Wiesz już wszystko o znacznikach HTML (związanych ze strukturą), stylach CSS (związanych z prezentacją), więc tym, czego Ci brakuje, jest język JavaScript (związany z zachowaniem). Jeśli Twoja wiedza ogranicza się do struktury i prezentacji, możesz — rzecz jasna — tworzyć doskonale wyglądające strony, ale pozostaną one tylko stronami. Dodanie za pośrednictwem JavaScriptu zachowań niesamowicie zwiększa możliwości interakcji, a nawet lepiej — możesz tworzyć prawdziwe aplikacje internetowe. Przygotuj się na dołożenie do Twojego pudełka na narzędzia internetowe najbardziej interesującego i uniwersalnego sprzętu: JavaScriptu i programowania! 2 Mechanizm działania JavaScriptu 66 Co możesz zrobić w JavaScripcie? 67 Deklarowanie zmiennych 68 Jak nazywać zmienne 70 Sztuka wyrażania (się) 73 Powtarzaj to w kółko... 76 Podejmowanie decyzji w JavaScripcie 79 Podejmowanie wielu decyzji i blok wyłapujący 80 Jak i gdzie dodać JavaScript do strony 83 Jak JavaScript współpracuje ze stroną 84 Jak upiec swój własny DOM 85 Pierwsza degustacja modelu DOM 86 HTML5 jest z Marsa, JavaScript jest z Wenus 88 Nie możesz mieszać w strukturze DOM, zanim cała strona nie zostanie załadowana 94 Do czego jeszcze może się przydać DOM? 96 Pomówmy jeszcze chwilę o JavaScripcie, czyli jak przechowywać wiele wartości 97 Sloganomat 101 Celne spostrzeżenia 105 Rozwiązania ćwiczeń 106

12 Spis treści Zdarzenia, ich obsługa i takie tam... Odrobina interakcji Wciąż jeszcze nie zatroszczyłeś się o kontakt z użytkownikiem. Poznałeś podstawy JavaScriptu, ale czy umiesz nawiązać bezpośredni kontakt z użytkownikiem? Gdy strony zaczynają odpowiadać na działania użytkownika, przestają być zwykłymi dokumentami, a stają się żywymi, czującymi i reagującymi aplikacjami.W tym rozdziale dowiesz się, jak obsługiwać jedną z form wprowadzania danych przez użytkownika i powiązać stary dobry element

13 Spis treści Funkcje i obiekty w JavaScripcie Z JavaScriptem na poważnie Czy możesz się już nazwać prawdziwym twórcą skryptów? Najprawdopodobniej tak, w końcu wiesz już całkiem sporo o JavaScripcie.Ale kto chciałby poprzestać na tworzeniu skryptów, skoro może zostać programistą? Żarty się skończyły — przygotuj się na spotkanie z funkcjami i obiektami. Stanowią one klucz do wydajniejszego, lepiej zorganizowanego i łatwiejszego w utrzymaniu kodu. Są też powszechnie stosowane w dostępnych z poziomu JavaScriptu interfejsach API HTML5, więc im lepiej je poznasz, tym szybciej zaczniesz korzystać z nowych możliwości dostępnych w HTML5.A teraz skup się, bo ten rozdział wymaga Twojej wzmożonej uwagi... 4 Poszerzanie słownictwa 140 Jak utworzyć własną funkcję 141 Jak działa funkcja 142 Anatomia funkcji 147 Zmienne lokalne i globalne 149 Poznaj zasięg lokalnych i globalnych zmiennych 150 Och! A czy wspomnieliśmy, że funkcje są również wartościami? 154 Czy ktoś tu powiedział „obiekt”?! 157 Jak utworzyć obiekt w JavaScripcie 158 Przykładowe operacje na obiektach 159 Pomówmy o przekazywaniu obiektów do funkcji 162 Obiekty mogą mieć też zachowania... 168 Tymczasem w kinie Webowice... 169 Dodajemy słowo kluczowe „this” 171 Jak utworzyć konstruktor 173 Jak naprawdę działa this 175 Pierwsza jazda próbna konstruktora 179 Czym tak naprawdę jest obiekt window? 181 Bierzemy window.onload pod lupę 182 Ponowne spojrzenie na obiekt document 183 Bierzemy document.getElementById pod lupę 183 Jeszcze jeden obiekt do przeanalizowania — obiekt reprezentujący element 184 Celne spostrzeżenia 186

14 Spis treści Twoja strona wie, gdzie jesteś Geolokalizacja Gdziekolwiek pójdziesz, tam będziesz. Czasem wiedza o tym, gdzie się znajdujesz, robi wielką różnicę (zwłaszcza w przypadku aplikacji internetowych).W tym rozdziale pokażemy Ci, jak tworzyć strony internetowe, które znają lokalizację użytkownika — czasem z dokładnością do metrów, a czasem przybliżoną, określającą jedynie dzielnicę (ale zawsze będziesz wiedział, w którym mieście!). Niestety czasem nie będzie to jednak możliwe albo ze względów technicznych, albo z uwagi na to, że użytkownik nie życzy sobie takiej inwigilacji.W każdym razie w tym rozdziale opiszemy javascriptowy interfejs Geolocation API. Przygotuj najlepszy sprzęt szpiegowski, który masz na stanie (może być nawet zwykły pecet) i do dzieła. 5 Lokalizacja, lokalizacja i jeszcze raz lokalizacja 190 Szerokość i długość... 191 W jaki sposób Geolocation API określa Twoje położenie 192 W porządku, ale gdzie właściwie jesteś? 196 Jak to wszystko współdziała 200 Odkrywanie lokalizacji naszej tajnej siedziby 203 Piszemy kod wyznaczający odległość 205 Jak umieścić mapę na stronie 207 Wbijanie pinezek w mapę... 210 Inne wspaniałości oferowane przez API map Google’a 212 Pomówmy o dokładności 215 „Gdziekolwiek pójdziesz, tam będziesz” 216 Zaczynamy pracę nad aplikacją 217 Modyfikujemy istniejący kod... 218 Czas się ruszyć! 220 Masz kilka opcji... 222 Czas na timeout i maximumAge 223 Nie próbujcie robić tego w domu! (Badanie granic wytrzymałości geolokalizacji) 226 Kończymy pracę nad aplikacją 228 Integrowanie aplikacji z nową funkcją 229 Celne spostrzeżenia 231 Rozwiązania ćwiczeń 232

15 Spis treści Rozmawiamy z siecią Aplikacje otwarte na innych Już za długo siedzisz tylko na swojej stronie. Czas wyjść do świata, pogadać z usługami sieciowymi, pozbierać z nich dane i w ten sposób tworzyć jeszcze lepsze aplikacje ze znacznie większymi możliwościami.To bardzo istotny obszar nowoczesnych aplikacji tworzonych w HTML5, ale żeby cokolwiek zrobić, musisz wiedzieć, jak korzystać z usług sieciowych.W tym rozdziale właśnie o tym będziemy mówić i pokażemy, w jaki sposób dane pochodzące z prawdziwej usługi sieciowej połączyć ze stroną. Kiedy już się tego dowiesz, będziesz mógł korzystać z dowolnych dostępnych usług. Nauczysz się nawet specjalnego nowego dialektu stosowanego podczas „rozmów” z usługami sieciowymi.A zatem do dzieła — poznaj kolejne API, tym razem służące do komunikacji. 6 Firma Megagumy potrzebuje aplikacji internetowej 236 Trochę więcej szczegółów na temat przedsięwzięcia 238 Jak zgłaszać żądania do usług sieciowych 241 Jak zgłosić żądanie z poziomu JavaScriptu 242 Wystarczy tego XML-a, poznaj JSON-a 248 Piszemy funkcję zwrotną onload 251 Wyświetlanie danych o sprzedaży gum 252 Jak postawić własny serwer WWW 253 Poprawiamy kod, by korzystał z JSON-a 258 Przesiadamy się na prawdziwy serwer 259 Jednym słowem, zawiecha! 261 Wciąż wisisz, pamiętasz? To błąd... 264 Zasady bezpieczeństwa w przeglądarce 266 Jakie mamy możliwości? 269 Poznaj JSONP 274 O co chodzi z tym „P” w JSONP? 275 Zmodyfikujmy w końcu naszą aplikację 278 Krok 1. Zajmujemy się elementem skryptu... 286 Krok 2. Czas na odmierzanie czasu 287 Krok 3. Piszemy na nowo obsługę JSONP 289 Prawie zapomnieliśmy — miejcie się na baczności przed straszliwą pamięcią podręczną przeglądarki 294 Jak usunąć powtarzające się dane 295 Dodanie do adresu parametru lastreporttime 297 Celne spostrzeżenia 299 Uważaj na przerwane połączenia!

16 Spis treści Odkryj w sobie artystę Element canvas HTML przestał już być tylko językiem znacznikowym. Dzięki nowemu elementowi canvas wprowadzonemu w HTML5 możesz własnymi rękami tworzyć, zmieniać i niszczyć piksele. Element canvas, czyli wirtualne płótno, pozwoli Ci odkryć w sobie artystę — koniec z HTML-em, który opisuje jedynie semantykę i nie ma związku z prezentacją. Na płótnie możesz malować i rysować, więc wszystko tu dotyczy prezentacji. Zobaczymy, jak umieszczać ten element na stronie, jak rysować na nim tekst i grafikę (oczywiście za pomocą JavaScriptu), a nawet jak poradzić sobie z przeglądarkami, które nie obsługują elementu canvas. I jeszcze jedno — to nie jest tak, że opiszemy ten element i o nim zapomnimy — będziemy z niego korzystać jeszcze w kolejnych rozdziałach. 7 Nasz nowy projekt: TweetowaKoszulka 302 Przyglądamy się „makiecie” 303 Jak umieścić element canvas na stronie 306 Jak zobaczyć element canvas 308 Rysowanie na płótnie 310 Jak wyjść z twarzą z opresji 315 TweetowaKoszulka — obraz całości 317 Najpierw umieśćmy HTML na swoim miejscu 320 Teraz możemy dodać formularz 321 Czas na obliczenia — w roli głównej JavaScript 322 Piszemy funkcję drawSquare 324 Dodajemy wywołanie metody fillBackgroundColor 327 Tymczasem na TweetowaKoszulka.com... 329 Rysujemy z geekami... 331 Rozkładamy metodę arc na części pierwsze 334 Smaczki metody arc 336 Ja mówię stopnie, a Ty radiany 337 Wracamy do kodu rysującego kółka 338 Piszemy funkcję drawCircle... 339 Pobieranie tweetów 343 Zbliżenie na tekst na płótnie 348 Ożywiamy funkcję drawText 350 Kończymy funkcję drawText 351 Celne spostrzeżenia 358 Rozwiązania ćwiczeń 360 7ZHHWRZD.RV]XONDFRP ¥&,¥/( 7$-1( Nowy projekt HTML5 już się nie może doczekać, aż się nim zajmiesz!

17 Spis treści Telewizja po liftingu Element video… gościnnie występuje canvas Nie potrzebujemy już żadnych dodatkowych wtyczek. W końcu wideo stało się pełnoprawnym członkiem rodziny HTML.Wystarczy wstawić znacznik

18 Spis treści Lokalne składowanie danych Mechanizm Web Storage Masz już dosyć upychania danych klienta w tych malutkich szafach ciasteczkach? Może to było zabawne w latach 90. zeszłego wieku, ale teraz aplikacje internetowe mają znacznie większe wymagania i potrzeby. Co byś pomyślał, gdybyśmy powiedzieli, że możemy zapisać pięć megabajtów w przeglądarce każdego użytkownika? Pewnie popatrzyłbyś na nas z politowaniem i pomyślał, że coś z nami nie tak. Zdziwisz się, ale jest to jak najbardziej możliwe — interfejsowi API Web Storage dostępnemu w HTML5. W tym rozdziale pokażemy Ci wszystko, co musisz wiedzieć, by zapisywać dowolne obiekty lokalnie, na urządzeniu użytkownika, i korzystać z tych danych w aplikacji. 9 Jak działało składowanie danych w przeglądarce (1995 – 2010) 430 Jak działa mechanizm Web Storage w HTML5 433 Przypominajki... 434 Czy przypadkiem localStorage i tablice nie są bliźniakami? 440 Tworzymy interfejs 445 Teraz dodamy trochę JavaScriptu 446 Kończymy pracę nad interfejsem użytkownika 447 Musimy się zatrzymać na mały przegląd 450 Zrób to sam: konserwacja aplikacji 451 Mamy odpowiednią technologię... 455 Przerabiamy aplikację, by korzystała z tablicy 456 Modyfikujemy funkcję createSticky, by używała tablicy 457 Usuwanie notatek 462 Funkcja deleteSticky 465 Jak wskazać notatkę do usunięcia 466 Jak z obiektu zdarzenia wyciągnąć usuwaną notatkę 467 Notatkę usuwamy także ze struktury DOM 468 Ulepszamy interfejs użytkownika — dodajemy możliwość wyboru koloru 469 JSON.stringify nie tylko do tablic 470 Używamy nowego obiektu stickyObj 471 Nie próbujcie robić tego w domu! (Rozsadzamy 5-megabajtową składnicę danych) 474 Poznałeś już localStorage. Jak i kiedy go zastosować? 478 Celne spostrzeżenia 480 Rozwiązania ćwiczeń 481 Jak mam niby zapanować nad moim napiętym terminarzem, skoro nie mogę usuwać tych zadań, które już załatwiłam?! Czy moglibyście, z łaski swojej, dodać funkcję usuwania?

19 Spis treści Zaprzęgamy JavaScript do pracy Wątki robocze Powolny skrypt — czy na pewno chcesz go uruchamiać? Jeśli spędziłeś już wystarczająco dużo czasu z JavaScriptem i przeglądałeś wiele stron, z pewnością trafiłeś na „powolne skrypty”. Jak to możliwe, że skrypt może się wykonywać za wolno, skoro w naszych komputerach siedzą potężne, wielordzeniowe procesory? Głównym powodem jest to, że JavaScript potrafi wykonywać tylko jedną operację w tym samym czasie. Jednak dzięki HTML5 i technologii Web Workers, czyli wątkom roboczym, wszystko się zmienia. Masz już możliwość uruchomienia wielu własnych wątków roboczych, które mogą wykonać więcej zadań. Bez względu na to, czy starasz się stworzyć aplikację, która jest bardziej responsywna, czy tylko wycisnąć z procesora maksimum możliwości, wątki robocze są do Twoich usług. Załóż swój magiczny kapelusz mistrza JavaScriptu i do dzieła! 10 Te okropne powolne skrypty 488 Jak JavaScript spędza czas 488 Kiedy jednowątkowość się NIE sprawdza 489 Nowy wątek przybywa z pomocą 490 Jak działają wątki robocze 492 Twój pierwszy wątek roboczy 497 Tworzymy kod zarządzający wątkami — manager.js 498 Odbieranie komunikatu z wątku 499 Teraz napiszemy kod wątku 500 Wirtualna eksploracja nieznanych lądów 508 Jak wyznaczyć zbiór Mandelbrota 510 Jak używać wielu wątków 511 Budujemy aplikację Eksplorator fraktali 517 Kod gotowy do użycia 518 Tworzenie wątków i zlecanie im zadań 522 Piszemy kod 523 Uruchamiamy wątki 524 Implementujemy wątek 525 Wracamy do kodu — jak przetworzyć wyniki otrzymane z wątku 528 Dopasowujemy płótno do okna przeglądarki 531 Upierdliwy szef programista 532 Laboratorium 534 Celne spostrzeżenia 538 Rozwiązania ćwiczeń 539 Wątek JavaScriptu Przetwarzanie danych z tablicy Aktualizacja struktury DOM Pobieranie danych formularza 2EVâXJD NROHMQHJR NOLNQLĐFLD 6SUDZG]HQLH SRSUDZQRĤFL wprowadzonych danych uff uff uff uff uff buch buch buch Uruchomienie funkcji init 2EVâXJD NOLNQLĐFLD 8Sâ\Qċâ F]DV WLPHUD 2EVâXJD SU]HV\âDQLD GDQ\FK

20 Spis treści Dodatek Ścinki Udało się nam omówić naprawdę sporo zagadnień, a to już niestety ostatnie strony tej książki. Będziemy za Tobą tęsknić, ale zanim pozwolimy Ci odejść, musimy koniecznie wspomnieć jeszcze o kilku sprawach. Raczej nie uda nam się omówić w tym króciutkim rozdziale wszystkiego, co chciałbyś wiedzieć.Tak naprawdę to pierwotnie opisaliśmy wszystko, co musisz wiedzieć o HTML5 (poza materiałem z pozostałych rozdziałów), ale musieliśmy zmniejszyć stopień pisma do 0,00004.Wszystko byłoby świetnie, gdyby ktokolwiek potrafił to odczytać.W związku z tym wyrzuciliśmy większość materiału i zostawiliśmy w tym dodatku tylko dziesięć najciekawszych tematów. Skorowidz 561 1. Modernizr 544 2. Dźwięk 545 3. jQuery 546 4. Umarł XHTML, niech żyje XHTML 548 5. SVG 549 6. Aplikacje internetowe działające offline 550 7. Gniazda 551 8. Jeszcze raz o elemencie canvas 552 9. API selektorów 554 10. To nie wszystko! 555 Przewodnik HTML5 po nowych konstrukcjach 557 Przewodnik po elementach semantycznych w HTML5 558 Przewodnik po właściwościach CSS3 560 S

21jesteś tutaj  To niewiarygodne, że umieścili coś takiego w książce o programowaniu w HTML5! -DN NRU]\VWDÊ ] WHM NVLÈĝNL Wprowadzenie Za chwilę poznasz odpowiedź na palące pytanie: „Dlaczego autorzy UMIEŚCILI coś takiego w książce o HTML5?”

22 Jak korzystać z tej książki Wprowadzenie Dla kogo jest ta książka? Jeżeli możesz odpowiedzieć twierdząco na wszystkie poniższe pytania: Czy masz komputer z przeglądarką internetową i prostym edytorem tekstu? Czy chcesz opanować, zrozumieć, zapamiętać i tworzyć aplikacje internetowe za pomocą najlepszych technik i najnowszych standardów? Czy od drętwych i nudnych publikacji akademickich wolisz wciągające dyskusje przy posiłku? ...ta książka jest właśnie dla Ciebie. Kto raczej nie powinien sięgać po tę książkę? Jeżeli możesz odpowiedzieć twierdząco na którekolwiek z poniższych pytań: Czy jesteś zupełnym nowicjuszem w technologiach internetowych? Tworzysz już aplikacje internetowe i szukasz podręcznika na temat HTML5? Boisz się spróbować czegoś nowego? Wolałbyś raczej poddać się leczeniu kanałowemu, niż zdecydować się na połączenie pasków ze szkocką kratą? Czy naprawdę uważasz, że nie można traktować poważnie książki technicznej, w której są omawiane filmy edukacyjne z lat 50., a javascriptowe interfejsy API są spersonifikowane? 1 1 2 2 3 3 ...raczej nie powinieneś po nią sięgać. Jeżeli chcesz poznać podstawy tworzenia stron internetowych, koniecznie zajrzyj do książki „Head First HTML with CSS & XHTML. Edycja polska”. Po jej lekturze zapraszamy z powrotem. [Notatka z działu marketingu: ta książka jest dla wszystkich, którzy mają kartę kredytową. Ewentualnie może też być gotówka].

23 Wprowadzenie jesteś tutaj  Wiemy, co sobie myślisz „Że niby to ma być poważna książka o programowaniu w HTML5?!” „Po co te wszystkie obrazki?” „Czy w ten sposób naprawdę mogę się czegokolwiek nauczyć?” Wiemy też, co sobie myśli Twój mózg Twój mózg pragnie nowości. Zawsze szuka, przegląda i wyczekuje czegoś niezwykłego. Tak jest skonstruowany i dzięki temu masz szansę przeżyć. Co w takim razie Twój mózg robi z tymi wszystkimi rutynowymi, zwyczajnymi, normalnymi informacjami, które do niego docierają? Otóż robi wszystko, co tylko może, aby nie przeszkadzały mu w jego najważniejszej funkcji — rejestrowaniu wszystkiego tego, co ma prawdziwe znaczenie. Nie traci czasu i energii na zapamiętywanie nudnych informacji, ponieważ stosuje filtr odrzucający od razu wszystko, co jest „całkowicie nieistotne”. Ale w takim razie, skąd mózg wie, co jest istotne? Wyobraź sobie, że wędrujesz sobie po lesie i nagle wyskakuje na Ciebie tygrys. Co dzieje się w Twojej głowie i Twoim ciele? Neurony płoną. Emocje szaleją. Adrenalina aż kipi. I właśnie dzięki temu Twój mózg wie, że... To jest bardzo ważne! Nie zapomnij tego! Wyobraź sobie teraz, że siedzisz w domu albo w bibliotece. Jest bezpiecznie i miło, a w okolicy nie grasują żadne tygrysy. Uczysz się. Przygotowujesz się do egzaminu. A może starasz się zgłębić jakiś trudny techniczny problem, co — według szacunków Twojego szefa — nie powinno zająć więcej niż tydzień, góra dziesięć dni. Jest tylko jeden problem. Twój mózg stara Ci się oddać przysługę. Stara się sprawić, by bezdyskusyjnie nieistotne informacje nie zajęły cennych zasobów w Twojej głowie. Zasobów, które powinny zostać wykorzystane na zapamiętanie naprawdę ważnych rzeczy. Takich jak tygrysy. Albo ogień. Albo tego, że już nigdy nie powinieneś jeździć na snowboardzie w krótkich spodenkach. Niestety nie można po prostu powiedzieć mózgowi: „Hej, mózgu, jestem ci naprawdę wdzięczny, ale niezależnie od tego, jak nudna jest ta książka i jak mało emocji wyzwala, bardzo cię proszę, byś pozwolił mi zapamiętać wszystkie te informacje”. Świetnie... Do końca zostało tylko 640 głupich, drętwych i usypiających stron. Twój mózg myśli, że TO jest istotne. Twój mózg twierdzi, że TEGOz całą pewnością nie wartozapamiętywać.

24 Jak korzystać z tej książki Wprowadzenie Czytelnika tej książki traktujemy jak ucznia. Czy zatem chcesz się czegoś nauczyć? Jeśli tak, to w pierwszej kolejności powinieneś to zrozumieć, a później zadbać, by tego nie zapomnieć. Nie chodzi tu o wtłaczanie wiedzy do głowy. Najnowsze badania z zakresu przyswajania informacji, neurobiologii i psychologii nauczania jasno wskazują, że uczenie się wymaga czegoś więcej niż tylko czytania tekstu. My wiemy, co potrafi pobudzić Twój mózg do działania. Oto wybrane zasady obowiązujące w książkach z serii Rusz głową!: Zwizualizuj to sobie. Obrazy są znacznie łatwiejsze do zapamiętania niż sam tekst i sprawiają, że nauka staje się o wiele bardziej efektywna (można osiągnąć nawet 89-procentowy wzrost efektywności w przypominaniu i przekazywaniu informacji). Co więcej, rysunki sprawiają, że przekazywane informacje stają się bardziej zrozumiałe.Wystarczy umieścić słowa bezpośrednio na rysunku (lub w jego okolicy), a nie na następnej stronie, a dwukrotnie zwiększy się prawdopodobieństwo, że uczące się osoby będą w stanie rozwiązać problem, którego te słowa dotyczą. Stosuj dialogi i personifikuj. Według najnowszych badań studenci uzyskiwali w testach o 40% lepsze wyniki, jeśli treści były przekazywane w sposób bezpośredni, w pierwszej osobie i z elementami dialogu, a nie w sposób formalny. Od wykładów lepsze są historyjki. Używaj języka potocznego. Nie traktuj się zbyt poważnie. Kiedy jesteś bardziej zainteresowany tematem: podczas ożywionej dyskusji przy obiedzie czy na wykładzie? Zachęć czytelników do głębszych przemyśleń. Chodzi o to, że jeśli nie zmusisz neuronów do większej aktywności, wTwojej głowie nie zdarzy się nic ciekawego. Czytelnik musi być zmotywowany, zaangażowany, zaciekawiony i podekscytowany rozwiązywaniem problemów, wyciąganiem wniosków i zdobywaniem nowej wiedzy.A osiągnięcie tego wszystkiego jest możliwe dzięki wyzwaniom, ćwiczeniom, prowokującym pytaniom oraz innym aktywnościom angażującym obie półkuleTwojego mózgu i jak najwięcej zmysłów. Musisz zdobyć uwagę czytelnika i zachować ją na dłużej. Każdy z nas kiedyś znalazł się w sytuacji, gdy koniecznie chciał się czegoś nauczyć, ale nie mógł przebrnąć przez pierwszą stronę. Mózg zwraca uwagę na rzeczy niezwykłe, interesujące, dziwne, przykuwające wzrok, nieoczekiwane. Poznawanie nowych zagadnień technicznych wcale nie musi być nudne. I jeżeli takie nie jest,Twój mózg przyswoi je znacznie szybciej. Wyzwól emocje. Jak już wiemy, zdolność zapamiętywania informacji jest w dużej mierze zależna od ładunku emocjonalnego. Zapamiętujemy to, na czym nam zależy. Zapamiętujemy, gdy coś czujemy. Oczywiście nie chodzi nam tu o łzawe historie o chłopcu i jego ukochanym piesku. Mówimy o takich emocjach jak zaskoczenie, zaciekawienie, podekscytowanie, „a niech to!”, a także uczucie satysfakcji — „jestem wielki!” — którego doświadczamy po rozwiązaniu zagadki, zrozumieniu czegoś, co uważaliśmy za trudne, czy zdaniu sobie sprawy, że wiemy coś, o czym nie ma pojęcia Maciek z sąsiedniego działu.

25 Wprowadzenie jesteś tutaj  Metapoznanie — myślenie o myśleniu Kiedy naprawdę chcesz się czegoś nauczyć i chcesz to zrobić szybciej i bardziej dogłębnie, zwróć uwagę na to, jak zwracasz swoją uwagę. Pomyśl o tym, jak myślisz. Dowiaduj się, jak zdobywasz wiedzę. Większość z nas nie uczestniczyła nigdy w kursach metapoznania ani teorii nauczania. Od dzieciństwa oczekiwano od nas, że będziemy się uczyć, ale rzadko mówiono, jak mamy to robić. Zakładamy jednak, że skoro trzymasz w ręku tę książkę, naprawdę chcesz się nauczyć programować w HTML5. I zapewne nie chcesz na to poświęcić zbyt wiele czasu. A ponieważ w przyszłości będziesz najprawdopodobniej tworzył więcej aplikacji, koniecznie musisz zapamiętać, co przeczytałeś. Warunkiem zapamiętania jest jednak zrozumienie. Aby w jak największym stopniu skorzystać z tej książki, ale też z każdej innej, jak i innych form uczenia się, koniecznie musisz wziąć odpowiedzialność za swój mózg. Myśl o tym, czego się uczysz. Sztuczka polega na tym, aby przekonać mózg, że poznawany materiał jest naprawdę ważny. Kluczowy dla Twojego samopoczucia. Nie mniej ważny od tygrysa. W przeciwnym przypadku będziesz nieustannie prowadził wojnę z własnym mózgiem, który za wszelką cenę będzie się starał unikać utrwalania nowej wiedzy. Jak w takim razie zmusić mózg do traktowania HTML5 (i JavaScriptu) jak głodnego tygrysa? Są dwie metody: jedna powolna i męcząca, a druga szybka i skuteczna. Pierwsza polega na wielokrotnym powtarzaniu. Oczywiście wiesz, że jesteś w stanie zapamiętać nawet najnudniejsze zagadnienie, mozolnie je wkuwając. Po odpowiedniej liczbie prób Twój mózg stwierdzi: „Nie wydaje mi się, żeby to było dla niego szczególnie istotne, ale skoro tak w kółko to powtarza, to może jednak coś w tym jest”. Szybsza metoda polega na robieniu czegokolwiek, co zwiększa aktywność mózgu, a najlepiej czegoś, co wyzwala różne typy aktywności. Kluczowe są zasady, które opisaliśmy na poprzedniej stronie. Udowodniono, że wszystkie potrafią pomóc w nakłonieniu mózgu, by pracował na Twoją korzyść. Badania wykazują, że na przykład umieszczenie opisów na rysunkach (a nie w innych miejscach na stronie, na przykład w nagłówku lub wewnątrz akapitu) sprawia, że mózg stara się zrozumieć relację pomiędzy słowami a rysunkiem, co z kolei może rozgrzać nasze neurony do czerwoności. Większa aktywność neuronów to z kolei większa szansa, że mózg uzna informacje za warte uwagi i, ewentualnie, zapamiętania. Prezentowanie informacji w formie dialogu pomaga, ponieważ czytelnicy zwykle wykazują większe zainteresowanie w sytuacjach, gdy mają wrażenie, że uczestniczą w dyskusji, ponieważ czują, że oczekuje się od nich śledzenia jej przebiegu i brania w niej czynnego udziału. Zadziwiające jest to, że mózg niekoniecznie zwraca uwagę na to, że rozmowa jest prowadzona między Tobą a książką! Z kolei jeśli informacje są przekazywane w sposób formalny i suchy, mózg traktuje je tak samo jak uczestniczenie w wykładzie na sali pełnej sennych słuchaczy. Nie ma potrzeby wykazywania jakiejkolwiek aktywności. Ale rysunki i dialogi to tylko początek. Zastanawiam się, jak zmusić mózg do zapamiętania tych informacji...

26 Jak korzystać z tej książki Wprowadzenie Oto, co MY zrobiliśmy Wprowadziliśmy mnóstwo rysunków, ponieważ Twój mózg zwraca większą uwagę na obrazy niż na tekst. Z punktu widzenia mózgu faktycznie jeden obraz jest wart więcej niż tysiąc słów. Wszędzie tam, gdzie tekstom towarzyszą rysunki, umieściliśmy tekst na rysunkach, ponieważ mózg działa efektywniej, gdy tekst jest umieszczony wewnątrz tego, co opisuje, niż kiedy znajduje się w innym miejscu i stanowi część większego fragmentu. Stosowaliśmy powtórzenia, wielokrotnie podając tę samą informację na różne sposoby i przy wykorzystaniu różnych środków przekazu oraz odwołując się do różnych zmysłów. Wszystko po to, by zwiększyć szansę, że informacja zostanie zakodowana w większej liczbie obszarów mózgu. Korzystaliśmy z pomysłów i rysunków w nieoczekiwany sposób, ponieważ Twój mózg oczekuje i pragnie nowości. Poza tym staraliśmy się zawrzeć w nich chociaż odrobinę emocji, gdyż mózg jest skonstruowany w taki sposób, że zwraca uwagę na biochemię związaną z emocjami. Prawdopodobieństwo zapamiętania czegoś jest większe, jeśli „to coś” sprawia, że cokolwiek poczujemy, nawet jeśli to uczucie nie jest niczym więcej niż lekkim rozbawieniem, zaskoczeniem lub zainteresowaniem. Używaliśmy bezpośrednich zwrotów i przekazywaliśmy treści w formie dialogu, ponieważ mózg zwraca większą uwagę, jeśli myśli, że prowadzisz rozmowę, niż gdy jesteś jedynie biernym słuchaczem prezentacji. Mózg działa w ten sposób, nawet gdy czytasz rozmowę. Zamieściliśmy w książce mnóstwo ćwiczeń, ponieważ mózg uczy się i zapamiętuje zdecydowanie lepiej to, co robimy, niż to, o czym czytamy. Poza tym podane ćwiczenia stanowią wyzwania, choć nie są przesadnie trudne, gdyż właśnie takie preferuje większość osób. Zastosowaliśmy wiele stylów nauczania, ponieważ tak jak Ty możesz preferować instrukcje opisujące sposób postępowania krok po kroku, tak ktoś inny woli ogólną analizę danego zagadnienia, a ktoś jeszcze inny przejrzenie przykładowego fragmentu kodu. Jednak niezależnie od ulubionego sposobu nauki każdy skorzysta na tym, że te same informacje będą przedstawiane kilkakrotnie w różny sposób. Podaliśmy informacje przeznaczone dla obu półkul Twojego mózgu, ponieważ im bardziej mózg będzie zaangażowany, tym większe jest prawdopodobieństwo nauczenia się i zapamiętania podanych informacji i tym dłużej możesz koncentrować się na nauce. Ponieważ angażowanie tylko jednej półkuli często oznacza, że druga może odpoczywać, będziesz mógł się uczyć bardziej produktywnie przez dłuższy czas. Dołączyliśmy też historyjki i ćwiczenia prezentujące więcej niż jeden punkt widzenia, ponieważ mózg uczy się dokładniej, gdy jest zmuszony do przetwarzania i podawania własnej opinii. Postawiliśmy przed Tobą wyzwania — zarówno poprzez włączenie ćwiczeń, jak i stawiając pytania, na które nie zawsze można odpowiedzieć w prosty sposób; a to dlatego, że mózg uczy się i pamięta, gdy musi nad czymś popracować (podobnie jak nie możemy zdobyć dobrej formy fizycznej, obserwując ćwiczenia w telewizji). Jednak dołożyliśmy wszelkich starań, aby zapewnić, że gdy pracujesz, robisz dokładnie to, czego trzeba, aby ani jeden dendryt nie musiał przetwarzać trudnego przykładu bądź analizować tekstu zbyt lapidarnego lub napisanego trudnym żargonem. Personifikowaliśmy tekst. W historyjkach, przykładach, rysunkach i wszelkich innych możliwych miejscach tekstu staraliśmy się personifikować tekst, gdyż jesteś osobą, a Twój mózg zwraca większą uwagę na osoby niż na rzeczy. CELNE SPOSTRZEŻENIA body html h1 h2p p img a em a p BĄDŹ przeglądarką

27 Wprowadzenie jesteś tutaj  1 5 6 7 8 9 2 3 4 Oto, co TY możesz zrobić, aby zmusić swój mózg do posłuszeństwa A zatem zrobiliśmy, co w naszej mocy. Reszta zależy od Ciebie. Możesz zacząć od poniższych porad. Posłuchaj swojego mózgu i określ, które z nich sprawdzają się w Twoim przypadku, a które nie przynoszą pozytywnych rezultatów. Spróbuj czegoś nowego. Zwolnij. Im więcej rozumiesz, tym mniej musisz zapamiętać. Nie ograniczaj się jedynie do czytania. Przerwij na chwilę lekturę i pomyśl. Kiedy znajdziesz w tekście pytanie, nie zaglądaj od razu na stronę odpowiedzi. Wyobraź sobie, że ktoś faktycznie zadaje Ci pytanie. Im bardziej zmusisz swój mózg do myślenia, tym większa będzie szansa, że się nauczysz i zapamiętasz dane zagadnienie. Wykonuj ćwiczenia. Rób notatki. Umieszczaliśmy je w tekście, jednak jeśli zrobilibyśmy je za Ciebie, to niczym nie różniłoby się to od sytuacji, w której ktoś za Ciebie wykonywałby ćwiczenia fizyczne. I nie ograniczaj się jedynie do czytania ćwiczeń. Używaj ołówka. Można znaleźć wiele dowodów na to, że fizyczna aktywność podczas nauki może poprawić jej wyniki. Czytaj fragmenty oznaczone jako „Nie istnieją głupie pytania”. Nie należy ich traktować jak fragmenty opcjonalne — stanowią część podstawowej zawartości książki! Nie pomijaj ich. Niech lektura tej książki będzie ostatnią rzeczą, jaką robisz przed pójściem spać. A przynajmniej ostatnią rzeczą stanowiącą wyzwanie intelektualne. Pewne elementy procesu uczenia się (a w szczególności przenoszenie informacji do pamięci długotrwałej) mają miejsce po odłożeniu książki. Twój mózg potrzebuje trochę czasu dla siebie i musi dodatkowo przetworzyć dostarczone informacje. Jeśli w czasie niezbędnym do tego dodatkowego „przetwarzania” zmusisz go do innej działalności, część z przyswojonych informacji może zostać utracona. Pij wodę. Dużo wody. Twój mózg pracuje najlepiej, gdy dostarczasz mu dużo płynów. Odwodnienie (które może następować, nawet zanim poczujesz pragnienie) obniża zdolność percepcji. Mów o zdobywanych informacjach. Na głos. Mówienie aktywuje odmienne fragmenty mózgu. Jeśli próbujesz coś zrozumieć lub zwiększyć szanse zapamiętania informacji na dłużej, powtarzaj je na głos. Jeszcze lepiej, gdy będziesz się starał je komuś wytłumaczyć. W ten sposób nie tylko będziesz się uczył szybciej, ale też przy odrobinie szczęścia odkryjesz to, czego nie dostrzegłeś, czytając treść książki. Słuchaj swojego mózgu. Uważaj, kiedy Twój mózg staje się przeciążony. Jeśli zauważysz, że zaczynasz czytać pobieżnie i zapominać to, o czym przeczytałeś przed chwilą, najwyższy czas na przerwę. Po przekroczeniu pewnego punktu nie będziesz się uczył szybciej, „wciskając” do głowy więcej informacji. Co gorsza, może to zaszkodzić całemu procesowi przyswajania wiedzy. Poczuj coś. Twój mózg musi wiedzieć, że to, czego się uczysz, ma znaczenie. Z zaangażowaniem śledź zamieszczone w tekście historyjki. Nadawaj własne tytuły zdjęciom. Zalewanie się łzami ze śmiechu po przeczytaniu głupiego dowcipu i tak jest lepsze od braku jakiejkolwiek reakcji. Stwórz coś. Wykorzystaj w codziennej pracy to, czego się nauczyłeś. Niech nowa wiedza ułatwia Ci podejmowanie decyzji projektowych. Rób więcej, niż od Ciebie oczekujemy w ćwiczeniach z tej książki. Wszystko, czego potrzebujesz, to ołówek i problem do rozwiązania... problem, który może przynieść korzyści dzięki wykorzystaniu narzędzi i technik potrzebnych Ci w codziennej pracy. Wytnij te porady i przyklej na lodówce.

28 Jak korzystać z tej książki Wprowadzenie Kilka rzeczy, o których musisz wiedzieć To książka do nauki, a nie encyklopedia. Celowo usunęliśmy wszystko, co mogłoby Ci przeszkadzać w nauce, niezależnie od tego, nad czym pracujesz w danym miejscu książki. Podczas pierwszej lektury książki należy zacząć od jej początku, gdyż kolejne rozdziały bazują na tym, co wiedziałeś i czego się dowiedziałeś wcześniej. Zakładamy, że znasz języki HTML i CSS. Jeśli nie znasz języka znaczników HTML (i wszystkiego, co się wiąże z dokumentami HTML, czyli elementów, atrybutów, właściwości oraz pojęcia struktury i prezentacji), najpierw sięgnij po książkę Head First HTML with CSS & XHTML. Edycja polska. A jeżeli te tematy nie są Ci obce, śmiało możesz rozpoczynać lekturę tej książki. Oczywiście pewne doświadczenie w programowaniu w JavaScripcie zawsze się przyda, ale nie oczekujemy, że znasz ten język perfekcyjnie. Jeśli masz za sobą doświadczenia z programowaniem i tworzeniem skryptów (niekoniecznie w JavaScripcie), z pewnością Ci to pomoże. Nie oczekujemy jednak, że znasz JavaScript. Tak naprawdę traktujemy tę książkę jako kontynuację Head First HTML with CSS & XHTML. Edycja polska, w której nie mówiliśmy o skryptach. Zachęcamy Cię do korzystania z więcej niż jednej przeglądarki internetowej. Proponujemy, abyś testował tworzone strony i aplikacje internetowe w kilku przeglądarkach. Dzięki temu masz szansę dostrzec różnice występujące między nimi oraz zyskujesz doświadczenie w tworzeniu stron, które wyglądają i działają we wszystkich przeglądarkach jednakowo. Najbardziej polecamy Google Chrome i Apple Safari, ponieważ te dwie przeglądarki najlepiej sobie radzą z nowymi standardami. Jednocześnie jednak zachęcamy do sprawdzenia innych najczęściej używanych przeglądarek, takich jak Firefox, Opera i Internet Explorer, oraz przeglądarek na urządzeniach mobilnych opartych na platformach iOS i Android. Ćwiczenia SĄ obowiązkowe. Ćwiczenia oraz wszelkie dodatkowe polecenia nie są jedynie dodatkami — stanowią integralną część podstawowej treści książki. Niektóre z nich zostały umieszczone po to, by pomóc w zapamiętaniu informacji, inne, by pomóc w zrozumieniu opisywanego materiału, a jeszcze inne — by pomóc Ci w praktycznym zastosowaniu zdobytej wiedzy. Niczego nie pomijaj. Powtórzenia są celowe i ważne. Jedną z cech, która wyróżnia serię książek Rusz głową!, jest to, iż naprawdę bardzo, bardzo, bardzo zależy nam na tym, abyś wszystko zrozumiał i przyswoił. Chcielibyśmy także, abyś zakończył lekturę tej książki, pamiętając zawarte w niej informacje. Autorzy większości książek informacyjnych i leksykonów nie stawiają sobie za cel przyswojenia i zapamiętania przez Ciebie prezentowanej treści; w tej książce jest inaczej, stąd wiele pojęć będzie się pojawiało kilka razy. Ćwiczenia „Wysil szare komórki” nie mają odpowiedzi. Na część postawionych w tych ćwiczeniach pytań nie ma dobrej odpowiedzi, na część sam sobie musisz odpowiedzieć i sprawdzić, czy i w jakich sytuacjach ta odpowiedź jest prawidłowa. W niektórych ćwiczeniach znajdziesz wskazówki, które pomogą Ci ukierunkować poszukiwania odpowiedzi.

29 Wprowadzenie jesteś tutaj  Wymagania Aby tworzyć kod HTML5 i JavaScript, potrzebujesz prostego edytora tekstu, przeglądarki i, czasami, serwera WWW (który możesz zainstalować na swoim komputerze). Dla systemu Windows polecamy takie edytory tekstu jak PSPad, TextPad czy EditPlus (jeżeli koniecznie chcesz, możesz używać systemowego notatnika). Dla systemu Mac OS proponujemy TextWrangler, textMate lub TextEdit. Jeżeli pracujesz w Linuksie, masz do wyboru mnóstwo edytorów i wierzymy, że nie musimy Ci o nich opowiadać. Mamy nadzieję, że umiesz się posługiwać przeglądarką i masz zainstalowane co najmniej dwie (patrz poprzednia strona). Jeżeli nie, zrób to teraz. Poza tym warto, byś poświęcił chwilę na zapoznanie się z narzędziami dla programistów. Każda z poważniejszych przeglądarek ma wbudowane narzędzia, za pomocą których możesz włączyć konsolę JavaScriptu (w której możesz zobaczyć błędy oraz komunikaty wyświetlane za pomocą console.log, co jest wygodną alternatywą dla funkcji alert), podejrzeć lokalną składnicę danych, strukturę DOM, style CSS zastosowane do elementu i wiele, wiele innych. Niektóre przeglądarki mają nawet system wtyczek umożliwiający rozbudowę o dodatkowe narzędzia. Tak właściwie narzędzia dla programistów nie są Ci niezbędne podczas pracy z tą książką, ale z całą pewnością mogą pomóc w zrozumieniu niektórych zagadnień. Niektóre mechanizmy HTML5 i interfejsy API wymagają umieszczenia plików na serwerze WWW, a nie ładowania ich bezpośrednio z systemu plików (chodzi o to, by adres URL zaczynał się od http://, a nie file://). Wyraźnie oznaczyliśmy te przykłady, które tego wymagają. Proponujemy jednak, byś zainstalował serwer WWW już teraz. W systemach Mac OS i Linux serwer Apache jest domyślnie zainstalowany, więc wystarczy, byś się dowiedział, jak z niego korzystać i gdzie umieszczać pliki. W systemie Windows musisz zainstalować serwer Apache lub IIS. Jeżeli wybierzesz pierwszy z nich, masz do dyspozycji bardzo dużo gotowych pakietów, takich jak WAMP czy XAMPP, które są bardzo proste w instalacji i konfiguracji. To by było na tyle! Miłej zabawy!

30 Wprowadzenie Poznaj nasz zespół Zespół korektorów technicznych Paul Barry David Powers Rebeca Dunn-Krahn Trevor FarlowLou Barr Bert Bates Bert nie jest zwykłym korektorem, to twórca całej serii! Czapki z głów... Szef korektorów technicznych Trevor wyrobił 110% normy. Biegał nawet w środku nocy po mieście, żeby przetestować kod geolokalizacji.Staraliśmy się jej wytłumaczyć, że potrzebujemy jej pomocy tylko przy grafice, ale nie mogła się powstrzymać... To nie tylko korektor techniczny. Paul jest doświadczonym autorem serii Head First i ma na swoim koncie książki Head First Python i Head First Programming! Rebeca pełniła funkcję drugiej pary oczu. Ocaliła nam skórę, wychwytującbłędy, których nikt inny nie dostrzegł(włączając nas!). Naszym korektorom: Jesteśmy niezmiernie wdzięczni całemu zespołowi korektorów. Udowodnili nam, jak bardzo potrzebowaliśmy ich doświadczenia i uwagi. David Powers, Rebeca Dunn-Krahn, Trevor Farlow, Paul Barry, Louise Barr i Bert Bates nie pominęli żadnego, nawet najmniejszego fragmentu kodu, dzięki czemu ta książka jest znacznie lepsza. Jesteście wielcy!

31 Wprowadzenie jesteś tutaj  Podziękowania Jeszcze o korekcie technicznej: Zauważamy, że normą w naszych książkach zaczynają być podziękowania dla Davida Powersa — niezastąpionego korektora i autora wielu książek, między innymi PHP Solutions: Dynamic Web Development Made Easy. Jego uwagi zawsze wiele wnoszą, więc i w przypadku tej książki śpimy spokojniej, wiedząc, że David ją przejrzał. Jeszcze raz dziękujemy, Davidzie! O wydawnictwie O’Reilly: Courtney Nash miała trudne zadanie — nie dość, że musiała zarządzać pracą nad tą książką, to jeszcze musiała zarządzać nami. Courtney nie tylko wyprostowała za nas wszystkie ścieżki, ale stosowała też — niezbędną w tej sytuacji — delikatną presję, dzięki czemu książka ujrzała światło dzienne. Przede wszystkim jednak Courtney dała nam wiele cennych wskazówek dotyczących książki i jej zawartości, co się wiązało z kilkoma istotnymi zmianami. Dzięki Courtney teraz ta książka jest znacznie lepsza. Bardzo Ci dziękujemy! Uwaga do redakcji: czy możemy go sobie zarezerwować na przyszłe trzy książki? Oczywiście na wyłączność! Znowu Lou Barr! (oraz Toby) Courtney Nash Lou Barr również stanowiła integralną część zespołu pracującego nad tą książką. Wspierała nas na wiele sposobów — od korekty, przez projekty graficzne i produkcję, po „kowboja” Photoshopa. Dziękujemy Ci, Lou. Bez Ciebie nie dalibyśmy sobie z tym rady! Chcemy podziękować też kilku innym osobom, które pomogły nam w tym przedsięwzięciu: Chcemy z tego miejsca podziękować pozostałym członkom ekipy wydawnictwa O’Reilly za ich wsparcie okazane na tysiąc różnych sposobów. A oto oni: Mike Hendrickson, Mike Loukides, Laurel Ruma, Karen Shaner, Sanders Kleinfeld, Kristen Borg, Karen Montgomery, Rachel Monaghan, Julie Hawks i Nancy Reinhardt.