Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00068 010778 10754284 na godz. na dobę w sumie
HTML5. Nieoficjalny podręcznik. Wydanie II - ebook/pdf
HTML5. Nieoficjalny podręcznik. Wydanie II - ebook/pdf
Autor: Liczba stron: 472
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-9254-5 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> html i xhtml - programowanie
Porównaj ceny (książka, ebook, audiobook).

Przewodnik po tajnikach HTML5!

HTML5 na dobre zadomowił się w sieci. Z jego dobrodziejstw garściami czerpią projektanci witryn — i zaskakują użytkowników coraz bardziej pomysłowymi aplikacjami. HTML5 zapewnia zaawansowaną integrację ze środowiskiem przeglądarki internetowej, usługi geolokalizacyjne oraz doskonałe wsparcie dla materiałów multimedialnych czy aplikacji offline. Jeszcze całkiem niedawno nikt nie marzył o rzeczach, na jakie obecnie ten język programowania pozwala twórcom stron!

Książka, którą trzymasz w rękach, należy do cenionej serii „Nieoficjalny podręcznik”. Jej kolejne wydanie zostało poprawione, zaktualizowane i rozszerzone o mnóstwo nowych informacji. Dzięki tej publikacji nie musisz odkrywać tajników HTML5 na własną rękę. Liczne przykłady oraz szczegółowe omówienie najróżniejszych zagadnień sprawią, że w mig opanujesz niuanse tego języka. W trakcie lektury dowiesz się, jak wykorzystać nowy element canvas i jak bez trudu zlokalizować użytkownika, oraz zobaczysz, jak przechować kluczowe dane w bazie przeglądarki. Sięgnij po tę książkę i przekonaj się, jakie możliwości daje Ci HTML5!

HTML5 to:

Poznaj możliwości HTML5 i zacznij korzystać z nich już dziś!

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

Darmowy fragment publikacji:

Tytuł oryginału: HTML5 The Missing Manual, 2nd Edition Tłumaczenie: Maksymilian Gutowski na podstawie: „HTML5. Nieoficjalny podręcznik” w tłumaczeniu Macieja Reszotnika ISBN: 978-83-246-9251-4 © 2014 Helion S.A. Authorized Polish translation of the English edition of HTML5: The Missing Manual, 2nd Edition ISBN 9781449363260 © 2014 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: helion@helion.pl WWW: http://helion.pl (księgarnia internetowa, katalog książek) Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/htm5n2 Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję. Pliki z przykładami omawianymi w książce można znaleźć pod adresem: ftp://ftp.helion.pl/przyklady/htm5n2.zip Printed in Poland. • Kup książkę • Poleć książkę • Oceń książkę • Księgarnia internetowa • Lubię to! » Nasza społeczność Spis tre(cid:321)ci Nieoficjalna czo(cid:281)ówka .......................................................................................11 Wst(cid:241)p ................................................................................................................. 15 Cze(cid:316)(cid:235) I. Nowe oblicze j(cid:253)zyka HTML ..............................................23 Rozdzia(cid:281) 1. Wprowadzenie do HTML5 .............................................................25 Historia HTML5 ....................................................................................... 25 XHTML 1.0: rygor ponad wszystko ........................................................ 26 XHTML 2: niespodziewana pora(cid:353)ka ....................................................... 27 HTML5: reaktywacja ............................................................................. 27 HTML: (cid:353)ywy j(cid:258)zyk ................................................................................. 29 Trzy pryncypia HTML5 ............................................................................ 29 1. Nie psuj sieci ...................................................................................... 30 2. Brukuj (cid:321)cie(cid:353)ki ..................................................................................... 30 3. B(cid:238)d(cid:351) praktyczny ................................................................................. 31 Rzut oka na sk(cid:298)adni(cid:258) HTML5 ................................................................... 32 Element doctype a HTML5 .................................................................... 34 Kodowanie znaków ................................................................................ 35 J(cid:258)zyk ...................................................................................................... 35 Dodawanie arkusza stylów ..................................................................... 36 Do(cid:298)(cid:238)czanie JavaScriptu ........................................................................... 36 Ostateczny produkt ................................................................................ 37 Sk(cid:298)adnia HTML5 z bliska .......................................................................... 38 Rozlu(cid:351)nione regu(cid:298)y ................................................................................ 38 Walidacja HTML5 ................................................................................. 39 Powrót XHTML-u .................................................................................. 42 Rodzina znaczników HTML5 .................................................................... 43 Dodane elementy ................................................................................... 43 Komponenty usuni(cid:258)te ze specyfikacji ..................................................... 43 Elementy zaadaptowane ......................................................................... 45 Kup książkęPoleć książkę Zmodyfikowane znaczniki ......................................................................46 Elementy standaryzowane ......................................................................47 Korzystanie z HTML5 ju(cid:353) dzi(cid:321) ...................................................................48 Ocenianie wsparcia ze strony przegl(cid:238)darek ..............................................50 Statystyki poziomu przyj(cid:258)cia przegl(cid:238)darek ..............................................51 Wykrywanie obs(cid:298)ugi w(cid:298)asno(cid:321)ci z aplikacj(cid:238) Modernizr ..............................53 Uzupe(cid:298)nianie braków przy u(cid:353)yciu wype(cid:298)nienia ........................................55 Rozdzia(cid:281) 2. Zastosowanie elementów semantycznych na stronie .................59 Wst(cid:258)p do elementów semantycznych .........................................................60 Modernizacja tradycyjnej strony HTML ....................................................61 Struktura strony w stylu klasycznym ......................................................62 Struktura strony w HTML5 ....................................................................65 Do(cid:298)(cid:238)czanie rysunków przy u(cid:353)yciu znacznika figure ...........................67 Dodawanie ramki redaktorskiej — znacznik aside .............................70 Elementy semantyczne a kompatybilno(cid:321)(cid:240) z przegl(cid:238)darkami .......................71 Stylizacja elementów semantycznych .....................................................72 Zastosowanie HTML5 Shiv ....................................................................72 Modernizr: rozwi(cid:238)zanie uniwersalne ......................................................73 Projektowanie strony z nowymi elementami semantycznymi ....................73 Wi(cid:258)cej o nag(cid:298)ówkach ..............................................................................74 Odno(cid:321)niki i element nav ...................................................................76 Wi(cid:258)cej o sekcjach ...................................................................................79 Wi(cid:258)cej o stopce .......................................................................................81 Wskazywanie tre(cid:321)ci g(cid:298)ównej przy u(cid:353)yciu elementu main ...................83 System tworzenia konspektu strony w HTML5 ..........................................85 Jak zobaczy(cid:240) konspekt? ...........................................................................85 Konspekt podstawowy ............................................................................86 Komponenty sekcji .................................................................................87 Problemy z tworzeniem konspektów .......................................................89 Rozdzia(cid:281) 3. Jeszcze bardziej wyrazisty kod .....................................................93 Elementy semantyczne raz jeszcze .............................................................94 Data, czas i znacznik time ................................................................95 Obliczenia w JavaScripcie i element output .......................................96 Element mark i zaznaczanie tekstu ...................................................98 Inne standardy kodu semantycznego .........................................................99 ARIA (ang. Accessible Rich Internet Applications) ................................100 RDFa (ang. Resource Description Framework) ......................................100 Mikroformaty .......................................................................................101 Mikrodane ...........................................................................................102 Praktyczny przyk(cid:298)ad: modernizacja strony O mnie ...................................105 Ekstrakcja danych semantycznych w przegl(cid:238)darce ................................109 Wykorzystanie metadanych przez wyszukiwarki ......................................110 Fragmenty sformatowane przez Google .................................................110 Lepsze wyniki wyszukiwania ................................................................111 Wyszukiwarka przepisów .....................................................................114 4 S P I S T R E (cid:285) C I Kup książkęPoleć książkę Rozdzia(cid:281) 4. Udoskonalone formularze ............................................................119 Formularze ............................................................................................. 120 Modernizowanie tradycyjnego formularza HTML .................................... 121 Znak wodny — dodawanie wskazówek ................................................. 124 Dobry punkt zaczepienia: w(cid:298)a(cid:321)ciwo(cid:321)(cid:240) focus .......................................... 126 Walidacja: wykrywanie b(cid:298)(cid:258)dów ................................................................ 127 Proces walidacji w HTML5 krok po kroku ............................................ 127 Wy(cid:298)(cid:238)czanie mechanizmu walidacji ....................................................... 129 Formatowanie kontrolek walidacyjnych ............................................... 130 Walidacja wyra(cid:353)e(cid:300) regularnych ............................................................ 131 W(cid:298)asne regu(cid:298)y walidacji ........................................................................ 132 Obs(cid:298)uga mechanizmu walidacji ............................................................... 133 Testowanie obs(cid:298)ugi za pomoc(cid:238) skryptu Modernizr ................................ 134 Uzupe(cid:298)nianie kodu przy u(cid:353)yciu biblioteki HTML5Forms ...................... 135 Nowe typy znacznika input ..................................................................... 137 Adresy e-mail ....................................................................................... 139 Adresy URL ......................................................................................... 140 Pola wyszukiwania ............................................................................... 140 Telefon ................................................................................................ 140 Liczby .................................................................................................. 140 Suwak .................................................................................................. 141 Czas: daty i godziny .............................................................................. 142 Kolor .................................................................................................... 144 Nowe elementy ....................................................................................... 144 Sugerowane odpowiedzi i element datalist ...................................... 144 Pasek stanu i miernik ........................................................................... 146 Paski narz(cid:258)dzi i menu — znaczniki command i menu ............... 149 Edytor HTML na stronie ......................................................................... 149 Edytowanie zawarto(cid:321)ci za pomoc(cid:238) contentEditable ............................... 150 Edytowanie strony za pomoc(cid:238) atrybutu designMode ............................. 152 Cze(cid:316)(cid:235) II. Filmy, obrazki i inne cude(cid:295)ka........................................ 155 Rozdzia(cid:281) 5. Multimedia ................................................................................... 157 Wideo dzi(cid:321) .............................................................................................. 157 Wprowadzenie do audio i wideo w HTML5 .............................................. 159 Wydobywanie d(cid:351)wi(cid:258)ku z elementu audio ........................................ 159 Wczytywanie multimediów po za(cid:298)adowaniu strony ............................... 160 Automatyczne odtwarzanie .................................................................. 161 Zap(cid:258)tlone odtwarzanie ......................................................................... 161 Znacznik video z szerszej perspektywy ............................................ 161 Wprowadzenie do formatów multimediów w HTML5 ............................. 163 Wi(cid:258)cej o formatach .............................................................................. 164 Obs(cid:298)uga multimediów w przegl(cid:238)darkach .............................................. 165 Wiele formatów, czyli jak udobrucha(cid:240) ka(cid:353)d(cid:238) przegl(cid:238)dark(cid:258) ........................ 168 Obs(cid:298)uga ró(cid:353)nych formatów ................................................................... 169 Alternatywa — wtyczka Flasha ............................................................. 170 S P I S T R E (cid:285) C I 5 Kup książkęPoleć książkę Sterowanie odtwarzaniem za pomoc(cid:238) JavaScriptu ....................................174 Dodawanie efektów d(cid:351)wi(cid:258)kowych .........................................................174 Budowa w(cid:298)asnego odtwarzacza filmów ..................................................177 Odtwarzacze JavaScript ........................................................................180 Napisy i dost(cid:258)pno(cid:321)(cid:240) .................................................................................181 (cid:320)cie(cid:353)ki napisów i WebVTT ...................................................................181 Dodawanie podpisów elementem track ...........................................184 Obs(cid:298)uga podpisów w przegl(cid:238)darkach .....................................................185 Rozdzia(cid:281) 6. CSS3 a wygl(cid:221)d strony .................................................................. 187 U(cid:353)ywanie CSS3 ju(cid:353) dzi(cid:321) ..........................................................................188 Strategia 1.: Wykorzystaj to, co mo(cid:353)esz .................................................188 Strategia 2.: Traktuj w(cid:298)asno(cid:321)ci CSS3 jak usprawnienia .........................189 Strategia 3.: Dodanie awaryjnych mechanizmów za pomoc(cid:238) Modernizra ......................................................................190 Style w(cid:298)a(cid:321)ciwe dla konkretnych przegl(cid:238)darek ........................................192 Kontenery na b(cid:298)ysk ..................................................................................194 Przezroczysto(cid:321)(cid:240) ....................................................................................195 Zaokr(cid:238)glane rogi ...................................................................................196 T(cid:298)o ..........................................................................................................197 Cienie ..................................................................................................199 Gradienty .............................................................................................200 Efekty przej(cid:321)cia ........................................................................................204 Przekszta(cid:298)canie koloru ..........................................................................204 Przej(cid:321)cia — teczka z pomys(cid:298)ami ............................................................206 Wywo(cid:298)ywanie przej(cid:321)(cid:240) w JavaScripcie .....................................................207 Transformaty .......................................................................................209 Przej(cid:321)cia wykorzystuj(cid:238)ce transformaty ..................................................212 Typografia w sieci ....................................................................................213 Formaty fontów ....................................................................................214 Font dla witryny ...................................................................................216 Pobieranie darmowych fontów z Font Squirrel ......................................217 Przygotowanie fontu sieciowego ...........................................................218 Korzystanie z fontów sieciowych Google ...............................................221 Wielokolumnowy tekst ........................................................................223 Rozdzia(cid:281) 7. Projektowanie elastycznych witryn w CSS3 ...............................227 Podstawy projektowania elastycznego ......................................................228 P(cid:298)ynny layout .......................................................................................228 P(cid:298)ynne obrazy .......................................................................................231 P(cid:298)ynna typografia ..................................................................................233 Widok strony: obs(cid:298)uga layoutu na smartfonach .....................................236 Dostosowywanie layoutu przy u(cid:353)yciu zapyta(cid:300) medialnych .......................237 Zapytania medialne ..............................................................................238 Utworzenie prostego zapytania medialnego ..........................................240 Layout przyjazny dla urz(cid:238)dze(cid:300) mobilnych .............................................241 Zapytania medialne — wy(cid:353)sza szko(cid:298)a jazdy ...........................................245 Zast(cid:258)powanie ca(cid:298)ego arkusza stylów .....................................................246 Rozpoznawanie urz(cid:238)dze(cid:300) mobilnych ....................................................246 6 S P I S T R E (cid:285) C I Kup książkęPoleć książkę Rozdzia(cid:281) 8. Podstawy rysowania na elemencie canvas ............................... 249 P(cid:298)ótno — wprowadzenie .......................................................................... 250 Linie proste .......................................................................................... 252 (cid:320)cie(cid:353)ki i figury ...................................................................................... 254 Krzywe ................................................................................................. 256 Transformaty ....................................................................................... 258 Przezroczysto(cid:321)(cid:240) .................................................................................... 262 Kompozycje z(cid:298)o(cid:353)one ............................................................................. 263 Tworzenie prostego programu graficznego ............................................... 264 Przygotowanie narz(cid:258)dzi ........................................................................ 265 Malowanie po p(cid:298)ótnie ........................................................................... 267 Zachowywanie p(cid:298)ótna .......................................................................... 268 P(cid:298)ótno i kompatybilno(cid:321)(cid:240) z przegl(cid:238)darkami ............................................... 271 Wype(cid:298)nienie ExplorerCanvas ................................................................ 271 Wype(cid:298)nienie FlashCanvas .................................................................... 272 Alternatywne p(cid:298)ótna i wykrywanie obs(cid:298)ugi ........................................... 273 Rozdzia(cid:281) 9. Wi(cid:241)cej o p(cid:281)ótnie ...........................................................................275 Inne w(cid:298)asno(cid:321)ci p(cid:298)ótna .............................................................................. 275 Rysowanie obrazów .............................................................................. 276 Wycinanie i zmienianie wielko(cid:321)ci obrazu ............................................. 277 Rysowanie tekstu ................................................................................. 278 Cienie i inne ozdobniki ........................................................................... 280 Dodawanie cieni .................................................................................. 280 Wype(cid:298)nianie figur deseniem ................................................................. 282 Wype(cid:298)nianie figur gradientem .............................................................. 283 Sk(cid:298)adanie wszystkiego w ca(cid:298)o(cid:321)(cid:240): rysowanie wykresów ........................... 286 Interaktywne figury ................................................................................. 291 (cid:320)ledzenie rysowanych elementów ......................................................... 291 Wspó(cid:298)rz(cid:258)dne i lokalizowanie trafie(cid:300) ..................................................... 294 Animowanie p(cid:298)ótna ................................................................................. 297 Podstawowa animacja .......................................................................... 297 Animowanie wielu obiektów ................................................................ 299 Praktyczny przyk(cid:298)ad: labirynt .................................................................. 303 Rysowanie labiryntu ............................................................................. 304 Animowanie ikony ............................................................................... 305 Lokalizowanie trafie(cid:300) a barwa pikseli ................................................... 307 Cze(cid:316)(cid:235) III. Konstruowanie aplikacji sieciowych przy u(cid:348)yciu komponentów desktopowych .................................311 Rozdzia(cid:281) 10. Magazyn danych ........................................................................ 313 Magazyn sieciowy — podstawy ................................................................ 314 Magazynowanie danych ....................................................................... 315 Praktyczny przyk(cid:298)ad: zapisywanie stanu gry .......................................... 317 Magazyn sieciowy a obs(cid:298)uga przegl(cid:238)darek ............................................. 319 S P I S T R E (cid:285) C I 7 Kup książkęPoleć książkę Magazyn sieciowy — na g(cid:298)(cid:258)bszych wodach ...............................................319 Usuwanie wpisów ................................................................................319 Listowanie wszystkich zachowanych wpisów ........................................320 Zapisywanie liczb i dat .........................................................................321 Zachowywanie obiektów ......................................................................322 Reagowanie na zmiany w magazynie ....................................................323 Odczytywanie plików ..............................................................................325 Pobieranie pliku ...................................................................................326 Odczytywanie pliku tekstowego ............................................................326 Zast(cid:258)powanie standardowej kontrolki (cid:298)adowania plików .......................328 Odczytywanie wielu plików jednocze(cid:321)nie ..............................................329 Odczytywanie pliku graficznego ............................................................329 File API i obs(cid:298)uga przegl(cid:238)darek ..............................................................332 IndexedDB: silnik bazy danych w przegl(cid:238)darce .........................................333 Obiekt przechowuj(cid:238)cy dane ..................................................................335 Tworzenie bazy danych i (cid:298)(cid:238)czenie z ni(cid:238) .................................................336 Tworzenie zapisów w bazie danych .......................................................338 Przegl(cid:238)danie wszystkich zapisów tablicy ...............................................340 Przeszukiwanie pojedynczego zapisu tablicy .........................................342 Usuni(cid:258)cie zapisu ..................................................................................343 Obs(cid:298)uga IndexedDB w przegl(cid:238)darkach ..................................................344 Rozdzia(cid:281) 11. Aplikacje sieciowe z trybem offline .......................................... 345 Cache’owanie plików ...............................................................................346 Tworzenie manifestu ...........................................................................347 Korzystanie z manifestu .......................................................................349 Przenoszenie manifestu na serwer ........................................................349 Uaktualnianie manifestu ......................................................................352 Obs(cid:298)uga w przegl(cid:238)darkach aplikacji w trybie offline ...............................355 Praktyczne techniki cache’owania ............................................................356 Uzyskiwanie dost(cid:258)pu do cache’owanych plików ....................................356 Tryb awaryjny ......................................................................................357 Sprawdzanie stanu po(cid:298)(cid:238)czenia ..............................................................359 Wykrywanie uaktualniania przy u(cid:353)yciu JavaScriptu ..............................360 Rozdzia(cid:281) 12. Komunikacja z serwerem sieciowym ........................................365 Wysy(cid:298)anie wiadomo(cid:321)ci na serwer .............................................................366 Obiekt XMLHttpRequest .....................................................................366 Wysy(cid:298)anie zapyta(cid:300) na serwer ................................................................367 Pobieranie nowych tre(cid:321)ci ......................................................................371 Zdarzenia przesy(cid:298)ane na serwer ...............................................................375 Format wiadomo(cid:321)ci ..............................................................................376 Wysy(cid:298)anie wiadomo(cid:321)ci za pomoc(cid:238) skryptu serwera ...............................377 Przetwarzanie wiadomo(cid:321)ci na stronie ...................................................379 Polling a zdarzenia po stronie serwera ...................................................380 Technologia WebSocket ..........................................................................382 Serwer WebSocketów ............................................................................383 Prosty klient w technologii WebSocket ..................................................384 Przyk(cid:298)ady technologii WebSocket w sieci ..............................................385 8 S P I S T R E (cid:285) C I Kup książkęPoleć książkę Rozdzia(cid:281) 13. Geolokalizacja, obiekt pracownika i zarz(cid:221)dzanie histori(cid:221) ......389 Geolokalizacja ......................................................................................... 390 Jak dzia(cid:298)a geolokalizacja? ...................................................................... 390 Odnajdywanie wspó(cid:298)rz(cid:258)dnych u(cid:353)ytkownika ......................................... 392 Usuwanie b(cid:298)(cid:258)dów ................................................................................. 394 Ustawienia geolokalizacji ..................................................................... 396 Generowanie mapy .............................................................................. 397 Monitorowanie ruchu u(cid:353)ytkownika ...................................................... 399 Obs(cid:298)uga geolokalizacji w przegl(cid:238)darkach .............................................. 400 Obiekt pracownika .................................................................................. 401 Czasoch(cid:298)onne zadanie .......................................................................... 401 Wykonywanie zada(cid:300) w tle .................................................................... 404 Obs(cid:298)uga b(cid:298)(cid:258)dów pracownika ................................................................. 407 Anulowanie zadania uruchomionego w tle ........................................... 407 Przekazywanie bardziej z(cid:298)o(cid:353)onych wiadomo(cid:321)ci ..................................... 407 Obs(cid:298)uga pracowników w przegl(cid:238)darkach ............................................... 410 Zarz(cid:238)dzanie histori(cid:238) ................................................................................ 411 Kwestia URL ........................................................................................ 411 Dawne rozwi(cid:238)zanie: znak kratki i adres URL ........................................ 412 Rozwi(cid:238)zanie HTML5: historia sesji ...................................................... 413 Historia sesji i kompatybilno(cid:321)(cid:240) ............................................................. 417 Dodatki ........................................................................................ 419 Dodatek A. Podstawy CSS ...............................................................................421 Za(cid:298)(cid:238)czanie stylów do stron ...................................................................... 421 Anatomia arkusza stylów ........................................................................ 422 W(cid:298)asno(cid:321)ci CSS ..................................................................................... 423 Formatowanie elementów przy u(cid:353)yciu klas ........................................... 423 Komentarze w arkuszach stylów ........................................................... 425 Odrobin(cid:258) bardziej zaawansowane arkusze stylów ..................................... 425 Konstruowanie struktury strony przy u(cid:353)yciu elementu div .............. 425 Wiele selektorów .................................................................................. 426 Selektory kontekstowe ......................................................................... 427 Selektor identyfikatora ......................................................................... 428 Selektory pseudoklas ............................................................................ 428 Selektory atrybutów ............................................................................. 429 Wycieczka po stylach ............................................................................... 430 Dodatek B. JavaScript — mózg nowoczesnej witryny ................................. 435 W jaki sposób witryny korzystaj(cid:238) z JavaScriptu? ....................................... 436 Zagnie(cid:353)d(cid:353)anie kodu w dokumencie HTML .......................................... 436 U(cid:353)ywanie funkcji ................................................................................. 437 Przenoszenie kodu JavaScript do oddzielnego pliku ............................... 439 Odpowiadanie na zdarzenia .................................................................. 440 S P I S T R E (cid:285) C I 9 Kup książkęPoleć książkę Podstawy sk(cid:298)adni j(cid:258)zyka ..........................................................................441 Zmienne ..............................................................................................441 Warto(cid:321)(cid:240) null .........................................................................................443 Zakres zmiennych ................................................................................443 Typy danych .........................................................................................444 Operacje ...............................................................................................444 Instrukcje warunkowe ..........................................................................446 P(cid:258)tle .....................................................................................................447 Tablice .................................................................................................448 Funkcje — otrzymywanie i zwracanie danych ........................................449 Obiekty ................................................................................................450 Litera(cid:298)y obiektu ....................................................................................451 Interakcja ze stron(cid:238) .................................................................................452 Manipulowanie elementem ..................................................................453 Dynamiczne (cid:298)(cid:238)czenie ze zdarzeniem .....................................................454 Zdarzenia wplatane ..............................................................................457 Skorowidz ...................................................................................................... 459 10 S P I S T R E (cid:285) C I Kup książkęPoleć książkę 7 ROZDZIA(cid:224) Projektowanie elastycznych witryn w CSS3 W ebdesignerzy musieli stawi(cid:240) czo(cid:298)o powa(cid:353)nemu wyzwaniu ju(cid:353) wtedy, kiedy tylko zacz(cid:258)li umieszcza(cid:240) materia(cid:298)y na stronach internetowych. Projektanci materia(cid:298)ów drukowanych mogli polega(cid:240) na pewnych za(cid:298)o- (cid:353)eniach dotycz(cid:238)cych wygl(cid:238)du swoich dokumentów na papierze i sposobu, w jaki odbiorcy si(cid:258) nimi pos(cid:298)ugiwali, jednak w sieci panowa(cid:298)o pod tym wzgl(cid:258)dem zu- pe(cid:298)ne bezprawie. Ta sama strona HTML, w zale(cid:353)no(cid:321)ci od przegl(cid:238)darek i prefe- rencji u(cid:353)ytkowników, mog(cid:298)a zosta(cid:240) wt(cid:298)oczona do male(cid:300)kiego okienka albo mo- g(cid:298)a wisie(cid:240) po(cid:321)rodku ogromnego okna, zatem tworzenie rozbudowanych layoutów by(cid:298)o ryzykowne. Layout, który wygl(cid:238)da(cid:298) idealnie w jednym oknie, móg(cid:298) si(cid:258) ca(cid:298)kowi- cie roz(cid:298)o(cid:353)y(cid:240) w oknie o innych wymiarach. Dzi(cid:321) to zró(cid:353)nicowanie jest jeszcze wi(cid:258)ksze. Webdeweloperzy musz(cid:238) bra(cid:240) pod uwag(cid:258) nie tylko ró(cid:353)ne wymiary przegl(cid:238)darek na komputerach, ale tak(cid:353)e rozmiary ró(cid:353)nych urz(cid:238)dze(cid:300), takich jak tablety i smartfony. Layouty jednocze(cid:321)nie zwi(cid:258)k- szy(cid:298)y swoj(cid:238) z(cid:298)o(cid:353)ono(cid:321)(cid:240) — dzi(cid:321) na wi(cid:258)kszo(cid:321)ci witryn stykamy si(cid:258) z ró(cid:353)norakimi menu, pomocami nawigacyjnymi, paskami bocznymi i podobnymi elementami. Je(cid:321)li Twoim celem jest utworzenie jednej witryny, która ma wygl(cid:238)da(cid:240) równie es- tetycznie w ró(cid:353)nych warunkach, poradzenie sobie z takimi szczegó(cid:298)ami b(cid:258)dzie nie lada wyzwaniem. Poniewa(cid:353) webdesignerzy ju(cid:353) dawno przenie(cid:321)li kod odpowiedzialny za uk(cid:298)ad strony i formatowanie do plików CSS, mo(cid:353)na oczekiwa(cid:240), (cid:353)e standard ten zapew- nia jakie(cid:321) rozwi(cid:238)zanie omówionego powy(cid:353)ej problemu. Rzeczywi(cid:321)cie, CSS3 ob- s(cid:298)uguje zapytania medialne, które pozwalaj(cid:238) stronie na prze(cid:298)(cid:238)czanie stylów w za- le(cid:353)no(cid:321)ci od wielko(cid:321)ci okna lub urz(cid:238)dzenia, na którym jest wy(cid:321)wietlana. Zapytania medialne s(cid:238) praktycznie nieodzowne w projektowaniu stron na urz(cid:238)- dzenia mobilne. Je(cid:321)li nawet nie przypuszczasz, (cid:353)e ktokolwiek b(cid:258)dzie odwiedza(cid:240) Twoje strony na smartfonie, zapytania dadz(cid:238) pewno(cid:321)(cid:240), (cid:353)e layout b(cid:258)dzie si(cid:258) do- stosowywa(cid:298) do (cid:321)rodowiska pracy u(cid:353)ytkownika, np. usuwaj(cid:238)c dodatkowe kolumny, gdy zabraknie na nie miejsca, albo przenosz(cid:238)c linki nawigacyjne z góry strony Kup książkęPoleć książkę Podstawy projektowania elastycznego na bok. Taka elastyczno(cid:321)(cid:240) wi(cid:238)(cid:353)e si(cid:258) z popularn(cid:238) filozofi(cid:238) webdesignu, nosz(cid:238)c(cid:238) nazw(cid:258) projektowania elastycznego (ang. responsive design), któr(cid:238) omówimy w tym rozdziale. Podstawy projektowania elastycznego Od pocz(cid:238)tku istnienia sieci zró(cid:353)nicowanie wymiarów okien by(cid:298)o przyczyn(cid:238) wielu k(cid:298)opotów. Z biegiem lat webdesignerzy opracowali szereg mniej lub bardziej ele- ganckich, komplementarnych technik, pozwalaj(cid:238)cych na sprostanie wymogom projektowania elastycznego. Przed zapoznaniem si(cid:258) z zapytaniami medialnymi warto przyjrze(cid:240) si(cid:258) ukazanym tutaj tradycyjnym metodom. Wszystkie s(cid:238) nadal wa(cid:353)ne, ale — jak si(cid:258) przekonasz — nie stanowi(cid:238) pe(cid:298)nego rozwi(cid:238)zania. Znaj(cid:238)c ich ograniczenia, b(cid:258)dziesz móg(cid:298) zrozumie(cid:240), w jaki sposób CSS3 wype(cid:298)nia wszystkie luki. P(cid:298)ynny layout Najprostszym sposobem zabezpieczenia strony przy zmianach wymiarów okna jest utworzenie layoutu proporcjonalnego, czyli takiego, który zajmuje ca(cid:298)(cid:238) do- st(cid:258)pn(cid:238) powierzchni(cid:258), niezale(cid:353)nie od jej wielko(cid:321)ci. Opracowanie proporcjonalnego layoutu jest — w teorii — ca(cid:298)kiem proste. Podstawow(cid:238) zasad(cid:238) jest podzielenie stro- ny na kolumny o szeroko(cid:321)ciach okre(cid:321)lanych warto(cid:321)ciami procentowymi, a nie pik- selowymi. Powiedzmy, (cid:353)e Twoja strona ma nast(cid:258)puj(cid:238)cy, dwukolumnowy uk(cid:298)ad: body div class= leftColumn ... /div div class= rightColumn ... /div /body Regu(cid:298)y stylów layoutu o sta(cid:298)ych wymiarach mog(cid:238) wygl(cid:238)da(cid:240) nast(cid:258)puj(cid:238)co: .leftColumn { width: 275px; float: left; } .rightColumn { width: 685px; float: left; } body { margin: 0px; } Tymczasem regu(cid:298)y stylów w zdefiniowanym proporcjonalnie uk(cid:298)adzie strony wygl(cid:238)daj(cid:238) tak: 228 C Z (cid:265) (cid:285) (cid:251) I I (cid:105) F I L M Y , O B R A Z K I I I N N E C U D E (cid:275) K A Kup książkęPoleć książkę Podstawy projektowania elastycznego .leftColumn { width: 28.6 ; float: left; } .rightColumn { width: 71.4 ; float: left; } body { margin: 0px; } Lewa kolumna ma tutaj szeroko(cid:321)(cid:240) 28.6 , wobec czego zajmuje 28,6 szeroko(cid:321)ci swojego kontenera, elementu body . W tym przyk(cid:298)adzie element body po- zbawiony jest marginesów, a zatem rozci(cid:238)ga si(cid:258) na ca(cid:298)(cid:238) szeroko(cid:321)(cid:240) okna przegl(cid:238)- darki, przy czym lewa kolumna obejmuje 28,6 tego obszaru. Jak mo(cid:353)na si(cid:258) domy(cid:321)li(cid:240), warto(cid:321)ci procentowe obydwu kolumn wynosz(cid:238) (cid:298)(cid:238)cznie równo 100 . Kolumny rozci(cid:238)gaj(cid:238) si(cid:258) i kurcz(cid:238), aby dopasowa(cid:240) si(cid:258) do szeroko(cid:321)ci okna przegl(cid:238)darki. Layouty proporcjonalne nazywane s(cid:238) p(cid:298)ynnymi, poniewa(cid:353) zamieszczona w nich tre(cid:321)(cid:240) g(cid:298)adko dostosowuje si(cid:258) do dost(cid:258)pnej przestrzeni. Uwaga: W tym przyk(cid:293)adzie szeroko(cid:316)(cid:235) lewej kolumny (28,6 ) wyliczono, dziel(cid:233)c sta(cid:293)(cid:233) szeroko(cid:316)(cid:235) kolumny (275 pikseli) przez szeroko(cid:316)(cid:235) ca(cid:293)ego uk(cid:293)adu (wynosz(cid:233)c(cid:233) 960 pikseli, co jest cz(cid:253)stym stan- dardem). Poniewa(cid:348) projektowanie wi(cid:253)kszo(cid:316)ci uk(cid:293)adów zaczyna si(cid:253) zwykle na ustalonych szeroko- (cid:316)ciach, webdeweloperzy s(cid:233) przyzwyczajeni do wykonywania takich oblicze(cid:295) przy tworzeniu p(cid:293)ynnych layoutów. Rzecz jasna, dostosowanie szeroko(cid:321)ci samych kolumn nie wystarczy. Musisz równie(cid:353) wzi(cid:238)(cid:240) pod uwag(cid:258) marginesy, odst(cid:258)py i obramowania. Pocz(cid:238)tkuj(cid:238)cy webde- weloperzy cz(cid:258)sto wprowadzaj(cid:238) w swoich pierwszych p(cid:298)ynnych layoutach ustalone marginesy i odst(cid:258)py (o warto(cid:321)ciach pikselowych), a jednocze(cid:321)nie proporcjonalnie okre(cid:321)laj(cid:238) wymiary kolumn. Wskutek tego kolumny zajmuj(cid:238) jedynie przestrze(cid:300) pozosta(cid:298)(cid:238) po odj(cid:258)ciu szeroko(cid:321)ci marginesów od ca(cid:298)ej szeroko(cid:321)ci strony. Procen- towe warto(cid:321)ci szeroko(cid:321)ci kolumn s(cid:238) jednak wyliczane na podstawie ca(cid:298)ej szero- ko(cid:321)ci strony, bez uwzgl(cid:258)dnienia marginesów. Ta rozbie(cid:353)no(cid:321)(cid:240) mo(cid:353)e powodowa(cid:240) problemy z wy(cid:321)wietlaniem strony w w(cid:238)skich oknach, bo marginesy o warto(cid:321)ciach pikselowych zabieraj(cid:238) miejsce proporcjonalnie zdefiniowanym kolumnom. Zastanówmy si(cid:258) nad poni(cid:353)szymi stylami: .leftColumn { width: 27 ; margin: 5px; float: left; } .rightColumn { width: 68 ; margin: 5px; float: left; } Te dwie kolumny zajmuj(cid:238) (cid:298)(cid:238)cznie 95 szeroko(cid:321)ci, pozostawiaj(cid:238)c dodatkowe 5 na marginesy. To wystarczy dla okien o (cid:321)rednich i du(cid:353)ych rozmiarach, ale w nie- wielkim oknie pozosta(cid:298)e 5 nie pomie(cid:321)ci marginesów o ustalonej szeroko(cid:321)ci. R O Z D Z I A (cid:224) 7 . (cid:105) P R O J E K T O W A N I E E L A S T Y C Z N Y C H W I T R Y N W C S S 3 229 Kup książkęPoleć książkę Podstawy projektowania elastycznego Aby zilustrowa(cid:240) ten problem, nadaj obydwu kolumnom dwa ró(cid:353)ne kolory za pomoc(cid:238) w(cid:298)asno(cid:321)ci background, a nast(cid:258)pnie pozmieniaj wymiary okna, tak jak na rysunku 7.1. Rysunek 7.1. Kolumny o pro- porcjonalnie okre(cid:316)lonej szero- ko(cid:316)ci i marginesy o sta(cid:293)ej sze- roko(cid:316)ci nie (cid:293)(cid:233)cz(cid:233) si(cid:253) dobrze. Kiedy okno jest za ma(cid:293)e, mar- ginesy wypychaj(cid:233) drug(cid:233) ko- lumn(cid:253) z uk(cid:293)adu Rozwi(cid:238)zaniem tego problemu jest nadanie proporcjonalnej szeroko(cid:321)ci wszyst- kim marginesom, znajduj(cid:238)cym si(cid:258) pomi(cid:258)dzy proporcjonalnymi kolumnami. Je(cid:321)li zatem kolumny pozostawiaj(cid:238) 5 wolnego miejsca, mo(cid:353)esz je przypisa(cid:240) margi- nesom. Podziel t(cid:258) szeroko(cid:321)(cid:240) na trzy obszary o szeroko(cid:321)ci 1,66 — jeden na lewym kra(cid:300)cu okna, drugi na prawym i trzeci pomi(cid:258)dzy kolumnami. .leftColumn { width: 27 ; margin-left: 1.66 ; margin-right: 1.66 ; background: #FFFFCC; float: left; } .rightColumn { width: 68 ; margin-right: 1.66 ; background: #CCFFCC; float: left; } Na rysunku 7.2 wida(cid:240) efekt okre(cid:321)lenia szeroko(cid:321)ci zarówno kolumn, jak i margi- nesów proporcjonalnie przy u(cid:353)yciu warto(cid:321)ci procentowych. Proporcjonalne marginesy mog(cid:238) Ci nie odpowiada(cid:240), je(cid:321)li potrzebujesz innego efektu. Je(cid:353)eli nie chcesz, by marginesy zmienia(cid:298)y wielko(cid:321)(cid:240) stosownie do rozmiaru okna przegl(cid:238)darki, mo(cid:353)esz spróbowa(cid:240) obej(cid:321)(cid:240) to zachowanie. Mo(cid:353)esz np. zamie(cid:321)ci(cid:240) dodatkowy element w jednej z proporcjonalnych kolumn i nada(cid:240) mu w(cid:298)asne mar- ginesy lub odst(cid:258)py o ustalonej szeroko(cid:321)ci. Poniewa(cid:353) element ten umieszczony jest w obr(cid:258)bie zdefiniowanego ju(cid:353), w pe(cid:298)ni proporcjonalnego uk(cid:298)adu, b(cid:258)dzie si(cid:258) stale znajdowa(cid:298) na swoim miejscu, niezale(cid:353)nie od wielko(cid:321)ci okna. 230 C Z (cid:265) (cid:285) (cid:251) I I (cid:105) F I L M Y , O B R A Z K I I I N N E C U D E (cid:275) K A Kup książkęPoleć książkę Podstawy projektowania elastycznego Rysunek 7.2. Layout strony b(cid:253)dzie poprawnie skalowany do ka(cid:348)dego rozmiaru, je(cid:316)li szeroko- (cid:316)ci okre(cid:316)lone zostan(cid:233) proporcjo- nalnie z wykorzystaniem warto- (cid:316)ci procentowych Obramowania sprawiaj(cid:238) podobne problemy. Obramowanie nadane kolumnom zajmuje pewn(cid:238) ilo(cid:321)(cid:240) miejsca i mo(cid:353)e roz(cid:298)o(cid:353)y(cid:240) uk(cid:298)ad tak samo jak marginesy o usta- lonej szeroko(cid:321)ci z rysunku 7.1. W takiej sytuacji problemu nie mo(cid:353)na rozwi(cid:238)za(cid:240) poprzez wyliczenie proporcji, gdy(cid:353) szeroko(cid:321)ci obramowania nie mo(cid:353)na okre(cid:321)la(cid:240) w procentach. Najprostszym rozwi(cid:238)zaniem jest wykorzystanie techniki wspo- mnianej powy(cid:353)ej: osad(cid:351) element div w kolumnie o procentowo okre(cid:321)lonej szeroko(cid:321)ci i nadaj mu obramowanie. Ta sprawdzona metoda wprawdzie nieco za(cid:321)mieca kod (zmuszaj(cid:238)c do utworzenia dodatkowej warstwy layoutu), ale dzi(cid:258)ki temu uk(cid:298)ad strony mo(cid:353)e dzia(cid:298)a(cid:240) sprawnie w oknie o dowolnym rozmiarze. P(cid:298)ynne obrazy Wielokolumnowy, proporcjonalny uk(cid:298)ad strony jest podstaw(cid:238) elastycznego pro- jektu. Kiedy jednak przychodzi czas na zaj(cid:258)cie si(cid:258) sam(cid:238) zawarto(cid:321)ci(cid:238) kolumn na stronie, pojawia si(cid:258) wiele innych kwestii, które trzeba wzi(cid:238)(cid:240) pod uwag(cid:258). Jedn(cid:238) z nich s(cid:238) obrazy. Pola obrazów standardowo dopasowuj(cid:238) si(cid:258) do swojej za- warto(cid:321)ci, czyli dok(cid:298)adnie, co do piksela, przyjmuj(cid:238) wymiary obrazu. Takie usta- wienie mo(cid:353)e jednak wywo(cid:298)ywa(cid:240) problemy w mniejszych oknach. Je(cid:321)li brakuje miejsca na wy(cid:321)wietlenie ca(cid:298)ego obrazu, wylewa si(cid:258) on z kolumny i rozchodzi na inne elementy, zakrywaj(cid:238)c je i wywo(cid:298)uj(cid:238)c niechlujne wra(cid:353)enie. Rozwi(cid:238)zanie tego problemu jest proste. Wystarczy nada(cid:240) ka(cid:353)demu obrazowi mak- symaln(cid:238) szeroko(cid:321)(cid:240) równ(cid:238) szeroko(cid:321)ci jego kontenera: img { max-width: 100 ; } R O Z D Z I A (cid:224) 7 . (cid:105) P R O J E K T O W A N I E E L A S T Y C Z N Y C H W I T R Y N W C S S 3 231 Kup książkęPoleć książkę Podstawy projektowania elastycznego W I Z J E P R Z Y S Z (cid:297) O (cid:320) C I W(cid:298)asno(cid:321)(cid:240) box-sizing i funkcja calc() Omówione w tym punkcie problemy z layoutami s(cid:233) do tego stopnia powszechne, (cid:348)e w CSS3 mo(cid:348)na znale(cid:346)(cid:235) mnóstwo potencjalnych rozwi(cid:233)za(cid:295). Oto dwa z najbar- dziej obiecuj(cid:233)cych, cho(cid:235) nie bez wad. (cid:141) Box-sizing. Obramowania standardowo zamiesz- czane s(cid:233) po zewn(cid:253)trznej stronie elementów, przez co trzeba bra(cid:235) pod uwag(cid:253) ich obszar w oblicze- niach proporcji layoutu. W CSS3 pojawi(cid:293)a si(cid:253) jednak w(cid:293)a(cid:316)ciwo(cid:316)(cid:235) box-sizing, której wystarczy nada(cid:235) warto(cid:316)(cid:235) border-box, aby obramowanie znala- z(cid:293)o si(cid:253) w obr(cid:253)bie pola elementu. Obramowanie wygl(cid:233)da wtedy tak samo, ale obliczenia wielko(cid:316)ci takich komponentów ulegaj(cid:233) zmianie. Oznacza to tyle, (cid:348)e kolumna szeroka na 67 zajmuje 67 szeroko(cid:316)ci kontenera, niezale(cid:348)nie od szeroko(cid:316)ci swojego obramowania. (cid:141) Funkcja calc(). Je(cid:316)li musisz zestawi(cid:235) wymiary pro- porcjonalne z ustalonymi, przeprowadzenie stosow- nych oblicze(cid:295) mo(cid:348)esz powierzy(cid:235) funkcji calc() w CSS3, a nast(cid:253)pnie wykorzysta(cid:235) ich wyniki w lay- oucie. Wyobra(cid:346) sobie, (cid:348)e musisz utworzy(cid:235) ko- lumn(cid:253) szerok(cid:233) na 67 kontenera bez 5 pikseli, które maj(cid:233) by(cid:235) przeznaczone na marginesy. Nie- uwa(cid:348)ny webdeweloper mo(cid:348)e omin(cid:233)(cid:235) ten problem, zw(cid:253)(cid:348)aj(cid:233)c kolumn(cid:253) do 65 , co prowadzi do wi- docznej na rysunku 7.1 niespójno(cid:316)ci w rozmiesz- czeniu elementów. W CSS3 mo(cid:348)na jednak nada(cid:235) w(cid:293)asno(cid:316)ci width warto(cid:316)(cid:235) calc(67 -5px), dzi(cid:253)- ki której kolumna ma tak(cid:233) szeroko(cid:316)(cid:235), jak(cid:233) powinna — i ani piksela wi(cid:253)cej. W obu przypadkach wprowadzone rozwi(cid:233)zanie mo(cid:348)e jednak pogorszy(cid:235) sytuacj(cid:253). Ustawienie box-sizing nie dzia(cid:293)a w IE 7, a w Firefoksie wymaga u(cid:348)ycia przedrost- ka -moz- (jak wspomniano w rozdziale 6., w punkcie „Style w(cid:293)a(cid:316)ciwe konkretnym przegl(cid:233)darkom”). Funkcja calc() nie dzia(cid:293)a w IE 7, IE 8 i przegl(cid:233)darce Andro- ida sprzed Chrome, a starsze wersje Safari wymagaj(cid:233) podania przedrostka -webkit-. Problemom z ob- s(cid:293)ug(cid:233) mo(cid:348)na wprawdzie zaradzi(cid:235) za pomoc(cid:233) wype(cid:293)nie(cid:295), ale na razie (cid:293)atwiej unika(cid:235) korzystania z tych funkcji w ogóle, dopóki wi(cid:253)cej ludzi nie przeniesie si(cid:253) na no- wocze(cid:316)niejsze przegl(cid:233)darki. Jak zwykle, warto(cid:321)(cid:240) 100 odnosi si(cid:258) do kontenera elementu. W tym przypadku jest to kolumna, w której zawarty jest obraz, a nie ca(cid:298)a strona. Twój obraz mo(cid:353)e teraz osi(cid:238)gn(cid:238)(cid:240) albo swój maksymalny rozmiar, albo rozmiar ograniczony wielko(cid:321)ci(cid:238) swoje- go kontenera, w zale(cid:353)no(cid:321)ci od tego, która z tych warto(cid:321)ci jest mniejsza (rysunek 7.3). Wskazówka: Je(cid:316)li zdecydujesz si(cid:253) utworzy(cid:235) margines wokó(cid:293) obrazu, dopilnuj, by warto(cid:316)ci procen- towe w(cid:293)asno(cid:316)ci margin-left, margin-right, oraz max-width sumowa(cid:293)y si(cid:253) do 100 (a ju(cid:348) na pewno nie przekracza(cid:293)y tej warto(cid:316)ci). Jednym ograniczeniem p(cid:298)ynnych obrazów jest to, (cid:353)e przegl(cid:238)darka musi pobra(cid:240) obraz w pe(cid:298)nej wielko(cid:321)ci, niezale(cid:353)nie od wymiarów, w jakich ma by(cid:240) wy(cid:321)wietla- ny. Wi(cid:238)(cid:353)e si(cid:258) to z niewielkim, cho(cid:240) i tak zb(cid:258)dnym zu(cid:353)yciem czasu i transferu, co jest niedogodne dla u(cid:353)ytkowników urz(cid:238)dze(cid:300) mobilnych. Niestety, CSS nie poradzi sobie z tym problemem samodzielnie. Istniej(cid:238) jednak pewne rozwi(cid:238)zania, w ra- mach których wykorzystuje si(cid:258) po(cid:298)(cid:238)czenie kodów dzia(cid:298)aj(cid:238)cych po stronie serwera, serwisów internetowych oraz bibliotek JavaScriptu. Je(cid:321)li zamierzasz dostarcza(cid:240) u(cid:353)ytkownikom urz(cid:238)dze(cid:300) mobilnych bogat(cid:238) w pliki graficzne stron(cid:258) internetow(cid:238), powiniene(cid:321) rozwa(cid:353)y(cid:240) skorzystanie z technik, których omówienie znajdziesz w arty- kule Smashing Magazine pod adresem http://tinyurl.com/responsive-img. (Trzeba jednak przyzna(cid:240), (cid:353)e wielu deweloperów w ogóle nie zawraca sobie tym g(cid:298)owy). Na szcz(cid:258)(cid:321)cie, istnieje równie(cid:353) sposób na rozwi(cid:238)zanie analogicznego, cho(cid:240) du(cid:353)o po- wa(cid:353)niejszego problemu z wymiarami filmów na urz(cid:238)dzeniach mobilnych (o którym przeczytasz w ramce na ko(cid:300)cu tego rozdzia(cid:298)u). 232 C Z (cid:265) (cid:285) (cid:251) I I (cid:105) F I L M Y , O B R A Z K I I I N N E C U D E (cid:275) K A Kup książkęPoleć książkę Podstawy projektowania elastycznego Rysunek 7.3. Ka(cid:348)dy obraz mo(cid:348)e wyrwa(cid:235) si(cid:253) spod kontroli, je(cid:348)eli nie okre(cid:316)li si(cid:253) jego p(cid:293)ynno(cid:316)ci (gó- ra). Je(cid:316)li jednak ograniczysz jego szeroko(cid:316)(cid:235) do szeroko(cid:316)ci konte- nera, obraz b(cid:253)dzie wy(cid:316)wietlany w odpowiednich wymiarach (dó(cid:293)) P(cid:298)ynna typografia Skoro utworzy(cid:298)e(cid:321) ju(cid:353) p(cid:298)ynny layout z obrazami o w(cid:298)a(cid:321)ciwie okre(cid:321)lonych wymia- rach, czas zaj(cid:238)(cid:240) si(cid:258) tekstem w kolumnach. Niedo(cid:321)wiadczeni webdeweloperzy cz(cid:258)sto wybieraj(cid:238) dla swojego tekstu adekwatny, ustalony rozmiar (okre(cid:321)lany warto- (cid:321)ciami pikselowymi) i na tym poprzestaj(cid:238). Takie sztywno okre(cid:321)lane wielko(cid:321)ci nie przystaj(cid:238) jednak do modelu skalowalnego projektowania uk(cid:298)adów stron, po- niewa(cid:353) tekst, który wygl(cid:238)da dobrze na ekranie komputera, jest niemal niewi- doczny na urz(cid:238)dzeniach mobilnych. Cho(cid:240) u(cid:353)ytkownik zawsze mo(cid:353)e przybli(cid:353)y(cid:240) widok i przeczyta(cid:240) tekst, celem projektowania skalowalnego jest utworzenie strony pasuj(cid:238)cej do ka(cid:353)dego okna, która nie wymaga cz(cid:258)stego przybli(cid:353)ania i przewijania w poziomie. I znowu rozwi(cid:238)zanie polega na unikaniu ustalonych jednostek miary w rodzaju pikseli i punktów. Zamiast tego wielko(cid:321)(cid:240) tekstu nale(cid:353)y ustala(cid:240) wzgl(cid:258)dnie, korzy- staj(cid:238)c z warto(cid:321)ci procentowych i firetów. Najpopularniejszym wyborem jest firet, znany równie(cid:353) jako jednostka em, której nazwa odnosi si(cid:258) do wielkiej litery M. Uwaga: Firet od dawna s(cid:293)u(cid:348)y do okre(cid:316)lania szeroko(cid:316)ci w typografii drukowanej. Poj(cid:253)cie em dash (z ang. pauza) pierwotnie odnosi(cid:293)o si(cid:253) do poziomego znaku o szeroko(cid:316)ci równej wielkiej literze M danego kroju. R O Z D Z I A (cid:224) 7 . (cid:105) P R O J E K T O W A N I E E L A S T Y C Z N Y C H W I T R Y N W C S S 3 233 Kup książkęPoleć książkę Podstawy projektowania elastycznego Warto(cid:321)ci procentowe pozwalaj(cid:238) na uzyskanie takiego samego wyniku: wielko(cid:321)(cid:240) tekstu okre(cid:321)lana jest wzgl(cid:258)dem domy(cid:321)lnej wielko(cid:321)ci tekstu przegl(cid:238)darki. Je(cid:321)li wy- bierzesz rozmiar tekstu równy 110 lub 1.1em, otrzymasz pismo o 10 wi(cid:258)ksze od zwyczajnego, nieobstylowanego tekstu. Wybierz rozmiar tekstu równy 50 lub 0.5em, aby zmniejszy(cid:240) znaki o po(cid:298)ow(cid:258). Cho(cid:240) nie jest istotne, czy skorzystasz z warto(cid:321)ci procentowych czy firetów, naj- bardziej elastyczne layouty bazuj(cid:238) na jednej, okre(cid:321)lonej konwencji. W wi(cid:258)kszo(cid:321)ci z nich wielko(cid:321)(cid:240) bazowa tekstu na stronie wynosi 100 (wskazuj(cid:238)c, (cid:353)e jest to punkt odniesienia dla pozosta(cid:298)ych rozmiarów), a wielko(cid:321)(cid:240) tekstu innych elemen- tów jest dodatkowo zwi(cid:258)kszana lub zmniejszana firetami: body { font-size: 100 } p { font-size: 0.9em } h1 { font-size: 2em } Do(cid:321)wiadczeni webdeweloperzy nie poprzestaj(cid:238) na tym, lecz u(cid:353)ywaj(cid:238) firetów przy definiowaniu wszystkich innych wielko(cid:321)ci w swoich layoutach. Je(cid:321)li np. gdzie(cid:321) w g(cid:298)(cid:258)bi Twojego layoutu znajduje si(cid:258) drobny margines lub odst(cid:258)p, lepiej zdefinio- wa(cid:240) go przy u(cid:353)yciu firetów, a nie pikseli. Takiego rodzaju wymiary s(cid:238) wtedy do- pasowane do wielko(cid:321)ci tekstu. Jest to do(cid:321)(cid:240) subtelny czynnik, ale pozwala na do- k(cid:298)adniejsze wycyzelowanie strony. Wyobra(cid:351) sobie np., (cid:353)e utworzy(cid:298)e(cid:321) dwupoziomowy layout, w którym element div osadzony jest w lewej kolumnie. S(cid:298)u(cid:353)y on do utworzenia dodatkowych odst(cid:258)pów dooko(cid:298)a tre(cid:321)ci bez prze(cid:298)amywania proporcjonalnego uk(cid:298)adu kolumn: body div class= leftColumn div class= leftColumnContent ... /div /div div class= rightColumn ... /div /body Mo(cid:353)esz okre(cid:321)li(cid:240) obramowanie, marginesy i odst(cid:258)py elementu div w lewej kolumnie przy u(cid:353)yciu warto(cid:321)ci pikselowych. Taki layout jest sprawny i te(cid:353) po- winien by(cid:240) p(cid:298)ynny. Jednak lepiej u(cid:353)y(cid:240) firetów, jak w poni(cid:353)szym przyk(cid:298)adzie: .leftColumn { width: 28.6 ; background: #FFFFCC; float: left; } .rightColumn { width: 71.4 ; background: #CCFFCC; float: left; 234 C Z (cid:265) (cid:285) (cid:251) I I (cid:105) F I L M Y , O B R A Z K I I I N N E C U D E (cid:275) K A Kup książkęPoleć książkę Podstawy projektowania elastycznego } .leftColumnContent { border: 0.07em solid gray; margin: 0.3em; padding: 0.2em 0.3em 0.4em 0.4em; } Uwaga: Najwi(cid:253)ksz(cid:233) korzy(cid:316)ci(cid:233) z u(cid:348)ywania firetów do okre(cid:316)lania obramowa(cid:295), marginesów i odst(cid:253)- pów cz(cid:253)sto jest to, (cid:348)e elementy te nie robi(cid:233) si(cid:253) za du(cid:348)e w ma(cid:293)ych oknach i nie dominuj(cid:233) nad layo- utem na urz(cid:233)dzeniach mobilnych. W I Z J E P R Z Y S Z (cid:297) O (cid:320) C I CSS3: od em do rem Gdy webdesignerzy u(cid:348)ywaj(cid:233) tekstu w z(cid:293)o(cid:348)onych, skalo- walnych layoutach, musz(cid:233) si(cid:253) mierzy(cid:235) z pewnym dzi- wactwem. Jednostki tekstowe o proporcjonalnych war- to(cid:316)ciach, takie jak firety i procenty, okre(cid:316)laj(cid:233) wielko(cid:316)(cid:235) pisma w odniesieniu do kontenera. Nie sprawia to pro- blemów w prostych przyk(cid:293)adach ukazanych w punkcie „P(cid:293)ynna typografia”, poniewa(cid:348) kontenerem jest element body , w którym zawarta jest ca(cid:293)a strona, b(cid:233)d(cid:346) in- ny element, dziedzicz(cid:233)cy jego ustawienia fontu. Bólu g(cid:293)owy mo(cid:348)na dosta(cid:235) dopiero przy okre(cid:316)laniu propor- cjonalnych wielko(cid:316)ci na wielu poziomach layoutu. Za(cid:293)ó(cid:348)my np., (cid:348)e utworzy(cid:293)e(cid:316) element div i nada(cid:293)e(cid:316) jego tekstowi wielko(cid:316)(cid:235) 1.1em. Nast(cid:253)pnie zamieszczasz w elemencie nag(cid:293)ówek h1 o wielko(cid:316)ci 2em. Pewnie spodziewasz si(cid:253), (cid:348)e tekst nag(cid:293)ówka b(cid:253)dzie dwukrotnie wi(cid:253)kszy od tekstu domy(cid:316)lnego, ale w rzeczywisto(cid:316)ci jest on dwukrotnie wi(cid:253)kszy od tekstu kontenera, któ- rego wielko(cid:316)(cid:235) wynosi 1.1em. Zatem nag(cid:293)ówek jest 2,2 razy wi(cid:253)kszy od tekstu domy(cid:316)lnego. Aby zapobiec wyst(cid:233)pieniu efektu kumulacji, musisz zachowa(cid:235) rygor przy doborze miejsc, w których nada- jesz tekstowi wielko(cid:316)(cid:235). Najlepiej robi(cid:235) to tylko na jednym poziomie layoutu. W CSS3 pojawi(cid:293)a si(cid:253) nowa jednostka, która pozwala na omini(cid:253)cie tego problemu. Jest to rem (skrót od „root em”, czyli em elementu g(cid:293)ównego do- kumentu). Jednostka rem jest w zasadzie tak(cid:233) sam(cid:233) jednostk(cid:233) wzgl(cid:253)dn(cid:233) jak em, z tym (cid:348)e — niezale(cid:348)nie od swojego po(cid:293)o(cid:348)enia w arkuszu stylów — jej warto(cid:316)(cid:235) zawsze jest obliczana w odniesieniu do wielko(cid:316)ci tekstu elementu html , a nie kontenera. Wobec tego war- to(cid:316)(cid:235) 2rem zawsze jest równa dwukrotno(cid:316)ci wielko(cid:316)ci domy(cid:316)lnego tekstu, niezale(cid:348)nie od tego, gdzie si(cid:253) j(cid:233) wprowadzi. Jednostki rem s(cid:233) zdumiewaj(cid:233)co dobrze obs(cid:293)ugiwane — dzia(cid:293)aj(cid:233) w ka(cid:348)dej nowoczesnej przegl(cid:233)darce. Pro- blemy sprawiaj(cid:233) jedynie dobrze znani maruderzy, czyli przegl(cid:233)darki IE 8 i IE 7, które w ogóle nie rozumiej(cid:233) tych jednostek. Cho(cid:235) wype(cid:293)nienie tej luki przy u(cid:348)yciu Java- Scriptu jest mo(cid:348)liwe (http://tinyurl.com/rem-polyfill), wi(cid:253)kszo(cid:316)(cid:235) rozs(cid:233)dnych webdeweloperów woli unika(cid:235) dodawania kolejnych skryptów, (cid:348)eby tylko mo(cid:348)na by(cid:293)o korzysta(cid:235) z nowych jednostek, i decyduje si(cid:253) dalej u(cid:348)ywa(cid:235) nieco niewygodnych jednostek em. Oczywi(cid:321)cie, typografia nie ko(cid:300)czy si(cid:258) na definiowaniu wielko(cid:321)ci tekstu. Aby utworzy(cid:240) tekst, który pozostanie czytelny na ró(cid:353)norakich wy(cid:321)wietlaczach, mu- sisz te(cid:353) wzi(cid:238)(cid:240) pod uwag(cid:258) szeroko(cid:321)(cid:240) wiersza, marginesy, interlini(cid:258), a nawet roz- mieszczenie tekstu w kolumnach (co przedstawiono w punkcie „Wielokolum- nowy tekst” rozdzia(cid:298)u 6.). (cid:352)adnym z tych elementów nie mo(cid:353)na si(cid:258) zaj(cid:238)(cid:240), je(cid:321)li u(cid:353)ywa si(cid:258) zwyczajnych, p(cid:298)ynnych layoutów i okre(cid:321)la wielko(cid:321)ci warto(cid:321)ciami pro- porcjonalnymi. Mo(cid:353)esz jednak utworzy(cid:240) bardziej elastyczne arkusze stylów, pre- cyzuj(cid:238)ce takie szczegó(cid:298)y za pomoc(cid:238) zapyta(cid:300) medialnych. Wkrótce dowiesz si(cid:258) wi(cid:258)cej na ten temat, ale najpierw trzeba rozpatrzy(cid:240) kwesti(cid:258) automatycznego skalowania stron na telefonach komórkowych. R O Z D Z I A (cid:224) 7 . (cid:105) P R O J E K T O W A N I E E L A S T Y C Z N Y C H W I T R Y N W C S S 3 235 Kup książkęPoleć książkę Podstawy projektowania elastycznego Widok strony: obs(cid:298)uga layoutu na smartfonach Strona z dwiema kolumnami, któr(cid:238) omówili(cid:321)my wcze(cid:321)niej, teoretycznie mog(cid:298)a- by si(cid:258) zmie(cid:321)ci(cid:240) w oknie o dowolnym rozmiarze. W praktyce jednak trzeba wzi(cid:238)(cid:240) pod uwag(cid:258) inne utrudnienie zwi(cid:238)zane z korzystaniem z ma(cid:298)ych urz(cid:238)dze(cid:300) mobil- nych: rozmiar widoku strony (ang. viewport). Apple wprowadzi(cid:298) kiedy(cid:321) widoki strony po to, (cid:353)eby iPhone’y sensownie wy(cid:321)wie- tla(cid:298)y zwyczajne strony internetowe, które nie by(cid:298)y oparte na technikach ela- stycznego projektowania. Zamiast wy(cid:321)wietla(cid:240) niewielki fragment du(cid:353)ej strony internetowej, przegl(cid:238)darki mobilne, takie jak Safari, pokazuj(cid:238) ca(cid:298)(cid:238) stron(cid:258) w po- mniejszeniu, by uchwyci(cid:240) na ekranie wi(cid:258)cej tre(cid:321)ci. Taki oddalony obszar wy(cid:321)wie- tlania okre(cid:321)la si(cid:258) w(cid:298)a(cid:321)nie mianem widoku strony. Technika ta opiera si(cid:258) na kompromisie. Z jednej strony
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

HTML5. Nieoficjalny podręcznik. Wydanie II
Autor:

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


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