129 14 23MB
Polish Pages 225 Year 2014
Tytuł oryginału: Responsive Web Design with jQuery Tłumaczenie: Wojciech Moch ISBN: 978-83-246-9189-0 Copyright © 2013 Packt Publishing. First published in the English language under the title „Responsive Web Design with jQuery”. Polish edition copyright © 2014 by Helion S.A. All rights reserved. All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from the Publisher. Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji. Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli. Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte w tej książce informacje były kompletne i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION nie ponoszą również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce. Wydawnictwo HELION ul. Kościuszki 1c, 44-100 GLIWICE tel. 32 231 22 19, 32 230 98 63 e-mail: [email protected] WWW: http://helion.pl (księgarnia internetowa, katalog książek) Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/rewejq_ebook Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję. Printed in Poland.
Poleć książkę na Facebook.com Kup w wersji papierowej Oceń książkę
Księgarnia internetowa Lubię to! » Nasza społeczność
Spis treści O autorze
9
O recenzentach
11
Wstęp
15
Co znajdziesz w tej książce? Czego potrzebujesz? Dla kogo jest ta książka? Konwencje Pobranie przykładów dla książki Errata Piractwo
Rozdział 1. Poznawanie projektów responsywnych Koncepcja responsywnego projektu stron Porównanie stron responsywnych, płynnych i adaptacyjnych Dopasowywanie strony WWW do ekranu za pomocą zapytań o media Najpierw-mobilne Używanie siatek Ćwiczenie 1. — projektowanie z siatkami w modelu najpierw-mobilne Podsumowanie
Rozdział 2. Projektowanie responsywnych układów i siatek Dostosowywanie strony za pomocą języka JavaScript Adapt.js Respond.js W jaki sposób wartości procentowe nadają strukturom elastyczność? Konwersja pikseli na procenty Czym jest system responsywnej siatki? Systemy responsywnych siatek
15 16 17 17 18 18 18
19 20 21 22 23 25 25 26
27 28 28 30 30 32 34 35
Responsive Web Design z jQuery
Szablony siatek Photoshopa Przygotowanie znacznika meta widoku Ćwiczenie 2a — tworzenie układu siatek Ćwiczenie 2b — wykorzystanie biblioteki Foundation4 do przygotowania struktury strony Podsumowanie
Rozdział 3. Tworzenie responsywnego menu Projektowanie menu w celu poprawienia użyteczności Najczęściej używane wzorce responsywnego menu Top nav Footer anchor Toggle Menu Select Footer-only Multi toggle Toggle and slide Menu off-canvas Ćwiczenie 3. — dopasowywanie menu z wykorzystaniem rozwiązania Toggle Menu Podsumowanie
Rozdział 4. Projektowanie responsywnych tekstów Konwertowanie tekstu na jednostki względne Jednostka względna — procentowa Jednostka względna — em Jednostka względna — rem Poprawianie wymiarowania elementów za pomocą właściwości box-sizing Dopasowywanie rodziny czcionek do potrzeb nagłówków responsywnych Narzędzie Font Squirrel do generowania czcionek Wtyczka FitText Wtyczka SlabText Lettering Kern.js Responsive Measure Ćwiczenie 4. — dopasowywanie nagłówka strony Podsumowanie
Rozdział 5. Przygotowywanie obrazków i filmów Prosta zmiana wymiarów obrazka za pomocą CSS Stosowanie punktów zmiany obrazków Jak działa znacznik picture? Kontrolowanie nastaw responsywnych obrazków Biblioteka CSS — Focal Point Alternatywne rozwiązanie ze znacznikiem picture Foresight — wybieranie właściwego obrazka dla danej wielkości ekranu Picturefill — rozwiązanie najbardziej przypominające znacznik picture
4
42 43 44 45 50
51 52 53 53 55 58 60 61 62 65 67 69 69
71 72 72 73 74 74 76 77 80 81 82 85 86 87 88
89 90 90 92 92 93 95 95 98
Spis treści
Tworzenie responsywnych obrazków tła za pomocą wtyczek jQuery Anystretch — łatwe rozciąganie tła Backstretch — tworzenie responsywnego pokazu slajdów Obsługa ekranów o wysokiej gęstości Tworzenie responsywnych elementów filmowych FitVids — szybkie rozwiązanie problemów z filmami Ćwiczenie 5. — tworzenie różnych wersji obrazka na główną stronę witryny Podsumowanie
Rozdział 6. Tworzenie responsywnych galerii obrazów Responsywne galerie obrazów Wtyczka Elastislide FlexSlider2 — w pełni responsywna galeria ResponsiveSlides — najlepsza z prostych galerii Swiper — dotykowa galeria obrazków Slicebox — animacja z użyciem obrazów z galerii Wykorzystanie gestów dotykowych Implementowanie zdarzeń dotykowych we wtyczkach JavaScript QuoJS — prosta biblioteka interakcji dotykowych Hammer — mała biblioteka wielodotyku Ćwiczenie 6. — tworzenie galerii obrazków za pomocą wtyczki Swiper Podsumowanie
Rozdział 7. Projektowanie tabel responsywnych Tabele responsywne Rozwijane tabele responsywne Rozszerzenia do wtyczki Stackedtables Jak to zrobić, wykorzystując tabelę z poprzedniego przykładu? Poziome przewijanie Odwrócenie ułożenia nagłówka Odnośnik do pełnej tabeli Ćwiczenie 7. — tworzenie tabeli responsywnej z cenami za pomocą wtyczki FooTable Podsumowanie
Rozdział 8. Implementowanie formularzy responsywnych Typy i atrybuty elementów formularzy Funkcja autouzupełniania z wtyczką Magicsuggest Jak to zaimplementować? Funkcje wyboru daty i czasu Pickadate — responsywne wybieranie daty i czasu Funkcja podpowiedzi Tooltipster — nowoczesna funkcja podpowiedzi Tworzenie formularzy responsywnych za pomocą biblioteki IdealForms Jak to zaimplementować?
98 99 101 103 104 105 106 108
109 109 110 115 119 123 128 129 131 131 132 133 134
135 135 136 139 141 141 143 145 147 149 149
151 152 153 153 155 155 157 157 158 159
5
Responsive Web Design z jQuery
Ćwiczenie 8. — tworzenie formularza kontaktowego za pomocą biblioteki IdealForms Podsumowanie
Rozdział 9. Testowanie responsywnych stron Symulowanie urządzeń za pomocą narzędzi dla przeglądarek Narzędzie sieciowe Viewport Resizer Narzędzie sieciowe Surveyor Narzędzie sieciowe ScreenFly Emulator przeglądarki Opera Mobile Wskazówki dotyczące testowania responsywnych stron WWW Ćwiczenie 9. — przetestujmy naszą stronę na różnych wielkościach ekranu Podsumowanie
Rozdział 10. Prawidłowa obsługa przeglądarek Sprawdzanie funkcji obsługiwanych przez przeglądarkę CanIUse.com Mobile HTML5.org QuirksMode.org Definiowanie rozwiązań zastępczych Narzędzia do wykrywania dostępności funkcji CSS Browser Selector + Modernizr YepNope.js Implementacje wypełniaczy MediaElements.js SVG Respond.js Podsumowanie
Rozdział 11. Przydatne wtyczki responsywne Wtyczki obsługujące strukturę strony Tworzenie prostych struktur responsywnych za pomocą wtyczki Columns Użycie wtyczki Equalize do dopasowania wymiarów elementów Implementowanie strony z kafelkami za pomocą wtyczki Packery Wtyczki tworzące menu nawigacyjne Tworzenie menu bocznego za pomocą wtyczki Sidr EasyResponsiveTabstoAccordion Większa elastyczność menu dzięki wtyczce FlaxNav Różne rozwiązania SVGeezy Prefix free Magnific Popup Riloadr Calendario Podsumowanie
6
162 163
165 165 166 166 168 169 169 170 170
173 174 174 175 175 176 177 177 178 180 181 181 183 184 185
187 187 188 191 192 194 195 197 198 200 201 201 203 204 206 209
Spis treści
Rozdział 12. Poprawianie wydajności stron Wykorzystywanie sieci dostarczania treści Zmniejszenie liczby żądań HTTP Warunkowe ładowanie komponentów Konsolidacja i minimalizacja zasobów (skryptów JavaScript i stylów CSS) Technika CSS Sprite Zmniejszanie wielkości przesyłanych plików Progresywne obrazki JPEG Optymalizacja obrazków Upraszczanie stron za pomocą HTML5 i CSS3 Testowanie wydajności stron WWW PageSpeed Insights YSlow WebPagetest Mobitest Podsumowanie
Skorowidz
211 211 212 212 212 213 214 214 215 216 216 217 218 219 219 220
221
7
Responsive Web Design z jQuery
8
O autorze Gilberto Crespo jest utalentowanym projektantem aplikacji, który już w 2005 roku wykorzystywał do tego celu CSS2, HTML4 oraz układy beztabelowe. Zawsze stara się poszerzać swoją wiedzę, podążając za głównymi trendami, takimi jak HTML5, CSS3 i jQuery. W ciągu ostatnich pięciu lat udoskonalał proces projektowania stron WWW, wymyślając i publikując najlepsze metody w zatrudniającej go firmie CI&T. W ciągu ostatnich dwóch lat pracował wyłącznie nad responsywnymi witrynami i wspierał innych projektantów takich witryn, odpowiadając na ich pytania. Zawsze podąża za nowymi technologiami i trendami w projektowaniu. Już od 2011 roku z pasją tworzy nowe skórki dla Drupala i projektuje wygląd stron internetowych. Aktualnie pisze też artykuły techniczne, a także prowadzi wykłady w Brazylii, dzieląc się swoją wiedzą ze studentami oraz całą społecznością Drupala. Poza pracą prowadzi normalne życie, cały czas próbując uczyć się czegoś nowego. Skontaktuj się z nim pod adresem www.gilcrespo.com. Dziękuję mojej ukochanej żonie Gabrieli za jej nieustającą wyrozumiałość i cierpliwość. Pragnę także podziękować moim rodzicom i przyjaciołom za wsparcie podczas pisania tej książki.
Responsive Web Design z jQuery
10
O recenzentach Maria Gabriela Didoni ma ponad 12 lat doświadczenia w nauczaniu języka angielskiego. Zdobyła tytuły naukowe w językach portugalskim, angielskim, hiszpańskim oraz w dziedzinie tłumaczeń. Tego wszystkiego uczyła się na uniwersytecie Sagrado Coração University w São Paulo. Maria jest też posiadaczką certyfikatu pedagogicznego wydanego przez ten sam uniwersytet i dalej kształci się w zakresie języka angielskiego w szkole Vancouver English Center w Kanadzie.
Joydip Kanjilal ma tytuł MVP (Microsoft Most Valuable Professional) z ASP.NET, często przemawia na konferencjach. Napisał już kilka książek i artykułów. Ma ponad 16 lat doświadczenia w programowaniu, w tym przynajmniej 10 lat z platformą .NET i powiązanymi z nią technologiami. Kilka razy otrzymał tytuł MSDN Featured Developer of the Fortnight, a strona www. community-credit.com wielokrotnie przyznawała mu tytuł Community Credit Winner. Jest autorem takich książek jak Visual Studio Six in One (Wrox), ASP.NET 4.0 Programming (Mc-Graw Hill), Entity Framework Tutorial (Packt), Pro Sync Framework (Apress), Sams Teach Yourself ASP.NET Ajax in 24 Hours (Sams) i ASP.NET Data Presentation Controls Essentials (Packt). Joydip napisał ponad 250 artykułów opublikowanych w poważanych witrynach, takich jak www. msdn.microsoft.com, www.code-magazine.com, www.asptoday.com, www.devx.com, www.ddj. com, www.aspalliance.com, www.aspnetpro.com, www.sql-server-performance.com i www. sswug.com. Wiele z tych artykułów zostało też opublikowanych na stronie www.asp.net — oficjalnej stronie Microsoftu poświęconej technologii ASP.NET. Ma wieloletnie doświadczenie w projektowaniu rozwiązań z różnych dziedzin. Najlepiej czuje się z takimi językami i technologiami jak C, C++, VC++, Java, C#, Microsoft .NET, Ajax, WCF, REST, SOA, wzorce projektowe, SQL Server, systemy operacyjne i architektura komputerów. Prowadzi swojego bloga pod adresem http://aspadvice.com/blogs/joydip oraz stronę www.joy dipkanjilal.com. Można go też spotkać na Twitterze — https://twitter.com/joydipkanjilal, na Facebooku — https://www.facebook.com/joydipkanjilal i na LinkedIn — http://in.linkedin.com/ in/joydipkanjilal.
Responsive Web Design z jQuery
Alex Libby pracował przede wszystkim w działach obsługi IT. Przez ostatnich 15 lat zajmował się obsługą użytkowników w zróżnicowanych środowiskach. Aktualnie pracuje jako analityk obsługujący średniej wielkości serwer SharePoint dla międzynarodowej firmy dystrybucyjnej w Wielkiej Brytanii. W swojej pracy Alex styka się z różnymi technologiami, ale pierwszą jego miłością jest ruch otwartych źródeł, a w szczególności takie technologie jak jQuery, CSS3 i HTML5. Do dzisiaj Alex napisał już kilka książek dla wydawnictwa Packt, w tym również książkę opisującą technologie języka HTML5, a także książkę poświęconą narzędziom biblioteki jQuery. W wolnym czasie Alex lubi udzielać się w lokalnym teatrze amatorskim, jeździć na rowerze i fotografować.
R. J. Lindelof już od 1998 roku eksperymentuje w dziedzinie rozwoju interfejsów stron internetowych, a samym programowaniem zajmuje się od 1993 roku. Prowadzi i obsługuje setki różnych witryn swojej własnej firmy lub jej klientów. Od momentu powstania pierwszego smartfona był entuzjastycznym liderem tej gałęzi sieci WWW. Specjalizuje się w tworzeniu aplikacji WWW oraz wykorzystywaniu możliwości i skalowalności takich aplikacji w chmurze. Dzisiaj R. J. nadal projektuje responsywne aplikacje WWW i przygotowuje rozwiązania dla swoich klientów. Cały czas uczy się nowych technik, a jednocześnie naucza innych programistów i opiekuje się nimi. Uznaje się za członka ciągle rosnącej społeczności rzemieślników oprogramowania.
Carla Molina ma ogromne doświadczenie w zakresie nauczania, a także sprawdzania i tłumaczenia tekstów na język angielski. Przetłumaczyła i sprawdziła już wiele artykułów naukowych, stron internetowych oraz innych publikacji. Od sześciu lat mieszka w Stanach Zjednoczonych. Uczestniczyła już w różnych kursach języka angielskiego i uczyła tego języka wielu imigrantów w szkole językowej w New Jersey. Ukończyła też koledż w Essex County, na którym otrzymała tytuł nauk humanistycznych. Aktualnie na uniwersytecie w Brazylii rozpoczęła drugi fakultet z języka portugalskiego i angielskiego. W 2012 roku otrzymała propozycję pracy jako nauczyciel języka angielskiego w firmie informatycznej w Campinas w São Paulo. Aktualnie Carla prowadzi własną firmę oferującą naukę języka angielskiego oraz usługi tłumaczeniowe. W wolnym czasie zajmuje się fotografią, uprawia jogę, słucha muzyki i rysuje.
12
O recenzentach
Anirudh Prabhu pracuje jako programista w firmie Xoriant Solutions. Może pochwalić się czterema latami doświadczeń w projektowaniu i tworzeniu stron WWW. W swoich projektach jest odpowiedzialny za przygotowywanie i obsługę skryptów JavaScript. Specjalizuje się w technologiach sieciowych, takich jak HTML, CSS, JavaScript, jQuery i SASS. Na uniwersytecie w Bombaju uzyskał tytuł magistra informatyki. Był już recenzentem technicznym książki Toma Bakera Pro Javascript Performance. W wolnym czasie Anirudh uwielbia czytać, słuchać muzyki oraz fotografować.
Paul Sprangers już od ponad dekady zajmuje się tworzeniem stron WWW. Początkowo tworzył strony w technologii Flash i dopiero uczył się języka HTML, wykorzystując do tego funkcję Zapisz jako HTML w programie Microsoft Word. Ostatecznie wypłynął jednak na szersze wody i teraz specjalizuje się w takich technologiach jak HTML, CSS i jQuery. W 2003 roku razem z kolegami założył w Holandii firmę Interactive Studios. Do dzisiaj zajmuje się ona tworzeniem stron WWW oraz specjalistycznego oprogramowania dla klientów regionalnych i międzynarodowych. Niedawno ich firma uruchomiła duńską stronę z zaproszeniami EasyInvite.nl. Na stronie paulsprangers.com znajdziesz artykuły przygotowane przez Paula, które dotyczą głównie technologii CSS i jQuery oraz firmy Apple.
Taroon Tyagi jest tępym dwunogiem znanym z ostrego języka. Jest racjonalistą z optymistycznymi zapatrywaniami, o wysoce rozwiniętym pociągu do jedzenia, technologii i wiedzy. Taroon jest projektantem interfejsów i interakcji. Lubi wprowadzać zasady prostoty i minimalizmu zen. Uwielbia projektować ciekawe rzeczy, szczególnie wtedy, gdy nikt na to nie patrzy. A gdy chwilowo nie tworzy, można przyłapać go na czytaniu całej sieci WWW i pisaniu w niej, na słuchaniu muzyki i szukaniu inspiracji.
13
Responsive Web Design z jQuery
14
Wstęp Sieć WWW nie jest już ograniczona do komputerów stacjonarnych i laptopów. Technologie sieciowe rozprzestrzeniły się na wiele zróżnicowanych urządzeń, począwszy od ogromnych monitorów stojących na biurkach, poprzez tablety i smartfony, a skończywszy na telewizorach i wyświetlaczach przy drogach. Dodatkowo poszerzył się też zakres funkcji i interfejsów stron oraz zakres metod interakcji, z jakich możemy korzystać. Dzisiaj responsywny projekt stron jest już nie tylko dodatkiem. Oznacza to, że znowu musimy uzupełnić nasze umiejętności o systemy siatkowe, tak aby z ich pomocą przygotować zróżnicowane i bogate witryny. W tej książce dokonamy tego wszystkiego, wykorzystując CSS3 i jQuery, czyli technologie, które pozwalają na doskonałą integrację z różnymi urządzeniami, systemami i przeglądarkami. Inną zaletą wykorzystania biblioteki jQuery jest szybkość tworzenia stron z wykorzystaniem najróżniejszych wtyczek (ang. plugins) przygotowywanych przez całą społeczność. Nie musimy ponownie wymyślać czegoś, co już zostało przygotowane! Co więcej, zawsze mile widziane są poprawki, a Twoje zaangażowanie się w społeczność pomoże w pracy innym.
Co znajdziesz w tej książce? Rozdział 1., „Poznawanie projektów responsywnych”, rozpoczyna się od przedstawienia koncepcji responsywności tworzonej za pomocą generowanych siatek i dopasowywania ich do różnych ekranów. W dalszej części rozdziału wyjaśniać będę koncepcję mobile-first (najpierw urządzenia mobilne). Rozdział 2., „Projektowanie responsywnych układów i siatek”, pokazuje tworzenie elastycznych struktur dla stron WWW, a następnie koncentruje się na wykorzystywaniu systemów responsywnych siatek w celu usprawnienia prac projektowych. W rozdziale 3., „Tworzenie responsywnego menu”, zaprezentuję kilka analiz i przykładowych implementacji poszczególnych wzorców menu nawigacyjnego. Dzięki temu łatwiej będzie Ci wybrać rozwiązanie właściwe dla danej sytuacji.
Responsive Web Design z jQuery
Rozdział 4., „Projektowanie responsywnych tekstów”, poświęcony zostanie konwertowaniu tekstu na jednostki względne i poprawianiu go w celu uzyskania ładnych, responsywnych nagłówków. W rozdziale 5., „Przygotowywanie obrazków i filmów”, objaśnię sposób obsługi obrazków o wysokiej rozdzielczości zapisanych w różnych formatach. Następnie wyjaśnię, dlaczego znaczenie kierunku podczas oglądania stron na smartfonach jest takie ważne. W rozdziale 6., „Tworzenie responsywnych galerii obrazów”, zaprezentuję cztery wtyczki tworzące galerie obrazków wraz z przykładowymi implementacjami oraz przydatnymi bibliotekami do obsługi dotyku uzupełniającymi ten rodzaj interakcji. Rozdział 7., „Projektowanie tabel responsywnych”, poświęcony zostanie różnym metodom tworzenia responsywnych tabel i radzenia sobie z problemami z dopasowaniem ich szerokości do różnych ekranów. W rozdziale 8., „Implementowanie formularzy responsywnych”, zajmiemy się różnymi funkcjami formularzy poprawiającymi doświadczenia użytkownika przy ich wypełnianiu na urządzeniach mobilnych. Rozdział 9., „Testowanie responsywnych stron”, zapozna Cię z metodami przeprowadzania testów responsywności strony na różnych przeglądarkach i platformach w celu uniknięcia nieoczekiwanych zachowań. W rozdziale 10., „Prawidłowa obsługa przeglądarek”, omówię niezwykle ważną tematykę ograniczania (ang. fallback) funkcji stron. Zacznę od sposobów wykrywania funkcji oferowanych (lub nie) przez przeglądarkę i zaprezentuję właściwe metody radzenia sobie z takimi brakami. Rozdział 11., „Przydatne wtyczki responsywne”, poświęcony zostanie wtyczkom ułatwiającym tworzenie struktur strony, menu nawigacyjnego i innych elementów, które uzupełniają rozwiązania zaprezentowane w poprzednich rozdziałach. W rozdziale 12., „Poprawianie wydajności stron”, zaprezentuję najważniejsze metody analizowania wydajności przygotowanej strony z wykorzystaniem specjalnych narzędzi. Podam też kilka wskazówek pozwalających uzyskać najlepsze wyniki.
Czego potrzebujesz? Zdecydowanie łatwiej będzie Ci przyswoić sobie wiedzę zawartą w tej książce, jeżeli będziesz mieć już na oku witrynę, którą można by przekształcić na wersję responsywną. Wszystkie potrzebne działania będzie można wykonywać w ramach ćwiczeń do rozdziałów.
16
Wstęp
Na liście niezbędnego oprogramowania znajdują się serwer HTTP Apache, program graficzny Adobe Photoshop CS5 (lub nowszy) i jakiś edytor tekstu, np. Sublime Text 2. Nie można też zapomnieć o przeglądarce takiej jak Firefox lub Chrome. Oprócz tego na potrzeby testów i przykładów dobrze będzie mieć pod ręką jakieś urządzenie mobilne typu smartfon lub tablet.
Dla kogo jest ta książka? Niniejsza książka przeznaczona jest dla projektantów stron WWW chcących tworzyć strony samodzielnie dopasowujące się do urządzenia, na którym są wyświetlane. Z pewnością przyda się pewna znajomość jQuery, CSS3 i HTML5.
Konwencje W tej książce wykorzystałem wiele stylów, które wyróżniają w tekście różne rodzaje informacji. Oto kilka przykładów takich stylów wraz z objaśnieniami. Znajdujące się w tekście słowa kluczowe, nazwy tabel bazy danych, nazwy folderów i plików oraz ich rozszerzenia, a także przykładowe adresy URL, dane wprowadzane przez użytkownika i identyfikatory Twittera prezentowane będą następująco: „Specyfikacja HTML5 uzupełniona została nowymi elementami strukturalnymi, takimi jak header, nav, article i footer”. Blok kodu prezentowany jest następująco: .orientation_landscape .div-example { border: 2px solid red; }
Jeżeli będę chciał zwrócić Twoją uwagę na konkretną część bloku kodu, to zostanie ona wyróżniona za pomocą pogrubienia:
Nowe pojęcia i ważne słowa zostaną w tekście wyróżnione pogrubieniem. Z kolei słowa pojawiające się na ekranie, w menu lub w okienkach dialogowych wyróżniać będę kursywą, np. „kliknięcie przycisku Dalej przenosi do następnego ekranu”. Ostrzeżenia, wskazówki i ważne uwagi pojawiać się będą w takich ramkach.
17
Responsive Web Design z jQuery
Pobranie przykładów dla książki Przykłady dotyczące książki są dostępne do pobrania pod adresem ftp://ftp.helion.pl/przyklady/ rewejq.zip.
Errata Choć staramy się ze wszystkich sił, aby materiał zawarty w książce był poprawny, mogą pojawić się błędy. Jeśli znajdziesz w książce błąd — dotyczy to zarówno treści, jak i przykładów — będziemy bardzo wdzięczni za jego zgłoszenie. Zgłaszając błąd, pomożesz innym czytelnikom uniknąć frustracji, a my usuniemy błędy w następnym wydaniu. Erratę możesz zgłosić za pomocą formularza dostępnego na stronie http://helion.pl/user/erraty/rewejq. Po sprawdzeniu zgłoszenia i jego akceptacji poprawka pojawi się na stronie internetowej wydawnictwa na liście errat dotyczących książki.
Piractwo Nieprzestrzeganie praw autorskich w internecie to stały problem. Wydawnictwo traktuje ochronę praw autorskich bardzo poważnie. Jeśli natkniesz się na nielegalne kopie wydawanych przez nas książek w dowolnej formie, zgłoś nam adres strony lub jej nazwę, abyśmy mogli przedsięwziąć odpowiednie kroki zapobiegawcze. Zauważone naruszenie praw autorskich możesz zgłosić, używając formularza dostępnego pod adresem http://helion.pl/piracy.phtml. Dziękujemy za pomoc przy ochronie autorów książek oraz pomoc w dostarczaniu treści wysokiej jakości.
18
1 Poznawanie projektów responsywnych Coraz częściej w społeczności twórców stron WWW można usłyszeć słowo „responsywny” (ang. responsive). Bez obaw — razem dojdziemy do prawdziwego znaczenia tego słowa i poznamy wpływ, jaki ma ono na rozwój dzisiejszych witryn. Jednym z czynników (czasami jest on niestety całkowicie ignorowany) wpływających na decyzje podejmowane podczas rozpoczynania projektu jest liczba urządzeń i wielkości ekranów, na których sprawdzona ma być responsywność układu. Jeszcze nie tak dawno pracowaliśmy z odgórnie przyjętymi wymiarami stron, na przykład ze stałą szerokością 1024 pikseli. Działo się tak dlatego, że przyjmowaliśmy tylko jeden sposób oglądania stron WWW — na komputerach stacjonarnych. Z czasem rozwój technologii spowodował powstanie coraz to nowych grup urządzeń zdolnych do wyświetlania stron WWW (takich jak smartfony, tablety, telewizory i wielkie monitory komputerów), a także nowych metod interakcji tych urządzeń ze stronami. Rozwój technologii mobilnych oraz szybka ewolucja metod nawigacji na stronach i przeglądania ich zawartości zmusiły nas do zakwestionowania koncepcji stałych wymiarów stron. Konieczne stało się wymyślenie struktur samodzielnie dopasowujących się do zaistniałej sytuacji. W tym rozdziale: poznamy koncepcję responsywnego projektu stron WWW, porównamy ze sobą projekty responsywne, płynne i adaptacyjne, odczytamy szerokość ekranu za pomocą zapytań o media, poznamy koncepcję mobile-first (najpierw mobilne), nauczymy się używać narzędzi siatki, wykorzystamy koncepcję mobile-first do przygotowania siatki.
Responsive Web Design z jQuery
Koncepcja responsywnego projektu stron Nie mogę rozpocząć tego rozdziału bez cytatu z Ethana Marcotte’a, autora wydanej w 2011 roku książki Responsive Web Design, która stała się podstawą do powstania wielu innych książek i artykułów wykorzystywanych przez społeczność projektantów. Dzięki książce Marcotte’a zrozumiałem, że responsywny projekt strony ma prezentować ją użytkownikowi w sposób dopasowany do wielkości używanego przez niego ekranu. W tym celu muszą być zastosowane trzy podstawowe techniki: Elastyczny układ wykorzystujący siatkę. Elastyczne obrazki i materiały wideo. Odpowiednie wykorzystanie stylów CSS w celu dopasowania zachowania strony (zapytania o media). W dalszej części tego rozdziału podam więcej szczegółów na temat każdej z tych technik. W ramach lepszego zobrazowania całej koncepcji na poniższym rysunku przedstawiam przykład strony wyświetlanej na małym urządzeniu (smartfonie), na urządzeniu średniej wielkości (tablecie) i na wielkim monitorze komputera stacjonarnego.
Poza przygotowaniem zmiennych wymiarów strony i zastosowaniem kilku zapytań o media czeka nas jeszcze kilka innych wyzwań.
W książce będę mówić o wielu różnych wyzwaniach, takich jak: zastępowanie zdarzeń związanych z myszą zdarzeniami związanymi z dotykiem, zastosowanie funkcji wypełniania pól formularzy danymi, nadawanie priorytetów różnym rodzajom treści, optymalizacja procesu ładowania strony.
20
Rozdział 1. • Poznawanie projektów responsywnych
Porównanie stron responsywnych, płynnych i adaptacyjnych Responsywny projekt strony nieco różni się od projektu płynnego. W projektach płynnych chodzi o automatyczne dopasowanie struktury i wymiarów strony (wykorzystuje się do tego względne jednostki szerokości, takie jak em lub wartości procentowe), ale nie stosuje się w nich układu dopasowującego się do otoczenia. Oprócz tego należałoby zaznaczyć, że responsywne projekty stron nie są rozwiązaniem idealnym, które sprawdza się na wszystkich urządzeniach mobilnych. Jak już pokazałem wcześniej, prawidłowo zrealizowane projekty tego typu pozwalają dopasować stronę do urządzenia użytkownika, ale nie ma gwarancji, że będą one działały prawidłowo na każdym urządzeniu. To właśnie z tego powodu musimy cały czas starać się poprawiać naszą znajomość technologii. Bardzo podoba mi się cytat z Aarona Gustafsona, autora książki Adaptive Web Design: Projekt adaptacyjny polega na takim przygotowaniu interfejsu, żeby dopasowywał się on do możliwości użytkownika (dotyczy to zarówno formy, jak i funkcji). Projekt adaptacyjny wykorzystuje nowe funkcje HTML5 jedynie na nowszych urządzeniach, na przykład w celu przygotowania ładniejszej prezentacji. Na starszych urządzeniach te zaawansowane funkcje są pomijane, ale podstawowe funkcje strony są nadal w pełni realizowane.
Istnieje wiele metod implementowania funkcji adaptacyjnych. Poniżej prezentuję najczęściej stosowane: Wykorzystanie wtyczek jQuery do zdefiniowania interakcji dotykowych na urządzeniach mobilnych (więcej na ten temat znajdziesz w rozdziale 6.). Przekształcanie standardowych struktur tabel w tabele responsywne (więcej na ten temat w rozdziale 7.). Wizualne poprawki elementów formularzy przygotowane specjalnie dla komputerów stacjonarnych (rozdział 8.). Wykorzystanie funkcji geolokalizacji w celu zaprezentowania użytkownikowi lepiej dopasowanych treści. Modyfikowanie hierarchii informacji zgodnie z ustalonymi priorytetami treści. Brazylijczyk Diego Eis — propagator najlepszych sposobów projektowania stron WWW oraz twórca strony http://tableless.com.br — w jednym ze swoich artykułów przedstawił doskonałe porównanie projektów responsywnych i nieresponsywnych. Wyobraź sobie, że planujesz wycieczkę w kilka miejsc. Przygotowując się do niej, na pewno naszykujesz sobie wiele wariantów ubrań: kurtki, spodnie, koszule itp., które sprawią, że Twoja torba będzie naprawdę ciężka.
21
Responsive Web Design z jQuery
Musisz przygotować je wszystkie, bo nie wiesz, jakiej pogody się spodziewać. Podobnie przygotowanie strony WWW na wszystkie możliwe ewentualności może czasem negatywnie wpływać na szybkość jej pracy.
Dopasowywanie strony WWW do ekranu za pomocą zapytań o media Luke Wroblewski, autor serii popularnych książek o projektowaniu stron WWW, zaproponował następującą klasyfikację rozmiarów aktualnie używanych urządzeń: 4" – 5" (smartfony) 5" – 6" (hybrydy telefonu i tabletu) 7" – 8" (małe tablety) 9" – 10" (tablety) 11" – 17" (laptopy) 20" – 30" (komputery stacjonarne) Nazwy takie jak „smartfon” można traktować jako ogólny opis klasy urządzeń, ale nie wolno zapominać, że responsywne projekty stron dopasowują się do rozdzielczości ekranu, a nie do rodzaju urządzenia. Musimy zatem sprawdzić, czy dla określonej szerokości ekranu nie należałoby przygotować specjalnego wariantu. Specyfikacja CSS2.1 skupiała się na różnych rodzajach mediów, takich jak wydruk, ekran lub urządzenie przenośne, natomiast w specyfikacji CSS3 nacisk położono na różne funkcje tych mediów. Bardzo często wykorzystywane są zapytania o media, które w większości przeglądarek (Firefox 3.6, Safari 4, Chrome 4, Opera 9.5, iOS Safari 3.2, Opera Mobile 10, Android 2.1, Internet Explorer 9 i wszystkie ich nowsze wersje) obsługiwane są domyślnie. Pojawia się jednak pytanie, co z Internet Explorerem 6 – 8? Na potrzeby tych przeglądarek przygotowano specjalne rozwiązanie o nazwie Respond, które do starszych przeglądarek wprowadza obsługę zapytań o media (więcej na ten temat w rozdziale 10.). Wracając do tematu, podaję poniżej listę funkcji najczęściej wykorzystywanych w ramach zapytań o media: Szerokość: min-width lub max-width. Wysokość: min-height lub max-height. Ułożenie: sprawdza, czy urządzenie jest ustawione pionowo, czy też poziomo. Rozdzielczość: na przykład min-resolution: 300dpi. Proszę spojrzeć na poniższy kod CSS pozwalający lepiej zrozumieć sposób użycia zapytań o media oraz poznać ich składnię:
22
Rozdział 1. • Poznawanie projektów responsywnych
/* Standardowe ekrany stacjonarne */ @media only screen and (min-width:1025px) { TU WPISZ CSS } /* Tablety */ @media only screen and (min-width:481px) and (max-width:1024px) { TU WPISZ CSS } /* Smartfony */ @media only screen and (max-width:480px) { TU WPISZ CSS }
Poniższy obrazek jest wizualizacją idei zawartej w kodzie. Widać na nim, że zawartość strony może być wyświetlana w różnych układach — zależnie od wielkości ekranu urządzenia.
Pobieranie przykładowego kodu Pliki z przykładowymi wycinkami kodu możesz pobrać z adresu ftp://ftp.helion.pl/przyklady/rewejq.zip.
Najpierw-mobilne Zacznijmy od analizy projektu przedstawionego na poniższym rysunku:
23
Responsive Web Design z jQuery
Takie efekty uzyskuje się najczęściej wtedy, gdy projekt rozpoczyna się od wersji na komputery stacjonarne, gdzie wypełnia się puste przestrzenie banerami lub obrazkami, mniej istotnymi odnośnikami, animacjami i innymi elementami. Zwykle zapomina się o najbardziej oczywistym i podstawowym przepływie treści na stronie, do którego przyzwyczajeni są użytkownicy. Wiem, że czasami te dodatkowe elementy wydają się istotne dla projektu, ale tutaj widać, iż ten projekt wymaga ponownego sprawdzenia architektury informacji. W poprzednim przykładzie po prawej stronie można zobaczyć, jak prosta może być komunikacja z użytkownikiem, a zmniejszenie natłoku elementów graficznych może poprawić czytelność. I to jest właśnie najnowszy trend: upraszczanie. Doskonale podsumowuje to cytat z Billa DeRoucheya: Rozpoczęcie projektowania od wersji na urządzenia mobilne zmusza nas do wydobycia najistotniejszych elementów. Innymi słowy, podejście typu najpierw-mobilne jest dobre dla firm, ponieważ skupienie się na określonym celu przynosi zyski. Treści, które dodajesz do swojej strony, są ważne i wartościowe dla użytkownika. Implementacja nowych funkcji pozwoli odwiedzającym stronę na szybszy i bardziej intuicyjny dostęp do potrzebnych im treści.
W tym przypadku po zastosowaniu podejścia najpierw-mobilne poszczególne łącza dostępne były dopiero na stronach wewnętrznych. Trzeba jednak pamiętać, że zadaniem strony głównej jest skierowanie użytkownika na potrzebną mu stronę, zgodnie ze zdefiniowanym dla witryny przepływem informacji. Takie rozwiązanie jest do zaakceptowania jedynie w przypadku mało istotnych odnośników. Proszę spojrzeć na poniższy rysunek. Można tu zauważyć wiele zmian w organizacji informacji na stronie i skoncentrowanie się na najważniejszych odnośnikach.
24
Rozdział 1. • Poznawanie projektów responsywnych
Używanie siatek Siatka jest wizualną pomocą ułatwiającą zdefiniowanie struktury naszej strony. Przede wszystkim ma ona poprawiać funkcjonalność, zachowanie i priorytet wyświetlanych treści. Jej przygotowanie powinno być pierwszym krokiem w każdym projekcie, ponieważ usprawnia ona analizowanie architektury informacji i ułożenia elementów wizualnych. Najprostszą metodą rozpoczęcia prac nad projektem jest skorzystanie ze strony Wireframe.cc (http://wireframe.cc/). Narzędzie to pozwala na szybkie przygotowanie pierwszego szkicu. Do bardziej szczegółowych prac lepiej nadają się inne narzędzia, takie jak Balsamiq Mockups albo Pencil. Praca z Wireframe.cc jest bardzo prosta. Po wejściu na stronę wykonaj poniższe czynności: 1. W lewym górnym rogu wybierz rodzaj urządzenia. 2. W razie potrzeby kliknij przycisk ustawień (ikona z zębatkami), aby ustalić szerokość kontenera. 3. Teraz możesz rysować, klikając mysz i przeciągając ją po ekranie. 4. Następnie wybierz szablon. 5. Jeżeli wybrany szablon nie będzie właściwy, to kliknij go dwukrotnie i wybierz inny. Po zakończeniu pracy z siatką nie zapomnij kliknąć przycisku Save, który wygeneruje adres URL do wykorzystania w przyszłości.
Ćwiczenie 1. — projektowanie z siatkami w modelu najpierw-mobilne Wejdź na stronę http://mediaqueri.es/ i przejrzyj przedstawione tam przykłady. Prace nad naszym projektem strony zaczniemy od przygotowania siatek dla trzech rodzajów urządzeń: smartfonów, tabletów i komputerów stacjonarnych. Oczywiście będziemy przy tym stosować koncepcję najpierw-mobilne. Jako podstawa dla ćwiczenia 1. zostaną wykorzystane trzy siatki z poniższego rysunku.
25
Responsive Web Design z jQuery
Podsumowanie W tym rozdziale poznaliśmy koncepcję responsywnego projektu stron WWW. Dowiedzieliśmy się też, czym jest koncepcja najpierw-mobilne, jak można wykorzystywać zapytania o media do wprowadzania zmian w implementacji naszej strony. Przygotowaliśmy też siatki ogólnie szkicujące wygląd tej strony. Mamy zatem podstawy do zapoznania się z następnym rozdziałem, w którym napiszemy kod opisujący te właśnie siatki. Teraz zaczniemy rozwijać nasz projekt, ucząc się przy tym używania trzech różnych systemów responsywnych siatek: siatki o płynnej linii bazowej (ang. fluid baseline grid), siatki 1140 (ang. 1140 Grid) i mojej ulubionej siatki Foundation4 (ang. Foundation4 grid). Oprócz tego sprawdzimy, jak można zmienić zachowanie strony za pomocą języka JavaScript. Wszystkie te tematy zostaną objaśnione w następnym rozdziale.
26
2 Projektowanie responsywnych układów i siatek Myśląc o responsywnej sieci WWW, trzeba jej wymiary definiować nie w pikselach, a w proporcjach. Powyższy cytat z Trenta Waltona podsumowuje idee przyświecające temu rozdziałowi, ponieważ podczas prac nad projektami responsywnymi musimy myśleć o płynności i adaptacji, a nie o dopasowywaniu wszystkiego co do piksela. Właśnie dlatego coraz rzadziej spotyka się strony z idealnie wyrównanymi w stosunku do siebie elementami. Istnieją dwie metody unikania takich problemów podczas tworzenia rzeczywiście responsywnych stron: Stosowanie jak najmniejszej liczby obliczeń podczas przekształcania strony. Wykorzystywanie systemów responsywnych siatek, w których wybieranych jest kilka kolumn, a kod utrzymuje wszystkie elementy w tych kolumnach za pomocą wymiarów względnych. Rozwój technologii mobilnych i szybka ewolucja technik tworzenia stron WWW spowodowały konieczność ponownego przyjrzenia się koncepcji stałych wymiarów stron i wymyślenia takich struktur, które będą się same dopasowywały do urządzenia i wyświetlały treści odpowiednie do danej sytuacji.
Responsive Web Design z jQuery
W tym rozdziale dowiemy się: jak zmieniać stronę za pomocą języka JavaScript, że definiowanie obiektów za pomocą wartości procentowych nadaje całej strukturze niezbędną elastyczność, jak wykorzystywać właściwości responsywnych systemów siatek, jak przygotować kod trzech różnych responsywnych siatek, jak narysować szablony siatek w Photoshopie, jak jeszcze przed rozpoczęciem prac zdefiniować wartości znaczników meta i viewport, jak implementować siatki za pomocą narzędzia Foundation4 Grid.
Dostosowywanie strony za pomocą języka JavaScript Jak już mówiłem w poprzednim rozdziale, możemy wykorzystać zapytania o media w celu zidentyfikowania dostępnej aktualnie przestrzeni i wprowadzenia odpowiednich dla niej zmian w układzie strony. Ta właściwość jest bardzo użyteczna, ale nie działa niestety w starszych przeglądarkach, takich jak Internet Explorer 8 i poprzednich. Przyjrzyjmy się teraz dwu rozwiązaniom, które nawet w tych przeglądarkach prawidłowo obsługują zapytania o media. Są to: Adapt.js i Respond.js. Każde z tych rozwiązań poddamy dokładniejszej analizie i sprawdzimy, jakie udostępnia funkcje, oprócz dynamicznego odczytywania wymiarów urządzenia (tak jak robią to zapytania o media). Dowiemy się w ten sposób, czy mogą stanowić alternatywę w projektach, w których wymagana jest obsługa starszych przeglądarek.
Adapt.js Oto najważniejsze cechy biblioteki Adapt.js: Po odczytaniu wymiarów okna przeglądarki biblioteka ta aktywuje tylko te części stylów CSS, które są rzeczywiście potrzebne. Plik samej biblioteki jest naprawdę niewielki. Przed zastosowaniem tej biblioteki w projekcie trzeba jeszcze rozważyć następujące problemy: Analiza wielkości okna przeglądarki wykonywana jest na żądanie, co może powodować powstawanie małych opóźnień podczas wybierania właściwego zestawu stylów CSS.
28
Rozdział 2. • Projektowanie responsywnych układów i siatek
Skrypt musi zostać umieszczony na samym początku kodu (w znaczniku head), przez co początkowe ładowanie strony może się nieco wydłużyć. Razem z biblioteką Adapt.js dostarczanych jest kilka plików CSS oraz zapytań o media, które mogą zostać wykorzystane przy tworzeniu strony. Na poniższym rysunku przedstawiam listę plików domyślnie dostępnych pod adresem http://adapt.960.gs/.
Jak to zrobić? Po pobraniu niezbędnych plików i umieszczeniu ich w Twoim projekcie dopisz poniższy kod w znaczniku strony. W zaprezentowanym kodzie można zmieniać domyślną ścieżkę do plików CSS, częstotliwość dynamicznej adaptacji (czy ma być jednorazowa, czy przy każdej zmianie wymiarów okna) oraz podać pliki CSS stosowane dla poszczególnych zakresów szerokości:
Tutaj również wykorzystam ten sam kod HTML, który widzieliśmy już w pierwszym przykładzie, ale tuż przed zamykającym znacznikiem należy jeszcze dopisać funkcję wywołującą nasz skrypt:
58
Rozdział 3. • Tworzenie responsywnego menu
Na razie użyjemy stylów menu znanych już z poprzedniego przykładu: nav ul { list-style: none; text-align: center; padding: 0; } .menu-item a { display: block; border-top: 1px solid #CCC; padding: 3%; } .menu-item:last-child a { border-bottom: 1px solid #CCC; }
I to wszystko. Gotowe! Pozostało tylko dopasować kilka pomniejszych opcji, które poprawią naszą podstawową implementację. Nie obawiaj się eksperymentowania z różnymi opcjami. Domyślnie zdefiniowana jest animacja CSS3 trwająca 400 ms, która uruchamiana jest tuż przed automatycznym utworzeniem przycisku menu. Można też zdefiniować coś takiego:
Na poniższym rysunku można zobaczyć działanie wtyczki Responsive Nav. Na smartfonach zmienia ona style menu i prezentuje wygodny przycisk wywołujący to menu.
Wygląd przycisku wywołującego menu oraz pomarańczowe tło samego menu nie są ustawieniami domyślnymi. To tylko sugestia autora wtyczki zaprezentowana na jednej ze stron demonstracyjnych.
59
Responsive Web Design z jQuery
Menu Select Jedną z metod mocnego ograniczenia miejsca zajmowanego przez menu jest zastosowanie takiego rozwiązania, w którym wszystkie pozycje menu umieszczane są w znaczniku . Dzięki temu unika się różnych problemów z ułożeniem elementów i uzyskuje kod działający we wszystkich przeglądarkach. Niestety to rozwiązanie powoduje pewne problemy związane z użytecznością i dostępnością strony oraz z jej pozycjonowaniem w wyszukiwarkach. Na pierwszy rzut oka główny element nawigacyjny w postaci listy rozwijanej nie wygląda prawidłowo, ponieważ nie dopasowuje się do projektu całej strony. Poza tym użytkownik może wcale nie uznać, że lista rozwijana to menu strony.
Wtyczka TinyNav.js do biblioteki jQuery Wtyczka TinyNav.js (http://tinynav.viljamis.com/) doskonale nadaje się do przekształcania menu umieszczonych w elementach
Tekst dostępny dla wszystkich wersji obrazka
Lorem ipsum dolor sit amet...
Lorem ipsum dolor sit amet...
Lorem ipsum dolor sit
Nic ciekawego
Lorem ipsum dolor sit
Nowości
Lorem ipsum dolor sit
I to wszystko
Lorem ipsum dolor sit
amet...
Otwórz okienko
Obejrzyj film