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!
Rozdziały:
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
- 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
- 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
