O autorze (9)

O recenzentach (11)

Wstęp (15)

• Co znajdziesz w tej książce? (15)
• Czego potrzebujesz? (16)
• Dla kogo jest ta książka? (17)
• Konwencje (17)
• Pobranie przykładów dla książki (18)
• Errata (18)
• Piractwo (18)

Rozdział 1. Poznawanie projektów responsywnych (19)

• Koncepcja responsywnego projektu stron (20)
• Porównanie stron responsywnych, płynnych i adaptacyjnych (21)
• Dopasowywanie strony WWW do ekranu za pomocą zapytań o media (22)
• Najpierw-mobilne (23)
• Używanie siatek (25)
• Ćwiczenie 1. - projektowanie z siatkami w modelu najpierw-mobilne (25)
• Podsumowanie (26)

Rozdział 2. Projektowanie responsywnych układów i siatek (27)

• Dostosowywanie strony za pomocą języka JavaScript (28)
  • Adapt.js (28)
  • Respond.js (30)
• W jaki sposób wartości procentowe nadają strukturom elastyczność? (30)
  • Konwersja pikseli na procenty (32)
• Czym jest system responsywnej siatki? (34)
  • Systemy responsywnych siatek (35)
• Szablony siatek Photoshopa (42)
• Przygotowanie znacznika meta widoku (43)
• Ćwiczenie 2a - tworzenie układu siatek (44)
• Ćwiczenie 2b - wykorzystanie biblioteki Foundation4 do przygotowania struktury strony (45)
• Podsumowanie (50)

Rozdział 3. Tworzenie responsywnego menu (51)

• Projektowanie menu w celu poprawienia użyteczności (52)
• Najczęściej używane wzorce responsywnego menu (53)
  • Top nav (53)
  • Footer anchor (55)
  • Toggle (58)
  • Menu Select (60)
  • Footer-only (61)
  • Multi toggle (62)
  • Toggle and slide (65)
  • Menu off-canvas (67)
• Ćwiczenie 3. - dopasowywanie menu z wykorzystaniem rozwiązania Toggle Menu (69)
• Podsumowanie (69)

Rozdział 4. Projektowanie responsywnych tekstów (71)

• Konwertowanie tekstu na jednostki względne (72)
  • Jednostka względna - procentowa (72)
  • Jednostka względna - em (73)
  • Jednostka względna - rem (74)
• Poprawianie wymiarowania elementów za pomocą właściwości box-sizing (74)
• Dopasowywanie rodziny czcionek do potrzeb nagłówków responsywnych (76)
  • Narzędzie Font Squirrel do generowania czcionek (77)
  • Wtyczka FitText (80)
  • Wtyczka SlabText (81)
  • Lettering (82)
  • Kern.js (85)
  • Responsive Measure (86)
• Ćwiczenie 4. - dopasowywanie nagłówka strony (87)
• Podsumowanie (88)

Rozdział 5. Przygotowywanie obrazków i filmów (89)

• Prosta zmiana wymiarów obrazka za pomocą CSS (90)
• Stosowanie punktów zmiany obrazków (90)
• Jak działa znacznik picture? (92)
• Kontrolowanie nastaw responsywnych obrazków (92)
  • Biblioteka CSS - Focal Point (93)
• Alternatywne rozwiązanie ze znacznikiem picture (95)
  • Foresight - wybieranie właściwego obrazka dla danej wielkości ekranu (95)
  • Picturefill - rozwiązanie najbardziej przypominające znacznik picture (98)
• Tworzenie responsywnych obrazków tła za pomocą wtyczek jQuery (98)
  • Anystretch - łatwe rozciąganie tła (99)
  • Backstretch - tworzenie responsywnego pokazu slajdów (101)
• Obsługa ekranów o wysokiej gęstości (103)
• Tworzenie responsywnych elementów filmowych (104)
  • FitVids - szybkie rozwiązanie problemów z filmami (105)
• Ćwiczenie 5. - tworzenie różnych wersji obrazka na główną stronę witryny (106)
• Podsumowanie (108)

Rozdział 6. Tworzenie responsywnych galerii obrazów (109)

• Responsywne galerie obrazów (109)
  • Wtyczka Elastislide (110)
  • FlexSlider2 - w pełni responsywna galeria (115)
  • ResponsiveSlides - najlepsza z prostych galerii (119)
  • Swiper - dotykowa galeria obrazków (123)
  • Slicebox - animacja z użyciem obrazów z galerii (128)
• Wykorzystanie gestów dotykowych (129)
• Implementowanie zdarzeń dotykowych we wtyczkach JavaScript (131)
  • QuoJS - prosta biblioteka interakcji dotykowych (131)
  • Hammer - mała biblioteka wielodotyku (132)
• Ćwiczenie 6. - tworzenie galerii obrazków za pomocą wtyczki Swiper (133)
• Podsumowanie (134)

Rozdział 7. Projektowanie tabel responsywnych (135)

• Tabele responsywne (135)
• Rozwijane tabele responsywne (136)
  • Rozszerzenia do wtyczki (139)
• Stackedtables (141)
  • Jak to zrobić, wykorzystując tabelę z poprzedniego przykładu? (141)
• Poziome przewijanie (143)
• Odwrócenie ułożenia nagłówka (145)
• Odnośnik do pełnej tabeli (147)
• Ćwiczenie 7. - tworzenie tabeli responsywnej z cenami za pomocą wtyczki FooTable (149)
• Podsumowanie (149)

Rozdział 8. Implementowanie formularzy responsywnych (151)

• Typy i atrybuty elementów formularzy (152)
• Funkcja autouzupełniania z wtyczką Magicsuggest (153)
  • Jak to zaimplementować? (153)
• Funkcje wyboru daty i czasu (155)
  • Pickadate - responsywne wybieranie daty i czasu (155)
• Funkcja podpowiedzi (157)
  • Tooltipster - nowoczesna funkcja podpowiedzi (157)
• Tworzenie formularzy responsywnych za pomocą biblioteki IdealForms (158)
  • Jak to zaimplementować? (159)
• Ćwiczenie 8. - tworzenie formularza kontaktowego za pomocą biblioteki IdealForms (162)
• Podsumowanie (163)

Rozdział 9. Testowanie responsywnych stron (165)

• Symulowanie urządzeń za pomocą narzędzi dla przeglądarek (165)
  • Narzędzie sieciowe Viewport Resizer (166)
  • Narzędzie sieciowe Surveyor (166)
  • Narzędzie sieciowe ScreenFly (168)
• Emulator przeglądarki Opera Mobile (169)
• Wskazówki dotyczące testowania responsywnych stron WWW (169)
• Ćwiczenie 9. - przetestujmy naszą stronę na różnych wielkościach ekranu (170)
• Podsumowanie (170)

Rozdział 10. Prawidłowa obsługa przeglądarek (173)

• Sprawdzanie funkcji obsługiwanych przez przeglądarkę (174)
  • CanIUse.com (174)
  • Mobile HTML5.org (175)
  • QuirksMode.org (175)
• Definiowanie rozwiązań zastępczych (176)
• Narzędzia do wykrywania dostępności funkcji (177)
  • CSS Browser Selector + (177)
  • Modernizr (178)
  • YepNope.js (180)
• Implementacje wypełniaczy (181)
  • MediaElements.js (181)
  • SVG (183)
  • Respond.js (184)
• Podsumowanie (185)

Rozdział 11. Przydatne wtyczki responsywne (187)

• Wtyczki obsługujące strukturę strony (187)
  • Tworzenie prostych struktur responsywnych za pomocą wtyczki Columns (188)
  • Użycie wtyczki Equalize do dopasowania wymiarów elementów (191)
  • Implementowanie strony z kafelkami za pomocą wtyczki Packery (192)
• Wtyczki tworzące menu nawigacyjne (194)
  • Tworzenie menu bocznego za pomocą wtyczki Sidr (195)
  • EasyResponsiveTabstoAccordion (197)
  • Większa elastyczność menu dzięki wtyczce FlaxNav (198)
• Różne rozwiązania (200)
  • SVGeezy (201)
  • Prefix free (201)
  • Magnific Popup (203)
  • Riloadr (204)
  • Calendario (206)
• Podsumowanie (209)

Rozdział 12. Poprawianie wydajności stron (211)

• Wykorzystywanie sieci dostarczania treści (211)
• Zmniejszenie liczby żądań HTTP (212)
  • Warunkowe ładowanie komponentów (212)
  • Konsolidacja i minimalizacja zasobów (skryptów JavaScript i stylów CSS) (212)
  • Technika CSS Sprite (213)
• Zmniejszanie wielkości przesyłanych plików (214)
  • Progresywne obrazki JPEG (214)
  • Optymalizacja obrazków (215)
  • Upraszczanie stron za pomocą HTML5 i CSS3 (216)
• Testowanie wydajności stron WWW (216)
  • PageSpeed Insights (217)
  • YSlow (218)
  • WebPagetest (219)
  • Mobitest (219)
• Podsumowanie (220)

Skorowidz (221)

• Title: Responsive Web Design z jQuery
• Author: Gilberto Crespo
• Original title: Responsive Web Design with jQuery
• Translation: Wojciech Moch
• ISBN: 978-83-246-9187-6, 9788324691876
• Date of issue: 2014-09-08
• Format: Ebook
• Item ID: rewejq
• Publisher: Helion