Responsive Web Design. Nowoczesne strony WWW na przykładach Katowice

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! 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 O autorze: Frahaan Hussain jest młodym programistą. Prowadzi własną firmę, Sonar Systems, znaną z licznych gier oraz frameworków open source, takich jak Cocos Helper i PHP Web Framework. Przez dłuższy czas pracował dla Accenture, największej na świecie firmy konsultingowej. Jego bogate doświadczenie pozwoliło mu w praktyce poznać różne niuanse cyklu życia oprogramowania, a także dość nieoczywiste potrzeby związane z pracą programistów.