Tytuł oryginału: Mobile HTML5

Tytuł oryginału Mobile HTML5

Tłumaczenie Tomasz Walczak

ISBN 978-83-246-8912-5

copy 2014 Helion SA

Authorized Polish translation of the English edition Mobile HTML5 ISBN 9781449311414 copy 2014 Estelle Weyl

This translation is published and sold by permission of OrsquoReilly 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ą roacutewnież żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce

Wydawnictwo HELIONul Kościuszki 1c 44-100 GLIWICEtel 32 231 22 19 32 230 98 63e-mail helionhelionplWWW httphelionpl (księgarnia internetowa katalog książek)

Drogi CzytelnikuJeżeli chcesz ocenić tę książkę zajrzyj pod adres httphelionpluseropiniehtm5smMożesz tam wpisać swoje uwagi spostrzeżenia recenzję

Printed in Poland

bull Kup książkębull Poleć książkę bull Oceń książkę

bull Księgarnia internetowabull Lubię to raquo Nasza społeczność

3

Spis tre ci

Wprowadzenie 11

1 Przygotowania do nauki interfejsoacutew API HTML5 CSS3 i JavaScriptu 25CubeeDoo mdash gra na urz dzenia przeno ne napisana w HTML5 26Narz dzia programistyczne 28

Edytor tekstu 28Przegl darka 28Narz dzia do debugowania 29Debugery stacjonarne 30Zdalne debugowanie 32

Narz dzia do testowania 37Emulatory i symulatory 38Narz dzia dost pne w internecie 39Telefony 40Testy zautomatyzowane 42

2 Przechodzenie na HTML5 43Sk adnia j zyka HTML5 43

Elementy 44Atrybuty 45Atrybuty globalne i atrybuty internacjonalizacji 45Atrybuty z HTML-a 4 ktoacutere sta y si globalne w HTML5 48Nowo w HTML5 mdash globalne atrybuty zwi zane z dost pno ci

i elementami interaktywnymi 50Sk adnia elementoacutew i atrybutoacutew w HTML-u 54

Elementy samozamykaj ce 55Najlepsze praktyki 56Wymagane komponenty 57Elementy ze znacznika ltheadgt 62

Kup książkę Poleć książkę

4 Spis tre ci

Element ltmetagt mdash dodawanie metadanych 63Znaczniki meta dla aplikacji mobilnych 64Warto ci charakterystyczne dla producentoacutew urz dze przeno nych 66Znacznik ltbasegt dla strony internetowej 67Znacznik ltlinkgt jest przydatny nie tylko dla arkuszy styloacutew 67

3 Nowe elementy w HTML5 75Elementy sekcyjne w HTML5 75

Element ltsectiongt 77Element ltarticlegt 77Element ltsectiongt a element ltarticlegt 78Element ltnavgt 78Element ltasidegt 79Element ltheadergt 79Element ltfootergt 80Nag oacutewek i stopka w grze CubeeDoo 80Stary ale rzadko u ywany element ltaddressgt 81Grupowanie tre ci mdash inne nowe elementy HTML5 81Element ltmaingt 82Elementy ltfiguregt i ltfigcaptiongt 82Element lthrgt 83Zmiany atrybutoacutew elementoacutew ltligt i ltolgt 83

Nowe tekstowe elementy semantyczne w HTML5 83Element ltmarkgt 84Element lttimegt 85Elementy ltrpgt ltrtgt i ltrubygt 85Element ltbdigt 86Element ltwbrgt 86

Zmodyfikowane tekstowe semantyczne elementy 86Element ltagt 86Zmiany w elementach tekstowych w poroacutewnaniu z HTML-em 4 88Niezmodyfikowane elementy 89

Elementy osadzane 90Zmiany w elementach osadzanych 90

Elementy interaktywne 92Elementy ltdetailsgt i ltsummarygt 92Elementy ltmenugt i ltmenuitemgt 94Elementy XHTML-a niedost pne w HTML5 95

Wnioski 96


Spis tre ci 5

4 Formularze internetowe w HTML5 97Atrybuty elementu ltinputgt oraz innych elementoacutew formularzy 99

Atrybut type 99Atrybut required 99Warto ci minimalne i maksymalne mdash atrybuty min i max 100Atrybut step 101Atrybut placeholder 101Atrybut pattern 102Atrybut readonly 104Atrybut disabled 104Atrybut maxlength 105Atrybut size 105Atrybut form 105Atrybut autocomplete 106Atrybut autofocus 107

Typy i atrybuty elementu ltinputgt 107Ponowne wprowadzenie do typoacutew o ktoacuterych my lisz e je znasz 108Tekst mdash ltinput type=textgt 108Has a mdash ltinput type=passwordgt 109Pole wyboru mdash ltinput type=checkboxgt 109Przycisk opcji mdash ltinput type=radiogt 110Przycisk wysy ania mdash ltinput type=submitgt 111Przycisk resetowania mdash ltinput type=resetgt 112Plik mdash ltinput type=filegt 112Ukryte pole mdash ltinput type=hiddengt 114Rysunki mdash ltinput type=imagegt 114Przycisk mdash ltinput type=buttongt 114Okre lanie styloacutew dla elementoacutew ltinputgt roacute nego typu 114

Nowe typy elementu ltinputgt 115Adres e-mail mdash ltinput type=emailgt 116Adres URL mdash ltinput type=urlgt 117Telefon mdash ltinput type=telgt 118Liczby mdash ltinput type=numbergt 119Przedzia y mdash ltinput type=rangegt 121Wyszukiwanie mdash ltinput type=searchgt 122Kolory mdash ltinput type=colorgt 122

Elementy ltinputgt zwi zane z dat i godzin 123Daty mdash ltinput type=dategt 123Data i godzina mdash ltinput type=datetimegt 125Lokalna data i godzina mdash ltinput type=datetime-localgt 125Miesi c mdash ltinput type=monthgt 125


6 Spis tre ci

Godzina mdash ltinput type=timegt 125Tydzie mdash ltinput type=weekgt 126

Sprawdzanie poprawno ci formularzy 127atwe poprawianie interfejsu u ytkownika za pomoc styloacutew CSS 130

Nowe elementy formularzy 132Element ltdatalistgt i atrybut list 132Element ltoutputgt 134Element ltmetergt 135Element ltprogressgt 136Element ltkeygengt 137

Inne elementy formularzy 137Element ltformgt 137Elementy ltfieldsetgt i ltlegendgt 138Elementy ltselectgt ltoptiongt i ltoptgroupgt 138Element lttextareagt 138Element ltbuttongt 139Element ltlabelgt 139

Wnioski 139

5 Elementy svg canvas audio i video 141Multimedialne interfejsy API w HTML5 141

SVG 141Do czanie grafiki SVG do dokumentoacutew 143Technika Clown Car mdash SVG i dynamicznie dopasowywana grafika

pierwszego planu 144Nauka SVG 145Format SVG w grze CubeeDoo 146Element canvas 148Element ltcanvasgt a element ltsvggt 152

Elementy ltaudiogt i ltvideogt 154Typy plikoacutew multimedialnych 154Dodawanie elementu ltvideogt do witryny 155Atrybuty elementoacutew ltvideogt i ltaudiogt 155Elementy ltvideogt i ltaudiogt a JavaScript 159Okre lanie stylu elementu ltvideogt 161

6 Inne interfejsy API z HTML5 165Aplikacje internetowe dzia aj ce w trybie offline 165

Czy urz dzenie jest pod czone do sieci 165Pami podr czna aplikacji 166Pami lokalna i pami sesji 170Pami oparta na SQL-u i bazach danych 179


Spis tre ci 7

Wzbogacanie user experience 183Geolokalizacja 183Sieciowe w tki robocze 186Mikrodane 188Przekazywanie komunikatoacutew mi dzy dokumentami 190

Specyfikacja ARIA 191Dost pno 191

Wnioski 194

7 Przechodzenie na CSS3 195CSS mdash definicje i sk adnia 196

Sk adnia CSS 196U ywanie zewn trznych arkuszy styloacutew mdash jeszcze o elemencie ltlinkgt 198Zapytania media 200Najlepsze praktyki zwi zane ze stylami CSS 202

Selektory CSS 206Podstawowe selektory 207

Inne selektory CSS3 210Selektory ogoacutelne 210Stosowanie selektoroacutew 211Selektory relacyjne mdash regu y oparte na kolejno ci kodu 212Selektory atrybutoacutew 215Pseudoklasy 219Pseudoklasy okre laj ce stan 222Pseudoklasy strukturalne 223Obliczenia dla pseudoklas nth 224Inne pseudoklasy 227Pseudoelementy 229

Inne selektory mdash model Shadow DOM 232Specyficzno wa niejsza od kaskadowo ci mdash specyficzno w stylach CSS 233

Wnioski 234

8 Dodatkowe mo liwo ci dzi ki warto ciom z CSS3 235Warto ci koloroacutew w CSS3 235

Warto ci szesnastkowe 236Sk adnia rgb() 237Dodawanie przezroczysto ci w formacie RGBA 238Odcie nasycenie i jasno mdash HSL() 239CMYK 240Nazwane kolory 240S owo kluczowe currentColor 240Warto ci koloroacutew w przegl darkach 241


8 Spis tre ci

Jednostki miar w CSS-ie 244Warto ci okre laj ce d ugo w CSS-ie 244K ty czas i cz stotliwo 247K ty w CSS-ie 247Czas 249Cz stotliwo 249

Porz dek GPDL mdash skroacutecone deklaracje w a ciwo ci i warto ci 249Wnioski 252

9 CSS3 mdash modu y modele i grafika 253W a ciwo ci modelu pude kowego z CSS-a 254

Obramowanie 255W a ciwo border-style 256W a ciwo border-color 256W a ciwo border-width 257Model pude kowy z CSS-a 257W a ciwo box-sizing 259

Nauka CSS3 260W a ciwo border-radius 261

Gradienty w CSS-ie 264Typy gradientu liniowy lub ko owy 264Gradienty ko owe 265Gradienty liniowe 265W a ciwo background-size 274Gradienty z paskami 277Powtarzanie gradientoacutew liniowych 278

Cienie 282Cienie dla tekstu 283Ustawianie tekstu za pomoc w a ciwo ci width overflow i text-overflow 284Cienie poacutel 286

czenie wszystkich w a ciwo ci w grze CubeeDoo 288

10 Transformacje przej cia i animacje w CSS3 293Przej cia w CSS-ie 294

W a ciwo transition-property 295W a ciwo transition-duration 298W a ciwo transition-timing-function 298W a ciwo transition-delay 299W a ciwo skroacutecona transition 300Roacute ne przej cia 301

Transformacje w CSS3 302W a ciwo transform-origin 303W a ciwo transform 304


Spis tre ci 9

czenie wielu transformacji 308Stosowanie przej dla transformacji 309Funkcje transformacji troacutejwymiarowych 309Inne w a ciwo ci transformacji troacutejwymiarowych 311

czenie wszystkich elementoacutew 313Animacje w CSS3 315

Klatki kluczowe 317Przej cia animacje i wydajno 323

11 CSS w projektowaniu RWD 325Zapytania media punkty graniczne i p ynny uk ad 325Kilka kolumn 326Grafika obramowania 328

Ustawianie grafiki obramowania 329Model flexbox 334

W a ciwo flex 337Wykrywanie funkcji za pomoc regu y supports 339

Dynamiczne dostosowywanie do wymiaroacutew ekranu 340Udost pnianie grafiki 340Maski w CSS-ie mdash tworzenie przezroczystych plikoacutew JPEG 346Nag oacutewek Client-Hints 346

12 Projektowanie aplikacji mobilnych 349O czym warto pomy le przed rozpocz ciem pracy 350Kwestie projektowe 351

Aplikacje zwi kszaj ce produktywno 352Rozrywka mdash wci gaj ce aplikacje 353Narz dzia 354Jaki typ aplikacji b dzie odpowiedni dla Ciebie 355

Platforma mobilna mdash bogactwo mo liwo ci 356Ma y ekran 356Mniejsza ilo pami ci 356Jedno okno i jedna aplikacja naraz 358Minimalna dokumentacja 359Rozwa ania zwi zane z programowaniem 359

Tworzenie rozwi za dla mobilnych przegl darek z silnikiem WebKit 360Pasek stanu 360Pasek nawigacji 361Rysunek startowy 363Ikony na stronie g oacutewnej urz dzenia 364


10 Spis tre ci

Minimalizowanie ilo ci danych wprowadzanych z klawiatury 365Zachowaj zwi z o 365

Stosuj oczywiste rozwi zania 365Minimalizuj ilo wprowadzanych danych 365Minimalizuj ilo tekstu 365

Inne kwestie zwi zane z user experience 366

13 Urz dzenia przeno ne i dotyk 367Dostosowywanie stron do ma ych ekranoacutew 367

Regu a viewport 368Dotknij mnie 368

Obszary reaguj ce na dotyk 369Zdarzenia zwi zane z mysz i dotykiem 369Fikcyjne i rzeczywiste zdarzenia zwi zane z klikni ciem 372

Dost p do sprz tu 375Ruch i kierunek poruszania telefonu 375Stan urz dzenia 376Natywne aplikacje sieciowe aplikacje w formie pakietoacutew

i rozwi zania hybrydowe 378Testy 379

14 Wydajno w rodowisku mobilnym 381Czas pracy na baterii 381

Stosuj ciemne kolory 382Stosuj format JPEG 382Ogranicz ilo kodu w JavaScripcie 383Eliminuj liczb przesy anych da 384Akceleracja sprz towa 385

Opoacute nienie 387Zmniejszanie liczby da HTTP 388Zmniejszanie wielko ci da 392Pami 395Optymalizowanie grafiki 396

Szybko reagowania interfejsu u ytkownika 401Zdarzenia zwi zane z dotykiem 401Animacje 402

Wnioski 403

A Selektory CSS-a i specyficzno 405

Skorowidz 413


141

ROZDZIA 5

Elementy svg canvas audio i video

Wcze niej omoacutewi am wi kszo nowych elementoacutew z HTML5 Wyj tkiem s elementy po-wi zane bezpo rednio z tworzonymi dopiero interfejsami API a tak e dobrze obs ugiwaneelementy multimedialne svg canvas audio i video Elementy z pierwszej z tych grup mogjeszcze zosta zmodyfikowane dlatego nie omawiam ich w tej ksi ce Elementy z drugiejgrupy opisuj w tym rozdziale

Przedstawiam tu najwa niejsze funkcje ktoacutere programi ci frontonoacutew aplikacji sieciowych praw-dopodobnie b d stosowa w codziennej pracy Dzi ki temu przy tworzeniu kodu dla prze-gl darek mobilnych b dziesz moacuteg korzysta z nowych mechanizmoacutew Wszystkie nowe prze-gl darki mobilne (z wyj tkiem Opery Mini) obs uguj elementy ltcanvasgt ltvideogt i ltaudiogta tak e sieciowe interfejsy API zwi zane z geolokalizacj pami ci lokaln aplikacjami sie-ciowymi dzia aj cymi w trybie offline itd

Na ka dy z tematoacutew omawianych w tym rozdziale mo na napisa ca ksi k mdash i dla wieluopisywanych zagadnie takie ksi ki ju s dost pne Przestawiam tu wystarczaj co du oinformacji aby moacuteg uzna e chcesz przeczyta ksi k na dany temat lub stwierdzi edanym zagadnieniem nie jeste zainteresowany Cho nie opisuj szczegoacute owo poszczegoacutelnychkwestii ten rozdzia zapewni Ci wiedz potrzebn do rozpocz cia pracy Co wa niejsze zro-zumiesz zalety i wady omawianych tu technologii w kontek cie urz dze przeno nych

Multimedialne interfejsy API w HTML5Pierwotna specyfikacja HTML-a dotyczy a wy cznie materia oacutew tekstowych Nie obejmo-wa a nawet elementu ltimggt Od tamtego czasu du o si zmieni o HTML5 umo liwia two-rzenie skalowalnej grafiki wektorowej za pomoc formatu SVG i pustego obszaru po ktoacuterymmo na rysowa (odpowiada mu element ltcanvasgt) Oproacutecz grafiki w HTML5 obs ugiwane selementy ltvideogt i ltaudiogt ktoacutere dzia aj bez konieczno ci stosowania niezale nych wtyczek

SVGFormat SVG umo liwia tworzenie z o onej skalowalnej grafiki wektorowej Ten format zostawprowadzony w 2001 r i jest otwartym standardem definiowania dwuwymiarowej grafikiwektorowej Skalowalno w SVG oznacza e ta sama grafika b dzie roacutewnie ostra na du ychmonitorach jak i na ma ych wy wietlaczach urz dze przeno nych Nie wymaga to wpro-wadzania adnych modyfikacji


142 Rozdzia 5 Elementy svg canvas audio i video

W specyfikacji SVG jest zdefiniowana oparta na XML-u gramatyka tworzenia kszta toacutew liniikrzywych rysunkoacutew i tekstu Obs ugiwane s te roacute ne funkcje takie jak przezroczysto dowolne kszta ty geometryczne filtry (cienie efekty wietlne itd) skrypty oraz animacje

Poniewa SVG to format graficzny oparty na te cie pliki mog by bardzo ma e Poniewaw tym formacie u ywany jest model obiektowy grafiki mo na modyfikowa za pomocskryptoacutew Poniewa jest to format wektorowy mo na skalowa go bez negatywnych efektoacutewtakich jak pikselizacja lub nieroacutewne kraw dzie Ten format jest zrozumia y (dzi ki temu ejest deklaratywny) i obs uguje animacje

Istnieje kilka wersji formatu SVG S one obs ugiwane w przegl darkach w roacute nym stopniuPodstawowa obs uga samodzielnych plikoacutew svg jest dost pna we wszystkich urz dzeniachprzeno nych i nowych przegl darkach W Androidzie pliki tego typu s obs ugiwane odwersji 3 Grafik w formacie SVG mo na stosowa jako roacuted o elementoacutew ltimggt od systemoacutewiOS 32 i Android 30 oraz od mobilnej wersji Internet Explorera 8

Pliki w formacie SVG jako warto w a ciwo ci background-image w stylach CSS s obs u-giwane od systemoacutew Android 3 i iOS 32 Ponadto od dawna mo na ich u ywa w OperzeMobile Element ltsvggt na stronach HTML5 mo na stosowa od systemoacutew iOS 5 i Android 3oraz od przegl darki Internet Explorer 9 (a tak e we wszystkich innych nowych przegl dar-kach) Tylko w systemach Android 233 i starszych Amazon Silk i nieu ywanym ju WebOSfirmy HP przegl darki mobilne nie zapewniaj obs ugi formatu SVG Statyczne pliki SVG sobs ugiwane nawet w Operze Mini (podobnie jak element ltcanvasgt ktoacutery jest obs ugiwanywe wszystkich przegl darkach mobilnych) przy czym nie mo na ich animowa poniewapoziom obs ugi JavaScriptu w tej przegl darce to uniemo liwia

Poniewa SVG jest oparty na XML-u g oacutewnym elementem plikoacutew w tym formacie jest nielthtmlgt a ltsvggt Pliki SVG podobnie jak wszystkie dokumenty XML rozpoczynaj si odprologu XML-a i deklaracji DTD dla formatu SVG Element g oacutewny ltsvggt zawiera ca tredokumentu Pliki w formacie SVG nie obejmuj elementoacutew ltheadgt i ltbodygt Ca a tre w tymzagnie d one elementy ltsvggt znajduje si w g oacutewnym elemencie ltsvggt

Dobrym wprowadzeniem do formatu SVG jest japo ska flaga Jest to bia y prostok tny ob-szar z czerwonym ko em (s o cem) w rodkowej cz ci co przedstawia rysunek 51

Rysunek 51 Japo ska flaga wygenerowana za pomoc pliku SVG

1 ltDOCTYPE svg PUBLIC -W3CDTD SVG 10EN2 httpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt3 ltsvg xmlns=httpwwww3org2000svg height=220 width=320 version=10gt4 lttitlegtJapo ska flagalttitlegt5 ltdescgtCzerwone ko o na bia ym prostok cieltdescgt6 ltrect x=10 y=10 width=300 height=2007 style=fill ffffff stroke e7e7e7gt8 ltcircle cx=160px cy=107px r=60px fill=d60818gt9 ltsvggt


Multimedialne interfejsy API w HTML5 143

Coacute ten kod oznacza Wiersze od 1 do 3 to deklaracja DTD dla plikoacutew SVG i g oacutewny element ltsvggtWarto zauwa y e w g oacutewnym elemencie zadeklarowana jest wielko danej grafiki wektorowejAby w stylach CSS moacutec u ywa grafiki w formacie SVG we w a ciwo ci background-positiontrzeba zadeklarowa wymiary tej grafiki Jest to wa ne gdy tworzysz spritersquoy w formacie SVG

Mo na doda element lttitlegt (wiersz 4) je li plik SVG jest u ywany niezale nie od innychzasoboacutew Element ltdescgt (wiersz 5) zawiera tekstowy opis ktoacutery normalnie si nie wy wietlagdy pokazywany jest plik SVG Umieszczenie odpowiednich informacji w elementach ltdescgti lttitlegt zwi ksza dost pno stron Poniewa nie wszystkie czytniki ekranu obs uguj formatSVG dodanie atrybutu aria-label pozwala poprawi dost pno stron

Element ltrectgt (wiersz 6) oznacza prostok t Dost pne kszta ty i linie to ltpathgt ltrectgtltcirclegt ltellipsegt ltlinegt ltpolylinegt i ltpolygongt Tu podane s cztery atrybuty x ywidth i height Okre laj one wspoacute rz dne x i y oraz szeroko i wysoko prostok ta U ywanyjest te atrybut style

W dokumentach SVG podobnie jak w dokumentach HTML mo na u ywa styloacutew CSS dookre lania stylu elementoacutew Mo esz zadeklarowa style wewn trzwierszowo za pomocatrybutu style jak to zrobi am w przedstawionym przyk adzie albo do czy osadzony lubzewn trzny arkusz styloacutew i wskazywa w nim elementy przy u yciu selektoroacutew (ta technikajest stosowana w plikach HTML)

Nazwy w a ciwo ci s tu nieco odmienne ni w stylach CSS do ktoacuterych jeste przyzwycza-jony jednak s zrozumia e W a ciwo fill dzia a podobnie jak w a ciwo backgroundmdash tu okre la kolor t a W a ciwo stroke pe ni funkcj podobn do w a ciwo ci borderw stylach CSS Mo na te okre li gradient lub wzoacuter

Cho w plikach SVG mo na stosowa wi kszo w a ciwo ci i warto ci ze styloacutew CSS zewzgl du na bezpiecze stwo niektoacuterzy producenci przegl darek1 blokuj importowanie gra-fiki rastrowej i skryptoacutew w plikach SVG zapisanych jako grafika t a w elemencie ltimggt

Element ltcirclegt (wiersz 8) tworzy ko o o czerwonym tle Zamiast wysoko ci i szeroko ci w tymelemencie podawany jest atrybut r ktoacutery oznacza promie Pozycja nie jest tu podawana napodstawie goacuternego lewego rogu (jak to si odbywa w elemencie ltrectgt) ale za pomoc rodkako a Atrybut cx okre la wspoacute rz dn x rodka ko a natomiast cy to wspoacute rz dna y rodka

Je li przyjrzysz si atrybutom elementu ltcirclegt zauwa ysz e jednym z nich jest fillnatomiast w elemencie ltrectgt fill jest podany jako w a ciwo styloacutew CSS

Do czanie grafiki SVG do dokumentoacutewMo esz doda plik SVG bezpo rednio do dokumentu Umo liwiaj to znaczniki ltimggt ltobjectgti ltembedgt

ltimg src=flagsvg alt=Japo ska flagagt

lubltembed type=imagesvg+xml src=flagsvg width=320 height=220gt

lubltobject data=flagsvg type=imagesvg+xml width=320 height=220gtltobjectgt

1 Obecnie silniki WebKit i Mozilla blokuj importowanie skryptoacutew i grafiki rastrowej do plikoacutew SVG ze

znacznikoacutew ltimggt Dzieje si tak nawet wtedy gdy grafika rastrowa pochodzi z tego samego roacuted a



Warto zauwa y e cho elementy ltembedgt i ltobjectgt nie maj atrybutu alt grafika SVGmo e by dost pna Aby zwi kszy dost pno strony nale y opisa grafik za pomoc ele-mentoacutew ltdescgt lub lttitlegt i doda atrybut aria-label o warto ci odpowiadaj cej tytu owigrafiki Gdy podasz wysoko i szeroko w pliku ltsvggt nie musisz tego robi w elementachltimggt ltembedgt i ltobjectgt natomiast te warto ci s potrzebne w stylach CSS

Technika Clown Car mdash SVG i dynamicznie dopasowywanagrafika pierwszego planuFormat SVG mo na wykorzysta do tworzenia i udost pniania dynamicznie dopasowywanejgrafiki Mo esz wykorzysta obs ug formatu SVG w przegl darkach oraz obs ug zapytamedia i grafiki wektorowej w formacie SVG aby tworzy dynamicznie dopasowywane ry-sunki Aby pobiera odpowiedni grafik nale y zastosowa zapytania media w pliku SVG

Wiadomo e dzi ki grafice t a ze styloacutew CSS mo liwe jest pobieranie tylko potrzebnych ry-sunkoacutew Podobnie aby zapobiec pobieraniu w plikach SVG wszystkich do czanych obrazoacutewmo na wykorzysta grafik t a ze styloacutew CSS zamiast grafiki pierwszego planu W dyna-micznie dopasowywanych plikach SVG nale y do cza wszystkie potrzebne rysunki i napodstawie zapyta media wy wietla tylko odpowiedni z nich (szczegoacute owe omoacutewienie za-pyta media znajdziesz w rozdziale 7)

ltsvg xmlns=httpwwww3org2000svg viewBox=0 0 300 329 preserveAspectRatio=xMidYMid meetgt

lttitlegtTu wpisz warto atrybutu altlttitlegt

ltstylegt svg background-size 100 100 background-repeat no-repeat

media screen and (max-width 400px) svg background-image url(imagessmallpng)

media screen and (min-width 401px) and (max-width 700px) svg background-image url(imagesmediumpng)

media screen and (min-width 701px) and (max-width 1000px) svg background-image url(imagesbigpng)

media screen and (min-width 1001px) svg background-image url(imageshugepng) ltstylegtltsvggt



Aby zachowa proporcje elementoacutew i zapewni ich jednolite skalowanie zastosowa am atry-buty viewbox i preserveAspectRatio Warto atrybutu viewbox to lista czterech rozdzielo-nych odst pami lub przecinkami liczb minimalnej warto ci x minimalnej warto ci y szero-ko ci i wysoko ci Zdefiniowanie szeroko ci i wysoko ci okna roboczego pozwala okre liproporcje grafiki SVG

Z uwagi na zwi zane z bezpiecze stwem problemy z importowaniem grafiki rastrowej zapomoc elementu ltimggt i plikoacutew SVG nale y u ywa elementu ltobjectgt aby dodawado witryny dynamicznie dopasowywane rysunki Element ltobjectgt umo liwia traktowaniezewn trznych zasoboacutew jak grafiki

ltobject data=awesomefilesvg type=imagesvg+xmlgtltobjectgt

Element ltobjectgt domy lnie jest tak szeroki jak element nadrz dny Jednak podobnie jakprzy dodawaniu grafiki mo na okre li szeroko i wysoko elementu za pomoc atrybu-toacutew width i height albo przy u yciu w a ciwo ci width i height w stylach CSS Z uwagi naumieszczone w przyk adowym pliku SVG deklaracje viewbox i preserveAspectRatio elementltobjectgt domy lnie zachowa zadeklarowane proporcje je li podany zostanie tylko jeden wy-miar (szeroko lub wysoko )

Poniewa w opisanej technice u ywany jest element ltobjectgt zamiast ltimggt nie wyst pujetu atrybut alt Aby ta technika by a dost pna dla czytnikoacutew ekranu z obs ug formatu SVG2nale y umie ci zawarto atrybutu alt w elemencie lttitlegt w pliku SVG

W elemencie ltobjectgt osadzany jest plik SVG Ten plik pobiera grafik t a ktoacutera pasuje dozapytania media Robi to na podstawie wymiaroacutew elementu ltobjectgt a nie okna roboczegoDla pokazanego wcze niej kodu zg aszane s dwa dania HTTP Jedno dotyczy pliku SVGa drugie odpowiedniej grafiki Aby wystarczy o jedno danie HTTP w atrybucie data elementultobjectgt zapisz identyfikator URI danych (musisz zastosowa w nim znaki ucieczki3)

Omawian technik nazywam Clown Car (czyli samochoacuted klauna) poniewa polega naumieszczaniu wielu du ych rysunkoacutew (klaunoacutew) w jednym ma ym pliku graficznym SVG(w samochodzie)

Nauka SVGOpisa am tu tylko podstawy formatu SVG Pliki SVG mog by dost pne skaluj si doekranoacutew o dowolnej rozdzielczo ci a tak e obs uguj animacje oparte na sk adni SVG lubskryptach JavaScriptu Pe n kontrol nad ka dym elementem animacji mo na uzyska za po-moc interfejsu API modelu SVG DOM Za pomoc formatu SVG mo na zrobi bardzo wielerzeczy jednak ich omawianie wykracza poza zakres tej ksi ki W specyfikacji tego formatuw witrynie W3C (httpwwww3orgTRSVG) znajdziesz wi cej informacji na temat wszystkichelementoacutew atrybutoacutew i interfejsu API do obs ugi animacji

2 Zob httpwwwihenicomjust-how-accessible-is-svg3 Znaki ucieczki w identyfikatorze URI danych s potrzebne w Internet Explorerze 9 i nowszych wersjach

tej przegl darki Tu tylko pokroacutetce omawiam technik Clown Car Wi cej szczegoacute oacutew i przyk adoacutew wrazz rozwi zaniami rezerwowymi dla przegl darek ktoacutere nie obs uguj formatu SVG znajdziesz pod adresemhttpsgithubcomestelleclowncar



Plik z japo sk flag to bardzo prosty dokument SVG Pliki SVG mog by bardzo skompli-kowane Je li znasz program Adobe Illustrator mo e zauwa y e e rysunki mo na wyeks-portowa do formatu SVG Cho jest to bardzo dobry sposoacuteb tworzenia skomplikowanychplikoacutew SVG powstaje w ten sposoacuteb bardzo d ugi kod a wspomniany program jest drogi

Amaya to bezp atny program obs uguj cy podzbioacuter formatu SVG Obs ugiwane s minproste kszta ty tekst grafika zewn trzne obiekty przezroczysto oparta na kanale alfa trans-formacje oraz animacje Program Amaya (httpwwww3orgAmaya) mo esz pobra bezpo-rednio z witryny W3C Amaya jest przydatna w nauce formatu SVG poniewa wygenero-

wany kod roacuted owy mo na bada i edytowa Mo esz te wyproacutebowa program Inkscape(httpinkscapeorgen) Jest to edytor grafiki wektorowej Ten edytor jest programem o otwartymdost pie do kodu roacuted owego i oferuje mo liwo ci podobne do aplikacji Illustrator CorelDrawi Xara Inkscape u ywa plikoacutew SVG w formacie zgodnym ze standardem W3C

Format SVG w grze CubeeDooW CubeeDoo u ywamy formatu SVG w dwoacutech miejscach Grafik t a w motywie z kszta ta-mi jest sprite w formacie SVG a dla ikony wyciszenia u ywamy identyfikatora URI danychwskazuj cego plik SVG

W grze dost pnych jest kilka motywoacutew min liczby kolory i kszta ty Do tworzenia kszta -toacutew s u proste spritersquoy w formacie SVG Poni ej znajduje si kod do tworzenia spritersquouSVG u ywanego na przednich stronach kart (rysunek 52)

1 ltDOCTYPE svg PUBLIC -W3CDTD SVG 10EN2 httpwwww3orgTR2001REC-SVG-20010904DTDsvg10dtdgt3 ltsvg xmlns=httpwwww3org2000svg height=400 width=400 version=10gt4 ltdescgtSprite z kwadratami koacute kami rombami i troacutejk tamiltdescgt56 lt-- Kolorowe kwadraty --gt7 ltrect x=10 y=10 width=80 height=80 style=fill d60818gt8 ltrect x=10 y=110 width=80 height=80 style=fill ffff33gt9 ltrect x=10 y=210 width=80 height=80 style=fill 00FF00gt10 ltrect x=10 y=310 width=80 height=80 style=fill 0000FFgt1112 lt-- Kolorowe koacute ka --gt13 ltcircle cx=150 cy=50 r=40 style=fill d60818gt14 ltcircle cx=150 cy=150 r=40 style=fill ffff33gt15 ltcircle cx=150 cy=250 r=40 style=fill 00FF00gt16 ltcircle cx=150 cy=350 r=40 style=fill 0000FFgt1718 lt-- Romby --gt19 ltpolygon points=25010 21050 25090 29050 style=fill d60818gt20 ltpolygon points=250110 210150 250190 290150 style=fill FFFF33gt21 ltpolygon points=250210 210250 250290 290250 style=fill 00FF00gt22 ltpolygon points=250310 210350 250390 290350 style=fill 0000FFgt2324 lt-- Troacutejk ty --gt25 ltpolygon points=31010 35090 39010 style=fill d60818gt26 ltpolygon points=310110 350190 390110 style=fill FFFF33gt27 ltpolygon points=310210 350290 390210 style=fill 00FF00gt28 ltpolygon points=310310 350390 390310 style=fill 0000FFgt29 ltsvggt



Rysunek 52 Sprite SVG z kszta tami

Wiersz 1 zawiera deklaracj DTD W wierszu 3 deklarowany jest element g oacutewny Podanajest tu te wysoko i szeroko grafiki SVG Cho zgodnie ze specyfikacj nie trzeba podawatych atrybutoacutew s one niezb dne je li chcesz u ywa rysunku SVG jako grafiki t a W wierszu4 znajduje si opis co zwi ksza dost pno stron i pomaga w ich optymalizacji ze wzgl duna wyszukiwarki

W wierszach od 7 do 10 znajduj si deklaracje czterech kwadratoacutew Wiersz 9 oznaczautwoacuterz prostok t w odleg o ci 10 pikseli od lewej kraw dzi i 210 pikseli od goacuternej kraw dziprostok t ma by szeroki na 80 pikseli i wysoki na 80 pikseli wype nij utworzony kszta tkolorem 00FF00

ltrect x=10 y=210 width=80 height=80 style=fill 00FF00gt

W wierszach od 13 do 16 zdefiniowane s cztery koacute ka Wiersz 16 oznacza znajd punkt od-dalony o 150 pikseli od lewej kraw dzi i 350 pikseli od goacuternej kraw dzi ustaw ten punkt jakorodek koacute ka o promieniu 40 pikseli wype nionego kolorem 0000FF

ltcircle cx=150 cy=350 r=40 style=fill 0000FFgt

Wiersz od 18 do 28 zawieraj osiem wielok toacutew cztery romby i trzy troacutejk ty Wielok ty de-klaruje si przez podanie ich naro nikoacutew Wiersz 19 oznacza ten kszta t ma cztery naro nikipierwszy punkt jest oddalony o 250 pikseli od lewej kraw dzi i 10 pikseli od goacuternej kraw dzidrugi punkt jest oddalony o 210 pikseli od lewej kraw dzi i 50 pikseli od goacuternej kraw dzitrzeci punkt jest oddalony o 250 pikseli od lewej kraw dzi i 90 pikseli od goacuternej kraw dziczwarty punkt jest oddalony o 290 pikseli od lewej kraw dzi i 50 pikseli od goacuternej kraw dziobszar mi dzy tymi punktami nale y wype ni kolorem d60818 (jest to odcie czerwonego)

ltpolygon points=25010 21050 25090 29050 style=fill d60818gt

Pokazany kod tworzy kwadraty koacute ka romby i troacutejk ty obroacutecone podstaw do goacutery

Te ma e rysunki mo na te zapisa jako identyfikatory URI danych bezpo rednio w plikuCSS lub udost pni jako grafik pierwszego planu Mo esz np doda zakodowany plik SVGjako identyfikator URI danych

background-image url(dataimagesvg+xml3Csvg20xmlns3D22http3A2F2Fwwww3org2F20002Fsvg2220version3D2210223E3Crect20x3D2202220y3D2202220fill3D2223abcdef2220width3D22100252220height3D221002522202F3E3C2Fsvg3E)



W CubeeDoo pojawia si tak e ikona wyciszenia d wi ku Identyfikator URI danych dla tejikony wygl da tak

background-image background-image url(dataimagesvg+xmlutf83Csvg20xmlns=httpwwww3org2000svg20width=10020height=1003E3Cpolygon20points=3913202228206282064720224820396320391420style=stroke111111stroke-width5stroke-linejoinroundfill111111203E3Cpath20d=M2048502069262020style=fillnonestroke111111stroke-width5stroke-linecapround203E3Cpath2020d=M20695020482620style=fillnonestroke111111stroke-width5stroke-linecapround203E3Csvg3E)

Dane w tym przyk adzie s ma o czytelne dla ludzi Utworzono jest za pomoc programu AmayaSk adnia powinna jednak wygl da znajomo U ywamy tu w a ciwo ci background-image zestyloacutew CSS Zamiast wywo ania url(pathmutejpg) lub nawet url(pathmutesvg) sto-sujemy instrukcj url(dataimagesvg+xmlutf8ltsvg gtltsvggt) Ca y plik SVG zeznakami ucieczki jest uj ty w cudzys oacutew

Zgodnie ze specyfikacj dla wersji Internet Explorera obs uguj cych format SVG (obecnie sto wersje 9 i 10) w identyfikatorach URI danych nale y stosowa znaki ucieczki

Element canvasSpecyfikacja HTML5 Canvas dotyczy przeznaczonego do tworzenia rysunkoacutew interfejsu APIJavaScriptu Ten interfejs umo liwia zdefiniowanie na stronie HTML obiektu p oacutetna w posta-ci elementu ltcanvasgt po ktoacuterym mo na rysowa Rysunki utworzone w ten sposoacuteb mo nanawet wstawia w stylach CSS jako grafik t a

Rysowa mo na w przestrzeni dwu- lub troacutejwymiarowej (do tworzenia rysunkoacutew troacutejwy-miarowych s u y technologia WebGL) Rysunki dwuwymiarowe s obs ugiwane we wszyst-kich nowych przegl darkach internetowych Technologia WebGL dopiero zyskuje popularnow wiecie mobilnym Ze wzgl du na wydajno nale y j stosowa tylko w urz dzeniach zesprz tow akceleracj grafiki

W wersji dwuwymiarowej dost pny jest prosty ale daj cy du e mo liwo ci interfejs API doszybkiego rysowania na dwuwymiarowych bitmapach Nie wyst puje tu konkretny formatplikoacutew a rysowa mo na tylko za pomoc skryptoacutew Nie s dost pne w z y modelu DOModpowiadaj ce poszczegoacutelnym rysowanym kszta tom Element ltcanvasgt s u y do rysowaniapikseli a nie wektoroacutew U ywanie tylko jednego w z a sprawia e element ltcanvasgt wydajesi wygodny w obs udze dla przegl darek mobilnych jednak wysokie zapotrzebowanie nacykle procesora ze strony animacji JavaScriptu mo e szybko wyczerpywa baterie urz dzeprzeno nych (cho dzi ki akceleracji sprz towej zu ycie baterii jest ni sze)

Pierwszy element ltcanvasgtPoniewa jest to bardzo podstawowe wprowadzenie do elementu ltcanvasgt omawiam tu tylkoproste kszta ty i linie Je li nie znasz JavaScriptu sk adnia mo e by pocz tkowo ma o zro-zumia a Je eli jednak znasz ten j zyk powiniene rozumie przedstawiony kod

Pierwszy krok polega na dodaniu do dokumentu elementu ltcanvasgt W HTML-u jest to je-dyna potrzebna operacja



ltcanvas id=flag width=320 height=220gt Przegl darka nie obs uguje elementu ltcanvasgt Gdyby obs ugiwa a zobaczy by flag ltcanvasgt

To ju wszystko co trzeba zrobi w HTML-u aby doda element ltcanvasgt Mo na napisa tylkoltcanvasgtltcanvasgt Atrybut id jest u ywany aby u atwi wskazywanie elementu w Java-Scripcie cho mo na te go wskaza za pomoc modelu DOM Doda am roacutewnie zast pczytekst dla u ytkownikoacutew ktoacuterych przegl darka nie obs uguje elementu ltcanvasgt lub ktoacuterzyz innych przyczyn nie mog zobaczy tego elementu

Element ltcanvasgt w obecnej wersji to interfejs API ktoacutery nie zapewnia dost pno cistron Jedyna mo liwo poprawienia dost pno ci to dodanie atrybutu aria-label

Ten kod tworzy pust tablic do rysowania mdash p oacutetno Wszystkie pozosta e zadania wyko-nuje si w JavaScripcie Tu kod ponownie tworzy japo sk flag Przedstawia j rysunek 53

Rysunek 53 Japo ska flaga utworzona jako element ltcanvasgt

Nast pny krok polega na utworzeniu rysunku na p oacutetnie Od tego momentu wszystko dziejesi w JavaScripcie W ze ltcanvasgt mo na wskaza w prostym JavaScripcie na trzy sposoby

documentgetElementById(flag)documentgetElementsByTagName(canvas)[0]documentquerySelector(flag)

Potem nale y zainicjowa kontekst dwuwymiarowy i rozpocz rysowanie za pomoc poleceinterfejsu API tego kontekstu Kod rysuje tu japo sk flag

1 ltscriptgt2 var el= documentgetElementById(flag)34 if (el ampamp elgetContext) 5 var context = elgetContext(2d)6 if (context) 7 contextfillStyle = ffffff8 contextstrokeStyle = cccccc9 contextlineWidth = 110 contextshadowOffsetX = 511 contextshadowOffsetY = 512 contextshadowBlur = 413 contextshadowColor = rgba(0 0 0 04)14 contextstrokeRect(10 10 300 200)15 contextfillRect(10 10 300 200)16 contextshadowColor=rgba(0000)17 contextbeginPath()18 contextfillStyle = d6081819 contextarc(160 107 60 0 MathPI2 false)



20 contextclosePath()21 contextfill()22 23 24 ltscriptgt

Kod w wierszu 2 znajduje odpowiedni element ltcanvasgt na podstawie atrybutu id tegoelementu Przed utworzeniem kontekstu dwuwymiarowego nale y sprawdzi e elementltcanvasgt zosta odnaleziony oraz e przegl darka obs uguje takie elementy W tym celuw wierszu 4 kod sprawdza czy dost pna jest metoda getContext

Mo na wykorzysta skrypty do wykrywania funkcji (np Modernizr mdash httpmodernizrcom) do sprawdzania czy przegl darka obs uguje element ltcanvasgt i inne nowemechanizmy Modernizr pozwala wykrywa wszystkie funkcje lub tylko potrzebnyw danym momencie mechanizm Nie u ywam tu tego narz dzia poniewa chc po-kaza jak bezpo rednio sprawdza dost pno funkcji Zwykle jednak warto stosowaModernizr chyba e chcesz zminimalizowa liczb u ywanych zewn trznych skryp-toacutew i da HTTP

W wierszu 5 kod tworzy referencj do kontekstu wywo uj c metod getContext(contextId)elementu ltcanvasgt W a ciwym kontekstem dla tego elementu jest 2d Je li tworzenie kon-tekstu ko czy si powodzeniem (co kod sprawdza w wierszu 6) mo na wreszcie przej dorysowania za co odpowiada reszta skryptu

Wprawdzie jest to technika eksperymentalna ale je li chcesz w przegl darce z silnikiem WebKitumie ci rysunek z elementu ltcanvasgt jako t o za pomoc styloacutew CSS (httpupdateshtml5rockscom201212Canvas-driven-background-images)4 to zamiast wywo ywa element ltcanvasgt w modeluDOM mo esz doda rysunek jako grafik t a W stylach CSS nale y zastosowa nast puj cy kod

background -webkit-canvas(theCanvas)

W JavaScripcie umie poni sze wywo anievar context = documentgetCSSCanvasContext(2d theCanvas 320 220)

Drugi parametr jest tu nazw u ywanego elementu ltcanvasgt ktoacuter bez cudzys owu podanow stylach CSS

Do wiersza 6 a nawet do wiersza 13 kod nic nie rysuje Do wiersza 6 definiowany jest jedyniekontekst elementu ltcanvasgt ktoacutery umo liwia rysowanie i modyfikowanie pikseli

Przed narysowaniem kszta tu trzeba zdefiniowa jego wygl d i styl W tym celu nale yustawi w a ciwo ci w obiekcie context Tu kod definiuje wygl d obramowania (w a ci-wo ci stroke i linewidth) kolor t a (w a ciwo fill) i cie (w a ciwo ci shadowOffsetXshadowOffsetY shadowBlur i shadowColor) dla pierwszego prostok ta ktoacutery jest rysowanyza pomoc metody strokeRect() w wierszu 14 Przekazywane s tu te same parametry cow przyk adowym pliku SVG (10 10 300 200) Te cztery warto ci okre laj wspoacute rz dne x i yoraz szeroko i wysoko

4 Firefox 4 i nowsze wersje tej przegl darki tak e obs uguj element ltcanvasgt w stylach CSS Pozwala to dy-

namicznie tworzy wirtualny element ltcanvasgt za pomoc JavaScriptu i wywo ania ndashmoz-element(elementCanvas) w stylach CSS



Po wykonaniu polecenia skrypt bdquozapominardquo o tym co zrobi wcze niej i przechodzi do na-st pnego wiersza Inaczej ni w przyk adowym pliku SVG z wcze niejszego punktu tu pro-stok t jest rysowany w elemencie ltcanvasgt i nie jest cz ci modelu DOM W a ciwo cistroke fill linewidth i border s zapami tywane jednak przegl darka i skrypt nie potra-fi okre li co zosta o narysowane Je li chcesz rejestrowa co i w ktoacuterym miejscu jest ryso-wane w elemencie ltcanvasgt wykorzystaj metod getImageData() kontekstu do zapisaniawarto ci sk adowych czerwonej zielonej i niebieskiej oraz kana u alfa pikseli

W wierszu 15 kod wywo uje metod fillRect co prowadzi do narysowania drugiego pro-stok ta za pomoc ustawionej wcze niej w a ciwo ci fillStyle Trzeba tu ponownie podawspoacute rz dne poniewa pierwszy prostok t nie jest zapami tywany w modelu DOM (chomo na uzyska dost p do informacji o pikselach)

W obu wywo aniach metod tworz cych prostok ty (wiersze 14 i 15) u ywane s identyczneparametry mdash 10 10 300 i 200 Powoduje to narysowanie prostok ta z wype nieniem bez-po rednio na prostok cie reprezentuj cym cie Mo na utworzy obiekt ze wspoacute rz dnymii przekaza go do obu metod jednak nie da si za pomoc elementu ltcanvasgt uzyska do-st pu do wspoacute rz dnych pierwszego prostok ta i skopiowa ich do drugiego

Kod najpierw rysuje prostok t a potem go wype nia Gdyby zast pi kolejno tych operacjicie znajdowa by si nad kolorem t a Poniewa wspoacute rz dne s identyczne a obramowaniejest ustawione na 1 piksel szeroko ci ostatecznie ramka ma 05 piksela poniewa wype nieniezajmuje wewn trzn po ow jej szeroko ci

Jak wcze niej wspomnia am w momencie rozpocz cia rysowania koacute ka (s o ca) na fladzew modelu DOM nie ma informacji o narysowanych wcze niej elementach To prawda Java-Script zapami tuje ustawione warto ci w a ciwo ci np shadowColor Zapami tuje te ostat-nie operacje niezale nie od tego czy dana figura zosta a narysowana Jednak piksele w ele-mencie ltcanvasgt to tylko punkty o okre lonym kolorze Poniewa czerwone koacute ko nie ma miecienia przed narysowaniem koacute ka trzeba ustawi w a ciwo shadowColor tak aby by a prze-zroczysta co robi kod w wierszu 16

Instrukcje dotycz ce rysowania koacute ka rozpoczynaj si od wywo ania beginPath() (wiersz 17)a ko cz wywo aniem closePath() (wiersz 20) Skrypt zapami tuje operacje rysowania nie-zale nie od tego czy element zosta ju narysowany Je li rysujesz koacute ko a nast pnie bezotwierania i zamykania kontekstu dodasz kilka linii to w momencie rysowania linii koacute konadal b dzie w pami ci Nowa linia mo e wtedy przechodzi przez koacute ko i przecina je na poacute Tu unikam tego dzi ki otwarciu i zamkni ciu cie ki za pomoc wywo ywa beginPath()i closePath()

Koacute ko jest definiowane za pomoc wywo ania contextarc(wspoacute rz dna_x wspoacute rz dna_ypromie k t_pocz tkowy k t_ko cowy niezgodnie_z_ruchem_wskazoacutewek_zegara) Powo-duje ono dodanie punktoacutew do krzywej w wyniku czego powstaje wirtualny okr g opisanyza pomoc argumentoacutew wywo ania Tu tym wywo aniem jest contextarc(160 107 60 0MathPI2 false) Rysowanie zaczyna si od okre lonego k ta pocz tkowego (tu jest to 0czyli pozioma linia biegn ca w prawo) i ko czy si podanym k tem ko cowym Rysowanieodbywa si zgodnie z okre lonym kierunkiem (tu zgodnie z ruchem wskazoacutewek zegara)Gdyby k t ko cowy by mniejszy ni 2 bdquokoacute kordquo by oby przyci te mdash punkty pocz tkowyi ko cowy by yby po czone prost lini Warto powoduje utworzenie poacute okr gu



Ponadto w wierszu 18 zmieniany jest kolor wype nienia (z bia ego na czerwony) Nast pniekod wype nia utworzone koacute ko za pomoc metody fill() (wiersz 21) wed ug koloru ustawio-nego we w a ciwo ci fillStyle

Nie opisa am tu nawet podstaw mo liwo ci jakie daje element ltcanvasgt Pod adresemhttpiemicrosoftcomtestdriveGraphicsCanvasPadDefaulthtml znajdziesz ciekaw stron ktoacuterapomaga w nauce u ywania prostych kszta toacutew koloroacutew cieni tekstu rysunkoacutew transformacjianimacji i przesuwania kursora w elemencie ltcanvasgt

Przyk adowy kod wykorzystuj cy element ltcanvasgtW przyk adowej grze w celu zwi kszenia trudno ci gry na wy szych poziomach zmieniamyt o planszy W animacji pojawiaj si kszta ty z przednich stron kart przez co najwy sze po-ziomy s niezwykle trudne

W internetowych materia ach do tego rozdzia u (httpwwwstandardistacommobile) znajdujesi kilka przyk adowych fragmentoacutew kodu wykorzystuj cych element ltcanvasgt Sproacutebuj na-rysowa japo sk flag a nast pnie przekszta ci j w statyczny rysunek Pac-Mana (czerwonekoacute ko zmie w oacute te a nast pnie dodaj bu k czarne koacute ka jako oczy a obok koacute ka trzy ma ekropki do zjedzenia) W przyk adach z materia oacutew znajdziesz te tekst z kodem wykraczaj cympoza zakres tej ksi ki Opisana jest w nim funkcja zmieniaj ca kolory Pac-Mana Pomo e Cito nauczy si jak uzyska dost p do pikseli narysowanych ju w elemencie ltcanvasgt Poznaszte inne metody rysowania na stronie

Cho w tej ksi ce poda am przyk ad wykorzystania elementu ltcanvasgt w grze CubeeDooobecnie nie stosowa abym dynamicznie generowanych elementoacutew ltcanvasgt w produkcyjnejwersji mobilnej aplikacji sieciowej Przy dzisiejszym stanie technologii zu ycie baterii w wy-niku wykonywania animacji w elemencie ltcanvasgt za pomoc JavaScriptu by oby dla u yt-kownikoacutew bardzo nieprzyjemne jednak akceleracja sprz towa dla elementu ltcanvasgt jestcoraz lepsza

Element ltcanvasgt a element ltsvggtElementy ltcanvasgt i ltsvggt maj w HTML5 kilka podobnych cech Cz sto poroacutewnuje si zesob te elementy Oba zwi zane s z technologiami sieciowymi ktoacutere pozwalaj tworzy za-awansowane grafiki w przegl darkach Jednak mi dzy tymi technologiami wyst puj po-wa ne roacute nice

W formacie SVG rysowanie odbywa si za pomoc XML-a W elementach ltcanvasgt u ywanyjest do tego JavaScript Przy u ywaniu tego elementu piksele s rysowane na p oacutetnie a po ichdodaniu ka dy piksel jest zapominany W SVG powstaj w z y modelu DOM Mo na do nichuzyska dost p do momentu ich usuni cia lub opuszczenia strony przez u ytkownika Obiete technologie maj wady i zalety

Rysunki w formacie SVG dostosowuj si do dowolnej rozdzielczo ci dzi ki czemu doskonalenadaj si do interfejsoacutew o dowolnych wymiarach (mo na skalowa je pod k tem rozdziel-czo ci ka dego ekranu) Rysunki w tym formacie s zapisywane w plikach XML co pozwalaatwo zwi kszy dost pno stron Rysunki SVG mo na animowa albo za pomoc sk adni de-

klaratywnej albo przy u yciu JavaScriptu Ka dy narysowany element jest cz ci modelu SVGDOM i mo na uzyska dost p do niego w JavaScripcie Jednak korzystanie z modelu DOMspowalnia dzia anie strony co jest wa ne i odczuwalne zw aszcza w rodowisku mobilnym



W elementach ltcanvasgt wszystko jest rysowane za pomoc pikseli Zwi kszenie rysunkumo e prowadzi do powstania efektu pikselizacji Element ltcanvasgt zmniejsza dost pnostron Mo na jedynie doda rezerwowy tekst pokazywany gdy nie da si wy wietli tegoelementu Aby umo liwi interakcje trzeba ponownie narysowa ka dy piksel Narysowaneelementy nie s dost pne jako w z y DOM Nie ma te interfejsu API do tworzenia animacjiZamiast tego zwykle u ywa si zegaroacutew lub wywo a requestAnimationFrame aby aktuali-zowa element ltcanvasgt w kroacutetkich odst pach czasu Element ltcanvasgt zapewnia powierzch-ni po ktoacuterej mo na rysowa za pomoc interfejsu API wybranego kontekstu Ten elementdoskonale nadaje si do edytowania grafiki generowania grafiki rastrowej na potrzeby gierlub tworzenia fraktali a tak e do wykonywania operacji wymagaj cych manipulwania da-nymi na poziomie pikseli Rysunki utworzone za pomoc interfejsu API elementu ltcanvasgtmo na te eksportowa

Dwuwymiarowy kontekst elementu ltcanvasgt jest dobrze obs ugiwany we wszystkich prze-gl darkach (od Internet Explorera 9) Tak e grafika SVG jest poprawnie interpretowana alew roacute nych formatach (od Internet Explorera 9 i Androida 3) Cho obie te technologie s po-prawnie obs ugiwane obie maj te pewne wady

Wydajno grafiki SVG bywa niska Przegl darki mobilne maj trudno ci z obs ugiwaniemdu ej liczby elementoacutew modelu DOM Ka dy dodatkowy w ze modelu DOM zajmuje pa-mi i wymaga ponownego przetworzenia w momencie zmiany uk adu strony Dlatego przytworzeniu aplikacji na przegl darki mobilne nale y ogranicza liczb dodawanych w z oacutewmodelu DOM Rysunki SVG sk adaj si z w z oacutew modelu DOM Wi ksza liczba takich w -z oacutew mo e prowadzi do spadku wydajno ci a w skrajnych przypadkach nawet do zawie-szenia si przegl darki mobilnej Z kolei element ltcanvasgt przy stosowaniu animacji (w od-roacute nieniu od generowania pojedynczych rysunkoacutew) mo e szybko zu y bateri urz dzeniaJednak we wszystkich popularnych przegl darkach dost pna jest akceleracja sprz towa dlatego elementu dzi ki czemu czas rysowania i aktualizowania jest znacznie kroacutetszy a zu yciebaterii mdash mniejsze

Sam uwzgl dnij wady i zalety obu technologii zanim zdecydujesz si na zastosowanie jednejz nich (lub zrezygnowanie z obu)

WebGLObs uga grafiki troacutejwymiarowej i technologii WebGL jest dopiero wprowadzana Obecnie wy-st puj powa ne problemy z wydajno ci znacznym zu yciem baterii i ograniczon obs ugw urz dzeniach przeno nych W czasie gdy powstawa a ta ksi ka najlepsz obs ug tech-nologii WebGL zapewnia system BlackBerry 10 Niedawno obs ug tej technologii dodanotak e do systemu Firefox OS Przy korzystaniu ze starszych urz dze przeno nych wartodobrze si zastanowi nad stosowaniem tej technologii Du e obci enie procesora prowadzido szybkiego zu ycia baterii a JavaScript mocno obci a procesor Nie chcesz przecie wy-czerpa baterii W urz dzeniach obs uguj cych technologi WebGL (np w urz dzeniach z sys-temem BlackBerry 10) do przetwarzania grafiki w tym formacie u ywany jest procesor graficznyPozwala to zwi kszy wydajno i ograniczy zu ycie baterii w poroacutewnaniu z u ywaniemzwyk ego procesora jednak i tak waham si z zach caniem do korzystania z tej technologiiJe li zdecydujesz si u y WebGL zawsze pami taj o wydajno ci (np o ilo ci zajmowanej pa-mi ci i zu yciu baterii)



Elementy ltaudiogt i ltvideogtPrzed pojawieniem si HTML5 nie istnia standardowy sposoacuteb osadzania filmoacutew wideo nastronach internetowych Zamiast tego filmy z internetu wy wietlane by y za pomoc nieza-le nych wtyczek takich jak Flash lub QuickTime Ponadto nie by o atwego sposobu na two-rzenie dost pnych multimedioacutew Dlatego do czone pliki wideo by y cz sto niedost pne dlaosoacuteb z wadami wzroku i s uchu

W HTML5 zdefiniowany jest standardowy sposoacuteb osadzania plikoacutew d wi kowych i wideona stronach internetowych S u do tego elementy ltvideogt i ltaudiogt Oba s obs ugiwanewe wszystkich popularnych przegl darkach mobilnych (z wyj tkiem Opery Mini) jednak narazie nie wszystkie przegl darki obs uguj te same formaty filmoacutew Przed omoacutewieniem do -czania nagra d wi kowych i wideo do dokumentu trzeba opisa kodeki plikoacutew multime-dialnych oraz obs ug multimedioacutew w przegl darkach Jest to konieczne poniewa w roacute nychprzegl darkach nale y udost pnia odmienne pliki multimedialne Ponadto trzeba zapewniarozwi zania rezerwowe dla przegl darek ktoacutere nie obs uguj multimedioacutew okre lonego typu

Typy plikoacutew multimedialnychGdy przegl darki b d obs ugiwa elementy ltvideogt i ltaudiogt z HTML5 oraz standardowetypy plikoacutew multimedialnych nie trzeba b dzie stosowa niezale nych wtyczek do odtwa-rzania multimedioacutew Jednak na razie poszczegoacutelne przegl darki obs uguj roacute ne kodeki audioi wideo Jak prawdopodobnie wiesz na iPadach i iPhonersquoach nie dzia a Flash Dzia aj za to ele-menty ltvideogt i ltaudiogt oraz formaty H264 (dla wideo) i AAC (dla d wi ku) Te formaty oma-wiam w nast pnym punkcie Wszystkie nowe przegl darki obs uguj element ltvideogt z HTML5przy czym robi to dla roacute nych formatoacutew Internet Explorer 9 Safari Chrome Android oraziOS obs uguj format MPEG4H264 (pliki mp4) natomiast Firefox 4 i jego nowsze wersje ChromeOpera oraz Android 23 i nowsze wersje poprawnie interpretuj format WebMVP8 (plikiwebm) Ten ostatni format dzia a tak e tak e w Internet Explorerze 9 je li w systemie zain-stalowane s potrzebne kodeki List obs ugiwanych formatoacutew znajdziesz w tabeli 51

Tabela 51 Obs uga kodekoacutew wideo w przegl darkach (w przegl darce Internet Explorer 9 mo na odr bniezainstalowa kodeki Ogg i WebM)

iPhonei iPad Android BlackBerry Opera

MobileOperaMini

Windows(Internet Explorer)

Chromew Androidzie

Firefoxw Androidzie

ltvideogt Tak Tak 7 11 9 Tak Tak

Ogg 2 11 (9) Tak

H264 Tak 30a 7 9 Tak Tak

WebM 23 14 (9) Tak Tak

a Zobacz stron httpwwwbroken-linkscom20100708making-html5-video-work-on-android-phones

Istnieje kilka kodekoacutew wideo Najwa niejsze z nich to TheoraOgg WP8 i H264 The-oraOgg (pliki ogv) to otwarty standard z wbudowan obs ug w przegl darkach Firefox35 Chrome 4 i Opera 105 oraz nowszych W Internet Explorerze ten format jest obs ugiwa-ny po zainstalowaniu wtyczki WebM to nowszy format u ywany razem z kodekiem wideoVP8 Wbudowana obs uga tego formatu jest dost pna w najnowszych wersjach przegl darekChrome i Mozilla Firefox oraz w Operze 106 i nowszych


Elementy ltaudiogt i ltvideogt 155

Obecnie kodek VP8 jest dost pny bez op at licencyjnych Kodek ten jest opatentowany jed-nak w a ciciel patentu (firma Google) udost pnia ten kodek bezp atnie Niestety cho jest ondobrze obs ugiwany w nowych przegl darkach prawa do patentoacutew zwi zanych z formatemWebM i kodekiem VP8 ro ci sobie tak e Nokia Dlatego w najbli szej przysz o ci ten formatprawdopodobnie nie stanie si standardem sieciowym

Format H264 jest przeznaczony dla urz dze o niskiej umiarkowanej i wysokiej przepusto-wo ci Mo na go odtwarza za pomoc technologii Adobe Flash oraz w roacute nych urz dzeniachprzeno nych (min w systemie Android i w iPhonersquoach) Nie jest to jednak otwarty standardWykupienie licencji mo e by kosztowne Producent przegl darki Chrome zapowiedzia ezrezygnuje z obs ugi tego formatu jednak na razie tego nie zrobi W Firefoksie ten format jestobs ugiwany je li kodek jest zainstalowany w u ywanym systemie operacyjnym Do samodotyczy Opery w urz dzeniach przeno nych

Na razie co wida w tabeli 51 nie istnieje format dzia aj cy we wszystkich przegl darkachAby film mo na by o odtwarza wsz dzie trzeba zakodowa go w wi cej ni jednym formacie

Obecnie przy tworzeniu witryn na telefony komoacuterkowe w Stanach Zjednoczonych najlepiejjest u ywa formatu H264 Trzeba jednak pami ta e poziom obs ugi tego formatu mo e sizmieni Je li docelowe urz dzenia przeno ne obejmuj systemy GPS konsole do gier itd wartopami ta e najpopularniejsz przegl dark mobiln na wiecie jest Opera Tak e w StanachZjednoczonych jest to najcz ciej u ywana przegl darka w urz dzeniach innych ni telefonyi komputery

Dodawanie elementu ltvideogt do witrynyWprawdzie je li film docelowo ma by wy wietlany na smartfonach w Stanach Zjednoczo-nych wystarczy wykorzysta format H264 to aby uzyska maksymaln zgodno z roacute nymiurz dzeniami trzeba przygotowa dwie wersje nagrania Utwoacuterz wersje w formatach WebM(WP8 dla wideo i Vorbis dla audio) i MP4 (H264 dla wideo i AAC dla audio) Odno niki doobu plikoacutew wideo podaj za pomoc elementu ltvideogt z HTML5 i podrz dnych znacznikoacutewltsourcegt Jako domy lny ustaw odtwarzacz oparty na Flashu

Atrybuty elementoacutew ltvideogt i ltaudiogtJest kilka atrybutoacutew elementoacutew ltvideogt i ltaudiogt ktoacutere s u do kontrolowania wygl dui dzia ania osadzanych multimedioacutew

Oto atrybuty obs ugiwane w elementach ltvideogt i ltaudiogt

srcAtrybut src przyjmuje jako warto adres URL pliku wideo lub audio Mo na go zast -pi kilkoma podrz dnymi znacznikami ltsourcegt

autoplayAtrybut logiczny autoplay informuje przegl dark e odtwarzanie nagrania rozpoczynasi automatycznie (bez oczekiwania na wci ni cie przycisku Play przez u ytkownika)Ten atrybut warto stosowa tylko na tych stronach ktoacuterych g oacutewn zawarto ci jest od-twarzany film



loopAtrybut logiczny loop powoduje e nagranie filmowe lub d wi kowe jest odtwarzanew p tli Gdy zostanie uruchomione b dzie odtwarzane w koacute ko do czasu wstrzymanialub zatrzymania Je li ten atrybut jest u ywany nagranie po dotarciu do ko ca jest uru-chamiane ponownie

controlsJe li u ywany jest ten atrybut logiczny przegl darka powinna wy wietla kontrolki dosterowania multimediami (przyciski do przeskakiwania do roacute nych miejsc nagrania w -czania go wstrzymywania itd)

preloadAtrybut preload informuje przegl dark jak du cz filmu powinna pobra przedrozpocz ciem jego odtwarzania Je li nie podasz tego atrybutu lub ustawisz jego wartona none przegl darka nie b dzie wst pnie pobiera danych Je eli ten atrybut jest u y-wany i ma warto auto przegl darka wst pnie pobiera plik Ustawienie metadata po-woduje e przegl darka pobiera wymiary d ugo i inne metadane dotycz ce nagranianatomiast nie ci ga samego pliku multimedialnego

Poni sze atrybuty dotycz tylko elementu ltvideogt (nie s obs ugiwane w elemencie ltaudiogt)

posterAtrybut poster przyjmuje adres URL rysunku u ywanego jako graficzny wype niacz domomentu rozpocz cia odtwarzania filmu Je li nie podasz tego atrybutu odtwarzacz wy-wietli pierwsz klatk z filmu (zwykle jest to czarny prostok t)

widthWarto atrybutu width to szeroko (w pikselach) pola z filmem

heightWarto atrybutu height to wysoko (w pikselach) pola z filmem

Oto przyk adowa deklaracja elementu ltvideogt (opis poszczegoacutelnych komponentoacutew przed-stawia tabela 52)

ltvideo autoplay controls loop poster=posterjpg preload=metadatasrc=videomp4 height=360 width=480gtTekst zast pczyltvideogt

Tabela 52 Komponenty przyk adowej deklaracji elementu ltvideogt

Komponent Opis

ltvideogt Znacznik ltvideogt

autoplay Je li jest ustawiony odtwarzanie filmu rozpoczyna si w momencie wczytania strony

controls Je i jest ustawiony dost pny jest pasek sterowania

loop Je li jest ustawiony wideo jest odtwarzane w p tli

poster=imgposterjpg Je li jest ustawiony wy wietlany jest podgl d nagrania

preload=metadata Przyjmuje warto ci none metadata i auto

src=videovideomp4 Odno nik do pliku wideo

height=360 Wysoko obrazu w wideo

width=480gt Szeroko obrazu w wideo

Tekst zast pczy Dowolny poprawny kod w HTML-u (standardowo podawany jest odno nik do danego filmu)

ltvideogt Wymagany zamykaj cy znacznik ltvideogt



Elementy ltaudiogt i ltvideogt z HTML5 umo liwiaj powi zanie etykiet z osadzanymi multi-mediami W HTML5 te elementy s cz ci modelu DOM co umo liwia okre lanie dla nichstyloacutew CSS i zapewnia rozbudowany interfejs API ktoacutery daje programistom kontrol nadodtwarzaniem filmu przy u yciu licznych nowych metod i w a ciwo ci JavaScriptu (takichjak play() pause() muted i ended)

Gdy element ltvideogt z HTML5 b dzie w pe ni obs ugiwany a wszystkie przegl darki b dudost pnia ten sam kodek wystarczy nast puj cy kod

ltvideo src=myVideomp4 width=400 height=300 controls poster=myImagejpggt Przegl darka nie obs uguje HTML5 ale mo esz pobra plik lta href=myVideoogvgt pod tym adresemltagtltvideogt

Niestety na razie ten kod zadzia a tylko w niektoacuterych przegl darkach Jak wcze niej wspo-mnia am nie wszystkie przegl darki obs uguj ten sam kodek dlatego dla poszczegoacutelnychprzegl darek trzeba udost pni roacute ne pliki

Aby by o to mo liwe w HTML5 dost pny jest element ltsourcegt Ten element pozwala wska-za wi cej ni jeden plik multimedialny Element ltsourcegt ma trzy atrybuty (oproacutecz atrybutoacutewglobalnych) src type i media

Aby dynamicznie zmienia odtwarzane multimedia zmodyfikuj atrybut src w znacz-niku ltvideogt lub ltaudiogt Nie wystarczy zmieni warto ci atrybutu src w elemencieltsourcegt Aby wybra typ plik obs ugiwany przez przegl dark wykorzystaj metodcanPlayType()

Atrybut type okre la typ zasoboacutew multimedialnych dzi ki czemu przegl darka przed po-braniem piku mo e ustali czy obs uguje dany typ Warto ci atrybutu type musi by po-prawny typ MIME

Nawet w sytuacji gdy nie wszystkie przegl darki obs uguj ten sam kodek kod nie jest zanadtoskomplikowany W przyk adowej grze mogli my doda film z instrukcjami do gry Nie zro-bili my tego ale by o to mo liwe Gdyby my to zrobili kod zapewniaj cy obs ug wideo wewszystkich przegl darkach powinien wygl da tak

ltvideo width=400 height=300 preload=none poster=posterImgjpg controlsgt ltsource src=myVideomp4 type=videomp4 codecs=avc142E01E mp4a402gt ltsource src=myVideowebm type=videowebm codecs=vp8 vorbisgt ltsource src=myVideoogg type=videoogg codecs=dirac speexgt ltobject width=400 height=324 type=applicationx-shockwave-flash data=myVideoswfgt ltparam name=movie value=myVideoswfgt ltparam name=flashvars value=image=posterImgjpgampampfile=myVideomp4gt lt-- Rozwi zanie rezerwowe --gt lta href=linktovideogt ltimg src=posterImgjpg width=400 height=300 alt=Fantastyczne wideogt ltagt ltobjectgtltvideogt



Je li przegl darka obs uguje element ltvideogt z HTML5 zostanie on u yty Je eli przegl dar-ka nie obs uguje pierwszego typu multimedioacutew sprawdzi nast pny Gdy element ltvideogtz HTML5 nie jest obs ugiwany przegl darka u ywa technologii Adobe Flash Je li brakujeobs ugi zaroacutewno Flasha jak i elementu ltvideogt wy wietlana jest zast pcza grafika Mo eszte doda odno nik umo liwiaj cy pobranie nagrania

Film z pliku we Flashu jest zadeklarowany jako wy szy o 24 piksele od innych wersjiWynika to z tego e kontrolki Flasha zajmuj 24 piksele w pionie pod oknem z filmemnatomiast w formatach wideo w HTML5 kontrolki s nak adane na obraz

Je li aplikacja jest przeznaczona tylko na nowe urz dzenia przeno ne mo na pomin Flashai doda elementy lttrackgt (opis tej techniki znajdziesz w podpunkcie bdquoElement lttrackgtrdquo

ltvideo width=400 height=300 preload=none poster= posterImgjpg controlsgt ltsource src=myVideomp4 type=videomp4 codecs=avc142E01E mp4a402gt ltsource src=myVideowebm type=videowebm codecs=vp8 vorbisgt ltsource src=myVideoogg type=videoogg codecs=theora vorbisgt ltimg src=posterImgjpg width=400 height=300 alt=Tu tytu filmu title=Przegl darka nie obs uguje odtwarzania filmoacutewgt lttrack kind=subtitles label=English src=envtt srclang=en defaultgtlttrackgt lttrack kind=subtitles label=Deutsche src=devtt srclang=degtlttrackgtltvideogt

Pliki wideo zwykle obejmuj cie ki audio i wideo cie ki audio zawieraj znaczniki umo -liwiaj ce synchronizacj d wi ku z obrazem Poszczegoacutelne cie ki mog zawiera metadaneokre laj ce np proporcje obrazu lub j zyk cie ki d wi kowej Tak e w kontenerach mogznajdowa si metadane (np tytu filmu ok adka p yty z filmem numer odcinka serialu itd)

Do dokumentu mo na te doda element ltaudiogtltaudio id=soundgt ltsource src=musicmp3 type=audiomp3gt ltsource src=musicogg type=audioogggt lt-- Mo na te doda wersj we Flashu na potrzeby przegl darek bez obs ugi elementu ltaudiogt --gtltaudiogt

W artykule w serwisie DevOpera (httpdevoperacomarticlesvieweverything-you-need-to-know-about-html5-video-and-audio) znajdziesz bardzo szczegoacute owe instrukcje na temat wykrywania

obs ugi elementoacutew

Element lttrackgtAby pliki wideo i audio by y dost pne dla u ytkownikoacutew z wadami s uchu a nawet dlaosoacuteb ktoacutere nie rozumiej j zyka z nagrania mo na doda do filmu podpisy wskazuj c plikz nimi w elemencie lttrackgt

Atrybut src w elemencie lttrackgt (umieszcza si go w elementach ltvideogt i ltaudiogt) pro-wadzi do cie ki z informacjami o czasie Atrybut kind okre la jakiego rodzaju dane s wska-zywane w atrybucie src Warto ci atrybutu kind to subtitles captions descriptionschapters i metadata



W elemencie multimedialnym mo na zapisa wiele cie ek jednak ka da z nich musi byunikatow kombinacj typu i j zyka Oto typy cie ek

subtitlesJest to warto domy lna atrybutu kind Okre la e cie ka zawiera t umaczenie dialogoacutewktoacutere domy lnie jest wy wietlane razem z filmem lub nagraniem d wi kowym Ten typjest najprzydatniejszy gdy rozmowy s nies yszalne lub prowadzone w obcym j zyku

captionsOkre la cie k z transkrypcj lub t umaczeniem dialogoacutew Przypomina typ subtitlesale obejmuje transkrypcj efektoacutew d wi kowych uwagi na temat muzyki i inne informacjena temat d wi ku ktoacutere pozwalaj w pe ni zast pi cie k d wi kow je li jest niedo-st pna Ten typ jest najprzydatniejszy gdy d wi k jest wy czony lub gdy u ytkownik mawad s uchu

descriptionscie ki tego typu to opis obrazu z odtwarzanych multimedioacutew Ten typ jest przeznaczony

dla syntezytatoroacutew d wi ku gdy obraz jest niedost pny Przydaje si dla osoacuteb z wadamiwzroku i innych u ytkownikoacutew ktoacuterzy nie mog zobaczy filmu lub odczyta tekstucie ki

chaptersOkre la cie k z tytu ami rozdzia oacutew przeznaczon do poruszania si po nagraniu

metadataOkre la cie k przeznaczon dla skryptoacutew (niewy wietlan u ytkownikom)

Plik ze cie k podaje si w atrybucie src Atrybut srclang okre la j zyk tekstu danychz elementu lttrackgt Atrybut label to czytelny dla u ytkownika tytu elementu lttrackgtPrzegl darka u ywa tego tytu u do wy wietlania w interfejsie u ytkownika cie ek z napisamitranskrypcj i opisem obrazu

Atrybut default informuje e przegl darka ma domy lnie zastosowa dany element lttrackgtje li preferencje nie okre laj i bardziej odpowiedni jest inny element tego rodzaju Jako do-my lny mo na ustawi tylko jeden element lttrackgt

Elementy ltaudiogt i ltvideogt z HTML5 umo liwiaj powi zanie napisoacutew z osadzonymi mul-timediami Te elementy s cz ci modelu DOM dla HTML5 co pozwala dodawa do nichstyle CSS i zapewnia rozbudowany interfejs API zapewniaj cy programistom kontrol nadodtwarzaniem filmoacutew Dost pne s tu liczne nowe metody i w a ciwo ci JavaScriptu (npplay() pause() muted i ended)

Elementy ltvideogt i ltaudiogt a JavaScriptJe li zamierzasz u ywa JavaScriptu do kontrolowania elementoacutew ltaudiogt i ltvideogt powi-niene wykrywa dost pne funkcje W ten sposoacuteb upewnisz si e potrzebne elementy sobs ugiwane oraz unikniesz b doacutew JavaScriptu

if (createElement(audio)canPlayType) Element audio jest obs ugiwany

Mo esz doda wbudowane kontrolki lub utworzy w asne Elementy ltaudiogt i ltvideogt ob-s uguj metody play() i pause() Aby utworzy w asne kontrolki mo esz doda odpowiada-j cy im kod w HTML-u i u y JavaScriptu do uruchamiania i wstrzymywania nagra Potrzebnykod mo e wygl da tak



ltdiv id=controls style=display nonegt ltbutton id=playButtongtStartltbuttongt ltbutton id=pauseButtongtPauzaltbuttongtltdivgtltscriptgt if (documentcreateElement(audio)canPlayType) if (documentcreateElement(audio)canPlayType(audiomp3) || (documentcreateElement(audio)canPlayType(audioogg)) Element ltaudiogt z HTML5 i podany typ audio s obs ugiwane documentgetElementById(player)styledisplay = block else hellip Tu mo esz umie ci nagrania we Flashu lub inne hellip ltscriptgt

W celu utworzenia w asnych kontrolek mo esz zastosowa nast puj cy kodvar videoClip = documentquerySelector(clip)var playButton = documentquerySelector(playButton)var pauseButton = documentquerySelector(pauseButton)

playButtonaddEventListener(touchEnd function() playVideo())pauseButtonaddEventListener(touchEnd function() pauseVideo())

function playVideo() Odtwarzanie filmu videoClipplay() Aktualizowanie kontrolek playButtondisabled = true pauseButtondisabled = false

function pauseVideo() Wstrzymywanie filmu videoClippause() Aktualizowanie kontrolek playButtondisabled = false pauseButtondisabled = true

function MuteUnMute() Zmiana warto ci przycisku documentgetElementById(mute)value = videoClipmuted Wy cz d wi k W cz d wi k Zmiana stanu filmu videoClipmuted = videoClipmuted false true

CubeeDooW omawianej tu przyk adowej grze u yli my kilku d wi koacutew Oproacutecz odtwarzania w tleopcjonalnej irytuj cej muzyki gra generuje d wi ki informuj ce o powodzeniu lub pora ce(np po przej ciu na nast pny poziom dopasowaniu kart nieudanym dopasowaniu itd)

Muzyk odtwarzan w tle nale y umie ci w elemencie ltaudiogt poniewa jest kontrolowanaprzez u ytkownika D wi ki informacyjne zale od poczyna u ytkownika i powodzenia lubpora ki dlatego s dynamicznie generowane za pomoc JavaScriptu



Oto dwie techniki ktoacutere mo na stosowa do dodawania d wi ku D wi k mo na do czybezpo rednio w HTML-u

ltaudio id=nonmatchsound preload src=notmatchmp3gtltaudiogtltaudio id=matchsound preload src=matchmp3gtltaudiogt

Program wst pnie wczytuje nagranie ale nie odtwarza plikoacutew d wi kowych automatycznieani nie odgrywa ich w p tli Zamiast tego kod w JavaScripcie uruchamia odtwarzanie d wi koacutewinformuj cych o dopasowanej lub niedopasowanej karcie

playSound function(matched) if (qbdoomute) return false if (matched) qbdoomatchfoundplay() else qbdoofailedmatchplay()

D wi ku nie trzeba do cza w HTML-u Zamiast tego mo na doda go do modelu DOM zapomoc JavaScriptu bez do czania plikoacutew d wi kowych na stronie

playSound function(matched) Je li d wi k jest wy czony nale y przej dalej if (qbdoomute) return false Je li w ze audio nie istnieje nale y go utworzy if (qbdooaudio) qbdooaudio = documentcreateElement(audio) if (matched) qbdooaudiosrc = qbdoomatchedSound else qbdooaudiosrc = qbdoofailedMatchSound qbdooaudioplay()

W grze dodali my d wi k tylko w celu zademonstrowania pos ugiwania si elementem ltaudiogtNigdy nie nale y automatycznie odtwarza muzyki mdash irytuje to u ytkownikoacutew Zauwa e grazawiera przycisk wyciszania Je li udost pniasz d wi k i domy lnie jest on w czony to gdyu ytkownik zdecyduje si go wy czy zapami taj to ustawienie w pami ci lokalnej (pamilokaln omawiam w rozdziale 6)

Okre lanie stylu elementu ltvideogtElement ltvideogt jest elementem HTML-a Mo na wi c okre li jego styl (podobnie jak wszyst-kich elementoacutew) Mo esz wykorzysta style CSS do zdefiniowania wysoko ci i szeroko ci ob-razu Mo esz te ukry fragment nagrania doda zaokr glone naro niki a nawet powieliobraz Za pomoc elementu ltcanvasgt mo na pobra piksele i zmieni ich kolor (ten sam efektmo na osi gn za pomoc filtroacutew CSS)



Dynamiczne dopasowywanie wielko ci obrazuCo wa niejsze mo na zmienia wymiary obrazu na podstawie wielko ci urz dzenia i pro-porcji ekranu Thierry Koblentz zaproponowa skuteczn metod (httpalistapartcomarticlecreating-intrinsic-ratios-for-video) umo liwiaj c przegl darkom okre lanie wymiaroacutew obrazuna podstawie szeroko ci bloku zawieraj cego film (lub szeroko ci strony) i pierwotnej wielko-ci Zmiana szeroko ci np w wyniku zmiany orientacji urz dzenia prowadzi do ponownego

wyznaczenia wysoko ci To umo liwia zmian wielko ci obrazu i pozwala skalowa filmyw taki sam sposoacuteb jak rysunki

Aby utworzy film pozwalaj cy na zmian wymiaroacutew nale y przygotowa pole o zmiennejwielko ci i odpowiednich proporcjach (43 169 itd) Nast pnie film trzeba rozci gn abydopasowa go do wymiaroacutew pola Mo na przy tym wykorzysta marginesy wewn trzne(w a ciwo ci z rodziny padding) procentowe warto ci wymiaroacutew i bezwzgl dne okre laniepozycji Marginesy wewn trzne s zwykle ustawiane na 5625 lub 75 wielko ci okna (w za-le no ci od proporcji) W tym modelu mo na bezwzgl dnie okre li pozycj elementu ltvideogtw taki sposoacuteb aby zajmowa ca wysoko i szeroko obszaru wyznaczanego przez we-wn trzne marginesy

Je li chcesz doda filmy o zmiennej wielko ci do witryny z dynamicznie dopasowywanymrozmiarem mo esz zastosowa nast puj cy kod

wrapper position relative height 0 width 100 padding-bottom 5625 Lub padding-bottom 75video position absolute width 100 height 100 left 0 top 0

Co warto wiedzie o stosowaniu elementu ltvideogtW odroacute nieniu od Flasha ktoacutery jest obs ugiwany za pomoc wtyczki kontrolowanej przezjedn firm dlatego wsz dzie dzia a w ten sam sposoacuteb element ltvideogt funkcjonuje niecoinaczej w poszczegoacutelnych przegl darkach i systemach operacyjnych Na iPhonersquoach oraz w sys-temach Android i Windows Phone 8 filmy zawsze s odtwarzane w trybie pe noekranowymNa iPadach dost pna jest kontrolka trybu pe noekranowego a wielko obrazu mo na zmie-nia tak e za pomoc gestu bdquoszczypaniardquo W systemach iOS i Windows do odtwarzania filmoacutewu ywany jest procesor graficzny natomiast w Androidzie do wersji 4 filmy by y wy wietlaneprzy u yciu g oacutewnego procesora

Upewnij si e u ywany serwer obs uguje potrzebne typy MIME wideo Brak takiej obs ugimo e prowadzi do problemoacutew w Firefoksie Dodaj wiersz AddType videooggogv i po-dobne wpisy do pliku htaccess je li ich w nim nie ma

Urz dzenia iPhone i iPad nie odtwarzaj automatycznie filmoacutew nawet je li dodasz atrybutautoplay



Wygl d kontrolek zale y od natywnych kontrolek przegl darki Jak wcze niej wspomnia-am wygl d i styl kontrolek mo na zmieni za pomoc JavaScriptu Je li chcesz doda

skoacuterk dla kontrolek zajrzyj na stron httpwwwvideojscom

Je eli chcesz zacz udost pnia w asne filmy istnieje otwarty wieloplatformowy tran-skoder wideo z obs ug wielow tkowo ci Jego nazwa to Handbrake (httphandbrakefr)i jest dost pny na licencji GPL w systemach Mac OS X Linux i Windows

Pami taj e odtwarzanie nagra audio i wideo szybko wyczerpuje baterie Cho multimediatego typu s obs ugiwane we wszystkich smartfonach wi ksze mo liwo ci wymagaj wi cejodpowiedzialno ci Powiniene zadba o to aby tworzone przez Ciebie aplikacje nie zu ywa ybaterii w urz dzeniach u ytkownikoacutew Zachowaj ostro no przy stosowaniu funkcji wyczer-puj cych baterie




413

Skorowidz

important 206specyficzno 233

id 211myParent a 212appcache 167copyright urgent 212transform

matrix() 309keyframes 317media 69

aspect-ratio 200device-aspect-ratio 200device-height 200device-width 200height 200orientation 200width 200w a ciwo ci dla urz dze przeno nych 200wyboacuter skrajnych wymiaroacutew 201wykrywanie

obs ugi animacji i przej 339wybranych funkcji 339

supports 201tworzenie uk adu opartego na modelu

flexbox 340wykrywanie funkcji 339

viewport 368ltagt 86 95

download 87media 87name 87ping 87target 87

ltabbrgt 89 95ltaddressgt 75 81ltareagt 55 92ltarticlegt 77 78ltasidegt 79 80

ltaudiogt 154a JavaScript 159atrybuty 155 156powi zanie etykiet z osadzanymi

multimediami 157ltbgt 88ltbasegt 55 67ltbdigt 86ltbdo dir=rdquortlrdquogt 86ltbdogt 89ltbodygt 57 60 61 75

atrybuty 61odbiorniki zdarze click i touchend 374z elementami strony 72

ltbrgt 55 89ltbuttongt 114 139

button 139reset 139submit 139

ltcanvasgt 148 152aktualizowanie 153dodanie do dokumentu 148dwuwymiarowy kontekst 153id 149 150

ltcirclegt 143ltcitegt 89ltcodegt 89ltcolgt 55 95ltcolspangt 95ltcommandgt 55ltdatalistgt 132 134

agodna degradacja 133ltdelgt 89 95ltdescgt 143 144ltdetailsgt 92

open 92ltdfngt 89ltdivgt 77 115ltemgt 89


414 Skorowidz

ltembedgt 55 92 143src 92type 92

ltfieldsetgt 138ltfigcaptiongt 82ltfiguregt 82ltfootergt 76 80ltformgt 97 111 137

autocomplete 138onreset 112

lth1gt 75ltheadgt 57 60 62ltheadergt 76 79

dla bloku ltsectiongt 79podstawowy 79

lthrgt 55 83lthtmlgt 57 59

manifest 60 166 170wymagane atrybuty na stronach roacute nego

typu 59ltigt 88ltiframegt 90

sandbox 91seamless 91srcdoc 90

ltimggt 55 91 114 143ltinputgt 55 98 99 108 115 128 232

atrybuty 99autocomplete 106autofocus 107color 103data i godzina 123disabled 104 105email 132form 105 106list 132max 100maxlength 105min 100nowe typy 115okre lanie styloacutew dla elementoacutew 114pattern 102placeholder 101 102readonly 104 105required 99size 105step 101text 132type 98 99 115typy i atrybuty elementu 107 126url 132userid 106

ltinsgt 89ltk tgt 266ltkbdgt 89ltkeygengt 55 137

autofocus 137challenge 137disabled 137form 137keytype 137name 137

ltlabelgt 134 139dost pno formularzy 102for 139id 139

ltlegendgt 138ltligt

value 83ltlinkgt 55 67 360

atrybuty 68dla arkuszy styloacutew 68niedost pne atrybuty 69media 68 199

all 198rel 69 364

shortcut icon 68stylesheet 198

src 198type 198

ltmaingt 82ltmarkgt 84ltmenugt 94

id 94label 94type 94

ltmenuitemgt 94label 94title 94type 94

ltmetagt 55 57 63 378apple-mobile-web-app-capable 66apple-mobile-web-app-status-bar-style 66charset=rdquoUTF-8rdquo 63content 63 361description 63dla aplikacji mobilnych 64format-detection 67http-equiv 63keyword 64name 63 64styl paska stanu 361viewport 64 367 368

content 367web-app-capable 361


Skorowidz 415

ltmetergt 135 136high 135low 135max 135min 135optimum 135 136

ltnavgt 78ltnoscriptgt 72ltobjectgt 91 92 95 143 145

plik SVG 145ltolgt 95

reversed 83type 83

ltoptgroupgt 138ltoptiongt 132 134 138ltoutputgt 114 134 135

for 134form 134name 134onchange 134onformchange 134onforminput 134

ltpgt 134ltparamgt 55 92ltprogressgt 136

max 136value 136

ltqgt 89ltrectgt 143ltrpgt 85ltrtgt 85ltrubygt 85ltsgt 88ltsampgt 89ltscriptgt 71

async 72defer 72dodawanie do stron internetowych 71src 71type 71wydajno JavaScriptu 71

ltsectiongt 77 78ltselectgt 132 134 138ltsmallgt 89ltsourcegt 55

atrybuty 157type 157

ltspangt 89 134 193ltstronggt 89 95ltstylegt 70 197

media 70scoped 70

ltsubgt 89

ltsummarygt 92odbiornik zdarze 94

ltsupgt 89ltsvggt 142

poroacutewnanie z ltcanvasgt 152lttablegt 95lttdgt 95lttextareagt 138

cols 138hard 138rows 138soft 138wrap to hard 138

ltthgt 95lttheadgt 95lttimegt 85

datetime 85lttitlegt 57 60 143 144lttrgt 95lttrackgt 55 158

default 159kind 158label 159src 158srclang 159

ltugt 89ltulgt 189ltvargt 89ltvideogt 154

a JavaScript 159atrybuty 155autoplay 155controls 156dodawanie do witryny 155funkcjonowanie w przegl darkach

i systemach operacyjnych 162height 156komponenty przyk adowej deklaracji 156loop 156okre lanie stylu elementu 161poster 156powi zanie etykiet z osadzanymi

multimediami 157preload 156src 155width 156

ltwbrgt 55 86

AAAC 154Aardwolf 37Accessible Rich Internet Applications 18 51 191active-matrix organic light-emitting diode 382


416 Skorowidz

ADB 32addEventListener 368Adobe Edge Inspect 35 391Adobe PhoneGap Build 378adres URL plik manifestu 60akceleracja sprz towa 385

dla elementu ltcanvasgt 153obliczanie uk adu elementoacutew 386ponowne wy wietlanie 386

akcelerometr 375allow-forms 91allow-pointer-lock 91allow-popups 91allow-same-origin 91allow-scripts 91allow-top-navigation 91Amaya 146Ambient Light Events 377analizowanie da sieciowych 391Android 41Android 23 27Android Debug Bridge 32Android Debug Monitor 33

Android Virtual Device Manager 34animacje 315

akceleracja sprz towa 385cykl 316fade 322klatki kluczowe 317 318opoacute nienie odtwarzania 316p ynno 402skroacutecony zapis w a ciwo ci 316stosowanie 318w a ciwo ci 315

punkt rodkowy 319wstrzymane 316wydajno 323 402wykorzystywane ustawienia przed i po

zako czeniu animacji 316z odbijaj c si kulk 319z wykorzystaniem spriteoacutew 320zanikanie 322

animation 316animation-delay 316animation-direction 316

alternate 319 323normal 319

animation-duration 316animation-fill-mode 316

both 319animation-iteration-count 316animation-iterations 323animation-name 315

animation-play-state 316animation-timing-function 316 319 320

spritey 344step() 320

antywzorce z obszaru wydajno ci 394Apache Cordova 378aplikacje

hybrydowe 378narz dziowe 354rozrywkowe 353typu mash-up 190udost pnianie w wersji produkcyjnej 28w formie pakietoacutew 378w a ciwo ci 351zwi kszaj ce produktywno 352

aplikacje dzia aj ce w trybie offline 165 360pami lokalna 170pami oparta na SQL-u i bazach danych 179pami podr czna 166pami sesji 170sprawdzenie pod czenia do sieci 165

aplikacje mobilnedostosowywanie stron do ma ych ekranoacutew 367kategorie 352projektowanie 349testowanie 379tworzenie rozwi za dla mobilnych

przegl darek z sinikiem WebKit 360zarz dzanie pami ci 357

aplikacje natywne 12aktualizacja 12dost pno 13fa szywe 378historia 15proces zatwierdzania 12przegl darka 356testowanie 40u ytkownicy 351wady 16zalety 16

aplikacje sieciowe 12aktualizowanie 13debugowanie 32dost pno 13historia 15mo liwo ci 12na urz dzenia przeno ne 11narz dzia do tworzenia 29natywne 378testy zautomatyzowane 42tryb pe noekranowy 66 361wady 16zalety 16zmiany 12


Skorowidz 417

AppCache 166Appcelerator Titanium 379apple-mobile-web-app-capable 66apple-mobile-web-app-status-bar-style 66apple-touch-icon 70apple-touch-startup-image 70ARIA 18 51 100 191

aria-labeledby 132aria-required 132atrybuty 192dost pno 191 192role 192 193w a ciwo ci 192

arkusze klienta 204arkusze styloacutew

kolejno klas 208osadzanie 394oznaczenie bezwzgl dnych odno nikoacutew 217przesy anie 68tekst zast pczy 101textcss 68zewn trzne 198 203

aspect-ratio 200async 72atrybuty 45

accesskey 49alt 145aria- 45 51ARIA 100 132aria-atomic 51aria-busy 51aria-describedby 52aria-disabled 52aria-expanded 52aria-haspopup 52aria-hidden 52aria-label 143 149aria-live 51aria-relevant 51async 72autocomplete 106autofocus 97 107autoplay 155bandwidth 376charset 57 63class 45 46 61 188 189 208content 63 66 367contenteditable 50contextmenu 50controls 156data- 45dataaddress 219data-position 52

data-value 52 219 231datetime 85default 159defer 72dir 45 48 61disabled 104 105download 87draggable 51dropzone 51for 46 134 135form 105 106 111 134globalne 45height 156hidden 50 189href 68 69hreflang 69http-equiv 63 64id 45 46 61 132 212internacjonalizacji 45itemid 53itemprop 53 188itemref 53 188itemscope 53 188 190itemtype 53 188kind 158label 94 159lang 45 47 60 61language 71list 132logiczne 45 54 57loop 156manifest 60 166 167max 100 129maxlength 105 129media 68 70 87 199metered 376mikrodanych 45 53min 100multiple 113name 63 134navigatorconnectiontype 376niestandardowe atrybuty danych 45 52open 92pattern 102 104 120 128 129ping 87placeholder 101 102poster 156preload 156preserveAspectRatio 145profile 60properties 190readonly 104 105rel 68 69 198


418 Skorowidz

atrybutyrequired 99 129reversed 83role 51 52 192 193sandbox 91scoped 70seamless 91selektory atrybutoacutew 215size 105sizes 69sk adnia 54spellcheck 51src 71 92 155 157 158srcdoc 90srclang 159step 101style 45 47 143 197tabindex 48 220target 87title 45 46 94 103 129 132type 69 71 83 92 98 99 128umieszczenie w elemencie 54ustawianie warto ci 56value 83 108viewbox 145width 156z HTML-a 4 ktoacutere sta y si globalne

w HTML5 48zwi zane z modu em ARIA 51 52

auto 48autocomplete 106autofocus 107automatyczne wykrywanie numeroacutew telefonu 67autoplay 155autouzupe nianie 106

Bbackground-color 220 281

padding-box 332background-image 142background-position 143 231 251 273 274

animacja 345background-repeat 274 278

no-repeat 204 275repeat-x 283

background-size 274auto 274 276contain 274 276cover 274kilka grafik t a 281s owa kluczowe 274wada 276warto DPI 276

backwards 316Basic UI 285bateria 377bazy danych 179

IndexedDB 165 179 183sieciowe bazy danych 179Web SQL 179

bezpiecze stwo 191origin 191

bibliotekijQuery 107 383kodu JavaScript i CSS dla iPhonea 15Nodejs 35o otwartym dost pie do kodu roacuted owego 26

Bing 394BlackBerry 10 37 41

debuger 37WebGL 153

BlackBerry Browser 37black-translucent 361Blink 29blok

deklaracji stylu 197nawigacyjny dokumentu 78

blokowanieklikni cia 374przesuwania strony 373przewijania 374

border-color 256currentColor 256

border-image 328border-width 257sk adnia 329w a ciwo skroacutecona 333

border-image-outset 332border-image-repeat 330 332

repeat 332round 333space 333stretch 332

border-image-slice 330 331fill 330

border-image-source 330border-image-width 331border-radius 261

bottomleft 262bottomright 262efekt pikselizacji 261grafika t a 264kolejno naro nikoacutew 262promie 261

warto ci w modelu DOM 262sk adnia 261


Skorowidz 419

skroacutet dla w a ciwo ci 261topleft 262topright 262

border-style 255 256 329dotted 255hidden 256none 256warto ci w a ciwo ci 256

border-style-right dashed 255border-width 257 331

model pude kowy 332s owa kluczowe 257

both 316box-shadow 286

inset 286kolejno wy wietlania 287

box-sizing 259border-box 259

breakpoint 325Browser Testing and Tools 32browsing context 91

CCACHE 168Cache-Control 388canvas 18captions 159capture 113Cascading Style Sheets 196CasperJS 42cele u ytkownikoacutew 21change 377changedTouches 371chapters 159charset 57 63Chrome 14

okno robocze 31panel Overrides 31ledzenie zu ycia pami ci 357

zarz dzanie pami ci 399zdalne debugowanie 32zmiana wspoacute rz dnych dla geolokalizacji 31

Chrome Canary 28cia o dokumentu 57cienie 282

dla tekstu 283 284format RGBA 239poacutel 286

class 45 46 61 208Client-Hints 346Clown Car 91 144column 326column-count 326

column-fill 328column-gap 326 328column-rule 326 327column-rule-width 328column-span 328column-width 326 328compassneedscalibration 375consolelog() 33content 63 66contenteditable 50contextarc 151contextmenu 50controls 156cookie 170 171 172 204

identyfikator 172ograniczenie 171

CORS 191Crossfire 32cross-origin resource sharing 191CSS 45 196

circle 109czas wy wietlania 398definicje 196disc 109elementy pasuj ce do selektoroacutew pseudoklas

221formaty deklarowania koloroacutew 236gradienty 264kaskadowo 233maski 346none 109nowe elementy 19obs uga plikoacutew w formacie SVG 142odst py i znaki przestankowe 213poprawianie interfejsu u ytkownika 130regu y 196selektory 206sk adnia 196specyficzno 233square 109w projektowaniu RWD 325wskazywanie elementoacutew 197wydajno 397wygl d i styl natywnych aplikacji z iPhonersquoa

253 260zapisywanie plikoacutew 198zwi kszanie u yteczno ci stron 131

CSS 2 195ograniczenia 20

CSS Object Model 201CSS3 19 97 195

animacje 293 315 323cienie 282dodatkowe mo liwo ci 235


420 Skorowidz

CSS3funkcje 19grafika t a 280modu y 195 253

interfejsu u ytkownika 222nauka 260nowe selektory 210ograniczenie liczby w z oacutew modelu DOM 253przej cia 293 294 323przygotowania do nauki 25selektory 405warto ci koloroacutew 235wskazywanie w z a dokumentu 207wydajno 253zapytania media 200

CSS4selektory 410

CSSOM 201CubeeDoo 26 246

alterAValue() 175alterValue 173ASC 181cardinfo 176currentLevel 176debugger 178defaultvalues 174DESC 181gameDuration 177gbdoo 174gbdoostorageType 180getItem() 174 175 177getLocation() 186insert 181nth-of-type() 226pauseGame 173 176playGame 173 174 176 177px 246rem 246renderHighScores() 182reset 173select 181sessionStorage 174setupGame 177storageType 181storeValues() 173 174 175 176timeLeft 177touchcancel 371vh 246vm 246Web SQL 180

currentColor 240 256dla tekstu 284

czas 247 249

czas pracy na baterii 381akceleracja sprz towa 385format JPEG 382ilo kodu w JavaScripcie 383kolory 382liczba przesy anych da 384obliczanie uk adu elementoacutew 386ponowne wy wietlanie 386sie 384

czas wczytywania 400dla zdarze 401poroacutewnywanie 401

czcionkibezszeryfowe 19dostosowane do sieci 19z ikonami 345 390zamiast ikon graficznych 390

cz stotliwo 247 249czytelno tekstu 284czytniki ekranu

aplikacje RIA 51atrybut lang 47

Ddane bez po czenia z sieci 18dataaddress 219data-position 53data-value 53 219 231datetime 85debugery 30debugowanie zdalne 32

Adobe Edge Inspect 35BlackBerry 10 37Ghostlab 35kodu w JavaScripcie za pomoc Aardwolfa 37narz dzia diagnostyczne na Androida 32weinre 34za pomoc portu USB 32

default 159defer 72definicja produktu 359definiowanie konkretnego czasu lub daty 85deklaracja typu dokumentu 57 58

dla plikoacutew SVG 143description 63descriptions 159device-aspect-ratio 200device-height 65 200devicemotion 375deviceorientation 375 376device-width 65 200dh 346diagram wodospadu 391 393


Skorowidz 421

dir 45 48 61disabled 104 105display

flex 335 338inline-flex 335przedrostki 336

doctype 58Document Object Model 29document type declaration 57dodawanie metadanych 63dokument HTML5 57

ltbodygt 61ltheadgt 60lthtmlgt 59lttitlegt 60deklaracja DTD 58dodawanie styloacutew 70nag oacutewek dokumentu 62

DOM 97 186classList 176minimalizowanie modelu 399 401nodeclassListadd() 176nodeclassListcontains() 176nodeclassListremove() 176nodeclassListtoggle() 176rysunki SVG 152

DOMContentLoaded 400domy lna kolejno znacznikoacutew 49dost p do sprz tu 375dostosowywanie stron do ma ych ekranoacutew 367dots per inch 341dotyk 367 368

fikcyjne i rzeczywiste zdarzenia zwi zanez klikni ciem 372

reaguj ce obszary 369wielodotyk 368zdarzenia zwi zane z mysz i dotykiem 369

download 87dpi 246DPI 341dppx 246dpr 346dpx 246draggable 51Dragonfly 30 32Dreamweaver 28dropzone 51DTD 57 58dw 346dymek z tre ci 256dynamiczne dostosowywanie do wymiaroacutew

ekranu 340dynamiczne klawiatury 117

dynamicznie dopasowuj ce si witryny 325kolumny 328model flexbox zapytania media 338uk ady wielokolumnowe 334

d wi ki 18dodawanie 161informacyjne 160

EE ~ F 214E + F 214E gt F 213E F 212Eclipse 28edytor tekstu 28efekty

dotkni cia 372typograficzne 79

ekranAMOLED 382dostosowywanie stron do ma ych ekranoacutew 367dotkni cia w celu przewijania 375obszary reaguj ce na dotyk 369przechwytywanie dotkni cia 373szeroko 69wielodotyk 368wysoko 69zdarzenie klikni cia 369

elastyczny kontener 335 336kierunek uk adu 336wielko elementoacutew 337

elementy 44blokowe 75canvas 12 18definiowanie sekcji 47dodawanie do strony internetowej 54dopasowanie semantyczne 57formularzy atrybuty 99grupuj ce 81identyfikatory 46 211interaktywne 92internacjonalizacja 47liniowe 75

zmiana wygl du 45multimedialne 90 159nieistotne 50odpowiedzialne za warstw prezentacji 196okre lanie semantycznej struktury dla

elementoacutew o zmienionym przeznaczeniu 51osadzane 90p ywaj ce 285podrz dne selektory CSS 208


422 Skorowidz

elementypowi zanie ze znacznikami 50przeci ganie 51przynale no do klas 46puste 55samodzielny selektor uniwersalny 210samozamykaj ce 55sekcyjne 75

struktura 76zasi g nag oacutewkoacutew i stopek 76

selektory relacyjne 212sk adnia 54sk adniki 44sprawdzanie pisowni i gramatyki 51stosowanie 45styl tekstu 47tekstowe elementy semantyczne 83we wcze niejszych wersjach HTML-a 45wewn trzwierszowe okre lenie styloacutew dla

jednego wyst pienia 47wskazywanie 224

przy u yciu atrybutoacutew 217wykorzystanie niezgodnie z przeznaczeniem 52zagnie d anie 55 56zamykanie 54ze znacznika ltheadgt 62zmodyfikowane tekstowe semantyczne

elementy 86zwi zane z warstw prezentacji 88

emulator 38 403Android Debug Monitor 34Androida 38Androida 422 dzia aj cy w systemie OS X 33Firefox OS Simulator 39Opera Mobile Emulator 39prowadzenie testoacutew 38urz dze mobilnych 379Windows Phone Emulator 39WVGA 512 MB 39

Error Console 30etykiety 111Expires 388

FF12 30FALLBACK 168filmy 18 154Firebug 30Firefox 14

zdalne debugowanie 32Firefox OS

emulator 39Simulator 39

Flash 191 293animacje 293Flash Player 111 293

flex 335 337flex-basis 337flexbox 334flex-direction 336

column 338row-reverse 336

flex-flow 336flex-grow 337flex-shrink 337flex-wrap 336for 46 101form 105format-detection 67formaty

AAC 154H264 154 155JPEG 382MPEG4 154PNG8 392SVG 141VP8 154WebM 154wektorowy 142

formaty koloroacutewcmyk() 236 240hsl() 236 239hsla() 236 239nazwane kolory 235 236 240RGB 236rgb() 235 236rgba() 236RRGGBB 236warto ci szesnastkowe 235 236

formularze 17formularze internetowe 97

adres e-mail 105 116adres URL 105 117autouzupe nianie 106bie ca warto 135blok do wprowadzania tekstu 138dane poufne 106dost pne listy warto ci 132elementy zwi zane z dat i godzin 123 125generator par kluczy 137komunikaty o b dach 127kontrolki

automatycznie aktywowane 107etykiety 139grupowanie 138liczba opcji i znakoacutew 105


Skorowidz 423

nieedytowalne 104opcje 133styl 131

liczby 119menu z opcjami do wyboru 138nowe elementy 132paleta wyboru koloroacutew 122pliki 112pola

ltinputgt 108daty 125do wprowadzania danych 108godziny 125ukryte 114wyboru 109wymagane 99wyszukiwania 122

poprawianie interfejsu u ytkownika 130post p 136powi zanie elementoacutew 105przedzia y 121przyciski 110 111 112 114rysunki 114sprawdzanie poprawno ci 127style elementoacutew 114suwak 101 121tekst zast pczy 101telefon 118wskazoacutewki lub instrukcje dotycz ce

oczekiwanych typoacutew danych 101wy czenie elementu formularza 104wyra enia regularne 102wy wietlanie si y has a 135zakres dozwolonych warto ci 100

danie has a 109forwards 316funkcje

cubic-bezier 297 298ease-in 297 319ease-out 297 319matrix() 309perspective() 311repeating-linear-gradient 278rotate() 306rotate3d() 311rotateX() 306rotateY() 307scale() 305scale3d() 310scaleX() 305scaleY() 306scaleZ() 311skew() 307

skewX() 307skewY() 308transformacji troacutejwymiarowych 309translate() 304translate3d() 310translateX() 305translateY() 305translateZ() 310z rodziny step 299

Ggenerowanie tre ci 219 230

content 230tworzenie motywoacutew 230wykorzystanie 231wy wietlanie p ywaj cych elementoacutew stron 230wzbogacanie odno nikoacutew 219 231

geolokalizacja 18 183accuracy 185altitude 185altitudeAccuracy 185geotagowanie 183heading 185latitude 185longitude 185speed 185watchCurrentPosition() 184

gesty 369przewodnik po gestach dotykowych 371

getLocation() 186g sto pikseli 341Ghostlab 35 36g oacutewna tre strony 82g oacutewny element HTML 57GPDL 249gradienty 264

kolory 269ko owe 264 265 398narz dzia do tworzenia 281okre lanie 264przezroczysto 271 273przyciskoacutew 273stretch 333szeroko 279t a 275tworzone za pomoc pikseli 278wielokrotne wykorzystanie 273wydajno 398z paskami 277

gradienty liniowe 264315deg 268k t cie ki 265k ty 266


424 Skorowidz

gradienty liniowekierunek zmiany koloru 266powtarzanie 278punkt pocz tkowy 265sk adnia 265 268cie ka gradientu 267 272

w iPhonie 271grady 248grafika

format JPEG 382kompresja 389nag oacutewka 340obramowania 328obs uga 153optymalizowanie 396pierwszego planu

dynamicznie dopasowana 144zapisywanie rysunku 390

przetwarzana z akceleracj sprz tow 385rysowanie 148rysunki w formacie SVG 152SVG do czanie do dokumentoacutew 143udost pnianie 340uniemo liwienie zaznaczenia 230wydajno w przegl darkach 153zapisywana wewn trzwierszowo 389

grafika t a 91 144formaty danych 330kolor t a 271niepowtarzana 275powtarzana 278przypisanie kilku grafik do jednego w z a

modelu DOM 280skalowanie do mniejszego rozmiaru 274cie ka gradientu 268

warto ci bezwzgl dne i wzgl dne 274wielko 274 281zniekszta cenia 274

grupowaniesemantyczne 17tre ci 81

HH264 154 155Handbrake 163height 156 200 255

auto 340Helvetica 19hidden 50 189hover 372href 68 69hreflang 69

fr 217

HSL 235 239jasno 239sk adnia 239warto odcieni 239

HSLA 19 235kana alfa 239

HTML 4 deklaracje DTD 59HTML5 11 17

atrybuty 45globalne z HTML 4 48globalne zwi zane z dost pno ci

i elementami interaktywnymi 50niestandardowe 52

deklaracja DTD 58elementy 44koncentracja na szczegoacute ach 44niedost pne elementy XHTML-a 95niezmodyfikowane elementy 89nowe elementy 75przechodzenie na HTML5 43sk adnia 43 56specyfikacja 44sprawdzanie danych 98stan 165warto ci charakterystyczne dla producentoacutew

urz dze przeno nych 66wymagane komponenty 57zmiany w elementach tekstowych

w poroacutewnaniu z HTML-em 4 88zmodyfikowane elementy i atrybuty 43

HTML5 Canvas 148http-equiv 63 64hue 235

IIcoMoon 390id 45 46 61 212IDE 28identyfikatory 46 205 209identyfikatory URI

danych 343dodawanie w CSS-ie 389

ikonyna stronie g oacutewnej urz dzenia 364serwisoacutew spo eczno ciowych 401z czcionek 345z ta cz c postaci 344

ImageAlpha 392 396ImageOptim 396image-set() 345importScripts() 187indeterminate 109informacje zwrotne 401


Skorowidz 425

initial-scale 65instrukcje

media 201supports 201consolelog() 33margin 0 204padding 0 204removeAttribute() 106setAttribute() 106weinre 35

integracja z tre ciami wy wietlanymi za pomocniezale nych wtyczek 92

integrated development environment 28interfejs API 16 165

animacji 324ARIA 192Battery Status 377dataset 173

niestandardowe atrybuty danych 53Debug API 32dla mobilnych aplikacji sieciowych 377dla pami ci podr cznej i pami ci sesji 165do geolokalizacji 18do obs ugi pami ci 18do wymiany komunikatoacutew mi dzy

dokumentami 191DOM dla mikrodanych 190JavaScript 97mikrodanych 18 190multimedialny 141Network 376nowe standardy 16przygotowania do nauki 25systemu geolokalizacji 184validity 129

interfejs u ytkownikaaplikacje rozrywkowe 353Metro 41Sencha Touch 379szybko reagowania 401

Internet Explorer 10 14iOS 40

aktywowanie pola tekstowego 107aplikacja dzia aj ca w trybie offline 360autokorekta tekstu 51pasek stanu 361t o aplikacji dla systemu iOS 277url 117

iOS Simulator 38iPhone 15iPhone Bingo 15iPhone SDK 13 15isTouchEnabled 372itemid 53

itemprop 53 188itemref 53 188itemscope 53 188itemtype 53 188iUI 15

JJasmine 42jasno 239JavaScript

animacje 293do czanie d wi koacutew 161kontrolowanie elementoacutew ltaudiogt i ltvideogt

159kreska 262minimalizowanie kodu 389obs uga w przegl darkach 72pobieranie osadzonych skryptoacutew 203przygotowania do nauki 25rezygnacja z platform 393rysowanie 152sprawdzanie

danych 98typu po czenia 342

wspoacutelny plik z kodem 388wydajno 71zu ycie pami ci i energii 383

jawne etykiety 46jednostki miar 244

245ch 245cm 245czas 247 249cz stotliwo 247 249em 245ex 245grady 248in 245k ty 247k ty pe ne 249mm 245pc 245piksele 245pt 245px 245radiany 248rem 245stopnie 247vh 245vmax 245vmin 245vw 245warto ci okre laj ce d ugo 244


426 Skorowidz

jednostki rozdzielczo ci 246dpc 246dpi 246dppx 246

JSON 172 174 175

Kkaskadowo 233k ty 247 248kierunek tekstu 48

zmiana kierunku wybranego fragmentu 86kind 158Kindle Fire 42klasy

active 221

clearfix 230current 323enlargen 308flipped 322hover 222matched 322no-js 60

klatka kluczowa 294klawiatura numeryczna wy wietlenie 119klikni cia 368kod

dost pu 36sk adnia XHTML 59testowanie 40w HTML5 56

kodeki wideo 154kodowanie UTF-8 63kolory

activeBorder 241activeCaption 241appWorkspace 241background 241buttonFace 241buttonHighlight 241buttonShadow 241buttonText 241captionText 241grayText 241highlight 241highlightText 241inactiveBorder 241inactiveCaption 241inactiveCaptionText 242infoBackground 242infoText 242match 242menu 242menuText 242

nazwane 240scrollbar 242specyficzne 242t a 271threeDDarkShadow 242threeDFace 242threeDHighlight 242threeDLightShadow 242threeDShadow 242w przegl darkach 241warto ci 235

szesnastkowe 236windowFrame 242windowText 242wyboacuter sk adni 244

kolumny 326dok adna szeroko 328elementy biegn ce przez wszystkie kolumny

328linie 327marginesy 327w dynamicznie dopasowuj cym si uk adzie

328zape nianie w ca o ci 328

kombinatory 210dziecka 213ogoacutelny kombinator brata 214potomka 212przyleg ego brata 214specyficzno 233

komentarze ruby 85nawiasy wokoacute tekstowego komponentu 86

komponenty sieciowe 232kompresowanie plikoacutew binarnych 392kontekst przegl dania 91kontrolki 159

wygl d 163formularza menu 94

kotwiceumieszczenie na stronie 87wewn trzne 46wskazywanie elementoacutew 46

krzywa Beacuteziera 298kszta ty 143

definiowanie wygl du i stylu 150i linie 143ko o 151prostok t 150

Llabel 94 159lang 45 47 60 61language 71


Skorowidz 427

legenda 83dla tre ci nadrz dnego elementu 93

leniwe wczytywanie 400li strong 212light 235linewidth 150list 132listy

polece lub kontrolek 94pseudoklas dla interfejsu u ytkownika 221selektoroacutew typu 207

Load 400localStorage 203loop 156ltr 48

Mmagnetometr 375mailto 87manifest 60margin 263marginesy 258 259

akapitoacutew w kolumnach 327dwoacutech przyleg ych elementoacutew 259szeroko 258wewn trzne 162 258

maskowanie 346max 100maximum-scale 65maxlength 105mechanizmy sprawdzania poprawno ci 104 128media 68 70 87 199

all 199braille 199dopuszczalne warto ci 69embossed 199handheld 199print 69 199projection 199screen 69 199speech 199tty 199tv 199

MediaStream Recording 377menu 94

podr czne pozycja 94metadane

dodawanie 63strony 72

metadata 159metody

addEventListener() 368 384applicationCache 168

applicationCacheupdate() 169beginPath() 151canPlayType() 157clear() 171clearInterval() 187clearTimeout() 187close() 187closePath() 151documentgetItems(itemType) 190executeSQL() 180fill() 150 152fillRect 151fillStyle 151 152GET 109getContext(contextId) 150getCurrentPosition() 184 186getImageData() 151getItem() 171 174 175getUserMedia() 378JSONstringify() 178JSONparse() 175key() 171obs ugi onclick 374obs ugi zdarze 61

ltbodygt 73urz dzenia dotykowe 221

onchange 134onformchange 134onforminput 134onload=rdquowykonajZadanie()rdquo 61openDatabase() 179POST 109postMessage() 186 187preventDefault() 111 371 373 374querySelector() 384querySelectorAll() 384setCustomValidity() 119 130setFocus() 97setInterval() 187setItem() 171 174 175setTimeout() 187stepDown() 120stepUp() 120stopPropagation 374stringify() 174strokeRect() 150terminate() 187transaction() 180updateready 169watchCurrentPosition() 184windowmatchMedia 201

Metro 41miejsce podzia u wiersza 86


428 Skorowidz

mikrodane 18 188 190a mikroformaty 188atrybuty 188interfejs API 190s owniki 188

mikroformaty 188class 188 189hCard 189

MIME textcache-manifest 167min 100minify 389minimum-scale 65mobilne systemy operacyjne 39mobiReady 39model flexbox 334

elastyczny kontener 335elementy z bezwzgl dnie okre lon pozycj 336kolejno wy wietlania elementoacutew 336rozmieszczenie elementoacutew 335 336tworzenie kolumn 335wielko elementoacutew 337w a ciwo ci 335wykrywanie funkcji 339zapytania media 338zmiana uk adu bez modyfikowania kodu

w HTML 335model pude kowy 254

cienie 286komponenty 257marginesy 258 259obramowanie 255 258rozmiar zajmowany przez element 259szeroko 258tre 258w a ciwo ci 254wysoko 258z CCS-a 257

model Shadow DOM 113 130 232Modernizr 60 150Modify Headers 40modu y

specyfikacji CSS3 195zarz dzania dost pno ci 51

MPEG4H264 154multimedia

dost pno dla u ytkownikoacutew z wadamis uchu 158

dynamiczna zmiana 157dynamiczne dopasowywanie wielko ci

obrazu 162d wi ki 160 161etykiety 157filmy 158 162

kontrolowanie wygl du i dzia ania 155napisy 159osadzanie na stronach 154pliki 154

wideo 158cie ki 158 159

udost pnianie plikoacutew 201w uk adzie p ynnym 340wydajno 163zasoby multimedialne 157

multimedialne interfejsy API 141

Nnag oacutewek

Cache-Control 388Client-Hints 346dokumentu 57Expires 388odpowiedzi HTTP 64sekcji 79w uk adzie p ynnym 340zasi g 76

najlepsze praktyki 56name 63naro niki zaokr glone 261narz dzia 352

diagnostyczne na Androida 32do testowania 37

dost pne w internecie 39emulatory 38internetowe 42pracownie z przegl darkami 40symulatory 38telefony 40testy zautomatyzowane 42

do tworzenia gradientoacutew 281npm 35programistyczne 28

debugery stacjonarne 30do debugowania 29edytor tekstu 28przegl darka 28zdalne debugowanie 32

nasycenie 239natywne aplikacje sieciowe 378navigatorconnectionbandwidth 376navigatorconnectionmetered 376navigatorconnectiontype 342 376NETWORK 168New Exciting Web Technologies 16NEWT 16niestandardowe atrybuty danych 45

z przedrostkiem data- 52


Skorowidz 429

node package manager 35no-js 60none 316notacjaWielb dzia 262notacja z podwoacutejnym dwukropkiem 231number 100

Oobiekty

classList 176context 150coords 185documentFragment 387gbdoo 181geolocation 186localStorage 172 203MediaQueryList 201navigator

onLine 165navigatorbattery 377p oacutetna 148sessionStorage 172 174Touch 371TouchEvent 371validity 129window 179

obliczanie uk adu elementoacutew 386obramowanie 255 258

dane reprezentuj ce rysunek 330definiowanie koloroacutew 256dolne dla ostatniej pozycji listy 263grafika 328narz dzia 334podzia 330powtarzanie i skalowanie fragmentoacutew

kraw dzi 332szeroko 255 257 331tworzenie troacutejk toacutew 256ustawianie 329widoczne 256wykraczanie poza obszar elementu 332wysoko 255zapis skroacutecony 255

obs uga p oacutetna 12obszary reaguj ce na dotyk 369odcie 239odno niki 79 86

dodawanie grafiki t a 218obs uga w urz dzeniach przeno nych 87obs ugiwane w sposoacuteb specjalny 88oznaczenie za pomoc ikon 217podkre lenie 283pseudoklasy 220

selektor atrybutu kodu j zyka 216tekst informuj cy o typie odno nika 217ustalenie typu 219

ogoacutelna tre dokumentu 82ogoacutelny kombinator brata 214okno dialogowe

do zapisywania i kopiowania grafiki 373z operacj kopiowania i definiowania 372

okno robocze 64dostosowywanie stron do ma ych ekranoacutew

367obs uga gestoacutew 369skalowanie 65szeroko 65 69 202w przegl darkach mobilnych 30wspoacute czynnik przybli enia 65wydajno 398wysoko 65 69zapytania media 201

onclick 374onload 97onreset 112onsubmit 111onTouchEnd 373open 92Opera 14Opera Mini 17 41Opera Mini Simulator 39Opera Mobile 17Opera Mobile Emulator 39opoacute nienie 387

animacje 402dwukrotne dotkni cie 402pami 395przy pobieraniu witryn mobilnych 395spritey 389

optymalizowanie grafiki 396korzy ci ze stosowania styloacutew CSS 397minimalizowanie modelu DOM 399okno robocze 398procesor graficzny 398wykorzystanie pami ci 396zarz dzanie pami ci 399

order 336orientation 200overflow 284

Ppfirst-of-type + p 214p gt strong 213p strong 212PageSpeed 396PageSpeed Google 403


430 Skorowidz

pakiet SDK 32dost p do narz dzia ADB 32pobieranie 32symulatory i emulatory 38udost pnienie 15Windows Phone SDK 39

pakowanie plikoacutew 392paleta wyboru koloroacutew 122pami

bez po czenia z sieci 18grafika 396oparta na SQL-u i bazach danych 179urz dze przeno nych 356wydajno 395zarz dzanie 357 395 399zmiany zu ycia 401

pami lokalna 170baza IndexedDB 170baza Web SQL 170metody i w a ciwo ci 171zwi kszanie wydajno ci aplikacji 172

pami podr czna 171 172aktualizowanie 168 169aplikacji 166plik manifestu 167 168

pami sesji 170dane 171metody i w a ciwo ci 171

pasek dolny 363pasek nawigacji 361

deklarowanie pe nych koloroacutew 272gradienty 271kontrolki do zarz dzania zawarto ci widoku

362przezroczysto 273punkt zmiany koloru 272ukrywanie 362user experience 362wielko i kolor 363

pasek stanublack-translucent 361projektowanie aplikacji 360wygl d 66

pattern 102 104title 103wyra enie regularne 102

pauseGame() 175Phantom Limb 372PhantomJS 42PhoneGap 34 378Photoshop HSB 235Pickleview 15 26pierwsze danie 172

piksele 245 341pikselizacja 153ping 87placeholder 101 102 108 109platforma mobilna

ilo pami ci 356jedno okno i jedna aplikacja naraz 358ma y ekran 356minimalna dokumentacja 359mo liwo ci 356rozwa ania zwi zane z projektowaniem 359

playGame() 175pliki

appcache 167 168 169

htaccess 167

mp4 154

ogv 154

webm 154audio 158binarne kompresowanie 392cookie 170 204 394CSS 203do resetowania lub normalizowania styloacutew

CSS 204 276manifestu pami ci podr cznej 167multimedialne 154Normalizecss 204pakowanie 392PNG 346przezroczyste pliki JPEG 346wideo 158ze cie kami 159

p oacutetno 149p ynny uk ad 325

tworzenie 340PNGCrush 392pobieranie niezale nych skryptoacutew 394podpis 83

dla tre ci nadrz dnego elementu 93filmu 158

podziatematyczny na poziomie akapitu 83wiersza 86

Pointer Lock 377pointerenter 221pointerleave 221pojedynczy punkt krytyczny 394pola

do wprowadzania danych 108email 102menu podr czne 138number 100password 102


Skorowidz 431

range 100search 102tekstowe 108telephone 102text 102ukryte 114url 102wyboru 109

po czenie sieciowe 376ponowne wy wietlanie 386porz dek GPDL 249 250position absolute 290poster 156powtarzane gradienty liniowe 279pracownie z przegl darkami 40preload 156preprocesory 203preserveAspectRatio 145procesor graficzny 153 398

odtwarzanie filmoacutew 162profile 60programowe aktywowanie elementoacutew 49projektowanie aplikacji mobilnych 349

aplikacje narz dziowe 354aplikacje zwi kszaj ce produktywno 352dost p do funkcji 355 358 359dynamiczne wczytywanie dodatkowych

elementoacutew 366ekran powitalny 364grupa docelowa 350ilo pami ci 356interfejs u ytkownika 359jedno okno i jedna aplikacja naraz 358kwestie projektowe 351ma y ekran 356menu rozwijane 366minimalizowanie ilo ci danych

wprowadzanych z klawiatury 365minimalna dokumentacja 359mo liwo ci platformy mobilnej 356ograniczenia aplikacji 397poruszanie si po aplikacji 359powa ne aplikacje rozrywkowe 354prostota 355przed rozpocz ciem pracy 350przyciski funkcyjne 358regu a 80 ndash 20 355rozrywka 353rozwa ania 359rysunek startowy 363standardy 351strony preferencji 352testowanie 358

typy aplikacji 352ukrywanie tre ci 366user experience 366wezwanie do dzia ania 351wyboacuter stylu 351wyboacuter typu 355zabawne aplikacje rozrywkowe 354zwi z o 365

projekty dynamicznie dostosowywane dowielko ci okna 19

protoko yHTTPS 109SSL 109

przechwytywaniedotkni cia 373zdarze 374 402

przegl darkiarkusze klienta 204badanie i debugowanie kodu roacuted owego 29brakuj ce znaczniki dokumentu HTML5 58dost pne 14jako narz dzia programistyczne 28 29mobilne 350

przeci ganie 51sieciowe interfejsy API 141

na potrzeby testoacutew 29narz dzia dla programistoacutew 30obs uguj ce nowe standardy sieciowe 14pobieranie dodatkowych elementoacutew z

serwera 72roacute ne wersje na poszczegoacutelnych

urz dzeniach 25stacjonarne 32 35starsze wersje 14strony HTML i style CSS 21ujednolicanie pracy 204urz dze przeno nych 13w telefonach komoacuterkowych 20warto ci koloroacutew 241wspoacute czesne 16wy wietlanie danych styloacutew 69z wy czon obs ug JavaScriptu 72zewn trzne arkusze styloacutew referencje 203zgodne z HTML5 18

przej cia 294all 301czas 298dla grafiki t a 297dla transformacji 309dotycz ce wi cej ni jednego ustawienia 301hover 294opoacute nienia 299roacute ne 301


432 Skorowidz

przej ciatempo 298transition 294transition-delay 294 299transition-duration 294 298transition-property 294 295transition-timing-function 294 298w a ciwo ci 295wydajno 323

przekazywanie komunikatoacutew pomi dzydokumentami 190

przewijanie 375niesko czone 399usprawnienie 384

przewodnik po gestach dotykowych 371przezroczysto 273

dodawanie w formacie RGBA 238przybli anie 402przyciski

atrakcyjne 281Enter 122Go 122gradient 273 275grafika obramowania 328informacyjne 355o natywnym wygl dzie z iPhonea 262opcji 110podwoacutejny cie 288polecenia 94resetowania 112search_cancel_button 122standardowe 362troacutejwymiarowy wygl d 282tworzenie 282Wstecz 362wysy ania 111z systemu iOS 275

przytaczanie tytu oacutew 89pseudoelementy 229

after 230before 230first-letter 229first-line 229selection 230-webkit-validation-bubble 130-webkit-validation-bubble-arrow 130-webkit-validation-bubble-arrow-clipper 130-webkit-validation-bubble-message 131notacja z podwoacutejnym dwukropkiem 231

pseudoklasy 219after 346before 346active 220 221checked 110 220 221default 223

disabled 105 221empty 223enabled 221first-child 223first-of-type 223 226focus 220 221hover 220 221 294indeterminate 221in-range 223invalid 100 104 116 223lang(L) 227 228last-child 223last-of-type 223 226 263link 220 221not(s) 108 227 228

specyficzno 229 233nth-child 223 225nth-last-child(n) 223nth-last-of-type(n) 223nth-of-type(n) 223 225only-child 223only-of-type 223optional 223out-of-range 223placeholder-shown 102read-only 223read-writerequired 100 223root 223target 227valid 104 223visited 220 221dla interfejsu u ytkownika 220 222dla odno nikoacutew 220dla operacji u ytkownikoacutew 220inne 227j zyka 228negacji 228nth 224 225okre laj ce stan 222strukturalne 223zwi zane z interakcj z u ytkownikami 220

punktygraniczne 325na cal 341

punkty zmiany koloru 269 272szeroko gradientu 279twarde 270 281

background-size 275grafika t a 277

tworzeniepaska nawigacji 272paskoacutew 277


Skorowidz 433

Rradiany 248ramki iFrame 190range 100readonly 104 105regu y 196

keyframes 317supports 339viewport 36880 ndash 20 355kaskadowo 233specyficzno 233

rel 68 69 198alternate 70apple-touch-icon 70apple-touch-startup-image 70contents 70copyright 70glossary 70help 70icon 70index 70next 70prev 70stylesheet 70 198warto ci i ich definicje 70

requestAnimationFrame 153required 99responsive web design 19 381Retina 341Retina Display 341reversed 83rgb() 235 236

sk adnia 237RGBA 19 235 238

cienie elementoacutew 239dodawanie przezroczysto ci 238kana alfa 238

Roboto 19role 51 52

navigation 79WAI-ARIA 45

rozdzielczo 341rysunkoacutew 341wysoka 276

rozwi zania hybrydowe 378rtl 48RWD 19rysunek startowy 363

SSafari 14 30

ukrywanie paska nawigacji 362wykrywanie numeroacutew telefonoacutew 88wyroacute nianie elementoacutew 84

Safari 40 12Safari WebKit 13samochoacuted klauna 145samozamykaj cy uko nik 55 56sandbox 91Sass 205saturation 235scoped 70ScreenQueries 31SDK 15seamless 91sekcje 78

nag oacutewek 79ogoacutelna 77spis tre ci 79

selektory 197elementoacutew 207 211id 46klas 208 211model Shadow DOM 232ogoacutelne 210oparte na identyfikatorach 205typoacutew 207 211uniwersalne 210

selektory atrybutoacutew 215kodu j zyka 216nazwy atrybutoacutew 218

selektory CSS 206 408copyright 209pcopyright 209podstawowe 207specyficzno 209 409

selektory CSS3 19 210 405myParent a 212a[hreflang|=fr] 216div gt p 213E[atr$=war] 217E[atr=war] 217E[atr^=war] 217li strong 212nazwa elementu 211pfirst-of-type + p 214p gt strong 213p strong 212proste 228


434 Skorowidz

selektory CSS3regu y oparte na kolejno ci kodu 212specyficzno 233stosowanie 211

selektory CSS4 410selektory identyfikatoroacutew 209 211

stosowanie 212selektory relacyjne 212

definicje i przyk ady 215kombinator dziecka 213kombinator potomka 212kombinator przyleg ego brata 214ogoacutelny kombinator brata 214

selektory strukturalne 224dolne obramowanie 226

semantyczne nazwy sekcji 76Sencha Touch 379Senchaio 396Senchaio Src 393SETTINGS 168Shadow DOM

pseudoelementy 130style elementoacutew 232

shadowBlur 150shadowColor 150 151shadowOffsetX 150shadowOffsetY 150shortcut 68sieci CDN 191 389sieciowe w tki robocze 18 72 186

onmessage 187silniki

Blink 29WebKit 20 32

single point of failure 394SinonJS 42sizes 69skalowalna grafika wektorowa 141skroacutecone deklaracje w a ciwo ci i warto ci 249skrypty osadzanie 394slider-horizontal 115s owa kluczowe

important 206all 295 301allow-forms 91allow-pointer-lock 91allow-popups 91allow-same-origin 91allow-scripts 91allow-top-navigation 91color-stop 272currentColor 240dla strony 63

ease 298ease-in 298ease-in-out 299ease-out 299ellipsis 285even 224fill 330from 317inset 286linear 298odd 224off 106on 106rgb 237cie ki gradientu 267

to 266 267transparent 238 240

sms 87specyficzno 233 405

regu y 233selektory CSS 409style wewn trzwierszowe 233w kontek cie kaskadowego dodawania

styloacutew 234specyfikacja

Basic UI 285WAI-ARIA 51

spellcheck 51spinner 100 101SPOF 394sprawdzanie poprawno ci 128

automatyczne 137danych 100elementvaliditycustomError 130elementvaliditypatternMismatch 129elementvalidityrangeOverflow 129elementvalidityrangeUnderflow 129elementvaliditystepMismatch 129elementvaliditytooLong 129elementvaliditytypeMismatch 129elementvalidityvalid 130elementvalidityvalueMissing 129validity 129

sprite 344a identyfikatory URI 390animacje 320u ywany w animacji postaci 345w formacie SVG 146z przyciskami 264z rysunkami 389

SQL 179src 71 92 155 157srcdoc 90


Skorowidz 435

srclang 159stan urz dzenia 376

bateria 377interfejsy API 377po czenie sieciowe 376

standardy aplikacji 351step 101steps() 344stopka 80

zasi g 76stopnie 247storeValues() 174 175stroke 150strony internetowe

dodawanie grafiki z podpisem 82interakcje z zawarto ci strony 94osadzanie plikoacutew d wi kowych i wideo 154zwi kszenie dost pno ci 144

strony preferencji 352 354strony ustawie 352style 45 47 143 197

background 143dla urz dze i przegl darek 200dodawanie

do dokumentu 70do witryny 71

fill 143osadzane 198 203projektowanie aplikacji 351stroke 143tekstu 47wewn trzwierszowe 206

style CSSbloki deklaracji 197najlepsze praktyki 202normalizowanie 204osadzanie w nag oacutewku dokumentu 197przekazywane kaskadowo 208resetowanie 204specyficzne dla sekcji 205specyficzno 233stosowanie identyfikatoroacutew 205udost pnianie 200umieszczanie w zewn trznym arkuszu

styloacutew 197umieszczanie wewn trzwierszowo 197ustawione za pomoc selektora klasy 208u ywanie styloacutew ogoacutelnych 204w wersji produkcyjnej 203

Sublime Text 28subtitles 159suwaki 101 121svg 18 141 152

SVG 141ltobjectgt 145lttitlegt 143alt 145Amaya 146deklaracja DTD 143do czanie grafiki do dokumentoacutew 143dynamicznie dopasowywana grafika

pierwszego planu 144nauka 145pliki 142

w a ciwo ci 145rysowanie 152spritey 143 146style CSS 143

symulator 38iOS Simulator 38Opera Mini Simulator 39prowadzenie testoacutew 38urz dze BlackBerry 39

systemy operacyjneAndroid 41iOS 40mobilne 39Symbian OS 42WebOS 42Windows 41

szybkopobierania i wysy ania danych 387po czenia 342

cie ki gradientu 266 272k t 268

rodowisko IDE 28rodowisko mobilne 349

ograniczenia 350przesy anie du ych zasoboacutew 354udost pnianie funkcji wersji stacjonarnej 355wprowadzanie danych 365wydajno 381

Ttabele naprzemienne kolorowanie wierszy 224tabindex 48 220

kolejno znacznikoacutew w kodzie strony 49tap-highlight-color 230 372target 87techniki

Clown Car 144CORS 191oparte na grafice 261wykrywanie klienta 347


436 Skorowidz

technologia WebGL 148tekst

cienie 283kolumny 326przycinanie 285ustawianie 284wielokropek 285

tekstowe elementy semantyczne 83tel 87telefony 40

Android 41iOS 40Nokia 42

telephone=rdquonordquo 67testy

Chrome 379lokalne 67narz dzia specyficzne dla poszczegoacutelnych

systemoacutew operacyjnych 358przegl darka stacjonarna 379urz dzenia testowe 380w urz dzeniach mobilnych 379zautomatyzowane 42

TextMate 28text-overflow 284 285

ellipsis 285text-shadow 283TheoraOgg 154Tilt 15Timeline 399title 45 46 94Touch 371touch-action 230

none 373touch-callout 230

none 373touchcancel 371touchend 221 371 374

odbiornik dla zdarzenia 402TouchEvent 371TouchList 371touchmove 371touchstart 221 371transform 304

czenie w a ciwo ci 308transformacje 293 302

backface-visibility 312iluzja g bi 311

czeniewielu 308wszystkich elementoacutew 313

modyfikacja uk adu wspoacute rz dnych 304perspective 311przekrzywienie elementu 307przesuwanie elementu 304 310

rotowanie elementu 306 311skalowanie wzgl dem osi 310stosowanie przej 309transform 303 304transform-origin 303 311transform-style 312troacutejwymiarowe 310

funkcje 309w a ciwo ci 311

ustawianie punktu transformacji 303 311widoczno odwroacuteconego elementu 312wy wietlanie w przestrzeni troacutejwymiarowej 312zmiana wygl du elementu 304

transition 294transition-delay 294 299transition-duration w a ciwo ci 298transition-property 294 295 309

background-position 297background-size 297lista w a ciwo ci 295przyk ad w a ciwo ci 297visibility 297

transition-timing-function 294w a ciwo ci 298

translate() 304tre ci 258

dodawanie ogranicze 91generowanie 230

za pomoc styloacutew 219ma ym drukiem 89podsumowanie 93powi zane 79usuni te z dokumentu 88

turns 247twardy koniec wiersza 83Twitter

identyfikatory URI 343type 69 71 83 92 98 99 115 128

button 114checkbox 109color 102 122

pattern 123date 102 123 125

pattern 124datetime 125datetime-local 125email 99 116 129

autocomplete 117autofocus 117disabled 117form 117list 117maxlength 117multiple 116name 117


Skorowidz 437

pattern 117placeholder 117readonly 117required 117size 117

file 112accept 113capture 113multiple 113value 113

hidden 114image 114

alt 114src 114

month 125step 125

number 119 120 129max 119 120min 119 120pattern 120spinner 120step 119 120

password 109radio 110

name 110 111value 110

range 121max 121min 121step 121value 121

reset 112search 122submit 111

disabled 111name 111value 111

tel 115 118pattern 119placeholder 119

text 108textcss 198time 125

max 125min 125step 126

url 117 129pattern 117

value 108accept 113

week 126typy MIME 198tytu dokumentu 57

UUA string 347udost pnianie grafiki 340

background-size 343czcionki z ikonami 345grafika t a dla wy wietlaczy o roacute nej g sto ci

345identyfikatory URI danych 343image-set() 345spritersquoy 344w zale no ci od szybko ci po czenia 342

uk adydostosowuj ce si do wymiaroacutew ekranu 340elastyczny 334flexbox 334p ynne 340wielokolumnowe 327

url() 389urz dzenia przeno ne

Android 41aplikacje w formie pakietoacutew 378automatyczne wykrywanie numeroacutew

telefonu 67BlackBerry 41charakterystyczne zagadnienia 20dost p do sprz tu 375dostosowanie witryny 39dostosowywanie stron do ma ych ekranoacutew 367dotyk 367 368interfejs u ytkownika 21iOS 40Kindle 42natywne aplikacje sieciowe 378Nokia 42obs uga

odno nikoacutew 87samodzielnych plikoacutew svg 142

okno przegl darki 64pami 356pasek stanu 66pliki CSS 203rozwi zania hybrydowe 378ruch i kierunek poruszania telefonu 375stan urz dzenia 376testowanie aplikacji 40 379u ytkownicy 21 350warto ci charakterystyczne dla producentoacutew 66wielozadaniowo 358Windows 41wydajno 381wykrywanie orientacji 202wy wietlacze o wysokiej rozdzielczo ci 341


438 Skorowidz

User Agent switcher 30user experience 183 362 366userid 106user-scalable 65user-scalable=no|yes 65user-select 372

none 230ustawienia 352UTF-8 63u ytkownicy

aplikacji narz dziowych 354aplikacji zwi kszaj cych produktywno 352mobilni 403projektowanie aplikacji mobilnych 350typowi 350urz dze przeno nych 21wci gaj cych aplikacji 353

Vvalid 130validityStateObject 129value 83 108

podawanie instrukcji 108Vibration 377viewbox 145VP8 154 155

WW3C 145W3C mobileOK Checker 39WAI-ARIA 51 193warstwy

okre laj ce dzia anie witryny 196prezentacji 196 368rozdzielanie 198tre ci 196w z y 386

warto ci 197DPI 276koloroacutew w przegl darkach 241skroacutecone deklaracje 249szesnastkowe 236

watchCurrentPosition() 184wci gaj ce aplikacje 353Web Inspector 30 37

Shadow DOM 232web inspector remote 34Web Intents 377Web SQL 179

drop 182insert 181metody 179select 181

Webapp 378

WebGL 148obs uga 153procesor graficzny 153

-webkitmozms-user-select 220-webkit-tap-highlight-color 220-webkit-touch-callout 220-webkit-user-select 372WebM 154WebOS 42WebPageTestorg 391WebStorm 28weinre 34 391

biblioteki 34instalacja 35serwer debugera 35u ywanie debugera 35zak adki 35

wewn trzne kotwice 46w z y

pula w z oacutew wielokrotnego u ytku 399wydajno 399

white-space 285clip 285

width 156 200 255 284 328width=ltliczbagt|device-width 65wid ety

informacyjne 92style 71

wielko ekranu 20ScreenQueries 31

wielko obrazudynamiczne dopasowywanie 162

wieloplatformowy transkoder wideo 163windowmatchMedia 201windownavigatorstandalone 66Windows Phone 41

kafelki 70Windows Phone Emulator 39witryny

dynamicznie dopasowywanych rysunkoacutew 145filmy o zmiennej wielko ci 162mobilne 21poruszanie si po witrynach 48upraszczanie witryn mobilnych 349wygl d i styl 196

w a ciwo ci 197appearance 114color 290content 230customError 130length 171navigatorbatterycharging 377navigatorbatterychargingTime 377navigatorbatterydischargingTime 377onmessage 187


Skorowidz 439

origin 191rangeOverflow 129rangeUnderflow 129skroacutecone deklaracje 249sliderthumb-horizontal 115stepMismatch 129t a 275tooLong 129visibility 319

Worker() 187WP8 154wtyczka ADB 32wyboacuter sk adni do podawania koloroacutew 244wycieki pami ci 357wydajno

animacje 323antywzorce 394czas pracy na baterii 381liczba da 384minimalizowanie modelu DOM 399 401opoacute nienie 387procesor graficzny 398przej cia 323szybko reagowania interfejsu u ytkownika 401w rodowisku mobilnym 381

wykrywaniefunkcji 372klienta 347

wymagane komponenty HTML5 57wyodr bnianie tekstu 88wyra enia

liczbowe 225regularne 102

metaznaki 103wyroacute nik tekstu 84

podkre lenie 89selektor atrybutu kodu j zyka 216stylistyczny 88

wyszukiwarki indeksowanie danych napodstawie j zyka 47

wy wietlacze g sto 341wzbogacenie user experience 183wzorce projektowe 351

XXHTML 43

deklaracje DTD 59komponenty wymagane do poprawno ci

strony 57XSS 190

YYSlow 396YSlow Yahoo 403

Zzagnie d anie elementoacutew 55zaokr glone naro niki 261zapytania

media 19 69 144 200 325supports 201

zarz dzaniepami ci 357 395 399zu yciem energii 382

zasi g nag oacutewkoacutew i stopek 76zasoby tekstowe 392zdalne debugowanie 32zdarzenia

czas wczytywania 401przechwytywanie 374zmiany ustawie klienta 202zwi zane z dotykiem 369 370 401zwi zane z klikni ciami 369 402zwi zane z mysz 369zwi zane z oknami 375zwi zane z po czeniem 165zwi zane z urz dzeniami wskazuj cymi 370

zewn trzne arkusze styloacutew 197atrybut media 199korzy ci 203przeznaczenie plikoacutew 199u ywanie 198

zmiennegameDuration 177isTouchEnabled 372storageType 181validityStateObject 129

zmniejszanie liczby da HTTP 388CSS3 253pami lokalna 204style CSS 202 397

zmniejszanie wielko ci da 392style CSS 397

znacznikido grupowania semantycznego 17domy lna kolejno 49meta dla aplikacji mobilnych 64opcjonalnych atrybutoacutew 44otwieraj ce 44 54zagnie d anie 56zamykaj ce 44

znaki niealfanumeryczne 218

dania HTTP 202dania sieciowe

analizowanie 391szczegoacute y 392

yroskop 376


O autorzeEstelle Weyl jest in ynierem frontonoacutew Od 1999 r tworzy oparte na standardach i dost pnewitryny Prowadzi dwa blogi techniczne ledzone przez miliony czytelnikoacutew Ponadto wy-g asza prelekcje na temat CSS3 HTML5 JavaScriptu i tworzenia mobilnych aplikacji siecio-wych na konferencjach na ca ym wiecie

KolofonPtak na ok adce ksi ki HTML5 Strony mobilne to drongo rajski (Dicrurus paradiseus) Cechcharakterystyczn tego zamieszkuj cego obszary Azji efektownego ptaka s jego d ugie pioacuteraw ogonie dzi ki czemu to zwierz jest atwe do rozpoznania Drongo rajski jest utalentowa-nym piewakiem Zestaw wydawanych przez niego odg osoacutew jest bogaty drongo potrafi tena ladowa piew innych ptakoacutew

W g sto zalesionych obszarach w ktoacuterych zwykle yj drongo tworz si du e wielogatun-kowe stada ptakoacutew wspoacutelnie poluj cych na owady Uwa a si e zdolno drongo do na la-dowania odg osoacutew innych gatunkoacutew zwi zana jest w a nie ze sposobem erowania Drongouczy si okrzykoacutew ostrzegawczych innych ptakoacutew i powtarza je Przypomina to cz owiekaucz cego si kroacutetkich przydatnych zwrotoacutew i zawo a w roacute nych j zykach Afryka skie pa-pugi szare potrafi u ywa ludzkiego j zyka w odpowiednim kontek cie ale w naturalnymrodowisku nigdy nie przejawiaj takich zachowa Natomiast drongo wykorzystuj swoje

zdolno ci w naturze cz sto na laduj c odg osy drapie nikoacutew aby wywo a panik w grupieeruj cych ptakoacutew Dzi ki temu drongo mo e niepostrze enie wykra po ywienie

Cho drongo bywaj agresywne kiedy broni swojego terytorium prowadz bardzo zabawnei d ugie gody Dwoje potencjalnych partneroacutew piewa dla siebie skacze i okr ca si na ga -ziach upuszcza przedmioty z wysoka a nast pnie nurkuje aby z apa je w locie Po dobra-niu si para buduje ma e gniazdo w kszta cie fili anki w ktoacuterym samica sk ada od trzech doczterech jaj

Obszar wyst powania drongo rajskiego rozci ga si od podhimalajskich lasoacutew przez goacuteryMiszmi (poacute nocno-wschodnie Indie) po Borneo i Jaw Dlatego badacz Edward H Schaferuwa a drongo za pierwowzoacuter wi tych ptakoacutew kalawinka wspominanych w chi skich i ja-po skich tekstach buddyjskich Te nie miertelne stworzenia mia y mie ludzk g ow korpusptaka d ugi rozdwajaj cy si ogon i pi kny g os Nazw bdquokalawinkardquo t umaczono jako bdquowyj t-kowo brzmi cy ptakrdquo lub bdquobosko brzmi cy ptakrdquo co sprawia e podobie stwa mi dzy tymistworzeniami a wokalnie uzdolnionymi drongo staj si jeszcze bardziej uderzaj ce

Rysunek na ok adce skopiowano z tacy nieznanego pochodzenia


asedzielewski
Prostokąt

3

Spis tre ci

Wprowadzenie 11

1 Przygotowania do nauki interfejsoacutew API HTML5 CSS3 i JavaScriptu 25CubeeDoo mdash gra na urz dzenia przeno ne napisana w HTML5 26Narz dzia programistyczne 28

Edytor tekstu 28Przegl darka 28Narz dzia do debugowania 29Debugery stacjonarne 30Zdalne debugowanie 32

Narz dzia do testowania 37Emulatory i symulatory 38Narz dzia dost pne w internecie 39Telefony 40Testy zautomatyzowane 42

2 Przechodzenie na HTML5 43Sk adnia j zyka HTML5 43

Elementy 44Atrybuty 45Atrybuty globalne i atrybuty internacjonalizacji 45Atrybuty z HTML-a 4 ktoacutere sta y si globalne w HTML5 48Nowo w HTML5 mdash globalne atrybuty zwi zane z dost pno ci

i elementami interaktywnymi 50Sk adnia elementoacutew i atrybutoacutew w HTML-u 54

Elementy samozamykaj ce 55Najlepsze praktyki 56Wymagane komponenty 57Elementy ze znacznika ltheadgt 62


4 Spis tre ci








Wnioski 96


Spis tre ci 5







6 Spis tre ci





Wnioski 139








Spis tre ci 7



Wnioski 194






Wnioski 234




8 Spis tre ci













Spis tre ci 9













10 Spis tre ci













Wnioski 403


Skorowidz 413


141

ROZDZIA 5




















































































































































MobileOperaMini


Chromew Androidzie

Firefoxw Androidzie


Ogg 2 11 (9) Tak




























Komponent Opis

























































































413

Skorowidz





















414 Skorowidz


















all 198rel 69 364


src 198type 198







Skorowidz 415




reversed 83type 83




max 136value 136






media 70scoped 70

ltsubgt 89












ltwbrgt 55 86



416 Skorowidz






















Skorowidz 417









418 Skorowidz














debuger 37WebGL 153













Skorowidz 419

























420 Skorowidz



CSS4selektory 410




czas 247 249











Skorowidz 421





















422 Skorowidz






















Skorowidz 423

















424 Skorowidz












fr 217















Skorowidz 425





















426 Skorowidz


JSON 172 174 175



active 221




















Skorowidz 427












metadata 159metody







428 Skorowidz

















Nnag oacutewek










Skorowidz 429


Oobiekty



















430 Skorowidz















playGame() 175pliki


htaccess 167

mp4 154

ogv 154










Skorowidz 431


















432 Skorowidz

















Skorowidz 433







Roboto 19role 51 52




SSafari 14 30









434 Skorowidz






















SQL 179src 71 92 155 157srcdoc 90


Skorowidz 435


























436 Skorowidz

































Skorowidz 437



hidden 114image 114

alt 114src 114

month 125step 125











value 108accept 113












438 Skorowidz












Webapp 378
















Skorowidz 439











XXHTML 43


strony 57XSS 190



media 19 69 144 200 325supports 201












yroskop 376










asedzielewski
Prostokąt

4 Spis tre ci








Wnioski 96


Spis tre ci 5







6 Spis tre ci





Wnioski 139








Spis tre ci 7



Wnioski 194






Wnioski 234




8 Spis tre ci













Spis tre ci 9













10 Spis tre ci













Wnioski 403


Skorowidz 413


141

ROZDZIA 5




















































































































































MobileOperaMini


Chromew Androidzie

Firefoxw Androidzie


Ogg 2 11 (9) Tak




























Komponent Opis

























































































413

Skorowidz





















414 Skorowidz


















all 198rel 69 364


src 198type 198







Skorowidz 415




reversed 83type 83




max 136value 136






media 70scoped 70

ltsubgt 89












ltwbrgt 55 86



416 Skorowidz






















Skorowidz 417









418 Skorowidz














debuger 37WebGL 153













Skorowidz 419

























420 Skorowidz



CSS4selektory 410




czas 247 249











Skorowidz 421





















422 Skorowidz






















Skorowidz 423

















424 Skorowidz












fr 217















Skorowidz 425





















426 Skorowidz


JSON 172 174 175



active 221




















Skorowidz 427












metadata 159metody







428 Skorowidz

















Nnag oacutewek










Skorowidz 429


Oobiekty



















430 Skorowidz















playGame() 175pliki


htaccess 167

mp4 154

ogv 154










Skorowidz 431


















432 Skorowidz

















Skorowidz 433







Roboto 19role 51 52




SSafari 14 30









434 Skorowidz






















SQL 179src 71 92 155 157srcdoc 90


Skorowidz 435


























436 Skorowidz

































Skorowidz 437



hidden 114image 114

alt 114src 114

month 125step 125











value 108accept 113












438 Skorowidz












Webapp 378
















Skorowidz 439











XXHTML 43


strony 57XSS 190



media 19 69 144 200 325supports 201












yroskop 376










asedzielewski
Prostokąt

Spis tre ci 5







6 Spis tre ci





Wnioski 139








Spis tre ci 7



Wnioski 194






Wnioski 234




8 Spis tre ci













Spis tre ci 9













10 Spis tre ci













Wnioski 403


Skorowidz 413


141

ROZDZIA 5




















































































































































MobileOperaMini


Chromew Androidzie

Firefoxw Androidzie


Ogg 2 11 (9) Tak




























Komponent Opis

























































































413

Skorowidz





















414 Skorowidz


















all 198rel 69 364


src 198type 198







Skorowidz 415




reversed 83type 83




max 136value 136






media 70scoped 70

ltsubgt 89












ltwbrgt 55 86



416 Skorowidz






















Skorowidz 417









418 Skorowidz














debuger 37WebGL 153













Skorowidz 419

























420 Skorowidz



CSS4selektory 410




czas 247 249











Skorowidz 421





















422 Skorowidz






















Skorowidz 423

















424 Skorowidz












fr 217















Skorowidz 425





















426 Skorowidz


JSON 172 174 175



active 221




















Skorowidz 427












metadata 159metody







428 Skorowidz

















Nnag oacutewek










Skorowidz 429


Oobiekty



















430 Skorowidz















playGame() 175pliki


htaccess 167

mp4 154

ogv 154










Skorowidz 431


















432 Skorowidz

















Skorowidz 433







Roboto 19role 51 52




SSafari 14 30









434 Skorowidz






















SQL 179src 71 92 155 157srcdoc 90


Skorowidz 435


























436 Skorowidz

































Skorowidz 437



hidden 114image 114

alt 114src 114

month 125step 125











value 108accept 113












438 Skorowidz












Webapp 378
















Skorowidz 439











XXHTML 43


strony 57XSS 190



media 19 69 144 200 325supports 201












yroskop 376










asedzielewski
Prostokąt

6 Spis tre ci





Wnioski 139








Spis tre ci 7



Wnioski 194






Wnioski 234




8 Spis tre ci













Spis tre ci 9













10 Spis tre ci













Wnioski 403


Skorowidz 413


141

ROZDZIA 5




















































































































































MobileOperaMini


Chromew Androidzie

Firefoxw Androidzie


Ogg 2 11 (9) Tak




























Komponent Opis

























































































413

Skorowidz





















414 Skorowidz


















all 198rel 69 364


src 198type 198







Skorowidz 415




reversed 83type 83




max 136value 136






media 70scoped 70

ltsubgt 89












ltwbrgt 55 86



416 Skorowidz






















Skorowidz 417









418 Skorowidz














debuger 37WebGL 153













Skorowidz 419

























420 Skorowidz



CSS4selektory 410




czas 247 249











Skorowidz 421





















422 Skorowidz






















Skorowidz 423

















424 Skorowidz












fr 217















Skorowidz 425





















426 Skorowidz


JSON 172 174 175



active 221




















Skorowidz 427












metadata 159metody







428 Skorowidz

















Nnag oacutewek










Skorowidz 429


Oobiekty



















430 Skorowidz















playGame() 175pliki


htaccess 167

mp4 154

ogv 154










Skorowidz 431


















432 Skorowidz

















Skorowidz 433







Roboto 19role 51 52




SSafari 14 30









434 Skorowidz






















SQL 179src 71 92 155 157srcdoc 90


Skorowidz 435


























436 Skorowidz

































Skorowidz 437



hidden 114image 114

alt 114src 114

month 125step 125











value 108accept 113












438 Skorowidz












Webapp 378
















Skorowidz 439











XXHTML 43


strony 57XSS 190



media 19 69 144 200 325supports 201












yroskop 376










asedzielewski
Prostokąt

Spis tre ci 7



Wnioski 194






Wnioski 234




8 Spis tre ci













Spis tre ci 9













10 Spis tre ci













Wnioski 403


Skorowidz 413


141

ROZDZIA 5




















































































































































MobileOperaMini


Chromew Androidzie

Firefoxw Androidzie


Ogg 2 11 (9) Tak




























Komponent Opis

























































































413

Skorowidz





















414 Skorowidz


















all 198rel 69 364


src 198type 198







Skorowidz 415




reversed 83type 83




max 136value 136






media 70scoped 70

ltsubgt 89












ltwbrgt 55 86



416 Skorowidz






















Skorowidz 417









418 Skorowidz














debuger 37WebGL 153













Skorowidz 419

























420 Skorowidz



CSS4selektory 410




czas 247 249











Skorowidz 421





















422 Skorowidz






















Skorowidz 423

















424 Skorowidz












fr 217















Skorowidz 425





















426 Skorowidz


JSON 172 174 175



active 221




















Skorowidz 427












metadata 159metody







428 Skorowidz

















Nnag oacutewek










Skorowidz 429


Oobiekty



















430 Skorowidz















playGame() 175pliki


htaccess 167

mp4 154

ogv 154










Skorowidz 431


















432 Skorowidz

















Skorowidz 433







Roboto 19role 51 52




SSafari 14 30









434 Skorowidz






















SQL 179src 71 92 155 157srcdoc 90


Skorowidz 435


























436 Skorowidz

































Skorowidz 437



hidden 114image 114

alt 114src 114

month 125step 125











value 108accept 113












438 Skorowidz












Webapp 378
















Skorowidz 439











XXHTML 43


strony 57XSS 190



media 19 69 144 200 325supports 201












yroskop 376










asedzielewski
Prostokąt

8 Spis tre ci













Spis tre ci 9













10 Spis tre ci













Wnioski 403


Skorowidz 413


141

ROZDZIA 5




















































































































































MobileOperaMini


Chromew Androidzie

Firefoxw Androidzie


Ogg 2 11 (9) Tak




























Komponent Opis

























































































413

Skorowidz





















414 Skorowidz


















all 198rel 69 364


src 198type 198







Skorowidz 415




reversed 83type 83




max 136value 136






media 70scoped 70

ltsubgt 89












ltwbrgt 55 86



416 Skorowidz






















Skorowidz 417









418 Skorowidz














debuger 37WebGL 153













Skorowidz 419

























420 Skorowidz



CSS4selektory 410




czas 247 249











Skorowidz 421





















422 Skorowidz






















Skorowidz 423

















424 Skorowidz












fr 217















Skorowidz 425





















426 Skorowidz


JSON 172 174 175



active 221




















Skorowidz 427












metadata 159metody







428 Skorowidz

















Nnag oacutewek










Skorowidz 429


Oobiekty



















430 Skorowidz















playGame() 175pliki


htaccess 167

mp4 154

ogv 154










Skorowidz 431


















432 Skorowidz

















Skorowidz 433







Roboto 19role 51 52




SSafari 14 30









434 Skorowidz






















SQL 179src 71 92 155 157srcdoc 90


Skorowidz 435


























436 Skorowidz

































Skorowidz 437



hidden 114image 114

alt 114src 114

month 125step 125











value 108accept 113












438 Skorowidz












Webapp 378
















Skorowidz 439











XXHTML 43


strony 57XSS 190



media 19 69 144 200 325supports 201












yroskop 376










asedzielewski
Prostokąt

Spis tre ci 9













10 Spis tre ci













Wnioski 403


Skorowidz 413


141

ROZDZIA 5




















































































































































MobileOperaMini


Chromew Androidzie

Firefoxw Androidzie


Ogg 2 11 (9) Tak




























Komponent Opis

























































































413

Skorowidz





















414 Skorowidz


















all 198rel 69 364


src 198type 198







Skorowidz 415




reversed 83type 83




max 136value 136






media 70scoped 70

ltsubgt 89












ltwbrgt 55 86



416 Skorowidz






















Skorowidz 417









418 Skorowidz














debuger 37WebGL 153













Skorowidz 419

























420 Skorowidz



CSS4selektory 410




czas 247 249











Skorowidz 421





















422 Skorowidz






















Skorowidz 423

















424 Skorowidz












fr 217















Skorowidz 425





















426 Skorowidz


JSON 172 174 175



active 221




















Skorowidz 427












metadata 159metody







428 Skorowidz

















Nnag oacutewek










Skorowidz 429


Oobiekty



















430 Skorowidz















playGame() 175pliki


htaccess 167

mp4 154

ogv 154










Skorowidz 431


















432 Skorowidz

















Skorowidz 433







Roboto 19role 51 52




SSafari 14 30









434 Skorowidz






















SQL 179src 71 92 155 157srcdoc 90


Skorowidz 435


























436 Skorowidz

































Skorowidz 437



hidden 114image 114

alt 114src 114

month 125step 125











value 108accept 113












438 Skorowidz












Webapp 378
















Skorowidz 439











XXHTML 43


strony 57XSS 190



media 19 69 144 200 325supports 201












yroskop 376










asedzielewski
Prostokąt

10 Spis tre ci













Wnioski 403


Skorowidz 413


141

ROZDZIA 5




















































































































































MobileOperaMini


Chromew Androidzie

Firefoxw Androidzie


Ogg 2 11 (9) Tak




























Komponent Opis

























































































413

Skorowidz





















414 Skorowidz


















all 198rel 69 364


src 198type 198







Skorowidz 415




reversed 83type 83




max 136value 136






media 70scoped 70

ltsubgt 89












ltwbrgt 55 86



416 Skorowidz






















Skorowidz 417









418 Skorowidz














debuger 37WebGL 153













Skorowidz 419

























420 Skorowidz



CSS4selektory 410




czas 247 249











Skorowidz 421





















422 Skorowidz






















Skorowidz 423

















424 Skorowidz












fr 217















Skorowidz 425





















426 Skorowidz


JSON 172 174 175



active 221




















Skorowidz 427












metadata 159metody







428 Skorowidz

















Nnag oacutewek










Skorowidz 429


Oobiekty



















430 Skorowidz















playGame() 175pliki


htaccess 167

mp4 154

ogv 154










Skorowidz 431


















432 Skorowidz

















Skorowidz 433







Roboto 19role 51 52




SSafari 14 30









434 Skorowidz






















SQL 179src 71 92 155 157srcdoc 90


Skorowidz 435


























436 Skorowidz

































Skorowidz 437



hidden 114image 114

alt 114src 114

month 125step 125











value 108accept 113












438 Skorowidz












Webapp 378
















Skorowidz 439











XXHTML 43


strony 57XSS 190



media 19 69 144 200 325supports 201












yroskop 376










asedzielewski
Prostokąt

141

ROZDZIA 5




















































































































































MobileOperaMini


Chromew Androidzie

Firefoxw Androidzie


Ogg 2 11 (9) Tak




























Komponent Opis

























































































413

Skorowidz





















414 Skorowidz


















all 198rel 69 364


src 198type 198







Skorowidz 415




reversed 83type 83




max 136value 136






media 70scoped 70

ltsubgt 89












ltwbrgt 55 86



416 Skorowidz






















Skorowidz 417









418 Skorowidz














debuger 37WebGL 153













Skorowidz 419

























420 Skorowidz



CSS4selektory 410




czas 247 249











Skorowidz 421





















422 Skorowidz






















Skorowidz 423

















424 Skorowidz












fr 217















Skorowidz 425





















426 Skorowidz


JSON 172 174 175



active 221




















Skorowidz 427












metadata 159metody







428 Skorowidz

















Nnag oacutewek










Skorowidz 429


Oobiekty



















430 Skorowidz















playGame() 175pliki


htaccess 167

mp4 154

ogv 154










Skorowidz 431


















432 Skorowidz

















Skorowidz 433







Roboto 19role 51 52




SSafari 14 30









434 Skorowidz






















SQL 179src 71 92 155 157srcdoc 90


Skorowidz 435


























436 Skorowidz

































Skorowidz 437



hidden 114image 114

alt 114src 114

month 125step 125











value 108accept 113












438 Skorowidz












Webapp 378
















Skorowidz 439











XXHTML 43


strony 57XSS 190



media 19 69 144 200 325supports 201












yroskop 376










asedzielewski
Prostokąt













































































































































MobileOperaMini


Chromew Androidzie

Firefoxw Androidzie


Ogg 2 11 (9) Tak




























Komponent Opis

























































































413

Skorowidz





















414 Skorowidz


















all 198rel 69 364


src 198type 198







Skorowidz 415




reversed 83type 83




max 136value 136






media 70scoped 70

ltsubgt 89












ltwbrgt 55 86



416 Skorowidz






















Skorowidz 417









418 Skorowidz














debuger 37WebGL 153













Skorowidz 419

























420 Skorowidz



CSS4selektory 410




czas 247 249











Skorowidz 421





















422 Skorowidz






















Skorowidz 423

















424 Skorowidz












fr 217















Skorowidz 425





















426 Skorowidz


JSON 172 174 175



active 221




















Skorowidz 427












metadata 159metody







428 Skorowidz

















Nnag oacutewek










Skorowidz 429


Oobiekty



















430 Skorowidz















playGame() 175pliki


htaccess 167

mp4 154

ogv 154










Skorowidz 431


















432 Skorowidz

















Skorowidz 433







Roboto 19role 51 52




SSafari 14 30









434 Skorowidz






















SQL 179src 71 92 155 157srcdoc 90


Skorowidz 435


























436 Skorowidz

































Skorowidz 437



hidden 114image 114

alt 114src 114

month 125step 125











value 108accept 113












438 Skorowidz












Webapp 378
















Skorowidz 439











XXHTML 43


strony 57XSS 190



media 19 69 144 200 325supports 201












yroskop 376










asedzielewski
Prostokąt

Tytuł oryginału: Mobile HTML5

Documents

Transcript of Tytuł oryginału: Mobile HTML5