Table Of ContentSpis treści
Podziękowania ..............................................................................................7
Wstęp ...........................................................................................................11
Rozdział 1. Świecidełka ..............................................................................17
Receptura 1. Stylizowanie przycisków i łączy ...........................................................17
Receptura 2. Stylizowanie cytatów przy użyciu CSS ................................................21
Receptura 3. Tworzenie animacji przy użyciu transformacji CSS3 ............................28
Receptura 4. Tworzenie interaktywnych pokazów slajdów przy użyciu jQuery ............33
Receptura 5. Tworzenie i stylizowanie wewnątrztekstowych okienek pomocy ..............38
Rozdział 2. Interfejs użytkownika ............................................................47
Receptura 6. Tworzenie szablonu wiadomości e-mail ................................................47
Receptura 7. Wyświetlanie treści na kartach .............................................................58
Receptura 8. Rozwijanie i zwijanie treści z zachowaniem zasad dostępności ...............65
Receptura 9. Nawigacja po stronie internetowej przy użyciu klawiatury ......................71
Receptura 10.Tworzenie szablonów HTML przy użyciu systemu Mustache ..............79
Receptura 11.Dzielenie treści na strony ....................................................................84
Receptura 12.Zapamiętywanie stanu w Ajaksie ........................................................90
Receptura 13.Tworzenie interaktywnych interfejsów użytkownika
przy użyciu biblioteki Knockout.js .......................................................95
Receptura 14.Organizacja kodu przy użyciu biblioteki Backbone.js ..........................105
Rozdział 3. Dane ........................................................................................123
Receptura 15.Wstawianie na stronę mapy Google ...................................................123
Receptura 16.Tworzenie wykresów i grafów przy użyciu Highcharts ........................129
Receptura 17.Tworzenie prostego formularza kontaktowego ....................................137
Receptura 18.Pobieranie danych z innych serwisów przy użyciu formatu JSONP .....144
6 (cid:23) Web development. Receptury nowej generacji
Receptura 19.Tworzenie widżetów do osadzenia w innych serwisach ........................147
Receptura 20.Budowanie witryny przy użyciu JavaScriptu i CouchDB .....................153
Rozdział 4. Urządzenia przenośne ..........................................................163
Receptura 21.Dostosowywanie stron do wymogów urządzeń przenośnych .................163
Receptura 22.Menu rozwijane reagujące na dotyk ...................................................168
Receptura 23.Operacja „przeciągnij i upuść” w urządzeniach przenośnych ...............171
Receptura 24.Tworzenie interfejsów przy użyciu biblioteki jQuery Mobile ................178
Receptura 25.Sprite’y w CSS ................................................................................187
Rozdział 5. Przepływ pracy ......................................................................191
Receptura 26.Szybkie tworzenie interaktywnych prototypów stron ............................191
Receptura 27.Tworzenie prostego bloga przy użyciu biblioteki Jekyll ........................200
Receptura 28.Tworzenie modularnych arkuszy stylów przy użyciu Sass ....................207
Receptura 29.Bardziej przejrzysty kod JavaScript, czyli CoffeeScript ........................215
Receptura 30.Zarządzanie plikami przy użyciu narzędzia Git ..................................222
Rozdział 6. Testowanie ............................................................................233
Receptura 31.Debugowanie JavaScriptu .................................................................233
Receptura 32.Śledzenie aktywności użytkowników przy użyciu map cieplnych ...........239
Receptura 33.Testowanie przeglądarek przy użyciu Selenium ..................................242
Receptura 34.Testowanie stron internetowych przy użyciu Selenium i Cucumber ......247
Receptura 35.Testowanie kodu JavaScript przy użyciu Jasmine ................................260
Rozdział 7. Hosting i wdrażanie ..............................................................271
Receptura 36.Wspólna praca nad stroną poprzez Dropbox ......................................271
Receptura 37.Tworzenie maszyny wirtualnej ...........................................................275
Receptura 38.Zmienianie konfiguracji serwera WWW przy użyciu programu Vim ......279
Receptura 39.Zabezpieczanie serwera Apache za pomocą SSL i HTTPS ..............284
Receptura 40.Zabezpieczanie treści .......................................................................288
Receptura 41.Przepisywanie adresów URL w celu zachowania łączy .......................292
Receptura 42.Automatyzacja procesu wdrażania statycznych serwisów
za pomocą Jammit i Rake .................................................................296
Dodatek A. Instalowanie języka Ruby ...................................................305
Dodatek B. Bibliografia ............................................................................309
Skorowidz ..................................................................................................311
Podziękowania
Mówi się, że nikt nie pisze książki w pojedynkę. Prawda jest taka, że
nawet gdy autorów jest pięciu, to i tak w projekt angażuje się całą
rzeszę dodatkowych osób. Gdyby nie ci ludzie, książka ta by nie
powstała, a my nie mielibyśmy tych doświadczeń, które zdobyliśmy dzięki jej
napisaniu.
Susannah Pfalzer, nasz redaktor rozwojowy, miała niełatwe zadanie użerania się
z pięcioma autorami i pilnowania takich drobiazgów, jak to, abyśmy nie urywali
zdań w połowie, nie zapominali o wstępach oraz pisali spójny tekst. Poradziła
sobie z tym doskonale. Chcieliśmy napisać książkę zawierającą opis wielu różnych
nowoczesnych narzędzi przydatnych w pracy twórcy stron internetowych. Susannah
dopilnowała, aby obok suchych opisów, jak coś zrobić, znalazły się także obja-
śnienia, po co to w ogóle robić. Dzięki temu książka jest o wiele lepsza.
Przez to, że każdy z nas chciał jak najszybciej skończyć swoją pracę i doprowa-
dzić projekt do zakończenia, do tekstu wkradło się wiele nieścisłości i błędów. Na
szczęście, korektorzy merytoryczni: Charley Stran, Jessica Janiuk, Kevin Gisi,
Matt Margolis, Eric Sorenson, Scott Andreas, Joel Andritsch, Lyle Johnson,
Kim Shrier, Steve Heffernan, Noel Rappin, Sam Elliott, Derick Bailey oraz
Kaitlin Johnson czuwali nad wszystkim i dzięki nim możemy pochwalić się
publikacją, która jest o niebo lepsza, niż była na początku.
Specjalne podziękowania kierujemy do Dave’a Gamache’a za porady dotyczące
biblioteki Skeleton; do Trevora Burnhama za wskazówki na temat CoffeeScript;
do Steve’a Sandersona za podpowiedzi dotyczące Knockout.js i do Benoit
Chesneau za szybkie naprawienie kilku usterek w instalatorze Couchapp.
8 (cid:23) Web development. Receptury nowej generacji
Projektantem okładki jest David Kelly i chociaż niektórzy z nas woleliby widzieć
na niej boczek, to wszyscy jesteśmy zadowoleni z ostatecznego efektu.
Jesteśmy niezwykle wdzięczni Dave’owi Thomasowi i Andy’emu Huntowi za to,
że dali nam możliwość napisania książki dla Pragmatic Bookshelf. Dzięki ich
komentarzom udało się poprawić kilka problematycznych receptur, ale najważ-
niejsze jest to, że potrafili stworzyć atmosferę, w której my jako autorzy czuliśmy
się najważniejsi. Przy takim wsparciu wszystko wydaje się łatwe.
Ponadto chcielibyśmy podziękować naszym innym partnerom biznesowym za
wsparcie i komentarze — oto oni: Erich Tesky, Austen Ott, Emma Smith, Jeff
Holland oraz Nick LaMuro.
Brian Hogan
To jest moja trzecia książka dla wydawnictwa Pragmatic Bookshelf i mimo że
napisałem tylko jedną piątą jej treści, uważam, że było to bardzo trudne zadanie.
Moi współautorzy dołączyli się w odpowiednim czasie i jestem dumny z tego, że
napisaliśmy coś wspólnie. Każdy z nich, Chris, CJ, Mike i Aaron, wniósł do
tekstu coś wartościowego, dzięki czemu otrzymaliśmy znakomity produkt końcowy.
Dzięki, chłopaki!
Jednak nawet mimo całej tej pomocy nic bym nie zdziałał, gdyby nie wsparcie
mojej cudownej żony Carissy. Dziękuję Ci za to, że dopilnowałaś, abym miał czas
na pracę. Dziękuję Ci za dbanie o wszystkie drobne (a także większe) sprawy,
o których sam bym zapomniał.
Chris Warren
Nie potrafię znaleźć słów, aby podziękować mojej żonie Kaitlin za udzielone mi
wsparcie i okazane zrozumienie, gdy wcześnie zaczynałem i późno kończyłem
pracę. Dzięki Tobie wiele koszmarnych dni było znośnych.
Dziękuję współautorom za wspólną pracę. Znamy się od dawna i napisanie
pierwszej książki z przyjaciółmi było dla mnie wspaniałym przeżyciem. W szcze-
gólności dziękuję Brianowi, który bardzo pomógł mi w rozwoju mojej kariery
programistycznej, za zaangażowanie mnie do tego projektu.
Podziękowania (cid:22) 9
Dziękuję także moim rodzicom za dodawanie mi otuchy i wsparcie, gdy dojrze-
wałem jako pisarz i programista. Nie powiedziałem Wam, że napisałem te słowa,
i z niecierpliwością czekam, aż to zobaczycie.
Mike Weber
Chciałbym podziękować Brianowi Hoganowi za bycie przez wiele lat moim
mentorem oraz umożliwienie mi rozpoczęcia kariery jako twórcy stron interneto-
wych i zostania autorem książki. Gdyby nie on, nie zrobiłbym żadnej z tych rzeczy.
Chciałbym także podziękować pozostałym moim współautorom, Chrisowi, CJ
i Aaronowi, za towarzystwo w tej wspaniałej przygodzie i okazaną mi pomoc.
Dziękuję też mojej rodzinie za podtrzymywanie mojego zapału poprzez ciągłe
zadawanie pytań typu „Jak ci idzie książka?”.
Dziękuję także mojej żonie Kaley za znoszenie samotnych nocy, podczas gdy
z innymi kończyłem pracę nad tym projektem.
Chris Johnson
Dziękuję mojej żonie Laurze za wsparcie na każdym etapie tej podróży. Zre-
zygnowałaś ze spędzania czasu ze mną, abym mógł się poświęcić pisaniu, jeździ-
łaś na wycieczki, abym mógł się poświęcić pisaniu, oraz zrezygnowałaś z wielu
letnich przyjemności, abym mógł poświęcić się pisaniu.
Dziękuję rodzicom za to, że nauczyli mnie pracować nad tym, co lubię, i nigdy
się nie poddawać. Tato, dzięki, że poczekałeś ze swoim rozpoczęciem działalności,
abym mógł dokończyć książkę.
Dziękuję Brianowi, Chrisowi, Mike’owi i Aaronowi za współpracę. Dzięki
Waszym komentarzom i podpowiedziom podszlifowałem sobie warsztat pisarski.
Wspieraliście mnie w trudnych chwilach i dziękuję Wam za to.
Do ludzi w pracy: dziękuję za komentarze i recenzje.
10 (cid:23) Web development. Receptury nowej generacji
Aaron Godin
Brian, Chris, Mike i CJ byli dla mnie inspiracją i wzorami do naśladowania.
Dziękuję za to, że mnie pchaliście do przodu nawet wtedy, gdy opornie mi szło.
W szczególności dziękuję Brianowi za bycie najlepszym możliwym mentorem
i przyjacielem.
Dziękuję Brianowi Longowi za wysłuchiwanie mnie i okazywanie mi zaintereso-
wania. Dziękuję Taylorowi za to, że się przejmował, i za motywację. Byliście dla
mnie podporą we wszystkich trudnych chwilach.
Na koniec dziękuję moim rodzicom Billowi i Cynthii za bezwarunkowe wsparcie,
miłość i zrozumienie. Pokazaliście mi, jak robić w życiu to, co się lubi. Dziękuję
za przygotowanie mnie do życia na tym świecie i mądre porady udzielane mi
w najważniejszych chwilach.
Wstęp
Obecnie nie wystarczy już znajomość języków HTML i CSS oraz pod-
staw JavaScriptu. Teraz liczy się umiejętność pisania dającego się przete-
stować kodu, budowy interaktywnych interfejsów, integracji programu
z innymi usługami, a czasami nawet umiejętność konfigurowania serwera, a przy-
najmniej wykonywania niektórych czynności na zapleczu. Książka ta zawiera zbiór
opisów ponad 40 praktycznych receptur, wśród których znajdują się zarówno
sprytne sztuczki w CSS, które zadowolą Twoich klientów, jak i wskazówki doty-
czące konfigurowania serwera, które ułatwią życie Tobie i użytkownikom. Znaj-
dziesz tu mieszankę wypróbowanych technik i najnowocześniejszych rozwiązań,
dzięki którym zawsze będziesz potrafił znaleźć najlepsze narzędzia do każdej
pracy.
Adresaci książki
Jeśli tworzysz strony internetowe, ta książka jest dla Ciebie. Jeżeli jesteś projek-
tantem stron internetowych albo zajmujesz się frontową częścią serwisów i chcesz
rozszerzyć swoje horyzonty na nowe obszary, to w tej książce nauczysz się uży-
wać nowych bibliotek i technik, dzięki którym zwiększysz swoją produktywność,
a dodatkowo nauczysz się trochę administracji serwerem.
Jeśli do tej pory koncentrowałeś się na zapleczu i chcesz poznać trochę technik
związanych z frontem, to również w tej książce znajdziesz coś dla siebie. Szcze-
gólnie interesujące mogą być rozdziały o przepływie pracy i testowaniu.
Drobna uwaga: przyjęliśmy założenie, że czytelnik ma pewne doświadczenie
w pisaniu kodu działającego po stronie klienta w języku JavaScript i przy użyciu
12 (cid:23) Web development. Receptury nowej generacji
biblioteki jQuery. Jeśli nie masz takiego doświadczenia, to i tak przejrzyj receptury
i dokładnie przeanalizuj ich kod. Bardziej zaawansowane przykłady potraktuj jak
wyzwanie.
Zawartość książki
W książce tej znajduje się opis wielu tematów, których znajomość jest jednym
z kroków do zostania profesjonalistą. W każdej recepturze najpierw nakreślamy
konkretny problem, a potem analizujemy związany z nim scenariusz, jaki możesz
napotkać. Opisujemy na przykład, jak przetestować stronę w wielu przeglądarkach
internetowych, jak szybko zbudować i automatycznie wdrożyć prosty statyczny
serwis internetowy, jak utworzyć prosty formularz wysyłający wyniki na wybrany
adres e-mail oraz jak skonfigurować serwer Apache, aby przekierowywał adresy
URL i bezpiecznie serwował strony. Opisujemy zarówno sposoby wykonywania
różnych czynności, jak i piszemy, po co to w ogóle robić, dzięki czemu będziesz
miał pewność, że postępujesz słusznie, wykorzystując opisywane techniki we wła-
snych projektach. Ponieważ jednak jest to książka z recepturami, nie możemy
w niej zamieścić zbyt szczegółowych opisów skomplikowanych systemów. Za to
na końcu każdego rozdziału, w sekcji „Kontynuacja”, podpowiadamy, jak dalej
można rozwinąć wybrane tematy.
Receptury są rozmieszczone w tematycznych rozdziałach, ale można je przeglą-
dać na wyrywki. Każdy rozdział zawiera zarówno receptury dla początkujących,
jak i bardziej zaawansowanych programistów. Trudniejsze techniki opisane są na
końcu każdego rozdziału.
W rozdziale 1., „Świecidełka”, znajdują się opisy sztuczek CSS i innych technik
upiększania wyglądu stron internetowych.
W rozdziale 2., „Interfejs użytkownika”, znajdują się opisy różnych technik two-
rzenia interfejsów użytkownika przy użyciu m.in. takich bibliotek JavaScriptu jak
Knockout i Backbone. Dodatkowo w rozdziale tym pokazaliśmy, jak tworzyć
lepsze szablony do wysyłania wiadomości e-mail w formacie HTML.
W rozdziale 3., „Dane”, zamieściliśmy opisy technik przetwarzania danych
pochodzących od użytkowników. Pokazujemy, jak utworzyć prosty formularz kon-
taktowy oraz jak zbudować aplikację opartą na bazie danych przy użyciu aplikacji
CouchApps bazy danych CouchDB.
W rozdziale 4., „Urządzenia przenośne”, ponownie zajmujemy się interfejsami
użytkownika, ale tym razem z perspektywy programowania dla platform przeno-
Wstęp (cid:22) 13
śnych. Poznasz podstawy pracy z biblioteką jQuery Mobile, nauczysz się obsłu-
giwać zdarzenia wielodotykowe oraz dowiesz się, jak i kiedy serwować mobilne
wersje swoich stron użytkownikom.
W rozdziale 5., „Przepływ pracy”, pokażemy Ci sposoby udoskonalenia proce-
sów pracy. Dowiesz się, jak ułatwić sobie pracę z dużymi arkuszami stylów przy
użyciu SASS. Wprowadzimy Cię też do CoffeeScriptu, nowego dialektu języka
JavaScript, w którym można pisać przejrzysty i w pełni zgodny z JavaScriptem kod.
W rozdziale 6., „Testowanie”, nauczysz się automatycznie testować swoje strony
internetowe i używany na nich kod JavaScript. Dzięki temu Twoje produkty
będę znacznie bardziej niezawodne.
W ostatnim rozdziale, 7., „Hosting i wdrażanie”, skoncentrujemy się na publiko-
waniu serwisu w środowisku produkcyjnym. Pokażemy Ci, jak utworzyć maszynę
wirtualną do przetestowania wszystkiego, zanim się to pokaże światu, oraz jak
zabezpieczać strony, jak poprawnie robić przekierowania oraz jak chronić swoją
treść. Ponadto nauczysz się automatyzować proces wdrażania serwisów interne-
towych, dzięki czemu nigdy nie zapomnisz wysłać na serwer jakiegoś pliku.
Co jest potrzebne
W książce tej poznasz wiele nowych technologii. Niektóre z nich są bardzo nowe
i mogą się zmieniać, ale naszym zdaniem są wystarczająco ciekawe i stabilne, by
je przedstawić. Trzeba jednak pamiętać, że tworzenie stron internetowych to
bardzo dynamiczna dziedzina. Dlatego aby ułatwić Ci wypróbowywanie przykła-
dów, skopiowaliśmy i dołączyliśmy do kodu źródłowego receptur także opisywane
biblioteki.
Staraliśmy się, aby lista warunków wstępnych była jak najkrótsza, ale jednak przed
rozpoczęciem lektury warto by było uporządkować kilka spraw.
HTML5 i jQuery
W przykładach kodu używamy języka HTML5, co oznacza, że nie znajdziesz
w nich żadnych samozamykających się znaczników, ale za to znajdziesz nowe
elementy, takie jak <header> i <section>. Jeśli nie znasz języka HTML5, warto
sięgnąć po książkę HTML5 i CSS3. Standardy przyszłości [Hog10].
Będziemy także używać biblioteki jQuery, ponieważ jest ona wykorzystywana
przez wiele z opisywanych bibliotek. W większości przypadków pobierana jest
