Деталі електронної книги

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

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

Ben Frain

Eлектронна книга

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(191)
      • 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)

  • Назва: Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3. Wydanie II
  • Автор: Ben Frain
  • Оригінальна назва: Responsive Web Design with HTML5 and CSS3, 2nd Edition
  • Переклад: Łukasz Piwko
  • ISBN: 978-83-283-2344-5, 9788328323445
  • Дата видання: 2016-07-01
  • Формат: Eлектронна книга
  • Ідентифікатор видання: trash2
  • Видавець: Helion