Responsive Web Design z jQuery 978-83-246-9189-0 [PDF]

Zitiervorschau

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

lub na listy rozwijane, które zajmują mało miejsca na ekranach smartfonów. Jeżeli użytkownik wybierze jedną z pozycji takiej listy, zostanie automatycznie przekierowany na odpowiednią stronę. Dzięki automatycznemu dodaniu właściwości selected="selected" możliwe jest też wybranie z listy aktualnie wyświetlanej strony.

Jak to zrobić? Ponownie wykorzystamy ten sam kod HTML, którego użyliśmy w pierwszym przykładzie. Po pobraniu wtyczki TinyNav należy dopisać poniższy kod do znacznika strony:

Poniższy kod należy również dopisać tuż przed zamykającym znacznikiem :

W poniższym kodzie CSS ukrywany jest nowy sposób nawigacji i ustalane są domyślne style menu wyświetlanego na tabletach i komputerach stacjonarnych. Oprócz tego definiujemy tu, że zmniejszone menu pojawiać się ma tylko na ekranach o szerokości mniejszej niż 767 pikseli (smartfony): /* style dla komputerów stacjonarnych */ .tinynav { display: none; } #site-nav { float: right;

60

Rozdział 3. • Tworzenie responsywnego menu

width: 80%; padding: 0; } #site-nav li { display: inline-block; margin: 0 2%; padding: 0; width: 15%; text-align: center; line-height: 1.5; } /* style dla urządzeń mobilnych */ @media screen and (max-width: 767px) { .tinynav { display: block; } #site-nav { display: none; } }

Wtyczka TinyNav udostępnia też kilka dodatkowych opcji, takich jak: możliwość wstawienia etykiety przed elementem , automatyczne przypisanie pozycji odpowiadającej aktualnie oglądanej stronie atrybutu active (wspominałem już o tym wcześniej) albo zdefiniowanie początkowej wartości elementu select w przypadku, gdy nie wybrano wcześniej żadnej innej opcji. Poniżej przedstawiam sposób definiowania tych trzech opcji: $('#site-nav ul').tinyNav({ active: 'selected', label: 'Menu', header: 'Nawigacja' });

Ten rodzaj nawigacji na stronie można zaimplementować bez większych nakładów pracy. Na poniższym rysunku (przedstawionym na następnej stronie) widać dokładnie, że wtyczka wpływa na wygląd strony tylko wtedy, gdy wyświetlana jest ona na małych urządzeniach:

Footer-only Nawigacja typu footer-only przypomina rozwiązania typu footer anchor, ale różni się od nich brakiem odnośnika w nagłówku strony. Ten rodzaj menu należy stosować bardzo ostrożnie, ponieważ wielu użytkowników może nie znaleźć menu umieszczonego na samym końcu strony. Poza tym przewijanie całej strony po to, żeby dostać się do menu, może być trochę niewygodne. Ten rodzaj nawigacji nadaje się do stron z niewielką ilością treści i takich, na których przewijanie nie wymaga od użytkownika szczególnego wysiłku.

61

Responsive Web Design z jQuery

Jak to zrobić? Po prostu przenieś menu na sam dół dokumentu. Pamiętaj, że takie zmiany w kodzie powodują natychmiastową zmianę pozycji menu na wszystkich urządzeniach. Przed zastosowaniem tej techniki upewnij się, że Twoja strona nie jest zbyt długa, ponieważ większość użytkowników oczekuje, że menu strony będzie się znajdowało na jej górze.

Multi toggle Wzorzec Multi toggle bardzo przypomina menu typu Toggle, ponieważ tutaj również menu wysuwa się spod nagłówka strony. To rozwiązanie zostało jednak przygotowane do tworzenia złożonych systemów menu, w których istnieje przynajmniej jeden poziom zagnieżdżenia. Gdy użytkownik kliknie przycisk wywołujący menu, zostanie ono wysunięte ponad treść strony. Jeżeli teraz kliknie on jedną z głównych kategorii, to na ekranie pojawią się przypisane do niego elementy podmenu.

Jak to zrobić? Poniżej prezentuję kod HTML, którego użyjemy w tym przykładzie. W roli kontrolera stanu menu (otwarte lub zamknięte) wykorzystamy tu element , który nie będzie widoczny dla użytkownika. Później podam więcej szczegółów na temat działania tej techniki. LOGO ☰ Menu

62

Rozdział 3. • Tworzenie responsywnego menu


• Back
• Start
• O nas
• Projekty
  • Projekt 1
  • Projekt 2
  • Projekt 3
• Blog
• Kontakt


Następny krok polega na dopasowaniu stylu menu. Wymaga to sporej ilości kodu, dlatego gorąco zachęcam do pobrania wszystkich przykładów dołączanych do tej książki. Wyjaśnię tu dwa miejsca w kodzie, które mogą być nie do końca zrozumiałe. Na początku pliku CSS zapisane są właściwości o wartościach "\0025Bc" (strzałka w dół) i "\0025C0" (strzałka powrotu), które powinny zostać narysowane jako strzałki. Na stronie powinno znajdować się również pole wyboru #toggle, ale poza jej widocznym obszarem: .after:after { content: " \0025Bc"; font-size: 0.5em; } .before:before { content: " \0025C0"; font-size: 0.5em; } .link-to-menu { display: block; position: absolute; right: 0; top: 0; z-index: 100; } #toggle { left: -9999px; position: absolute; top: -9999px; } #site-nav ul { left: 0;

63

Responsive Web Design z jQuery

list-style: none; position: absolute; right: 0; top: 4em; z-index: 10; } #site-nav a { display: block; height: 0; line-height: 0; overflow: hidden; text-decoration: none; transition: all 0.5s ease 0s; }

Oderwijmy się na chwilę od kodu CSS. Chciałbym teraz wyjaśnić pokrótce działanie pola wyboru #toggle dołączonego do podmenu. Gdy kliknięty zostanie odnośnik link-to-menu, to znacznik nadaje mu wysokość 3em. Poza tym musimy jeszcze przygotować styl powiększający wysokość odnośników, ponieważ biblioteka jQuery dołączy klasę open do elementów
• zawierających w sobie elementy klasy submenu: #toggle:checked ~ nav #site-nav a { line-height: 3em; height: 3em; border-bottom: 1px solid #999; position: relative; z-index: 1; } #toggle:checked ~ nav #site-nav .submenu li, #toggle:checked ~ nav #site-nav .submenu a { height: 0; line-height: 0; transition: 0.5s; } #toggle:checked ~ nav #site-nav .submenu a { padding-left: 7%; background: #555; } #toggle:checked ~ nav #site-nav .submenu.open li, #toggle:checked ~ nav #site-nav .submenu.open a { height: 3em; line-height: 3em; }
  
  Nie możemy też zapomnieć o konieczności dołączenia biblioteki jQuery w znaczniku strony:
  
  Prawie na samym końcu dokumentu (tuż przed zamykającym znacznikiem ) trzeba jeszcze uruchomić poniższy skrypt, który zajmie się wstawieniem klasy open do samych podmenu:
  
  Na poniższym rysunku można zobaczyć oczekiwany efekt naszych prac:
  
  Toggle and slide Ten rodzaj menu podobny jest do menu Multi Toggle, jednak w tym przypadku podmenu nie jest przełączane, ale wysuwa się ono z lewej strony po kliknięciu odnośnika głównego. Dostępny jest też odnośnik powrotny ułatwiający użytkownikowi poruszanie się po menu. Ten efekt bardzo mi się podoba i na pewno mile zaskoczy użytkowników strony.
  
  Jak to zrobić? Wykorzystamy ten sam kod HTML, którego użyliśmy już w przykładzie z menu typu Toggle (włącznie z wywołaniem biblioteki jQuery w znaczniku ). W kodzie CSS również wykorzystamy kod, którego używaliśmy już w przykładzie z menu typu Multi Toggle, ale na końcu pliku dopiszemy jeszcze poniższe style. Podstawową różnicą między menu typu Slide i Multi Toggle jest nowy znak strzałki umieszczany w podmenu (strzałka w prawo). Podmenu jest wyświetlane, ale poza obszarem widocznym: .after:after { content: " \0025B6"; font-size: 0.5em; }
  
  65
  
  Responsive Web Design z jQuery
  
  .submenu { position: absolute; left: -100%; top: 0; height: 100%; overflow: hidden; width: 100%; transition: all 0.75s ease 0s; z-index: 10; } .submenu.open { left: 0; }
  
  Poniższy rysunek przedstawia nasze menu tuż przed kliknięciem (i tuż po nim) pozycji Projekty (w tym przypadku implementacja dotyczy wyłącznie smartfonów):
  
  Przy samym końcu struktury DOM (tuż przed zamykającym znacznikiem ) uruchomimy niemal taki sam skrypt jak w poprzednim przykładzie, ale uzupełnimy go o jedną dodatkową funkcję. Poniższy kod jest taki sam jak ten użyty w poprzednim przykładzie, w którym obsługiwał on kontrolkę wyświetlającą menu.
  
  Menu off-canvas Jeżeli ktoś używał już aplikacji Facebooka na iPhonie albo dowolnej innej aplikacji wykorzystującej menu typu off-canvas, to z pewnością powie, że przypomina ono menu znane z typowych aplikacji komputerowych. Po kliknięciu przycisku wywołującego menu jego panel rozwija się, zasłaniając część użytecznej przestrzeni ekranu.
  
  Wtyczka jPanelMenu do biblioteki jQuery Wtyczka jPanelMenu (http://jpanelmenu.com/) jest prostym skryptem JavaScript, który ukrywa wcześniej przygotowane menu i pokazuje je dopiero po kliknięciu specjalnego przycisku w nagłówku strony. Takie menu można uzupełnić kilkoma ciekawymi opcjami, takimi jak animacje z określonym czasem trwania i dodatkowymi efektami, skróty klawiszowe i kierunek, z którego ma się wysuwać menu. Za chwilę przedstawię przykłady prezentujące wszystkie te funkcje. Poniższy rysunek (przedstawiony na następnej stronie) jest tylko sugestią stylu menu zaimplementowanego na potrzeby smartfonów. Oczywiście dla tabletów i komputerów stacjonarnych zachowamy oryginalny wygląd menu:
  
  Jak to zrobić? Zaczniemy od dołączenia stylów CSS w nagłówku dokumentu (znacznik ):
  
  67
  
  Responsive Web Design z jQuery
  
  Następnie użyjemy niemal niezmienionego kodu HTML znanego z przykładu menu typu footer only, w którym całą zawartość menu przenieśliśmy na sam koniec dokumentu (poniżej stopki) i przygotowaliśmy w nagłówku strony odnośnik do tego menu.
  
  ☰ Menu
  
  
  • Start
  • O nas
  • Projekty
  • Blog
  • Kontakt
  
  
  Po pobraniu wtyczki jPanelMenu dodaj poniższy kod wewnątrz znacznika :
  
  W kolejnym kroku dopisz poniższy kod tuż przed zamykającym znacznikiem . Zauważ, że nasza wtyczka udostępnia wiele ciekawych opcji, takich jak definicja efektu przy pokazywaniu menu, kierunek i czas trwania tego efektu, skrót klawiszowy oraz kilka wywołań zwrotnych:
  
  W tym menu nie ma obowiązku dodawania specjalnego kodu CSS, choć dobrze jest przygotować kilka reguł, żeby nasze menu ładnie się prezentowało.
  
  Ćwiczenie 3. — dopasowywanie menu z wykorzystaniem rozwiązania Toggle Menu Po zapoznaniu się z ośmioma rodzajami responsywnych menu i sposobami ich implementowania możemy podjąć decyzję, żeby wyposażyć naszą przykładową stronę w menu typu Toggle. Jeżeli jesteś w trakcie tworzenia własnej witryny, to dobrze przeanalizuj wszystkie dostępne warianty, żeby wybrać rodzaj menu najlepiej dopasowany do Twojego projektu.
  
  Podsumowanie W tym rozdziale dowiedzieliśmy się, w jakich sytuacjach lepiej sprawdza się menu wyświetlane na górze strony, a w jakich lepsze będzie to wyświetlane po lewej stronie. Poznaliśmy też osiem różnych rodzajów nawigacji tworzonych za pomocą stylów CSS i skryptów JavaScript. W następnym rozdziale zajmiemy się sposobami tworzenia responsywnego tekstu i responsywnej wielkości czcionki. Oprócz tego za pomocą CSS3 oraz trzech świetnych wtyczek języka JavaScript dopasujemy używaną na stronie rodzinę czcionek, dzięki czemu uzyskamy większe możliwości tworzenia nagłówków.
  
  69
  
  Responsive Web Design z jQuery
  
  70
  
  4 Projektowanie responsywnych tekstów Gdy mówimy o responsywnych nagłówkach, tak naprawdę mówimy o elastycznych tekstach. A zatem sztywne wielkości czcionek również powinny zostać zastąpione dynamicznymi. Różnica między takimi implementacjami wykonywanymi przed kilkoma laty a dzisiejszymi rozwiązaniami polega na tym, że dawniej rozważaliśmy tylko dwa sposoby prezentowania treści: na ekranie i na papierze. I choć czasy się zmieniają, to problemy z odpowiednim dopasowaniem tekstu pozostają nadal takie same. Powszechnie uważa się, że typografia jest podstawą naszych projektów i osią wszystkich stylów CSS, ponieważ głównym zadaniem stron internetowych jest przekazywanie użytkownikowi informacji będącej odpowiedzią na jego pytania. Dobrze jest zatem zrezygnować z tworzenia dziesięciu rodzajów nagłówków, a to oznacza, że trzeba dobrze zaplanować tych kilka, które znajdą się na naszej stronie. W tym rozdziale nauczymy się:  konwertować tekst na jednostki względne,  zmieniać odstępy w akapitach i elementach blokowych,  modyfikować rodzinę czcionek w celu uzyskania ładnych i responsywnych nagłówków,  automatycznie zarządzać rozmiarami czcionek.
  
  Responsive Web Design z jQuery
  
  Konwertowanie tekstu na jednostki względne Jedną z największych zalet użycia jednostek względnych jest efekt kaskadowy wywoływany w momencie, gdy użytkownik zmienia podstawową wielkość czcionki w przeglądarce. W takiej sytuacji wszystkie rozmiary czcionek zmieniają się proporcjonalnie. Dzisiaj niemal wszystkie przeglądarki mają domyślną wielkość elementu bazowego ustaloną na 16 pikseli. Wartość ta może zostać jednak zmieniona w ustawieniach przeglądarki, co pozwala użytkownikowi powiększyć tekst, żeby był łatwiejszy do odczytania. Zanim zaczniemy mówić o najczęściej stosowanych jednostkach miary, muszę opowiedzieć o dwóch szczególnych jednostkach, których popularność cały czas szybko wzrasta. Chodzi mi o jednostki vw (viewport width — szerokość widoku) i vh (viewport height — wysokość widoku). Jednostki odnoszące się do widoku strony nie są obsługiwane we wszystkich przeglądarkach, dlatego dobrze jest zajrzeć na strony http://www.w3.org/TR/css3-values/ lub http://caniuse.com/ viewport-units. Warto przyjrzeć się tym jednostkom, ponieważ ułatwiają one skalowanie wielkości czcionek w zależności od wielkości okna przeglądarki. Najpopularniejsze jednostki stosowane na stronach internetowych przedstawiać będę w kolejnych punktach.
  
  Jednostka względna — procentowa Wartości procentowe wyrażane są względem elementu nadrzędnego, dlatego najczęściej stosuje się je do definiowania struktury strony, tak jak zrobiliśmy to w rozdziale 2. Nie ma jednak żadnych przeciwwskazań, żeby jednostki tej użyć też do zdefiniowania wielkości czcionki. Proszę przyjrzeć się poniższemu przykładowi: body { font-size: 100%; /* bazowe 16px /* } p { font-size: 87.5%; /* 14px ÷ 16 */ }
  
  Część twórców stron definiuje wielkość czcionki w elemencie body na 62,5 procenta (10 pikseli), co ułatwia późniejsze obliczenia. W takiej sytuacji przypisanie elementom strony wielkości czcionki o wartości 150% spowoduje, że będą one miały wielkość 15 pikseli, natomiast wartość 190% odpowiadać będzie wielkości 19 pikseli itd. Metoda ta pozwala na łatwiejsze określenie wielkości czcionek na stronie, działa ona jednak tylko na pierwszym poziomie kaskady określającej wielkości czcionek.
  
  72
  
  Rozdział 4. • Projektowanie responsywnych tekstów
  
  Jednostka względna — em Jednostka em powiązana jest z wyliczoną wielkością czcionki elementu nadrzędnego. W poniższym przykładzie chcemy zdefiniować w elemencie potomnym czcionkę o wielkości 20 pikseli: body { font-size: 1em; /* bazowe 16px /* } p { font-size: 1.25em; /* 20px ÷ 16 */ }
  
  W sieci dostępna jest przydatna strona http://pxtoem.com, która ułatwia wykonywanie takich obliczeń. Poniższy rysunek wyjaśnia, jak używać tego narzędzia. W lewej kolumnie należy podać wielkość bazową czcionki, wówczas w środkowej kolumnie ukażą się wyniki obliczeń. W prawej kolumnie natomiast można dokonywać podobnych obliczeń dla wielkości czcionek spoza zakresu od 6 do 24 pikseli.
  
  Trzeba też pamiętać, żeby podczas wykonywania konwersji jednostek obok ostatecznie obliczonej wartości zawsze dopisywać wartość w pikselach (mówiłem już o tym w rozdziale 2.). Mówię o tym jeszcze raz, ponieważ obsługa wielkości czcionek na stronie związana jest ze stosowaniem wielu kaskadowych stylów, czego przykładem może być poniższy rysunek:
  
  73
  
  Responsive Web Design z jQuery
  
  Jednostka względna — rem Jednostka rem pochodzi ze specyfikacji CSS3 i jest skrótem od root em (bazowe em), czyli jest jednostką określaną względem głównego elementu dokumentu HTML. Oznacza to, że zmiana wielkości czcionki w elemencie spowoduje przeskalowanie czcionek względem elementu bazowego strony, a nie elementów nadrzędnych. To jedyna różnica w stosunku do jednostek em. Przyjrzyjmy się teraz, jak można wielkości z poprzednich przykładów przekształcić na jednostki rem: body { font-size: 1em; /* bazowe 16px /* } section, section li strong { font-size: 14px; /* definicja dla IE8 i wcześniejszych */ font-size: 0.875rem; /* 14px ÷ 16 */ } section li { font-size: 12px; /* definicja dla IE8 i wcześniejszych */ font-size: 0.750rem; /* 12px ÷ 16 */ }
  
  Taki sposób działania może zaoszczędzić nam sporo pracy i ułatwić analizę kodu, jeżeli strona wymagać będzie większej ilości pustego miejsca (w zależności od gęstości prezentowanych treści). Spróbuj zaczynać projekty od przygotowania danych typografii wszystkich głównych elementów struktury, zanim jeszcze zostaną one zaprojektowane. Można to zrobić, tworząc dokument szablonu, w którym zapisane są wszystkie najważniejsze elementy HTML wraz z odpowiednim arkuszem stylów przygotowanym na potrzeby projektu witryny.
  
  Poprawianie wymiarowania elementów za pomocą właściwości box-sizing Na poniższym rysunku zilustrowany został model znany pod nazwą box-model (model polowy), w którym określenie całkowitej szerokości elementu wymaga obliczeń uwzględniających jego obramowanie i dopełnienie. Model ten powoli przestaje być stosowany:
  
  74
  
  Rozdział 4. • Projektowanie responsywnych tekstów
  
  W poniższym przykładzie przedstawiam sposób użycia modelu polowego do podzielenia dostępnej przestrzeni między dwa elementy div, z których każdy ma dopełnienie wielkości 5% oraz obramowanie o grubości 2 pikseli. W efekcie obliczenie szerokości tych elementów wcale nie jest proste: div.splitted { padding: 0 5%; border: 2px solid black; float: left; width: ?; /* wartość rzeczywista= 50% - 10% - 4px */ }
  
  W specyfikacji CSS3 znalazła się właściwość box-sizing, której można przypisać wartość border-box, co oznacza, że wartość szerokości (właściwość width) obejmuje już w sobie wielkości dopełnienia i obramowania. Wprawdzie właściwość ta dobrze funkcjonuje już w ósmej wersji Internet Explorera, nie jest jednak obsługiwana w jego wcześniejszych wersjach. Jeżeli musisz zapewnić stronie obsługę tych dwóch przeglądarek, to możesz wykorzystać dodatek, który załata te braki. Jest on dostępny pod adresem https://github.com/Schepp/box-sizing-polyfill. Zobaczmy teraz, jak ta zmiana wpływa na obliczenia wykonywane w naszym przykładzie: div.splitted { padding: 0 5%; width: 50%; border: 2px solid black; float: left; }
  
  Jak widać, teraz nie ma już problemów z obliczeniem szerokości elementu i przeanalizowaniem wielkości pustych przestrzeni oddzielających elementy na ekranie. Dodatkowo wiele osób definiuje wielkość dopełnienia za pomocą jednostek em, ponieważ pozwala to uniknąć części obliczeń związanych z proporcjami. div.splitted { padding: 0 0.5em; width: 50%;
  
  75
  
  Responsive Web Design z jQuery
  
  border: 2px solid black; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
  
  Aktualnie część przeglądarek nadal wymaga stosowania podanych wyżej przedrostków, dlatego nie można ich pominąć. Poza tym w podobny sposób można definiować dopełnienie elementów w pionie, na przykład tak: div.splitted { padding-top: 1em; }
  
  Dopasowywanie rodziny czcionek do potrzeb nagłówków responsywnych Odpowiednie czcionki pozwalają na przygotowanie dla użytkowników naprawdę fascynujących stron oraz zachowanie spójnego stylu całej witryny bez konieczności przygotowywania setek obrazków na potrzeby nagłówków. Czcionki trzeba wybierać naprawdę ostrożnie, ponieważ ich kształt wpływa na odbiór treści przez użytkowników. Źle dobrana czcionka może spowodować, że po przejrzeniu jednej lub dwóch stron użytkownik opuści witrynę.
  
  Reguła CSS @font-face pozwala projektantom na wykorzystanie niestandardowych czcionek, które nie są zainstalowane na komputerach użytkowników, dzięki czemu umożliwia szybkie dopasowanie wyglądu nagłówków. Wielką zaletą zastosowania reguły @font-face jest to, że nie wymaga ona stosowania obrazków w nagłówkach, a jednocześnie zachowuje elastyczność niezbędną na stronach responsywnych. Reguła @font-face obsługiwana jest przez IE8 oraz wersje wcześniejsze, pod warunkiem że wykorzystywane są czcionki typu EOT. Poza tym Safari iOS 4.1 oraz wersje wcześniejsze obsługują wyłącznie czcionki SVG. W dalszej części tego rozdziału opowiem, jak można rozszerzyć obsługę czcionek w tych przeglądarkach.
  
  Na stronie http://www.google.com/fonts można przejrzeć ogromną bibliotekę czcionek wraz z informacją o ich autorach. Zalecam przeczytać informacje licencyjne każdej czcionki przed jej użyciem, aby zyskać pewność, że można użyć jej komercyjnie.
  
  76
  
  Rozdział 4. • Projektowanie responsywnych tekstów
  
  Podstawowym zadaniem użycia właściwości @font-face jest zdefiniowanie reguły stylu. Za pomocą właściwości font-family definiowana jest nazwa czcionki, której można użyć w dalszej części dokumentu, natomiast właściwość src określa miejsce, w którym czcionka ta jest przechowywana. Z kolei właściwość font-weight (nie trzeba jej używać w przypadku normalnych czcionek, ale jest niezbędna, jeżeli chcemy użyć czcionek pogrubionych lub cienkich) definiuje wagę czcionki. Przykład takiej reguły podaję poniżej: @font-face { font-family: "Kite One"; src: url(/fonts/KiteOne-Regular.ttf); }
  
  Teraz można już użyć nowej czcionki, wykorzystując standardową składnię: p { }
  
  font-family: "Kite One", Helvetica, Arial, sans-serif;
  
  Istnieją jednak lepsze metody. Przyjrzyjmy się teraz sposobom użycia takich narzędzi, jak Font Squirrel, Fit Text, Slabtext, Lettering i Responsive Measure.
  
  Narzędzie Font Squirrel do generowania czcionek Font Squirrel to świetne narzędzie pozwalające na przekształcenie dowolnej czcionki dla komputera stacjonarnego na wersję sprawdzającą się w sieci. Oprócz tego udostępniana jest usługa generowania prawidłowego kodu oraz plików na podstawie danych czcionki. I to wszystko całkowicie za darmo1! Na stronie http://www.fontsquirrel.com/tools/webfont-generator znajdziemy dodatkowe informacje o głównych funkcjach tego narzędzia, takie jak:  Font Squirrel nie wymaga dogłębnej znajomości języka CSS,  w trybie eksperta udostępnia dodatkowe opcje poprawiania szybkości ładowania strony,  wygenerowane pliki i kod działają również w starszych przeglądarkach,  wszystkie udostępniane zasoby są całkowicie darmowe.
  
  Jak to zrobić? Na początek trzeba otworzyć stronę Font Squirrel i kliknąć przycisk Add fonts, a następnie wybrać czcionkę, którą chcemy użyć na własnej stronie i dla której mamy odpowiednią licencję. W kolejnym kroku dobrze jest na początek zaznaczyć opcję Basic (wersja prosta) i pobrać wygenerowane pliki. 1
  
  Darmowa jest jedynie usługa. Pamiętaj, że każda czcionka ma swoją licencję, dlatego tak ważne jest jej przeczytanie przed zastosowaniem czcionki na swojej stronie.
  
  77
  
  Responsive Web Design z jQuery
  
  Po rozpakowaniu zawartości pobranego pliku trzeba na początku pliku CSS dopisać poniższy kod, który pozwoli nam skorzystać z plików czcionek i użyć ich zależnie od sytuacji: @font-face{ font-family: 'kite_oneregular'; src: url('kiteone-regular-webfont.eot'); src: url('kiteone-regular-webfont.eot?#iefix') format('embedded-opentype'), url('kiteone-regular-webfont.woff') format('woff'), url('kiteone-regular-webfont.ttf') format('truetype'), url('kiteone-regular-webfont.svg#kite_oneregular) format('svg'); font-weight: normal; font-style: normal; }
  
  Za każdym razem gdy będziemy chcieli wykorzystać nową czcionkę, wystarczy tylko podać jej nazwę zdefiniowaną w regule @font-face, na przykład tak jak poniżej: p { }
  
  font-family: 'kite_oneregular', Helvetica, Arial, sans-serif;
  
  A wracając do strony pobierania Font Squirrel, mamy też możliwość obrania tylko podzbioru znaków danej czcionki, co bardzo zmniejsza wielkość pliku. W tym celu należy zaznaczyć opcje Optimal lub Expert. W ramach testów trzy razy przygotowaliśmy tę samą czcionkę Kite One, za każdym razem wybierając inną opcję (Basic, Optimal i Expert). Wyniki tego eksperymentu pokazują, że wielkość pliku jest wprost proporcjonalna do liczby znaków zapisanych w pliku czcionki oraz liczby zawartych w nim dodatkowych zasobów. Ustawienie Basic nie zmienia liczby znaków w czcionce, ale już opcja Optimal ogranicza liczbę znaków do mniej więcej 256. W szczególnych przypadkach, w których czcionka Kite One miałaby mniej znaków, nie są wprowadzane żadne optymalizacje. Największy potencjał do zmniejszania plików uzyskujemy po wybraniu trybu Expert, zaznaczeniu opcji Basic Latin i ręcznemu podawaniu poszczególnych znaków. Spróbujmy teraz wygenerować czcionkę, wykorzystując tryb Expert narzędzia Font Squirrel: 1. Kliknij przycisk Add Fonts i wybierz plik czcionki, z którym chcesz pracować. 2. W sekcji Rendering usuń zaznaczenie z opcji Fix Vertical Metrics. 3. W sekcji Font Formats zaznacz opcję SVG, tak jak pokazano na poniższym rysunku. 4. W sekcji Subsetting wybierz pozycję Custom subsetting. 5. W sekcji Language zaznacz opcję Polish. 6. W sekcji Unicode Tables zaznacz opcję Basic Latin. W tym miejscu zakładam, że w tekstach używane będą wyłącznie znaki alfabetu polskiego. Jeżeli używasz innych języków, wybierz potrzebne w nich znaki.
  
  78
  
  Rozdział 4. • Projektowanie responsywnych tekstów
  
  Czasami w tekstach bardzo ważne są takie znaki, jak cudzysłowy lub apostrofy, dlatego dobrze jest skopiować je i wkleić w polu Single Characters, tak jak na poniższym rysunku:
  
  7. Skontroluj obraz wygenerowany w sekcji Subset Preview i w razie potrzeby wprowadź poprawki. 8. Po potwierdzeniu, że przesyłasz czcionkę, do której masz prawa, kliknij po prostu przycisk DOWNLOAD YOUR KIT.
  
  79
  
  Responsive Web Design z jQuery
  
  Wtyczka FitText FitText jest popularną wtyczką do biblioteki jQuery, która elastycznie ustala wielkość czcionek. Jest narzędziem o ciągle rosnącej popularności, ponieważ bardzo ułatwia tworzenie elastycznych czcionek. Jego działanie polega na takim skalowaniu tekstu nagłówka, żeby wypełnił on całą szerokość elementu nadrzędnego. Jeżeli chcesz zobaczyć przykład działania tej wtyczki, żeby się przekonać, na jak wielką elastyczność ona pozwala, to zajrzyj na stronę samej wtyczki pod adresem http://fittextjs.com.
  
  Jak to zrobić? Po pobraniu plików wtyczki z serwerów Github (http://github.com/davatron5000/FitText.js) do swojej strony HTML wstaw poniższy kod: Nagłówek używający FitText
  
  Teraz na samym końcu kodu HTML (przed zamykającym znacznikiem ) trzeba jeszcze dołączyć bibliotekę jQuery i wtyczkę Fittext. Na koniec należy jeszcze uruchomić kod wtyczki obsługującej nasz nagłówek:
  
  
  
  Domyślnie wtyczka ustali wielkość czcionki na 1/10 szerokości elementu. Istnieją dwie metody zmiany tego ustawienia: skonfigurowanie mechanizmu kompresji lub zdefiniowanie minimalnego i maksymalnego rozmiaru. Jeżeli skorzystamy z kompresora, to musimy podać wartość kompresji. Na przykład wartość 1.2 spowoduje delikatniejsze zmiany wielkości tekstu, natomiast wartość 0.8 sprawi, że zmiany wielkości tekstu będą bardziej skokowe:
  
  Możemy też zmodyfikować ten domyślny mechanizm kontroli wielkości tekstu, definiując jego minimalną i maksymalną wielkość. W ten sposób zyskujemy większą kontrolę niezbędną w sytuacjach, w których chcemy zachować hierarchię nagłówków, na przykład tak jak poniżej:
  
  80
  
  Rozdział 4. • Projektowanie responsywnych tekstów
  
  Wtyczka SlabText SlabText jest wtyczką umożliwiającą tworzenie ślicznych i całkowicie responsywnych nagłówków. Dzięki niej każdy może bardzo łatwo przygotować robiące wrażenie nagłówki. Skrypt dzieli każdy nagłówek na wiersze, a następnie każdy z nich powiększa tak, żeby wypełnił przestrzeń dostępną w poziomie. Idealna liczba znaków w wierszu wyliczana jest automatycznie przez podzielenie dostępnej szerokości przez wielkość czcionki w pikselach. Poniżej wymieniam najważniejsze funkcje tej wtyczki:  Jest w pełni responsywna i przygotowana do współpracy z urządzeniami mobilnymi.  Opcja Color Control wybiera dla nagłówka kolor tła, tekstu oraz cienia.  Opcje z grupy Extra Options pozwalają na ustalenie dopełnienia i zdefiniowanie długości cienia. Z kolei opcja Image Overlay umożliwia załadowanie obrazka i umieszczenie go w tle nagłówka za pomocą właściwości CSS3.  Opcja Font Control pozwala wybrać czcionkę i ustalić wszystkie jej parametry.  Opcja Clonable tworzy dowolną liczbę klonów danej sekcji tekstu.  Wtyczka pozwala na ręczne złamanie wiersza.  Zminimalizowana wersja wtyczki zajmuje tylko 4 KB.  Nagłówki zajmujące sporo przestrzeni w poziomie lepiej zapełniają okno dowolnej przeglądarki.  Trzeba się upewnić, że skrypt zostanie wywołany dopiero po załadowaniu wszystkich czcionek z reguły @font-face. Kod wtyczki można pobrać pod adresem http://github.com/freqDec/slabText/ i od razu rozpocząć eksperymentowanie.
  
  Jak to zrobić? Na początek trzeba dopisać do nagłówka header atrybut id, który później zostanie wykorzystany w skrypcie, a następnie tuż przed zamykającym znacznikiem dodać znacznik
  
  81
  
  Responsive Web Design z jQuery
  
  Można też wyłączyć automatyczne łamanie tekstu i samodzielnie wprowadzić miejsca podziału, zmieniając tym samym przekaz dla naszych użytkowników:
  
  
  
  Taki kod trzeba jeszcze połączyć z poniższym skryptem:
  
  
  
  Na poniższym rysunku zobaczyć można obie wersje nagłówka. Pierwotną po lewej, a po prawej wersję po modyfikacjach:
  
  Dokładniejszy opis wszystkich opcji można znaleźć pod adresem http://freqdec.github.io/ slabText/.
  
  Lettering Wtyczka Lettering pozwala na uzyskanie pełnej kontroli nad każdą literą nagłówka. Opakowuje ona poszczególne znaki, słowa i wiersze, nadając im klasy i tworząc tym samym całkowicie zarządzany kod, który umożliwia szybki dostęp do każdego elementu nagłówka z poziomu pliku CSS. Jest to wtyczka do biblioteki jQuery, co bardzo ułatwia dopasowywanie odstępów między literami, nadawanie im specjalnego wyglądu itp. Istnieją dwie niesamowicie doskonale zaprojektowane strony, w których wiele pracy włożono w każdą literę nagłówka. Proszę spojrzeć na te przykłady dostępne pod adresami http://lost worldsfairs.com/moon/ i http://lostworldsfairs.com/eldorado/:
  
  82
  
  Rozdział 4. • Projektowanie responsywnych tekstów
  
  Jak to zrobić? Po pobraniu pliku zip ze strony https://github.com/davatron5000/Lettering.js możemy rozpocząć eksperymentowanie od dodania poniższego kodu do nowej strony HTML. Użyty tutaj kod zostanie wykorzystany za chwilę: Tytuł strony
  
  83
  
  Responsive Web Design z jQuery
  
  Nie można zapomnieć o dodaniu w znaczniku odwołania do biblioteki jQuery i do wtyczki Lettering:
  
  Na samym końcu pliku HTML (przed zamykającym znacznikiem ) trzeba jeszcze wywołać skrypt określający, na której klasie ma działać nasza wtyczka:
  
  Przygotowany w ten sposób kod wygeneruje poniższą strukturę. Wyobraź sobie, że musisz to zapisać bez pomocy wtyczki:
  
  T y t u ł s t r o n y
  
  Tak przygotowanej strukturze można teraz nadawać style. Na przykład takie:
  
  84
  
  Rozdział 4. • Projektowanie responsywnych tekstów
  
  Co więcej, jeżeli nagłówek powinien otrzymać osobne style dla każdego słowa (nie znaku), to można o tym poinformować wtyczkę, podając jej parametr "words", tak jak poniżej:
  
  Można też pomyśleć o osobnych stylach dla poszczególnych wierszy nagłówka rozdzielanych znacznikiem
  : Tytuł strony
  z długim tekstem
  
  W stosunku do poprzedniego przykładu jedyna różnica polega na tym, że podajemy parametr "lines":
  
  Teraz zapewne się zastanawiasz, jak wiele pracy trzeba włożyć w przygotowanie stylów, odmierzanie odległości i wyliczanie, o ile trzeba powiększyć czcionkę każdego elementu. Do tych prac doskonale przyda się narzędzie Kern.js.
  
  Kern.js Kern.js jest narzędziem sieciowym doskonale uzupełniającym funkcje wtyczki Lettering.js, ponieważ udostępnia ono świetny interfejs pozwalający na przeciąganie elementów, dopasowywanie kerningu znaków, ustalanie wysokości wierszy i umiejscowienia liter. A po zakończeniu tych prac wystarczy skopiować wygenerowany kod CSS i użyć go w swoim arkuszu stylów.
  
  Jak tego używać? Na dole strony http://www.kernjs.com/ znajdziesz odsyłacz drag to bookmarks bar to install. Przeciągnięcie go na pasek zakładek ułatwi później włączanie narzędzia na naszej stronie. Aby narzędzie to działało prawidłowo, do nagłówka naszej strony należy dołączyć bibliotekę jQuery w wersji 1.7.2 oraz pliki samej biblioteki Kern.js. Jej skrypt można pobrać na stronie https://github.com/bstro/kern.js.
  
  Oto lista pięciu opcji, które pojawią się na górze strony, gdy tylko po jej otwarciu klikniemy znajdującą się w naszej przeglądarce zakładkę Kernjs.com:
  
  85
  
  Responsive Web Design z jQuery
  
   zmiana kerningu (poziomego odstępu między literami),  zmniejszenie lub zwiększenie rozmiaru czcionki,  dopasowanie wysokości wiersza (odstęp pionowy),  dowolne umiejscowienie liter,  obrót tekstu o pewien kąt. Wszystkie te opcje reprezentowane są za pomocą poniższych ikon:
  
  Gdy tylko zakończysz prace nad nagłówkiem, kliknij przycisk z „fajką”, aby zapisać wszystkie ustawienia w postaci kodu gotowego do skopiowania na naszą stronę. Jeżeli na stronie masz kilka dopasowanych w ten sposób nagłówków, to musisz uważać, żeby kod jednego z nich nie wpływał na drugi. Aby ominąć ten problem, wystarczy elementom nagłówka przypisać specjalną klasę, tak jak w poniższym przykładzie: Tytuł strony
  
  Responsive Measure Responsive Measure to prosty skrypt, któremu można przekazać selektor (najlepiej wybierający element, w którym znajdzie się właściwa treść). Dzięki niemu wygenerowana zostanie idealna definicja wielkości czcionki pozwalająca na dopasowanie tekstu do elementu. Brzmi jak magia? W następnym podpunkcie opiszę sposób użycia tego skryptu i dopasowania go do naszych wymagań.
  
  Jak to zrobić? Po pobraniu plików tego projektu ze strony https://github.com/jbrewer/Responsive-Measure/ wstaw poniższy kod do sekcji na samym początku dokumentu DOM:
  
  Na końcu strony HTML (przed zamykającym znacznikiem ) trzeba jeszcze uruchomić skrypt wywołujący Responsive Measure. Zanim jednak do tego przystąpimy, muszę omówić dwie metody sterowania wielkością tekstu:  idealLineLength — Domyślnie ma wartość 66, ale możemy ją zmienić, określając tym samym liczbę znaków i spacji, które mają się zmieścić w jednym wierszu. Poza tym minimalna wielkość czcionki ustalona jest na 16 pikseli, natomiast maksymalna
  
  86
  
  Rozdział 4. • Projektowanie responsywnych tekstów
  
  na 300 pikseli. Parametr sampleText ma pomagać przy obliczaniu liczby znaków o średniej szerokości znaku. Pamiętaj, że wiersze, w skład których wchodzi od 45 do 75 znaków, powszechnie uznaje się za najlepiej nadające się do czytania.
  
  A oto wspomniany wcześniej kod wywołujący bibliotekę:
  
   minimumFontSize i maximumFontSize — Za pomocą tych parametrów można poprawić obsługę wielkości czcionek, na przykład definiując 13 pikseli jako minimum i 30 jako maksimum. Poza tym domyślna wartość parametru idealLineLength może wpływać na wyniki obliczeń. Jeżeli tak się stanie, możesz to poprawić, definiując własną wartość, podobnie jak zrobiliśmy to w poprzednim przykładzie. A poniżej przykład wykorzystania tych dwóch parametrów:
  
  Ćwiczenie 4. — dopasowywanie nagłówka strony To ćwiczenie wykonamy w trzech krokach, przy czym kroki drugi i trzeci będą już tylko uzupełnieniem pierwszego: 1. Najpierw użyj narzędzia Font Squirrel, żeby przygotować sobie specjalną czcionkę. Następnie zastosuj ją w znaczniku umieszczonym na Twojej stronie. Jeżeli nie wiesz, której czcionki użyć, to polecam wykorzystać czcionkę „Kite One” dostępną w serwisie Google Font.
  
  87
  
  Responsive Web Design z jQuery
  
  2. Wykorzystaj wtyczkę Lettering, tak aby uzyskać pełną kontrolę nad każdą literą, słowem i wierszem nagłówka strony. Teraz zmień kolor pierwszej litery, zmieniając w pliku CSS wartość właściwości color dla klasy .char1. 3. Wywołaj narzędzie Kern.js, klikając jego zakładkę w przeglądarce. Następnie kliknij drugi przycisk na pasku narzędzi, wybierz pierwszą literę nagłówka i zwiększ wielkość jej czcionki. Teraz kliknij ostatni przycisk na pasku narzędzi i umieść wygenerowany kod w pliku CSS.
  
  Podsumowanie W tym rozdziale poznaliśmy metody tworzenia responsywnego tekstu i wielkości czcionek. Poza tym poznaliśmy kilka sposobów zmieniania czcionki na stronie, wykorzystując do tego takie narzędzia, jak Font Squirrel, FitText, SlabText, Lettering i Responsive Measure. Wszystkie te rozwiązania pozwalają na uzyskanie kontroli nad tekstem, która jest niezbędna podczas przygotowywania responsywnej strony WWW. W następnym rozdziale mówić będziemy o obrazach oraz materiałach filmowych. Dowiemy się, jak można przekształcić je w responsywne media dopasowujące się do różnych urządzeń. Poza tym poznamy sposoby odtwarzania materiałów wideo za pomocą różnych odtwarzaczy i urządzeń.
  
  88
  
  5 Przygotowywanie obrazków i filmów Przygotowanie obrazków do użycia na responsywnych stronach WWW jest jednym z najczęściej dyskutowanych problemów, ponieważ konsorcjum W3C nie zaproponowało w tym zakresie żadnych reguł. W międzyczasie społeczność zdołała wypracować już kilka technik o różnorodnych zaletach, które pomagają radzić sobie z tym problemem. Ten rozdział rozpoczniemy od zapoznania się z podstawową metodą zmiany wymiarów obrazka. Tę technikę można bardzo łatwo zastosować w kodzie tworzonej strony, ale użytkowcy urządzeń mobilnych z pewnością oczekują lepszych efektów. Niestety prosta zmiana wymiarów obrazka nie działa tak dobrze na mniejszych urządzeniach, takich jak smartfony i tablety, ponieważ załadowanie na nich obrazka o wysokiej rozdzielczości zajmuje zbyt dużo czasu. Później przyjrzymy się więc zagadnieniom związanym z punktami zmiany (ang. breakpoints) przy obsłudze obrazków. Oprócz tego zwrócimy też uwagę na obsługę filmów, ponieważ znajdowały się one w kodzie naszych stron na długo przed pojawieniem się języka HTML5. Tutaj również musimy rozwiązać problemy związane z przekształcaniem sztywnych stron w responsywne. Dodatkowo pomówimy też o dostępnych wtyczkach biblioteki jQuery i sposobach ich wykorzystywania. Pozwalają one skrócić czas przygotowywania strony i jednocześnie poprawić jakość tworzonego interfejsu użytkownika. W tym rozdziale poznamy:  podstawową metodę zmiany wielkości obrazka za pomocą CSS,  powody stosowania punktów zmiany obrazków,  sposób działania znacznika obrazków,
  
  Responsive Web Design z jQuery
  
   metody sterowania nastawami obrazków,  techniki używania punktów przeskoku obrazków we wtyczkach biblioteki jQuery,  sposoby tworzenia responsywnego tła za pomocą wtyczek biblioteki jQuery,  metody pracy z ekranami o wysokiej gęstości,  techniki przekształcania elementów filmowych w elementy responsywne.
  
  Prosta zmiana wymiarów obrazka za pomocą CSS Za pomocą poniższego kodu można pozwolić obrazkowi na dowolną zmianę swojego wymiaru w zależności od tego, jakie wymiary będzie przyjmował jego element nadrzędny. Maksymalna szerokość została ustalona na 100 procent jego oryginalnego rozmiaru, natomiast wysokość ma dopasowywać się automatycznie w celu zachowania proporcji obrazka: img { max-width: 100%; height: auto; }
  
  Technika ta będzie działała dobrze dopiero wtedy, gdy obrazek będzie na tyle duży, żeby wypełnić maksymalne oczekiwane wymiary elementu nadrzędnego. Niestety obrazki dopasowane do potrzeb komputerów stacjonarnych bywają zbyt duże, żeby przesłać je w internecie mobilnym. Jeżeli do powiększania obrazków JPG wykorzystujesz atrybuty max-width lub height, to w przeglądarkach IE7 i starszych zobaczysz najprawdopodobniej brzydko powiększone piksele. Problem ten można rozwiązać, stosując poniższy zapis: img { -ms-interpolation-mode: bicubic; } Opisany tu problem został rozwiązany w IE8, a w IE9 uznano go za nieistotny.
  
  Stosowanie punktów zmiany obrazków Samodzielnie dopasowujące się obrazki to nie tylko ich automatyczne skalowanie na stronie. Do rozwiązania jest tu też wiele innych problemów. Podczas wstawiania obrazków na responsywne strony trzeba brać pod uwagę wiele zmiennych, takich jak:
  
  90
  
  Rozdział 5. • Przygotowywanie obrazków i filmów
  
   rozdzielczość ekranu,  przepustowość łącza,  szerokość okna przeglądarki. Zdefiniowanie najlepszego obrazka, jaki ma zostać przesłany do przeglądarki, może być uzależnione od każdej z tych zmiennych. Na tym właśnie polega problem. Na przykład znajomość wyłącznie rozdzielczości ekranu nie da nam żadnych informacji o tym, czy łącze, z którego korzysta użytkownik, nadaje się do przesyłania obrazków o wysokiej jakości. Jak w takiej sytuacji możemy na naszą stronę przygotować obrazek, który zostanie wyświetlony w zadowalającej jakości na dowolnym urządzeniu, bez jednoczesnego marnowania przepustowości łącza?
  
  Jeżeli pracujemy z obrazkami bitmapowymi (nie wektorowymi, takimi jak SVG), to idealne rozwiązanie wydaje się całkiem proste: dla każdej z grup rozdzielczości przesyłać inny obrazek. W ten sposób każdy wariant obrazka byłby dobrze dopasowany do danego rodzaju urządzenia. Zazwyczaj urządzenia mają następujące wielkości ekranów:  480 pikseli — smartfony o standardowej rozdzielczości (najpierw-mobilne),  1024 piksele — iPhone z ekranem Retina (smartfony z ekranami o wysokiej gęstości), tablety i komputery stacjonarne o normalnej rozdzielczości,  1600 pikseli — iPad z ekranem Retina (tablety z ekranami o wysokiej gęstości) i komputery stacjonarne o wysokiej rozdzielczości. Istnieje kilka technik, za pomocą których próbowaliśmy już poradzić sobie z tym problemem i dostarczyć właściwy obrazek do odpowiedniego urządzenia. Każda z tych technik działa w nieco inny sposób, dlatego trzeba wybrać metodę najlepiej pasującą do wymagań tworzonego właśnie projektu. Za chwilę przyjrzymy się wszystkim tym technikom.
  
  91
  
  Responsive Web Design z jQuery
  
  Jak działa znacznik picture? Konsorcjum W3C, wychodząc naprzeciw potrzebie dostarczenia użytkownikowi właściwego obrazka, nadal stara się poznać wszystkie aspekty tego problemu. Istnieje nieoficjalny szkic przygotowywanego rozwiązania, w którym definiowany jest znacznik picture pozwalający na podanie różnych źródeł obrazka umożliwiających lepsze dopasowanie go do urządzenia. Bez ustalenia standardu twórcy przeglądarek nie mogą przygotować ich do prawidłowego wyświetlania takich obrazków. Aktualnie społeczność twórców wykorzystuje CSS i JavaScript, żeby zrealizować to samo zadanie.
  
  Oto definicja znacznika picture zapisana w dokumentach W3C: Ta specyfikacja udostępnia twórcom sposób zadeklarowania wielu źródeł jednego obrazka, a możliwość zastosowania zapytań o media pozwala na zdefiniowanie, która jego wersja ma się pojawiać w określonych warunkach. Pomyślano też o starszych przeglądarkach, w których pojawi się podstawowa wersja obrazka. Poniżej przedstawiam przykładowy sposób użycia znacznika picture:
  
  
  
  

  Tekst dostępny dla wszystkich wersji obrazka

  
  
  Zachęcam do zapoznania się z zaktualizowanym tekstem tej specyfikacji dostępnym pod adresem http://picture.responsiveimages.org/.
  
  Kontrolowanie nastaw responsywnych obrazków W ostatnim czasie jest to często podnoszony temat. Autorzy stron powinni definiować różne źródła obrazków nie tylko w zależności od ich rozmiarów, ale także na podstawie swobodnego wyboru; powinni mieć możliwość odpowiedniego ustawienia każdej wersji. Takie postępowanie nazywane jest ustalaniem nastaw obrazków (ang. art direction). Pojęcie to postaram się wyjaśnić za pomocą przykładu. Jeżeli poniższy obrazek wyświetlany będzie na dużym ekranie, to sensowne wydaje się pokazanie zarówno pary w łodzi, jak i znajdującej się w tle rzeki. Takie tło prezentuje miejsce, w którym znajduje się para, ale nie wnosi
  
  92
  
  Rozdział 5. • Przygotowywanie obrazków i filmów
  
  żadnej istotniejszej informacji. Zobaczmy teraz, co stanie się po przeskalowaniu tego obrazka tak, żeby pasował do małego ekranu. To zdecydowanie nie jest żadne ustalanie nastaw.
  
  Przy takim pomniejszeniu ciężko nawet rozpoznać, kto siedzi w łodzi. Może jednak zamiast prostego zmniejszania obrazka zdecydujemy się wykadrować go tak, żeby pozbyć się tła i skupić na parze w łodzi. W efekcie otrzymamy obrazek, który zdecydowanie lepiej sprawdzi się na małych ekranach. Porównajmy teraz lewy obrazek (ustalanie nastaw) z prawym (proste skalowanie):
  
  Biblioteka CSS — Focal Point Focal Point pozwala na skupienie się na najważniejszej części obrazka przed przystąpieniem do skalowania. W ten sposób pokazuje użytkownikowi smartfona główne elementy obrazu. A to wszystko bez użycia skryptów JavaScript i biblioteki jQuery. Za pomocą biblioteki Focal Point można zdefiniować obszar określający części obrazka, które powinny pojawić się nawet na ekranach o niższej rozdzielczości. Tak wyznaczone części będą widoczne niezależnie od tego, jak bardzo pomniejszać będziemy obrazek. Przedstawione poniżej nazwy klas pozwalają na wykadrowanie i przeskalowanie najważniejszych obszarów obrazka. Pamiętaj, że X w nazwach klas reprezentuje liczbę od 1 do 6:  left-X / right-X — Definiują liczbę jednostek, na których należy się skupiać w poziomie.  up-X / down-X — Definiują liczbę jednostek, na których należy się skupiać w pionie.
  
  93
  
  Responsive Web Design z jQuery
  
   portrait — Domyślnie obrazek ma klasę landscape, czyli układ poziomy. Jeżeli jednak wysokość obrazka jest większa od jego szerokości, to należy dodać też klasę portrait.
  
  Jak to zrobić? Po pobraniu plików CSS spod adresu https://github.com/adamdbradley/focal-point w znaczniku swojej strony HTML wstaw poniższy kod:
  
  Teraz można już podziwiać działanie dołączonych stylów, czego przykładem jest poniższy rysunek:
  
  Zasada działania biblioteki Focal Point jest prosta. Wyobraź sobie siatkę o wielkości 12 × 12 pól ułożoną na obrazku:
  
  Załóżmy teraz, że głowa mężczyzny jest najważniejszą częścią obrazka i to właśnie ją musimy zdefiniować jako punkt skupienia. Mimo że jego twarz znajduje się po prawej stronie obrazka, to podczas pomniejszania pozostanie ona głównym elementem obrazu. Aby zdefiniować punkt skupienia, wystarczy przypisać obrazkowi zaledwie dwie klasy. Dzięki temu można poziomą i pionową pozycję punktu skupienia umiejscowić na siatce, przy czym odmierzanie rozpoczyna się od jej centralnego punktu, tak jak na poniższym obrazku:
  
  94
  
  Rozdział 5. • Przygotowywanie obrazków i filmów
  
  Poniższy kod umieszcza punkt skupienia na twarzy mężczyzny:
  
  
  
  W tym przypadku punkt skupienia przesunięty został o trzy jednostki w górę i w lewo od środka obrazu. Każdy obrazek musi zostać objęty elementem div. Niezbędne jest też zastosowanie klasy focal-point.
  
  Alternatywne rozwiązanie ze znacznikiem picture Wiemy już, że konsorcjum W3C pracuje nad jak najszybszym wprowadzeniem standardu znacznika opisującego obrazek, który umożliwiałby jego zaprezentowanie w sposób najwłaściwszy dla danego widoku strony. Problem ten naprawdę daje się we znaki twórcom stron, dlatego społeczność przygotowała już dwie wtyczki JavaScript, generujące podobny efekt i działające we wszystkich przeglądarkach. Wtyczki te nazywają się Foresight i Picturefill.
  
  Foresight — wybieranie właściwego obrazka dla danej wielkości ekranu Wtyczka Foresight umożliwia stronie sprawdzenie, czy urządzenie użytkownika jest w stanie wyświetlić obrazki o wysokiej rozdzielczości (chodzi o ekrany typu Retina), i to jeszcze przed wysłaniem żądania do serwera.
  
  95
  
  Responsive Web Design z jQuery
  
  Dodatkowo wtyczka sprawdza, czy urządzenie ma na tyle szybkie łącze internetowe, żeby umożliwiało ono przesłanie obrazków o wysokiej rozdzielczości. W zależności od rodzaju ekranu i szybkości łącza wybierany jest najlepiej dopasowany obrazek. Odpowiednio konfigurując atrybut src znacznika img i wykorzystując takie metody, jak szablony adresów URI albo wyszukiwanie i zmiana wartości w tych adresach, można przygotowywać żądania tak, żeby pobierały one warianty obrazka o różnych rozdzielczościach. W szczególności chodzi tu o hybrydową implementację nowej funkcji CSS o nazwie image-set(). Podstawowy format funkcji image-set() może składać się z jednego lub kilku wariantów definicji obrazków rozdzielanych znakiem przecinka. Każdy wariant obrazka definiowany jest za pomocą trzech parametrów:  Adres URL — Ma składnię podobną do parametru background-image:url().  Współczynnik powiększenia — Parametr współczynnika powiększenia używany jest jako mnożnik wymiarów obrazka stosowany do określania jego gęstości. Niektóre urządzenia mobilne mają współczynnik gęstości pikseli na poziomie 1,5 lub 2.  Przepustowość — Temu parametrowi można nadać wartość niskiej lub wysokiej przepustowości. Wtyczka wykonuje też szybki test szybkości dostępu do sieci, aby się upewnić, że urządzenie poradzi sobie z obrazkami o wysokiej rozdzielczości bez zmuszania użytkownika do oczekiwania na załadowanie ich przez powolne łącze.
  
  Jak to zrobić? Niezbędne pliki można pobrać ze strony https://github.com/adamdbradley/foresight.js. Następnie w znaczniku strony należy dopisać poniższy kod:
  
  Teraz możemy przyjrzeć się przedstawionemu poniżej rzeczywistemu przykładowi, który został przygotowany z zachowaniem koncepcji najpierw-mobilne: .fs-img { width:100%; font-family: 'image-set( url(-small|-small-2x) 2x high-bandwidth )'; display:none; }
  
  Następnie definiujemy obrazki dla okien większych niż 600 pikseli oraz większych niż 800 pikseli: @media (min-width:600px) { .fs-img { font-family: 'image-set( url(-small|-medium), url(-small|-medium-2x) 2x high-bandwidth )';
  
  96
  
  Rozdział 5. • Przygotowywanie obrazków i filmów
  
  } } @media (min-width:800px) { .fs-img { font-family: 'image-set( url(-small|-large), url(-small|-large-2x) 2x high-bandwidth )'; max-width:100%; } }
  
  W przedstawionym kodzie wyróżniłem kilka słów, żeby lepiej wyjaśnić, jak działa ten mechanizm. W atrybucie src znacznika img kod wyszuka część nazwy i zastąpi ją inną. Następnie witryna poszuka zmienionej nazwy wśród swoich plików, sprawdzając, czy taki obrazek istnieje. A tak wygląda przygotowany odpowiednio znacznik img:
  
  Cały mechanizm będzie zmieniać przyrostek w nazwie pliku, który ma zostać przeskalowany. To dobrze, ponieważ ogranicza to liczbę modyfikacji kodu podczas tworzenia nowych responsywnych obrazków.
  
  Jeżeli porównamy wagę poszczególnych wariantów obrazka z poniższego przykładu, to okaże się, że największy z nich ma wielkość 44 KB, średni ma już tylko 20 KB, a najmniejszy z nich zaledwie 12 KB. W przypadku jednego obrazka to nie jest wielka różnica, ale jeżeli ten sam mechanizm zastosujemy na całej stronie, to na pewno zredukujemy ilość niepotrzebnie przesyłanych danych.
  
  97
  
  Responsive Web Design z jQuery
  
  Picturefill — rozwiązanie najbardziej przypominające znacznik picture Picturefill jest wtyczką w języku JavaScript obsługującą responsywne obrazki i w swoim działaniu bardzo zbliżoną do planowanego znacznika picture. Ta niewielka wtyczka zamiast znaczników picture lub img wykorzystuje znacznik span, dzięki czemu można ją bezpiecznie używać na naszych stronach. Wtyczka Picturefill obsługuje już funkcję podmiany obrazków na ich wersję HD (dla wyświetlaczy Retina). Poza tym poprawia ona również szybkość ładowania strony dzięki temu, że wybiera tylko jedną wersję obrazka właściwą dla danego ekranu, a nie pobiera pozostałych. Więcej informacji na jej temat można znaleźć pod adresem https://github.com/scottjehl/picturefill.
  
  Jak to zrobić? Po pobraniu plików wtyczki wstaw w znaczniku swojej strony poniższy kod:
  
  Poniżej prezentuję kod, który należy użyć w kodzie HTML strony. Zauważ, że trzeba tu podać adres źródłowy każdego obrazka wraz ze wszystkimi jego wariantami:
  
  
  
  
  
  
  
  Na koniec trzeba jeszcze zainicjować odtwarzacz dla wszystkich znaczników i umieszczonych na stronie:
  
  Na poniższym rysunku zobaczyć można domyślny interfejs odtwarzacza:
  
  Dokumentacja odtwarzacza doskonale opisuje wszystkie opcje, za pomocą których możemy go skonfigurować i dopasować do swojej strony. Znajdziesz je pod adresem http://mediaelementjs. com/#options.
  
  182
  
  Rozdział 10. • Prawidłowa obsługa przeglądarek
  
  SVG Format SVG (Scalable Vector Graphics) przeznaczony jest do zapisywania obrazów wektorowych. Istnieje wiele zalet stosowania tego rodzaju obrazów, takich jak niewielkie pliki, możliwość skalowania bez utraty ostrości, doskonały wygląd na wyświetlaczach Retina. Dodatkowo projektanci stron mają lepszą kontrolę nad tymi obrazkami, co przekłada się na ich większą interaktywność. Niestety nie wszystkie przeglądarki obsługują ten format, a przez to konieczne staje się przygotowanie rozwiązań zastępczych. Technika przygotowana przez Alexeya Tena rozwiązuje ten problem w starszych przeglądarkach, takich jak Internet Explorer 8 i Android 2.3. Poznajmy zatem lepszy sposób obsługi plików SVG.
  
  Jak to zrobić? Istnieje kilka sposobów umieszczenia plików SVG na tworzonej stronie. Przyjrzyjmy się tu następującym metodom: umieszczeniu plików SVG jako obrazka tła elementu, jako znacznika svg i jako znacznika img.
  
  Obrazki SVG jako tło elementu Biblioteka Modernizr ma też test na obsługę formatu SVG. Można zatem przygotować zastępcze tło dla klas, które Modernizr wstawił już do dokumentu HTML: .my-element { background-image: url(image.svg); } .no-svg .my-element { background-image: url(image.png); }
  
  Obrazki SVG w znaczniku To całkiem nowa technika, w której starsze przeglądarki nie rozpoznają pogrubionej części znacznika i dlatego zamiast pliku .svg wyświetlą plik .png:
  
  
  
  Obrazki SVG w zwyczajnym znaczniku Dzięki zastosowaniu biblioteki Modernizr sprawdzimy, czy przeglądarka obsługuje format SVG i dopiero potem wstawimy odpowiedni kod. Jeżeli obsługa będzie niemożliwa, to kod odszuka plik .png o tej samej nazwie i wyświetli go zamiast obrazka .svg:
  
  183
  
  Responsive Web Design z jQuery
  
  
  
  Trzeba pamiętać o utrzymywaniu spójnych szablonów adresów URL i nazw plików. Bez tego skrypty nie będą w stanie odnaleźć właściwych zasobów i strona przestanie działać.
  
  Respond.js Respond.js jest szybkim i niewielkim wypełniaczem obsługującym właściwości min-width i max-width, które pozwalają na stosowanie zapytań o media tworzących reinterpretowane arkusze stylów przygotowane w sposób zrozumiały dla przeglądarek Internet Explorer 6 do 8. Nasze zapytania o media nie wymagają żadnych zmian. Wystarczy, że same instrukcje @media zostaną właściwie zapisane. Upewnij się, że plik respond.min.js dołączony jest za ewentualnymi plikami CSS. Jeżeli style CSS wykorzystują instrukcje @import albo zapisane są w samym kodzie HTML, to skrypt Respond.js nie będzie w stanie ich odczytać. Dlatego lepiej jest zawsze stosować znaczniki . Na przykład:
  
  Jak to zrobić? Na samym końcu dokumentu (przed zamykającym znacznikiem ) musimy dołączyć bibliotekę Respond.js, którą można pobrać ze strony https://github.com/scottjehl/Respond. Upewnij się, że plik respond.min.js dołączasz do strony dopiero po dołączeniu ewentualnych plików CSS:
  
  I to wszystko.
  
  184
  
  Rozdział 10. • Prawidłowa obsługa przeglądarek
  
  Podsumowanie W tym rozdziale zapewniliśmy prawidłowe wyświetlanie strony, przygotowując rozwiązania zastępcze dla starszych przeglądarek. Nauczyliśmy się wykrywać cechy przeglądarek i obsługiwane przez nie funkcje, wykorzystując do tego celu biblioteki Browser Selector i Modernizr. Te biblioteki bardzo nam pomogły podczas tworzenia progresywnie rozbudowywanych stron. Oprócz tego poznaliśmy też kilka ciekawych wypełniaczy związanych z językiem HTML5, np. html5shiv lub MediaElements, a także specjalne techniki obsługi obrazków SVG. Na końcu rozdziału przedstawiony został też wypełniacz Respond.js przeznaczony do obsługi plików CSS. W następnym rozdziale podsumuję wszystkie dotychczasowe rozdziały i przedstawię tysiące wtyczek pozwalających tworzyć responsywne strony WWW.
  
  185
  
  Responsive Web Design z jQuery
  
  186
  
  11 Przydatne wtyczki responsywne Ciągły rozwój technologii i trendów sprawia, że cały czas pojawiają się nowe wtyczki wspomagające nas w rozwijaniu responsywnych stron WWW. Ważne jest, żeby ciągle pozostawać na bieżąco, przeglądając takie blogi jak http://www.smashingmagazine.com/, http://bradfrostweb. com/blog/ i http://www.lukew.com/ff/. W tym rozdziale poznamy następujące wtyczki:  obsługujące strukturę strony, takie jak Columns, Equalize i Packery,  tworzące menu nawigacyjne, takie jak Sidr, EasyResponsiveTabstoAccordion, FlexNav i inne.
  
  Wtyczki obsługujące strukturę strony W rozdziale 2. prezentowałem już takie wtyczki, jak Fluid Baseline Grid System, 1140 Grid i Foundation4, które dają nam podstawy do szybkiego tworzenia stron responsywnych. Trzeba jednak pamiętać, że naszym zadaniem jest przygotowanie spójnej witryny i unikanie tworzenia czegoś, co zostało już zrobione. Istnieje kilka dodatkowych wtyczek, takich jak Columns, Equalize i Packery, o których (chcąc skoncentrować się na temacie tworzenia strony) wcześniej nie mówiłem, a które również są bardzo użyteczne.
  
  Responsive Web Design z jQuery
  
  Tworzenie prostych struktur responsywnych za pomocą wtyczki Columns Zacznijmy od wtyczki Columns, której zadaniem jest szybkie przygotowanie układu responsywnego, podobnie jak robią to systemy siatkowe. Prostota tego rozwiązania sprawia, że sama wtyczka jest bardzo mała i można się szybko nauczyć jej obsługi. Wtyczka została wydana na licencji MIT i doskonale działa w nowoczesnych przeglądarkach oraz IE9. Jeżeli chcesz użyć jej również dla IE8, to musisz skorzystać z wypełniaczy elementów HTML5 i zapytań o media. Ta wtyczka najlepiej nadaje się dla niewielkich witryn, w których wystarcza prosta i szybka implementacja struktur responsywnych. Nie oznacza to, że nie sprawdzi się ona w średnich i wielkich witrynach, ale w ich przypadku inne rozwiązania mogą dać większe możliwości dopasowania struktury. Dodatkowo istnieje też opcja automatycznego dopasowania wartości minimalnych i maksymalnych wielkości czcionki w zależności od wielkości ekranu. Kod wtyczki można pobrać ze strony https://github.com/elclanrs/jquery.columns/. Po jej pobraniu trzeba wstawić poniższą deklarację do znacznika naszego dokumentu:
  
  Teraz wykorzystamy poniższy kod HTML jako przykład obrazujący sposób użycia tej wtyczki. Nic nie stoi na przeszkodzie, żeby użyć jej również w projektach, nad którymi aktualnie pracujesz. Zauważ, że takie klasy, jak row-1 i col, oraz identyfikatory, takie jak content-1 i content-2, definiują wygląd struktury zależnie od punktu zmiany:
  
  
  
  
  
  Maui waui

  Lorem ipsum dolor sit amet...

  
  
  Super uper

  Lorem ipsum dolor sit amet...

  
  
  
  
  Jakiś tekst
  
  188
  
  Rozdział 11. • Przydatne wtyczki responsywne
  
  

  Lorem ipsum dolor sit
  
  Nic ciekawego

  Lorem ipsum dolor sit
  
  Nowości

  Lorem ipsum dolor sit
  
  I to wszystko

  Lorem ipsum dolor sit
  
  amet...

  
  
  amet...
  
  
  amet...
  
  
  amet...
  
  
  Definiując takie klasy, jak row-2 lub row-4, określamy liczbę kolumn, jaką zajmować ma dana sekcja. Z kolei identyfikatory pozwalają na różny sposób wyświetlania poszczególnych kolumn. W tym przykładzie wykorzystamy dwa punkty zmiany: 480 pikseli (standard dla tej wtyczki) oraz 1024 piksele. Na samym końcu dokumentu (przed zamykającym znacznikiem ) trzeba dołączyć kod biblioteki jQuery oraz wtyczki Columns. Następnie musimy uruchomić skrypt wywołujący funkcję quickSetup i konfigurujący poszczególne kolumny i punkty zmiany.
  
  
  
  W tym przykładzie sekcja content-2 będzie miała cztery kolumny na wiersz, pod warunkiem że ekran będzie miał szerokość mniejszą niż 1024 piksele, i tylko jedną kolumnę na wiersz dla ekranów o szerokości mniejszej niż 480 pikseli. Na poniższym rysunku można zobaczyć wynik działania tej wtyczki na ekranie komputera stacjonarnego oraz tabletu: Oprócz tego wtyczka pozwala na dynamiczne dodawanie kolumn. Taka zmiana wejdzie jednak w życie dopiero po uprzednim dodaniu kolumn do dokumentu DOM i wywołaniu funkcji $.columns.refresh().
  
  189
  
  Responsive Web Design z jQuery
  
  190
  
  Rozdział 11. • Przydatne wtyczki responsywne
  
  Użycie wtyczki Equalize do dopasowania wymiarów elementów Jeżeli chcemy, żeby nasza strona wyglądała jak zbiór kart, to podczas dynamicznego ładowania wypełniających je treści bardzo często napotykamy na problem związany z różnymi wielkościami kart. Zwykle chcemy, żeby wszystkie elementy strony miały w takiej sytuacji tę samą wielkość. Włączenie opływania całej listy elementów sprawi, że ich zawartość będzie miała wpływ na podział wierszy, przez co drugi wiersz nie będzie zaczynał się od lewej krawędzi, ale w pewnej odległości od niej. Na poniższym rysunku można zobaczyć typowy przykład problemów z rozmieszczeniem kart na stronie:
  
  Możemy wszystkim elementom przypisać tę samą wysokość, ale wtedy stracimy dynamicznie dostosowujące się wymiary. Podobne problemy pojawiają się też w odniesieniu do szerokości elementów. Wtyczka Equalize ma za zadanie wyrównać wysokości i szerokości wszystkich elementów. To niewielka, ale bardzo przydatna wtyczka biblioteki jQuery, której trzeba tylko podać identyfikator lub klasę elementu nadrzędnego. Wylicza ona wymiary największego elementu i przypisuje je wszystkim mniejszym elementom, dzięki czemu unika problemów z ich rozkładem. Ważne jest też, że może stosować dowolną z poniższych metod zmiany wielkości elementów dostępnych w bibliotece jQuery: height, outerHeight, innerHeight, width, outerWidth, i innerWidth. Najczęściej używa się wariantu height, dlatego jest on domyślnym zachowaniem wtyczki. Spróbujmy teraz przygotować ten sam przykład, używając tym razem wtyczki Equalize. Zadaniem będzie takie jej wykorzystanie, żeby wszystkie elementy miały tę samą wielkość równą wielkości największego z nich. W ten sposób uda się nam zachować responsywność strony bez niepożądanych łamań wierszy. Po pobraniu niezbędnych plików ze strony https://github.com/tsvensen/equalize.js/ możemy przystąpić do tworzenia przykładowej strony WWW, wpisując do jej kodu poniższą listę:
  
  wyrównaj
  
  191
  
  Responsive Web Design z jQuery
  
  wyrównaj wysokość elementu wyrównaj wyrównaj wyrównaj wyrównaj element wyrównaj wyrównaj wyrównaj wysokość elementu wyrównaj
  
  Następnie na samym końcu dokumentu (przed zamykającym znacznikiem ) trzeba dołączyć jeszcze biblioteki jQuery i Equalize. Na zakończenie niezbędne jest wywołanie skryptu dla elementu o identyfikatorze equalize-height (nadrzędnego wobec wszystkich elementów
• ):
  
  
  
  Wynik powinien przypominać poniższy rysunek:
  
  Implementowanie strony z kafelkami za pomocą wtyczki Packery Packery to wtyczka biblioteki jQuery implementująca specjalny algorytm wypełniający puste przestrzenie na stronach wykorzystujących kafelki. Trend tworzenia stron w takim układzie pojawił się po powstaniu serwisu Google+ i cały czas zyskuje na popularności. Wtyczka Packery rozpowszechniana jest na licencji GPLv3 dla projektów niekomercyjnych, osobistych i otwartoźródłowych. Jeżeli chcesz wykorzystać ją na stronie komercyjnej, to taka licencja kosztuje 25 dolarów.
  
  192
  
  Rozdział 11. • Przydatne wtyczki responsywne
  
  Implementacja wtyczki nie jest skomplikowana, o czym przekonamy się na poniższym przykładzie. W tym celu trzeba pobrać pliki wtyczki ze strony https://github.com/metafizzy/packery. Zaczniemy od przygotowania pustego pliku HTML. W pobranych plikach wtyczki mamy już wszystko, czego nam potrzeba, żeby jej użyć. Możemy zatem wpisać do znacznika poniższy kod CSS, który zajmie się obsługą wielkości kafelków:
  
  Teraz możemy wpisać kod HTML, w którym każdy element div będzie reprezentował jeden kafelek:
  
  
  
  
  
  
  
  Na samym końcu dokumentu (przed zamykającym znacznikiem ) trzeba jeszcze dołączyć biblioteki .Query i Packery, a potem wywołać skrypt tej ostatniej dla elementu o wybranym identyfikatorze. Trzeba jej przekazać selektor elementów podrzędnych, które mają zostać przemieszczone, oraz wybrać ilość miejsca pomiędzy kolumnami (ang. gutter).
  
  
  
  Wynik tych prac wyświetlony na tablecie oraz komputerze stacjonarnym prezentuje się tak, jak na poniższym rysunku:
  
  Wtyczki tworzące menu nawigacyjne W rozdziale 3. poznaliśmy już kilka popularnych technik tworzenia menu, z których każda miała swoje charakterystyczne cechy. Niestety nie istnieje „menu idealne” sprawdzające się we wszystkich sytuacjach.
  
  194
  
  Rozdział 11. • Przydatne wtyczki responsywne
  
  Chcąc zawsze stosować zasadę progresywnego rozszerzania interakcji z użytkownikiem, musimy sprawdzić, jak można poprawić naszą stronę, co zwykle wiąże się z użyciem różnych bibliotek JavaScript lub wtyczek jQuery. Zaprezentuję tu trzy uzupełniające się wtyczki, które nieco uatrakcyjnią nawigację w porównaniu z poznanymi do tej pory rozwiązaniami. Mówię tutaj o wtyczkach Sidr, EasyResponsiveTabstoAccordion i FlexNav.
  
  Tworzenie menu bocznego za pomocą wtyczki Sidr Sidr to wtyczka biblioteki jQuery przeznaczona do tworzenia menu bocznego, które jest bardzo często stosowane na responsywnych stronach WWW. Umożliwia ona nawet przygotowanie kilku takich menu (po obu stronach ekranu) i współpracę z zewnętrznymi treściami. Spróbujmy tu zaimplementować następujący przykład, w którym użyjemy standardowego pliku HTML uzupełnionego plikiem stylów CSS dołączonym do wtyczki, którą można pobrać ze strony https://github.com/artberri/sidr. Do wyboru mamy dwie opcje wyświetlające menu ciemne (plik jquery.sidr.dark.css) lub jasne (plik jquery.sidr.light.css). Oczywiście oba warianty można samodzielnie zmienić, modyfikując poszczególne style. Po dołączeniu jednego z tych plików w znaczniku naszej strony możemy zmienić początkowy styl, ukrywając w ten sposób nagłówek menu na ekranach szerszych niż 767 pikseli.
  
  Teraz możemy użyć poniższego kodu HTML jako przykładu zastosowania omawianej wtyczki:
  
  Menu
  
  
  • Pozycja menu 1
  • Pozycja menu 2
  • Pozycja menu 3
  • Pozycja menu 4
  
  
  195
  
  Responsive Web Design z jQuery
  
  
  • Pozycja menu 5
  • Pozycja menu 6
  
  
  Na samym końcu dokumentu (przed zamykającym znacznikiem ) musimy jeszcze dołączyć bibliotekę jQuery i wtyczkę Sidr. Następnie trzeba uruchomić wtyczkę, wywołując ją dla elementu przycisku otwierającego menu:
  
  
  
  W przygotowanym kodzie identyfikator sird-main wyznacza element przechowujący całe menu boczne, natomiast identyfikator navigation wyznacza to menu, które ma się pojawić w menu bocznym. Na poniższym rysunku można zobaczyć efekt przygotowanego rozwiązania. Po kliknięciu przycisku Menu na ekranach węższych niż 767 pikseli (sami zdefiniowaliśmy tę wartość) pojawi się menu utrzymane w jasnych barwach:
  
  196
  
  Rozdział 11. • Przydatne wtyczki responsywne
  
  EasyResponsiveTabstoAccordion EasyResponsiveTabstoAccordion jest niewielką wtyczką biblioteki jQuery, która zajmuje się przekształcaniem normalnych, poziomych lub pionowych kart na postać harmonijki (ang. accordion) lepiej dopasowanej do wyświetlania na niewielkim ekranie takich urządzeń jak smartfony lub tablety. Zadaniem tej wtyczki jest takie zmodyfikowanie elementu nawigacyjnego, żeby pasował on do mniejszej szerokości ekranu. Oprócz tego nadaje on priorytety treściom, wyświetlając początkowo zawartość pierwszej karty i ukrywając zawartość pozostałych. Efekty realizowane przez tę wtyczkę są w całości tworzone za pomocą biblioteki jQuery, co bardzo pomaga w uzyskaniu zgodności między różnymi przeglądarkami. Najlepszą metodą sprawdzenia, jak to działa, jest samodzielne wypróbowanie. Po pobraniu plików ze strony https://github.com/samsono/Easy-Responsive-Tabs-to-Accordion/ możemy przygotować standardowy dokument HTML i w znaczniku dołączyć do niego plik ze stylami CSS:
  
  Teraz musimy przygotować poniższy kod HTML definiujący przykładowe karty wraz z zawartością:
  
  
  • Karta 1
  • Karta 2
  • Karta 3
  
  
  Lorem ipsum dolor sit amet… Integer laoreet placerat suscipit… Nam porta cursus lectus…
  
  W kolejnym kroku na dole dokumentu (przed zamykającym znacznikiem ) trzeba jeszcze dołączyć bibliotekę jQuery i wtyczkę EasyResponsiveTabstoAccordion, a później wywołać skrypt tej ostatniej, podając jej identyfikator elementu przechowującego karty:
  
  
  
  Na poniższym rysunku można zobaczyć efekt działania wtyczki na ekranie smartfona i ekranie szerszym niż 768 pikseli:
  
  Poniżej podaję listę opcjonalnych parametrów, z których skorzystałem podczas wywoływania tego skryptu:  type: 'default' — Można nadać jej wartość default, vertical lub accordion.  width: 'auto' — Oprócz wartości auto można przypisać jej konkretną szerokość.  fit: true — Pozwala na dopasowanie tworzonego efektu do wymiarów elementu nadrzędnego.  closed: false — Na początek zamyka wszystkie panele.  activate: function() — Definiuje funkcję wywołania zwrotnego, która uruchamiana jest w momencie zmiany aktywnej karty.
  
  Większa elastyczność menu dzięki wtyczce FlaxNav FlexNav to wtyczka biblioteki jQuery ułatwiająca tworzenie złożonych i responsywnych menu nawigacyjnych bez konieczności pisania wielu wierszy kodu. Działa ona zgodnie z filozofią
  
  198
  
  Rozdział 11. • Przydatne wtyczki responsywne
  
  najpierw-mobilne, dzięki czemu na ekranach dotykowych wszystkie podmenu można rozwinąć, dotykając odpowiedniego elementu. Oprócz możliwości kontrolowania zagnieżdżonych menu w sposób dopasowany do urządzenia wtyczka poprawia też dostępność treści, pozwalając na nawigację za pomocą klawiatury i tworząc rozwiązania zastępcze dla starszych przeglądarek. Wszystkie niezbędne pliki wtyczki można pobrać ze strony https://github.com/indyplanets/ flexnav. Zaczynając od podstawowego dokumentu HTML, musimy dodać w znaczniku plik ze stylami CSS:
  
  Teraz możemy dopisać poniższy kod HTML tworzący prostą listę wypunktowaną, uzupełnioną kilkoma klasami i atrybutami:
  • Pozycja 1
  • Pozycja 2
    • Podmenu 1 Pozycja
    • Podmenu 1 Pozycja
  • Pozycja 3
    • Podmenu 1 Pozycja
    • Podmenu 1 Pozycja
    • Podmenu 1 Pozycja
  Menu
  
  1
2

1 2 3

Następnie na samym końcu dokumentu (przed znacznikiem zamykającym ) dołączymy jeszcze bibliotekę jQuery i wtyczkę FlexNav. Na zakończenie dopiszemy wywołanie skryptu wtyczki dla identyfikatora lub klasy elementu, który chcemy przekształcić w menu responsywne.



Efekt naszych prac można zobaczyć na poniższym rysunku na ekranie smartfona i tabletu:

199

Responsive Web Design z jQuery

Podczas wywoływania skryptu możliwe jest też przekazanie wtyczce pewnych opcji, takich jak:  'animationSpeed':'250' — Ustala szybkość animacji. Przyjmuje też wartości fast lub slow.  'transitionOpacity': true — Definiuje domyślną animację przezroczystości.  'buttonSelector': '.menu-button' — Definiuje domyślną klasę przycisku menu.  'hoverIntent': false — Opcja dotyczy wyłącznie wtyczki hoverIntent.  'hoverIntentTimeout': 150 — Opcja dotyczy wyłącznie wtyczki hoverIntent. Na przykład:

Różne rozwiązania Prezentowanych poniżej wtyczek nie można umieścić w żadnej konkretnej kategorii, dlatego prezentuję je w jednym podrozdziale. Mówić tu będę o wtyczkach SVGeezy, Prefix free, Magnific Popup, Riloadr oraz Calendario.

200

Rozdział 11. • Przydatne wtyczki responsywne

SVGeezy SVGeezy jest wtyczką biblioteki jQuery obsługującą obrazki w formacie SVG w takich przeglądarkach jak IE8 i starsze albo Android 2.3 i starsze. Jej działanie jest bardzo proste, ponieważ wykrywa ona użycie obrazków SVG na naszej stronie i automatycznie poszukuje innych obrazków (na przykład w formacie PNG), którymi można je zastąpić. Wszystkie obrazki zastępcze muszą mieć dokładnie taką samą nazwę. Wykonywana przez wtyczkę zmiana dotyczy tylko formatu pliku, ale nie musi to być koniecznie format PNG. Podczas wywoływania skryptu można zdefiniować, jaki format plików ma zostać użyty w tym przypadku. Jeżeli musisz zapewnić obsługę starszych przeglądarek, to jest to bardzo dobre rozwiązanie. Możesz je pobrać ze strony https://github.com/benhowdle89/svgeezy. Najpierw przygotuj standardowy dokument HTML, a w jego treści wywołaj obrazek SVG za pomocą znacznika :

Następnie na końcu dokumentu (przed zamykającym znacznikiem ) możesz dołączyć bibliotekę jQuery i wtyczkę SVGeezy. Potem trzeba już tylko wywołać skrypt wtyczki, podając jej dwa parametry:  Pierwszy parametr definiuje klasę, która ma zostać użyta wówczas, gdy obrazek zastępczy nie istnieje albo nie chcemy w tym przypadku używać żadnych obrazków zastępczych.  Drugi parametr podaje rozszerzenie obrazków zastępczych, jakie mają być prezentowane przeglądarkom nieobsługującym formatu SVG. Najczęściej stosuje się tu rozszerzenie PNG.

Można też zmienić parametr nocheck na wartość false, dzięki czemu wtyczka będzie kontrolowała wszystkie obrazki.

Prefix free Biblioteka Prefix free pozwala na wykorzystanie właściwości CSS, które standardowo nie mają przedrostków. Działając w tle, uzupełnia ona kod CSS o przedrostki przeglądarek w tych miejscach, gdzie jest to konieczne. Pozwala to nam tworzyć kod niezależnie od jakichkolwiek przedrostków. Nie musimy zaśmiecać sobie pamięci takimi szczegółami, a poza tym ułatwia to późniejsze modyfikacje kodu, ponieważ wtedy również nie musimy zajmować się przedrostkami.

201

Responsive Web Design z jQuery

Biblioteka nie jest może responsywna, ale jej zadaniem jest ułatwienie pracy z nowoczesnymi przeglądarkami przez dodawanie przedrostków tam, gdzie są one konieczne, i unikanie ich starych i nieaktualnych wersji.

Można ją bardzo łatwo użyć na swoich stronach. Najpierw trzeba pobrać jej kod z adresu https:// github.com/LeaVerou/prefixfree. W tym przykładzie możemy ponownie użyć kodu HTML z dowolnego z poprzednich przykładów i dołączyć do niego plik prefixfree.js w znaczniku dokumentu (zaraz za plikami CSS):

Zaleca się dołączenie tej biblioteki jeszcze w nagłówku dokumentu, ponieważ w ten sposób można zminimalizować efekt błyskania strony (znany też pod nazwą efektu FOUC).

Oto porównanie kodu stylów CSS przed użyciem tej biblioteki i po jej zastosowaniu. Jak można zauważyć, jej użycie pozwala na zmniejszenie plików o wiele wierszy kodu. W ten sposób zazwyczaj piszemy kod stylów dla naszych stron: #element { margin: 0; -webkit-box-shadow: 1px 2px 3px #999; box-shadow: 1px 2px 3px #999; border-radius: 10px; -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; -ms-transition: all 1s; transition: all 1s; background: background: background: background: background:

-webkit-linear-gradient(to top, orange 50%, #eee 70%); -moz-linear-gradient(to top, orange 50%, #eee 70%); -o-linear-gradient(to top, orange 50%, #eee 70%); -ms-linear-gradient(to top, orange 50%, #eee 70%); linear-gradient(to top, orange 50%, #eee 70%);

}

A tak wygląda kod działający we wszystkich przeglądarkach dzięki zastosowaniu biblioteki Prefix Free. #element { margin: 0; box-shadow: 1px 2px 3px #999; border-radius: 10px;

202

Rozdział 11. • Przydatne wtyczki responsywne

transition: all 1s; background: linear-gradient(to top, orange 50%, #eee 70%); }

Niesamowite, jak bardzo udało się zmniejszyć ten kod. Wypróbuj tę technikę w swoich dokumentach.

Magnific Popup Magnific Popup jest wtyczką biblioteki jQuery umożliwiającą tworzenie responsywnych wyskakujących okienek, których można na przykład użyć do:  wyświetlania obrazków lub galerii w osobnym oknie,  wyświetlania filmów lub map,  tworzenia modalnych okienek,  tworzenia okienek dialogowych z animacjami CSS. Twórcy wtyczki koncentrowali się na uzyskaniu jak najlepszej wydajności i prezentowaniu użytkownikom doskonałych rozwiązań na każdym urządzeniu. Jeżeli chodzi o przeglądarki Internet Explorer, to wtyczka Magnific Popups działa prawidłowo w wersji 8 tej przeglądarki i wszystkich nowszych. Możliwe jest to dzięki zastosowaniu lekkiej i modularnej budowy kodu dostępnego na stronie http://dimsemenov.com/plugins/magnific-popup/, na której trzeba kliknąć odsyłacz Build tool. Wykorzystanie funkcji przejść CSS3 zamiast animacji JavaScript znacznie poprawia ich jakość i wydajność. Oprócz tego wtyczka udostępnia niewielki mechanizm mikroszablonów, który ponownie wykorzystuje istniejące elementy, aby przyspieszyć ładowanie wyskakujących okienek, które używają tego samego wzorca (na przykład w galerii obrazów). Spróbujmy teraz przygotować mały przykład. Zaczniemy od utworzenia standardowego dokumentu HTML, a po pobraniu plików wtyczki ze strony https://github.com/dimsemenov/Magni fic-Popup w znaczniku dołączymy do niego plik ze stylami CSS. Ten plik nie jest co prawda niezbędny do działania wtyczki, ale zawiera style tworzące całkiem ciekawe efekty:

Teraz możemy dopisać poniższy kod definiujący dwa odsyłacze, z których jeden wyświetla wyskakujące okienko z obrazkiem, a drugi otwiera okno z materiałem filmowym:

Otwórz okienko

Obejrzyj film



Potem na końcu dokumentu (przed zamykającym znacznikiem ) musimy jeszcze dołączyć bibliotekę jQuery oraz wtyczkę Magnific Popup. Na zakończenie trzeba jeszcze dwukrotnie wywołać skrypt wtyczki, informując ją za każdym razem o przeznaczeniu poszczególnych odsyłaczy:

203

Responsive Web Design z jQuery



Na poniższym rysunku można zobaczyć przygotowane właśnie wyskakujące okienko na smartfonie i na tablecie:

W dokumentacji wtyczki dostępnej pod adresem http://dimsemenov.com/plugins/magnific-popup/ documentation.html przeczytasz też o jej innych zastosowaniach.

Riloadr Riloadr jest responsywną wtyczką przeznaczoną do ładowania obrazków. W tej książce przedstawię jej współpracę z biblioteką jQuery, choć wtyczka potrafi działać również samodzielnie i ta biblioteka nie jest jej niezbędna. Zadaniem tej wtyczki jest dostarczanie różnych obrazków kontekstowych w zależności od potrzeb układu responsywnego, w którym stosowane są różne wielkości obrazków w celu poprawienia czasu ładowania.

204

Rozdział 11. • Przydatne wtyczki responsywne

Riloadr korzysta z atrybutów data-src i data-base umieszczonych w znaczniku img, całkowicie rezygnując ze standardowego atrybutu src. Dzięki temu możemy samodzielnie zająć się wybieraniem właściwego obrazka, jeszcze zanim przeglądarka przystąpi do rysowania całej strony. Naszą wtyczkę spośród niemałej konkurencji wyróżniają poniższe cechy:  pełna kontrola nad procesem ładowania obrazków;  nieograniczona liczba punktów zmiany, które można definiować za pomocą właściwości CSS, takich jak na przykład minWidth, maxWidth i minDevicePixelRatio;  generowanie tylko jednego żądania dla danego obrazka;  możliwość utworzenia kilku obiektów wtyczki Riloadr (grup nazywanych) i skonfigurowania każdego z nich niezależnie od siebie;  testowanie szybkości łącza i pobieranie obrazków o wysokiej rozdzielczości tylko w takim przypadku, gdy urządzenie ma dostatecznie szybkie połączenie z internetem. Po pobraniu plików wtyczki ze strony https://github.com/tubalmartin/riloadr powinniśmy postąpić zgodnie z zaleceniami jej twórców i dołączyć pliki CSS i JavaScript w znaczniku naszej strony:

Po załadowaniu samej wtyczki możemy skonfigurować w niej grupy obrazków:

Parametr minDevicePixelRatio związany jest z urządzeniami wyposażonymi w ekrany o wysokiej gęstości pikseli. W tym przypadku pozwala to na załadowanie obrazków o szerokości 640 pikseli, czyli dwukrotnie większych niż normalnie.

Teraz zostaje nam już tylko umieścić w kodzie strony HTML znacznik img wyposażony w atrybuty data-src i data-base. Proszę zauważyć, że w wartości atrybutu data-base umieścimy dynamiczną wartość {breakpoint-name}, którą wtyczka Riloadr zamieni na jedną z wcześniej zdefiniowanych nazw punktów zmiany. Dzięki temu możliwe jest przechowywanie obrazków o różnych rozmiarach bez powodowania bałaganu:

205

Responsive Web Design z jQuery





Podczas rysowania powyższego kodu wtyczka najpierw wykryje wielkość ekranu i wybierze dla niego odpowiedni punkt zmiany. Następnie zastąpi nazwą tego punktu dynamiczną wartość, o której mówiłem już wcześniej — w tym przypadku może to być wartość 320. Tak samo zadziała to w przypadku, gdy wtyczka stwierdzi, że właściwym punktem zmiany będzie punkt 640. Jeżeli przeglądarka nie obsługuje języka JavaScript albo wystąpi jakiś błąd, to dzięki użyciu znacznika i tak pojawi się jakiś obrazek.

Na poniższym rysunku można zobaczyć efekt prac wtyczki Riloadr. Wyświetla ona obrazki o różnych wymiarach tylko wtedy, gdy są one faktycznie potrzebne (zależnie od punktów zmiany ustalonych na 320 lub 640 pikseli):

Calendario Calendario jest responsywną wtyczką biblioteki jQuery. Zadaniem tej wtyczki jest rysowanie kalendarza, który będzie dopasowywał się do różnych wielkości ekranów. Na wielkich ekranach wyświetlany jest kalendarz w układzie siatkowym, natomiast na mniejszych zmienia się on do postaci listy dni danego miesiąca, lepiej wykorzystując dostępną przestrzeń. Niestety wtyczka nie zadziała we wszystkich przeglądarkach, ponieważ część z nich nie obsługuje jeszcze nowych właściwości CSS, takich jak calc(). Do tych przeglądarek należą Internet Explorer 8, Opera Mini i Android Browser.

206

Rozdział 11. • Przydatne wtyczki responsywne

Wszystkie pliki wtyczki Calendario można pobrać ze strony https://github.com/codrops/Calendario. Zaczniemy od dodania plików CSS dołączanych do wtyczki:

Teraz możemy dopisać struktury HTML wyposażone w niezbędne klasy i identyfikatory, z których będzie później korzystał kod JavaScript:

Calendario







Następnie na końcu dokumentu HTML (przed zamykającym znacznikiem ) musimy jeszcze dołączyć bibliotekę jQuery i wtyczkę Calendario. W kolejnym kroku trzeba zainicjować skrypt wtyczki, wykorzystując do tego identyfikator z przygotowanej wcześniej struktury. Dopiszemy też dwie funkcje przydatne podczas nawigowania między miesiącami kalendarza:



207

Responsive Web Design z jQuery

Na poniższym rysunku można zobaczyć przygotowany właśnie kalendarz wyświetlany na ekranie smartfona lub tabletu oraz na ekranie komputera stacjonarnego:

A tak będzie wyglądać na ekranie komputera:

208

Rozdział 11. • Przydatne wtyczki responsywne

Podsumowanie W tym rozdziale poznaliśmy kilka uzupełniających wtyczek, które zostały podzielone na trzy kategorie powiązane tematycznie z poprzednimi rozdziałami. W kategorii wtyczek tworzących strukturę strony zaprezentowałem wtyczkę Columns (realizuje ona responsywną strukturę kolumnową), Equalize (pozwala lepiej rozłożyć pływające elementy na stronie) oraz Packery (przeznaczona do tworzenia stron składających się z kafelków). Poznaliśmy też różne metody wyświetlania menu oraz kart, do czego wykorzystaliśmy wtyczki Sidr, EasyResponsiveTabstoAccordion i FlexNav. W kategorii różnych rozwiązań zaprezentowałem wtyczki SVGeezy, Prefix free, MagnificPopup plugin, Riloadr i Calendario. W następnym rozdziale poznamy techniki określania szybkości ładowania strony WWW. Temat szybkości działania stron jest bardzo rozległy, ale ten parametr jest jednym z najważniejszych, dlatego zaprezentuję też techniki pozwalające na przyspieszenie procesu ładowania responsywnej strony WWW.

209

Responsive Web Design z jQuery

210

12 Poprawianie wydajności stron Czas ładowania strony bardzo często powoduje u użytkowników frustracje. Bardzo prawdopodobne, że jeżeli strona nie załaduje się w ciągu 3 lub 4 sekund, to użytkownik poszuka innej. Potrzeba szybkiego ładowania stron jest jeszcze ważniejsza na urządzeniach mobilnych, ponieważ ich użytkownicy często zauważają zwiększony czas ich ładowania w porównaniu z wersjami dla komputerów stacjonarnych (według badania firmy KISSmetrics opublikowanego w artykule Loading Time dotyczy to 73 procent witryn). Spora część czasu ładowania strony przypada na działania po stronie klienta oraz pobieranie takich zasobów, jak arkusze stylów, pliki skryptów oraz obrazki. W tym rozdziale poznamy metody poprawiania szybkości działania strony za pomocą takich technik, jak:  wykorzystanie sieci dostarczania treści,  zmniejszenie liczby żądań HTTP,  zmniejszenie wielkości przesyłanych plików,  optymalizacja skryptów działających po stronie klienta,  stosowanie narzędzi kontrolujących szybkość działania witryny.

Wykorzystywanie sieci dostarczania treści Sieć dostarczania treści (Content Delivery Network — CDN) jest zbiorem serwerów WWW rozmieszczonych w wielu miejscach, które sprawiają, że z perspektywy użytkownika strony są ładowane szybciej.

Responsive Web Design z jQuery

Serwer dostarczający treści użytkownikowi wybierany jest zazwyczaj na podstawie bliskości w sieci WWW, dzięki czemu możliwe jest osiągnięcie jak najkrótszych czasów reakcji. Dzięki temu treści są przechowywane w pamięci podręcznej przeglądarki i nie muszą być za każdym razem pobierane z serwera, co również zmniejsza liczbę żądań. Istnieje kilka niedrogich rozwiązań oferowanych przez dostawców tego rodzaju sieci. Do najważniejszych firm oferujących takie usługi należą Akamai Technologies, Mirror Image Internet i Limelight Networks.

Zmniejszenie liczby żądań HTTP Zmniejszanie liczby komponentów dołączanych do strony zmniejsza też liczbę żądań HTTP wysyłanych do serwera w celu załadowania całej strony. Nie ma to nic wspólnego z liczbą kilobajtów przypadającą na poszczególne pliki. Trzeba też pamiętać o problemie związanym z krótkim czasem, jaki potrzebują serwery na obsłużenie każdego otrzymanego żądania przed wysłaniem pliku do przeglądarki. Wykorzystamy tu kilka technik pozwalających zmniejszyć liczbę żądań wysyłanych do serwera, a mianowicie:  warunkowe ładowanie komponentów,  łączenie kilku skryptów w jeden skrypt,  łączenie wielu plików CSS w jeden arkusz stylów,  używanie techniki CSS Sprite.

Warunkowe ładowanie komponentów Funkcję warunkowego ładowania niezbędnych komponentów spełniają takie biblioteki, jak RequireJS lub yepnope.js, o których mówiłem już w poprzednich rozdziałach.

Konsolidacja i minimalizacja zasobów (skryptów JavaScript i stylów CSS) Idealnym rozwiązaniem byłoby przygotowanie pojedynczego pliku CSS i pojedynczego pliku JavaScript działającego w całej witrynie. Rozwiązaniem jest tutaj konsolidacja wielu plików JavaScript do tylko jednego, co zmniejszy liczbę wysyłanych żądań i przyspieszy pierwsze ładowanie strony, nawet jeżeli taki plik nie zostanie zapisany w pamięci podręcznej przeglądarek mobilnych.

212

Rozdział 12. • Poprawianie wydajności stron

Minimalizacja jest praktyką polegającą na usuwaniu z plików nieistotnych elementów, takich jak nadmiarowe spacje, znaki nowego wiersza, wcięcia i komentarze. Na podstawie własnych testów mogę powiedzieć, że takie zabiegi są w stanie zmniejszyć pliki nawet o 20 procent. Podana wartość nie jest zbyt dokładna, ponieważ stopień zmniejszenia zależy od wielkości pliku źródłowego, liczby znajdujących się w nim znaków białych i innych czynników.

Połączenie obu technik pozwala na poprawę szybkości ładowania stron głównie dlatego, że ma wpływ na tę część procesu, która odbywa się przed rozpoczęciem rysowania czegokolwiek. Istnieje kilka sieciowych narzędzi wykonujących te zadania. Moim ulubionym jest YUI Compressor, z którego można skorzystać na stronie http://refresh-sf.com/yui/. Równie wygodny jest serwis Google Minify dostępny pod adresem https://code.google.com/p/minify/. Sposób użycia YUI Compressora jest bardzo prosty. Wystarczy wybrać pliki, które chcemy poddać procesowi konsolidacji i minimalizacji, a następnie kliknąć przycisk Compress.

Technika CSS Sprite Jak wiemy, technika CSS Sprite polega na składaniu wielu obrazków w jeden większy. Dzięki takiemu łączeniu można po pierwsze zmniejszyć całkowitą wielkość plików obrazków, a po drugie dodatkowo zmniejszyć liczbę żądań HTTP wysyłanych do serwera. Jeżeli do łączenia obrazków korzystasz z programu Photoshop, to po przygotowaniu łączonego obrazka zapisz go w pliku PSD na wypadek późniejszych zmian. Jeżeli później zajdzie potrzeba dołączenia nowych ikon, to będzie można łatwo powiększyć gotowy już obrazek.

Na poniższym rysunku prezentuję przykładowy łączony obrazek wykorzystywany na stronie Google:

213

Responsive Web Design z jQuery

Spośród wszystkich dostępnych w sieci narzędzi do łączenia obrazków najbardziej podobają mi się: Stitches (http://draeton.github.io/stitches/) oraz SpriteCow (http://www.spritecow.com/).

Jak połączyć obrazki za pomocą SpriteCow To ciekawe narzędzie przygotuje nam początkowy kod CSS, który będzie można później wykorzystać we własnych plikach CSS. Najpierw trzeba przygotować obrazek zawierający wszystkie przyciski i ikony (taki jak przedstawiony na rysunku powyżej). Następnie należy otworzyć stronę http://www.spritecow.com/ i odszukać na niej przycisk Open Image, za pomocą którego można przesłać przygotowany wcześniej obrazek. Po otwarciu obrazka należy wybrać narzędzie Select Sprite i wyznaczyć prostokątny obszar obejmujący ikonę, której parametry chcemy wyznaczyć. Nie trzeba się obawiać, że nie uda się nam dokładnie zaznaczyć obszaru wokół ikony, ponieważ narzędzie ma mechanizm automatycznego dopasowania wybranego obszaru. Proponuję wypróbować je samodzielnie!

Zmniejszanie wielkości przesyłanych plików Po wyeliminowaniu nadmiarowych żądań HTTP możemy przystąpić do zmniejszania wielkości pozostałych plików. Poza skróceniem czasu ładowania stron pozwala to też na mniejsze wykorzystanie łącza internetowego. Minimalizowanie wielkości przesyłanych danych pochodzących zarówno z dynamicznych, jak i ze statycznych zasobów pozwala na poważne zmniejszenie opóźnień sieciowych. W tym podrozdziale przyjrzymy się kilku praktykom zmniejszania ilości danych, takim jak progresywne obrazki JPEG, optymalizacja obrazów i lepsze wykorzystanie możliwości języków HTML5 i CSS3.

Progresywne obrazki JPEG Progresywne obrazki JPEG nie są nową technologią. Dawniej ich stosowanie uznawane było za jedną z lepszych praktyk tworzenia stron WWW. Z czasem zwiększająca się szybkość dostępu do internetu sprawiła, że ta funkcja przestała być używana. Obecnie ograniczona przepustowość w urządzeniach mobilnych sprawia, że technika ta znowu zaczyna być stosowana. Na poniższym rysunku prezentuję różnicę między obrazkiem zapisanym tradycyjnie a obrazkiem zapisanym z funkcją progresywną:

214

Rozdział 12. • Poprawianie wydajności stron

Jeżeli chodzi o wielkość plików, to progresywna wersja średniej wielkości obrazka jest o mniej więcej 10 procent większa od wersji zapisanej normalnie. Czas ładowania obu wersji jest niemal identyczny; różnice liczone są w milisekundach. Jednak efekt tworzony przez progresywne obrazki JPEG sprawia, że z punktu widzenia użytkownika dają one wrażenie szybszego ładowania się strony w porównaniu z ładowaniem się obrazków adaptacyjnych. Na urządzeniach mobilnych ładowanie niepotrzebnych obrazków o wysokiej rozdzielczości jest marnotrawstwem łącza, czasu procesora i miejsca w pamięci podręcznej. Dlatego dobrze jest zastępować takie obrazki ich mniejszymi wersjami, tak aby oszczędzać te zasoby. Jak dowiedzieliśmy się z rozdziału 5., zalecane jest wykorzystywanie takich rozwiązań, jak Foresight lub Picturefill, ponieważ sprawdzają one najpierw charakterystykę urządzenia i dopiero na jej podstawie nakazują przeglądarce załadowanie właściwego obrazka.

Optymalizacja obrazków W obrazkach zwykle znajduje się trochę zupełnie bezużytecznych danych, które można usunąć bez straty jakości obrazu. Istnieją dwie metody optymalizacji obrazków: kompresja bezstratna i stratna. Kompresja bezstratna usuwa część informacji o obrazie, takich jak wbudowane miniaturki, komentarze, metadane o modelu aparatu, o wartości ISO, o włączeniu lampy błyskowej, rodzaju obiektywu, nastawie ogniskowej, oraz inne informacje, które pozwalają na zmniejszenie pliku od 5 do 20 procent. Proces optymalizacji obrazków jest bardzo prosty, ponieważ wymaga tylko wskazania, które obrazki mają zostać poddane optymalizacji. W sieci dostępnych jest wiele narzędzi wykonujących to zadanie. Osobiście najbardziej lubię narzędzia działające bezpośrednio na komputerze, ponieważ daje to większą pewność co do prawnej sytuacji obrazków.

215

Responsive Web Design z jQuery

W przypadku plików PNG polecam program PngGauntlet (http://pnggauntlet.com), a dla komputerów Mac program Imageoptim (http://imageoptim.com). Imageoptim pozwala też optymalizować pliki JPEG, ale w systemach Windows lepiej jest skorzystać w tym celu z programu RIOT (http://luci.criosweb.ro/riot/), który sprawdza się równie dobrze. Jeżeli jednak sam obrazek jest duży, co często ma miejsce w przypadku wersji dla wysokich rozdzielczości, to lepiej jest użyć programu JPEGmini (http://www.jpegmini.com/).

Upraszczanie stron za pomocą HTML5 i CSS3 W specyfikacji języka HTML5 znalazły się nowe elementy strukturalne, takie jak header, nav, article i footer. Stosowanie tych elementów semantycznych pozwala na uzyskanie prostszego i skuteczniej przetwarzanego kodu strony w porównaniu ze stroną, w której stosowane są znaczniki ogólnego przeznaczenia, takie jak div i span. To samo dzieje się, jeżeli wykorzystamy nowe funkcje języka CSS3, które pozwalają na przygotowanie lekkich i dynamicznych rozwiązań elementów wizualnych, takich jak gradienty, zaokrąglone narożniki, cienie, animacje i przejścia. Jak wiemy, zanim powstał język CSS3, wszystkie te efekty wymagały zastosowania elementów graficznych, a to oznaczało konieczność załadowania kolejnych obrazków. Proszę przyjrzeć się poniższemu rysunkowi:

Testowanie wydajności stron WWW Przedstawię tu dwa narzędzia działające w przeglądarce: PageSpeed Insights i YSlow. Ich zadaniem jest analiza stron WWW i przygotowywanie propozycji poprawy szybkości ich działania na podstawie zbioru reguł sprawdzających się na stronach o wysokiej wydajności, które są cały czas modyfikowane i poddawane ciągłej ewolucji. Zaprezentuję także dwa narzędzia sieciowe, za pomocą których można przeprowadzić proste testy własnej strony albo uruchomić złożone testy składające się z takich elementów, jak wieloetapowe transakcje, przechwytywanie obrazu, blokowanie treści i inne. Narzędziami tymi są WebPageTest i Mobitest.

216

Rozdział 12. • Poprawianie wydajności stron

Testowanie wydajności stron internetowych jest czynnością niezbędną do zachowania odpowiedniej szybkości działania strony. Wprawdzie wykracza to poza zakres tej książki, ale jeżeli ktoś chciałby się lepiej zapoznać z tą tematyką, to polecam książki Instant PageSpeed Optimization autorstwa Sanjeeva Jaiswala lub Jeszcze wydajniejsze witryny internetowe. Przyspieszanie działania serwisów WWW autorstwa Steve’a Soundersa.

PageSpeed Insights PageSpeed Insights jest sieciowym narzędziem przygotowanym przez firmę Google, które pozwala twórcom na optymalizowanie swoich stron WWW. Poddaje ono ocenie zgodność testowanej strony z różnorodnymi regułami opisującymi najlepsze praktyki tworzenia stron. Narzędzie to generuje listę wskazówek i sugestii opisujących metody implementowania poszczególnych reguł i włączania ich w proces projektowania witryny. Z tego narzędzia można skorzystać pod adresem http://developers.google.com/speed/pagespeed/ insights/. Na poniższym rysunku możesz zauważyć, że każdy komunikat ma krótkie podsumowanie problemu, ale pozwala też na rozwinięcie tekstu i zaprezentowanie szczegółów dotyczących poszczególnych problemów:

217

Responsive Web Design z jQuery

YSlow YSlow jest dodatkiem do przeglądarki przygotowanej przez firmę Yahoo!, której zadaniem jest analiza kodu strony i przygotowywanie zaleceń dotyczących poprawy wydajności. Narzędzie to:  ocenia stronę na podstawie własnego zbioru reguł albo na podstawie reguł przygotowanych przez użytkownika,  sugeruje metody poprawienia wydajności stron i wyjaśnia przyczyny każdego z wykrytych problemów,  podsumowuje elementy strony, co ułatwia wyszukiwanie najważniejszych problemów,  wyświetla ogólne statystyki strony WWW,  udostępnia narzędzia szczegółowej analizy wydajności, takie jak Smush.it (sieciowe narzędzie do optymalizacji obrazków) oraz JSLint (analizuje kod i wyszukuje w nim typowe błędy). Dodatek do przeglądarki można pobrać ze strony http://developer.yahoo.com/yslow/. Wyświetla on tabelę z wagami poszczególnych reguł związanych z najlepszymi praktykami, dzięki czemu możemy łatwo ustalić priorytety prezentowanych uwag (http://yslow.org/faq/#faq_grading). Przyjrzyjmy się teraz interfejsowi tego narzędzia i sposobom opisywania zgłaszanych przez nie problemów. Zazwyczaj pojawiające się obok reguły krótkie wyjaśnienie (widoczne na poniższym rysunku) całkowicie wystarcza, żeby zrozumieć istotę zgłaszanego problemu, i pozwala na poprawienie go:

218

Rozdział 12. • Poprawianie wydajności stron

WebPagetest WebPagetest jest narzędziem, które początkowo zostało przygotowane przez firmę AOL, ale teraz jest obsługiwane przez Google. Można z niego skorzystać pod adresem http://www.web pagetest.org/, uruchamiając tam prosty test albo wykonując pełną gamę testów, obejmującą transakcje, przechwytywanie obrazu i blokowanie treści. Po wprowadzeniu adresu URL badanej strony otrzymamy pełne informacje diagnostyczne, wśród których znajdują się kaskadowe wykresy ładowania zasobów, kontrole optymalizacji ładowania strony i różne porady pozwalające na poprawę szybkości. Oprócz adresu strony można też podać, za pomocą jakiej przeglądarki i w jakiej wersji językowej chcemy przeprowadzić test. Na poniższym rysunku można zobaczyć wyniki testów przeprowadzonych za pomocą narzędzia WebPagetest:

Mobitest Mobitest to doskonałe narzędzie do symulowania ładowania strony WWW na urządzeniach mobilnych, pozwalające określić wielkość ładowanej strony, całkowity czas tej operacji oraz inne charakterystyki wpływające na szybkość jej działania. Jest doskonałym narzędziem kontrolnym, ale nie może zastąpić rzeczywistych statystyk, jakie otrzymamy z połączeń z telefonu komórkowego przez ograniczone łącze internetowe. Po otwarciu strony http://mobitest.akamai.com/ pozostaje już tylko wprowadzić adres URL testowanej witryny, wybrać rodzaj urządzenia oraz miejsce przeprowadzenia testu i klikać przycisk rozpoczęcia testów. Czasami przygotowanie pełnego raportu może trochę potrwać, ponieważ najpierw muszą zostać wykonane inne testy, które czekają przed nami w kolejce.

219

Responsive Web Design z jQuery

Na poniższym rysunku można zobaczyć wygenerowany przez tę stronę raport:

Przetestowana tu strona jest już nieźle zoptymalizowana, ale zawsze są pewne szczegóły, które można by jeszcze poprawić. Na kolejnym rysunku przedstawiam diagram procesu ładowania strony, nazywany też wykresem kaskadowym (ang. Waterfall chart):

Na wykresie przygotowanym przez stronę Mobitest (ten z poziomymi paskami) prezentowane są żądania poszczególnych zasobów pobieranych przez stronę z podziałem czasu na wysyłanie żądania, przetwarzanie przez serwer i odsyłanie danych. W drugim wierszu wykresu bardzo długo ładowany jest statyczny obrazek, przechowywany na osobnym serwerze. Można to poprawić za pomocą dodatkowego nagłówka expires oraz poprzez użycie sieci CDN.

Podsumowanie W tym rozdziale poznaliśmy kilka dobrych praktyk, takich jak stosowanie sieci CND do przyspieszenia dostarczania treści i buforowania statycznych obrazków, zmniejszanie liczby żądań HTTP poprzez wprowadzenie funkcji ładowania warunkowego, konsolidowanie plików, funkcja CSS Sprite, zmniejszanie wielkości obrazków poprzez ich optymalizację, zapisywanie plików JPEG w postaci progresywnej i upraszczanie stron za pomocą języków HTML5 i CSS3. Oprócz tego dowiedzieliśmy się, jak można używać narzędzi do analizowania witryn WWW, takich jak PageSpeed, YSlow, WebPagetest oraz Mobitest.

220

Skorowidz 1140 Grid, 38, 39

A accordion, Patrz: strona jako harmonijki Adapt.js, 28, 29 Adaptive.js, 30 Adobe Flash Player, 104 Android, 115 Android 2.1, 22 Android 2.3, 201 animacja, 109, 128 CSS, 203 JavaScript, 203 Anystretch, 99, 101 art direction, Patrz: obraz ustalanie nastaw

B Backstretch, 99, 101, 102 Balsamiq Mockups, 25 biblioteka 1140 Grid, Patrz: 1140 Grid Adapt.js, Patrz: Adapt.js Fluid Baseline Grid, Patrz: Fluid Baseline Grid Focal Point, Patrz: Focal Point Foundation4, Patrz: Foundation4 html5shim, Patrz: html5shiv jQuery, Patrz: jQuery Modernizr, Patrz: Modernizr Respond.js, Patrz: Respond.js

Blip.tv, 105 box-model, Patrz: model polowy breakpoint, Patrz: punkt zmiany Bushella Davida, 145

C Calendario, 206 CanIUse.com, 174 CDN, Patrz: sieć dostarczania treści Chrome 4, 22, 115 Columns, 187, 188 Content Delivery Network, Patrz: sieć dostarczania treści CSS, 20, 34, 201 image-set, Patrz: funkcja image-set reguła @font-face, 76, 77, 78 CSS Sprite, 213 CSS2.1, 22 CSS3, 22, 216 czas, 155 czcionka cienka, 77 elementu bazowego, 74 nadrzędnego, 73 EOT, 76 pogrubiona, 77 rodzina, 76 Safari,76 SVG, 76 wielkość dynamiczna, 71 względna, 72

D data, 152, 155, 162 DeRouchey Bill, 24 Dimon Garret, 135 Drupal, 115

E EasyResponsiveTabstoAccordio n, 197 efekt błyskania strony, 202 FOUC, 202 Eis Diego, 21 ekran, 20 dotykowy, 129, 131, 132 gęstość, 103 Retina, 91, 95, 98, 103 rozdzielczość, Patrz: ekran wielkość rozmiar, 22, 38, 55, 168 szerokość, 178 wielkość, 22, 91, 188 Elastislide, 110, 111 element, Patrz też: znacznik dopełnienie, 31 dotykowy, 130 em, 21, 33 email, 152, 162 Equalize, 187, 191

F fallback, Patrz: przeglądarka rozwiązanie zastępcze

Responsive Web Design z jQuery

film, 89, 104, 203 Firefox 3.6, 22, 115 FirefoxOS, 175 Fit Text, 77, 80 FitVids, 105 Flexible Math, 33 FlexNav, 198 FlexSlider2, 110, 115 Fluid Baseline Grid, 35, 37 Focal Point, 93 Font Squirrel, 77, 78, 87 FooTable, 136, 137, 149 rozszerzenia, 139 Foresight, 95, 104, 215 format JPEG, 214, 215, 216 PNG, 201, 216 SVG, 91, 183, 201 formularz, 20, 151 autocomplete, 152 autouzupełnianie, 152, 153 data, 152, 155, 162 element, 152 email, 152, 162 kontrola danych, 152 logowania, 51 multiple, 152 number, 152 placeholder, 152, 159 required, 152 tel, 152, 162 time, 152, 155 tworzenie, 162 Foundation4, 39, 40, 45 Frost Brad, 53 funkcja 3D flow, 126 image-set, 96 podmiany obrazków na wersję HD, 98 podpowiedzi, 157 przejść CSS3, 203 wypełniania pól formularzy, 20

G geolokalizacja, 21 Google Minify, 213 Google+, 192 Guideguide, 42, 43

222

Gustafson Aaron, 21 gutter, Patrz: rynna

H Hammer, 131, 132 HTML5, 21, 175 html5shiv, 37, 54, 177, 180

I IdealForms, 158, 163 Imageoptim, 216 Input Switcher, 40 Internet Explorer 6, 22, 37 Internet Explorer 7, 40, 90, 115 Internet Explorer 8, 22, 28, 37, 40, 54, 90, 183, 201 Internet Explorer 9, 22 Internet Explorer Viewport Resizer, 166

J JavaScript, 28 jednostka em, Patrz: em PPI, Patrz: PPI px, Patrz: piksel vh, 72 vw, 72 względna, 21, 27, 72 em, Patrz: em procentowa, 72 rem, Patrz: rem język JavaScript, 28 jPanelMenu.js, 67 JPEGmini, 216 jQuery, 21, 89, 111, 173 formularze, 152 jQuery++, 110, 111 jQueryUI, 163

K kalendarz, 206 karuzela, 116 ukrywanie, 37 Kern.js, 85, 88

Kickstarter, 105 kolumna płynna, 37 wyśrodkowanie, 40 kompresja, 215 komputer stacjonarny, 21, 22, 24, 25, 37, 91

L laptop, 22 Lettering, 77, 82, 84, 85, 88 lista dni miesiąca, 206 rozwijana, 60 logo, 51

M Magicsuggest, 153 Magnific Popup, 203 mapa, 203 Marcotte Ethan, 20 margines, 31, 34, Patrz też: rynna MediaElements.js, 181 menu nawigacyjne, 51, 52, 194, 195, 198 Footer anchor, 53, 55, 61 Footer only, 53, 61 lokalizacja, 52, 53, 55 Multi toggle, 53, 62, 65 Off-canvas, 53, 67 projektowanie, 53 przełączane, 53, 58, 62, 65, 69 Select menu, 53, 60 Toggle and slide, 53, 65 Toggle menu, 53, 58, 62, 69 Top nav, 53 mikroszablon, 203 MobileHTML5.org, 175 Mobitest, 219 model polowy, 74 Modernizr, 40, 54, 177, 178, 179, 183

N nagłówek, 71, 76, 81, 82 Normalize, 37, 40

Skorowidz

O obraz, 89 bitmapowy, 91 efekty, 115 galeria, 109, 110, 115, 116, 118, 119, 126 animowana, 128 dotykowa, 123 HD, 98 JPEG, Patrz: format JPEG kadrowanie, 93 kompresja, Patrz: kompresja kontekstowy, 204 ładowanie, 204 łączenie, 213, 214 metadane, 215 okienko wyskakujące, 203 optymalizacja, 215, 216 skalowanie, 33, 39, 90, 93 tła, 98, 99, 100, 183 dynamiczny, 101 ukrywanie, 37 ustalanie nastaw, 92 wektorowy, 91, 183 wymiary, 89, 90 odtwarzacz, 182 okienko modalne, 203 wyskakujące, 203 Opera 9.5, 22 Opera 10, 115 Opera Mobile, 22 emulator, 169 optymalizacja, 20

P Packery, 187, 192 PageSpeed Insights, 216, 217 Pencil, 25 Photoshop wtyczka, 42 Pickadate, 155, 156, 163 Picturefill, 95, 98, 215 piksel, 30 konwersja na procenty, 32, 33 na cal, Patrz: PPI pixels per inch, Patrz: PPI

plik CSS, 212 minimalizacja, 213, 214 PngGauntlet, 216 pole wyszukiwania, 51 polyfill, Patrz: wypełniacz Prefix free, 201 priorytet, 20 projekt adaptacyjny, 21 nieresponsywny, 21 płynny, 21 responsywny, 20, 21, 27 przeglądarka Chrome, Patrz: Chrome emulator, 165, 169 Firefox, Patrz: Firefox funkcje, 174, 175, 176, 177 Internet Explorer, Patrz: Internet Explorer język, 178 obsługa, 173, 176, 177 Opera, Patrz: Opera przedrostek, 201 rozwiązanie zastępcze, 176, 177 Safari, Patrz: Safari testowanie, Patrz: testowanie ujednolicanie, Patrz: wypełniacz, wstawka ułożenie okna, 178 wersja, 178 punkt zmiany, 89, 90, 136, 165

Q QuirksMode.org, 175 QuoJS, 131 QuosJS, 132

R rem, 74 RequireJS, 212 Respond.js, 22, 28, 30, 37, 184 Responsive Measure, 77, 86 Responsive Nav, 58 ResponsiveSlides, 110, 119 Riloadr, 204, 205 RIOT, 216

root em, Patrz: rem rynna, 34

S Safari, 22, 115 czcionki, 76 Samy Silva Maurício, 31 ScreenFly, 168 siatka, 20, 25 linii bazowej, 37 nieresponsywna, 34 płynnej linii bazowej, 37 responsywna, 34, 35, 188 Fluid Baseline Grid, Patrz: Fluid Baseline Grid zagnieżdżanie, 40, 41 sieć dostarczania treści, 211, 212 skrypt, 212 Slabtext, 77, 81 Slicebox, 110, 128 smartfon, 22, 25, 31, 37, 89, 91, 130 SpriteCow, 214 Stackedtables, 141 Stitches, 214 kompresja, 215 strona analiza, 216, 217, 218, 219 błyskanie, 202 czas ładowania, 211, 216, 217, 218, 219 jako harmonijki, 197 jako zbiór kart, 191 widok, 43 wydajność, 211, 216, 217, 218, 219 z kafelkami, 192 styl CSS, Patrz: CSS Surveyor, 166 SVGeezy, 201 swipe events, Patrz: zdarzenie przeciągania Swiper, 110, 123 system operacyjny, 178 siatki, 34 responsywnej, 34, 35, 188 szablon, 74 adresów URI, 96

223

Responsive Web Design z jQuery

T tabela, 135, 141 filtrowanie, 140 klucz-wartość, 141 odsyłacz, 135, 147 pełna, 147 przewijana poziomo, 135, 143 responsywna, 21 rozwijana, 135, 136 sortowanie, 139 sztaplowana, 135 wiersz nagłówków, 145 z wielką liczbą kolumn, 143 tablet, 22, 25, 37, 89, 91, 131 mały, 22 telefon, 152, 162 Ten Alexey, 183 testowanie, 165, 166, 168, 169, 173, 174, 175, 176, 216, 217 TinyNav.js, 60, 61 Tooltipster, 157 typografia, 71

U urządzenie mobilne, 24, 219, Patrz też: tablet, smartfon

V Viddler, 105 viewport, Patrz: strona widok Viewport Resizer, 166 Vimeo, 105

224

W Walton Trent, 27 warunkowe ładowanie komponentów, 212 WebPagetest, 219 webshim, Patrz: wstawka wielodotyk, 132 wireframe.cc, 25 właściwość box-sizing, 74, 75 font-family, 77 font-weight, 77 src, 77 WordPress, 115 Wroblewski Luke, 22, 129, 130 wstawka, 176, 177 wtyczka jQuery, 21 Photoshop, 42 wypełniacz, 173, 176, 184 implementacja, 181

Y Yahoo!, 218 YepNope.js, 177, 180, 212 YouTube, 105 YSlow, 216, 218 YUI Compressor, 213

Z zapytanie o media, 22, 28, 29, 103, 141, 147 zdarzenie przeciągania, 110 związane z dotykiem, 20 z myszą, 20 znacznik article, 216 audio, 181 div, 31, 216 footer, 216 h1, 54 header, 51, 216 html, 177 iframe, 105 img, 33, 96, 97, 183, 205 meta, 43 nav, 54, 216 ol, 60 picture, 92, 95, 98 select, 60 span, 98, 216 svg, 183 ul, 60 video, 104, 105, 181 znak $$, 132 biały, 213

Ż żądanie HTTP, 212