Web development. Receptury nowej generacji PDF
Preview Web development. Receptury nowej generacji
Spis 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
The list of books you might like
