Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00373 006364 14490334 na godz. na dobę w sumie
HTML5 i CSS3. Standardy przyszłości - książka
HTML5 i CSS3. Standardy przyszłości - książka
Autor: Liczba stron: 304
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-3028-8 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> html i xhtml - programowanie
Porównaj ceny (książka, ebook, audiobook).

Kompletny przewodnik po nowej, rewolucyjnej specyfikacji najsłynniejszej technologii internetowej!

Stało się! Choć jeszcze niedawno HTML5 i CSS3 wydawały się technologiami wciąż odległej przyszłości, ich specyfikacje już zostały zaimplementowane w takich przeglądarkach, jak Google Chrome, Safari, Firefox czy Opera. Standardy HTML5 i CSS3, mimo że jeszcze w stadium rozwoju, nie przestają wzbudzać zachwytu administratorów sieci i twórców stron WWW, a ich opublikowanie hucznie zapowiedziało nową generację aplikacji internetowych. Teraz można je łatwiej wdrażać i utrzymywać, a także wyjść naprzeciw potrzebom użytkowników. Mało? Język HTML5 wprowadza także nowe elementy służące do definiowania struktury witryny oraz osadzania w niej treści, a CSS3 udostępnia zaawansowane selektory, rozszerzenia graficzne oraz zapewnia lepszą obsługę czcionek. W świecie internetu, gdzie pod względem rozprzestrzeniania się nowości trzy miesiące to cała epoka, już jutro ta technologia będzie obecna wszędzie. Nie trzeba więc nikogo przekonywać, że aby ten postęp bez zadyszki dogonić, trzeba już dziś... wziąć się za lekturę!

Przed Tobą doskonały podręcznik, w którym przedstawione zostały wszystkie dostępne sposoby korzystania z nowych możliwości standardów HTML5 i CSS3, także tych, które nie są jeszcze obsługiwane przez część przeglądarek. Każdy rozdział skupia się na określonej grupie problemów i zawiera listę niezbędnych znaczników, funkcji lub mechanizmów. Na początek dokładnie poznasz standardy HTML5 i CSS3, nowe atrybuty i znaczniki strukturalne. Przeczytasz co nieco na temat formularzy i odkryjesz, jak wykorzystać niektóre nowe pola i funkcje. Poznasz rewolucje wprowadzone w CSS3 - nowe selektory, cienie, gradienty, transformacje i sposoby korzystania z czcionek. Dowiesz się, jak HTML5 obsługuje dane audio i wideo oraz nauczysz się używać kanw do rysowania rozmaitych kształtów. A potem stworzysz przykładowe aplikacje działające po stronie klienta, a także zobaczysz, jak HTML5 umożliwia przesyłanie komunikatów i danych między domenami.

Jesteś gotowy? Doskonale! Zacznij już dziś poznawać standardy przyszłości!

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

Darmowy fragment publikacji:

Idź do • Spis treści • Przykładowy rozdział • Skorowidz Katalog książek • Katalog online • Zamów drukowany katalog Twój koszyk • Dodaj do koszyka Cennik i informacje • Zamów informacje o nowościach • Zamów cennik Czytelnia • Fragmenty książek online Kontakt Helion SA ul. Kościuszki 1c 44-100 Gliwice tel. 32 230 98 63 e-mail: helion@helion.pl © Helion 1991–2011 HTML5 i CSS3. Standardy przyszłości Autor: Brian P. Hogan Tłumaczenie: Daniel Kaczmarek ISBN: 978-83-246-3028-8 Tytuł oryginału: HTML5 and CSS3: Develop with Tomorrow s Standards Today Format: 158×235, stron: 304 Kompletny przewodnik po nowej, rewolucyjnej specyfikacji najsłynniejszej technologii internetowej! • Opanuj nowe atrybuty, selektory, funkcje formularzy i znaczniki strukturalne • Zobacz, jak osadzać grafikę, pliki audio i wideo bez użycia Flasha • Poznaj niezbędne mechanizmy HTML5 i twórz przyjazne aplikacje, działające po stronie klienta Stało się! Choć jeszcze niedawno HTML5 i CSS3 wydawały się technologiami wciąż odległej przyszłości, ich specyfikacje już zostały zaimplementowane w takich przeglądarkach, jak Google Chrome, Safari, Firefox czy Opera. Standardy HTML5 i CSS3, mimo że jeszcze w stadium rozwoju, nie przestają wzbudzać zachwytu administratorów sieci i twórców stron WWW, a ich opublikowanie hucznie zapowiedziało nową generację aplikacji internetowych. Teraz można je łatwiej wdrażać i utrzymywać, a także wyjść naprzeciw potrzebom użytkowników. Mało? Język HTML5 wprowadza także nowe elementy służące do definiowania struktury witryny oraz osadzania w niej treści, a CSS3 udostępnia zaawansowane selektory, rozszerzenia graficzne oraz zapewnia lepszą obsługę czcionek. W świecie internetu, gdzie pod względem rozprzestrzeniania się nowości trzy miesiące to cała epoka, już jutro ta technologia będzie obecna wszędzie. Nie trzeba więc nikogo przekonywać, że aby ten postęp bez zadyszki dogonić, trzeba już dziś… wziąć się za lekturę! Przed Tobą doskonały podręcznik, w którym przedstawione zostały wszystkie dostępne sposoby korzystania z nowych możliwości standardów HTML5 i CSS3, także tych, które nie są jeszcze obsługiwane przez część przeglądarek. Każdy rozdział skupia się na określonej grupie problemów i zawiera listę niezbędnych znaczników, funkcji lub mechanizmów. Na początek dokładnie poznasz standardy HTML5 i CSS3, nowe atrybuty i znaczniki strukturalne. Przeczytasz co nieco na temat formularzy i odkryjesz, jak wykorzystać niektóre nowe pola i funkcje. Poznasz rewolucje wprowadzone w CSS3 – nowe selektory, cienie, gradienty, transformacje i sposoby korzystania z czcionek. Dowiesz się, jak HTML5 obsługuje dane audio i wideo oraz nauczysz się używać kanw do rysowania rozmaitych kształtów. A potem stworzysz przykładowe aplikacje działające po stronie klienta, a także zobaczysz, jak HTML5 umożliwia przesyłanie komunikatów i danych między domenami. • Wprowadzenie do HTML5 i CSS3 • Nowe atrybuty i znaczniki strukturalne • Tworzenie przyjaznych formularzy internetowych • Tworzenie lepszych interfejsów użytkownika z użyciem CSS3 • Zwiększanie dostępności witryn internetowych • Rysowanie na kanwach • Osadzanie danych audio, wideo oraz grafiki wektorowej • Wykorzystanie cieni, gradientów, transformacji i czcionek • Przetwarzanie danych po stronie klienta • Korzystanie z interfejsów API Jesteś gotowy? Doskonale! Zacznij już dziś poznawać standardy przyszłości! Spis treĂci Przedmowa .......................................................................................... 11 Rozdziaï 1. Ogólne informacje na temat HTML5 i CSS3 ................. 17 1.1. Platforma tworzenia aplikacji internetowych ............................................... 17 1.2. ZgodnoĂÊ wsteczna .................................................................................. 21 1.3. Droga do przyszïoĂci jest wyboista ............................................................. 23 CzÚĂÊ I Ulepszanie interfejsu uĝytkownika Rozdziaï 2. Nowe atrybuty i znaczniki strukturalne ..................... 31 Porada 1. Zmiana definicji bloga przy uĝyciu znaczników semantycznych ........... 34 Porada 2. Tworzenie okien wywoïywanych z atrybutami danych uĝytkownika ..... 47 Rozdziaï 3. Tworzenie przyjaznych formularzy internetowych ..... 53 Porada 3. Opisywanie danych za pomocÈ nowych pól wejĂciowych ...................... 56 Porada 4. Przechodzenie do pierwszego pola formularza przy uĝyciu atrybutu autofocus ........................................................................ 65 Porada 5. WyĂwietlanie wskazówek w postaci tekstu zastÚpczego ......................... 67 Porada 6. Edytowanie danych bezpoĂrednio na stronie przy uĝyciu atrybutu contenteditable ............................................................... 74 6  HTML5 i CSS3. Standardy przyszïoĂci Rozdziaï 4. Tworzenie lepszych interfejsów uĝytkownika z uĝyciem CSS3 ................................................................ 81 Porada 7. Definiowanie stylu tabeli przy uĝyciu pseudoklas ............................... 83 Porada 8. Umieszczanie docelowych adresów ïÈczy przy uĝyciu :after ................ 93 Porada 9. Tworzenie stron z wieloma kolumnami tekstu .................................... 97 Porada 10. Tworzenie interfejsów aplikacji na urzÈdzenia przenoĂne przy uĝyciu zapytañ o media ................................................................... 103 Rozdziaï 5. ZwiÚkszanie dostÚpnoĂci ............................................. 107 Porada 11. Definiowanie wskazówek nawigacji za pomocÈ ról ARIA ................ 109 Porada 12. Tworzenie obszaru o uaktualnianej zawartoĂci dostÚpnego dla programów odczytujÈcych zawartoĂÊ ekranu ......................................... 115 CzÚĂÊ II Nowe widoki i děwiÚki Rozdziaï 6. Rysowanie na kanwach ................................................ 123 Porada 13. Rysowanie logo ............................................................................. 125 Porada 14. Tworzenie wykresów statystyk przy uĝyciu biblioteki RGraph .......... 132 Rozdziaï 7. Osadzanie danych audio i wideo ................................. 141 7.1. Kilka sïów o historii .................................................................................. 143 7.2. Kontenery i kodeki ................................................................................... 145 Porada 15. UdostÚpnianie plików audio .......................................................... 150 Porada 16. Osadzanie plików wideo ................................................................ 154 Rozdziaï 8. RadoĂÊ dla oczu ............................................................. 163 Porada 17. ZaokrÈglanie rogów ...................................................................... 165 Porada 18. Wykorzystanie cieni, gradientów i transformacji ............................... 173 Porada 19. Wykorzystanie wïasnych czcionek ................................................... 184 CzÚĂÊ III Wychodzimy poza HTML5 Rozdziaï 9. Przetwarzanie danych po stronie klienta ................. 193 Porada 20. Zapisywanie preferencji przy uĝyciu obiektu localStorage ................ 197 Porada 21. Przechowywanie danych w relacyjnej bazie danych po stronie klienta ..................................................................................204 Porada 22. Praca w trybie offline ..................................................................... 217 Spis treĂci  7 Rozdziaï 10. Korzystanie z innych interfejsów API ...................... 221 Porada 23. Utrzymywanie historii ................................................................... 223 Porada 24. Komunikowanie siÚ miÚdzy domenami ........................................... 226 Porada 25. Komunikacja przy uĝyciu gniazdek internetowych ........................... 233 Porada 26. Sprawdzanie wïasnej pozycji. Geolokalizacja .................................. 241 Rozdziaï 11. Co bÚdzie dalej? ........................................................... 247 11.1. Transformacje CSS3 ............................................................................. 249 11.2. WÈtki robocze ........................................................................................ 253 11.3. Wbudowana obsïuga mechanizmu „przeciÈgnij i upuĂÊ” ........................... 255 11.4. WebGL ................................................................................................ 262 11.5. Indexed Database API .......................................................................... 263 11.6. Weryfikacja formularza po stronie klienta ................................................. 264 11.7. Caïa naprzód! ........................................................................................ 266 Dodatki Dodatek A Skrócony przeglÈd funkcji ............................................ 269 A.1. Nowe elementy ....................................................................................... 269 A.2. Atrybuty ................................................................................................. 270 A.3. Formularze ............................................................................................. 270 A.4. Atrybuty pól formularzy .......................................................................... 271 A.5. DostÚpnoĂÊ ............................................................................................. 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, które sïuĝÈ do zmieniania zawartoĂci ........................................... 279 B.4. Tworzenie elementów .............................................................................. 282 B.5. Zdarzenia ............................................................................................... 282 B.6. Funkcja document.ready .......................................................................... 283 8  HTML5 i CSS3. Standardy przyszïoĂci 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 dostÚpne w internecie .................................................................. 289 Dodatek E Bibliografia ..................................................................... 291 Skorowidz .......................................................................................... 293 Rozdziaï 3. Tworzenie przyjaznych formularzy internetowych J eĝeli kiedykolwiek tworzyïeĂ skomplikowany interfejs uĝytkownika, na pewno wiesz, jak bardzo ograniczone jest dziaïanie podstawowych kontrolek formularzy HTML. Programista jest ograniczony jedynie do pól tekstowych, menu wyboru, przycisków opcji, pól wyboru i czasami korzysta teĝ z jeszcze bardziej prymitywnych list wielokrotnego wyboru, których sposób wykorzystania trzeba uĝytkownikom nieustannie tïumaczyÊ („NaciĂnij klawisz Ctrl i klikaj myszÈ pozycje, które chcesz zaznaczyÊ, a na komputerze Mac zamiast klawisza Ctrl trzymaj wciĂniÚty klawisz Cmd”). W takiej sytuacji robi siÚ to, co robiÈ wszyscy dobrzy programiĂci — ko- rzysta siÚ z biblioteki Prototype albo jQuery bÈdě teĝ implementuje siÚ wïasne kontrolki i funkcje przy uĝyciu HTML, CSS i JavaScript. Jednak gdy spojrzy siÚ potem na formularz, który skïada siÚ z suwaków, kontrolek kalendarza, pokrÚteï, pól uzupeïnianych automatycznie i wizualnych edyto- rów, szybko dochodzi siÚ do wniosku, ĝe jego utrzymanie bÚdzie koszma- rem. Trzeba bÚdzie bowiem zapewniÊ, ĝe kontrolki umieszczane na stro- nie nie bÚdÈ popadaÊ w konflikt z innymi kontrolkami na niej obecnymi 54  HTML5 i CSS3. Standardy przyszïoĂci ani z ĝadnÈ bibliotekÈ kodu JavaScript uĝywanÈ na stronie. Moĝna spÚ- dziÊ dïugie godziny na implementowaniu kontrolki kalendarza, a na ko- niec dowiedzieÊ siÚ, ĝe w bibliotece Prototype wystÚpuje teraz problem wynikajÈcy z przejÚcia funkcji $() przez bibliotekÚ jQuery. Pierwszym pomysïem jest wtedy uĝycie metody noConflict(), lecz od razu okazuje siÚ z kolei, ĝe kontrolka wyboru koloru przestaïa dziaïaÊ, poniewaĝ obsïugujÈca jÈ wtyczka nie zostaïa prawidïowo zaimplementowana. JeĂli siÚ teraz uĂmiechasz, to znak, ĝe juĝ przez to przechodziïeĂ. JeĂli siÚ wĂciekasz, przyczyna jest pewnie ta sama. Jest jednak dla nas nadzieja. W tym rozdziale utworzymy kilka formularzy internetowych, które bÚdÈ zawieraÊ nowe pola formularzy. Zaimplementujemy takĝe mechanizm autofokusu i tekst zastÚpczy. Na koniec natomiast pokaĝÚ, jak uĝywa siÚ nowego atrybutu contenteditable, aby za jego pomocÈ zmieniÊ dowolne pole HTML w kontrolkÚ na dane wejĂciowe. W niniejszym rozdziale opisane zostanÈ nastÚpujÈce rozwiÈzania1: Pole adresu poczty elektronicznej [ input type= email ] WyĂwietla pole formularza do wpisywania adresów poczty elektro- nicznej. [O10.1, IOS] Pole adresu URL [ input type= url ] WyĂwietla pole formularza do wpisywania adresów URL. [O10.1, IOS] Pole numeru telefonu [ input type= tel ] WyĂwietla pole formularza do wpisywania numerów telefonów. [O10.1, IOS] Pole wyszukiwania [ input type= search ] WyĂwietla pole formularza do wpisywania poszukiwanych sïów klu- czowych. [C5, S4, O10.1, IOS] Suwak [ input type= range ] WyĂwietla kontrolkÚ suwaka. [C5, S4, O10.1] 1 W opisach przedstawionych poniĝej wskazano zakres obsïugi poszczególnych elementów przy uĝyciu skrótów umieszczonych w nawiasach kwadratowych. Poszczególne skróty oznaczajÈ: C — Google Chrome; F — Firefox; IE — Internet Explorer; O — Opera; S — Safari; IOS — urzÈdzenia iOS z prze- glÈdarkÈ Mobile Safari; A — przeglÈdarka Android. Rozdziaï 3. • Tworzenie przyjaznych formularzy internetowych  55 Liczba [ input type= number ] WyĂwietla pole formularza przeznaczone do wpisywania liczb, czÚ- sto w postaci kontrolki pokrÚtïa. [C5, S5, O10.1, IOS] Pole daty [ input type= date ] WyĂwietla pole formularza do wpisywania dat. Obsïuguje nastÚpu- jÈce typy: date, month oraz week. [C5, S5, O10.1] Daty wraz z godzinami WyĂwietla pole formularza do wpisywania dat wraz z godzinami. Obsïuguje nastÚpujÈce typy: datetime, datetime-local, time. [C5, S5, O10.1] Kolor [ input type= color ] WyĂwietla pole formularza do wskazywania kolorów. [C5, S5] (Chrome 5 i Safari 5 rozpoznajÈ pole color, lecz nie wyĂwietlajÈ ĝadnego konkretnego koloru). Obsïuga autofokusu [ input type= text autofocus ] Obsïuga mechanizmu ustawiania fokusu na konkretnym elemencie formularza. [C5, S4] Obsïuga tekstów zastÚpczych [ input type= email placeholder= ja@przyklad. com ] Obsïuga mechanizmu wyĂwietlania tekstu zastÚpczego w polu for- mularza. [C5, S4, F4] Obsïuga edycji wewnÈtrz strony [ p contenteditable lorem ipsum /p ] Obsïuga mechanizmu edytowania danych z poziomu przeglÈdarki. [C4, S3.2, IE6, O10.1] Najpierw poznamy najbardziej przydatne typy pól formularza. 56  HTML5 i CSS3. Standardy przyszïoĂci Porada 3. Opisywanie danych za pomocÈ nowych pól wejĂciowych W HTML5 wprowadzono kilka nowych typów pól wejĂciowych, za po- mocÈ których moĝna bardziej precyzyjnie opisaÊ dane wejĂciowe wpisy- wane przez uĝytkowników. Oprócz standardowych pól tekstowych, przy- cisków opcji i pól wyboru moĝna definiowaÊ nowe elementy, takie jak pola na adresy poczty elektronicznej, kalendarze, kontrolki wyboru koloru, pokrÚtïa i suwaki. Na podstawie tak zdefiniowanych pól przeglÈdarki mogÈ udostÚpniaÊ uĝytkownikom lepsze kontrolki bez koniecznoĂci wykonywa- nia kodu jÚzyka JavaScript. W urzÈdzeniach przenoĂnych oraz w wir- tualnych klawiaturach dla tabletów i ekranów dotykowych na podstawie typów pól moĝna wyĂwietlaÊ klawiatury w róĝnych ukïadach. Na przykïad przeglÈdarka Mobile Safari obecna w iPhonie odpowiednio dostosowuje ukïad klawiatury, gdy uĝytkownik wpisuje dane w polach typu URL i email. W wyĂwietlanym wówczas ukïadzie klawiatury ïatwiej dostÚpne stajÈ siÚ klawisze takie jak i . , , Ulepszenie formularza na stronie firmy Peïen Wypas S.A. Firma Peïen Wypas S.A. opracowuje nowÈ aplikacjÚ internetowÈ do za- rzÈdzania projektami. Witryna ma za zadanie uïatwiÊ programistom i menedĝerom monitorowanie postÚpów prac przy licznych projektach, które sÈ realizowane w firmie. Dla kaĝdego projektu definiuje siÚ nazwÚ, adres poczty elektronicznej osoby kontaktowej oraz roboczy adres URL strony, na której moĝna ĂledziÊ postÚp w rozwoju witryny. Dodatkowo na stronie znajdujÈ siÚ pola na datÚ poczÈtku projektu, jego priorytet i szaco- wanÈ liczbÚ godzin roboczych, które trzeba poĂwiÚciÊ na prace projektowe. Menedĝer projektu powinien mieÊ równieĝ moĝliwoĂÊ przypisywania pro- jektowi okreĂlonego koloru, który pozwoli mu szybko identyfikowaÊ po- szczególne projekty na raportach. W nastÚpnym punkcie opracujemy szablon strony do definiowania prefe- rencji uĝytkownika. Strona bÚdzie zawieraÊ nowe pola HTML5. Projekt prostego formularza Najpierw utworzymy prosty formularz HTML, który bÚdzie przesyïany metodÈ POST. Poniewaĝ pole, w którym wpisuje siÚ nazwÚ projektu, nie musi posiadaÊ ĝadnych szczególnych cech, stworzymy je na podstawie standar- dowego 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= WyĂlij /li /ol /fieldset /form ZwróÊmy uwagÚ, ĝe kontrolki formularza sÈ opisywane przy uĝyciu etykiet wchodzÈcych w skïad listy uporzÈdkowanej. Etykiety majÈ kluczowe zna- czenie, gdy tworzy siÚ przyjazne formularze. Atrybut for etykiety odwoïuje siÚ do identyfikatora id powiÈzanego z niÈ elementu formularza. DziÚki temu rozwiÈzaniu programy odczytujÈce zawartoĂÊ ekranu mogÈ zidenty- fikowaÊ pola obecne na stronie. Lista uporzÈdkowana pozwala uïoĝyÊ pola bez koniecznoĂci definiowania skomplikowanej tabeli ani struktur div. JednoczeĂnie za pomocÈ listy moĝna wyznaczyÊ kolejnoĂÊ, w której uĝyt- kownicy powinni wypeïniaÊ kolejne pola formularza. Tworzenie suwaka dla zakresu wartoĂci Suwaki wykorzystuje siÚ po to, by umoĝliwiÊ uĝytkownikom zmniejszanie lub zwiÚkszanie wartoĂci liczbowej. Za pomocÈ tej kontrolki umoĝliwimy menedĝerom 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 naleĝy dodaÊ do formularza wewnÈtrz elementu li, tak samo jak poprzednio zdefiniowane pole nazwy projektu. Zarówno Chrome, jak i Opera obsïugujÈ kontrolkÚ suwaka, która pre- zentuje siÚ w sposób widoczny na rysunku 3.1. 58  HTML5 i CSS3. Standardy przyszïoĂci Rysunek 3.1. Kontrolka suwaka wyĂwietlona w przeglÈdarce Chrome Jak widaÊ w definicji suwaka, zdefiniowano dla niego równieĝ wartoĂci min i max reprezentowanego zakresu. W ten sposób ograniczyliĂmy zakres wartoĂci, jakie moĝna wybraÊ przy uĝyciu kontrolki. Obsïuga liczb za pomocÈ pola pokrÚtïa W formularzach czÚsto trzeba podawaÊ liczby. Wprawdzie wpisywanie liczb nie jest niczym trudnym, jednak czynnoĂÊ tÚ moĝna jeszcze nieco uïatwiÊ. Pole pokrÚtïa to kontrolka z przyciskami strzaïek, które zwiÚk- szajÈ lub zmniejszajÈ wartoĂÊ widocznÈ w polu tekstowym. Pola pokrÚtïa uĝyjemy do wpisywania szacowanej liczby godzin do przepracowania przy projekcie. W ten sposób ïatwo bÚdzie 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 pokrÚtïa jest obsïugiwane przez przeglÈdarki Opera i Chrome. WyglÈd pola pokrÚtïa w przeglÈdarce Opera przedstawiono na rysunku 3.2. Rysunek 3.2. Pole pokrÚtïa wyĂwietlone w przeglÈdarce Opera W polu pokrÚtïa domyĂlnie moĝna takĝe wpisywaÊ liczby z klawiatury. Ponadto podobnie jak dla suwaków, dla pola pokrÚtïa moĝna definiowaÊ wartoĂci minimalnÈ i maksymalnÈ. Jednak wartoĂÊ minimalna i maksymal- na nie bÚdzie brana pod uwagÚ, jeĝeli wartoĂÊ zostanie wpisana w polu z klawiatury. Warto zaznaczyÊ, ĝe za pomocÈ parametru step moĝna zdefiniowaÊ po- stÚp wartoĂci w polu — wartoĂÊ parametru wskazuje, o ile ma siÚ jednora- zowo zmieniÊ wartoĂÊ obecna w polu. DomyĂlnie postÚp ma wartoĂÊ 1, lecz moĝna mu przypisaÊ dowolnÈ innÈ wartoĂÊ liczbowÈ. Rozdziaï 3. • Tworzenie przyjaznych formularzy internetowych  59 Daty IstotnÈ sprawÈ jest wskazanie daty rozpoczÚcia projektu. Chcemy, by byïo to jak najprostsze. Doskonale do tego celu nadaje siÚ pole typu date. html5_formularze/index.html label for= start_date Data rozpoczÚcia /label input type= date name= start_date id= start_date value= 2010-12-01 W trakcie powstawania tej ksiÈĝki jedynÈ przeglÈdarkÈ, która w peïni obsïugiwaïa kontrolkÚ kalendarza, byïa przeglÈdarka Opera. Na rysunku 3.3 przedstawiono przykïadowÈ implementacjÚ kontrolki ka- lendarza w przeglÈdarce Opera. Rysunek 3.3. Kontrolka kalendarza wyĂwietlona w przeglÈdarce Opera PrzeglÈdarka Safari 5.0 wyĂwietla zamiast kontrolki kalendarza pole po- dobne do pola typu number, z przyciskami ze strzaïkami, za pomocÈ któ- rych moĝna ustawiaÊ datÚ. Jeĝeli pole jest puste, przyjmowana jest do- myĂlna wartoĂÊ „1582”. Pozostaïe przeglÈdarki zamiast kontrolki kalen- darza wyĂwietlajÈ zwykïe pole tekstowe. Adres poczty elektronicznej Specyfikacja HTML5 stanowi, ĝe pole wejĂciowe typu email jest prze- znaczone do wpisywania jednego adresu poczty elektronicznej lub listy takich adresów. Pole to posïuĝy nam zatem do wpisywania w formularzu adresu poczty elektronicznej osoby kontaktowej. 60  HTML5 i CSS3. Standardy przyszïoĂci html5_formularze/index.html label for= email Email osoby kontaktowej /label input type= email name= email id= email NajwiÚkszÈ korzyĂÊ z zastosowania pola typu email uzyskuje siÚ na urzÈ- dzeniach przenoĂnych, w których ukïad wirtualnej klawiatury zmienia siÚ tak, aby ïatwiej dostÚpne byïy klawisze ze znakami niezbÚdnymi do wpi- sania adresu poczty elektronicznej. Adres URL DostÚpne jest takĝe pole specjalnie przystosowane do wpisywania adresów URL. Sprawdza siÚ ono zwïaszcza wówczas, gdy uĝytkownik wywoïujÈcy stronÚ korzysta z iPhone’a, poniewaĝ urzÈdzenie zmienia wówczas ukïad klawiatury na taki, w którym znajdujÈ siÚ przyciski uïatwiajÈce szybkie wpisywanie adresów internetowych. Jest to rozwiÈzanie podobne do kla- wiatury wyĂwietlanej w trakcie wpisywania adresu URL w pasku adresów w przeglÈdarce Mobile Safari. W celu umieszczenia na formularzu pola na adres URL wystarczy uĝyÊ nastÚpujÈcej definicji: html5_formularze/index.html label for= url Adres URL /label input type= url name= url id= url Równieĝ wirtualne klawiatury zmieniajÈ swój ukïad zaleĝnie od typu pola wejĂciowego. Kolory W ostatnim polu formularza naleĝy podaÊ kolor dla projektu. Posïuĝy 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 ksiÈĝki ĝadna przeglÈdarka nie obsïugiwaïa pola wejĂciowego typu color, jednak nie jest to powód, by w ogóle z niego re- zygnowaÊ. Odpowiedni znacznik precyzyjnie opisuje przeznaczenie pola, co przyda siÚ w przyszïoĂci, zwïaszcza gdy zajdzie potrzeba opracowania rozwiÈzania zastÚpczego. Obecnie wiÚkszoĂÊ z przedstawionych nowych kontrolek jest obsïugiwana przez przeglÈdarkÚ Opera, co widaÊ na rysunku 3.4. Jednak gdy tÚ samÈ stronÚ otworzy siÚ w przeglÈdarce Firefox, Safari albo Google Chrome, bÚdzie widaÊ tylko niewielkie róĝnice. I te wïaĂnie róĝnice trzeba bÚdzie wyeliminowaÊ. Rozdziaï 3. • Tworzenie przyjaznych formularzy internetowych  61 Rysunek 3.4. Niektóre kontrolki formularza sÈ juĝ obsïugiwane przez przeglÈdarkÚ Opera RozwiÈzanie zastÚpcze PrzeglÈdarki, które nie potrafiÈ rozpoznaÊ pól wejĂciowych nowych typów, prezentujÈ je jako pola typu text. Formularz bÚdzie wiÚc nadal zdatny do uĝycia. Na chwilÚ obecnÈ do takich pól moĝna podpinaÊ widĝety interfej- su uĝytkownika z biblioteki jQuery UI albo YUI, które odpowiednio takie pole przeksztaïcÈ. W miarÚ upïywu czasu coraz wiÚcej przeglÈdarek bÚdzie obsïugiwaÊ pola nowych typów, wiÚc bÚdzie moĝna stopniowo usuwaÊ za- stÚpcze rozwiÈzania oparte na kodzie JavaScript. ZastÈpienie kontrolki do wskazywania koloru KontrolkÚ do wskazywania koloru moĝna bez trudu zastÈpiÊ przy uĝyciu biblioteki jQuery oraz selektorów atrybutów obecnych w CSS3. Wystar- czy 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 przyszïoĂci Poniewaĝ w kodzie znaczników uĝyto nowych typów dla pól formularzy, nie trzeba definiowaÊ dodatkowych nazw klas ani innych znaczników, które identyfikowaïyby kontrolkÚ do wskazywania koloru. Selektory atry- butów i HTML5 w zupeïnoĂci wystarczÈ. Jeĝeli przeglÈdarka obsïuguje kontrolkÚ nowego typu, nie ma potrzeby korzystania z pluginu. Naleĝy wiÚc przy uĝyciu kodu JavaScript sprawdziÊ, czy przeglÈdarka obsïuguje pola wejĂciowe z atrybutem type o wartoĂci color. html5_formularze/index.html 1 function hasColorSupport(){ 2 input = document.createElement( input ); 3 input.setAttribute( type , color ); 4 var hasColorType = (input.type !== text ); 5 // obsïuga czÚĂciowej implementacji Safari/Chrome 6 if(hasColorType){ 7 var testString = foo ; 8 input.value=testString; 9 hasColorType = (input.value != testString); 10 } 11 return(hasColorType); 12 } Najpierw w kodzie JavaScript tworzony jest nowy element, a jego atrybu- towi type przypisywana jest wartoĂÊ color. NastÚpnie odczytujemy atrybut type, aby sprawdziÊ, czy przeglÈdarka pozwoliïa przypisaÊ mu potrzebnÈ nam wartoĂÊ. Jeĝeli odczytanÈ wartoĂciÈ atrybutu type jest color, oznacza to, ĝe przeglÈdarka prawidïowo obsïuguje kontrolkÚ do wskazywania kolo- ru. Jeĝeli wartoĂÊ atrybutu jest inna, wówczas trzeba uĝyÊ pluginu. Ciekawie przedstawia siÚ zwïaszcza szósty wiersz przedstawionego kodu. Safari 5 i Google Chrome 5 czÚĂciowo obsïugujÈ juĝ typ color. MówiÈc bardziej precyzyjnie, przeglÈdarki obsïugujÈ pola tego typu, lecz nie wy- ĂwietlajÈ wïaĂciwej kontrolki do wskazywania koloru, a zamiast niej umieszczajÈ na formularzu standardowe pole tekstowe. Dlatego w meto- dzie, która sprawdza, czy kontrolka jest obsïugiwana, przypisujemy war- toĂÊ polu wejĂciowemu, a nastÚpnie sprawdzamy, czy wartoĂÊ ta zostaje zapamiÚtana. Jeĝeli wartoĂÊ nie zostanie zapamiÚtana, jest to znak, ĝe przeglÈdarka w peïni obsïuguje kontrolkÚ do wskazywania koloru, ponie- waĝ pole wejĂciowe nie zachowuje siÚ jak standardowe pole tekstowe. Kod, który zastÚpuje kontrolkÚ do wskazywania koloru widĝetem, przed- stawia siÚ nastÚpujÈco: html5_formularze/index.html if (!hasColorSupport()){ $( input[type=color] ).simpleColor(); } Rozdziaï 3. • Tworzenie przyjaznych formularzy internetowych  63 Tak skonstruowane rozwiÈzanie dziaïa, lecz jest doĂÊ ograniczone. Jest ono przeznaczone tylko dla niektórych przeglÈdarek i rozwiÈzuje problem jedynie z kontrolkÈ do wskazywania koloru. Z innymi kontrolkami wiÈĝÈ siÚ inne problemy, o których warto wiedzieÊ. Na szczÚĂcie istnieje rozwiÈ- zanie alternatywne. Modernizr Biblioteka Modernizr2 potrafi rozpoznawaÊ, czy dostÚpna jest obsïuga wiÚkszoĂci funkcji obecnych w HTML5 i CSS3. Jeĝeli przeglÈdarka nie obsïuguje danej funkcji, biblioteka jej w tym nie zastÚpuje, lecz udostÚpnia szereg rozwiÈzañ podobnych do zaimplementowanego przez nas w po- przednim punkcie rozwiÈzania rozpoznajÈcego pola formularza. Co wiÚ- cej, rozwiÈzania dostÚpne w bibliotece Modernizr sÈ znacznie bardziej niezawodne. Zanim zaczniemy wykorzystywaÊ Modernizr we wïasnych projektach, naleĝy najpierw poĂwiÚciÊ trochÚ czasu na zrozumienie, jak biblioteka dziaïa. Programista jest bowiem odpowiedzialny za kod uĝyty w projekcie bez wzglÚdu na to, czy jest jego autorem, czy nie. Modernizr nie potrafi jesz- cze rozpoznawaÊ czÚĂciowej obsïugi pola do wskazywania koloru, obecnej w przeglÈdarce Safari. Gdy udostÚpniona zostanie nowa wersja przeglÈdarki Chrome lub Firefox, byÊ moĝe trzeba bÚdzie samodzielnie opracowaÊ nowe rozwiÈzanie. Kto wie, moĝe Twoje rozwiÈzanie stanie siÚ czÚĂciÈ bi- blioteki Modernizr? RozwiÈzania zastÚpcze dla kontrolek takich jak kontrolki kalendarza oraz suwaki implementuje siÚ w podobny sposób. Suwaki i kontrolki kalenda- rza to komponenty dostÚpne w bibliotece jQuery UI3. BibliotekÚ jQuery UI naleĝy doïÈczyÊ do strony, sprawdziÊ, czy przeglÈdarka sama obsïu- guje wybranÈ kontrolkÚ, a jeĝeli tej obsïugi brakuje, uĝyÊ implementacji analogicznej kontrolki w jÚzyku JavaScript. Za jakiĂ czas bÚdzie moĝna caïkowicie zrezygnowaÊ z kontrolek JavaScript i korzystaÊ wyïÈcznie z mechanizmów zaimplementowanych w przeglÈdar- kach. Biblioteka Modernizr jest o tyle pomocna, ĝe zdejmuje z programi- sty obowiÈzek tworzenia kodu rozpoznajÈcego obsïugÚ poszczególnych typów kontrolek, który zwykle jest doĂÊ skomplikowany. Tym niemniej 2 http://www.modernizr.com/ 3 http://jqueryui.com/ 64  HTML5 i CSS3. Standardy przyszïoĂci w dalszej czÚĂci ksiÈĝki nadal bÚdziemy implementowaÊ kod rozpoznajÈcy obecnoĂÊ poszczególnych funkcji w przeglÈdarce, aby pokazaÊ istotÚ jego dziaïania. Oprócz nowych typów pól formularza HTML5 definiuje kilka nowych atrybutów pól formularzy, które zwiÚkszajÈ ich uĝytecznoĂÊ. W nastÚpnym punkcie omówiÚ atrybut autofocus. Rozdziaï 3. • Tworzenie przyjaznych formularzy internetowych  65 Porada 4. Przechodzenie do pierwszego pola formularza przy uĝyciu atrybutu autofocus CzynnoĂÊ wypeïniania formularza moĝna znacznie przyspieszyÊ, gdy w momencie ïadowania strony umieĂci siÚ kursor w pierwszym polu for- mularza. W wielu wyszukiwarkach internetowych dokonuje siÚ tego za pomocÈ odpowiedniego kodu JavaScript. Obecnie natomiast HTML5 udostÚpnia podobnÈ funkcjÚ jako element jÚzyka. Caïe rozwiÈzanie sprowadza siÚ do tego, by do wybranego pola formula- rza dodaÊ atrybut autofocus w taki sam sposób, jak zrobiliĂmy to juĝ na stronie profilu utworzonej w poradzie „Opisywanie danych za pomocÈ nowych pól wejĂciowych” na stronie 56. html5_formularze/index.html label for= name Nazwa /label input type= text name= name autofocus id= name Aby atrybut autofocus dziaïaï poprawnie, powinien wystÚpowaÊ tylko jeden raz na stronie. Jeĝeli atrybut wystÈpi wiÚcej niĝ jeden raz, przeglÈdarka umieĂci kursor w ostatnim polu z tym atrybutem. RozwiÈzanie zastÚpcze Jeĝeli przeglÈdarka uĝytkownika nie obsïuguje atrybutu autofocus, moĝna ten fakt rozpoznaÊ za pomocÈ odpowiednio sformuïowanego kodu JavaScript. NastÚpnie naleĝy uĝyÊ biblioteki jQuery i umieĂciÊ kursor w odpowiednim polu formularza. Jest to najprawdopodobniej najprostsze rozwiÈzanie za- stÚpcze, które znajduje siÚ w ksiÈĝce. 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 przyszïoĂci Wystarczy umieĂciÊ zaprezentowany kod JavaScript na stronie, aby uzy- skaÊ odpowiedniÈ obsïugÚ atrybutu autofocus. Autofokus uïatwia uĝytkownikom wypeïnianie formularza. Jeszcze wiÚk- szym uïatwieniem bÚdzie jednak udostÚpnienie informacji na temat tego, jakich konkretnie danych oczekujemy w poszczególnych polach formularza. Dlatego w nastÚpnym punkcie zajmiemy siÚ atrybutem placeholder. Rozdziaï 3. • Tworzenie przyjaznych formularzy internetowych  67 Porada 5. WyĂwietlanie wskazówek w postaci tekstu zastÚpczego Tekst zastÚpczy stanowi wskazówkÚ dla uĝytkownika, która mówi, jakie dane naleĝy wpisywaÊ w poszczególnych polach. Na rysunku 3.5 przed- stawiono formularz do tworzenia nowego konta, w którym zastosowano tekst zastÚpczy. Formularz ten zdefiniujemy w nastÚpnym punkcie. Rysunek 3.5. Teksty zastÚpcze wskazujÈ uĝytkownikowi, jakie dane powinien wpisaÊ w poszczególnych polach Formularz zakïadania nowego konta Na stronie firmy Peïen Wypas S.A. uĝytkownik musi najpierw zaïoĝyÊ nowe konto. Powaĝnym problemem, który zawsze pojawia siÚ w takim przypadku, jest to, ĝe uĝytkownicy podajÈ hasïa ïatwe do odgadniÚcia. Dlatego uĝyjemy tekstu zastÚpczego, aby wskazaÊ uĝytkownikowi wyma- gania co do postaci hasïa. Dla zachowania spójnoĂci tekst zastÚpczy umie- Ăcimy takĝe w pozostaïych polach tekstowych. Aby umieĂciÊ w polu formularza tekst zastÚpczy, wystarczy do kaĝdego takiego pola dodaÊ atrybut placeholder w nastÚpujÈcy sposób: html5_tekstzastepczy/index.html input id= email type= email name= email placeholder= uĝytkownik@przyklad.com 68  HTML5 i CSS3. Standardy przyszïoĂci Kod znaczników caïego formularza przedstawiono na poniĝszym listingu. W kaĝdym polu formularza umieszczono tekst zastÚpczy. 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= uĝytkownik@przyklad.com /li li label for= password Hasïo /label input id= password type= password name= password value= autocomplete= off placeholder= 8-10 znaków / /li li label for= password_confirmation Potwierdě hasïo /label input id= password_confirmation type= password name= password_confirmation value= autocomplete= off placeholder= Ponownie wpisz hasïo / /li li input type= submit value= Zaïóĝ konto /li /ol /fieldset /form WyïÈczanie automatycznego uzupeïniania Nietrudno zauwaĝyÊ, ĝe do pól formularza, w których wpisuje siÚ hasïo, dodano atrybut autocomplete. Atrybut ten jest nowoĂciÈ w HTML5 i wska- zuje on przeglÈdarkom, ĝe nie powinny automatycznie wypeïniaÊ tego pola danymi. Niektóre przeglÈdarki pamiÚtajÈ bowiem dane wpisane w przeszïo- Ăci przez uĝytkownika, a w niektórych sytuacjach poĝÈdane jest, by prze- glÈdarki nie wstawiaïy ponownie tych samych danych. Rozdziaï 3. • Tworzenie przyjaznych formularzy internetowych  69 Poniewaĝ równieĝ w tym formularzu pola sÈ zdefiniowane w ramach listy uporzÈdkowanej, moĝna dodaÊ kaskadowy arkusz stylów, aby nadaÊ stro- nie bardziej przyjazny wyglÈd. 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 wejĂciowe majÈ znajdowaÊ siÚ w oddzielnych wierszach */ fieldset input{ display:block; } DziÚki takiemu rozwiÈzaniu uĝytkownicy przeglÈdarek Safari, Opera i Chrome bÚdÈ widzieÊ wskazówki w postaci tekstu zastÚpczego widocz- nego w polach wejĂciowych. Pozostaïo nam tylko opracowaÊ rozwiÈzanie zastÚpcze, które da ten sam efekt w przeglÈdarkach Firefox i Internet Explorer. RozwiÈzanie zastÚpcze Za pomocÈ krótkiego kodu jÚzyka JavaScript w polach formularzy moĝna umieszczaÊ teksty zastÚpcze. W tym celu naleĝy sprawdziÊ zawartoĂÊ kaĝ- dego pola formularza, a jeĝeli jest ono puste, trzeba przypisaÊ mu tekst zastÚpczy. Gdy w polu formularza zostanie umieszczony kursor, tekst zastÚpczy siÚ usuwa, a gdy kursor zostanie przeniesiony do innego pola, ponownie naleĝy sprawdziÊ jego zawartoĂÊ. Jeĝeli zawartoĂÊ pola jest inna niĝ tekst zastÚpczy, pozostawia siÚ jÈ bez zmian. Jeĝeli natomiast pole jest puste, wstawia siÚ w nim tekst zastÚpczy. Aby sprawdziÊ, czy przeglÈdarka obsïuguje tekst zastÚpczy, naleĝy wyko- rzystaÊ rozwiÈzanie podobne do tego, za pomocÈ którego sprawdzaliĂmy obsïugÚ autofokusu. 70  HTML5 i CSS3. Standardy przyszïoĂci html5_tekstzastepczy/index.html function hasPlaceholderSupport() { var i = document.createElement( input ); return placeholder in i; } Teraz pozostaje juĝ tylko napisaÊ kod JavaScript, który bÚdzie obsïugiwaï zmiany tekstu. Do tego celu wykorzystamy rozwiÈzanie, które opracowaï Andrew January4 wraz z zespoïem. Za pomocÈ skryptu wszystkie pola formularza bÚdziemy wypeïniaÊ tekstem zastÚpczym przechowywanym w atrybucie placeholder. Gdy uĝytkownik umieĂci kursor w polu, umiesz- czony w nim tekst zostanie usuniÚty. CaïoĂÊ kodu zaimplementujemy w postaci pluginu biblioteki jQuery, aby ïatwo byïo go wykorzystaÊ w for- mularzu. WiÚcej informacji na temat sposobu dziaïania pluginów znajduje siÚ w ramce na stronie 72. html5_tekstzastepczy/jquery.placeholder.js 1 (function($){ 2 3 $.fn.placeholder = function(){ 4 5 function valueIsPlaceholder(input){ 6 return ($(input).val() == $(input).attr( placeholder )); 7 } 8 return this.each(function() { 9 10 $(this).find( :input ).each(function(){ 11 12 if($(this).attr( type ) == password ){ 13 14 var new_field = $( input type= text ); 15 new_field.attr( rel , $(this).attr( id )); 16 new_field.attr( value , $(this).attr( placeholder )); 17 $(this).parent().append(new_field); 18 new_field.hide(); 19 20 function showPasswordPlaceHolder(input){ 21 if( $(input).val() == || valueIsPlaceholder(input) ){ 22 $(input).hide(); 23 $( input[rel= + $(input).attr( id ) + ] ).show(); 24 }; 25 }; 4 Skrypt w oryginalnej postaci jest dostÚpny na stronie pod adresem http://www. morethannothing.co.uk/wp-content/uploads/2010/01/placeholder.js. Skrypt ten nie obsïuguje jednak pól haseï w Internet Explorerze. Rozdziaï 3. • Tworzenie przyjaznych formularzy internetowych  71 26 27 new_field.focus(function(){ 28 $(this).hide(); 29 $( input# + $(this).attr( rel )).show().focus(); 30 }); 31 32 $(this).blur(function(){ 33 showPasswordPlaceHolder(this, false); 34 }); 35 36 showPasswordPlaceHolder(this); 37 38 }else{ 39 40 // ZastÈpienie wartoĂci tekstem zastÚpczym. 41 // Opcjonalny parametr reload pozwala na zapisywanie wartoĂci pól 42 // w pamiÚci podrÚcznej przez FF i IE. 43 function showPlaceholder(input, reload){ 44 if( $(input).val() == || 45 ( reload valueIsPlaceholder(input) ) ){ 46 $(input).val($(input).attr( placeholder )); 47 } 48 }; 49 50 $(this).focus(function(){ 51 if($(this).val() == $(this).attr( placeholder )){ 52 $(this).val( ); 53 }; 54 }); 55 56 $(this).blur(function(){ 57 showPlaceholder($(this), false) 58 }); 59 60 61 showPlaceholder(this, true); 62 }; 63 }); 64 65 // Zapobiega wysïaniu formularza z wartoĂciami domyĂlnymi 66 $(this).submit(function(){ 67 $(this).find( :input ).each(function(){ 68 if($(this).val() == $(this).attr( placeholder )){ 69 $(this).val( ); 70 } 71 }); 72 }); 73 74 }); 75 }; 76 77 })(jQuery); 72  HTML5 i CSS3. Standardy przyszïoĂci W przedstawionym kodzie ěródïowym pluginu znajduje siÚ kilka intere- sujÈcych rozwiÈzañ, na które warto zwróciÊ uwagÚ. W wierszu 45. tekst zastÚpczy zostaje umieszczony w polu, jeĝeli nie ma ono ĝadnej wartoĂci, ale równieĝ wówczas, gdy nastÈpiïo ponowne zaïadowanie strony. Firefox i inne przeglÈdarki zachowujÈ wartoĂci obecne w polach formularza. Skrypt przypisuje atrybutowi value pól teksty zastÚpcze, poniewaĝ nie chcemy, by pozostaïa w nim wartoĂÊ wczeĂniej wpisana przez uĝytkownika. W mo- mencie ïadowania strony do metody showPlaceholder() przekazujemy war- toĂÊ true, co widaÊ w wierszu 61. Pluginy jQuery BibliotekÚ jQuery moĝna rozszerzaÊ przez implementowanie wïasnych pluginów. Gdy zaimplementowanÈ samodzielnie metodÚ doda siÚ do funkcji jQuery, plugin stanie siÚ automatycznie dostÚpny dla in- nych programistów, którzy doïÈczÈ do swojego kodu tak rozsze- rzonÈ bibliotekÚ. Oto najprostszy przykïad, który powoduje wyĂwie- tlenie okna komunikatu JavaScript: jQuery.fn.debug = function() { return this.each(function(){ alert(this.html()); }); Aby wyĂwietliÊ okno dla kaĝdego akapitu na stronie, wystarczy wywoïaÊ funkcjÚ w nastÚpujÈcy sposób: $( p ).debug(); Pluginy biblioteki jQuery sÈ skonstruowane w taki sposób, ĝe prze- chodzÈ przez kolekcjÚ obiektów jQuery oraz zwracajÈ takÈ kolekcjÚ obiektów. Moĝna wiÚc z uzyskanych w ten sposób obiektów tworzyÊ ïañcuch. Na przykïad dziÚki temu, ĝe przedstawiony powyĝej plugin o nazwie debug równieĝ zwraca kolekcjÚ jQuery, moĝna wykorzystaÊ metodÚ css biblioteki i zmieniÊ kolor tekstu wszystkich akapitów jed- nym wierszem kodu. $( p ).debug().css( color , red ); W ksiÈĝce jeszcze co najmniej kilka razy skorzystamy z pluginów biblioteki jQuery, aby utrzymaÊ odpowiedniÈ organizacjÚ kodu ěró- dïowego stanowiÈcego rozwiÈzanie zastÚpcze. WiÚcej informacji na temat pluginów jQuery moĝna 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ĝ pozo- staïe pola formularza, dlatego teĝ trzeba je inaczej potraktowaÊ. Spójrzmy na wiersz 12. Najpierw rozpoznajemy w nim obecnoĂÊ pola hasïa. Potem trzeba zmieniÊ jego typ na zwykïe pole tekstowe, aby jego wartoĂÊ nie zostaïa ukryta pod postaciÈ gwiazdek. Niektóre przeglÈdarki zwracajÈ bïÈd, gdy próbuje siÚ przeksztaïciÊ pola haseï, dlatego musimy zastÈpiÊ pole hasïa zwykïym polem tekstowym. Pole hasïa i pole tekstowe bÚdzie- my zamieniaÊ ze sobÈ nawzajem zaleĝnie od czynnoĂci wykonywanych przez uĝytkownika. Opracowane rozwiÈzanie zmienia wartoĂci pól na formularzu, dlatego naleĝy zapewniÊ, ĝe teksty zastÚpcze nie zostanÈ przesïane do serwera jako dane formularza. Poniewaĝ kod do obsïugi tekstów zastÚpczych jest wy- konywany jedynie wówczas, gdy w przeglÈdarce wïÈczona jest obsïuga jÚzyka JavaScript, moĝemy przy uĝyciu tego jÚzyka wykryÊ próbÚ przesïa- nia formularza na serwer i usunÈÊ z niego wartoĂci, które sÈ identyczne jak teksty zastÚpcze. W wierszu 66. rozpoznawane jest zdarzenie zatwierdze- nia formularza, po czym kod usuwa wartoĂci z wszystkich pól wejĂcio- wych, w których znajduje siÚ tekst zastÚpczy. DziÚki temu, ĝe nasze rozwiÈzanie zaimplementowaliĂmy w postaci plugi- nu, moĝemy je teraz wywoïaÊ na stronie przez podïÈczenie pluginu do formularza w nastÚpujÈcy sposób: html5_tekstzastepczy/index.html $(function(){ function hasPlaceholderSupport() { var i = document.createElement( input ); return placeholder in i; } if(!hasPlaceholderSupport()){ $( #create_account ).placeholder(); // KONIEC rozwiÈzania zastÚpczego $( input[autofocus=true] ).focus(); }; }); W ten sposób powstaïo caïkiem eleganckie rozwiÈzanie, które pozwala umieszczaÊ teksty zastÚpcze w formularzach aplikacji internetowych w do- wolnej przeglÈdarce. 74  HTML5 i CSS3. Standardy przyszïoĂci Porada 6. Edytowanie danych bezpoĂrednio na stronie przy uĝyciu atrybutu contenteditable Zawsze warto szukaÊ sposobów, dziÚki którym uĝytkownikom ïatwiej bÚdzie korzystaÊ z aplikacji. Czasami warto pozwoliÊ uĝytkownikom na edytowa- nie danych na ich temat bez koniecznoĂci odsyïania ich do dedykowanego formularza. Standardowo mechanizm edycji danych bezpoĂrednio na stronie implementuje siÚ w taki sposób, ĝe najpierw rozpoznaje siÚ klikniÚcia my- szÈ w regionie, w którym znajduje siÚ tekst, a nastÚpnie w miejsce regionu wstawia siÚ pole tekstowe. Zmieniona zawartoĂÊ takiego pola tekstowego jest potem przesyïana za poĂrednictwem technologii Ajax z powrotem do serwera. Natomiast obecny w HTML5 znacznik contenteditable auto- matycznie udostÚpnia moĝliwoĂÊ wpisywania danych bezpoĂrednio na stronie. Równieĝ w przypadku zastosowania znacznika contenteditable trzeba zaimplementowaÊ kod JavaScript, który bÚdzie przesyïaï zmienione dane na serwer w celu ich zapisania, lecz nie trzeba juĝ wówczas tworzyÊ ani przeïÈczaÊ ukrytych pól formularzy. Celem jednego z projektów realizowanych w firmie Peïen Wypas S.A. jest umoĝliwienie uĝytkownikom przeglÈdania danych na temat ich konta. Na przeznaczonej do tego stronie WWW znajduje siÚ nazwisko uĝytkow- nika, miasto, województwo, kod pocztowy oraz adres poczty elektronicz- nej. Dodamy wiÚc moĝliwoĂÊ edytowania tych danych bezpoĂrednio na stronie. W efekcie powinien powstaÊ interfejs widoczny na rysunku 3.6. Rysunek 3.6. ’atwe edytowanie danych bezpoĂrednio na stronie Zanim przystÈpimy do implementacji, chcÚ zaznaczyÊ, ĝe implementowa- nie jakiegokolwiek mechanizmu opartego na kodzie JavaScript bez uprzedniego zaimplementowania kodu dziaïajÈcego na serwerze jest wbrew wszelkim znanym mi dobrym praktykom tworzenia aplikacji inter- netowych. PrzyjÈïem jednak taki tryb pracy tylko dlatego, ĝe chcÚ skupiÊ siÚ na przedstawieniu dziaïania znacznika contenteditable, oraz dlatego, ĝe Rozdziaï 3. • Tworzenie przyjaznych formularzy internetowych  75 nie bÚdzie to kod na Ărodowisko produkcyjne. Zawsze, i to na- prawdÚ zawsze, najpierw naleĝy zaimplementowaÊ tÚ czÚĂÊ, która nie wymaga kodu JavaScript, a dopiero potem tworzyÊ wersjÚ rozwiÈzania, która opiera siÚ na skryptach JavaScript. Na koniec powinno siÚ takĝe zaimplementowaÊ automatyczne testy dla obydwóch wersji rozwiÈzania, aby zwiÚkszyÊ prawdopodobieñstwo zidentyfikowania wszystkich poten- cjalnych bïÚdów, które mogÈ zajĂÊ zwïaszcza wówczas, gdy zmianie ule- gnie tylko jedna z wersji. Formularz edycji danych o koncie W HTML5 udostÚpniono znacznik contenteditable, który jest dostÚpny niemal dla kaĝdego elementu. Dodanie znacznika contenteditable spowo- duje, ĝe element przeksztaïci siÚ w pole dostÚpne do edycji. html5_edytowaniedanych/show.html h1 Informacje o uĝytkowniku /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 Województwo /b span id= state contenteditable= true ¥lÈskie /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 moĝna rozszerzyÊ o kaskadowy arkusz stylów. Do zidentyfikowania pól dostÚpnych do edycji wykorzystamy selektory CSS3. Pola te bÚdÈ zmieniaÊ kolor, gdy uĝytkownik umieĂci na nich kur- sor myszy albo je zaznaczy. html5_edytowaniedanych/show.html 1 ul{list-style:none;} 2 3 li{clear:both;} 76  HTML5 i CSS3. Standardy przyszïoĂci 4 5 li b, li span{ 6 display: block; 7 float: left; 8 width: 100px; 9 } 10 11 li span{ 12 width:500px; 13 margin-left: 20px; 14 } 15 16 li span[contenteditable=true]:hover{ 17 background-color: #ffc; 18 } 19 20 li span[contenteditable=true]:focus{ 21 background-color: #ffa; 22 border: 1px shaded #000; 23 } To juĝ wszystko, jeĂli chodzi o czÚĂÊ widocznÈ dla uĝytkownika. Uĝyt- kownicy mogÈ juĝ teraz ïatwo zmieniaÊ dane bezpoĂrednio na stronie. Pozostaje je tylko zapisaÊ na serwerze. Zapisywanie danych Uĝytkownicy mogÈ juĝ zmieniaÊ dane, jednak na razie zmiany te zosta- nÈ utracone, gdy nastÈpi ponowne wywoïanie strony bÈdě teĝ gdy uĝyt- kownik przejdzie do innej strony internetowej. Trzeba zapewniÊ moĝli- woĂÊ przesïania wprowadzonych zmian do serwera. NajproĂciej jest wy- korzystaÊ do tego celu bibliotekÚ jQuery. Jeĝeli kiedykolwiek miaïeĂ stycznoĂÊ z technologiÈ Ajax, zastosowane rozwiÈzanie nie bÚdzie 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 kaĝdej sekcji span, która znajduje siÚ na stronie i zawiera atrybut contenteditable o wartoĂci true, dodany zostaï odbiornik zdarzeñ. Potem nastÚpuje juĝ tylko przesïanie danych do skryptu dziaïajÈcego na serwerze. RozwiÈzanie zastÚpcze W zastosowanym rozwiÈzaniu uĝyto szeregu rozwiÈzañ, które w niektó- rych okolicznoĂciach nie bÚdÈ dziaïaÊ poprawnie. Przede wszystkim wy- sïanie zmienionych danych do serwera jest wykonywane przez kod Java- Script, co w zasadzie jest zïym pomysïem. Poza tym uĝyliĂmy pseudoklasy focus, aby wyróĝniÊ pola, w których znajduje siÚ kursor, a pseudoklasa ta nie jest obsïugiwana przez niektóre wersje przeglÈdarki Internet Explorer. Zajmijmy siÚ wiÚc najpierw dziaïaniem strony, a potem jej wyglÈdem. Strona do edycji danych Zamiast wymyĂlaÊ róĝne okolicznoĂci, w których uĝytkownik moĝe nie mieÊ moĝliwoĂci skorzystania z zaimplementowanego przez nas rozwiÈza- nia, najlepiej jest po prostu daÊ mu moĝliwoĂÊ przejĂcia do oddzielnej strony z formularzem. OczywiĂcie wymaga to napisania dodatkowego kodu, jednak weěmy pod uwagÚ okolicznoĂci, jakie mogÈ mieÊ miejsce:  Uĝytkownik nie ma wïÈczonej obsïugi jÚzyka JavaScript i uĝywa Internet Explorera 7.  Uĝytkownik korzysta z przeglÈdarki, która nie obsïuguje HTML5.  Uĝytkownik korzysta z najnowszej wersji przeglÈdarki Firefox, która obsïuguje HTML5, lecz nie ma wïÈczonej obsïugi jÚzyka JavaScript, bo po prostu tego jÚzyka nie lubi (to moĝe siÚ zdarzyÊ zawsze, zdecydowanie czÚĂciej, niĝ moĝna by sobie wyobraĝaÊ). Gdy zastanowimy siÚ nad opisanymi okolicznoĂciami, najbardziej sensow- nym rozwiÈzaniem zastÚpczym okaĝe siÚ stworzenie formularza, który metodÈ POST wykona tÚ samÈ czynnoĂÊ, co zaimplementowany przez nas kod Ajax odpowiedzialny za zapisanie zmian. Sposób wykonania rozwiÈ- zania zastÚpczego zaleĝy tylko od nas, jednak wiele dostÚpnych platform programistycznych umoĝliwia wykrywanie typu ĝÈdania przez sprawdzenie zawartoĂci nagïówków accept. Na tej podstawie moĝna siÚ dowiedzieÊ, czy ĝÈdanie zostaïo wykonane zwykïÈ metodÈ POST, czy za pomocÈ XMLHttpRequest. 78  HTML5 i CSS3. Standardy przyszïoĂci Kod pozostanie wówczas zgodny z zasadÈ DRY5. ’Ècze do formularza bÚ- dzie ukrywane, jeĝeli przeglÈdarka bÚdzie obsïugiwaÊ znacznik contenteditable i jÚzyk JavaScript. Utworzymy wiÚc nowÈ stronÚ o nazwie edit.html, która bÚdzie zawieraÊ standardowy formularz edycji danych. Dane bÚdÈ przesyïane do tego samego adresu, z którego 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 uĝytkowniku /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 Województwo /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 5 DRY to skrót angielskich sïów Don’t Repeat Yourself, czyli „nie powtarzaj siÚ”. OkreĂlenie to zostaïo sformuïowane przez Dave’a Thomasa i Andy’ego Hunta w ksiÈĝce The Pragmatic Programmer. [HT00] Rozdziaï 3. • Tworzenie przyjaznych formularzy internetowych  79 /form /body /html NastÚpnie na stronie show.html naleĝy dodaÊ ïÈcze do nowej strony edit.html. html5_edytowaniedanych/show.html h1 Informacje o uĝytkowniku /h1 section id= edit_profile_link p a href= edit.html Edycja danych o uĝytkowniku /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 wów- czas, gdy przeglÈdarka bÚdzie obsïugiwaÊ znacznik contenteditable. html5_edytowaniedanych/show.html if(document.getElementById( edit_profile_link ).contentEditable != null){ Skrypt rozszerzony o mechanizm wykrywania obsïugi znacznika contenteditable ma nastÚpujÈcÈ 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); } ); }); } }); DziÚki takiej implementacji uĝytkownicy mogÈ korzystaÊ ze standardowe- go interfejsu edycji danych bÈdě teĝ z szybszego trybu edycji danych bez- poĂrednio na stronie. Wiesz juĝ, w jaki sposób zaimplementowaÊ taki interfejs, pamiÚtaj wiÚc, aby najpierw stworzyÊ rozwiÈzanie zastÚpcze. W odróĝnieniu bowiem od rozwiÈzañ zastÚpczych dla innych przypad- ków, brak rozwiÈzania zastÚpczego w tej sytuacji ograniczy zbiór funkcji dostÚpnych dla uĝytkownika. 80  HTML5 i CSS3. Standardy przyszïoĂci PrzyszïoĂÊ JeĂli obecnie na stronie dodana zostanie kontrolka kalendarza zaimple- mentowana w jÚzyku JavaScript, uĝytkownicy bÚdÈ musieli poznaÊ sposób jej dziaïania. Jeĝeli kiedyĂ kupowaïeĂ w internecie bilety na samolot i re- zerwowaïeĂ pokój w hotelu, zdajesz sobie sprawÚ, jak róĝnorodne sÈ spo- soby implementowania formularzy na stronach WWW. Podobnie jest z ban- komatami, których interfejsy róĝniÈ siÚ miÚdzy sobÈ czasem tak znacznie, ĝe róĝnice te mogÈ spowalniaÊ czynnoĂci korzystajÈcych z nich osób. Wyobraěmy sobie jednak, ĝe na kaĝdej witrynie znajduje siÚ pole daty zaimplementowane w HTML5, a odpowiedzialnoĂÊ za stworzenie odpo- wiedniego interfejsu spoczywa na przeglÈdarce. Na kaĝdej witrynie od- wiedzanej przez uĝytkowników kontrolka kalendarza miaïaby identycznÈ postaÊ. W oprogramowaniu odczytujÈcym zawartoĂÊ ekranu moĝna by wrÚcz zaimplementowaÊ standardowy mechanizm, który uïatwiïby osobom niewidomym ïatwe wpisywanie dat. ZwróÊmy teĝ uwagÚ, jak bardzo przydatne dla uĝytkowników stanÈ siÚ teksty zastÚpcze i autofokus, gdy bÚdÈ powszechnie obsïugiwane. Na podstawie tekstów zastÚpczych opro- gramowanie odczytujÈce zawartoĂÊ ekranu moĝe wyjaĂniaÊ uĝytkownikom przeznaczenie poszczególnych pól formularzy, zaĂ dziÚki mechanizmowi autofokusu ïatwiej bÚdzie takim osobom nawigowaÊ po formularzu bez uĝycia myszy. BÚdzie to znaczne uïatwienie zarówno dla osób niewido- mych i niedowidzÈcych, jak równieĝ dla tych uĝytkowników, którym ogra- niczenia ruchowe nie pozwalajÈ na korzystanie z myszy lub je utrudniajÈ. MoĝliwoĂÊ przeksztaïcania dowolnego elementu w region dostÚpny do edycji znacznie uïatwia edytowanie danych bezpoĂrednio na stronie. Jed- noczeĂnie moĝe to doprowadziÊ do zmiany sposobu tworzenia interfejsów dla systemów do zarzÈdzania treĂciÈ. Wspóïczesny internet skupia siÚ na interakcji, a formularze sÈ tej interakcji kluczowym elementem. Rozszerzenia dostÚpne w HTML5 dajÈ progra- mistom caïy zbiór nowych narzÚdzi, dziÚki którym moĝna znacznie uïatwiÊ ĝycie uĝytkownikom. 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 odczytujÈca 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 uĝytkownika, 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 przyszïoĂci 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 obrazków, 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 zastÚpcza, 189 D dane uĝytkownika atrybuty, 47 data, 59 data-, 47 data-name, 135 data-remote=true, 51 dataStorage, 258 date, 59 datetime, 55 datetime-local, 55 definicja pojÚcia, 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  295 edycja wewnÈtrz 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 dorosïych, 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 przeglÈdarki, 222 hover, 83, 249, 260 href, 48 hspace, 26 HTML5, 12, 17, 23 HTML5Shiv, 46 296  HTML5 i CSS3. Standardy przyszïoĂci I J id, 32, 37, 57 ID, 36 IE, 33 IE-CSS3, 91 iframe, 26, 226, 229 Illustrator, 177 img, 26, 112, 123 implementowanie wïasnych pluginów, 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 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
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

HTML5 i CSS3. Standardy przyszłości
Autor:

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


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