Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00378 005025 15029260 na godz. na dobę w sumie
HTML5. Podręcznik programisty - książka
HTML5. Podręcznik programisty - książka
Autor: , Liczba stron: 384
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-4886-3 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> html i xhtml - programowanie
Porównaj ceny (książka, ebook, audiobook).

Najlepsze przepisy na udane aplikacje internetowe!

HTML5 pozwala twórcom stron internetowych tworzyć oparte o standardy sieciowe, działające w przeglądarkach, niezwykle bogate aplikacje o dużych możliwościach. Aplikacje te są zaopatrzone w najróżniejsze funkcjonalności - od przeciągania i upuszczania do natywnego dźwięku i wideo - i wszystko to oferują bez żadnych dodatkowych wtyczek. Krótko mówiąc, każdy twórca stron internetowych musi opanować HTML5, a im szybciej to zrobi, tym większą będzie miał przewagę. 'HTML5. Podręcznik programisty' zawiera rady ekspertów i sprawdzony kod, potrzebne do tego, by od razu rozpocząć budowę wysokiej jakości aplikacji HTML5.

Autorzy tej książki, Chuck Hudson i Tom Leadbetter, prezentują przetestowane, modularne przepisy na poziomach dla początkujących, średnio zaawansowanych i zaawansowanych. Dowiesz się konkretnie, jak zapewniać nowoczesne zachowania aplikacji poprzez integrację nowych i ulepszonych elementów HTML5 z CSS3, multimediami i API języka JavaScript. Zgodnie z obecnymi standardami książka skupia się w pierwszym rzędzie na funkcjach HTML5 obsługiwanych w przeglądarkach oraz określa dla nich poziom wsparcia.

Tematyka książki obejmuje:

Poznaj możliwości języka HTML5 w praktyce!

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

Darmowy fragment publikacji:

Tytuł oryginału: HTML5 Developer s Cookbook Tłumaczenie: Grzegorz Balcerek ISBN: 978-83-246-4886-3 Authorized translation from the English language edition, entitled: HTML5 DEVELOPER’S COOKBOOK; ISBN 0321769384; by Chuck Hudson and Tom Leadbetter; published by Pearson Education, Inc, publishing as Addison Wesley. Copyright © 2012 Pearson Education, Inc. All rights reserved. No part of this book may by 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 Pearson Education, Inc. Polish language edition published by HELION S.A. Copyright © 2013. 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/html5p 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/html5p.zip Printed in Poland. • Kup książkę • Poleć książkę • Oceń książkę • Księgarnia internetowa • Lubię to! » Nasza społeczność Spis treści Wstöp ........................................................................................................13 Podziökowania ...........................................................................................21 O autorach .................................................................................................23 Rozdziaä 1 Nowe elementy strukturalne w HTML5 ........................................................25 PRZEPIS DLA POCZðTKUJðCYCH Budowa startowego dokumentu HTML5 ..................................................................... 26 doctype ............................................................................................................. 26 Kodowanie znaków ............................................................................................. 26 JavaScript i äñcza CSS ........................................................................................ 27 Styl uĔywanej skäadni .......................................................................................... 27 Skñd pochodzñ wszystkie nowe elementy? ................................................................ 28 PRZEPIS DLA POCZðTKUJðCYCH Wykorzystanie elementu header do utworzenia nagäówka witryny ................................. 29 PRZEPIS DLA POCZðTKUJðCYCH Wykorzystanie elementu hgroup do grupowania nagäówków ......................................... 31 PRZEPIS DLA POCZðTKUJðCYCH Tworzenie nawigacji przy uĔyciu elementu nav ............................................................ 31 PRZEPIS DLA POCZðTKUJðCYCH UĔycie elementu article ............................................................................................ 34 PRZEPIS DLA ćREDNIO ZAAWANSOWANYCH Grupowanie treĈci przy uĔyciu elementu section ......................................................... 35 Którego elementu powinieneĈ uĔywaè: article czy section? ..................................... 36 PRZEPIS DLA POCZðTKUJðCYCH Tworzenie paska bocznego za pomocñ elementu aside ............................................... 37 PRZEPIS DLA POCZðTKUJðCYCH UĔycie elementu footer ............................................................................................. 39 PRZEPIS DLA ćREDNIO ZAAWANSOWANYCH Wykorzystanie narzödzia HTML5 Outliner do utworzenia prawidäowej struktury dokumentu .............................................................................................. 41 PRZEPIS DLA ZAAWANSOWANYCH Wykorzystanie wszystkich nowych elementów do utworzenia strony z wiadomoĈciami .... 43 6 Spis treĈci PRZEPIS DLA ZAAWANSOWANYCH Wykorzystanie wszystkich nowych elementów do utworzenia strony z wynikami wyszukiwania ........................................................................................ 46 Podsumowanie ................................................................................................... 50 Rozdziaä 2 Grupowanie, poziom tekstu i zmiany semantyczne .......................................51 PRZEPIS DLA POCZðTKUJðCYCH Oznaczanie rysunków i ich podpisów elementami figure i figcaption ............................. 51 PRZEPIS DLA POCZðTKUJðCYCH Oznaczanie daty i czasu za pomocñ elementu time ..................................................... 53 PRZEPIS DLA POCZðTKUJðCYCH Tworzenie widĔetu przeäñcznika za pomocñ elementu details ....................................... 54 PRZEPIS DLA POCZðTKUJðCYCH UĔycie elementu address do danych kontaktowych ..................................................... 56 PRZEPIS DLA POCZðTKUJðCYCH PodĈwietlanie tekstu za pomocñ elementu mark ........................................................ 57 PRZEPIS DLA POCZðTKUJðCYCH UĔycie elementu s do pokazania niepoprawnej lub nieistotnej treĈci ............................ 58 Zmiany dotyczñce istniejñcych elementów .................................................................. 58 Element cite ....................................................................................................... 58 Element ol ......................................................................................................... 59 Element dl ......................................................................................................... 61 Element small .................................................................................................... 63 Elementy b oraz strong ....................................................................................... 63 Elementy i oraz em ............................................................................................. 64 Element abbr ..................................................................................................... 64 Element hr ......................................................................................................... 64 Elementy, których juĔ nie ma ............................................................................... 64 PRZEPIS DLA POCZðTKUJðCYCH Opakowywanie elementów äñczami ............................................................................ 65 PRZEPIS DLA ćREDNIO ZAAWANSOWANYCH Dodawanie informacji semantycznych za pomocñ mikrodanych .................................... 66 PRZEPIS DLA ćREDNIO ZAAWANSOWANYCH Stosowanie WAI-ARIA z HTML5 .................................................................................. 67 PRZEPIS DLA ZAAWANSOWANYCH Oznaczanie komentarzami strony z artykuäem ............................................................. 69 Podsumowanie ........................................................................................................ 71 Rozdziaä 3 Obsäuga przeglñdarek w HTML5 ..................................................................73 PRZEPIS DLA POCZðTKUJðCYCH Obsäuga Internet Explorera ....................................................................................... 73 UĔycie JavaScriptu do uzyskania kompatybilnoĈci z HTML5 .................................... 73 Uzyskiwanie kompatybilnoĈci CSS-a ..................................................................... 74 Szablony (boilerplates) ............................................................................................. 75 PRZEPIS DLA POCZðTKUJðCYCH Testowanie dziaäania nowych moĔliwoĈci HTML5 ........................................................ 75 PRZEPIS DLA ćREDNIO ZAAWANSOWANYCH Wykorzystanie jQuery do zastñpienia kalendarza ......................................................... 77 Spis treĈci 7 PRZEPIS DLA ćREDNIO ZAAWANSOWANYCH Wykorzystanie biblioteki Modernizr do wykrywania moĔliwoĈci ...................................... 79 Polyfilling (wielowypeänianie) ..................................................................................... 82 UĔyteczne strony sprawdzajñce HTML5 ...................................................................... 84 Podsumowanie ........................................................................................................ 84 Rozdziaä 4 Nowe techniki dotyczñce ukäadu i stylizacji w CSS3 ....................................85 PRZEPIS DLA ćREDNIO ZAAWANSOWANYCH Tworzenie dostosowujñcego siö projektu za pomocñ CSS3 Media Queries ................... 85 Kiedy uĔywaè zapytaþ o media ............................................................................. 90 Obsäuga iPhone’a i urzñdzeþ z systemem Android ................................................. 91 PRZEPIS DLA POCZðTKUJðCYCH Korzystanie z wäasnych czcionek przy uĔyciu @font-face .............................................. 92 Formaty plików i dziaäanie czcionek w róĔnych przeglñdarkach ................................ 93 Usäugi zwiñzane z krojami pisma .......................................................................... 94 PRZEPIS DLA ćREDNIO ZAAWANSOWANYCH Tworzenie przycisków za pomocñ gradientów CSS i wielu teä ........................................ 95 PRZEPIS DLA ćREDNIO ZAAWANSOWANYCH Upiökszanie witryny za pomocñ transformacji i przejĈè ................................................ 98 PRZEPIS DLA ZAAWANSOWANYCH Tworzenie animacji za pomocñ CSS-a ...................................................................... 103 Podsumowanie ...................................................................................................... 106 Rozdziaä 5 Formularze internetowe HTML5 ................................................................107 Walidacja .............................................................................................................. 107 Typy wejĈciowe HTML 4 .......................................................................................... 107 PRZEPIS DLA POCZðTKUJðCYCH Tworzenie formularza do danych kontaktowych ......................................................... 109 input type= email ........................................................................................... 109 input type= tel ................................................................................................ 110 input type= url ................................................................................................ 111 PRZEPIS DLA POCZðTKUJðCYCH Tworzenie formularza wyszukiwania przy uĔyciu input type= search .......................... 112 PRZEPIS DLA POCZðTKUJðCYCH Tworzenie kontrolek kalendarza i czasu ................................................................... 113 input type= datetime ...................................................................................... 113 input type= datetime-local ............................................................................... 113 input type= date ............................................................................................. 114 input type= time ............................................................................................. 114 input type= month .......................................................................................... 115 input type= week ............................................................................................ 115 Nakäadanie ograniczeþ na daty i godziny ............................................................. 115 PRZEPIS DLA POCZðTKUJðCYCH Tworzenie pola do wprowadzania liczby .................................................................... 116 PRZEPIS DLA POCZðTKUJðCYCH Tworzenie suwaka (bez potrzeby uĔycia JavaScriptu) ................................................. 117 PRZEPIS DLA POCZðTKUJðCYCH Tworzenie próbnika kolorów .................................................................................... 117 8 Spis treĈci PRZEPIS DLA POCZðTKUJðCYCH WyĈwietlanie wyników za pomocñ elementu output ................................................... 118 PRZEPIS DLA POCZðTKUJðCYCH UĔycie tekstu zastöpczego formularza ...................................................................... 119 PRZEPIS DLA POCZðTKUJðCYCH Autouzupeänianie za pomocñ atrybutu list i elementu datalist .................................... 120 PRZEPIS DLA POCZðTKUJðCYCH ćledzenie postöpu wykonania zadania za pomocñ elementu progress ........................ 121 PRZEPIS DLA POCZðTKUJðCYCH Wskazywanie wyniku pomiaru za pomocñ elementu meter ......................................... 122 PRZEPIS DLA POCZðTKUJðCYCH Przechodzenie do elementu form po zaäadowaniu strony ........................................... 123 PRZEPIS DLA POCZðTKUJðCYCH Zezwalanie na wiele wartoĈci .................................................................................. 124 PRZEPIS DLA POCZðTKUJðCYCH Prosta walidacja przy uĔyciu atrybutu required .......................................................... 125 PRZEPIS DLA ćREDNIO ZAAWANSOWANYCH Pisanie wäasnych reguä walidacji .............................................................................. 126 PRZEPIS DLA POCZðTKUJðCYCH Nakäadanie ograniczeþ na wprowadzane dane .......................................................... 126 step ................................................................................................................ 126 min i max ......................................................................................................... 127 formnovalidate i novalidate ............................................................................... 127 PRZEPIS DLA ćREDNIO ZAAWANSOWANYCH Dostosowywanie formularza i nadawanie mu stylu .................................................... 128 Komunikaty bäödów ................................................................................................ 129 PRZEPIS DLA ZAAWANSOWANYCH Wszystko razem — tworzenie formularza rejestracyjnego .......................................... 130 Podsumowanie ...................................................................................................... 132 Rozdziaä 6 Rysowanie na päótnie ...............................................................................133 Element canvas — informacje ogólne ...................................................................... 133 Poczñtki ........................................................................................................... 134 Wspóärzödne x i y ............................................................................................. 135 PRZEPIS DLA POCZðTKUJðCYCH NaäoĔenie siatki na päótno ...................................................................................... 135 Narzödzia päótna .................................................................................................... 139 PRZEPIS DLA POCZðTKUJðCYCH Tworzenie prostych ksztaätów i linii .......................................................................... 139 Rysowanie i formatowanie prostokñta lub kwadratu ............................................. 139 Stosowanie gradientów w ksztaätach .................................................................. 141 Rysowanie linii i ĈcieĔek .................................................................................... 142 PRZEPIS DLA ćREDNIO ZAAWANSOWANYCH Rysowanie wielokñtów za pomocñ ĈcieĔki ................................................................ 144 PRZEPIS DLA ćREDNIO ZAAWANSOWANYCH Rysowanie äuków i okrögów .................................................................................... 146 Rysowanie krzywych .......................................................................................... 147 Spis treĈci 9 PRZEPIS DLA POCZðTKUJðCYCH Dodawanie tekstu .................................................................................................. 147 PRZEPIS DLA POCZðTKUJðCYCH Wstawianie obrazka ............................................................................................... 148 PRZEPIS DLA ćREDNIO ZAAWANSOWANYCH Przycinanie obrazka ............................................................................................... 149 PRZEPIS DLA ćREDNIO ZAAWANSOWANYCH Animacja mapy sprite’ów ........................................................................................ 150 Przeksztaäcenia päótna ........................................................................................... 153 PRZEPIS DLA ZAAWANSOWANYCH Animowanie obrazka .............................................................................................. 154 PRZEPIS DLA ZAAWANSOWANYCH Animacja pionowego wykresu säupkowego ................................................................ 157 Podsumowanie ...................................................................................................... 162 Rozdziaä 7 Osadzanie wideo w HTML5 .......................................................................163 PRZEPIS DLA POCZðTKUJðCYCH Doäñczanie filmów za pomocñ elementu video .......................................................... 163 Obsäuga w przeglñdarkach i urzñdzeniach ........................................................... 164 HTML5 i kodeki wideo ....................................................................................... 164 Dlaczego kodeki powinny Ciö interesowaè? ......................................................... 165 PRZEPIS DLA ćREDNIO ZAAWANSOWANYCH Wäñczanie wideo we wszystkich przeglñdarkach ........................................................ 166 Dodawanie zastöpczej treĈci dla starszych przeglñdarek ...................................... 166 Nowe atrybuty wideo ......................................................................................... 169 PRZEPIS DLA ćREDNIO ZAAWANSOWANYCH Tworzenie wideo z napisami .................................................................................... 172 Inne moĔliwoĈci formatowania napisów .............................................................. 174 API mediów ........................................................................................................... 175 PRZEPIS DLA ZAAWANSOWANYCH Tworzenie niestandardowych kontrolek .................................................................... 176 Podsumowanie ...................................................................................................... 183 Rozdziaä 8 Osadzanie dĒwiöku w HTML5 ....................................................................185 PRZEPIS DLA POCZðTKUJðCYCH Umieszczanie dĒwiöku za pomocñ elementu audio ................................................... 185 PRZEPIS DLA ćREDNIO ZAAWANSOWANYCH Umieszczanie dĒwiöku we wszystkich przeglñdarkach ............................................... 186 Dodawanie zastöpczej treĈci dla starszych przeglñdarek ...................................... 186 Nowe atrybuty elementu audio ................................................................................ 187 API mediów ........................................................................................................... 189 PRZEPIS DLA ćREDNIO ZAAWANSOWANYCH Tworzenie miksera ................................................................................................. 190 PRZEPIS DLA ZAAWANSOWANYCH Dodawanie internetowego radia .............................................................................. 194 Podsumowanie ...................................................................................................... 201 10 Spis treĈci Rozdziaä 9 Dokonywanie zmian w historii przeglñdarki ................................................203 Podstawy historii ................................................................................................... 203 KompatybilnoĈè przeglñdarek ............................................................................ 204 PRZEPIS DLA POCZðTKUJðCYCH Dodawanie do historii wpisów za pomocñ pushState ................................................ 204 PRZEPIS DLA POCZðTKUJðCYCH Tworzenie przeglñdarki obrazków ............................................................................. 207 PRZEPIS DLA ćREDNIO ZAAWANSOWANYCH Pobieranie stanu w przeglñdarce obrazków .............................................................. 209 PRZEPIS DLA POCZðTKUJðCYCH Zmiana historii za pomocñ replaceState .................................................................. 211 PRZEPIS DLA ćREDNIO ZAAWANSOWANYCH Zmiana historii strony ............................................................................................ 213 PRZEPIS DLA ZAAWANSOWANYCH UĔywanie zaawansowanych obiektów danych stanu do przenoszenia informacji pomiödzy stronami .............................................................................................. 215 PRZEPIS DLA ćREDNIO ZAAWANSOWANYCH Testowanie bezpieczeþstwa historii ......................................................................... 218 Pomocne biblioteki ................................................................................................ 220 Podsumowanie ...................................................................................................... 221 Rozdziaä 10 Wykorzystanie Geolocation API do uzyskania informacji o poäoĔeniu geograficznym ........................................................................223 Omówienie Geolocation API .................................................................................... 223 KompatybilnoĈè przeglñdarek ............................................................................ 224 Gdzie na Ĉwiecie siö znajdujesz — getCurrentPosition ......................................... 224 PRZEPIS DLA POCZðTKUJðCYCH Ustalanie poäoĔenia geograficznego za pomocñ zwykäego wywoäania getCurrentPosition ............................................................................................... 225 PoufnoĈè informacji o poäoĔeniu ........................................................................ 228 PRZEPIS DLA ćREDNIO ZAAWANSOWANYCH WyĈwietlanie na mapie informacji o lokalizacji przy uĔyciu getCurrentPosition ............. 228 PRZEPIS DLA ćREDNIO ZAAWANSOWANYCH OkreĈlanie odlegäoĈci za pomocñ opcji lokalizacji ..................................................... 233 PRZEPIS DLA ZAAWANSOWANYCH PodñĔanie za poruszajñcym siö obiektem dziöki watchPosition .................................. 239 Podsumowanie ...................................................................................................... 245 Rozdziaä 11 Przechowywanie danych po stronie klienta ................................................247 Przechowywanie danych po stronie klienta — przeglñd .............................................. 247 Bezpieczeþstwo danych .................................................................................... 248 Klucze i wartoĈci — sessionStorage i localStorage ............................................. 249 PRZEPIS DLA POCZðTKUJðCYCH Pobieranie i ustawianie danych w pamiöci sesji ........................................................ 250 Narzödzia dla programistów Chrome säuĔñce do oglñdania zawartoĈci pamiöci ...... 252 PRZEPIS DLA POCZðTKUJðCYCH Nadawanie stylów z pamiöci sesji ........................................................................... 253 Spis treĈci 11 PRZEPIS DLA ćREDNIO ZAAWANSOWANYCH Zapisywanie formularzy za pomocñ lokalnego przechowywania danych ....................... 257 PRZEPIS DLA ZAAWANSOWANYCH Przechwytywanie zdarzeþ w pamiöci lokalnej ............................................................ 261 Web SQL Database API .......................................................................................... 267 PRZEPIS DLA ZAAWANSOWANYCH UĔycie sieciowej bazy danych do stworzenia listy zakupów ......................................... 270 Podsumowanie ...................................................................................................... 277 Rozdziaä 12 Komunikacja i wñtki .................................................................................279 Przeglñd WebSocket API ......................................................................................... 279 PRZEPIS DLA POCZðTKUJðCYCH Rozmawianie przez gniazda sieciowe ....................................................................... 280 Realizacja wielowñtkowoĈci za pomocñ wñtków roboczych ......................................... 283 PRZEPIS DLA POCZðTKUJðCYCH Tworzenie wñtku roboczego .................................................................................... 285 PRZEPIS DLA ćREDNIO ZAAWANSOWANYCH Dodawanie dwukierunkowej komunikacji .................................................................. 288 PRZEPIS DLA ZAAWANSOWANYCH Wykorzystywanie wspóädzielonych wñtków roboczych ................................................. 291 Podsumowanie ...................................................................................................... 296 Rozdziaä 13 Zachowanie przeglñdarek w HTML5 ..........................................................297 Drag and Drop API ................................................................................................. 297 PRZEPIS DLA POCZðTKUJðCYCH Przeciñganie i upuszczanie pomiödzy elementami div ............................................... 299 PRZEPIS DLA ZAAWANSOWANYCH Wykorzystanie zdarzeþ i obiektu dataTransfer .......................................................... 302 Pamiöè podröczna aplikacji i jej API ......................................................................... 309 Pamiöè podröczna przeglñdarki a bezpieczeþstwo ............................................... 310 Odwoäania do pliku manifestu ............................................................................ 310 PRZEPIS DLA POCZðTKUJðCYCH Tworzenie pliku manifestu ...................................................................................... 310 CACHE ............................................................................................................. 311 FALLBACK ........................................................................................................ 311 NETWORK ........................................................................................................ 312 Aktualizacja pamiöci podröcznej poprzez manifest ............................................... 312 PRZEPIS DLA POCZðTKUJðCYCH Korzystanie ze stron internetowych offline ................................................................ 312 API pamiöci podröcznej aplikacji .............................................................................. 315 Notification API ...................................................................................................... 316 Uprawnienia dotyczñce powiadomieþ ................................................................. 317 KompatybilnoĈè przeglñdarek ............................................................................ 318 PRZEPIS DLA POCZðTKUJðCYCH WyĈwietlanie prostego powiadomienia ..................................................................... 318 PRZEPIS DLA ZAAWANSOWANYCH Tworzenie strony powiadomieþ o tweetach ............................................................... 322 Podsumowanie ...................................................................................................... 329 12 Spis treĈci Rozdziaä 14 Praca z plikami lokalnymi .........................................................................331 Przeglñd File API .................................................................................................... 331 Bezpieczeþstwo File API .................................................................................... 331 PRZEPIS DLA POCZðTKUJðCYCH Odczyt atrybutów pliku ............................................................................................ 332 PRZEPIS DLA POCZðTKUJðCYCH Przetwarzanie wielu plików za pomocñ przeciñgania i upuszczania ............................. 334 Interfejs FileReader ................................................................................................ 337 PRZEPIS DLA ćREDNIO ZAAWANSOWANYCH Podglñd obrazków przy uĔyciu readAsDataURL .......................................................... 338 PRZEPIS DLA ZAAWANSOWANYCH Parsowanie pliku CSV za pomocñ readAsText ........................................................... 342 Rozszerzone specyfikacje File API ............................................................................ 349 PRZEPIS DLA ZAAWANSOWANYCH Tworzenie lokalnego pliku ....................................................................................... 350 Podsumowanie ...................................................................................................... 355 Rozdziaä 15 Integracja z urzñdzeniami przenoĈnymi ......................................................357 Krótka historia API urzñdzeþ ................................................................................... 357 Contacts API ......................................................................................................... 359 PRZEPIS DLA POCZðTKUJðCYCH Pobieranie wszystkich kontaktów i numerów telefonu ............................................... 360 Messaging API ....................................................................................................... 363 Network Information API ......................................................................................... 364 HTML Media Capture ............................................................................................. 365 PRZEPIS DLA ćREDNIO ZAAWANSOWANYCH Przechwytywanie obrazu za pomocñ elementu input typu file ..................................... 365 DeviceOrientation Event Specification ...................................................................... 368 PRZEPIS DLA ćREDNIO ZAAWANSOWANYCH Tworzenie poziomicy .............................................................................................. 369 Podsumowanie ...................................................................................................... 373 Przepisy ...................................................................................................375 Skorowidz ................................................................................................379 4 Nowe techniki dotyczące układu i stylizacji w CSS3 CSS poziomu 3 (CSS3) jest najnowszym wydaniem specyfikacji CSS. Zostało ono oparte na poprzednich wersjach, zawiera jednak nowe możliwości, które możesz zaimplementować w najnowszych przeglądarkach, by poprawić wygląd, łatwość użycia, dostępność i wydajność swoich stron internetowych. CSS to nie HTML5 — wiemy o tym i Ty także powinieneś to wiedzieć, ale dołączyliśmy ten rozdział, ponieważ często współdziałają one ręka w rękę, a my chcemy pokazać Ci tylko niektóre z możliwości dostępnych w CSS3, abyś mógł nadać Twoim witrynom HTML5 fantastyczny wygląd. W tym rozdziale powiemy sobie o witrynach reagujących na zmiany, projektowanych z użyciem Media Queries, zewnętrznych czcionek, gradientów, przejść i transformacji oraz, na końcu, animacji. Nie opisujemy wszystkich nowych możliwości CSS3; odkrywamy jedynie rąbek tego, co jest dostępne. PRZEPIS DLA ćREDNIO ZAAWANSOWANYCH Tworzenie dostosowujñcego siö projektu za pomocñ CSS3 Media Queries Coraz częściej z internetu korzysta się przy użyciu urządzeń mobilnych, a niektórzy szacują, że taki sposób dostępu prześcignie przeglądanie z komputerów stacjonarnych w ciągu pięciu lat. CSS3 Media Queries1 daje Ci możliwość dostosowania strony do określonych rozdzielczości, a nawet orientacji ekranu, tak że możesz obsługiwać smartfony, takie jak iPhone, albo telefony z systemem Android, jak również nowe tablety, takie jak iPad, i to wszystko za pomocą CSS-a. Tabela 4.1 pokazuje, które wersje przeglądarek obsługują zapytania o media w CSS3. W przeszłości zapewne używałeś JavaScriptu do wykrywania telefonu komórkowego i dodawałeś osobny arkusz stylów albo przekierowywałeś użytkownika na specjalną witrynę dla urządzeń przenośnych. Mogłeś też korzystać z JavaScriptu do wykrywania, kiedy rozmiary okna przeglądarki zostały zmienione, i wtedy modyfikować style, by dostosować układ do okna. Jednak zawsze mieliśmy do dyspozycji podstawy zapytań o media, ponieważ zawsze mieliśmy możliwość ograniczenia stylów do ekranu lub wydruku: 1 Zapytania o media — przyp. tłum. 86 Rozdziaä 4. Nowe techniki dotyczñce ukäadu i stylizacji w CSS3 Tabela 4.1. Obsäuga zapytaþ o media z CSS3 w przeglñdarkach i urzñdzeniach Android Chrome Firefox Internet Explorer iOS Safari Opera Safari 2.3+ 13.0+ 4.0+ 9.0+ 4.0+ 11.0+ 5.0+ link rel= stylesheet href= screen.css media= screen / link rel= stylesheet href= print.css media= print / Teraz jednak możesz być bardziej wyrafinowany dzięki wykorzystaniu zapytań o media w CSS3 (listing 4.1). Listing 4.1. Prosty przykäad zapytaþ o media link rel= stylesheet media= screen and (max-device-width: 480px) href= smartphone.css / link rel= stylesheet media= screen and (min-width: 480px) href= screen.css / Listing 4.1 odpytuje urządzenie, czy jego rozdzielczość pozioma to 480 pikseli albo mniej. Jeśli tak jest, możesz przypuszczać, że jest to smartfon, i ładujesz arkusz stylów smartphone.css. Następnie sprawdzasz, czy rozdzielczość to przynajmniej 480 pikseli; jeśli tak jest, możesz użyć innego arkusza stylów. Potencjalnie możesz mieć kilka różnych zapytań o media, jeśli chcesz obsługiwać rozmaite rodzaje urządzeń, rozdzielczości i orientacji ekranu. Możesz mieć arkusze stylów dla smartfonów, smartfonów z orientacją poziomą, ekranów androidowych, iPada, iPada z pionową orientacją, przeglądarek z rozdzielczością poziomą mniejszą od 800 pikseli albo przeglądarek z rozdzielczościami szerokoekranowymi. Tak naprawdę możesz być tak dokładny, jak chcesz. Będziesz potrzebował dobrego sposobu organizacji wszystkich oddzielnych zapytań. Pamiętaj, że będziesz także miał wszystkie swoje główne arkusze stylów. Używanie podejścia z listingu 4.1 oznaczałoby dużą liczbę żądań HTTP w znaczniku head. Zamiast tego możesz umieścić zapytania o media wewnątrz pliku CSS przy użyciu @media, jak pokazano na listingu 4.2. Listing 4.2. Zapytania o media wewnñtrz pliku CSS body {background: black; color: #fff; font: normal 62.5 /1.5 tahoma, verdana, sans-serif;} h1 {font-size: 2em;} p {font-size: 1.4em;} /* style dla smartfonów i bardzo maáych rozdzielczoĞci ekranu */ @media only screen and (min-width: 320px) and (max-width: 400px) { body {background: blue;} } /* style dla rozdzielczoĞci ekranu wiĊkszej od smartfonów, ale mniejszej lub równej 1024px */ @media only screen and (min-width: 401px) and (max-width: 1024px) Tworzenie dostosowujñcego siö projektu za pomocñ CSS3 Media Queries 87 { body {background: red;} } /* style dla ekranów o bardzo duĪej rozdzielczoĞci poziomej */ @media only screen and (min-width: 2000px) { body {background: green;} } W kodzie z listingu 4.2 zmienialiśmy kolor tła w zależności od rozdzielczości ekranu. Wszystkie zapytania o media są częścią tego samego dokumentu CSS, więc ważne jest, by był on odpowiednio zorganizowany — prawdopodobnie będziesz miał setki wierszy kodu Twojego projektu i dodatkowo CSS z zapytaniami o media. W zależności od konfiguracji Twojej witryny prostszym sposobem może być edytowanie zapytań o media, na przykład poprawienie min-width: 2000px na min-width: 2500px, wewnątrz pliku CSS zamiast na wszystkich stronach HTML. Używając składni and, możesz łączyć różne zapytania. Możesz używać kilku właściwości, takich jak width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, resolution, scan i grid, wraz z rozpoznawanymi rodzajami mediów: all, braille, embossed, handheld, print, projection, screen i speech. Dzięki połączeniu ich ze sobą będziesz jednocześnie obsługiwać kilka różnych typów urządzeń i rozmiarów. Warto zauważyć, że max-device-width jest rozmiarem ekranu urządzenia (takiego jak iPhone), podczas gdy max-width jest tylko szerokością wyświetlającego obszaru (takiego jak okno przeglądarki); spójrz na różnice w poniższym kodzie: /* urządzenia mniejsze od 480px; urządzenia przenoĞne, iPhone i zwykáe ekrany */ @media handheld and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 480px) { /* tutaj umieszczasz style */ } /* ukáad dla iPada w trybie poziomym */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) { /* tutaj umieszczasz style */ } Wskazówka Na kolejnych listingach uĔyliĈmy kilku róĔnych rodzajów selektorów CSS. Pierwszym z nich jest selektor atrybutu uĔyty w przypadku header[role=banner], a drugim — selektor pseudoklasy, nth-xx(), taki jak section:nth-of-type(1), wykorzystany w kilku przypadkach. Selektory atrybutu nie sñ nowoĈciñ w CSS3, ale w powiñzaniu z nowymi rolami ARIA dajñ wiöcej moĔliwoĈci uĔywania selektorów wraz z CSS-em. Istnieje wiele nowych selektorów CSS3, wäñcznie z nth-child() i nth-of-type(). Korzystanie z tych nowych selektorów oznacza, Ĕe moĔesz zrezygnowaè z uĔywania klas przy wielu elementach. Na przykäad przy uĔyciu nth-of-type() moĔesz wybraè co drugi wiersz tabeli albo element listy. Wiöcej informacji na ten temat uzyskasz, czytajñc http://quirksmode.org/css/nthchild.html. Wiele spoĈród tych nowych selektorów nie dziaäa w starszych wersjach Internet Explorera, wiöc polecamy Selectivizr (http://selectivizr.com/) — äatwe w uĔyciu narzödzie javascriptowe, które powoduje, Ĕe Internet Explorer rozumie nowe selektory CSS. Rysunek 4.1 pokazuje wynik wykorzystania przykładowego kodu HTML witryny z wiadomościami z rozdziału 1. Listing 4.3 zawiera skrócony HTML tej witryny. Kod CSS z listingu 4.4 jest przeznaczony dla domyślnego układu, jaki pokazano na rysunku 4.1. 88 Rozdziaä 4. Nowe techniki dotyczñce ukäadu i stylizacji w CSS3 Listing 4.3. Skrócony HTML witryny z wiadomoĈciami body header role= banner hgroup /hgroup /header nav /nav section !-- ten element section jest powtórzony jeszcze trzykrotnie -- article header /header img alt= thumbnail src= images/box-100x100.gif / p /p /article /section aside /aside /body Listing 4.4. CSS domyĈlnego ukäadu ekranu style * {margin: 0; padding: 0;} body {background: #fff; color: #000; font: normal 62.5 /1.5 Palatino Linotype , Book Antiqua , Palatino, ´serif; margin: 0 auto; width: 1260px} header, nav, section, article, footer, aside {display: block;} header[role=banner] {margin: 10px 0 20px; text-align: center;} header[role=banner] h1 {background: url(images/logo.gif) top center no-repeat;font-size: 5em; ´padding: 100px 0 0; text-transform: uppercase;} header[role=banner] h2 {font-style: italic;} header, nav {clear: both; width: 100 ;} nav {border-bottom: 1px dotted #ccc; padding-bottom: 20px; text-align: center;} nav li {display: inline;} nav li a {font-size: 1.4em; padding: .5em;} section {float: left; margin: 0 0 0 10px; padding: 10px; width: 345px;} section h1 {margin: 0 0 10px;} section article {margin: 0 0 10px;} section article header p {font-size: 1em; font-weight: bold; margin: 0 0 10px;} section article img {float: left; margin: 0 5px 5px 0;} section:nth-of-type(1) {clear: both; margin: 0 0 10px; min-height: 200px; padding: 1 1 1 30 ; position: ´relative; width: 69 ;} section:nth-of-type(1) article {margin: 0;} section:nth-of-type(1) article img {float: none; height: 200px; left: 0; position: absolute; top: 10px; ´width: 360px} section:nth-of-type(2) {margin-left: 0;} aside {float: right; margin-left: 10px; width: 130px;} aside img {border: 1px solid #ccc; display: block; margin: 0 auto 10px;} footer {clear: both;} h1 {font-size: 2em;} p {font-size: 1.4em;} /style Tworzenie dostosowujñcego siö projektu za pomocñ CSS3 Media Queries 89 Rysunek 4.1. Witryna z wiadomoĈciami z domyĈlnym CSS-em Rysunek 4.2 pokazuje układ na mniejszym ekranie z wykorzystaniem zapytań o media z listingu 4.5. Listing 4.5. CSS przeznaczony dla mniejszych ekranów /* style dla rozdzielczoĞci ekranu wiĊkszych od smartfonów, ale mniejszych lub równych 1280px */ @media only screen and (min-width: 481px) and (max-width: 1259px) { body {width: 800px;} section {margin: 0 0 0 10px;} section:nth-of-type(1), section {clear: none; float: left; padding: 10px; width: 375px;} section:nth-of-type(1) article img {float: left; height: auto; position: relative; width: auto;} section:nth-of-type(2) {margin-left: 10px;} section:nth-of-type(3) {clear: both; margin-left: 0;} aside {clear: both; float: left; width: 100 ;} aside img {float: left; margin: 0 10px 0 0;} } Wreszcie, listing 4.6 zawiera zapytania o media w CSS-ie przeznaczone dla smartfonów albo znacznie zmniejszonego okna przeglądarki (rysunek 4.3). Zasadniczo tych kilka dodatkowych wierszy CSS-a sprawia, że w porównaniu z ekranem o mniejszych rozmiarach niektóre elementy są ukrywane lub zmniejszane. 90 Rozdziaä 4. Nowe techniki dotyczñce ukäadu i stylizacji w CSS3 Rysunek 4.2. Witryna z wiadomoĈciami na mniejszym ekranie Listing 4.6. CSS przeznaczony dla smartfonów /* style dla smartfonów i bardzo maáych rozdzielczoĞci ekranu */ @media only screen and (max-width: 480px), only screen and (max-device-width: 480px) { body {width: 100 ;} header[role=banner] h1 {background-image: url(images/logo-small.gif); font-size: 3em; padding: 50px 0 0;} section:nth-of-type(1), section {margin: 0 0 10px; min-height: inherit; padding: 0 1 ; width: 98 ;} header[role=banner] h2, img, section article p, aside {display: none;} section h2 a {border-bottom: 1px dotted #999; display: block; text-decoration: none;} nav, section article:last-of-type h2 a {border: none;} } Kiedy uĔywaè zapytaþ o media Choć możesz tworzyć oddzielne style dla różnych urządzeń i rozmiarów ekranu, powstaje pytanie, czy zawsze powinieneś korzystać z zapytań o media. Bez wątpienia mogą być one użyteczne na komputerach stacjonarnych i laptopach, ale rynek urządzeń przenośnych od pewnego czasu się zmienia. Bardziej nowoczesne smartfony, takie jak iPhone i urządzenia z systemem Android, posiadają przeglądarki, które są prawie identyczne jak przeglądarki desktopowe i z większością rzeczy sobie radzą, a interaktywność urządzeń pozwala użytkownikowi stosunkowo łatwo wybierać i powiększać fragmenty witryn. Tworzenie dostosowujñcego siö projektu za pomocñ CSS3 Media Queries 91 Rysunek 4.3. Witryna z wiadomoĈciami na smartfonie Korzystanie z zapytań o media oznacza na ogół pokazywanie lub ukrywanie treści w zależności od rozmiaru ekranu. Wiele witryn, takich jak http://youtube.com/, http://facebook.com/, http://cnn.com/ oraz http://nfl.com/, wykrywa, czy użytkownik używa urządzenia przenośnego, i przekierowuje go na wersje przeznaczone dla takich urządzeń. Witryny te zawierają dużo treści z mnóstwem danych, zdjęć, filmów wideo, reklam, Flasha i innych rzeczy — gdyby korzystać tylko z zapytań o media, smartfon nadal musiałby pobierać wszystkie te dane, mimo że użytkownik nie mógłby ich zobaczyć. A zatem to, czy potrzebujesz jedynie nowych stylów, czy zupełnie oddzielnej witryny dla urządzeń przenośnych, zależy od treści witryny, ale jeśli masz zmienić jedynie układ i dodać kilka szczegółów, wtedy powinieneś prawdopodobnie użyć zapytań o media. Kilka znakomitych sposobów ich użycia znajdziesz na http://mediaqueri.es/. Obsäuga iPhone’a i urzñdzeþ z systemem Android Jeśli używałeś zapytań o media do obsługi iPhone’a albo urządzeń z systemem Android, być może zauważyłeś, że nie uwzględniają one zmian CSS-a dotyczących małych ekranów. Jest tak dlatego, że nowoczesne przeglądarki na smartfonach mają duże możliwości i domyślnie wyświetlają stronę internetową tak samo jak przeglądarki desktopowe. Następnie przeglądarka zmniejsza witrynę, tak aby mieściła się ona na małym ekranie, co może często skutkować wyświetlaniem drobnego tekstu i obrazków, przez co użytkownik musi powiększać fragmenty witryny, by ją czytać i przeglądać. Możesz zmusić przeglądarkę do używania szerokości urządzenia jako szerokości obszaru, w którym przeglądarka pokazuje obraz, znanego również jako viewport. W tagu head należy umieścić następujący kod: meta name= viewport content= width=device-width; initial-scale=1.0; / 92 Rozdziaä 4. Nowe techniki dotyczñce ukäadu i stylizacji w CSS3 PRZEPIS DLA POCZðTKUJðCYCH Korzystanie z wäasnych czcionek przy uĔyciu @font-face Chociaż deklaracja @font-face nie pojawiła się dopiero w CSS3, została w nim uatrakcyjniona. Projektanci i twórcy stron internetowych mają teraz do dyspozycji wiele możliwości wyboru i sposobów implementacji czcionek w swojej witrynie. Tabela 4.2 pokazuje, które wersje każdej z przeglądarek obsługują @font-face. Tabela 4.2. Obsäuga @font-face w przeglñdarkach i urzñdzeniach Android Chrome Firefox Internet Explorer iOS Safari Opera Safari 2.3+ 13.0+ 4.0+ 6.0+ 4.0+ 11.0+ 5.0+ Uwaga Deklaracja @font-face zostaäa wäñczona do specyfikacji CSS2 w 1998 roku, jednak byäa w zasadzie nieuĔywana z powodu säabej implementacji w przeglñdarkach, zamieszania z rodzajami plików czcionek i obaw dotyczñcych problemów prawnych i licencyjnych zwiñzanych z wykorzystywaniem czcionek. Internet Explorer w wersji 4 obsäugiwaä nawet dodatkowe, zewnötrzne czcionki, choè tylko w formacie EOT. Używając deklaracji @font-face, możesz osadzić na stronie swoje własne czcionki za pomocą jedynie kilku wierszy CSS-a. Na rysunku 4.4 pokazaliśmy czcionkę Anagram (dalej podamy informacje o tym, skąd zdobyć czcionki) w elemencie h1, chociaż może być ona użyta w dowolnym elemencie. Rysunek 4.4. Wäasna czcionka wyĈwietlona przy uĔyciu @font-face Listing 4.7 pokazuje kod potrzebny do uzyskania efektu z rysunku 4.4 i prezentuje przykład najprostszego użycia @font-face. Podajemy nazwę czcionki Anagram jako wartość właściwości font-family (można nazwać ją dowolnie), a później będziemy się ponownie do niej odwoływać; spójrz na wartości czcionek h1. W deklaracji @font-face właściwość src wykorzystuje ten sam katalog, w którym znajduje się strona HTML; jeśli chcesz, możesz umieścić czcionkę w innym katalogu. Listing 4.7. Deklaracja @font-face w swojej najprostszej postaci style @font-face { font-family: Anagram; Korzystanie z wäasnych czcionek przy uĔyciu @font-face 93 src: url( anagram.ttf ); } h1 { font-family: Anagram, Tahoma, Verdana, sans-serif; font-size: 9em; } /style header role= banner hgroup h1 Mnóstwo wiadomoĂci /h1 h2 Dostarczamy Ci najróĝniejszych wiadomoĂci! /h2 /hgroup /header Formaty plików i dziaäanie czcionek w róĔnych przeglñdarkach Na listingu 4.7 użyliśmy tylko czcionek typu .ttf (TrueType/OpenType). Jak można się spodziewać, między przeglądarkami występują różnice implementacyjne. Istnieje wiele różnych formatów plików czcionek: „ Embedded OpenType (.eot), „ OpenType PS (.otf), „ TrueType/OpenType (.ttf), „ SVG (.svg), „ WOFF (.woff). WOFF jest nowym sieciowym standardem krojów pisma. Internet Explorer w wersjach 8 i starszych wymaga czcionki .eot, ale Internet Explorer 9 obsługuje nowy format WOFF. A chociaż Safari obsługuje .ttf już od jakiegoś czasu, dopiero niedawno iPhone i iPad zaczęły wspierać ten format; wcześniej potrzebowały czcionki .svg. Powinieneś więc dostarczać tę samą czcionkę w różnych formatach. W tym celu musisz albo samodzielnie przekonwertować czcionki, albo użyć narzędzia, takiego jak Font Squirrel z http://www.fontsquirrel. com/. Narzędzie @font-face Generator pozwala Ci wgrać czcionki, a następnie przekształcić je na inny format. Generuje ono również odpowiedni CSS, który umożliwia działanie czcionki w różnych przeglądarkach, co pokazano na listingu 4.8. Listing 4.8. Dziaäajñcy w róĔnych przeglñdarkach @font-face @font-face { font-family: AnagramRegular ; src: url( type/anagram-webfont.eot ); src: url( type/anagram-webfont.eot?#iefix ) format( embedded-opentype ), url( type/anagram-webfont.woff ) format( woff ), url( type/anagram-webfont.ttf ) format( truetype ), url( type/anagram-webfont.svg#AnagramRegular ) format( svg ); font-weight: normal; font-style: normal; } Na listingu 4.8 odwołujemy się do czterech różnych formatów tej samej czcionki. Warto być może umieścić swoje czcionki w oddzielnych katalogach, tak jak robisz to z obrazkami. Kolejność czcionek 94 Rozdziaä 4. Nowe techniki dotyczñce ukäadu i stylizacji w CSS3 w powyższym kodzie jest związana z problemem dotyczącym działania Internet Explorera. Było już wiele wersji powyższego kodu, ale w miarę rozwoju przeglądarek zniknęło kilka problemów. Powyższy kod jest obecnie2 dostarczany przez Font Squirrel, gdy generujesz pakiet z czcionkami, lecz oczywiście w przyszłości może się on zmienić. Usäugi zwiñzane z krojami pisma Znalezienie odpowiedniego kroju pisma może być trudne, a znalezienie takiego, który może być użyty w sieci zgodnie z prawem, może być jeszcze trudniejsze. Font Squirrel pozwala Ci przekształcić czcionki na różne potrzebne formaty. By to zrobić, musisz zaznaczyć przycisk wyboru, przy którym jest napisane „Yes, the fonts I am uploading are legally eligible for web embedding”3. Jeśli go zaznaczysz, a nie jesteś w pełni przekonany, że tak jest, możesz mieć problemy prawne. Jeśli potrzebujesz darmowej czcionki, sugerujemy przejrzenie biblioteki krojów na witrynie Font Squirrel, ponieważ ta witryna oferuje nie tylko generator czcionek — jej głównym celem jest udostępnianie czcionek, które są darmowe i które można wykorzystywać w zastosowaniach komercyjnych. Ponadto witryna nie zawiera po prostu jakichkolwiek darmowych czcionek, ale zawiera czcionki wysokiej jakości. Font Squirrel nie jest jedynym miejscem, w którym można pobrać darmowe czcionki do użytku w sieci, ale gdy będziesz szukał ich gdzie indziej, bądź świadomy aspektów prawnych. Innym rozwiązaniem dotyczącym darmowych czcionek jest Google Font Directory (http://www.google. com/webfonts). Za pomocą dostępnego API bardzo łatwo skorzystać z oferowanych tam czcionek. Ponieważ czcionki znajdują się na serwerach Google, czasy ładowania są minimalne. Musisz tylko znaleźć czcionkę i wybrać „Quick-use”4. Narzędzie przygotowuje HTML i CSS, których potrzebujesz, a dodatkowo oferuje inne grubości czcionki, jeśli dana czcionka je posiada. Dostarczany przez to narzędzie kod HTML, który należy umieścić w znaczniku head, jest podobny do poniższego: link href= http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz rel= stylesheet type= text/css Google daje Ci również nazwę czcionki, którą możesz umieścić w swoim kodzie CSS: h1 {font-family: Yanone Kaffeesatz , arial, serif;} Tak, to naprawdę proste. Wskazówka W poprzednich przykäadach mogäeĈ zauwaĔyè, Ĕe po deklaracji dodatkowej czcionki podajemy listö niektórych „bezpiecznych” do stosowania w sieci czcionek, jak na przykäad rodzinö czcionek Yanone Kaffeesatz , arial, serif. Rezerwowñ czcionkö podajemy, na wypadek gdyby cokolwiek poszäo nie tak podczas pobierania dodatkowej czcionki. MoĔe siö pojawiè problem z serwerem i przeglñdarka moĔe byè niezdolna do pozyskania dodatkowej czcionki, którñ chcemy wykorzystaè, a poprzez zamieszczenie listy czcionek dajemy moĔliwoĈè awaryjnego uĔycia czcionki, o której wiemy, Ĕe jest dostöpna. Listy czcionek powinny byè dodawane zawsze wtedy, kiedy uĔywa siö CSS-owej wäaĈciwoĈci font-family. 2 W kwietniu 2012 roku — przyp. tłum. 3 Tak, czcionki, które wgrywam, mogą być zgodnie z prawem używane na witrynach internetowych — przyp. tłum. 4 Szybki wybór — przyp. tłum. Tworzenie przycisków za pomocñ gradientów CSS i wielu teä 95 Jeśli Font Squirrel albo Google Font Directory nie mogą udostępnić czcionki, której szukasz, wypróbuj inne serwisy. Ponieważ licencjonowanie stanowi problem już od lat, wielu spośród głównych producentów czcionek zaczęło albo tworzyć swoje własne struktury pozwalające Ci zgodnie z prawem i bezpiecznie używać ich czcionek, albo współpracować z inną organizacją, która pomaga dostarczać czcionki. Serwisy takie jak FontDeck i TypeKit umożliwiają Ci zarejestrowanie się i dokonanie wyboru spośród szeregu czcionek, z których wszystkie zostały poprawione w celu uzyskania lepszej czytelności na ekranie. FontDeck i TypeKit dostarczają czcionki na odrobinę różne sposoby, ale konfiguracja, wybór i aktywacja czcionek w obu serwisach nie powinny nikomu sprawiać problemów. Oba serwisy mają darmowe konta z pewnymi ograniczeniami i oba oferują różne pakiety cenowe. PRZEPIS DLA ćREDNIO ZAAWANSOWANYCH Tworzenie przycisków za pomocñ gradientów CSS i wielu teä Gradientów CSS3 możesz używać do tworzenia miłych i subtelnych albo jakichś zwariowanych, pokracznych gradientów. Nie musisz tworzyć obrazków, a gradienty są skalowalne, więc kiedy już się z nimi oswoisz, sprawiają dużo mniej kłopotu w porównaniu z tworzeniem, edycją i ponownym tworzeniem obrazków, ponieważ możesz zrobić wszystko za pomocą kodu. Tabela 4.3 pokazuje, które wersje każdej z przeglądarek obsługują gradienty CSS3. Tabela 4.3. Obsäuga gradientów w przeglñdarkach i urzñdzeniach Android Chrome Firefox Internet Explorer iOS Safari Opera Safari 2.3+ 13.0+ 4.0+ - 4.0+ 11.0+ 5.0+ Listing 4.9 zawiera kod prostego gradientu od białego do czarnego koloru, który pokazano na rysunku 4.5. Listing 4.9. Prosty liniowy gradient CSS div { height: 200px; width: 200px; background: url(gradient.gif); /* dla przeglądarek, które nie potrafią tworzyü gradientów */ background: -moz-linear-gradient(white, black); background: -webkit-linear-gradient(white, black); background: -linear-gradient(white, black); } 96 Rozdziaä 4. Nowe techniki dotyczñce ukäadu i stylizacji w CSS3 Rysunek 4.5. Prosty liniowy gradient CSS Najpierw zostaje określony rodzaj gradientu (liniowy lub radialny), po czym następują nawiasy, w których zapisany jest początkowy i końcowy kolor gradientu. Zauważ, że kod ma cztery różne deklaracje. Pierwsza zawiera gradient w postaci pliku graficznego, na wypadek gdyby przeglądarka nie obsługiwała gradientów CSS3; -moz-linear-gradient jest przeznaczona dla przeglądarek Mozilla (Firefox); -webkit-linear-gradient dla przeglądarek opartych na WebKit (Safari i Chrome); ostatnia deklaracja tła jest oficjalną składnią gradientu CSS3, ale obecnie żadna przeglądarka jej nie obsługuje. Uwaga W 2008 roku WebKit byä pierwszym silnikiem, który zaczñä uĔywaè gradientów, lecz miaä swojñ wäasnñ skäadniö. W miarö jak gradienty CSS stawaäy siö bardziej popularne, Mozilla zaimplementowaäa skäadniö znacznie bliĔszñ tej z oficjalnej specyfikacji. Jednak w styczniu 2011 roku ogäoszono, Ĕe WebKit zmieni skäadniö gradientów i zacznie uĔywaè tego samego stylu co Mozilla i oficjalna specyfikacja, co jest wspaniaäñ wiadomoĈciñ dla kaĔdego, poniewaĔ oryginalna skäadnia WebKit byäa bardziej skomplikowana i nie byäa oparta na standardach. W tej ksiñĔce uĔywamy nowej skäadni WebKit. Na listingu 4.10 używamy przycisków i kombinacji selektorów atrybutów, właściwości box-shadow i border-radius, wielu teł oraz gradientów CSS do uzyskania efektów z rysunku 4.6. We właściwości background oddzielamy poszczególne style tła przy użyciu przecinka. Wobec tego najpierw umieszczamy obrazek, z którego chcemy skorzystać, a potem ustawiamy style gradientu. Jeśli style gradientu byłyby użyte wcześniej, przykryłyby obrazek. Listing 4.10. Efekty gradientu na przyciskach input { border: none; -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, .4); box-shadow: 0 1px 5px rgba(0, 0, 0, .4); -webkit-border-radius: 10px; border-radius: 10px; cursor: pointer; color: #fff; font: bold 1.2em Arial, Helvetica, sans-serif; margin: 0 10px 0 0; padding: 10px 10px 10px 30px; text-shadow: 0 2px 2px rgba(0, 0, 0, 0.25); } input[type= submit ] { background: url(images/accept.png) 8px 55 no-repeat #91BD09; background: url(images/accept.png) 8px 55 no-repeat, -webkit-linear-gradient(#91BD09, #578730); background: url(images/accept.png) 8px 55 no-repeat, -moz-linear-gradient(#91BD09, #578730); Tworzenie przycisków za pomocñ gradientów CSS i wielu teä 97 background: url(images/accept.png) 8px 55 no-repeat, -linear-gradient(#91BD09, #578730); } input[value= Anuluj ] { background: url(images/cross.png) 8px 55 no-repeat #b53109; background: url(images/cross.png) 8px 55 no-repeat, -webkit-linear-gradient(#b53109, #540303); background: url(images/cross.png) 8px 55 no-repeat, -moz-linear-gradient(#b53109, #540303); background: url(images/cross.png) 8px 55 no-repeat, -linear-gradient(#b53109, #540303); } input[type= reset ] { background: url(images/error.png) 8px 55 no-repeat #f0bb18; background: url(images/error.png) 8px 55 no-repeat, -webkit-linear-gradient(#f0bb18, #a46b07); background: url(images/error.png) 8px 55 no-repeat, -moz-linear-gradient(#f0bb18, #a46b07); background: url(images/error.png) 8px 55 no-repeat, -linear-gradient(#f0bb18, #a46b07); } Rysunek 4.6. Gradienty CSS3 na przyciskach Możesz uzyskać znacznie więcej niż tylko zwykłe przenikanie dwóch kolorów. Używając zatrzymania, możesz dodać wiele kolorów do gradientu, co pokazano na rysunku 4.7. Zatrzymania są dodawane po każdym przecinku i mogą zawierać pozycję, w której się zaczynają, jak pokazano na listingu 4.11. Listing 4.11. Gradienty z wieloma zatrzymaniami div { height: 200px; width: 200px; background-color: #000; background: -moz-linear-gradient(left, #000000 0 , #FFFFFF 25 , #000000 50 , #FFFFFF 75 , #000000 100 ); background: -webkit-linear-gradient(left, #000000 0 , #FFFFFF 25 , #000000 50 , #FFFFFF 75 , #000000 100 ); background: -linear-gradient(left, #000000 0 , #FFFFFF 25 , #000000 50 , #FFFFFF 75 , #000000 100 ); } Rysunek 4.7. Gradienty CSS3 z wieloma zatrzymaniami Listing 4.11 pokazuje kod użyty do utworzenia lewego obrazka z rysunku 4.7. Gradient staje się bardziej skomplikowany, ale zasadniczo każdy przecinek rozpoczyna nowy fragment informacji o gradiencie, w którym przekazujesz wartość koloru, a następnie procent oznaczający miejsce, w którym ten kolor się zaczyna. 98 Rozdziaä 4. Nowe techniki dotyczñce ukäadu i stylizacji w CSS3 Ponadto możesz obrócić gradient przez zmianę deklaracji left, na przykład na 45deg albo left top, jak pokazano na listingu 4.12, który tworzy prawy obrazek z rysunku 4.7. Listing 4.12. Obrócone gradienty z wieloma zatrzymaniami div { height: 200px; width: 200px; background-color: #000; background: -moz-linear-gradient(45deg, #000000 0 , #FFFFFF 25 , #000000 50 , #FFFFFF 75 , #000000 100 ); background: -webkit-linear-gradient(45deg, #000000 0 , #FFFFFF 25 , #000000 50 , #FFFFFF 75 , #000000 100 ); background: -linear-gradient(45deg, #000000 0 , #FFFFFF 25 , #000000 50 , #FFFFFF 75 , #000000 100 ); } Istnieje mnóstwo opcji związanych z gradientami CSS3, włączając w to tworzenie gradientów radialnych. Zalecamy wypróbowanie niektórych spośród generatorów gradientów, by nabrać wprawy: „ http://colorzilla.com/gradient-editor/, „ http://display-inline.fr/projects/css-gradient/. PRZEPIS DLA ćREDNIO ZAAWANSOWANYCH Upiökszanie witryny za pomocñ transformacji i przejĈè Dawniej twórcy stron internetowych musieli używać JavaScriptu albo wtyczek, takich jak Flash, żeby uzyskać na stronie internetowej efekty i animacje. Teraz jednak możesz robić takie rzeczy jak obracanie i zmiana rozmiaru elementów HTML przy użyciu jedynie CSS-a. Ponieważ żadna przeglądarka nie przyjęła jeszcze oficjalnej składni CSS-owej, musisz dodawać CSS dla każdego producenta. Oznacza to, że będziesz mieć zduplikowany CSS, ale na razie jest to konieczne, a nie wiąże się tak naprawdę z dużą ilością dodatkowej pracy. Tabela 4.4 pokazuje, które wersje każdej z przeglądarek obsługują transformacje i przejścia. Tabela 4.4. Obsäuga transformacji i przejĈè w przeglñdarkach i urzñdzeniach Android Chrome Firefox Internet Explorer iOS Safari Opera Safari 2.3+ 13.0+ 4.0+ 9.0+ 4.0+ 11.0+ 5.0+ Rysunek 4.8 pokazuje transformację obracającą zastosowaną do elementu figure. Aby utworzyć efekt z rysunku 4.8, zastosuj właściwość transform z wartością rotate do elementów figure i h1. Jak pokazano na listingu 4.13, musisz użyć CSS-owych prefiksów kilku producentów, aby efekty działały w WebKit, Mozilli, Operze i Internet Explorerze. Upiökszanie witryny za pomocñ transformacji i przejĈè 99 Rysunek 4.8. Obrazek i tekst obrócone za pomocñ CSS-a Listing 4.13. Transformacje CSS * { margin: 0; padding: 0; } body { font: normal .9em Arial, Helvetica, sans-serif; position: relative; padding: 30px 10px 10px 75px; width: 600px; } h1 { left: -100px; position: absolute; top: 160px; text-align: left; -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -o-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); } figure { background: #fff; border: 1px solid #BFBFBF; -webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3); -moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3); box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3); display: block; float: right; margin: 20px 20px 50px 50px; padding: 5px; text-align: center; -webkit-transform: rotate(10deg); 100 Rozdziaä 4. Nowe techniki dotyczñce ukäadu i stylizacji w CSS3 -moz-transform: rotate(10deg); -o-transform: rotate(10deg); -ms-transform: rotate(10deg); transform: rotate(10deg); } figcaption { clear: both; display: block; font-weight: bold; padding: .5em 0; } p { margin: 0 0 1em; } h1 To jest tytuï strony /h1 p Pellentesque habitant morbi tristique sen…… /p figure img alt= piaszczysta plaĝa src= beach.jpg / figcaption Widok z naszego pokoju hotelowego /figcaption /figure p Pellentesque habitant morbi tristique sen…… /p Na rysunku 4.8 widać efekt użycia funkcji rotate CSS-owej właściwości transform, lecz istnieją jeszcze inne, których możesz używać: translate, scale i skew. Listing 4.14 pokazuje przykład kodu potrzebnego do implementacji tych efektów (nie zapomnij dodać prefiksów specyficznych dla przeglądarek). Kod pokazuje efekty transformacji zastosowanych na tekście, ale mogą być one wykorzystane na dowolnym elemencie, włączając w to body. Listing 4.14. Wiöcej moĔliwoĈci transformacji CSS h1 {transform: translate(100px, 200px)} h1 {transform: skew(40deg);} h1 {transform: scale(2);} /* MoĪesz równieĪ poáączyü je razem w pojedynczej deklaracji: */ h1{transform: translate(100px, 200px) skew(40deg) scale(2) rotate(40deg);} Możesz również stosować przejścia i animacje. Istnieje różnica między przejściami i animacjami w CSS-ie. Przejście jest procesem zmiany między dwoma stanami, wywołanym przesunięciem myszą kursora nad obi
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

HTML5. Podręcznik programisty
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ą: