HTML5. Nieoficjalny podręcznik 9788324639502, 9781449302399 [PDF]

Zitiervorschau

---

Tytuł oryginału: HTML5: The Missing Manual Tłumaczenie: Maciej Reszotnik ISBN: 978-83-246-3950-2 © 2012 Helion S.A. Authorized Polish translation of the English edition of HTML5: The Missing Manual, 1st Edition 9781449302399 © 2011 Matthew MacDonald. This translation is published and sold by permission of O’Reilly Media, Inc., which owns or controls all rights to publish and sell the same. All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from the Publisher. Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji. Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli. Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte w tej książce informacje były kompletne i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION nie ponoszą również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce. Wydawnictwo HELION ul. Kościuszki 1c, 44-100 GLIWICE tel. 32 231 22 19, 32 230 98 63 e-mail: [email protected] WWW: http://helion.pl (księgarnia internetowa, katalog książek) Pliki z przykładami omawianymi w książce można znaleźć pod adresem: ftp://ftp.helion.pl/przyklady/htm5np.zip Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/htm5np_ebook Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję.

Printed in Poland.

• Poleć książkę na Facebook.com

• Księgarnia internetowa

• Kup w wersji papierowej

• Lubię to! » Nasza społeczność

• Oceń książkę

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Spis treści Nieoficjalna czołówka ...................................................................................... 11 Wstęp ................................................................................................................. 15

Część I. Wprowadzenie do języka ................................................23 Rozdział 1. Wprowadzenie do HTML5 ............................................................ 25 Historia HTML5 ....................................................................................... 25 XHTML 1.0: rygor ponad wszystko ........................................................ 26 XHTML 2: niespodziewana porażka ....................................................... 27 HTML5: reaktywacja ............................................................................. 27 HTML: żywy język ................................................................................. 29 Trzy pryncypia HTML5 ............................................................................ 30 1. Nie psuj sieci ...................................................................................... 30 2. Brukuj ścieżki ..................................................................................... 30 3. Bądź praktyczny ................................................................................. 32 Rzut oka na składnię HTML5 ................................................................... 32 Element doctype a HTML5 .................................................................... 34 Kodowanie znaków ................................................................................ 35 Język ...................................................................................................... 36 Dodawanie arkusza stylów ..................................................................... 36 Dołączanie JavaScriptu ........................................................................... 36 Ostateczny produkt ................................................................................ 37 Składnia HTML5 z bliska .......................................................................... 38 Rozluźnione reguły ................................................................................ 38 Walidacja HTML5 ................................................................................. 39 Powrót XHTML-u .................................................................................. 41 Rodzina znaczników HTML5 .................................................................... 43 Dodane elementy ................................................................................... 43 Komponenty usunięte ze specyfikacji ..................................................... 44 Elementy zaadaptowane ......................................................................... 45 Zmodyfikowane znaczniki ..................................................................... 46 Elementy standaryzowane ...................................................................... 47

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Korzystanie z HTML5 już dziś ...................................................................48 Ocenianie wsparcia ze strony przeglądarek ..............................................49 Statystyki poziomu przyjęcia przeglądarek ..............................................51 Wykrywanie obsługi własności z aplikacją Modernizr ..............................52 Uzupełnianie braków przy użyciu wypełniania ........................................55

Rozdział 2. Nowe podejście do projektowania stron ......................................57 Wstęp do elementów semantycznych .........................................................58 Modernizacja tradycyjnej strony HTML ....................................................59 Struktura strony w stylu klasycznym ......................................................60 Struktura strony w HTML5 ....................................................................63 Podtytuły i znacznik ..............................................................65 Dołączanie rysunków przy użyciu znacznika ...........................66 Dodawanie ramki redaktorskiej — znacznik .............................68 Elementy semantyczne a kompatybilność z przeglądarkami .......................69 Projektowanie strony z nowymi elementami semantycznymi ....................72 Więcej o nagłówkach ..............................................................................72 Odnośniki i element ...................................................................74 Więcej o stopce .......................................................................................77 Więcej o sekcjach ...................................................................................81 System tworzenia konspektu strony w HTML5 ..........................................82 Jak zobaczyć konspekt? ...........................................................................82 Konspekt podstawowy ............................................................................83 Komponenty sekcji .................................................................................84 Problemy z tworzeniem konspektów .......................................................87

Rozdział 3. Semantyczny kod HTML ................................................................91 Elementy semantyczne raz jeszcze .............................................................92 Data, czas i znacznik ................................................................93 Obliczenia w JavaScripcie i element .......................................94 Element i zaznaczanie tekstu ...................................................95 Inne standardy kodu semantycznego .........................................................97 ARIA (ang. Accessible Rich Internet Applications) ..................................97 RDFa (ang. Resource Description Framework) ........................................98 Mikroformaty .........................................................................................99 Mikrodane ........................................................................................... 104 Fragmenty sformatowane opracowane przez Google ................................. 107 Lepsze wyniki wyszukiwania ................................................................ 107 Wyszukiwarka przepisów ..................................................................... 110

Część II. Tworzenie nowoczesnych stron ................................... 115 Rozdział 4. Udoskonalone formularze ............................................................117 Formularze .............................................................................................. 118 Modernizowanie tradycyjnego formularza HTML .................................... 119 Znak wodny — dodawanie wskazówek .................................................. 123 Dobry punkt zaczepienia: właściwość focus .......................................... 124

4

SPIS TREŚCI

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Walidacja: wykrywanie błędów ................................................................ 125 Proces walidacji w HTML5, krok po kroku ........................................... 125 Wyłączanie mechanizmu walidacji ....................................................... 127 Formatowanie kontrolek walidacyjnych ............................................... 128 Walidacja wyrażeń regularnych ............................................................ 129 Własne reguły walidacji ........................................................................ 130 Obsługa mechanizmu walidacji ............................................................ 132 Nowe typy znacznika input ..................................................................... 134 Adresy e-mail ....................................................................................... 137 Adresy URL ......................................................................................... 137 Pola wyszukiwania ............................................................................... 137 Telefon ................................................................................................ 138 Liczby .................................................................................................. 138 Suwak .................................................................................................. 139 Czas: daty i godziny .............................................................................. 140 Kolor .................................................................................................... 141 Nowe elementy ....................................................................................... 141 Sugerowane odpowiedzi i element ...................................... 142 Pasek stanu i miernik ........................................................................... 144 Paski narzędzi i menu — znaczniki i ............... 146 Edytor HTML na stronie ......................................................................... 147 Edytowanie zawartości za pomocą contentEditable ............................... 147 Edytowanie strony za pomocą atrybutu designMode ............................. 149

Rozdział 5. Multimedia ................................................................................... 153 Wideo dziś .............................................................................................. 154 Wprowadzenie do audio i wideo w HTML5 .............................................. 155 Wydobywanie dźwięku z elementu ........................................ 156 Znacznik z szerszej perspektywy ............................................ 158 Wojna o format ....................................................................................... 159 Więcej o formatach .............................................................................. 160 Obsługa multimediów w przeglądarkach .............................................. 161 Wiele formatów, czyli jak udobruchać każdą przeglądarkę ..................... 164 Element ............................................................................... 164 Alternatywa — wtyczka Flasha ............................................................. 166 Sterowanie odtwarzaniem za pomocą JavaScriptu .................................... 169 Dodawanie efektów dźwiękowych ........................................................ 170 Budowa własnego odtwarzacza filmów ................................................. 173 Odtwarzacze JavaScript ........................................................................ 175 Napisy i dostępność ............................................................................. 177

Rozdział 6. Podstawy rysowania na elemencie canvas ................................ 179 Płótno — wprowadzenie .......................................................................... 180 Linie proste .......................................................................................... 182 Ścieżki i figury ...................................................................................... 184 Krzywe ................................................................................................. 186 Transformaty ....................................................................................... 188 Przezroczystość .................................................................................... 192 SPIS TREŚCI

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

5

Tworzenie prostego programu graficznego ............................................... 194 Przygotowanie narzędzi ........................................................................ 195 Malowanie po płótnie ........................................................................... 196 Zachowywanie płótna ........................................................................... 198 Płótno i kompatybilność z przeglądarkami ............................................... 201 Wypełnianie płótna .............................................................................. 201 Alternatywne płótna i wykrywanie obsługi ............................................ 203

Rozdział 7. Więcej o płótnie .......................................................................... 205 Inne własności płótna .............................................................................. 205 Rysowanie obrazów .............................................................................. 206 Wycinanie i zmienianie wielkości obrazu .............................................. 207 Rysowanie tekstu ................................................................................. 208 Cienie i inne ozdobniki ............................................................................ 210 Dodawanie cieni ................................................................................... 210 Wypełnianie figur deseniem ................................................................. 212 Wypełnianie figur gradientem ............................................................... 213 Składanie wszystkiego w całość: rysowanie wykresów ........................... 216 Interaktywne figury ................................................................................. 221 Śledzenie rysowanych elementów ......................................................... 221 Współrzędne i lokalizowanie trafień ..................................................... 224 Animowanie płótna ................................................................................. 226 Podstawowa animacja .......................................................................... 227 Animowanie wielu obiektów ................................................................ 228 Praktyczny przykład: labirynt ................................................................... 233 Rysowanie labiryntu ............................................................................. 234 Animowanie ikony ............................................................................... 235 Lokalizowanie trafień a barwa pikseli .................................................... 237

Rozdział 8. Rewolucja w stylach — CSS3 ......................................................241 Używanie CSS3 już dziś .......................................................................... 242 Strategia 1.: Wykorzystaj to, co możesz ................................................. 242 Strategia 2.: Traktuj własności CSS3 jak usprawnienia ......................... 243 Strategia 3.: Dodanie awaryjnych mechanizmów za pomocą Modernizra ...................................................................... 244 Style właściwe konkretnym przeglądarkom ........................................... 246 Typografia w sieci .................................................................................... 247 Formaty fontów .................................................................................... 248 Używanie zestawów fontów .................................................................. 250 Korzystanie z fontów sieciowych Google ............................................... 253 Korzystanie z własnych fontów ............................................................. 255 Wielokolumnowy tekst ........................................................................ 256 Przystosowanie stron do różnych urządzeń .............................................. 258 Zapytania medialne .............................................................................. 259 Zapytania medialne — wyższa szkoła jazdy ........................................... 262 Zastępowanie całego arkusza stylów ..................................................... 263 Rozpoznawanie urządzeń mobilnych .................................................... 264

6

SPIS TREŚCI

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Kontenery na błysk .................................................................................. 265 Przezroczystość .................................................................................... 266 Zaokrąglane rogi .................................................................................. 268 Tło .......................................................................................................... 269 Cienie .................................................................................................. 269 Gradienty ............................................................................................ 271 Efekty przejścia ....................................................................................... 273 Przekształcanie koloru ......................................................................... 274 Przejścia — teczka z pomysłami ............................................................ 276 Transformaty ....................................................................................... 276

Część III. Konstruowanie aplikacji sieciowych przy użyciu komponentów desktopowych ................................ 281 Rozdział 9. Magazyn danych ......................................................................... 283 Magazyn sieciowy — podstawy ................................................................ 284 Magazynowanie danych ....................................................................... 285 Praktyczny przykład: zapisywanie stanu gry .......................................... 286 Magazyn sieciowy a obsługa przeglądarek ............................................. 288 Magazyn sieciowy — na głębszych wodach ............................................... 289 Usuwanie wpisów ................................................................................ 289 Listowanie wszystkich zachowanych wpisów ........................................ 289 Zapisywanie liczb i dat ......................................................................... 290 Zachowywanie obiektów ...................................................................... 292 Reagowanie na zmiany w magazynie .................................................... 293 Odczytywanie plików .............................................................................. 295 Pobieranie pliku ................................................................................... 295 File API i obsługa przeglądarek ............................................................. 296 Odczytywanie pliku tekstowego ........................................................... 296 Zastępowanie standardowej kontrolki ładowania plików ...................... 298 Odczytywanie wielu plików jednocześnie ............................................. 299 Odczytywanie pliku graficznego ........................................................... 299

Rozdział 10. Aplikacje sieciowe z trybem offline ......................................... 303 Cachowanie plików ................................................................................. 304 Tworzenie manifestu ........................................................................... 305 Korzystanie z manifestu ....................................................................... 306 Przenoszenie manifestu na serwer ........................................................ 307 Uaktualnianie manifestu ..................................................................... 310 Obsługa w przeglądarkach aplikacji w trybie offline ............................... 312 Praktyczne techniki cachowania .............................................................. 313 Uzyskiwanie dostępu do cachowanych plików ...................................... 313 Tryb awaryjny ...................................................................................... 315 Sprawdzanie stanu połączenia .............................................................. 316 Wykrywanie uaktualniania przy użyciu JavaScriptu .............................. 317

SPIS TREŚCI

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

7

Rozdział 11. Komunikacja z serwerem sieciowym .........................................321 Wysyłanie wiadomości na serwer ............................................................. 322 Obiekt XMLHttpRequest ..................................................................... 322 Wysyłanie zapytań na serwer ................................................................ 323 Pobieranie nowych treści ...................................................................... 327 Zdarzenia przesyłane na serwer ............................................................... 331 Format wiadomości .............................................................................. 332 Wysyłanie wiadomości za pomocą skryptu serwera ............................... 333 Przetwarzanie wiadomości na stronie ................................................... 335 Polling a zdarzenia po stronie serwera ................................................... 336 Technologia WebSocket .......................................................................... 337 Ocena technologii WebSocket ............................................................... 338 Prosty klient w technologii WebSocket .................................................. 339 Przykłady technologii WebSocket w sieci .............................................. 341

Rozdział 12. Więcej ciekawych sztuczek JavaScriptu ................................... 343 Geolokalizacja ......................................................................................... 344 Jak działa geolokalizacja? ...................................................................... 345 Odnajdywanie współrzędnych użytkownika .......................................... 347 Usuwanie błędów ................................................................................. 349 Ustawienia geolokalizacji ..................................................................... 350 Generowanie mapy .............................................................................. 352 Monitorowanie ruchu użytkownika ...................................................... 355 Obiekt pracownika .................................................................................. 355 Czasochłonne zadanie .......................................................................... 357 Wykonywanie zadań w tle .................................................................... 359 Obsługa błędów pracownika ................................................................. 361 Anulowanie zadania uruchomionego w tle ............................................ 362 Przekazywanie bardziej złożonych wiadomości ..................................... 362 Zarządzanie historią ................................................................................ 364 Kwestia URL ........................................................................................ 366 Tradycyjne rozwiązanie: znak kratki i adres URL .................................. 366 Rozwiązanie HTML5: historia sesji ...................................................... 368 Historia sesji i kompatybilność ............................................................. 370

Część IV. Dodatki ........................................................................ 373 Dodatek A. Krótki wstęp do arkuszy stylów ..................................................375 Załączanie stylów do stron ....................................................................... 375 Anatomia arkusza stylów ........................................................................ 376 Własności CSS ..................................................................................... 377 Formatowanie elementów przy użyciu klas ........................................... 377 Komentarze w arkuszach stylów ........................................................... 379 Odrobinę bardziej zaawansowane arkusze stylów ....................................... 379 Konstruowanie struktury strony przy użyciu elementu .............. 380 Wiele selektorów .................................................................................. 380 Selektory kontekstowe .......................................................................... 381

8

SPIS TREŚCI

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Selektor identyfikatora ......................................................................... 382 Selektory pseudoklas ............................................................................ 382 Selektory atrybutów ............................................................................. 383 Wycieczka po stylach ............................................................................... 384

Dodatek B. Krótki wstęp do języka JavaScript .............................................. 389 W jaki sposób witryny korzystają z JavaScriptu? ....................................... 390 Zagnieżdżanie kodu w dokumencie HTML .......................................... 390 Używanie funkcji ................................................................................. 391 Przenoszenie kodu JavaScript do oddzielnego pliku ............................... 393 Odpowiadanie na zdarzenia .................................................................. 394 Podstawy składni języka .......................................................................... 395 Zmienne .............................................................................................. 395 Wartość null ........................................................................................ 397 Zakres zmiennych ............................................................................... 397 Typy danych ........................................................................................ 398 Operacje .............................................................................................. 398 Instrukcje warunkowe .......................................................................... 400 Pętle .................................................................................................... 401 Tablice ................................................................................................. 401 Funkcje — otrzymywanie i zwracanie danych ....................................... 402 Interakcja ze stroną ................................................................................. 403 Manipulowanie elementem .................................................................. 404 Dynamiczne łączenie ze zdarzeniem .................................................... 406 Zdarzenia wplatane .............................................................................. 408

Skorowidz ........................................................................................................410

SPIS TREŚCI

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

9

10

SPIS TREŚCI

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Nieoficjalna czołówka O autorze Matthew MacDonald jest pisarzem zafascynowanym nauką i technologią, w dorobku ma kilkanaście książek. Początkujący deweloperzy mogą postawić pierwsze kroki w sieci, czytając książkę Tworzenie stron WWW. Nieoficjalny podręcznik. Biurowi maniacy docenią jego inną publikację — Excel 2010. Nieoficjalny podręcznik. Ludzie wszystkich nacji, kształtu i koloru odkryją, jakimi są dziwnymi istotami, po lekturze książki Mózg. Nieoficjalny podręcznik.

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

O zespole pracującym nad książką

O zespole pracującym nad książką Nan Barber (redaktorka) pracuje nad serią Nieoficjalny podręcznik od jej powstania. Mieszka w Massachusetts wraz z mężem i najrozmaitszymi produktami firmy Apple. Jej adres e-mail to: [email protected]. Adam Zaremba (redaktor techniczny) posiada dyplom magistra Editorial Institute Uniwersytetu Bostońskiego. Mieszka w Chestnut Hill, w Massachusetts, a jego ulubionym kolorem jest żółty... nie, niebieski! Shelley Powers (korektorka merytoryczna), były członek zespołu projektantów HTML5 i autorka kilku książek wydanych przez wydawnictwo O’Reilly, jest aktywną działaczką na rzecz praw zwierząt, która walczy o zamknięcie pseudohodowli psów w stanie Missouri. Jej witryna internetowa: http://burningbird.net. Steve Suehring (korektor merytoryczny) jest architektem technicznym z pokaźnym bagażem doświadczenia, który znajduje proste rozwiązania złożonych problemów. Steve gra na kilku muzycznych instrumentach (nie na raz) i można go odnaleźć na witrynie www.braingia.org. Julie Van Keuren (korektorka językowa) jest redaktorem, wolnym strzelcem i specjalistką DTP, która prowadzi własne „imperium medialne” z domu w Billings, w Montanie. W wolnej chwili uprawia pływanie, jazdę na rowerze, biegi oraz (a czemu niby nie?) triatlon. Jej adres e-mail to: [email protected]. Denise Getz (indekser) pracuje na pełny etat jako indekser, specjalizujący się w informatyce oraz nauce o zdrowiu i religii. Aktualnie pasjonuje się fotografią, Qigongiem i kuchnią witariańską. Adres jej witryny internetowej: www.access-indexing.com.

12

HTML5. NIEOFICJALNY PODRĘCZNIK

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Podziękowania

Podziękowania Żadna książka nie doczekałaby publikacji bez pomocy małej armii wielkich osobowości. Mam wielki dług wdzięczności względem całego zespołu serii Nieoficjalny podręcznik, a szczególnie redaktor Nan Barber, na której nawet największe meandry HTML5 nie robiły żadnego wrażenia, oraz recenzentów technicznych Shelley Powers i Steve’a Suehringa, którzy pomogli mi wyłapać pogubione błędy i zawsze byli gotowi udzielić dobrych rad. Jak zwykle, wiele zawdzięczam wielu innym osobom, które pracowały nad indeksowaniem stron, przygotowywaniem rysunków i korektą ostatecznej wersji. Na koniec, pragnę podziękować członkom mojej rodziny za to wszystko, co mi ofiarowali w trakcie pisania tej książki. Mówię tu o moich rodzicach Norze i Paulu, moich teściach, Razii i Hamidzie, mojej żonie Farii oraz moich córkach, Mayi i Brennie. Dziękuję wam wszystkim! — Matthew MacDonald

NIEOFICJALNE PODZIĘKOWANIA

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

13

Seria Nieoficjalny podręcznik

Seria Nieoficjalny podręcznik Książki z serii Nieoficjalny podręcznik to dowcipne, świetnie napisane poradniki poświęcone produktom, dla których nie wydano drukowanych podręczników (co dotyczy większości technologii informatycznych). W każdej z książek znajdziesz indeks oraz odwołania do konkretnych stron (a nie tylko rozdziałów). Poniższa lista zawiera tytuły wydanych i przygotowywanych przez Helion publikacji z tej serii: • Access 2007 PL. Nieoficjalny podręcznik, Matthew MacDonald, • CSS. Nieoficjalny podręcznik, David Sawyer McFarland, • Excel. Nieoficjalny podręcznik, Matthew MacDonald, • Excel 2007 PL. Nieoficjalny podręcznik, Matthew MacDonald, • Flash CS3/CS3 PL Professional. Nieoficjalny podręcznik, E.A. Vander Veer i Chris

Grover, • Fotografia cyfrowa. Nieoficjalny podręcznik, Chris Grover i Barbara Brundage, • iPhone 3GS. Nieoficjalny podręcznik. Wydanie III, David Pogue, • JavaScript. Nieoficjalny podręcznik, David Sawyer McFarland, • Komputery PC. Nieoficjalny podręcznik, Andy Rathbone, • Microsoft Project 2007 PL. Nieoficjalny podręcznik, Bonnie Biafore, • Mózg. Nieoficjalny podręcznik, Matthew MacDonald, • Office 2007 PL. Nieoficjalny podręcznik, Chris Grover, Matthew MacDonald

i E.A. Vander Veer, • Office 2010 PL. Nieoficjalny podręcznik, Nancy Conner, Matthew MacDonald, • PowerPoint 2007 PL. Nieoficjalny podręcznik, E.A. Vander Veer, • Sieci domowe. Nieoficjalny podręcznik, Scott Lowe, • Tworzenie stron WWW. Nieoficjalny podręcznik. Wydanie II, Matthew

MacDonald, • Windows Vista PL. Nieoficjalny podręcznik, David Pogue, • Windows XP Home Edition. Nieoficjalny podręcznik, David Pogue, • Windows XP Pro. Nieoficjalny podręcznik, David Pogue, Craig Zacker i Linda

Zacker, • Word 2007 PL. Nieoficjalny podręcznik, Chris Grover.

14

HTML5. NIEOFICJALNY PODRĘCZNIK

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Wstęp Na pierwszy rzut oka mógłbyś założyć, że HTML5 jest 5. wersją języka znaczników HTML. Jest to jednak odrobinę bardziej skomplikowane. HTML5 jest buntownikiem. Został opracowany przez grupę wolnych myślicieli, którzy nawet nie byli odpowiedzialni za oficjalny standard HTML. Pozwala stosować praktyki, które zostały zakazane całą dekadę temu. Wyjaśnia twórcom przeglądarek w najdrobniejszych szczegółach, jak mają sobie radzić z błędami w kodzie, zamiast odrzucać wadliwe strony. Umożliwia też odtwarzanie multimediów bez konieczności używania wtyczek do przeglądarek w rodzaju Flasha. Wprowadza też istną powódź obsługiwanych przez język JavaScript właściwości, które nadają stronom interaktywność porównywalną z dedykowanym oprogramowaniem systemowym. Zrozumienie działania HTML5 to spore wyzwanie. Podstawowym problemem jest to, że słowa HTML5 używa się z myślą o kilkunastu oddzielnych standardach (jak się później przekonasz, wynika to z drogi ewolucji technologii; zaczął karierę jako pojedynczy standard, który później został rozdzielony na odrębne fragmenty). W zasadzie słowo HTML5 oznacza obecnie „język HTML5 i powiązane z nim standardy” lub szerzej „następna generacja technologii tworzenia stron internetowych”. Właśnie tak rozumiany standard HTML5 zostanie przeanalizowany w tej książce, opisane zostaną wszystkie jego aspekty, począwszy od składni języka, po powiązane z nim nowe właściwości, mimo że nigdy nie były częścią tej samej specyfikacji. To przenosi nas do kolejnego problemu z HTML5, czyli obsługi w przeglądarkach. Różne przeglądarki rozpoznają odmienne technologie HTML5, a wśród nowych właściwości znajdą się i takie, które nie są obsługiwane w żadnej przeglądarce. Mimo tych trudności, należy pamiętać o jednej ważnej rzeczy: HTML5 to przyszłość. Olbrzymie korporacje, takie jak Google i Apple, udzieliły mu swego wsparcia; konsorcjum W3C (ang. World Wide Web Consortium) zaniechało dalszych prac nad XHTML-em, aby tylko sformalizować i wypromować ten nowy standard; aktualnie wszyscy główni producenci przeglądarek wbudowali obsługę sporej części specyfikacji

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Czego potrzebujesz, by zacząć

w swoich produktach. Ty też możesz dołączyć do ruchu wsparcia dla HTML5, póki jest ciekawą, ekscytującą nowinką technologiczną, i tworzyć inspirujące strony, w rodzaju tej z rysunku W.1. Rysunek W.1. Dawno, dawno temu, w wiekach ciemnych sieci (innymi słowy, w zeszłym roku) swoje internetowe gry komputerowe musiałeś budować w oparciu o wtyczkę Flasha. Jednakże dzięki nowym własnościom HTML5 w zaprezentowanym tu elemencie canvas możesz posłużyć się w tym celu solidnym, pozbawionym wtyczek językiem JavaScript. Tutaj HTML5 jest fundamentem gry w labirynt, którą w rozdziale 7. przeanalizujesz dokładnie

Czego potrzebujesz, by zacząć Czego potrzebujesz, by zacząć

Książka ta poświęcona jest HTML5 — najnowszej i najlepszej wersji standardu HTML. Choć nie musisz być guru tworzenia stron, by ją zrozumieć, powinieneś mieć opanowane przynajmniej podstawy projektowania witryn. Oto lista wymagań. • Doświadczenie w tworzeniu stron. Książka ta zakłada, że napisałeś wcześniej

przynajmniej kilka stron (lub chociaż rozumiesz, jak używać elementów HTML-u, aby dzielić treść na nagłówki, akapity i listy). Jeżeli świat projektowania witryn jest dla Ciebie nowością, lepiej będzie, jeśli zaczniesz od mniej wymagającego wprowadzenia, np. mojej książki Tworzenie stron WWW. Nieoficjalny podręcznik. (Nie obawiaj się, że Cię to w jakikolwiek sposób ograniczy — wszystkie przykłady z Tworzenia stron... są pełnoprawnymi dokumentami HTML5). • Doświadczenie w pisaniu arkuszy stylów. Nie da się stworzyć nowoczesnej

witryny bez użycia CSS (standardu kaskadowych arkuszy stylów), które określają układ i formatowanie strony. Aby śledzić omawiane w tej książce przykłady,

16

HTML5. NIEOFICJALNY PODRĘCZNIK

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Czego potrzebujesz, by zacząć

powinieneś znać podstawy arkuszy stylów — wiedzieć, jak je tworzyć, co powinno się w nich znaleźć i jak dołączyć je do strony. Jeśli nie czujesz się dobrze w tym temacie, być może lektura dodatku A („Krótki wstęp do arkuszy stylów”) odświeży pamięć. Jeśli potrzebujesz więcej pomocy lub chcesz po prostu poprawić swoje umiejętności konstruowania odjazdowych układów i stylów, rzuć okiem na książkę w całości poświęconą tej tematyce: CSS. Nieoficjalny podręcznik autorstwa Davida Sawyera McFarlanda (wydawnictwo Helion). • Doświadczenie w programowaniu JavaScript. Nie, wcale nie potrzebujesz

znać języka JavaScript, żeby utworzyć stronę w standardzie HTML5. Musisz go jednak znać, by skorzystać z wielu ciekawych właściwości HTML5, takich jak rysowanie na elemencie canvas czy alternatywne metody komunikowania się z serwerem. Jeśli znasz się trochę na programowaniu, ale nie w języku JavaScript, dodatek B („Krótki wstęp do języka JavaScript”) pomoże Ci zrozumieć, jak wszystko działa. Jeżeli jednak pisanie kodu wydaje Ci się równie przyjemne jak wpełznięcie do łóżka, w którym grasuje pyton morderca, skończy się na tym, że pominiesz dużą część materiału w tej książce lub będziesz zmuszony uzupełnić wiedzę, korzystając z książek, np. JavaScript i jQuery. Nieoficjalny podręcznik autorstwa Davida Sawyera McFarlanda (wydawnictwo Helion). Jeśli te wszystkie wymagania przyprawiły Cię o zawroty głowy — cóż, taka jest cena życia w dobie rewolucji projektowania witryn.

Pisanie kodu HTML5 Strony HTML5 możesz pisać w dowolnym oprogramowaniu, którego używasz do tworzenia zwykłych dokumentów HTML. Można w tym celu posłużyć się zwykłym edytorem tekstu, takim jak Notatnik (w Windows) lub TextEdit (w MacOS). Wiele współczesnych narzędzi do projektowania (w tym Adobe Dreamweaver i Microsoft Expression Web) wyposażono w opcję generowania szablonów, które pozwalają szybko tworzyć dokumenty HTML5. Jednak podstawowa struktura dowolnej strony HTML5 jest na tyle prosta, że możesz użyć dowolnego edytora, by ją skonstruować, nawet jeśli nie powstał on z myślą o HTML5. Uwaga: Oczywiście, nie ma znaczenia, na jakim systemie operacyjnym surfujesz i tworzysz treści w sieci — czy w Windows czy w MacOS — HTML5 działa na wszystkich systemach.

Przeglądanie stron HTML5 Bardzo często pada pytanie, które przeglądarki obsługują standard HTML5. Jak się przekonasz, HTML5 jest zbieraniną niezależnych standardów. Niektóre z nich cieszą się powszechnym wsparciem. Inne nie będą obsługiwane jeszcze przez jakiś czas (lub w ogóle). Pozostałe znajdują się pośrodku — co oznacza, że HTML5 działa na niektórych wersjach niektórych przeglądarek. Oto lista przeglądarek, które rozpoznają spory fragment standardu HTML5 i nie wymagają stosowania metod obejścia braku obsługi:

WSTĘP

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

17

Kiedy standard HTML5 będzie gotowy?

• Internet Explorer 9 i późniejsze, • Firefox 3.5 i późniejsze, • Google Chrome 8 i późniejsze, • Safari 4 i późniejsze, • Opera 10.5 i późniejsze.

Naturalnie, stopień obsługi poprawa się wraz z publikacją kolejnych nowych wersji. Przykładowo Firefox 5 charakteryzuje się lepszym stopniem obsługi HTML5 niż Firefox 3.5. Omawiając każdą własność HTML5, w książce zwracano uwagę na poziom jej obsługi we wszystkich przeglądarkach. Rzecz jasna, wersje przeglądarek zmieniają się dość szybko, więc może warto, byś sam sprawdził, jak dobrze dana opcja jest rozpoznawana, aby upewnić się, że jej wdrożenie nie sprawi Ci żadnego problemu. Strona http://caniuse.com umożliwi sprawdzenie, które właściwości są wspierane w jakim stopniu (więcej o tym przydatnym narzędziu dowiesz się na stronie 35). Uwaga: W książce przedstawiono właściwości, o których wiadomo, że nie działają na niektórych przeglądarkach. Nie wpadaj w panikę! Nie ma nic złego w tym, że zanurzysz palec w wodach HTML5, po czym skupisz się na właściwościach, na których można polegać już dziś. O pozostałych myśl jak o szansie na spojrzenie w przyszłość sieci.

Kiedy standard HTML5 będzie gotowy? Odpowiedź brzmi: już jest. Nawet znienawidzony Internet Explorer 6, który ma już ponad 10 lat i jest jedną wielką zbieraniną błędów, potrafi wyświetlać dokument HTML5. Wynika to z tego, że nowy standard celowo utworzono tak, aby przejął i rozszerzył tradycyjny język HTML. Dokładniejsza odpowiedź brzmi: to zależy. Jak już się dowiedziałeś, HTML5 jest kolekcją różnych standardów o różnym poziomie wsparcia w przeglądarkach. Dlatego też, choć wszyscy twórcy stron mogliby zacząć używać dokumentów HTML5 już dziś (a niektórzy sieciowi gracze, tacy jak Google, YouTube i Wikipedia, już to zrobili), mogą minąć całe lata, nim będzie można bezpiecznie stosować większość wymyślnych właściwości HTML5 — przynajmniej bez dodawania awaryjnych mechanizmów obsługi przestarzałych przeglądarek. Uwaga: To, czy dana własność jest częścią tej specyfikacji, czy innej, nie ma większego znaczenia — ważny jest poziom obsługi w przeglądarkach (i prawdopodobieństwo, że przeglądarki nierozpoznające danej własności zaczną to robić w kolejnych wersjach). Za każdym razem, gdy w tej książce wprowadzana jest nowa własność, zostaniesz poinformowany, gdzie została zdefiniowana i jak dobrze jest obsługiwana.

Jeśli jesteś purystą, możesz być zainteresowany tym, jak daleka droga dzieli różne standardy od uzyskania oficjalnego statusu. Komplikuje to fakt, iż wizjonerzy standardu HTML5 trzymali się przewrotnej filozofii, wskazując na to, że ważne jest nie to, co mówi sam standard, a to, co jest obsługiwane przez same przeglądarki.

18

HTML5. NIEOFICJALNY PODRĘCZNIK

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Struktura książki

(Innymi słowy, „rób jak chcesz — użyj czegokolwiek, co masz pod ręką, tylko upewnij się, że będzie działało”). Mimo wszystko deweloperzy, duże firmy, rządy i inne organizacje często zwracają baczną uwagę na to, czy język jest gotowy do użycia, obserwując jego status. Technicznie rzecz ujmując, język HTML5 jest teraz szkicem w rękach konsorcjum W3C. To stanowisko oznacza, że jest to dość dojrzały standard, lecz w dalszym ciągu mogą zajść w nim zmiany w trakcie przechodzenia przez fazę kandydatury do rekomendacji (co prawdopodobnie będzie miało miejsce w 2012 roku). Właściwa faza rekomendacji, która wiąże się z przeprowadzeniem wielu testów, może się odbyć wiele lat później. Nie jest to jednak wcale takie ważne, ponieważ gdy w końcu HTML5 wkroczy w ten etap, wszyscy, którzy będą chcieli go używać, będą go „mieli w małym palcu”.

Struktura książki Książka ta stanowi, podzielony na 12 rozdziałów, kompleksowy przewodnik po świecie HTML5. Znajdziesz w niej następujące treści.

Część pierwsza: Wprowadzenie do języka • W rozdziale 1. („Wprowadzenie do HTML5”) przeczytasz, jak doszło do ewolucji

standardu HTML w HTML5. Przyjrzysz się budowie dokumentu HTML5, przekonasz się, jak język się zmienił, i dowiesz, jak dobrze język HTML5 jest rozpoznawany w przeglądarkach. • Rozdział 2. („Nowe podejście do projektowania stron”) poświęcono semantycz-

nym elementom HTML5 — grupie elementów, które nadają znaczenie sekcjom kodu strony. Użyte we właściwy sposób te dodatkowe informacje mogą usprawnić działanie przeglądarek, czytników ekranów, narzędzi projektowania stron i wyszukiwarek. • Rozdział 3. („Semantyczny kod HTML”) wchodzi głębiej w świat semantyki i do-

datkowych standardów, w rodzaju mikrodanych. Choć z początku poruszone w nim zagadnienia mogą się wydać czysto teoretyczne, musisz wiedzieć, że po opanowaniu ich wszystkich czeka Cię wielka nagroda: lepsze, bardziej kompleksowe indeksowanie stron w sieciowych wyszukiwarkach, takich jak Google.

Część druga: Tworzenie nowoczesnych stron • Rozdział 4. („Udoskonalone formularze”) zgłębia zmiany, jakie HTML5 wpro-

wadza w elementach formularza — polach tekstowych, listach, polach wyboru i innych kontrolkach, używanych do zebrania informacji od użytkownika. Przekonasz się, że HTML5 dodaje kilka ciekawych technik i narzędzi służących do wykrywania błędów w podanych danych.

WSTĘP

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

19

Struktura książki

• Rozdział 5. („Multimedia”) dotyka jednego z bardziej pasjonujących aspektów

HTML5: obsługi plików audio i wideo. Dowiesz się, jak przetrwać wojnę sieciowych kodeków multimedialnych, umieszczać odtwarzacze plików, które będą działać w każdej przeglądarce, a nawet utworzyć własny, prosty odtwarzacz. • Rozdział 6. („Podstawy rysowania na stronach”) wprowadza służącą do rysowania

dwuwymiarową powierzchnię zwaną płótnem (ang. canvas). Dowiesz się, jak nanieść na nią figury, obrazki, tekst, a nawet zbudować w oparciu o nią prosty program graficzny (za pomocą języka JavaScript). • Rozdział 7. („Więcej o elemencie canvas”) rozszerzy Twoją wiedzę o płótnie jesz-

cze bardziej. Nauczysz się, jak używać cieni i wzorów oraz bardziej ambitnych technik do tworzenia interaktywnych elementów i animacji. • Rozdział 8. („Rewolucja w stylach — CSS3”) stanowi wprowadzenie w najnowszą

wersję standardu kaskadowych arkuszy stylów — CSS3 — która uzupełnia możliwości języka HTML5. Dowiesz się, jak ożywić zwykły tekst przy użyciu wymyślnych fontów, przystosować witrynę do różnych urządzeń mobilnych oraz dodać rzucające się w oczy efekty, w rodzaju płynnych przejść.

Część trzecia: Konstruowanie aplikacji sieciowych przy użyciu komponentów desktopowych • Rozdział 9. („Magazyn danych”) omawia nową właściwość magazynu sieciowego,

która pozwala zapisywać fragmenty informacji na komputerze użytkownika witryny (można powiedzieć, że jest to ulepszona wersja plików cookies). Poznasz też metody przetwarzania wybranych przez użytkownika plików w samym kodzie JavaScript, a nie na serwerze. • Rozdział 10. („Aplikacje sieciowe z trybem offline”) zgłębia wprowadzoną

w HTML5 nową funkcjonalność cachowania, która gwarantuje działanie strony nawet po utracie połączenia z Internetem. • Rozdział 11. („Komunikacja z serwerem sieciowym”) to wprowadzenie do ko-

munikacji z serwerem sieciowym. Zaczniesz od poznania klasycznego już obiektu XMLHttpRequest, który umożliwia napisanym w języku JavaScript kodom skontaktowanie się z serwerem i zażądanie informacji. Następnie przejdziesz do dwóch innowacyjnych rozwiązań: zdarzeń po stronie serwera i ambitniejszej (choć wciąż niedokończonej) technologii WebSocketów. • Rozdział 12. („Więcej ciekawych sztuczek JavaScriptu”) porusza temat trzech

bezpośrednio niezwiązanych ze sobą technologii, które powstały w odpowiedzi na wymagania stawiane współczesnym aplikacjom sieciowym. Najpierw przekonasz się, jak sprawnie właściwość geolokalizacji jest w stanie określić położenie użytkownika witryny. Następnie dowiesz się, jak przy użyciu obiektów pracownika wykonywać nawet najbardziej czasochłonne zadania w tle aplikacji. Na koniec poznasz kilka szczegółów własności historii sesji, która pozwoli zsynchronizować adres URL strony z jej treścią.

20

HTML5. NIEOFICJALNY PODRĘCZNIK

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Przykłady kodu

Na końcu książki znajdziesz dwa dodatki, które ułatwią powtórkę podstaw potrzebnych do opanowania standardu HTML5. Dodatek A zawiera krótkie podsumowanie standardu CSS. Z kolei dodatek B poświęcono językowi JavaScript.

Przykłady kodu Jako czytelnik Nieoficjalnego podręcznika otrzymujesz coś więcej niż tylko książkę. W tej książce nie znajdziesz płyty CD przyklejonej po wewnętrznej stronie okładki — nie jest potrzebna. Wszystkie omawiane i prezentowane przykłady ściągniesz bezpośrednio ze strony internetowej książki, którą znajdziesz pod adresem helion.pl/ ksiazki/htm5np.htm. Nie musisz wpisywać tego adresu ręcznie. Wystarczy, że odwiedzisz poświęconą tej książce stronę w witrynie wydawnictwa Helion. Wskazówka: Jeśli szukasz kodów konkretnego przykładu, oto szybki sposób na ich odnalezienie. Najpierw znajdź rysunek odpowiadający przykładowi. Nazwa szukanego pliku jest zwykle widoczna na rysunku w pasku URL. Jeśli np. w ścieżce do pliku z rysunku 2.1 pojawia się nazwa ApocalypsePage_Original.html, możesz się spodziewać, że odpowiadającym przykładowi plikiem jest ApocalypsePage_Original.html.

WSTĘP

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

21

Przykłady kodu

22

HTML5. NIEOFICJALNY PODRĘCZNIK

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

I CZĘŚĆ

Wprowadzenie do języka • Rozdział 1: „Wprowadzenie do HTML5” • Rozdział 2: „Nowe podejście do projektowania stron” • Rozdział 3: „Semantyczny kod HTML”

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

1 Wprowadzenie do HTML5

G

dyby język HTML przyrównać do fabuły filmu, HTML5 byłby niespodziewanym obrotem wydarzeń.

Wraz z wejściem w dwudziesty pierwszy wiek język HTML miał przejść do lamusa. W3C (ang. World Wide Web Consortium) — organizacja odpowiedzialna za opracowywanie oficjalnych standardów sieciowych — porzuciła prace nad nim w 1998 roku. Konsorcjum postawiło na jego unowocześnionego następcę — XHTML. Tylko dzięki grupie rozczarowanych buntowników udało się wskrzesić koncepcję HTML-u i położyć fundamenty pod bogactwo opcji, które przyjdzie Ci zgłębić w tej książce. Z tego rozdziału dowiesz się, czemu HTML spotkał przykry koniec i w jaki sposób język ten powrócił do życia. Poznasz idee i cechy wyróżniające HTML5. W tym miejscu przeczytasz również o drażliwych zagadnieniach kompatybilności z przeglądarkami dostępnymi na rynku. Przyjrzysz się też bliżej zaprojektowanym w dobrej wierze dokumentom HTML5 — zarówno najbardziej podstawowej formie, jak i praktycznemu szablonowi, którego możesz użyć w roli filaru dowolnej witryny internetowej.

Historia HTML5 Jak pewnie wiesz, HTML jest językiem umożliwiającym pisanie stron internetowych. Stojąca u jego podstaw koncepcja — wykorzystywanie zestawu elementów do tworzenia struktury treści — nie uległa zmianie od zarania sieci. W zasadzie nawet najstarsze strony internetowe działają wyśmienicie w większości nowoczesnych przeglądarek (włącznie z Firefoksem czy Chrome, które pojawiły się względnie niedawno). To, że jest się starym, cieszącym się powodzeniem wygą, pociąga za sobą pewne zagrożenie — wszyscy stoją w kolejce, by Cię zastąpić. W 1998 roku W3C wstrzymało prace nad językiem HTML i podjęło próbę wprowadzenia unowocześnionego, ulepszonego, opartego na standardzie XML języka XHTML 1.0.

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

ROZDZIAŁ

Historia HTML5

XHTML 1.0: rygor ponad wszystko W języku XHTML przyjęto tę samą składnię, co w HTML-u, lecz wymuszono o wiele bardziej rygorystyczne zasady. Niechlujne ustawienie znaczników, na które HTML pozwalał, jest niedopuszczalne w XHTML-u. Załóżmy, że chciałbyś wyróżnić fragment nagłówka kursywą, za pomocą tego oto kodu: Z życia kaczek

W trakcie jego pisania popełniłeś jednak błąd i zamieniłeś miejscami dwa znaczniki: Z życia kaczek

Po natknięciu się na to trochę poplątane oznakowanie przeglądarka domyśli się, co chciałeś osiągnąć, i bez trudu nałoży na ostatnie słowo kursywę. Jednak źle umiejscowione znaczniki łamią oficjalne zasady XHTML-u. Jeśli prześlesz taką stronę do walidatora XHTML-u (lub użyjesz narzędzia do projektowania stron, takiego jak Adobe Dreamweaver), otrzymasz informację zwrotną z opisem popełnionego błędu. Trzeba przyznać, że z punktu widzenia projektanta jest to bardzo pomocne — w ten sposób możesz łatwo zidentyfikować drobne błędy, których skutkiem jest niespójne wyświetlanie strony na wielu przeglądarkach lub które mogą przyczynić się do powstania poważniejszych problemów, po tym jak wprowadzisz na niej zmiany. Z początku wydawało się, że XHTML osiągnie wieczysty sukces. Profesjonalni programiści i projektanci stron internetowych, sfrustrowani brakiem jednolitej obsługi przez różne przeglądarki i chaotycznym podejściem do projektowania witryn, tłumnie zaczęli korzystać z nowego standardu. Przy okazji zostali zmuszeni do wypracowania lepszych nawyków i porzucenia kilku niezbyt przemyślanych własności języka HTML. Niestety, wiele z obiecywanych zalet wprowadzenia XHTML-u — takich jak współpraca z narzędziami XML, ułatwione przetwarzanie stron dla zautomatyzowanych programów, konwersja na platformy mobilne czy rozszerzalność samego języka XHTML — nigdy nie ujrzało światła dziennego. Mimo wszystko, dla większości poważnych webdesignerów XHTML stał się obowiązującym standardem. I choć z początku wszyscy byli z niego zadowoleni, szybko zdano sobie sprawę z jednej jego wady: większość przeglądarek rozpoznawała znaczniki XHTML, ale nie narzucały one należytego rygoru w sprawdzaniu błędów, co przecież stanowiło jeden z filarów języka. Oznaczało to, że strona mogła w dowolny sposób złamać zasady tego standardu i wciąż zostałaby w takiej czy innej formie wczytana przez program, bez zwrócenia błędów. Nic nie stało na przeszkodzie, by jakiś twórca nazwał niechlujnie napisaną, pełną przestarzałych znaczników stronę witryną XHTML. Na całym świecie nie było ani jednej przeglądarki, która wytknęłaby mu to. Właśnie ta sytuacja mocno zaniepokoiła osoby zajmujące się standardem XHTML.

26

CZĘŚĆ I ♦ WPROWADZENIE DO JĘZYKA

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Historia HTML5

XHTML 2: niespodziewana porażka Rozwiązaniem miał się okazać nowy standard — XHTML 2. Miał on uściślić zasady obsługi błędów, zmuszając przeglądarkę do odrzucenia stron niezgodnych z XHTML 2. Według założeń standard ten odrzucał wiele dziwactw i reguł odziedziczonych po HTML-u. Przykładowo zestaw numerowanych znaczników nagłówków (, , itd.) miał zostać zastąpiony przez nowy komponent , którego działanie zależałoby od lokalizacji na stronie. Podobnie znacznik został zastąpiony przez opcję zamiany dowolnego elementu w odnośnik. Z kolei komponent stracił atrybut alt na rzecz nowej metody deklarowania alternatywnej treści obrazka. Wiele tego rodzaju zmian znalazło się w standardzie XHTML 2. Teoretycznie, reguły te były bardziej przejrzyste i zdroworozsądkowe. W praktyce, napotkały na opór, gdyż zmuszały wszystkich do zmiany sposobu pisania stron (nie mówiąc już o konieczności uaktualniania istniejących witryn), a nie dodawały nowych funkcjonalności, przez co przejście na ten standard było zwyczajnie nieopłacalne. To, że XHTML odrzucał kilka sprawdzonych i lubianych przez projektantów znaczników, w rodzaju (pogrubienie tekstu), (kursywa) i (osadzanie jednej strony w innej), nie poprawiło wizerunku języka. Jednak chyba najbardziej istotnym problemem było ślimacze tempo wdrażania standardu. Prace nad XHTML 2 ciągnęły się przez pięć lat; przez ten czas entuzjazm deweloperów zmalał do zera.

HTML5: reaktywacja Mniej więcej w tym samym czasie (w 2004 roku) wyodrębniła się grupa entuzjastów patrzących na rozwój sieci pod innym kątem. Specjaliści ci uznali, że lepiej skupić się na wprowadzeniu do HTML-u pożądanych przez twórców stron opcji i właściwości, zamiast podejmować próby naprawy błędów (lub pozbywać się „filozoficznie spaczonych” elementów). W końcu HTML rozpoczął swoją karierę jako narzędzie do wyświetlania dokumentów. Wraz z pojawieniem się języka JavaScript zmienił się w system tworzenia aplikacji sieciowych, takich jak wyszukiwarki, sklepy internetowe, skrzynki e-mail itd. Choć w zmyślnie skonstruowanej aplikacji można zrobić wiele imponujących rzeczy, jej utworzenie nie jest takie proste. Większość witryn działa w oparciu o mieszaninę JavaScriptu, jednego lub kilku zestawów narzędzi dla tego języka oraz kodu działającego po stronie serwera. Sprawienie, by wszystkie części tej układanki współgrały na wszystkich przeglądarkach, jest nie lada wyzwaniem. Nawet gdy fragmenty te jakoś działają, trzeba cały czas uważać na programistyczne odpowiedniki taśmy klejącej i zszywek utrzymujące program w całości. Sytuacja ta szczególnie niepokoiła projektantów przeglądarek internetowych i dlatego grupa postępowych indywidualistów z organizacji Opera Software (twórcy przeglądarki Opera) oraz Mozilla Foundation (twórcy Firefoksa) lobbowała na rzecz wprowadzenia w XHTML-u nowych opcji, ułatwiających pracę programistom. Gdy to się nie udało, Opera, Mozilla i Apple zebrały zespół specjalistów, któremu nadano ROZDZIAŁ 1. ♦ WPROWADZENIE DO HTML5

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

27

Historia HTML5

miano WHATWG (ang. Web Hypertext Application Technology Working Group), w celu opracowania rozwiązania wspólnego problemu. Zadaniem WHATWG nie było utworzenia zastępnika HTML-u, lecz rozszerzenie tego standardu w jednolity system, przy zapewnieniu wstecznej kompatybilności. Efektem pracy zespołu były dwie specyfikacje rozszerzeń nazwanych Web Applications 1.0 i Web Forms 2.0. Ostatecznie te dwa standardy wyewoluowały w HTML5. Uwaga: Cyfra 5 w nazwie HTML5 ma znaczyć, że standard ten jest bezpośrednią kontynuacją HTML-u (HTML 4.01 poprzedza XHTML). Oczywiście, nie jest to do końca zgodne z prawdą, ponieważ HTML5 obsługuje wszystkie rozwiązania wprowadzone w ostatniej dekadzie od czasu pojawienia się HTML 4.01, włącznie z typową dla XHTML-u składnią (której można, ale nie trzeba używać) oraz większość innowacji JavaScriptu. Jednak nazwa podkreśla właściwe przesłanie: HTML5 może wspierać konwencje XHTML-u, lecz będzie narzucał zasady języka HTML.

W 2007 roku uwaga świata sieciowego skupiła się na dokonaniach grupy WHATWG. Zmusiło to konsorcjum W3C do bolesnej refleksji, wskutek której organizacja rozwiązała zespół pracujący nad XHTML 2 i rozpoczęła pracę nad sformalizowaniem standardu HTML5. To z kolei przyczyniło się do rozbicia oryginalnej specyfikacji HTML5 na wiele łatwych do ogarnięcia części, z których niektóre stały się odrębnymi standardami (szczegóły w ramce na tej stronie). PRZYSPIESZAMY

Co zawiera HTML5? Nie istnieje coś takiego jak przeglądarka „obsługująca” HTML5. Każda przeglądarka rozpoznaje stopniowo zwiększający się zbiór charakterystycznych dla HTML5 własności. To podejście ma swoje dobre i złe strony. Podstawową zaletą jest to, że twórcy przeglądarek mogą implementować w pełni gotowe fragmenty standardu HTML5, czekając spokojnie na opracowanie nowych. Z drugiej strony, nie jest dobrze, że zmusza się projektantów stron do ciągłego sprawdzania, czy wykorzystane przez nich funkcje są obsługiwane przez wszystkie główne przeglądarki (bardziej i mniej uciążliwe techniki sprawdzania kompatybilności zostaną omówione w tej książce). Oto główne kategorie właściwości zaliczanych do HTML5.  Rdzeń HTML5. Ta część standardu została opisana

w specyfikacji W3C. W jej skład wchodzą nowe elementy semantyczne (rozdziały 2. i 3.), nowe, ulepszone komponenty formularzy (rozdział 4.), obsługa plików audio i wideo (rozdział 5.) i komponent canvas służący do rysowania przy użyciu JavaScriptu (rozdziały 6. i 7.). Wymienione w tej kategorii elementy cieszą się najlepszym wsparciem przeglądarek.  Własności, które dawniej były częścią HTML5.

Mowa o własnościach, które znalazły się w pierwszej

28

przygotowanej przez WHATWG specyfikacji HTML5. Większość z nich została zaprojektowana z myślą o złożonych aplikacjach sieciowych i wymaga języka JavaScript. Najważniejsze to możliwość przechowywania danych lokalnie (rozdział 9.), programy działające poza siecią (rozdział 10.) i przesyłanie wiadomości (rozdział 11.). Czytając tę książkę, zapoznasz się z kilkoma innymi właściwościami z tej kategorii.  Własności niebędące częścią standardu HTML5. Są to

nowoczesne cechy i opcje, o których mówi się, że należą do standardu HTML5, choć w rzeczywistości powstały w całości poza nim. W kategorii tej znajdują się CSS3 (rozdział 8.) i geolocation (rozdział 12.). Co ciekawe, nie tylko niedoinformowani menadżerowie i autorzy publikacji technicznych są odpowiedzialni za zamieszanie ze standardami. Nawet W3C zaciera granicę między „prawdziwym” HTML5 (według oficjalnej dokumentacji) a jego marketingowym wariantem (w którym znajdziesz wszystko, łącznie ze zlewem kuchennym). Przykładem niech będzie oficjalna strona (www.w3.org/html/ logo), zachęcająca do generowania logo HTML5 promującego standardy CSS3 i SVG — mimo że prace nad nimi trwały na długo przed pojawieniem się HTML5.

CZĘŚĆ I ♦ WPROWADZENIE DO JĘZYKA

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Historia HTML5

Wskazówka: Oficjalną specyfikację standardu HTML5 znajdziesz na stronie konsorcjum W3C www.w3.org/TR/html5.

HTML: żywy język Przerzucanie się kompetencjami między W3C i WHATWG, a następnie z powrotem do W3C, zaowocowało dość specyficznym porozumieniem. Z technicznego punktu widzenia W3C ma pierwsze słowo, gdy chodzi o określanie, co jest częścią języka HTML5, a co nie. WHATWG pozostawiono wolną rękę w planowaniu przyszłości HTML5 — z zaznaczeniem, że zespół ten nie będzie odnosił się do rezultatów swojej pracy jako do HTML5. Mówią o nim po prostu HTML, tłumacząc, że HTML stał się żywym językiem. Żywy język znaczy tyle, że strona napisana w tym standardzie nigdy nie stanie się tak przestarzała, by przestać funkcjonować. Co więcej, nie będzie wymagać numeru wersji (nawet w formie znacznika doctype), a jej twórca nie będzie musiał aktualizować struktury wraz z pojawieniem się nowych edycji po to, by działała na nowoczesnych przeglądarkach. Nadto fakt, iż HTML jest żywym językiem sprawia, że w każdym momencie można będzie wzbogacić go o nowe własności (i znaczniki). Niektórzy projektanci stron internetowych mogą zacząć wykorzystywać nowe opcje na swoich witrynach, w odpowiedzi na co twórcy przeglądarek mogą zapewnić ich obsługę. Niemniej jednak żadne właściwości nie będą powiązane z wersją standardu czy przeglądarki. Gdy webdeweloperzy dowiedzieli się o tych zamiarach, ich reakcją było nieogarnione przerażenie. W końcu kto chce użerać się z chaosem spowodowanym wprowadzeniem losowego wsparcia dla opcji, kiedy projektanci i twórcy stron muszą wybierać własności w oparciu o prawdopodobieństwo, że będą obsługiwane. Jednakże po refleksji większość deweloperów zdała sobie sprawę ze smutnego faktu, że — na dobre czy na złe — w ten właśnie sposób przeglądarki działały od zarania Internetu i działają nadal. Jak wspomniano wcześniej, współczesne przeglądarki radzą sobie całkiem dobrze z miszmaszem obsługiwanych właściwości. Możesz wziąć w 100% poprawną stronę XHTML i dodać do niej coś tak skandalicznie zacofanego jak znacznik (przestarzały element służący do tworzenia przewijanego tekstu). Z tego samego powodu niektóre przeglądarki mają rażące luki w obsłudze starszych standardów. Przykładowo twórcy przeglądarek zaczęli implementować elementy CSS3 jeszcze przed opracowaniem pełnego wsparcia dla CSS2, co spowodowało pominięcie niektórych właściwości. Można więc powiedzieć, że deklaracja specjalistów WHATWG spowodowała jedynie oficjalne uznanie HTML-u za „żywy język”. Trzeba jednak przyznać, iż w tym, że HTML wchodzi w nową erę poprzez powrót do własnych korzeni, jest sporo ironii. Wskazówka: Aby zobaczyć najnowszy, wciąż zmieniany szkic specyfikacji języka HTML, w którym znajdziesz informacje o HTML-u i zestawie nowych nieobsługiwanych własności, odwiedź stronę http://whatwg.org/html. Jeśli chcesz trzymać rękę na pulsie i mieć dostęp do najświeższych nowinek w mniej formalnych warunkach, zajrzyj na blog grupy WHATWG pod adresem http://blog.whatwg.org. ROZDZIAŁ 1. ♦ WPROWADZENIE DO HTML5

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

29

Trzy pryncypia HTML5

Trzy pryncypia HTML5 Zapewne pragniesz już przejść do pracy z prawdziwą stroną HTML5. Wcześniej jednak warto zapoznać się z motywacją ludzi odpowiedzialnych za zaprojektowanie tego języka — dlatego też niżej znajdziesz trzy pryncypia, które mu narzucono. Gdy już je ogarniesz, filozofia stojąca u podstaw HTML5, jego dziwactwa, komplikacje i okolicznościowe bóle głowy, o jakie ta książka przyprawia, będą miały większy sens.

1. Nie psuj sieci Zasada „Nie psuj sieci” mówi, że standard nie powinien wprowadzać zmian uniemożliwiających prawidłowe funkcjonowanie stron. Coś takiego zdarza się rzadko. Głosi też, że standard nie może zmieniać reguł działania, sprawiając, że obecnie prawidłowo funkcjonująca strona stanie się przestarzała (nawet jeśli będzie wciąż działać). Przykładem standardu „psującego sieć” był XHTML 2, gdyż wymagał dramatycznej zmiany w sposobie pisania witryn. Owszem, wbudowana w przeglądarki kompatybilność wsteczna sprawiała, że stare strony wciąż działały bez najmniejszego problemu, gdybyś jednak chciał, żeby Twoja witryna była gotowa na przyszłość, byłbyś zmuszony spędzić niezliczone godziny na poprawianiu zakazanych w XHTML 2 „błędów”. W HTML5 przyjęto inną perspektywę. Wszystko, co funkcjonowało przed jego wdrożeniem, jest wciąż obsługiwane. W zasadzie nawet znane z HTML 4.01 praktyki są w pełni poprawne. Uwaga: HTML5, w odróżnieniu od wcześniejszych standardów, nie tylko wymusza na twórcach przeglądarek obsługę cech, opcji i własności — jego specyfikacja dokumentuje i formalizuje wszystkie wprowadzone wcześniej rozwiązania. Z uwagi na to, że HTML5 dokumentuje prawdziwy stan rzeczy, zamiast nakreślać zestaw idealnych reguł, ma szansę stać się najlepiej wspieranym standardem sieciowym w historii.

2. Brukuj ścieżki W języku polskim słowo „ścieżka” w pierwotnym znaczeniu oznacza wąski pas wydeptanej przez zwierzęta lub ludzi ziemi, prowadzący z jednego miejsca w drugie. Można by rzec, że ścieżki istnieją wyłącznie dlatego, że ktoś ich używa. Być może nie jest to najlepsza droga, lecz w którymś momencie była najbardziej praktycznym rozwiązaniem. Jednym z celów powstania HTML5 jest standaryzacja nieoficjalnych, lecz szeroko stosowanych technik — ich „brukowanie”. Ścieżka, o której mowa, może nie prezentować się tak ładnie jak asfaltowa droga ekspresowa pod względem oryginalności podejścia do problemu, lecz wciąż może okazać się lepszym rozwiązaniem. Wynika to z faktu, iż przejście na nową technikę może okazać się zbyt trudne lub czasochłonne dla zwykłego projektanta stron. Co gorsza, nowe rozwiązanie może

30

CZĘŚĆ I ♦ WPROWADZENIE DO JĘZYKA

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Trzy pryncypia HTML5

PRZYSPIESZAMY

HTML5 a przestarzałe znaczniki HTML5 obsługuje cały HTML i dlatego standard ten obejmuje elementy uważane za przestarzałe. Dotyczy to również elementów formatowania, takich jak znacznik , znienawidzone komponenty efektów wizualnych i oraz niewygodny system ramek (frame). To otwarte podejście jest często przyczyną nieporozumień u wielu początkujących użytkowników HTML5. Z jednej strony, nic nie stoi na przeszkodzie, żeby zakazać użycia tych przestarzałych elementów, które nie pojawiały się w żadnej oficjalnej specyfikacji przez całe lata. Z drugiej, nowoczesne przeglądarki wciąż „po cichu” obsługują te elementy, a przecież HTML5 w założeniach ma odzwierciedlać faktyczne działanie przeglądarek. Jak odnieść się do tych sprzeczności w standardzie? W odpowiedz na ten problem specyfikacja HTML5 została napisana w dwóch częściach. Pierwsza — którą zajmiemy się w tej książce — przeznaczona jest dla programistów i projektantów. Szczególnie oni powinni unikać złych nawyków i zapomnieć o stosowaniu niepoprawnych komponentów. Wykorzystanie walidatora HTML5 pozwoli uzyskać pewność, że trzymają się tej części dokumentacji. Druga część dokumentacji została napisana z myślą o twórcach przeglądarek. W celu zapewnienia wstecznej kompatybilności muszą oni brać pod uwagę wszystkie

bez wyjątku komponenty HTML. Najlepiej byłoby, gdyby specyfikacja HTML5 zawierała dość informacji, by umożliwić dowolnej osobie skonstruowanie własnej przeglądarki od podstaw i sprawienie, by była w pełni kompatybilna ze współczesnymi przeglądarkami, pod względem przetwarzania starych i nowych znaczników. Z tej części dokumentacji można dowiedzieć się, jak radzić sobie z przestarzałymi i oficjalnie odradzanymi znacznikami, które jednak wciąż trzeba jakoś obsłużyć. Specyfikacja HTML5 formalizuje też zasady, według których przeglądarki winny radzić sobie z najróżniejszymi błędami (np. brakiem bądź przestawieniem kolejności znaczników). To zagadnienie jest bardzo ważne, ponieważ przestrzeganie zawartych tu reguł zapewnia, że strona będzie działać tak samo na każdej przeglądarce, nawet jeśli w grę będą wchodzić tak przyziemne kwestie jak sposób modelowana w DOM (ang. Document Object Model — drzewo zapisanych w pamięci obiektów reprezentujących dostępne dla kodu JavaScript elementy strony). Aby stworzyć tę pokaźną i dość nudną część standardu, projektanci HTML5 musieli wykonać szereg wyczerpujących testów na wielu przeglądarkach, aby zrozumieć nieudokumentowane nigdzie wzorce zachowań przeglądarek w trakcie obsługi błędów. Rezultaty badań stały się częścią standardu.

nie działać u użytkownika korzystającego ze starszej wersji przeglądarki. XHTML 2 było standardem, który w założeniu miał zmusić ludzi do zejścia ze ścieżki. Nie skończyło się to dla niego dobrze. Uwaga: Zasada brukowania ścieżek ma jedną oczywistą zaletę: wspiera techniki charakteryzujące się przyzwoitym poziomem obsługi przez przeglądarki. Jeśli dowolnemu twórcy stron dać wybór między nową, doskonale zaprojektowaną właściwością, która sprawdza się na 70% obecnych na rynku przeglądarek, a fuszerkąktóra działa zawsze i wszędzie, za każdym razem wybierze fuszerkę i szerszą grupę odbiorców.

Reguła „brukowania ścieżek” wymaga pewnych kompromisów. Czasem wymusza uznanie często wykorzystywanych, lecz miernie zaprojektowanych własności. Najlepszym tego przykładem jest zawarta w HTML-u funkcjonalność przeciągnij-i-upuść (ang. drag-and-drop — strona 300), powstała w oparciu o zachowanie opracowane przez Microsoft z myślą o przeglądarce Internet Explorer 5. Mimo że własność ta jest obsługiwana przez wszystkie nowoczesne przeglądarki, została powszechnie znienawidzona za pokraczne i nader skomplikowane wykonanie. Z tej właśnie przyczyny da się słyszeć głosy projektantów narzekających, iż „HTML5 nie tylko zachęca do złych praktyk designerskich; on je definiuje”.

ROZDZIAŁ 1. ♦ WPROWADZENIE DO HTML5

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

31

Rzut oka na składnię HTML5

3. Bądź praktyczny Ta zasada jest prosta: wszelkie zmiany powinny mieć jakiś praktyczny cel. Im bardziej kosztowne jest przedsięwzięcie, tym większa korzyść powinna z niego płynąć. Programiści i projektanci mogą woleć spójne, wolne od dziwactw standardy, lecz nie jest to dość dobrym powodem, by radykalnie zmieniać język, który posłużył do utworzenia kilku miliardów dokumentów. Oczywiście, ktoś powinien decydować, czyje racje są najważniejsze. Dobrą podstawą do podjęcia działań w danym kierunku jest gruntowna analiza tego, co na stronach internetowych można już wykonywać lub co starają się zmienić. Świetnym przykładem jest trzecia co do wielkości na świecie (w czasie gdy piszę te słowa) witryna YouTube. Przed pojawieniem się HTML5 standard HTML nie obsługiwał żadnych własności wyświetlania plików wideo — witryna ta oparła swoją działalność na wtyczce Flasha. To rozwiązanie działało wyśmienicie, ponieważ dodatek Flasha instaluje się na praktycznie wszystkich podłączonych do sieci komputerach. Niestety, od każdej reguły zdarzają się wyjątki, takie jak zablokowane komputery korporacyjne, na których nie wolno instalować wtyczek, czy zaprojektowane przez firmę Apple urządzenia (w rodzaju iPhona czy iPada), które nie obsługują tej technologii. Jednak, niezależnie od liczby komputerów korzystających z dobrodziejstw standardu Flash, istnieje dobry powód, by bezpośrednio wesprzeć jeden z fundamentalnych sposobów, w jaki rzesze ludzi wykorzystują w dzisiejszych czasach sieć, czyli oglądanie materiałów wideo. Taka właśnie motywacja kieruje decyzjami zespołu specjalistów HTML5. Dodają nowe interaktywne opcje, takie jak obsługa techniki przeciągnij-i-upuść, możliwości edytowania treści HTML, dwuwymiarowe rysowanie na elemencie canvas itd. Łatwo znajdziesz witryny implementujące wszystkie z omówionych wyżej właściwości, czy to za pomocą wtyczek w rodzaju Adobe Flash lub Microsoft Silverlight, czy też przez zastosowanie gotowych bibliotek JavaScipt bądź własnoręcznie napisanego kodu w tym języku. Czemu więc nie zadbać o obsługę tych opcji w jednym standardzie, ujednolicając w ten sposób ich pracę na wszystkich przeglądarkach? Uwaga: Wtyczki do przeglądarek, takie jak Flash, nie znikną w ciągu jednej nocy (czy nawet kilku lat). Utworzenie złożonej aplikacji graficznej w samym HTML5, pomimo wdrożenia wielu unowocześnień, zajmuje dużo czasu (spójrz choćby na bibliotekę gier na przeglądarkę pod adresem www.flasharcade.com). Ostateczny cel projektantów tego standardu jest jasny: należy umożliwić witrynom wyświetlanie plików wideo, zwiększyć stopień interakcji użytkownika z nimi oraz dodać wiele wodotrysków — wszystko bez konieczności instalowania dodatków z zewnątrz.

Rzut oka na składnię HTML5 Rzut oka na składnię HTML5

Oto jeden z najprostszych do napisania dokumentów HTML5. Otwiera go deklaracja doctype (specjalny znacznik, którego działanie zostanie wyjaśnione na stronie 34), pod którą znajdziesz tytuł strony (title) oraz treść. W tym przypadku treść umieszczono w jednym akapicie.

32

CZĘŚĆ I ♦ WPROWADZENIE DO JĘZYKA

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Rzut oka na składnię HTML5

Króciutki dokument HTML

Czas wstrząsnąć tą przeglądarką! Nastała era HTML5!

Powinieneś domyślić się, jak ten kod będzie wyglądał w przeglądarce, lecz jeśli musisz się upewnić, spójrz na rysunek 1.1 poniżej. Rysunek 1.1. Ten ultraprosty plik HTML zawiera zaledwie jedną linijkę treści

Można by ten niewielki plik jeszcze zmniejszyć. Przykładowo standard HTML5 wcale nie wymaga stosowania zamykającego znacznika

, gdyż przeglądarki i tak automatycznie zamykają wszelkie niedomknięte dokumenty przy końcu dokumentu (w HTML5 mechanizm ten stał się oficjalny). Jednak taka praktyka na dłuższą metę wprowadziłaby w dokumencie chaos, co z kolei mogłoby doprowadzić do pojawienia się niespodziewanych błędów na stronie. HTML5 pozwala też na usunięcie znacznika , pod warunkiem że zawarte w nim zwykle informacje są dostarczane przez inny mechanizm. Wysyłając np. dokument HTML w wiadomości e-mail, jej tytuł mógłbyś zawrzeć w przeznaczonym do tego polu, a resztę znaczników — w tym element doctype i treść — umieścić w polu treści. Jest to jednak dość wyjątkowy scenariusz. Częściej przyjdzie Ci rozbudowywać szkielet dokumentu HTML5. Większość twórców witryn zgadza się, że korzystanie z tradycyjnych komponentów i zapobiega zamieszaniu na stronie, bo wyraźnie odseparowuje zbiory informacji o niej (wewnątrz znaczników ) od treści (w znaczniku ). Taka struktura okaże się szczególnie przydatna, gdy zaczniesz dodawać skrypty, arkusze stylów i elementy :

Króciutki dokument HTML

Czas wstrząsnąć tą przeglądarką! Nastała era HTML5!

Jak zwykle, wcięcia (w trzeciej i szóstej linijce) są całkowicie nieobowiązkowe. Zastosowano je wyłącznie po to, by ułatwić zrozumienie struktury pliku. Na koniec, warto zamknąć cały dokument (wyłączając element doctype) w tradycyjnym znaczniku . A tak prezentuje się całość:

Króciutki dokument HTML

ROZDZIAŁ 1. ♦ WPROWADZENIE DO HTML5

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

33

Rzut oka na składnię HTML5

Czas wstrząsnąć tą przeglądarką! Nastała era HTML5!

Do tej pory każda wersja oficjalnej specyfikacji HTML-u wymagała zastosowania znacznika , mimo iż nie miał on żadnego wpływu na przeglądarki. W HTML5 jest on całkowicie opcjonalny. Uwaga: Stosowanie komponentów , i jest po prostu kwestią stylu. Możesz ich nie załączać, a Twoja strona wciąż będzie działać wyśmienicie, nawet na starych przeglądarkach, dla których HTML5 to czarna magia. W zasadzie dowolna przeglądarka samoczynnie doda te elementy do strony. Jeśli więc wykorzystasz JavaScript, by przejrzeć obiekty DOM (zestaw obiektów reprezentujących poszczególne elementy strony), przekonasz się, że komponenty , i są wciąż obecne na Twojej stronie, nawet jeśli sam ich nie dodawałeś.

Nasza przykładowa strona znajduje się w stadium między najprostszym możliwym a podstawowym, lecz dopracowany dokumentem HTML5. W kolejnych podrozdziałach uzupełnisz luki w wiedzy i zagłębisz się w świat HTML5.

Element doctype a HTML5 W pierwszej linijce każdego dokumentu HTML5 zamieszcza się specjalny fragment kodu — doctype — czyli deklarację typu dokumentu. Element ten określa, że dana zawartość powstała w oparciu o strukturę HTML5.

Osobie oglądającej deklarację doctype w HTML5 rzuca się w oczy jej prostota. Porównaj to choćby z jej niezgrabnym odpowiednikiem w XHTML 1.0 Strict:

Nawet profesjonalni twórcy stron zmuszeni byli do kopiowania i wklejania tego elementu z jednego dokumentu do drugiego. Znacznik doctype w HTML-u jest krótki i przystępny, więc raczej nikt nie powinien mieć trudności z napisaniem go z pamięci. Warto zauważyć, że w HTML5 znacznik doctype pozbawiony został numeru wersji specyfikacji (czyli cyfry 5 dla HTML5). Zamiast tego doctype po prostu wskazuje, że strona została napisana w języku HTML. Wpisuje się to w filozofię HTML5 jako żywego języka (strona 29). Gdy standard HTML obejmie nowe opcje, zostaną one automatycznie dodane do Twojej strony, nie trzeba będzie edytować komponentu doctype. W tym miejscu warto zadać bardzo zasadne pytanie. Skoro HTML5 jest żywym językiem, czemu w ogóle trzeba umieszczać deklarację typu dokumentu na początku? Odpowiedź jest prosta: znacznik doctype pozostaje na swoim miejscu ze względów historycznych. Bez niego większość przeglądarek (w tym Internet Explorer i Firefox) przejdzie w tzw. tryb dziwactw. W trybie tym będą się starały wczytać stronę według starych, nie do końca działających zasad wykorzystywanych w starszych wersjach tych programów. Cały szkopuł w tym, że tryb dziwactw działa odmiennie,

34

CZĘŚĆ I ♦ WPROWADZENIE DO JĘZYKA

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Rzut oka na składnię HTML5

w zależności od rodzaju przeglądarki, co skutkuje najróżniejszymi rozbieżnościami w wyświetlaniu fontów, układów stron i innymi problemami. Element doctype sprawia, że przeglądarka uaktywnia tryb standardów, który zapewnia, iż strona będzie wyświetlana według spójnych norm formatowania tekstu i układu stron zaimplementowanych w każdej nowoczesnej przeglądarce. Rodzaj wykorzystywanego znacznika doctype nie ma znaczenia (z pewnymi wyjątkami). Sprawdzane jest po prostu, czy jakakolwiek deklaracja istnieje. Doctype HTML5 jest najprostszym rodzajem deklaracji, który uruchamia tryb standardów. Wskazówka: Element doctype HTML5 włącza tryb standardów na wszystkich przeglądarkach, w których go zaimplementowano, włącznie z zupełnie niekompatybilnymi z HTML5. Dlatego też możesz bez obaw stosować ten komponent na swoich stronach, nawet jeśli powstrzymasz się na razie od posługiwania się wieloma słabo obsługiwanymi właściwościami HTML5.

Choć doctype powstał z myślą o przeglądarkach, istnieją inne program, które biorą go pod uwagę. Wśród nich są walidatory HTML5, wyszukiwarki internetowe, narzędzia deweloperskie itp. Warto pomyśleć też o innych osobach, które chcą dowiedzieć się, jakiej wersji języka użyłeś na swojej witrynie.

Kodowanie znaków Kodowanie znaków jest standardem, według którego komputery konwertują tekst w sekwencje bajtów, gdy jest zapisywany w pliku, i na odwrót przy jego otwarciu. Ze względów historycznych istnieje wiele rodzajów kodowania. Obecnie przytłaczająca większość witryn internetowych korzysta z kodowania UTF-8, które charakteryzuje się zwięzłością, szybkością działania i obsługą olbrzymiej liczby znaków, w tym wszystkich liter w języku polskim (innym ważnym typem kodowania popularnym w Europie Wschodniej jest ISO 8859-2). Dość często serwery hostujące Twoje strony konfigurowane są z myślą o jednym konkretnym rodzaju kodowania. Nie masz jednak pewności, że administrator serwera o to zadbał (chyba że sam nim jesteś), i dlatego, aby uniknąć niecodziennych problemów z wyświetlaniem strony, warto zawrzeć informacje o sposobie kodowania w kodzie stron. Zadeklarowanie kodowania w HTML5 jest bajecznie proste. Wystarczy dodać znacznik meta wewnątrz elementu (lub bezpośrednio pod komponentem doctype, jeśli nie używasz tagu ).

Króciutki dokument HTML

Narzędzia designerskie w rodzaju Dreamweaver lub Expression Web automatycznie dołączają ten element do każdej strony. Dbają też o to, by napisane w nich dokumenty były zapisywane w formacie UTF. Jeżeli jednak posługujesz się zwykłym edytorem, musisz wykonać dodatkowy krok, aby Twoje dokumenty zachowały się poprawnie. Przykładowo, pisząc stronę w Notatniku (z systemu Windows), z listy ROZDZIAŁ 1. ♦ WPROWADZENIE DO HTML5

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

35

Rzut oka na składnię HTML5

kodowań u dołu okienka Zapisz jako musisz wybrać opcję UTF-8. W edytorze TextEdit (na Mac OS) należy wybrać opcję Format/Make Plain Text (Format/Zmień na zwykły tekst), by program zapisał zawartość w formie zwykłego pliku tekstowego, po czym w menu Plain Text Encoding (Kodowanie zwykłego tekstu) okna dialogowego Save As (Zapisz jako) trzeba potwierdzić wybór Unicode (UTF-8).

Język Bezpośrednie wskazanie języka Twojej strony jest uważane za oznakę dobrego stylu. Informacja ta przydaje się czasem innym ludziom — np. wyszukiwarki internetowe wykorzystują ją do odfiltrowywania wyników wyszukiwania, aby wczytać rezultaty pasujące do języka użytkownika. W celu ustalenia języka treści dowolnego elementu dodaje się do niego atrybut lang wraz z odpowiednim kodem. Skrót pl jest kodem języka polskiego; analogicznie en to kod języka angielskiego. Więcej kodów bardziej egzotycznych języków

znajdziesz pod adresem http://people.w3.org/rishida/utils/subtags. Najłatwiej dodać informacje o języku, umieszczając atrybut lang wewnątrz znacznika :

Rozwiązanie to stanowi wskazówkę dla czytników ekranu, jeżeli na stronie znajdują się treści w wielu językach. W takim przypadku atrybutu lang używa się do oznaczenia języka danej sekcji dokumentu (np. poprzez załączenie go do różnych elementów ). W rezultacie czytniki ekranowe mogą wybrać tekst z sekcji napisanej we właściwym języku.

Dodawanie arkusza stylów Praktycznie wszystkie poprawnie zaprojektowane, profesjonalne witryny internetowe korzystają z arkuszy stylów. Arkuszy taki załączamy do strony, dodając do niej znacznik , tak jak w przykładzie:

Króciutki dokument HTML

W zasadzie metoda ta nie różni się niczym szczególnym od znanej z tradycyjnego HTML-u — jest tylko odrobinę prostsza. CSS jest jedynym językiem stylów, więc nie trzeba pisać atrybutu type=”text/css”, który dawniej był wymagany.

Dołączanie JavaScriptu Język JavaScript rozpoczął swoją karierą jako czasochłonna zabawka, za pomocą której dodawano rozmaite wodotryski do monotonnych stron internetowych.

36

CZĘŚĆ I ♦ WPROWADZENIE DO JĘZYKA

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Rzut oka na składnię HTML5

Dziś używa się go nie tylko do tworzenia imponujących interfejsów, lecz również nowatorskich aplikacji sieciowych, włącznie z wysoko zaawansowanymi klientami poczty elektronicznej, edytorami tekstu czy programami uruchamianymi w przeglądarce map. Kod JavaScript dołącza się do strony, podobnie jak dawniej w klasycznym HTML-u. Oto przykład z odnośnikiem do pliku zewnętrznego:

Króciutki dokument HTML

Nie trzeba pisać atrybutu language="JavaScript". Przeglądarka w domyśle zakłada, że używasz JavaScriptu, chyba że zadeklarujesz coś innego (a ponieważ JavaScript jest jedynym, cieszącym się powszechnym wsparciem językiem skryptowym, raczej nigdy tego nie zrobisz). Mimo to, nawet jeśli podajesz ścieżkę do zewnętrznego pliku, wciąż należy pamiętać, aby zamknąć całość znacznikiem . Jeśli spróbujesz skrócić sobie drogę, stosując składnię dla pustego elementu (np.

Komentarz ten to informacja dla Internet Explorera, żeby traktował stronę tak, jakby została ściągnięta ze zdalnej witryny. W przeciwnym razie przeglądarka ta przejdzie w specjalny tryb bezpieczeństwa, otworzy okienko z ostrzeżeniem i odmówi uruchomienia kodu JavaScript do czasu kliknięcia przez użytkownika przycisku Zezwól na zablokowaną zawartość. Pozostałe przeglądarki ignorują znak sieci i używają tych samych ustawień bezpieczeństwa dla plików witryn zdalnych i lokalnych.

Ostateczny produkt Jeśli uważnie śledziłeś wszystkie omówione kroki, Twój pełny dokument HTML powinien wyglądać podobnie do tego:



Króciutki dokument HTML

ROZDZIAŁ 1. ♦ WPROWADZENIE DO HTML5

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

37

Składnia HTML5 z bliska

Czas wstrząsnąć tą przeglądarką! Nastała era HTML5!

Choć nie jest to najkrótszy możliwy dokument HTML, nadaje się na solidną podstawę każdej strony internetowej. Nie przejmuj się wyglądem tego przykładu — nie prezentuje się interesująco, ale w następnym rozdziale przejdziesz do prawdziwej strony, wypełnionej treścią i ozdobionej arkuszami CSS. Uwaga: Wszystkie elementy składni HTML5, które poznałeś w tym podrozdziale — w tym element doctype, znacznik kodowania meta, atrybut języka Lang, odnośniki do arkuszy stylów i kodu Java-

Script — działają w starych i nowych przeglądarkach. Wynika to z faktu, iż zostały zaprojektowane w oparciu o domyślne zachowania i praktyki korekcji błędów, na których opierają swoje działanie wszystkie przeglądarki.

Składnia HTML5 z bliska Wiesz już, że HTML5 rozluźnia niektóre zasady. Przyczyną tego jest chęć odzwierciedlenia przez twórców języka HTML5 sposobu, w jaki przeglądarki działają. Innymi słowy, pragnęli oni zmniejszyć przepaść między „sprawnie działającymi stronami” a „stronami w pełni zgodnymi ze standardami”. W następnym podrozdziale przyjrzysz się bliżej zmianom, które następowały. Uwaga: Oczywiście, istnieje wiele przestarzałych praktyk, które są wciąż obsługiwane przez przeglądarki i które odradzają się w standardzie HTML5. Nieocenioną pomoc w ich identyfikowaniu oferuje walidator HTML5 (strona 39).

Rozluźnione reguły Zauważyłeś już, że w HTML5 znaczniki , i są elementami nadmiarowymi (choć nie zmienia to faktu, iż wciąż są użyteczne). Liberalne podejście HTML5 nie kończy się w tym miejscu. HTML5 ignoruje wielkie litery znaczników, co pozwala na pisanie np. takiego kodu:

Duże czy małe litery — w znacznikach nie mają żadnego ´znaczenia

.

HTML5 umożliwia też pominięcie zamykającego ukośnika w elementach pustych — tj. takich, w których nie osadzono żadnych treści — w rodzaju (znacznik obrazka),
(znacznik przerwania wiersza) lub (znacznik linii horyzontalnej). Trzy przedstawione niżej sposoby przerywania wiersza są w pełni poprawne: Nie mogę się
ruszyć ani w przód,
ani w tył.
Jestem w potrzasku.

Kolejna zmiana wprowadzona w HTML5 dotyczy atrybutów. Wartości atrybutów nie muszą być zapisywane w cudzysłowie, pod warunkiem że nie zawierają

38

CZĘŚĆ I ♦ WPROWADZENIE DO JĘZYKA

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Składnia HTML5 z bliska

znaków podlegających pewnym ograniczeniom (zwykle chodzi o symbole >, = lub spacje). Oto przykład znacznika , w którym wykorzystano tę własność:

Wolno też pisać atrybuty bez podawania ich wartości. O ile więc XHTML wymagał zbędnej składni, by w domyśle zaznaczyć pole wyboru…

… o tyle teraz można bez problem powrócić do tradycji HTML-u, gdzie atrybut stanowił jednocześnie wartość.

Tym, co szczególnie niepokoi niektórych projektantów, nie jest wcale fakt, iż HTML pozwala na takie zachowanie. Dużo gorsze jest to, że nieodpowiedzialny twórca stron może, ot tak, przeskakiwać między surowym a nierestrykcyjnym stylem pisania kodu, ponieważ oba są dozwolone w jednym dokumencie. Nie różni się to niczym od sytuacji z XHTML-em. W obu standardach na projektancie spoczywa odpowiedzialność wypracowania dobrego stylu — przeglądarki zaś poradzą sobie ze wszystkim, co poda się im do przetworzenia. Oto krótkie streszczenie zasad dobrego stylu w HTML5 (których będę przestrzegać w tej książce, nawet jeśli teoretycznie nie ma takiej potrzeby). • Zawieranie nadmiarowych elementów , , i w kodzie

strony. Znacznik przydaje się do zadeklarowania domyślnego języka strony (szczegóły na stronie 36); z kolei komponenty i pomagają odseparować zawartość strony od innych jej szczegółów. • Używanie małych liter w znacznikach. Nie jest to konieczne, lecz za stosowa-

niem małych liter przemawia to, że taki sposób pisania jest częściej spotykany, łatwiejszy (nie trzeba przytrzymywać klawisz Shift) i mniej krzykliwy. • Używanie cudzysłowu wokół wartości atrybutów. Cudzysłów wprowadzono

w atrybutach nie bez powodu — ma chronić programistę przed łatwymi do popełnienia pomyłkami. Jeden źle postawiony znak może spowodować błędne wyświetlenie strony. W książce zignorowano niektóre stare konwencje (Tobie też wolno). W żadnym z analizowanych dalej przykładów nie zamykano pustych elementów, gdyż po przejściu na HTML5 większość twórców stron nie zawraca sobie głowy pisaniem niepotrzebnego ukośnika (/). Z tych samych względów nie ma powodu nadawać atrybutowi wartości, jeśli ma być ona taka sama jak jego nazwa.

Walidacja HTML5 Nierestrykcyjne podejście HTML5 może Ci jak najbardziej odpowiadać. Są jednak i tacy, dla których sama myśl, że gdzieś tam, za oknem przeglądarki ukrywa się niespójny, wypełniony błędami kod, jest powodem nieprzespanych nocy. Jeśli należysz do drugiego obozu, ucieszysz się na wieść, iż istnieją narzędzia walidacji, które pomogą Ci wytropić składnię niezgodną z zalecanymi standardami HTML5, nawet jeśli Twoja przeglądarka nie zwraca na nią uwagi. ROZDZIAŁ 1. ♦ WPROWADZENIE DO HTML5

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

39

Składnia HTML5 z bliska

Oto kilka błędów, na które walidator zwraca szczególną uwagę: • brak podstawowych, wymaganych elementów (np. znacznika ), • brak znacznika zamykającego obszar, • nieprawidłowo osadzone znaczniki, • znaczniki pozbawione kluczowych atrybutów (np. element bez atrybutu

src), • komponenty lub treści umieszczone w niewłaściwych sekcjach dokumentu

(np. zwykły tekst wewnątrz znacznika ). Narzędzia projektanckie, takie jak Dreamweaver czy Expression Web, wyposażono we własne walidatory, ale wyłącznie najnowsze ich wersje obsługują HTML5. Zamiast nich warto użyć walidatorów dostępnych w sieci. Oto sposób wykorzystania popularnego walidatora, zaprojektowanego przez organizację W3C.

1. W pasku przeglądarki wpisz adres http://validator.w3.org (rysunek 1.2). Walidator W3C udostępnia trzy opcje w trzech różnych zakładkach Validate by URI (walidacja przy użyciu adresu URI — dla stron już zamieszczonych w sieci), Validate by File Upload (walidacja przesłanego pliku — dla stron zapisanych na Twoim komputerze) i Validate by Direct Input (walidacja wprowadzonego kodu — dla kodu napisanego w polu tekstowym).

Rysunek 1.2. Witryna http://validator.w3.org udostępnia trzy sposoby sprawdzenia kodu HTML. Można podać adres URL strony, przesłać plik z jej kodem bądź wpisać go na miejscu, co widać na rysunku

40

CZĘŚĆ I ♦ WPROWADZENIE DO JĘZYKA

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Składnia HTML5 z bliska

2. Kliknij jedną z zakładek, żeby dodać treść do walidacji. • Zakładka Validate by URI pozwala sprawdzić poprawność istniejącej w sieci

strony. Wystarczy podać jej adres URL (np. http://www.MojaNiechlujna Witryna.com/WadliwaStrona.html). • Zakładka Validate by File Upload służy do przesyłania gotowych plików

z Twojego komputera. Najpierw kliknij przycisk Przeglądaj (lub Wybierz plik w przeglądarce Chrome). W otwartym oknie dialogowym wybierz konkretny dokument HTML i kliknij przycisk Otwórz. • Zakładka Validate by Direct Input służy do sprawdzania kodu wpisywanego

bezpośrednio w pole tekstowe przeglądarki. Najłatwiej po prostu skopiować kod z edytora tekstu i wkleić go na stronę. Nim przejdziesz dalej, możesz kliknąć przycisk More Options (więcej opcji) w celu zmiany ustawień, lecz w większości przypadków nie będziesz tego robił. Warto dla przykładu pozwolić walidatorowi automatycznie wykryć typ dokumentu — w efekcie walidator użyje wprowadzonego przez Ciebie doctype do sprawdzania poprawności strony. Dodatkowo, nie trzeba zmieniać ustawień automatycznego wykrywania kodowania, chyba że używasz w dokumencie dodatkowych języków i walidator może mieć problem z wyborem właściwego zestawu znaków.

3. Kliknij przycisk Check (sprawdź). W rezultacie wyślesz stronę HTML do sprawdzenia. Po krótkiej chwili powinieneś ujrzeć sprawozdanie. Dowiesz się z niego, czy dokument przeszedł walidację, a jeśli nie, jakie błędy zostały wykryte (rysunek 1.3). Uwaga Nawet zupełnie poprawny dokument HTML może spowodować wygenerowanie kilku nieszkodliwych ostrzeżeń np. o tym, że kodowanie znaków zostało określone automatycznie i HTML5 jest standardem eksperymentalnym i nie w pełni obsługiwanym.

Powrót XHTML-u Z tego, czego do tej pory się dowiedziałeś, można wywnioskować, że pojawienie się HTML5 oznacza śmierć poprzedniego króla sieci — XHTML-u. Jednak rzeczywistość nie jest taka prosta i fani XHTML-u nie muszą wcale żegnać się ze wszystkim, co pokochali w starszej generacji języka znaczników. Prawda jest taka, że składnia XHTML-u wciąż egzystuje. Zasady, które XHTML narzucał, przetrwały w formie wskazówek (np. poprawne osadzanie elementów) i są wciąż obsługiwane przez niezobowiązujące konwencje (np. dodawanie zamykającego ukośnika w pustych komponentach). Jak jednak wymusić przestrzeganie dobrych zwyczajów? Być może obawiasz się, że Ty lub inne osoby, z którymi pracujesz, nieświadomie przejdziecie do mniej restrykcyjnych konwencji? Aby temu zapobiec, warto zapoznać się z XHTML5 — mniej popularnym standardem, który jest wariantem HTML5 z nałożonymi ograniczeniami języka XML.

ROZDZIAŁ 1. ♦ WPROWADZENIE DO HTML5

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

41

Składnia HTML5 z bliska

Rysunek 1.3. Walidator wykrył cztery błędy spowodowane dwiema pomyłkami. Po pierwsze, na stronie zabrakło obowiązkowego znacznika . Po drugie, komponent

jest zamykany przed zamknięciem osadzonego w nim elementu (problem ten łatwo rozwiązać, zamieniając

na

). Tak na marginesie, dokument ten jest na tyle dobrze napisany, że zostałby prawidłowo wyświetlony na wszystkich przeglądarkach

W celu zmiany dokumentu HTML5 na XHTML5 konieczne jest zawarcie wewnątrz znacznika przestrzeni nazw, domknięcie wszystkich elementów, napisanie nazw komponentów małą literą itd. Oto przykład strony poddanej tym wszystkim zabiegom:



Króciutki document HTML

Czas wstrząsnąć tą przeglądarką! Nastała era XHTML5!

Teraz możesz używać bardziej rygorystycznego walidatora XHTML5, wymuszającego zasady znane z XHTML-u. Walidator W3C nie jest tym, czego szukasz, za to wersja dostępna pod adresem http://validator.nu powinna się nadać, pod warunkiem

42

CZĘŚĆ I ♦ WPROWADZENIE DO JĘZYKA

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Rodzina znaczników HTML5

że z rozwijanej listy wybierzesz opcję XHTML5 (warto również zaznaczyć opcję Be lax about HTTP Content-Type, chyba że wprowadzasz kod bezpośrednio do pola tekstowego na stronie). Trzymając się podanych wyżej wskazówek, będziesz w stanie utworzyć i walidować dokument XHTML. Nie zmieni to faktu, iż przeglądarki w dalszym ciągu będą go traktować jak stronę HTML5 z kompleksem niższości wobec języka XML. Nie będą nakładać na nią żadnych dodatkowych ograniczeń. Jeśli naprawdę chcesz wymusić stosowanie XHTML-u, będziesz musiał skonfigurować swój serwer, aby przesyłał stronę w typie MIME application/xhtml+xml lub application/xml zamiast w standardowym typie text/html (na stronie 162 znajdziesz szczegółowe informacje o typach MIME). Nim jednak zadzwonisz do firmy hostującej Twoje witryny, musisz wiedzieć, że taka konwersja uniemożliwi wyświetlanie dokumentów na wszystkich wersjach Internet Explorera, poza wydaniem 9. Z tego właśnie względu prawdziwy XHTML5 nie jest trafnym wyborem, gdy w grę wchodzi kompatybilność z przeglądarkami. Nawiasem mówiąc, przeglądarki obsługujące język XHTML5 podchodzą do niego inaczej niż do właściwej składni HTML5. Przetwarzają stronę jako dokument XML i jeśli proces nie powiedzie się (z powodu przeoczonego błędu), nie wczytają strony. Jaki płynie z tego wniosek? Najprościej mówiąc, dla zdecydowanej większości twórców stron, od zwykłych zjadaczy chleba po profesjonalistów, XHTML5 nie jest wart zachodu. Jedynym wyjątkiem są ci deweloperzy, którzy mają do osiągnięcia cel związany ze standardem XML (szczególnie dotyczy to osób manipulujących zawartością stron zgodnie ze standardami XQuery i XPath). Wskazówka: Jeśli nie potrafisz powstrzymać swojej ciekawości, możesz łatwo zmusić przeglądarkę do przejścia w tryb XHTML. W tym celu zmień rozszerzenie pliku ze stroną na .xhtml lub .xht. Teraz otwórz go z dysku twardego. Większość przeglądarek (w tym Firefox, Chrome i Internet Explorer 9) potraktuje dokument jak stronę ściągniętą z serwera w formacie XML MIME. Jeżeli na stronie znajdzie się choć jeden mały błąd, okno przeglądarki wyświetli tylko częściowo wczytaną stronę (w IE 9), komunikat o błędzie XML (Firefox) lub zestawienie obydwu tych mechanizmów (Chrome).

Rodzina znaczników HTML5 W rozdziale skupiono się na nakreśleniu zmian w składni HTML5. Dużo ważniejsze jest jednak to, co dodano, usunięto i zmodyfikowano w znacznikach HTML. Czytając ten podrozdział, dowiesz się, jakich najistotniejszych zmian dokonano.

Dodane elementy W kolejnych kilku rozdziałach napisano więcej o nowych znacznikach — składnikach nigdy wcześniej nie widzianych na stronach internetowych. W tabeli 1.1 zawarto krótką zapowiedź tego, co Cię czeka (i gdzie znajdziesz interesujące informacje).

ROZDZIAŁ 1. ♦ WPROWADZENIE DO HTML5

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

43

Rodzina znaczników HTML5

Tabela 1.1. Nowe znaczniki HTML5

Kategoria

Znaczniki

Omawiane w…

Elementy semantyczne, służące do nakreślenia struktury strony

, , , , , , , , , ,

rozdział 2.

Elementy semantyczne służące do wyróżniania tekstu

,

rozdział 3.

Formularze i interakcje

(obsługiwany wcześniej, lecz dopiero teraz uznany za część standardu) (stary element, dla którego pojawiło się dużo nowych podtypów)

rozdział 4.

, , , , , ,

Audio, wideo i wtyczki

, ,

rozdział 5.

(obsługiwany wcześniej, lecz

dopiero teraz uznany za część standardu) Ramy do rysowania na powierzchni płaskiej

rozdział 6.

Obsługa języków obcych (poza angielskim)

, , ,

oficjalna dokumentacja HTML5, dostępna pod adresem: http://dev.w3.org/ html5/markup

Komponenty usunięte ze specyfikacji Choć w HTML-u dodano wiele nowych znaczników, wyrzucono też inne ze jego rodziny. Elementy te w dalszym ciągu będą działać w przeglądarkach, lecz każdy przyzwoity walidator HTML5 wykurzy je z kryjówek i wytknie palcem (szczegóły na stronie 39). HTML5 trzyma się przeświadczenia (które wyklarowało się wraz nastaniem ery XHTML-u), iż komponenty warstwy prezentacji nie są pożądane w języku. Elementy warstwy prezentacji służą do formatowania treści strony, a nawet początkujący projektanci wiedzą, że zadanie to zarezerwowane jest dla arkuszy stylów. Wśród odrzucanych znaczników znajdują się takie, o których używaniu profesjonalni twórcy zapomnieli całe lata temu (np. , , , i ). Atrybuty prezentacyjne umarły tą samą śmiercią — nie trzeba wymieniać ich wszystkich. Dodatkowo HTML dosypuje trochę piachu do dołu, w którym projektanci stron pogrzebali element ramek HTML. Gdy je wprowadzano, wydawało się, że możliwość wyświetlania wielu stron w jednym oknie przeglądarki jest dobrym pomysłem. Teraz jednak znane są bardziej ze względu na koszmarną niedostępność, powodującą problemy z wyszukiwarkami, urządzeniami wspomagającymi osoby upośledzone i urządzeniami mobilnymi. Co ciekawe, znacznik — umożliwiający twórcy osadzenie jednej strony w drugiej — został oszczędzony. Wynika to z faktu, iż

44

CZĘŚĆ I ♦ WPROWADZENIE DO JĘZYKA

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Rodzina znaczników HTML5

aplikacje sieciowe wykorzystują element w wielu zadaniach, takich jak załączanie okien do serwisu YouTube, reklamy czy paski wyszukiwania Google na witrynie internetowej. Kilka innych komponentów wykluczono, gdyż zostały uznane za mało przydatne lub źle wykorzystywane. Zaliczają się do nich znaczniki (w jego miejsce należy użyć ) i (gdyż element jest szerzej stosowany). Przytłaczająca liczba elementów HTML wciąż trwa w nowym standardzie. Uwaga: Rodzina HTML5 składa się z ponad 100 elementów. Z tej liczby około 30 znaczników jest nowych, a 10 radykalnie zmodyfikowanych. Listę znaczników możesz przejrzeć pod adresem http://dev.w3.org/html5/markup.

Elementy zaadaptowane HTML5 jest zmyślnym standardem, czasem przystosowuje starą własność do nowej roli. Dobrym tego przykładem jest znacznik , który wyszedł z użycia, gdyż uważano go za niewygodne narzędzie do zmniejszania wielkości fontu (zadanie to lepiej wykonać z poziomu arkusza stylów). W odróżnieniu od odrzuconego komponentu , znacznik został zachowany. Obecnie znacznik ten oznacza „drobny druk” — używany np. w klauzulach u dołu umowy, których nikt nigdy nie czyta. Twórcy tej strony w żadnym wypadku nie biorą na siebie ´odpowiedzialności za uszczerbek na zdrowiu spowodowany nienadzorowaną ´jazdą na rowerze jednokołowym.

Umieszczony między znacznikami tekst będzie wyświetlany tak jak dawniej, mniejszą czcionką, chyba że domyślne ustawienie zostanie unieważnione przez arkusz stylów. Uwaga: Opinie na temat stosowania znacznika są różne. Z jednej strony, zaimplementowanie go w tej formie sprzyja kompatybilności wstecznej, ponieważ starsze przeglądarki obsługiwały ten element i będą obsługiwać go nadal. Z drugiej, wprowadza on potencjalne zamieszanie ze sposobem jego interpretacji na starszych witrynach, bo twórca mógł skorzystać ze znacznika wyłącznie w celach prezentacyjnych, a nie po to, by oznaczyć „drobny druk”. Element (skrót od angielskiego wyrażenia horizontal rule — linia pozioma), który rysuje linię poziomą między sekcjami dokumentu, również doczekał się zmiany interpretacji. W HTML5 sygnalizuje tematyczne przejście — np. zmianę tematu artykułu. Samo działanie znacznika nie uległo zmianie — zmodyfikowano jedynie jego znaczenie. Podobnie jest z komponentem — nie służy, jak dawniej, wyłącznie do przekreślania słów — wyróżnia tekst niedokładny lub już nieaktualny, który „wykreślono ” z dokumentu. Zmiany znaczenia znaczników i są dużo subtelniejsze, niż ma to miejsce dla elementu , gdyż odzwierciedlają sposób, w jaki twórcy stron je wykorzystywali we wcześniejszych wersjach HTML-u.

ROZDZIAŁ 1. ♦ WPROWADZENIE DO HTML5

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

45

Rodzina znaczników HTML5

Formatowanie — pogrubienie i kursywa Najistotniejszej modyfikacji poddano znaczniki służące do pogrubiania i nakładania kursywy na tekst. W tym celu najczęściej stosuje się odpowiednio znaczniki oraz . Pierwsza wersja XHTML-u wprowadziła ich zamienniki — komponenty i . Krok ten wynikał ze zmiany podejścia do formatowania tekstu. Zamiast po prostu pogrubiać (ang. bold —) tekst lub stosować kursywę (ang. italics — ), postanowiono podkreślić znaczenie tych operacji — wzmocnienie wagi (ang. strong importance — ) i emfazę (ang. emphasis — ) tekstu. Choć krok ten miał jakiś sens, elementy oraz przetrwały jako krótsze i prostsze alternatywy składni XHTML-u. HTML5 rozwiązuje problem w typowy dla siebie sposób. Zamiast zmuszać twórców stron do porzucenia znaczników i , nadaje im obu nowe znaczenie. Celem jest umożliwienie posługiwania się wszystkimi czterema elementami w jednym dokumencie. W rezultacie powstała odrobinę poplątana lista wskazówek. • Znacznika należy używać do oznaczenia ważnego tekstu, gdy po-

winien się wyróżniać na tle innych fragmentów. • Znacznika należy używać dla fragmentów, które powinny być pogrubiane,

lecz nie bardziej ważnych niż reszta dokumentu. Dotyczy to słów kluczy, nazw produktów i wszystkiego, co jest pogrubiane w druku. • Znacznikiem należy się posłużyć, gdy zależy Ci na nadaniu słowom emfazy

— szczególnie w miejscach akcentowanych w trakcie wymawiania. • Znacznik służy do wyróżniania kursywą pozbawionych emfazy fragmentów.

Należą do nich obcojęzyczne słowa, terminy techniczne i wszystkie inne wyrażenia, które wyróżnia się kursywą w druku. Oto strzęp kodu, w którym znajdziesz wszystkie cztery wymienione wyżej znaczniki — wszystkie prawidłowo wykorzystane. Z ostatniej chwili! W restauracji El Azul trwa ´wyprzedaż ciastek leche quemada. Nie zwlekaj, bo gdy wykupią ´ostatnie ciastko, więcej nie dostaniesz.

W przeglądarce ten tekst prezentuje się następująco: Z ostatniej chwili! W restauracji El Azul trwa wyprzedaż ciastek leche quemada. Nie zwlekaj, bo gdy wykupią ostatnie ciastko, więcej nie dostaniesz. Przyszłość pokaże, czy twórcy stron będą przestrzegać tych (w zamierzeniach) dobrych zasad, czy wciąż będą trzymać się dwóch ulubionych znaczników formatowania.

Zmodyfikowane znaczniki HTML5 rozszerza działanie niektórych elementów. Zwykle zmiany te dotyczą drobnych detali, które chyba tylko maniacy HTML-u są w stanie zauważyć, lecz czasem przynoszą one ważne rezultaty. Dobrym tego przykładem jest rzadko używany znacznik , który mimo nazwy nie nadaje się do osadzania w nim

46

CZĘŚĆ I ♦ WPROWADZENIE DO JĘZYKA

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Rodzina znaczników HTML5

adresów pocztowych. Zamiast tego ma bardzo wąski cel — dostarczyć informacji kontaktowych autora strony HTML — zwykle adresu e-mail lub odnośnika do własnej witryny. Naszą witryną zarządzają:

John Solo, Lisa Cheng, i Ryan Pavane.

Również komponent przeszedł poważną metamorfozę. W dalszym ciągu używa się go do cytowania ze źródeł (np. opowiadania, artykułu, programu telewizyjnego) w taki sposób:

Charles Dickens napisał Opowieść o dwóch miastach.

Znacznika nie wolno jednak używać do wyróżniania imienia i nazwiska osoby. To ograniczenie okazało się bardzo kontrowersyjne, ponieważ wcześniej można było posługiwać się znacznikiem w tym celu. Kilku znanych guru tworzenia stron nawołuje do zignorowania tej reguły, co jest trochę dziwne, jeśli wziąć pod uwagę, że można spędzić pół życia na edytowaniu zawartości stron i nie natknąć się na element ani razu. Najbardziej istotna poprawka dotyczy znacznika służącego do tworzenia odnośników. Poprzednie wersje HTML-u umożliwiały osadzanie w nim albo tekstu, albo grafik. W HTML5 element pozwala osadzać dosłownie wszystko — można w nim umieścić całe akapity tekstu z listami, obrazkami itd. (jeśli się na to zdecydujesz, tekst zmieni kolor na niebieski, a wokół grafik pojawi się błękitne obramowanie). Przeglądarki reagowały na taką składnię od dawien dawna, ale dopiero HTML5 legitymizuje tę, prawdę mówiąc, niezbyt użyteczną technikę. Istnieją pewne poprawki, które nie działają jeszcze na żadnej przeglądarce. Dla przykładu znacznik listy numerowanej posiada teraz atrybut reversed, który pozwala na numerowania kolejnych pozycji w odwrotnej kolejności (do cyfry 1 lub innej wyznaczonej atrybutem start). Niestety, żadna przeglądarka nie rozpoznaje tego ustawienia. O kilku innych usprawnieniach dowiesz się po drodze, czytając książkę.

Elementy standaryzowane HTML5 wspiera kilka elementów obsługiwanych już wcześniej, lecz uznawanych dawniej za niepożądane w językach HTML i XHTML. Najlepszym przykładem jest znacznik , wykorzystywany jak sieć długa i szeroka, aby wymusić obsługę wtyczki na stronie. Bardziej egzotycznym elementem w tej grupie jest znacznik , wskazujący na dozwoloną przerwę w słowie — pozwala to przeglądarce rozdzielić słowo, jeśli nie mieści się wewnątrz zawierającego je elementu.

Wielu językoznawców wątpi, czy „superkalifradalistodek ´spialitycznie” rzeczywiście jest słowem.

ROZDZIAŁ 1. ♦ WPROWADZENIE DO HTML5

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

47

Korzystanie z HTML5 już dziś

Komponent przydaje się szczególnie wtedy, gdy używa się długich nazw (co dotyczy zwłaszcza terminologii programistycznej) na małej przestrzeni, w rodzaju komórek tabeli i niewielkich kontenerów. Nawet jeśli przeglądarka obsługuje znacznik , rozdzieli słowo tylko wtedy, kiedy nie mieści się w dostępnej przestrzeni. W przypadku podanego wyżej fragmentu kodu przeglądarka może wyświetlić słowo w jeden z przedstawionych sposobów. Wielu językoznawców wątpi, czy „superkalifradalistodekspialitycznie” rzeczywiście jest słowem. Wielu językoznawców wątpi, czy „superkalifradalistodek spialitycznie” rzeczywiście jest słowem. Wielu językoznawców wątpi, czy „superkali fradalistodek spialitycznie” rzeczywiście jest słowem. Element występuje w parze ze standardowym znacznikiem (którego używa się, aby zapobiec rozdzieleniu wyrazu). Do wprowadzenia standardu HTML5 był on jedynie nieoficjalnym rozszerzeniem obsługiwanym przez niektóre przeglądarki.

Korzystanie z HTML5 już dziś Korzystanie z HTML5 już dziś

Jak się pewnie przekonałeś, HTML5 jest dziwną mieszanką. Z jednej strony, przywraca (i standaryzuje) niektóre mocno liberalne praktyki HTML-u. Z drugiej, wprowadza cały zestaw opcji i własności, które działają wyłącznie w najnowocześniejszych przeglądarkach. Gdy weźmiemy pod uwagę kompatybilność z przeglądarkami, o HTML5 można myśleć w trzech kategoriach. • Własności, które już teraz są obsługiwane. Chodzi tu zarówno o dawno już ob-

sługiwane właściwości, które dawniej nie były oficjalną częścią standardu HTML (np. mechanizm przeciągnij-i-upuść), jak i nowe opcje, które, przy odrobinie wysiłku, mogą funkcjonować w starych przeglądarkach (np. elementy semantyczne omawiane w rozdziale 2.). • Własności taktownie degradujące. Znacznik jest przykładem elementu

posiadającego wbudowany mechanizm awaryjny, pozwalający na wyświetlenie zawartości również dla starszych przeglądarek, taki jak odtwarzacz wideo oparty

48

CZĘŚĆ I ♦ WPROWADZENIE DO JĘZYKA

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Korzystanie z HTML5 już dziś

na wtyczce Flasha (zwracanie informacji o błędzie trudno w takim przypadku uznać za taktowne). W kategorii tej można znaleźć również przydatne fajerwerki, które starsze przeglądarki mogą zignorować, np. niektóre własności sieciowych formularzy czy właściwości formatowania arkuszy stylów (zaokrąglane rogi, rzucany cień itp). • Cechy, które obecnie wymagają wsparcia JavaScriptu. Wiele z wprowadzanych

w HTML5 innowacji zostało zainspirowanych czysto programistycznymi osiągnięciami twórców stron. Nie powinno więc dziwić, że wiele własności HTML5 można zduplikować, używając dobrej biblioteki JavaScriptu (lub, w najgorszym wypadku, pisząc własną). Obejście problemu przy użyciu JavaScriptu może okazać się pracochłonne, więc jeśli założysz, że dana opcja jest konieczna na Twojej stronie, może warto zrezygnować z podejścia HTML5, do czasu gdy wszystkie przeglądarki będą je obsługiwały. W książce założono, że będziesz używał tylko bezpiecznych własności HTML5 — czyli wszystkich zawierających się w pierwszej kategorii. Jeśli opcja, którą masz na względzie, przynależy do dwóch pozostałych grup (a jest ich mnóstwo), od Ciebie zależy, czy opracujesz uniwersalną metodę działania, czy przetrzesz szlak dla innych twórców stron. Jeśli w sieci dostępne jest prowizoryczne rozwiązanie, umożliwiające zastosowanie nowej technologii pomimo braku obsługi danej własności, zostanie ono omówione w książce. Mimo to, wiele razy staniesz przed dylematem: nowa własność czy kompatybilność?

Ocenianie wsparcia ze strony przeglądarek Twórcy przeglądarek zawsze będą mieli ostatnie słowo w kwestii używanych przez Ciebie własności HTML5. Jeśli przeglądarki nie obsługują danej własności, nie ma sensu jej używać, niezależnie od tego, co mówią standardy. Obecnie na rynku liczy się pięć przeglądarek (nie liczę tu przeglądarek urządzeń mobilnych, takich jak smartfony czy iPady) Jeden twórca stron nie ma po prostu szans sprawdzić każdej obiecującej opcji w każdej przeglądarce — o zbadaniu jej obsługi na starszych wersjach nawet nie wspominam. Na szczęście, istnieje witryna http://caniuse.com, która może Ci pomóc. Mieszczą się na niej szczegółowe informacje o obsłudze HTML5 przez każdą popularną przeglądarkę. Co najlepsze, pozwala ona sprawdzić, jak obsługiwane są interesujące Cię własności.

1. Najpierw w rozwijanym po kliknięciu odnośnika Show Options (pokaż opcje) formularzu u góry strony wybierz interesującą Cię kategorię (jedną lub kilka), zaznaczając pola wyboru (rysunek 1.4). Jeśli ciekawi Cię konkretna opcja, wpisz jej nazwę w pole tekstowe pod etykietą Search (szukaj) u góry strony. Możesz też przejrzeć konkretne kategorie własności, zaznaczając właściwe pole wyboru z sekcji Category (kategorie). Przykładowo zaznaczenie tylko opcji HTML5 spowoduje wyświetlenie informacji o własnościach będących częścią standardu HTML5. Wybór JS-API sprawi, że witryna załaduje opcje i cechy JavaScriptu, które dawniej były częścią HTML5, lecz w pewnym momencie odłączyły się od niego. Ze kolei zaznaczenie pola CSS pozwoli Ci zapoznać się z obsługą właściwości CSS3. ROZDZIAŁ 1. ♦ WPROWADZENIE DO HTML5

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

49

Korzystanie z HTML5 już dziś

Rysunek 1.4. Wybrane ustawienia uaktywnią sprawdzanie obsługi własności HTML5 dla wszystkich przeglądarek

2. Dodatkowo możesz wybrać inne opcje, zaznaczając pozostałe pola wyboru. W ten sposób zmienisz wyniki wyszukiwania. Przykładowo informacje o kompatybilności z urządzeniami mobilnymi lub o niedostępnych jeszcze przeglądarkach mogą Cię nie interesować. Lepiej jednak zostawić te opcje w spokoju — wygenerowane przez witrynę tabele są dość łatwe do przeczytania.

3. Aby przejrzeć rezultaty, przewiń okno przeglądarki w dół (rysunek 1.5). Rysunek 1.5. Obecnie witryna generuje ponad dwadzieścia tabel dla własności HTML5. Widoczna na rysunku tabela ukazuje stopień obsługi wprowadzonego w HTML5 elementu

Jeśli podałeś długą listę własności, na stronie pojawią się tabele kompatybilności dla pierwszych dwudziestu. Do pozostałych przejdziesz, klikając odnośnik Show next 20 (pokaż następne dwadzieścia) u dołu strony.

50

CZĘŚĆ I ♦ WPROWADZENIE DO JĘZYKA

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Korzystanie z HTML5 już dziś

Każda tabela własności ukazuje porównanie różnych wersji wielu przeglądarek. Kolor komórki wskazuje na stopień kompatybilności przeglądarki z opcją. Komórki mogą być czerwone (brak obsługi), jasnozielone (pełna kompatybilność), oliwkowozielone (częściowa obsługa) lub szare (brak danych — zwykle dotyczy przeglądarek będących jeszcze w fazie opracowywania, o których nie wiadomo, czy obsługują daną własność).

Statystyki poziomu przyjęcia przeglądarek Statystyki poziomu przyjęcia przeglądarek stanowią ostatni element układanki. Mówią one o odsetku użytkowników wykorzystujących przeglądarki, które obsługują interesującą Cię własność. Świetnym ich źródłem jest ciesząca się sporą popularnością witryna GlobalStats (http://gs.statcounter). Gdy się na niej znajdziesz, z rozwijanej listy Statistics (dane statystyczne) wybierz opcję Browser Version (wersja przeglądarki). Z wygenerowanego wykresu dowiesz się nie tylko, które przeglądarki są najpopularniejsze, ale też jakie ich wersje są najczęściej używane. Istnieje też możliwość wyboru określonych regionów geograficznych z rozwijanej listy Country/Region (państwo/region). Wreszcie, możesz wybrać rodzaj wykresu, zaznaczając przycisk opcji po prawej stronie obszaru wykresu. Przycisk Bar (słupek) spowoduje wygenerowanie wykresu słupkowego ukazującego obecną sytuację. Wybór opcji Line (linia) wyświetli zaś wykres liniowy pokazujący trendy przyjmowania nowych wersji przeglądarek w czasie. Domyślnie wykres liniowy ukazuje rezultaty z całego ostatniego roku (rysunek 1.6), lecz można zmodyfikować go, tak by obejmował interesujący Cię okres czasu. Rysunek 1.6. Z wykresu wynika, że z obsługą HTML5 jest jak z rosyjską ruletką. Obecnie najpopularniejsza przeglądarka na świecie — Internet Explorer 8 — nie obsługuje żadnych własności HTML5

ROZDZIAŁ 1. ♦ WPROWADZENIE DO HTML5

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

51

Korzystanie z HTML5 już dziś

PRZYSPIESZAMY

Czy Internet Explorer zostaje w tyle? Poznając tajniki HTML5, szybko zdasz sobie sprawę, że wśród wszystkich przeglądarek jedna charakteryzuje się wyjątkowo słabą obsługą (oraz najwolniejszym tempem prac nad uaktualnieniem) tego standardu. Tym spóźnialskim jest Internet Explorer. Choć Microsoft poczynił duże postępy, wprowadzając na rynek Internet Explorer 9, pod względem obsługi własności HTML5 przeglądarka IE wciąż pozostaje daleko za konkurencją. Microsoft nie ignoruje najświeższych nowinek ze świata HTML5, lecz opóźnia implementowanie nie w pełni dokończonych własności. Dla niektórych gigant z Redmont udostępnia eksperymentalne rozszerzenia IE (nazwane „laboratoriami” HTML5), które można ściągnąć z witryny http://html5labs.interoperabilitybridges.com. To świetne rozwiązanie, jeśli ktoś chce się pobawić nowymi, wciąż opracowywanymi opcjami. Nie pomaga jednak, jeśli chcesz

zaimplementować je we własnej, praktycznej aplikacji sieciowej (inna rzecz, że próba zastosowania ich w obecnej fazie rozwojowej graniczy z szaleństwem). Istnieje dużo poważniejszy problemem ze wsparciem ze strony IE. Jak wcześniej wspomniano, Internet Explorer 9 jest pierwszą wersją przeglądarki z tej serii, która wspiera własności HTML5. Co więcej, wymaga ona systemów Windows 7 lub Vista. Osoby korzystające z Windows XP (który według rankingów wciąż jest najpopularniejszym systemem operacyjnym na świecie, mimo wieku) nie mogą używać Internet Explorera 9. Choć nie zostały wykluczone — wciąż mają dostęp do konkurencyjnych przeglądarek — minie sporo czasu, nim twórcy stron będą mogli przejść na HTML5, nie zawracając sobie głowy ustalaniem, czy dana własność jest obsługiwana, oraz planami awaryjnym, w przypadku gdy tak nie jest.

GlobalStats zbiera dane statystyczne z milionów stron, na których osadzono specjalny kod. Choć otrzymuje wyniki z pokaźnej liczby witryn, przesyłających olbrzymią ilość informacji, należy pamiętać, że wciąż jest to drobny ułamek sieci. To oznacza, że użytkownicy Twojej strony wcale nie muszą być podzieleni według tych liczb. Co więcej, odsetek popularności przeglądarek jest odmienny w różnych krajach i zależy od typu odwiedzanej witryny. W Niemczech najpowszechniej używaną przeglądarką jest Firefox (prawie 60% użytkowników), podczas gdy na Białorusi największą popularnością cieszy się Opera (około 49% użytkowników). Z kolei wśród czytelników witryny TechCrunch (znana witryna przeznaczona dla komputerowych zapaleńców) zaledwie 16% korzysta z najpopularniejszej przeglądarki świata — Internet Explorera. Wniosek jest prosty: jeżeli zależy Ci na solidnie zaprojektowanej stronie internetowej, analizuj dane statystyczne wygenerowane przez Twoje własne strony. Jeśli jeszcze nie używasz usługi do badań ruchu w sieci, wypróbuj kompletnie darmowy i wydajny system Google Analytics, który znajdziesz na stronie www.google.com/analytics.

Wykrywanie obsługi własności z aplikacją Modernizr Przez kilka następnych lat to, że przeglądarki niektórych użytkowników Twojej strony nie będą obsługiwać własności HTML, będzie powszechnym zjawiskiem. Nie oznacza to jednak, że nie powinieneś z nich korzystać szczególnie wtedy, kiedy jesteś gotów poszukać sposobów na obejście problemu lub pozwolić na powolne taktowne przemijanie. Tak czy siak, przyda Ci się kod JavaScript. Całość powinna działać według wzoru: po załadowaniu strony uruchamia się kod sprawdzający, czy dana własność działa na konkretnej przeglądarce.

52

CZĘŚĆ I ♦ WPROWADZENIE DO JĘZYKA

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Korzystanie z HTML5 już dziś

Niestety, z uwagi na to, że HTML5 jest po prostu luźną kolekcją powiązanych standardów, nie istnieje jeden test obsługi. Opracowano wiele różnych testów sprawdzających obsługę wielu różnych własności lub nawet wsparcie dla określonej części własności. Sprawdzanie obsługi zwykle sprowadza się do poszukiwania właściwości napisanego w języku programowania obiektu bądź utworzenia własnego obiektu i użycia go w określony sposób. Zastanów się dwa razy, nim podejmiesz się próby napisania takiego kodu, gdyż łatwo zrobić to w zły sposób. Dla przykładu Twój kod, z nieznanych powodów, może w ogóle nie zadziałać na jakimś typie przeglądarki bądź szybko się zestarzeć. Zamiast tego warto rozważyć użycie Modernizra (www.modernizr.com) — małego, ciągle aktualizowanego narzędzia, które umożliwia sprawdzenie przystosowania przeglądarki do obsługi standardu HTML5 i podobnych własności. W to narzędzie wbudowano intrygujący mechanizm pozwalający na ominięcie problemów z nierozpoznawaniem właściwości CSS3 (więcej na stronie 244). Oto sposób wykorzystania Modernizra na swoich stronach.

1. Na witrynie projektu znajdź obszar zatytułowany Download Modernizr (ściągnij Modernizr). Kliknij przycisk Development (wersja rozwojowa), by ściągnąć plik. Powinien on mieć nazwę podobną do modernizr-2.0.6.js. Dokładna nazwa zależy od numeru najnowszej opublikowanej wersji. Niektórzy deweloperzy usuwają ją, zmieniając nazwę pliku na np. modernizr.js; w ten sposób możesz podmieniać kolejne wersje kodu bez potrzeby modyfikowania ścieżki do niego w kodzie HTML. Wskazówka: Pełen skrypt Modernizra jest odrobinę zbyt obszerny. Stworzono go z myślą o aktywnym testowaniu w trakcie konstruowania strony. Gdy już skończysz pracę nad stroną i będziesz gotów przesłać ją na serwer, warto wykorzystać „odchudzoną” wersję Modernizra. W tym celu w witrynie projektu należy kliknąć przycisk Production (wersja standardowa) wewnątrz pola Download Modernizr (ściągnij Modernizr). Zostaniesz przeniesiony na stronę, na której będziesz mógł wybrać (klikając pola wyboru) własności, których wykryciem jesteś zainteresowany, po czym stworzyć własną wersję pliku, klikając przycisk Generate (ceneruj).

2. Umieść plik w tym samym katalogu, co strona, lub w podfolderze — w drugim przypadku pamiętaj, żeby odpowiednio zmodyfikować ścieżkę do pliku (następny podpunkt).

3. W sekcji dokumentu HTML dołącz odniesienie do pliku JavaScript. Oto przykładowy kod:

Wykrywanie obsługi własności HTML5

…

Po załadowaniu strony uruchomiony zostanie skrypt Modernizra. Przetestuje on stopień obsługi kilkunastu własności w zaledwie kilka milisekund, po czym

ROZDZIAŁ 1. ♦ WPROWADZENIE DO HTML5

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

53

Korzystanie z HTML5 już dziś

utworzy obiekt Modernizr zawierający wyniki badania. Sprawdzenie właściwości obiektu pozwoli Ci określić, które własności są przez Twoją przeglądarkę wspierane. Wskazówka: Pełną listę testowanych własności oraz kod potrzebny do analizy każdej z nich znajdziesz na stronie www.modernizr.com/docs.

4. Napisz własny kod JavaScript, którego zadaniem będzie sprawdzenie wyników i wyświetlenie stosownego komunikatu. Oto fragment, który sprawdza, czy przeglądarka obsługuje własność przeciągnij-i-upuść (ang. drag-and-drop).



Wykrywanie obsługi własności HTML5

Werdykt brzmi...

Na rysunku 1.7 przedstawiono wyniki badania. Rysunek 1.7. Choć przykład ten ukazuje prawidłową metodę testowania wsparcia dla własności, podejście do poradzenia sobie z problemem, które tu przyjęto, nie jest doskonałe. Zamiast informować użytkownika o braku obsługi jakiejś własności, lepiej zaimplementować prowizoryczny sposób obejścia problemu (nawet jeśli nie będzie spisywał się tak dobrze jak odpowiednik w HTML5) lub po prostu zignorować problem (jeśli mowa o mało istotnym „wodotrysku”, który nie jest wymagany do użytkowania strony)

Wskazówka: W tym przykładzie użyto podstawowych, tradycyjnych technik JavaScriptu — odnajdywania elementu po identyfikatorze i jego modyfikacji. Jeśli nie orientujesz się, o co tu chodzi, w dodatku B znajdziesz krótki wstęp do języka JavaScript.

54

CZĘŚĆ I ♦ WPROWADZENIE DO JĘZYKA

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Korzystanie z HTML5 już dziś

Uzupełnianie braków przy użyciu wypełniania Modernizr pomaga wykryć luki w obsłudze przeglądarki. Informuje, kiedy dana właściwość nie będzie działać. Niestety, sam nie naprawi problemu. Do tego służy tzw. wypełnianie. W kontekście czysto informatycznym wypełnieniem nazywamy zestaw technik używanych do zapewnienia obsługi danej opcji lub własności. Odpowiadające mu angielskie słowo polyfill oznacza „szpachlówkę” i pochodzi ze świata budownictwa — szpachlówka jest substancją nakładaną na ścianę lub inną powierzchnię w celu wypełnienia ubytków. W HTML5 idealną szpachlówką jest ta, którą można łatwo dodać do strony, bez zbędnego wysilania się. Powinna zapewniać kompatybilność wsteczną w prosty, nierzucający się w oczy sposób, tak byś mógł używać HTML5 bez szukania dodatkowych metod obejścia problemu. Wypełnienie nie jest doskonałe. Niektóre z jego typów opierają się na innych technologiach, które same mogą być nie w pełni obsługiwane. Przykładowo jedna z technik symuluje działanie elementu na starych wersjach Internet Explorera, wykorzystując w tym celu wtyczkę Silverlight. Co jednak zrobić, jeśli użytkownik nie chce lub nie może jej zainstalować? W takim przypadku trzeba pomyśleć o innym rozwiązaniu. Inne techniki mogą mieć mniej własności niż właściwa opcja HTML5 lub słabszą wydajność. Co jakiś czas w tej książce natkniesz się na sugestie użycia takiego czy innego wypełnienia. Jeśli już teraz chcesz uzyskać więcej informacji na ten temat, rzuć okiem na całościowy katalog wypełnień dla HTML5 na witrynie GitHub (http://tinyurl.com/ polyfill). Uważaj jednak na to, że wypełnienia różnią się jakością, wydajnością i stopniem obsługi własności. Wskazówka: Sam fakt, iż istnieje jakieś gotowe wypełnienie obsługujące własność, na której Ci zależy, nie oznacza, że można je bezkrytycznie wykorzystać. Zanim podejmiesz ryzyko i dołączysz je do swojej strony, powinieneś je przetestować i sprawdzić, czy dobrze sprawdza się na różnych starszych przeglądarkach. Dowiedziałeś się o istnieniu narzędzi, takich jak liczniki danych statystycznych użycia przeglądarek, skrypty wykrywające obsługę własności oraz wypełnienia. Z ich pomocą będziesz w stanie samodzielnie wybrać własności HTML5 na swoją stronę. W następnym rozdziale poznasz bliżej pierwsze elementy tego standardu, które funkcjonują zarówno na starych, jak i nowych przeglądarkach. NIEOSZLIFOWANY DIAMENT

Modernizowanie IE przy użyciu Google Chrome Frame Przypuszczalnie najbardziej użytecznym wypełnieniem jest Google Chrome Frame — wtyczka dla Internet Explorera w wersjach 6., 7., 8. i 9. Wtyczka ta uruchamia przeglądarkę Chrome wewnątrz Internet Explorera, dlatego może on poprawnie wczytać strony HTML5. Niestety, Chrome Frame nie będzie działał na wszystkich stronach HTML5. Jest uruchamiany tylko na tych, do których dodano specjalne instrukcje, które na to pozwalają.

Poważnym ograniczeniem wtyczki Chrome Frame jest sam fakt, że musi zostać zainstalowana, nim witryny będą mogły z niej skorzystać. Jeśli użytkownik jest gotów jej użyć, czemu nie miałby uruchomić pełnej wersji Chrome zamiast Internet Explorera? Jeżeli jednak pragniesz dowiedzieć się więcej o projekcie, jego pełną dokumentację udostępniono pod adresem http://code.google.com/ chrome/chromeframe.

ROZDZIAŁ 1. ♦ WPROWADZENIE DO HTML5

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

55

Korzystanie z HTML5 już dziś

56

CZĘŚĆ I ♦ WPROWADZENIE DO JĘZYKA

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

2 Nowe podejście do projektowania stron

P

rzez ponad dwie dekady powszechnego dostępu do sieci witryny internetowe zmieniły się dramatycznie. Zaskakujące jest to, że zmiana ta nie wynikała z transformacji sieci, lecz z tego, jak stare elementy języka HTML przetrwały do naszych czasów. Zasadniczo twórcy stron używają na swoich witrynach tych samych znaczników HTML, co ich poprzednicy dziesięć lat temu.

Największą popularnością cieszy się jeden znacznik — skromny element (ang. division, czyli podział) — który jest filarem wszystkich współczesnych stron internetowych. Za jego pomocą można w łatwy sposób podzielić dokument HTML na nagłówki, panele boczne, paski nawigacji itp. Wystarczy dodać zdrową dawkę formatowania CSS, by przeobrazić sekcje dokumentu w kolorowe paski czy cieniowane kolumny i ułożyć je w odpowiednim miejscu. Techniki konstruowania stron oparte na elemencie są proste, użyteczne i elastyczne — lecz nie do końca przystępne. Patrząc na napisany przez kogoś innego dokument, trudno się połapać, co dany element reprezentuje i jak spaja stronę w całość. Aby w ogóle mieć szansę na zrozumienie, o co w tym wszystkim chodzi, trzeba przeskakiwać pomiędzy kodem strukturalnym, arkuszami stylów i wygenerowaną w przeglądarce stroną. Problem tego typu zaistnieje za każdym razem, gdy otwiera się napisany przez kogoś innego bardziej złożony dokument, mimo iż ta osoba skorzystała z podobnych technik projektowania. Problem ten wprowadzał w konsternację twórców stron. Czy nie byłoby wspaniale zastąpić znacznik czym lepszym? Czymś, co działałoby tak samo jak , ale miało bardziej precyzyjny przekaz. Czymś, co pozwoliłoby oddzielić panele boczne od nagłówków i sekcje z reklamami od menu. HTML5 spełnia te warunki przy użyciu zestawu nowych elementów do konstruowania strony. Wskazówka: Jeśli Twoje umiejętności posługiwania się arkuszami stylów pozostawiają wiele do życzenia, może się okazać, że nie jesteś gotów, by przebrnąć przez ten rozdział. Na szczęście, w dodatku A znajdziesz skondensowany wstęp do podstaw CSS, zawierający wszystko, co może Ci się przydać.

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

ROZDZIAŁ

Wstęp do elementów semantycznych

Wstęp do elementów semantycznych Nowe elementy semantyczne HTML5 wyśmienicie poprawiają strukturę dowolnej strony internetowej. Komponenty te nadają nowe znaczenie zapisanym w nim treściom. Dla przykładu nowy element wyznacza właściwie sformatowaną datę lub godzinę na Twojej stronie. Oto bardzo prosty przykład jego wykorzystania. Rejestracja rozpoczyna się 2012-11-25.

Po wczytaniu strony przeglądarka wygeneruje następującą zawartość: Rejestracja rozpoczyna się 2012-11-25.

Warto wiedzieć, że znacznikowi nie przypisano żadnego stylu formatowania. W rzeczywistości czytelnik strony nie będzie w stanie zauważyć, że umieszczono na niej nowy znacznik. Możesz zdefiniować własny styl formatowania przy użyciu CSS, lecz domyślnie element wpis w elemencie nie będzie się niczym różnił od zwykłego tekstu. Znacznik zaprojektowano z myślą o krótkiej informacji. Jednakże większość semantycznych elementów HTML5 taka nie jest. Powstały one w celu wyznaczania pokaźnych sekcji dokumentu. Przykładowo element wskazuje zbiór nawigacyjnych odnośników. Z kolei element obejmuje umieszczaną u dołu strony stopkę dokumentu. Podobnie jest z mniej więcej tuzinem nowych komponentów. Uwaga: Choć elementy semantyczne wydają się najmniej imponujące z wprowadzonych w HTML5 zmian, stanowią dużo większą część nowych elementów tego standardu. Wszystkie elementy semantyczne posiadają jedną cechę wspólną — same nic nie robią. Taki znacznik osadza na stronie w pełni funkcjonalny odtwarzacz filmów (strona 158). Po co więc zawracać sobie głowę zestawem nowych komponentów, jeśli nie wpływają one na sposób działania strony? Jest kilka dobrych powodów. • Łatwość edytowania i utrzymania. Kod tradycyjnej strony HTML często może

okazać się trudny do zinterpretowania. Zrozumienie układu całej kompozycji i znaczenia różnych jej sekcji wymaga analizy dołączonego do strony arkusza stylów. Korzystając z elementów semantycznych HTML5, podajesz dodatkowe informacje o strukturze dokumentu wewnątrz znaczników. Ułatwia to pracę zarówno Tobie, gdy przyjdzie uaktualnić stronę po miesiącach od czasu jej utworzenia, jak i innym osobom, które chcą zmodyfikować Twój kod. • Dostępność. Jednym z najważniejszych zagadnień we współczesnym pro-

jektowaniu witryn jest tworzenie dostępnych stron — czyli stron pozwalających na nawigowanie po nich za pomocą czytników ekranu lub innych narzędzi ułatwiających poruszanie się po sieci osobom niedowidzącym. Obecnie firmy tworzące tego typu urządzenia i oprogramowanie wciąż usiłują dogonić standard HTML5. Gdy to zrobią, będą w stanie zapewnić niepełnosprawnym użytkownikom o wiele lepszy standard przeglądania stron. Wyobraź sobie np. jak, dzięki obecności znacznika , czytnik ekranu od razu odnajduje pasek nawigacji na Twojej stronie.

58

CZĘŚĆ I ♦ WPROWADZENIE DO JĘZYKA

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Modernizacja tradycyjnej strony HTML

Wskazówka: Aby dowiedzieć się więcej o najlepszych praktykach ułatwiania dostępu do zawartości stron, odwiedź witrynę WAI (ang. Web Accessibility Initiative — „Inicjatywa na rzecz dostępności w sieci”) pod adresem www.w3.org/WAI. Warto też zyskać nowe spojrzenie na problem i dowiedzieć się, jak wygląda odczytywanie strony przy użyciu czytnika ekranu (oraz dlaczego właściwa aranżacja nagłówków jest tak ważna); w tym celu zobacz w serwisie YouTube film dostępny pod adresem http://tinyurl.com/6bu4pe. • Optymalizacja wyszukiwarek. W celu zaindeksowania witryn w bazie danych

Google i inne wyszukiwarki korzystają z wszechstronnych robotów — zautomatyzowanych programów poruszających się po sieci i wychwytujących każdą stronę, na jaką się natkną. Im dokładniej Google przeskanuje Twoje strony, tym większa jest szansa na to, że dopasuje je do wysłanego przez użytkownika sieci zapytania i umieści na szczycie listy rezultatów wyszukiwania. Roboty indeksujące już teraz są przystosowane do odnajdywania semantycznych elementów składni HTML5 i wydobywania z nich istotnych informacji. • Własności zaplanowane. Nowe przeglądarki i narzędzia do modyfikacji stron

będą wykorzystywać elementy semantyczne HTML5 w taki czy inny sposób. Przykładowo przeglądarka mogłaby mieć na wyposażeniu dodatkowy, przypominający okienko nawigacji z Worda 2010 segment, który pozwalałby użytkownikowi na przeskoczenie do interesującej go sekcji (Chrome ma już działającą w ten sposób wtyczkę). Podobnie narzędzia projektowania stron mogłyby zawierać opcje umożliwiające łatwe konstruowanie i edytowanie menu poprzez zarządzanie wprowadzoną do znacznika treścią. Koniec końców, jeśli umiejętnie posłużysz się semantycznymi znacznikami HTML5, będziesz tworzyć lepiej zorganizowane i łatwe do rozszyfrowania strony, gotowe na nadejście nowej generacji przeglądarek i narzędzi programistycznych. Jeśli jednak Twój umysł wciąż jest przywiązany do staromodnych technik wykorzystania HTML-u, w przyszłości możesz pozostać w tyle.

Modernizacja tradycyjnej strony HTML Najłatwiejszym wprowadzeniem do nowych elementów semantycznych i najlepszym sposobem na zmodernizowanie strony jest dodanie do klasycznego dokumentu HTML nowinek ze świata HTML5. Na rysunku 2.1 znajdziesz pierwszy przykład, z którym przyjdzie Ci się zmierzyć. Jest to prosta, pojedyncza strona, na której zamieszczono jeden artykuł. Inne rodzaje treści (post na blogu, opis produktu czy opowiadanie) również mogą się przydać. Wskazówka: Kody omówione w tej książce możesz przejrzeć na stronie helion.pl/ksiazki/htm5np.htm lub z niej ściągnąć. Gdybyś chciał samodzielnie zmodyfikować przedstawiony na rysunku 2.1 przykład, zacznij od strony ApocalypsePage_Original.html. Jeśli chcesz zobaczyć efekt wprowadzanych zmian, przejdź do wersji ApocalypsePage_Revised.html.

ROZDZIAŁ 2. ♦ NOWE PODEJŚCIE DO PROJEKTOWANIA STRON

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

59

Modernizacja tradycyjnej strony HTML

Rysunek 2.1. Ta zwyczajna strona HTML ma prosty, typowo dokumentowy układ. Dołączony do niej arkusz stylów zapewnia formatowanie treści

Struktura strony w stylu klasycznym Istnieje wiele sposobów formatowania stron podobnych do przedstawionej na rysunku 2.1. Do skonstruowania tej strony użyto wyłącznie najlepszych praktyk HTML, co oznacza, że nie ma na niej znaczników formatujących. Nie znajdziesz na niej elementów czy , atrybutu style w znacznikach lub równie okropnych co przestarzałych elementów . Zamiast tego otrzymujesz precyzyjny układ strony z załączonym zewnętrznym arkuszem stylów.

60

CZĘŚĆ I ♦ WPROWADZENIE DO JĘZYKA

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Modernizacja tradycyjnej strony HTML

Oto skrócona wersja kodu, w której wyróżniono znaczniki, do jakich odwołuje się załączony arkusz stylów:

Jaki czeka nas koniec?

Scenariusze końca wszelkiego znanego nam życia

Autor: Ray Inkarnacja

W tym momencie pewnie czujesz się wprost...

...

Koniec świata według Majów

Sceptycy twierdzą, że...

...

Przedstawione wyżej apokaliptyczne...

O nas ...

Copyright © 2011

W porządnie napisanej, tradycyjnej stronie HTML (takiej jak ta) style nakładane na znaczniki i formatują zawartość dokumentu. Znacznik służy do formatowania krótkiego fragmentu tekstu wewnątrz innego znacznika. Z kolei pozwala na formatowanie całych sekcji strony i ustanawia przy tym jej układ (rysunek 2.2). Nałożone przez arkusz CSS formatowanie nie jest skomplikowane. Całej stronie nadano stałą szerokość (800 pikseli), żeby zapobiec rozciąganiu się tekstu na szerokoekranowych monitorach. Nagłówek umieszczono wewnątrz niebieskiego obszaru. Z kolei treść dokumentu została wyrównana z obydwu stron, a zawartość stopki wyrównano do środka w poziomie. Przy użyciu elementu nakładanie na dokument stylów jest bajecznie proste. Spójrz np. na przedstawione niżej zasady arkusza stylów, które formatują obszar nagłówka. PRZYSPIESZAMY

Co oznaczają te kropki (…)? W książce nie było możliwości ukazania całego kodu do każdego przykładu — zwiększenie jej objętości do dwunastu tysięcy stron i w następstwie zmiecenie z powierzchni Ziemi całego lasu nie wchodziło w rachubę. Udało się natomiast zaprezentować podstawową strukturę strony i wszystkich ważnych elementów. Dlatego też w tej książce używam tzw. elipsy (figury retorycznej umożliwiającej pominięcie fragmentu wypowiedzi), którą oznacza się wielokropkiem.

Dla przykładu przyjrzyj się zamieszczonemu na tej stronie fragmentowi kodu. Zawiera on treść znacznika strony z rysunku 2.2, lecz pomija tekst z większości akapitów, czyli większą część artykułu pod nagłówkiem „Koniec świata według Majów” oraz pełną listę odnośników ze stopki. Wiesz już jednak, że ze strony tej książki (helion.pl/ksiazki/htm5np.htm) możesz ściągnąć pliki z przykładami, by samodzielnie prześledzić każdy najdrobniejszy detal strony.

ROZDZIAŁ 2. ♦ NOWE PODEJŚCIE DO PROJEKTOWANIA STRON

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

61

Modernizacja tradycyjnej strony HTML

Rysunek 2.2. Znaczniki dzielą stronę na trzy segmenty: nagłówek u góry strony, treść na środku i stopkę u dołu dokumentu

/* Obstylowuje element , który wyznacza obszar nagłówka (niebieski, obramowany prostokąt). */ .Header { background-color: #7695FE; border: thin #336699 solid; padding: 10px; margin: 10px; text-align: center; } /* Obstylowuje wszystkie znaczniki wewnątrz obszaru nagłówka (czyli, w tym wypadku, tytuł artykułu). */ .Header h1 { margin: 0px; color: white; font-size: xx-large; } /* Nakłada style na podtytuł w obszarze nagłówka. */ .Header .Teaser { margin: 0px; font-weight: bold; } /* Nakłada style na notkę o autorze. */ .Header .Byline { font-style: italic; font-size: small; margin: 0px; }

Łatwo zauważyć, że w przykładzie prawidłowo zastosowano selektory kontekstowe (strona 381). Użyto tu np. selektora .Header h1 w celu sformatowania wszystkich znaczników wewnątrz obszaru nagłówka.

62

CZĘŚĆ I ♦ WPROWADZENIE DO JĘZYKA

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Modernizacja tradycyjnej strony HTML

Wskazówka: Przykład ten przeanalizowałem dokładnie w dodatku A. Jeśli sądzisz, że przydałaby Ci się powtórka ze służących do formatowania dokumentu zasad CSS, przejdź na stronę 384.

Struktura strony w HTML5 Obecnie znacznik jest filarem projektowania stron internetowych. Stanowi prosty w użyciu, wszechstronny kontener, umożliwiające nadanie obstalowania dowolnemu fragmentowi strony. Niestety, istnieje jeden czynnik, który go ogranicza — element nie dostarcza żadnych informacji o strukturze strony. Po natknięciu się na znacznik dowolna osoba (lub robot indeksujący albo narzędzie deweloperskie) stwierdzi, że znalazła odrębną sekcję dokumentu, lecz nie będzie w stanie określić jej funkcji. Aby zaradzić tej sytuacji, możesz, korzystając z HTML5, zastąpić niektóre elementy bardziej opisowymi znacznikami semantycznymi. Elementy semantyczne zachowują się tak samo jak komponent : grupują fragmenty kodu, nie nakładają własnego formatowania na zawartą w nich treść i stanowią idealne punkty zaczepienia dla arkusza stylów. Ich wadą jest to, że wymagają przestrzegania na stronie dodatkowych reguł. Oto kod dokumentu HTML z rysunku 2.1 po drobnej modyfikacji. Dodano dwa znaczniki HTML5: i .

Jaki czeka nas koniec?

Scenariusze końca wszelkiego znanego nam życia

Autor: Ray Inkarnacja

W tym momencie pewnie czujesz się wprost...

...

Koniec świata według Majów

Sceptycy twierdzą, że...

...

Przedstawione wyżej apokaliptyczne...

O nas ...

Copyright © 2011

W tym przykładzie elementy i zastąpiły dwa znaczniki . Twórcy stron, którzy chcą dokonać poprawek na dużej witrynie, mogliby osadzić istniejący element wewnątrz właściwego semantycznego elementu HTML5. Jak widać, znaczniki i mają atrybut z nazwą klasy. Dzięki temu nie trzeba modyfikować arkusza stylów. Z drugiej strony, atrybuty klas nie są tu już potrzebne, więc można się ich pozbyć:

Jaki czeka nas koniec?

Scenarios Scenariusze końca wszelkiego znanego nam życia

ROZDZIAŁ 2. ♦ NOWE PODEJŚCIE DO PROJEKTOWANIA STRON

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

63

Modernizacja tradycyjnej strony HTML

Autor: Ray Inkarnacja

Na stronie tej umieszczono tylko jeden element , toteż można się odnieść do niego bezpośrednio. Niżej znajdziesz zmodyfikowany fragment arkusza CSS dodającego style dla elementu . /* Obstylowuje znacznik (obramowany, niebieski prostokąt) */ header { ... } /* Obstylowuje wszystkie nagłówki wewnątrz znacznika (tytuł artykułu). */ header h1 { ... } /* Formatuje podtytuły zapisane w znaczniku . */ header .Teaser { ... } /* Formatuje notkę o autorze wewnątrz znacznika . */ header .Byline { ... }

Oba podejścia są równie poprawne. Tak jak przy wielu decyzjach, w projektowaniu stron w HTML5 jest miejsce na dyskusje, lecz nikt nikomu niczego nie narzuca. Zwróć uwagę, że nie zmieniono znacznika obejmującego główną część artykułu. Nie ma po temu żadnych przeciwwskazań, gdyż strony napisane zgodnie ze standardem HTML5 mogą zawierać mieszaninę nowych elementów semantycznych i starych komponentów . W HTML5 nie wprowadzono nowego znacznika (treść), więc użycie ma sens. Wskazówka: Zapisana w tej formie strona nie będzie wczytywana poprawnie w przeglądarce Internet Explorer starszej niż IE 9. Istnieje prosty sposób na obejście tego problemu (strona 71). Nim go omówię, przyjrzyjmy się wpierw kilku innym semantycznym znacznikom, którymi wzbogacisz swoje strony.

Istnieje jeszcze jeden znacznik, który warto zawrzeć w naszym przykładzie. HTML5 wprowadza element , który reprezentuje pewien samoistny fragment treści, taki jak wpis na blogu czy wiadomość. Element zawiera cały kram komponentów, w tym tytuły, notkę o autorze i — oczywiście — główną treść. Po dodaniu do dokumentu znacznika jego struktura będzie wyglądać następująco:

Jaki czeka nas koniec?

Scenariusze końca wszelkiego znanego nam życia

Autor: Ray Inkarnacja

W tym momencie pewnie czujesz się ´wprost...

...

Koniec świata według Majów

Sceptycy twierdzą, że...

...

64

CZĘŚĆ I ♦ WPROWADZENIE DO JĘZYKA

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Modernizacja tradycyjnej strony HTML

Przedstawione wyżej apokaliptyczne...

O nas ...

Copyright © 2011

Na rysunku 2.3 prezentuję szkielet struktury strony. Rysunek 2.3. Po solidnym przeprojektowaniu strona zawiera trzy elementy typowe dla standardu HTML5. O ile starą strukturę strony można było odczytać tak: „Oto strona podzielona na trzy sekcje”, jej nową wersję odczytujemy tak: „Oto artykuł z nagłówkiem i stopką”

Mimo że strona prezentuje się tak samo jak starsza jej wersja, zawiera więcej istotnych informacji. Robot indeksujący, który skanuje Twoją stronę, może szybko zlokalizować treść (w znaczniku ) oraz jej tytuł (w elemencie ). Jednak nie zwróci uwagi na stopkę strony (komponent ). Uwaga: Zdarza się, że jeden artykuł jest podzielony na kilka stron. Większość profesjonalistów z branży zgadza się, że każda część artykułu powinna być zapisana w oddzielnym znaczniku nawet wtedy, kiedy nie jest samodzielną całością. Ten niewygodny kompromis jest jednym z wielu powstałych wskutek zderzenia założeń semantycznych z praktycznymi, prezentacyjnymi dylematami sieci.

Podtytuły i znacznik W poprzednim przykładzie wykorzystano znacznik . HTML5 wprowadza jeden dodatkowy element służący do oznaczania nagłówków — komponent . Oto oficjalne wskazówki dotyczące sposobu jego wykorzystania. Po pierwsze, przy zwykłych tytułach, niedotyczących wyjątkowych treści najlepiej zastosować jeden z tradycyjnych znaczników nagłówków (, , itd.). Jaki czeka nas koniec?

Jeśli tytuł i podtytuł mają występować po sobie, można je osadzić w elemencie . Odradza się umieszczanie wewnątrz niego innych znaczników niż numerowane elementy nagłówków.

Jaki czeka nas koniec? Scenariusze końca wszelkiego znanego nam życia

Jeżeli potrzebujesz rozbudowanego nagłówka — takiego, który zawiera tytuł oraz dodatkowe treści (np. podsumowanie, datę opublikowania, notkę o autorze, grafikę czy odnośniki do pokrewnych tematów) — powinieneś zastosować znacznik . ROZDZIAŁ 2. ♦ NOWE PODEJŚCIE DO PROJEKTOWANIA STRON

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

65

Modernizacja tradycyjnej strony HTML

Jaki czeka nas koniec?

Autor: Ray Inkarnacja

Oczywiście, jeżeli w grę wchodzi rozbudowany nagłówek z podtytułem, można osadzić w nim numerowane znaczniki wewnątrz elementu , po czym otoczyć go elementem .

Jaki czeka nas koniec? Scenariusze końca wszelkiego znanego nam życia

Autor: Ray Inkarnacja

Powyższy przykład wygląda niemal tak samo jak poprzedni. Wprowadzono w nim drobną zmianę. Podtytuł oznaczono elementem zamiast

. Na pierwszy rzut oka kod ten wydaje się dziwaczny. Gdy spojrzysz na niego pod czysto strukturalnym kątem, zauważysz, że sugeruje, iż cała występująca po nim treść jest częścią podsekcji wyznaczonej przez element — co nie ma wielkiego sensu. I choć nie wpłynie to na proces wczytywania strony, taki układ znaczników ma wpływ na sposób, w jaki przeglądarki i inne narzędzia odczytują konspekt dokumentu HTML (szczegóły na stronie 82). Na szczęście, znaczniki automatycznie rozwiązują wszelkie wynikające z tego problemy. Dzięki nim przeglądarka zwraca uwagę jedynie na znaczniki wyższego szczebla (w tym przypadku na element ). Pozostałe nagłówki są wyświetlane przez przeglądarkę, lecz nie stają się częścią szkicu dokumentu. Jest to logiczne zachowanie, gdyż w tym kontekście nagłówki wskazują podtytuły, a nie podsekcje dokumentu.

Dołączanie rysunków przy użyciu znacznika Grafiki i obrazy pojawiają się na wielu stronach. Stojąca za ideą rysunku na witrynie koncepcja wymusza podejście różne od tradycyjnego sposobu wczytywania ilustracji. Według specyfikacji HTML5 element definiujący rysunek (ang. figure) powinien w działaniu przypominać ilustrację w książce — innymi słowy, obraz niebędący integralną częścią tekstu, który jednak się do niego odnosi. Zwykle tekst powinien opływać rysunek, co oznacza, że można go umieścić w najlepszym dogodnym miejscu wewnątrz treści (zamiast go przypisywać do jakiegoś słowa czy elementu). W pobliżu znacznika rysunku można osadzić podpis. W poniższym przykładzie ukazano fragment kodu apokaliptycznego artykułu, do którego dodano rysunek. (Zawiera on też akapity poprzedzający grafikę i po niej następujący, dzięki czemu będziesz mógł zlokalizować omawiany znacznik w dokumencie).

W tym momencie pewnie czujesz się wprost...

66

CZĘŚĆ I ♦ WPROWADZENIE DO JĘZYKA

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Modernizacja tradycyjnej strony HTML

Czy to ty przetrwasz koniec, po tym jak jeden z tych ´apokaliptycznych scenariuszy się sprawdzi?

Nie bądź jednak taki beztroski...

W dokumencie do pozycjonowania rysunku wykorzystano zewnętrzny arkusz stylów (w nim ustawiono marginesy, to on kontroluje formatowanie podpisu i rysuje obramowanie). Oto przykładowa zawartość pliku CSS: /* Obstylowuje pływający obszar rysunku. */ .FloatFigure { float: left; margin-left: 0px; margin-top: 0px; margin-right: 20px; margin-bottom: 0px; } /* Formatuje podpis pod rysunkiem. */ .FloatFigure p { max-width: 200px; font-size: small; font-style: italic; margin-bottom: 5px; }

Na rysunku 2.4. ukazano powyższy przykład w akcji. Rysunek 2.4. Teraz rysunek pojawił się w artykule. W kodzie dokumentu znajduje się zaraz po pierwszym akapicie, tak że opływa tekst z lewej strony. Zauważ, że szerokość podpisu rysunku jest ograniczona, co powoduje, iż powstaje przyzwoicie wyglądający akapit

Jeśli tworzyłeś ten rodzaj pola rysunku wcześniej, zaciekawi Cię, że HTML5 zapewnia dodatkowe elementy semantyczne zaprojektowane z myślą o takim zastosowaniu. Zamiast korzystać z nudnego znacznika , warto użyć elementu ROZDZIAŁ 2. ♦ NOWE PODEJŚCIE DO PROJEKTOWANIA STRON

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

67

Modernizacja tradycyjnej strony HTML

. Jeżeli na dodatek chcesz umieścić pod rysunkiem podpis, masz możliwość osadzenia go w elemencie .

Czy to ty przetrwasz koniec, po tym jak jeden z tych apokaliptycznych scenariuszy się sprawdzi?

Oczywiście, sformatowanie nowej wersji dokumentu za pomocą arkusza stylów będzie należało do Ciebie. (W tym przykładzie oznacza to, że będziesz musiał zmienić selektor podpisu. Teraz ma on postać .FloatFigure p, lecz po zmianie właściwe obstalowanie zapewni selektor .FloatFigure figcaption). Wskazówka: Zauważ, że element jest formatowany w oparciu o nazwę przypisanej mu klasy (FloatFigure), a nie nazwę znacznika. Wynika to z tego, że możesz formatować różne rysunki w odmienny sposób. Przykładowo mógłbyś sprawić, żeby jeden rysunek tekst opływał z lewej, a drugi — z prawej. Aby zachować tę elastyczność, opłaca się formatować różne rysunki za pomocą różnych klas. W przeglądarce rysunek wygląda tak samo. Cała różnica polega na tym, że teraz cel jego pojawienia się na stronie jest jasny. Nawiasem mówiąc, element może poza tekstem zawierać inne komponenty, których umieszczenie wydaje się logiczne. Warto umieścić w nim odnośniki i ikony. Warto podkreślić, że w niektórych przypadkach znacznik może zawierać pełen opis obrazka, co sprawia, że atrybut alt staje się zbędny. Wtedy można go usunąć ze znacznika .

Ludzka czaszka na piasku

Upewnij się tylko, że nie przypisałeś atrybutowi alt pustego łańcucha znaków, gdyż dla czytnika ekranu oznaczałoby to, że Twoja grafika jest czysto reprezentacyjna i można ją pominąć.

Dodawanie ramki redaktorskiej — znacznik Nowy element reprezentuje treść, która w jakiś sposób odnosi się do otaczającego ją tekstu. Możesz przykładowo użyć elementu tak samo jak ramki redaktorskiej w druku, aby wprowadzić pokrewny temat lub szerzej omówić jakieś poruszone w głównej części dokumentu zagadnienie (np. ramka na stronie 70). Ma też sens użycie elementu w roli kontenera dla związanych z treścią reklam, odnośników czy wyjętych z treści cytatów (rysunek 2.5). Efekt ten łatwo utworzyć, używając wyświechtanego elementu , lecz znacznik zapewnia bardziej logiczną metodę oznaczania fragmentów treści.

... „I kto tu teraz rządzi, tatku?”.

Nie wiadomo, w jaki sposób doszło do powstania wszechświata, więc nie ma ´pewności, że się ot tak nie skończy.

Niewyjaśniona osobliwość

68

CZĘŚĆ I ♦ WPROWADZENIE DO JĘZYKA

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Kompatybilność z przeglądarkami

Rysunek 2.5. Wyrzucanie cytatów jest techniką zaczerpniętą ze świata druku. Zwraca uwagę czytelnika i wyróżnia istotne treści

Tym razem zadeklarowany w arkuszu stylów selektor przenosi wyrzucony cytat na prawą stronę dokumentu. Jeśli jesteś ciekaw, jak to się dzieje, przejrzyj szczegółowy kod: .PullQuote { float: right; max-width: 300px; border-top: thin black solid; border-bottom: thick black solid; font-size: 30px; line-height: 130%; font-style: italic; padding-top: 5px; padding-bottom: 5px; margin-left: 15px; margin-bottom: 10px; } .PullQuote img { vertical-align: bottom; }

Elementy semantyczne a kompatybilność z przeglądarkami Kompatybilność z przeglądarkami

To małe ćwiczenie było całkiem ciekawe, lecz jego rezultat nie prezentuje się zbyt dobrze po uruchomieniu strony na starszej przeglądarce. Zanim przejdziesz do szczegółowego omówienia problemu, warto sprawdzić, które wersje przeglądarek zapewniają obsługę samych elementów semantycznych. Szczegóły znajdziesz w tabeli 2.1. Na szczęście, brak wsparcia ze strony starszych przeglądarek łatwo naprawić. W końcu, elementy semantyczne nic nie robią. Aby mogły działać poprawnie,

ROZDZIAŁ 2. ♦ NOWE PODEJŚCIE DO PROJEKTOWANIA STRON

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

69

Kompatybilność z przeglądarkami

Tabela 2.1. Obsługa semantycznych znaczników HTML5 przez przeglądarki

Najstarsza, obsługująca standard wersja.

IE

Firefox Chrome Safari

Opera

Safari iOS

Android

9

4

11.1

4

2.1

8

5

wystarczy, że przeglądarka będzie je traktować jak zwykłe znaczniki . W tym celu należy zmierzyć się z dwoma wyzwaniami. W pierwszym rzędzie musisz zwalczyć nawyk przeglądarek do wyświetlania każdego nieznanego elementu w jednej linii. Większość nowych znaczników semantycznych (w tym wszystkie zaprezentowane w tym rozdziale, z wyjątkiem ) to znaczniki blokowe, co oznacza, że powinny pojawiać się w nowej linii i zachować mały odstęp z wierszami, które je poprzedzają i następują po nich. Przeglądarki, które nie obsługują znaczników HTML5, nie wyświetlą ich jak elementów blokowych, wskutek czego całość strony może zostać wyświetlona w formie zbitej masy. Aby poradzić sobie z tym problemem, wystarczy w arkuszu stylów dodać dodatkową regułę. Oto superzasada nakładająca styl blokowy na wszystkie dziewięć elementów HTML5, które tego wymagają: article, aside, figure, figcaption, footer, header, hgroup, nav, section, summary { display: block; }

PRZYSPIESZAMY

Jak wybierano nowe elementy semantyczne? Przed wynalezieniem HTML5 twórcy standardu dokładnie przeanalizowali spory wycinek ówczesnych stron internetowych. Nie ograniczyli się do przejrzenia wyłącznie swoich ulubionych witryn; zapoznali się z danymi statystycznymi zebranymi przez Google z ponad miliarda stron. Wyniki tego badania znajdziesz pod adresem http://code.google.com/webstats. Lepiej tej strony nie oglądać w Internet Explorerze, gdyż przeglądarka ta nie będzie w stanie wygenerować wszystkich wymyślnych wykresów.

Na początek badacze z Google dowiedzieli się ze swego badania, że na większości stron nie było żadnych atrybutów klas (czy nawet arkuszy stylów). Następnie zespołowi Google udało się zebrać krótką listę interesujących ich nazw. Zaliczały się do nich słowa: footer, header, title, menu, nav — co odpowiada nazwom nowych elementów semantycznych w HTML5: , i . Pojawiły się też nazwy (np. copyright i search), których istnienie wskazuje na możliwość pojawienia się nowych, jeszcze nieutworzonych znaczników.

Przeprowadzony przez Google sondaż pozwolił na przeanalizowanie kodu i skompilowanie listy nazw klas wykorzystywanych przez twórców stron na ich witrynach. Nazwy klas miały zdradzać przeznaczenie elementu, co umożliwiłoby rozpoznanie, w jaki sposób strony są budowane. Gdyby przykładowo okazało się, że wszyscy twórcy używają znacznika o nazwie klasy header („nagłówek”), logicznym wnioskiem byłoby stwierdzenie, że wszyscy umieszczają nagłówki dokumentów u góry swoich stron.

Z sondażu Google płynął prosty wniosek: sieć jest przepełniona podobnymi do siebie projektami — stronami z wydzielonymi sekcjami nagłówka (header), stopki (footer) ramek (sidebar) i menu nawigacji (nav). Okazało się, że każdy twórca stron ma inne podejście do ich konstruowania. Tylko krok dzielił ten wniosek od decyzji o rozszerzeniu języka HTML o kilka nowych elementów, które ujęłyby znaczenie tego, co stawało się powszechną praktyką w sieci. W rezultacie powołano do życia nowe znaczniki HTML5.

70

CZĘŚĆ I ♦ WPROWADZENIE DO JĘZYKA

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Kompatybilność z przeglądarkami

Przedstawiona tu reguła nie będzie mieć żadnego wpływu na przeglądarki rozpoznające elementy HTML5, gdyż wszystkie one automatycznie nakładają na nowe komponenty właściwość CSS display: block. Nie wpłynie też na żadne inne reguły, których użyłeś do formatowania tych elementów — zostaną one po prostu dodane do zestawu stylów. Pierwsza technika wystarczy, aby rozwiązać problem na większości przeglądarek, lecz „większość” nie dotyczy Internet Explorera 8 i starszych jego wersji. Starsze edycje IE stawiają nowe wyzwanie: odmawiają nałożenia arkusza stylów na nieznane sobie elementy. Na szczęście, znany jest sposób na obejście tego problemu. Można zmusić IE do rozpoznania nowego znacznika przy użyciu instrukcji języka JavaScript. Przykładowo przedstawiony niżej kod sprawi, że Internet Explorer zacznie rozpoznawać znacznik .

Zamiast pisać ten kod, możesz po prostu dołączyć gotowy skrypt do swojej strony (jego działanie opisano na witrynie http://tinyurl.com/nlcjxm). Wystarczy, że wewnątrz znacznika dodasz bezpośrednie odwołanie do niego:

...

...

Kod ten pobiera z witryny html5shim.googlecode.com skrypt, który uruchamiany jest jeszcze przed wczytaniem strony przez przeglądarkę. Skrypt ten jest krótki i treściwy — użyto w nim przedstawionego wyżej kodu do zadeklarowania wszystkich nowych elementów. Pozwala to nałożyć na nie style. Po dodaniu omówionej wcześniej superreguły wszystkie nowe elementy będą wyświetlane prawidłowo. Pozostaje Ci tylko wykorzystać nowe znaczniki i dołączyć do strony własny arkusz stylów. Jednak skrypt html5.js zadziała tylko w starszej wersji Internet Explorera. Jeśli zależy Ci na prędkości wczytywania strony, możesz wprowadzić dodatkową instrukcję warunkową, by uniknąć wysyłania żądania przesłania pliku JavaScript:

...

...

...

Zwróć uwagę, że odniesienie znajduje się w instrukcji warunkowej. W ten sposób wyłącznie wersje Internet Explorera starsze niż IE9 odczytają bibliotekę — pozostałe przeglądarki zignorują ten fragment kodu. Od tego momentu możesz używać elementu bez większych problemów. Ta drobna zmiana wystarczy, aby uruchomić zaprezentowany na stronie 194 program graficzny we wcześniejszych edycjach Internet Explorera. Uwaga: Jeśli chcesz zapisać na płótnie tekst (opcja ta zostanie omówiona na stronie 208), będziesz musiał posłużyć się biblioteką Canvas-text, która współpracuje ze skryptem ExplorerCanvas. Ściągniesz ją ze strony http://code.google.com/p/canvas-text. Biblioteka CanvasExplorer nie jest doskonała. Jeśli zaimplementujesz zaawansowane własności, prędzej czy później natrafisz na coś, co nie będzie wyglądać tak, jak powinno. Do grupy opcji, których ten skrypt nie wspiera w pełni (przynajmniej w czasie pisania tych słów), należą: promieniste gradienty, cieniowanie, wycinanie obszarów, przetwarzanie surowych pikseli i konwersja obrazu na adres URL. Jeżeli planujesz posłużyć się płótnem w celu utworzenia ambitnego projektu — np. animacji lub gry — może się okazać, że ExplorerCanvas nie działa dość szybko, by nadążyć za tempem wyświetlania. W takim przypadku zaleca się użycie innego wypełnienia przeznaczonego do wykonywania złożonych obliczeń, takiego jak Silverlighte lub Flash. Wykaz wszystkich dostępnych opcji znajdziesz na witrynie GitHub, pod adresem http://tinyurl.com/polyfills. Możesz też sięgnąć po jedno z najlepszych rozwiązań, czyli darmową bibliotekę FlashCanvas (http://code.google.eom/p/flashcanvas). Podobnie jak w przypadku skryptu ExplorerCanvas, dołączenie jej do strony jest kwestią dopisania jednej linijki kodu. Różnica polega na tym, że FlashCanvas działa w oparciu o wtyczkę Flasha, a nie język VML. FlashCanvas wyewoluował w profesjonalną, bardziej dojrzałą wersję — FlashCanvas Pro. Charakteryzuje się lepszą obsługą elementu canvas — w zasadzie w rankingach przeglądarek wypada podobnie jak czysty element w standardzie HTML5. Bibliotekę tę możesz nabyć za drobną opłatą (aktualnie wynosi 31 dolarów) na stronie http://flashcanvas.net/purchase. Stopień obsługi elementu canvas w obu wersjach tego skryptu możesz porównać, odwiedzając stronę http://flashcanvas.net/docs/canvas-api. Uwaga: Jeśli połączysz zwykłą, napisaną w HTML5 stronę z biblioteką w rodzaju FlashCanvas, zyskasz imponującą obsługę elementu canvas na niemal wszystkich znanych przeglądarkach. W konsekwencji, Twoje aplikacje będą działać nie tylko na starszych wersjach Internet Explorera, ale też na urządzeniach mobilnych pozbawionych dobrodziejstw Flasha — takich jak iPad czy iPhone.

202

CZĘŚĆ II ♦ TWORZENIE NOWOCZESNYCH STRON

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Płótno i kompatybilność z przeglądarkami

Alternatywne płótna i wykrywanie obsługi Najczęściej stosowanym rozwiązaniem problemu kompatybilności jest sięgnięcie po biblioteki ExplorerCanvas lub FlashCanvas. Nie są to jedyne możliwości. W elemencie można umieścić alternatywne treści — podobnie jak w znanych Ci z poprzedniego rozdziału komponentach i . Sztuczki tej możesz użyć do wyświetlenia płótna (jeśli jego element został rozpoznany) lub innego obrazu (gdy tak się nie stało).

Twoja przeglądarka nie rozpoznaje płótna, więc nie możesz użyć naszego kreatora Logo..

Jednak technika ta nie jest przydatna. W większości przypadków elementu używa się do tworzenia grafiki, więc żaden gotowy obrazek nie zrekompensuje utraty funkcjonalności. Wyjściem z tej sytuacji jest wstawienie aplikacji wykonanej we Flashu do wnętrza elementu . Rozwiązanie to sprawdza się szczególnie wtedy, kiedy dysponujesz już takim gotowym programem, lecz wprowadzasz znacznik z myślą o dalszym rozwijaniu pomysłu. W ten sposób masz program działający na starszych wersjach Internet Explorera, podczas gdy użytkownicy nowszych przeglądarek zyskają dostęp do wolnego od wtyczek płótna. Tak jak wcześniej, i tu skrypt Modernizr (strona 52) pozwoli Ci sprawdzić, czy element jest rozpoznawany. Sprawdź działanie własności rysowania (Modernizr. ´canvas) oraz później dodanej własności pisania (Modernizr.canvastext) w obrębie

płótna. Jeżeli skrypt nie wykryje obsługi elementu, możesz użyć dowolnego środka. NAJCZĘŚCIEJ ZADAWANE PYTANIA

Płótno a dostępność Czy da się sprawić, by płótno bardziej przyjazne w użyciu dla osób niepełnosprawnych? Kluczowym zamysłem wszystkich zaprezentowanych do tej pory elementów HTML5 jest umożliwienie zaprojektowania strony, która dostarczałaby urządzeniom i oprogramowaniu dla osób niepełnosprawnych danych pomagających im korzystać ze strony. Może więc zaskoczyć, że jedno z głównych udogodnień HTML5 nie powstało w oparciu o model dostępności ani składniki semantyczne. Twórcy HTML5 starają się załatać tę dziurę. Nie ma jednak zgody co do tego, jakie rozwiązanie jest najlepsze. Jedną z propozycji jest utworzenie oddzielnego modelu dokumentu dla oprogramowania pomocniczego. Problem polega na tym, że to do twórców stron należałoby zsynchronizowanie tego modelu z oprawą graficzną — wątpliwe jest, czy leniwi lub przepracowani deweloperzy zawracaliby sobie głowę tą skomplikowaną własnością.

Druga propozycja dotyczy rozszerzenia funkcjonalności map obrazów (w starszych wersjach HTML-u umożliwiała ona podział grafiki na regiony), tak aby działały jak warstwa leżąca nad płótnem. Mapa jest zbiorem odnośników, toteż mogłaby przekazywać informacje dla czytników, które odczytywałyby je użytkownikowi. Obecnie nie ma sensu rozwodzić się nad tymi opcjami, ponieważ wciąż są rozpatrywane. Do tego czasu można wykorzystywać płótno w wielu graficznych operacjach, zręcznościowych grach komputerowych (które raczej nigdy nie będą przyjazne w użytkowaniu dla osób niepełnosprawnych) lub wizualizacji danych (w takim przypadku wskazane jest zawarcie tych danych w formie tekstowej gdzieś na stronie). Element nie jest dobrym pomysłem, gdy chodzi Ci o opracowanie wszechstronnego elementu projektowego strony. Jeżeli planujesz utworzyć z jego pomocą fantazyjny nagłówek lub menu nawigacji, na razie się powstrzymaj.

ROZDZIAŁ 6. ♦ PODSTAWY RYSOWANIA NA ELEMENCIE CANVAS

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

203

Płótno i kompatybilność z przeglądarkami

204

CZĘŚĆ II ♦ TWORZENIE NOWOCZESNYCH STRON

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

7 Więcej o płótnie

P

łótno jest ważną i wciąż rozwijaną własnością HTML5. W poprzednim rozdziale dowiedziałeś się, jak rysować za pomocą linii, a nawet jak utworzyć przyzwoity program graficzny, pisząc zaledwie króciutki fragment kodu JavaScript. Element „potrafi” znacznie więcej. Nie tylko wyświetla obrazy, nie tylko stanowi podstawę programów graficznych, ale również może posłużyć do odtworzenia animacji, przetworzenia obrazów z dokładnością co do piksela i uruchomienia interaktywnych gier. W tym rozdziale poznasz podstawy wszystkich tych zadań. Najpierw dowiesz się więcej o metodach kontekstu graficznego, które umożliwiają rysowanie przeróżnych tworów w obrębie płótna, w tym obrazów i tekstu. Następnie nauczysz się, jak dodawać do swoich kompozycji graficzne wodotryski — cienie, desenie i gradienty. Na koniec opanujesz praktyczne techniki, które zmienią płótno w ekran wyświetlający płynne animacje. Co najlepsze, przekonasz się, że te wszystkie przykłady da się skonstruować w oparciu o zwykły kod JavaScript i nieposkromioną ambicję. Uwaga: Pierwsza połowa rozdziału koncentruje się na omówieniu krótkich kawałków kodu. Aby wdrożyć je na swoich stronach, należy najpierw dodać element do swojej strony i utworzyć kontekst rysowania, tak jak zostało to pokazane na stronie 181. W drugiej połowie rozdziału przyjrzysz się bardziej ambitnym przykładom. Choć przedstawiono w niej większość kodu (lub cały) wykorzystywanego w analizowanych wzorcach, niektóre szczegóły mogą umknąć Twojej uwadze. Dlatego też kod warto ściągnąć ze strony helion.pl/ksiazki/htm5np.htm.

Inne własności płótna Korzystając z płótna, możesz utworzyć dowolny obraz, jaki tylko zapragniesz — od kilku linii i trójkątów po skrupulatnie cieniowany portret. Wraz ze wzrostem złożoności obrazu rośnie też stopień skomplikowania kodu. Raczej trudno sobie wyobrazić, że własnoręcznie napiszesz kod, który rysowałby złożony portret.

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

ROZDZIAŁ

Inne własności płótna

Na szczęście, istnieją alternatywne rozwiązania. Kontekst graficzny nie jest ograniczony do rysowania prostych i krzywych — znajdują się w nim metody umożliwiające załączenie wcześniej przygotowanych grafik, tekstu, deseni i filmowych klatek. W kolejnych punktach dowiesz się, jak używać tych metod do zamieszczenia na płótnie złożonych treści.

Rysowanie obrazów Z pewnością widziałeś strony, które wyświetlają mapy skonstruowane ze ściąganych i łączonych w całość fragmentów zdjęć wykonanych przez satelity. Jest to przykład na to, jak w praktyce używa się własności łączenia obrazów. Element obsługuje podobną właściwość — jest to możliwe dzięki zawartej w graficznym kontekście metodzie drawImage(). Aby zamieścić dowolny obraz na płótnie, przy wywołaniu tej metody przekazuje się do niej obiekt grafiki oraz współrzędne: context.drawImage(img, 10, 10);

Nim jednak narysujesz obraz, musisz mieć jego obiekt. Standard HTML5 zapewnia trzy sposoby na jego uzyskanie. Możesz skonstruować go z samych pikseli, jeden piksel po drugim, za pomocą metody createImageData(). To rozwiązanie jest monotonne i zbyt wolne (na stronie 237 dowiesz się więcej o manipulacji pojedynczymi pikselami). Innym rozwiązaniem jest użycie elementu w dokumencie. Jeśli na Twojej stronie pojawia się taki oto komponent:

...możesz odnieść się do niego w kodzie JavaScript: var img = document.getElementById("arrow_left"); context.drawImage(img, 10, 10);

Trzecim sposobem na pobranie obrazu dla metody drawImage() jest opracowanie jego obiektu i załadowanie grafiki z oddzielnego pliku. Wadą tego podejścia jest to, iż obiektu tego nie możesz przekazać do metody, dopóki nie zostanie do niego ściągnięty obraz. Aby zapobiec problemom, musisz zaczekać z wykonaniem jakichkolwiek przekształceń obrazu, aż dojdzie do zdarzenia onLoad. Poniższy przykład pomoże Ci zrozumieć zasadę działania. Masz obrazek zatytułowany maze.png, który chcesz wyświetlić na płótnie. Musisz zatem wykonać następującą serię kroków: // Tworzy obiekt obrazu. var img = new Image(); // Ładuje obrazek do pliku. img.src = "maze.png"; // Rysuje obrazek. (Cały proces może się nie powieść, gdyż obrazek może nie zostać ściągnięty). context.drawImage(img, 0, 0);

206

CZĘŚĆ II ♦ TWORZENIE NOWOCZESNYCH STRON

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Inne własności płótna

USUWANIE PROBLEMÓW

Moje grafiki są spłaszczone! Jeśli przy próbie rysowania obrazu okazuje się, że został rozciągnięty, spłaszczony lub w inny sposób zniekształcony, najczęściej wina leży po stronie deklaracji arkusza stylów. Szerokość i wysokość elementu powinno się definiować przy użyciu atrybutów HTML. Mógłbyś dojść do wniosku, że wolno Ci je usunąć z kodu i zostawić znacznik w tej postaci:

W takim razie na pewno zastąpiłbyś je regułą arkusza stylów podobną do tej: canvas { height: 300px; width: 500px; }

Niestety, takie rozwiązanie się nie sprawdzi. Problem polega na tym, że właściwości width i height CSS nie są równoznaczne z atrybutami width i height płótna. Jeśli popełnisz ten błąd, okaże się, że elementowi zostanie nadany jego domyślny rozmiar (300×150 pikseli), na który nałożone zostaną właściwości CSS — to one zniekształcą cały komponent, co wpłynie na zmianę wymiarowania dodawanej do niego zawartości. W konsekwencji, obraz po dołączeniu do płótna zostanie wypaczony — zdecydowanie nie będzie to wyglądać zbyt atrakcyjnie. Problemu tego unikniesz, deklarując wielkość płótna za pomocą atrybutów. A jeśli chcesz po prostu dopasować rozmiar elementu do jakiejś innej rzeczy, użyj do modyfikacji atrybutów kodu JavaScritp.

Pojawia się tu drobna przeszkoda — ustawienie atrybutu src rozpoczyna ściąganie grafiki, ale reszta kodu nie czeka na zakończenie procesu. // Tworzy obiekt obrazu. var img = new Image(); // Dołącza funkcję do zdarzenia onload. // Ten fragment mówi przeglądarce, co ma zrobić po załadowaniu grafiki. img.onload = function() { context.drawImage(img, 0, 0); }; // Ładuje obrazek do pliku. img.src = "maze.png";

Może Ci się wydać, że cała procedura przeczy logice — przecież kolejność pisania kodu nie odpowiada kolejności jego wykonania. W tym przykładzie do wywołania context.drawImage() dochodzi na końcu, na krótko po ustawieniu własności img.src. Gotowych obrazów można używać w wielu sytuacjach. Dzięki nim możesz upiększyć swoje rysunki lub nawet uniknąć ręcznego malowania. W grze komputerowej mogą reprezentować różne obiekty i postacie wypozycjonowane wewnątrz płótna. W prostym programie graficznym mogą pełnić rolę podstawowych segmentów linii, dzięki czemu użytkownik mógłby rysować „teksturowe” figury. Dalej w tym rozdziale zapoznasz się z praktycznymi przykładami rysowania.

Wycinanie i zmienianie wielkości obrazu Funkcja drawImage() przyjmuje kilka dodatkowych parametrów, które modyfikują sposób wyświetlania obrazu na płótnie. Jeżeli chcesz zmienić wielkość grafiki, możesz dołączyć docelową szerokość i wysokość: context.drawImage(img, 10, 10, 30, 30);.

ROZDZIAŁ 7. ♦ WIĘCEJ O PŁÓTNIE

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

207

Inne własności płótna

Funkcja ta tworzy obszar o rozmiarach 30×30 pikseli, z lewym górnym rogiem w punkcie (10, 10). Przy założeniu, że obraz miał na początku rozmiar 60×60 pikseli, operacja ta zmniejsza dwa jego wymiary, przez co w efekcie końcowym ma zaledwie jedną czwartą oryginalnej wielkości. Jeżeli pragniesz wyciąć część obrazka, umożliwią to cztery dodatkowe parametry wpisywane na początku listy argumentów. Te cztery punkty definiują umiejscowienie i rozmiar prostokąta, którego używa się do wycięcia grafiki, co widać poniżej: context.drawImage(img, source_x, source_y, source_width, source_height, ´x, y, width, height);

Ostatnie cztery argumenty pełnią te same funkcje, co w poprzednim przykładzie — definiują pozycję i rozmiar wyciętego obrazka na elemencie . Wyobraź sobie, że masz do dyspozycji obraz o rozmiarach 200×200 pikseli, który chcesz przeciąć wzdłuż, na połowę. W tym celu tworzysz długi na 200 pikseli i szeroki na 100 pikseli prostokąt w punkcie (0, 0). Tak przetworzoną grafikę przeniesiesz w punkt (75, 25) płótna, posiłkując się tym kodem: context.drawImage(img, 0, 0, 200, 100, 75, 25, 200, 100);

Na rysunku 7.1 pokazano dokładnie, co się dzieje w tym przykładzie. Rysunek 7.1. Po lewej: Grafika przed przetworzeniem. Po prawej: Wycięty fragment grafiki oryginalnego obrazka na płótnie

Jeśli chcesz przekształcić obraz jeszcze bardziej, np. przekrzywić i obrócić, metoda drawImage()nie poradzi sobie z tym. W celu zmodyfikowania zawartości wskazane jest użycie transformaty — zasadę jej działania wyjaśniono na stronie 188.

Rysowanie tekstu Tekst jest kolejną rzeczą, której lepiej nie składać samemu z prostych i krzywych. W HTML5 element nie wymaga tego od Ciebie. Wręcz przeciwnie — kontekst graficzny zawiera dwie metody, które powstały w celu ułatwienia tego zadania. Nim rozpoczniesz pisanie, ustaw wartość należącej do kontekstu własności font. W tym celu posłuż się składnią znanej z arkuszy stylów właściwości font. Wystarczy podać wielkość fontu (w pikselach) oraz jego nazwę: context.font = "20px Arial";

208

CZĘŚĆ II ♦ TWORZENIE NOWOCZESNYCH STRON

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Inne własności płótna

NIEOSZLIFOWANY DIAMENT

Rysowanie klatki filmowej Pierwszym parametrem metody drawImage() jest obraz, który chcesz wyświetlić. Jak się przekonałeś, może on być utworzonym przez Ciebie obiektem lub zagnieżdżonym gdzieś na stronie elementem .

Ta możliwość otwiera szerokie perspektywy. Możesz np. wykorzystać funkcję licznika czasu, żeby pobrać kolejne klatki wideo i przenieść je na element . Jeśli będziesz robił to dość szybko, przekopiowana sekwencja obrazów będzie przypominać wyświetlanie w odtwarzaczu wideo.

Jednak nie to zostanie tu omówione. HTML5 pozwala użyć dwóch dodatkowych zamienników. Zamiast obrazu możesz wykorzystać inny komponent (czyli nie ten, na którym rysujesz). Inną opcją jest użycie odtwarzanego w elemencie filmu — jest to bardzo proste:

Możesz też dodać do otrzymanych klatek trochę egzotyki, nim je namalujesz. Czemu nie zmienić skali na większą lub mniejszą lub zmodyfikować piksele i uzyskać efekt rodem z Photoshopa? Więcej o takich technikach dowiesz się z artykułu na stronie http://html5doctor.com/ video-canvas-magic. Omówiono w nim sposób wyświetlania filmu w czerni i bieli poprzez wykonywanie zrzutów klatek i konwersję każdego piksela na odcienie szarości.

var video = document.getElementById("videoPlayer"); context.drawImage(video, 0, 0, video.clientWidth, video.clientWidth);

Skrypt po uruchomieniu pobiera klatkę filmu — tę, która w momencie przetwarzania jest wyświetlana. Następnie przenosi ją na płótno.

Możesz też podać rodzinę fontów, jeśli nie jesteś pewien, czy konkretny font zostanie obsłużony. context.font = "20px Verdana,sans-serif";

Opcjonalnie możesz również zadeklarować nałożenie na tekst pogrubienia lub kursywy. context.font = "bold 20px Arial";

Za pomocą CSS3 możesz skorzystać z fantazyjnych fontów zagnieżdżonych. W arkuszach stylów należy zarejestrować nazwę fontu (co opisano na stronie 248). Gdy już zdecydujesz się na konkretny font, użyj metody fillText(), aby wpisać na płótnie wybraną treść. Oto przykład, w którym tekst zaczyna się w punkcie (10, 10): context.textBaseline = "top"; context.fillStyle = "black"; context.fillText("Utknąłem w płótnie. Niech ktoś mnie stąd wyciągnie!", ´10, 10);

Tekst możesz umieścić w dowolnym miejscu, lecz musi się znajdować w jednym wierszu. Jeśli chcesz napisać wiele linijek, musisz wywołać metodę fillText() kilka razy. Wskazówka: Jeżeli zależy Ci na napisaniu spójnego akapitu, możesz utworzyć własny algorytm zawijania tekstu. Idea sprowadza się do prostych czynności: rozbicia zdania na wyrazy i przekonania się, jak wiele z nich mieści się w linii, przy użyciu kolejnej metody kontekstu graficznego — measureText(). Opracowanie takiego skryptu wymaga żmudnej pisaniny, lecz przykładowy kod, dostępny na stronie tinyurl.com/6ec7hld, pomoże Ci przynajmniej zacząć.

ROZDZIAŁ 7. ♦ WIĘCEJ O PŁÓTNIE

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

209

Cienie i inne ozdobniki

Zamiast korzystać z metody fillText(), dobrym pomysłem jest posłużyć się jej alternatywą — strokeText(). Tworzy ona obrys wokół tekstu przy użyciu wartości zapisanych we własności strokeStyle — która definiuje kolor — i lineWidth — która ustala grubość linii. Rzuć okiem na przykład poniżej: context.font = "40px Verdana,sans-serif"; context.lineWidth = 1"; context.strokeStyle = "red"; context.strokeText("Jestem KONTUREM", 20, 50);

Jeśli używasz metody strokeText(), środkowa część tekstu jest pusta. Oczywiście, możesz użyć obu tych metod na raz, jeśli chcesz, aby tekst był kolorowy i miał wyraziste krawędzie. Na rysunku 7.2 przedstawiono oba rozwiązania w działaniu. Rysunek 7.2. Element sprawia, że pisanie jednolitego i obrysowanego tekstu jest łatwe

Wskazówka: Rysowanie tekstu zajmuje więcej czasu niż rysowanie linii i obrazów. Szybkość rysowania nie ma większego znaczenia, jeśli tworzysz statyczny, niezmienny obraz (np. wykres), lecz może przysporzyć poważnych problemów w trakcie wyświetlania animacji. Przy optymalizowaniu wydajności warto podjąć próbę zapisania tekstu w oddzielnym pliku graficznym, a dopiero potem przenieść go z pliku na powierzchnię płótna metodą drawImage().

Cienie i inne ozdobniki Do tej pory, rysując linie i figury, używałeś jednolitych kolorów. I choć nie ma w tym nic złego, bardziej ambitni malarze ucieszą się na wieść, że element obsługuje kilka bardziej wymyślnych technik rysowania. Przykładowo canvas może wygenerować wymyślnie rozmyty cień za figurą. Może też wypełnić ją małą, powtarzającą się grafiką. Chyba najbardziej nietuzinkową opcją są gradienty, których używa się do mieszania dwóch lub kilku barw w kalejdoskop wzorów. W kolejnych punktach dowiesz się, jak korzystać z każdego z nich poprzez ustawienie różnych własności w kontekście graficznym płótna.

Dodawanie cieni Pierwszą przydatną właściwością elementu jest możliwość dodawania cieni każdemu narysowanemu obiektowi. Na rysunku 7.3 zaprezentowano kilka odjazdowych przykładów.

210

CZĘŚĆ II ♦ TWORZENIE NOWOCZESNYCH STRON

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Cienie i inne ozdobniki

Rysunek 7.3. Cienie prezentują się dobrze z figurami, obrazami i tekstem. Wyglądają szczególnie wyśmienicie po nałożeniu na obrazy z przezroczystym tłem — np. na gwiazdę w prawym górnym rogu tej strony. Jak widać, cień odbija obrys gwiazdy, ale nie na krawędź prostokąta, który otacza całe płótno. W czasie pisania książki tylko Internet Explorer i Firefox obsługują tę własność. Cienie wyglądają całkiem nieźle z tekstem, tak więc możesz utworzyć cały wachlarz ciekawych efektów, które zależeć będą od wybranych ustawień cieniowania

W gruncie rzeczy, cienie wyglądają jak rozmyte odbicie obiektu (linii, figury, obrazu lub tekstu). Wygląd cienia możesz zmienić, stosując jedną z omówionych w tabeli 7.1 własności. Tabela 7.1. Własności tworzenia cieni

Własność

Opis

shadowColor

Ustawia barwę cienia. Mógłbyś wybrać czarną lub jaśniejszą barwę, lecz praktyka wskazuje, że średnioszary kolor sprawdza się najlepiej. Inną, wartą uwagi techniką jest użycie półprzezroczystej barwy (strona 192), tak aby zawartość pod nią prześwitywała. Jeśli chcesz usunąć wprowadzony cień, nadaj tej własności wartość transparent.

shadowBlur

Ustawia stopień zamazania cienia. Własność shadowBlur równa 0 tworzy ostry cień, wyglądający jak forma oryginalnego obiektu, a shadowBlur równa 20 generuje efekt rozmytej mgły, można podkręcić jej wartość bardziej. Większość projektantów uważa, że lekkie obostrzenie (wartość 3) wygląda najlepiej.

shadowOffsetX i shadowOffsetY

Pozycja cienia względem zawartości. Jeśli przykładowo obie własności są równe 5, cień pojawi się pięć pikseli niżej i na prawo od cieniowanego obiektu. Możesz też wprowadzać wartości ujemne, jeżeli chcesz, by padał w inną stronę (w lewo i w górę).

Niżej przedstawiony kod tworzy cienie obiektów z rysunku 7.3: // Rysuje cień prostokąta. context.rect(20, 20, 200, 100); context.fillStyle = "#8ED6FF"; context.shadowColor = "#bbbbbb"; context.shadowBlur = 20; context.shadowOffsetX = 15; context.shadowOffsetY = 15; context.fill(); // Rysuje cień gwiazdy. context.shadowOffsetX = 10; context.shadowOffsetY = 10; ROZDZIAŁ 7. ♦ WIĘCEJ O PŁÓTNIE

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

211

Cienie i inne ozdobniki

context.shadowBlur = 4; img = document.getElementById("star"); context.drawImage(img, 250, 30); context.textBaseline = "top"; context.font = "bold 20px Arial"; // Rysuje trzy wersje cieniowanego tekstu. context.shadowBlur = 3; context.shadowOffsetX = 2; context.shadowOffsetY = 2; context.fillStyle = "steelblue"; context.fillText("Oto delikatny, odrobinę staromodny cień.", 10, 175); context.shadowBlur = 5; context.shadowOffsetX = 20; context.shadowOffsetY = 20; context.fillStyle = "green"; context.fillText("Oto oddalony cień...", 10, 225); context.shadowBlur = 15; context.shadowOffsetX = 0; context.shadowOffsetY = 0; context.shadowColor = "black"; context.fillStyle = "white"; context.fillText("Ten cień nie jest oddalony. Tworzy efekt poświaty." ´10, 300);

Wypełnianie figur deseniem Wszystkie tworzone przez Ciebie na płótnie figury miały jednolite lub przezroczyste kolory. Musisz jednak wiedzieć, że płótno można też wypełnić ciekawszą zawartością — deseniem lub gradientem. Nada to nawet najzwyklejszym figurom niezwykły wygląd. Wystarczy wykonać dwa kroki. Najpierw utwórz wypełnienie. Następnie załącz je do własności fillStyle (lub, choć zdarza się to rzadko, własności strokeStyle). Utworzenie wypełnienia z deseniem wymaga wybrania małego obrazka, którym da się wyłożyć powierzchnię, tak aby sprawiała wrażenie jednolitej (rysunek 7.4). Należy załadować go do obiektu obrazka przy użyciu omówionej wcześniej techniki, czyli ustawić ukryty element w dokumencie (strona 206) lub załadować grafikę bezpośrednio z pliku i obsłużyć zdarzenie onLoad (strona 207). W poniższym przykładzie użyto pierwszego z tych rozwiązań. var img = document.getElementById("brickTile");

Kolejnym krokiem po pobraniu obrazka jest opracowanie obiektu deseniu przy użyciu jednej z metod kontekstu graficznego — createPattern(). Następnie trzeba zdecydować, czy deseń ma się powtarzać w poziomie (repeat-x), w pionie (repeat-y), czy w obu tych wymiarach (repeat). var pattern = context.createPattern(img, "repeat");

Ostatni etap polega użyciu obiektu deseniu do ustawienia wartości własności fillStyle i strokeStyle: context.fillStyle = pattern; context.rect(0, 0, canvas.width, canvas.height); context.fill();

212

CZĘŚĆ II ♦ TWORZENIE NOWOCZESNYCH STRON

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Cienie i inne ozdobniki

W wyżej przedstawionym kodzie powstaje prostokąt, który wypełnia płótno deseniem. Efekty widać na rysunku 7.4. Rysunek 7.4. Po lewej: Obraz tworzący deseń. Po prawej: Deseń, który powstał przez pokrycie płótna w obu wymiarach

Wypełnianie figur gradientem Inną ciekawą techniką wypełniania figur jest wypełnianie gradientem. Technika polega na nakładaniu kilku wymieszanych kolorów. W elemencie można utworzyć gradienty liniowe i promieniste. Na rysunku 7.5 zaprezentowano ich porównanie. Rysunek 7.5. Gradient liniowy (u góry, po lewej) miesza nachodzące na siebie linie barw. Gradient promienisty (u góry po prawej) miesza nachodzące na siebie punkty barw. W obu typach gradientu może wystąpić kilka kolorów, co pozwala na utworzenie efektu pasm (u dołu, po lewej) lub pierścieni (u dołu, po prawej)

Wskazówka: Jeśli przeglądasz czarno-białą kopię tej książki, lepiej będzie, jeśli ze strony helion.pl/ ksiazki/htm5np.htm ściągniesz pliki z przykładami, żeby przekonać się, jak szykownie wyglądają. Warto to zrobić szczególnie po to, aby zobaczyć, jak kod przykładów opisuje sposób tworzenia serduszek przy użyciu czterech połączonych ze sobą w ścieżce krzywych Béziera.

ROZDZIAŁ 7. ♦ WIĘCEJ O PŁÓTNIE

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

213

Cienie i inne ozdobniki

Na tym etapie powinieneś wiedzieć, że w pierwszym rzędzie musi powstać obiekt gradientu. Kontekst graficzny zawiera dwie metody służące do tego celu: createLinearGradient() oraz createRadialGradient(). Obie działają w podobny sposób: przechowują listę barw, które są nakładane w różnych miejscach. Gradienty najłatwiej zrozumieć, analizując prosty przykład. Oto kod użyty do utworzenia gradientu w lewym, górnym sercu na rysunku 7.5. // Tworzy gradient z punktu (10, 0) do punktu (100, 0). var gradient = context.createLinearGradient(10, 0, 100, 0); // Dodaje dwie barwy. gradient.addColorStop(0, "magenta"); gradient.addColorStop(1, "yellow"); // Wywołuje funkcję rysującą figurę. drawHeart(60, 50); // Rysuje figurę. context.fillStyle = gradient; context.fill(); context.stroke();

Tworząc obiekt liniowego gradientu, należy do metody przekazać współrzędne dwóch punktów — punktu początkowego i końcowego linii. W tym wypadku linią nazywamy fragment ścieżki, w obrębie którego dochodzi do zmiany koloru. Długość linii gradientu wpływa na jego wygląd (rysunek 7.6). Wyobraź sobie np. liniowy gradient, który przechodzi z magenty w żółć. Mógłbyś po prostu „przeskoczyć” o kilka pikseli lub wymieszać obie barwy na przestrzeni całej szerokości płótna. Co więcej, obszar „mieszania się” kolorów mógłby rozchodzić się z lewej do prawej, z góry na dół, czy ukośnie w dwóch wymiarach. Oznacza to, że od linii gradientu zależy wiele szczegółów. Rysunek 7.6. Po lewej: Oto gradient utworzony dla serca z lewej, dolnej części rysunku 7.5. Po wypełnieniu figury widać tylko jego część. Po prawej: To samo dotyczy gradientu promienistego, który widać w prawym dolnym rogu rysunku 7.5

214

CZĘŚĆ II ♦ TWORZENIE NOWOCZESNYCH STRON

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Cienie i inne ozdobniki

Wskazówka: Myśl o gradientach jak o wielobarwnych tworach leżących tuż pod powierzchnią płótna. Kreując gradient, tworzysz kolorową, lecz ukrytą powierzchnię. Gdy wypełniasz gradientem figurę, wycinasz dziurę, przez którą widać jego fragment. Otrzymany wynik — czyli to, co widzisz ma płótnie — zależy od ustawień gradientu oraz wielkości i pozycji figury.

W tym przykładzie linia gradientu rozpoczyna się w punkcie (10, 0) i kończy w punkcie (100, 0). Punkty te określają kilka istotnych rzeczy. • Powstały gradient rozciąga się w poziomie. Oznacza to, że miesza kolory od

lewej do prawej. Dzieje się tak dlatego, że w obu punktach współrzędna y ma wartość 0. Gdybyś chciał wymieszać barwy z góry w dół, musiałbyś zadeklarować punkty (0, 10) i (0, 100). Gdyby z kolei Twoim celem było utworzenie gradientu ukośnego, od górnego lewego rogu do prawego dolnego, punkty (10, 10) i (100, 100) pozwoliłyby Ci osiągnąć zamierzony efekt. • Obszar mieszania kolorów jest szeroki na 90 pikseli (zaczyna się od współ-

rzędnej na osi x równej 10 i kończy na liczbie 100). W omówionym wcześniej przykładzie kształt serca jest odrobinę mniejszy niż wymiary gradientu, co oznacza, że widzisz jego większą część. • Poza obszarem gradientu barwy są jednolite. Dlatego też, gdybyś poszerzył

serce, ujrzałbyś jednolitą magentę (po lewej i równie spójną żółć). Wskazówka: Projektanci często tworzą gradienty, które są niewiele większe od rysowanej figury, tak jak w przykładzie. Nie jest jednak to jedyne rozwiązanie. Jeśli np. chcesz narysować kilka figur pokrytych fragmentami tego samego gradientu, możesz opracować gradient rozciągający się na całym płótnie.

Barwy gradientu deklaruje się w trakcie wywoływania metody addColorStop(). Za każdym razem należy zdefiniować przesunięcie — od 0 do 1 — co wpłynie na miejsce rozpoczęcia mieszania kolorów. Wartość 0 oznacza, że drugi z kolorów pojawi się na samym początku gradientu, podczas gdy wartość 1 sprawi, że stanie się widoczny na samym końcu. Wprowadź ułamki dziesiętne (np. 0.2 i 0.8), a skompresujesz gradient, odsłaniając więcej jednolitej barwy po obu stronach. Jeśli tworzysz dwukolorowy gradient, liczby 0 i 1 są na ogół najlepszym wyborem. Jeżeli jednak Twój gradient składa się z trzech lub większej liczby barw, warto poeksperymentować z wartościami przesunięcia, rozciągając niektóre pasma kolorów i kompresując inne. Narysowane w lewym dolnym rogu serce rozdziela przesunięcie, zamykające każdą barwę w równomiernym paśmie. var gradient = context.createLinearGradient(10, 0, 100, 0); gradient.addColorStop("0", "magenta"); gradient.addColorStop(".25", "blue"); gradient.addColorStop(".50", "green"); gradient.addColorStop(".75", "yellow"); gradient.addColorStop("1.0", "red"); drawHeart(60, 200); context.fillStyle = gradient; context.fill(); context.stroke();

Uwaga: Jeśli w tej chwili czujesz, że Twój pokój zaczyna wirować, nie panikuj. W końcu nie musisz rozumieć wszystkich zasad rządzących tworzeniem gradientów. Nic nie stoi na przeszkodzie, abyś po prostu podkręcał ustawienia tak długo, aż pożądana mieszanka kolorów pojawi się na ekranie. ROZDZIAŁ 7. ♦ WIĘCEJ O PŁÓTNIE

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

215

Cienie i inne ozdobniki

Tworząc gradient promienisty, należy przejść przez te same etapy, co w gradiencie liniowym. Zamiast jednak zadeklarować dwa punkty, trzeba zdefiniować dwa okręgi. Wynika to z tego, że gradient promienisty rozciąga się pomiędzy dwoma okręgami — od mniejszego do większego. Oba okręgi wyznaczysz, podając ich punkty środkowe oraz promienie. W przykładzie z rysunku 7.5 kolory zlewają się w punkcie centralnym serca o współrzędnych (180, 100). Kolor wewnętrzny mieści się w granicach długiego na 10 pikseli promienia, podczas gdy zewnętrzny poza promieniem 50 pikseli. W każdej z tych granic wyświetlana jest jednolita barwa — magenta we wnętrzu i żółć wokół kompozycji. Oto kod, który rysuje dwukolorowy promienisty gradient. var gradient = context.createRadialGradient(180, 100, 10, 180, 100, 50); gradient.addColorStop(0, "magenta"); gradient.addColorStop(1, "yellow"); drawHeart(180, 80); context.fillStyle = gradient; context.fill(); context.stroke();

Uwaga: W większości przypadków zarówno dla zewnętrznego, jak i wewnętrznego okręgu wybiera się ten sam punkt. Nie znaczy to, że nie można ich przesunąć względem siebie, co poskutkuje rozciągnięciem, ściśnięciem lub innego rodzaju zniekształceniem mieszaniny kolorów.

Korzystając z tego przykładu, możesz ostatecznie utworzyć wielokolorowy gradient przedstawiony w prawym dolnym rogu płótna z rysunku 7.5. W tym celu należy przenieść oba punkty środkowe okręgów, a następnie zadeklarować różne zestawy kolorów w metodzie addColorStop() — w ten sam sposób jak w wielokolorowym gradiencie liniowym: var gradient = context.createRadialGradient(180, 250, 10, 180, 250, 50); gradient.addColorStop("0","magenta"); gradient.addColorStop(".25","blue"); gradient.addColorStop(".50", "green"); gradient.addColorStop(0.75, "yellow"); gradient.addColorStop("1.0", "red"); drawHeart(180, 230); context.fillStyle = gradient; context.fill(); context.stroke();

Wiesz już wszystko, czego Ci trzeba, by tworzyć psychodeliczne desenie rodem z lat 60. ubiegłego wieku.

Składanie wszystkiego w całość: rysowanie wykresów Teraz, gdy znasz już większość własności elementu , czas, abyś przystanął na chwilę i zaczął napawać się owocami swojej pracy. W następnym przykładzie wykorzystasz typowy tekst oraz liczby i utworzysz na płótnie prosty wykres.

216

CZĘŚĆ II ♦ TWORZENIE NOWOCZESNYCH STRON

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Cienie i inne ozdobniki

Na rysunku 7.7 przedstawiono punkt początkowy: dwustronicowy test osobowości, pozbawiony grafiki. Użytkownik odpowiada na zawarte na pierwszej stronie pytania, po czym klika przycisk Sprawdź wynik, co przenosi go na drugą stronę. Znajdzie na niej wyniki, które bazują na cieszącym się złą sławą pięcioczynnikowym modelu osobowości (szczegóły w ramce na stronie 213). Rysunek 7.7. Wybierz odpowiedzi (góra) i sprawdź swoje wyniki (dół). Niestety, bez jakiejkolwiek skali lub pomocy zwykły człowiek nie może wiedzieć, co te liczby oznaczają

Kod JavaScript, którego użyto w tym przykładzie, jest nietrudny. Po kliknięciu przycisku z cyfrą jego tło się zmieni, wskazując wybór użytkownika. Po zakończeniu kwizu prosty algorytm przetworzy wyniki z zastosowaniem ustalonych wzorów i obliczy wyniki dla każdego z czynników. Jeżeli jesteś ciekawy, jak ten kod działa, lub sam chciałbyś sprawdzić swoją osobowość, plik ze skryptem znajdziesz na stronie helion.pl/ksiazki/htm5np.htm. Do tej pory nie zastosowano magii HTML5. Pomyśl jednak, jak łatwo można by poprawić użyteczność testu osobowości, gdyby jego wyniki były prezentowane na wykresie. Na rysunku 7.8. ukazano zmodernizowaną wersję testu, w którym wcielono ten pomysł w życie. ROZDZIAŁ 7. ♦ WIĘCEJ O PŁÓTNIE

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

217

Cienie i inne ozdobniki

PRZYSPIESZAMY

Jak przekształca się całą osobowość w pięć liczb? Pięcioczynnikowy test osobowości ocenia człowieka na podstawie pięciu „składników” — zwykle są nimi: otwartość, sumienność, ekstrawersja, ugodowość i neurotyczność. Wszystkie te czynniki zostały wyznaczone w wyniku analizy tysięcy opisujących osobowość przymiotników w języku angielskim. Aby to osiągnąć, psychologowie wykorzystali połączenie zaawansowanej statystyki, ankiet osobowości i komputerów. Określili, które przymiotniki były wybierane przez badane osoby razem i które z nich odnosiły się do najmniejszej liczby supercech osobowości. Przykładowo ludzie, którzy o sobie mówili, że są towarzyscy, jednocześnie

wybierali słowa komunikatywny i serdeczny — wydawało się rozsądne przypisanie tej grupy cech jednemu czynnikowi osobowości (na który psychologowie mówią ekstrawersja). Gdy psychologowie skończyli z analizowaniem wszystkich rysów osobowości, okazało się, że sprowadzili ponad dwadzieścia tysięcy przymiotników do pięciu powiązanych ze sobą cech. Więcej o pięcioczynnikowym modelu osobowości dowiesz się ze strony http://pl.wikipedia.org/wiki/Wielka_piątka lub z książki Mózg. Nieoficjalny podręcznik (wydawnictwo Sensus, 2009).

Każdy czynnik osobowości pojawia się w odrębnym elemencie . Oto zastosowany kod:

Pięcioczynnikowy test osobowości Wyniki

Ekstrawersja:

Ugodowość:

Sumienność:

Neurotyczność:

Otwartość:

Każdy z wykresów rysowany jest przez tę samą funkcję JavaScript — plotScore(). Strona wywołuje ją pięć razy, za każdym razem przekazując inne parametry. Przykładowo wykres ekstrawersji u góry strony powstał w oparciu o wynik badania (liczbę w granicach od –20 do 20) i nazwę cechy („Ekstrawersja”). window.onload = function() { // Pobierz element przed wprowadzaniem do niego wyników badania ekstrawersji. var canvasE = document.getElementById("canvasE"); // Dodaj wyniki do odpowiedniego nagłówka.

218

CZĘŚĆ II ♦ TWORZENIE NOWOCZESNYCH STRON

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Cienie i inne ozdobniki

Rysunek 7.8. Na tej stronie zastosowano kilka charakterystycznych dla płótna obiektów. Najciekawsze jest jednak to, że są one rysowane dynamicznie i przybierają formę grafów o wartościach przekazanych w kwizie

// (Wynik jest przechowywany w zmiennej extraversion.) document.getElementById("headingE"); innerHTML += extraversion; // Wstaw wynik w odpowiednie płótno. plotScore(canvasE, extraversion, "Ekstrawersja"); … }

Funkcja plotScore() uruchamia fragment kodu, który powinien wydać się znajomy. Wykorzystano w nim przeróżne metody konteksty rysowania po to, by przenieść wartości na wykres. function plotScore(canvas, score, title) { var context = canvas.getContext("2d"); // Rysuje strzałki po obu stronach wykresu. var img = document.getElementById("arrow_left"); context.drawImage(img, 12, 10); img = document.getElementById("arrow_right"); context.drawImage(img, 498, 10); // Rysuje odcinek pomiędzy strzałkami. context.moveTo(39,25); context.lineTo(503,25); context.lineWidth = 10; ROZDZIAŁ 7. ♦ WIĘCEJ O PŁÓTNIE

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

219

Cienie i inne ozdobniki

context.strokeStyle = "rgb(174,215,244)"; context.stroke(); // Przenosi liczby na skalę. context.fillStyle = context.strokeStyle; context.font = "italic bold 18px Arial"; context.textBaseline = 'top'; context.fillText("-20", 35, 50); context.fillText("0", 255, 50); context.fillText("20", 475, 50); // Dodaje gwiazdkę wskazującą wynik na wykresie. img = document.getElementById("star"); context.drawImage(img, (score+20)/40*440+35-17, 0); }

Najważniejszym fragmentem w kodzie jest ostatni wiersz, który kreśli gwiazdę, wykorzystując dziwaczne równanie: context.drawImage(img, (score+20)/40*440+35-17, 0);

Składa się ono z kilku kroków. Na początku wartość wyniku jest zamieniana na procent — od 0 do 100. Zwykle wartości mieszczą się w granicach od –20 do 20, a więc pierwsze wykonane działanie polega na zamianie wyniku na wartość z przedziału od 0 do 40: score+20

Dzieląc otrzymaną sumę przez 40, otrzymasz procent: (score+20)/40

Teraz należy pomnożyć wartość procentową przez długość odcinka. W rezultacie, wartość 0% znajdzie się na lewym, a 100% na prawym końcu, podczas gdy inne wyniki będą pomiędzy nimi. (score+20)/40*440

Fragment ten wystarczyłby, gdyby odcinek rozciągał się na osi poziomej od punktu 0 do 400. W rzeczywistości jednak oś została przesunięta odrobinę od lewej krawędzi, aby nadać jej wypełnienie. Dlatego też również gwiazdę należy przesunąć na taką samą odległość. (score+20)/40*440+35

Jak się okazuje, kod ten wyznaczy lewą krawędź gwiazdy na pozycję wskazującą wynik, podczas gdy to jej środek powinien oznaczać wartość wyniku. Z tego powodu od otrzymanych współrzędnych trzeba odjąć połowę szerokości gwiazdy. (score+20)/40*440+35-17

W rezultacie otrzymasz ostateczne współrzędne gwiazdy na osi x, w oparciu o otrzymany wynik kwizu. Uwaga: Przejście z rysowania grafiki statycznej na rysowanie grafiki dynamicznej, która zmienia się w zależności od danych, jak miało to miejsce w tym przykładzie, jest względnie subtelne. Gdy już wykonasz ten krok, będziesz mógł wykorzystać swoje umiejętności w celu utworzenia ciekawych efektów — od tradycyjnych wykresów kołowych po grafikę informacyjną z interaktywną skalą tarczową i podziałkami. Gdybyś chciał uprościć sobie pracę z wykresami, zapoznaj się graficznymi bibliotekami elementu , które zawierają gotowe procedury umożliwiające rysowanie dowolnego wykresu. Świetnym wyborem są biblioteki RGraph (www.rgraph.net) i ZingChart (www.zingchart.com).

220

CZĘŚĆ II ♦ TWORZENIE NOWOCZESNYCH STRON

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Interaktywne figury

Interaktywne figury Płótno nie jest powierzchnią samośledzącą. Oznacza to, że nie śledzi wszystkich wykonanych na nim operacji rysowania. Zapamiętuje efekt tych działań — wielobarwną siatkę pikseli, która składa się na obraz. Jeśli więc rysujesz czerwony kwadrat pośrodku płótna, po wywołaniu metod stroke() lub fill() staje się on blokiem czerwonych pikseli. Co prawda, wy-

gląda jak kwadrat, lecz płótno nie „pamięta”, że ten zbiór pikseli jest kwadratem. Takie podejście do problemu sprawia, że rysowanie to szybka operacja. Niestety, jednocześnie utrudnia życie, jeśli chcesz wprowadzić na płótno interaktywne elementy. Przypuśćmy, że masz zamiar utworzyć ulepszoną wersję omówionego na stronie 194 programu graficznego. Chcesz, żeby użytkownicy mogli narysować nie tylko linię, ale również prostokąt (ta część jest łatwa). To jednak nie wystarczy, pragniesz, by mogli też wybrać go, przenieść w inne miejsce, zmienić jego wielkość i barwę itp. Nim jednak zaoferujesz im te możliwości, musisz poradzić sobie z kilkoma wyzwaniami. Po pierwsze, jak rozpoznać, że ktoś kliknął namalowany prostokąt? Po drugie, skąd otrzymasz podstawowe informacje od prostokącie — jego współrzędnych, rozmiarze, kolorze krawędzi i wypełnienia? Po trzecie, skąd weźmiesz informacje o innych elementach na płótnie — których potrzebujesz, gdy zmodyfikujesz prostokąt, aby odmalować cały komponent ? Oczywistą odpowiedzią jest opracowanie mechanizmu śledzącego rysowanie każdego obiektu. Następnie, gdy użytkownik kliknie płótno, musisz sprawdzić, czy kliknął obszar jednej z figur (proces ten nazywamy lokalizowaniem trafień). Jeśli poradzisz sobie z tymi dwoma zadaniami, pozostałe — modyfikacja jednej z figur i ponowne narysowanie wszystkich — będą proste.

Śledzenie rysowanych elementów Aby zmodyfikować i odświeżyć obraz, musisz wiedzieć wszystko o jego zawartości. Spójrz np. na program rysujący koła z rysunku 7.9. Rysuje on różnokolorowe koła — każde innej wielkości. Śledzenie wszystkich kół polega na zapisaniu informacji o ich współrzędnych, promieniu i wypełnieniu. Zamiast tworzyć dziesiątki zmiennych do zapisania tych danych, rozsądniej zachować wszystkie cztery szczegóły w jednym pakiecie. Takim pakietem jest własny obiekt. Jeśli nigdy wcześniej nie tworzyłeś takiego obiektu, przekonasz się, że cały proces nie jest skomplikowany. Najpierw piszesz funkcję, której nazwa powinna odzwierciedlać typ obiektu. Jeśli np. skonstruowany później obiekt ma posłużyć do tworzenia kół, możesz nazwać ją Circle() (okrąg, koło): function Circle() { }

ROZDZIAŁ 7. ♦ WIĘCEJ O PŁÓTNIE

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

221

Interaktywne figury

Rysunek 7.9. Program do rysowania kół jest interaktywny. Możesz kliknąć jedno z kół, aby wybrać je (co spowoduje narysowanie krawędzi wokół niego) i przeciągnąć w inne miejsce

Powstały obiekt ma przechowywać dane. Dlatego zadeklaruj właściwości, używając do tego słowa klucza this. Załóżmy, że chcesz nadać obiektowi okręgu własność opisującą jego promień (ang. radius). W takim razie wartość promienia przypisz własności this.radius. Oto funkcja, która przechowuje trzy informacje: współrzędne x i y oraz promień koła: function Circle() { this.x = 0; thix.y = 0; this.radius = 15; }

Teraz możesz użyć funkcji Circle(), aby zbudować właściwy obiekt koła. Cały szkopuł w tym, że nie należy wywoływać funkcji jako takiej. Trzeba utworzyć kopię obiektu, posługując się słowem kluczem new. Rzuć okiem na przykład poniżej: // Tworzy nowy obiekt koła, który przypisano do zmiennej myCircle. var myCircle = new Circle();

Od tej pory masz swobodny dostęp do wszystkich własności obiektu: // Zmienia długość promienia. myCircle.radius = 20;

Cała operacja będzie prostsza, gdy wszystkie parametry przekażesz w trakcie tworzenia obiektu. W ten sposób skonstruujesz nowe koło wraz ze wszystkimi jego parametrami w jednej linijce kodu. Oto wersja funkcji Circle(), której użyto na stronie, według której powstał rysunek 7.9: function Circle(x, y, radius, color) { this.x = x; this.y = y; this.radius = radius; this.color = color; this.isSelected = false; }

Własność isSelected przyjmuje wartości true (prawda) lub false (fałsz). Gdy użytkownik kliknie jedno z kół, wartość isSelected dla jego obiektu zmienia się na true, co powoduje rysowanie krawędzi wokół niego.

222

CZĘŚĆ II ♦ TWORZENIE NOWOCZESNYCH STRON

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Interaktywne figury

Tworzenie obiektu koła w tej wersji funkcji wymaga zastosowania następującej instrukcji: var myCircle = new Circle(0, 0, 20, "red");

Oczywiście, program powinien pozwolić użytkownikowi na narysowanie tylu kół, ile dusza zapragnie. Dlatego pojedynczy obiekt koła nie wystarczy. Należy więc utworzyć tablicę, która pomieści wszystkie koła. W tym przypadku będzie nią ta oto zmienna: var circles = [];

Pozostała część kodu jest łatwa. Gdy użytkownik kliknie przycisk Dodaj koło, wywoła funkcję addRandomCircle(). Tworzy ona nowe koło, nadając mu losowe wartości parametrów wielkości, barwy i współrzędnych: function addRandomCircle() { // Nadaje kołu losowy rozmiar i położenie na płótnie. var radius = randomFromTo(10, 60); var x = randomFromTo(0, canvas.width); var y = randomFromTo(0, canvas.height); // Nadaje kołu losową barwę. var colors = ["green", "blue", "red", "yellow", "magenta", "orange", "brown", "purple", "pink"]; var color = colors[randomFromTo(0, 8)]; // Tworzy nowe koło. var circle = new Circle(x, y, radius, color); // Zapisuje koło w tablicy. circles.push(circle); // Ponownie wypełnia płótno. drawCircles(); }

W tym fragmencie skryptu użyto napisanej specjalnie na jego potrzeby funkcji randomFromTo() — generuje ona losową liczbę w obrębie podanego przedziału. Warto przetestować cały przykład. Ściągniesz go ze strony helion.pl/ksiazki/ htm5np.htm. Ostatnim krokiem jest narysowanie wszystkich kół na płótnie. W tym celu po utworzeniu nowego koła funkcja addRandomCircle() wywołuje inną — którą nazwano drawCircles(). Funkcja drawCircles() sprawdza wszystkie koła za pomocą instrukcji pętli: for(var i=0; i=0; i--) { var circle = circles[i]; // Wykorzystuje twierdzenie Pitagorasa do ustalenia odległości między środkiem koła a klikniętym punktem. var distanceFromCenter = Math.sqrt(Math.pow(circle.x - clickX, 2) + ´Math.pow(circle.y - clickY, 2)) // Sprawdza, czy punkt leży w kole. if (distanceFromCenter (canvas.height - 17)) { alert("Wygrałeś!"); return; } }

Odpowiedź negatywna uruchamia funkcję drawFrame() po raz kolejny, z 10milisekundowym opóźnieniem: // Rysuje kolejną klatkę po upływie 10 milisekund. setTimeout("drawFrame()", 10); }

Zapoznałeś się z całym kodem gry z wyjątkiem najbardziej innowacyjnego fragmentu w funkcji checkFolCollision(), który zajmuje się lokalizowaniem trafień. Właśnie tym zajmiesz się za chwilę.

Lokalizowanie trafień a barwa pikseli Na początku tego rozdziału przekonałeś się, że przy użyciu samych obliczeń można zlokalizować trafienie. Istnieje jednak inna metoda, którą warto się posłużyć. Zamiast przeglądać kolekcje narysowanych obiektów, czasem łatwiej pobrać blok pikseli i sprawdzić, jaki mają kolor. Nie potrzeba więc ani obiektów, ani kodu śledzącego figury. Ta metoda sprawdza się, jeśli z góry wiesz, jakich kolorów masz szukać. Uwaga: Lokalizowanie trafień przy użyciu pikseli działa doskonale w przypadku labiryntu. Taki sposób lokalizowania trafień pomaga określić, kiedy ikona uśmiechniętej twarzy natrafia na czarną ścianę. Gdybyś nie znał tej metody, musiałbyś zapisać cały labirynt w pamięci i sprawdzić, czy obecne położenie linii nie nakłada się na jego ściany.

Cała tajemnica testowania koloru sprowadza się do manipulowania pojedynczymi pikselami — małymi kropkami, które składają się na cały obraz. Kontekst graficzny zapewnia trzy metody służące do zarządzania pikselami: getImageData(), putImageData() i createImageData(). Metoda getImageData() pobiera blok pikseli z prostokątnego obszaru i analizuje je (użyto jej w przykładzie). Takie piksele da się swobodnie modyfikować i zapisać wewnątrz elementu za pomocą metody putImageData(). Ostatnia z metod — createImageData() — tworzy nowy, pusty blok pikseli, który istnieje tylko w pamięci, gdzie można go swobodnie modyfikować do czasu, gdy zapiszesz go na płótnie, wywołując putImageData(). Zasady manipulowania pikselami zrozumiesz najlepiej po przeanalizowaniu poniższego przykładu. Najpierw kod pobiera kwadrat o wymiarach 100×50 pikseli, wykorzystując metodę getImageData(). // Pobiera piksele na obszarze prostokąta, który rozciąga się z punktu (0, 0) 100 pikseli na prawo // i 50 pikseli w dół. var imageData = context.getImageData(0, 0, 100, 50);

ROZDZIAŁ 7. ♦ WIĘCEJ O PŁÓTNIE

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

237

Praktyczny przykład: labirynt

Następnie kod pobiera tablicę liczb, które odzwierciedlają dane o obrazie z wykorzystaniem właściwości data. var pixels = imageData.data;

Logiczne wydawałoby się, że każdemu pikselowi odpowiada jeden numer, lecz życie nie jest takie proste. W rzeczywistości pojedynczy piksel opisują cztery liczby — trzy odpowiadają barwie czerwonej, zielonej i niebieskiej, a czwarta odnosi się do kanału alfa. Tak więc, jeżeli chcesz przeanalizować każdy piksel, będziesz musiał utworzyć pętlę, która pokona cztery kroki jednocześnie: // Cyklicznie analizuje zestaw charakterystyk dla pojedynczego piksela. for (var i = 0, n = pixels.length; i < n; i += 4) { // Pobiera dane dla pojedynczego piksela. var red = pixels[i]; var green = pixels[i+1]; var blue = pixels[i+2]; var alpha = pixels[i+3]; // Odwraca kolory. pixels[i] = 255 — red; pixels[i+1] = 255 — green; pixels[i+2] = 255 — blue; }

Wszystkie otrzymane liczby znajdują się w przedziale od 0 do 255. W powyższym kodzie wykorzystano najprostszą technikę manipulowania obrazem — odwracanie kolorów. Wypróbuj ją na zwykłej fotografii, a uzyskasz efekt negatywu. Zapisz teraz tak zmienione piksele na płótnie, aby podziwiać efekt przekształcenia na własne oczy (mógłbyś też narysować tę zawartość w innym miejscu). context.putImageData(imageData, 0, 0);

Te metody służące do manipulowania obrazem dają Ci sporą kontrolę. Daleko im jednak do doskonałości. Działania na pikselach są powolne, a średnia liczba pikseli na płótnie jest bardzo duża. Jeśli pobierzesz duży fragment obrazka, przeglądarka będzie musiała przeszukać dziesiątki tysięcy pikseli. Nadto, jeżeli po dziurki w nosie miałeś zabawy z rysowaniem złożonych obrazów i podstawowych tworów — w rodzaju linii prostych i krzywych — przekonasz się, że przetwarzanie pojedynczych pikseli jest jeszcze bardziej uciążliwe. Mimo to, trzeba przyznać, że metody wykonujące działania na pikselach rozwiązują pewne problemy, z którymi trudno sobie poradzić w inny sposób. Przykładowo znacznie ułatwiają tworzenie fraktali i filtrów obrazu, podobnych do tych z programu Photoshop. W przedstawionej grze pozwalają utworzyć zwięzłą procedurę, która sprawdza, w jakim kierunku ikona uśmiechniętej buzi się porusza, i określa, czy uderza w ścianę. Oto funkcja checkForCollision(), która wykonuje to zadanie: function checkForCollision() { // Pobiera piksele z lokalizacji ikonki z drobną poprawką na krawędzie. var imgData = context.getImageData(x-1, y-1, 15+2, 15+2); var pixels = imgData.data; // Cyklicznie analizuje kolejne piksele. for (var i = 0; n = pixels.length, i < n; i += 4) { var red = pixels[i];

238

CZĘŚĆ II ♦ TWORZENIE NOWOCZESNYCH STRON

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Praktyczny przykład: labirynt

var green = pixels[i+1]; var blue = pixels[i+2]; var alpha = pixels[i+3]; // Szuka czarnych ścian (co wskazuje na zderzenie). if (red == 0 && green == 0 && blue == 0) { return true; } // Szuka szarych krawędzi (co wskazuje na zderzenie). if (red == 169 && green == 169 && blue == 169) { return true; } } // Nie stwierdzono zderzenia. return false; }

Na tym kończy się analiza strony labiryntu, która jest najdłuższym i najbardziej rozbudowanym przykładem w tej książce. Możesz potrzebować odrobinę więcej praktyki (lub powtórki z języka JavaScript), nim zrozumiesz cały kod, lecz gdy Ci się to uda, będziesz mógł dowolną z omówionych tu technik wykorzystać w swojej własnej aplikacji. PORADNIK INŻYNIERA

Płótno — praktyczne wykorzystanie W praktyce element może posłużyć do tworzenia wszystkiego. W sieci znajdziesz bardziej ambitne przykłady, które przenoszą HTML5 w świat mistrzów programowania. Oto kilka witryn prezentujących rewelacyjne bajery.  Witryna Canvas Demos. Witryna z przykładami

wykorzystania płótna jest na tyle rozbudowana, że będzie zaskakiwać z dnia na dzień. Wśród najciekawszych aplikacji jest gra Mutant Zombie Masters oraz narzędzie do tworzenia wykresów giełdowych TickerPlot. Wejdź stronę www.canvasdemos.com i sam się przekonaj, jak bogata jest jej oferta.  Mapa wiedzy wikipedii. Ta imponująca aplikacja

wyświetla mapę artykułów Wikipedii (w języku angielskim), z tematami połączonymi ze sobą cienkimi, sieciowymi liniami. Wybór nowego hasła spowoduje wycentrowanie na nim mapy i dodanie kolejnych

powiązanych z nim artykułów — wszystko w jednej, płynnej animacji. Odwiedź stronę http://en.inforapid. org i sam zobacz, jak działa.  3D Walker. W tym przykładzie przemierzysz prosty,

trójwymiarowy świat z perspektywy pierwszej osoby (podobnie jak w grze Wolfenstein 3-D, która rozpoczęła szaleństwo gier FPP w 1992 roku). Wypróbuj ją na stronie www.benjoffe.com/code/ demos/canvascape.  Szachy. Symulator szachów pozwala sprawdzić się

w pojedynku z komputerowym przeciwnikiem na namalowanej na płótnie planszy, na którą patrzysz z góry lub pod kątem, zależnie od Twoich preferencji. Aby sprawdzić, czy podołasz wyzwaniu, odwiedź stronę htmlchess.sourceforge.net/demo/ example.html.

ROZDZIAŁ 7. ♦ WIĘCEJ O PŁÓTNIE

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

239

Praktyczny przykład: labirynt

240

CZĘŚĆ II ♦ TWORZENIE NOWOCZESNYCH STRON

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

8 Rewolucja w stylach — CSS3

P

omysł, aby zbudować nowoczesną stronę bez użycia kaskadowych arkuszy stylów (CSS) jest po prostu śmieszny. Standard ten jest związany z siecią równie mocno jak HTML. Niezależnie od tego, czy konstruujesz układ strony, budujesz menu i przyciski, czy po prostu starasz się dodać całości uroku, CSS zawsze będą Twoim podstawowym narzędziem. Gdy tylko twórcy pracujący w HTML-u skupili swoje wysiłki na opisie treści i semantyce (strona 58), CSS stały się kamieniem węgielnym projektowania stron internetowych.

W miarę pojawiania się nowych wersji kaskadowe arkusze stylów stawały się bardziej szczegółowe i złożone. W edycji CSS 2.1 standard zwiększył swoją objętość pięciokrotnie — cała jego specyfikacja ma rozmiar skromnej powieści. Na szczęście, twórcy CSS wiedzieli, jak jeszcze bardziej je ulepszyć. Podzielili następną generację usprawnień na tzw. moduły. W ten sposób projektanci przeglądarek mogą wprowadzać najciekawsze i najbardziej popularne części standardu stopniowo — co, tak naprawdę, już od dawna robili. Nowe moduły razem wzięte tworzą jedno rozwiązanie nazwane CSS3 (zwróć uwagę na osobliwy brak spacji między nazwą a cyfrą, tak jak w HTML5). CSS3 składa się z 50 modułów, z których każdy jest na innym etapie rozwoju. Znajdą się wśród nich własności zapewniające fajerwerki (bogate fonty i animacje) oraz mające bardziej specjalistyczne, praktyczne zastosowanie (np. pozwalające na odczytanie przez komputer na głos tekstu lub dostosowujące formatowanie strony do możliwości komputera lub urządzenia mobilnego). Część z nich jest dobrze obsługiwana na wszystkich wersjach najnowszych przeglądarek. Inne są w tak wcześniej fazie testów, że żadna przeglądarka ich nie rozpoznaje. W tym rozdziale przyjrzysz się najważniejszym (i cieszącym się najlepszym wsparciem) segmentom CSS3. Najpierw dowiesz się, jak upiększyć zwykły tekst dowolnym fontem. Następnie nauczysz się sztuki dynamicznego dopasowania

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

ROZDZIAŁ

Używanie CSS3 już dziś

stylów do różnej wielkości okien i różnych typów połączonych z siecią urządzeń, np. iPadów i iPhonów. Zobaczysz także, jak tworzy się cienie, zaokrąglone rogi i inne efekty. Użyjesz też kilku wytwornych sztuczek, które przyozdobią komponenty witryny. Na koniec poznasz, jak wykonywać przejścia, aby powstały delikatne efekty graficzne w odpowiedzi na kliknięcie na lub podtrzymanie kursora myszy nad kontrolką. Efekty te będą jeszcze ładniejsze, kiedy użyjesz dwóch nowych właściwości CSS3: transform i transparency. Nim jednak wszystkie te właściwości zostaną omówione, musisz rozważyć, w jaki sposób użyć najnowszych technik formatowania, nie zostawiając przy tym olbrzymiej części odbiorców w tyle.

Używanie CSS3 już dziś Standard CSS3 jest bezsprzecznie przyszłością w formatowaniu stron, choć prace nad nim wciąż trwają. Większość modułów jest w dalszym ciągu dopracowywana i zmieniana, przez co żadna przeglądarka ich nie rozpoznaje. Oznacza to, że CSS3 cierpi na tę samą przypadłość, co HTML5. Twórcy stron muszą samodzielnie zdecydować, czego warto użyć, co zignorować i jak poradzić sobie z lukami we wsparciu. Istnieją trzy strategie, które możesz wykorzystać przy wprowadzaniu CSS3 na swojej witrynie. Ich opis znajdziesz w kolejnych punktach. Uwaga: CSS3 nie jest częścią HTML5. Oba standardy były tworzone oddzielnie, przez różne zespoły, w innym czasie, w różnych budynkach. Jednak nawet konsorcjum W3C zachęca webdeweloperów do traktowania HTML5 i CSS3 jako części nowej fali nowoczesnego projektowania stron internetowych. Świadczy o tym choćby należąca do W3C strona umożliwiająca tworzenie logo HTML5 (www.w3.org/ html/logo). Zachęca ona do promowania CSS3 w logo HTML-u.

Strategia 1.: Wykorzystaj to, co możesz Używanie własności, które są powszechnie rozpoznawane przez wszystkie marki przeglądarek, jest rozsądnym pomysłem. Jedną z nich są fonty sieciowe (strona 247). Korzystając z właściwych formatów fontu, można sprawić, by strona działała dobrze na przeglądarkach z ery IE 6. Niestety, niewiele właściwości CSS3 należy do tej kategorii. Wprawdzie własność word-wrap działa praktycznie wszędzie, a starsze przeglądarki obsługują przezroczystość (choć wymaga to odrobiny zabawy), ale pozostałe udogodnienia CSS3 wykraczają poza możliwości wciąż popularnych przeglądarek IE 7 i IE 8. Uwaga: Każda z omawianych w tym rozdziale własności (chyba że w tekście zostanie stwierdzone inaczej) działa na wszystkich nowoczesnych przeglądarkach, z wyjątkiem Internet Explorera 9. Niestety, co za tym idzie, nie działają one na starszych wersjach IE.

242

CZĘŚĆ II ♦ TWORZENIE NOWOCZESNYCH STRON

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Używanie CSS3 już dziś

Strategia 2.: Traktuj własności CSS3 jak usprawnienia Zwolennicy CSS3 (którzy mają własną stronę internetową — DoWebsitesNeedTo BeExperiencedExactlyTheSameInEveryBrowser.com) powtarzają: „strony nie muszą prezentować się tak samo na każdej przeglądarce”. Jest w tym sporo prawdy. U podstaw tej strategii leży przekonanie, że CSS3 należy używać do dodawania subtelnych ulepszeń, których brak nie wpłynie na działanie strony w starszych przeglądarkach. Doskonałym tego przykładem jest właściwość border-radius, której można użyć do zaokrąglenia rogów elementu. Rzuć okiem na poniższy przykład: header { background-color: #7695FE; border: thin #336699 solid; padding: 10px; margin: 10px; text-align: center; border-radius: 25px; }

Przeglądarki, które rozpoznają własność border-radius, będą wiedziały, co z nią zrobić. Starsze ich wersje ją zignorują i pozostawią ostre wierzchołki (rysunek 8.1). Rysunek 8.1. W Internet Explorerze 9 obszar nagłówka ma zaokrąglone rogi (góra). Z kolei IE 8 ignoruje własność border-radius, lecz nakłada pozostałe style (dół)

Strategia ta ma swój urok, choćby taki, że umożliwia projektantom zabawę najnowszymi technologicznymi nowinkami. Jednak ma też swoje wady. Mimo iż Twoja strona prezentuje się dobrze na najnowszej wersji ulubionej przeglądarki, uruchomienie jej na starszym programie, używanym przez znaczny procent Twoich klientów, i przekonanie się, jak wygląda, może nie być przyjemnym przeżyciem. Chodzi przecież o to, aby zadziwić wszystkich, a nie tylko wyposażonych w najnowsze przeglądarki maniaków sieci. Z tego powodu czasem lepiej ostrożnie podejść do niektórych usprawnień CSS3. Wskazane jest ograniczenie do własności, które działają w wielu przeglądarkach (lub będą działały — w IE 10). Nie używaj ich do dramatycznej zmiany wyglądu, bo wtedy niektórzy z Twoich użytkowników mogą uzyskać status „gorszych” klientów.

ROZDZIAŁ 8. ♦ REWOLUCJA W STYLACH — CSS3

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

243

Używanie CSS3 już dziś

Wskazówka: Pod względem wykorzystania CSS3 Internet Explorer wlecze się za konkurencją. Wśród projektantów stron wyodrębniła się grupa rebeliantów, którzy twierdzą, że twórcy stron powinni zignorować Internet Explorera i zacząć używać własności CSS3, gdy tylko zyskają wsparcie innych przeglądarek. Wychodzą z założenia, że jeżeli nie oni to kto wywrze nacisk na Microsoft i zmusi korporację do przyspieszenia prac. To podejście jest dobre, jeśli celem Twojej strony jest promowanie zaawansowanych standardów sieciowych. W innym przypadku pamiętaj, że zlekceważenie dużej części świata nie będzie dobrze świadczyć o Tobie — niezależnie od tego, jak bardzo nie lubisz jakiejś przeglądarki, nie zmieni to faktu, iż Twoi klienci nadal będą ją wykorzystywać, by podziwiać Twoją pracę.

Strategia 3.: Dodanie awaryjnych mechanizmów za pomocą Modernizra Wykorzystanie częściowo obsługiwanej własności CSS jest dobrym pomysłem, jeżeli strona internetowa prezentuje się dobrze bez niego. Czasem jednak własność stanowi na tyle ważny fragment projektu, że pozbawiona jej strona wygląda po prostu brzydko. Pomyśl np. co się stanie, gdy użyjesz dostępnych tylko w Firefoksie ustawień krawędzi w sposób przedstawiony na rysunku 8.2. Rysunek 8.2. To wielokolorowe obramowanie prezentuje się całkiem ładnie w Firefoksie (góra). W Chrome zamiast niego otrzymasz czarne, jednostajne krawędzie (dół) — a to nigdy nie wygląda ładnie

Czasem problem ten da się rozwiązać po ustawieniu deklaracji własności w odpowiedniej kolejności. Zaleca się rozpocząć deklarowanie formatowania od bardziej ogólnych własności i dopiero po nich zdefiniować nowe formatowanie, modyfikujące wcześniejsze ustawienia. W ten sposób wszystkie przeglądarki wyświetlą to, co mogą, prawidłowo — stare skorzystają ze standardowych ustawień, podczas gdy nowe zastąpią je nowymi stylami. Przykładowo techniką tą można się posłużyć, aby zastąpić zwykłe tło gradientem: .stylishBox { ... background: yellow; background: radial-gradient(ellipse, red, yellow); }

Na rysunku 8.3 pokazano efekt końcowy. W niektórych przypadkach zastępowanie własności przeglądarek może nie zadziałać, gdyż należy je ustawiać w ściśle określonej kolejności. Wielokolorowa rama z rysunku 8.2 jest tego przykładem. Cały efekt powstał w wyniku przetworzenia właściwości border-colors, lecz pojawia się, jeśli ustawiono wcześniej grubość linii za pomocą własności border-thickness. W przeglądarkach, które nie obsługują wielokolorowych ram, grube krawędzie wyglądają naprawdę szpetnie.

244

CZĘŚĆ II ♦ TWORZENIE NOWOCZESNYCH STRON

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Używanie CSS3 już dziś

Rysunek 8.3. Góra: W przeglądarkach, które nie rozpoznają CSS3, selektor stylishBox zmienia ustawia kolor tła na żółty. Dół: W przeglądarkach, które obsługują CSS3, żółte tło jest zastępowane przez promienisty gradient mieszający czerwień w środku z żółcią po brzegach. Przynajmniej ma tak działać w teorii. Niestety, przykład nie do końca działa zgodnie z opisem, gdyż standard radial-gradient jest obecnie korygowany. Aby otrzymać widoczny tu rezultat, należy użyć przedrostków przeglądarek, które omówiono na stronie 247

Jednym ze sposobów rozwiązania tego problemu jest użycie Modernizra — biblioteki JavaScriptu, która sprawdza stopień obsługi własności HTML5 (strona 52). W ten sposób będziesz mógł ustawić alternatywne formatowanie dla przeglądarek, które nie obsługują konkretnych własności stylów. Wyobraź sobie, że masz utworzyć dwie wersje obszaru nagłówka z rysunku 8.1. W pierwszym przypadku używasz zaokrąglonych rogów (o ile są wspierane); w drugim podwójnych ram. Po dodaniu skryptu Modernizra do strony zestawienie obu stylów wygląda następująco: /* Uniwersalne ustawienia nagłówków */ header { background-color: #7695FE; padding: 10px; margin: 10px; text-align: center; } /* Ustawienia dla przeglądarek, które obsługują własność border-radius */ .borderradius header { border: thin #336699 solid; border-radius: 25px; } /* Ustawienia dla przeglądarek, które nie obsługują własności border-radius */ .no-borderradius header { border: 5px #336699 double; }

Na czym ta sztuczka polega? Na początku, po zaimplementowaniu biblioteki Modernizra do elementu dodaj atrybut class="no-js":

Po załadowaniu strony skrypt Modernizra sprawdza, które z szerokiego wachlarza własności HTML5, JavaScript i CSS3 są obsługiwane. Następnie dodaje kilkanaście klas do głównego elementu — każdą pojedynczo, oddzieloną od innych spacjami, tak jak w znaczniku niżej:

ROZDZIAŁ 8. ♦ REWOLUCJA W STYLACH — CSS3

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

245

Używanie CSS3 już dziś

Jeśli nazwa własności pojawi się wśród wartości tej klasy, oznacza to, że jest rozpoznawana. W innym przypadku wartość jest poprzedzana przedrostkiem no-. W przedstawionym przykładzie widzimy więc, że JavaScript jest obsługiwany (js), ale technologia WebSocket już nie (no-websockets). Patrząc na style CSS3, zauważysz, że własność border-radius działa (borderradius), ale odbicie lustrzane nie ma wsparcia (no-cssreflections). Naturalnie, możesz zapisać te klasy w postaci selektorów, żeby odfiltrować style, które są obsługiwane. Przykładowo selektor .borderradius header dotyczy wszystkich elementów w komponencie — pod warunkiem że przeglądarka rozpoznaje własność border-radius. W innym razie klasy .borderradius nie będzie w całym dokumencie — selektor nie dopasuje się do niej, a więc zdefiniowane w nim style nie zostaną nałożone. Szkopuł w tym, że Modernizr generuje klasy dla zaledwie ułamka własności CSS3. W tym ułamku mieszczą się najpopularniejsze własności CSS3, lecz np. border-color z rysunku 8.2 nie jest jedną z nich (działa tylko na Firefoksie). Z tego powodu lepiej nie stosować wielobarwnych ram na stronach — przynajmniej na razie. Uwaga: Biblioteki Modernizra możesz użyć w celu wdrożenia alternatywnych mechanizmów w JavaScripcie. W tym przypadku wystarczy, że sprawdzisz wartość odpowiedniej właściwości w obiekcie Modernizra, podobnie jak przy testowaniu obsługi HTML5. Warto posłużyć się tą techniką, jeśli chcesz zastosować bardziej zaawansowane własności CSS, np. przejścia i animacje. Trzeba przy tym stwierdzić, że czasem ogrom pracy i liczba problemów z kompatybilnością jest na tyle duża, że lepiej trzymać się uniwersalnego, napisanego w JavaScripcie rozwiązania niż nierozpoznanych własności tegoż języka.

Style właściwe konkretnym przeglądarkom Pracując nad rozbudowaniem kolejnych własności CSS, twórcy tego standardu często stają przed problemem jajka i kury. Aby ulepszyć swój produkt, potrzebują ocen i uwag wystawionych przez twórców przeglądarek i projektantów stron. Aby jednak je otrzymać, twórcy przeglądarek i projektanci witryn muszą wpierw zaimplementować te nowe i niedoskonałe rozwiązania. W rezultacie powstaje błędne koło testów i ocen, które zatrzyma się dopiero po wielu poprawkach. W kolejnych etapach składnia i implementacja właściwości ulega zmianom. I tu pojawia się niebezpieczeństwo — niedoinformowani webdeweloperzy mogą dowiedzieć się o nowych olśniewających opcjach i wdrożyć je na witrynach, nie zdając sobie sprawy z tego, że zmiany wprowadzone w przyszłych wersjach mogą doprowadzić do zburzenia układu ich stron. Aby tego uniknąć, twórcy przeglądarek wprowadzili system przedrostków autorskich, aby odróżnić własności i funkcje, które wciąż są opracowywane. Jako przykład rozważ opisaną na stronie 273 własność radial-gradient. Użyjesz jej w Firefoksie, jeśli zadeklarujesz „testową” wersję właściwości -moz-radialgradient. Właśnie słowo -moz- stosuje się w roli przedrostka autorskiego w tej przeglądarce (jest to skrót od „Mozilla” — nazwy organizacji, której własnością jest projekt Firefox).

246

CZĘŚĆ II ♦ TWORZENIE NOWOCZESNYCH STRON

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Typografia w sieci

Każdy silnik przeglądarek ma własny przedrostek tego typu (tabela 8.1). Strasznie komplikuje to pracę, lecz jest po temu ważny powód. Różni twórcy przeglądarek dodają obsługę tych samych własności w odmiennym czasie, często na podstawie innych wersji tej samej specyfikacji. Choć wszystkie przeglądarki obsłużą tę samą składnię w ostatecznej wersji standardu, na razie składnia tych samych własności na różnych przeglądarkach nie jest taka sama. Tabela 8.1. Przedrostki autorskie

Przedrostek

Przeglądarki

-moz-

Firefox

-webkit-

Chrome i Safari (ten sam silnik wczytywania w obu przeglądarkach)

-ms-

Internet Explorer

-o-

Opera

Dlatego też, jeśli już dziś chcesz użyć gradientu promienistego na wszystkich przeglądarkach (w tym IE 10), będziesz musiał wykorzystać rozdętą regułę CSS: .stylishBox { background: yellow; background-image: -moz-radial-gradient(circle, green, yellow); background-image: -webkit-radial-gradient(circle, green, yellow); background-image: -o-radial-gradient(circle, green, yellow); background-image: -ms-radial-gradient(circle, green, yellow); }

W tym przykładzie każda reguła definiuje promienisty gradient z podobną składnią. Świadczy to o tym, że standard się ujednolica, a twórcy przeglądarek już niedługo usuną przedrostki i zapewnią spójną obsługę własności radial-gradient (podobnie jak było z własnością corner-radius). Z uwagi na to, że testy nad border-radius zaczęły się niedawno, starsze wersje Chrome używają innej składni. Uwaga: Zastosowanie przedrostków autorskich może skomplikować życie. Wśród webdeweloperów nie ma zgody, czy są one złem koniecznym do uzyskania najnowocześniejszych fajerwerków, czy wielkim znakiem ostrzegawczym, który powinien odstraszyć bardziej rozważnych projektantów stron. Jedną rzecz wiadomo na pewno — jeśli z nich nie skorzystasz, zamkniesz sobie drogę do pokaźnej liczby własności CSS3.

Typografia w sieci Mając do wyboru ogrom olśniewających własności CSS3, trudno wskazać najlepszą wśród nich. Gdybyś miał wybrać jedną właściwość, która otwiera furtkę do bogactwa nowych opcji, jest nią możliwość definiowania sieciowych fontów. W przeszłości projektanci mogli używać jedynie ograniczonej liczby „bezpiecznych” fontów. Fonty te działają na wszystkich przeglądarkach i systemach operacyjnych. Każdy przyzwoity projektant wie, jak ważną rolę pełnią fonty w tworzeniu atmosfery na stronie. W zależności od wybranego kroju, ta sama treść może zmienić się z chłodnej i profesjonalnej na kapryśną, ze staromodnej na futurystyczną.

ROZDZIAŁ 8. ♦ REWOLUCJA W STYLACH — CSS3

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

247

Typografia w sieci

Uwaga: Istnieją dobre powody, dla których przeglądarki nie wprowadzały możliwości stosowania własnych fontów. Po pierwsze, kwestia optymalizacji — ekrany komputerowe mają mniejszą rozdzielczość niż wydrukowane dokumenty. Jeśli font sieciowy nie został przystosowany do wyświetlania na monitorze, wyglądałby jak rozmazane „coś” w mniejszych rozmiarach. Po drugie, większość fontów nie jest darmowa. Wielkie korporacje, takie jak Microsoft, niechętnie dodawały opcje, które umożliwiałaby webdeweloperom pobranie zainstalowanych na ich komputerze plików i wykorzystanie na stronie bez oficjalnej zgody. Jak się przekonasz w następnym punkcie, wydawcy fontów wpadli na pomysłowe rozwiązanie tego problemu.

W specyfikacji CSS3 dodano własność @font-face. Działa ona w następujący sposób.

1. Wysyłasz swój font na witrynę (czy raczej wiele wersji tego samego fontu, z myślą o wsparciu we wszystkich przeglądarkach).

2. Używając instrukcji @font-face, rejestrujesz każdy z fontów w arkuszu stylów.

3. Wykorzystujesz zarejestrowane fonty w regułach stylów, tak jak się to robi z bezpiecznymi fontami.

4. Gdy przeglądarka wykryje arkusz, na którym użyłeś fontów sieciowych, ściąga je do pamięci cache przeznaczonej na strony i zdjęcia. Następnie wprowadza je na Twoją stronę (rysunek 8.4). Jeśli inna strona będzie korzystać z tych samych fontów, będzie musiała je zarejestrować i zapewnić ich własne pliki źródłowe. Uwaga: Technicznie rzecz ujmując, własność @font-face nie jest nowa. Była częścią standardu CSS2, którą usunięto w wersji CSS 2.1, gdy okazało się, że twórcy przeglądarek nie byli w stanie nawiązać ze sobą współpracy. Nastanie ery CSS3 dało bodziec do uczynienia z deklaracji @font-face uniwersalnego standardu. W kolejnych punktach wyjaśniono te kroki bardziej szczegółowo.

Formaty fontów Choć wszystkie nowoczesne przeglądarki obsługują deklarację @font-face, nie rozpoznają tych samych rozszerzeń plików. Internet Explorer, który obsługuje tę własność od dawna, rozpoznaje tylko pliki EOT (ang. Embedded OpenType). Wykorzystanie tego formatu ma istotne zalety. Przykładowo użyta w nim kompresja zmniejsza wielkość pliku, a rygorystyczna licencja zapewnia, że fontu nie wolno zabrać z Twojej strony i użyć na innej. Mimo to, format ten nie cieszył się dużą popularnością i żadna inna przeglądarka go nie wykorzystuje. Zamiast niego pozostałe przeglądarki (przynajmniej do niedawna) trzymały się bardziej znanych standardów, powszechnie wykorzystywanych w komputerowych aplikacjach — TTF (ang. TrueType) i OTF (ang. OpenType PostScript). Na tym nie koniec — wypada wspomnieć o dwóch nowych akronimach — SVG i WOFF. W tabeli 8.2 zaprezentowano ich omówienie.

248

CZĘŚĆ II ♦ TWORZENIE NOWOCZESNYCH STRON

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Typografia w sieci

Rysunek 8.4. Zmodyfikowania wersja apokaliptycznej strony z mieszaniną czterech fontów. Wszystkie są darmowe — na stronie 250 dowiesz się, jak je ściągnąć z witryny Font Squirrel. Zwróć jednak uwagę na to, że polskie czcionki nie zawsze wyświetlają się tak, jakbyś tego oczekiwał

Tabela 8.2. Zagnieżdżone formaty fontów

Format

Format

Działa na

TTF (ang. TrueType)

Twój pierwszy plik fontu najprawdopodobniej będzie zapisany w jednym z tych formatów.

Firefox (przed wersją 3.6), Chrome (przed wersją 6.), Safari i Opera.

EOT (ang. Embedded Open Type)

Format właściwy produktom Microsoftu, który nie jest stosowany w żadnej przeglądarce poza Internet Explorerem.

Internet Explorer (przed wersją 9.).

SVG (ang. Scalable Vector Graphics)

Uniwersalny format graficzny, którego można użyć dla fontów. Jest dobry, choć niedoskonały (wolniej się ładuje i wyświetlany krój ma niższą jakość).

Safari Mobile (na iPhonach i iPadzie, przed wprowadzeniem wersji iOS 4.2) i urządzenia mobilne z systemem Android.

WOFF (ang. Web Open Font Format)

Ten format jest przyszłością fontów. Wszystkie nowe przeglądarki go rozpoznają.

Wszystkie przeglądarki, począwszy od Internet Explorer 9, Firefoksa 3.6 i Chrome 6.

OTF (ang. OpenType PostScript)

ROZDZIAŁ 8. ♦ REWOLUCJA W STYLACH — CSS3

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

249

Typografia w sieci

USUWANIE PROBLEMÓW

Maskowanie dziwactw gdy strona zostaje załadowana z użyciem awaryjnego fontu, ponieważ font nie został do końca ściągnięty. Po ściągnięciu fontu przeglądarka wypełnia nim stronę ponownie. Problem ten jest najlepiej widoczny na starszych wersjach Firefoksa. Jeśli Ci to przeszkadza, wiedz, że firma Google opracowała bibliotekę JavaScriptu, która pozwala zdefiniować style awaryjne, wdrażane dla niezaładowanych fontów, co daje pełną kontrolę nad wyglądem tekstu (http://code.google.com/intl/pl/apis/webfonts/ docs/webfont_loader.html).

Jeśli nawet będziesz przestrzegał zasad i dostarczysz wszystkie formaty plików, pojawienie się błędów w wyświetlaniu nie powinno Cię zdziwić. Oto kilka najczęstszych problemów, na które natrafisz w pracy nad sieciowymi fontami.  Wiele fontów prezentuje się źle na wciąż popular-

nym systemie Windows XP, gdyż często wyłącza się w nim ustawienie antyaliasingu (fonty bez antyaliasingu prezentują się równie dobrze jak tusz do rzęs na ośle).  Często słyszy się doniesienia, że niektóre wersje

przeglądarek (lub systemów operacyjnych) mają problem z wyświetlaniem osadzonych fontów.  Niektóre przeglądarki cierpią na tzw. problem FOUT

(ang. Flash of Unstyled Text — mignięcie nieobstylowanego tekstu). Do tego zjawiska dochodzi,

Choć błędy te mogą być denerwujące, większość z nich jest systematycznie usuwana w nowych wersjach przeglądarek. Przykładowo Firefox minimalizuje oddziaływanie efektu FOUT, czekając do 3 sekund na ściągnięcie zagnieżdżonego fontu, nim użyje wersji awaryjnej.

Koniec końców, jeżeli chcesz użyć deklaracji @font-face i wyświetlić dany font na jak największej liczbie przeglądarek, musisz go zapisać w wielu formatach. Koniecznym minimum jest podanie plików TTF lub OTF (wystarczy jeden z nich), EOT oraz SVG. Dobrym pomysłem (choć nie wymogiem) jest zawarcie fontu WOFF, który najprawdopodobniej stanie się bardziej popularny i lepiej obsługiwany w przyszłości. (Jedną z zalet formatu jest to, że pliki WOFF są kompresowane, co zmniejsza czas ich ściągania).

Używanie zestawów fontów Na pewno zastanawiasz się teraz, skąd wziąć potrzebne pliki fontów. Najprostszym rozwiązaniem jest ściągnięcie gotowego zestawu z sieci. W ten sposób znajdziesz fonty wszelakiego typu. Szkopuł w tym, że Twój wybór ogranicza się do tego, co jest dostępne w sieci. Jednym z najlepszych źródeł fontów jest witryna Font Squirrel. Na stronie www.fontsquirrel.com/fontface znajdziesz wybrane zestawy (rysunek 8.5). Ściągnięty zestaw fontów znajduje się w skompresowanym pliku ZIP. Przykładowo po ściągnięciu widocznego na rysunku 8.5 fontu Chantelli Antiqua powinieneś otrzymać następujące pliki: Bernd Montag License.txt Chantelli_Antiqua-webfont.eot Chantelli_Antiqua-webfont.svg Chantelli_Antiqua-webfont.ttf Chantelli_Antiqua-webfont.woff demo.html stylesheet.css

250

CZĘŚĆ II ♦ TWORZENIE NOWOCZESNYCH STRON

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Typografia w sieci

Rysunek 8.5. Witryna Font Squirrel jest zbiorem kilku setek wysokiej klasy fontów pogrupowanych według kroju (np. „Calligraphic”, „Grunge” i „Retro”). Co najlepsze, wszystkie są całkowicie darmowe — możesz ich swobodnie użyć na swoim własnym komputerze do tworzenia dokumentów lub w sieci do budowania stron. Gdy odnajdziesz interesujący font, kliknij przycisk View Font (Sprawdź font), aby przyjrzeć się każdej literze z bliska, View @ff Demo (Zobacz demo), by zobaczyć, jak font prezentuje się na stronie z wykorzystaniem deklaracji @font-face, lub Get Kit (Ściągnij zestaw), żeby ściągnąć wybrany zestaw na swój komputer

Plik tekstowy (Bernd Montag License.txt) zawiera informacje o licencji, w których przeczytasz, że możesz użyć fontu w dowolny sposób, lecz nie masz prawa go sprzedawać. Font noszący nazwę Chantelli_Antiqua-web-font występuje w trzech formatach. Nadto, zależnie od rodzaju fontu, wśród plików mogą znaleźć się dodatkowe warianty, np. pogrubione, przyciemnione, kursywa. Plik stylesheet.css zawiera reguły formatowania, które przydadzą się do wdrożenia fontów na Twojej stronie, podczas gdy demo.html jest dokumentem, po otworzeniu którego przekonasz się, jak font wygląda w przeglądarce. Aby wykorzystać font Chantelli Antiqua, należy przekopiować wszystkie pliki fontu do folderu Twojej strony. Następnie trzeba zadeklarować font w arkuszu stylów. W tym celu używa się deklaracji @font-face, którą należy umieścić na samej górze dokumentu. Prezentuje się ona w ten sposób (wiersze ponumerowano, aby ułatwić opis): 1 2 3 4 5

@font-face { font-family: 'ChantelliAntiquaRegular'; src: url('Chantelli_Antiqua-webfont.eot'); src: local('Chantelli Antiqua'), url('Chantelli_Antiqua-webfont.woff') format('woff'), ROZDZIAŁ 8. ♦ REWOLUCJA W STYLACH — CSS3

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

251

Typografia w sieci

6 7 8

url('Chantelli_Antiqua-webfont.ttf') format('truetype'), url('Chantelli_Antiqua-webfont.svg') format('svg'); }

Przeanalizowanie tego przykładu krok po kroku pomoże Ci zrozumieć, jak działa. • Wiersz 1.: Własność @font-face deklaruje font, dzięki czemu możesz go użyć

w innym miejscu arkusza stylów. • Wiersz 2.: Wybranemu fontowi możesz nadać dowolną nazwę. Nazwy tej

użyjesz później, przy nakładaniu fontu na tekst. • Wiersz 3.: Pierwszym zadeklarowanym formatem musi być plik EOT. Wynika

to z tego, że Internet Explorer nie rozpoznaje dalszej części deklaracji i ignoruje inne formaty. Funkcja url() nakazuje przeglądarce ściągnąć plik, którego lokalizację określono w zapisanej w niej ścieżce. Jeśli wszystkie pliki fontów umieścisz w folderze strony, wystarczy, że podasz nazwę pliku. • Wiersz 4.: Następnym krokiem jest użycie instrukcji local(). Przekazuje ona

przeglądarce nazwę fontu i jeśli jest zainstalowany na komputerze użytkownika, przeglądarka go użyje. Niestety, w niektórych przypadkach może to doprowadzić do błędów (np. w systemie Mac OS X może to spowodować wyświetlenie okna dialogowego zabezpieczeń — w zależności od tego, gdzie dany font został zainstalowany — lub załadować inny font o tej samej nazwie). Z tego powodu webdeweloperzy używają nieprawdziwej nazwy, zapewniając tym samym, że przeglądarka nie znajdzie lokalnej wersji fontu. Częstą praktyką jest użycie w tej roli nic nieznaczących symboli, np. local(' '). • Wiersze od 5. do 7.: W ostatnim kroku należy podać przeglądarce ścieżki do

plików. Jeśli wśród wszystkich formatów znajdzie się plik WOFF, zadeklaruj go jako pierwszy, ponieważ oferuje najlepszą jakość. Następnie podaj plik TTF lub OTF, a na końcu przekaż ścieżkę do fontu w formacie SVG. Wskazówka: Oczywiście, nie musisz wpisywać deklaracji @font-face ręcznie (a już na pewno nie musisz wiedzieć, jak dokładnie działa). Możesz po prostu przekopiować jej regułę z pliku stylesheet.css, który zawarto w zestawie fontów. Gdy już zadeklarujesz zagnieżdżony font, będziesz mógł go użyć w dowolnym arkuszu stylów. Wystarczy, że posłużysz się własnością font-family — odniesiesz się w niej do rodziny fontów, które zadeklarowałeś wewnątrz selektora @font-face (wiersz 2.). W poniższym przykładzie pominięto szczegóły deklaracji @font-face. @font-face { font-family: 'ChantelliAntiquaRegular'; ... } body { font-family: 'ChantelliAntiquaRegular'; }

Reguła ta nakłada font na całą stronę, choć można ją ograniczyć do niektórych elementów lub klas. Nawet wtedy należy wpierw zadeklarować font we własności @font-face. Gdybyś odwrócił kolejność deklarowania, font nie będzie właściwie wyświetlany na stronie.

252

CZĘŚĆ II ♦ TWORZENIE NOWOCZESNYCH STRON

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Typografia w sieci

NAJCZĘŚCIEJ ZADAWANE PYTANIA

Korzystanie z fontów na własnym komputerze Czy mogę używać tych samych fontów do pracy w sieci i tworzenia dokumentów? Jeżeli znajdziesz w sieci jakiś darmowy font, najprawdopodobniej możesz go użyć również na swoim własnym komputerze. Nic nie stoi na przeszkodzie, byś go wykorzystał w programie graficznym do utworzenia logo. Być może chciałbyś się również nim posłużyć w trakcie opracowywania wszelakich materiałów — reklam, ulotek, instrukcji obsługi produktów i raportów finansowych.

Nowoczesne komputery z systemami Windows i Mac rozpoznają rozszerzenia TrueType (.ttf) i OpenType (.otf). Wszystkie pakiety fontów zawierają jeden z tych formatów — zwykle TrueType. Aby zainstalować je w Windows, wyodrębnij zawartość pliku ZIP. W systemie Mac OS kliknij dwa razy plik i otwórz aplikację Album z czcionkami. Następnie kliknij przycisk Zainstaluj.

Wskazówka: Zbiory witryny Font Squirrel zawierają więcej fontów niż dostępnych zestawów. Znajdziesz je, przeszukując listę najbardziej popularnych fontów (kliknij odnośnik Most Downloaded — najczęściej ściągane) lub najnowszych (Newly Added). W tych listach znajdziesz niepełne zestawy fontów, których część można ściągnąć z innej witryny. Używając opisanego na stronie 255 generatora zestawów fontów, możesz łatwo przekonwertować jeden z nich na inne formaty.

Korzystanie z fontów sieciowych Google Jeśli pragniesz jeszcze bardziej uprościć korzystanie z fantazyjnych fontów, musisz wiedzieć, że Google opracowało rozwiązanie z myślą o Tobie. Konsorcjum to utworzyło usługę Google Web Fonts, która hostuje darmowe fonty, z których może skorzystać każdy. Piękno tego rozwiązania polega na tym, że nie musisz sobie zawracać głowy formatami, gdyż Google automatycznie wykrywa rodzaj przeglądarki i wysyła właściwy plik fontów. Aby skorzystać z tych możliwości, postępuj zgodnie z instrukcją.

1. Otwórz stronę www.google.com/webfonts. Wyświetli się lista dostępnych fontów (rysunek 8.6).

2. U góry strony kliknij jedną z zakładek — Word (słowo), Sentence (zdanie) lub Paragraph (akapit) — wybierając w ten sposób metodę podglądu fontu. Jeśli przykładowo polujesz na font do nagłówka strony, wybierz zakładkę Word lub Sentence, by przyjrzeć się z bliska jednemu słowu bądź wierszowi tekstu. Jeśli jednak zamierzasz użyć go w dłuższym fragmencie, rozsądniej będzie, gdy wybierzesz Paragraph, by przekonać się, jak font prezentuje się w całym akapicie. Dobrym pomysłem jest też wpisanie własnego tekstu i ustawienie pożądanej wielkości fontu w podglądzie. Także w tej usłudze powinieneś zwrócić uwagę na wyświetlanie polskich znaków diakrytycznych — podgląd nie zawsze odzwierciedla rzeczywisty efekt.

ROZDZIAŁ 8. ♦ REWOLUCJA W STYLACH — CSS3

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

253

Typografia w sieci

Rysunek 8.6. Google nieustannie wzbogaca swój zbiór fontów. Poszukując fontu, warto skorzystać z opcji ich porządkowania i filtrowania (zaznaczonych w kółku). Możesz np. posortować je alfabetycznie lub wyświetlić najbardziej popularne albo filtrować fonty szeryfowe, bezszeryfowe lub pisane ręcznie (kursywa)

3. Ustaw opcje wyszukiwania. Jeśli poszukujesz konkretnego fontu, wpisz jego nazwę w pole wyszukiwania. Inaczej będziesz musiał przewinąć stronę, aby go znaleźć. W Twoich poszukiwaniach pomogą opcje filtrowania i sortowania (przydatne, jeśli interesują Cię np. popularne, pogrubione fonty bezszeryfowe). Na rysunku 8.6 pokazano, gdzie znaleźć te opcje.

4. Gdy już znajdziesz font, który nada się na Twoją stronę, kliknij link Pop out. W ten sposób otworzysz okno widoku fontu z przykładem i pełną listą czcionek.

5. Jeżeli to, co zobaczyłeś, spodobało Ci się, kliknij link Quick-use (użyj teraz), aby otrzymać wszystkie potrzebne informacje. Google wygeneruje cały kod potrzebny do zagnieżdżenia fontu. W jego skład wchodzi element z odnośnikiem do arkusza stylów (który należy dodać do strony internetowej) oraz reguła CSS deklarująca dany font.

6. Dodaj arkusz stylów do strony. Jeśli np. wybrałeś font Metrophobic, Google wygeneruje link, który trzeba umieścić w elemencie dokumentu:

254

CZĘŚĆ II ♦ TWORZENIE NOWOCZESNYCH STRON

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Typografia w sieci

PORADNIK INŻYNIERA

Tworzenie kolekcji fontów Omówiona wyżej metoda pozwala na szybkie uzyskanie kodu potrzebnego do zagnieżdżenia fontu. Nie jest to jedyna opcja — możesz osiągnąć znacznie więcej, tworząc kolekcję fontów. Kolekcja jest swoistym pakietem wielu fontów. Aby ją zbudować, na witrynie Google kliknij przycisk Add to Collection (dodaj do kolekcji), który znajduje się pod potrzebnym fontem. Kolejne pozycje w Twojej kolekcji pojawiają się w niebieskiej stopce u dołu strony. Gdy już skończysz wybierać, kliknij przycisk Use (użyj) w stopce. W odpowiedzi Google wyświetli stronę podobną

do znanej Ci, zatytułowanej Quick-use, która utworzy pojedynczy arkusz z odniesieniem do wszystkich fontów z kolekcji. Gdy już otrzymasz kolekcję, możesz użyć dwóch linków, które pojawią się w prawej górnej części strony. Po kliknięciu pierwszego — Bookmark your Collection (zapisz kolekcję) — utworzysz „zakładkę”, która umożliwi ponowne załadowanie kolekcji w przyszłości, żeby ją zmodyfikować. Z kolei drugi — Download your Collection (ściągnij kolekcję) — ściągnie wszystkie fonty na Twój komputer, umożliwiając ich zainstalowanie.

Ów arkusz stylów zawiera deklarację @font-face, więc nie musisz jej pisać raz jeszcze. Co najlepsze, Google zapewnia pliki z fontami, więc nie musisz ich ładować na swoją stronę. Uwaga: Pamiętaj, by umieścić element stylów Google przed odnośnikami do innych arkuszy. W ten sposób będziesz mógł użyć wybranego fontu na wszystkich.

7. Posłuż się nazwą fontu w dowolnym miejscu. Oto, jak można wykorzystać właśnie zadeklarowany font Metrophobic w nagłówku, z awaryjnymi fontami, które wkroczą do akcji, jeśli okaże się, że nie można było ściągnąć pliku z serwera. h1 { font-family: 'Metrophobic', arial, serif; }

Korzystanie z własnych fontów Maniacy fontów potrafią być wyjątkowo wybredni, gdy w grę wchodzi rodzaj kroju. Jeśli masz na uwadze konkretny font, może się okazać, że nawet największa darmowa biblioteka nie wystarczy. Na szczęście, istnieją sposoby, aby dopasować font do wymagań sieci. Korzystając z właściwych narzędzi, można zmienić zwykły plik TTF lub OTF na dowolny inny format (EOT, SVG lub WOFF). Nim jednak się tym zajmiesz, ważne, żebyś zdał sobie sprawę z jednej rzeczy: zwykłe fonty nie są darmowe. Nie możesz, ot tak wziąć sobie fontu, który Ci się podoba, ze swojego komputera i użyć go na stronie, chyba że masz zgodę jego twórcy. Firmy Microsoft i Apple płacą ciężkie pieniądze za fonty w swoich systemach operacyjnych i aplikacjach, po to abyś Ty mógł tworzyć, powiedzmy, biuletyn informacyjny w swoim edytorze tekstu. Niestety, licencja nie pozwala umieścić tych fontów na serwerze i użyć ich na stronie.

ROZDZIAŁ 8. ♦ REWOLUCJA W STYLACH — CSS3

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

255

Typografia w sieci

Wskazówka: Jeśli masz swój ulubiony font, jedynym sposobem, by sprawdzić, czy trzeba za niego płacić, jest skontaktowanie się z firmą lub osobą prywatną, która go stworzyła. Niektórzy wydawcy pobierają opłaty licencyjne, które zależą od ruchu na Twojej stronie. Inni twórcy mogą użyczyć Ci swojego dzieła za symboliczną sumę lub nawet za darmo, pod warunkiem że spełnisz pewne kryteria (np. zawrzesz przypis z informacją o foncie; użyjesz ich na witrynie przeznaczonej do użytku niekomercyjnego itp.). Skontaktowanie się z autorem może Ci przynieść pewną korzyść: zdolni twórcy fontów często dostarczają wersję zoptymalizowaną do pracy w sieci.

Gdy już upewnisz się, że nie ma przeciwwskazań, by użyć danego fontu na stronie, możesz przekonwertować plik z nim za pomocą narzędzia udostępnionego na witrynie Font Squirrel (tej samej, na której znajdziesz gotowe zestawy fontów). W tym celu udaj się na stronę www.fontsquirrel.com/fontface/generator. Na rysunku 8.7 przedstawiono trzystopniowy proces, który należy powtórzyć. Rysunek 8.7. Najpierw kliknij przycisk Add Font (dodaj font), co pozwoli załadować plik z komputera. Potem kliknij przycisk wyboru, potwierdzając, że dostarczane przez Ciebie fonty mogą być osadzane na witrynach internetowych (zakłada się, że zapoznałeś się z licencją fontu — patrz wyżej). Na koniec kliknij przycisk Download Your Kit (ściągnij swój zestaw)

Generowany przez Font Squirrel zestaw wygląda podobnie do standardowego. Zawiera nawet arkusz stylów z deklaracją @font-face oraz stronę testową. Wskazówka: W dalszym ciągu szukasz innych źródeł fontów? Jeśli jeszcze nie znalazłeś kroju dla siebie, odwiedź witrynę http://webfonts.info. Zawiera ona bazę linków do innych stron, które oferują darmowe fonty, jak też odnośniki do witryn wydawców, takich jak legendarny Monotype. Choć model pobierania opłat za wykorzystanie szybko się zmienia, większość wydawców ma w swojej ofercie darmowe fonty oraz opcje subskrypcji, która daje deweloperom dostęp do dziesiątek krojów o bardzo wysokiej jakości za cenę od 10 dolarów rocznie. Niektórzy wydawcy zapisują fonty w usługach hostujących, w rodzaju Google Fonts, dzięki czemu nie trzeba ich zachowywać na własnym serwerze.

Wielokolumnowy tekst Fonty sieciowe nie są jedyną innowacją, związaną z wyświetlaniem tekstu w CSS3. Standard ten zawiera nowy moduł służący do układania długich treści w kolumny, dzięki czemu są bardziej czytelne.

256

CZĘŚĆ II ♦ TWORZENIE NOWOCZESNYCH STRON

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Typografia w sieci

Używanie wielu kolumn jest banalnie proste, a istnieją dwa sposoby, aby je utworzyć. Pierwsza metoda polega na ustawieniu liczby kolumn przy użyciu własności column-count: article { text-align: justify; column-count: 3; }

Niestety, w czasie pisania książki składnia ta działa wyłącznie w przeglądarce Opera. Aby uzyskać ten sam efekt w Firefoksie, Chrome i Safari, dołącz do nazwy własności autorskie przedrostki, tak jak w poniższym przykładzie: article { text-align: justify; -moz-column-count: 3; -webkit-column-count: 3; column-count: 3; }

Internet Explorer 9 nie obsługuje tej reguły (choć Internet Explorer 10 ma na to szanse). To podejście — tworzenie określonej liczby kolumn — działa w stałych układach stron. Jeśli jednak Twój układ jest płynny — z przestrzenią pomiędzy elementami, która rozciąga się lub kurczy wraz ze zmianą wielkości okna — kolumny mogą stać się zbyt szerokie, a tekst nieczytelny. W takiej sytuacji lepiej nie ustawiać dokładnej liczby kolumn. Zamiast tego ustal szerokość kolumny przy użyciu własności column-width: article { text-align: justify; -moz-column-width: 10em; -webkit-column-width: 10em; column-width: 10em; }

W rezultacie przeglądarka utworzy tyle kolumn, ile będzie potrzebować, by wypełnić całą dostępną przestrzeń (rysunek 8.8). Uwaga: Szerokość kolumn możesz zadeklarować w pikselach, lecz w tym przypadku em będzie lepszą jednostką, bo dopasowuje się do wielkości fontu. Jeśli więc użytkownik zmodyfikuje wielkość liter w przeglądarce, szerokość kolumn wzrośnie proporcjonalnie. Abyś mógł lepiej sobie to zwizualizować, musisz wiedzieć, że 1 em jest równy dwukrotnemu rozmiarowi fontu. Dlatego też, jeżeli używasz 12-pikselowego fontu, 1 em wynosi 24 piksele.

Wielkość przestrzeni między kolumnami dostosujesz za pomocą własności column-gap. Możesz też dodać pionową linię (własność column-rule), która je rozdzieli. Więcej informacji o tworzeniu kolumn, w tym o sposobach kontrolowania dokładnych miejsc, w których tekst przechodzi z jednej kolumny do drugiej, oraz sztuczkach, jakie umożliwiają liczbom i innym elementom przechodzić między nimi, znajdziesz w dokumentacji standardu na stronie www.w3.org/TR/css3-multicol. Niestety, w czasie pisania książki nie istniała przeglądarka, która obsługiwałaby te zaawansowane właściwości.

ROZDZIAŁ 8. ♦ REWOLUCJA W STYLACH — CSS3

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

257

Przystosowanie stron do różnych urządzeń

Rysunek 8.8. W wąskim oknie (góra) Firefox wyświetla tylko jedną kolumnę. Jeśli jednak je poszerzysz, uzyskasz dodatkowe rubryki

Przystosowanie stron do różnych urządzeń Przystosowanie stron do różnych urządzeń

Jeśli kiedykolwiek wcześniej używałeś mobilnego urządzenia, z pewnością przekonałeś się, że malutki ekranik nie jest najlepszym oknem dla sieci. Jasne, że możesz przewijać i przybliżać obraz na prawie każdej stronie, lecz jest to bardzo pracochłonne. Dużo przyjemniej poruszać się po stronie od początku powstałej z myślą o urządzeniach przenośnych, która dopasowuje zawartość do wielkości ekranu.

258

CZĘŚĆ II ♦ TWORZENIE NOWOCZESNYCH STRON

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Przystosowanie stron do różnych urządzeń

Obecnie wśród deweloperów nie jest niczym niezwykłym tworzenie stron dla oddzielnej grupy urządzeń. Strony takie są często hostowane na innych domenach (np. mobilna wersja „New York Timesa” ma adres http://m.nytimes.com). Pojawia się jednak pewien problem. Wraz ze zwiększającą się liczbą użytkowników, surfujących po sieci przy użyciu różnorodnych urządzeń przenośnych, twórcom stron jest coraz trudniej zarządzać jednocześnie wieloma dopasowanymi do wymagań witrynami. Oczywiście, utworzenie oddzielnej strony nie jest jedynym rozwiązaniem. Mógłbyś też napisać serwerowy kod, który sprawdzałby każde żądanie, identyfikował typ przeglądarki użytkownika i wysyłał odpowiednią dla niej zawartość. Jest to wyśmienite rozwiązanie, pod warunkiem że masz na nie czas i dysponujesz potrzebnymi umiejętnościami. Czy nie byłoby wspaniale, gdybyś miał do dyspozycji prosty mechanizm, który dostroiłby arkusz stylów do typu urządzenia, bez potrzeby konstruowania całej, odrębnej aplikacji? Odpowiedzią na to zapotrzebowanie są zapytania medialne. Ta własność CSS3 pozwala dynamicznie zmieniać formatowanie dla różnych urządzeń i ustawień wyświetlania. Użyta w odpowiedni sposób pozwoli Ci poprawnie wyświetlać strony na szerokich monitorach komputerów stacjonarnych i iPhonach — bez modyfikowania linijki kodu HTML.

Zapytania medialne Zapytania medialne działają w oparciu o jedną z cech charakterystycznych urządzenia, które obsługują (takich jak wielkość ekranu, rozdzielczość, liczba wyświetlanych kolorów itd.). W oparciu o te dane możesz nałożyć różne style czy nawet inny ich arkusz. Na rysunku 8.9 zaprezentowano zapytania medialne w działaniu. KĄCIK WSPOMNIEŃ

Typy mediów CSS Ciekawe jest to, że już w edycji CSS 2.1 twórcy standardu poczynili pierwszą próbę rozwiązania problemu urządzeń mobilnych — wprowadzili tzw. typy mediów. Być może zdarzyło Ci się wcześniej z nich korzystać w celu dodania oddzielnego arkusza stylów dla druku stron.

...

Nie jest to rozwiązanie doskonałe. Starsze wersje Firefoksa (wcześniejsze niż 3.5) nie rozpoznają zapytań medialnych, komentarz warunkowy ich nie dotyczy. Problem ten da się rozwiązać po rozpoznaniu przeglądarki i „podmienieniu” strony przy użyciu kodu JavaScript, lecz nie jest to zbyt eleganckie wyjście. Na szczęście, starsze wersje Firefoksa są coraz rzadziej używane. Nota bene, możesz połączyć medialne zapytania z opisanymi w ramce na stronie 259 typami mediów. Zacznij od przypisania atrybutowi media typu, ale nie wpisuj go w nawiasach. Oto sposób na zadeklarowanie druku strony o ustalonej wielkości.

Rozpoznawanie urządzeń mobilnych Jak już wiesz, komputery stacjonarne od urządzeń mobilnych odróżnisz, stosując zapytanie medialne z własnością max-device-width. Rodzi się pytanie, jakich szerokości w tym celu użyć. Telefony komórkowe wykryjesz, sprawdzając, czy parametr max-device-width jest mniejszy niż 480 pikseli. Jest to najlepsza, najlepiej potwierdzona zasada. Reguła ta rozpoznaje iPhony i współczesne telefony działające w oparciu o system Android:

Jeśli jesteś pasjonatem techniki, w Twoim mózgu powinna zapalić się czerwona lampka. W końcu, aktualna generacja urządzeń mobilnych używa małych ekranów o wysokiej rozdzielczości. Przykładowo iPhone wyświetla siatkę 960×640 pikseli

264

CZĘŚĆ II ♦ TWORZENIE NOWOCZESNYCH STRON

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Kontenery na błysk

na raz. Dlatego też może Ci się wydać, że dla niego własność max-device-width powinna być większa. Co zaskakujące, tak nie jest. Większość urządzeń w dalszym ciągu informuje przeglądarki, że szerokość ich ekranu wynosi 480 pikseli, nawet jeśli posiadają wyświetlacze charakteryzujące się wysoką rozdzielczością. Dodają one współczynnik korekcji, tzw. stosunek pikseli. W iPhonie 4 każdy piksel z perspektywy CSS jest równy dwóm pikselom na ekranie, a więc stosunek pikseli jest równy 2. W zasadzie łatwo utworzyć zapytanie medialne, które wykryje iPhona 4, ale zignoruje starsze wersje tego telefonu:

Zidentyfikowanie iPada jest wyzwaniem innego typu. Użytkownicy mogą go obracać, co powoduje wyświetlenie treści w pionie lub w poziomie. Choć zmienia to parametr max-width, obrócenie urządzenia nie wpływa na własność max-device-width. W obu orientacjach — horyzontalnej i wertykalnej — iPad komunikuje, że jego szerokość wynosi 768 pikseli. Na szczęście, nie ma przeciwwskazań, by połączyć właściwości max-device-width i orientation — pozwoli to dynamicznie zmienić obstylowanie dokumentu w zależności od pozycji urządzenia.

Oczywiście, sposób ten sprawdza się nie tylko w iPadach. Gadżety wyposażone w wyświetlacz o podobnej szerokości (w tym przypadku 768 pikseli lub mniej) otrzymają ten sam zestaw reguł. Uwaga: Zapytania medialne nie zmienią zwykłej strony w przyjazną dla użytkowników komórek. Należy wziąć pod uwagę takie czynniki jak prędkość transferu danych i interfejs. Do transferu warto użyć niewielkich obrazów (pomoże zadeklarowanie ich w stylach CSS jako tła elementów; podejście to może jednak przeobrazić zarządzanie stroną z dużą ilością grafik w koszmar). Z kolei w kwestii interfejsu dobrym pomysłem może okazać się rozbicie treści na mniejsze części (w rezultacie nie trzeba będzie tak często przewijać strony). Zaleca się również unikanie efektów i elementów interakcji, z których trudno skorzystać w interfejsie dotykowym (np. wyskakujących menu).

Kontenery na błysk Już od pierwszych dni CSS projektanci stron używali stylów do formatowania kontenerów — swoistych pudeł na zawartość. Wraz z rozwojem CSS kontenery stawały się coraz bardziej imponujące, tworzono w nich wszystko, od cieniowanych nagłówków, po podpisy pod rysunkami. W dodatku, gdy w CSS wprowadzono pseudoklasę :hover, zwykłe pudła z treścią zmieniły się w zdobione, jarzące się przyciski, co przeniosło niezręczne rozwiązania JavaScriptu w odmęty zapomnienia. Nie dziwi więc, że wśród cieszących się największą popularnością i stopniem obsługi własności CSS3 znajduje się całe mnóstwo takich, które sprawiają, że kontenery stają się jeszcze piękniejsze. ROZDZIAŁ 8. ♦ REWOLUCJA W STYLACH — CSS3

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

265

Kontenery na błysk

NIEOSZLIFOWANY DIAMENT

Zapytania medialne i wideo Najbardziej oczywistą różnicą między witrynami dla komputerów osobistych a tworzonymi z myślą o urządzeniach przenośnych jest sposób wykorzystania nagrań wideo. Witryna dla telefonu komórkowego będzie wyświetlać plik wideo w mniejszym oknie, odczytując mniejszy plik. Powód takiego zachowania powinien być jasny — telefony komórkowe mają zarówno wolniejsze i bardziej kosztowne połączenie z siecią, jak i znacznie mniejszą moc obliczeniową potrzebną do odtworzenia nagrania. Korzystając z omówionych wcześniej technik zapytań medialnych, możesz łatwo zmienić wielkość elementu , tak by dopasował się do mobilnego ekranu. Podanie odrębnego linku do „odchudzonej” wersji nagrania wideo stanowi o wiele większy problem. HTML5 podaje rozwiązanie: dołącza atrybut media bezpośrednio do elementu . Jak dowiedziałeś się w rozdziale 5., element służy do zadeklarowania pliku multimediów, który ma zostać odtworzony przez komponent . Dodając atrybut media, możesz przypisać określony typ pliku do rodzaju urządzenia.

W niżej przedstawionym przykładzie plik butterfly_ mobile.mp4 jest przekazywany sprzętom wyposażonym w mały ekran. Inne urządzenia pobierają plik butterfly.mp4 lub butterfly.ogv, w zależności od obsługiwanego formatu wideo.



Oczywiście, do Ciebie należy zakodowanie oddzielnej kopii nagrania dla użytkowników telefonów. Narzędzia do zapisywanie multimediów są na ogół wyposażone w profile, które ułatwiają cały proces. Mogą np. zawierać opcje kodowania filmu w profilu „iPad video”. W Twojej gestii leży też upewnienie się, że używasz formatu plików właściwego dla danego urządzenia (zwykle jest to format H.264), oraz przygotowanie kilku wariantów pliku dla każdej przeglądarki.

Przezroczystość Zdolność tworzenia prześwitujących obrazów i kolorów jest jedną z podstawowych cegiełek budujących standard CSS3. Istnieją dwie metody jej implementacji. Pierwszym sposobem jest użycie funkcji rgba(), która przyjmuje cztery liczby. Pierwsze trzy określają stopień jasności barwy, odpowiednio: czerwonej, zielonej i niebieskiej. Ostatnia wartość opisuje kanał alfa. Przyjmuje ona ułamki w granicach od cyfry 0 (pełna przezroczystość) do 1 (jednolity, nieprzejrzysty kolor). W wyniku zastosowania przykładu niżej otrzymasz zielonkawożółtą, półprzezroczystą barwę. .semitransparentBox { background: rgba(170,240,0,0.5); }

Przeglądarki, które nie obsługują rgba(), zignorują tę regułę — tak obstylowany element zachowa domyślną, w 100% przejrzystą barwę. Drugim, lepszym rozwiązaniem jest zadeklarowanie alternatywnego koloru tła i zastąpienie go później półprzezroczystym: .semitransparentBox { background: rgb(170,240,0); background: rgba(170,240,0,0.5); }

266

CZĘŚĆ II ♦ TWORZENIE NOWOCZESNYCH STRON

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Kontenery na błysk

W rezultacie przeglądarka, która nie rozpoznaje funkcji rgba(), w dalszym ciągu wyświetli kolorowe tło — tyle tylko, że nieprzezroczyste. Wskazówka: Jako alternatywę przejrzystego tła powinieneś wybrać kolor, który przypomina efekt półprzezroczystości. Załóżmy, że umieszczasz prześwitujące żółtozielone tło na białej warstwie — kolor ten będzie jaśniejszy, gdyż biel będzie przez niego przechodzić. Jeśli jest to możliwe, alternatywna barwa powinna to odzwierciedlać. W CSS3 dodano też własność opacity, która działa tak samo jak kanał alfa. Zmieniając wartość tej własności w granicach od 0 do 1, sprawisz, że obstylowany z jej pomocą element stanie się częściowo przezroczysty: .semitransparentBox { background: rgb(170,240,0); opacity: 0.5; }

Na rysunku 8.10 przedstawiono dwa półprzezroczyste elementy — w jednym z nich wykorzystano funkcję rgba(), a w drugim — własność opacity. Rysunek 8.10. Na tym zrzucie efekt półprzezroczystości osiągnięto na dwa sposoby. W przypadku wyblakłego obrazka użyto właściwości opacity, podczas gdy kontener z tekstem otrzymał tło dzięki wykorzystaniu funkcji rgba()

Własność opacity jest lepszym narzędziem niż funkcja rgba(), jeśli chcesz osiągnąć jedną z następujących rzeczy. • Chcesz, żeby kilka składowych elementów na raz było przezroczystych. Stosując

własność opacity, zmienisz stopień prześwitywania tła, tekstu oraz obramowania całego komponentu. • Chcesz, by element był przezroczysty, nawet jeśli nie wiesz, jaki ma mieć

kolor (np. ponieważ jest ustawiany w innym arkuszu stylów lub w kodzie JavaScript). • Chcesz, by obraz był przejrzysty. • Chcesz użyć przezroczystości w animacji, która sprawia, że element pojawia

się i znika (szczegóły na stronie 273).

ROZDZIAŁ 8. ♦ REWOLUCJA W STYLACH — CSS3

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

267

Kontenery na błysk

Zaokrąglane rogi Własność border-radius, dzięki której da się zaokrąglić wierzchołki kontenerów, poznałeś już wcześniej. Nie wiesz jednak jeszcze, jak dostroić jej ustawienia, aby otrzymać dokładnie takie krzywe, na jakich Ci zależy. Jako minimum właściwość border-radius przyjmuje pojedynczą wartość. Jest nią promień okręgu, który posłużył do narysowania zaokrąglonej krawędzi. Oczywiście, sam nie widzisz tych okręgów — jedynie ich fragmenty w postaci zaokrąglonych rogów wystarczających, aby połączyć pionowy i poziomy brzeg. Ustawienie większej wartości border-radius zwiększy krzywą, dzięki czemu powstanie delikatniej zaokrąglony róg. Jak z wieloma innymi własnościami tego typu i tu możesz wykorzystać wiele rodzajów jednostek, w tym piksele i procenty. Istnieje też możliwość zmodyfikowania każdego rogu oddzielnie poprzez podanie czterech wartości: .roundedBox { background: yellow; border-radius: 25px 50px 25px 85px; }

To jeszcze nie koniec — możesz rozciągnąć okrąg w elipsę i utworzyć krzywą, która rozciągać się będzie dalej w jedną stronę. Aby uzyskać ten efekt, odwołaj się do każdego rogu oddzielnie (przy użyciu np. własności border-top-left-radius itp.) i podaj dwie liczby: jedną dla promienia w pionie i drugą dla promienia w poziomie. .roundedBox { background: yellow; border-top-left-radius: 150px 30px; border-top-right-radius: 150px 30px; }

Rzuć okiem na rysunek 8.11, aby zapoznać się z przykładami. Rysunek 8.11. Sprytne zastosowana, własność border-radius utworzy każdy rodzaj krzywej

268

CZĘŚĆ II ♦ TWORZENIE NOWOCZESNYCH STRON

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Tło

Tło Prostą recepturą na utworzenie atrakcyjnego tła i obramowania jest użycie gotowych obrazów. W CSS3 wprowadzono dwie nowe własności, które w tym pomogą. Pierwsza w nich pozwala łączyć dwa lub więcej obrazów w jedno tło. Oto przykład, w którym zespolono dwa tła, ozdabiając rogi lewy górny i prawy dolny kontenera: .decoratedBox { margin: 50px; padding: 20px; background-image: url('top-left.png'), url('bottom-right.png'); background-position: left top, right bottom; background-repeat: no-repeat, no-repeat; }

Pierwszym krokiem jest podanie listy grafik, którą przypisuje się własności background-image. Następnie należy wypozycjonować każdy z obrazków i ustawić opcję powtarzania, z wykorzystaniem parametrów background-position i background-repeat. Cała trudność sprowadza się do tego, by upewnić się, iż zadeklarowano je w prawidłowej kolejności, tak żeby oba obrazki zostały przeniesione zgodnie z zadeklarowanymi własnościami background-position. Na rysunku 8.12 można zobaczyć efekt końcowy. Uwaga: Przeglądarki, które nie obsługują zespolonego tła, zignorują deklarację tego typu. Unikniesz tego problemu, ustawiając alternatywne tło — grafikę lub kolor. Dopiero potem dodaj własność background-image z listą obrazów. A oto zmodyfikowany przykład, w którym posłużono się techniką poślizgowych drzwi — klasycznym wzorcem projektu strony, która składa płynnie dopasowującą się grafikę z trzech elementów: grafiki po lewej, grafiki po prawej i wyblakłego srebra ułożonego pomiędzy obrazkami. .decoratedBox { margin: 50px; padding: 20px; background-image: url('left.png'), url('middle.png'), url('right.png'); background-position: left top, left top, right bottom; background-repeat: no-repeat, repeat-x, no-repeat; }

Tego formatowania mógłbyś użyć do utworzenia tła dla przycisku. Oczywiście, mając do dyspozycji wszystkie wymyślne własności CSS3, z pewnością wolałbyś opracować podobny efekt za pomocą cieni, gradientów i innych, pozbawionych grafik, elementów.

Cienie Specyfikacja CSS3 zawiera dwie własności odpowiedzialne za powstanie efektu cienia: box-shadow i text-shadow. Z tej dwójki box-shadow jest zdecydowanie bardziej użyteczna i lepiej obsługiwana — niestety, właściwość text-shadow nie działa na żadnej wersji Internet Explorera. Własność box-shadow rzuca prostokątny cień za elementem — cienie padają zgodnie z konturem elementu, nawet po zaokrągleniu jego rogów (rysunek 8.13). ROZDZIAŁ 8. ♦ REWOLUCJA W STYLACH — CSS3

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

269

Tło

Rysunek 8.12. Zmiana wymiarów kontenera nie ma wpływu na elementy tła — oba jego fragmenty zostaną we właściwych miejscach

Rysunek 8.13. Cienie mogą nadać tekstowi wrażenie unoszenia się nad powierzchnią (góra:), wyróżnić kontener (środek) lub sprawić, że przycisk będzie się wydawał bardziej wypukły (dół)

Oto przykład zastosowania własności box-shadow: .shadowedBox { border: thin #336699 solid; border-radius: 25px; box-shadow: 5px 5px 10px gray; }

270

CZĘŚĆ II ♦ TWORZENIE NOWOCZESNYCH STRON

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Tło

Dwie pierwsze wartości ustawiają przesunięcie cienia. Wyrażone są w liczbach dodatnich (np. 5 pikseli, jak w przykładzie powyżej). Następna wartość zmienia stopień zamazania (w przykładzie, 10 pikseli) — a to zmniejsza ostrość cienia. Na koniec ustawia się barwę cienia. Jeśli pod kontenerem znajduje się jakaś treść, należy użyć funkcji rgba() (strona 192) i dać mu półprzejrzystą barwę. Istnieją dodatkowe opcje. Możesz dodać liczbę pomiędzy parametrem rozmycia i kolorem, która ustawi sposób rozchodzenia się cienia, pogrubiając jego jednolitą część przed rozmytą krawędzią: box-shadow: 5px 5px 10px 5px gray;

Na końcu deklaracji można też dołączyć słowo klucz inset. Spowoduje to zmianę kierunku padania cienia do wewnątrz elementu (a nie na zewnątrz). Działa to szczególnie dobrze, kiedy używasz cieni padających równomiernie, bez przesunięcia w pionie i poziomie: box-shadow: 0px 0px 20px lime inset;

Kod ten tworzy przykład z dolnej części rysunku 8.13. Taka wstawka cieni prezentuje się szczególnie ładnie jako efekt najechania kursorem myszy na przycisk (szczegóły na stronie 274). Uwaga: Maniacy cieni mogą tworzyć wiele zarysów jednocześnie, oddzielając ich deklaracje przecinkiem. Kończy się to jednak zwykle zmarnowaniem wysiłków i mocy obliczeniowej komputera.

Własność text-shadow wymaga takiego samego zestawu wartości, choć podanego w innej kolejności. Najpierw deklaruje się kolor, następnie przesunięcie w poziomie i pionie, a na koniec rozmazanie: .textShadow { font-size: 30px; font-weight: bold; text-shadow: gray 10px 10px 7px; }

Gradienty Gradientem nazywamy mieszaninę kolorów, której używa się do tworzenia najrozmaitszych efektów, od delikatnego cieniowania za paskiem menu, po psychodeliczne tło przycisku, przywodzące na myśl lata 60. ubiegłego wieku. Rzuć okiem na rysunek 8.14, aby zapoznać się z przykładami. Uwaga: Wiele gradientów w sieci to w rzeczywistości gotowe grafiki tła. CSS3 pozwala jednak zdefiniować własny gradient i wczytać go na przeglądarce. Zaletą tego rozwiązania jest zmniejszenie ilości obrazów do wczytywania oraz zdolność kontrolowania wyglądu gradientu przy zmianie wymiarów okna.

Masz już pewne doświadczenie w konstruowaniu gradientów w języku JavaScript (strona 213) — w CSS3 działają one na takiej samej zasadzie. Tak jak element , CSS obsługuje dwa rodzaje gradientów: gradient liniowy — który miesza dwie barwy w linii prostej — i gradient promienisty — miksujący kolory w granicach pierścienia.

ROZDZIAŁ 8. ♦ REWOLUCJA W STYLACH — CSS3

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

271

Tło

Rysunek 8.14. Prawda jest taka, że gradienty są mieszaninami dwóch lub kilku kolorów. Nawet najprostszy przepis można łatwo przerobić w wiele różnych dań

Nie istnieją żadne odrębne własności służące do tworzenia gradientów. Zamiast tego właściwości background przypisuje się funkcję gradient(). Zanim jej użyjesz, ustaw jednolite tło elementu dla przeglądarek, które nie rozpoznają CSS3. (Dotyczy to Internet Explorera, w którym obsługa gradientów zostanie dodana dopiero w wersji 10.). Istnieją cztery funkcje gradientów i wszystkie wymagają zastosowania kłopotliwych przedrostków autorskich. W tym punkcie przyjrzysz się przykładom działającym na Firefoksie (w których użyto przedrostka -moz-). Aby gradienty działały na przeglądarkach Chrome, Safari i Opera, będziesz musiał dodać kolejne deklaracje poprzedzone słowami -webkit- i -o-. Pierwszą funkcją jest linear-gradient(). Oto jedna z jej prostszych wersji, w której biel u góry przechodzi w błękit u dołu. .colorBlendBox { background: -moz-linear-gradient(top, white, blue); }

Zastąp słowo top słowem kluczem left, a zmienisz kierunek przechodzenia gradientu. Możesz też sprawić, by przechodził po przekątnej: background: -moz-linear-gradient(top left, white, lightblue)

Jeżeli chcesz użyć wielu kolorów, po prostu podaj ich listę. Tak powstaje trójkolorowy pas: background: -moz-linear-gradient(top, red, orange, yellow);

Korzystając z wartości stopujących, możesz łatwo określić, gdzie każda funkcja się zaczyna i kończy. Każda wartość stopująca wyrażona jest w procentach, gdzie 0 oznacza początek gradientu, a 100 jego koniec. W poniższym przykładzie rozszerzono pomarańczowożółty fragment pośrodku: background: -moz-linear-gradient(top, red 0%, orange 20%, yellow 80%, ´violet 100%);

272

CZĘŚĆ II ♦ TWORZENIE NOWOCZESNYCH STRON

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Efekty przejścia

Funkcja radial-gradient() służy do tworzenia gradientu promienistego. Należy do niej przekazać kolor środka koła i zewnętrznego pierścienia, który dotyka granic elementu. Oto przykład radialnego gradientu z białym punktem w centrum, który w pierścieniu przechodzi w błękit. background: -moz-radial-gradient(circle, white, lightblue)

CSS3 daje dostęp do opcji, które pozwalają przesunąć środek koła, rozciągnąć go w elipsę i zmienić punkt przejścia jednej barwy w drugą. Twórcy przeglądarek w dalszym ciągu pracują nad prostą, spójną składnią, którą wszyscy mogliby wykorzystywać. Więcej o gradientach, w tym o funkcjach, których tu nie omówiono — repeating-linear-gradient() i repeating-radial-gradient() — dowiesz się z artykułu na blogu Safari, który znajdziesz pod adresem www.webkit.org/blog/ 1424/css3-gradients. Wypróbuj też przygotowane przez Microsoft narzędzie do malowania gradientów, które automatycznie wygeneruje style CSS, działające na każdej przeglądarce, w tym w IE 10 (tinyurl.com/5rzocsk). Wskazówka: We wszystkich przedstawionych przykładach funkcje gradientu były przypisywane do własności background. Musisz wiedzieć, że da się ich również użyć w ten sam sposób z właściwością background-image. Zaletą tego rozwiązania jest to, że możesz użyć obrazu jako alternatywnego tła. W tym celu ustaw najpierw awaryjną grafikę dla starszych przeglądarek, a potem zmień ją na gradient. Większość przeglądarek jest tak zmyślnie skonstruowana, że nie ściągnie obrazka, jeśli nie będzie go potrzebować, zatem oszczędzasz na transferze danych.

Efekty przejścia Wraz z dodaniem do CSS pseudoklas (strona 382) życie każdego twórcy stron stało się prostsze. Nagle okazało się, że z pomocą pseudklas :hover i :focus projektanci mogli tworzyć efekty bez żmudnej pisaniny kodu JavaScript. Aby np. opracować przycisk zmieniający się po najechaniu na niego kursorem myszy, wystarczy przypisać style selektorowi z klasą :hover. Od tej pory, za każdym razem gdy użytkownik wskaże dany element myszą, jego formatowanie zmieni się. Wskazówka: Jeśli jesteś ostatnim webdeweloperem na świecie, który w całym swoim życiu nie użył pseudoklasy, odpowiednie wskazówki znajdziesz w książce Tworzenie stron WWW. Nieoficjalny podręcznik (wydawnictwo Helion) lub w artykule opublikowanym na stronie http://www.elated.com/articles/ css-rollover-buttons/. Jakkolwiek wspaniałe, pseudoklasy już od dawna nie są krzykiem techniki. Problem stanowi filozofia, w oparciu o którą zostały skonstruowane, czyli „wszystko albo nic”. Gdy do obiektu odnosi się selektor z pseudoklasą -:hover, formatowanie stylów zostanie na niego nałożone natychmiast po wskazaniu kursorem myszy. W aplikacjach Flasha i wielu programach komputerowych podobny efekt prezentuje się znacznie lepiej. Wskazany przycisk może płynnie zmienić barwę, przesunąć się, zacząć świecić, wszystko z wykorzystaniem subtelnej animacji, której wyświetlenie zajmuje ułamek sekundy.

ROZDZIAŁ 8. ♦ REWOLUCJA W STYLACH — CSS3

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

273

Efekty przejścia

Niektórzy webmasterzy dodają tego typu efekty na swoich stronach, lecz zwykle wymaga to zastosowania czyjejś biblioteki JavaScript. CSS3 oferuje prostsze rozwiązanie — nowe własności „przejścia” (ang. transition), które pozwalają płynnie zmienić ustawienia z jednych na drugie.

Przekształcanie koloru Jedynie praktyczny przykład pozwoli Ci zrozumieć, jak działają przejścia. Na rysunku 8.15 zaprezentowano zmieniający kolor przycisk podbudowany magią CSS3.

Rysunek 8.15. Gdyby ten przycisk powstał w oparciu o samą pseudoklasę :hover, natychmiast po wskazaniu myszą jego tło zmieniłoby się z zielonego na żółte. Dzięki własności przejścia zieleń przechodzi płynnie w żółć — cały proces zajmuje niecałe pół sekundy. Gdy odsuniesz kursor myszy, animacja przejścia zostanie odtworzona wspak, przywracając przyciskowi jego domyślny kolor. W rezultacie otrzymujesz bardziej profesjonalnie prezentujący się przycisk

Oto, jak zostałby obstylowany bez użycia mechanizmu przejścia. .slickButton { color: white; font-weight: bold; padding: 10px; border: solid 1px black; background: lightgreen; cursor: pointer; } .slickButton:hover { color: black; background: yellow; }

Tutaj zaś znajdziesz formatowany przycisk: Wskaż mnie myszą!

Korzystając z własności transition, można sprawić, że całe przejście będzie płynne. Zmiany należy wprowadzić w zwykłym selektorze slickButton (a nie w jego wariancie z pseudoklasą :hover). Jako minimum wszystkie przejścia wymagają podania dwóch informacji: własności CSS, którą chcesz animować, i czasu, w jakim ma dojść do zakończenia przejścia. W omawianym przykładzie przejście modyfikuje własność background, a czas jego trwania ustawiono na 0,5 sekundy. .slickButton { color: white; font-weight: bold; padding: 10px; border: solid 1px black; background: lightgreen; cursor: pointer; -webkit-transition: background 0.5s; -moz-transition: background 0.5s; -o-transition: background 0.5s;

274

CZĘŚĆ II ♦ TWORZENIE NOWOCZESNYCH STRON

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Efekty przejścia

} .slickButton:hover { color: black; background: yellow; }

Jak pewnie zauważyłeś, w tym przykładzie zadeklarowano aż trzy własności przejścia zamiast jednej. Wynika to z tego, iż standard CSS3 jest w dalszym ciągu w fazie rozwoju, a przeglądarki, które go rozpoznają, wymagają użycia przedrostków autorskich. Dlatego też tę samą własność należy zadeklarować trzy razy dla Chrome, Safari, Firefoxa i Opery. Wraz z opublikowaniem Internet Explorera 10 trzeba będzie dodać dodatkową właściwość z przedrostkiem ms-. Niestety, korzystanie z eksperymentalnych rozwiązań wprowadza bałagan w arkuszu. W podanym przykładzie dochodzi do dziwnego zachowania. Po najechaniu kursorem przycisk zmienia zarówno barwę tła, jak i tekstu. Jak pamiętasz, przejście odnosi się jednak wyłącznie do koloru tła. W konsekwencji, podczas gdy tło przechodzi płynnie z zieleni w żółć, barwa liter zmienia się natychmiast. Da się to naprawić na dwa sposoby. Można zmodyfikować własność transition, oddzielając kolejne, przypisane jej właściwości przecinkiem: .slickButton { ... -webkit-transition: background 0.5s, color 0.5s; -moz-transition: background 0.5s, color 0.5s; -o-transition: background 0.5s, color 0.5s; ... }

Można też pójść na skróty, ustawiając przejście dla każdej własności, co jest szczególnie przydatne, gdy mają one zmieniać się w tym samym czasie. W takim przypadku do reguły transition wystarczy dodać pojedyncze słowo klucz all: -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s;

Uwaga: Własność

transition posiada kilka dodatkowych detali, którymi da się swobodnie majstrować. Pierwszym z nich jest funkcja timing(), która steruje przepływem efektu — np. tym, czy animacja rozpoczyna się powoli, a potem przyspiesza lub na odwrót. W krótkich animacjach rodzaj funkcji timing(), którą wybierzesz, nie robi wielkiej różnicy. W dłuższych, bardziej skomplikowanych przejściach może jednak znacznie wpłynąć na dynamikę efektu. Druga opcja — nazwana delay — umożliwia opóźnienia uruchomienia przejścia. Więcej informacji o nich uzyskasz z oficjalnej specyfikacji standardu dostępnej na stronie www.w3.org/TR/css3-transitions.

Aktualnie przejścia działają na Operze 10.5, Firefoksie 4 (lub nowszych wariantach) i na każdej wersji Safari i Chrome. Nie są rozpoznawane przez Internet Explorer (choć będą w IE 10). Na szczęście, brak powszechnej obsługi nie jest tak poważnym problemem, jak mogłoby się wydawać. Jeśli nawet przeglądarka zignoruje własność transition, w dalszym ciągu nałoży efekt zmiany. Różnica polega na tym, że zostanie on uzyskany natychmiastowo, zamiast płynnie przejść z jednego stanu w drugi. To bardzo dobra wiadomość — oznacza, że możesz używać przejścia bez obaw, iż jego brak zaburzy wizualny styl strony na starych przeglądarkach. ROZDZIAŁ 8. ♦ REWOLUCJA W STYLACH — CSS3

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

275

Efekty przejścia

Przejścia — teczka z pomysłami Obserwowanie, jak dzięki efektom własności transition jeden kolor przechodzi w drugi, jest bardzo budującym przeżyciem. Jeśli jednak chcesz skonstruować łagodną transformację przycisków lub elementów menu, musisz wiedzieć, że jest wiele innych własności, których możesz użyć z tą regułą. Oto kilka ciekawych pomysłów. • Przezroczystość. Modyfikując własność opacity, możesz sprawić, że obraz

gładko wtopi się w tło. Pamiętaj, żeby nie był w pełni przezroczysty, gdyż użytkownik nie będzie wiedział, co ma wskazać kursorem myszy. • Cień. Na stronie 269 dowiedziałeś się, że własność box-shadow może dodać

cień padający za elementem. Czemu więc nie użyć go w animacji? Szczególnie ciekawym pomysłem jest wykorzystanie bardzo rozmytego cienia, bez przesunięcia — w ten sposób uzyskasz efekt poświaty. Możesz też uzyskać go wewnątrz kontenera, wpisując w deklaracji cienia parametr inset. • Gradienty. Zmień gradient liniowy lub dodaj promienisty — w obu przypad-

kach trudno przeoczyć efekt. • Transformaty. Jak się dowiesz w następnym punkcie, transformaty mogą

przenieść, przeskalować lub zdeformować dowolny element. Z tego powodu nadają się wyśmienicie do przekształceń. Z drugiej strony, używanie przejścia do zmodyfikowania wypełnienia (padding), marginesów (margin) lub wielkości fontu nie jest najlepszym pomysłem. Te operacje wymagają większej mocy obliczeniowej (ponieważ przeglądarka musi wyliczyć układ strony oraz hinting tekstu), co może spowolnić działanie programu. Jeśli chcesz, by jakiś element przesunął się, urósł lub zmalał, znacznie rozsądniej będzie użyć opisanych dalej transformat.

Transformaty W trakcie nauki obsługi elementu dowiedziałeś się, do czego służą transformaty i jak z ich pomocą da się przesuwać, skalować, przekrzywiać i obracać zawartość strony. Wszystkie te transformacje wykonywałeś w obrębie płótna. Z nastaniem ery CSS3 zyskałeś zdolność zmiany wyglądu dowolnego elementu w dokładnie ten sam sposób. Podobnie jak przejścia, transformaty są eksperymentalną właściwością. Aby w ogóle z nich skorzystać, należy umieścić kilka wersji deklaracji tej samej własności i każdą poprzedzić odmiennym przedrostkiem autorskim. Poniżej zaprezentowano przykład, który obraca element wraz z jego zawartością. .rotatedElement { -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); }

W poprzednim przykładzie funkcja rotate() wykonywała większość pracy, przekręcając element o 45 stopni wokół jego środka. Masz jednak dostęp do znacznie szerszego wyboru funkcji, które da się zastosować oddzielnie lub wszystkie naraz.

276

CZĘŚĆ II ♦ TWORZENIE NOWOCZESNYCH STRON

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Efekty przejścia

KĄCIK PORAD

Nie zapominaj o starszych przeglądarkach Jak wiesz, przeglądarki, które nie obsługują animacji przejścia, przechodzą między stanami natychmiast — co jest często pożądanym efektem. Jeśli jednak używasz fajerwerków rodem z CSS3 (np. dodajesz cienie lub gradient do wskazanego kursorem przycisku), starsze programy zignorują te własności. A przecież nie o to chodzi. Oznacza to, że użytkownik leciwej przeglądarki nie ujrzy żadnego efektu swojego działania.

Z tej racji warto skorzystać z alternatywnego efektu, który starsza przeglądarka byłaby w stanie zrozumieć. Czemu nie zadeklarować tła wczytywanego po najechaniu myszą na obiekt, a dopiero potem ustawić gradient? W ten sposób stare przeglądarki odnotują zmianę tła w odpowiedzi na działanie użytkownika. Z kolei postępowe przeglądarki nałożą gradient. Korzystając z biblioteki Modernizra, zyskasz jeszcze lepszą kontrolę nad stylami dla starych przeglądarek (strona 244).

Przykładowo zaprezentowana niżej reguła ustanawia trzy transformaty. Pierwsza powiększa element o połowę (scale), druga przesuwa go o 10 pikseli w lewo (scaleX), a trzecia przekrzywia (skew): .rotatedElement { -moz-transform: scale(1.5) scaleX(10px) skew(10deg); -webkit-transform: scale(1.5) scaleX(10px) skew(10deg); -o-transform: scale(1.5) scaleX(10px) skew(10deg); }

Uwaga: Parametr skew wygina kształt elementu. Wyobraź sobie, że przenosisz górną krawędź kontenera w bok, zostawiają dolną na miejscu (tak że wygląda jak równoległobok). Więcej o technicznych szczegółach transformat dowiesz się z nad wyraz pomocnej dokumentacji Firefoksa (http://tinyurl.com/ 6ger2wp). Nie zapomnij dodać przedrostków autorskich innych twórców przeglądarek — inaczej nie będą działały na Chrome i Operze.

Transformaty nie wpływają na inne elementy czy ogólny układ strony. Dlatego też powiększenie jednego elementu spowoduje jego nałożenie na inny. Transformaty i przejścia są dla siebie stworzone. Załóżmy, że masz opracować galerię obrazów, podobną do tej z rysunku 8.16.

Rysunek 8.16. Jak widać, transformata może wyróżnić wskazany obraz

ROZDZIAŁ 8. ♦ REWOLUCJA W STYLACH — CSS3

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

277

Efekty przejścia

Przykład ten jest dość prosty — działa w oparciu o kilka grafik zamkniętych w elemencie :





Oto style, które formatują te kontenery obrazów: .gallery { margin: 0px 30px 0px 30px; background: #D8EEFE; padding: 10px; }

Poniżej zaś przedstawiono reguły definiujące wygląd komponentu : .gallery img { margin: 5px; padding: 5px; width: 75px; border: solid 1px black; background: white; }

Zwróć uwagę, że wszystkim grafikom jawnie nadano określone wymiary. Wynika to z faktu, iż w tym przykładzie użyto dużych obrazków, które pomniejszono po wczytaniu strony. Jest to zamierzone działanie. Dzięki temu przeglądarka ma dostęp do danych wystarczających do powiększenia obrazka przy użyciu transformaty. Gdybyś wstawił małe fotografie, po powiększeniu otrzymałbyś ich rozmazane wersje. Czas zająć się efektem najechania myszą. Gdy tylko użytkownik wskaże kursorem obraz, strona poszerzy go odrobinę i obróci. .gallery img:hover { -webkit-transform: scale(2.2) rotate(10deg); -moz-transform: scale(2.2) rotate(10deg); -o-transform: scale(2.2) rotate(10deg); }

W tej chwili transformata przekształca obraz natychmiast po jego wybraniu. Możesz jednak sprawić, by efekt przemiany wyglądał na naturalny i łagodny, deklarując transformatę: gallery img { margin: 5px; padding: 5px; width: 75px; border: solid 1px black; -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; background: white; }

Od tej pory zdjęcie będzie się obracać i poszerzać po najechaniu myszą w ciągu jednej sekundy. Przesuń kursor z dala od niego i po kolejnej sekundzie zdjęcie wróci do swoich naturalnych rozmiarów.

278

CZĘŚĆ II ♦ TWORZENIE NOWOCZESNYCH STRON

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Efekty przejścia

PORADNIK INŻYNIERA

Efekty CSS przyszłości Przedstawione na tych stronach przykłady zaledwie dotykają tego, co da się osiągnąć przy użyciu transformat i przejść. Choć prace nad wszystkimi bardziej zaawansowanymi właściwościami są dalekie od zakończenia, już teraz możesz wykorzystać niektóre z nich.  Transformaty trójwymiarowe. Jeśli znudzi Ci się

przesuwanie elementu w dwóch wymiarach, użyj trójwymiarowych transformat, aby przenieść go, obrócić lub zdeformować w przestrzeni 3D. Twórcy przeglądarki Safari umieścili prosty przykład na stronie www.webkit.org/blog/386/3d-transforms.  Animacje. Aktualnie przejścia ograniczone są do dość

prostych efektów — w większości odgrywanych, gdy ktoś wskaże element (opatrzony pseudoklasą :hover) myszą lub uaktywni kontrolkę (z pseudoklasą :focus) za pomocą klawiatury. Da się ich też użyć w odpowiedzi na zajście zdarzenia w kodzie JavaScript, np. w celu utworzenia przycisku, który będzie się obracał po kliknięciu. Pełną specyfikację opublikowano na stronie www.w3.org/TR/css3-animations.

 Szczypta JavaScriptu. Dodaj odrobinę kodu, który

włącza i wyłącza style, a będziesz w stanie zbudować złożone fragmenty interfejsu, takie jak trójwymiarowy pokaz slajdów lub zwijane panele (czasem nazywane akordeonem). Na stronie http://css3. bradshawenterprises.com zapoznasz się z praktycznymi przykładami takiej praktyki. Obecnie żadna z przedstawionych opcji nie jest warta zachodu. Po pierwsze, wszystkie wymagają użycia przedrostków autorskich, które ułatwiają popełnienie błędu i zmuszają do ciągłego testowania strony na każdej przeglądarce. Po drugie, właściwości te działają na niewielu współczesnych przeglądarkach. Obecnie animacje nie są obsługiwane w Internet Explorerze, Operze i Firefoksie 9. Próba obejścia problemu jest nieopłacalna — lepiej od razu poszukać innego, uniwersalnego rozwiązania. Aktualnie najlepszą metodą na tworzenie efektów animacji jest posłużenie się jedną z bibliotek JavaScriptu, w rodzaju jQuery UI lub MooTools. Mimo wszystko, to CSS3 jest przyszłością efektów specjalnych w sieci. Wejdzie w życie wraz z powszechnym przyjęciem nowych standardów i skolonizowaniem komputerów przez nowoczesne przeglądarki.

ROZDZIAŁ 8. ♦ REWOLUCJA W STYLACH — CSS3

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

279

Efekty przejścia

280

CZĘŚĆ II ♦ TWORZENIE NOWOCZESNYCH STRON

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

III CZĘŚĆ

Konstruowanie aplikacji sieciowych przy użyciu komponentów desktopowych • Rozdział 9: „Magazyn danych” • Rozdział 10: „Aplikacje sieciowe z trybem offline” • Rozdział 11: „Komunikacja z serwerem sieciowym” • Rozdział 12: „Więcej ciekawych sztuczek JavaScript”

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

9 Magazyn danych

W

sieci wyróżniamy dwa miejsca, w których przechowuje się informacje; są to serwer sieciowy i klient (czyli komputer użytkownika witryny). Niektóre typy danych działają lepiej w pierwszym obszarze; inne sprawdzają się wyłącznie w drugim.

Serwer sieciowy jest miejscem, w którym zachowuje się poufne informacje i dane, do których nikt niepowołany nie powinien mieć dostępu. Gdy np. wypełniasz koszyk zakupów księgarni internetowej kolejnymi pozycjami, informacje o tym są zapisywane po stronie serwera. Twój komputer przechowuje tylko te dane, które informują przeglądarkę, kim jesteś, i który koszyk zakupów należy do Ciebie. Nawet wprowadzenie HTML5 nie zmienia tego układu. W końcu jest on sprawdzony, bezpieczny i wydajny. Przestrzeń danych na serwerze nie jest najlepszym wyjściem dla wszystkich witryn. Czasem łatwiej przechować mniej istotne informacje na komputerze użytkownika sieci. Dla przykładu zachowywanie danych lokalnie ma sens w przypadku ustawień użytkownika (np. sposobu, w jaki witryna jest wyświetlana na jego monitorze) i stanu aplikacji (czyli punktu, w jakim aplikacja zakończyła swoje działanie, a użytkownik może go użyć do wznowienia pracy w tym samym miejscu). Przed powstaniem HTML5 jedyną formą lokalnego magazynu danych był mechanizm tworzenia plików cookies (tzw. ciasteczek) — techniki, która pozwalała przenosić małe fragmenty informacji identyfikującej komputer pomiędzy przeglądarką a serwerem. Pliki cookies sprawdzają się, jeśli w grę wchodzi zapisywanie małych porcji danych, choć model JavaScript wykorzystywany do ich tworzenia jest odrobinę nieporęczny. Pliki cookies zmuszają programistę do zabawy z datami wygaśnięcia i często są niepotrzebnie przesyłane tam i z powrotem przez Internet w odpowiedzi na każde sieciowe żądanie. HTML5 wprowadza alternatywę, która pozwoli łatwo i szybko zachować informację na komputerze osoby odwiedzającej witrynę. Tego typu dane zostają na komputerze klienta i nie są przesyłane na serwer (chyba że sam tak postanowisz), wykorzystują niewiele przestrzeni dyskowej i polegają na użyciu kilku prostych obiektów języka JavaScript. Opcja ta — zwana magazynem sieciowym (ang. web

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

ROZDZIAŁ

Magazyn sieciowy — podstawy

storage) — nadaje się idealnie do omawianej w rozdziale 10. aplikacji, gdyż pozwala skonstruować samowystarczalne programy, które będą w stanie zachowywać dane nawet wtedy, kiedy nie będą miały dostępu do sieci. W tym rozdziale poznasz wszystkie sekrety, jakie kryje magazyn sieciowy. Przyjrzysz się też innemu, jeszcze nowszemu standardowi, który pozwala przeglądarkom odczytać zawartość różnego rodzaju plików zapisanych na dysku twardym komputera.

Magazyn sieciowy — podstawy Magazyn sieciowy — podstawy

Debiutujący w HTML5 magazyn sieciowy umożliwia stronom internetowym przechowywanie danych na komputerze użytkownika. Informacja ta może być krótkotrwała (ang. short-lived), co oznacza, że znika wraz z zamknięciem przeglądarki, lub długowieczna (ang. long-lived), czyli dostępna przez wiele dni, w trakcie kolejnych wizyt na witrynie. Uwaga: Nazwa magazyn sieciowy (ang. web storage) jest myląca, bo informacje zapisywane przez stronę nigdy samoczynnie nie opuszczają komputera użytkownika. Wyróżniamy dwa rodzaje magazynu sieciowego, każdy definiowany przy użyciu innego obiektu. • Magazyn lokalny (ang. local storage) powstaje w oparciu o obiekt localStorage

i zachowuje dane dla całej witryny na stałe. Oznacza to, że gdy strona zapisze dane lokalne, będą one dostępne w przeglądarce, gdy użytkownik wróci na daną stronę następnego dnia, w następnym miesiącu czy roku. Oczywiście, większość przeglądarek pozwala użytkownikom wyczyścić magazyn lokalny. Niektóre z nich zapewniają wyłącznie opcję usunięcia wszystkich lokalnych danych lub żadnej informacji — podobnie jak to ma miejsce w przypadku plików cookies (w niektórych przeglądarkach obie formy zapisu są powiązane tak, że usuwając dane lokalne, jednocześnie kasujesz cookies). Inne przeglądarki mogą pozwolić swoim użytkownikom na przejrzenie danych z każdej witryny i usunięcie informacji tylko wybranych. • Magazyn sesji wykorzystuje obiekt sessionStorage do przechowywania da-

nych tymczasowo dla otwartego okna lub zakładki. Dane te są używane do czasu zamknięcia okna, co powoduje zakończenie sesji i ich usunięcie. Warto zaznaczyć, że dane sesji nie są kasowane, jeśli użytkownik przeszedł z jednej strony na drugą, po czym powrócił na pierwszą, pod warunkiem że wszystko działo się w jednej zakładce (lub oknie). Wskazówka: Z perspektywy kodu na Twojej stronie magazyny lokalny i sesji działają w ten sam sposób. Różnica sprowadza się do tego, jak długo zapisane w nich informacje będą istniały. Używanie magazynu lokalnego jest dobrym pomysłem, jeśli chcesz skorzystać z zapisanych wcześniej danych przy kolejnych wizytach użytkownika. Magazyn sesji przydaje się, jeżeli chcesz przekazać dane z jednej strony na drugą. Magazynu sesji możesz także użyć do zachowania tymczasowych danych dla jednej strony, choć w tym przypadku zwykłe zmienne JavaScriptu działają równie dobrze.

284

CZĘŚĆ III ♦ KONSTRUOWANIE APLIKACJI SIECIOWYCH

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Magazyn sieciowy — podstawy

Zarówno magazyn lokalny, jak i magazyn sesji powiązane są z domeną witryny. Gdy zatem użyjesz magazynu lokalnego na stronie o adresie www.KozyPotrafiąLatać.org/ gra/zapper.html, spowodujesz, że dane będą dostępne na stronie www.KozyPotrafią Latać.org/contact.html, ponieważ adres domeny jest ten sam (www.KozyPotrafią Latać.org). Jednak inne witryny nie będą miały do nich dostępu. Co więcej, z uwagi na to, iż magazyn sieciowy znajduje się na Twoim komputerze (lub urządzeniu mobilnym), oznacza on Twój komputer. W rezultacie witryna nie może otrzymać dostępu do danych zapisanych na komputerze kogoś innego. Idąc dalej tym tropem, zalogowanie się na inne konto użytkownika systemu lub uruchomienie innej przeglądarki sprawi, że będziesz korzystał z innego magazynu lokalnego. Uwaga: Choć specyfikacja HTML5 nie ustala żadnych sztywnych zasad dotyczących wielkości magazynów, większość przeglądarek ogranicza ich rozmiar do 5 MB. Tyle przestrzeni wystarczy do opakowania zwykłych danych, lecz nie nadaje się do roli pamięci wspomagającej dla dużych obrazów i plików multimedialnych (magazyn lokalny nie był projektowany z myślą o tym). „Zaśmiecacze” dysku powinni wiedzieć, że wciąż rozwijający się standard bazy danych IndexedDB (szczegóły na stronie 302) oferuje znacznie większą przestrzeń — zwykle 50 MB na początek i więcej, jeśli użytkownik przystanie na zwiększenie limitu.

Magazynowanie danych Nim zachowasz informację w magazynie lokalnym lub sesji, najpierw musisz nadać jej opisową nazwę. Nazwę tę nazwano kluczem, gdyż później będzie potrzebna do odczytu danych. Oto składnia używana do zapisu danych: localStorage[keyName] = data;

Wyobraź sobie, że masz zapisać fragment tekstu wraz z nazwą użytkownika. W roli klucza mógłbyś użyć nazwy user_name, tak jak pokazano na przykładzie: localStorage["user_name"] = "Marek Markowski";

Oczywiście, rzadko zachowywanie stałego fragmentu tekstu ma sens. Zamiast tego zapisujesz coś, co się zmienia — np. obecną datę, wynik matematycznych obliczeń lub tekst wpisany przez użytkownika w pole tekstowe. Oto przykład zapisu ostatniego z wymienionych typów danych: // Pobiera pole tekstowe. var nameInput = document.getElementById("userName"); // Zachowuj tekst z pola. localStorage["user_name"] = nameInput.value;

Wyodrębnienie danych z lokalnego magazynu jest równie proste jak ich w nim umieszczenie. Przykładowo poniższy kod pobiera wcześniej zapisane imię i wyświetla je w okienku z informacją: alert("Zachowałeś: " + localStorage["user_name"]);

Kod ten działa niezależnie od tego, czy dane użytkownika zapisano pięć sekund, czy pięć miesięcy temu. ROZDZIAŁ 9. ♦ MAGAZYN DANYCH

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

285

Magazyn sieciowy — podstawy

Rzecz jasna, może się zdarzyć, że dana zmienna nie zawiera żadnych danych. Możesz sprawdzić, czy konkretna komórka magazynu jest pusta, sprawdzając jej wartość. Pomoże ta oto prosta technika: if (localStorage["user_name"] == null) { alert ("Nie wpisałeś jeszcze nazwiska."); } else { // Umieszcza nazwisko w polu tekstowym. document.getElementById("userName").value = localStorage["user_name"]; }

Równie łatwo tworzyć elementy magazynu sesji. Różnica polega wyłącznie na tym, że używasz obiektu sessionStorage zamiast localStorage: // Pobiera aktualną datę. var today = new Date(); // Zapisuje datę we fragmencie tekstu w formacie HH:mm. sessionStorage["lastUpdateTime"] = today.getHours() + ":" + today. ´get-Minutes();

Na rysunku 9.1 zaprezentowano prostą stronę testową, na której użyto obu typów magazynu. Rysunek 9.1. Na tej stronie widać dwa pola tekstowe — jedno dla magazynu sesji i drugie dla lokalnego. Kliknięcie przycisku Zapisz dane zachowa obie wartości. Kliknięcie przycisku Załaduj dane je odtworzy

Uwaga: Magazyn sieciowy obsługuje alternatywną, rzadziej spotykaną składnię. Za pomocą składni właściwości do komórki magazynu nazwanej user_name odwołasz się, posługując się instrukcją localStorage.user_name zamiast zwykle stosowanej localStorage["user_name"]. Obie składnie

są w pełni poprawne i nie ma powodu, aby nie używać tej, która Ci najbardziej odpowiada.

Praktyczny przykład: zapisywanie stanu gry W tym momencie możesz mieć wrażenie, że korzystanie z magazynu sieciowego sprowadza się do wybrania nazwy klucza i umieszczenia go wewnątrz nawiasów kwadratowych. W gruncie rzeczy jest w tym sporo prawdy. Możesz jednak łatwo zaprząc magazyn lokalny do bardziej ambitnych zadań, nie wysilając się zbytnio. Rozważ przykład zbudowanego w oparciu o element labiryntu, który omówiono w rozdziale 7. (strona 233). Rozwiązanie tak skomplikowanego labiryntu może zająć sporo czasu, więc rozsądnym pomysłem wydaje się wprowadzenie opcji zapisu pozycji uaktywnianej, gdy użytkownik zamyka okno lub przechodzi na inną stronę. Kiedy użytkownik powróci na stronę z labiryntem, kod JavaScript automatycznie przywróci ikonkę uśmiechu w miejscu, w którym była przed przerwaniem gry.

286

CZĘŚĆ III ♦ KONSTRUOWANIE APLIKACJI SIECIOWYCH

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Magazyn sieciowy — podstawy

ROZWIĄZYWANIE PROBLEMÓW

Magazyn danych nie działa bez kontaktu z serwerem sieciowym Testując nową właściwość HTML5, możesz natrafić na nieoczekiwaną przeszkodę. W wielu przeglądarkach magazyn sieciowy działa tylko wtedy, kiedy żądanie strony wysyłasz na serwer sieciowy. Nie ma znaczenia, czy znajduje się on w sieci, czy na serwerze testowym uruchomionym na swoim komputerze — ważne jest, by strony nie były otwierane bezpośrednio z dysku twardego. Te dziwne zachowanie jest efektem ubocznym sposobu, w jaki przeglądarki wyznaczają przestrzeń dla lokalnego magazynu. Jak już wiesz, nakładają one limit 5 MB dla każdej witryny i w tym celu łączą każdą stronę wykorzystującą magazyny z domeną internetową. Co się więc stanie, jeśli złamiesz tę zasadę i otworzysz stronę prosto z pliku? To zależy od przeglądarki.

W takiej sytuacji Internet Explorer zachowuje się, jakby całkowicie stracił możliwość zapisywania danych w magazynie. Obiekty localStorage i sessionStorage po prostu znikają, a próba ich wywołania kończy się błędem JavaScriptu. W Firefoksie obiekty localStorage oraz sessionStorage będą wciąż dostępne i (przynajmniej teoretycznie) obsługiwane (nawet z perspektywy Modernizra), lecz wszystko, co spróbujesz zapisać, zniknie w próżni. Chrome zachowuje się jeszcze inaczej — większa część opcji będzie działać bez zarzutu, lecz niektóre własności (w tym zdarzenie onStorage) po prostu zawiodą. Na podobne problemy natkniesz się, używając File API (strona 295). Dlatego też lepiej będzie, jeśli pliki dla tego rozdziału umieścisz na serwerze testowym, choćby po to, by ułatwić sobie życie.

Istnieje wiele sposobów, aby zrealizować tę procedurę. Mógłbyś np. zapisywać pozycję ikonki po każdym ruchu. Magazyn lokalny działa szybko, więc nie sprawiałoby to problemów. Dobrym pomysłem byłaby również reakcja na zdarzenie onBeforeUnload, taka jak zapytanie gracza, czy warto zapisywać obecną pozycję (rysunek 9.2). Rysunek 9.2. Kiedy użytkownik opuści stronę, albo przenosząc się na inną witrynę, albo zamykając okno, przeglądarka zapyta się go, czy chce zachować obecną pozycję ikonki

ROZDZIAŁ 9. ♦ MAGAZYN DANYCH

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

287

Magazyn sieciowy — podstawy

Niżej przedstawiony kod zapisuje współrzędne ikonki: window.onbeforeunload = function(e) { // Sprawdza, czy obiekt localStorage istnieje (nie ma sensu oferować opcji zapisywania, // jeśli przeglądarka nie jest w stanie tego zrobić). if (localStorage) { // Pyta, czy zapisać pozycję ikonki. if (confirm( "Czy zapisać pozycję ikonki w labiryncie na następną grę?")) { // Zachowuje współrzędne w dwóch komórkach magazynu. localStorage["mazeGame_currentX"] = x; localStorage["mazeGame_currentY"] = y; } } }

Wskazówka: Długie nazwy kluczy w rodzaju mazeGame_currentX są wręcz wskazane. W końcu to do Ciebie należy zapewnienie tego, by były unikalne, aby zapobiec sytuacji, w której dwie różne witryny zaczną przechowywać dane w tej samej zmiennej. Posiłkując się tylko jednym kontenerem służącym do przechowywania wszystkich typów danych, łatwo natknąć się na konflikty nazw, co jest rażącą słabością systemu magazynowania danych. Dlatego też, aby zapobiec problemom, nadawaj swoim kluczom długie, opisowe nazwy. Jeśli np. zaprojektowałeś dwie gry z labiryntami, na dwóch oddzielnych stronach, zastanów się, czy w nazwie klucza nie warto by użyć tytułu strony, np. Maze01_currentX.

Gdy przeglądarka załaduje stronę labiryntu raz jeszcze, kod JavaScript sprawdzi, czy istnieją wcześniejsze informacje o niej: // Czy opcja magazynowania danych jest dostępna? if (localStorage) { // Odczytuje dane. var savedX = localStorage["mazeGame_currentX"]; var savedY = localStorage["mazeGame_currentY"]; // Jeśli zmienne będą miały wartość pustą, nie zachowano żadnych danych. // W innym przypadku przeglądarka wykorzystuje otrzymane dane do ustawienia współrzędnych. if (savedX != null) x = Number(savedX); if (savedY != null) y = Number(savedY); }

W przykładzie zaprezentowano, jak zapisuje się stan aplikacji. Jeśli wyświetlanie wiadomości za każdym razem, gdy użytkownik opuści grę, nie wydaje Ci się zbyt subtelne, warto dodać pole wyboru „Automatycznie zapisz pozycję”. Kiedy użytkownik zaznaczy je, współrzędne ikonki zostaną automatycznie zapisane. Naturalnie w takim razie należałoby zapisać wartość pola wyboru, co stanowi przykład zapisu preferencji aplikacji. W tym przykładzie zastosowano funkcję Number(), która zapewnia, że zapisane dane są interpretowane jako prawidłowe liczby. Na stronie 299 dowiesz się, dlaczego jest to takie ważne.

Magazyn sieciowy a obsługa przeglądarek Magazyn sieciowy jest jedną z najlepiej obsługiwanych własności HTML5, działającą praktycznie na wszystkich nowoczesnych wersjach przeglądarek. W tabeli 9.1 znajdziesz informacje o najstarszej, obsługującej standard przeglądarce.

288

CZĘŚĆ III ♦ KONSTRUOWANIE APLIKACJI SIECIOWYCH

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

Magazyn sieciowy — na głębszych wodach

Tabela 9.1. Obsługa przez przeglądarki magazynów lokalnego i sesji

Najstarsza wersja

IE

Firefox

Chrome

Safari

Opera

Safari iOS

Android

8

3.5

5

4

10.5

2

2

Wszystkie wymienione przeglądarki pozwalają zapisywać dane w obu magazynach. Jednakże musisz wiedzieć, iż obsługa zdarzenia onStorage (mniej znanej własności, którą omówiono na stronie 293) została wprowadzona dopiero niedawno. Działa ona jedynie na Internet Explorerze 9, Firefoksie 4 i Chrome 6. Przeglądarką, która przysporzy Ci największych problemów, jest IE 7, która nie rozpoznaje tej funkcji. Problem ten można obejść przy użyciu plików cookies. Takie rozwiązanie nie jest doskonałe, ale przynajmniej działa. Choć obecnie nie ma w 100% skutecznego rozwiązania, które pomoże Ci wypełnić tę dziurę, na stronie z wypełnieniami GitHub (http://tinyurl.com/polyfill) znajdziesz wiele pomocnych bibliotek, które przynajmniej pomogą od czegoś zacząć (szukaj w sekcji opatrzonej nagłówkiem Web Storage).

Magazyn sieciowy — na głębszych wodach Magazyn sieciowy — na głębszych wodach

Znasz już podstawy korzystania z magazynu sieciowego — wiesz, jak zapisywać w nim informację i ją z niego wyodrębniać. Istnieje jednak kilka ciekawych sztuczek i użytecznych technik, które na pewno się przydadzą. W kolejnych punktach nauczysz się usuwać wpisy z magazynu sieciowego i analizować wszystkie zapisane w nich dane. Dowiesz się też, jak radzić sobie z różnymi typami danych, przechowywać własne obiekty i reagować na zmiany w kolekcji zachowanych elementów.

Usuwanie wpisów Usuwanie wpisów nie może być łatwiejsze. Aby usunąć pojedynczy wpis z listy, użyj metody removeItem() oraz nazwy klucza. localStorage.removeItem("user_name");

Możesz też usunąć wszystkie lokalne dane przypisane Twojej witrynie, posługując się metodą clear(): sessionStorage.clear();

Listowanie wszystkich zachowanych wpisów Aby dostać się do pojedynczej danej w magazynie sieciowym, musisz podać jej klucz. Jest jednak prosty sposób, żeby obejść ten problem. Wykorzystując metodę key(), pobierzesz wszystkie wpisy z magazynu lokalnego lub sesji (danej witryny) nawet wtedy, kiedy nie znasz ich kluczy. Sztuczka ta przydaje się szczególnie w trakcie debugowania lub gdy chcesz dowiedzieć się, co inne strony Twojej witryny zachowały w magazynach i jakich nazw kluczy do tego użyto. ROZDZIAŁ 9. ♦ MAGAZYN DANYCH

Ebookpoint.pl KOPIA DLA: Michal Kwiatek [email protected]

289

Magazyn sieciowy — na głębszych wodach

Na rysunku 9.3 przedstawiono stronę, na której zastosowano tę metodę w praktyce. Rysunek 9.3. Kliknij przycisk, a strona wypełni się zawartością lokalnego magazynu

Kliknięcie przycisku w przykładzie wywoła zdarzenie findAllItems(), które pobierze zestaw wpisów z magazynu lokalnego. Oto kod odpowiedzialny za całą operację: function findAllItems() { // Pobiera element

, w którym lista zostanie zapisana. var itemList = document.getElementById("itemList"); // Czyści listę. itemList.innerHTML = ""; // Przechodzi w pętli po wszystkich wpisach na liście. for (var i=0; i