Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00268 005546 13606303 na godz. na dobę w sumie
Responsive Web Design z jQuery - ebook/pdf
Responsive Web Design z jQuery - ebook/pdf
Autor: Liczba stron: 224
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-9189-0 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> strony mobilne
Porównaj ceny (książka, ebook (-20%), audiobook).

Twórz strony na miarę XXI wieku!

Jeszcze całkiem niedawno — w świecie bez smartfonów i tabletów — tworzenie stron było zdecydowanie prostsze. Projektanci i deweloperzy nie musieli się martwić o to, jak strona będzie się prezentowała na różnej wielkości ekranach, dopasowywali ją do 2–3 rozdzielczości. Obecnie, w erze urządzeń mobilnych o poziomych, pionowych, małych, średnich i bardzo dużych ekranach, pewnie często zastanawiasz się, jak skutecznie zadbać o responsywność swojej strony. Sięgnij po ten przewodnik i spraw, by zarówno użytkownicy komputerów stacjonarnych, jak i laptopów, tabletów czy smartfonów z przyjemnością korzystali z Twojej witryny.

W trakcie lektury dowiesz się, jak budować responsywne strony WWW. Responsywne to znaczy takie, które dostosowują swój wygląd i układ do urządzenia, na którym są przeglądane. Nauczysz się korzystać z dopasowujących się układów i siatek (ang. grids) oraz zbudujesz menu, które wszędzie będzie wyglądało dobrze. Ponadto przekonasz się, że stworzenie galerii, osadzenie mediów oraz atrakcyjnej tabeli dla urządzeń mobilnych nie musi być karkołomnym zadaniem! Na sam koniec dowiesz się, jak testować takie strony, oraz poznasz przydatne wtyczki dla jQuery. Książka ta jest doskonałym źródłem wiedzy dla wszystkich podążających za trendami w tworzeniu stron WWW!

Sięgnij po książkę i dowiedz się, jak:

Zaoszczędź swój czas i twórz uniwersalne strony WWW!

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

Darmowy fragment publikacji:

Tytuł oryginału: Responsive Web Design with jQuery Tłumaczenie: Wojciech Moch ISBN: 978-83-246-9186-9 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: helion@helion.pl WWW: http://helion.pl (księgarnia internetowa, katalog książek) Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/rewejq Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję. Printed in Poland. • Kup książkę • Poleć książkę • Oceń książkę • Księgarnia internetowa • Lubię to! » Nasza społeczność Spis tre(cid:258)ci O (cid:68)utorze O recenzentach Wst(cid:218)p Co znajdziesz w tej ksi(cid:200)(cid:285)ce? Czego potrzebujesz? Dla kogo jest ta ksi(cid:200)(cid:285)ka? Konwencje Pobranie przyk(cid:239)adów dla ksi(cid:200)(cid:285)ki Errata Piractwo Rozdzia(cid:239) 1. Poznawanie projektów responsywnych Koncepcja responsywnego projektu stron Porównanie stron responsywnych, p(cid:239)ynnych i adaptacyjnych Dopasowywanie strony WWW do ekranu za pomoc(cid:200) zapyta(cid:241) o media Najpierw-mobilne U(cid:285)ywanie siatek (cid:109)wiczenie 1. — projektowanie z siatkami w modelu najpierw-mobilne Podsumowanie Rozdzia(cid:239) 2. Projektowanie responsywnych uk(cid:239)adów i siatek Dostosowywanie strony za pomoc(cid:200) j(cid:218)zyka JavaScript Adapt.js Respond.js W jaki sposób warto(cid:258)ci procentowe nadaj(cid:200) strukturom elastyczno(cid:258)(cid:202)? Konwersja pikseli na procenty Czym jest system responsywnej siatki? Systemy responsywnych siatek 9 11 15 15 16 17 17 18 18 18 19 20 21 22 23 25 25 26 27 28 28 30 30 32 34 35 Kup książkęPoleć książkę Responsive Web Design z jQuery Szablony siatek Photoshopa Przygotowanie znacznika meta widoku (cid:109)wiczenie 2a — tworzenie uk(cid:239)adu siatek (cid:109)wiczenie 2b — wykorzystanie biblioteki Foundation4 do przygotowania struktury strony Podsumowanie Rozdzia(cid:239) 3. Tworzenie responsywnego menu Projektowanie menu w celu poprawienia u(cid:285)yteczno(cid:258)ci Najcz(cid:218)(cid:258)ciej u(cid:285)ywane wzorce responsywnego menu Top nav Footer anchor Toggle Menu Select Footer-only Multi toggle Toggle and slide Menu off-canvas (cid:109)wiczenie 3. — dopasowywanie menu z wykorzystaniem rozwi(cid:200)zania Toggle Menu Podsumowanie Rozdzia(cid:239) 4. Projektowanie responsywnych tekstów Konwertowanie tekstu na jednostki wzgl(cid:218)dne Jednostka wzgl(cid:218)dna — procentowa Jednostka wzgl(cid:218)dna — em Jednostka wzgl(cid:218)dna — rem Poprawianie wymiarowania elementów za pomoc(cid:200) w(cid:239)a(cid:258)ciwo(cid:258)ci box-sizing Dopasowywanie rodziny czcionek do potrzeb nag(cid:239)ówków responsywnych Narz(cid:218)dzie Font Squirrel do generowania czcionek Wtyczka FitText Wtyczka SlabText Lettering Kern.js Responsive Measure (cid:109)wiczenie 4. — dopasowywanie nag(cid:239)ówka strony Podsumowanie Rozdzia(cid:239) 5. Przygotowywanie obrazków i filmów Prosta zmiana wymiarów obrazka za pomoc(cid:200) CSS Stosowanie punktów zmiany obrazków Jak dzia(cid:239)a znacznik picture? Kontrolowanie nastaw responsywnych obrazków Biblioteka CSS — Focal Point Alternatywne rozwi(cid:200)zanie ze znacznikiem picture Foresight — wybieranie w(cid:239)a(cid:258)ciwego obrazka dla danej wielko(cid:258)ci ekranu Picturefill — rozwi(cid:200)zanie najbardziej przypominaj(cid:200)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 Kup książkęPoleć książkę Spis tre(cid:286)ci Tworzenie responsywnych obrazków t(cid:239)a za pomoc(cid:200) wtyczek jQuery Anystretch — (cid:239)atwe rozci(cid:200)ganie t(cid:239)a Backstretch — tworzenie responsywnego pokazu slajdów Obs(cid:239)uga ekranów o wysokiej g(cid:218)sto(cid:258)ci Tworzenie responsywnych elementów filmowych FitVids — szybkie rozwi(cid:200)zanie problemów z filmami (cid:109)wiczenie 5. — tworzenie ró(cid:285)nych wersji obrazka na g(cid:239)ówn(cid:200) stron(cid:218) witryny Podsumowanie Rozdzia(cid:239) 6. Tworzenie responsywnych galerii obrazów Responsywne galerie obrazów Wtyczka Elastislide FlexSlider2 — w pe(cid:239)ni responsywna galeria ResponsiveSlides — najlepsza z prostych galerii Swiper — dotykowa galeria obrazków Slicebox — animacja z u(cid:285)yciem obrazów z galerii Wykorzystanie gestów dotykowych Implementowanie zdarze(cid:241) dotykowych we wtyczkach JavaScript QuoJS — prosta biblioteka interakcji dotykowych Hammer — ma(cid:239)a biblioteka wielodotyku (cid:109)wiczenie 6. — tworzenie galerii obrazków za pomoc(cid:200) wtyczki Swiper Podsumowanie Rozdzia(cid:239) 7. Projektowanie tabel responsywnych Tabele responsywne Rozwijane tabele responsywne Rozszerzenia do wtyczki Stackedtables Jak to zrobi(cid:202), wykorzystuj(cid:200)c tabel(cid:218) z poprzedniego przyk(cid:239)adu? Poziome przewijanie Odwrócenie u(cid:239)o(cid:285)enia nag(cid:239)ówka Odno(cid:258)nik do pe(cid:239)nej tabeli (cid:109)wiczenie 7. — tworzenie tabeli responsywnej z cenami za pomoc(cid:200) wtyczki FooTable Podsumowanie Rozdzia(cid:239) 8. Implementowanie formularzy responsywnych Typy i atrybuty elementów formularzy Funkcja autouzupe(cid:239)niania z wtyczk(cid:200) Magicsuggest Jak to zaimplementowa(cid:202)? Funkcje wyboru daty i czasu Pickadate — responsywne wybieranie daty i czasu Funkcja podpowiedzi Tooltipster — nowoczesna funkcja podpowiedzi Tworzenie formularzy responsywnych za pomoc(cid:200) biblioteki IdealForms Jak to zaimplementowa(cid:202)? 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 Kup książkęPoleć książkę Responsive Web Design z jQuery (cid:109)wiczenie 8. — tworzenie formularza kontaktowego za pomoc(cid:200) biblioteki IdealForms Podsumowanie Rozdzia(cid:239) 9. Testowanie responsywnych stron Symulowanie urz(cid:200)dze(cid:241) za pomoc(cid:200) narz(cid:218)dzi dla przegl(cid:200)darek Narz(cid:218)dzie sieciowe Viewport Resizer Narz(cid:218)dzie sieciowe Surveyor Narz(cid:218)dzie sieciowe ScreenFly Emulator przegl(cid:200)darki Opera Mobile Wskazówki dotycz(cid:200)ce testowania responsywnych stron WWW (cid:109)wiczenie 9. — przetestujmy nasz(cid:200) stron(cid:218) na ró(cid:285)nych wielko(cid:258)ciach ekranu Podsumowanie Rozdzia(cid:239) 10. Prawid(cid:239)owa obs(cid:239)uga przegl(cid:200)darek Sprawdzanie funkcji obs(cid:239)ugiwanych przez przegl(cid:200)dark(cid:218) CanIUse.com Mobile HTML5.org QuirksMode.org Definiowanie rozwi(cid:200)za(cid:241) zast(cid:218)pczych Narz(cid:218)dzia do wykrywania dost(cid:218)pno(cid:258)ci funkcji CSS Browser Selector + Modernizr YepNope.js Implementacje wype(cid:239)niaczy MediaElements.js SVG Respond.js Podsumowanie Rozdzia(cid:239) 11. Przydatne wtyczki responsywne Wtyczki obs(cid:239)uguj(cid:200)ce struktur(cid:218) strony Tworzenie prostych struktur responsywnych za pomoc(cid:200) wtyczki Columns U(cid:285)ycie wtyczki Equalize do dopasowania wymiarów elementów Implementowanie strony z kafelkami za pomoc(cid:200) wtyczki Packery Wtyczki tworz(cid:200)ce menu nawigacyjne Tworzenie menu bocznego za pomoc(cid:200) wtyczki Sidr EasyResponsiveTabstoAccordion Wi(cid:218)ksza elastyczno(cid:258)(cid:202) menu dzi(cid:218)ki wtyczce FlaxNav Ró(cid:285)ne rozwi(cid:200)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 Kup książkęPoleć książkę Rozdzia(cid:239) 12. Poprawianie wydajno(cid:258)ci stron Wykorzystywanie sieci dostarczania tre(cid:258)ci Zmniejszenie liczby (cid:285)(cid:200)da(cid:241) HTTP Warunkowe (cid:239)adowanie komponentów Konsolidacja i minimalizacja zasobów (skryptów JavaScript i stylów CSS) Technika CSS Sprite Zmniejszanie wielko(cid:258)ci przesy(cid:239)anych plików Progresywne obrazki JPEG Optymalizacja obrazków Upraszczanie stron za pomoc(cid:200) HTML5 i CSS3 Testowanie wydajno(cid:258)ci stron WWW PageSpeed Insights YSlow WebPagetest Mobitest Podsumowanie Skorowidz Spis tre(cid:286)ci 211 211 212 212 212 213 214 214 215 216 216 217 218 219 219 220 221 7 Kup książkęPoleć książkę Responsive Web Design z jQuery 8 Kup książkęPoleć książkę 4 Projektowanie responsywnych tekstów Gdy mówimy o responsywnych nag(cid:239)ówkach, tak naprawd(cid:218) mówimy o elastycznych tekstach. A zatem sztywne wielko(cid:258)ci czcionek równie(cid:285) powinny zosta(cid:202) zast(cid:200)pione dynamicznymi. Ró(cid:285)- nica mi(cid:218)dzy takimi implementacjami wykonywanymi przed kilkoma laty a dzisiejszymi roz- wi(cid:200)zaniami polega na tym, (cid:285)e dawniej rozwa(cid:285)ali(cid:258)my tylko dwa sposoby prezentowania tre(cid:258)ci: na ekranie i na papierze. I cho(cid:202) czasy si(cid:218) zmieniaj(cid:200), to problemy z odpowiednim dopasowa- niem tekstu pozostaj(cid:200) nadal takie same. Powszechnie uwa(cid:285)a si(cid:218), (cid:285)e typografia jest podstaw(cid:200) naszych projektów i osi(cid:200) wszystkich stylów CSS, poniewa(cid:285) g(cid:239)ównym zadaniem stron internetowych jest przekazywanie u(cid:285)ytkownikowi informacji b(cid:218)d(cid:200)cej odpowiedzi(cid:200) na jego pytania. Dobrze jest zatem zrezygnowa(cid:202) z tworzenia dziesi(cid:218)ciu rodzajów nag(cid:239)ówków, a to oznacza, (cid:285)e trzeba dobrze zaplanowa(cid:202) tych kilka, które znajd(cid:200) si(cid:218) na naszej stronie. W tym rozdziale nauczymy si(cid:218): (cid:81) konwertowa(cid:202) tekst na jednostki wzgl(cid:218)dne, (cid:81) zmienia(cid:202) odst(cid:218)py w akapitach i elementach blokowych, (cid:81) modyfikowa(cid:202) rodzin(cid:218) czcionek w celu uzyskania (cid:239)adnych i responsywnych nag(cid:239)ówków, (cid:81) automatycznie zarz(cid:200)dza(cid:202) rozmiarami czcionek. Kup książkęPoleć książkę Responsive Web Design z jQuery Konwertowanie tekstu na jednostki wzgl(cid:218)dne Jedn(cid:200) z najwi(cid:218)kszych zalet u(cid:285)ycia jednostek wzgl(cid:218)dnych jest efekt kaskadowy wywo(cid:239)ywany w momencie, gdy u(cid:285)ytkownik zmienia podstawow(cid:200) wielko(cid:258)(cid:202) czcionki w przegl(cid:200)darce. W takiej sytuacji wszystkie rozmiary czcionek zmieniaj(cid:200) si(cid:218) proporcjonalnie. Dzisiaj niemal wszystkie przegl(cid:200)darki maj(cid:200) domy(cid:258)ln(cid:200) wielko(cid:258)(cid:202) elementu bazowego html ustalon(cid:200) na 16 pikseli. Warto(cid:258)(cid:202) ta mo(cid:285)e zosta(cid:202) jednak zmieniona w ustawieniach przegl(cid:200)darki, co pozwala u(cid:285)ytkownikowi powi(cid:218)kszy(cid:202) tekst, (cid:285)eby by(cid:239) (cid:239)atwiejszy do odczytania. Zanim zaczniemy mówi(cid:202) o najcz(cid:218)(cid:258)ciej stosowanych jednostkach miary, musz(cid:218) opowiedzie(cid:202) o dwóch szczególnych jednostkach, których popularno(cid:258)(cid:202) ca(cid:239)y czas szybko wzrasta. Chodzi mi o jednostki vw (viewport width — szeroko(cid:258)(cid:202) widoku) i vh (viewport height — wysoko(cid:258)(cid:202) widoku). Jednostki odnosz(cid:200)ce si(cid:218) do widoku strony nie s(cid:200) obs(cid:239)ugiwane we wszystkich przegl(cid:200)darkach, dlatego dobrze jest zajrze(cid:202) na strony http://www.w3.org/TR/css3-values/ lub http://caniuse.com/ viewport-units. Warto przyjrze(cid:202) si(cid:218) tym jednostkom, poniewa(cid:285) u(cid:239)atwiaj(cid:200) one skalowanie wiel- ko(cid:258)ci czcionek w zale(cid:285)no(cid:258)ci od wielko(cid:258)ci okna przegl(cid:200)darki. Najpopularniejsze jednostki stosowane na stronach internetowych przedstawia(cid:202) b(cid:218)d(cid:218) w ko- lejnych punktach. Jednostka wzgl(cid:218)dna — procentowa Warto(cid:258)ci procentowe wyra(cid:285)ane s(cid:200) wzgl(cid:218)dem elementu nadrz(cid:218)dnego, dlatego najcz(cid:218)(cid:258)ciej sto- suje si(cid:218) je do definiowania struktury strony, tak jak zrobili(cid:258)my to w rozdziale 2. Nie ma jednak (cid:285)adnych przeciwwskaza(cid:241), (cid:285)eby jednostki tej u(cid:285)y(cid:202) te(cid:285) do zdefiniowania wielko(cid:258)ci czcionki. Pro- sz(cid:218) przyjrze(cid:202) si(cid:218) poni(cid:285)szemu przyk(cid:239)adowi: body { font-size: 100 ; /* bazowe 16px /* } p { font-size: 87.5 ; /* 14px ÷ 16 */ } Cz(cid:218)(cid:258)(cid:202) twórców stron definiuje wielko(cid:258)(cid:202) czcionki w elemencie body na 62,5 procenta (10 pik- seli), co u(cid:239)atwia pó(cid:283)niejsze obliczenia. W takiej sytuacji przypisanie elementom strony wiel- ko(cid:258)ci czcionki o warto(cid:258)ci 150 spowoduje, (cid:285)e b(cid:218)d(cid:200) one mia(cid:239)y wielko(cid:258)(cid:202) 15 pikseli, natomiast warto(cid:258)(cid:202) 190 odpowiada(cid:202) b(cid:218)dzie wielko(cid:258)ci 19 pikseli itd. Metoda ta pozwala na (cid:239)atwiejsze okre(cid:258)lenie wielko(cid:258)ci czcionek na stronie, dzia(cid:239)a ona jednak tylko na pierwszym poziomie kaska- dy okre(cid:258)laj(cid:200)cej wielko(cid:258)ci czcionek. 72 Kup książkęPoleć książkę Rozdzia(cid:225) 4. • Projektowanie responsywnych tekstów Jednostka wzgl(cid:218)dna — em Jednostka em powi(cid:200)zana jest z wyliczon(cid:200) wielko(cid:258)ci(cid:200) czcionki elementu nadrz(cid:218)dnego. W poni(cid:285)- szym przyk(cid:239)adzie chcemy zdefiniowa(cid:202) w elemencie potomnym czcionk(cid:218) o wielko(cid:258)ci 20 pikseli: body { font-size: 1em; /* bazowe 16px /* } p { font-size: 1.25em; /* 20px ÷ 16 */ } W sieci dost(cid:218)pna jest przydatna strona http://pxtoem.com, która u(cid:239)atwia wykonywanie takich oblicze(cid:241). Poni(cid:285)szy rysunek wyja(cid:258)nia, jak u(cid:285)ywa(cid:202) tego narz(cid:218)dzia. W lewej kolumnie nale(cid:285)y poda(cid:202) wielko(cid:258)(cid:202) bazow(cid:200) czcionki, wówczas w (cid:258)rodkowej kolumnie uka(cid:285)(cid:200) si(cid:218) wyniki oblicze(cid:241). W prawej kolumnie natomiast mo(cid:285)na dokonywa(cid:202) podobnych oblicze(cid:241) dla wielko(cid:258)ci czcionek spoza zakresu od 6 do 24 pikseli. Trzeba te(cid:285) pami(cid:218)ta(cid:202), (cid:285)eby podczas wykonywania konwersji jednostek obok ostatecznie obli- czonej warto(cid:258)ci zawsze dopisywa(cid:202) warto(cid:258)(cid:202) w pikselach (mówi(cid:239)em ju(cid:285) o tym w rozdziale 2.). Mówi(cid:218) o tym jeszcze raz, poniewa(cid:285) obs(cid:239)uga wielko(cid:258)ci czcionek na stronie zwi(cid:200)zana jest ze sto- sowaniem wielu kaskadowych stylów, czego przyk(cid:239)adem mo(cid:285)e by(cid:202) poni(cid:285)szy rysunek: 73 Kup książkęPoleć książkę Responsive Web Design z jQuery Jednostka wzgl(cid:218)dna — rem Jednostka rem pochodzi ze specyfikacji CSS3 i jest skrótem od root em (bazowe em), czyli jest jednostk(cid:200) okre(cid:258)lan(cid:200) wzgl(cid:218)dem g(cid:239)ównego elementu dokumentu HTML. Oznacza to, (cid:285)e zmia- na wielko(cid:258)ci czcionki w elemencie html spowoduje przeskalowanie czcionek wzgl(cid:218)dem ele- mentu bazowego strony, a nie elementów nadrz(cid:218)dnych. To jedyna ró(cid:285)nica w stosunku do jed- nostek em. Przyjrzyjmy si(cid:218) teraz, jak mo(cid:285)na wielko(cid:258)ci z poprzednich przyk(cid:239)adów przekszta(cid:239)ci(cid:202) na jed- nostki rem: body { font-size: 1em; /* bazowe 16px /* } section, section li strong { font-size: 14px; /* definicja dla IE8 i wcze(cid:286)niejszych */ font-size: 0.875rem; /* 14px ÷ 16 */ } section li { font-size: 12px; /* definicja dla IE8 i wcze(cid:286)niejszych */ font-size: 0.750rem; /* 12px ÷ 16 */ } Taki sposób dzia(cid:239)ania mo(cid:285)e zaoszcz(cid:218)dzi(cid:202) nam sporo pracy i u(cid:239)atwi(cid:202) analiz(cid:218) kodu, je(cid:285)eli strona wymaga(cid:202) b(cid:218)dzie wi(cid:218)kszej ilo(cid:258)ci pustego miejsca (w zale(cid:285)no(cid:258)ci od g(cid:218)sto(cid:258)ci prezentowanych tre(cid:258)ci). Spróbuj zaczyna(cid:202) projekty od przygotowania danych typografii wszystkich g(cid:239)ównych elemen- tów struktury, zanim jeszcze zostan(cid:200) one zaprojektowane. Mo(cid:285)na to zrobi(cid:202), tworz(cid:200)c dokument szablonu, w którym zapisane s(cid:200) wszystkie najwa(cid:285)niejsze elementy HTML wraz z odpowiednim arkuszem stylów przygotowanym na potrzeby projektu witryny. Poprawianie wymiarowania elementów za pomoc(cid:200) w(cid:239)a(cid:258)ciwo(cid:258)ci box-sizing Na poni(cid:285)szym rysunku zilustrowany zosta(cid:239) model znany pod nazw(cid:200) box-model (model polo- wy), w którym okre(cid:258)lenie ca(cid:239)kowitej szeroko(cid:258)ci elementu wymaga oblicze(cid:241) uwzgl(cid:218)dniaj(cid:200)cych jego obramowanie i dope(cid:239)nienie. Model ten powoli przestaje by(cid:202) stosowany: 74 Kup książkęPoleć książkę Rozdzia(cid:225) 4. • Projektowanie responsywnych tekstów W poni(cid:285)szym przyk(cid:239)adzie przedstawiam sposób u(cid:285)ycia modelu polowego do podzielenia do- st(cid:218)pnej przestrzeni mi(cid:218)dzy dwa elementy div, z których ka(cid:285)dy ma dope(cid:239)nienie wielko(cid:258)ci 5 oraz obramowanie o grubo(cid:258)ci 2 pikseli. W efekcie obliczenie szeroko(cid:258)ci tych elementów wcale nie jest proste: div.splitted { padding: 0 5 ; border: 2px solid black; float: left; width: ?; /* warto(cid:286)(cid:252) rzeczywista= 50 - 10 - 4px */ } W specyfikacji CSS3 znalaz(cid:239)a si(cid:218) w(cid:239)a(cid:258)ciwo(cid:258)(cid:202) box-sizing, której mo(cid:285)na przypisa(cid:202) warto(cid:258)(cid:202) bor- der-box, co oznacza, (cid:285)e warto(cid:258)(cid:202) szeroko(cid:258)ci (w(cid:239)a(cid:258)ciwo(cid:258)(cid:202) width) obejmuje ju(cid:285) w sobie wielko(cid:258)ci dope(cid:239)nienia i obramowania. Wprawdzie w(cid:239)a(cid:258)ciwo(cid:258)(cid:202) ta dobrze funkcjonuje ju(cid:285) w ósmej wersji Internet Explorera, nie jest jednak obs(cid:239)ugiwana w jego wcze(cid:258)niejszych wersjach. Je(cid:285)eli mu- sisz zapewni(cid:202) stronie obs(cid:239)ug(cid:218) tych dwóch przegl(cid:200)darek, to mo(cid:285)esz wykorzysta(cid:202) dodatek, któ- ry za(cid:239)ata te braki. Jest on dost(cid:218)pny pod adresem https://github.com/Schepp/box-sizing-polyfill. Zobaczmy teraz, jak ta zmiana wp(cid:239)ywa na obliczenia wykonywane w naszym przyk(cid:239)adzie: div.splitted { padding: 0 5 ; width: 50 ; border: 2px solid black; float: left; } Jak wida(cid:202), teraz nie ma ju(cid:285) problemów z obliczeniem szeroko(cid:258)ci elementu i przeanalizowa- niem wielko(cid:258)ci pustych przestrzeni oddzielaj(cid:200)cych elementy na ekranie. Dodatkowo wiele osób definiuje wielko(cid:258)(cid:202) dope(cid:239)nienia za pomoc(cid:200) jednostek em, poniewa(cid:285) pozwala to unikn(cid:200)(cid:202) cz(cid:218)(cid:258)ci oblicze(cid:241) zwi(cid:200)zanych z proporcjami. div.splitted { padding: 0 0.5em; width: 50 ; 75 Kup książkęPoleć książkę 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(cid:218)(cid:258)(cid:202) przegl(cid:200)darek nadal wymaga stosowania podanych wy(cid:285)ej przedrostków, dlatego nie mo(cid:285)na ich pomin(cid:200)(cid:202). Poza tym w podobny sposób mo(cid:285)na definiowa(cid:202) dope(cid:239)nienie elemen- tów w pionie, na przyk(cid:239)ad tak: div.splitted { padding-top: 1em; } Dopasowywanie rodziny czcionek do potrzeb nag(cid:239)ówków responsywnych Odpowiednie czcionki pozwalaj(cid:200) na przygotowanie dla u(cid:285)ytkowników naprawd(cid:218) fascynuj(cid:200)cych stron oraz zachowanie spójnego stylu ca(cid:239)ej witryny bez konieczno(cid:258)ci przygotowywania setek obrazków na potrzeby nag(cid:239)ówków. Czcionki trzeba wybiera(cid:202) naprawd(cid:218) ostro(cid:285)nie, poniewa(cid:285) ich kszta(cid:239)t wp(cid:239)ywa na odbiór tre(cid:258)ci przez u(cid:285)yt- kowników. (cid:189)le dobrana czcionka mo(cid:285)e spowodowa(cid:202), (cid:285)e po przejrzeniu jednej lub dwóch stron u(cid:285)ytkow- nik opu(cid:258)ci witryn(cid:218). Regu(cid:239)a CSS @font-face pozwala projektantom na wykorzystanie niestandardowych czcionek, które nie s(cid:200) zainstalowane na komputerach u(cid:285)ytkowników, dzi(cid:218)ki czemu umo(cid:285)liwia szybkie dopasowanie wygl(cid:200)du nag(cid:239)ówków. Wielk(cid:200) zalet(cid:200) zastosowania regu(cid:239)y @font-face jest to, (cid:285)e nie wymaga ona stosowania obrazków w nag(cid:239)ówkach, a jednocze(cid:258)nie zachowuje elastyczno(cid:258)(cid:202) niezb(cid:218)dn(cid:200) na stronach responsywnych. Regu(cid:239)a @font-face obs(cid:239)ugiwana jest przez IE8 oraz wersje wcze(cid:258)niejsze, pod warunkiem (cid:285)e wykorzy- stywane s(cid:200) czcionki typu EOT. Poza tym Safari iOS 4.1 oraz wersje wcze(cid:258)niejsze obs(cid:239)uguj(cid:200) wy(cid:239)(cid:200)cznie czcionki SVG. W dalszej cz(cid:218)(cid:258)ci tego rozdzia(cid:239)u opowiem, jak mo(cid:285)na rozszerzy(cid:202) obs(cid:239)ug(cid:218) czcionek w tych przegl(cid:200)darkach. Na stronie http://www.google.com/fonts mo(cid:285)na przejrze(cid:202) ogromn(cid:200) bibliotek(cid:218) czcionek wraz z informacj(cid:200) o ich autorach. Zalecam przeczyta(cid:202) informacje licencyjne ka(cid:285)dej czcionki przed jej u(cid:285)yciem, aby zyska(cid:202) pewno(cid:258)(cid:202), (cid:285)e mo(cid:285)na u(cid:285)y(cid:202) jej komercyjnie. 76 Kup książkęPoleć książkę Rozdzia(cid:225) 4. • Projektowanie responsywnych tekstów Podstawowym zadaniem u(cid:285)ycia w(cid:239)a(cid:258)ciwo(cid:258)ci @font-face jest zdefiniowanie regu(cid:239)y stylu. Za po- moc(cid:200) w(cid:239)a(cid:258)ciwo(cid:258)ci font-family definiowana jest nazwa czcionki, której mo(cid:285)na u(cid:285)y(cid:202) w dalszej cz(cid:218)(cid:258)ci dokumentu, natomiast w(cid:239)a(cid:258)ciwo(cid:258)(cid:202) src okre(cid:258)la miejsce, w którym czcionka ta jest prze- chowywana. Z kolei w(cid:239)a(cid:258)ciwo(cid:258)(cid:202) font-weight (nie trzeba jej u(cid:285)ywa(cid:202) w przypadku normalnych czcionek, ale jest niezb(cid:218)dna, je(cid:285)eli chcemy u(cid:285)y(cid:202) czcionek pogrubionych lub cienkich) definiuje wag(cid:218) czcionki. Przyk(cid:239)ad takiej regu(cid:239)y podaj(cid:218) poni(cid:285)ej: @font-face { font-family: Kite One ; src: url(/fonts/KiteOne-Regular.ttf); } Teraz mo(cid:285)na ju(cid:285) u(cid:285)y(cid:202) nowej czcionki, wykorzystuj(cid:200)c standardow(cid:200) sk(cid:239)adni(cid:218): p { font-family: Kite One , Helvetica, Arial, sans-serif; } Istniej(cid:200) jednak lepsze metody. Przyjrzyjmy si(cid:218) teraz sposobom u(cid:285)ycia takich narz(cid:218)dzi, jak Font Squirrel, Fit Text, Slabtext, Lettering i Responsive Measure. Narz(cid:218)dzie Font Squirrel do generowania czcionek Font Squirrel to (cid:258)wietne narz(cid:218)dzie pozwalaj(cid:200)ce na przekszta(cid:239)cenie dowolnej czcionki dla kom- putera stacjonarnego na wersj(cid:218) sprawdzaj(cid:200)c(cid:200) si(cid:218) w sieci. Oprócz tego udost(cid:218)pniana jest us(cid:239)u- ga generowania prawid(cid:239)owego kodu oraz plików na podstawie danych czcionki. I to wszystko ca(cid:239)kowicie za darmo1! Na stronie http://www.fontsquirrel.com/tools/webfont-generator znajdziemy dodatkowe infor- macje o g(cid:239)ównych funkcjach tego narz(cid:218)dzia, takie jak: (cid:81) Font Squirrel nie wymaga dog(cid:239)(cid:218)bnej znajomo(cid:258)ci j(cid:218)zyka CSS, (cid:81) w trybie eksperta udost(cid:218)pnia dodatkowe opcje poprawiania szybko(cid:258)ci (cid:239)adowania strony, (cid:81) wygenerowane pliki i kod dzia(cid:239)aj(cid:200) równie(cid:285) w starszych przegl(cid:200)darkach, (cid:81) wszystkie udost(cid:218)pniane zasoby s(cid:200) ca(cid:239)kowicie darmowe. Jak to zrobi(cid:202)? Na pocz(cid:200)tek trzeba otworzy(cid:202) stron(cid:218) Font Squirrel i klikn(cid:200)(cid:202) przycisk Add fonts, a nast(cid:218)pnie wybra(cid:202) czcionk(cid:218), któr(cid:200) chcemy u(cid:285)y(cid:202) na w(cid:239)asnej stronie i dla której mamy odpowiedni(cid:200) licen- cj(cid:218). W kolejnym kroku dobrze jest na pocz(cid:200)tek zaznaczy(cid:202) opcj(cid:218) Basic (wersja prosta) i pobra(cid:202) wygenerowane pliki. 1 Darmowa jest jedynie us(cid:239)uga. Pami(cid:218)taj, (cid:285)e ka(cid:285)da czcionka ma swoj(cid:200) licencj(cid:218), dlatego tak wa(cid:285)ne jest jej przeczytanie przed zastosowaniem czcionki na swojej stronie. 77 Kup książkęPoleć książkę Responsive Web Design z jQuery Po rozpakowaniu zawarto(cid:258)ci pobranego pliku trzeba na pocz(cid:200)tku pliku CSS dopisa(cid:202) poni(cid:285)szy kod, który pozwoli nam skorzysta(cid:202) z plików czcionek i u(cid:285)y(cid:202) ich zale(cid:285)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(cid:285)dym razem gdy b(cid:218)dziemy chcieli wykorzysta(cid:202) now(cid:200) czcionk(cid:218), wystarczy tylko poda(cid:202) jej nazw(cid:218) zdefiniowan(cid:200) w regule @font-face, na przyk(cid:239)ad tak jak poni(cid:285)ej: p { font-family: kite_oneregular , Helvetica, Arial, sans-serif; } A wracaj(cid:200)c do strony pobierania Font Squirrel, mamy te(cid:285) mo(cid:285)liwo(cid:258)(cid:202) obrania tylko podzbioru znaków danej czcionki, co bardzo zmniejsza wielko(cid:258)(cid:202) pliku. W tym celu nale(cid:285)y zaznaczy(cid:202) opcje Optimal lub Expert. W ramach testów trzy razy przygotowali(cid:258)my t(cid:218) sam(cid:200) czcionk(cid:218) Kite One, za ka(cid:285)dym razem wybieraj(cid:200)c inn(cid:200) opcj(cid:218) (Basic, Optimal i Expert). Wyniki tego eksperymentu pokazuj(cid:200), (cid:285)e wielko(cid:258)(cid:202) 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(cid:285) opcja Optimal ogranicza licz- b(cid:218) znaków do mniej wi(cid:218)cej 256. W szczególnych przypadkach, w których czcionka Kite One mia(cid:239)aby mniej znaków, nie s(cid:200) wprowadzane (cid:285)adne optymalizacje. Najwi(cid:218)kszy potencja(cid:239) do zmniejszania plików uzyskujemy po wybraniu trybu Expert, zazna- czeniu opcji Basic Latin i r(cid:218)cznemu podawaniu poszczególnych znaków. Spróbujmy teraz wygenerowa(cid:202) czcionk(cid:218), wykorzystuj(cid:200)c tryb Expert narz(cid:218)dzia Font Squirrel: 1. Kliknij przycisk Add Fonts i wybierz plik czcionki, z którym chcesz pracowa(cid:202). 2. W sekcji Rendering usu(cid:241) zaznaczenie z opcji Fix Vertical Metrics. 3. W sekcji Font Formats zaznacz opcj(cid:218) SVG, tak jak pokazano na poni(cid:285)szym rysunku. 4. W sekcji Subsetting wybierz pozycj(cid:218) Custom subsetting. 5. W sekcji Language zaznacz opcj(cid:218) Polish. 6. W sekcji Unicode Tables zaznacz opcj(cid:218) Basic Latin. W tym miejscu zak(cid:239)adam, (cid:285)e w tekstach u(cid:285)ywane b(cid:218)d(cid:200) wy(cid:239)(cid:200)cznie znaki alfabetu polskiego. Je(cid:285)eli u(cid:285)ywasz innych j(cid:218)zyków, wybierz potrzebne w nich znaki. 78 Kup książkęPoleć książkę Rozdzia(cid:225) 4. • Projektowanie responsywnych tekstów Czasami w tekstach bardzo wa(cid:285)ne s(cid:200) takie znaki, jak cudzys(cid:239)owy lub apostrofy, dlatego dobrze jest skopiowa(cid:202) je i wklei(cid:202) w polu Single Characters, tak jak na poni(cid:285)szym rysunku: 7. Skontroluj obraz wygenerowany w sekcji Subset Preview i w razie potrzeby wprowad(cid:283) poprawki. 8. Po potwierdzeniu, (cid:285)e przesy(cid:239)asz czcionk(cid:218), do której masz prawa, kliknij po prostu przycisk DOWNLOAD YOUR KIT. 79 Kup książkęPoleć książkę Responsive Web Design z jQuery Wtyczka FitText FitText jest popularn(cid:200) wtyczk(cid:200) do biblioteki jQuery, która elastycznie ustala wielko(cid:258)(cid:202) czcionek. Jest narz(cid:218)dziem o ci(cid:200)gle rosn(cid:200)cej popularno(cid:258)ci, poniewa(cid:285) bardzo u(cid:239)atwia tworzenie elastycz- nych czcionek. Jego dzia(cid:239)anie polega na takim skalowaniu tekstu nag(cid:239)ówka, (cid:285)eby wype(cid:239)ni(cid:239) on ca(cid:239)(cid:200) szeroko(cid:258)(cid:202) elementu nadrz(cid:218)dnego. Je(cid:285)eli chcesz zobaczy(cid:202) przyk(cid:239)ad dzia(cid:239)ania tej wtyczki, (cid:285)eby si(cid:218) przekona(cid:202), na jak wielk(cid:200) elastyczno(cid:258)(cid:202) ona pozwala, to zajrzyj na stron(cid:218) samej wtyczki pod adresem http://fittextjs.com. Jak to zrobi(cid:202)? Po pobraniu plików wtyczki z serwerów Github (http://github.com/davatron5000/FitText.js) do swojej strony HTML wstaw poni(cid:285)szy kod: h1 id= responsive_headline Nag(cid:239)ówek u(cid:285)ywaj(cid:200)cy FitText /h1 Teraz na samym ko(cid:241)cu kodu HTML (przed zamykaj(cid:200)cym znacznikiem /body ) trzeba jeszcze do(cid:239)(cid:200)czy(cid:202) bibliotek(cid:218) jQuery i wtyczk(cid:218) Fittext. Na koniec nale(cid:285)y jeszcze uruchomi(cid:202) kod wtycz- ki obs(cid:239)uguj(cid:200)cej nasz nag(cid:239)ówek: script src= http://code.jquery.com/jquery-1.9.1.min.js /script script src= jquery.fittext.js /script script $( #responsive_headline ).fitText(); /script Domy(cid:258)lnie wtyczka ustali wielko(cid:258)(cid:202) czcionki na 1/10 szeroko(cid:258)ci elementu. Istniej(cid:200) dwie meto- dy zmiany tego ustawienia: skonfigurowanie mechanizmu kompresji lub zdefiniowanie mini- malnego i maksymalnego rozmiaru. Je(cid:285)eli skorzystamy z kompresora, to musimy poda(cid:202) warto(cid:258)(cid:202) kompresji. Na przyk(cid:239)ad warto(cid:258)(cid:202) 1.2 spowoduje delikatniejsze zmiany wielko(cid:258)ci tekstu, natomiast warto(cid:258)(cid:202) 0.8 sprawi, (cid:285)e zmia- ny wielko(cid:258)ci tekstu b(cid:218)d(cid:200) bardziej skokowe: script $( #responsive_headline ).fitText(1.2); /script Mo(cid:285)emy te(cid:285) zmodyfikowa(cid:202) ten domy(cid:258)lny mechanizm kontroli wielko(cid:258)ci tekstu, definiuj(cid:200)c jego minimaln(cid:200) i maksymaln(cid:200) wielko(cid:258)(cid:202). W ten sposób zyskujemy wi(cid:218)ksz(cid:200) kontrol(cid:218) niezb(cid:218)dn(cid:200) w sy- tuacjach, w których chcemy zachowa(cid:202) hierarchi(cid:218) nag(cid:239)ówków, na przyk(cid:239)ad tak jak poni(cid:285)ej: script $( #responsive_headline ).fitText(1,{ minFontSize: 20px , maxFontSize: 40px }); /script 80 Kup książkęPoleć książkę Rozdzia(cid:225) 4. • Projektowanie responsywnych tekstów Wtyczka SlabText SlabText jest wtyczk(cid:200) umo(cid:285)liwiaj(cid:200)c(cid:200) tworzenie (cid:258)licznych i ca(cid:239)kowicie responsywnych nag(cid:239)ów- ków. Dzi(cid:218)ki niej ka(cid:285)dy mo(cid:285)e bardzo (cid:239)atwo przygotowa(cid:202) robi(cid:200)ce wra(cid:285)enie nag(cid:239)ówki. Skrypt dzieli ka(cid:285)dy nag(cid:239)ówek na wiersze, a nast(cid:218)pnie ka(cid:285)dy z nich powi(cid:218)ksza tak, (cid:285)eby wype(cid:239)ni(cid:239) prze- strze(cid:241) dost(cid:218)pn(cid:200) w poziomie. Idealna liczba znaków w wierszu wyliczana jest automatycznie przez podzielenie dost(cid:218)pnej szeroko(cid:258)ci przez wielko(cid:258)(cid:202) czcionki w pikselach. Poni(cid:285)ej wymieniam najwa(cid:285)niejsze funkcje tej wtyczki: (cid:81) Jest w pe(cid:239)ni responsywna i przygotowana do wspó(cid:239)pracy z urz(cid:200)dzeniami mobilnymi. (cid:81) Opcja Color Control wybiera dla nag(cid:239)ówka kolor t(cid:239)a, tekstu oraz cienia. (cid:81) Opcje z grupy Extra Options pozwalaj(cid:200) na ustalenie dope(cid:239)nienia i zdefiniowanie d(cid:239)ugo(cid:258)ci cienia. Z kolei opcja Image Overlay umo(cid:285)liwia za(cid:239)adowanie obrazka i umieszczenie go w tle nag(cid:239)ówka za pomoc(cid:200) w(cid:239)a(cid:258)ciwo(cid:258)ci CSS3. (cid:81) Opcja Font Control pozwala wybra(cid:202) czcionk(cid:218) i ustali(cid:202) wszystkie jej parametry. (cid:81) Opcja Clonable tworzy dowoln(cid:200) liczb(cid:218) klonów danej sekcji tekstu. (cid:81) Wtyczka pozwala na r(cid:218)czne z(cid:239)amanie wiersza. (cid:81) Zminimalizowana wersja wtyczki zajmuje tylko 4 KB. (cid:81) Nag(cid:239)ówki zajmuj(cid:200)ce sporo przestrzeni w poziomie lepiej zape(cid:239)niaj(cid:200) okno dowolnej przegl(cid:200)darki. (cid:81) Trzeba si(cid:218) upewni(cid:202), (cid:285)e skrypt zostanie wywo(cid:239)any dopiero po za(cid:239)adowaniu wszystkich czcionek z regu(cid:239)y @font-face. Kod wtyczki mo(cid:285)na pobra(cid:202) pod adresem http://github.com/freqDec/slabText/ i od razu rozpo- cz(cid:200)(cid:202) eksperymentowanie. Jak to zrobi(cid:202)? Na pocz(cid:200)tek trzeba dopisa(cid:202) do nag(cid:239)ówka header atrybut id, który pó(cid:283)niej zostanie wykorzy- stany w skrypcie, a nast(cid:218)pnie tu(cid:285) przed zamykaj(cid:200)cym znacznikiem /body doda(cid:202) znacznik script . Prosz(cid:218) spojrze(cid:202) na poni(cid:285)szy przyk(cid:239)ad: header h1 class= page-title Linux rozkazuje: Nowi u(cid:285)ytkownicy, ci(cid:200)gle nowi... szybcy i w(cid:258)ciekli! /h1 /header Poni(cid:285)ej przedstawiam kod, który trzeba doda(cid:202) do tego samego pliku: script $( .page-title ).slabText(); /script 81 Kup książkęPoleć książkę Responsive Web Design z jQuery Mo(cid:285)na te(cid:285) wy(cid:239)(cid:200)czy(cid:202) automatyczne (cid:239)amanie tekstu i samodzielnie wprowadzi(cid:202) miejsca podzia- (cid:239)u, zmieniaj(cid:200)c tym samym przekaz dla naszych u(cid:285)ytkowników: header h1 id= specific-title /h1 /header Taki kod trzeba jeszcze po(cid:239)(cid:200)czy(cid:202) z poni(cid:285)szym skryptem: script src= http://code.jquery.com/jquery-1.9.1.min.js /script script src= js/jquery.slabtext.min.js /script script var stS = span class= slabtext , stE = /span , txt = [ Linux rozkazuje: , nowi u(cid:285)ytkownicy, , ci(cid:200)gle nowi... , szybcy i w(cid:258)ciekli! ]; $( #specific-title ).html(stS + txt.join(stE + stS) + stE).slabText(); /script Na poni(cid:285)szym rysunku zobaczy(cid:202) mo(cid:285)na obie wersje nag(cid:239)ówka. Pierwotn(cid:200) po lewej, a po pra- wej wersj(cid:218) po modyfikacjach: Dok(cid:239)adniejszy opis wszystkich opcji mo(cid:285)na znale(cid:283)(cid:202) pod adresem http://freqdec.github.io/ slabText/. Lettering Wtyczka Lettering pozwala na uzyskanie pe(cid:239)nej kontroli nad ka(cid:285)d(cid:200) liter(cid:200) nag(cid:239)ówka. Opakowu- je ona poszczególne znaki, s(cid:239)owa i wiersze, nadaj(cid:200)c im klasy i tworz(cid:200)c tym samym ca(cid:239)kowicie zarz(cid:200)dzany kod, który umo(cid:285)liwia szybki dost(cid:218)p do ka(cid:285)dego elementu nag(cid:239)ówka z poziomu pliku CSS. Jest to wtyczka do biblioteki jQuery, co bardzo u(cid:239)atwia dopasowywanie odst(cid:218)pów mi(cid:218)dzy literami, nadawanie im specjalnego wygl(cid:200)du itp. Istniej(cid:200) dwie niesamowicie doskonale zaprojektowane strony, w których wiele pracy w(cid:239)o(cid:285)ono w ka(cid:285)d(cid:200) liter(cid:218) nag(cid:239)ówka. Prosz(cid:218) spojrze(cid:202) na te przyk(cid:239)ady dost(cid:218)pne pod adresami http://lost (cid:180)worldsfairs.com/moon/ i http://lostworldsfairs.com/eldorado/: 82 Kup książkęPoleć książkę Rozdzia(cid:225) 4. • Projektowanie responsywnych tekstów Jak to zrobi(cid:202)? Po pobraniu pliku zip ze strony https://github.com/davatron5000/Lettering.js mo(cid:285)emy rozpo- cz(cid:200)(cid:202) eksperymentowanie od dodania poni(cid:285)szego kodu do nowej strony HTML. U(cid:285)yty tutaj kod zostanie wykorzystany za chwil(cid:218): h1 class= fancy-title Tytu(cid:239) strony /h1 83 Kup książkęPoleć książkę Responsive Web Design z jQuery Nie mo(cid:285)na zapomnie(cid:202) o dodaniu w znaczniku head odwo(cid:239)ania do biblioteki jQuery i do wtyczki Lettering: script src= http://code.jquery.com/jquery-1.9.1.min.js /script script src= js/jquery.lettering.js /script Na samym ko(cid:241)cu pliku HTML (przed zamykaj(cid:200)cym znacznikiem /body ) trzeba jeszcze wy- wo(cid:239)a(cid:202) skrypt okre(cid:258)laj(cid:200)cy, na której klasie ma dzia(cid:239)a(cid:202) nasza wtyczka: script $(document).ready(function() { $( .fancy-title ).lettering(); }); /script Przygotowany w ten sposób kod wygeneruje poni(cid:285)sz(cid:200) struktur(cid:218). Wyobra(cid:283) sobie, (cid:285)e musisz to zapisa(cid:202) bez pomocy wtyczki: h1 class= fancy-title span class= char1 T /span span class= char2 y /span span class= char3 t /span span class= char4 u /span span class= char5 (cid:239) /span span class= char6 /span span class= char7 s /span span class= char8 t /span span class= char9 r /span span class= char10 o /span span class= char11 n /span span class= char12 y /span /h1 Tak przygotowanej strukturze mo(cid:285)na teraz nadawa(cid:202) style. Na przyk(cid:239)ad takie: style type= text/css h1 { font-family: Impact ; font-size:50px; text-transform:uppercase; text-shadow: 1px 1px 2px #666; } .char1, .word1, .line1 { color: purple; } .char2, .word2, .line2 { color: orange; } .char3, .word3, .line3 { color: yellow; } .char4, .line4 { color: blue; } .char5 { color: green; } .char6 { color: indigo; } .char7 { color: violet; } .char8 { color: gold; } .char9 { color: cyan; } .char10 { color: lime; } .char11 { color: red; } .char12 { color: magenta; } /style 84 Kup książkęPoleć książkę Rozdzia(cid:225) 4. • Projektowanie responsywnych tekstów Co wi(cid:218)cej, je(cid:285)eli nag(cid:239)ówek powinien otrzyma(cid:202) osobne style dla ka(cid:285)dego s(cid:239)owa (nie znaku), to mo(cid:285)na o tym poinformowa(cid:202) wtyczk(cid:218), podaj(cid:200)c jej parametr words , tak jak poni(cid:285)ej: script $(document).ready(function() { $( .fancy-title ).lettering( words ); }); /script Mo(cid:285)na te(cid:285) pomy(cid:258)le(cid:202) o osobnych stylach dla poszczególnych wierszy nag(cid:239)ówka rozdzielanych znacznikiem br / : h1 class= fancy-title Tytu(cid:239) strony br / z d(cid:239)ugim tekstem /h1 W stosunku do poprzedniego przyk(cid:239)adu jedyna ró(cid:285)nica polega na tym, (cid:285)e podajemy parametr lines : script $(document).ready(function() { $( .fancy-title ).lettering( lines ); }); /script Teraz zapewne si(cid:218) zastanawiasz, jak wiele pracy trzeba w(cid:239)o(cid:285)y(cid:202) w przygotowanie stylów, odmie- rzanie odleg(cid:239)o(cid:258)ci i wyliczanie, o ile trzeba powi(cid:218)kszy(cid:202) czcionk(cid:218) ka(cid:285)dego elementu. Do tych prac doskonale przyda si(cid:218) narz(cid:218)dzie Kern.js. Kern.js Kern.js jest narz(cid:218)dziem sieciowym doskonale uzupe(cid:239)niaj(cid:200)cym funkcje wtyczki Lettering.js, po- niewa(cid:285) udost(cid:218)pnia ono (cid:258)wietny interfejs pozwalaj(cid:200)cy na przeci(cid:200)ganie elementów, dopasowy- wanie kerningu znaków, ustalanie wysoko(cid:258)ci wierszy i umiejscowienia liter. A po zako(cid:241)czeniu tych prac wystarczy skopiowa(cid:202) wygenerowany kod CSS i u(cid:285)y(cid:202) go w swoim arkuszu stylów. Jak tego u(cid:285)ywa(cid:202)? Na dole strony http://www.kernjs.com/ znajdziesz odsy(cid:239)acz drag to bookmarks bar to install. Przeci(cid:200)gni(cid:218)cie go na pasek zak(cid:239)adek u(cid:239)atwi pó(cid:283)niej w(cid:239)(cid:200)czanie narz(cid:218)dzia na naszej stronie. Aby narz(cid:218)dzie to dzia(cid:239)a(cid:239)o prawid(cid:239)owo, do nag(cid:239)ówka naszej strony nale(cid:285)y do(cid:239)(cid:200)czy(cid:202) bibliotek(cid:218) jQuery w wersji 1.7.2 oraz pliki samej biblioteki Kern.js. Jej skrypt mo(cid:285)na pobra(cid:202) na stronie https://github.com/bstro/kern.js. script src= http://code.jquery.com/jquery-1.7.2.min.js /script script src= js/kern.min.js /script Oto lista pi(cid:218)ciu opcji, które pojawi(cid:200) si(cid:218) na górze strony, gdy tylko po jej otwarciu klikniemy znajduj(cid:200)c(cid:200) si(cid:218) w naszej przegl(cid:200)darce zak(cid:239)adk(cid:218) Kernjs.com: 85 Kup książkęPoleć książkę Responsive Web Design z jQuery (cid:81) zmiana kerningu (poziomego odst(cid:218)pu mi(cid:218)dzy literami), (cid:81) zmniejszenie lub zwi(cid:218)kszenie rozmiaru czcionki, (cid:81) dopasowanie wysoko(cid:258)ci wiersza (odst(cid:218)p pionowy), (cid:81) dowolne umiejscowienie liter, (cid:81) obrót tekstu o pewien k(cid:200)t. Wszystkie te opcje reprezentowane s(cid:200) za pomoc(cid:200) poni(cid:285)szych ikon: Gdy tylko zako(cid:241)czysz prace nad nag(cid:239)ówkiem, kliknij przycisk z „fajk(cid:200)”, aby zapisa(cid:202) wszystkie ustawienia w postaci kodu gotowego do skopiowania na nasz(cid:200) stron(cid:218). Je(cid:285)eli na stronie masz kilka dopasowanych w ten sposób nag(cid:239)ówków, to musisz uwa(cid:285)a(cid:202), (cid:285)eby kod jednego z nich nie wp(cid:239)ywa(cid:239) na drugi. Aby omin(cid:200)(cid:202) ten problem, wystarczy elementom na- g(cid:239)ówka przypisa(cid:202) specjaln(cid:200) klas(cid:218), tak jak w poni(cid:285)szym przyk(cid:239)adzie: h1 class= fancy-title Tytu(cid:239) strony /h1 Responsive Measure Responsive Measure to prosty skrypt, któremu mo(cid:285)na przekaza(cid:202) selektor (najlepiej wybiera- j(cid:200)cy element, w którym znajdzie si(cid:218) w(cid:239)a(cid:258)ciwa tre(cid:258)(cid:202)). Dzi(cid:218)ki niemu wygenerowana zostanie idealna definicja wielko(cid:258)ci czcionki pozwalaj(cid:200)ca na dopasowanie tekstu do elementu. Brzmi jak magia? W nast(cid:218)pnym podpunkcie opisz(cid:218) sposób u(cid:285)ycia tego skryptu i dopasowania go do naszych wymaga(cid:241). Jak to zrobi(cid:202)? Po pobraniu plików tego projektu ze strony https://github.com/jbrewer/Responsive-Measure/ wstaw poni(cid:285)szy kod do sekcji head na samym pocz(cid:200)tku dokumentu DOM: script src= http://code.jquery.com/jquery-1.9.1.min.js /script script src= js/jquery.rm.js /script Na ko(cid:241)cu strony HTML (przed zamykaj(cid:200)cym znacznikiem /body ) trzeba jeszcze uruchomi(cid:202) skrypt wywo(cid:239)uj(cid:200)cy Responsive Measure. Zanim jednak do tego przyst(cid:200)pimy, musz(cid:218) omówi(cid:202) dwie metody sterowania wielko(cid:258)ci(cid:200) tekstu: (cid:81) idealLineLength — Domy(cid:258)lnie ma warto(cid:258)(cid:202) 66, ale mo(cid:285)emy j(cid:200) zmieni(cid:202), okre(cid:258)laj(cid:200)c tym samym liczb(cid:218) znaków i spacji, które maj(cid:200) si(cid:218) zmie(cid:258)ci(cid:202) w jednym wierszu. Poza tym minimalna wielko(cid:258)(cid:202) czcionki ustalona jest na 16 pikseli, natomiast maksymalna 86 Kup książkęPoleć książkę Rozdzia(cid:225) 4. • Projektowanie responsywnych tekstów na 300 pikseli. Parametr sampleText ma pomaga(cid:202) przy obliczaniu liczby znaków o (cid:258)redniej szeroko(cid:258)ci znaku. Pami(cid:218)taj, (cid:285)e wiersze, w sk(cid:239)ad których wchodzi od 45 do 75 znaków, powszechnie uznaje si(cid:218) za najlepiej nadaj(cid:200)ce si(cid:218) do czytania. A oto wspomniany wcze(cid:258)niej kod wywo(cid:239)uj(cid:200)cy bibliotek(cid:218): script $( section ).responsiveMeasure({ idealLineLength: 45, minimumFontSize: 16, maximumFontSize: 300, sampleText: n }); /script (cid:81) minimumFontSize i maximumFontSize — Za pomoc(cid:200) tych parametrów mo(cid:285)na poprawi(cid:202) obs(cid:239)ug(cid:218) wielko(cid:258)ci czcionek, na przyk(cid:239)ad definiuj(cid:200)c 13 pikseli jako minimum i 30 jako maksimum. Poza tym domy(cid:258)lna warto(cid:258)(cid:202) parametru idealLineLength mo(cid:285)e wp(cid:239)ywa(cid:202) na wyniki oblicze(cid:241). Je(cid:285)eli tak si(cid:218) stanie, mo(cid:285)esz to poprawi(cid:202), definiuj(cid:200)c w(cid:239)asn(cid:200) warto(cid:258)(cid:202), podobnie jak zrobili(cid:258)my to w poprzednim przyk(cid:239)adzie. A poni(cid:285)ej przyk(cid:239)ad wykorzystania tych dwóch parametrów: script $( section ).responsiveMeasure({ minimumFontSize: 13, maximumFontSize: 30, sampleText: n }); /script (cid:109)wiczenie 4(cid:17) — dopasowywanie(cid:3) nag(cid:239)ówka strony To (cid:202)wiczenie wykonamy w trzech krokach, przy czym kroki drugi i trzeci b(cid:218)d(cid:200) ju(cid:285) tylko uzu- pe(cid:239)nieniem pierwszego: 1. Najpierw u(cid:285)yj narz(cid:218)dzia Font Squirrel, (cid:285)eby przygotowa(cid:202) sobie specjaln(cid:200) czcionk(cid:218). Nast(cid:218)pnie zastosuj j(cid:200) w znaczniku h1 umieszczonym na Twojej stronie. Je(cid:285)eli nie wiesz, której czcionki u(cid:285)y(cid:202), to polecam wykorzysta(cid:202) czcionk(cid:218) „Kite One” dost(cid:218)pn(cid:200) w serwisie Google Font. 87 Kup książkęPoleć książkę Responsive Web Design z jQuery 2. Wykorzystaj wtyczk(cid:218) Lettering, tak aby uzyska(cid:202) pe(cid:239)n(cid:200) kontrol(cid:218) nad ka(cid:285)d(cid:200) liter(cid:200), s(cid:239)owem i wierszem nag(cid:239)ówka strony. Teraz zmie(cid:241) kolor pierwszej litery, zmieniaj(cid:200)c w pliku CSS warto(cid:258)(cid:202) w(cid:239)a(cid:258)ciwo(cid:258)ci color dla klasy .char1. 3. Wywo(cid:239)aj narz(cid:218)dzie Kern.js, klikaj(cid:200)c jego zak(cid:239)adk(cid:218) w przegl(cid:200)darce. Nast(cid:218)pnie kliknij drugi przycisk na pasku narz(cid:218)dzi, wybierz pierwsz(cid:200) liter(cid:218) nag(cid:239)ówka i zwi(cid:218)ksz wielko(cid:258)(cid:202) jej czcionki. Teraz kliknij ostatni przycisk na pasku narz(cid:218)dzi i umie(cid:258)(cid:202) wygenerowany kod w pliku CSS. Podsumowanie W tym rozdziale poznali(cid:258)my metody tworzenia responsywnego tekstu i wielko(cid:258)ci czcionek. Poza tym poznali(cid:258)my kilka sposobów zmieniania czcionki na stronie, wykorzystuj(cid:200)c do tego takie narz(cid:218)dzia, jak Font Squirrel, FitText, SlabText, Lettering i Responsive Measure. Wszyst- kie te rozwi(cid:200)zania pozwalaj(cid:200) na uzyskanie kontroli nad tekstem, która jest niezb(cid:218)dna podczas przygotowywania responsywnej strony WWW. W nast(cid:218)pnym rozdziale mówi(cid:202) b(cid:218)dziemy o obrazach oraz materia(cid:239)ach filmowych. Dowiemy si(cid:218), jak mo(cid:285)na przekszta(cid:239)ci(cid:202) je w responsywne media dopasowuj(cid:200)ce si(cid:218) do ró(cid:285)nych urz(cid:200)dze(cid:241). Poza tym poznamy sposoby odtwarzania materia(cid:239)ów wideo za pomoc(cid:200) ró(cid:285)nych odtwarzaczy i urz(cid:200)dze(cid:241). 88 Kup książkęPoleć książkę Skorowidz 1140 Grid, 38, 39 A Blip.tv, 105 box-model, Patrz: model polowy breakpoint, Patrz: punkt zmiany Bushella Davida, 145 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 C Calendario, 206 CanIUse.com, 174 CDN, Patrz: sie(cid:202) dostarczania tre(cid:258)ci Chrome 4, 22, 115 Columns, 187, 188 Content Delivery Network, Patrz: sie(cid:202) dostarczania tre(cid:258)ci CSS, 20, 34, 201 image-set, Patrz: funkcja image-set regu(cid:239)a @font-face, 76, 77, 78 CSS Sprite, 213 CSS2.1, 22 CSS3, 22, 216 czas, 155 czcionka cienka, 77 elementu bazowego, 74 nadrz(cid:218)dnego, 73 EOT, 76 pogrubiona, 77 rodzina, 76 Safari,76 SVG, 76 wielko(cid:258)(cid:202) dynamiczna, 71 wzgl(cid:218)dna, 72 D data, 152, 155, 162 DeRouchey Bill, 24 Dimon Garret, 135 Drupal, 115 E EasyResponsiveTabstoAccordio n, 197 efekt b(cid:239)yskania strony, 202 FOUC, 202 Eis Diego, 21 ekran, 20 dotykowy, 129, 131, 132 g(cid:218)sto(cid:258)(cid:202), 103 Retina, 91, 95, 98, 103 rozdzielczo(cid:258)(cid:202), Patrz: ekran wielko(cid:258)(cid:202) rozmiar, 22, 38, 55, 168 szeroko(cid:258)(cid:202), 178 wielko(cid:258)(cid:202), 22, 91, 188 Elastislide, 110, 111 element, Patrz te(cid:285): znacznik dope(cid:239)nienie, 31 dotykowy, 130 em, 21, 33 email, 152, 162 Equalize, 187, 191 F fallback, Patrz: przegl(cid:200)darka rozwi(cid:200)zanie zast(cid:218)pcze Kup książkęPoleć książkę 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(cid:239)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(cid:218) HD, 98 podpowiedzi, 157 przej(cid:258)(cid:202) CSS3, 203 wype(cid:239)niania pól formularzy, 20 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(cid:218)dna, 21, 27, 72 em, Patrz: em procentowa, 72 rem, Patrz: rem j(cid:218)zyk JavaScript, 28 jPanelMenu.js, 67 JPEGmini, 216 jQuery, 21, 89, 111, 173 formularze, 152 jQuery++, 110, 111 jQueryUI, 163 G geolokalizacja, 21 Google Minify, 213 Google+, 192 Guideguide, 42, 43 222 K kalendarz, 206 karuzela, 116 ukrywanie, 37 Kern.js, 85, 88 Kickstarter, 105 kolumna p(cid:239)ynna, 37 wy(cid:258)rodkowanie, 40 kompresja, 215 komputer stacjonarny, 21, 22, 24, 25, 37, 91 L laptop, 22 Lettering, 77, 82, 84, 85, 88 lista dni miesi(cid:200)ca, 206 rozwijana, 60 logo, 51 M Magicsuggest, 153 Magnific Popup, 203 mapa, 203 Marcotte Ethan, 20 margines, 31, 34, Patrz te(cid:285): 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(cid:239)(cid:200)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(cid:239)ówek, 71, 76, 81, 82 Normalize, 37, 40 Kup książkęPoleć książkę 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 (cid:239)adowanie, 204 (cid:239)(cid:200)czenie, 213, 214 metadane, 215 okienko wyskakuj(cid:200)ce, 203 optymalizacja, 215, 216 skalowanie, 33, 39, 90, 93 t(cid:239)a, 98, 99, 100, 183 dynamiczny, 101 ukrywanie, 37 ustalanie nastaw, 92 wektorowy, 91, 183 wymiary, 89, 90 odtwarzacz, 182 okienko modalne, 203 wyskakuj(cid:200)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(cid:239)niacz Prefix free, 201 priorytet, 20 projekt adaptacyjny, 21 nieresponsywny, 21 p(cid:239)ynny, 21 responsywny, 20, 21, 27 przegl(cid:200)darka Chrome, Patrz: Chrome emulator, 165, 169 Firefox, Patrz: Firefox funkcje, 174, 175, 176, 177 Internet Explorer, Patrz: Internet Explorer j(cid:218)zyk, 178 obs(cid:239)uga, 173, 176, 177 Opera, Patrz: Opera przedrostek, 201 rozwi(cid:200)zanie zast(cid:218)pcze, 176, 177 Safari, Patrz: Safari testowanie, Patrz: testowanie ujednolicanie, Patrz: wype(cid:239)niacz, wstawka u(cid:239)o(cid:285)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 Skorowidz 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(cid:239)ynnej linii bazowej, 37 responsywna, 34, 35, 188 Fluid Baseline Grid, Patrz: Fluid Baseline Grid zagnie(cid:285)d(cid:285)anie, 40, 41 sie(cid:202) dostarczania tre(cid:258)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(cid:239)yskanie, 202 czas (cid:239)adowania, 211, 216, 217, 218, 219 jako harmonijki, 197 jako zbiór kart, 191 widok, 43 wydajno(cid:258)(cid:202), 211, 216, 217, 218, 219 z kafelkami, 192 styl CSS, Patrz: CSS Surveyor, 166 SVGeezy, 201 swipe events, Patrz: zdarzenie przeci(cid:200)gania Swiper, 110, 123 system operacyjny, 178 siatki, 34 szablon, 74 adresów URI, 96 responsywnej, 34, 35, 188 223 Kup książkęPoleć książkę 103, 141, 147 zdarzenie przeci(cid:200)gania, 110 zwi(cid:200)zane z dotykiem, 20 z mysz(cid:200), 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 Z zapytanie o media, 22, 28, 29, znak $$, 132 bia(cid:239)y, 213 (cid:191) (cid:285)(cid:200)danie HTTP, 212 Responsive Web Design z jQuery T tabela, 135, 141 filtrowanie, 140 klucz-warto(cid:258)(cid:202), 141 odsy(cid:239)acz, 135, 147 pe(cid:239)na, 147 przewijana poziomo, 135, 143 responsywna, 21 rozwijana, 135, 136 sortowanie, 139 sztaplowana, 135 wiersz nag(cid:239)ówków, 145 z wielk(cid:200) liczb(cid:200) kolumn, 143 tablet, 22, 25, 37, 89, 91, 131 ma(cid:239)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 W Walton Trent, 27 warunkowe (cid:239)adowanie komponentów, 212 WebPagetest, 219 webshim, Patrz: wstawka wielodotyk, 132 wireframe.cc, 25 w(cid:239)a(cid:258)ciwo(cid:258)(cid:202) 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(cid:239)niacz, 173, 176, 184 implementacja, 181 Y Yahoo!, 218 YepNope.js, 177, 180, 212 YouTube, 105 YSlow, 216, 218 YUI Compressor, 213 U urz(cid:200)dzenie mobilne, 24, 219, Patrz te(cid:285): tablet, smartfon V Viddler, 105 viewport, Patrz: strona widok Viewport Resizer, 166 Vimeo, 105 224 Kup książkęPoleć książkę
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Responsive Web Design z jQuery
Autor:

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


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