E-book details

Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3

Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3

Ben Frain

Ebook

Niezbędnik każdego projektanta WWW!

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

Zaoszczędź czas — twórz uniwersalne strony WWW!

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)

  • Title: Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3
  • Author: Ben Frain
  • Original title: Responsive Web Design with HTML5 and CSS3
  • Translation: Maciej Reszotnik
  • ISBN: 978-83-246-6905-9, 9788324669059
  • Date of issue: 2013-11-10
  • Format: Ebook
  • Item ID: resweb
  • Publisher: Helion