web development. receptury nowej generacji pełna wersja.pdf

Spis treci

Podzikowania ..............................................................................................7

Wstp ...........................................................................................................11

Rozdzia 1. wiecideka ..............................................................................17

Receptura 1.

Stylizowanie przycisków i czy ...........................................................17

Receptura 2.

Stylizowanie cytatów przy uyciu CSS ................................................21

Receptura 3.

Tworzenie animacji przy uyciu transformacji CSS3 ............................28

Receptura 4.

Tworzenie interaktywnych pokazów slajdów przy uyciu jQuery ............33

Receptura 5.

Tworzenie i stylizowanie wewntrztekstowych okienek pomocy ..............38

Rozdzia 2. Interfejs uytkownika ............................................................47

Receptura 6. Tworzenie szablonu wiadomoci e-mail ................................................47

Receptura 7. Wywietlanie treci na kartach .............................................................58

Receptura 8. Rozwijanie i zwijanie treci z zachowaniem zasad dostpnoci ...............65

Receptura 9. Nawigacja po stronie internetowej przy uyciu klawiatury ......................71

Receptura 10. Tworzenie szablonów HTML przy uyciu systemu Mustache ..............79

Receptura 11. Dzielenie treci na strony ....................................................................84

Receptura 12. Zapamitywanie stanu w Ajaksie ........................................................90

Receptura 13. Tworzenie interaktywnych interfejsów uytkownika

przy uyciu biblioteki Knockout.js .......................................................95

Receptura 14. Organizacja kodu przy uyciu 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 uyciu Highcharts ........................129

Receptura 17. Tworzenie prostego formularza kontaktowego ....................................137

Receptura 18. Pobieranie danych z innych serwisów przy uyciu formatu JSONP .....144

Web development. Receptury nowej generacji

Receptura 19. Tworzenie widetów do osadzenia w innych serwisach ........................147

Receptura 20. Budowanie witryny przy uyciu JavaScriptu i CouchDB .....................153

Rozdzia 4. Urzdzenia przenone ..........................................................163

Receptura 21. Dostosowywanie stron do wymogów urzdze przenonych .................163

Receptura 22. Menu rozwijane reagujce na dotyk ...................................................168

Receptura 23. Operacja „przecignij i upu” w urzdzeniach przenonych ...............171

Receptura 24. Tworzenie interfejsów przy uyciu biblioteki jQuery Mobile ................178

Receptura 25. Sprite’y w CSS ................................................................................187

Rozdzia 5. Przepyw pracy ......................................................................191

Receptura 26. Szybkie tworzenie interaktywnych prototypów stron ............................191

Receptura 27. Tworzenie prostego bloga przy uyciu biblioteki Jekyll ........................200

Receptura 28. Tworzenie modularnych arkuszy stylów przy uyciu Sass ....................207

Receptura 29. Bardziej przejrzysty kod JavaScript, czyli CoffeeScript ........................215

Receptura 30. Zarzdzanie plikami przy uyciu narzdzia Git ..................................222

Rozdzia 6. Testowanie ............................................................................233

Receptura 31. Debugowanie JavaScriptu .................................................................233

Receptura 32. ledzenie aktywnoci uytkowników przy uyciu map cieplnych ...........239

Receptura 33. Testowanie przegldarek przy uyciu Selenium ..................................242

Receptura 34. Testowanie stron internetowych przy uyciu Selenium i Cucumber ......247

Receptura 35. Testowanie kodu JavaScript przy uyciu Jasmine ................................260

Rozdzia 7. Hosting i wdraanie ..............................................................271

Receptura 36. Wspólna praca nad stron poprzez Dropbox ......................................271

Receptura 37. Tworzenie maszyny wirtualnej ...........................................................275

Receptura 38. Zmienianie konfiguracji serwera WWW przy uyciu programu Vim ......279

Receptura 39. Zabezpieczanie serwera Apache za pomoc SSL i HTTPS ..............284

Receptura 40. Zabezpieczanie treci .......................................................................288

Receptura 41. Przepisywanie adresów URL w celu zachowania czy .......................292

Receptura 42. Automatyzacja procesu wdraania statycznych serwisów

za pomoc Jammit i Rake .................................................................296

Dodatek A. Instalowanie jzyka Ruby ...................................................305

Dodatek B. Bibliografia ............................................................................309

Skorowidz ..................................................................................................311

Rozdzia 2. • Interfejs uytkownika

Receptura 10.

Tworzenie szablonów HTML

przy uyciu systemu Mustache

Problem

Do utworzenia naprawd wyjtkowego interfejsu potrzebne jest zastosowanie

zarówno dynamicznych, jak i asynchronicznych technik programowania. Dziki

Ajaksowi i takim bibliotekom jak jQuery moemy modyfikowa interfejs uytkow-

nika bez zmieniania jego kodu HTML, poniewa potrzebne elementy dodamy

za pomoc JavaScriptu. Elementy te zazwyczaj dodaje si, stosujc technik

konkatenacji acuchów. Powstay w wyniku tego kod jest, niestety, zagmatwany

i atwo w nim popeni bd. Peno w nim mieszajcych si ze sob pojedynczych

i podwójnych cudzysowów oraz niekoczcych si acuchów wywoa metody

append() z biblioteki jQuery.

Skadniki

jQuery

Mustache.js

Rozwizanie

Na szczcie, s nowoczesne narzdzia, takie jak Mustache, dziki którym moemy

pisa prawdziwy kod HTML, renderowa przy jego uyciu dane oraz wstawia

go do dokumentów. Mustache to system szablonów HTML dostpny w kilku

popularnych jzykach programowania. Implementacja JavaScript pozwala na

pisanie widoków dla klienta przy uyciu czystego kodu HTML cakowicie

oddzielonego od kodu JavaScript. Mona w nim uywa take instrukcji logicz-

nych i iteracji.

Mustache pozwala uproci tworzenie kodu HTML podczas generowania nowej

treci. Skadni tego narzdzia poznamy na przykadzie aplikacji JavaScript do

zarzdzania produktami.

Obecnie aplikacja ta umoliwia dodawanie nowych produktów do listy. Ponie-

wa wszystkie dania s obsugiwane przez JavaScript i Ajax, w przykadzie tym

uywamy naszego standardowego serwera roboczego. Gdy uytkownik wypeni

formularz dodawania nowego produktu, wysya do serwera danie zapisania

Web development. Receptury nowej generacji

tego produktu i wyrenderowania nowego produktu na licie. Aby doda produkt

do listy, musimy zastosowa konkatenacj acuchów, której kod jest zagmatwany

i nieelegancki:

mustache/submit.html

var newProduct = $( '<li></li>' );

newProduct.append( '<span class="product-name">' +

product.name + '</span>' );

newProduct.append( '<em class="product-price">' +

product.price + '</em>' );

newProduct.append( '<div class="product-description">' +

product.description + '</div>' );

productsList.append(newProduct);

Aby uy systemu Mustache.js , wystarczy go tylko zaadowa na stron. Jedn

z wersji tego pliku znajdziesz w pakiecie kodu towarzyszcym tej ksice, ale

moesz te pobra jego najnowsz wersj z serwisu GitHub 7 .

Renderowanie szablonu

Aby przerobi nasz istniejc aplikacj, przede wszystkim musimy dowiedzie

si, jak wyrenderowa szablon przy uyciu Mustache. Najprostszym sposobem na

zrobienie tego jest uycie funkcji to_html() .

Mustache.to_html(templateString, data);

Funkcja ta przyjmuje dwa argumenty. Pierwszy jest acuchem szablonowego kodu

HTML, w którym ma odbywa si renderowanie, a drugi to dane, które maj

zosta do tego szablonu wstawione. Zmienna data jest obiektem, którego klucze

w szablonie zostaj zamienione na lokalne zmienne. Spójrz na poniszy kod:

var artist = {name: " John Coltrane "};

var rendered = Mustache.to_html( '<span class="artist name">{{ name }}</span>' ,

artist);

$( 'body' ).append(rendered);

Zmienna rendered zawiera nasz ostateczny kod HTML zwrócony przez metod

to_html() . Aby umieci wasno name w naszym kodzie HTML, uylimy

znaczników Mustache ograniczonych podwójnymi klamrami. W klamrach tych

umieszcza si nazwy wasnoci. Ostatni wiersz kodu dodaje wyrenderowany kod

HTML do elementu <body> .

Jest to najprostsza technika renderowania szablonu przy uyciu Mustache.

W naszej aplikacji bdzie wicej kodu zwizanego z wysyaniem dania do serwera

w celu pobrania danych, ale proces tworzenia szablonu pozostanie bez zmian.

https://github.com/janl/mustache.js

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: