RESPONSIVE WEB DESIGN NOWOCZESNE STRONY WWW NA PRZYKŁADACH

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