Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3 9788324669059, 8324669051

Citation preview

---

Tytuł oryginału: Responsive Web Design with HTML5 and CSS3 Tłumaczenie: Maciej Reszotnik ISBN: 978-83-246-6905-9 © Helion 2014. All rights reserved. Copyright © Packt Publishing 2012. First published in the English language under the title ‘Responsive Web Design with HTML5 and CSS3’ 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. Wydawnictwo HELION dołożyło wszelkich starań, by zawarte w tej książce informacje były kompletne i rzetelne. Nie bierze jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Wydawnictwo HELION nie ponosi również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce. Wydawnictwo HELION ul. Kościuszki 1c, 44-100 GLIWICE tel. 32 231 22 19, 32 230 98 63 e-mail: [email protected] WWW: http://helion.pl (księgarnia internetowa, katalog książek) Pliki z przykładami omawianymi w książce można znaleźć pod adresem: ftp://ftp.helion.pl/przyklady/resweb.zip Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/resweb_ebook Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję.

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

 Księgarnia internetowa

 Kup w wersji papierowej

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

 Oceń książkę

Spis treści O autorze

9

O recenzentach

11

Przedmowa

13

Rozdział 1. Podstawy HTML5, CSS3 i projektowania elastycznych układów stron

19

Czemu smartfony są tak ważne (a stary Internet Explorer nie)? 20 Czy zdarzają się sytuacje, w których układ elastyczny nie jest dobrym rozwiązaniem? 22 Układ skalowalny — definicja 22 Czemu ograniczać się tylko do skalowalnych projektów? 23 Przykłady skalowalnych projektów witryn 23 Gdzie znajdziesz narzędzia testowe obszaru operacyjnego? 24 Źródła inspiracji w sieci 30 HTML5 — zalety stosowania 32 Oszczędność czasu i kodu w HTML5 33 Nowe elementy semantyczne HTML5 34 CSS3 a wrażliwy projekt witryn i dodatkowe możliwości arkuszy 35 Wniosek jest prosty — CSS3 niczego nie zepsuje! 36 Jak CSS3 rozwiązuje codzienne problemy projektantów witryn? 36 Patrz, mamo! — bez obrazów! ........................................................................................................39 Co jeszcze CSS3 ma do zaoferowania? ..........................................................................39 Czy standardy HTML5 i CSS3 działają poprawnie już dziś? ...........................................................42 RWD nie jest lekarstwem na wszystko ...........................................................................................43 Uświadomienie klientom, że witryna nie powinna prezentować się tak samo w każdej przeglądarce .....................................................................................................................44 Podsumowanie .................................................................................................................................45

Spis treści

Rozdział 2. Zapytania medialne: obsługa zróżnicowanych obszarów operacyjnych Zapytań medialnych możesz używać już dziś Skalowalne projekty a zapytania medialne Składnia zapytań medialnych Zapytania medialne i porównywanie parametrów urządzeń Używanie zapytań medialnych do zmodyfikowania projektu witryny Najlepszy sposób ładowania zapytań medialnych w metodologii RWD Nasz pierwszy skalowalny projekt Może Cię zaskoczyć, że nasz pierwszy układ będzie miał stałą szerokość Projekt wrażliwy — ograniczanie wielkości obrazów Przycinanie treści w mniejszych obszarach operacyjnych Wyłączanie mechanizmu automatycznego skalowania strony Dopasowanie projektu witryny do różnych szerokości obszaru operacyjnego W metodologii RWD treści zawsze stoją na pierwszym miejscu Zapytania medialne — tylko część rozwiązania Potrzebny nam układ płynny Podsumowanie

Rozdział 3. Opanowanie układów płynnych Układy stałe nie są przystosowane do nowych wyzwań Czemu układy proporcjonalne są tak ważne w metodologii RWD? Transformacja stałego układu w projekt proporcjonalny Ważne równanie Definiowanie kontekstu w elementach proporcjonalnych Zawsze należy pamiętać o kontekście Wykorzystywanie jednostek em zamiast pikseli w kontekście typografii Płynne obrazy Skalowanie obrazów w obrębie obszaru operacyjnego Właściwe reguły dla właściwych obrazów Nakładanie hamulców na układ płynny Wszechstronna własność max-width Wczytywanie różnych obrazów dla różnych ekranów Konfigurowanie usługi Adaptive Images Płynne siatki i zapytania medialne tworzą jedność System siatek CSS Błyskawiczne konstruowanie strony w systemie siatek Podsumowanie

Rozdział 4. HTML5 i projekty elastyczne Z jakich części standardu HTML5 możemy korzystać już dziś? Większość witryn może być konstruowana w oparciu o HTML5 Wypełnienia, skrypty i Modernizr W jaki sposób pisać strony w standardzie HTML5? Oszczędności wynikające z wykorzystania HTML5 Rozsądne podejście do pisania kodu Oddajmy cześć wszechmocnemu elementowi Elementy języka HTML, które uległy dezaktualizacji

4

47 48 48 49 51 52 52 53 53 57 59 60 63 65 69 69 69

71 72 72 73 73 75 82 85 87 87 89 91 92 93 94 98 99 100 105

107 108 108 108 109 110 111 111 112

Spis treści

Nowe elementy semantyczne HTML5 Element Element Element Element Element Element Element Element Praktyczne wykorzystanie elementów strukturalnych HTML5 A co z główną zawartością strony? HTML5 i semantyka na poziomie tekstu Element Element Element Zasady semantyki na poziomie tekstu w kodzie Poprawienie dostępności strony za pomocą standardu WAI-ARIA Punkty orientacyjne w standardzie ARIA Zagnieżdżanie elementów multimedialnych w HTML5 Zagnieżdżanie multimediów według HTML5 Alternatywne źródła plików Awaryjna obsługa w starszych przeglądarkach Znaczniki audio i video działają niemal identycznie Skalowalne odtwarzacze filmów Aplikacje sieciowe w trybie offline Aplikacje offline od podszewki Wdrażanie trybu offline Składnia pliku manifestu Automatyczne wczytywanie stron w manifeście Komentarze wersji Odczytywanie strony w trybie offline Rozwiązywanie problemów z aplikacjami offline Podsumowanie

Rozdział 5. CSS3: selektory, typografia i tryby barw Co CSS3 oferuje projektantom stron? Obsługa CSS3 w Internet Explorerze 6, 7 i 8 Wykorzystanie CSS3 do projektowania i formatowania stron w przeglądarce Struktura reguł CSS Przedrostki autorskie i sposób ich wykorzystania Przydatne triki w CSS3 Układ wielokolumnowy w CSS3 dla projektu skalowalnego Zawijanie tekstu Nowe selektory CSS3 i sposób ich wykorzystania Selektory atrybutów w CSS3 Strukturalne pseudoklasy CSS3 Poprawki wprowadzane w pseudoelementach

112 113 114 114 114 115 116 117 117 117 123 123 124 124 125 125 127 127 130 131 132 133 133 134 137 137 137 139 139 140 140 141 142

143 144 144 145 145 145 148 148 151 152 152 155 164

5

Spis treści

Własna typografia sieciowa Reguła @font-face Odwołanie do fontów w regule @font-face Pomocy — moje nagłówki @font-face CSS3 wyglądają okropnie! Uwagi na temat elementów typograficznych @font-face i elastycznego projektu strony Nowe formaty barw CSS3 i kanał alfa Tryb RGB Tryb HSL Awaryjne tryby barw dla Internet Explorera 6, 7 i 8 Kanały alfa Podsumowanie

Rozdział 6. Spektakularny wygląd i CSS3 Cieniowanie tekstu w CSS3 Obsługiwane tryby barw: HEX, HSL i RGB Jednostki: piksele, em i rem Blokowanie właściwości text-shadow Tworzenie efektu uwypuklenia za pomocą własności text-shadow Nakładanie wielu efektów cienia na tekst Cieniowanie komponentów Cieniowanie do wewnątrz elementu Nakładanie wielu cieni na element Gradienty tła Liniowe gradienty tła Gradienty kołowe Powtarzanie gradientu Wzorce tła gradientu Projektowanie elastyczne a CSS3 Korzystanie z wielu właściwości CSS3 naraz Wiele obrazów tła naraz Wymiary tła Właściwość background position Skrócona deklaracja właściwości background Więcej właściwości CSS3 Elastyczne ikony doskonałe dla projektu skalowalnego Podsumowanie

166 166 167 170 173 173 174 175 176 176 178

179 180 180 181 182 184 184 185 185 187 188 189 193 196 198 200 202 206 208 208 209 209 209 210

Rozdział 7. Przejścia, transformacje i animacje w CSS3

213

Czym są przejścia CSS3 i jak możemy z nich korzystać? Typy właściwości przejść Ciekawe typy przejść dla elastycznych stron Transformacje dwuwymiarowe a CSS3 Co możemy poddać transformacji? Zabawa transformacjami trójwymiarowymi Składnia transformacji trójwymiarowych Transformacje trójwymiarowe wciąż raczkują

214 215 218 219 220 224 226 230

6

Spis treści

Animacje w CSS3 Łączenie animacji i transformacji CSS3 Podsumowanie

Rozdział 8. Opanowanie formularzy w HTML5 i CSS3 Formularze a HTML5 Komponenty w formularzach HTML5 placeholder required autofocus autocomplete list (i powiązane elementy listy) Rodzaje kontrolek HTML5 Kontrolki daty i godziny Wypełnienia dla starszych przeglądarek Formatowanie formularzy HTML5 za pomocą arkuszy CSS3 Selektory pseudoklas CSS3 dla formularzy Podsumowanie

231 234 237

239 240 242 242 243 244 244 245 246 252 257 258 262 265

Rozdział 9. Rozwiązywanie problemów kompatybilności układów wrażliwych z przeglądarkami

267

Ulepszenie postępowe a łagodna degradacja Praktyka Czy powinieneś naprawiać problemy we wszystkich wersjach Internet Explorera? Dane statystyczne (znowu) Kwestia własnego wyboru Modernizr — scyzoryk projektanta stron Rozwiązywanie problemów z formatowaniem Obsługa elementów HTML5 w starszych Internet Explorerach a Modernizr Implementacja obsługi zapytań medialnych w Internet Explorerze 6, 7 i 8 Modernizr i wczytywanie warunkowe Transformacja nawigacji — menu pionowe Urządzenia z ekranami o wysokiej rozdzielczości (rzut okiem w przyszłość) Podsumowanie

272 272 273 274 274 275 277 279 280 282 284 288 291

Skorowidz

292

7

Spis treści

8

O autorze Ben Frain jest wolnym strzelcem: webdesignerem i webdeweloperem aplikacji interfejsu, współpracującym bezpośrednio z klientami i agencjami projektantów witryn z całego świata. Pracuje też jako dziennikarz specjalizujący się w zagadnieniach technologicznych i pisze do różnych periodyków poświęconych platformie Mac, technologiom przyszłości, projektowaniu witryn i systemów technologicznych w przemyśle lotniczym. Nim odkrył swoje powołanie, był niedocenionym (i skromnym) aktorem telewizyjnym, który ukończył kierunek media i aktorstwo na Uniwersytecie Salford. Napisał cztery równie niedocenione (jego zdaniem) scenariusze i wciąż żywi pewną (słabnącą) nadzieję, że w końcu uda mu się sprzedać jeden z nich. Poza pracą uwielbia grać w halową piłkę nożną, lecz robi to, gdy pozwoli mu na to jego kondycja (i żona). Znajdziesz go w sieci pod adresem www.benfrain.com oraz na koncie Twittera twitter.com/ benfrain. W pierwszym rzędzie pragnę podziękować społeczności internautów. Bez ich połączonych wysiłków i hojności przejawiających się w dokumentowaniu rozwiązań i dzieleniu się nimi nie byłbym w stanie stworzyć w sieci rzeczy, z których jestem dumny. Chciałbym również podziękować ojcu idei projektowania skalowalnych witryn: Ethanowi Marcotte’owi. Nigdy nie udało mi się z nim osobiście spotkać i porozmawiać, ale jego metodologia wpływa na sposób, w jaki konstruuję witryny każdego dnia. Oczywiście wszystkie niejasności i błędy, które pojawiły się w mojej interpretacji tej metodologii, zostały popełnione przeze mnie. Na koniec pragnę podziękować swojej rodzinie. Każdy, kto oglądał (również niedoceniony) film pt. Wyatt Earp, wie, że „nie ma osób ważniejszych nad krewnych; wszyscy inni ludzie to obcy”.

Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3

10

O recenzentach Ed Henderson jest doświadczonym webdeweloperem, kochającym projektować i konstruować rzeczy w sieci. Nie boi się pobrudzić sobie rąk czy zamoczyć stopy, jest otwarty na większość technologii, pod warunkiem że są one ciekawe i użyteczne. Ed ma dyplom inżyniera informatyka i własną firmę (Web Man Walking). Pracował jako wolny strzelec, na stałych i kontraktowych stanowiskach, dzięki czemu miał szansę zapoznać się z zasadami konstruowania wielu specyficznych dla branży rozwiązań. Ed rozwija skrzydła, pracując nad nowatorskimi pomysłami. Był programistą, twórcą oprogramowania i aktualnie jest superbohaterem sieci, który kocha dłubać w bibliotekach, skryptach i wtyczkach. Chęć zmiany pomysłu w działające rozwiązanie jest tym, co go napędza. Niewiele osób wie, że Ed jest ojcem małego Jacka, z którym prowadzi witrynę http://jack drawsanything.com/, oraz zwycięzcą prestiżowej kampanii .net Social Campaign w 2011 roku. Ed mieszka w Upper Cockenzie w regionie East Lothian w Szkocji wraz z resztą zespołu Hendo: swoją wspaniałą żoną Rose oraz dziećmi, Jackiem, Tobym i Noahem. Więcej o Edzie dowiesz się z witryny http://edhenderson.com (jest ona w stanie permanentnej przebudowy, więc wybacz bałagan) lub z konta na Twitterze — @edhenderson. Mauvis Ledford jest pełnowartościowym webdeweloperem specjalizującym się w architekturze interfejsów. Pracował w tej dziedzinie przez 9 ostatnich lat, z czego w ostatnich dwóch skoncentrował się na rozwiązaniach dla urządzeń mobilnych i HTML5.

Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3

Prowadzi działalność konsultingową dotyczącą HTML5, która skupia się na wrażliwych projektach witryn i aplikacjach sieciowych możliwych do wdrożenia w dowolnym środowisku (szczegóły na http://www.brainswap.me). Pracował dla Disney Mobile, Skype’a, Netfliksa i wielu przedsiębiorstw działających na terenie San Francisco. Kamrujaman Shohel od sześciu lat pracuje jako projektant aplikacji i jest ekspertem w wielu dziedzinach. Ma duże doświadczenie w projektowaniu interfejsów, jest świetnym projektantem UI odpowiedzialnym za doznania użytkowników i konsultantem ds. przystępności witryn. Po ukończeniu studiów w 2004 roku zaczął swoją karierę jako programista PHP w firmie SSR IT, po czym przyjął stanowisko analityka w Microsoft Group (jednym z działów firmy Microsoft). Kamrujaman uwielbia pracę nad interfejsami, ponieważ jego kreatywność jest tu najbardziej widoczna; właśnie dlatego w 2005 roku zdecydował się zmienić specjalizację i stał się projektantem — od tamtej pory pracuje dla Right Brain Solution Limited jako starszy deweloper interfejsów. W doskonałym stopniu opanował tajniki HTML, HTML5, CSS3, jQuery, jQuery UI, PHP, Photoshopa CS5 i Illustratora CS5. Przez ostatnie dwa lata pracował dla Trenza Softwares jako starszy inżynier ds. interfejsów (team lead). Współpracował też z Mesovison Consultancy Limited jako konsultant IT, jest także wolnym strzelcem. Lubi pracę nad projektowaniem interfejsów, interaktywnością, kompatybilnością z wymaganiami użytkowników, przystępnością oraz funkcjonalnością aplikacji. Aktualnie planuje pracę nad książką poświęconą HTML5, CSS3, jQuery, jQuery Mobile lub jQuery UI. Pragnie stworzyć swoją własną firmę, w której pracownicy będą pomagać sobie nawzajem i rozwijać swoje talenty. Kamrujaman, o ile nie śpi, pracuje. Poza pracą poszerza swoją wiedzę, czytając technologiczne książki i dowiadując się nowinek z dziedziny inżynierii interfejsów. Kamrujaman opanował technologie PHP, C, C#, VB.NET, ASP.NET, CakePHP, Zend Framework, Joomla i Wordpress. Choć jest inżynierem interfejsów, wierzy w dążenie do doskonałości, więc niestraszne są mu nowatorskie rozwiązania.

12

Przedmowa Jeśli przyjdzie Ci do głowy pomysł stworzenia odrębnej wersji witryny na urządzenia przenośne, zastanów się nad alternatywą. Zasady konstruowania skalowalnych interfejsów umożliwiają stworzenie projektów, które będą prezentować się wyśmienicie na smartfonach, komputerach osobistych i innych urządzeniach. Tak skonstruowany układ będzie dostosowywał się do zmiany wielkości ekranu użytkownika, tworząc najbardziej przystępną stronę pod kątem współczesnych urządzeń i rozwiązań jutra. Książka ta wyjaśni Ci, jak zmienić układ o stałej szerokości w układ wrażliwy. Dodatkowo poszerzy ona Twoją wiedzę o metodologii projektowania poprzez zastosowanie najnowszych i najbardziej użytecznych technik oferowanych przez HTML5 i CSS3, czyniąc Twoje projekty łatwiejszymi w utrzymaniu i cieszącymi oko. Zaprezentuje też najlepsze metody pisania i wdrażania kodu, obrazów i plików. Jeśli jesteś w stanie opanować HTML i CSS, łatwo będzie Ci skonstruować elastyczny projekt.

Czego dowiesz się z tej książki? Rozdział 1., „Podstawy HTML5, CSS3 i projektowania elastycznych układów stron”, wyjaśnia, na czym polega idea RWD, prezentuje przykłady elastycznych układów i podkreśla zalety oraz oszczędności wynikające z wykorzystania HTML5 i CSS3. Rozdział 2., „Zapytania medialne: obsługa zróżnicowanych obszarów operacyjnych”, wyjaśnia, czym są zapytania medialne, w jaki sposób można je zadeklarować i jak można je zastosować w dowolnym projekcie, dopasowując style CSS do możliwości urządzenia. Rozdział 3., „Opanowanie układów płynnych”, prezentuje zalety stosowania układów płynnych witryny oraz wyjaśnia, w jaki sposób można łatwo dokonać konwersji układu stałego na płynny i wykorzystać możliwości CSS do przygotowania prototypu skalowalnego projektu.

Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3

Rozdział 4., „HTML5 i projekty elastyczne”, jest poświęcony zaletom pisania kodu w standardzie HTML5 (ładniejszy kod, elementy semantyczne, pamięć podręczna offline, model WAI-ARIA przeznaczony dla osób niepełnosprawnych). Rozdział 5, „CSS3: selektory, typografia i tryby barw”, prezentuje potęgę drzemiącą w selektorach CSS3, pozwalającą Ci z łatwością dokonywać transformacji. Wykorzystamy w nim regułę CSS3 @font-face, aby stworzyć piękną typografię sieciową i wyjaśnić zasadę działania trybów barw CSS3, takich jak RGB(A) i HSL(A). Rozdział 6., „Spektakularny wygląd i CSS3”, wyjaśni Ci jak tworzy się efekty cienia wokół napisów i segmentów strony oraz gradienty — wszystko w czystych arkuszach CSS3. Omówimy w nim też, jak dodać wiele obrazów tła i stworzyć ikonki tylko za pomocą fontów. Rozdział 7., „Przejścia, transformacje i animacje w CSS3”, przedstawia, jak stworzyć element na ekranie, animować go lub dokonać jego transformacji, używając wyłącznie CSS3. Rozdział 8., „Opanowanie formularzy w HTML5 i CSS3”, wyjaśni Ci, jak można zaimplementować techniki tworzenia formularzy, działających w każdej przeglądarce, od smartfonów po komputery stacjonarne. Rozdział 9., „Rozwiązywanie problemów kompatybilności układów wrażliwych z przeglądarkami”, wyłoży Ci metody przystosowania starszych wersji Internet Explorera do nowych rozwiązań, adaptacji nawigacji dla komputerów stacjonarnych na urządzenia przenośne, wyświetlania różnych treści na ekranach o wysokiej rozdzielczości oraz warunkowania ładowania zasobów za pomocą wtyczki Modernizr.

Wymagania Aby swobodnie poruszać się po tej książce, musisz znać dość dobrze HTML i CSS. Może też przyda ć Ci się podstawowa wiedza z zakresu języka JavaScript. Dobry gust w dziedzinie filmów z pewnością nie zawadzi.

Adresaci książki Czy zdarza Ci się tworzyć dwie wersje witryny — jedną dla urządzeń przenośnych, a drugą przeznaczoną na większe ekrany? Być może słyszałeś hasło „układ wrażliwy”, lecz nie wiesz, jak połączyć HTML5, CSS3 oraz dynamiczny projekt w całość. Jeśli tak jest, książka ta zapewni Ci wszystko, czego potrzebujesz, by przejść ze swoimi witrynami na wyższy poziom, nim zrobią to Twoi konkurenci.

14

Przedmowa

Książka ta powstała z myślą o projektantach witryn i programistach, którzy aktualnie konstruują witryny mające stałą szerokość w standardach HTML 4.01 i CSS 2.1. Wyjaśnia ona, w jaki sposób, korzystając z HTML5 i arkuszy CSS3, można stworzyć elastyczne witryny, które będą dynamicznie przystosowywać się do wielkości dowolnego ekranu.

Konwencje wydawnicze W tej książce korzystamy z różnych form oznaczania tekstu, aby wyróżnić różne rodzaje informacji. Niżej omawiamy przykłady tych stylów oraz wyjaśniamy ich znaczenie. W samym tekście kod jest prezentowany w sposób następujący: „Standard HTML5 akceptuje też napisany mniej skrupulatnie kod jako »prawidłowy«. Przykładowo kod jest równie poprawny jak jego wersja z poprzedniego przykładu”. Dłuższe fragmenty kodu są prezentowane w następujący sposób:

• Strona główna
• O witrynie

Konkretne segmenty kodu, na które należy zwrócić uwagę, są oznaczone pogrubieniem: #wrapper { margin-right: auto; margin-left: auto; width: 96%; /* Zawiera położony najbardziej na zewnątrz element DIV */ } #header { margin-right: 10px; margin-left: 10px; width: 97,9166667%; /* 940 — 960 */ }

Nowe terminy i ważne hasła są wyróżniane pogrubieniem. Zaliczamy do nich wyrazy pojawiające się na ekranie w menu lub w polach tekstowych, o których mowa w tekście, np.: „Dla przykładu czerwone i czarne elementy menu nawigacji nie występują naprzemiennie, a główny przycisk TE FILMY POWINNY ZOSTAĆ NAGRODZONE w obszarze treści oraz przyciski Informacje paska bocznego zniknęły; dodatkowo fonty wyglądają inaczej niż w pliku graficznym”. Ostrzeżenia, ważne uwagi i wskazówki zostaną wyświetlone w blokach takich jak ten.

15

Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3

Opinie czytelników Jesteśmy otwarci na opinie naszych czytelników. Daj nam znać, co myślisz o tej książce — co Ci się spodobało i co nie sprostało Twoim oczekiwaniom. Uwagi naszych czytelników są dla nas bardzo cenne, gdyż pozwalają nam publikować książki, z których zaczerpną oni jak najwięcej. Aby przekazać nam swoją ocenę, po prostu wyślij nam zawartość dostępnego na stronie http://helion.pl/user/opinie/ formularza. Jeśli jesteś ekspertem w danej dziedzinie i chciałbyś opublikować książkę lub zostać współautorem danej publikacji, odwiedź stronę http://helion.pl/praca.phtml.

Wsparcie klienta Jako szczęśliwy posiadacz książki wydawnictwa Helion masz teraz pewne dodatkowe możliwości.

Przykłady kodu Na stronie internetowej książki, pod adresem http://helion.pl/ksiazki/resweb.htm, znajdziesz gotowe do wykorzystania przykłady kodu przedstawione w tej książce. Po prostu ściągnij spakowane pliki na swój dysk twardy, a następnie rozpakuj archiwum.

Errata Choć staraliśmy się zapewnić poprawność opublikowanych tu treści, błędy się zdarzają. Jeżeli w którejś z naszych książek znajdziesz jakiś błąd — w treści lub w kodzie — będziemy zobowiązani, jeśli dasz nam o nim znać. W ten sposób oszczędzisz innym czytelnikom frustracji i pomożesz nam poprawić kolejne wydania tej książki. Jeżeli znajdziesz jakieś niedopatrzenia, udaj się na stronę http://helion.pl/erraty.htm, wybierz właściwą książkę, kliknij link erraty i wpisz szczegóły dotyczące błędu. Po zweryfikowaniu Twoich uwag zostaną one przyjęte, a odpowiednie zmiany zostaną wprowadzone w naszej witrynie lub dodane do już istniejącej erraty w sekcji Erraty danego tytułu.

Prawa autorskie Nielegalne upublicznianie materiałów chronionych prawami autorskimi w Internecie jest problemem wszystkich form mediów. W naszym wydawnictwie traktujemy kwestię praw autorskich i licencji bardzo poważnie. Jeśli natrafisz w Internecie na nielegalne kopie naszych dzieł, w dowolnej formie, prosimy, byś przesłał nam adres lokalizacji sieciowej lub nazwę witryny, abyśmy mogli zaradzić tej sytuacji.

16

Przedmowa

Wyślij nam link do prawdopodobnie nielegalnie udostępnianych materiałów na adres [email protected]. Doceniamy pomoc osób w walce o ochronę praw naszych autorów oraz o możliwość publikowania wartościowych treści.

Pytania Jeśli masz jakieś pytania o dowolny aspekt tej książki, napisz do nas na adres [email protected], a postaramy się na nie odpowiedzieć.

17

Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3

18

1 Podstawy HTML5, CSS3 i projektowania elastycznych układów stron Do niedawna witryny były budowane głównie w stałej szerokości, np. 960 pikseli, dzięki czemu użytkownik końcowy uzyskiwał z grubsza podobne efekty w różnych urządzeniach. Stała szerokość nie była zbyt duża dla ekranów laptopów, a jedyną niedogodnością, której doświadczali właściciele dużych monitorów, były duże marginesy po obu stronach układu. Pojawiły się jednak smartfony. Oferowany przez firmę Apple iPhone jest pierwszym telefonem, który pozwolił na wygodne poruszanie się po sieci, i wiele innych urządzeń wzięło z niego przykład. Wcześniej wyprodukowane urządzenia charakteryzowały się bardzo małymi ekranami, które wymagały zręczności mistrza świata gry w pchełki. Obecnie ludzie bezproblemowo surfują po sieci, korzystając ze swoich telefonów. Dodatkowo coraz więcej konsumentów posługuje się urządzeniami o małej powierzchni ekranu (np. tabletami i netbookami), przedkładając je nad szerokie ekrany komputerów stacjonarnych, nawet kiedy są we własnym domu. Nie da się zaprzeczyć, że liczba osób korzystających z urządzeń wyposażonych w mniejsze ekrany do surfowania po sieci stale rośnie; z drugiej strony 27- i 30-calowe monitory też są w powszechnym użyciu. Różnica między najmniejszymi a największymi ekranami używanymi do przeglądania sieci jeszcze nigdy nie była tak duża.

Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3

Na szczęście istnieje rozwiązanie problemu tak wielkiego zróżnicowania w powiększającej się luce na rynku przeglądarek i urządzeń. Elastyczny projekt witryny (ang. Responsive Web Design — RWD) zbudowany za pomocą HTML5 i CSS3 sprawi, że witryna będzie prezentować się doskonale na wielu typach urządzeń i ekranów. Co najciekawsze, wymagane techniki są wdrażane bez potrzeby korzystania z rozwiązań od strony zaplecza i serwera. W tym rozdziale:  dowiesz się, dlaczego obsługa urządzeń o małych ekranach jest tak ważna,  zdefiniujemy pojęcie „projektu witryny na urządzenia przenośne”,  zdefiniujemy pojęcie „projektu elastycznej witryny”,  przyjrzysz się przykładom świetnych projektów wrażliwych witryn,  poznasz różnicę między obszarem operacyjnym a wielkością ekranu,  dowiesz się, jak zainstalować wtyczki modyfikujące obszar operacyjny,

i jak z nich skorzystać.  nauczysz się używać HTML5 do konstruowania bardziej przejrzystego i estetycznego kodu.  nauczysz się używać arkuszy CSS3 do rozwiązywania najczęściej spotykanych przez projektantów problemów.

Czemu smartfony są tak ważne (a stary Internet Explorer nie)? Choć dane statystyczne mogą być interpretowane tylko ogólnie, swoistą ciekawostką jest informacja z portalu gs.statcounter.com, z której wynika, że od października 2011 roku do października 2012 roku wykorzystanie przeglądarek urządzeń mobilnych wzrosło z 6,55% do 12,3%. Z innych badań wynika, że w tym samym okresie wykorzystanie Internet Explorera 6 spadło z 2,47% do 0,5%. Jeśli Twoi klienci poproszą Cię: „niech pan zrobi, żeby działało pod Internet Explorerem 6 i 7”, powinieneś odpowiedzieć „może warto skoncentrować swoje wysiłki w innym obszarze?”. Więcej osób przegląda strony internetowe na urządzeniach mobilnych niż na Internet Explorerze 6 i 7. To, co przed chwilą usłyszałeś w swojej głowie, to gremialny okrzyk radości projektantów witryn z całego świata. Liczba osób korzystających z małych ekranów do przeglądania Internetu rośnie, a przeglądarki dla takich urządzeń zostały zaprojektowane z myślą o już istniejących witrynach. Zostały one przystosowane do wyświetlania standardowych stron. Zmniejszając je tak, aby mieściły się w widocznym obszarze (zwanym obszarem operacyjnym) urządzenia. Następnie użytkownik może przybliżyć obszar treści, który go zainteresował. Wszystko wspaniale, tylko w związku z tym, czemu projektanci interfejsów i deweloperzy mieliby zajmować się dodatkowymi modyfikacjami witryny?

20

Rozdział 1. • Podstawy HTML5, CSS3 i projektowania elastycznych układów stron

Cóż, im więcej przejrzysz witryn podobnych do tej na powyższym rysunku, używając iPhone’a i telefonu Android, tym bardziej klarowne staną się powody. Przybliżanie i oddalanie obszarów całej strony raz po razie, żeby być w stanie przeczytać treści, oraz przesuwanie strony z lewej na prawą, aby przeczytać zdania wychodzące poza obszar operacyjny, jest żmudne i frustrujące, a przecież łatwo wskazać link, którego nie chciałeś przecież klikać. Na pewno można prościej!

21

Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3

Czy zdarzają się sytuacje, w których układ elastyczny nie jest dobrym rozwiązaniem? Jeśli pozwoli Ci na to budżet i wymaga tego od Ciebie sytuacja, może się okazać, że przygotowanie oddzielnej wersji witryny na urządzenia przenośne jest dobrym pomysłem. W ten sposób mógłbyś wyświetlić różne treści i układy stron oraz zaprezentować różne formy interakcji w zależności od rodzaju urządzenia, lokalizacji użytkownika, prędkości połączenia i wielu innych zmiennych, w tym technologicznych możliwości urządzenia. Posłużmy się praktycznym przykładem: wyobraź sobie sieć pizzerii. Sieć taka może mieć „standardową” witrynę i jej „przenośne” wersje, z opcjami rzeczywistości rozszerzonej (ang. augmented reality), korzystającymi ze współrzędnych GPS, aby pomóc użytkownikowi odnaleźć daną pizzerię. Rozwiązanie to wymaga znacznie więcej funkcji, niż sam elastyczny projekt jest w stanie zaoferować. Jednakże, choć nie każdy projekt wymaga wysokiego poziomu złożoności, w prawie wszystkich przypadkach lepiej jest przygotować użytkownikom dopasowany obszar treści, który jest zależny od wielkości obszaru operacyjnego. Przykładowo w przypadku większości stron warto, by te same treści mogły zostać wyświetlone w różny sposób. Na mniejszych ekranach czasem lepiej jest umieścić mniej ważne elementy pod główną treścią lub — w najgorszym wypadku — całkowicie je ukryć. Ponadto opłaca się przystosować przyciski nawigacji do sterowania za pomocą ekranu dotykowego, nie ograniczając się w ten sposób do zapewnienia przystępności tylko osobom korzystającym z myszy. Również fonty powinny zostać przeskalowane celem poprawy czytelności, dzięki czemu będzie można zapoznać się z treścią tekstu bez potrzeby przesuwania ekranu od lewej do prawej. Z drugiej strony nie chcemy przecież, by zastosowane z myślą o mniejszych obszarach operacyjnych rozwiązania zniszczyły układ widoczny dla wszystkich korzystających ze standardowego laptopa i zwykłych monitorów. Skoro już myślimy o potrzebach wszystkich, czemu nie wprowadzić kilku usprawnień dla osób korzystających z ekranów szerokich na 1900 pikseli lub więcej? W skrócie, potrzebujemy układów „wrażliwych” na wyświetlenie w całej gamie obszarów operacyjnych, w których mogą się pojawić.

Układ skalowalny — definicja Termin „skalowalny projekt witryny” (ang. Responsive Web Design — RWD) został wymyślony przez Ethana Marcotte’a. W jednym ze swoich najważniejszych artykułów dla witryny List Apart (http://www.alistapart.com/articles/responsive-web-design/) łączy on trzy już istniejące techniki (układ elastycznej siatki, elastycznych obrazów i zapytań medialnych) w ujednolicone rozwiązanie, które nazwał układem skalowalnym. Znaczenie tego terminu często pokrywa się ze znaczeniem innych haseł, w tym z projektem wrażliwym, projektem elastycznym, projektem płynnym, układem elastycznym, układem gumowym, układem adaptacyjnym, układem wieloplatformowym czy układem plastycznym.

22

Rozdział 1. • Podstawy HTML5, CSS3 i projektowania elastycznych układów stron

Jest to zaledwie garstka nazw! Jak jednak Marcotte i wiele innych osób zauważyło, prawdziwa metodologia witryn elastycznych to znacznie więcej niż zmiana wielkości układu strony w zależności od wielkości obszaru operacyjnego. W rzeczywistości zaproponowane podejście odwraca nasze pojęcie o projektowaniu witryn. Zamiast zacząć od projektu witryny o stałej szerokości przeznaczonego na komputery stacjonarne i następnie przeskalować go, by pasował do mniejszych obszarów operacyjnych, powinniśmy projektować dla najmniejszych ekranów, a następnie stopniowo usprawniać projekt i zawartość strony dla większych obszarów. Wrażliwy projekt witryny w pigułce Najogólniej rzecz ujmując, cała filozofia projektowania wrażliwych witryn sprowadza się do zaprezentowania treści w jak najbardziej przystępnej formie i dla dowolnych obszarów operacyjnych, w których mają zostać wygenerowane. Z drugiej strony, witryna skonstruowana dla urządzeń mobilnych jest potrzebna tylko w sytuacji, gdy jej funkcjonalność zależy od urządzenia, które otrzymuje dostęp do niej. W takich przypadkach witryna stworzona z myślą o smartfonach i tabletach będzie różnić się znacznie pod względem przystępności od swojego odpowiednika na komputerach stacjonarnych.

Czemu ograniczać się tylko do skalowalnych projektów? Skalowalny układ witryny pozwoli kontrolować rozkład treści strony, dopasowując go do zmieniających się obszarów operacyjnych, ale spróbujmy pójść dalej. HTML5 oferuje nam znacznie więcej niż HTML4 kiedykolwiek był w stanie, a wchodzące w jego skład ważne elementy semantyczne stanowią fundament jego składni. Zapytania medialne CSS3 są kluczowym składnikiem w metodyce projektu elastycznego, lecz to nie wszystko — moduły CSS3 pozwalają na zastosowanie bezprecedensowo elastycznych rozwiązań. W końcu możemy odrzucić grafikę tła i skomplikowany kod JavaScript, zastępując te komponenty rozwiązaniami dostępnymi z poziomu arkuszy stylów: gradientami, cieniami, typografią, animacjami i transformacjami. Nim jednak przejdziemy do samodzielnego tworzenia wrażliwych układów HTML5 i CSS3, zapoznajmy się z wzorcami, do których będziemy dążyć. Kto już teraz radzi sobie nieźle z wrażliwymi układami HTML5 i domieszką CSS3 i czego możemy się dowiedzieć od tych pionierów?

Przykłady skalowalnych projektów witryn Pełny test własnego elastycznego układu witryny wymagałby użycia rozmaitych systemów i urządzeń przystosowanych do wyświetlania różnych rozmiarów ekranów. Mimo że nic nie przebije rzeczywistych testów praktycznych, większość zadań testowych można zostać wykonać

23

Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3

z poziomu okna przeglądarki, zmieniając jego wielkość. Istnieje wiele niezależnych wtyczek i rozszerzeń, które wyświetlają aktualny rozmiar okna przeglądarki oraz rozmiar jej obszaru operacyjnego. Niektóre z nich pozwalają nawet dopasować okno lub obszar do domyślnego rozmiaru okna. W rezultacie dużo łatwiej jest sprawdzić, do jakich zmian dochodzi w różnych obszarach operacyjnych. Przywiązałeś się do pikseli? Daj sobie z nimi spokój! Nie traktuj pikseli jako głównej jednostki pomiaru, ponieważ gdy przejdziemy do projektowania wrażliwych układów stron, nie będziemy z nich zbyt często korzystać i zamiast nich zastosujemy względne jednostki wielkości (zwykle em lub ems oraz procenty). Piksele stanowią jednak dobry punkt odniesienia, na który będziemy się powoływać, analizując różne elastyczne układy oraz zmiany, jakim zostały poddane.

Gdzie znajdziesz narzędzia testowe obszaru operacyjnego? Użytkownicy przeglądarki Internet Explorer powinni upewnić się, że zainstalowali pasek narzędzi deweloperskich — Microsoft Internet Explorer Developer Toolbar. Rozszerzenie to można pobrać z następującego adresu: http://www.microsoft.com/en-us/download/details.aspx?id=18359. Jeśli korzystasz z Safari, możesz zainstalować moje ulubione płatne rozszerzenie Resize (http://resizeSafari.com/), lub podobną do niego, darmową wtyczkę (http://web.me.com/ aaronholla/Safari_Extensions/ResizeMe.html). Jeżeli wolisz używać Firefoksa, rozszerzenie Firesizer (https://addons.mozilla.org/pl/firefox/addon/ firesizer/?src=ss) spełni Twoje wymagania, a użytkownicy przeglądarki Chrome powinni przetestować wtyczkę Windows Resizer (https://chrome.google.com/webstore/detail/window-resizer/ kkelicaakdanhinjdeammmilcgefonfh). A co zrobić, jeśli nie lubisz wtyczek? Oto kilka alternatywnych rozwiązań: skonstruowałem prostą stronę HTML, która wyświetla aktualną wysokość i szerokość obszaru operacyjnego okna przeglądarki. Wystarczyło tylko użyć trochę magii biblioteki jQuery (http://jquery.com), by obliczyć aktualne rozmiary tego obszaru i zwrócić je na ekranie. Stronę tę możesz pozostawić otwartą w innej karcie, zmienić rozmiar okna i przejść do właściwej witryny aby sprawdzić, co się w niej stało. Tę stronę testową znajdziesz pod adresem: http://benfrain.com/easily-display-the-viewport-size-of-your-page-for-responsive-designs/. Mamy więc wszystko, co było nam potrzebne, by przetestować najlepsze elastyczne projekty witryn w sieci. Uruchom wybraną przez siebie przeglądarkę, włącz narzędzie pomiaru i otwórz witrynę http://thinkvitamin.com/.

24

Rozdział 1. • Podstawy HTML5, CSS3 i projektowania elastycznych układów stron

Obszar operacyjny a rozmiar ekranu Należy podkreślić, że pojęcia obszar operacyjny i rozmiar ekranu oznaczają co innego. Obszar operacyjny (ang. viewport) jest powierzchnią wewnątrz okna przeglądarki, z wyłączeniem pasków narzędzi zakładek i podobnych elementów. Prościej mówiąc, opisuje on obszar, w którym jest wyświetlana właściwa strona. Z kolei rozmiar ekranu jest parametrem opisującym fizyczną wielkość monitora urządzenia. Pamiętaj, że niektóre narzędzia zmiany wielkości wyświetlania uwzględniają takie komponenty, jak pasek URL, zakładki czy pole wyszukiwania, podczas gdy inne je ignorują. Na poniższym zrzucie ekranu właściwy rozmiar obszaru operacyjnego (widoczny w prawym górnym rogu) wynosi 1156×921 pikseli, podczas gdy rozszerzenie Firesizer zwróci wielkość okna wynoszącą 1171×1023 piksele.

Jeśli oglądasz tę witrynę w obszarze operacyjnym szerszym niż 1060 pikseli, Twoim oczom ukaże się układ podobny do widocznego na następującym zrzucie:

25

Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3

Jeżeli jednak Twój obszar operacyjny będzie węższy niż 1060 pikseli, ale szerszy niż 960, zobaczysz układ przedstawiony na zrzucie poniżej. Zauważ, jak bardzo zmienił się główny panel nawigacji obok logo. Ikonki po prawej stronie głównych treści ułożyły się jedna pod drugą. Wszystkie zmodyfikowanie elementy są w pełni funkcjonalne i co najważniejsze, nie zniknęły z ekranu. Zobaczmy, co się stanie, jeśli zmniejszymy szerokość obszaru operacyjnego do 880 pikseli. Nagłówek nie zmienił się, ale zwróć uwagę, że pasek boczny stał się jeszcze cieńszy; ikonki mają rozmiary rzędu 2 na 2, podczas gdy bloki tekstu uległy modyfikacji, jednak sam tekst przepływa w nich w naturalny sposób.

26

Rozdział 1. • Podstawy HTML5, CSS3 i projektowania elastycznych układów stron

Zmniejszmy teraz szerokość obszaru do 600 pikseli; łatwo zauważyć bardzo istotną zmianę, widoczną na następującym zrzucie ekranu. Co o tym sądzisz? Cały pasek boczny uległ zmianie w odpowiedzi na nasze działanie, co pozwoliło najważniejszej części strony — treści — wypełnić całą szerokość okna przeglądarki. Zwróć uwagę na poziomy układ linków w nagłówku, w odróżnieniu od pionowego obok logo, które teraz zmieniło wielkość. Wszystkie te zmiany poprawiają odbiór witryny przez użytkowników, niezależnie od rozmiaru obszaru operacyjnego.

27

Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3

Przejdźmy do kolejnego przykładu — witryny http://2011.dconstruct.org/. Jeżeli otworzysz ją w szerokim obszarze operacyjnym (tj. przekraczającym 1350 pikseli), witryna będzie prezentowała się podobnie jak na następującym zrzucie ekranu. Zwróć uwagę na siatkę złożoną z dziewięciu obrazów. Gdy tylko zmniejszysz szerokość obszaru (do wartości mniejszej niż 960 pikseli), dojdzie do poważnej zmiany. Siatka złożona z trzech szeregów trzech obrazów stanie się siatką trzech rzędów dwóch obrazów z dodatkowym wierszem trzech grafik na samym dole:

28

Rozdział 1. • Podstawy HTML5, CSS3 i projektowania elastycznych układów stron

Dalsze zmniejszanie szerokości obszaru operacyjnego poniżej wartości 720 pikseli spowoduje przekroczenie kolejnego „punktu krytycznego”; linki nagłówka przekształcą się w obrazy, które łatwiej wskazać na ekranach dotykowych. Jeżeli szerokość witryny zmniejszymy do wartości mniejszej niż 480 pikseli, siatka obrazów ulegnie kolejnej zmianie, pokazując trzy szeregi obrazów: w pierwszym rzędzie widoczne będą dwie grafiki, w drugim trzy, a w trzecim cztery. Obrazy te będą zmniejszać się w dalszym ciągu, do momentu gdy obszar operacyjny zostanie skurczony do 300 pikseli. Kolejny zrzut ekranu pokazuje, jak strona prezentuje się na iPhonie.

29

Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3

Źródła inspiracji w sieci Jednym z najlepszych zbiorów inspirujących projektów jest witryna http://mediaqueri.es. Jednak nie wszystkie zaprezentowane w niej strony zostały skonstruowane zgodnie z metodologią tworzenia wrażliwych projektów witryn, polegającą na konstruowaniu stron dla małych obszarów operacyjnych w pierwszej kolejności, a następnie zwiększaniu ich dla większych obszarów. Niezależnie od tego, na tym etapie pokazują one możliwości elastycznego projektu i są dobrymi przykładami, z których można czerpać pomysły. Choć przeglądanie tych witryn i zmiana wielkości obszarów operacyjnych ilustruje potencjał wrażliwych projektów witryn, nie pokazuje wcale zalet standardu HTML5. Wynikające z zastosowania HTML5 korzyści dotyczą tego, co odbywa się „w tle”, więc skupmy się teraz na zapleczu i sprawdźmy, czemu HTML5 jest tak dobrym rozwiązaniem.

30

Rozdział 1. • Podstawy HTML5, CSS3 i projektowania elastycznych układów stron

31

Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3

HTML5 — zalety stosowania HTML5 kładzie duży nacisk na uproszczenie składni wymaganej do stworzenia strony, która mogłaby zostać pozytywnie zwalidowana w standardach W3C i która poprawnie odnosi się do niezbędnych arkuszy stylów, kodu JavaScript i plików graficznych. W przypadku użytkowników smartfonów, zwykle wczytujących strony za pośrednictwem wolniejszego łącza, którzy są grupą docelową projektów, chcemy, żeby witryna nie tylko dopasowała się do obszaru operacyjnego ich urządzeń, ale też żeby była jak najszybsza. Choć usunięcie nadmiarowych elementów kodu przełoży się na zaledwie drobną oszczędność czasu, każda mała ilość jest przydatna.

32

Rozdział 1. • Podstawy HTML5, CSS3 i projektowania elastycznych układów stron

HTML5 oferuje dodatkowe korzyści oraz opcje w porównaniu z poprzednią wersją języka (HTML 4.01). Projektantów witryn w pierwszej kolejności zainteresują nowe elementy semantyczne, które dostarczają wyszukiwarkom szczegółowych informacji o strukturze strony. HTML5 umożliwia też zwracanie użytkownikowi informacji za pośrednictwem poprawionych elementów interaktywnych, w rodzaju przesłanych formularzy itp., często usuwając konieczność korzystania z pochłaniających więcej zasobów formularzy działających w oparciu o JavaScript. Jest to dobra wiadomość dla wszystkich zainteresowanych wrażliwym projektem witryny, gdyż dzięki temu możemy przygotować bardziej przejrzysty i szybciej przetwarzany kod.

Oszczędność czasu i kodu w HTML5 Pierwszą linijką każdego dokumentu HTML jest deklaracja DOCTYPE (deklaracja typu dokumentu). Jest to fragment, który jest zwykle automatycznie dodawany przez edytor kodu; możemy go też wkleić z istniejącego wzorca (bo przecież nikt nie wpisywałby deklaracji DOCTYPE dla HTML 4.01 ręcznie, prawda?). Przed nastaniem ery HTML5 DOCTYPE na standardowej stronie HTML 4.10 prezentowałby się w sposób następujący:

33

Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3

Obecnie ta sama deklaracja w języku HTML5 wygląda tak:

Tak jak wcześniej przyznałem, sam nie wpisuję deklaracji DOCTYPE ręcznie i Ty raczej też tego nie robisz. Mógłbyś więc zapytać mnie: gdzie ta cała rewolucja? Co w takim razie sądzisz o dodawaniu plików JavaScript i CSS do swoich stron? W standardzie HTML 4.01 poprawna forma odwoływania się do skryptu wyglądałaby tak:

HTML5 upraszcza sprawę:

Jak widać, nie ma już potrzeby deklarować atrybutu type w tym elemencie. Podobnie rzecz ma się z plikami CSS. Standard HTML5 akceptuje też napisany mniej skrupulatnie kod jako „poprawny”. Przykładowo, kod jest równie poprawny jak jego wersja z poprzedniego przykładu. Pominęliśmy tu znaki cudzysłowów wokół źródła skryptów i użyliśmy naprzemiennie wielkich i małych liter w nazwie znacznika i atrybutu. W HTML5 nie jest ważny wygląd składni — kod wciąż będzie walidowany poprawnie w walidatorze W3C HTML5 (http://validator.w3.org/). Jest to dobra wiadomość, nie tylko jeśli nie piszesz kodu uważnie, lecz również jeżeli zależy Ci na usunięciu jak największej liczby nadmiarowych znaków z dokumentu. Istnieje wiele innych rozwiązań, które znacznie upraszczają pisanie kodu. Wydaje mi się jednak, że ich omawianie nie będzie dla Ciebie wcale ekscytujące. Rzućmy więc szybko okiem na nowe elementy semantyczne w HTML5.

Nowe elementy semantyczne HTML5 Pracując nad strukturą strony HTML, przyjęło się deklarować nagłówek i nawigację w następujący sposób:

• Strona główna
• O witrynie

Rzuć teraz okiem na ten sam blok kodu w wydaniu HTML5:

• Strona główna
• O witrynie

34

Rozdział 1. • Podstawy HTML5, CSS3 i projektowania elastycznych układów stron

Co o tym sądzisz? W miejsce pozbawionego wyrazu znacznika wstawianego w roli każdego elementu struktury (choć trzeba przyznać, że ma on nazwę klasy używaną w formatowaniu stylami) HTML5 daje nam komponenty, które mają konkretne znaczenie. Zwykłe elementy strukturalne wewnątrz strony, w rodzaju nagłówka i nawigacji (i wiele innych), uzyskały własne znaczniki. Dzięki temu kod stron stał się bardziej „semantyczny” — np. znacznik wydaje się teraz mówić przeglądarkom: „Hej! Ta tutaj sekcja jest przeznaczona dla nawigacji”. Jest to dla nas dobra wiadomość i co ważniejsze jest to dobra wiadomość dla wyszukiwarek internetowych. Dzięki temu będą one w stanie „zrozumieć” strukturę naszych stron jeszcze lepiej i odpowiednio ją ocenić. Często zdarza się, że piszę strony ze świadomością, że zostaną one przekazane zespołowi zaplecza witryny (no, wiecie, tym wszystkim specjalistom od PHP, Ruby, .NET, ColdFusion i innych technologii), nim znajdą się w sieci. Aby tych specjalistów nie drażnić, często wstawiam komentarz po zamykającym znaczniku w kodzie, żeby wszystkie czytające go osoby (włącznie ze mną) mogły łatwo ustalić, gdzie on się kończy. HTML5 neguje tę konieczność. Czytając kod HTML5, łatwo zauważyć, jaki element zamyka znacznik , więc nie trzeba wstawiać w nim komentarzy. W tym miejscu zaledwie uchylamy rąbka tego, co elementy semantyczne HTML5 w sobie kryją. Nim przejdziemy do praktyki, pozostał nam jeszcze jeden znajomy, którego powinniśmy bliżej poznać. Ze wszystkich rozwiązań tworzących obraz współczesnej sieci fundamentalnym elementem nowej ery jest CSS3.

CSS3 a wrażliwy projekt witryn i dodatkowe możliwości arkuszy Jeśli pracowałeś jako projektant witryn w połowie lat 90., z pewnością przypomnisz sobie, że większość projektów witryn bazowała na strukturze tabeli i formatowanie tekstu przeplatało się z treścią dokumentu. Kaskadowe arkusze stylów (ang. Cascading Style Sheets — CSS) zostały wprowadzone jako metoda pozwalająca na odseparowanie projektu od treści. Przystosowanie się do stworzonych przez CSS realiów zajęło projektantom sporo czasu, lecz witryny w rodzaju http://www.csszengarden.com przetarły szlaki, pokazując, jak wiele można osiągnąć pod względem wizualnym za pomocą układu opartego na kaskadowych arkuszach stylów. Od tamtej pory CSS jest standardem definiowania warstwy prezentacji stron internetowych — CSS 2.1 jest aktualnie oficjalnie uznawaną wersją specyfikacji arkuszy stylów. CSS3 nie jest jeszcze w pełni uznany, ale już dziś możesz korzystać z niektórych jego możliwości. Według uwag zespołu pracującego nad CSS3 opublikowanych na stronie http://www.w3.org/TR/CSS/#css3: CSS poziomu 3. powstają na podstawie CSS poziomu 2., moduł po module, stawiając specyfikację CSS 2.1 w samym jego centrum. Każdy z tych modułów dodaje nowe opcje lub zastępuje część specyfikacji CSS 2.1. Grupa CSS Working Group nie chce, by starsze moduły CSS były sprzeczne ze specyfikacją CSS 2.1: mają one jedynie rozszerzać funkcjonalność i sprecyzować definicje.

35

Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3

Większa część specyfikacji W3C (z konieczności) jest napisana w stylu prawniczym. Mówiąc prościej, dla nas ma znaczenie tylko to, że CSS3 jest zbudowany w oparciu o „doczepiane” moduły, a więc nie stanowi jednolitej całości. Fundamentem tego nowego rozwiązania jest CSS 2.1, więc żadna z technik tego standardu nie jest porzucana. Zamiast tego niektóre bardziej dojrzałe moduły (nie wszystkie moduły mają ten sam stan gotowości) mogą być używane już dziś — nie trzeba więc czekać na ustanowienie pełnej specyfikacji.

Wniosek jest prosty — CSS3 niczego nie zepsuje! Trzeba podkreślić, że wykorzystanie nowych właściwości nie wiąże się z żadną karą w starszych wersjach przeglądarek, które nie będą w stanie ich „pojąć”. Starsze przeglądarki (w tym Internet Explorer 6, 7 i 8) po prostu zignorują właściwość CSS3, której nie będą w stanie przetworzyć. Daje nam to możliwość stopniowego poprawiania obszarów projektu dla nowszych przeglądarek, zapewniając jednocześnie, że strony będą prezentować się wystarczająco dobrze w starszych przeglądarkach.

Jak CSS3 rozwiązuje codzienne problemy projektantów witryn? Zastanówmy się nad częstym wyzwaniem, z którym musimy zmierzyć się w pracy nad wszystkimi projektami — stworzeniem zaokrąglonego rogu np. na elemencie ekranu dla przycisku lub komponencie nagłówka. Używając CSS 2.1, efekt ten otrzymamy, jeśli oprzemy nasze działania na technice zasuwanych drzwi (http://www.alistapart.com/articles/slidingdoors/), w myśl której nakładamy jeden obraz tła na drugi. Kod HTML, który pomógłby nam uzyskać podobny efekt, mógłby wyglądać w następujący sposób: Tytuł obszaru

Zaokrąglony efekt tła w elemencie otrzymalibyśmy wskutek stworzenia dwóch obrazów. Pierwszy z nich, o nazwie headerLeft.png, byłby szeroki na 15 pikseli i wysoki na 40 pikseli, a drugi o nazwie headerRight.png, w tym przykładzie byłby znacznie szerszy, niż moglibyśmy się spodziewać po nagłówku (w tym przypadku 280 pikseli). Każdy z nich stanowiłby połowę „zasuwanych drzwi”. Podczas gdy jeden element rozszerza się (będzie nim tekst w elemencie ), tło wypełnia przestrzeń, tworząc do pewnego stopnia przyszłościowe rozwiązanie kwestii zaokrąglenia wierzchołków. Przykład ten prezentuje się następująco w CSS: a { display: block; height: 40px; float: left; font-size: 1.2em; padding-right: 0.8em; background: url(images/headerRight.png) no-repeat scroll top right; }

36

Rozdział 1. • Podstawy HTML5, CSS3 i projektowania elastycznych układów stron

a span { background: url(images/headerLeft.png) no-repeat; display: block; line-height: 40px; padding-left: 0.8em; }

Poniższy zrzut ekranu pokazuje efekt naszych prac w przeglądarce Chrome (wersja 23.0).

Rozwiązaliśmy nasz problem, lecz wymagało to dodatkowego kodu (element nie ma żadnej wartości semantycznej) i dwóch dodatkowych żądań HTTP (żądań obrazów) wysłanych na serwer by stworzyć widoczny na ekranie efekt. Naturalnie moglibyśmy połączyć dwa obrazy w jeden, tworząc sprite i wykorzystać właściwość CSS background-position: by przemieścić element. Jednakże nawet biorąc pod uwagę oszczędność łącza, która się z tym wiąże, nie jest to elastyczne rozwiązanie. Co się stanie, jeśli klient zażyczy sobie bardziej zaokrąglonych wierzchołków? Co będzie, jeśli zapragnie zmienić kolor? Byłbyś zmuszony przerobić wszystkie obrazy. Niestety do czasu nastania ery CSS3 była to nasza codzienność, jak przekonało się wielu projektantów i deweloperów. Panie i Panowie, zobaczyłam przyszłość i była ona pod znakiem CSS3! Uprośćmy nasz kod HTML do postaci: Tytuł obszaru.

Teraz nasz kod CSS może zyskać następującą postać: a { float: left; height: 40px; line-height: 40px; padding-left: 0.8em; padding-right: 0.8em; border-top-left-radius: 8px; border-top-right-radius: 8px; background-image: url(images/headerTiny.png); background-repeat: repeat-x; }

Zrzut poniżej prezentuje, jak wykonany w CSS3 przycisk prezentuje się w tej samej przeglądarce (Chrome 23.0).

37

Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3

W tym przykładzie dwa wcześniej wspomniane obrazy zostały zastąpione jednym szerokim na 1 piksel, powtórzonym w osi x. Choć obraz ten ma szerokość 1 piksela, jego wysokość wynosi 40 pikseli, czyli więcej niż treści, które w nim umieścimy. Gdy używa się obrazu jako tła, zawsze trzeba zadeklarować nadmiarową wysokość, spodziewając się, że treści mogą wyjść poza wyznaczone ramy, co niestety wymusza konieczność zastosowania większych obrazów i pochłania dodatkową przepustowość łącza. W tym jednak przypadku, w odróżnieniu od poprzedniego rozwiązania opierającego się na obrazach, wierzchołek zostaje zaokrąglony przez border-radius i podobne właściwości. Co będzie, jeśli klient poprosi nas, byśmy zaokrąglili rogi trochę bardziej, do, powiedzmy, 12 pikseli? Nie ma problemu — wystarczy nadać właściwości borderradius wartość 12 pikseli i tyle było Twojej pracy. Własność zaokrąglonych krawędzi CSS3 działa szybko, jest elastyczna i obsługiwana przez przeglądarki Safari (3+), Firefox (v1+), Opera (10.5+), Chrome (3+) i Internet Explorer 9. Microsoft był tak dumny z wprowadzenia obsługi tej właściwości w Internet Explorerze 9 (mam nadzieję, że wyczuwasz tu sarkazm), że kazał zaprojektować interaktywną stronę demonstrującą różne efekty, które można opracować, korzystając z właściwości border-radius. Całą tę prezentację znajdziesz pod następującym adresem: http://ie.microsoft.com/testdrive/html5/borderradius/default.html. CSS3 idzie dalej, eliminując potrzebę stosowania grafik gradientów w tle, pozwalając wygenerować podobny efekt w samej przeglądarce. Właściwość ta nie jest równie dobrze obsługiwana, lecz deklaracja w rodzaju linear-gradient (yellow, blue) stworzy gradient dowolnego elementu tła na podstawie samego arkusza CSS3. Gradient może zostać zadeklarowany za pomocą nazw kolorów, tradycyjnych wartości heksadecymalnych (np. #BFBFBF) lub jednego z trybów barw CSS3 (więcej na ten temat przeczytasz w rozdziale 5., „CSS3: Selektory, typografia i tryby barw”). Jeżeli nie przeszkadza Ci, że użytkownicy starszych przeglądarek w miejscu gradientu ujrzą jednolity kolor (zamiast niczego), przedstawiona niżej reguła wygeneruje barwę w sytuacji, gdy przeglądarka nie będzie w stanie wygenerować gradientu. background-color: background-image: background-image: background-image: background-image: background-image: background-image:

38

#42c264; -webkit-linear-gradient(#4fec50, #42c264); -moz-linear-gradient(#4fec50, #42c264); -o-linear-gradient(#4fec50, #42c264); -ms-linear-gradient(#4fec50, #42c264); -chrome-linear-gradient(#4fec50, #42c264); linear-gradient(#4fec50, #42c264);

Rozdział 1. • Podstawy HTML5, CSS3 i projektowania elastycznych układów stron

Właściwość linear-gradient nakazuje przeglądarce wygenerować pierwszą barwę (w tym przykładzie #4fec50) i stopniowo przejść do drugiej wartości (#42c264). Łatwo zauważysz, że właściwość background-image linear-gradient została powtórzona w regule CSS kilkakrotnie z różnymi przedrostkami; przykładowo z przedrostkiem -webkit-. Pozwala to różnym producentom przeglądarek (oznaczanym np. -moz- w przypadku Mozilli Firefox i -msw przypadku Microsoft Internet Explorera) eksperymentować z ich własnymi implementacjami nowych właściwości CSS3 przed wprowadzeniem ostatecznej wersji, w której przedrostki zostaną usunięte. Wykorzystujemy tu kaskadowość arkuszy stylów, umieszczając wersję pozbawioną przedrostka jako ostatnią — zastąpi ona poprzednie deklaracje, jeśli zostanie rozpoznana.

Patrz, mamo! — bez obrazów! Poniższy zrzut ekranu przedstawia stworzony w całości za pomocą CSS3 przycisk w przeglądarce Chrome.

Chyba przyznasz mi rację, że wszelkie różnice między wersją przycisku stworzoną z wykorzystaniem grafiki i o CSS są trywialne. Konstruowanie elementów wizualnych za pomocą CSS3 sprawia jednak, że nasz skalowalny projekt jest bardziej przejrzysty, niż gdybyśmy zbudowali te elementy w oparciu o grafiki. Co więcej, gradienty obrazów są dobrze obsługiwane w nowoczesnych przeglądarkach na urządzeniach przenośnych; jedyną przeglądarką, która sobie z nimi nie radzi, jest Internet Explorer 9 i jej starsze wersje.

Co jeszcze CSS3 ma do zaoferowania? Do tej pory przyjrzeliśmy się bardzo prostemu przykładowi ilustrującemu, jak bardzo CSS3 może pomóc w działaniach deweloperskich. Pofolgujmy więc naszym apetytom i sprawdźmy, jaką ucztę CSS3 jest w stanie nam przygotować. Uruchom przeglądarkę Safari lub Chrome i udaj się na stronę http://www.panic.com/blog/. Choć sam projekt witryny nie jest niestety skalowalny, tym razem skupimy się tylko na przypiętych do tła notkach u góry strony. Wskaż je myszą — zobacz, jak się odchylają. Fajne, nie? W przeszłości podobny efekt można było uzyskać, korzystając z pochłaniających wiele zasobów technologii Flash i JavaScript. Tutaj uzyskujemy go tylko 39

Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3

w wyniku transformacji CSS3. Zastosowanie CSS3 zamiast JavaScriptu i Flasha znacznie zmniejsza pochłanianie przez animację zasobu, czyniąc ją łatwiejszą w utrzymaniu, a przez to doskonałą dla RWD. Przeglądarki, które obsługują tę własność, zinterpretują ją poprawnie, podczas gdy inne po prostu wygenerują statyczny obraz w jej miejsce.

Inny świetny przykład transformacji CSS3 znajdziesz w witrynie http://demo.marcofolio.net/ 3d_animation_css3/. I znów trzeba przyznać, że nie jest to strona przestrzegająca zasad skalowalnego projektowania, ale przecież zależy nam po prostu na nauczeniu się kilku trików CSS. Najpierw otwórz tę stronę w przeglądarkach Internet Explorer 9 i Firefox (w wersji 16.0.2 Firefox wciąż nie obsługuje modułu transformacji CSS3). Teraz rzuć okiem na Safari 5+ lub Chrome 16+. Poniższy zrzut ekranu nie opisuje adekwatnie tego, co dzieje się na stronie, więc jeśli sam nie zerkniesz, będziesz musiał zadowolić się moją opinią — ta strona jest dobra.

40

Rozdział 1. • Podstawy HTML5, CSS3 i projektowania elastycznych układów stron

Jednakże świetnie prezentujące się efekty nie są jedynie domeną przeglądarek działających w oparciu o silnik WebKit, w rodzaju Chrome’a i Safari. Strona kryjąca się pod poniższym adresem działa dobrze również w Firefoksie i jest kolejnym przykładem zastosowania CSS3 w spektakularny sposób. http://designlovr.com/examples/dynamic_stack_of_index_cards/ Oczywiście efekty te nie są niezbędne w witrynie. Ilustrują one jednak dobrze ideę „stopniowego usprawniania”. W przeglądarkach, które nie obsługują dobrze animacji, obiekty będą jedynie statycznymi obrazami. Mimo to użytkownicy dysponujący bardziej nowoczesnymi przeglądarkami będą mogli podziwiać ulepszenie. Chociaż aktualnie obsługa transformacji 3D w CSS3 jest względnie ograniczona, właściwości cieni, gradientów, zaokrąglania rogów, barwy RGB(A) i wykorzystanie wielu obrazów tła naraz są powszechnie rozpoznawane i zapewniają elastyczne rozwiązania codziennych problemów projektantów, które prześladowały nas przez całe lata.

41

Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3

Czy standardy HTML5 i CSS3 działają poprawnie już dziś? Każde narzędzie (lub technika) powinno być wykorzystane tylko w sytuacji, gdy dana aplikacja. Często zdarza się, że projekty projektantów i programistów pierwszej warstwy witryny muszą zostać wykonane w pewnym czasie ze skończonym nakładem zasobów. Internet Explorer 7 i 8 nie obsługuje nowych elementów semantycznych HTML5 i własności CSS3, więc jeśli większość użytkowników danej witryny używa przeglądarek Internet Explorer 7 i 8, nie ma sensu koncentrować się na zbudowaniu specjalnie dla nich skalowalnego układu w HTML5 i CSS3. Nie oznacza to wcale, że byłoby to niewykonalne zadanie. Jak przekonasz się, czytając rozdział 9., „Rozwiązywanie problemów kompatybilności układów wrażliwych z przeglądarkami”, istnieje wiele narzędzi (zwanych wypełnieniami, ponieważ wypełniają luki

42

Rozdział 1. • Podstawy HTML5, CSS3 i projektowania elastycznych układów stron

w starszych przeglądarkach) stworzonych, aby zagwarantować przeglądarkom (głównie Internet Explorerowi), które nie obsługują nowoczesnych opcji, wsparcie. Przyjęcie bardziej rozsądnego podejścia do projektowania RWD już na samym początku jest jednak najlepszym rozwiązaniem. Sam, nauczony doświadczeniem, ustalam następujące kwestie na samym początku:  Czy klientowi zależy na uzyskaniu wsparcia dla jak najszerszego rynku

użytkowników w Internecie? Jeśli tak, metodologia RWD będzie odpowiednia.  Czy klient chce, by jego witryna miała przejrzysty, najszybszy i łatwy w utrzymaniu kod? Jeśli tak, metodologia RWD będzie odpowiednia.  Czy klient zdaje sobie sprawę, że witryna może i powinna być inaczej odbierana w różnych przeglądarkach? Jeśli tak, metodologia RWD będzie odpowiednia.  Czy klient wymaga, aby projekt witryny wyglądał identycznie w różnych

przeglądarkach, w tym w Internet Explorerze 8 i jego starszych wersjach? Jeśli tak, metodologia RWD nie będzie najlepszym rozwiązaniem.  Czy 70% lub więcej aktualnych bądź spodziewanych użytkowników witryny będzie

korzystać z Internet Explorera 8 i jego starszych wersji? Jeśli tak, metodologia RWD nie będzie najlepszym rozwiązaniem. Należy jeszcze raz podkreślić, że w sytuacji gdy dysponujesz odpowiednim budżetem, może się okazać się, że odrębna wersja witryny na urządzenia przenośne jest lepszą alternatywą od skalowalnego projektu. Celem klaryfikacji, używając terminu „witryny mobilne”, mam na myśli rozwiązania powstałe z myślą o tabletach i telefonach komórkowych, które generują różne treści, te zaś mogą zostać inaczej odebrane przez użytkowników urządzeń przenośnych. Nie sądzę aby prawdziwy zwolennik metodologii RWD twierdził, że jej techniki stanowiły odpowiedni substytut „witryn mobilnych” w każdej sytuacji.

RWD nie jest lekarstwem na wszystko Warto jeszcze raz podkreślić: projektowanie skalowalnych witryn przy użyciu HTML5 i CSS3 nie jest cudownym lekiem na wszystkie wyzwania związane z układem strony i zamieszczonymi na niej treściami. Jak zawsze w przypadku projektowania witryn, to detale przedsięwzięcia (czyli budżet, docelowa grupa użytkowników i cel witryny) powinny dyktować sposób jej implementacji. Z mojego doświadczenia wynika jednak, że jeżeli Twój budżet jest ograniczony lub zaprogramowanie właściwej „witryny mobilnej” nie jest możliwe, prawie zawsze metodologia RWD zapewnia lepszy, pełniejszy odbiór witryny, niż standardowy układ o stałej szerokości.

43

Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3

Uświadomienie klientom, że witryna nie powinna prezentować się tak samo w każdej przeglądarce Ostatnią przeszkodą, którą należy pokonać przed rozpoczęciem pracy nad elastycznym układem, jest nastawienie. Pod wieloma względami jest to najtrudniejsze wyzwanie. Przykładowo klienci często zwracają się do mnie z prośbą o dostosowanie istniejącego projektu witryny do standardów zgodnych z HTML/CSS i stronami zbudowanymi w oparciu o bibliotekę jQuery. Moje własne doświadczenie wskazuje, że rzadko zdarza się (kiedy piszę „rzadko”, mam na myśli, że mnie się to nie przydarzyło), by projektant grafiki istniejącej witryny o stałej szerokości tworzył ją z myślą o czymś innym niż komputery stacjonarne. W takiej sytuacji zaczynam pracę od przygotowania doskonałej co do piksela kopii tego projektu w każdej przeglądarce. To, czy ta operacja się powiedzie, czy nie, będzie świadczyć o moim sukcesie w oczach klienta. Takie podejście jest szczególnie mocno zakorzenione w głowach osób mających doświadczenie z drukowanymi formami projektu graficznego. Łatwo zrozumieć ich sposób myślenia: projekt witryny został podpisany przez klienta, po czym przekazali go webdeweloperowi (Tobie lub mnie), więc powinniśmy zadbać o to, by został on odwzorowany możliwie jak najdokładniej we wszystkich przeglądarkach. Klient dostaje to, co widzi. Jeżeli jednak próbowałeś uzyskać efekty wypływające z nowoczesnych osiągnięć webdesignu w przeglądarkach Internet Explorer 6 i 7 na poziomie porównywalnym z rezultatami we współczesnych przeglądarkach — w rodzaju Safari, Firefoksa lub Chrome’a — zdajesz sobie sprawę ze skali wyzwania. Często wykorzystuję nawet 30% czasu pracy i budżetu, aby naprawić problemy pojawiające się w starszych przeglądarkach. Czas ten mógłbym poświęcić na konstruowanie usprawnień i uproszczenie kodu z myślą o coraz większej rzeszy użytkowników oglądających strony w nowoczesnych przeglądarkach zamiast wprowadzać wypełnienia i obchodzić ograniczenia, by wyświetlić zaokrąglone wierzchołki, prześwitujące obrazy, prawidłowo ułożyć elementy itp. dla coraz mniejszego grona odbiorców. Niestety jedynym antidotum na tę sytuację jest uświadamianie. Klient musi wiedzieć, czemu skalowalny projekt witryny jest wart jego uwagi, co sobą wnosi i czemu skończony projekt nie będzie i nie powinien wyglądać identycznie we wszystkich obszarach operacyjnych i przeglądarkach. Niektórych przekonasz, innych nie. Niestety zdarzają się osoby które pragną, by zaokrąglone krawędzie i rzucane cienie wyglądały równie dobrze w Internet Explorerze 6 i w innych przeglądarkach. Przed podjęciem się projektu, niezależnie od tego, czy zastosuję w nim metodologię RWD, czy nie, staram się wyjaśnić klientom następujące kwestie:  Pozwalając na wyświetlanie stron w starszych przeglądarkach w inny sposób, gwarantują sobie, że kod strony będzie łatwiejszy w utrzymaniu i uaktualnieniu w przyszłości.

44

Rozdział 1. • Podstawy HTML5, CSS3 i projektowania elastycznych układów stron

 Sprawienie, by wszystkie elementy witryny wyglądały tak samo nawet w starszych

przeglądarkach (np. Internet Explorerze 8 i jego wcześniejszych wersjach) skutkuje dodaniem większej liczby obrazów w witrynie. To sprawia, że witryna działa wolniej, koszt jej stworzenia wzrasta i jest trudniejsza w utrzymaniu.  Mniej kodu, który jest zrozumiały dla nowoczesnych przeglądarek, oznacza szybsze

wczytywanie strony. Strona, która jest wczytywana szybciej, uzyska wyższą pozycję rankingową niż wolniejsza.  Liczba użytkowników korzystających ze starszych przeglądarek kurczy się, podczas

gdy liczba osób korzystających z najnowszych rozwiązań wzrasta — czemu nie wesprzeć tych drugich?  Co najważniejsze, stawiając na nowoczesne przeglądarki, wykorzystasz w pełni

potencjał elastycznych projektów, które dopasują się do różnych wielkości obszarów operacyjnych przeglądarek w różnych urządzeniach.

Podsumowanie Ustaliliśmy, na czym polega skalowalny lub elastyczny projekt witryny (ang. Responsive Web Design — RWD) i przyjrzeliśmy się stworzonym zgodnie z tą metodologią stronom wykorzystującym narzędzia i techniki, które będziemy omawiać. Podkreśliliśmy też konieczność zrezygnowania z kładzenia nacisku na projektowanie dla komputerów stacjonarnych i przyjęliśmy bardziej agnostyczne pod kątem typu urządzenia podejście — planowanie rozkładu naszych treści, zaczynając od najmniejszego obszaru operacyjnego, i ulepszanie układu dla większych rozmiarów strony. Przyjrzeliśmy się specyfikacji standardu HTML5, odkrywając, że dużą jej część możemy wykorzystać już dziś. W szczególności nowe elementy semantyczne pozwolą nam stworzyć strony zawierające mniej kodu, który będzie łatwiejszy do zrozumienia. Punktem zwrotnym w tworzeniu skalowalnych projektów jest CSS3. Nim wykorzystamy jego możliwości do zapewnienia graficznego urozmaicenia w postaci gradientów, zaokrąglonych wierzchołków, cieni tekstu, animacji i transformacji zaprzęgniemy ten standard do bardziej kluczowych zadań. Posługując się wywołaniami medialnymi CSS3, będziemy w stanie dopasować odpowiednie reguły CSS3 do właściwych obszarów operacyjnych. W następnym rozdziale na dobre zaczniemy naszą przygodę z elastycznym projektem witryny.

45

Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3

46

2 Zapytania medialne: obsługa zróżnicowanych obszarów operacyjnych W poprzednim rozdziale zauważyliśmy, że CSS3 składa się z pewnej liczby oddzielnych modułów. Jednym z tych modułów są zapytania medialne (ang. media queries) CSS3. Zapytania medialne pozwalają na wywołanie określonych właściwości CSS w zależności od parametrów wyświetlania urządzenia. Przykładowo wystarczy tylko kilka linijek kodu CSS, aby zmienić sposób wyświetlania strony w odpowiedzi na zmianę szerokości obszaru operacyjnego, współczynnika proporcji ekranu, trybu orientacji (pejzaż lub portret) itp. W tym rozdziale:  dowiesz się, czemu zapytania medialne są tak ważne dla metodologii RWD,  poznasz sposób definiowania zapytań medialnych CSS3,  poznasz parametry ekranu urządzenia, które mogą zostać przetestowane,  nauczysz się definiować zapytania medialne,  nauczysz się dopasowywać reguły CSS do konkretnych obszarów operacyjnych,  dowiesz się, jak zapewnić prawidłowy odczyt zapytań medialnych w systemach iOS

i Android na urządzenia mobilne.

Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3

Zapytań medialnych możesz używać już dziś Zapytania medialne już teraz są w powszechnym użyciu i cieszą się bardzo dobrą obsługą w przeglądarkach (Firefox 3.6+, Safari 4+, Chrome 4+, Opera 9.5+, iOS Safari 3.2+, Opera Mobile 10+, Android 2.1+ i Internet Explorer 9+). Co więcej, istnieje wiele łatwych do wdrożenia poprawek (stworzonych w oparciu o JavaScript) przygotowanych z myślą o starszych przeglądarkach w rodzaju Internet Explorera 6, 7 i 8. Jeśli chciałbyś zastosować te poprawki już teraz, rzuć okiem na rozdział 9., „Rozwiązywanie problemów kompatybilności układów wrażliwych z przeglądarkami”. Innymi słowy, nie ma żadnych przeciwwskazań, aby korzystać z zapytań medialnych już dziś!

Specyfikacja tego modułu przechodzi przez proces ratyfikacji w konsorcjum W3C (jeśli masz wolny dzień, zapoznaj się z przebiegiem tego procesu przedstawionym na stronie http://www.w3.org/2005/10/Process20051014/tr), rozpoczynającym się od projektu roboczego (ang. Working Draft — WD), przechodzącym przez etap rekomendacji kandydata (ang. Candidate Recommendation — CR) i proponowanej rekomendacji (ang. Proposed Recommendation — PR), aby zakończyć się wiele lat później na etapie oficjalnej rekomendacji konsorcjum W3C (ang. W3C Recommendation — REC). Wynika z tego, że bezpieczniejszymi modułami są te, które osiągnęły wyższy stopień dojrzałości. Przykładowo moduł transformacji CSS poziomu 3. (http://www.w3.org/TR/css3-3d-transforms/) osiągnął status projektu roboczego w marcu 2009 roku, w związku z czym jest on obsługiwany znacznie gorzej niż moduły będące na etapie CR — takie jak zapytania medialne.

Skalowalne projekty a zapytania medialne Gdyby zapytania medialne nie istniały, nie bylibyśmy w stanie dopasować odpowiednich stylów CSS do parametrów urządzenia, w tym wymiarów obszaru operacyjnego. Na stronie specyfikacji W3C modułu zapytań medialnych CSS3 (http://www.w3.org/TR/css3-mediaqueries/) znajdziesz następujący opis: HTML4 i CSS2 pozwalają na stworzenie zależnych od multimediów arkuszy stylów dopasowanych do różnych typów urządzeń. Przykładowo ten sam dokument może używać fontów bezszeryfowych (sans-serif) przy wyświetlaniu na ekranie i zostać wydrukowany w foncie szeryfowym (serif). Te dwie metody generowania treści zostały zdefiniowane typami mediów screen i print. Zapytania medialne rozszerzają funkcjonalność typów medialnych, pozwalając na bardziej precyzyjne dopasowanie arkuszy stylów. Zapytanie medialne składa się z typu medialnego i opcjonalnie kilku wyrażeń, które sprawdzają, czy zaszły warunki uruchamiające konkretne reguły. Spośród parametrów sprawdzanych przez zapytania medialne szczególnie ważne są width, height i color. Używając zapytań medialnych, można dopasować warstwę prezentacji do pewnego zakresu urządzeń docelowych bez konieczności modyfikowania samych treści.

48

Rozdział 2. • Zapytania medialne: obsługa zróżnicowanych obszarów operacyjnych

Składnia zapytań medialnych Jak zapytanie medialne wygląda i — co ważniejsze — jak ono działa? Wprowadź poniższy kod na samym dole dowolnego pliku CSS: body { background-color: grey; } @media screen and (max-width: 960px) body { background-color: red; } } @media screen and (max-width: 768px) body { background-color: orange; } } @media screen and (max-width: 550px) body { background-color: yellow; } } @media screen and (max-width: 320px) body { background-color: green; } }

{

{

{

{

Otwórz teraz plik powiązanej z arkuszem strony w nowoczesnej przeglądarce (w Internet Explorerze 9, jeśli korzystasz z przeglądarek Microsoftu) i zmień wielkość okna. Barwa strony zmieni się w zależności od aktualnych wymiarów obszaru operacyjnego. W tym przykładzie posłużyłem się standardowymi nazwami barw, ale zwykle w takich przypadkach używa się kodu heksadecymalnego, np. #ffffff. Czas zająć się dokładniej zapytaniami medialnymi i sprawdzić, jak można je najlepiej wykorzystać. Jeżeli pracowałeś już z arkuszami stylów CSS2, to wiesz, że można w nich zadeklarować rodzaj urządzenia (używając słów kluczowych screen i print) w atrybucie media zagnieżdżonym w znaczniku . Taką deklarację należy umieścić wewnątrz elementu ; ma ona następującą postać:

Zapytania medialne pozwalają na dopasowanie formatowania strony do możliwości i opcji urządzenia, a nie tylko do jego typu. Można to potraktować jak skierowane do przeglądarki zapytanie. Jeśli przeglądarka „stwierdzi”, że podane w zapytaniu warunki zostały spełnione, nada właściwe formatowanie. Jeżeli tak nie będzie, nałożone zostanie inne. Zamiast wysyłać

49

Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3

do przeglądarki zapytanie: „Czy jesteś ekranem?” — co było dawniej szczytem możliwości CSS2 — zapytania medialne są bardziej dociekliwe. Mogą zapytać: „czy jesteś ekranem w orientacji portretowej?”. Rzuć okiem na poniższy przykład: