Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3. Wydanie II - ebook

Profesjonalnie wykonana strona internetowa powinna działać bez zarzutu nie tylko na komputerze stacjonarnym, lecz także na tablecie czy telefonie. Użytkownicy chcą korzystać z aplikacji sieciowych w każdych warunkach i uruchamiać je na urządzeniach o najprzeróżniejszych rozmiarach czy parametrach. Należy się spodziewać, że wkrótce katalog urządzeń podłączanych do internetu znacznie się poszerzy. W takich warunkach projektant koniecznie musi zadbać o responsywność, aby tworzone przez niego strony internetowe dostosowywały się do zmiennych warunków i zachowywały funkcjonalność.

Niniejsza książka stanowi kompletne źródło informacji potrzebnych do napisania responsywnej strony internetowej. Jeśli znasz HTML i CSS, możesz z jej pomocą zbudować taką aplikację. Znajdziesz tu opis wszystkich podstawowych aspektów responsywnych projektów stron i dowiesz się, jak korzystać z najbardziej przydatnych technik w technologiach HTML5 i CSS3. Co więcej, odkryjesz najlepsze metody pisania i dostarczania kodu, obrazów i plików. Dzięki licznym przykładom i opisom bez trudu dostosujesz swój projekt do wymagań telefonów komórkowych i wielu innych urządzeń. Wydanie drugie uzupełniono o opis prawie wszystkich najnowszych technik i narzędzi potrzebnych do budowy responsywnych aplikacji internetowych.

W tej książce znajdziesz:

• opis elementów potrzebnych do zbudowania responsywnych stron internetowych
• informacje o zapytaniach medialnych, ich składni i sposobach wykorzystania
• omówienie projektowania struktury i układów płynnych oraz wykorzystania modelu Flexbox
• wskazówki co do wykorzystania niezwykłych możliwości CSS3 i HTML5
• wytyczne dotyczące grafiki SVG oraz metody obsługi obrazów SVG z poziomu JavaScriptu
• wyjaśnienie, jak tworzyć przejścia, transformacje i formularze
• spis dobrych praktyk kodowania responsywnych stron internetowych

Responsywne strony internetowe — będą równie piękne nawet po latach!

Zespół wydania oryginalnego (11)

O autorze (13)

O korektorach merytorycznych (15)

Przedmowa (17)

Rozdział 1. Podstawowe wiadomości o projektowaniu responsywnych stron internetowych (21)

• Rozpoczynamy przygodę (22)
• Projekt responsywny - definicja (23)
  • Projektowanie responsywnych stron internetowych w pigułce (23)
• Ustawianie poziomu obsługi przeglądarek (23)
  • Kilka uwag na temat narzędzi i edytorów tekstu (25)
• Pierwszy przykład projektu responsywnego (26)
  • Podstawowy plik HTML (26)
  • Okiełznać obrazy (29)
  • Zapytania medialne wkraczają do akcji (32)
  • Wady opisanego przykładu (37)
• Podsumowanie (38)

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

• Dlaczego zapytania medialne są potrzebne do budowy układów responsywnych (40)
  • Podstawowa logika warunkowa w CSS (41)
• Składnia zapytań medialnych (41)
  • Zapytania medialne w znaczniku (42)
• Łączenie zapytań medialnych (43)
  • Importowanie zapytań medialnych za pomocą dyrektywy @import (44)
  • Zapytania medialne w arkuszach stylów (44)
  • Co można sprawdzać za pomocą zapytań medialnych (44)
• Modyfikowanie projektu strony za pomocą zapytań medialnych (46)
  • W zapytaniu medialnym można wpisać każdą regułę CSS (48)
  • Zapytania medialne dla urządzeń o dużej gęstości pikseli (48)
• Metody organizacji i pisania zapytań medialnych (49)
  • Dołączanie różnych plików CSS za pomocą zapytań medialnych (49)
  • Zasadność dzielenia zapytań medialnych na wiele plików (50)
  • Śródliniowe zagnieżdżanie zapytań medialnych (50)
• Łączyć zapytania medialne w bloki czy rozpraszać je w różnych miejscach pliku (51)
• Znacznik meta viewport (52)
• Zapytania medialne - poziom 4. (54)
  • Obsługa skryptów (54)
  • Urządzenia wskazujące (55)
  • Funkcja sprawdzania obsługi efektu hover (56)
  • Zapytania dotyczące otoczenia (57)
• Podsumowanie (58)

Rozdział 3. Układy płynne i obrazy responsywne (59)

• Konwertowanie układu stałego na elastyczny (60)
  • Do czego służy model flexbox (64)
  • Bloki śródliniowe i białe znaki (65)
  • Elementy pływające (65)
  • Własności tabelaryczne (65)
• Flexbox - wprowadzenie (66)
  • Wyboista droga do flexboksa (66)
  • Obsługa flexboksa przez przeglądarki (66)
• Podstawy flexboksa (68)
  • Idealne środkowanie tekstu w pionie (68)
  • Przesuwanie elementów (70)
  • Zmienianie kolejności elementów (71)
  • Różne rodzaje układu flexboksa w różnych zapytaniach medialnych (72)
  • Własność inline-flex (73)
  • Wyrównywanie treści we flexboksie (74)
  • Własność flex (79)
  • Lepka stopka (82)
  • Zmienianie kolejności elementów (83)
  • Podsumowanie wiadomości o flexboksie (88)
• Obrazy responsywne (88)
  • Wewnętrzny problem obrazów responsywnych (88)
  • Proste przełączanie rozdzielczości za pomocą atrybutu srcset (89)
  • Zaawansowane techniki przełączania obrazów za pomocą atrybutu srcset (90)
  • Prezentowanie obrazów za pomocą elementu picture (91)
• Podsumowanie (92)

Rozdział 4. HTML5 i projekty responsywne (95)

Rozdział 5. CSS3: selektory, typografia, tryby kolorów i nowe funkcje (119)

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

Rozdział 7. Grafika SVG niezależna od rozdzielczości ekranu (183)

Rozdział 8. Przejścia, transformacje i animacje (215)

Rozdział 9. Formularze w HTML5 i CSS3 (241)

Rozdział 10. Ogólne zasady projektowania responsywnych stron internetowych (267)

Skorowidz (284)

• Znaczniki HTML5 są rozpoznawane przez wszystkie nowoczesne przeglądarki (96)
• Prawidłowe rozpoczynanie strony HTML5 (97)
  • Znacznik doctype (97)
  • Element HTML i atrybut lang (98)
  • Definiowanie różnych języków (98)
  • Kodowanie znaków (98)
• Jak najlepiej pracować z językiem HTML5 (98)
  • Rozsądne podejście do pisania kodu (99)
  • Oddajmy cześć wszechmocnemu elementowi (100)
  • Nowe elementy semantyczne HTML5 (101)
    • Element main (101)
    • Element
      (102)
    • Element
      (102)
    • Element
      (103)
    • Element
      (103)
    • Elementy
      i (103)
    • Elementy
      i (104)
    • Element
      (105)
    • Element
      (105)
    • Element
      (106)
    • Uwaga na temat elementów h1 - h6 (106)
  • Śródliniowe elementy semantyczne HTML5 (107)
    • Element (107)
    • Element (107)
    • Element (108)
  • Elementy języka HTML, które uległy dezaktualizacji (108)
  • Praktyczne wykorzystanie elementów strukturalnych HTML5 (109)
    • Rozsądne wybieranie elementów (109)
  • Standardy dostępności stron WCAG i WAI-ARIA (110)
    • WCAG (110)
    • Standard WAI-ARIA (111)
    • Zapamiętaj tylko jedną rzecz (111)
    • Krok dalej z ARIA (112)
  • Osadzanie elementów multimedialnych w HTML5 (112)
    • Dodawanie do stron internetowych filmów i dźwięków (113)
    • Znaczniki audio i video działają niemal identycznie (115)
  • Responsywne odtwarzacze filmów i ramki wewnętrzne (115)
  • Aplikacje sieciowe w trybie offline (116)
  • Podsumowanie (117)
  • Nikt nie wie wszystkiego (120)
  • Struktura reguł CSS (120)
  • Przydatne triki w CSS3 (121)
    • Układ wielokolumnowy w CSS3 dla projektu responsywnego (121)
  • Zawijanie tekstu (124)
    • Obcinanie tekstu (125)
    • Tworzenie poziomych przewijanych okienek (126)
  • Rozgałęzianie kodu CSS (128)
    • Zapytania o obsługę własności (128)
    • Łączenie warunków (129)
    • Biblioteka Modernizr (130)
  • Nowe selektory CSS3 i sposób ich wykorzystania (132)
    • Selektory atrybutów w CSS3 (132)
    • Szczegółowe selektory atrybutów CSS3 (133)
    • Pułapki związane z używaniem selektorów wartości atrybutów (135)
    • Za pomocą selektorów wartości atrybutów można wybierać identyfikatory i klasy zaczynające się od cyfr (136)
  • Strukturalne pseudoklasy CSS3 (136)
    • Selektor :last-child (137)
    • Selektory n-tego potomka (137)
    • Zasada działania selektorów n-tego potomka (138)
    • Selektory n-tego potomka w projektach responsywnych (141)
    • Selektor negacji (:not) (143)
    • Selektor :empty (144)
    • Formatowanie pierwszego wiersza akapitu bez względu na obszar roboczy (145)
  • Własności użytkownika i zmienne CSS (145)
  • Funkcja CSS calc (146)
  • Selektory, poziom 4. (147)
    • Pseudoklasa :has (147)
    • Jednostki zależne od rozmiaru obszaru roboczego (147)
  • Typografia sieciowa (148)
    • Reguła @font-face (149)
    • Odwołanie do fontów w regule @font-face (149)
    • Uwagi na temat reguły @font-face i projektów responsywnych (151)
  • Nowe formaty barw CSS3 i kanał alfa (152)
    • Format RGB (152)
    • Format HSL (152)
    • Kanały alfa (154)
    • Moduł kolorów poziomu 4. (154)
  • Podsumowanie (155)
  • Cienie tekstu w CSS3 (158)
    • Opuszczanie wartości rozmycia, gdy jest niepotrzebna (159)
    • Definiowanie wielu cieni dla tekstu (159)
  • Cienie elementów (159)
    • Cień wewnątrz elementu (160)
    • Definiowanie wielu cieni dla elementu (161)
    • Wartość spread (161)
  • Gradienty tła (162)
    • Liniowe gradienty tła (162)
    • Gradienty promieniste (165)
    • Gradienty responsywne (166)
  • Powtarzanie gradientu (167)
  • Gradientowe desenie tła (168)
  • Wiele obrazów tła jednocześnie (169)
    • Wymiary tła (170)
    • Własność background position (170)
    • Zbiorcza własność background (171)
  • Obrazy tła o wysokiej rozdzielczości (172)
  • Filtry CSS (172)
    • Dostępne filtry CSS (174)
    • Łączenie filtrów CSS (179)
  • Uwaga na temat wydajności CSS (179)
    • Uwagi na temat masek CSS i przycinania grafiki (180)
  • Podsumowanie (181)
  • Historia SVG w pigułce (185)
  • Grafika, która jest dokumentem (186)
    • Element główny SVG (187)
    • Przestrzeń nazw (188)
    • Elementy
    • Element (188)
    • Element (188)
    • Kształty SVG (189)
    • Ścieżki SVG (189)
  • Najpopularniejsze programy i usługi do tworzenia grafiki SVG (189)
    • Oszczędzaj czas dzięki usługom oferującym ikony SVG (190)
  • Wstawianie grafik SVG na strony internetowe (191)
    • Element (191)
    • Element
    • Ustawianie grafik SVG w tle elementów (192)
    • Krótka uwaga na temat kodowania danych w URI (194)
    • Generowanie sprite'ów graficznych (195)
  • Wstawianie dokumentów SVG bezpośrednio do kodu HTML (195)
    • Wielokrotne wykorzystywanie obiektów graficznych z symboli (196)
    • Osadzone grafiki SVG mogą mieć różne kolory w różnych kontekstach (197)
    • Wielokrotne wykorzystywanie obiektów graficznych ze źródeł zewnętrznych (198)
  • Możliwości każdej z metod wstawiania grafik SVG na strony internetowe (199)
    • Problemy z przeglądarkami (200)
  • Inne możliwości i dziwactwa SVG (201)
    • Animacje SMIL (201)
    • Stylizowanie grafik SVG za pomocą zewnętrznych arkuszy stylów (202)
    • Formatowanie grafik SVG za pomocą arkuszy wewnętrznych (203)
    • Animowanie grafik SVG za pomocą CSS (204)
  • Animowanie SVG za pomocą JavaScript (205)
    • Prosty przykład animacji na bazie biblioteki GreenSock (206)
  • Optymalizacja grafik SVG (207)
  • Filtry SVG (208)
  • Uwaga na temat zapytań medialnych w SVG (210)
    • Porady implementacyjne (211)
    • Dodatkowe źródła informacji (212)
  • Podsumowanie (212)
  • Czym są przejścia CSS3 i jak z nich korzystać? (216)
    • Rodzaje przejść (218)
    • Zbiorcza własność do definiowania przejść (218)
    • Przejścia różnych własności w różnych przedziałach czasowych (219)
    • Funkcje czasu (219)
    • Zabawne typy przejść dla stron responsywnych (221)
  • Transformacje dwuwymiarowe CSS3 (221)
    • scale (222)
    • translate (222)
    • rotate (225)
    • skew (226)
    • matrix (226)
    • Własność transform-origin (227)
  • Transformacje trójwymiarowe (229)
    • Wartość translate3d (232)
  • Animacje w CSS3 (236)
    • Własność animation-fill-mode (238)
  • Podsumowanie (239)
  • Formularze HTML5 (242)
  • Elementy formularzy HTML5 (243)
    • Atrybut placeholder (243)
    • Atrybut required (244)
    • Atrybut autofocus (244)
    • Atrybut autocomplete (246)
    • Atrybut list (i powiązany element datalist) (246)
  • Rodzaje kontrolek HTML5 (248)
    • Typ email (248)
    • Typ number (249)
    • Typ url (250)
    • Typ tel (252)
    • Typ search (253)
    • Typ pattern (253)
    • Typ color (254)
    • Kontrolki daty i godziny (254)
    • Typ range (257)
  • Wypełnienia dla starszych przeglądarek (258)
  • Formatowanie formularzy HTML5 za pomocą arkuszy CSS3 (259)
    • Oznaczanie pól wymaganych (262)
    • Wypełnianie tła (264)
  • Podsumowanie (265)
  • Oglądanie projektu w przeglądarce najszybciej jak to możliwe (268)
    • Wartości punktów kontrolnych powinny być ustalane w odniesieniu do projektu (268)
  • Oglądaj i testuj projekt w prawdziwych urządzeniach (269)
  • Na czym dokładnie polega stopniowe ulepszanie strony (270)
  • Wybór funkcji obsługiwanych przez różne przeglądarki (271)
    • Równość funkcjonalna, nie estetyczna (271)
    • Wybór obsługiwanych przeglądarek (271)
  • Stopniowanie funkcjonalności (272)
    • Implementacja warstw funkcjonalnych (272)
  • Łączenie punktów kontrolnych CSS i JavaScript (273)
  • Unikaj szkieletów CSS w produkcji (275)
  • Kodowanie pragmatycznych rozwiązań (275)
    • Kiedy odnośnik staje się przyciskiem (277)
  • Pisz jak najprostszy kod (278)
  • Ukrywanie, pokazywanie i wczytywanie treści na różnych ekranach (278)
    • Warstwę wizualną strony definiuj za pomocą CSS (279)
  • Sprawdzanie składni (280)
  • Wydajność (281)
  • Co szykuje przyszłość (282)
  • Podsumowanie (283)

i (188)