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:

• stworzyć atrakcyjne menu i galeriÄ™
• wykorzystać możliwoÅ›ci maÅ‚ych ekranów
• zbudować responsywnÄ… tabelÄ™
• zastosować dodatkowe wtyczki
• zbudować uniwersalnÄ… stronÄ™ WWW

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

Osoby które kupowały "Responsive Web Design z jQuery", wybierały także:

• D3.js w akcji 67,42 zÅ‚, (20,90 zÅ‚ -69%)
• Tablice informatyczne. Node.js 16,86 zÅ‚, (5,90 zÅ‚ -65%)
• React i GatsbyJS. Kurs video. Nowoczesne strony internetowe w oparciu o headless CMS i GraphQL 148,98 zÅ‚, (59,59 zÅ‚ -60%)
• TypeScript i React. Kurs video. Tworzenie nowoczesnych komponent 129,00 zÅ‚, (51,60 zÅ‚ -60%)
• Vue.js w praktyce. Kurs video. Poznaj narz 148,98 zÅ‚, (59,59 zÅ‚ -60%)

Spis treści

Responsive Web Design z jQuery -- spis treści

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)