Responsive_Web_Design_z_jQuery_rewejq.pdf

(2052 KB) Pobierz

Tytuł oryginału: Responsive Web Design with jQuery

Tłumaczenie: Wojciech Moch

ISBN: 978-83-246-9186-9

First published in the English language under the title „Responsive Web Design with jQuery”.

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 ci

O utorze

O recenzentach

Wst p

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

Kup książkę

Poleć książkę

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

Kup książkę

Poleć książkę

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

101

103

104

105

106

108

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

109

110

115

119

123

128

129

131

132

133

134

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

135

136

139

141

143

145

147

149

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 ?

151

152

153

155

157

158

159

Kup książkę

Poleć książkę

Plik z chomika:

P.Kuba-47

Responsive_Web_Design_z_jQuery_rewejq.pdf

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: