web development. receptury nowej generacji cała książka, ebooki

[ Pobierz całość w formacie 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
 6
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
79
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
 80
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.
7
https://github.com/janl/mustache.js
  [ Pobierz całość w formacie PDF ]