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!

Osoby które kupowały "Responsive Web Design. Nowoczesne strony WWW na przykładach", wybierały także:

• Responsive i Bootstrap. Kurs video. Poziom pierwszy. BÅ‚yskawiczne tworzenie responsywnych serwisów WWW 89,00 zÅ‚, (35,60 zÅ‚ -60%)
• Vue.js 2. Wprowadzenie dla profesjonalistów 99,00 zÅ‚, (49,50 zÅ‚ -50%)
• Tablice informatyczne. Bootstrap 16,98 zÅ‚, (8,49 zÅ‚ -50%)
• Platforma Node.js. Przewodnik webdevelopera. Wydanie III 58,98 zÅ‚, (29,49 zÅ‚ -50%)
• Bootstrap. Praktyczne projekty 34,90 zÅ‚, (17,45 zÅ‚ -50%)

Spis treści

Responsive Web Design. Nowoczesne strony WWW na przykładach eBook -- spis treści

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