Responsive Web Design. Nowoczesne strony WWW na przykładach

Description

Responsywne strony WWW to dziś standard, do którego dążą wszyscy projektanci stron. W świecie smartfonów, tabletów, laptopów, telewizorów z dostępem do sieci oraz komputerów stacjonarnych stworzenie strony, która będzie dobrze się prezentowała i zachowa swoją funkcjonalność na każdym z urządzeń, to klucz do sukcesu! Ta książka to doskonałe źródło informacji na temat responsywnych stron internetowych — zacznij je projektować już teraz! W trakcie lektury poznasz zalety i wady trzech najlepszych szkieletów do błyskawicznego tworzenia stron WWW. To Bootstrap, Skeleton oraz Foundation Zurb. Dodatkowo zapoznasz się z preprocesorami CSS oraz zaznajomisz się z nowościami wprowadzonymi w CSS3. Po opanowaniu wiedzy zawartej w kolejnych rozdziałach z łatwością zbudujesz przykładową witrynę produktu na podstawie szkieletu Bootstrap, portfolio na podstawie Skeletona oraz responsywną stronę firmową na podstawie Foundation Zurb. Dzięki praktycznemu podejściu do tematu błyskawicznie przyswoisz cenną wiedzę na temat tworzenia responsywnych stron WWW. Książka ta jest doskonałą lekturą dla wszystkich projektantów oraz pasjonatów tworzenia stron WWW! Sięgnij po książkę i dowiedz się, jak: – tworzyć elastyczne arkusze stylów CSS za pomocą preprocesorów – zbudować responsywną stronę produktu za pomocą szkieletu Bootstrap – wykorzystać możliwości Foundation Zurb – stworzyć nowoczesną stronę, prezentującą się idealnie na różnych urządzeniach Spis treści......Page 2 O autorze......Page 8 O recenzentach......Page 10 Zawartość książki......Page 12 Czas na działanie......Page 13 Zrób to sam......Page 14 Piractwo......Page 15 Rozdział 1. Koncepcja RWD......Page 16 Metaznacznik viewport i zapytania medialne CSS3......Page 17 Skalowalne obrazy w elemencie picture......Page 19 Dowiedz się więcej o HTML5 i CSS3......Page 22 Po co używać systemów?......Page 23 Kto używa tych systemów?......Page 25 Przeglądarki internetowe......Page 29 Elastyczne skryptozakładki......Page 30 Krótkie wprowadzenie do preprocesorów CSS......Page 31 LESS......Page 32 Sass, czyli Syntactically Awesome Stylesheets......Page 38 Więcej o preprocesorach CSS......Page 40 Co utworzymy w tej książce?......Page 41 Podsumowanie......Page 42 Rozdział 2. Tworzenie elastycznego portfolio przy użyciu systemu Skeleton......Page 44 Co zawiera Skeleton?......Page 45 Początkowy dokument HTML......Page 46 Skalowalna siatka......Page 47 Zwijanie kontenera......Page 48 Zapytania medialne......Page 49 Style przycisków......Page 50 Style formularzy......Page 51 Ikony Apple’a......Page 52 Jak ma wyglądać budowana strona?......Page 53 Tworzenie dokumentu w systemie Skeleton......Page 55 Czas na działanie — dodawanie nowego pliku CSS......Page 56 Dodawanie własnych fontów......Page 57 Przygotowywanie obrazów......Page 58 Ikony mediów społecznościowych......Page 59 Czas na działanie — sprite’y......Page 60 Ikony kontaktowe......Page 61 Atrybuty danych HTML5......Page 62 Czas na działanie — konstruowanie dokumentu HTML......Page 63 Podsumowanie......Page 68 Rozdział 3. Ulepszanie strony portfolio przy użyciu CSS3......Page 70 Model polowy CSS......Page 71 Własność CSS3 box-sizing......Page 72 Piksele......Page 73 Jednostka em......Page 75 Ustawianie rodziny fontów......Page 77 Czas na działanie — ustawianie rodziny fontów nagłówków......Page 78 Czas na działanie — definiowanie stylów nagłówka......Page 79 Selektor dziecka......Page 80 Selektor przylegającego elementu siostrzanego......Page 81 Ogólny selektor elementu siostrzanego......Page 82 Pseudoklasa CSS3 :nth-child......Page 83 Style miniatur i podpisów......Page 84 Czas na działanie — definiowanie stylów miniatur i podpisów......Page 85 Przekształcenia dwuwymiarowe CSS......Page 89 Funkcja translate()......Page 90 Wartości przejść CSS3......Page 92 Czas na działanie — zmiana obrazu po najechaniu kursorem......Page 93 Filtrująca nawigacja po stronie......Page 96 Czas na działanie — tworzenie filtra portfolio......Page 97 Stopka......Page 98 Czas na działanie — formatowanie stopki......Page 99 Definiowanie stylów dla mniejszych ekranów......Page 104 Czas na działanie — rozmiar obszaru widoku poniżej 960 pikseli......Page 105 Czas na działanie — rozmiar obszaru widoku od 767 do 480 pikseli......Page 106 Czas na działanie — rozmiar obszaru widoku poniżej 480 pikseli......Page 108 Testowanie strony w różnych rozmiarach obszaru widoku......Page 110 Podsumowanie......Page 112 Rozdział 4. Tworzenie strony produktu przy użyciu systemu Bootstrap......Page 114 Czas na działanie — przygotowywanie systemu Bootstrap......Page 115 Przygotowywanie grafik......Page 116 Czas na działanie — instalowanie aplikacji CrunchApp......Page 118 Tworzenie plików LESS......Page 120 Czas na działanie — tworzenie nowego pliku LESS w CrunchAppie......Page 121 Kompilowanie kodu LESS na standardowy CSS......Page 122 Czas na działanie — dodawanie plików LESS do CrunchAppa i kompilowanie ich na CSS......Page 123 Składnia reguły @font-face......Page 124 Formaty fontów dla różnych przeglądarek internetowych......Page 125 Czas na działanie — definiowanie nowego fontu przy użyciu reguły @font-face......Page 126 Siatka systemu Bootstrap......Page 127 Czas na działanie — tworzenie nowego pliku LESS do przechowywania zapytań medialnych CSS3......Page 128 Tworzenie nawigacji w systemie Bootstrap......Page 129 Tworzenie dokumentów HTML......Page 130 Czas na działanie — tworzenie podstawowych dokumentów HTML5......Page 131 Czas na działanie — budowa struktury HTML treści strony głównej......Page 135 Treść strony galerii......Page 139 Czas na działanie — definiowanie struktury treści strony galerii......Page 140 Czas na działanie — definiowanie struktury treści strony kontaktowej......Page 142 Czas na działanie — definiowanie struktury treści strony O nas......Page 146 Czas na działanie — definiowanie struktury treści strony o zasadach korzystania......Page 148 Podsumowanie......Page 149 Rozdział 5. Ulepszanie strony produktu przy użyciu CSS3 i LESS......Page 150 Czas na działanie — definiowanie zmiennych......Page 151 Czas na działanie — definiowanie własnych domieszek LESS......Page 153 Funkcje LESS do modyfikacji kolorów......Page 154 Pojęcie zakresu......Page 155 Czas na działanie — dodawanie ogólnych reguł stylistycznych......Page 156 Pozbywanie się przedrostków firmowych......Page 159 Style przycisków......Page 160 Czas na działanie — zmienianie stylów przycisków systemu Bootstrap......Page 161 Czemu te przyciski są takie duże?......Page 162 Czas na działanie — dodawanie stylów nagłówka witryny......Page 163 Czas na działanie — dodawanie stylów stopki......Page 166 Czas na działanie — formatowanie stylu sekcji powitalnej......Page 169 Sekcja wezwania do działania......Page 170 Sekcja galerii......Page 171 Czas na działanie — definiowanie stylu sekcji galerii......Page 172 Czas na działanie — definiowanie stylu sekcji referencji......Page 173 Czas na działanie — formatowanie stylu pola adresu e-mail......Page 174 Strona galerii......Page 175 Czas na działanie — dostosowywanie stylów tytułu strony......Page 177 Strona kontaktowa......Page 178 Czas na działanie — dostosowywanie stylów strony kontaktowej......Page 180 Strona O nas......Page 181 Zapewnianie dobrego wyglądu strony w różnych urządzeniach......Page 183 Czas na działanie — poprawianie wyglądu strony w oknach o szerokości do 767 pikseli......Page 185 Czas na działanie — poprawianie wyglądu strony w oknach o szerokości do 480 pikseli......Page 189 Usuwanie niepotrzebnych reguł stylistycznych......Page 192 Podsumowanie......Page 194 Rozdział 6. Elastyczna strona firmowa na bazie systemu Foundation......Page 196 Gem Foundation......Page 197 Czas na działanie — instalowanie systemu Foundation i konfiguracja nowego projektu......Page 198 Składnie Sassa i SCSS......Page 199 Czas na działanie — instalowanie edytora Sublime Text i włączanie kolorowania składni SCSS......Page 200 Czas na działanie — tworzenie arkuszy stylów SCSS, aby nie utrudniać obsługi systemu......Page 202 Konfiguracja projektu Compassa......Page 203 Czas na działanie — konfiguracja ścieżki projektu w pliku config.rb......Page 205 Czas na działanie — obserwowanie zmian w arkuszach stylów SCSS......Page 206 Przygotowywanie obrazów......Page 207 Siatka......Page 208 Style interfejsu użytkownika......Page 211 Wtyczka do jQuery Orbit......Page 212 Czas na działanie — modyfikowanie podstawowego dokumentu HTML......Page 213 Czas na działanie — tworzenie treści strony głównej......Page 217 Czas na działanie — budowa struktury HTML strony Usługi......Page 224 Strona z cennikiem......Page 229 Czas na działanie — budowa struktury HTML strony z cennikiem......Page 230 Czas na działanie — budowa struktury HTML strony O nas......Page 235 Czas na działanie — budowa struktury HTML strony kontaktowej......Page 239 Podsumowanie......Page 243 Rozdział 7. Rozszerzanie systemu Foundation......Page 244 Czas na działanie — włączanie monitorowania projektu......Page 245 Wprowadzenie do funkcji kolorów Sassa......Page 246 Czas na działanie — dostosowywanie zmiennych Sassa dotyczących kolorów systemu Foundation......Page 247 Własne rodziny fontów......Page 249 Czas na działanie — dodawanie własnych rodzin fontów przy użyciu domieszki Compassa......Page 250 Czas na działanie — formatowanie sekcji nagłówkowej......Page 253 Wprowadzenie do funkcji pomocniczych Compassa dotyczących sprite’ów......Page 254 Stopka......Page 255 Czas na działanie — formatowanie stylu stopki......Page 256 Wprowadzenie do selektorów strukturalnych CSS3......Page 260 Strona główna......Page 261 Czas na działanie — formatowanie strony głównej......Page 262 Do boju......Page 269 Strona Usługi......Page 271 Czas na działanie — formatowanie strony o usługach......Page 272 Strona z cennikiem......Page 277 Czas na działanie — formatowanie stylu strony z cennikami......Page 278 Czas na działanie — formatowanie stylu stron O nas i Kontakt......Page 281 Czas na działanie — czynności końcowe......Page 283 Testowanie witryny......Page 285 Książki......Page 286 Internet......Page 287 Skorowidz......Page 288