Responsive Web Design. Nowoczesne strony WWW na przykładach - ebook

Aplikacje internetowe, które dobrze działają i ładnie wyglądają wyłącznie na ekranach komputerów osobistych, już jakiś czas temu zostały uznane za przestarzałe. Przejrzysty blog, piękna strona z portfolio czy ciekawy profil z galerią zdjęć w portalu społecznościowym muszą doskonale wyglądać na urządzeniach z ekranami o rozmaitych rozmiarach i proporcjach oraz różnej rozdzielczości. Wzrost liczby urządzeń wyposażanych w przeglądarki jest jednym z sygnałów, że internet się zmienia. Projekty responsywne są odpowiedzią na tego rodzaju zmiany. Projektant aplikacji, który ma ambicję podążać za wymogami współczesnego internetu, musi sprawnie realizować takie projekty.

Ta książka jest szybkim i przystępnym przewodnikiem, dzięki któremu zdobędziesz wiedzę o sposobach włączania responsywności do procesu projektowania i budowania różnorodnych aplikacji. Opanujesz również dobre praktyki tworzenia stron WWW oraz ogólne zasady poprawnego programowania. Poszczególne przykłady bazują na powszechnie znanych technologiach i językach, takich jak HTML, CSS i JavaScript, a także na coraz popularniejszym frameworku Bootstrap. Prędko wykorzystasz obfitość zawartej tu wiedzy o wszelkich aspektach responsywności oraz o korzystaniu z Bootstrapa w projektach i programowaniu aplikacji WWW. Nauczysz się też dobierać frameworki najlepiej pasujące do specyfiki aktualnie tworzonego projektu. W efekcie Twoje strony staną się profesjonalne, kreatywne i prawdziwie responsywne.

Dzięki tej książce:

• dowiesz się, dlaczego obecnie strony powinny być tworzone jako responsywne
• nauczysz się personalizować frameworki i tworzyć szablony wielokrotnego użytku
• zaczniesz budować semantyczną strukturę strony z elementów HTML5
• nauczysz się określania osobowości strony za pomocą CSS3
• będziesz zawsze wybierać odpowiednie frameworki
• zaimplementujesz funkcje Bootstrapa na stronie

Strona responsywna: nowoczesna, dynamiczna, dostosowana do potrzeb!

 

O autorze 9

 

O korektorze merytorycznym 10

Wstęp 11

Rozdział 1. Czym jest projektowanie responsywnych witryn 15

• Filozofia responsywnego projektu 16
• Zasady responsywnego projektu 17
  • Responsywny a adaptacyjny 17
  • Punkty przełamania 17
  • Jednostki relatywne 18
  • Wartości maksymalne i minimalne 19
  • Obiekty zagnieżdżone 19
  • Najpierw komputery osobiste czy urządzenia mobilne? 20
  • Bitmapy kontra wektory 20
• Responsywne siatki i kolumny 21
• Podsumowanie 22

Rozdział 2. Czym jest Bootstrap i dlaczego z niego korzystamy 23

• Krótka historia Bootstrapa 23
• Po co korzystać z Bootstrapa 24
  • Dlaczego Bootstrap? 25
• System siatki Bootstrapa 25
  • Podstawy 26
  • Przykłady wykorzystania 27
  • Końcowe informacje o siatce 36
• Komponenty Bootstrapa 36
• Podsumowanie 37

Rozdział 3. Szablon wielokrotnego użytku 39

• Czym jest szablon wielokrotnego użytku 39
• Wymagania odnośnie do środowiska programistycznego 43
• Tworzenie naszego szablonu wielokrotnego użytku 43
  • Prosty przykład z wykorzystaniem Bootstrapa 44
  • Wyłączanie 45
  • Rozszerzanie nagłówka 47
  • Rozszerzanie stopki 49
  • Rozszerzanie głównej zawartości strony 50
• Odnajdywanie błędów 51
  • Błędy PHP 51
  • Style CSS nie działają 51
• Podsumowanie 52

Rozdział 4. Tworzenie sekcji z wprowadzeniem 53

• Czym jest jednostronicowa witryna 53
  • Przykłady witryn jednostronicowych 54
• Implementacja naszej sekcji wprowadzającej 57
  • Czym jest jumbotron? 57
  • Kotwiczenie sekcji w pasku nawigacji 67
  • Animowanie kotwiczenia z paska nawigacji 69
  • Ustawienie nagłówka na górze strony 74
  • Zmiana aktualnie wybranego przycisku 76
• Częste pułapki 77
  • Różnica w wysokości paska nawigacji na urządzeniach mobilnych 77
  • Kotwiczenie przycisków paska nawigacyjnego 78
• Podsumowanie 78

Rozdział 5. Tworzenie generycznej sekcji wielokrotnego użytku 79

• Różne sekcje na witrynach jednostronicowych 80
  • Przykłady sekcji witryn jednostronicowych 80
• Implementacja naszej generycznej sekcji wielokrotnego użytku 84
  • Co będzie zawierała sekcja o zespole 84
  • Stworzenie kontenera dla sekcji 85
  • Kotwiczenie sekcji w pasku nawigacji 87
  • Dodanie zdjęć zespołu 88
  • Tekst z informacjami o członku zespołu 95
  • Linki do mediów społecznościowych 97
• Podsumowanie 99

Rozdział 6. Tworzenie sekcji z formularzem kontaktowym 101

• Przykłady sekcji kontaktowych na witrynach jednostronicowych 101
  • Richman 102
  • Bueno 103
  • This also 104
  • Design museum 105
  • Choice screening 106
• Implementacja sekcji kontaktowej 107
  • Co będzie zawierała sekcja kontaktowa? 107
  • Tworzenie kontenera dla sekcji kontaktowej 107
  • Zakotwiczenie sekcji kontaktowej na pasku nawigacji 110
  • Dodanie formularza kontaktowego 110
• Podsumowanie 116

Rozdział 7. Tworzenie strony głównej bloga 117

• Przykłady blogów 117
  • TechCrunch 118
  • Gawker 119
  • Microsoft News 120
  • Johnny Cupcakes 121
  • TESCO Living 122
• Przygotowanie projektu podstawowego 123
  • Usuwanie wszystkich niepotrzebnych plików 123
  • Refaktoryzacja pliku index.css 123
  • Refaktoryzacja pliku index.php 123
  • Refaktoryzacja pliku HEADER.php 124
  • Refaktoryzacja pliku index.js 125
• Jak będzie wyglądała strona główna bloga? 125
• Implementacja strony głównej bloga 125
  • Implementacja karuzeli 126
  • Wskaźniki karuzeli 132
• Implementacja wpisów na blogu 135
  • Dodawanie kart 136
• Podsumowanie 140

Rozdział 8. Tworzenie strony z wpisem na blogu 141

• Przykłady wpisów na blogach 141
  • TechCrunch 142
  • Gawker 143
  • Microsoft News 144
  • Johnny Cupcakes 145
  • TESCO Living 146
• Co znajdzie się na naszej stronie wpisu? 147
  • Z czego składa się wpis? 147
  • Z czego składa się panel na popularne i rekomendowane wpisy? 147
  • Implementacja strony wpisu na blogu 148
  • Implementacja głównej zawartości wpisu 149
• Implementacja panelu bocznego 159
• Dalsza rozbudowa bloga 164
• Podsumowanie 165

Rozdział 9. Dodanie panelu bocznego dla sieci społecznościowej 167

• Przykłady paneli bocznych w sieciach społecznościowych 167
  • Facebook 168
  • Google+ 169
  • YouTube 170
  • Minds 171
  • Myspace 172
• Z czego będzie składał się nasz boczny panel? 173
  • Implementacja panelu bocznego 173
• Podsumowanie 182

Rozdział 10. Tworzenie strony głównej dla naszej sieci społecznościowej 183

• Przykłady osi czasu w sieciach społecznościowych 183
  • Facebook 184
  • Google+ 185
  • YouTube 186
  • Twitter 187
  • Medium 188
• Z czego będzie się składała nasza oś czasu? 189
• Implementacja osi czasu 189
  • Implementacja sekcji wprowadzania 189
  • Implementacja sekcji z osią czasu 191
  • Dodanie głównej zawartości wiadomości 197
  • Następny krok i rozszerzenie osi czasu 199
• Podsumowanie 199

Rozdział 11. Tworzenie strony z profilem użytkownika 201

• Przykłady profili w sieciach społecznościowych 201
• Z czego będzie się składała nasza strona profilowa 202
• Implementacja jumbotrona 202
  • Tworzenie podstawowego jumbotrona z banerem 203
  • Dodanie tekstu 205
  • Implementacja małych kart 208
  • Implementacja dużych kart 209
• Podsumowanie 211

Rozdział 12. Wyświetlanie miniatur naszych zdjęć 213

• Przykłady galerii zdjęć 213
  • Pinterest 214
  • 9GAG 215
  • Google Photos 216
  • GIPHY 217
  • Vent 218
• Z czego będzie składała się strona główna naszej galerii zdjęć? 219
• Implementacja miniatur 219
  • Dodanie tytułu strony głównej 219
  • Dodawanie miniatur zdjęć 220
  • Dodanie paginacji 222
• Podsumowanie 226

Rozdział 13. Otwieranie zdjęć z wykorzystaniem lightboxa 227

• Przykłady lightboxa 227
  • Pinterest 228
  • Google Photos 229
  • Dan Kennedy 230
  • Salter 231
• Arild Danielsen Photographer 232
• Z czego będzie składał się nasz lightbox? 233
• Implementacja lightboxa 233
  • Dodanie prostego modala 233
  • Dodanie obrazu do modala 235
  • Dynamiczne wyświetlanie zawartości modala 238
• Podsumowanie 240

Skorowidz 241