Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00092 007772 10476494 na godz. na dobę w sumie
HTML5. Strony mobilne - książka
HTML5. Strony mobilne - książka
Autor: Liczba stron: 440
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-8912-5 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> html i xhtml - programowanie
Porównaj ceny (książka, ebook, audiobook).

Wykorzystaj potencjał HTML5 na urządzeniach mobilnych!

HTML5 to prawdziwa rewolucja w świecie stron WWW i aplikacji internetowych. Jego potencjał oraz możliwości zaskoczyły niejedną osobę. Wykorzystywany jest do tworzenia atrakcyjnych, intuicyjnych i dynamicznych stron WWW. To nie wszystko! Dzięki HTML5 i CSS3 możesz także stworzyć aplikację działającą na urządzeniach z systemami Android lub iOS. Chcesz zobaczyć, jak to osiągnąć?

Jeśli tak, to trafiłeś na świetną książkę, która wprowadzi Cię w świat nowoczesnych stron i aplikacji. W trakcie lektury zaczniesz poznawać składnię oraz możliwości HTML, przygotujesz środowisko pracy oraz zdobędziesz potrzebne narzędzia. Kolejne rozdziały to obowiązkowa dawka informacji na temat tworzenia formularzy oraz korzystania z elementów svg, canvas, audio i video. HTML5 dostarcza wielu nowych narzędzi, pozwalających m.in. sprawdzić stan połączenia z siecią, przechowywać dane na komputerze użytkownika lub uzyskać informację o jego lokalizacji. Dzięki tej książce opanujesz je w mig. W tym podręczniku znajdziesz również obszerny opis kaskadowych arkuszy stylów w wersji 3. Pozwolą Ci one błyskawicznie wprowadzać atrakcyjne dla oka efekty. Książka ta jest genialnym źródłem informacji dla wszystkich pasjonatów tworzenia stron i aplikacji internetowych.

Dzięki tej książce:

Sprawdź, jak stworzyć aplikację internetową działającą na platformie Android lub iOS!

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

Darmowy fragment publikacji:

Tytuł oryginału: Mobile HTML5 Tłumaczenie: Tomasz Walczak ISBN: 978-83-246-8912-5 © 2014 Helion S.A. Authorized Polish translation of the English edition Mobile HTML5, ISBN 9781449311414 © 2014 Estelle Weyl. This translation is published and sold by permission of O’Reilly Media, Inc., which owns or controls all rights to publish and sell the same. All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from the Publisher. Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji. Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli. Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte w tej książce informacje były kompletne i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION nie ponoszą również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce. Wydawnictwo HELION ul. Kościuszki 1c, 44-100 GLIWICE tel. 32 231 22 19, 32 230 98 63 e-mail: helion@helion.pl WWW: http://helion.pl (księgarnia internetowa, katalog książek) Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/htm5sm Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję. Printed in Poland. • Kup książkę • Poleć książkę • Oceń książkę • Księgarnia internetowa • Lubię to! » Nasza społeczność Spis tre(cid:316)ci Wprowadzenie .............................................................................................................11 CubeeDoo — gra na urz(cid:241)dzenia przeno(cid:264)ne napisana w HTML5 Narz(cid:246)dzia programistyczne Edytor tekstu Przegl(cid:241)darka Narz(cid:246)dzia do debugowania Debugery stacjonarne Zdalne debugowanie Narz(cid:246)dzia do testowania 1. Przygotowania do nauki interfejsów API HTML5, CSS3 i JavaScriptu ......................25 26 28 28 28 29 30 32 37 38 39 40 42 Emulatory i symulatory Narz(cid:246)dzia dost(cid:246)pne w internecie Telefony Testy zautomatyzowane Sk(cid:228)adnia j(cid:246)zyka HTML5 2. Przechodzenie na HTML5 ............................................................................................43 43 44 45 45 48 Elementy Atrybuty Atrybuty globalne i atrybuty internacjonalizacji Atrybuty z HTML-a 4, które sta(cid:228)y si(cid:246) globalne w HTML5 Nowo(cid:264)(cid:232) w HTML5 — globalne atrybuty zwi(cid:241)zane z dost(cid:246)pno(cid:264)ci(cid:241) i elementami interaktywnymi Sk(cid:228)adnia elementów i atrybutów w HTML-u Elementy samozamykaj(cid:241)ce Najlepsze praktyki Wymagane komponenty Elementy ze znacznika head 50 54 55 56 57 62 3 Kup książkęPoleć książkę Element meta — dodawanie metadanych Znaczniki meta dla aplikacji mobilnych Warto(cid:264)ci charakterystyczne dla producentów urz(cid:241)dze(cid:254) przeno(cid:264)nych Znacznik base dla strony internetowej Znacznik link jest przydatny nie tylko dla arkuszy stylów 63 64 66 67 67 Elementy sekcyjne w HTML5 Element section Element article Element section a element article Element nav Element aside Element header Element footer Nag(cid:228)ówek i stopka w grze CubeeDoo Stary, ale rzadko u(cid:276)ywany element address Grupowanie tre(cid:264)ci — inne nowe elementy HTML5 Element main Elementy figure i figcaption Element hr Zmiany atrybutów elementów li i ol 3. Nowe elementy w HTML5 ...........................................................................................75 75 77 77 78 78 79 79 80 80 81 81 82 82 83 83 83 84 85 85 86 86 86 86 88 89 90 90 92 92 94 95 96 Element a Zmiany w elementach tekstowych w porównaniu z HTML-em 4 Niezmodyfikowane elementy Element mark Element time Elementy rp , rt i ruby Element bdi Element wbr Nowe tekstowe elementy semantyczne w HTML5 Zmodyfikowane tekstowe semantyczne elementy Elementy osadzane Zmiany w elementach osadzanych Elementy interaktywne Elementy details i summary Elementy menu i menuitem Elementy XHTML-a niedost(cid:246)pne w HTML5 Wnioski 4 (cid:95) Spis tre(cid:316)ci Kup książkęPoleć książkę Atrybuty elementu input oraz innych elementów formularzy Atrybut type Atrybut required Warto(cid:264)ci minimalne i maksymalne — atrybuty min i max Atrybut step Atrybut placeholder Atrybut pattern Atrybut readonly Atrybut disabled Atrybut maxlength Atrybut size Atrybut form Atrybut autocomplete Atrybut autofocus 4. Formularze internetowe w HTML5 .............................................................................97 99 99 99 100 101 101 102 104 104 105 105 105 106 107 107 108 108 109 109 110 111 112 112 114 114 114 114 115 116 117 118 119 121 122 122 123 123 125 125 125 Ponowne wprowadzenie do typów, o których my(cid:264)lisz, (cid:276)e je znasz Tekst — input type= text Has(cid:228)a — input type= password Pole wyboru — input type= checkbox Przycisk opcji — input type= radio Przycisk wysy(cid:228)ania — input type= submit Przycisk resetowania — input type= reset Plik — input type= file Ukryte pole — input type= hidden Rysunki — input type= image Przycisk — input type= button Okre(cid:264)lanie stylów dla elementów input ró(cid:276)nego typu Daty — input type= date Data i godzina — input type= datetime Lokalna data i godzina — input type= datetime-local Miesi(cid:241)c — input type= month Typy i atrybuty elementu input Nowe typy elementu input Adres e-mail — input type= email Adres URL — input type= url Telefon — input type= tel Liczby — input type= number Przedzia(cid:228)y — input type= range Wyszukiwanie — input type= search Kolory — input type= color Elementy input zwi(cid:241)zane z dat(cid:241) i godzin(cid:241) Spis tre(cid:316)ci (cid:95) 5 Kup książkęPoleć książkę Godzina — input type= time Tydzie(cid:254) — input type= week Sprawdzanie poprawno(cid:264)ci formularzy (cid:227)atwe poprawianie interfejsu u(cid:276)ytkownika za pomoc(cid:241) stylów CSS Nowe elementy formularzy Element datalist i atrybut list Element output Element meter Element progress Element keygen Inne elementy formularzy Element form Elementy fieldset i legend Elementy select , option i optgroup Element textarea Element button Element label Wnioski 125 126 127 130 132 132 134 135 136 137 137 137 138 138 138 139 139 139 Multimedialne interfejsy API w HTML5 5. Elementy svg, canvas, audio i video ..........................................................................141 141 141 143 SVG Do(cid:228)(cid:241)czanie grafiki SVG do dokumentów Technika Clown Car — SVG i dynamicznie dopasowywana grafika pierwszego planu Nauka SVG Format SVG w grze CubeeDoo Element canvas Element canvas a element svg Elementy audio i video Typy plików multimedialnych Dodawanie elementu video do witryny Atrybuty elementów video i audio Elementy video i audio a JavaScript Okre(cid:264)lanie stylu elementu video 144 145 146 148 152 154 154 155 155 159 161 6. Inne interfejsy API z HTML5 ...................................................................................... 165 165 Aplikacje internetowe dzia(cid:228)aj(cid:241)ce w trybie offline 165 166 170 179 Czy urz(cid:241)dzenie jest pod(cid:228)(cid:241)czone do sieci? Pami(cid:246)(cid:232) podr(cid:246)czna aplikacji Pami(cid:246)(cid:232) lokalna i pami(cid:246)(cid:232) sesji Pami(cid:246)(cid:232) oparta na SQL-u i bazach danych 6 (cid:95) Spis tre(cid:316)ci Kup książkęPoleć książkę Wzbogacanie user experience Geolokalizacja Sieciowe w(cid:241)tki robocze Mikrodane Przekazywanie komunikatów mi(cid:246)dzy dokumentami Specyfikacja ARIA Dost(cid:246)pno(cid:264)(cid:232) Wnioski 183 183 186 188 190 191 191 194 CSS — definicje i sk(cid:228)adnia Selektory CSS Podstawowe selektory Sk(cid:228)adnia CSS U(cid:276)ywanie zewn(cid:246)trznych arkuszy stylów — jeszcze o elemencie link Zapytania media Najlepsze praktyki zwi(cid:241)zane ze stylami CSS 7. Przechodzenie na CSS3 ............................................................................................. 195 196 196 198 200 202 206 207 210 210 211 212 215 219 222 223 224 227 229 232 233 234 Inne selektory CSS3 Selektory ogólne Stosowanie selektorów Selektory relacyjne — regu(cid:228)y oparte na kolejno(cid:264)ci kodu Selektory atrybutów Pseudoklasy Pseudoklasy okre(cid:264)laj(cid:241)ce stan Pseudoklasy strukturalne Obliczenia dla pseudoklas nth Inne pseudoklasy Pseudoelementy Inne selektory — model Shadow DOM Specyficzno(cid:264)(cid:232) wa(cid:276)niejsza od kaskadowo(cid:264)ci — specyficzno(cid:264)(cid:232) w stylach CSS Wnioski 8. Dodatkowe mo(cid:348)liwo(cid:316)ci dzi(cid:253)ki warto(cid:316)ciom z CSS3 ..................................................235 235 236 237 238 239 240 240 240 241 Warto(cid:264)ci kolorów w CSS3 Warto(cid:264)ci szesnastkowe Sk(cid:228)adnia rgb() Dodawanie przezroczysto(cid:264)ci w formacie RGBA Odcie(cid:254), nasycenie i jasno(cid:264)(cid:232) — HSL() CMYK Nazwane kolory S(cid:228)owo kluczowe currentColor Warto(cid:264)ci kolorów w przegl(cid:241)darkach Spis tre(cid:316)ci (cid:95) 7 Kup książkęPoleć książkę Jednostki miar w CSS-ie Warto(cid:264)ci okre(cid:264)laj(cid:241)ce d(cid:228)ugo(cid:264)(cid:232) w CSS-ie K(cid:241)ty, czas i cz(cid:246)stotliwo(cid:264)(cid:232) K(cid:241)ty w CSS-ie Czas Cz(cid:246)stotliwo(cid:264)(cid:232) Porz(cid:241)dek GPDL — skrócone deklaracje w(cid:228)a(cid:264)ciwo(cid:264)ci i warto(cid:264)ci Wnioski 244 244 247 247 249 249 249 252 Nauka CSS3 W(cid:228)a(cid:264)ciwo(cid:264)ci modelu pude(cid:228)kowego z CSS-a Obramowanie W(cid:228)a(cid:264)ciwo(cid:264)(cid:232) border-style W(cid:228)a(cid:264)ciwo(cid:264)(cid:232) border-color W(cid:228)a(cid:264)ciwo(cid:264)(cid:232) border-width Model pude(cid:228)kowy z CSS-a W(cid:228)a(cid:264)ciwo(cid:264)(cid:232) box-sizing 9. CSS3 — modu(cid:293)y, modele i grafika .............................................................................253 254 255 256 256 257 257 259 260 261 264 264 265 265 274 277 278 282 283 284 286 288 Cienie dla tekstu Ustawianie tekstu za pomoc(cid:241) w(cid:228)a(cid:264)ciwo(cid:264)ci width, overflow i text-overflow Cienie pól (cid:227)(cid:241)czenie wszystkich w(cid:228)a(cid:264)ciwo(cid:264)ci w grze CubeeDoo Typy gradientu: liniowy lub ko(cid:228)owy Gradienty ko(cid:228)owe Gradienty liniowe W(cid:228)a(cid:264)ciwo(cid:264)(cid:232) background-size Gradienty z paskami Powtarzanie gradientów liniowych W(cid:228)a(cid:264)ciwo(cid:264)(cid:232) border-radius Gradienty w CSS-ie Cienie Przej(cid:264)cia w CSS-ie 10. Transformacje, przej(cid:316)cia i animacje w CSS3 .............................................................293 294 295 298 298 299 300 301 302 303 304 W(cid:228)a(cid:264)ciwo(cid:264)(cid:232) transition-property W(cid:228)a(cid:264)ciwo(cid:264)(cid:232) transition-duration W(cid:228)a(cid:264)ciwo(cid:264)(cid:232) transition-timing-function W(cid:228)a(cid:264)ciwo(cid:264)(cid:232) transition-delay W(cid:228)a(cid:264)ciwo(cid:264)(cid:232) skrócona transition Ró(cid:276)ne przej(cid:264)cia W(cid:228)a(cid:264)ciwo(cid:264)(cid:232) transform-origin W(cid:228)a(cid:264)ciwo(cid:264)(cid:232) transform Transformacje w CSS3 8 (cid:95) Spis tre(cid:316)ci Kup książkęPoleć książkę (cid:227)(cid:241)czenie wielu transformacji Stosowanie przej(cid:264)(cid:232) dla transformacji Funkcje transformacji trójwymiarowych Inne w(cid:228)a(cid:264)ciwo(cid:264)ci transformacji trójwymiarowych (cid:227)(cid:241)czenie wszystkich elementów Animacje w CSS3 Klatki kluczowe Przej(cid:264)cia, animacje i wydajno(cid:264)(cid:232) 308 309 309 311 313 315 317 323 Model flexbox Ustawianie grafiki obramowania Zapytania media, punkty graniczne i p(cid:228)ynny uk(cid:228)ad Kilka kolumn Grafika obramowania 11. CSS w projektowaniu RWD .......................................................................................325 325 326 328 329 334 337 339 340 340 346 346 Udost(cid:246)pnianie grafiki Maski w CSS-ie — tworzenie przezroczystych plików JPEG Nag(cid:228)ówek Client-Hints W(cid:228)a(cid:264)ciwo(cid:264)(cid:232) flex Wykrywanie funkcji za pomoc(cid:241) regu(cid:228)y @supports Dynamiczne dostosowywanie do wymiarów ekranu Platforma mobilna — bogactwo mo(cid:276)liwo(cid:264)ci O czym warto pomy(cid:264)le(cid:232) przed rozpocz(cid:246)ciem pracy? Kwestie projektowe Aplikacje zwi(cid:246)kszaj(cid:241)ce produktywno(cid:264)(cid:232) Rozrywka — wci(cid:241)gaj(cid:241)ce aplikacje Narz(cid:246)dzia Jaki typ aplikacji b(cid:246)dzie odpowiedni dla Ciebie? 12. Projektowanie aplikacji mobilnych ...........................................................................349 350 351 352 353 354 355 356 356 356 358 359 359 360 360 361 363 364 Ma(cid:228)y ekran Mniejsza ilo(cid:264)(cid:232) pami(cid:246)ci Jedno okno i jedna aplikacja naraz Minimalna dokumentacja Rozwa(cid:276)ania zwi(cid:241)zane z programowaniem Pasek stanu Pasek nawigacji Rysunek startowy Ikony na stronie g(cid:228)ównej urz(cid:241)dzenia Tworzenie rozwi(cid:241)za(cid:254) dla mobilnych przegl(cid:241)darek z silnikiem WebKit Spis tre(cid:316)ci (cid:95) 9 Kup książkęPoleć książkę Minimalizowanie ilo(cid:264)ci danych wprowadzanych z klawiatury Zachowaj zwi(cid:246)z(cid:228)o(cid:264)(cid:232) Stosuj oczywiste rozwi(cid:241)zania Minimalizuj ilo(cid:264)(cid:232) wprowadzanych danych Minimalizuj ilo(cid:264)(cid:232) tekstu Inne kwestie zwi(cid:241)zane z user experience 365 365 365 365 365 366 Dotknij mnie Regu(cid:228)a @viewport Dostosowywanie stron do ma(cid:228)ych ekranów 13. Urz(cid:233)dzenia przeno(cid:316)ne i dotyk ..................................................................................367 367 368 368 369 369 372 375 375 376 Obszary reaguj(cid:241)ce na dotyk Zdarzenia zwi(cid:241)zane z mysz(cid:241) i dotykiem Fikcyjne i rzeczywiste zdarzenia zwi(cid:241)zane z klikni(cid:246)ciem Ruch i kierunek poruszania telefonu Stan urz(cid:241)dzenia Natywne aplikacje sieciowe, aplikacje w formie pakietów i rozwi(cid:241)zania hybrydowe Dost(cid:246)p do sprz(cid:246)tu 378 379 Testy Opó(cid:274)nienie Czas pracy na baterii Stosuj ciemne kolory Stosuj format JPEG Ogranicz ilo(cid:264)(cid:232) kodu w JavaScripcie Eliminuj liczb(cid:246) przesy(cid:228)anych (cid:276)(cid:241)da(cid:254) Akceleracja sprz(cid:246)towa 14. Wydajno(cid:316)(cid:235) w (cid:316)rodowisku mobilnym ........................................................................ 381 381 382 382 383 384 385 387 388 392 395 396 401 401 402 403 Zmniejszanie liczby (cid:276)(cid:241)da(cid:254) HTTP Zmniejszanie wielko(cid:264)ci (cid:276)(cid:241)da(cid:254) Pami(cid:246)(cid:232) Optymalizowanie grafiki Zdarzenia zwi(cid:241)zane z dotykiem Animacje Szybko(cid:264)(cid:232) reagowania interfejsu u(cid:276)ytkownika Wnioski A Selektory CSS-a i specyficzno(cid:316)(cid:235) ................................................................................405 Skorowidz .................................................................................................................. 413 10 (cid:95) Spis tre(cid:316)ci Kup książkęPoleć książkę ROZDZIA(cid:292) 5. Elementy svg, canvas, audio i video Wcze(cid:264)niej omówi(cid:228)am wi(cid:246)kszo(cid:264)(cid:232) nowych elementów z HTML5. Wyj(cid:241)tkiem s(cid:241) elementy po- wi(cid:241)zane bezpo(cid:264)rednio z tworzonymi dopiero interfejsami API, a tak(cid:276)e dobrze obs(cid:228)ugiwane elementy multimedialne svg, canvas, audio i video. Elementy z pierwszej z tych grup mog(cid:241) jeszcze zosta(cid:232) zmodyfikowane, dlatego nie omawiam ich w tej ksi(cid:241)(cid:276)ce. Elementy z drugiej grupy opisuj(cid:246) w tym rozdziale. Przedstawiam tu najwa(cid:276)niejsze funkcje, które programi(cid:264)ci frontonów aplikacji sieciowych praw- dopodobnie b(cid:246)d(cid:241) stosowa(cid:232) w codziennej pracy. Dzi(cid:246)ki temu przy tworzeniu kodu dla prze- gl(cid:241)darek mobilnych b(cid:246)dziesz móg(cid:228) korzysta(cid:232) z nowych mechanizmów. Wszystkie nowe prze- gl(cid:241)darki mobilne (z wyj(cid:241)tkiem Opery Mini) obs(cid:228)uguj(cid:241) elementy canvas , video i audio , a tak(cid:276)e sieciowe interfejsy API zwi(cid:241)zane z geolokalizacj(cid:241), pami(cid:246)ci(cid:241) lokaln(cid:241), aplikacjami sie- ciowymi dzia(cid:228)aj(cid:241)cymi w trybie offline itd. Na ka(cid:276)dy z tematów omawianych w tym rozdziale mo(cid:276)na napisa(cid:232) ca(cid:228)(cid:241) ksi(cid:241)(cid:276)k(cid:246) — i dla wielu opisywanych zagadnie(cid:254) takie ksi(cid:241)(cid:276)ki ju(cid:276) s(cid:241) dost(cid:246)pne. Przestawiam tu wystarczaj(cid:241)co du(cid:276)o informacji, aby(cid:264) móg(cid:228) uzna(cid:232), (cid:276)e chcesz przeczyta(cid:232) ksi(cid:241)(cid:276)k(cid:246) na dany temat, lub stwierdzi(cid:232), (cid:276)e danym zagadnieniem nie jeste(cid:264) zainteresowany. Cho(cid:232) nie opisuj(cid:246) szczegó(cid:228)owo poszczególnych kwestii, ten rozdzia(cid:228) zapewni Ci wiedz(cid:246) potrzebn(cid:241) do rozpocz(cid:246)cia pracy. Co wa(cid:276)niejsze, zro- zumiesz zalety i wady omawianych tu technologii w kontek(cid:264)cie urz(cid:241)dze(cid:254) przeno(cid:264)nych. Multimedialne interfejsy API w HTML5 Pierwotna specyfikacja HTML-a dotyczy(cid:228)a wy(cid:228)(cid:241)cznie materia(cid:228)ów tekstowych. Nie obejmo- wa(cid:228)a nawet elementu img . Od tamtego czasu du(cid:276)o si(cid:246) zmieni(cid:228)o. HTML5 umo(cid:276)liwia two- rzenie skalowalnej grafiki wektorowej za pomoc(cid:241) formatu SVG i pustego obszaru, po którym mo(cid:276)na rysowa(cid:232) (odpowiada mu element canvas ). Oprócz grafiki w HTML5 obs(cid:228)ugiwane s(cid:241) elementy video i audio , które dzia(cid:228)aj(cid:241) bez konieczno(cid:264)ci stosowania niezale(cid:276)nych wtyczek. SVG Format SVG umo(cid:276)liwia tworzenie z(cid:228)o(cid:276)onej skalowalnej grafiki wektorowej. Ten format zosta(cid:228) wprowadzony w 2001 r. i jest otwartym standardem definiowania dwuwymiarowej grafiki wektorowej. Skalowalno(cid:264)(cid:232) w SVG oznacza, (cid:276)e ta sama grafika b(cid:246)dzie równie ostra na du(cid:276)ych monitorach, jak i na ma(cid:228)ych wy(cid:264)wietlaczach urz(cid:241)dze(cid:254) przeno(cid:264)nych. Nie wymaga to wpro- wadzania (cid:276)adnych modyfikacji. 141 Kup książkęPoleć książkę W specyfikacji SVG jest zdefiniowana oparta na XML-u gramatyka tworzenia kszta(cid:228)tów, linii, krzywych, rysunków i tekstu. Obs(cid:228)ugiwane s(cid:241) te(cid:276) ró(cid:276)ne funkcje, takie jak: przezroczysto(cid:264)(cid:232), dowolne kszta(cid:228)ty geometryczne, filtry (cienie, efekty (cid:264)wietlne itd.), skrypty oraz animacje. Poniewa(cid:276) SVG to format graficzny oparty na te(cid:264)cie, pliki mog(cid:241) by(cid:232) bardzo ma(cid:228)e. Poniewa(cid:276) w tym formacie u(cid:276)ywany jest model obiektowy, grafiki mo(cid:276)na modyfikowa(cid:232) za pomoc(cid:241) skryptów. Poniewa(cid:276) jest to format wektorowy, mo(cid:276)na skalowa(cid:232) go bez negatywnych efektów takich jak pikselizacja lub nierówne kraw(cid:246)dzie. Ten format jest zrozumia(cid:228)y (dzi(cid:246)ki temu, (cid:276)e jest deklaratywny) i obs(cid:228)uguje animacje. Istnieje kilka wersji formatu SVG. S(cid:241) one obs(cid:228)ugiwane w przegl(cid:241)darkach w ró(cid:276)nym stopniu. Podstawowa obs(cid:228)uga samodzielnych plików .svg jest dost(cid:246)pna we wszystkich urz(cid:241)dzeniach przeno(cid:264)nych i nowych przegl(cid:241)darkach. W Androidzie pliki tego typu s(cid:241) obs(cid:228)ugiwane od wersji 3. Grafik(cid:246) w formacie SVG mo(cid:276)na stosowa(cid:232) jako (cid:274)ród(cid:228)o elementów img od systemów iOS 3.2 i Android 3.0 oraz od mobilnej wersji Internet Explorera 8. Pliki w formacie SVG jako warto(cid:264)(cid:232) w(cid:228)a(cid:264)ciwo(cid:264)ci background-image w stylach CSS s(cid:241) obs(cid:228)u- giwane od systemów Android 3 i iOS 3.2. Ponadto od dawna mo(cid:276)na ich u(cid:276)ywa(cid:232) w Operze Mobile. Element svg na stronach HTML5 mo(cid:276)na stosowa(cid:232) od systemów iOS 5 i Android 3 oraz od przegl(cid:241)darki Internet Explorer 9 (a tak(cid:276)e we wszystkich innych nowych przegl(cid:241)dar- kach). Tylko w systemach Android 2.3.3 i starszych, Amazon Silk i nieu(cid:276)ywanym ju(cid:276) WebOS firmy HP przegl(cid:241)darki mobilne nie zapewniaj(cid:241) obs(cid:228)ugi formatu SVG. Statyczne pliki SVG s(cid:241) obs(cid:228)ugiwane nawet w Operze Mini (podobnie jak element canvas , który jest obs(cid:228)ugiwany we wszystkich przegl(cid:241)darkach mobilnych), przy czym nie mo(cid:276)na ich animowa(cid:232), poniewa(cid:276) poziom obs(cid:228)ugi JavaScriptu w tej przegl(cid:241)darce to uniemo(cid:276)liwia. Poniewa(cid:276) SVG jest oparty na XML-u, g(cid:228)ównym elementem plików w tym formacie jest nie html , a svg . Pliki SVG, podobnie jak wszystkie dokumenty XML, rozpoczynaj(cid:241) si(cid:246) od prologu XML-a i deklaracji DTD dla formatu SVG. Element g(cid:228)ówny svg zawiera ca(cid:228)(cid:241) tre(cid:264)(cid:232) dokumentu. Pliki w formacie SVG nie obejmuj(cid:241) elementów head i body . Ca(cid:228)a tre(cid:264)(cid:232), w tym zagnie(cid:276)d(cid:276)one elementy svg , znajduje si(cid:246) w g(cid:228)ównym elemencie svg . Dobrym wprowadzeniem do formatu SVG jest japo(cid:254)ska flaga. Jest to bia(cid:228)y prostok(cid:241)tny ob- szar z czerwonym ko(cid:228)em (s(cid:228)o(cid:254)cem) w (cid:264)rodkowej cz(cid:246)(cid:264)ci, co przedstawia rysunek 5.1. Rysunek 5.1. Japo(cid:254)ska flaga wygenerowana za pomoc(cid:241) pliku SVG 1 !DOCTYPE svg PUBLIC -//W3C//DTD SVG 1.0//EN 2 http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd 3 svg xmlns= http://www.w3.org/2000/svg height= 220 width= 320 version= 1.0 4 title Japo(cid:300)ska flaga /title 5 desc Czerwone ko(cid:298)o na bia(cid:298)ym prostok(cid:238)cie /desc 6 rect x= 10 y= 10 width= 300 height= 200 7 style= fill: #ffffff; stroke: #e7e7e7; / 8 circle cx= 160px cy= 107px r= 60px fill= #d60818 / 9 /svg 142 (cid:95) Rozdzia(cid:293) 5. Elementy svg, canvas, audio i video Kup książkęPoleć książkę Có(cid:276) ten kod oznacza? Wiersze od 1 do 3 to deklaracja DTD dla plików SVG i g(cid:228)ówny element svg . Warto zauwa(cid:276)y(cid:232), (cid:276)e w g(cid:228)ównym elemencie zadeklarowana jest wielko(cid:264)(cid:232) danej grafiki wektorowej. Aby w stylach CSS móc u(cid:276)ywa(cid:232) grafiki w formacie SVG we w(cid:228)a(cid:264)ciwo(cid:264)ci background-position, trzeba zadeklarowa(cid:232) wymiary tej grafiki. Jest to wa(cid:276)ne, gdy tworzysz sprite’y w formacie SVG. Mo(cid:276)na doda(cid:232) element title (wiersz 4), je(cid:264)li plik SVG jest u(cid:276)ywany niezale(cid:276)nie od innych zasobów. Element desc (wiersz 5) zawiera tekstowy opis, który normalnie si(cid:246) nie wy(cid:264)wietla, gdy pokazywany jest plik SVG. Umieszczenie odpowiednich informacji w elementach desc i title zwi(cid:246)ksza dost(cid:246)pno(cid:264)(cid:232) stron. Poniewa(cid:276) nie wszystkie czytniki ekranu obs(cid:228)uguj(cid:241) format SVG, dodanie atrybutu aria-label pozwala poprawi(cid:232) dost(cid:246)pno(cid:264)(cid:232) stron. Element rect (wiersz 6) oznacza prostok(cid:241)t. Dost(cid:246)pne kszta(cid:228)ty i linie to: path , rect , circle , ellipse , line , polyline i polygon . Tu podane s(cid:241) cztery atrybuty: x, y, width i height. Okre(cid:264)laj(cid:241) one wspó(cid:228)rz(cid:246)dne x i y oraz szeroko(cid:264)(cid:232) i wysoko(cid:264)(cid:232) prostok(cid:241)ta. U(cid:276)ywany jest te(cid:276) atrybut style. W dokumentach SVG, podobnie jak w dokumentach HTML, mo(cid:276)na u(cid:276)ywa(cid:232) stylów CSS do okre(cid:264)lania stylu elementów. Mo(cid:276)esz zadeklarowa(cid:232) style wewn(cid:241)trzwierszowo za pomoc(cid:241) atrybutu style, jak to zrobi(cid:228)am w przedstawionym przyk(cid:228)adzie, albo do(cid:228)(cid:241)czy(cid:232) osadzony lub zewn(cid:246)trzny arkusz stylów i wskazywa(cid:232) w nim elementy przy u(cid:276)yciu selektorów (ta technika jest stosowana w plikach HTML). Nazwy w(cid:228)a(cid:264)ciwo(cid:264)ci s(cid:241) tu nieco odmienne ni(cid:276) w stylach CSS, do których jeste(cid:264) przyzwycza- jony, jednak s(cid:241) zrozumia(cid:228)e. W(cid:228)a(cid:264)ciwo(cid:264)(cid:232) fill dzia(cid:228)a podobnie jak w(cid:228)a(cid:264)ciwo(cid:264)(cid:232) background — tu okre(cid:264)la kolor t(cid:228)a. W(cid:228)a(cid:264)ciwo(cid:264)(cid:232) stroke pe(cid:228)ni funkcj(cid:246) podobn(cid:241) do w(cid:228)a(cid:264)ciwo(cid:264)ci border w stylach CSS. Mo(cid:276)na te(cid:276) okre(cid:264)li(cid:232) gradient lub wzór. Cho(cid:232) w plikach SVG mo(cid:276)na stosowa(cid:232) wi(cid:246)kszo(cid:264)(cid:232) w(cid:228)a(cid:264)ciwo(cid:264)ci i warto(cid:264)ci ze stylów CSS, ze wzgl(cid:246)du na bezpiecze(cid:254)stwo niektórzy producenci przegl(cid:241)darek1 blokuj(cid:241) importowanie gra- fiki rastrowej i skryptów w plikach SVG zapisanych jako grafika t(cid:228)a w elemencie img . Element circle (wiersz 8) tworzy ko(cid:228)o o czerwonym tle. Zamiast wysoko(cid:264)ci i szeroko(cid:264)ci w tym elemencie podawany jest atrybut r, który oznacza promie(cid:254). Pozycja nie jest tu podawana na podstawie górnego lewego rogu (jak to si(cid:246) odbywa w elemencie rect ), ale za pomoc(cid:241) (cid:264)rodka ko(cid:228)a. Atrybut cx okre(cid:264)la wspó(cid:228)rz(cid:246)dn(cid:241) x (cid:264)rodka ko(cid:228)a, natomiast cy to wspó(cid:228)rz(cid:246)dna y (cid:264)rodka. Je(cid:264)li przyjrzysz si(cid:246) atrybutom elementu circle , zauwa(cid:276)ysz, (cid:276)e jednym z nich jest fill, natomiast w elemencie rect fill jest podany jako w(cid:228)a(cid:264)ciwo(cid:264)(cid:232) stylów CSS. Do(cid:293)(cid:233)czanie grafiki SVG do dokumentów Mo(cid:276)esz doda(cid:232) plik SVG bezpo(cid:264)rednio do dokumentu. Umo(cid:276)liwiaj(cid:241) to znaczniki img , object i embed : img src= flag.svg alt= Japo(cid:300)ska flaga / lub: embed type= image/svg+xml src= flag.svg width= 320 height= 220 / lub: object data= flag.svg type= image/svg+xml width= 320 height= 220 /object 1 Obecnie silniki WebKit i Mozilla blokuj(cid:241) importowanie skryptów i grafiki rastrowej do plików SVG ze znaczników img . Dzieje si(cid:246) tak nawet wtedy, gdy grafika rastrowa pochodzi z tego samego (cid:274)ród(cid:228)a. Multimedialne interfejsy API w HTML5 (cid:95) 143 Kup książkęPoleć książkę Warto zauwa(cid:276)y(cid:232), (cid:276)e cho(cid:232) elementy embed i object nie maj(cid:241) atrybutu alt, grafika SVG mo(cid:276)e by(cid:232) dost(cid:246)pna. Aby zwi(cid:246)kszy(cid:232) dost(cid:246)pno(cid:264)(cid:232) strony, nale(cid:276)y opisa(cid:232) grafik(cid:246) za pomoc(cid:241) ele- mentów desc lub title i doda(cid:232) atrybut aria-label o warto(cid:264)ci odpowiadaj(cid:241)cej tytu(cid:228)owi grafiki. Gdy podasz wysoko(cid:264)(cid:232) i szeroko(cid:264)(cid:232) w pliku svg , nie musisz tego robi(cid:232) w elementach img , embed i object , natomiast te warto(cid:264)ci s(cid:241) potrzebne w stylach CSS. Technika Clown Car — SVG i dynamicznie dopasowywana grafika pierwszego planu Format SVG mo(cid:276)na wykorzysta(cid:232) do tworzenia i udost(cid:246)pniania dynamicznie dopasowywanej grafiki. Mo(cid:276)esz wykorzysta(cid:232) obs(cid:228)ug(cid:246) formatu SVG w przegl(cid:241)darkach oraz obs(cid:228)ug(cid:246) zapyta(cid:254) media i grafiki wektorowej w formacie SVG, aby tworzy(cid:232) dynamicznie dopasowywane ry- sunki. Aby pobiera(cid:232) odpowiedni(cid:241) grafik(cid:246), nale(cid:276)y zastosowa(cid:232) zapytania media w pliku SVG. Wiadomo, (cid:276)e dzi(cid:246)ki grafice t(cid:228)a ze stylów CSS mo(cid:276)liwe jest pobieranie tylko potrzebnych ry- sunków. Podobnie aby zapobiec pobieraniu w plikach SVG wszystkich do(cid:228)(cid:241)czanych obrazów, mo(cid:276)na wykorzysta(cid:232) grafik(cid:246) t(cid:228)a ze stylów CSS zamiast grafiki pierwszego planu. W dyna- micznie dopasowywanych plikach SVG nale(cid:276)y do(cid:228)(cid:241)cza(cid:232) wszystkie potrzebne rysunki i na podstawie zapyta(cid:254) media wy(cid:264)wietla(cid:232) tylko odpowiedni z nich (szczegó(cid:228)owe omówienie za- pyta(cid:254) media znajdziesz w rozdziale 7.). svg xmlns= http://www.w3.org/2000/svg viewBox= 0 0 300 329 preserveAspectRatio= xMidYMid meet title Tu wpisz warto(cid:321)(cid:240) atrybutu alt /title style svg { background-size: 100 100 ; background-repeat: no-repeat; } @media screen and (max-width: 400px) { svg { background-image: url(images/small.png ); } } @media screen and (min-width: 401px) and (max-width: 700px) { svg { background-image: url(images/medium.png); } } @media screen and (min-width: 701px) and (max-width: 1000px) { svg { background-image: url(images/big.png); } } @media screen and (min-width: 1001px) { svg { background-image: url(images/huge.png); } } /style /svg 144 (cid:95) Rozdzia(cid:293) 5. Elementy svg, canvas, audio i video Kup książkęPoleć książkę Aby zachowa(cid:232) proporcje elementów i zapewni(cid:232) ich jednolite skalowanie, zastosowa(cid:228)am atry- buty viewbox i preserveAspectRatio. Warto(cid:264)(cid:232) atrybutu viewbox to lista czterech rozdzielo- nych odst(cid:246)pami lub przecinkami liczb: minimalnej warto(cid:264)ci x, minimalnej warto(cid:264)ci y, szero- ko(cid:264)ci i wysoko(cid:264)ci. Zdefiniowanie szeroko(cid:264)ci i wysoko(cid:264)ci okna roboczego pozwala okre(cid:264)li(cid:232) proporcje grafiki SVG. Z uwagi na zwi(cid:241)zane z bezpiecze(cid:254)stwem problemy z importowaniem grafiki rastrowej za pomoc(cid:241) elementu img i plików SVG nale(cid:276)y u(cid:276)ywa(cid:232) elementu object , aby dodawa(cid:232) do witryny dynamicznie dopasowywane rysunki. Element object umo(cid:276)liwia traktowanie zewn(cid:246)trznych zasobów jak grafiki. object data= awesomefile.svg type= image/svg+xml /object Element object domy(cid:264)lnie jest tak szeroki jak element nadrz(cid:246)dny. Jednak, podobnie jak przy dodawaniu grafiki, mo(cid:276)na okre(cid:264)li(cid:232) szeroko(cid:264)(cid:232) i wysoko(cid:264)(cid:232) elementu za pomoc(cid:241) atrybu- tów width i height albo przy u(cid:276)yciu w(cid:228)a(cid:264)ciwo(cid:264)ci width i height w stylach CSS. Z uwagi na umieszczone w przyk(cid:228)adowym pliku SVG deklaracje viewbox i preserveAspectRatio element object domy(cid:264)lnie zachowa zadeklarowane proporcje, je(cid:264)li podany zostanie tylko jeden wy- miar (szeroko(cid:264)(cid:232) lub wysoko(cid:264)(cid:232)). Poniewa(cid:276) w opisanej technice u(cid:276)ywany jest element object zamiast img , nie wyst(cid:246)puje tu atrybut alt. Aby ta technika by(cid:228)a dost(cid:246)pna dla czytników ekranu z obs(cid:228)ug(cid:241) formatu SVG2, nale(cid:276)y umie(cid:264)ci(cid:232) zawarto(cid:264)(cid:232) atrybutu alt w elemencie title w pliku SVG. W elemencie object osadzany jest plik SVG. Ten plik pobiera grafik(cid:246) t(cid:228)a, która pasuje do zapytania media. Robi to na podstawie wymiarów elementu object , a nie okna roboczego. Dla pokazanego wcze(cid:264)niej kodu zg(cid:228)aszane s(cid:241) dwa (cid:276)(cid:241)dania HTTP. Jedno dotyczy pliku SVG, a drugie odpowiedniej grafiki. Aby wystarczy(cid:228)o jedno (cid:276)(cid:241)danie HTTP, w atrybucie data elementu object zapisz identyfikator URI danych (musisz zastosowa(cid:232) w nim znaki ucieczki3). Omawian(cid:241) technik(cid:246) nazywam Clown Car (czyli: samochód klauna), poniewa(cid:276) polega na umieszczaniu wielu du(cid:276)ych rysunków (klaunów) w jednym ma(cid:228)ym pliku graficznym SVG (w samochodzie). Nauka SVG Opisa(cid:228)am tu tylko podstawy formatu SVG. Pliki SVG mog(cid:241) by(cid:232) dost(cid:246)pne, skaluj(cid:241) si(cid:246) do ekranów o dowolnej rozdzielczo(cid:264)ci, a tak(cid:276)e obs(cid:228)uguj(cid:241) animacje oparte na sk(cid:228)adni SVG lub skryptach JavaScriptu. Pe(cid:228)n(cid:241) kontrol(cid:246) nad ka(cid:276)dym elementem animacji mo(cid:276)na uzyska(cid:232) za po- moc(cid:241) interfejsu API modelu SVG DOM. Za pomoc(cid:241) formatu SVG mo(cid:276)na zrobi(cid:232) bardzo wiele rzeczy, jednak ich omawianie wykracza poza zakres tej ksi(cid:241)(cid:276)ki. W specyfikacji tego formatu w witrynie W3C (http://www.w3.org/TR/SVG/) znajdziesz wi(cid:246)cej informacji na temat wszystkich elementów, atrybutów i interfejsu API do obs(cid:228)ugi animacji. 2 Zob. http://www.iheni.com/just-how-accessible-is-svg/. 3 Znaki ucieczki w identyfikatorze URI danych s(cid:241) potrzebne w Internet Explorerze 9 i nowszych wersjach tej przegl(cid:241)darki. Tu tylko pokrótce omawiam technik(cid:246) Clown Car. Wi(cid:246)cej szczegó(cid:228)ów i przyk(cid:228)adów wraz z rozwi(cid:241)zaniami rezerwowymi dla przegl(cid:241)darek, które nie obs(cid:228)uguj(cid:241) formatu SVG, znajdziesz pod adresem https://github.com/estelle/clowncar. Multimedialne interfejsy API w HTML5 (cid:95) 145 Kup książkęPoleć książkę Plik z japo(cid:254)sk(cid:241) flag(cid:241) to bardzo prosty dokument SVG. Pliki SVG mog(cid:241) by(cid:232) bardzo skompli- kowane. Je(cid:264)li znasz program Adobe Illustrator, mo(cid:276)e zauwa(cid:276)y(cid:228)e(cid:264), (cid:276)e rysunki mo(cid:276)na wyeks- portowa(cid:232) do formatu SVG. Cho(cid:232) jest to bardzo dobry sposób tworzenia skomplikowanych plików SVG, powstaje w ten sposób bardzo d(cid:228)ugi kod, a wspomniany program jest drogi. Amaya to bezp(cid:228)atny program obs(cid:228)uguj(cid:241)cy podzbiór formatu SVG. Obs(cid:228)ugiwane s(cid:241) m.in.: proste kszta(cid:228)ty, tekst, grafika, zewn(cid:246)trzne obiekty, przezroczysto(cid:264)(cid:232) oparta na kanale alfa, trans- formacje oraz animacje. Program Amaya (http://www.w3.org/Amaya/) mo(cid:276)esz pobra(cid:232) bezpo- (cid:264)rednio z witryny W3C. Amaya jest przydatna w nauce formatu SVG, poniewa(cid:276) wygenero- wany kod (cid:274)ród(cid:228)owy mo(cid:276)na bada(cid:232) i edytowa(cid:232). Mo(cid:276)esz te(cid:276) wypróbowa(cid:232) program Inkscape (http://inkscape.org/en/). Jest to edytor grafiki wektorowej. Ten edytor jest programem o otwartym dost(cid:246)pie do kodu (cid:274)ród(cid:228)owego i oferuje mo(cid:276)liwo(cid:264)ci podobne do aplikacji Illustrator, CorelDraw i Xara. Inkscape u(cid:276)ywa plików SVG w formacie zgodnym ze standardem W3C. Format SVG w grze CubeeDoo W CubeeDoo u(cid:276)ywamy formatu SVG w dwóch miejscach. Grafik(cid:241) t(cid:228)a w motywie z kszta(cid:228)ta- mi jest sprite w formacie SVG, a dla ikony wyciszenia u(cid:276)ywamy identyfikatora URI danych wskazuj(cid:241)cego plik SVG. W grze dost(cid:246)pnych jest kilka motywów, m.in.: liczby, kolory i kszta(cid:228)ty. Do tworzenia kszta(cid:228)- tów s(cid:228)u(cid:276)(cid:241) proste sprite’y w formacie SVG. Poni(cid:276)ej znajduje si(cid:246) kod do tworzenia sprite’u SVG u(cid:276)ywanego na przednich stronach kart (rysunek 5.2). 1 !DOCTYPE svg PUBLIC -//W3C//DTD SVG 1.0//EN 2 http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd 3 svg xmlns= http://www.w3.org/2000/svg height= 400 width= 400 version= 1.0 4 desc Sprite z kwadratami, kó(cid:298)kami, rombami i trójk(cid:238)tami /desc 5 6 !-- Kolorowe kwadraty -- 7 rect x= 10 y= 10 width= 80 height= 80 style= fill: #d60818; / 8 rect x= 10 y= 110 width= 80 height= 80 style= fill: #ffff33; / 9 rect x= 10 y= 210 width= 80 height= 80 style= fill: #00FF00; / 10 rect x= 10 y= 310 width= 80 height= 80 style= fill: #0000FF; / 11 12 !-- Kolorowe kó(cid:225)ka -- 13 circle cx= 150 cy= 50 r= 40 style= fill: #d60818; / 14 circle cx= 150 cy= 150 r= 40 style= fill: #ffff33; / 15 circle cx= 150 cy= 250 r= 40 style= fill: #00FF00; / 16 circle cx= 150 cy= 350 r= 40 style= fill: #0000FF; / 17 18 !-- Romby -- 19 polygon points= 250,10 210,50 250,90 290,50 style= fill: #d60818; / 20 polygon points= 250,110 210,150 250,190 290,150 style= fill: #FFFF33; / 21 polygon points= 250,210 210,250 250,290 290,250 style= fill: #00FF00; / 22 polygon points= 250,310 210,350 250,390 290,350 style= fill: #0000FF; / 23 24 !-- Trójk(cid:261)ty -- 25 polygon points= 310,10 350,90 390,10 style= fill: #d60818; / 26 polygon points= 310,110 350,190 390,110 style= fill: #FFFF33; / 27 polygon points= 310,210 350,290 390,210 style= fill: #00FF00; / 28 polygon points= 310,310 350,390 390,310 style= fill: #0000FF; / 29 /svg 146 (cid:95) Rozdzia(cid:293) 5. Elementy svg, canvas, audio i video Kup książkęPoleć książkę Rysunek 5.2. Sprite SVG z kszta(cid:228)tami Wiersz 1 zawiera deklaracj(cid:246) DTD. W wierszu 3 deklarowany jest element g(cid:228)ówny. Podana jest tu te(cid:276) wysoko(cid:264)(cid:232) i szeroko(cid:264)(cid:232) grafiki SVG. Cho(cid:232) zgodnie ze specyfikacj(cid:241) nie trzeba podawa(cid:232) tych atrybutów, s(cid:241) one niezb(cid:246)dne, je(cid:264)li chcesz u(cid:276)ywa(cid:232) rysunku SVG jako grafiki t(cid:228)a. W wierszu 4 znajduje si(cid:246) opis, co zwi(cid:246)ksza dost(cid:246)pno(cid:264)(cid:232) stron i pomaga w ich optymalizacji ze wzgl(cid:246)du na wyszukiwarki. W wierszach od 7 do 10 znajduj(cid:241) si(cid:246) deklaracje czterech kwadratów. Wiersz 9 oznacza: utwórz prostok(cid:241)t w odleg(cid:228)o(cid:264)ci 10 pikseli od lewej kraw(cid:246)dzi i 210 pikseli od górnej kraw(cid:246)dzi; prostok(cid:241)t ma by(cid:232) szeroki na 80 pikseli i wysoki na 80 pikseli; wype(cid:228)nij utworzony kszta(cid:228)t kolorem #00FF00. rect x= 10 y= 210 width= 80 height= 80 style= fill: #00FF00; / W wierszach od 13 do 16 zdefiniowane s(cid:241) cztery kó(cid:228)ka. Wiersz 16 oznacza: znajd(cid:274) punkt od- dalony o 150 pikseli od lewej kraw(cid:246)dzi i 350 pikseli od górnej kraw(cid:246)dzi; ustaw ten punkt jako (cid:264)rodek kó(cid:228)ka o promieniu 40 pikseli wype(cid:228)nionego kolorem #0000FF. circle cx= 150 cy= 350 r= 40 style= fill: #0000FF; / Wiersz od 18 do 28 zawieraj(cid:241) osiem wielok(cid:241)tów: cztery romby i trzy trójk(cid:241)ty. Wielok(cid:241)ty de- klaruje si(cid:246) przez podanie ich naro(cid:276)ników. Wiersz 19 oznacza: ten kszta(cid:228)t ma cztery naro(cid:276)niki; pierwszy punkt jest oddalony o 250 pikseli od lewej kraw(cid:246)dzi i 10 pikseli od górnej kraw(cid:246)dzi; drugi punkt jest oddalony o 210 pikseli od lewej kraw(cid:246)dzi i 50 pikseli od górnej kraw(cid:246)dzi; trzeci punkt jest oddalony o 250 pikseli od lewej kraw(cid:246)dzi i 90 pikseli od górnej kraw(cid:246)dzi; czwarty punkt jest oddalony o 290 pikseli od lewej kraw(cid:246)dzi i 50 pikseli od górnej kraw(cid:246)dzi; obszar mi(cid:246)dzy tymi punktami nale(cid:276)y wype(cid:228)ni(cid:232) kolorem #d60818 (jest to odcie(cid:254) czerwonego). polygon points= 250,10 210,50 250,90 290,50 style= fill: #d60818; / Pokazany kod tworzy kwadraty, kó(cid:228)ka, romby i trójk(cid:241)ty obrócone podstaw(cid:241) do góry. Te ma(cid:228)e rysunki mo(cid:276)na te(cid:276) zapisa(cid:232) jako identyfikatory URI danych bezpo(cid:264)rednio w pliku CSS lub udost(cid:246)pni(cid:232) jako grafik(cid:246) pierwszego planu. Mo(cid:276)esz np. doda(cid:232) zakodowany plik SVG jako identyfikator URI danych: background-image: url(data:image/svg+xml, 3Csvg 20xmlns 3D 22http 3A 2F 2F www.w3.org 2F2000 2Fsvg 22 20version 3D 221.0 22 3E 3Crect 20x 3D 220 22 20y 3D 220 22 20fill 3D 22 23abcdef 22 20width 3D 22100 25 22 20height 3D 22100 25 22 20 2F 3E 3C 2Fsvg 3E); Multimedialne interfejsy API w HTML5 (cid:95) 147 Kup książkęPoleć książkę W CubeeDoo pojawia si(cid:246) tak(cid:276)e ikona wyciszenia d(cid:274)wi(cid:246)ku. Identyfikator URI danych dla tej ikony wygl(cid:241)da tak: background-image: background-image: url( data:image/svg+xml;utf8, 3Csvg 20xmlns= http://www.w3.org/2000/svg 20width= 100 20height= 100 3E 3Cpolygon 20points= 39,13 2022,28 206,28 206,47 2022,48 2039,63 2039,14 20style= stroke:#111111;stroke-width:5;stroke-linejoin:round; fill:#111111; 20/ 3E 3Cpath 20d= M 2048,50 2069,26 20 20style= fill:none; stroke:#111111;stroke-width:5;stroke-linecap:round 20/ 3E 3Cpath 20 20d= M 2069,50 2048,26 20style= fill:none;stroke:#111111;stroke-width:5; stroke-linecap:round 20/ 3E 3C/svg 3E ); Dane w tym przyk(cid:228)adzie s(cid:241) ma(cid:228)o czytelne dla ludzi. Utworzono jest za pomoc(cid:241) programu Amaya. Sk(cid:228)adnia powinna jednak wygl(cid:241)da(cid:232) znajomo. U(cid:276)ywamy tu w(cid:228)a(cid:264)ciwo(cid:264)ci background-image ze stylów CSS. Zamiast wywo(cid:228)ania url(path/mute.jpg) lub nawet url(path/mute.svg) sto- sujemy instrukcj(cid:246) url( data:image/svg+xml;utf8, svg... / /svg );. Ca(cid:228)y plik SVG ze znakami ucieczki jest uj(cid:246)ty w cudzys(cid:228)ów. Zgodnie ze specyfikacj(cid:241) dla wersji Internet Explorera obs(cid:228)uguj(cid:241)cych format SVG (obecnie s(cid:241) to wersje 9 i 10) w identyfikatorach URI danych nale(cid:276)y stosowa(cid:232) znaki ucieczki. Element canvas Specyfikacja HTML5 Canvas dotyczy przeznaczonego do tworzenia rysunków interfejsu API JavaScriptu. Ten interfejs umo(cid:276)liwia zdefiniowanie na stronie HTML obiektu p(cid:228)ótna w posta- ci elementu canvas , po którym mo(cid:276)na rysowa(cid:232). Rysunki utworzone w ten sposób mo(cid:276)na nawet wstawia(cid:232) w stylach CSS jako grafik(cid:246) t(cid:228)a. Rysowa(cid:232) mo(cid:276)na w przestrzeni dwu- lub trójwymiarowej (do tworzenia rysunków trójwy- miarowych s(cid:228)u(cid:276)y technologia WebGL). Rysunki dwuwymiarowe s(cid:241) obs(cid:228)ugiwane we wszyst- kich nowych przegl(cid:241)darkach internetowych. Technologia WebGL dopiero zyskuje popularno(cid:264)(cid:232) w (cid:264)wiecie mobilnym. Ze wzgl(cid:246)du na wydajno(cid:264)(cid:232) nale(cid:276)y j(cid:241) stosowa(cid:232) tylko w urz(cid:241)dzeniach ze sprz(cid:246)tow(cid:241) akceleracj(cid:241) grafiki. W wersji dwuwymiarowej dost(cid:246)pny jest prosty, ale daj(cid:241)cy du(cid:276)e mo(cid:276)liwo(cid:264)ci interfejs API do szybkiego rysowania na dwuwymiarowych bitmapach. Nie wyst(cid:246)puje tu konkretny format plików, a rysowa(cid:232) mo(cid:276)na tylko za pomoc(cid:241) skryptów. Nie s(cid:241) dost(cid:246)pne w(cid:246)z(cid:228)y modelu DOM odpowiadaj(cid:241)ce poszczególnym rysowanym kszta(cid:228)tom. Element canvas s(cid:228)u(cid:276)y do rysowania pikseli, a nie wektorów. U(cid:276)ywanie tylko jednego w(cid:246)z(cid:228)a sprawia, (cid:276)e element canvas wydaje si(cid:246) wygodny w obs(cid:228)udze dla przegl(cid:241)darek mobilnych, jednak wysokie zapotrzebowanie na cykle procesora ze strony animacji JavaScriptu mo(cid:276)e szybko wyczerpywa(cid:232) baterie urz(cid:241)dze(cid:254) przeno(cid:264)nych (cho(cid:232) dzi(cid:246)ki akceleracji sprz(cid:246)towej zu(cid:276)ycie baterii jest ni(cid:276)sze). Pierwszy element canvas Poniewa(cid:276) jest to bardzo podstawowe wprowadzenie do elementu canvas , omawiam tu tylko proste kszta(cid:228)ty i linie. Je(cid:264)li nie znasz JavaScriptu, sk(cid:228)adnia mo(cid:276)e by(cid:232) pocz(cid:241)tkowo ma(cid:228)o zro- zumia(cid:228)a. Je(cid:276)eli jednak znasz ten j(cid:246)zyk, powiniene(cid:264) rozumie(cid:232) przedstawiony kod. Pierwszy krok polega na dodaniu do dokumentu elementu canvas . W HTML-u jest to je- dyna potrzebna operacja. 148 (cid:95) Rozdzia(cid:293) 5. Elementy svg, canvas, audio i video Kup książkęPoleć książkę canvas id= flag width= 320 height= 220 Przegl(cid:238)darka nie obs(cid:298)uguje elementu canvas . Gdyby obs(cid:298)ugiwa(cid:298)a, zobaczy(cid:298)by(cid:321) flag(cid:258). /canvas To ju(cid:276) wszystko, co trzeba zrobi(cid:232) w HTML-u, aby doda(cid:232) element canvas . Mo(cid:276)na napisa(cid:232) tylko canvas /canvas . Atrybut id jest u(cid:276)ywany, aby u(cid:228)atwi(cid:232) wskazywanie elementu w Java- Scripcie, cho(cid:232) mo(cid:276)na te(cid:276) go wskaza(cid:232) za pomoc(cid:241) modelu DOM. Doda(cid:228)am równie(cid:276) zast(cid:246)pczy tekst dla u(cid:276)ytkowników, których przegl(cid:241)darka nie obs(cid:228)uguje elementu canvas lub którzy z innych przyczyn nie mog(cid:241) zobaczy(cid:232) tego elementu. Element canvas w obecnej wersji to interfejs API, który nie zapewnia dost(cid:246)pno(cid:264)ci stron. Jedyna mo(cid:276)liwo(cid:264)(cid:232) poprawienia dost(cid:246)pno(cid:264)ci to dodanie atrybutu aria-label. Ten kod tworzy pust(cid:241) tablic(cid:246) do rysowania — p(cid:228)ótno. Wszystkie pozosta(cid:228)e zadania wyko- nuje si(cid:246) w JavaScripcie. Tu kod ponownie tworzy japo(cid:254)sk(cid:241) flag(cid:246). Przedstawia j(cid:241) rysunek 5.3. Rysunek 5.3. Japo(cid:254)ska flaga utworzona jako element canvas Nast(cid:246)pny krok polega na utworzeniu rysunku na p(cid:228)ótnie. Od tego momentu wszystko dzieje si(cid:246) w JavaScripcie. W(cid:246)ze(cid:228) canvas mo(cid:276)na wskaza(cid:232) w prostym JavaScripcie na trzy sposoby: document.getElementById( flag ) document.getElementsByTagName( canvas )[0] document.querySelector( #flag ) Potem nale(cid:276)y zainicjowa(cid:232) kontekst dwuwymiarowy i rozpocz(cid:241)(cid:232) rysowanie za pomoc(cid:241) polece(cid:254) interfejsu API tego kontekstu. Kod rysuje tu japo(cid:254)sk(cid:241) flag(cid:246). 1 script 2 var el= document.getElementById( flag ); 3 4 if (el el.getContext) { 5 var context = el.getContext( 2d ); 6 if (context) { 7 context.fillStyle = #ffffff ; 8 context.strokeStyle = #cccccc ; 9 context.lineWidth = 1; 10 context.shadowOffsetX = 5; 11 context.shadowOffsetY = 5; 12 context.shadowBlur = 4; 13 context.shadowColor = rgba(0, 0, 0, 0.4) ; 14 context.strokeRect(10, 10, 300, 200); 15 context.fillRect(10, 10, 300, 200); 16 context.shadowColor= rgba(0,0,0,0) ; 17 context.beginPath(); 18 context.fillStyle = #d60818 ; 19 context.arc(160, 107, 60, 0, Math.PI*2, false); Multimedialne interfejsy API w HTML5 (cid:95) 149 Kup książkęPoleć książkę 20 context.closePath(); 21 context.fill(); 22 } 23 } 24 /script Kod w wierszu 2 znajduje odpowiedni element canvas na podstawie atrybutu id tego elementu. Przed utworzeniem kontekstu dwuwymiarowego nale(cid:276)y sprawdzi(cid:232), (cid:276)e element canvas zosta(cid:228) odnaleziony oraz (cid:276)e przegl(cid:241)darka obs(cid:228)uguje takie elementy. W tym celu w wierszu 4 kod sprawdza, czy dost(cid:246)pna jest metoda getContext. Mo(cid:276)na wykorzysta(cid:232) skrypty do wykrywania funkcji (np. Modernizr — http://modernizr. com/) do sprawdzania, czy przegl(cid:241)darka obs(cid:228)uguje element canvas i inne nowe mechanizmy. Modernizr pozwala wykrywa(cid:232) wszystkie funkcje lub tylko potrzebny w danym momencie mechanizm. Nie u(cid:276)ywam tu tego narz(cid:246)dzia, poniewa(cid:276) chc(cid:246) po- kaza(cid:232), jak bezpo(cid:264)rednio sprawdza(cid:232) dost(cid:246)pno(cid:264)(cid:232) funkcji. Zwykle jednak warto stosowa(cid:232) Modernizr, chyba (cid:276)e chcesz zminimalizowa(cid:232) liczb(cid:246) u(cid:276)ywanych zewn(cid:246)trznych skryp- tów i (cid:276)(cid:241)da(cid:254) HTTP. W wierszu 5 kod tworzy referencj(cid:246) do kontekstu, wywo(cid:228)uj(cid:241)c metod(cid:246) getContext(contextId) elementu canvas . W(cid:228)a(cid:264)ciwym kontekstem dla tego elementu jest 2d. Je(cid:264)li tworzenie kon- tekstu ko(cid:254)czy si(cid:246) powodzeniem (co kod sprawdza w wierszu 6), mo(cid:276)na wreszcie przej(cid:264)(cid:232) do rysowania, za co odpowiada reszta skryptu. Wprawdzie jest to technika eksperymentalna, ale je(cid:264)li chcesz w przegl(cid:241)darce z silnikiem WebKit umie(cid:264)ci(cid:232) rysunek z elementu canvas jako t(cid:228)o za pomoc(cid:241) stylów CSS (http://updates.html5rocks.com/ 2012/12/Canvas-driven-background-images)4, to zamiast wywo(cid:228)ywa(cid:232) element canvas w modelu DOM, mo(cid:276)esz doda(cid:232) rysunek jako grafik(cid:246) t(cid:228)a. W stylach CSS nale(cid:276)y zastosowa(cid:232) nast(cid:246)puj(cid:241)cy kod: background: -webkit-canvas(theCanvas); W JavaScripcie umie(cid:264)(cid:232) poni(cid:276)sze wywo(cid:228)anie: var context = document.getCSSCanvasContext( 2d , theCanvas , 320, 220); Drugi parametr jest tu nazw(cid:241) u(cid:276)ywanego elementu canvas , któr(cid:241) bez cudzys(cid:228)owu podano w stylach CSS. Do wiersza 6, a nawet do wiersza 13 kod nic nie rysuje. Do wiersza 6 definiowany jest jedynie kontekst elementu canvas , który umo(cid:276)liwia rysowanie i modyfikowanie pikseli. Przed narysowaniem kszta(cid:228)tu trzeba zdefiniowa(cid:232) jego wygl(cid:241)d i styl. W tym celu nale(cid:276)y ustawi(cid:232) w(cid:228)a(cid:264)ciwo(cid:264)ci w obiekcie context. Tu kod definiuje wygl(cid:241)d obramowania (w(cid:228)a(cid:264)ci- wo(cid:264)ci stroke i linewidth), kolor t(cid:228)a (w(cid:228)a(cid:264)ciwo(cid:264)(cid:232) fill) i cie(cid:254) (w(cid:228)a(cid:264)ciwo(cid:264)ci shadowOffsetX, shadowOffsetY, shadowBlur i shadowColor) dla pierwszego prostok(cid:241)ta, który jest rysowany za pomoc(cid:241) metody strokeRect() w wierszu 14. Przekazywane s(cid:241) tu te same parametry co w przyk(cid:228)adowym pliku SVG (10, 10, 300, 200). Te cztery warto(cid:264)ci okre(cid:264)laj(cid:241) wspó(cid:228)rz(cid:246)dne x i y oraz szeroko(cid:264)(cid:232) i wysoko(cid:264)(cid:232). 4 Firefox 4 i nowsze wersje tej przegl(cid:241)darki tak(cid:276)e obs(cid:228)uguj(cid:241) element canvas w stylach CSS. Pozwala to dy- i wywo(cid:228)ania –moz- tworzy(cid:232) wirtualny element canvas za pomoc(cid:241) namicznie element( #elementCanvas ) w stylach CSS. JavaScriptu 150 (cid:95) Rozdzia(cid:293) 5. Elementy svg, canvas, audio i video Kup książkęPoleć książkę Po wykonaniu polecenia skrypt „zapomina” o tym, co zrobi(cid:228) wcze(cid:264)niej, i przechodzi do na- st(cid:246)pnego wiersza. Inaczej ni(cid:276) w przyk(cid:228)adowym pliku SVG z wcze(cid:264)niejszego punktu, tu pro- stok(cid:241)t jest rysowany w elemencie canvas i nie jest cz(cid:246)(cid:264)ci(cid:241) modelu DOM. W(cid:228)a(cid:264)ciwo(cid:264)ci stroke, fill, linewidth i border s(cid:241) zapami(cid:246)tywane, jednak przegl(cid:241)darka i skrypt nie potra- fi(cid:241) okre(cid:264)li(cid:232), co zosta(cid:228)o narysowane. Je(cid:264)li chcesz rejestrowa(cid:232), co i w którym miejscu jest ryso- wane w elemencie canvas , wykorzystaj metod(cid:246) getImageData() kontekstu do zapisania warto(cid:264)ci sk(cid:228)adowych czerwonej, zielonej i niebieskiej oraz kana(cid:228)u alfa pikseli. W wierszu 15 kod wywo(cid:228)uje metod(cid:246) fillRect, co prowadzi do narysowania drugiego pro- stok(cid:241)ta za pomoc(cid:241) ustawionej wcze(cid:264)niej w(cid:228)a(cid:264)ciwo(cid:264)ci fillStyle. Trzeba tu ponownie poda(cid:232) wspó(cid:228)rz(cid:246)dne, poniewa(cid:276) pierwszy prostok(cid:241)t nie jest zapami(cid:246)tywany w modelu DOM (cho(cid:232) mo(cid:276)na uzyska(cid:232) dost(cid:246)p do informacji o pikselach). W obu wywo(cid:228)aniach metod tworz(cid:241)cych prostok(cid:241)ty (wiersze 14 i 15) u(cid:276)ywane s(cid:241) identyczne parametry — 10, 10, 300 i 200. Powoduje to narysowanie prostok(cid:241)ta z wype(cid:228)nieniem bez- po(cid:264)rednio na prostok(cid:241)cie reprezentuj(cid:241)cym cie(cid:254). Mo(cid:276)na utworzy(cid:232) obiekt ze wspó(cid:228)rz(cid:246)dnymi i przekaza(cid:232) go do obu metod, jednak nie da si(cid:246) za pomoc(cid:241) elementu canvas uzyska(cid:232) do- st(cid:246)pu do wspó(cid:228)rz(cid:246)dnych pierwszego prostok(cid:241)ta i skopiowa(cid:232) ich do drugiego. Kod najpierw rysuje prostok(cid:241)t, a potem go wype(cid:228)nia. Gdyby zast(cid:241)pi(cid:232) kolejno(cid:264)(cid:232) tych operacji, cie(cid:254) znajdowa(cid:228)by si(cid:246) nad kolorem t(cid:228)a. Poniewa(cid:276) wspó(cid:228)rz(cid:246)dne s(cid:241) identyczne, a obramowanie jest ustawione na 1 piksel szeroko(cid:264)ci, ostatecznie ramka ma 0,5 piksela, poniewa(cid:276) wype(cid:228)nienie zajmuje wewn(cid:246)trzn(cid:241) po(cid:228)ow(cid:246) jej szeroko(cid:264)ci. Jak wcze(cid:264)niej wspomnia(cid:228)am, w momencie rozpocz(cid:246)cia rysowania kó(cid:228)ka (s(cid:228)o(cid:254)ca) na fladze, w modelu DOM nie ma informacji o narysowanych wcze(cid:264)niej elementach. To prawda, Java- Script zapami(cid:246)tuje ustawione warto(cid:264)ci w(cid:228)a(cid:264)ciwo(cid:264)ci, np. shadowColor. Zapami(cid:246)tuje te(cid:276) ostat- nie operacje niezale(cid:276)nie od tego, czy dana figura zosta(cid:228)a narysowana. Jednak piksele w ele- mencie canvas to tylko punkty o okre(cid:264)lonym kolorze. Poniewa(cid:276) czerwone kó(cid:228)ko nie ma mie(cid:232) cienia, przed narysowaniem kó(cid:228)ka trzeba ustawi(cid:232) w(cid:228)a(cid:264)ciwo(cid:264)(cid:232) shadowColor tak, aby by(cid:228)a prze- zroczysta, co robi kod w wierszu 16. Instrukcje dotycz(cid:241)ce rysowania kó(cid:228)ka rozpoczynaj(cid:241) si(cid:246) od wywo(cid:228)ania beginPath() (wiersz 17), a ko(cid:254)cz(cid:241) wywo(cid:228)aniem closePath() (wiersz 20). Skrypt zapami(cid:246)tuje operacje rysowania nie- zale(cid:276)nie od tego, czy element zosta(cid:228) ju(cid:276) narysowany. Je(cid:264)li rysujesz kó(cid:228)ko, a nast(cid:246)pnie bez otwierania i zamykania kontekstu dodasz kilka linii, to w momencie rysowania linii kó(cid:228)ko nadal b(cid:246)dzie w pami(cid:246)ci. Nowa linia mo(cid:276)e wtedy przechodzi(cid:232) przez kó(cid:228)ko i przecina(cid:232) je na pó(cid:228). Tu unikam tego dzi(cid:246)ki otwarciu i zamkni(cid:246)ciu (cid:264)cie(cid:276)ki za pomoc(cid:241) wywo(cid:228)ywa(cid:254) beginPath() i closePath(). Kó(cid:228)ko jest definiowane za pomoc(cid:241) wywo(cid:228)ania context.arc(wspó(cid:298)rz(cid:258)dna_x, wspó(cid:298)rz(cid:258)dna_y, promie(cid:300), k(cid:238)t_pocz(cid:238)tkowy, k(cid:238)t_ko(cid:300)cowy, niezgodnie_z_ruchem_wskazówek_zegara). Powo- duje ono dodanie punktów do krzywej, w wyniku czego powstaje wirtualny okr(cid:241)g opisany za pomoc(cid:241) argumentów wywo(cid:228)ania. Tu tym wywo(cid:228)aniem jest context.arc(160, 107, 60, 0, Math.PI*2, false);. Rysowanie zaczyna si(cid:246) od okre(cid:264)lonego k(cid:241)ta pocz(cid:241)tkowego (tu jest to 0, czyli pozioma linia biegn(cid:241)ca w prawo) i ko(cid:254)czy si(cid:246) podanym k(cid:241)tem ko(cid:254)cowym. Rysowanie odbywa si(cid:246) zgodnie z okre(cid:264)lonym kierunkiem (tu zgodnie z ruchem wskazówek zegara). Gdyby k(cid:241)t ko(cid:254)cowy by(cid:228) mniejszy ni(cid:276) 2(cid:652), „kó(cid:228)ko” by(cid:228)oby przyci(cid:246)te — punkty pocz(cid:241)tkowy i ko(cid:254)cowy by(cid:228)yby po(cid:228)(cid:241)czone prost(cid:241) lini(cid:241). Warto(cid:264)(cid:232) (cid:652) powoduje utworzenie pó(cid:228)okr(cid:246)gu. Multimedialne interfejsy API w HTML5 (cid:95) 151 Kup książkęPoleć książkę Ponadto w wierszu 18. zmieniany jest kolor wype(cid:228)nienia (z bia(cid:228)ego na czerwony). Nast(cid:246)pnie kod wype(cid:228)nia utworzone kó(cid:228)ko za pomoc(cid:241) metody fill() (wiersz 21) wed(cid:228)ug koloru ustawio- nego we w(cid:228)a(cid:264)ciwo(cid:264)ci fillStyle. Nie opisa(cid:228)am tu nawet podstaw mo(cid:276)liwo(cid:264)ci, jakie daje element canvas . Pod adresem http://ie.microsoft.com/testdrive/Graphics/CanvasPad/Default.html znajdziesz ciekaw(cid:241) stron(cid:246), która pomaga w nauce u(cid:276)ywania prostych kszta(cid:228)tów, kolorów, cieni, tekstu, rysunków, transformacji, animacji i przesuwania kursora w elemencie canvas . Przyk(cid:293)adowy kod wykorzystuj(cid:233)cy element canvas W przyk(cid:228)adowej grze w celu zwi(cid:246)kszenia trudno(cid:264)ci gry na wy(cid:276)szych poziomach zmieniamy t(cid:228)o planszy. W animacji pojawiaj(cid:241) si(cid:246) kszta(cid:228)ty z przednich stron kart, przez co najwy(cid:276)sze po- ziomy s(cid:241) niezwykle trudne. W internetowych materia(cid:228)ach do tego rozdzia(cid:228)u (http://www.standardista.com/mobile/) znajduje si(cid:246) kilka przyk(cid:228)adowych fragmentów kodu wykorzystuj(cid:241)cych element canvas . Spróbuj na- rysowa(cid:232) japo(cid:254)sk(cid:241) flag(cid:246), a nast(cid:246)pnie przekszta(cid:228)ci(cid:232) j(cid:241) w statyczny rysunek Pac-Mana (czerwone kó(cid:228)ko zmie(cid:254) w (cid:276)ó(cid:228)te, a nast(cid:246)pnie dodaj bu(cid:274)k(cid:246), czarne kó(cid:228)ka jako oczy, a obok kó(cid:228)ka trzy ma(cid:228)e kropki do zjedzenia). W przyk(cid:228)adach z materia(cid:228)ów znajdziesz te(cid:276) tekst z kodem wykraczaj(cid:241)cym poza zakres tej ksi(cid:241)(cid:276)ki. Opisana jest w nim funkcja zmieniaj(cid:241)ca kolory Pac-Mana. Pomo(cid:276)e Ci to nauczy(cid:232) si(cid:246), jak uzyska(cid:232) dost(cid:246)p do pikseli narysowanych ju(cid:276) w elemencie canvas . Poznasz te(cid:276) inne metody rysowania na stronie. Cho(cid:232) w tej ksi(cid:241)(cid:276)ce poda(cid:228)am przyk(cid:228)ad wykorzystania elementu canvas w grze CubeeDoo, obecnie nie stosowa(cid:228)abym dynamicznie generowanych elementów canvas w produkcyjnej wersji mobilnej aplikacji sieciowej. Przy dzisiejszym stanie technologii zu(cid:276)ycie baterii w wy- niku wykonywania animacji w elemencie canvas za pomoc(cid:241) JavaScriptu by(cid:228)oby dla u(cid:276)yt- kowników bardzo nieprzyjemne, jednak akceleracja sprz(cid:246)towa dla elementu canvas jest coraz lepsza. Element canvas a element svg Elementy canvas i svg maj(cid:241) w HTML5 kilka podobnych cech. Cz(cid:246)sto porównuje si(cid:246) ze sob(cid:241) te elementy. Oba zwi(cid:241)zane s(cid:241) z technologiami sieciowymi, które pozwalaj(cid:241) tworzy(cid:232) za- awansowane grafiki w przegl(cid:241)darkach. Jednak mi(cid:246)dzy tymi technologiami wyst(cid:246)puj(cid:241) po- wa(cid:276)ne ró(cid:276)nice. W formacie SVG rysowanie odbywa si(cid:246) za pomoc(cid:241) XML-a. W elementach canvas u(cid:276)ywany jest do tego JavaScript. Przy u(cid:276)ywaniu tego elementu piksele s(cid:241) rysowane na p(cid:228)ótnie, a po ich dodaniu ka(cid:276)dy piksel jest zapominany. W SVG powstaj(cid:241) w(cid:246)z(cid:228)y modelu DOM. Mo(cid:276)na do nich uzyska(cid:232) dost(cid:246)p do momentu ich usuni(cid:246)cia lub opuszczenia strony przez u(cid:276)ytkownika. Obie te technologie maj(cid:241) wady i zalety. Rysunki w formacie SVG dostosowuj(cid:241) si(cid:246) do dowolnej rozdzielczo(cid:264)ci, dzi(cid:246)ki czemu doskonale nadaj(cid:241) si(cid:246) do interfejsów o dowolnych wymiarach (mo(cid:276)na skalowa(cid:232) je pod k(cid:241)tem rozdziel- czo(cid:264)ci ka(cid:276)dego ekranu). Rysunki w tym formacie s(cid:241) zapisywane w plikach XML, co pozwala (cid:228)atwo zwi(cid:246)kszy(cid:232) dost(cid:246)pno(cid:264)(cid:232) stron. Rysunki SVG mo(cid:276)na animowa(cid:232) albo za pomoc(cid:241) sk(cid:228)adni de- klaratywnej, albo przy u(cid:276)yciu JavaScriptu. Ka(cid:276)dy narysowany element jest cz(cid:246)(cid:264)ci(cid:241) modelu SVG DOM i mo(cid:276)na uzyska(cid:232) dost(cid:246)p do niego w JavaScripcie. Jednak korzystanie z modelu DOM spowalnia dzia(cid:228)anie strony, co jest wa(cid:276)ne i odczuwalne zw(cid:228)aszcza w (cid:264)rodowisku mobilnym. 152 (cid:95) Rozdzia(cid:293) 5. Elementy svg, canvas, audio i video Kup książkęPoleć książkę W elementach canvas wszystko jest rysowane za pomoc(cid:241) pikseli. Zwi(cid:246)kszenie rysunku mo(cid:276)e prowadzi(cid:232) do powstania efektu pikselizacji. Element canvas zmniejsza dost(cid:246)pno(cid:264)(cid:232) stron. Mo(cid:276)na jedynie doda(cid:232) rezerwowy tekst pokazywany, gdy nie da si(cid:246) wy(cid:264)wietli(cid:232) tego elementu. Aby umo(cid:276)liwi(cid:232) interakcje, trzeba ponownie narysowa(cid:232) ka(cid:276)dy piksel. Narysowane elementy nie s(cid:241) dost(cid:246)pne jako w(cid:246)z(cid:228)y DOM. Nie ma te(cid:276) interfejsu API do tworzenia animacji. Zamiast tego zwykle u(cid:276)ywa si(cid:246) zegarów lub wywo(cid:228)a(cid:254) requestAnimationFrame, aby aktuali- zowa(cid:232) element canvas w krótkich odst(cid:246)pach czasu. Element canvas zapewnia powierzch- ni(cid:246), po której mo(cid:276)na rysowa(cid:232) za pomoc(cid:241) interfejsu API wybranego kontekstu. Ten element doskonale nadaje si(cid:246) do edytowania grafiki, generowania grafiki rastrowej na potrzeby gier lub tworzenia fraktali, a tak(cid:276)e do wykonywania operacji wymagaj(cid:241)cych manipulwania da- nymi na poziomie pikseli. Rysunki utworzone za pomoc(cid:241) interfejsu API elementu canvas mo(cid:276)na te(cid:276) eksportowa(cid:232). Dwuwymiarowy kontekst elementu canvas jest dobrze obs(cid:228)ugiwany we wszystkich prze- gl(cid:241)darkach (od Internet Explorera 9). Tak(cid:276)e grafika SVG jest poprawnie interpretowana, ale w ró(cid:276)nych formatach (od Internet Explorera 9 i Androida 3). Cho(cid:232) obie te technologie s(cid:241) po- prawnie obs(cid:228)ugiwane, obie maj(cid:241) te(cid:276) pewne wady. Wydajno(cid:264)(cid:232) grafiki SVG bywa niska. Przegl(cid:241)darki mobilne maj(cid:241) trudno(cid:264)ci z obs(cid:228)ugiwaniem du(cid:276)ej liczby elementów modelu DOM. Ka(cid:276)dy dodatkowy w(cid:246)ze(cid:228) modelu DOM zajmuje pa- mi(cid:246)(cid:232) i wymaga ponownego przetworzenia w momencie zmiany uk(cid:228)adu strony. Dlatego przy tworzeniu aplikacji na przegl(cid:241)darki mobilne nale(cid:276)y ogranicza(cid:232) liczb(cid:246) dodawanych w(cid:246)z(cid:228)ów modelu DOM. Rysunki SVG sk(cid:228)adaj(cid:241) si(cid:246) z w(cid:246)z(cid:228)ów modelu DOM. Wi(cid:246)ksza liczba takich w(cid:246)- z(cid:228)ów mo(cid:276)e prowadzi(cid:232) do spadku wydajno(cid:264)ci, a w skrajnych przypadkach nawet do zawie- szenia si(cid:246) przegl(cid:241)darki mobilnej. Z kolei element canvas przy stosowaniu animacji (w od- ró(cid:276)nieniu od generowania pojedynczych rysunków) mo(cid:276)e szybko zu(cid:276)y(cid:232) bateri(cid:246) urz(cid:241)dzenia. Jednak we wszystkich popularnych przegl(cid:241)darkach dost(cid:246)pna jest akceleracja sprz(cid:246)towa dla tego elementu, dzi(cid:246)ki czemu czas rysowania i aktualizowania jest znacznie krótszy, a zu(cid:276)ycie baterii — mniejsze. Sam uwzgl(cid:246)dnij wady i zalety obu technologii, zanim zdecydujesz si(cid:246) na zastosowanie jednej z nich (lub zrezygnowanie z obu). WebGL Obs(cid:228)uga grafiki trójwymiarowej i technologii WebGL jest dopiero wprowadzana. Obecnie wy- st(cid:246)puj(cid:241) powa(cid:276)ne problemy z wydajno(cid:264)ci(cid:241), znacznym zu(cid:276)yciem baterii i ograniczon(cid:241) obs(cid:228)ug(cid:241) w urz(cid:241)dzeniach przeno(cid:264)nych. W czasie, gdy powstawa(cid:228)a ta ksi(cid:241)(cid:276)ka, najlepsz(cid:241) obs(cid:228)ug(cid:246) tech- nologii WebGL zapewnia(cid:228) syst
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

HTML5. Strony mobilne
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ą: