Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3

Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3 - Opis

Jeszcze dziesięć lat temu responsywność strony internetowej była traktowana jako ciekawostka. Dziś jest powszechnym standardem. Znane od dawna klasyczne technologie HTML i CSS wciąż zachowują świeżość i wyjątkową przydatność w tworzeniu nowoczesnych stron internetowych. Społeczności skupione wokół tych narzędzi starannie dbają o ich nieustanny rozwój, dzięki czemu za ich pomocą nadal można osiągać imponujące efekty i spełniać coraz wyższe standardy. Oznacza to, że każdy szanujący się programista front-endu powinien na bieżąco śledzić nowości i uczyć się korzystania z sukcesywnie pojawiających się funkcjonalności HTML i CSS.Ta książka jest kolejnym, uaktualnionym i uzupełnionym wydaniem lubianego podręcznika projektowania responsywnych stron internetowych. Omówiono w niej wszystkie nowości i ulepszenia z dziedziny projektowania responsywnych stron internetowych, w tym zapewnianie lepszej dostępności, fonty zmienne czy kontrola przewijania strony. Szczegółowo opisano moduł CSS Grid i mechanizm tworzenia układów Flexbox. Zaprezentowano wiele praktycznych informacji o SVG, wymogach dostępności, efektach w CSS, definiowaniu przejść, transformacji i animacji oraz włączaniu do kodu zapytań medialnych. Znakomitym uzupełnieniem treści są autorskie wskazówki i uwagi do programowania front-endu.Najważniejsze zagadnienia:dostosowywanie arkuszy stylów do potrzeb różnych urządzeńpisanie przejrzystego, szybkiego i bogatego semantycznie kodu HTMLgrafiki w formacie SVG w projektach responsywnychnajnowsze możliwości CSS: własności użytkownika, fonty zmienne i siatkaweryfikacja danych w (...) więcej HTML i inne przydatne funkcje formularzyfiltry, cienie, animacje i inne efekty wzbogacające interfejsWspółczesny HTML i CSS? Mogą więcej, niż myślisz! Spis treści: iO autorze 11O korektorach merytorycznych 13Przedmowa 15Rozdział 1. Podstawowe wiadomości o projektowaniu responsywnych stron internetowych 19 Panorama przeglądarek i urządzeń 20 Projekt responsywny - definicja 21 Projektowanie responsywnych stron internetowych w pigułce 21 Obsługa przeglądarek 22 Edytory tekstu 23 Narzędzia do wytwarzania oprogramowania 23 Pierwszy przykład projektu responsywnego 24 Podstawowy plik HTML 24 Okiełznać obrazy 27 Zapytania medialne wkraczają do akcji 31 Wady opisanego przykładu 36 Podsumowanie 36Rozdział 2. Znaczniki HTML 37 Prawidłowe rozpoczynanie strony HTML5 39 Znacznik doctype 39 Element HTML i atrybut lang 39 Kodowanie znaków 40 Pobłażliwy charakter znaczników HTML5 40 Rozsądne podejście do pisania kodu 41 Oddajmy cześć wszechmocnemu elementowi 42 Nowe elementy semantyczne HTML5 42 Element 43 Element 44 Element 44 Element 44 Element 45 Element 45 Element 45 Algorytm tworzenia zarysu dokumentu HTML5 46 Uwaga na temat elementów h1 - h6 47 Element div 47 Element p 48 Element blockquote 48 Elementy i 48 Elementy i 49 Element 50 Elementy semantyczne na poziomie tekstu 51 Element 51 Element 51 Element 51 Element 52 Element 52 Elementy języka HTML, które uległy dezaktualizacji 53 Praktyczne wykorzystanie elementów strukturalnych HTML5 53 Standardy dostępności stron WCAG i WAI-ARIA 54 WCAG 54 Standard WAI-ARIA 55 Osadzanie elementów multimedialnych w HTML5 56 Dodawanie do stron internetowych filmów i dźwięków 57 Responsywne odtwarzacze filmów i ramki wewnętrzne 59 Podsumowanie 60 Ćwiczenie 60 Rozdział 3. Zapytania medialne: obsługa zróżnicowanych obszarów roboczych 63 Znacznik meta viewport 66 Dlaczego zapytania medialne są potrzebne do budowy układów responsywnych 68 Podstawowa logika warunkowa w CSS 68 Składnia zapytań medialnych 69 Zapytania medialne w znaczniku 70 Importowanie zapytań medialnych za pomocą dyrektywy @import 70 Zapytania medialne w arkuszach stylów 70 Odwracanie logiki zapytań medialnych 71 Łączenie zapytań medialnych 71 Zestawienia zapytań medialnych 71 Standardowe zapytania medialne 72 Co można sprawdzać za pomocą zapytań medialnych 72 Modyfikowanie projektu strony za pomocą zapytań medialnych 73 Zaawansowane zagadnienia dotyczące zapytań medialnych 76 Metody organizacji zapytań medialnych 77 Zasadność dzielenia zapytań medialnych na wiele plików 77 Śródliniowe zagnieżdżanie zapytań medialnych 78 Łączyć zapytania medialne w bloki czy rozpraszać je w różnych miejscach pliku 78 Zapytania medialne - poziom 4. 80 Funkcje interakcyjne 80 Funkcja doboru preferowanego schematu kolorów 82 Podsumowanie 83Rozdział 4. Układy płynne, flexbox i obrazy responsywne 85 Konwertowanie układu stałego na elastyczny 86 Do czego służy model flexbox 90 Flexbox - wprowadzenie 92 Wyboista droga do flexboksa 92 Nie wpisuj przedrostków ręcznie 92 Podstawy flexboksa 94 Różne rodzaje układu flexboksa w różnych zapytaniach medialnych 98 Własność inline-flex 98 Wyrównywanie treści we flexboksie 99 Lepka stopka 107 Zmienianie kolejności elementów 108 Zawijanie z flexboksem 113 Podsumowanie wiadomości o flexboksie 116 Obrazy responsywne 116 Wewnętrzny problem obrazów responsywnych 117 Proste przełączanie rozdzielczości za pomocą atrybutu srcset 118 Zaawansowane techniki przełączania obrazów za pomocą atrybutu srcset 118 Prezentowanie obrazów za pomocą elementu picture 120 Podsumowanie 121Rozdział 5. Układy oparte na siatce CSS 123 CSS Grid i problemy, które rozwiązuje 124 Podstawowa składnia siatki 124 Pojęcia i terminy dotyczące siatki 125 Tworzenie siatki 125 Jawne i niejawne definicje rozmieszczenia 130 Rozmieszczanie i definiowanie rozmiaru elementów siatki 133 Własność gap 135 Wartość repeat 136 Jednostki fr 136 Rozmieszczanie elementów w siatce 136 Wartość span 137 Wartość dense 137 Nazwane linie siatki 138 Własność grid-template-areas 141 Zastosowanie nabytych umiejętności 142 Wartości auto-fit i auto-fill 143 Funkcja minmax() 145 Składnia zbiorcza 147 Składnia grid-template 147 Składnia grid 148 Podsumowanie 150Rozdział 6. CSS3: selektory, typografia, tryby kolorów i nowe funkcje 153 Selektory, jednostki i funkcje 154 Struktura reguł CSS 154 Pseudoelementy i pseudoklasy 155 Nowe selektory CSS3 i sposób ich wykorzystania 156 Strukturalne pseudoklasy CSS3 160 Jednostki zależne od rozmiaru obszaru roboczego (vmax, vmin, vh, vw) 170 Funkcja CSS calc 171 Własności użytkownika i zmienne CSS 171 Rozgałęzianie kodu CSS przy użyciu @supports 175 Typografia sieciowa 177 Fonty systemowe 177 Reguła @font-face 178 Odwołanie do fontów w regule @font-face 179 Optymalizacja ładowania fontów przy użyciu font-display 180 Fonty zmienne 182 Nowe formaty barw CSS3 i kanał alfa 187 Format RGB 187 Format HSL 188 Podsumowanie 190Rozdział 7. Spektakularny wygląd i CSS3 191 Cienie tekstu w CSS3 192 Opuszczanie wartości rozmycia, gdy jest niepotrzebna 193 Cienie elementów 194 Cień wewnątrz elementu 194 Definiowanie wielu cieni dla elementu 194 Wartość spread 195 Gradienty tła 196 Liniowe gradienty tła 197 Gradienty promieniste 199 Gradienty responsywne 200 Powtarzanie gradientu 201 Gradientowe desenie tła 202 Wiele obrazów tła jednocześnie 204 Wymiary tła 204 Własność background position 205 Zbiorcza własność background 206 Obrazy tła o wysokiej rozdzielczości 206 Filtry CSS 207 Dostępne filtry CSS 208 Łączenie filtrów CSS 214 Uwaga na temat wydajności CSS 214 CSS clip-path 215 Własność clip-path z adresem URL 216 Podstawowe kształty CSS 216 Animowana ścieżka przycinania 220 mask-image 222 Przykład mask-image 222 mix-blend-mode 224 Podsumowanie 224Rozdział 8. Grafika SVG niezależna od rozdzielczości ekranu 227 Historia SVG w pigułce 229 Grafika, która jest dokumentem 230 Element główny SVG 231 Przestrzeń nazw 232 Elementy i 232 Element 233 Element 233 Kształty SVG 233 Ścieżki SVG 233 Najpopularniejsze programy i usługi do tworzenia grafiki SVG 234 Oszczędzaj czas dzięki usługom oferującym ikony SVG 234 Wstawianie grafik SVG na strony internetowe 235 Element 235 Element 236 Ustawianie grafik SVG w tle elementów 236 Krótka uwaga na temat kodowania danych w URI 237 Generowanie sprite'ów graficznych 238 Wstawianie dokumentów SVG bezpośrednio do kodu HTML 238 Wielokrotne wykorzystywanie obiektów graficznych z symboli 239 Osadzone grafiki SVG mogą mieć różne kolory w różnych kontekstach 241 Zmiana koloru grafik SVG za pomocą CSS242 Wielokrotne wykorzystywanie obiektów graficznych z zewnętrznych źródeł 244 Możliwości każdej z metod wstawiania grafik SVG na strony internetowe 245 Problemy z przeglądarkami 246 Inne możliwości i dziwactwa SVG 246 Animacje SMIL 247 Stylizowanie grafik SVG za pomocą zewnętrznych arkuszy stylów 248 Formatowanie grafik SVG za pomocą arkuszy wewnętrznych 249 Animowanie grafik SVG za pomocą CSS 250 Animowanie SVG za pomocą JavaScriptu 251 Prosty przykład animacji na bazie biblioteki GreenSock 252 Optymalizacja grafik SVG 253 Filtry SVG 254 Uwaga na temat zapytań medialnych w SVG 257 Porady implementacyjne 258 Podsumowanie 259 Dodatkowe źródła informacji 259Rozdział 9. Przejścia, transformacje i animacje 261 Czym są przejścia CSS3 i jak z nich korzystać? 262 Rodzaje przejść 264 Zbiorcza własność do definiowania przejść 265 Przejścia różnych własności w różnych przedziałach czasowych 266 Funkcje czasu 266 Transformacje dwuwymiarowe CSS3 268 scale 270 translate 270 rotate 273 skew 274 matrix 274 Własność transform-origin 275 Transformacje trójwymiarowe 277 Wartość translate3d 280 Transformacje w metodzie stopniowego ulepszania 282 Animacje w CSS3 284 Własność animation-fill-mode 287 Ćwiczenia 288 Podsumowanie 289Rozdział 10. Formularze w HTML5 i CSS3 291 Formularze HTML5 292 Elementy formularzy HTML5 292 Atrybut placeholder 294 Stylizacja wskaźnika wstawiania własnością caret-color 295 Atrybut required 295 Atrybut autofocus 296 Atrybut autocomplete 297 Atrybut list (i powiązany element datalist) 298 Rodzaje kontrolek HTML5 300 Typ email 300 Typ number 301 Typ url 303 Typ tel 305 Typ search 305 Typ pattern 306 Typ color 307 Kontrolki daty i godziny 308 Typ time 310 Typ range 311 Formatowanie formularzy HTML5 za pomocą arkuszy CSS3 312 Oznaczanie pól wymaganych 315 Wypełnianie tła 317 Podsumowanie 318Rozdział 11. Dodatkowe techniki i dobre rady na pożegnanie 319 Zawijanie długich adresów URL 320 Obcinanie tekstu 321 Tworzenie poziomych przewijanych okienek 322 Poziome przewijane okienka w Grid 325 CSS Scroll Snap 325 Własność scroll-snap-type 326 Własność scroll-snap-align 327 Własność scroll-padding 327 Gładkie przewijanie za pomocą scroll-behavior 330 Łączenie punktów kontrolnych CSS i JavaScript 331 Oglądanie projektu w przeglądarce najszybciej jak to możliwe 334 Oglądaj i testuj projekt w prawdziwych urządzeniach 334 Na czym dokładnie polega stopniowe ulepszanie strony 335 Wybór funkcji obsługiwanych przez różne przeglądarki 336 Równość funkcjonalna, nie estetyczna 336 Wybór obsługiwanych przeglądarek 336 Stopniowanie funkcjonalności 337 Unikaj frameworków CSS w produkcji 337 Ukrywanie, pokazywanie i wczytywanie treści na różnych ekranach 338 Sprawdzanie składni 339 Wydajność 341 Narzędzia do mierzenia wydajności 341 Co szykuje przyszłość 343 Podsumowanie 343 O autorze: Ben Frain — projektant stron internetowych, starszy programista frontendowy w firmie Bet365. Kiedyś był niedocenionym (i skromnym) aktorem telewizyjnym. Napisał też cztery równie niedocenione (jego zdaniem) scenariusze i wciąż żywi (słabnącą) nadzieję, że w końcu uda mu się sprzedać choćby jeden z nich. W oczekiwaniu na ten piękny dzień pisze książki o tajnikach projektowania stron WWW. mniej