Szczegóły ebooka

Responsive Web Design. Nowoczesne strony WWW na przykładach

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

  • Tytuł: Responsive Web Design. Nowoczesne strony WWW na przykładach
  • Autor: Frahaan Hussain
  • Tytuł oryginału: Responsive Web Design by Example: Embrace responsive design with HTML5, CSS3, JavaScript, jQuery and Bootstrap 4
  • Tłumaczenie: Jakub Hubisz
  • ISBN: 978-83-283-4877-6, 9788328348776
  • Data wydania: 2019-02-19
  • Format: Ebook
  • Identyfikator pozycji: reswed
  • Wydawca: Helion