Jeżeli pamiętasz czasy przed rewolucją mobilną, to z łatwością przypomnisz sobie rozdzielczości królujące w tamtym okresie: 800×600 oraz 1024×768 pikseli. Nie było tabletów, smartfonów, netbooków i telewizorów podłączonych do internetu. Projektant stron WWW napotykał w swojej pracy wiele utrudnień, jednak nie musiał zmagać się z różnorodnością ekranów, jak webmasterzy naszej dekady. Obecnie projektowanie stron dopasowanych do wymogów różnych urządzeń to niezwykle cenna umiejętność.

Dzięki tej książce zdobędziesz ją w mig! Już za chwilę skorzystasz z możliwości HTML5 i CSS3, by stworzyć stronę, która zachwyci użytkownika, i to niezależnie od platformy, na której będzie jej używał. Co najważniejsze, żeby to osiągnąć, nie będziesz musiał przygotowywać kilku wersji jednej strony! W trakcie lektury poznasz nowości z CSS3 i HTML5. Dowiesz się, jak uzyskać rewelacyjne efekty, atrakcyjne wizualnie układy oraz decydować o rozmieszczeniu elementów w zależności od docelowej rozdzielczości. Książka ta jest obowiązkową lekturą dla każdego projektanta i programisty stron internetowych. Po prostu musisz ją mieć!

Przekonaj się, jak łatwo:

• obsługiwać różne rozdzielczości ekranów
• korzystać z plików multimedialnych
• wspierać starsze przeglądarki
• tworzyć lepsze strony WWW

Osoby które kupowały "Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3", wybierały także:

• LESS. Kurs video. Poziom pierwszy. Jak usprawnić pracę z CSS 89,00 zł, (35,60 zł -60%)
• Zosta 149,00 zł, (67,05 zł -55%)
• CSS i SASS. Kurs video. Praktyczny projekt nowoczesnego dashboardu 99,00 zł, (44,55 zł -55%)
• CSS3. Kurs video. Poziom pierwszy. Nowoczesne i stylowe strony WWW 59,00 zł, (26,55 zł -55%)
• Sass od podstaw. Kurs video. Budowa kompleksowej strony w oparciu o metodologię BEM 47,93 zł, (22,05 zł -54%)

Spis treści

Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3 -- spis treści

O autorze (9)

O recenzentach (11)

Przedmowa (13)

Rozdział 1. Podstawy HTML5, CSS3 i projektowania elastycznych układów stron (19)

• Czemu smartfony są tak ważne (a stary Internet Explorer nie)? (20)
• Czy zdarzają się sytuacje, w których układ elastyczny nie jest dobrym rozwiązaniem? (22)
• Układ skalowalny - definicja (22)
• Czemu ograniczać się tylko do skalowalnych projektów? (23)
• Przykłady skalowalnych projektów witryn (23)
  
  • Gdzie znajdziesz narzędzia testowe obszaru operacyjnego? (24)
  • Źródła inspiracji w sieci (30)
• HTML5 - zalety stosowania (32)
  
  • Oszczędność czasu i kodu w HTML5 (33)
  • Nowe elementy semantyczne HTML5 (34)
• CSS3 a wrażliwy projekt witryn i dodatkowe możliwości arkuszy (35)
  
  • Wniosek jest prosty - CSS3 niczego nie zepsuje! (36)
  • Jak CSS3 rozwiązuje codzienne problemy projektantów witryn? (36)
• Patrz, mamo! - bez obrazów! (39)
  
  • Co jeszcze CSS3 ma do zaoferowania? (39)
• Czy standardy HTML5 i CSS3 działają poprawnie już dziś? (42)
• RWD nie jest lekarstwem na wszystko (43)
• Uświadomienie klientom, że witryna nie powinna prezentować się tak samo w każdej przeglądarce (44)
• Podsumowanie (45)

Rozdział 2. Zapytania medialne: obsługa zróżnicowanych obszarów operacyjnych (47)

• Zapytań medialnych możesz używać już dziś (48)
• Skalowalne projekty a zapytania medialne (48)
  
  • Składnia zapytań medialnych (49)
  • Zapytania medialne i porównywanie parametrów urządzeń (51)
  • Używanie zapytań medialnych do zmodyfikowania projektu witryny (52)
  • Najlepszy sposób ładowania zapytań medialnych w metodologii RWD (52)
• Nasz pierwszy skalowalny projekt (53)
  
  • Może Cię zaskoczyć, że nasz pierwszy układ będzie miał stałą szerokość (53)
  • Projekt wrażliwy - ograniczanie wielkości obrazów (57)
  • Przycinanie treści w mniejszych obszarach operacyjnych (59)
• Wyłączanie mechanizmu automatycznego skalowania strony (60)
• Dopasowanie projektu witryny do różnych szerokości obszaru operacyjnego (63)
• W metodologii RWD treści zawsze stoją na pierwszym miejscu (65)
• Zapytania medialne - tylko część rozwiązania (69)
  
  • Potrzebny nam układ płynny (69)
• Podsumowanie (69)

Rozdział 3. Opanowanie układów płynnych (71)

• Układy stałe nie są przystosowane do nowych wyzwań (72)
• Czemu układy proporcjonalne są tak ważne w metodologii RWD? (72)
• Transformacja stałego układu w projekt proporcjonalny (73)
  
  • Ważne równanie (73)
  • Definiowanie kontekstu w elementach proporcjonalnych (75)
  • Zawsze należy pamiętać o kontekście (82)
• Wykorzystywanie jednostek em zamiast pikseli w kontekście typografii (85)
• Płynne obrazy (87)
  
  • Skalowanie obrazów w obrębie obszaru operacyjnego (87)
  • Właściwe reguły dla właściwych obrazów (89)
  • Nakładanie hamulców na układ płynny (91)
  • Wszechstronna własność max-width (92)
• Wczytywanie różnych obrazów dla różnych ekranów (93)
  
  • Konfigurowanie usługi Adaptive Images (94)
• Płynne siatki i zapytania medialne tworzą jedność (98)
• System siatek CSS (99)
  
  • Błyskawiczne konstruowanie strony w systemie siatek (100)
• Podsumowanie (105)

Rozdział 4. HTML5 i projekty elastyczne (107)

• Z jakich części standardu HTML5 możemy korzystać już dziś? (108)
  
  • Większość witryn może być konstruowana w oparciu o HTML5 (108)
  • Wypełnienia, skrypty i Modernizr (108)
• W jaki sposób pisać strony w standardzie HTML5? (109)
  
  • Oszczędności wynikające z wykorzystania HTML5 (110)
  • Rozsądne podejście do pisania kodu (111)
  • Oddajmy cześć wszechmocnemu elementowi <a> (111)
  • Elementy języka HTML, które uległy dezaktualizacji (112)
• Nowe elementy semantyczne HTML5 (112)
  
  • Element <section> (113)
  • Element <nav> (114)
  • Element <article> (114)
  • Element <aside> (114)
  • Element <hgroup> (115)
  • Element <header> (116)
  • Element <footer> (117)
  • Element <address> (117)
• Praktyczne wykorzystanie elementów strukturalnych HTML5 (117)
  
  • A co z główną zawartością strony? (123)
• HTML5 i semantyka na poziomie tekstu (123)
  
  • Element <b> (124)
  • Element <em> (124)
  • Element <i> (125)
  • Zasady semantyki na poziomie tekstu w kodzie (125)
• Poprawienie dostępności strony za pomocą standardu WAI-ARIA (127)
  
  • Punkty orientacyjne w standardzie ARIA (127)
• Zagnieżdżanie elementów multimedialnych w HTML5 (130)
• Zagnieżdżanie multimediów według HTML5 (131)
  
  • Alternatywne źródła plików (132)
  • Awaryjna obsługa w starszych przeglądarkach (133)
  • Znaczniki audio i video działają niemal identycznie (133)
• Skalowalne odtwarzacze filmów (134)
• Aplikacje sieciowe w trybie offline (137)
  
  • Aplikacje offline od podszewki (137)
  • Wdrażanie trybu offline (137)
  • Składnia pliku manifestu (139)
  • Automatyczne wczytywanie stron w manifeście (139)
  • Komentarze wersji (140)
  • Odczytywanie strony w trybie offline (140)
  • Rozwiązywanie problemów z aplikacjami offline (141)
• Podsumowanie (142)

Rozdział 5. CSS3: selektory, typografia i tryby barw (143)

• Co CSS3 oferuje projektantom stron? (144)
  
  • Obsługa CSS3 w Internet Explorerze 6, 7 i 8 (144)
  • Wykorzystanie CSS3 do projektowania i formatowania stron w przeglądarce (145)
• Struktura reguł CSS (145)
• Przedrostki autorskie i sposób ich wykorzystania (145)
• Przydatne triki w CSS3 (148)
  
  • Układ wielokolumnowy w CSS3 dla projektu skalowalnego (148)
  • Zawijanie tekstu (151)
• Nowe selektory CSS3 i sposób ich wykorzystania (152)
  
  • Selektory atrybutów w CSS3 (152)
  • Strukturalne pseudoklasy CSS3 (155)
  • Poprawki wprowadzane w pseudoelementach (164)
• Własna typografia sieciowa (166)
  
  • Reguła @font-face (166)
  • Odwołanie do fontów w regule @font-face (167)
• Pomocy - moje nagłówki @font-face CSS3 wyglądają okropnie! (170)
  
  • Uwagi na temat elementów typograficznych @font-face i elastycznego projektu strony (173)
• Nowe formaty barw CSS3 i kanał alfa (173)
  
  • Tryb RGB (174)
  • Tryb HSL (175)
  • Awaryjne tryby barw dla Internet Explorera 6, 7 i 8 (176)
  • Kanały alfa (176)
• Podsumowanie (178)

Rozdział 6. Spektakularny wygląd i CSS3 (179)

• Cieniowanie tekstu w CSS3 (180)
  
  • Obsługiwane tryby barw: HEX, HSL i RGB (180)
  • Jednostki: piksele, em i rem (181)
  • Blokowanie właściwości text-shadow (182)
  • Tworzenie efektu uwypuklenia za pomocą własności text-shadow (184)
  • Nakładanie wielu efektów cienia na tekst (184)
• Cieniowanie komponentów (185)
  
  • Cieniowanie do wewnątrz elementu (185)
  • Nakładanie wielu cieni na element (187)
• Gradienty tła (188)
  
  • Liniowe gradienty tła (189)
  • Gradienty kołowe (193)
  • Powtarzanie gradientu (196)
• Wzorce tła gradientu (198)
• Projektowanie elastyczne a CSS3 (200)
• Korzystanie z wielu właściwości CSS3 naraz (202)
• Wiele obrazów tła naraz (206)
  
  • Wymiary tła (208)
  • Właściwość background position (208)
  • Skrócona deklaracja właściwości background (209)
• Więcej właściwości CSS3 (209)
• Elastyczne ikony doskonałe dla projektu skalowalnego (209)
• Podsumowanie (210)

Rozdział 7. Przejścia, transformacje i animacje w CSS3 (213)

• Czym są przejścia CSS3 i jak możemy z nich korzystać? (214)
  
  • Typy właściwości przejść (215)
  • Ciekawe typy przejść dla elastycznych stron (218)
• Transformacje dwuwymiarowe a CSS3 (219)
  
  • Co możemy poddać transformacji? (220)
• Zabawa transformacjami trójwymiarowymi (224)
  
  • Składnia transformacji trójwymiarowych (226)
  • Transformacje trójwymiarowe wciąż raczkują (230)
• Animacje w CSS3 (231)
  
  • Łączenie animacji i transformacji CSS3 (234)
• Podsumowanie (237)

Rozdział 8. Opanowanie formularzy w HTML5 i CSS3 (239)

• Formularze a HTML5 (240)
  
  • Komponenty w formularzach HTML5 (242)
  • placeholder (242)
  • required (243)
  • autofocus (244)
  • autocomplete (244)
  • list (i powiązane elementy listy) (245)
  • Rodzaje kontrolek HTML5 (246)
  • Kontrolki daty i godziny (252)
• Wypełnienia dla starszych przeglądarek (257)
• Formatowanie formularzy HTML5 za pomocą arkuszy CSS3 (258)
  
  • Selektory pseudoklas CSS3 dla formularzy (262)
• Podsumowanie (265)

Rozdział 9. Rozwiązywanie problemów kompatybilności układów wrażliwych z przeglądarkami (267)

• Ulepszenie postępowe a łagodna degradacja (272)
  
  • Praktyka (272)
• Czy powinieneś naprawiać problemy we wszystkich wersjach Internet Explorera? (273)
  
  • Dane statystyczne (znowu) (274)
  • Kwestia własnego wyboru (274)
• Modernizr - scyzoryk projektanta stron (275)
  
  • Rozwiązywanie problemów z formatowaniem (277)
  • Obsługa elementów HTML5 w starszych Internet Explorerach a Modernizr (279)
  • Implementacja obsługi zapytań medialnych w Internet Explorerze 6, 7 i 8 (280)
  • Modernizr i wczytywanie warunkowe (282)
• Transformacja nawigacji - menu pionowe (284)
• Urządzenia z ekranami o wysokiej rozdzielczości (rzut okiem w przyszłość) (288)
• Podsumowanie (291)

Skorowidz (293)