Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00423 006215 14677389 na godz. na dobę w sumie
HTML5. Rusz głową! - książka
HTML5. Rusz głową! - książka
Autor: , Liczba stron: 568
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-4339-4 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> html i xhtml - programowanie
Porównaj ceny (książka, ebook, audiobook).

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:

Najnowsze standardy, najlepsze praktyki - Twoja przepustka do świata aplikacji internetowych!

Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

• Kup książkę • Poleć książkę • Oceń książkę • Księgarnia internetowa • Lubię to! » Nasza społeczność Spis treści (skrócony) Wprowadzenie 1. Poznajemy HTML5. Witaj w Webowicach 2. Wstęp do JavaScriptu i struktury DOM. Odrobina kodu 3. Zdarzenia, ich obsługa i takie tam. Odrobina interakcji 4. Funkcje i obiekty w JavaScripcie. Z JavaScriptem na poważnie 5. Twoja strona wie, gdzie jesteś. Geolokalizacja 6. Rozmawiamy z siecią. Aplikacje otwarte na innych 7. Odkryj w sobie artystę. Element canvas 8. Telewizja po liftingu. Element video... gościnnie występuje canvas 9. Lokalne składowanie danych. Mechanizm Web Storage 10. Zaprzęgamy JavaScript do pracy. Wątki robocze Dodatek. Dziesięć najciekawszych tematów (o których nie wspomnieliśmy) Skorowidz Spis treści 21 33 65 113 139 189 235 301 367 429 487 543 561 Spis treści (z prawdziwego zdarzenia) W 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? 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 22 23 23 25 30 31 9 Spis treści 1 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). html head title script h1 body h2 em p JUŻ DZIŚ przesiądź się 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ń 34 36 39 43 44 46 48 49 54 57 58 63 64 Element canvas Wideo Gniazda Buforowanie offline Lokalne składowanie danych Dźwięk Znaczniki 10 Wątki robocze Przeciągnij i upuść Geolokalizacja Formularze Spis treści 2 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! 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ń 66 67 68 70 73 76 79 80 83 84 85 86 88 94 96 97 101 105 106 11 3 “ 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 form z kodem. Być może brzmi to trochę groźnie, ale, uwierz, otwiera niesamowite możliwości. Lepiej zapnij pasy, bo przed Tobą ekstremalna jazda — w mgnieniu oka od zera do interaktywnej aplikacji. 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ń “ 114 115 116 117 118 118 119 120 122 125 127 128 129 129 130 133 134 136 137 Spis treści 12 Spis treści 4 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... 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 140 141 142 147 149 150 154 157 158 159 162 168 169 171 173 175 179 181 182 183 183 184 186 13 Spis treści 5 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. 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 map 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ń 190 191 192 196 200 203 205 207 210 212 215 216 217 218 220 222 223 226 228 229 231 232 14 Spis treści 6 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. Uważaj na przerwane połączenia! 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 236 238 241 242 248 251 252 253 258 259 261 264 266 269 274 275 278 286 287 289 294 295 297 299 15 Spis treści 7 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. Nowy projekt HTML5 już się nie może doczekać, aż się nim zajmiesz! TweetowaKoszulka.com, ŚCIŚLE TAJNE 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ń 302 303 306 308 310 315 317 320 321 322 324 327 329 331 334 336 337 338 339 343 348 350 351 358 360 16 Spis treści 8 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 video na stronę i już! W momencie masz dostęp do wideo, a co ważne, działa to na większości urządzeń. Jednak element video to znacznie więcej niż tylko zwykły znacznik — to javascriptowe API, które umożliwia sterowanie odtwarzaniem, tworzenie własnych interfejsów odtwarzacza i integrowanie materiału wideo z pozostałymi elementami strony w całkowicie nowy sposób. A skoro mowa o integracji... pamiętasz, co mówiliśmy o powiązaniu elementów video i canvas? Zobaczysz na własne oczy, jak za pomocą tych dwóch elementów przetwarzać wideo w czasie rzeczywistym. W tym rozdziale pracę rozpoczniemy od umieszczenia na stronie i uruchomienia elementu video, a później weźmiemy na warsztat javascriptowe API i podkręcimy tempo. Zdziwisz się, ile można zrobić za pomocą kilku znaczników, odrobiny kodu JavaScript oraz elementów video i canvas. 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ń 368 369 371 372 374 376 381 382 385 387 393 394 396 402 405 407 410 411 413 417 424 426 427 17 Dostrój odbiornik na TV Webowice Spis treści 9 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. 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 Używamy nowego obiektu stickyObj Nie próbujcie robić tego w domu! (Rozsadzamy 5-megabajtową składnicę danych) Poznałeś już localStorage. Jak i kiedy go zastosować? Celne spostrzeżenia Rozwiązania ćwiczeń 430 433 434 440 445 446 447 450 451 455 456 457 462 465 466 467 468 469 470 471 474 478 480 481 skoro nie mogę usuwać tych zadań, które już załatwiłam?! Jak mam niby zapanować nad moim napiętym terminarzem, Czy moglibyście, z łaski swojej, dodać funkcję usuwania? 18 10 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! Wątek JavaScriptu Uruchomienie funkcji init Obsługa kliknięcia Upłynął czas timera Obsługa przesyłania danych buch u f f u f f u f f Przetwarzanie danych z tablicy u f f buch buch u f f Obsługa kolejnego kliknięcia Aktualizacja struktury DOM Pobieranie danych formularza Sprawdzenie poprawności wprowadzonych danych 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ń 488 488 489 490 492 497 498 499 500 508 510 511 517 518 522 523 524 525 528 531 532 534 538 539 19 Spis treści 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. 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 544 545 546 548 549 550 551 552 554 555 557 558 560 561 S Skorowidz 20 7. Odkryj w sobie artystę Element canvas Jasne, znaczniki są w porządku i w ogóle, czystymi pikselami. ale nie ma to, jak zakasać rękawy i malować świeżutkimi, 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. W porządku, „niszczyć” to może za mocno powiedziane. Słyszeliśmy, że tak naprawdę elementy canvas i video łączy coś więcej niż tylko obecność na stronach internetowych... O szczegółach porozmawiamy później. to jest nowy rozdział  301 Nowy projekt: TweetowaKoszulka ę i T u e i n a j d z z t w e T w ó j s t e Nasz nowy projekt: TweetowaKoszulka Naszym mottem jest: „Jeżeli warto o tym tweetować, warto też wydrukować na koszulce”. Połowa sukcesu w próbach stania się dziennikarzem zależy od słów umieszczanych w druku. Dlaczego by nie nosić ich na własnej (lub cudzej) piersi? Przyjmijmy takie założenie i trzymajmy się go. Teraz pozostało nam rozwiązanie tylko jednego problemu — potrzebujemy wygodnej aplikacji internetowej, która umożliwi klientom zaprojektowanie własnej koszulki z jednym ze swoich tweetów. Pewnie sobie myślisz: „Hm... to nie jest taki zły pomysł”. W takim razie dołącz do nas, pod koniec rozdziału będziemy mieli gotową aplikację. A... jeszcze jedno — jeżeli postanowisz uruchomić taki serwis i robić na nim grubą kasę, nie będziemy zgłaszać żadnych roszczeń, ale mamy jedną prośbę — prześlij nam koszulkę! Nasze hasło to: „Jeżeli warto o tym tweetować, warto też wydrukować na koszulce”. Potrzebujemy aplikacji internetowej, która umożliwi użytkownikom zaprojektowanie własnej wyjątkowej koszulki z ulubionym tweetem. Aplikacja musi działać na urządzeniach przenośnych. Użytkownicy mogą tweetować, będąc w ruchu, więc czemu by nie mogli zamawiać w ten sam sposób naszych koszulek? 302 Rozdział 7. Założycielka serwisu TweetowaKoszulka.com Odkryj w sobie artystę Przyglądamy się „makiecie” Po wyczerpujących i wieloetapowych pracach projektowych oraz zakrojonych na szeroką skalę badaniach fokusowych otrzymaliśmy makietę (czyli wstępny projekt graficzny), którą zamieściliśmy poniżej: No dobra, przecież to tylko szkic, który zrobiliśmy na serwetce w Star Café... To jest nasz projekt koszulki. Tu jest wyświetlony tweet, który wybrał użytkownik. Pozwolimy użytkownikowi wybrać kolor tła. W tym przypadku jest białe. Aplikacja internetowa powinna w miarę możliwości wyglądać jak ta strona! Innymi słowy, chcemy wyświetlić projekt koszulki i umożliwić użytkownikowi interaktywną zmianę tego projektu za pomocą kontrolek. Użytkownik może dodatkowo umieścić w tle kółka lub kwadraty (bądź pozostawić puste tło). Każda koszulka powinna być inna, więc te kształty muszą być umieszczane w losowych miejscach! Zwróć uwagę, że style tekstu też się różnią. TweetowaKoszulka.com, ŚCIŚLE TAJNE A tak powinien wyglądać interfejs użytkownika. Użytkownik może wybrać kolor tła, kółka bądź kwadraty, kolor tekstu i tweet. jesteś tutaj  303 Przegląd wymagań WYSIL Szare komórkI Jeszcze raz przyjrzyj się wymaganiom przedstawionym na poprzedniej stronie. Jak myślisz, uda się to zrealizować za pomocą HTML5? Pamiętaj, że jednym z wymogów jest to, by aplikacja działała na możliwie wielu różnych urządzeniach. Przejrzyj poniższe możliwości i zaznacz tę, która jest Twoim zdaniem najlepsza:  Najlepiej użyć Flasha, bo działa w większości przeglądarek.  Trzeba się przyjrzeć, czy w HTML5 są dostępne jakieś nowe technologie, które mogłyby się tu przydać (podpowiedź: być może mógłby to być element canvas).  Trzeba napisać osobną aplikację dla każdego urządzenia. Dzięki temu na pewno uda się w każdym przypadku osiągnąć zamierzony cel.  Obraz można wygenerować po stronie serwera i dostarczyć go do przeglądarki użytkownika. Nie istnieją głupie pytania P: Ale serio, czemu nie użyjemy Flasha albo osobnej aplikacji? O: Flash to świetna technologia i oczywiście moglibyśmy z niej skorzystać. Jednak w ostatnim czasie wszyscy zwracają się raczej w stronę HTML5, a poza tym (przynajmniej na razie) Flash nie działa prawidłowo na wszystkich urządzeniach, nawet tych bardziej popularnych. Osobna, specjalizowana aplikacja sprawdza się, kiedy oczekujesz pełnego dostosowania funkcjonalności do urządzenia. Weź jednak pod uwagę, że opracowanie specjalizowanych aplikacji dla wielu różnych urządzeń jest bardzo drogie. Decydując się na HTML5, nie będziemy mieli problemów z działaniem aplikacji ani na urządzeniach mobilnych, ani na komputerach stacjonarnych. Poza tym można w ten sposób tworzyć aplikacje, korzystając w zasadzie z jednej technologii. P: Podoba mi się pomysł z tworzeniem obrazu na serwerze. W ten sposób mógłbym napisać jeden kod, który działałby dla wielu urządzeń. Znam trochę PHP, więc bez problemu powinienem sobie z tym poradzić. O: To kolejna droga, którą moglibyśmy pójść. Ma jednak sporą wadę — gdyby się okazało, że zyskaliśmy miliony użytkowników, musielibyśmy się zmierzyć z problemem skalowalności i dostosować serwery do takiego obciążenia. W proponowanym przez nas rozwiązaniu każdy użytkownik tworzy podgląd nadruku na koszulce na własnym komputerze, więc nie obciąża serwera. Poza tym, jeżeli aplikacja znajdzie się w całości po stronie klienta, czyli przeglądarki, będzie w większym stopniu interaktywna, a jej obsługa wygodniejsza. Jak to? Dobrze, że spytałeś... 304 Rozdział 7. Odkryj w sobie artystę Krótka wizyta w zespole TweetowejKoszulki Znasz już wymagania i widziałeś szkic projektu, nadszedł więc czas na przemyślenia, by można było zacząć tworzyć aplikację. Przysłuchaj się rozmowie zespołu i zobacz, dokąd to zmierza... Przemek: Myślałem, że to będzie proste, aż zobaczyłem te kółka w tle. Łukasz: O co ci chodzi? Przecież to tylko obrazek... Iza: Wcale nie! Założycielka serwisu chce, żeby te kółka były rozmieszczone losowo, dzięki czemu kółka na mojej koszulce będą inne niż na twojej. Zresztą to samo dotyczy kwadratów. Łukasz: W porządku, przecież już kiedyś generowaliśmy obrazki na serwerze. Łukasz, Iza i Przemek Przemek: Tak, ale to nie było idealne rozwiązanie. Pamiętacie, ile musieliśmy płacić za ten serwer? Łukasz: Ech, faktycznie... Nic nie mówiłem. Przemek: To bez znaczenia, bo i tak chcemy, żeby podgląd był widoczny od razu, bez tych długich, denerwujących przestojów na pobieranie obrazka z serwera. Musimy założyć, że wszystko robimy po stronie klienta, o ile to możliwe... Iza: Chłopaki, myślę, że spokojnie damy radę. Czytałam ostatnio o wprowadzonym w HTML5 elemencie canvas. Łukasz: Element canvas? Pamiętaj, że ja jestem tylko od interfejsu użytkownika, więc mnie oświeć. Iza: Musiałeś słyszeć o elemencie canvas! Łukasz, przecież to jest nowy element wprowadzony w HTML5 tworzący płaszczyznę, po której można rysować, wstawiać na niej tekst i bitmapy. Łukasz: To mi wygląda na nową odsłonę elementu img . Nieraz umieszczaliśmy go na stronie, ustalaliśmy szerokość i wysokość, a przeglądarka robiła resztę. Iza: W sumie niezłe porównanie. W przypadku elementu canvas też ustalamy szerokość i wysokość, ale możemy po nim rysować z poziomu kodu JavaScript. Przemek: No dobra, a jak to się ma do pozostałych znaczników? Czy za pomocą JavaScriptu możemy powiedzieć elementowi canvas: „Umieść ten element h1 w tym miejscu”? Iza: Nie, po umieszczeniu elementu canvas na stronie opuszczamy świat znaczników. Z poziomu JavaScriptu możemy umieszczać punkty, linie, ścieżki, obrazki i tekst. To jest naprawdę niskopoziomowe API. Przemek: No cóż, jeżeli tylko pozwoli nam to wymalować tło tymi losowymi kółkami, jestem za. Dobra, my tu gadu-gadu, a robota czeka! jesteś tutaj  305 Umieszczamy element canvas na stronie Jak umieścić element canvas na stronie Łukasz miał rację, w pewnym sensie element canvas przypomina img . Dodaje się go tak: Element canvas jest zwykłym elementem HTML, który rozpoczyna się znacznikiem otwierającym canvas . Atrybut width określa szerokość elementu umieszczonego na stronie wyrażoną w pikselach. Analogicznie atrybut height określa wysokość elementu, w tym przypadku równą 200 pikseli. canvas id=”lookwhatIdrew” width=”600” height=”200” /canvas Dodaliśmy identyfikator (id), tak by można było wskazać ten konkretny element. Już za chwilę zobaczysz, jak z niego skorzystamy... Atrybut width jest ustawiony na 600 pikseli. A to jest znacznik zamykający. Przeglądarka przydziela miejsce na element canvas, biorąc pod uwagę podaną szerokość i wysokość. W tym przypadku szerokość jest równa 600, a wysokość 200 pikseli. To jest lewy górny wierzchołek elementu canvas. Będziemy korzystać z jego współrzędnych jako punktu odniesienia (już niedługo to zobaczysz). Naokoło elementu canvas jest trochę wolnego miejsca — to domyślne marginesy elementu body. 306 Rozdział 7. Szerokość elementu canvas (600 pikseli). Wysokość elementu canvas (w naszym przypadku równa 200 pikseli). Na stronie mogą się oczywiście znaleźć inne elementy HTML-a. Element canvas zachowuje się tak samo jak pozostałe elementy (np. img itp.). Jazda próbna z nowym elementem canvas Pora sprawdzić, jak to wygląda w przeglądarce. Utwórz nowy plik, wpisz do niego poniższy kod i załaduj do przeglądarki: !doctype html html lang=”pl” head title Zobacz, co narysowałem! /title meta charset=”utf-8” /head body Wpisz ten kod i zobacz, jak działa. canvas id=”lookwhatIdrew” width=”600” height=”200” /canvas /body /html No i co? Strona jest pusta! Ona zobaczyła takie coś... ...i Ty prawdopodobnie też! Tutaj narysowaliśmy dodatkowe linie tylko po to, by zilustrować element canvas umieszczony na stronie. Tak naprawdę ich nie ma (chyba że postanowisz je jednak narysować). Na następnej stronie znajdziesz ciąg dalszy... Odkryj w sobie artystę jesteś tutaj  307 Element canvas i style Jak zobaczyć element canvas Elementu canvas nie zobaczymy, dopóki czegoś na nim nie narysujemy. Jest on po prostu przestrzenią w oknie przeglądarki, na której można rysować. Już niedługo zajmiemy się rysowaniem, ale na razie chcemy się upewnić, że płótno naprawdę znajduje się na stronie. Jest na to pewien sposób. Jeżeli dla znacznika canvas zdefiniujemy styl wyświetlający ramki, element pojawi się na stronie. Dodajmy prostą definicję stylu odpowiadającą 1-pikselowej ramce. !doctype html html lang=”pl” head title Zobacz, co narysowałem! /title meta charset=”utf-8” style canvas { border: 1px solid black; } /style /head body canvas id=”lookwhatIdrew” width=”600” height=”200” /canvas /body /html Elementowi canvas przypisaliśmy styl definiujący 1-pikselową, czarną ramkę. Dzięki temu element stanie się widoczny. Dużo lepiej! Teraz widzimy, gdzie jest płótno. Wypadałoby zrobić z nim coś ciekawego... 308 Rozdział 7. Odkryj w sobie artystę Nie istnieją głupie pytania P: Czy na stronie mogę mieć tylko jeden element canvas? O: Nie, możesz mieć ich tyle, ile chcesz (a właściwie tyle, ile jest w stanie obsłużyć przeglądarka). Jeżeli nadasz każdemu z nich unikalny identyfikator, będziesz mógł na nich niezależnie rysować. Już za chwilę pokażemy, jak korzystać z identyfikatorów. P: Czy element canvas jest przezroczysty? O: Tak, element canvas jest przezroczysty. Możesz na nim rysować, wypełniając go w ten sposób kolorowymi pikselami. W dalszej części rozdziału dowiesz się, jak się to robi. P: Skoro jest przezroczysty, to mogę go umieścić nad innym elementem strony i w ten sposób niejako na nim rysować, prawda? O: Tak jest! To jest jedna z fajniejszych cech elementu canvas. Dzięki niemu możesz dodawać grafikę w dowolnym miejscu strony. P: Czy wysokość i szerokość elementu mogę ustalić za pomocą stylów, czy muszę to robić poprzez atrybuty width i height znacznika canvas ? O: Możesz, ale działa to trochę inaczej, niż mógłbyś się spodziewać. Element canvas ma domyślną szerokość równą 300, a wysokość 150 pikseli. Jeżeli nie ustalisz wymiarów za pomocą atrybutów width i height znacznika canvas , na stronę zostanie wstawiony element o domyślnych wymiarach. Jeżeli później określisz rozmiar z poziomu CSS na, powiedzmy, 600px na 200px, element canvas (300px na 150px) zostanie przeskalowany do nowego rozmiaru i to samo stanie się z całą jego zawartością. Dokładnie tak samo zachowuje się zwykły obrazek, gdy ustalimy mu nowe wartości szerokości i wysokości. Jeżeli powiększysz obraz, najprawdopodobniej dojdzie do pikselizacji. To samo dzieje się z płótnem. Jeżeli wcześniej miało 300 pikseli szerokości, a powiększymy je do 600, liczba pikseli pozostanie bez zmian, ale każdy piksel stanie się dwa razy szerszy, więc obraz będzie „chropowaty”. Jeśli jednak ustawisz nowe wymiary elementu canvas za pomocą atrybutów width i height, wszystko będzie rysowane normalnie. W związku z tym polecamy określanie wymiarów za pomocą atrybutów znacznika, a nie z poziomu CSS, chyba że chcesz przeskalować element canvas. WYSIL Szare komórkI Zauważyłeś pewnie, że element canvas nie ma żadnej zawartości. Jak myślisz, co by się stało po załadowaniu strony, gdybyś umieścił tu jakiś tekst? canvas ? /canvas jesteś tutaj  309 Rysowanie na płótnie Rysowanie na płótnie Do tej pory udało nam się umieścić na stronie pusty element canvas. Nie sądzisz, że najwyższy czas napisać trochę kodu JavaScript? Naszym celem będzie wyświetlenie na płótnie pięknego czarnego prostokąta. Najpierw zastanówmy się, gdzie go umieścić i jak duży powinien być. Co powiesz na współrzędne x = 10 i y = 10, a szerokość i wysokość równą 100 pikseli? Zajmijmy się tym. Przyjrzyj się, jak jest zbudowany kod, który to robi: Zacznijmy od standardowego dokumentu HTML5. !doctype html html lang=”pl” head title Zobacz, co narysowałem! /title meta charset=”utf-8” / style canvas { border: 1px solid black; } /style script window.onload = function() { var canvas = document.getElementById(”tshirtCanvas”); Na razie zachowamy styl nadający czarne obramowanie. Kod umieszczamy w funkcji onload, dzięki czemu rysowanie rozpocznie się po załadowaniu całej strony. Aby rysować na płótnie, musimy mieć referencję do niego. Korzystamy tu ze znanej metody getElementById, która pobiera ją ze struktury DOM. var context = canvas.getContext(”2d”); context.fillRect(10, 10, 100, 100); Hm... to ciekawe, wygląda na to, że do rysowania będzie nam potrzebny kontekst „2d” elementu canvas... Czarny prostokąt rysujemy na płótnie za pośrednictwem pobranego kontekstu. Te liczby oznaczają współrzędne x i y elementu canvas, w których zostanie umieszczony prostokąt. Podajemy też szerokość i wysokość (wyrażone w pikselach). }; /script /head body canvas width=”600” height=”200” id=”tshirtCanvas” /canvas /body /html Ciekawe jest też to, że metoda rysująca wypełniony prostokąt nie pobiera koloru... Już za chwilę to wyjaśnimy. A! I nie możemy zapomnieć o naszym elemencie canvas. Ustalamy jego szerokość na 600 pikseli, wysokość na 200 pikseli i identyfikator na „tshirtCanvas”. 310 Rozdział 7. Krótka jazda próbna elementu canvas... Wpisz kod z poprzedniej strony (lub pobierz go pod adresem ftp://ftp.helion.pl/przyklady/htm5rg.zip) i otwórz w przeglądarce. Zakładając, że korzystasz z nowoczesnej przeglądarki, zobaczysz coś takiego: Odkryj w sobie artystę To jest prostokąt o wymiarach 100×100 pikseli umieszczony we współrzędnych 10, 10. A to jest płótno o szerokości 600 i wysokości 200 pikseli z czarną, 1-pikselową ramką. Kod z bliska To był świetny test, ale musimy się nieco bardziej zagłębić w przedstawiony kod: 1 W dokumencie HTML za pomocą znacznika canvas zdefiniowaliśmy element canvas i nadaliśmy my identyfikator. Pierwsze, co trzeba zrobić, zanim coś się narysuje w tym elemencie, to pobranie go ze struktury DOM. Jak zwykle robimy to za pomocą metody getElementById: var canvas = document.getElementById(”tshirtCanvas”); jesteś tutaj  311 Sprawdzamy, jak działa kod 2 3 Referencję do elementu canvas przypisaliśmy do zmiennej canvas. Zanim coś narysujemy, musimy grzecznie poprosić ten element, by udostępnił nam tzw. kontekst. W tym przypadku chodzi o kontekst 2D (czyli dwuwymiarowy). Zwrócony kontekst przypisujemy do zmiennej context: var context = canvas.getContext(”2d”); Zanim zaczniemy rysować, musimy poprosić o kontekst. Teraz, kiedy mamy już kontekst, możemy go użyć do rysowania na płótnie. W tym przypadku stosujemy metodę fillRect, która umieszcza wypełniony prostokąt o wymiarach 100 na 100 pikseli we współrzędnych x = 10 i y = 10. Zwróć uwagę, że metodę fillRect wywołujemy na kontekście, a nie na płótnie. context.fillRect(10, 10, 100, 100); Najlepiej sam sprawdź, jak to działa. Powinieneś zobaczyć czarny kwadrat. Spróbuj zmienić wartości dla współrzędnych x i y, a także szerokość i wysokość. Zobacz, co się stanie. WYSIL Szare komórkI Co należałoby zrobić, żeby w przeglądarkach, które obsługują element canvas, wszystko działało jak należy, a w starszych przeglądarkach, które tego nie potrafią, wyświetlił się na przykład taki komunikat: „Hej, ty tam! Tak, do ciebie mówię! Zaktualizuj swoją przeglądarkę!”? 312 Rozdział 7. Nie istnieją głupie pytania P: Skąd płótno wiedziało, że chcemy narysować czarny prostokąt? O: Czarny jest po prostu domyślnym kolorem wypełnienia. Możesz oczywiście zmienić kolor — służy do tego właściwość fillStyle, którą niedługo omówimy. P: A co, gdybym chciał narysować prostokąt bez wypełnienia? O: W takim przypadku powinieneś zastosować metodę strokeRect, a nie fillRect. O metodzie strokeRect jeszcze wspomnimy. P: Co to jest ten kontekst „2d”? I dlaczego nie mogę rysować bezpośrednio na płótnie? O: Element canvas, czyli inaczej płótno, jest obszarem graficznym wyświetlanym na stronie internetowej. Kontekst jest obiektem powiązanym z elementem canvas, który dostarcza zbiór właściwości i metod używanych do rysowania na płótnie. Możesz nawet zachować bieżący stan płótna i przywrócić go później, co się czasami przydaje. W tym rozdziale poznasz jeszcze wiele właściwości i metod kontekstu. Płótno zostało tak zaprojektowane, by mogło korzystać z więcej niż jednego interfejsu (2d, 3d i innych, o których nawet jeszcze nie pomyśleliśmy). Dzięki zastosowaniu kontekstu możemy pracować z różnymi interfejsami na tym samym elemencie — płótnie. Nie można rysować bezpośrednio na płótnie, ponieważ trzeba określić używany interfejs, a tego dokonuje się właśnie poprzez wybór kontekstu. P: Czy to oznacza, że jest dostępny kontekst „3d”? O: Jeszcze nie. W wyścigu bierze udział kilka standardów, ale jak na razie żaden z nich nie objął prowadzenia. Sytuacja zmienia się dosyć dynamicznie, więc cały czas trzymaj rękę na pulsie. W wolnej chwili spójrz na WebGL i biblioteki, które z tego korzystają: SpiderGL, SceneJS i three.js. Odkryj w sobie artystę Kodowanie na serio Czy zastanawiasz się, jak z poziomu kodu sprawdzić, czy przeglądarka obsługuje element canvas? Oczywiście jest to możliwe. Przedstawimy Ci rozwiązanie tego problemu jak najszybciej, zwłaszcza że przed momentem założyliśmy, iż Twoja przeglądarka to potrafi. Pamiętaj, że w kodzie produkcyjnym zawsze powinieneś sprawdzać, czy działa wszystko, z czego zamierzasz skorzystać. Wystarczy, że sprawdzisz, czy w obiekcie canvas (pobranym za pomocą metody getElementById) znajduje się metoda getContext: Najpierw pobieramy referencję do elementu canvas umieszczonego na stronie. var canvas = document.getElementById(”tshirtCanvas”); if (canvas.getContext) { // płótno jest obsługiwane } else { // przykro nam, ale płótno nie jest obsługiwane } Później sprawdzamy, czy znajduje się w nim metoda getContext. Zwróć uwagę, że jej nie wywołujemy, a tylko sprawdzamy, czy posiada wartość. Jeżeli chcesz sprawdzić, czy przeglądarka obsługuje płótno, a w dokumencie nie masz umieszczonego elementu canvas, możesz go utworzyć w locie za pomocą jednej z technik, które już dobrze znasz, na przykład: var canvas = document.createElement(”canvas”); Koniecznie zajrzyj do dodatku, w którym przedstawiliśmy bibliotekę umożliwiającą sprawdzenie całej funkcjonalności HTML5 w spójny sposób. jesteś tutaj  313 Płótno a Internet Explorer 314 Kiedy próbuję sprawdzić ten kod w Internet Explorerze, w miejscu, gdzie powinno być płótno, widzę jedynie pustkę. Co jest grane? Element canvas jest obsługiwany w IE dopiero od wersji 9., więc powinieneś poinformować o tym swoich użytkowników. Jakie są inne możliwości? Jeżeli naprawdę zależy Ci na umożliwieniu korzystania z płótna we wcześniejszych wersjach IE (czyli przed 9.), powinieneś przyjrzeć się bliżej takim rozwiązaniom jak na przykład Explorer Canvas Project, które — dzięki wtyczkom — dostarczają taką funkcjonalność. W tej chwili jednak załóżmy, że chcemy tylko powiadomić użytkowników o tym, jak wiele tracą przez to, że nie mogą zobaczyć zawartości płótna. Zobaczmy, jak tego dokonać... Możesz też zasugerować, by zaktualizowali IE do najnowszej wersji! Rozdział 7. Jak wyjść z twarzą z opresji No cóż, jest więcej niż prawdopodobne, że gdzieś tam, w innym miejscu i czasie, znajdzie się użytkownik, który będzie chciał odwiedzić Twoją stronę, a jego przeglądarka nie będzie obsługiwała elementu canvas. Czy nie należałoby wyświetlić mu komunikatu sugerującego zaktualizowanie przeglądarki? Możesz to zrobić w ten sposób: To jest zwykły element canvas. canvas id=”awesomecontent” Hej, ty tam! Tak, do ciebie mówię! Zaktualizuj swoją przeglądarkę! /canvas Tu umieść komunikat, który ma się pojawić w przeglądarkach, które nie obsługują elementu canvas. Jak to działa? Przeglądarka domyślnie zachowuje się tak: za każdym razem, gdy trafi na element, którego nie rozpoznaje, wyświetla po prostu tekst zawarty w tym elemencie. A zatem przeglądarki nieobsługujące płótna, gdy trafią na znacznik canvas , wyświetlą tekst: „Hej, ty tam! Tak, do ciebie mówię! Zaktualizuj swoją przeglądarkę!”. Z kolei przeglądarki, które obsługują element canvas, kompletnie ignorują zawartość umieszczoną między znacznikiem otwierającym i zamykającym, więc tekst nie zostanie wyświetlony. Hey you, yes Hej, ty tam! Tak, YOU, upgrade do ciebie mówię! your browser!! Zaktualizuj swoją przeglądarkę! To, że jest to takie proste, jest zasługą chłopaków (i dziewczyn) odpowiedzialnych za standardy HTML5. Wielkie dzięki! Inną możliwością wykrycia, czy przeglądarka obsługuje element canvas, jest — co już wiesz — zastosowanie JavaScriptu. To rozwiązanie jest nawet bardziej elastyczne, ponieważ umożliwia skorzystanie z alternatywnych rozwiązań, w przypadku gdy przeglądarka nie obsługuje płótna — można przekierować użytkownika na inną stronę lub wyświetlić zwykły obrazek. 315 Odkryj w sobie artystęjesteś tutaj  Przegląd planu działania Teraz, kiedy już wiemy, jak rysować prostokąty, możemy bez problemu wymalować tło kwadratami, prawda? Musimy jeszcze tylko pomyśleć, jak umieścić je w losowych miejscach koszulki i jak zmieniać ich kolor na ten, który wybrał użytkownik. Łukasz: Jasne, ale będzie nam też potrzebny interfejs użytkownika, w którym można ustalić wszystkie parametry. Mamy już co prawda wstępny szkic, ale teraz trzeba go zaimplementować. Iza: Masz rację, Łukasz. Nie ruszymy z miejsca bez interfejsu użytkownika. Przemek: A nie jest to zwykły HTML? Łukasz: Myślę, że tak, ale jak to ma właściwie działać, jeżeli założymy, że wszystko ma się odbywać po stronie klienta? Na przykład podstawowa sprawa — gdzie mają zostać przesłane dane z formularza? Ja chyba nie do końca rozumiem, jak to ma wszystko ze sobą współpracować. Przemek: Łukasz, przecież kliknięcie przycisku może po prostu wywołać javascriptową funkcję, w której na płótnie wyświetlimy podgląd koszulki. Łukasz: No dobra, to brzmi rozsądnie, ale jak w takim razie odczytamy wartości, które użytkownik wybrał w polach formularza, skoro wszystko odbywa się po stronie klienta? Iza: Z pomocą przyjdzie nam struktura DOM, a właściwie metoda document.getElementById, dzięki której odczytamy te wartości. Przecież już to robiliśmy! Łukasz: Wygląda na to, że się zgubiłem... Przemek: W porządku, przejdziemy przez to razem. Zaczniemy od przyjrzenia się całości problemu. 316 Rozdział 7. Odkryj w sobie artystę TweetowaKoszulka — obraz całości Zanim rzucimy się w wir pracy, zróbmy krok w tył i przyjrzyjmy się całości. Zamierzamy stworzyć aplikację internetową z elementem canvas w roli głównej i kilkoma polami formularza pełniącymi rolę interfejsu użytkownika. Wszystko to będzie spięte kodem JavaScript i interfejsem API elementu canvas. Wygląda to tak: JavaScript wykona ciężką pracę polegającą na pobieraniu z formularza danych wybranych przez użytkownika i rysowaniu na płótnie za pomocą API elementu canvas. Dokument HTML będzie zawierał element canvas i prosty formularz. Przycisk podglądu będzie wywoływał javascriptową funkcję, w której będzie tworzony podgląd koszulki. To jest płótno, na którym będzie wyświetlany podgląd koszulki. Wszystkie elementy graficzne będziemy umieszczać na płótnie za pomocą JavaScriptu. To jest interfejs użytkownika, który składa się głównie z pól formularza. Niektóre operacje muszą być wykonane po stronie serwera. Należy do nich na przykład możliwość zamawiania koszulek. Ale nie wszystko naraz — jakieś zadania musimy zostawić dla Ciebie. Nie zapomnij przesłać nam darmowej koszulki! jesteś tutaj  317 BĄDŹ przeglądarką Poniżej zamieściliśmy kod HTML formularza będącego interfejsem użytkownika. Twoim zadaniem jest odegranie roli przeglądarki i wyrenderowanie tego interfejsu. Kiedy skończysz, porównaj swój wynik z tym, co przedstawiliśmy na poprzedniej stronie. Wszystko się zgadza? form p label for=”backgroundColor” Wybierz kolor tła: /label select id=”backgroundColor” option value=”white” selected=”selected” biały /option option value=”black” czarny /option /select /p p label for=”shape” Kółka czy kwadraty? /label select id=”shape” option value=”none” selected=”selected” brak /option option value=”circles” kółka /option option value=”squares” kwadraty /option /select /p p label for=”foregroundColor” Wybierz kolor tekstu: /label select id=”foregroundColor” option value=”black” selected=”selected” czarny /option option value=”white” biały /option /select /p p label for=”tweets” Wybierz tweet: /label select id=”tweets” /select /p p input type=”button” id=”previewButton” value=”Podgląd” /p /form 318 Rozdział 7. Odkryj w sobie artystę Wyrenderuj interfejs użytkownika. Narysuj stronę, której kod widzisz po lewej. Załóż, że wartości parametrów dla koszulki pobierasz z elementów interfejsu. BĄDŹ przeglądarką — ciąg dalszy Skoro masz już interfejs, wykonaj ten kod JavaScript i zapisz wartości dla każdego elementu. Odpowiedzi możesz sprawdzić z naszym rozwiązaniem, które znajdziesz pod koniec rozdziału. var selectObj = document.getElementById(”backgroundColor”); var index = selectObj.selectedIndex; var bgColor = selectObj[index].value; ...................................................... var selectObj = document.getElementById(”shape”); var index = selectObj.selectedIndex; var shape = selectObj[index].value; ...................................................... var selectObj = document.getElementById(”foregroundColor”); var index = selectObj.selectedIndex; var fgColor = selectObj[index].value; ...................................................... jesteś tutaj  319 !doctype html html lang=”pl” head title TweetowaKoszulka /title meta charset=”utf-8” / style canvas {border: 1px solid black;} /style script src=”tweetshirt.js” /script /head body h1 TweetowaKoszulka /h1 canvas width=”600” height=”200” id=”tshirtCanvas” p Aby korzystać z aplikacji TweetowaKoszulka, musisz zaktualizować przeglądarkę! /p /canvas form Cały kod JavaScript umieścimy w osobnym pliku, aby łatwiej nam się pracowało. A oto płótno! Dodaliśmy też krótki komunikat dla użytkowników starszych przeglądarek. Tworzymy HTML Najpierw umieśćmy HTML na swoim miejscu Koniec gadania! Zabierzmy się w końcu do pracy. Zanim zajmiemy się ciekawszymi sprawami, potrzebujemy prostej strony HTML. Zaktualizuj plik index.html, tak by wyglądał w ten sposób: O tak, kolejny fajny plik zgodny z HTML5! Zwróć uwagę, że zmieniliśmy tytuł na „TweetowaKoszulka”. /form /body /html To jest formularz, w którym umieścimy wszystkie kontrolki naszej aplikacji. Zajmiemy się tym już na następnej stronie... WYSIL Szare komórkI Co jeszcze musisz wiedzieć, by zamienić ramkę płótna dodaną za pomocą CSS na ramkę rysowaną z poziomu JavaScriptu? Którą z metod uważasz za lepszą (CSS kontra JavaScript) i dlaczego? 320 Rozdział 7. Odkryj w sobie artystę Teraz możemy dodać formularz Dobra, teraz zajmiemy się interfejsem użytkownika, tak byśmy w końcu mogli napisać trochę kodu tworzącego podgląd koszulki. Co prawda już to wcześniej widziałeś, ale tym razem dodaliśmy kilka komentarzy, żeby wszystko stało się jasne, więc poza wpisaniem kodu koniecznie je przeczytaj: Tutaj użytkownik wybiera kolor tła nadruku na koszulkę. Do wyboru ma biały i czarny, ale oczywiście możesz dodać inne kolory. Kolejna kontrolka select służy do wyboru kształtów nakładanych na tło (kółek lub kwadratów). Użytkownik może też wybrać opcję „brak” (w takim przypadku tło nie powinno zawierać dodatkowych elementów). Cały ten kod powinien się znaleźć między znacznikami form , które wstawiliśmy na poprzedniej stronie. form p label for=”backgroundColor” Wybierz kolor tła: /label select id=”backgroundColor” option value=”white” selected=”selected” biały /option option value=”black” czarny /option /select /p p label for=”shape” Kółka czy kwadraty? /label select id=”shape” option value=”none” selected=”selected” brak /option option value=”circles” kółka /option option value=”squares” kwadraty /option /select /p p label for=”foregroundColor” Wybierz kolor tekstu: /label select id=”foregroundColor” option value=”black” selected=”selected” czarny /option option value=”white” biały /option /select /p p label for=”tweets” Wybierz tweet: /label select id=”tweets” /select /p p input type=”button” id=”previewButton” value=”Podgląd” /p /form Jeżeli nie pierwszy raz masz kontakt z formularzami, możesz się zastanawiać, dlaczego pominęliśmy atrybut action (przecież bez niego nic się nie stanie po kliknięciu przycisku). Już za chwilę się tym zajmiemy... Ta kontrolka służy do wyboru koloru tekstu (dostępne opcje to czarny i biały). Tutaj znajdą się wszystkie tweety. Dlaczego teraz nic tu nie ma? Wypełnimy to później (podpowiedź: musimy je pobrać z Twittera; w końcu to jest aplikacja internetowa, prawda?!). Na końcu umieszczamy przycisk generujący podgląd nadruku na koszulkę. jesteś tutaj  321 Dodajemy JavaScript Czas na obliczenia — w roli głównej JavaScript Znaczniki są fajne, ale to JavaScript odpowiada za spięcie wszystkich elementów aplikacji internetowej. Umieścimy więc trochę kodu w pliku tweetshirt.js. Zaczniemy od małego kroku i zajmiemy się rysowaniem kwadratów w losowych miejscach nadruku na koszulkę. Ale żebyśmy mogli wykonać ten krok, musimy uruchomić przycisk podglądu, tak by jego kliknięcie powodowało wywołanie funkcji. Utwórz plik tweetshirt.js i wpisz w nim ten kod. Najpierw pobieramy element previewButton. window.onload = function() { var button = document.getElementById(“previewButton”); button.onclick = previewHandler; }; Do przycisku dodajemy funkcję zwrotną, dzięki czemu po kliknięciu (lub puknięciu w przypadku urządzeń mobilnych) jest wywoływana funkcja previewHandler. A zatem po kliknięciu przycisku podglądu zostanie wywołana funkcja previewHandler, w której możemy zaktualizować zawartość płótna, tak by odpowiadała parametrom ustawionym przez użytkownika. W takim razie zaczynamy pisać funkcję previewHandler: function previewHandler() { var canvas = document.getElementById(”tshirtCanvas”); var context = canvas.getContext(”2d”); var selectObj = document.getElementById(”shape”); var index = selectObj.selectedIndex; var shape = selectObj[index].value; if (shape == ”squares”) { for (var squares = 0; squares 20; squares++) { drawSquare(canvas, context); } } } Najpierw pobieramy element canvas i prosimy go o kontekst 2d. Teraz musimy sprawdzić, jaki kształt wybrał użytkownik. Zaczynamy od pobrania elementu o identyfikatorze „shape”. Następnie sprawdzamy, która pozycja została wybrana (kwadraty czy kółka). W tym celu odczytujemy indeks wybranej pozycji i przypisujemy go do zmiennej shape. Jeżeli wartością zmiennej shape jest „squares”, musimy narysować kilka kwadratów. Co powiesz na 20 sztuk? Za rysowanie pojedynczego kwadratu odpowiada funkcja drawSquare, którą musimy sami napisać. Zwróć uwagę, że przekazujemy jej zarówno element canvas, jak i kontekst. Już za chwilę zobaczysz, dlaczego tak postąpiliśmy. 322 Rozdział 7. Odkryj w sobie artystę Nie istnieją głupie pytania P: Jak działa właściwość selectedIndex? O: Kontrolki select formularzy mają właściwość selectedIndex, która zwraca numer opcji wybranej z rozwijanego menu. Każda lista opcji jest zamieniana na tablicę, której elementy to kolejne pozycje listy. Powiedzmy, że mamy listę trzech opcji: „pizza”, „pączki” i „herbatniki”. Jeżeli zaznaczysz „pączki”, właściwość selectedIndex przyjmie wartość 1 (pamiętaj, że tablice w JavaScripcie są indeksowane od 0). Bardzo często sam indeks Ci nie wystarczy i chciałbyś poznać wartość opcji o danym indeksie (w naszym przypadku „pączki”). Aby poznać wartość opcji, najpierw trzeba odczytać z tablicy element o tym indeksie, co spowoduje zwrócenie obiektu opcji. Do wartości tego obiektu można się dostać za pośrednictwem właściwości value, która zwraca łańcuch tekstowy przypisany do atrybutu value tej opcji. Magnesiki z pseudokodem Użyj swoich tajemnych mocy programistycznych i poskładaj pseudokod zamieszczony poniżej, który ma ilustrować działanie funkcji drawSquare. Do tej funkcji są przekazywane element canvas i kontekst, a jej zadaniem jest narysowanie kwadratu o losowej wielkości w losowym miejscu płótna. Zanim przejdziesz dalej, porównaj swoje rozwiązanie z naszym, które znajdziesz na końcu tego rozdziału. function drawSquare ( , _______________ ){ function drawSquare ( , _______________ ){ context Ten magnesik umieściliśmy za Ciebie. Magnesiki umieść w tym miejscu ! } canvas narysuj kwadrat o szerokości w we współrzędnych x i y We wstępnym projekcie ustaliliśmy, że kwadraty będą jasnoniebieskie, stąd to „lightblue”. wyznacz losową wartość współrzędnej y, tak by kwadrat znalazł się wewnątrz płótna ustaw właściwość fi llStyle na ”lightblue” wyznacz losową szerokość kwadratu wyznacz losową wartość współrzędnej x, tak by kwadrat znalazł się wewnątrz płótna jesteś tutaj  323 Implementujemy kwadraty Piszemy funkcję drawSquare Jeżeli już wykonałeś całą tę ciężką pracę i uporządkowałeś pseudokod, czas przekuć wiedzę w czyn i napisać działającą funkcję drawSquare: Funkcja ma dwa parametry: canvas (czyli płótno) oraz context (czyli kontekst rysowania). function drawSquare(canvas, context) { var w = Math.floor(Math.random() * 40); var x = Math.floor(Math.random() * canvas.width); var y = Math.floor(Math.random() * canvas.height); Potrzebujemy losowych wartości dla szerokości kwadratu oraz jego współrzędnych x i y. context.fillStyle = ”lightblue”; context.fillRect(x, y, w, w); } W końcu rysujemy kwadrat za pomocą metody fillRect. Za pomocą właściwości fillStyle ustalamy, by kwadraty miały jasnoniebieski kolor. O tej właściwości też powiemy za chwilę... Do wygenerowania losowej wartości szerokości oraz współrzędnych x i y używamy metody Math.random(). Za chwilę powiemy o niej trochę więcej... Maksymalna długość boku kwadratu jest równa 40, by nie był za duży. Współrzędne x i y są obliczane w oparciu o szerokość i wysokość płótna. Generujemy losową wartość z przedziału od 0 do, odpowiednio, szerokości lub wysokości. Jeżeli chcesz sobie przypomnieć co nieco na ten temat, zajrzyj do książki „Head First HTML with CSS XHTML. Edycja polska”. W swoim kodzie możesz wpisać inną wartość! W jaki sposób dobraliśmy liczby, przez które mnożymy wartości zwracane przez metodę Math.random, by otrzymać szerokość oraz współrzędne x i y? W przypadku szerokości ustaliliśmy wartość 40, ponieważ naszym zdaniem jest odpowiednia dla tej wielkości płótna. Ponieważ jest to kwadrat, stosujemy tę samą wartość dla szerokości i wysokości. Do obliczenia współrzędnych używamy wymiarów płótna (jego szerokości i wysokości), tak by kwadrat zmieścił się w jego granicach. Szerokość płótna Szerokość i wysokość kwadratu (pamiętaj, że obie wartości są identyczne, bo to kwadrat). W y s o k o ś ć p ł ó t n a Współrzędne x i y określają położenie lewego górnego rogu kwadratu. 324 Rozdział 7. Odkryj w sobie artystę Czas na jazdę próbną! No dobra, koniec pisania, teraz czas na testowanie! Otwórz w przeglądarce dokument index.html i kliknij przycisk podglądu, aby zobaczyć niebieskie kwadraty. My zobaczyliśmy coś takiego: Świetnie, właśnie o to nam chodziło! Chwila, nie tak szybko... Jeżeli wciśniesz przycisk podglądu kilka razy, zobaczysz MNÓSTWO kwadratów. Nie powinno tak być! On niestety ma rację, mamy mały problem. Wciśnij przycisk podglądu kilka razy, a zobaczysz coś takiego. jesteś tutaj  325 Naprawiamy kod Dlaczego na podglądzie widzimy stare i nowe kwadraty? Tak właściwie to efekt jest całkiem ciekawy... ale z całą pewnością nie o to nam chodziło. Chcieliśmy, by nowe kwadraty zastępowały stare za każdym razem, gdy klikamy przycisk podglądu (podobnie będzie z tweetami — nowe muszą zastępować stare). Kluczową sprawą, o której musisz pamiętać, jest to, że my malujemy piksele na płótnie. Kiedy klikniesz przycisk podglądu, pobierany jest element canvas i rysowane są na nim kwadraty. To, co znajduje się na płótnie, jest zamalowywane nowymi rysunkami! Nie martw się. Wiesz już wystarczająco dużo, by rozwiązać ten problem. Oto, co zamierzamy zrobić: 1 2 Odczytujemy wybrany kolor tła z obiektu „backgroundColor”. Za każdym razem, zanim zaczniemy rysować kwadraty, wypełniamy tło, używając właściwości fillStyle i metody fillRect. Zaostrz ołówek Zaostrz ołówek Zaostrz ołówek Aby po każdym kliknięciu przycisku podglądu widzieć tylko nowe kwadraty, musimy za każdym razem zaczynać od wypełnienia płótna kolorem tła wybranym przez użytkownika za pomocą pola „backgroundColor”. Zaczniemy od zaimplementowania funkcji wypełniającej płótno wybranym kolorem. W puste pola w poniższym kodzie wstaw brakujące fragmenty. Zanim przejdziesz dalej, porównaj swoje odpowiedzi z naszymi, które znajdziesz pod koniec tego rozdziału. function fillBackgroundColor(canvas, context) { var selectObj = document.getElementById(”_______________”); var index = selectObj.selectedIndex; var bgColor = selectObj.options[index].value; context.fillStyle = ______________; context.fillRect(0, 0, _____________, ______________); } Podpowiedź: to, co odczytasz z obiektu wybranej opcji, będzie łańcuchem tekstowym opisującym kolor, którego możesz użyć tak samo jak wartości „lightblue” dla kwadratów. Podpowiedź: chcemy wypełnić tym kolorem CAŁE płótno! 326 Rozdział 7. Odkryj w sobie artystę Dodajemy wywołanie metody fillBackgroundColor Mamy nadzieję, że masz już kompletną funkcję fillBackgroundColor. Teraz wystarczy ją wywołać z funkcji previewHandler. Dodamy ją w takim miejscu, by była wywoływana na samym początku, dzięki czemu przed narysowaniem czegokolwiek będziemy dysponować pięknym, czyściutkim tłem. Wywołanie funkcji fillBackgroundColor dodajemy przed kodem rysującym kwadraty, dzięki czemu nowy rysunek powstanie na pustym tle. function previewHandler() { var canvas = document.getElementById(”tshirtCanvas”); var context = canvas.getContext(”2d”); fillBackgroundColor(canvas, context); var selectObj = document.getElementById(”shape”); var index = sele
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

HTML5. Rusz głową!
Autor:
,

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: