Id do

Spis treci
Przykadowy rozdzia
Skorowidz
Katalog ksiek
Katalog online
Zamw drukowany
katalog
Twj koszyk
Dodaj do koszyka
Cennik i informacje
Zamw informacje
o nowociach
Zamw cennik
Czytelnia
Fragmenty ksiek
online

Kontakt
Helion SA
ul. Kociuszki 1c
44-100 Gliwice
tel. 32 230 98 63
e-mail: helion@helion.pl
Helion 19912011

HTML5 i CSS3.
Standardy przyszoci
Autor: Brian P. Hogan
Tumaczenie: Daniel Kaczmarek
ISBN: 978-83-246-3028-8
Tytu oryginau: HTML5 and CSS3: Develop
with Tomorrow's Standards Today
Format: 158235, stron: 304
Kompletny przewodnik po nowej, rewolucyjnej specyfikacji
najsynniejszej technologii internetowej!
Opanuj nowe atrybuty, selektory, funkcje formularzy i znaczniki strukturalne
Zobacz, jak osadza grafik, pliki audio i wideo bez uycia Flasha
Poznaj niezbdne mechanizmy HTML5 i twrz przyjazne aplikacje, dziaajce po stronie klienta
Stao si! Cho jeszcze niedawno HTML5 i CSS3 wydaway si technologiami wci odlegej
przyszoci, ich specyfikacje ju zostay zaimplementowane w takich przegldarkach, jak Google
Chrome, Safari, Firefox czy Opera. Standardy HTML5 i CSS3, mimo e jeszcze w stadium rozwoju,
nie przestaj wzbudza zachwytu administratorw sieci i twrcw stron WWW, a ich opublikowanie
hucznie zapowiedziao now generacj aplikacji internetowych. Teraz mona je atwiej wdraa
i utrzymywa, a take wyj naprzeciw potrzebom uytkownikw. Mao? Jzyk HTML5 wprowadza
take nowe elementy suce do definiowania struktury witryny oraz osadzania w niej treci,
a CSS3 udostpnia zaawansowane selektory, rozszerzenia graficzne oraz zapewnia lepsz obsug
czcionek. W wiecie internetu, gdzie pod wzgldem rozprzestrzeniania si nowoci trzy miesice
to caa epoka, ju jutro ta technologia bdzie obecna wszdzie. Nie trzeba wic nikogo
przekonywa, e aby ten postp bez zadyszki dogoni, trzeba ju dzi wzi si za lektur!
Przed Tob doskonay podrcznik, w ktrym przedstawione zostay wszystkie dostpne sposoby
korzystania z nowych moliwoci standardw HTML5 i CSS3, take tych, ktre nie s jeszcze
obsugiwane przez cz przegldarek. Kady rozdzia skupia si na okrelonej grupie problemw
i zawiera list niezbdnych znacznikw, funkcji lub mechanizmw. Na pocztek dokadnie poznasz
standardy HTML5 i CSS3, nowe atrybuty i znaczniki strukturalne. Przeczytasz co nieco na temat
formularzy i odkryjesz, jak wykorzysta niektre nowe pola i funkcje. Poznasz rewolucje
wprowadzone w CSS3 nowe selektory, cienie, gradienty, transformacje i sposoby korzystania
z czcionek. Dowiesz si, jak HTML5 obsuguje dane audio i wideo oraz nauczysz si uywa kanw
do rysowania rozmaitych ksztatw. A potem stworzysz przykadowe aplikacje dziaajce po
stronie klienta, a take zobaczysz, jak HTML5 umoliwia przesyanie komunikatw i danych
midzy domenami.
Wprowadzenie do HTML5 i CSS3
Nowe atrybuty i znaczniki strukturalne
Tworzenie przyjaznych formularzy internetowych
Tworzenie lepszych interfejsw uytkownika z uyciem CSS3
Zwikszanie dostpnoci witryn internetowych
Rysowanie na kanwach
Osadzanie danych audio, wideo oraz grafiki wektorowej
Wykorzystanie cieni, gradientw, transformacji i czcionek
Przetwarzanie danych po stronie klienta
Korzystanie z interfejsw API
Jeste gotowy? Doskonale! Zacznij ju dzi poznawa standardy przyszoci!

Spis treci

Przedmowa .......................................................................................... 11
Rozdzia 1. Oglne informacje na temat HTML5 i CSS3 ................. 17
1.1. Platforma tworzenia aplikacji internetowych ............................................... 17
1.2. Zgodno wsteczna .................................................................................. 21
1.3. Droga do przyszoci jest wyboista ............................................................. 23

Cz I Ulepszanie interfejsu uytkownika

Rozdzia 2. Nowe atrybuty i znaczniki strukturalne ..................... 31
Porada 1. Zmiana definicji bloga przy uyciu znacznikw semantycznych ........... 34
Porada 2. Tworzenie okien wywoywanych z atrybutami danych uytkownika ..... 47
Rozdzia 3. Tworzenie przyjaznych formularzy internetowych ..... 53
Porada 3. Opisywanie danych za pomoc nowych pl wejciowych ...................... 56
Porada 4. Przechodzenie do pierwszego pola formularza
przy uyciu atrybutu autofocus ........................................................................ 65
Porada 5. Wywietlanie wskazwek w postaci tekstu zastpczego ......................... 67
Porada 6. Edytowanie danych bezporednio na stronie
przy uyciu atrybutu contenteditable ............................................................... 74

HTML5 i CSS3. Standardy przyszoci

Rozdzia 4. Tworzenie lepszych interfejsw uytkownika

z uyciem CSS3 ................................................................ 81
Porada 7. Definiowanie stylu tabeli przy uyciu pseudoklas ............................... 83
Porada 8. Umieszczanie docelowych adresw czy przy uyciu :after ................ 93
Porada 9. Tworzenie stron z wieloma kolumnami tekstu .................................... 97
Porada 10. Tworzenie interfejsw aplikacji na urzdzenia przenone
przy uyciu zapyta o media ................................................................... 103
Rozdzia 5. Zwikszanie dostpnoci ............................................. 107
Porada 11. Definiowanie wskazwek nawigacji za pomoc rl ARIA ................ 109
Porada 12. Tworzenie obszaru o uaktualnianej zawartoci dostpnego
dla programw odczytujcych zawarto ekranu ......................................... 115

Cz II Nowe widoki i dwiki

Rozdzia 6. Rysowanie na kanwach ................................................ 123
Porada 13. Rysowanie logo ............................................................................. 125
Porada 14. Tworzenie wykresw statystyk przy uyciu biblioteki RGraph .......... 132
Rozdzia 7. Osadzanie danych audio i wideo ................................. 141
7.1. Kilka sw o historii .................................................................................. 143
7.2. Kontenery i kodeki ................................................................................... 145
Porada 15. Udostpnianie plikw audio .......................................................... 150
Porada 16. Osadzanie plikw wideo ................................................................ 154
Rozdzia 8. Rado dla oczu ............................................................. 163
Porada 17. Zaokrglanie rogw ...................................................................... 165
Porada 18. Wykorzystanie cieni, gradientw i transformacji ............................... 173
Porada 19. Wykorzystanie wasnych czcionek ................................................... 184

Cz III Wychodzimy poza HTML5

Rozdzia 9. Przetwarzanie danych po stronie klienta ................. 193
Porada 20. Zapisywanie preferencji przy uyciu obiektu localStorage ................ 197
Porada 21. Przechowywanie danych w relacyjnej bazie danych
po stronie klienta ..................................................................................204
Porada 22. Praca w trybie offline ..................................................................... 217

Spis treci

Rozdzia 10. Korzystanie z innych interfejsw API ...................... 221

Porada 23. Utrzymywanie historii ................................................................... 223
Porada 24. Komunikowanie si midzy domenami ........................................... 226
Porada 25. Komunikacja przy uyciu gniazdek internetowych ........................... 233
Porada 26. Sprawdzanie wasnej pozycji. Geolokalizacja .................................. 241
Rozdzia 11. Co bdzie dalej? ........................................................... 247
11.1. Transformacje CSS3 ............................................................................. 249
11.2. Wtki robocze ........................................................................................ 253
11.3. Wbudowana obsuga mechanizmu przecignij i upu ........................... 255
11.4. WebGL ................................................................................................ 262
11.5. Indexed Database API .......................................................................... 263
11.6. Weryfikacja formularza po stronie klienta ................................................. 264
11.7. Caa naprzd! ........................................................................................ 266

Dodatki
Dodatek A Skrcony przegld funkcji ............................................ 269
A.1. Nowe elementy ....................................................................................... 269
A.2. Atrybuty ................................................................................................. 270
A.3. Formularze ............................................................................................. 270
A.4. Atrybuty pl formularzy .......................................................................... 271
A.5. Dostpno ............................................................................................. 272
A.6. Multimedia ............................................................................................. 272
A.7. CSS3 .................................................................................................... 273
A.8. Przechowywanie danych po stronie klienta ................................................ 275
A.9. Dodatkowe API ..................................................................................... 276
Dodatek B Podstawowe informacje na temat biblioteki jQuery .. 277
B.1. adowanie biblioteki jQuery .................................................................... 278
B.2. Podstawy biblioteki jQuery ...................................................................... 278
B.3. Metody, ktre su do zmieniania zawartoci ........................................... 279
B.4. Tworzenie elementw .............................................................................. 282
B.5. Zdarzenia ............................................................................................... 282
B.6. Funkcja document.ready .......................................................................... 283

HTML5 i CSS3. Standardy przyszoci

Dodatek C Kodowanie danych audio i wideo ................................ 285

C.1. Kodowanie danych audio ......................................................................... 285
C.2. Kodowanie danych wideo dla sieci WWW ............................................... 286
Dodatek D Zasoby ............................................................................. 289
D.1. Zasoby dostpne w internecie .................................................................. 289
Dodatek E Bibliografia ..................................................................... 291
Skorowidz .......................................................................................... 293

Rozdzia 3.

Tworzenie
przyjaznych
formularzy
internetowych

eeli kiedykolwiek tworzye skomplikowany interfejs uytkownika, na

pewno wiesz, jak bardzo ograniczone jest dziaanie podstawowych
kontrolek formularzy HTML. Programista jest ograniczony jedynie
do pl tekstowych, menu wyboru, przyciskw opcji, pl wyboru i czasami
korzysta te z jeszcze bardziej prymitywnych list wielokrotnego wyboru,
ktrych sposb wykorzystania trzeba uytkownikom nieustannie tumaczy
(Nacinij klawisz Ctrl i klikaj mysz pozycje, ktre chcesz zaznaczy, a na
komputerze Mac zamiast klawisza Ctrl trzymaj wcinity klawisz Cmd).
W takiej sytuacji robi si to, co robi wszyscy dobrzy programici korzysta si z biblioteki Prototype albo jQuery bd te implementuje si
wasne kontrolki i funkcje przy uyciu HTML, CSS i JavaScript. Jednak
gdy spojrzy si potem na formularz, ktry skada si z suwakw, kontrolek
kalendarza, pokrte, pl uzupenianych automatycznie i wizualnych edytorw, szybko dochodzi si do wniosku, e jego utrzymanie bdzie koszmarem. Trzeba bdzie bowiem zapewni, e kontrolki umieszczane na stronie nie bd popada w konflikt z innymi kontrolkami na niej obecnymi

54

HTML5 i CSS3. Standardy przyszoci

ani z adn bibliotek kodu JavaScript uywan na stronie. Mona spdzi dugie godziny na implementowaniu kontrolki kalendarza, a na koniec dowiedzie si, e w bibliotece Prototype wystpuje teraz problem
wynikajcy z przejcia funkcji $() przez bibliotek jQuery. Pierwszym
pomysem jest wtedy uycie metody noConflict(), lecz od razu okazuje si
z kolei, e kontrolka wyboru koloru przestaa dziaa, poniewa obsugujca
j wtyczka nie zostaa prawidowo zaimplementowana.
Jeli si teraz umiechasz, to znak, e ju przez to przechodzie. Jeli si
wciekasz, przyczyna jest pewnie ta sama. Jest jednak dla nas nadzieja.
W tym rozdziale utworzymy kilka formularzy internetowych, ktre bd
zawiera nowe pola formularzy. Zaimplementujemy take mechanizm
autofokusu i tekst zastpczy. Na koniec natomiast poka, jak uywa si
nowego atrybutu contenteditable, aby za jego pomoc zmieni dowolne
pole HTML w kontrolk na dane wejciowe.
W niniejszym rozdziale opisane zostan nastpujce rozwizania1:
Pole adresu poczty elektronicznej [<input type="email">]
Wywietla pole formularza do wpisywania adresw poczty elektronicznej. [O10.1, IOS]
Pole adresu URL [<input type="url">]
Wywietla pole formularza do wpisywania adresw URL. [O10.1, IOS]
Pole numeru telefonu [<input type="tel">]
Wywietla pole formularza do wpisywania numerw telefonw.
[O10.1, IOS]
Pole wyszukiwania [<input type="search">]
Wywietla pole formularza do wpisywania poszukiwanych sw kluczowych. [C5, S4, O10.1, IOS]
Suwak [<input type="range">]
Wywietla kontrolk suwaka. [C5, S4, O10.1]

W opisach przedstawionych poniej wskazano zakres obsugi poszczeglnych

elementw przy uyciu skrtw umieszczonych w nawiasach kwadratowych.
Poszczeglne skrty oznaczaj: C Google Chrome; F Firefox; IE
Internet Explorer; O Opera; S Safari; IOS urzdzenia iOS z przegldark Mobile Safari; A przegldarka Android.

Rozdzia 3. Tworzenie przyjaznych formularzy internetowych

55

Liczba [<input type="number">]

Wywietla pole formularza przeznaczone do wpisywania liczb, czsto w postaci kontrolki pokrta. [C5, S5, O10.1, IOS]
Pole daty [<input type="date">]
Wywietla pole formularza do wpisywania dat. Obsuguje nastpujce typy: date, month oraz week. [C5, S5, O10.1]
Daty wraz z godzinami
Wywietla pole formularza do wpisywania dat wraz z godzinami.
Obsuguje nastpujce typy: datetime, datetime-local, time. [C5, S5,
O10.1]
Kolor [<input type="color">]
Wywietla pole formularza do wskazywania kolorw. [C5, S5]
(Chrome 5 i Safari 5 rozpoznaj pole color, lecz nie wywietlaj
adnego konkretnego koloru).
Obsuga autofokusu [<input type="text" autofocus>]
Obsuga mechanizmu ustawiania fokusu na konkretnym elemencie
formularza. [C5, S4]
Obsuga tekstw zastpczych [<input type="email" placeholder="ja@przyklad.
com">]
Obsuga mechanizmu wywietlania tekstu zastpczego w polu formularza. [C5, S4, F4]
Obsuga edycji wewntrz strony [<p contenteditable>lorem ipsum</p>]
Obsuga mechanizmu edytowania danych z poziomu przegldarki.
[C4, S3.2, IE6, O10.1]
Najpierw poznamy najbardziej przydatne typy pl formularza.

56

HTML5 i CSS3. Standardy przyszoci

Porada 3. Opisywanie danych

za pomoc nowych pl wejciowych
W HTML5 wprowadzono kilka nowych typw pl wejciowych, za pomoc ktrych mona bardziej precyzyjnie opisa dane wejciowe wpisywane przez uytkownikw. Oprcz standardowych pl tekstowych, przyciskw opcji i pl wyboru mona definiowa nowe elementy, takie jak pola
na adresy poczty elektronicznej, kalendarze, kontrolki wyboru koloru,
pokrta i suwaki. Na podstawie tak zdefiniowanych pl przegldarki mog
udostpnia uytkownikom lepsze kontrolki bez koniecznoci wykonywania kodu jzyka JavaScript. W urzdzeniach przenonych oraz w wirtualnych klawiaturach dla tabletw i ekranw dotykowych na podstawie
typw pl mona wywietla klawiatury w rnych ukadach. Na przykad
przegldarka Mobile Safari obecna w iPhonie odpowiednio dostosowuje
ukad klawiatury, gdy uytkownik wpisuje dane w polach typu URL i email.
W wywietlanym wwczas ukadzie klawiatury atwiej dostpne staj si
klawisze takie jak , , i .
Ulepszenie formularza
na stronie firmy Peen Wypas S.A.
Firma Peen Wypas S.A. opracowuje now aplikacj internetow do zarzdzania projektami. Witryna ma za zadanie uatwi programistom
i menederom monitorowanie postpw prac przy licznych projektach,
ktre s realizowane w firmie. Dla kadego projektu definiuje si nazw,
adres poczty elektronicznej osoby kontaktowej oraz roboczy adres URL
strony, na ktrej mona ledzi postp w rozwoju witryny. Dodatkowo na
stronie znajduj si pola na dat pocztku projektu, jego priorytet i szacowan liczb godzin roboczych, ktre trzeba powici na prace projektowe.
Meneder projektu powinien mie rwnie moliwo przypisywania projektowi okrelonego koloru, ktry pozwoli mu szybko identyfikowa poszczeglne projekty na raportach.
W nastpnym punkcie opracujemy szablon strony do definiowania preferencji uytkownika. Strona bdzie zawiera nowe pola HTML5.
Projekt prostego formularza
Najpierw utworzymy prosty formularz HTML, ktry bdzie przesyany
metod POST. Poniewa pole, w ktrym wpisuje si nazw projektu, nie musi
posiada adnych szczeglnych cech, stworzymy je na podstawie standardowego pola text.

Rozdzia 3. Tworzenie przyjaznych formularzy internetowych

57

html5_formularze/index.html

<form method="post" action="/projects/1">

<fieldset id="personal_information">
<legend>Informacje na temat projektu</legend>
<ol>
<li>
<label for="name">Nazwa</label>
<input type="text" name="name" autofocus id="name">
</li>
<li>
<input type="submit" value="Wylij">
</li>
</ol>
</fieldset>
</form>

Zwrmy uwag, e kontrolki formularza s opisywane przy uyciu etykiet

wchodzcych w skad listy uporzdkowanej. Etykiety maj kluczowe znaczenie, gdy tworzy si przyjazne formularze. Atrybut for etykiety odwouje
si do identyfikatora id powizanego z ni elementu formularza. Dziki
temu rozwizaniu programy odczytujce zawarto ekranu mog zidentyfikowa pola obecne na stronie. Lista uporzdkowana pozwala uoy
pola bez koniecznoci definiowania skomplikowanej tabeli ani struktur div.
Jednoczenie za pomoc listy mona wyznaczy kolejno, w ktrej uytkownicy powinni wypenia kolejne pola formularza.
Tworzenie suwaka dla zakresu wartoci
Suwaki wykorzystuje si po to, by umoliwi uytkownikom zmniejszanie
lub zwikszanie wartoci liczbowej. Za pomoc tej kontrolki umoliwimy
menederom szybkie i proste wizualizowanie i zmienianie priorytetu dla
projektu. Suwak implementuje si z zastosowaniem typu range.
html5_formularze/index.html

<label for="priority">Priorytet</label>
<input type="range" min="0" max="10"
name="priority" value="0" id="priority">

Element suwaka naley doda do formularza wewntrz elementu

samo jak poprzednio zdefiniowane pole nazwy projektu.

li,

tak

Zarwno Chrome, jak i Opera obsuguj kontrolk suwaka, ktra prezentuje si w sposb widoczny na rysunku 3.1.

58

Rysunek 3.1.

HTML5 i CSS3. Standardy przyszoci

Kontrolka suwaka wywietlona w przegldarce Chrome

Jak wida w definicji suwaka, zdefiniowano dla niego rwnie wartoci min
i max reprezentowanego zakresu. W ten sposb ograniczylimy zakres
wartoci, jakie mona wybra przy uyciu kontrolki.
Obsuga liczb za pomoc pola pokrta
W formularzach czsto trzeba podawa liczby. Wprawdzie wpisywanie
liczb nie jest niczym trudnym, jednak czynno t mona jeszcze nieco
uatwi. Pole pokrta to kontrolka z przyciskami strzaek, ktre zwikszaj lub zmniejszaj warto widoczn w polu tekstowym. Pola pokrta
uyjemy do wpisywania szacowanej liczby godzin do przepracowania przy
projekcie. W ten sposb atwo bdzie zmienia liczb godzin.
html5_formularze/index.html

<label for="estimated_hours">Szacowana liczba godzin</label>

<input type="number" name="estimated_hours"
min="0" max="1000"
id="estimated_hours">

Pole pokrta jest obsugiwane przez przegldarki Opera i Chrome. Wygld

pola pokrta w przegldarce Opera przedstawiono na rysunku 3.2.

Rysunek 3.2.

Pole pokrta wywietlone w przegldarce Opera

W polu pokrta domylnie mona take wpisywa liczby z klawiatury.

Ponadto podobnie jak dla suwakw, dla pola pokrta mona definiowa
wartoci minimaln i maksymaln. Jednak warto minimalna i maksymalna nie bdzie brana pod uwag, jeeli warto zostanie wpisana w polu
z klawiatury.
Warto zaznaczy, e za pomoc parametru step mona zdefiniowa postp wartoci w polu warto parametru wskazuje, o ile ma si jednorazowo zmieni warto obecna w polu. Domylnie postp ma warto 1,
lecz mona mu przypisa dowoln inn warto liczbow.

Rozdzia 3. Tworzenie przyjaznych formularzy internetowych

59

Daty
Istotn spraw jest wskazanie daty rozpoczcia projektu. Chcemy, by byo
to jak najprostsze. Doskonale do tego celu nadaje si pole typu date.
html5_formularze/index.html

<label for="start_date">Data rozpoczcia</label>

<input type="date" name="start_date" id="start_date"
value="2010-12-01">

W trakcie powstawania tej ksiki jedyn przegldark, ktra w peni

obsugiwaa kontrolk kalendarza, bya przegldarka Opera.
Na rysunku 3.3 przedstawiono przykadow implementacj kontrolki kalendarza w przegldarce Opera.

Rysunek 3.3.

Kontrolka kalendarza wywietlona w przegldarce Opera

Przegldarka Safari 5.0 wywietla zamiast kontrolki kalendarza pole podobne do pola typu number, z przyciskami ze strzakami, za pomoc ktrych mona ustawia dat. Jeeli pole jest puste, przyjmowana jest domylna warto 1582. Pozostae przegldarki zamiast kontrolki kalendarza wywietlaj zwyke pole tekstowe.
Adres poczty elektronicznej
Specyfikacja HTML5 stanowi, e pole wejciowe typu email jest przeznaczone do wpisywania jednego adresu poczty elektronicznej lub listy
takich adresw. Pole to posuy nam zatem do wpisywania w formularzu
adresu poczty elektronicznej osoby kontaktowej.

60

HTML5 i CSS3. Standardy przyszoci

html5_formularze/index.html

<label for="email">Email osoby kontaktowej</label>

<input type="email" name="email" id="email">

Najwiksz korzy z zastosowania pola typu email uzyskuje si na urzdzeniach przenonych, w ktrych ukad wirtualnej klawiatury zmienia si
tak, aby atwiej dostpne byy klawisze ze znakami niezbdnymi do wpisania adresu poczty elektronicznej.
Adres URL
Dostpne jest take pole specjalnie przystosowane do wpisywania adresw
URL. Sprawdza si ono zwaszcza wwczas, gdy uytkownik wywoujcy
stron korzysta z iPhonea, poniewa urzdzenie zmienia wwczas ukad
klawiatury na taki, w ktrym znajduj si przyciski uatwiajce szybkie
wpisywanie adresw internetowych. Jest to rozwizanie podobne do klawiatury wywietlanej w trakcie wpisywania adresu URL w pasku adresw
w przegldarce Mobile Safari. W celu umieszczenia na formularzu pola
na adres URL wystarczy uy nastpujcej definicji:
html5_formularze/index.html

<label for="url">Adres URL</label>

<input type="url" name="url" id="url">

Rwnie wirtualne klawiatury zmieniaj swj ukad zalenie od typu pola

wejciowego.
Kolory
W ostatnim polu formularza naley poda kolor dla projektu. Posuy do
tego pole z typem color.
html5_formularze/index.html

<label for="project_color">Kolor dla projektu</label>

<input type="color" name="project_color" id="project_color">

W trakcie powstawania ksiki adna przegldarka nie obsugiwaa pola

wejciowego typu color, jednak nie jest to powd, by w ogle z niego rezygnowa. Odpowiedni znacznik precyzyjnie opisuje przeznaczenie pola,
co przyda si w przyszoci, zwaszcza gdy zajdzie potrzeba opracowania
rozwizania zastpczego.
Obecnie wikszo z przedstawionych nowych kontrolek jest obsugiwana przez
przegldark Opera, co wida na rysunku 3.4. Jednak gdy t sam stron
otworzy si w przegldarce Firefox, Safari albo Google Chrome, bdzie wida
tylko niewielkie rnice. I te wanie rnice trzeba bdzie wyeliminowa.

Rozdzia 3. Tworzenie przyjaznych formularzy internetowych

Rysunek 3.4.

61

Niektre kontrolki formularza s ju obsugiwane przez

przegldark Opera

Rozwizanie zastpcze
Przegldarki, ktre nie potrafi rozpozna pl wejciowych nowych typw,
prezentuj je jako pola typu text. Formularz bdzie wic nadal zdatny do
uycia. Na chwil obecn do takich pl mona podpina widety interfejsu uytkownika z biblioteki jQuery UI albo YUI, ktre odpowiednio takie
pole przeksztac. W miar upywu czasu coraz wicej przegldarek bdzie
obsugiwa pola nowych typw, wic bdzie mona stopniowo usuwa zastpcze rozwizania oparte na kodzie JavaScript.
Zastpienie kontrolki do wskazywania koloru
Kontrolk do wskazywania koloru mona bez trudu zastpi przy uyciu
biblioteki jQuery oraz selektorw atrybutw obecnych w CSS3. Wystarczy w tym celu zlokalizowa pole input typu color i przypisa mu plugin
biblioteki jQuery o nazwie SimpleColor.
html5_formularze/index.html

if (!hasColorSupport()){
$('input[type=color]').simpleColor();
}

62

HTML5 i CSS3. Standardy przyszoci

Poniewa w kodzie znacznikw uyto nowych typw dla pl formularzy,

nie trzeba definiowa dodatkowych nazw klas ani innych znacznikw,
ktre identyfikowayby kontrolk do wskazywania koloru. Selektory atrybutw i HTML5 w zupenoci wystarcz.
Jeeli przegldarka obsuguje kontrolk nowego typu, nie ma potrzeby
korzystania z pluginu. Naley wic przy uyciu kodu JavaScript sprawdzi,
czy przegldarka obsuguje pola wejciowe z atrybutem type o wartoci color.
html5_formularze/index.html

1
2
3
4
5
6
7
8
9
10
11
12

function hasColorSupport(){
input = document.createElement("input");
input.setAttribute("type", "color");
var hasColorType = (input.type !== "text");
// obsuga czciowej implementacji Safari/Chrome
if(hasColorType){
var testString = "foo";
input.value=testString;
hasColorType = (input.value != testString);
}
return(hasColorType);
}

Najpierw w kodzie JavaScript tworzony jest nowy element, a jego atrybutowi type przypisywana jest warto color. Nastpnie odczytujemy atrybut
type, aby sprawdzi, czy przegldarka pozwolia przypisa mu potrzebn
nam warto. Jeeli odczytan wartoci atrybutu type jest color, oznacza
to, e przegldarka prawidowo obsuguje kontrolk do wskazywania koloru. Jeeli warto atrybutu jest inna, wwczas trzeba uy pluginu.
Ciekawie przedstawia si zwaszcza szsty wiersz przedstawionego kodu.
Safari 5 i Google Chrome 5 czciowo obsuguj ju typ color. Mwic
bardziej precyzyjnie, przegldarki obsuguj pola tego typu, lecz nie wywietlaj waciwej kontrolki do wskazywania koloru, a zamiast niej
umieszczaj na formularzu standardowe pole tekstowe. Dlatego w metodzie, ktra sprawdza, czy kontrolka jest obsugiwana, przypisujemy warto polu wejciowemu, a nastpnie sprawdzamy, czy warto ta zostaje
zapamitana. Jeeli warto nie zostanie zapamitana, jest to znak, e
przegldarka w peni obsuguje kontrolk do wskazywania koloru, poniewa pole wejciowe nie zachowuje si jak standardowe pole tekstowe.
Kod, ktry zastpuje kontrolk do wskazywania koloru widetem, przedstawia si nastpujco:
html5_formularze/index.html

if (!hasColorSupport()){
$('input[type=color]').simpleColor();
}

Rozdzia 3. Tworzenie przyjaznych formularzy internetowych

63

Tak skonstruowane rozwizanie dziaa, lecz jest do ograniczone. Jest

ono przeznaczone tylko dla niektrych przegldarek i rozwizuje problem
jedynie z kontrolk do wskazywania koloru. Z innymi kontrolkami wi
si inne problemy, o ktrych warto wiedzie. Na szczcie istnieje rozwizanie alternatywne.
Modernizr
Biblioteka Modernizr2 potrafi rozpoznawa, czy dostpna jest obsuga
wikszoci funkcji obecnych w HTML5 i CSS3. Jeeli przegldarka nie
obsuguje danej funkcji, biblioteka jej w tym nie zastpuje, lecz udostpnia
szereg rozwiza podobnych do zaimplementowanego przez nas w poprzednim punkcie rozwizania rozpoznajcego pola formularza. Co wicej, rozwizania dostpne w bibliotece Modernizr s znacznie bardziej
niezawodne.
Zanim zaczniemy wykorzystywa Modernizr we wasnych projektach, naley
najpierw powici troch czasu na zrozumienie, jak biblioteka dziaa.
Programista jest bowiem odpowiedzialny za kod uyty w projekcie bez
wzgldu na to, czy jest jego autorem, czy nie. Modernizr nie potrafi jeszcze rozpoznawa czciowej obsugi pola do wskazywania koloru, obecnej
w przegldarce Safari. Gdy udostpniona zostanie nowa wersja przegldarki
Chrome lub Firefox, by moe trzeba bdzie samodzielnie opracowa
nowe rozwizanie. Kto wie, moe Twoje rozwizanie stanie si czci biblioteki Modernizr?
Rozwizania zastpcze dla kontrolek takich jak kontrolki kalendarza oraz
suwaki implementuje si w podobny sposb. Suwaki i kontrolki kalendarza to komponenty dostpne w bibliotece jQuery UI3. Bibliotek jQuery
UI naley doczy do strony, sprawdzi, czy przegldarka sama obsuguje wybran kontrolk, a jeeli tej obsugi brakuje, uy implementacji
analogicznej kontrolki w jzyku JavaScript.
Za jaki czas bdzie mona cakowicie zrezygnowa z kontrolek JavaScript
i korzysta wycznie z mechanizmw zaimplementowanych w przegldarkach. Biblioteka Modernizr jest o tyle pomocna, e zdejmuje z programisty obowizek tworzenia kodu rozpoznajcego obsug poszczeglnych
typw kontrolek, ktry zwykle jest do skomplikowany. Tym niemniej
2
3

http://www.modernizr.com/
http://jqueryui.com/

64

HTML5 i CSS3. Standardy przyszoci

w dalszej czci ksiki nadal bdziemy implementowa kod rozpoznajcy

obecno poszczeglnych funkcji w przegldarce, aby pokaza istot jego
dziaania.
Oprcz nowych typw pl formularza HTML5 definiuje kilka nowych
atrybutw pl formularzy, ktre zwikszaj ich uyteczno. W nastpnym
punkcie omwi atrybut autofocus.

Rozdzia 3. Tworzenie przyjaznych formularzy internetowych

65

Porada 4. Przechodzenie
do pierwszego pola formularza
przy uyciu atrybutu autofocus
Czynno wypeniania formularza mona znacznie przyspieszy, gdy
w momencie adowania strony umieci si kursor w pierwszym polu formularza. W wielu wyszukiwarkach internetowych dokonuje si tego za
pomoc odpowiedniego kodu JavaScript. Obecnie natomiast HTML5
udostpnia podobn funkcj jako element jzyka.
Cae rozwizanie sprowadza si do tego, by do wybranego pola formularza doda atrybut autofocus w taki sam sposb, jak zrobilimy to ju na
stronie profilu utworzonej w poradzie Opisywanie danych za pomoc
nowych pl wejciowych na stronie 56.
html5_formularze/index.html

<label for="name">Nazwa</label>
<input type="text" name="name" autofocus id="name">

Aby atrybut autofocus dziaa poprawnie, powinien wystpowa tylko jeden

raz na stronie. Jeeli atrybut wystpi wicej ni jeden raz, przegldarka
umieci kursor w ostatnim polu z tym atrybutem.
Rozwizanie zastpcze
Jeeli przegldarka uytkownika nie obsuguje atrybutu autofocus, mona
ten fakt rozpozna za pomoc odpowiednio sformuowanego kodu JavaScript.
Nastpnie naley uy biblioteki jQuery i umieci kursor w odpowiednim
polu formularza. Jest to najprawdopodobniej najprostsze rozwizanie zastpcze, ktre znajduje si w ksice.
html5_formularze/autofocus.js

function hasAutofocus() {
var element = document.createElement('input');
return 'autofocus' in element;
}
$(function(){
if(!hasAutofocus()){
$('input[autofocus=true]').focus();
}
});

66

HTML5 i CSS3. Standardy przyszoci

Wystarczy umieci zaprezentowany kod JavaScript na stronie, aby uzyska odpowiedni obsug atrybutu autofocus.
Autofokus uatwia uytkownikom wypenianie formularza. Jeszcze wikszym uatwieniem bdzie jednak udostpnienie informacji na temat tego,
jakich konkretnie danych oczekujemy w poszczeglnych polach formularza.
Dlatego w nastpnym punkcie zajmiemy si atrybutem placeholder.

Rozdzia 3. Tworzenie przyjaznych formularzy internetowych

67

Porada 5. Wywietlanie wskazwek

w postaci tekstu zastpczego
Tekst zastpczy stanowi wskazwk dla uytkownika, ktra mwi, jakie
dane naley wpisywa w poszczeglnych polach. Na rysunku 3.5 przedstawiono formularz do tworzenia nowego konta, w ktrym zastosowano
tekst zastpczy. Formularz ten zdefiniujemy w nastpnym punkcie.

Rysunek 3.5.

Teksty zastpcze wskazuj uytkownikowi, jakie dane

powinien wpisa w poszczeglnych polach

Formularz zakadania nowego konta

Na stronie firmy Peen Wypas S.A. uytkownik musi najpierw zaoy
nowe konto. Powanym problemem, ktry zawsze pojawia si w takim
przypadku, jest to, e uytkownicy podaj hasa atwe do odgadnicia.
Dlatego uyjemy tekstu zastpczego, aby wskaza uytkownikowi wymagania co do postaci hasa. Dla zachowania spjnoci tekst zastpczy umiecimy take w pozostaych polach tekstowych.
Aby umieci w polu formularza tekst zastpczy, wystarczy do kadego
takiego pola doda atrybut placeholder w nastpujcy sposb:
html5_tekstzastepczy/index.html

<input id="email" type="email"

name="email" placeholder="uytkownik@przyklad.com">

68

HTML5 i CSS3. Standardy przyszoci

Kod znacznikw caego formularza przedstawiono na poniszym listingu.

W kadym polu formularza umieszczono tekst zastpczy.
html5_tekstzastepczy/index.html

<form id="create_account" action="/signup" method="post">

<fieldset id="signup">
<legend>Za nowe konto</legend>
<ol>
<li>
<label for="first_name">Imi</label>
<input id="first_name" type="text"
autofocus="true"
name="first_name" placeholder="'Jan'">
</li>
<li>
<label for="last_name">Nazwisko</label>
<input id="last_name" type="text"
name="last_name" placeholder="'Kowalski'">
</li>
<li>
<label for="email">Email</label>
<input id="email" type="email"
name="email" placeholder="uytkownik@przyklad.com">
</li>
<li>
<label for="password">Haso</label>
<input id="password" type="password" name="password" value=""
autocomplete="off" placeholder="8-10 znakw" />
</li>
<li>
<label for="password_confirmation">Potwierd haso</label>
<input id="password_confirmation" type="password"
name="password_confirmation" value=""
autocomplete="off" placeholder="Ponownie wpisz haso" />
</li>
<li><input type="submit" value="Za konto"></li>
</ol>
</fieldset>
</form>

Wyczanie automatycznego uzupeniania

Nietrudno zauway, e do pl formularza, w ktrych wpisuje si haso,
dodano atrybut autocomplete. Atrybut ten jest nowoci w HTML5 i wskazuje on przegldarkom, e nie powinny automatycznie wypenia tego pola
danymi. Niektre przegldarki pamitaj bowiem dane wpisane w przeszoci przez uytkownika, a w niektrych sytuacjach podane jest, by przegldarki nie wstawiay ponownie tych samych danych.

Rozdzia 3. Tworzenie przyjaznych formularzy internetowych

69

Poniewa rwnie w tym formularzu pola s zdefiniowane w ramach listy

uporzdkowanej, mona doda kaskadowy arkusz stylw, aby nada stronie bardziej przyjazny wygld.
html5_tekstzastepczy/style.css

fieldset{
width: 216px;
}
fieldset ol{
list-style: none;
padding:0;
margin:2px;
}
fieldset ol li{
margin:0 0 9px 0;
padding:0;
}
/* Pola wejciowe maj znajdowa si w oddzielnych wierszach */
fieldset input{
display:block;
}

Dziki takiemu rozwizaniu uytkownicy przegldarek Safari, Opera

i Chrome bd widzie wskazwki w postaci tekstu zastpczego widocznego w polach wejciowych. Pozostao nam tylko opracowa rozwizanie
zastpcze, ktre da ten sam efekt w przegldarkach Firefox i Internet
Explorer.
Rozwizanie zastpcze
Za pomoc krtkiego kodu jzyka JavaScript w polach formularzy mona
umieszcza teksty zastpcze. W tym celu naley sprawdzi zawarto kadego pola formularza, a jeeli jest ono puste, trzeba przypisa mu tekst
zastpczy. Gdy w polu formularza zostanie umieszczony kursor, tekst
zastpczy si usuwa, a gdy kursor zostanie przeniesiony do innego pola,
ponownie naley sprawdzi jego zawarto. Jeeli zawarto pola jest inna
ni tekst zastpczy, pozostawia si j bez zmian. Jeeli natomiast pole jest
puste, wstawia si w nim tekst zastpczy.
Aby sprawdzi, czy przegldarka obsuguje tekst zastpczy, naley wykorzysta rozwizanie podobne do tego, za pomoc ktrego sprawdzalimy
obsug autofokusu.

70

HTML5 i CSS3. Standardy przyszoci

html5_tekstzastepczy/index.html

function hasPlaceholderSupport() {
var i = document.createElement('input');
return 'placeholder' in i;
}

Teraz pozostaje ju tylko napisa kod JavaScript, ktry bdzie obsugiwa
zmiany tekstu. Do tego celu wykorzystamy rozwizanie, ktre opracowa
Andrew January4 wraz z zespoem. Za pomoc skryptu wszystkie pola
formularza bdziemy wypenia tekstem zastpczym przechowywanym
w atrybucie placeholder. Gdy uytkownik umieci kursor w polu, umieszczony w nim tekst zostanie usunity. Cao kodu zaimplementujemy
w postaci pluginu biblioteki jQuery, aby atwo byo go wykorzysta w formularzu. Wicej informacji na temat sposobu dziaania pluginw znajduje
si w ramce na stronie 72.
html5_tekstzastepczy/jquery.placeholder.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

(function($){
$.fn.placeholder = function(){
function valueIsPlaceholder(input){
return ($(input).val() == $(input).attr("placeholder"));
}
return this.each(function() {
$(this).find(":input").each(function(){
if($(this).attr("type") == "password"){
var new_field = $("<input type='text'>");
new_field.attr("rel", $(this).attr("id"));
new_field.attr("value", $(this).attr("placeholder"));
$(this).parent().append(new_field);
new_field.hide();
function showPasswordPlaceHolder(input){
if( $(input).val() == "" || valueIsPlaceholder(input) ){
$(input).hide();
$('input[rel=' + $(input).attr("id") + ']').show();
};
};

Skrypt w oryginalnej postaci jest dostpny na stronie pod adresem http://www.

morethannothing.co.uk/wp-content/uploads/2010/01/placeholder.js. Skrypt ten nie
obsuguje jednak pl hase w Internet Explorerze.

Rozdzia 3. Tworzenie przyjaznych formularzy internetowych

26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

new_field.focus(function(){
$(this).hide();
$('input#' + $(this).attr("rel")).show().focus();
});
$(this).blur(function(){
showPasswordPlaceHolder(this, false);
});
showPasswordPlaceHolder(this);
}else{
// Zastpienie wartoci tekstem zastpczym.
// Opcjonalny parametr reload pozwala na zapisywanie wartoci pl
// w pamici podrcznej przez FF i IE.
function showPlaceholder(input, reload){
if( $(input).val() == "" ||
( reload && valueIsPlaceholder(input) ) ){
$(input).val($(input).attr("placeholder"));
}
};
$(this).focus(function(){
if($(this).val() == $(this).attr("placeholder")){
$(this).val("");
};
});
$(this).blur(function(){
showPlaceholder($(this), false)
});

showPlaceholder(this, true);
};
});
// Zapobiega wysaniu formularza z wartociami domylnymi
$(this).submit(function(){
$(this).find(":input").each(function(){
if($(this).val() == $(this).attr("placeholder")){
$(this).val("");
}
});
});
});
};
})(jQuery);

71

72

HTML5 i CSS3. Standardy przyszoci

W przedstawionym kodzie rdowym pluginu znajduje si kilka interesujcych rozwiza, na ktre warto zwrci uwag. W wierszu 45. tekst
zastpczy zostaje umieszczony w polu, jeeli nie ma ono adnej wartoci,
ale rwnie wwczas, gdy nastpio ponowne zaadowanie strony. Firefox
i inne przegldarki zachowuj wartoci obecne w polach formularza. Skrypt
przypisuje atrybutowi value pl teksty zastpcze, poniewa nie chcemy, by
pozostaa w nim warto wczeniej wpisana przez uytkownika. W momencie adowania strony do metody showPlaceholder() przekazujemy warto true, co wida w wierszu 61.
Pluginy jQuery
Bibliotek jQuery mona rozszerza przez implementowanie wasnych
pluginw. Gdy zaimplementowan samodzielnie metod doda si
do funkcji jQuery, plugin stanie si automatycznie dostpny dla innych programistw, ktrzy docz do swojego kodu tak rozszerzon bibliotek. Oto najprostszy przykad, ktry powoduje wywietlenie okna komunikatu JavaScript:
jQuery.fn.debug = function() {
return this.each(function(){
alert(this.html());
});

Aby wywietli okno dla kadego akapitu na stronie, wystarczy

wywoa funkcj w nastpujcy sposb:
$("p").debug();

Pluginy biblioteki jQuery s skonstruowane w taki sposb, e przechodz przez kolekcj obiektw jQuery oraz zwracaj tak kolekcj
obiektw. Mona wic z uzyskanych w ten sposb obiektw tworzy
acuch. Na przykad dziki temu, e przedstawiony powyej plugin
o nazwie debug rwnie zwraca kolekcj jQuery, mona wykorzysta
metod css biblioteki i zmieni kolor tekstu wszystkich akapitw jednym wierszem kodu.
$("p").debug().css("color", "red");

W ksice jeszcze co najmniej kilka razy skorzystamy z pluginw

biblioteki jQuery, aby utrzyma odpowiedni organizacj kodu rdowego stanowicego rozwizanie zastpcze. Wicej informacji na
temat pluginw jQuery mona znale  na stronie z dokumentacj
biblioteki*.
* http://docs.jquery.com/Plugins/Authorin

Rozdzia 3. Tworzenie przyjaznych formularzy internetowych

73

Pola przeznaczone na wpisywanie hase zachowuj si inaczej ni pozostae pola formularza, dlatego te trzeba je inaczej potraktowa. Spjrzmy
na wiersz 12. Najpierw rozpoznajemy w nim obecno pola hasa. Potem
trzeba zmieni jego typ na zwyke pole tekstowe, aby jego warto nie
zostaa ukryta pod postaci gwiazdek. Niektre przegldarki zwracaj
bd, gdy prbuje si przeksztaci pola hase, dlatego musimy zastpi
pole hasa zwykym polem tekstowym. Pole hasa i pole tekstowe bdziemy zamienia ze sob nawzajem zalenie od czynnoci wykonywanych
przez uytkownika.
Opracowane rozwizanie zmienia wartoci pl na formularzu, dlatego
naley zapewni, e teksty zastpcze nie zostan przesane do serwera jako
dane formularza. Poniewa kod do obsugi tekstw zastpczych jest wykonywany jedynie wwczas, gdy w przegldarce wczona jest obsuga
jzyka JavaScript, moemy przy uyciu tego jzyka wykry prb przesania formularza na serwer i usun z niego wartoci, ktre s identyczne jak
teksty zastpcze. W wierszu 66. rozpoznawane jest zdarzenie zatwierdzenia formularza, po czym kod usuwa wartoci z wszystkich pl wejciowych, w ktrych znajduje si tekst zastpczy.
Dziki temu, e nasze rozwizanie zaimplementowalimy w postaci pluginu, moemy je teraz wywoa na stronie przez podczenie pluginu do
formularza w nastpujcy sposb:
html5_tekstzastepczy/index.html

$(function(){
function hasPlaceholderSupport() {
var i = document.createElement('input');
return 'placeholder' in i;
}
if(!hasPlaceholderSupport()){
$("#create_account").placeholder();
// KONIEC rozwizania zastpczego
$('input[autofocus=true]').focus();
};
});

W ten sposb powstao cakiem eleganckie rozwizanie, ktre pozwala

umieszcza teksty zastpcze w formularzach aplikacji internetowych w dowolnej przegldarce.

74

HTML5 i CSS3. Standardy przyszoci

Porada 6. Edytowanie danych

bezporednio na stronie przy uyciu
atrybutu contenteditable
Zawsze warto szuka sposobw, dziki ktrym uytkownikom atwiej bdzie
korzysta z aplikacji. Czasami warto pozwoli uytkownikom na edytowanie danych na ich temat bez koniecznoci odsyania ich do dedykowanego
formularza. Standardowo mechanizm edycji danych bezporednio na stronie
implementuje si w taki sposb, e najpierw rozpoznaje si kliknicia mysz w regionie, w ktrym znajduje si tekst, a nastpnie w miejsce regionu
wstawia si pole tekstowe. Zmieniona zawarto takiego pola tekstowego
jest potem przesyana za porednictwem technologii Ajax z powrotem do
serwera. Natomiast obecny w HTML5 znacznik contenteditable automatycznie udostpnia moliwo wpisywania danych bezporednio na
stronie. Rwnie w przypadku zastosowania znacznika contenteditable
trzeba zaimplementowa kod JavaScript, ktry bdzie przesya zmienione
dane na serwer w celu ich zapisania, lecz nie trzeba ju wwczas tworzy
ani przecza ukrytych pl formularzy.
Celem jednego z projektw realizowanych w firmie Peen Wypas S.A.
jest umoliwienie uytkownikom przegldania danych na temat ich konta.
Na przeznaczonej do tego stronie WWW znajduje si nazwisko uytkownika, miasto, wojewdztwo, kod pocztowy oraz adres poczty elektronicznej. Dodamy wic moliwo edytowania tych danych bezporednio na
stronie. W efekcie powinien powsta interfejs widoczny na rysunku 3.6.

Rysunek 3.6.

atwe edytowanie danych bezporednio na stronie

Zanim przystpimy do implementacji, chc zaznaczy, e implementowanie jakiegokolwiek mechanizmu opartego na kodzie JavaScript bez
uprzedniego zaimplementowania kodu dziaajcego na serwerze jest
wbrew wszelkim znanym mi dobrym praktykom tworzenia aplikacji internetowych. Przyjem jednak taki tryb pracy tylko dlatego, e chc skupi si
na przedstawieniu dziaania znacznika contenteditable, oraz dlatego, e

Rozdzia 3. Tworzenie przyjaznych formularzy internetowych

75

nie bdzie to kod na rodowisko produkcyjne. Zawsze, i to naprawd zawsze, najpierw naley zaimplementowa t cz, ktra nie
wymaga kodu JavaScript, a dopiero potem tworzy wersj rozwizania,
ktra opiera si na skryptach JavaScript. Na koniec powinno si take
zaimplementowa automatyczne testy dla obydwch wersji rozwizania,
aby zwikszy prawdopodobiestwo zidentyfikowania wszystkich potencjalnych bdw, ktre mog zaj zwaszcza wwczas, gdy zmianie ulegnie tylko jedna z wersji.
Formularz edycji danych o koncie
W HTML5 udostpniono znacznik contenteditable, ktry jest dostpny
niemal dla kadego elementu. Dodanie znacznika contenteditable spowoduje, e element przeksztaci si w pole dostpne do edycji.
html5_edytowaniedanych/show.html

<h1>Informacje o uytkowniku</h1>
<div id="status"></div>
<ul>
<li>
<b>Imi i nazwisko</b>
<span id="name" contenteditable="true">Daniel Kaczmarek</span>
</li>
<li>
<b>Miasto</b>
<span id="city" contenteditable="true">Dowolne</span>
</li>
<li>
<b>Wojewdztwo</b>
<span id="state" contenteditable="true">
lskie</span>
</li>
<li>
<b>Kod pocztowy</b>
<span id="postal_code" contenteditable="true">44-100</span>
</li>
<li>
<b>Email</b>
<span id="email" contenteditable="true">boss@pelenwypas.com</span>
</li>
</ul>

Tak skonstruowany formularz mona rozszerzy o kaskadowy arkusz stylw.

Do zidentyfikowania pl dostpnych do edycji wykorzystamy selektory
CSS3. Pola te bd zmienia kolor, gdy uytkownik umieci na nich kursor myszy albo je zaznaczy.
html5_edytowaniedanych/show.html

1
2
3

ul{list-style:none;}
li{clear:both;}

76
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

HTML5 i CSS3. Standardy przyszoci

li>b, li>span{
display: block;
float: left;
width: 100px;
}
li>span{
width:500px;
margin-left: 20px;
}
li>span[contenteditable=true]:hover{
background-color: #ffc;
}
li>span[contenteditable=true]:focus{
background-color: #ffa;
border: 1px shaded #000;
}

To ju wszystko, jeli chodzi o cz widoczn dla uytkownika. Uytkownicy mog ju teraz atwo zmienia dane bezporednio na stronie.
Pozostaje je tylko zapisa na serwerze.
Zapisywanie danych
Uytkownicy mog ju zmienia dane, jednak na razie zmiany te zostan utracone, gdy nastpi ponowne wywoanie strony bd te gdy uytkownik przejdzie do innej strony internetowej. Trzeba zapewni moliwo przesania wprowadzonych zmian do serwera. Najprociej jest wykorzysta do tego celu bibliotek jQuery. Jeeli kiedykolwiek miae
styczno z technologi Ajax, zastosowane rozwizanie nie bdzie dla
Ciebie niczym nowym.
html5_edytowaniedanych/show.html

$(function(){
var status = $("#status");
$("span[contenteditable=true]").blur(function(){
var field = $(this).attr("id");
var value = $(this).text();
$.post("http://localhost:4567/users/1",
field + "=" + value,
function(data){
status.text(data);
}
);
});
});

Rozdzia 3. Tworzenie przyjaznych formularzy internetowych

77

Do kadej sekcji span, ktra znajduje si na stronie i zawiera atrybut

contenteditable o wartoci true, dodany zosta odbiornik zdarze. Potem
nastpuje ju tylko przesanie danych do skryptu dziaajcego na serwerze.
Rozwizanie zastpcze
W zastosowanym rozwizaniu uyto szeregu rozwiza, ktre w niektrych okolicznociach nie bd dziaa poprawnie. Przede wszystkim wysanie zmienionych danych do serwera jest wykonywane przez kod JavaScript, co w zasadzie jest zym pomysem. Poza tym uylimy pseudoklasy
focus, aby wyrni pola, w ktrych znajduje si kursor, a pseudoklasa ta
nie jest obsugiwana przez niektre wersje przegldarki Internet Explorer.
Zajmijmy si wic najpierw dziaaniem strony, a potem jej wygldem.
Strona do edycji danych
Zamiast wymyla rne okolicznoci, w ktrych uytkownik moe nie
mie moliwoci skorzystania z zaimplementowanego przez nas rozwizania, najlepiej jest po prostu da mu moliwo przejcia do oddzielnej
strony z formularzem. Oczywicie wymaga to napisania dodatkowego
kodu, jednak wemy pod uwag okolicznoci, jakie mog mie miejsce:
Uytkownik nie ma wczonej obsugi jzyka JavaScript i uywa
Internet Explorera 7.
Uytkownik korzysta z przegldarki, ktra nie obsuguje HTML5.
Uytkownik korzysta z najnowszej wersji przegldarki Firefox,
ktra obsuguje HTML5, lecz nie ma wczonej obsugi jzyka
JavaScript, bo po prostu tego jzyka nie lubi (to moe si zdarzy
zawsze, zdecydowanie czciej, ni mona by sobie wyobraa).
Gdy zastanowimy si nad opisanymi okolicznociami, najbardziej sensownym rozwizaniem zastpczym okae si stworzenie formularza, ktry
metod POST wykona t sam czynno, co zaimplementowany przez nas
kod Ajax odpowiedzialny za zapisanie zmian. Sposb wykonania rozwizania zastpczego zaley tylko od nas, jednak wiele dostpnych platform
programistycznych umoliwia wykrywanie typu dania przez sprawdzenie
zawartoci nagwkw accept. Na tej podstawie mona si dowiedzie, czy
danie zostao wykonane zwyk metod POST, czy za pomoc XMLHttpRequest.

78

HTML5 i CSS3. Standardy przyszoci

Kod pozostanie wwczas zgodny z zasad DRY5. cze do formularza bdzie ukrywane, jeeli przegldarka bdzie obsugiwa znacznik contenteditable
i jzyk JavaScript.
Utworzymy wic now stron o nazwie edit.html, ktra bdzie zawiera
standardowy formularz edycji danych. Dane bd przesyane do tego samego
adresu, z ktrego korzysta zaimplementowany przez nas kod Ajax.
html5_edytowaniedanych/edit.html

<!DOCTYPE html>
<html lang="pl-PL">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Edycja danych o koncie</title>
<link href="style.css" rel="stylesheet" media="screen">
</head>
<body>
<form action="/users/1" method="post" accept-charset="utf-8">
<fieldset id="your_information">
<legend>Informacje o uytkowniku</legend>
<ol>
<li>
<label for="name">Imi i nazwisko</label>
<input type="text" name="name" value="" id="name">
</li>
<li>
<label for="city">Miasto</label>
<input type="text" name="city" value="" id="city">
</li>
<li>
<label for="state">Wojewdztwo</label>
<input type="text" name="state" value="" id="state">
</li>
<li>
<label for="postal_code">Kod pocztowy</label>
<input type="text" name="postal_code" value="" id="postal_code">
</li>
<li>
<label for="email">Email</label>
<input type="email" name="email" value="" id="email">
</li>
</ol>
</fieldset>
<p><input type="submit" value="Zapisz"></p>

DRY to skrt angielskich sw Dont Repeat Yourself, czyli nie powtarzaj si.
Okrelenie to zostao sformuowane przez Davea Thomasa i Andyego Hunta
w ksice The Pragmatic Programmer. [HT00]

Rozdzia 3. Tworzenie przyjaznych formularzy internetowych

79

</form>
</body>
</html>

Nastpnie na stronie show.html naley doda cze do nowej strony

edit.html.
html5_edytowaniedanych/show.html

<h1>Informacje o uytkowniku</h1>
<section id="edit_profile_link">
<p><a href="edit.html">Edycja danych o uytkowniku</a></p>
</section>
<div id="status"></div>

Po dodaniu cza trzeba nieco zmodyfikowa skrypt. cze do strony

edycji danych ma by ukrywane, a kod Ajax wykonywany jedynie wwczas, gdy przegldarka bdzie obsugiwa znacznik contenteditable.
html5_edytowaniedanych/show.html

if(document.getElementById("edit_profile_link").contentEditable != null){

Skrypt rozszerzony o mechanizm wykrywania obsugi znacznika contenteditable

ma nastpujc posta:
html5_edytowaniedanych/show.html

$(function(){
if(document.getElementById("edit_profile_link").contentEditable != null){
$("#edit_profile_link").hide();
var status = $("#status");
$("span[contenteditable=true]").blur(function(){
var field = $(this).attr("id");
var value = $(this).text();
$.post("http://localhost:4567/users/1",
field + "=" + value,
function(data){
status.text(data);
}
);
});
}
});

Dziki takiej implementacji uytkownicy mog korzysta ze standardowego interfejsu edycji danych bd te z szybszego trybu edycji danych bezporednio na stronie. Wiesz ju, w jaki sposb zaimplementowa taki
interfejs, pamitaj wic, aby najpierw stworzy rozwizanie zastpcze.
W odrnieniu bowiem od rozwiza zastpczych dla innych przypadkw, brak rozwizania zastpczego w tej sytuacji ograniczy zbir funkcji
dostpnych dla uytkownika.

80

HTML5 i CSS3. Standardy przyszoci

Przyszo
Jeli obecnie na stronie dodana zostanie kontrolka kalendarza zaimplementowana w jzyku JavaScript, uytkownicy bd musieli pozna sposb
jej dziaania. Jeeli kiedy kupowae w internecie bilety na samolot i rezerwowae pokj w hotelu, zdajesz sobie spraw, jak rnorodne s sposoby implementowania formularzy na stronach WWW. Podobnie jest z bankomatami, ktrych interfejsy rni si midzy sob czasem tak znacznie,
e rnice te mog spowalnia czynnoci korzystajcych z nich osb.
Wyobramy sobie jednak, e na kadej witrynie znajduje si pole daty
zaimplementowane w HTML5, a odpowiedzialno za stworzenie odpowiedniego interfejsu spoczywa na przegldarce. Na kadej witrynie odwiedzanej przez uytkownikw kontrolka kalendarza miaaby identyczn
posta. W oprogramowaniu odczytujcym zawarto ekranu mona by
wrcz zaimplementowa standardowy mechanizm, ktry uatwiby osobom
niewidomym atwe wpisywanie dat. Zwrmy te uwag, jak bardzo
przydatne dla uytkownikw stan si teksty zastpcze i autofokus, gdy
bd powszechnie obsugiwane. Na podstawie tekstw zastpczych oprogramowanie odczytujce zawarto ekranu moe wyjania uytkownikom
przeznaczenie poszczeglnych pl formularzy, za dziki mechanizmowi
autofokusu atwiej bdzie takim osobom nawigowa po formularzu bez
uycia myszy. Bdzie to znaczne uatwienie zarwno dla osb niewidomych i niedowidzcych, jak rwnie dla tych uytkownikw, ktrym ograniczenia ruchowe nie pozwalaj na korzystanie z myszy lub je utrudniaj.
Moliwo przeksztacania dowolnego elementu w region dostpny do
edycji znacznie uatwia edytowanie danych bezporednio na stronie. Jednoczenie moe to doprowadzi do zmiany sposobu tworzenia interfejsw
dla systemw do zarzdzania treci.
Wspczesny internet skupia si na interakcji, a formularze s tej interakcji
kluczowym elementem. Rozszerzenia dostpne w HTML5 daj programistom cay zbir nowych narzdzi, dziki ktrym mona znacznie uatwi
ycie uytkownikom.

Skorowidz

@font-face, 185
<!DOCTYPE HTML>, 36

A
A, 33
AAC, 147
abbr, 26
accept, 77
Accessibility for Reach Internet
Applications, 107
acronym, 26
Address, 225
addToNotesList, 210, 212
Adres poczty elektronicznej, 59
Advanced Audio Coding, 147
align, 26
alink, 26
Andrew January, 70
Android, 33, 194, 214, 217, 219
animacja, 251
animowane elementy interfejsu, 248
Apache, 219, 227
API, 158, 221, 226, 254
historii, 223
Static Map, 241
aplikacja odczytujca zawarto ekranu,
107

applet, 26
application, 110
aria-atomic, 108, 118
aria-live, 108, 118
article, 33, 39, 40, 112
artyku, 33, 39, 40
struktura, 39
aside, 33, 40, 42
assertive, 118
atrybuty
danych, 33
uytkownika, 32, 33
audio, 24, 141
loops, 150
autocomplete, 68
autofocus, 65
Autofokus, 55
AVI, 145

B
background-color, 164
background-image, 181
banner, 110
basefont, 25
beginPath, 128
bgcolor, 26
big, 25

294

HTML5 i CSS3. Standardy przyszoci

bind, 231, 258

blog, 34
body, 26
border, 26
border-radius, 164, 171
box-shadow, 164, 176

C
C, 33
canPlayType, 153
canvas, 24, 123, 136
Canvas API, 131
cellpadding, 26
cellspacing, 26
center, 25
choroba Divitis, 31
Chrome, 27, 44, 57, 58, 60, 62, 69, 91,
93, 105, 146, 148, 150, 154, 167,
171, 175, 179, 200, 214, 217, 225,
231, 237, 241, 255, 263
Chrome Frame, 215, 254
cieniowanie
obrazkw, 21
tekstu, 21
cieniowanie tekstu, 177
cie, 176
elementu, 164
class, 47
click, 49, 210
ClientLocation, 244
closePath, 129
color, 60, 62
Columnizer, 101
complementary, 110
contenteditable, 31, 74, 75, 77
contentinfo, 110, 111
cookie, 194, 200, 201
Corner, 168
Create, Retrieve, Update and Delete, 204
Cross-document Messaging, 193, 226

cross-site scripting, 19
CRUD, 204
CSS3, 17
cubic-bezier, 251
cytat, 40
czat, 233, 234
czcionka, 184, 185
zastpcza, 189

D
dane uytkownika
atrybuty, 47
data, 59
data-, 47
data-name, 135
data-remote=true, 51
dataStorage, 258
date, 59
datetime, 55
datetime-local, 55
definicja pojcia, 112
definition, 112
deklaracja typu dokumentu, 21, 23, 34
diagram, 40
dir, 26
directory, 112
DirectX, 179, 180
div, 31, 32, 34, 39
dobra praktyka tworzenia aplikacji, 74
doctype, 21
document, 112, 113
DOMAssistant, 91
dygresja, 40

E
ease-in, 251
ease-in-out, 251
ease-out, 251
ease-out-in, 251

Skorowidz

edycja wewntrz strony, 55

edytowanie danych na stronie, 74, 80
ekran
orientacja, 103
rozdzielczo, 103
szeroko, 103
wysoko, 103
email, 59
embed, 143
Embedded OpenType, 187
Embedded Open-Type, 185
EOT, 185, 187
errata, 15
even, 86
event, 231
ExplorerCanvas, 131, 139

F
F, 33
fetchNotes, 211
fill, 129
fillText, 128
film wideo, 145
filmy dla dorosych, 159
Firefox, 27, 33, 44, 60, 69, 91, 93, 105,
115, 146, 148, 150, 154, 165, 167,
171, 175, 179, 200, 214, 217, 220,
225, 231, 241, 255, 263
Flash, 143, 155, 177, 238
Flash Player, 146, 147, 148
Flash Socket Policy, 239
Flowplayer, 155
focus, 77
font, 25
Font API, 185
FontSquirrel, 186, 187
footer, 33, 37, 38
for, 57
form, 51
format czcionki, 186

formularz, 56, 66
frame, 25
frameset, 25
funkcje czasu, 250

G
geolocation, 241
Geolocation, 193
geolokalizacja, 193, 222, 241
getAttribute, 33
getContext, 125
getScript, 232, 244
gniazdka internetowe, 193, 222, 233
gniazdka sieciowe, 19
Google Chrome, 33, 147
gradient, 21, 130, 164, 175
Gradient, 181
grafika wektorowa, 124

H
H.264, 145
h1, 36
h2, 36
h3, 36
handheld, 104
hasBorderRadius, 168
head, 26, 228
header, 110
heading, 112
height, 26
hidden, 119
historia przegldarki, 222
hover, 83, 249, 260
href, 48
hspace, 26
HTML5, 12, 17, 23
HTML5Shiv, 46

295

296

HTML5 i CSS3. Standardy przyszoci

I
id, 32, 37, 57
ID, 36
IE, 33
IE-CSS3, 91
iframe, 26, 226, 229
Illustrator, 177
img, 26, 112, 123
implementowanie wasnych pluginw, 72
indeksowana baza danych, 248
Indexed Database API, 263
IndexedDB, 205
Inkscape, 177
input type
autofocus, 55
color, 55
date, 55
email, 54, 55
number, 55
placeholder, 55
range, 54
serach, 54
tel, 54
text, 55
url, 54
insertid, 212
insertNote, 212
Internet Explorer, 23, 33, 36, 44, 46, 69,
77, 90, 91, 93, 94, 101, 105, 115,
131, 146, 147, 151, 154, 165, 167,
171, 179, 187, 200, 214, 217, 225,
231, 254, 255
Internetowe aplikacje offline, 196
internetowe bazy danych SQL, 193, 196
iOS, 33, 146, 217
iTunes Store, 147

J
JAWS, 108
jQuery, 49, 72, 91, 95, 101, 105, 118,
134, 135, 168, 170, 218, 225, 228,
232, 261
jQuery UI, 61

K
kanwa, 125
zapisanie stanu, 129
kanwy 3D, 248
kaskadowy arkusz stylw, 42, 94
Keith Clark, 91
klient czatu, 233
kody rdowe, 15
kolor, 60, 61
Kolor, 55
kolor
linii, 130
ta, 170, 250
wypenienia, 130
komentarz warunkowy, 44
komunikacja
midzy dokumentami, 193
midzy domenami, 193
w czasie rzeczywistym, 233
kontener, 148
MP4, 148
OGG, 148
WebM, 148
kontrolka
kalendarza, 59, 63
wyszukiwania, 110
konwertowanie czcionki, 186

Skorowidz

L
landmark roles, 109
last-child, 88
Leslie Michaela Orchard, 260
li, 57
Liczba, 55
linear-gradient, 164
link, 26
list, 112
lista nieuporzdkowana, 32, 38
lista odniesie, 112
lista uporzdkowana, 57
listitem, 112
litery
kolor, 85
load_settings, 199
loadNote, 211
localStorage, 194, 195, 197, 198, 201,
202, 219
lokalizacja punktu dostpowego, 241
lokalizacja uytkownika, 242
longdesc, 26

M
main, 110
map, 135
margines ostatniego akapitu, 88
math, 112
Matrix, 180
max-width, 105
media queries, 103
meter, 33, 45
metoda, 129
migracja do HTML5, 26
min-width, 105
Mobile Safari, 33, 56, 194
Modernizr, 63
month, 55
Mozilla, 147

297

mp3, 27
MP3, 148
MPEG, 145

N
nagwek, 36
sekcji, 33
strony, 33
sekcji strony, 112
wiersza w tabeli, 112
naprzemiennie pokolorowane wiersze, 85
nav, 33, 42, 111
navigation, 109, 110, 111
nawigacja, 33, 37, 110
noConflict, 54
noframes, 25
notatka
odczytanie, 205
usunicie, 205
utworzenie, 205
note, 112
nth-child, 86
nth-last-child, 89
nth-of-type, 85
null, 101
number, 59

O
O, 33
object, 26, 143
oblanie tekstem, 43
obracanie elementw, 178
obrazek, 112
obrazki wektorowe, 24
obrt, 164
odczytanie zmienionego obszaru, 118
odd, 86
odstpy midzy komrkami tabeli, 84
offline, 217

298

HTML5 i CSS3. Standardy przyszoci

ogg, 27
OGG, 148
okno odbiera komunikat, 231
okno wywoywane, 47
on drag, 257
onafterprint, 94
onbeforeprint, 94
onclick, 47, 48
onclose, 236, 237
ondragend, 257
ondragenter, 257, 259
ondragleave, 257, 259
ondragover, 257
ondragstart, 257
ondrop, 257
onmessage, 231, 236, 254
onopen, 236
OpenType, 187
Opera, 33, 57, 58, 59, 60, 69, 91, 105,
146, 147, 148, 214
opis obrazka, 112
originalevent, 258
originalEvent, 231
overflow, 235
OVG, 187

P
p contenteditable, 55
pasek boczny, 40, 42
szeroko, 44
pasek nawigacyjny
poziomy, 43
pasek postpu, 45
pattern, 265
placeholder, 67
play, 159
plik manifestu, 217
plugin dostpny dla innych
programistw, 72

pocztek strony, 110

podwodne patenty, 146
podzia tekstu na kolumny, 102
Pole adresu
poczty elektronicznej, 54
URL, 54
Pole daty, 55
pole dostpne do edycji, 75
pole
numeru telefonu, 54
pokrta, 58
wyszukiwania, 54
polite, 118
poczenie stanowe, 233
poczenie z serwerem, 236
popup, 49
window, 47
POST, 56, 77
postp wartoci w polu, 58
postp wzgldem wartoci docelowej, 33
postMessage, 228, 232, 253
posts, 43
powiadamianie o zmianach w treci
strony, 118
praca bez dostpu do sieci, 193
prawidowo danych wejciowych, 264
prawo do rozpowszechniania, 185
uytkowania, 185
presentation, 112
preventDefault, 49
prezentowanie pomocy na temat aplikacji,
47
print, 94
profile, 26
progress, 33, 45
Prototype, 91
przechowywanie danych na komputerach
klientw, 197
przechowywanie danych w internecie, 193

Skorowidz

przeciganie plikw, 260

przecignij i upu, 248, 255
przezroczysto, 164, 181
pseudoklasa, 83
punkt pocztkowy rysunku, 129
pushState, 224

Q
Quirksmode, 201

R
ramka boczna, 111
ramki, 25
range, 57
receiveMessage, 232
redistribution rights, 185
rel, 47
relative, 137
Remy Sharp, 46
required, 264
restore, 129
rgb, 178
RGB, 164
rgba, 178, 181
RGraph, 133, 134, 139
Bar, 134
rodzaj czcionki, 128
role, 108, 109, 110
obszarw, 109
struktury dokumentu, 112
rotate, 164
row, 112
rowheader, 112
Ruby, 239
rysowanie linii, 128

299

S
s, 25
S, 33
Safari, 27, 33, 44, 59, 60, 62, 69, 91,
93, 105, 115, 146, 148, 150, 154,
165, 167, 175, 179, 200, 214, 217,
225, 231, 237, 241, 255
sample, 153
save, 129
Scalable Vector Graphics, 187
screen, 94
screencast, 150
scrolling, 26
search, 110, 113
section, 33, 39, 40, 42, 207
sekcja, 39, 40
selektory, 20
send, 237
serwer gniazdek internetowych, 240
sessionStorage, 194, 195, 202
setData, 258
showLocation, 242, 244
showPlaceholder, 72
sIFR, 185
source, 156
span, 77
spis treci, 112
step, 58
stopka, 37, 38
sekcji, 33
strony, 33
styl, 44
stos czcionek, 189
strike, 25
stroke, 129
struktura dokumentu, 112
strumieniowe przesyanie plikw wideo,
158

300

HTML5 i CSS3. Standardy przyszoci

styl, 42
czcionki, 43
style.css, 42
submit, 237
suwak, 54, 57, 63
SVG, 187
szeroko nagwka, 43

T
table, 26
tablica z wartociami procentowymi, 135
target, 26
tekst w kolumnach, 97
tekst zastpczy, 55, 67
testowanie kodu, 14
text, 26, 56, 61
Theora, 145, 146
time, 55
title, 212
to
kolor, 85
Tony Amoya, 170
transform, 164
transformacje CSS3, 248
transition-timing-function, 250
tre
gwna, 111
wtrcona, 33
TrueType, 187
tryb standardowy, 36
tt, 25
TTF, 187
type, 62
Typekit, 185

U
u, 25
UI, 261
ukrywanie obszarw, 118
ul, 26

uatwienie dla niewidomych, 80

update, 213
updateNote, 212
URL, 60
urzdzenia przenone, 103
usage rights, 185
uzupenianie automatyczne, 68
uytkownik
niesyszcy, 160
niewidomy, 160

V
valign, 26
value, 72
video, 24, 141, 156
visible, 119
vlink, 26
VoiceOver, 108
Vorbis, 148
VP8, 145, 147, 148
vspace, 26

W
W3C Validator, 26
warto naleca do zakresu, 33
wtki robocze, 248, 253
Web Open Font, 187
web sockets, 19
Web Sockets, 193, 233
Web SQL Databases, 193, 194, 205,
219
Web SQL Storage, 204, 220
Web Storage, 193, 194
Web Workers, 253
WebGL, 262
web-socket-js, 238
week, 55
weryfikacja poprawnoci formularzy, 248
WIA-ARIA, 107, 115
width, 26

Skorowidz

wiersz komrek w tabeli, 112

window.localStorage, 198
window.onpopstate, 224, 225
window.open, 50
window.openDatabase, 208
WindowsEyes, 108
WOFF, 187
wsprzdnych GPS, 241
wtrcenie, 40, 112
wykres, 132
wykres supkowy, 137
wymiana komunikatw midzy
dokumentami, 222
wyraenie matematyczne, 112
wyrwnywanie
pionowe tekstu, 128
tekstu w kolumnie, 86
wysyanie komunikatu, 228
wyrodkowanie treci, 43
wywietlenie dodatkowych opcji, 47

X
Xiph.Org Foundation, 146
XMLHttpRequest, 77

Y
YUI, 61

Z
zaokrglanie rogw, 164, 165
zapisywanie danych, 76
zapytania o media, 103
zasada DRY, 78
zawarto strony, 110, 112
znacznik semantyczny, 37, 40
znaczniki
opisowe, 20
samozamykajce, 22
znaczniki uniewanione, 24
zwikszanie dostpnoci witryn, 107


rdo pliku wideo, 156

301