Responsive Web Design. Nowoczesne strony WWW na przykładach 9788324691937 [PDF]

Zitiervorschau

Spis treści O autorze

9

O recenzentach

11

Przedmowa

13

Zawartość książki Co trzeba umieć? Dla kogo jest ta książka? Zastosowane konwencje Czas na działanie Quiz Zrób to sam Przykłady kodu Errata Piractwo

13 14 14 14 14 15 15 16 16 16

Rozdział 1. Koncepcja RWD

17

Podstawowy projekt elastyczny Metaznacznik viewport i zapytania medialne CSS3 Ograniczenia technik elastycznych Skalowalne obrazy w elemencie picture Dowiedz się więcej o HTML5 i CSS3 Wprowadzenie do systemów RWD Po co używać systemów? Kto używa tych systemów? Wady Narzędzia potrzebne do budowy elastycznych stron internetowych Przeglądarki internetowe Edytory kodu Elastyczne skryptozakładki

18 18 20 20 23 24 24 26 30 30 30 31 31

Spis treści

Krótkie wprowadzenie do preprocesorów CSS Kompilatory kodu preprocesorów CSS LESS Sass, czyli Syntactically Awesome Stylesheets Więcej o preprocesorach CSS Materiały do nauki LESS Materiały do nauki Sassa Co utworzymy w tej książce? Podsumowanie

Rozdział 2. Tworzenie elastycznego portfolio przy użyciu systemu Skeleton Podstawy systemu Skeleton Czas na działanie — tworzenie katalogu roboczego i pobieranie systemu Skeleton Co zawiera Skeleton? Początkowy dokument HTML Skalowalna siatka Zwijanie kontenera Zapytania medialne Style typograficzne Style przycisków Style formularzy Ikony Apple’a Szablon PSD Jak ma wyglądać budowana strona? Nawigacja Efekt hover Tworzenie dokumentu w systemie Skeleton Czas na działanie — dodawanie nowego pliku CSS Dodawanie własnych fontów Czas na działanie — osadzanie fontów z serwisu Google Fonts Przygotowywanie obrazów Ikony mediów społecznościowych Czas na działanie — sprite’y Ikony kontaktowe Elementy HTML5 Atrybuty danych HTML5 Czas na działanie — konstruowanie dokumentu HTML Podsumowanie

Rozdział 3. Ulepszanie strony portfolio przy użyciu CSS3 Model polowy CSS Własność CSS3 box-sizing Czas na działanie — definiowanie własności box-sizing Jednostki miary CSS Piksele Jednostka em Procenty

4

32 33 33 39 41 42 42 42 43

45 46 46 46 47 48 49 50 51 51 52 53 54 54 56 56 56 57 58 58 59 60 61 62 63 63 64 69

71 72 73 74 74 74 76 78

Spis treści

Ustawianie rodziny fontów Czas na działanie — ustawianie rodziny fontów nagłówków Formatowanie nagłówka Czas na działanie — definiowanie stylów nagłówka Selektory CSS Selektor dziecka Selektor przylegającego elementu siostrzanego Ogólny selektor elementu siostrzanego Pseudoklasy CSS3 Pseudoklasa CSS3 :checked Pseudoklasa CSS3 :nth-child Style miniatur i podpisów Czas na działanie — definiowanie stylów miniatur i podpisów Przekształcenia dwuwymiarowe CSS Funkcja translate() Przejścia CSS3 Wartości przejść CSS3 Czas na działanie — zmiana obrazu po najechaniu kursorem Filtrująca nawigacja po stronie Czas na działanie — tworzenie filtra portfolio Stopka Czas na działanie — formatowanie stopki Definiowanie stylów dla mniejszych ekranów Czas na działanie — rozmiar obszaru widoku poniżej 960 pikseli Czas na działanie — rozmiar obszaru widoku od 767 do 480 pikseli Czas na działanie — rozmiar obszaru widoku poniżej 480 pikseli Testowanie strony w różnych rozmiarach obszaru widoku Podsumowanie

Rozdział 4. Tworzenie strony produktu przy użyciu systemu Bootstrap Wprowadzenie do systemu Bootstrap Czas na działanie — przygotowywanie systemu Bootstrap Przygotowywanie grafik Aplikacje LESS Czas na działanie — instalowanie aplikacji CrunchApp Tworzenie plików LESS Czas na działanie — tworzenie nowego pliku LESS w CrunchAppie Kompilowanie kodu LESS na standardowy CSS Czas na działanie — dodawanie plików LESS do CrunchAppa i kompilowanie ich na CSS Dodawanie własnych rodzin fontów przy użyciu reguły @font-face Gdzie w internecie szukać darmowych fontów? Składnia reguły @font-face Formaty fontów dla różnych przeglądarek internetowych Czas na działanie — definiowanie nowego fontu przy użyciu reguły @font-face

78 79 80 80 81 81 82 83 84 84 84 85 86 90 91 93 93 94 97 98 99 100 105 106 107 109 111 113

115 116 116 117 119 119 121 122 123 124 125 125 125 126 127

5

Spis treści

Skalowalność systemu Bootstrap Siatka systemu Bootstrap Zapytania medialne CSS3 w systemie Bootstrap Czas na działanie — tworzenie nowego pliku LESS do przechowywania zapytań medialnych CSS3 Tworzenie nawigacji w systemie Bootstrap Tworzenie dokumentów HTML Czas na działanie — tworzenie podstawowych dokumentów HTML5 Quiz Treść strony głównej Czas na działanie — budowa struktury HTML treści strony głównej Treść strony galerii Czas na działanie — definiowanie struktury treści strony galerii Treść strony kontaktowej Czas na działanie — definiowanie struktury treści strony kontaktowej Strona O nas Czas na działanie — definiowanie struktury treści strony O nas Strona o zasadach korzystania z serwisu Czas na działanie — definiowanie struktury treści strony o zasadach korzystania Podsumowanie

Rozdział 5. Ulepszanie strony produktu przy użyciu CSS3 i LESS Zmienne LESS Czas na działanie — definiowanie zmiennych Definiowanie domieszek LESS Czas na działanie — definiowanie własnych domieszek LESS Funkcje LESS do modyfikacji kolorów Pojęcie zakresu Ogólne reguły stylistyczne Czas na działanie — dodawanie ogólnych reguł stylistycznych Pozbywanie się przedrostków firmowych Style przycisków Czas na działanie — zmienianie stylów przycisków systemu Bootstrap Czemu te przyciski są takie duże? Style nagłówka Czas na działanie — dodawanie stylów nagłówka witryny Style stopki Czas na działanie — dodawanie stylów stopki Strona główna Sekcja powitalna Czas na działanie — formatowanie stylu sekcji powitalnej Sekcja wezwania do działania Czas na działanie — formatowanie stylu sekcji wezwania do działania Sekcja galerii Czas na działanie — definiowanie stylu sekcji galerii

6

128 128 129 129 130 131 132 136 136 136 140 141 143 143 147 147 149 149 150

151 152 152 154 154 155 156 157 157 160 161 162 163 164 164 167 167 170 170 170 171 172 172 173

Spis treści

Sekcja referencji Czas na działanie — definiowanie stylu sekcji referencji Formularz subskrypcji Czas na działanie — formatowanie stylu pola adresu e-mail Strona galerii Czas na działanie — dostosowywanie stylów tytułu strony Strona kontaktowa Czas na działanie — dostosowywanie stylów strony kontaktowej Strona O nas Strona o zasadach korzystania z serwisu Zapewnianie dobrego wyglądu strony w różnych urządzeniach Czas na działanie — poprawianie wyglądu strony w oknach o szerokości do 767 pikseli Czas na działanie — poprawianie wyglądu strony w oknach o szerokości do 480 pikseli Usuwanie niepotrzebnych reguł stylistycznych Testowanie witryny Podsumowanie

174 174 175 175 176 178 179 181 182 184 184

Rozdział 6. Elastyczna strona firmowa na bazie systemu Foundation

197

System szkieletowy oparty na języku Ruby Gem Foundation Czas na działanie — instalowanie systemu Foundation i konfiguracja nowego projektu Składnie Sassa i SCSS Edytory kodu Sassa i SCSS Czas na działanie — instalowanie edytora Sublime Text i włączanie kolorowania składni SCSS Tworzenie własnych arkuszy stylów SCSS Czas na działanie — tworzenie arkuszy stylów SCSS, aby nie utrudniać obsługi systemu Wprowadzenie do Compassa Funkcje pomocnicze Compassa Konfiguracja projektu Compassa Czas na działanie — konfiguracja ścieżki projektu w pliku config.rb Kompilowanie SCSS na CSS Czas na działanie — obserwowanie zmian w arkuszach stylów SCSS Przygotowywanie obrazów Składniki systemu Foundation Siatka Zapytania medialne CSS3 Style interfejsu użytkownika Wtyczka do jQuery Orbit Tworzenie dokumentów HTML Podstawowy dokument HTML Czas na działanie — modyfikowanie podstawowego dokumentu HTML

186 190 193 195 195

198 198 199 200 201 201 203 203 204 204 204 206 207 207 208 209 209 212 212 213 214 214 214

7

Spis treści

Strona główna Czas na działanie — tworzenie treści strony głównej Strona z opisem usług Czas na działanie — budowa struktury HTML strony Usługi Strona z cennikiem Czas na działanie — budowa struktury HTML strony z cennikiem Strona O nas Czas na działanie — budowa struktury HTML strony O nas Strona kontaktowa Czas na działanie — budowa struktury HTML strony kontaktowej Podsumowanie

Rozdział 7. Rozszerzanie systemu Foundation Monitorowanie projektu Czas na działanie — włączanie monitorowania projektu Wprowadzenie do funkcji kolorów Sassa Zmienne w Sassie Czas na działanie — dostosowywanie zmiennych Sassa dotyczących kolorów systemu Foundation Własne rodziny fontów Domieszka Compassa do deklarowania reguł @font-face Czas na działanie — dodawanie własnych rodzin fontów przy użyciu domieszki Compassa Nawigacja Czas na działanie — formatowanie sekcji nagłówkowej Wprowadzenie do funkcji pomocniczych Compassa dotyczących sprite’ów Stopka Czas na działanie — formatowanie stylu stopki Wprowadzenie do selektorów strukturalnych CSS3 Strona główna Czas na działanie — formatowanie strony głównej Do boju Strona Usługi Czas na działanie — formatowanie strony o usługach Strona z cennikiem Czas na działanie — formatowanie stylu strony z cennikami Strony O nas i Kontakt Czas na działanie — formatowanie stylu stron O nas i Kontakt Czas na działanie — czynności końcowe Testowanie witryny Podsumowanie Źródła dodatkowych informacji Książki Internet

Skorowidz

8

218 218 225 225 230 231 236 236 240 240 244

245 246 246 247 248 248 250 251 251 254 254 255 256 257 261 262 263 270 272 273 278 279 282 282 284 286 287 287 287 288

289

O autorze Thoriq Firdaus jest grafikiem i projektantem stron internetowych. Mieszka w Indonezji. Współpracował w zakresie projektowania stron internetowych z kilkoma klientami od początku ich działalności do czasu, aż stali się poważnymi, znanymi na świecie firmami i organizacjami. Jego pasją są technologie HTML5 i CSS3, o których regularnie pisuje w serwisie http://www. hongkiat.com/ i na swoim blogu http://creatiface.com/. Od czasu do czasu przeprowadza też w lokalnych szkołach i innych instytucjach prezentacje dotyczące projektowania stron internetowych. Poza pracą Firdaus lubi oglądać z rodziną filmy i degustować nowe pyszne potrawy w pobliskich kawiarniach i restauracjach. Przede wszystkim chciałbym podziękować zespołowi z wydawnictwa Packt Publishing za danie mi szansy napisania tej książki oraz redaktorom i recenzentom za pomoc w jej ulepszeniu wyrażoną poprzez komentarze i udzielone mi wskazówki. Dziękuję także moim przyjaciołom, Ariefowi Bahariemu (www.ariefbahari.com) i Ferinie Berliani (http://nantokaa. tumblr.com/), za to, że pozwolili mi na wykorzystanie ich prac w tej książce. Na koniec dziękuję swojej rodzinie, szczególnie żonie i córce, za wspieranie mnie podczas pisania tej książki.

Responsive Web Design. Nowoczesne strony WWW na przykładach

10

O recenzentach Kevin M. Kelly jest doświadczonym twórcą stron internetowych. Specjalizuje się w programowaniu interfejsów użytkownika i obraca się w kręgach agencji reklamowych, handlu elektronicznego i organizacji rządowych. Współpracował m.in. z takimi firmami jak Canadian Tire, Rogers, The Toronto Star, Nissan i Mazooma. Kelly jest też współzałożycielem grupy programistycznej organizującej spotkania #devTO oraz członkiem komisji doradczej do spraw projektowania multimediów i technologii produkcji w Humber Institute of Design and Advanced Learning. Ponadto aktywnie uczestniczy w wydarzeniach branżowych i lokalnych. Specjalne podziękowania kieruję do wydawnictwa Packt Publishing, moich przyjaciół, rodziny i wszystkich tych, z którymi miałem do czynienia podczas swojej niezwykłej kariery.

Shawn McBurnie projektuje strony od końca lat dziewięćdziesiątych. Jest głównym programistą w Nettercap, promocyjno-programistycznym warsztacie zajmującym się tradycyjną muzyką i sztuką, oraz programistą frontowym w The Nerdery. Ponadto jest recenzentem książki HTML5 Mobile Development Cookbook Sanga Shina. Gdy nie programuje, koncertuje ze swoim zespołem Rumgumption albo prowadzi zajęcia w ośrodku muzyki irlandzkiej w Minnesocie.

Volkan Özçelik jest inżynierem frontowym. Mieszka w Mountain View, w samym środku Doliny Krzemowej. Od 2003 roku tworzy oparte na Ajaksie wydajne aplikacje sieciowe. Uwielbia projektować elastyczne i intuicyjne w obsłudze komponenty sieciowe działające w oparciu o niezwykle dobrze zorganizowany kod JavaScript. Marzy o tym, by przeglądarka Internet Explorer

Responsive Web Design. Nowoczesne strony WWW na przykładach

zniknęła ze świata, i wzdryga się na samą myśl, że wciąż wiele milionów ludzi używa tego czegoś. Mimo to cierpliwie stosuje różne sztuczki, aby obejść jej niedoskonałości, i delikatnie pomaga jej w dorównaniu bardziej nowoczesnym aplikacjom. Özçelik prowadzi bloga (http://o2js.com/), na którym opisuje osobliwości, zawiłości, najlepsze praktyki, wzorce oraz sposoby implementacji niezależnego, zoptymalizowanego i nadającego się do wielokrotnego użytku kodu JavaScript. Jest także autorem książki JavaScript Interview Questions (http://o2js.com/interview-questions/). Oprócz JavaScriptu zna również bazy danych NoSQL, ASP.net, C#, PHP, Javę, Pythona, Django, Ruby, Objective C oraz wiele innych języków i systemów. Aktualnie Özçelik pracuje jako inżynier oprogramowania w Jive Software (http://www.jivesoft ware.com). Wcześniej pracował jako spec od JavaScriptu w SocialWire (http://socialwire.com). Był także wiceprezesem działu technologicznego w GROU.PS (http://grou.ps) i programistą JavaScript w LiveGO (już nieistniejącym społecznościowym miszmaszu). Pełnił funkcję dyrektora działu technologicznego największej tureckiej sieci biznesowej Cember.net (która została przejęta przez Xing A.G.). Gdy akurat z pasją nie zgłębia tajników najnowszych technologii i systemów, spędza długie godziny na łonie natury, z dala od wszelkiej technologii. Lubi wędrować i biwakować oraz uwielbia papugi.

12

Przedmowa Koncepcja RWD (ang. Responsive Web Design — projektowanie elastycznych stron internetowych) jest jednym z najczęściej omawianych tematów w internecie i bardzo wymagającą techniką tworzenia stron internetowych. Strony utworzone w tej technologii doskonale dostosowują się do różnych rozmiarów ekranu. Jeśli myślisz, że projektowanie takich stron jest trudne, na pewno zmienisz zdanie po lekturze tej książki. Poznasz także wiele narzędzi pozwalających przyspieszyć tworzenie skalowalnych stron i uniknąć wielu różnych trudności.

Zawartość książki Rozdział 1. „Koncepcja RWD” — objaśnienie podstawowych technik RWD, związanych z nimi narzędzi oraz prezentacja kilku dobrych przykładów elastycznych stron internetowych. Rozdział 2. „Tworzenie elastycznego portfolio przy użyciu systemu Skeleton” — wprowadzenie do systemu Skeleton, opis posługiwania się jego skalowalną siatką oraz rozpoczęcie pierwszego projektu poprzez utworzenie strony internetowej w HTML5. Rozdział 3. „Ulepszanie strony portfolio przy użyciu CSS3” — wprowadzenie dodatkowych elementów, takich jak przekształcenia i przejścia CSS3, oraz opis sposobów ich zastosowania w celu ulepszenia strony portfolio. Rozdział 4. „Tworzenie strony produktu przy użyciu systemu Bootstrap” — wprowadzenie do systemu Bootstrap oraz opis niektórych z jego składników do tworzenia elastycznych stron internetowych.

Responsive Web Design. Nowoczesne strony WWW na przykładach

Rozdział 5. „Ulepszanie strony produktu przy użyciu CSS3 i LESS” — objaśnienie kilku funkcji LESS do tworzenia kodu CSS3 oraz opis sposobów ich użycia do tworzenia oszałamiających, a jednocześnie łatwych w obsłudze stron internetowych. Dodatkowo w rozdziale tym przetestujemy naszą stronę internetową, aby zobaczyć, jak wygląda na urządzeniach o różnych rozmiarach ekranu. Rozdział 6. „Elastyczna strona firmowa na bazie systemu Foundation” — wprowadzenie do systemu Foundation oraz zwięzły opis jego najważniejszych funkcji. W rozdziale tym rozpoczynamy także trzeci projekt, budowy skalowalnej strony internetowej dla firmy. Rozdział 7. „Rozszerzanie systemu Foundation” — objaśnienie sposobów działania preprocesorów CSS Sass, SCSS i Compass oraz opis możliwości rozszerzenia wyglądu witryny poprzez ustawienie paru zmiennych konfiguracyjnych systemu Foundation.

Co trzeba umieć? Trzeba znać przynajmniej podstawy HTML i CSS oraz umieć obsługiwać edytor kodu i nowoczesne przeglądarki internetowe.

Dla kogo jest ta książka? Książka ta jest przeznaczona dla początkujących twórców stron internetowych, którzy znają już podstawy technologii HTML i CSS i chcą nauczyć się tworzyć elastyczne strony internetowe, automatycznie dostosowujące się do każdego rozmiaru ekranu.

Zastosowane konwencje W książce wielokrotnie powtarzają się pewne rodzaje nagłówków. Instrukcje dotyczące wykonywania zadań i procedur oznaczane są w następujący sposób:

Czas na działanie 1. Działanie 1. 2. Działanie 2. 3. Działanie 3.

14

Przedmowa

Czasami potrzebne są dodatkowe objaśnienia i wówczas są one przedstawione w następującej formie:

Co uzyskaliśmy? Pod takimi nagłówkami znajdują się szczegółowe objaśnienia wykonanych wcześniej zadań lub instrukcji. Ponadto w książce znajduje się kilka innych pomocnych w nauce dodatków:

Quiz Krótki test wielokrotnego wyboru pozwalający Czytelnikowi sprawdzić, czy wszystko dobrze zrozumiał.

Zrób to sam Praktyczne zadania i podpowiedzi, jak sprawdzić nabyte przed chwilą umiejętności w praktyce. Także w tekście stosowane są pewne style wyróżniające różne rodzaje informacji. Poniżej znajduje się ich lista wraz z opisem znaczenia. Fragmenty kodu znajdujące się w tekście, nazwy tabel baz danych, nazwy folderów, nazwy plików, rozszerzenia plików, ścieżki, nieprawdziwe adresy URL oraz Twitterowe odnośniki są oznaczane następująco: „Pewnie zauważyłeś, że do usunięcia katalogu Drush użyto Uniksowego polecenia rm, nie zaś polecenia del systemu DOS”. Bloki kodu są formatowane następująco:

Uwagę Czytelnika na wybrane fragmenty bloku kodu zwracamy poprzez zastosowanie pogrubienia odpowiednich wierszy lub elementów:





Dane wejściowe i wyjściowe wiersza poleceń są prezentowane następująco: compass watch

15

Responsive Web Design. Nowoczesne strony WWW na przykładach

Nowe pojęcia i ważne słowa są pogrubione. Słowa wyświetlane na ekranie, np. w menu i oknach dialogowych, są oznaczane w tekście następująco: „Na ekranie Wybierz folder docelowy kliknij przycisk Dalej, aby zaakceptować domyślny folder”. Ostrzeżenia i ważne uwagi są umieszczone w takich ramkach. Tak opisujemy również wskazówki i sztuczki.

Przykłady kodu Pliki z przykładowym kodem źródłowym można pobrać ze strony wydawnictwa Helion, pod adresem ftp://ftp.helion.pl/przyklady/reweno.zip.

Errata Mimo że dołożyliśmy wszelkich starań, aby zapewnić najwyższą jakość treści, błędy czasami się zdarzają. Jeśli znajdziesz błąd w naszej książce — w tekście albo w kodzie — będziemy Ci wdzięczni za poinformowanie nas o tym. W ten sposób zaoszczędzisz nerwów innym Czytelnikom i pomożesz nam udoskonalić kolejne wydania książki. Znalezione błędy prosimy zgłaszać poprzez stronę http://helion.pl/erraty.htm. Otrzymane informacje weryfikujemy i jeśli uznamy, że Czytelnik ma rację, publikujemy je na naszych stronach w sekcji Errata.

Piractwo Nielegalne publikowanie materiałów chronionych prawami autorskimi to poważny problem wszystkich mediów, który wydawnictwo Helion traktuje bardzo poważnie. Jeśli napotkasz nielegalne kopie naszych prac w jakiejkolwiek postaci w internecie, poinformuj nas o tym, podając adres strony internetowej zawierającej takie materiały, abyśmy mogli podjąć kroki zaradcze. Adresy stron zawierających nielegalne materiały można wysyłać na adres [email protected]. Dziękujemy za pomoc w ochronie naszych autorów, dzięki której możemy dostarczać cenną treść.

16

1 Koncepcja RWD Liczba użytkowników i funkcji urządzeń mobilnych od kilku lat rośnie w tempie wykładniczym. Zainstalowane w tych urządzeniach przeglądarki radzą sobie z otwieraniem stron internetowych nie gorzej niż ich stacjonarne odpowiedniki, dzięki czemu nikogo już nie dziwi widok ludzi przeglądających internet za pomocą telefonu komórkowego albo tabletu. Przewiduje się, że liczba użytkowników urządzeń mobilnych będzie jeszcze rosnąć. Według firmy Cisco do 2015 roku na świecie będzie około 788 milionów użytkowników korzystających tylko z urządzeń przenośnych (http://www.cisco.com/en/US/solutions/collateral/ns341/ns525/ns537/ ns705/ns827/white_paper_c11-520862.pdf). Te wydarzenia mają oczywiście wpływ na inne dziedziny. Projektanci stron internetowych muszą opracować nowe sposoby dostarczania stron internetowych do urządzeń przenośnych. Rozmiary ekranów urządzeń mobilnych są tak zróżnicowane, że nie można już polegać na statycznych siatkach. W 2010 roku Ethan Marcotte (http://ethanmarcotte.com/) wymyślił nowe rozwiązanie do zastosowania w tej nowej rzeczywistości — RWD (ang. Responsive Web Design — projektowanie elastycznych stron internetowych). Aktualnie metoda ta jest powszechnie wykorzystywana do projektowania stron internetowych przystosowujących się do różnych rozmiarów ekranu (http://alistapart.com/article/responsive-web-design) — w tej książce strony takie będziemy określać zamiennie mianem elastycznych, skalowalnych lub responsywnych.

Tak naprawdę to, że strony internetowe będą automatycznie dostosowywały się do szerokości ekranu, przewidział już 12 lat temu John Allsopp (http://johnfallsopp.com/) w artykule pt. A Dao of Web Design (http://alistapart.com/article/dao).

Responsive Web Design. Nowoczesne strony WWW na przykładach

W tym rozdziale:  Poznasz podstawowe techniki projektowania elastycznych stron internetowych

i ich aktualne ograniczenia.  Dowiesz się, jakich elastycznych systemów będziemy później używać do tworzenia stron internetowych.  Poznasz preprocesory CSS i ich składnię pisania arkuszy stylów.  Przygotujesz narzędzia do budowania skalowalnych stron internetowych. Zaczynamy!

Podstawowy projekt elastyczny Zasadniczo strony utworzone metodą RWD automatycznie dostosowują się do rożnych rozmiarów ekranu i nie trzeba w tym celu tworzyć dodatkowych domen czy też poddomen dla użytkowników używających urządzeń przenośnych. Wygląd i styl takich stron można tak zaplanować, aby w każdym urządzeniu były bardzo podobne. Wszystko to jest możliwe dzięki metaznacznikowi viewport i zapytaniom medialnym CSS3.

Metaznacznik viewport i zapytania medialne CSS3 Elastyczna strona internetowa zawiera dwa ważne składniki. Pierwszy z nich to metaznacznik viewport (http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/ SafariWebContent/UsingtheViewport/UsingtheViewport.html). Znacznik ten umieszcza się w elemencie w celu kontrolowania skali strony. Na przykład poniższy metaznacznik viewport z ustawieniem parametru initial-scale na 1 spowoduje, że strona internetowa przy pierwszym otwarciu będzie miała szerokość równą stu procentom szerokości ekranu urządzenia:

Ian Yates (http://www.snaptin.com/) poświęcił na opis metaznacznika viewport i sposobów jego użycia cały artykuł w serwisie Webdesigntuts+ (http://webdesign.tutsplus.com/tutorials/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972).

Drugi składnik to zapytania medialne CSS3 (http://www.w3.org/TR/css3-mediaqueries/), które umożliwiają definiowanie arkuszy stylów przeznaczonych dla ekranów o różnych szerokościach. Na przykład poniższa reguła CSS ukrywa obrazy, jeśli ekran ma szerokość w przedziale od 321 do 480 pikseli:

18

Rozdział 1. • Koncepcja RWD

@media screen and (min-width: 321px) and (max-width: 480px) { img { display: none; } } Pobieranie przykładów kodu Pliki z przykładami kodu źródłowego można pobrać z serwera wydawnictwa Helion pod adresem ftp://ftp.helion.pl/przyklady/reweno.zip.

Dobrym przykładem zastosowania technik elastycznych jest witryna internetowa Smashing Magazine (http://www.smashingmagazine.com/). Poniższy zrzut ekranu przedstawia, jak wygląda ona w dwóch różnych szerokościach. Zwróć uwagę, że w mniejszej szerokości napis Search na przycisku zmienił się w Go!.

Dobrym przykładem zastosowania metod RWD jest też strona internetowa http://www. barackobama.com/ (rysunek na następnej stronie). Więcej inspirujących przykładów skalowalnych witryn znajdziesz na stronie http://mediaqueri.es/.

19

Responsive Web Design. Nowoczesne strony WWW na przykładach

Ograniczenia technik elastycznych Obecnie technologia RWD ma trochę wad. Wciąż pozostało do rozwiązania kilka kwestii, wliczając problem skalowalności obrazów. Aktualnie obrazy dostosowuje się do szerokości ekranu poprzez zastosowanie deklaracji CSS max-width: 100% albo w ogóle się je ukrywa przy użyciu deklaracji display: none, gdy są niepotrzebne. Problem polega na tym, że są to rozwiązania powierzchowne, tzn. rzeczywisty rozmiar obrazu w dokumencie HTML pozostaje niezmieniony. Oznacza to, że każdy użytkownik, niezależnie od tego, jaki rozmiar ekranu ma jego urządzenie, pobiera ten sam obraz, o identycznym rozmiarze i jednakowej rozdzielczości. To może przyczyniać się do marnowania transferu i spowalniać działanie strony w urządzeniach przenośnych. Na przedstawionym zrzucie ekranu widać, że obrazy są dostosowane do szerokości okna przeglądarki, mimo że ich rzeczywiste rozmiar i rozdzielczość nie zostały zmienione (rysunek na następnej stronie).

Skalowalne obrazy w elemencie picture Niedawno w World Wide Web Consortium (W3C) grupa o nazwie Responsive Image Community Group (http://www.w3.org/community/respimg/) przedstawiła nowy element o nazwie , który może być pomocny w rozwiązaniu problemu ze skalowalnością obrazów. Element ten umożliwia dostarczanie obrazów o odpowiedniej szerokości i rozdzielczości dla wybranych

20

Rozdział 1. • Koncepcja RWD

szerokości ekranu. Warto dodać, że na razie jest on w fazie rozwojowej, a więc dopiero można się spodziewać, że wkrótce zostanie zaimplementowany w przeglądarkach internetowych. W przyszłości jego specyfikacja może się zmienić, a nawet zostać usunięta. Spójrz na poniższy przykładowy fragment kodu:





Obraz o nazwie big.jpg, o wysokiej rozdzielczości i zapewne dużej szerokości, zostanie wysłany do przeglądarki tylko wtedy, gdy rozmiar jej okna będzie nie mniejszy niż 768 pikseli. Natomiast obraz medium.jpg, o mniejszej rozdzielczości i szerokości, a także o mniejszym rozmiarze, zostanie wysłany do przeglądarki o szerokości nie mniejszej niż 320 pikseli. Jeśli dwa powyższe warunki nie zostaną spełnione, dostarczony zostanie najmniejszy obraz o nazwie small.jpg. Na końcu listy znajduje się dodatkowy element , który dostarcza obraz do przeglądarek nieobsługujących elementu . Zobaczmy, jak wykorzystać ten element w sytuacji, w której zmniejszanie obrazu nie jest właściwym rozwiązaniem. Powiedzmy, że mamy bardzo szeroki obraz panoramiczny i chcemy wstawić go do nagłówka naszej strony internetowej. Wyświetlając go na ekranie monitora komputera, nie zauważymy żadnych niedogodności i zapewne obraz będzie prezentował się bardzo dobrze.

21

Responsive Web Design. Nowoczesne strony WWW na przykładach

Jednak w pomniejszonym oknie obraz robi się zbyt wąski, przez co przedstawieni na nim ludzie są słabo widoczni. Jeśli na obrazie będzie jakiś tekst, to będzie bardzo trudno go odczytać.

W takim przypadku lepiej byłoby wyświetlać różne części obrazu zamiast go zmniejszać. Dzięki elementowi rozwiązanie to można łatwo zrealizować. Poniżej znajduje się przykład wyświetlenia obciętej wersji obrazu w mniejszym oknie przeglądarki. Widzisz różnicę? Wydaje się, że ludzie na tym obrazie znajdują się trochę bliżej.

22

Rozdział 1. • Koncepcja RWD

Jeśli nie możesz doczekać się implementacji elementu , skorzystaj z serwerowego rozwiązania o nazwie Adaptive Image (http://adaptive-images.com/) autorstwa Matta Wilcoksa (http://mattwilcox.net/). Program ten sprawdza rozmiar ekranu użytkownika i dostarcza odpowiedni dla niego obraz. Można też użyć podkładki (http://remysharp.com/2010/10/08/what-is-a-polyfill/) imitującej element (https://github.com/scottjehl/picturefill).

Ponadto w magazynie .NET (http://www.creativebloq.com/net-magazine) James Young (http:// offroadcode.com/) podzielił się przeglądem typowych problemów związanych z projektowaniem elastycznych stron internetowych i ich rozwiązaniami. Jeśli chcesz włączyć się do dyskusji, wejdź na stronę http://www.creativebloq.com/responsive-web-design/problems-8122790.

Dowiedz się więcej o HTML5 i CSS3 Gruntowna wiedza na temat podstaw HTML5 i CSS3 jest bardzo pomocna w zrozumieniu projektów opisywanych w tej książce. Ale nie przejmuj się, ponieważ wszystkie prezentowane przykłady kodu są dokładnie objaśnione, aby każdy zrozumiał, na czym polegają poszczególne etapy budowy elastycznej strony internetowej. Ponadto wydawnictwo Helion wydało książkę zawierającą dogłębne omówienie tych tematów — Responsive Web Design. Projektowanie elastycznych witryn w HTML5 i CSS3 autorstwa Bena Fraina (http://www.benfrain.com/). Jest to świetna pozycja do rozpoczęcia nauki technologii HTML5 i CSS3 oraz technik tworzenia skalowalnych stron internetowych. Jeśli w tej książce po raz pierwszy napotykasz technologie HTML5 i CSS3, to do dyspozycji masz mnóstwo materiałów pomocnych w szczegółowym zgłębieniu ich tajników, np.:    

Dive into HTML5 (http://diveintohtml5.info/ oraz polskie tłumaczenie na http://www.bt4.pl/kursy/html5-k/html5-rzeczowo/), Write Semantic Markup (http://css-tricks.com/video-screencasts/100-lets-write-semantic-markup/), Podręcznik CSS Sitepoint (http://reference.sitepoint.com/css), Praktyczne zastosowanie CSS3 (http://css-tricks.com/videoscreencasts/57-using-css3/).

Jeśli nadal nie rozumiesz, na czym polega RWD, obejrzyj film Braindump on Responsive Web Design (http://css-tricks.com/video-screencasts/102-braindump-on-responsive-web-design/) Chrisa Coyiera dostępny w serwisie CSS Tricks (http://css-tricks.com/).

23

Responsive Web Design. Nowoczesne strony WWW na przykładach

Wprowadzenie do systemów RWD Nieważne, czy jest się początkującym projektantem, czy ekspertem, tworzenie elastycznej strony internetowej od samego początku to skomplikowane zadanie. Komplikacje wynikają z konieczności rozwiązania wielu różnych technicznych problemów, np. trzeba określić odpowiednią liczbę kolumn w siatce i każdej z nich obliczyć procentową szerokość, określić właściwy punkt złamania itd. Są to typowe kwestie występujące podczas budowy każdej strony internetowej. Dlatego też w tej książce nie opisuję budowy skalowalnego projektu od zera, tylko na podstawie pomocnych w tym systemów, które znacznie upraszczają cały proces. W serwisie StackOverflow otwartych jest wiele tematów dotyczących tworzenia elastycznych stron internetowych, np.:  

„Problem z 1-pikselową dziurą w skalowalnej siatce CSS” (http://stackoverflow.com/questions/12797183/cssresponsive-grid-1px-gap-issue), „Zapytania medialne — jedna reguła zasłania inną?” (http://stackoverflow.com/questions/12822984/media-queriesone-rule-overrides-another).

Po co używać systemów? Poniżej znajduje się lista powodów, dla których korzystanie z systemów (szkieletów) uważa się za dobry pomysł:  Oszczędność czasu ― jeśli ktoś używa systemu szkieletowego we właściwy sposób, to może zaoszczędzić bardzo dużo czasu. Większość systemów ma gotowe style i reguły, np. dotyczące ustawień szerokości siatki, wyglądu przycisków, rozmiarów pisma, wyglądu formularzy, resetowania domyślnych ustawień CSS oraz innych aspektów związanych z budową strony internetowej. Dzięki temu nie trzeba wszystkiego zaczynać od początku, tylko można postępować zgodnie z wytycznymi, aby odpowiednio zastosować te gotowe style i wykorzystać gotowy kod HTML. Na przykład system Bootstrap dostarcza style siatki, podstawowe reguły stylistyczne i style interfejsu użytkownika.  Społeczność i rozszerzalność ― popularne systemy skupiają aktywne społeczności, które pracują nad wzbogacaniem ich funkcjonalności. Dobrym przykładem w tym przypadku może być Bootstrap jQuery UI. Jest to motyw do jQuery UI, który odpowiada pod względem wyglądu i stylu oryginalnemu motywowi Bootstrap. Także Skeleton jest jednym z tych systemów, których będziemy używać w tej książce. Jest dostępny jako motyw do Wordpressa (http://themes.simplethemes.com/skeleton/) i Drupala (http://demo.drupalizing.com/?theme=skeleton).  Zgodność z różnymi przeglądarkami ― bardzo trudno jest zapewnić poprawny wygląd strony internetowej w różnych przeglądarkach. Dzięki użyciu systemu szkieletowego można zminimalizować te trudności, ponieważ są one w większości przypadków rozwiązywane przez programistów, zanim system zostanie w ogólne publicznie zaprezentowany. Dobrym przykładem jest system Foundation. Został 24

Rozdział 1. • Koncepcja RWD

przetestowany w przeglądarkach w systemach iOS, Android i Windows Phone 7 (http://foundation.zurb.com/docs/support.html).  Dokumentacja ― każdy dobry system ma dokumentację, która jest bardzo przydatna podczas pracy zespołowej, ponieważ ułatwia zapewnienie jednolitego stylu pisania kodu przez wszystkich członków zespołu. Wśród przykładów można wymienić dokumentacje systemów Bootstrap (http://getbootstrap.com/getting-started/) i Foundation (http://foundation.zurb.com/docs/index.php), które zawierają szczegółowe informacje na temat sposobu użycia tych produktów. Jest wiele elastycznych systemów do wyboru, ale w tej książce używane są tylko Skeleton, Bootstrap i Foundation. Przyjrzymy się im nieco bliżej.

Skeleton Skeleton (http://www.getskeleton.com/) to minimalistyczny elastyczny system szkieletowy. Powinien wyglądać znajomo dla każdego, kto kiedykolwiek miał do czynienia z systemem 960.gs (http://960.gs). Skeleton ma 960 pikseli szerokości, a jego podstawowa siatka składa się z 16 kolumn. Jedyna zmiana jest taka, że siatka jest teraz skalowalna dzięki zastosowaniu zapytań medialnych CSS3. Jeśli pierwszy raz spotykasz 960.gs lub system siatkowy, możesz skorzystać z serii artykułów Jeffreya Waya dostępnej pod adresem http://code.tutsplus.com/articles/a-detailed-look-at-the-960-css-framework--net-2567. Z filmu tego dowiesz się, jak działa system siatkowy, i nauczysz się tworzyć strony internetowe przy użyciu 960.gs. Jest to doskonały materiał dla początkującego użytkownika Grid System.

Bootstrap Bootstrap (http://getbootstrap.com/) to system stworzony przez Marka Otto (http://markdotto.com) na wewnętrzny użytek portalu Twitter. Krótka historia: Bootstrap opublikowano do darmowego użytku w internecie. Początkowo system ten nie był elastyczny, ale zmieniło się to w wersji 2 jako odpowiedź na rosnące zapotrzebowanie na RWD. Bootstrap ma więcej funkcji niż Skeleton. Zawiera sformatowane stylami typowe dla stron internetowych składniki interfejsu użytkownika, takie jak przyciski, nawigacja, paginacja czy formularze. Ponadto Bootstrap wykorzystuje kilka własnych wtyczek do jQuery do obsługi kart, karuzeli i wyskakujących okienek. Podstaw obsługi systemu Bootstrap można nauczyć się z kursu (http://www.youtube.com/playlist? list=PLA615C8C2E86B555E) Davida Cochrana (https://twitter.com/davidcochran). W kursie tym zostało dokładnie wszystko objaśnione, od podstaw do używania wtyczek. Bootstrap aktualnie jest związany z Twitterem, ale odejście jego twórcy od tego portalu i samodzielny rozwój systemu pozwalają sądzić, że w przyszłości Bootstrap całkowicie oddzieli się od marki Twitter (http://blog.getbootstrap.com/2012/09/29/onward/).

25

Responsive Web Design. Nowoczesne strony WWW na przykładach

Foundation Foundation (http://foundation.zurb.com) to produkt firmy ZURB (http://zurb.com/about/), agencji projektowej z Kalifornii. Jest podobny do Bootstrapa, ale nie jest jedynie zwykłym elastycznym szkieletem CSS. Zawiera gotowe style do budowy typowych interfejsów użytkownika stron internetowych, takie jak przyciski (http://foundation.zurb.com/docs/components/buttons.html), nawigacja (http://foundation.zurb.com/docs/components/topbar.html) i formularze. Ponadto funkcjonalność Foundation jest wzbogacona kilkoma wtyczkami do jQuery. Na bazie tego systemu zbudowane są serwisy internetowe kilku wielkich firm, np. Pixar (http://projection. pixar.com/) i National Geographic Channel (http://globalcloset.education.nationalgeographic.com/).

Kto używa tych systemów? Kto jeszcze, oprócz kilku wielkich firm wymienionych w poprzednich podrozdziałach, czerpie inspiracje, korzystając z opisywanych systemów? Zobaczmy.

Hivemind Hivemind to firma projektowa z Wisconsin. Jej witryna internetowa (www.ourhivemind.com) jest zbudowana na bazie Skeletona. Jak to zwykle bywa z tym systemem, serwis jest świetnie uporządkowany, prosty i ma doskonałą strukturę. Na poniższych zrzutach ekranu pokazuję, jak reaguje na zmiany rozmiaru okna przeglądarki:

26

Rozdział 1. • Koncepcja RWD

Living.is Living.is (http://living.is) to serwis społecznościowy do wymiany pomysłów na aranżację wnętrz mieszkalnych i źródło meblowych inspiracji w zakresie sof, krzeseł czy półek. Portal bazuje na systemie Bootstrap. Można to poznać po stylach przycisków, które są charakterystycznymi komponentami Bootstrap UI. Na poniższym zrzucie ekranu widać, jak strona Living.is prezentuje się w oknie o dużej szerokości:

Gdy zmniejszona zostanie szerokość okna, menu nawigacyjne zamienia się w przycisk nawigacyjny z trzema paskami, jak widać na poniższym zrzucie. Jest to coraz częściej stosowane rozwiązanie, a tak wyglądający przycisk coraz więcej osób kojarzy właśnie z opcjami nawigacji. Taki sam przycisk został zastosowany także na nowej stronie internetowej przeglądarki Google Chrome.

27

Responsive Web Design. Nowoczesne strony WWW na przykładach

Kliknięcie bądź dotknięcie tego przycisku powoduje rozwinięcie nawigacji, jak widać na poniższym zrzucie ekranu:

Więcej inspirujących przykładów serwisów zbudowanych na bazie systemu Bootstrap można znaleźć na stronie http://builtwithbootstrap.com/. Ale nie wszystkie z nich są skalowalne.

Swizzle Swizzle (www.getswizzle.com) to internetowe studio usługowo-projektowe z Kanady. Swoją witrynę zbudowało na bazie systemu Foundation. Poniższy zrzut ekranu przedstawia jej wygląd w szerokim oknie:

28

Rozdział 1. • Koncepcja RWD

Firma Swizzle zastosowała nowatorskie rozwiązanie, jeśli chodzi o prezentację menu w oknie o zmniejszonej szerokości. Zamiast je rozwijać, jak jest w Bootstrapie, Swizzle zamienia nawigację na odnośnik MENU prowadzący do nawigacji znajdującej się w stopce.

29

Responsive Web Design. Nowoczesne strony WWW na przykładach

Wady Wszystkie systemy szkieletowe mają też wady. Oto lista najczęściej spotykanych problemów:  Niepotrzebny kod ― systemy szkieletowe są przeznaczone dla szerokiego grona

odbiorców, więc muszą spełniać wszystkie wymagania projektowe. To wymaga dodania arkuszy stylów, które nie każdemu będą potrzebne. Oczywiście można je odnaleźć i usunąć, ale w wielu przypadkach jest to zadanie czasochłonne i bardzo żmudne.  Czas nauki ― przy pierwszym zetknięciu z dowolnym systemem trzeba

wygospodarować trochę czasu, aby się z nim zapoznać. Trzeba przejrzeć, jakie są w nim używane klasy i identyfikatory CSS oraz nazwy, a także poznać strukturę kodu HTML. Potem jednak wszystko już idzie gładko.  Zmniejszona elastyczność ― w systemie szkieletowym prawie wszystko jest

gotowe, wliczając szerokość siatki, style przycisków, zaokrąglenia rogów, i ma on styl narzucony przez jego twórców. Jeśli coś się nam nie spodoba, zmiana może być czasochłonna, a jeśli coś zrobi się źle, to można zepsuć całą strukturę kodu. Podczas korzystania z systemów szkieletowych można napotkać jeszcze wiele innych problemów. Warto prześledzić toczące się na ten temat dyskusje na stronie http://stackoverflow.com/questions/203069/what-is-the-best-css-framework-and-are-theyworth-the-effort. Podobny wątek jest też otwarty na forum CSS Trick pod adresem http://css-tricks.com/forums/topic/css-frameworks-the-pros-and-cons/.

Narzędzia potrzebne do budowy elastycznych stron internetowych Do budowy skalowalnych stron z projektów opisanych w tej książce potrzebnych jest kilka narzędzi: przeglądarki internetowe, edytor kodu oraz elastyczne skryptozakładki do testowania.

Przeglądarki internetowe Przeglądarka potrzebna jest w procesie tworzenia strony i podglądania wyników prac. Zalecam używanie Firefoksa (http://www.mozilla.org/firefox) albo Chrome’a (www.google.com/chrome) jako przeglądarki głównej. Dodatkowo warto zainstalować Operę (http://www.opera.com/), Safari (http://www.apple.com/safari/) oraz Internet Explorera (http://windows.microsoft.com/en-US/ internet-explorer/downloads/ie-9/worldwide-languages), aby móc sprawdzić, czy strona wygląda dobrze także w tych aplikacjach.

30

Rozdział 1. • Koncepcja RWD

Edytory kodu Edytor kodu to niezbędne narzędzie do tworzenia stron internetowych. Zasadniczo można użyć dowolnego edytora, który dobrze koloruje składnię. Osobiście najbardziej lubię edytor Sublime Text 2, którego używałem także podczas prac nad tą książką. Program ten jest dostępny dla systemów Windows, OS X oraz Linux. Na stronie http://www.sublimetext.com/2 można pobrać darmową wersję testową o nieograniczonym czasie testowania. Jednak od czasu do czasu aplikacja zachęca do zakupu licencji. Jeśli to nękanie Cię zirytuje, możesz kupić licencję albo użyć innego edytora. System operacyjny

Edytor

Windows

Notepad++ (http://notepad-plus-plus.org/) WebMatrix (http://www.microsoft.com/web/webmatrix/) TextPad (http://www.textpad.com/)

OS X

TextWrangler (http://www.barebones.com/products/textwrangler/) MacVim (http://code.google.com/p/macvim/) Brackets (http://brackets.io/)

Linux

Gedit (https://wiki.gnome.org/Apps/Gedit) Geany (http://www.geany.org/) BlueFish (http://bluefish.openoffice.nl/index.html)

Elastyczne skryptozakładki Skalowalne strony internetowe najlepiej jest testować na prawdziwych urządzeniach przenośnych, takich jak iPhone, iPad, telefony z systemem Android lub Windows Phone czy telefony Nokia. Ale jeśli ma się ograniczony budżet, można użyć narzędzia zwanego elastyczną skryptozakładką. Jest to rodzaj emulatora do testowania skalowalnych projektów, który zmienia wymiary obszaru widoku w przeglądarce internetowej. Dostępnych jest wiele takich skryptozakładek, np.:  Demonstracja RWD (http://jamus.co.uk/demos/rwd-demonstrations/)  Screenqueri.es (http://screenqueri.es/)  Responsinator (http://www.responsinator.com/)  ResposnivePX (http://responsivepx.com/)  Resizer (http://codebomber.com/jquery/resizer/)  Screen Fly (http://quirktools.com/screenfly/)  Adobe Edge Inspect (http://html.adobe.com/edge/inspect/)

31

Responsive Web Design. Nowoczesne strony WWW na przykładach

Użytkownicy przeglądarki Firefox od wersji 15 (http://www.mozilla.org/en-US/firefox/new/) mogą korzystać z wbudowanej funkcji o nazwie Widok responsywny. Aby ją włączyć, należy kliknąć opcję Narzędzia/Dla twórców witryn/Widok responsywny. Podobną funkcję można uzyskać w przeglądarce Chrome, instalując rozszerzenie o nazwie Window Resizer (https://chrome.google.com/webstore/detail/kkelicaakdanhinjdeammmilcgefonfh). Użytkownicy przeglądarki Safari mogą skorzystać z Resize Safari (http://resizesafari.com/).

Krótkie wprowadzenie do preprocesorów CSS Zanim zaczniesz pracę nad projektami opisanymi w tej książce, musisz poznać jeszcze jedną technologię, a mianowicie preprocesory CSS. Czym one są? Najkrócej mówiąc, preprocesor CSS to rozszerzenie możliwości kaskadowych arkuszy stylów. Przy jego użyciu można tworzyć arkusze w bardziej dynamiczny sposób. Dzięki preprocesorom w CSS można używać zmiennych i funkcji, podobnie jak w językach JavaScript i PHP. Aktualnie istnieje kilka preprocesorów CSS, np. LESS (http://lesscss.org/), Sass (http://sass-lang.com/) i Stylus (http://learnboost.github.io/stylus/). My będziemy używać tylko LESS i Sassa, ponieważ są one wykorzystywane także w niektórych opisywanych w tej książce systemach szkieletowych. Na przykład LESS jest wykorzystywany przez Bootstrapa, a Sass przez Foundation.

32

Rozdział 1. • Koncepcja RWD

Kompilatory kodu preprocesorów CSS Składnia preprocesorów CSS, takich jak LESS i Sass, nie jest rozpoznawana przez przeglądarki internetowe. Dlatego kod napisany w tych językach trzeba skompilować do postaci standardowego kodu CSS, rozpoznawanego przez przeglądarki. Dostępnych jest kilka takich narzędzi. Oto niektóre z nich: Narzędzie

Obsługiwane języki System operacyjny

Cena

Less.js (http://lesscss.org) i Node.js (http://nodejs.org/)

LESS

Windows, OS X i Linux

Darmowy

WinLESS (http://winless.org/)

LESS

Windows

Darmowy

LESS.app (http://incident57.com/less/)

LESS

OS X

Darmowy

Simpless (http://wearekiss.com/simpless)

LESS

Windows i OS X

Darmowy

ScoutApp (http://mhs.github.io/scout-app/)

Sass

Windows i OS X

Darmowy

ChrunchApp (http://crunchapp.net)

LESS

Windows, OS X i Linux

Darmowy

Wiersz poleceń lub terminal

LESS i Sass

Windows, OS X i Linux

Darmowy

CompassApp (http://compass.kkbox.com/)

Sass

Windows, OS X i Linux

10 $

Codekit (http://incident57.com/codekit/)

LESS, Sass i Stylus

OS X

25 $

Te spośród wymienionych narzędzi, które mają graficzny interfejs użytkownika, są bardzo łatwe w obsłudze, ale wrócimy jeszcze do tego przed rozpoczęciem pracy nad projektami. Na razie zobaczymy, jak pisze się arkusze stylów przy użyciu języków LESS i Sass.

LESS LESS to preprocesor CSS napisany w języku JavaScript przez Alexisa Selliera (http://alexis sellier.com/). Jak już wspomniałem, preprocesor ten jest wykorzystywany w systemie Bootstrap, czyli jednym ze szkieletów, których będziemy używać w tej książce. LESS udostępnia pewne konstrukcje programistyczne ułatwiające tworzenie arkuszy stylów. Najczęściej w tej książce spotkasz następujące techniki:  zagnieżdżanie reguł,  zmienne,  domieszki,  domieszki z parametrami,  działania arytmetyczne.

33

Responsive Web Design. Nowoczesne strony WWW na przykładach

Zagnieżdżanie reguł W zwykłym CSS, jeśli trzeba zastosować style do elementów znajdujących się w elemencie nav przypisanym do klasy nav-primary, można napisać reguły podobne do poniższych: .nav-primary { background-color: #000; width: 100%; } .nav-primary ul { padding: 0; margin: 0; } .nav-primary li { display: inline; } .nav-primary li a { text-decoration: none; color: #fff; } .nav-primary li a:hover { color: #ccc; }

Jak widać, selektor rodzica .nav-primary jest powtarzany wielokrotnie, w każdej regule odnoszącej się do elementu znajdującego się w tym elemencie. Dzięki LESS można pozbyć się tych powtórzeń i nieco uprościć kod poprzez zagnieżdżenie reguł CSS, jak poniżej: .nav-primary { background-color: #000; width: 100%; ul { padding: 0; margin: 0; } li { display: inline; a { text-decoration: none; color: #fff; &:hover { color: #ccc; } } } }

Ten kod jest również prosty, tylko ma inną strukturę zawierającą zagnieżdżone reguły.

34

Rozdział 1. • Koncepcja RWD

Zmienne W LESS, podobnie jak we wszystkich innych językach programowania, zmiennych używa się do przechowywania wartości, które później można wykorzystywać w różnych miejscach arkusza stylów. Zmienne definiuje się przy użyciu znaku @, po którym należy wpisać nazwę. Nazwa zmiennej może się składać z cyfr i liter. Poniższy przykładowy kod zawiera kilka definicji zmiennych przechowujących wartości kolorów, które są następnie zastosowane do wybranych reguł stylistycznych: @primaryColor: #234fb4; @secondaryColor: #ffb400; a { color: @primaryColor; } button { background-color: @secondaryColor; }

Po konwersji na zwykły CSS powyższy kod będzie wyglądał tak: a { color: #234fb4; } button { background-color: #ffb400; }

Oczywiście zmiennych można używać do przechowywania różnych rodzajów wartości, nie tylko kolorów. Można na przykład zapisywać w nich dane dotyczące zaokrąglenia rogów: @smallRadius: 3px;

Jedną z zalet zmiennych jest to, że gdy trzeba coś zmienić, to nie musimy przeszukiwać całego arkusza stylów w celu znalezienia wszystkich wystąpień tego czegoś. Wystarczy zmienić tylko jedną zmienną. To pozwala zaoszczędzić dużo czasu.

Domieszki Domieszki są jak zmienne, ale zamiast pojedynczych wartości przechowują całe zestawy własności CSS, które potem mogą być dziedziczone przez inne zestawy reguł. Powiedzmy, że mamy w arkuszu stylów następujące reguły: .links { -webkit-border-radius: 3px; -mox-border-radius: 3px; border-radius: 3px; text-decoration: none; font-weight: bold; }

35

Responsive Web Design. Nowoczesne strony WWW na przykładach

.box { -webkit-border-radius: 3px; -mox-border-radius: 3px; border-radius: 3px; position: absolute; top: 0; left: 0; } .button { -webkit-border-radius: 3px; -mox-border-radius: 3px; border-radius: 3px; }

Kod ten zawiera deklarację własności border-radius w trzech różnych regułach CSS. Za każdym razem konieczne jest dodanie wersji deklaracji z przedrostkami, aby spełnić wymagania starszych przeglądarek. W LESS można te deklaracje umieścić w domieszce, którą następnie dołączy się w innych regułach CSS. Domieszki tworzy się przy użyciu selektora klasy. W tym przykładzie utworzymy domieszkę o nazwie .border-radius: .border-radius { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }

Tak utworzoną domieszkę można wstawiać do reguł CSS w celu przekazania jej własności w następujący sposób: .links { .border-radius; text-decoration: none; font-weight: bold; } .box { .border-radius; position: absolute; top: 0; left: 0; } .button { .border-radius; }

Domieszki z parametrami Dodatkowo domieszki można przekształcić w funkcje, które w LESS nazywają się domieszkami parametrycznymi (ang. Parametric Mixin). Dzięki tej metodzie można używać argumentów albo zmiennych w celu konfiguracji domieszek. Spójrzmy na przykład.

36

Rozdział 1. • Koncepcja RWD

Jesteśmy wciąż przy poprzednim kodzie. Ale teraz nie przypisujemy stałej wartości, tylko zastępujemy ją zmienną: .border-radius(@radius) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; }

Teraz możemy wstawić domieszkę do wybranych reguł CSS i w każdym przypadku zastosować inną wartość: a { .border-radius(3px); text-decoration: none; font-weight: bold; } div { .border-radius(10px); position: absolute; top: 0; left: 0; } button { .border-radius(12px); }

Po skompilowaniu tego kodu LESS do postaci zwykłego CSS otrzymamy następujące arkusze stylów: a { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; text-decoration: none; font-weight: bold; } div { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; position: absolute; top: 0; left: 0; } button { -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; }

37

Responsive Web Design. Nowoczesne strony WWW na przykładach

Jak widać, przedstawione techniki mogą być bardzo pomocne w pracy z własnościami CSS3, bo pozwalają uniknąć ciągłego wpisywania przedrostków producentów przeglądarek. Istnieje rozszerzenie LESS o nazwie LESS Elements (http://lesselements.com/), które zawiera zbiór bardzo przydatnych domieszek CSS3. Jeśli planujesz używać LESS, to korzystając z tego rozszerzenia, możesz oszczędzić sporo pracy. Ponadto w serwisie SitePoint znajduje się artykuł szczegółowo opisujący zastosowania domieszek LESS (http://www.sitepoint.com/a-comprehensive-introduction-to-less-mixins/).

Działania arytmetyczne Przy użyciu LESS można też wykonywać proste działania arytmetyczne: dodawanie, odejmowanie, dzielenie i mnożenie. W niektórych sytuacjach możliwość ta jest bardzo przydatna. Poniżej przedstawiam przykład obliczania szerokości pola poprzez odjęcie rozmiaru dopełnienia, aby pole to mieściło się w elemencie nadrzędnym. Zaczniemy od zdefiniowania zmiennej @padding do przechowywania rozmiaru dopełnienia: @padding: 10px;

Następnie zdefiniujemy szerokość pola i odejmiemy od niej wartość zmiennej @padding: .box { padding: @padding; width: 500px - (@padding * 2); }

Przypomnę, że dopełnienie można ustawić z dwóch stron albo na górze i na dole. Dlatego właśnie wartość zmiennej @padding została pomnożona przez 2. Na koniec kompilujemy kod na CSS i otrzymujemy następujący wynik: .box { padding: 10px; width: 480px; }

To samo można zrobić przy ustawianiu wartości własności height: .box { padding: @padding; width: 500px - (@padding * 2); height: 500px - (@padding * 2); }

38

Rozdział 1. • Koncepcja RWD

Sass, czyli Syntactically Awesome Stylesheets Sass (ang. Syntactically Awesome Stylesheets — arkusze stylów o doskonałej składni) to preprocesor CSS napisany w języku Ruby przez Hamptona Catlina (http://www.hamptoncatlin.com/), Nathana Weizenbauma (http://nex-3.com/) oraz Chrisa Eppsteina (http://chriseppstein.github.io/). Podobnie jak w LESS, w Sassie można tworzyć zmienne i domieszki oraz zagnieżdżać reguły, chociaż robi się to trochę inaczej. Zobaczmy.

Zmienne W Sassie zmienne definiuje się przy użyciu znaku $. Poniżej znajduje się analogiczny do wcześniejszego przykład definicji koloru głównego w zmiennej o nazwie $primaryColor, który następnie zostaje przypisany do reguł stylistycznych: $primaryColor: #234fb4; a { color: $primary; } button { background-color: $primaryColor; }

Podobnie jak w przypadku LESS, kod należy skompilować do postaci zwykłego kodu CSS. W wyniku takiej konwersji otrzymujemy: a { color: #234fb4; } button { background-color: #234fb4; }

Domieszki W Sassie domieszki definiuje się nieco inaczej niż w LESS, gdyż używa się do tego celu dyrektywy @mixin. Znów podobnie jak w poprzedniej części, dotyczącej LESS, poniżej przedstawiam przykład definicji domieszki reprezentującej zaokrąglenie rogów i przypisania jej do innych reguł przy użyciu dyrektywy @include: @mixin border-radius { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } a { @include border-radius; text-decoration: none; font-weight: bold;

39

Responsive Web Design. Nowoczesne strony WWW na przykładach

} div { @include border-radius; position: absolute; top: 0; left: 0; } button { @include border-radius; }

Ponadto do domieszek w Sassie można dodawać parametry, podobnie jak w LESS, np.: @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; }

Zagnieżdżanie reguł W Sassie można też zagnieżdżać reguły, ale w tej technologii technika ta jest bardziej rozwinięta, bo można zagnieździć pojedynczą własność. Oto jak to się robi. Zacznijmy od tego, że w zwykłym CSS czasami definiuje się style przy użyciu indywidualnych własności, np.: div { border-color: #ccc; border-style: solid; border-width: 5px; }

W Sassie można zastosować następujący sposób zagnieżdżenia: div { border: { color: #ccc; style: solid; width: 5px; } }

Dziedziczenie selektorów Może się wydawać, że dziedziczenie selektorów jest tym samym co domieszki, ale to nieprawda. Domieszki powodują dziedziczenie stylów w innych selektorach, a dziedziczenie selektorów powoduje grupowanie selektorów mających przypisane wspólne style.

40

Rozdział 1. • Koncepcja RWD

W poniższym przykładzie użyta jest klasa button definiująca ogólne style przycisku: .button { padding: 5px 15px; border-radius: 3px; color: #fff; border: 1px solid #000; }

Ale mamy dwa rodzaje przycisków ― do zatwierdzania formularza i do jego zerowania. Będą one formatowane odpowiednio przez klasy submit i reset. Ogólny styl tych dwóch rodzajów przycisków będzie taki sam, a różnić się będą tylko kolorem tła oznaczającym ich przeznaczenie. Jest to dobra sytuacja do wykorzystania dziedziczenia selektorów. W tym celu należy przypisać klasę button do wybranych reguł przy użyciu dyrektywy @extend, jak poniżej: .submit { @extend .button; background-color: green; } .reset { @extend .button; background-color: red; }

W odróżnieniu od domieszek, które po prostu kopiują własności do wybranych reguł, efektem dziedziczenia selektorów jest zgrupowanie selektorów, które wspólnie używają stylów z klasy button. Po konwersji powyższego kodu na CSS otrzymamy następujący wynik: .button, .submit, .reset { padding: 5px 15px; border-radius: 3px; color: #fff; border: 1px solid #000; } .submit { background-color: green; } .reset { background-color: red; }

Więcej o preprocesorach CSS Niestety nie mogę bardziej szczegółowo opisać preprocesorów CSS, ponieważ nie są one głównym tematem tej książki, a poza tym wiele ich funkcji wciąż czeka na swoje odkrycie. Jeśli jednak interesuje Cię ta tematyka, możesz sięgnąć do źródeł wymienionych w następnym podrozdziale.

41

Responsive Web Design. Nowoczesne strony WWW na przykładach

Materiały do nauki LESS Aby dowiedzieć się więcej na temat obsługi LESS, skorzystaj z następujących źródeł:  Najlepszym źródłem informacji do rozpoczęcia nauki LESS jest oficjalna

dokumentacja (http://lesscss.org/#docs). Opisano w niej wszystkie właściwości LESS, zaczynając od podstaw. Ponadto podano też trochę przykładów.  W serwisie Webdesigntuts+ Daniel Pataki (http://danielpataki.com)

szczegółowo opisał LESS i dodatkowo przedstawił jeszcze więcej przykładów (http://webdesign.tutsplus.com/tutorials/get-into-less-the-programmable-stylesheet-language--webdesign-5216).  Parę podstawowych wskazówek na temat używania LESS opublikował też na swoim blogu Oliver Cadwell (http://oli.me.uk/2012/02/25/getting-started-with-less.html). Pokazał, jak uruchomić kompilator LESS przy użyciu Node.js (http://nodejs.org/) i NPM (https://npmjs.org/).

Materiały do nauki Sassa Aby dowiedzieć się więcej na temat obsługi Sassa, skorzystaj z następujących źródeł:  Dokumentacja Sassa jest bardzo dokładna, ale na mnie jej lektura działa usypiająco. Dlatego początkującym polecam serwis The Sass Way (thesassway.com).  Osoby, które wolą kursy wideo niż tekstowe, mogą skorzystać z listy odtwarzania na YouTubie (http://www.youtube.com/playlist?list=PL2CB1F80266E986EA), która jest własnością LevelUpTuts. Jest to kurs zawierający dokładne omówienie możliwości Sassa.  Chris Coyer opublikował film wprowadzający do technologii Sass i Compass w serwisie CSS Tricks (http://css-tricks.com/video-screencasts/88-intro-to-compass-sass/). Ponadto Jonathan Verrecchia (http://verekia.com) opublikował świetną prezentację slajdów o preprocesorach CSS (http://www.slideshare.net/verekia/deep-dive-into-css-preprocessors). W niektórych punktach porusza kwestie ograniczeń CSS, porównuje LESS, Sassa i Stylusa oraz podpowiada, którego preprocesora należy użyć.

Co utworzymy w tej książce? Znając teoretycznie narzędzia, które będą używane w tej książce, zapewne chciałbyś się dowiedzieć, co dokładnie w niej utworzysz. W książce tej utworzymy trzy elastyczne witryny internetowe przy użyciu systemów szkieletowych, które opisałem we wcześniejszych częściach tego rozdziału. W każdym przypadku

42

Rozdział 1. • Koncepcja RWD

napotkamy i rozwiążemy różne problemy. Ponadto podczas pracy w niektórych przypadkach będziemy używać preprocesorów CSS, które są wykorzystywane w Bootstrap i Foundation. Pierwszym projektem, jakim się zajmiemy, będzie elastyczne portfolio utworzone na bazie systemu Skeleton. W drugim projekcie utworzymy skalowalną witrynę internetową produktu na bazie systemu Bootstrap. Natomiast w trzecim projekcie zbudujemy witrynę firmową przy użyciu szkieletu Foundation.

Podsumowanie W rozdziale tym zostało poruszonych wiele tematów. Czas na ich podsumowanie:  Poznaliśmy podstawowe elementy budowy elastycznej strony internetowej, metaznacznik viewport, zapytania medialne CSS3 oraz kilka przykładów dobrze

wykonanych skalowalnych stron internetowych.  Dowiedzieliśmy się, jakie problemy są związane z oferowaniem skalowalnych obrazów, oraz jak są i jak będą one rozwiązywane.  Poznaliśmy systemy szkieletowe, których będziemy używać do budowy stron

internetowych opisanych w tej książce: Skeleton, Bootstrap i Foundation.  Zapoznaliśmy się z preprocesorami CSS do tworzenia arkuszy stylów LESS i Sass oraz podstawami ich języków. W następnym rozdziale rozpoczniemy budowę pierwszego projektu. Utworzymy elastyczne portfolio przy użyciu systemu Skeleton.

43

Responsive Web Design. Nowoczesne strony WWW na przykładach

44

2 Tworzenie elastycznego portfolio przy użyciu systemu Skeleton W poprzednim rozdziale poznaliśmy ogólne kwestie dotyczące projektowania elastycznych stron internetowych i dokonaliśmy podstawowego przeglądu systemów szkieletowych, dzięki którym tworzenie takich stron jest łatwe i szybkie. W tym rozdziale utworzymy prostą stronę portfolio przy użyciu systemu Skeleton. Jeśli więc jesteś kreatywną osobą chcącą przedstawić światu swoje prace na stronie internetowej, to ten rozdział może być tym, czego szukasz.

W tym rozdziale:  Poznasz dokładnie składniki systemu Skeleton.  Poznasz sposoby wykorzystania składników systemu Skeleton.  Stworzysz projekt przy użyciu systemu Skeleton.  Przygotujesz zasoby projektu.  Stworzysz stronę internetową przy użyciu HTML5.

Zaczynamy!

Responsive Web Design. Nowoczesne strony WWW na przykładach

Podstawy systemu Skeleton Jak napisałem w poprzednim rozdziale, jedną z wad systemów szkieletowych jest konieczność nauczenia się ich obsługi. Na naukę tę trzeba poświęcić trochę czasu, zwłaszcza gdy systemu używa się po raz pierwszy. Zanim więc zbudujemy stronę portfolio na bazie systemu Skeleton, musimy go rozpakować i zobaczyć, co dokładnie zawiera.

Czas na działanie — tworzenie katalogu roboczego i pobieranie systemu Skeleton Aby utworzyć katalog roboczy i pobrać system Skeleton, wykonaj następujące czynności: 1. Utwórz folder o nazwie portfolio. Będzie to nasz katalog roboczy dla elastycznej strony portfolio. 2. W folderze portfolio utwórz dwa foldery o nazwach html i psd. 3. Teraz w celu pobrania systemu Skeleton wejdź na stronę www.getskeleton.com/. 4. Przejdź do sekcji Download (pobieranie) i pobierz pakiet z systemem. W czasie pisania tej książki najnowsza wersja miała numer 1.2. 5. Zapisz pobrany plik w folderze html. 6. Pobrany plik jest w formacie tar.gz. Rozpakuj go, aby móc korzystać ze znajdujących się w nim plików. 7. W wyniku rozpakowania w folderze powinny się pojawić dwa nowe foldery o nazwach stylesheet i images oraz dokument HTML o nazwie index.html. Nie musisz tego robić, ale możesz już usunąć plik .tar.gz. 8. Na zakończenie z sekcji Download na stronie www.getskeleton.com/ pobierz szablon PSD systemu, zapisz go w folderze psd i wypakuj.

Co uzyskaliśmy? Właśnie utworzyliśmy katalog roboczy. Ponadto pobraliśmy pakiet plików systemu Skeleton i jego szablon PSD oraz umieściliśmy wszystko w odpowiednich katalogach, aby móc rozpocząć pracę.

Co zawiera Skeleton? Spośród wszystkich opisywanych w tej książce systemów szkieletowych Skeleton jest najprostszy. Nie jest przeładowany niepotrzebnymi ciężkimi stylami ani dodatkowymi składnikami, takimi jak wtyczki do jQuery. Skeleton składa się tylko z pliku index.html, kilku arkuszy stylów, paru obrazów oraz szablonu PSD. Przyjrzymy się bliżej wszystkim tym zasobom.

46

Rozdział 2. • Tworzenie elastycznego portfolio przy użyciu systemu Skeleton

Początkowy dokument HTML Skeleton zawiera wstępny szablon dokumentu HTML o nazwie index.html, dzięki czemu nie trzeba go już tworzyć samodzielnie. Twórca Skeletona zadbał, aby w szablonie tym znalazły się wszystkie najpotrzebniejsze elementy, których opis znajduje się poniżej.

Metaznacznik viewport W opisywanym szablonie metaznacznik viewport ma parametry initial-scale i maximum-scale ustawione na 1, jak widać poniżej:

Przypomnę, że ustawienie initial-scale na 1 sprawia, że przy pierwszym otwarciu strona zajmuje 100 procent dostępnego obszaru w oknie przeglądarki. Ustawiając maximum-scale na 1, należy mieć na uwadze, że ustawienie to uniemożliwi użytkownikowi korzystanie z funkcji powiększania obrazu. Dlatego jeśli się je stosuje, trzeba zapewnić dobrą widoczność tekstu i obrazów bez powiększania strony.

HTML5 Shim Jako że w naszym dokumencie będziemy używać elementów HTML5, musimy dołączyć do strony bibliotekę JavaScript HTML5 Shim, aby nowe elementy zostały rozpoznane przez przeglądarkę Internet Explorer 8 i jej starsze wersje. Biblioteka ta jest domyślnie dołączona do wstępnego dokumentu HTML Skeletona. Można się o tym przekonać, znajdując w nagłówku poniższy fragment kodu:

Treść

8. W następnej kolejności dodajemy nagłówek w postaci elementu header, sekcję treści w elemencie div oraz stopkę w elemencie footer. Wszystko to powinno oczywiście znajdować się w elemencie body:

132

Rozdział 4. • Tworzenie strony produktu przy użyciu systemu Bootstrap



Do reprezentacji sekcji z treścią użyliśmy elementu div zamiast section, bo po elemencie tym nie będzie od razu nagłówka, czego wymaga dokumentacja (http://www.whatwg.org/specs/web-apps/current-work/multipage/ sections.html#headings-andsections): „Pierwszy element nagłówka w sekcyjnym elemencie treści reprezentuje nagłówek tej sekcji. Kolejne nagłówki o tej samej lub wyższej randze rozpoczynają nowe (dorozumiane) sekcje, nagłówki o niższej randze rozpoczynają podsekcje będące częścią poprzedniej sekcji. W obu przypadkach element reprezentuje nagłówek dorozumianej sekcji”. 9. W elemencie header dodajemy element div przypisany do klasy container, który będzie zawierał treść wewnętrzną nagłówka:

10. Dodaj element nav z klasą navbar w celu utworzenia nawigacji:



11. W elemencie dodaj element div przypisany do klasy navbar-inner, w którym będą się znajdowały wewnętrzne elementy nawigacji:



12. W elemencie dodaj element a przypisany do klasy brand. Później posłuży on do wyświetlenia logo.

Kudos Plush



13. Następnie dodaj poniższy kod za elementem definiujący menu z odnośnikami: Kudos Plush

133

Responsive Web Design. Nowoczesne strony WWW na przykładach

• Główna
• Galeria
• Kontakt

• Główna
• Galeria
• Kontakt
• O nas
• Zasady

• Facebook
• Twitter
• Dribbble

Lorem Ipsum! Tylko

50,0 zł

Brownie oat cake donut gummies carrot macaroon cake jelly-o. Cheesecake apple pie gummi bears.