Web_development_Receptury_nowej_generacji_twstnr.pdf

Tytuł oryginału: Web Development Recipes

Tłumaczenie: Łukasz Piwko

ISBN: 978-83-246-5149-8

No part of this publication may be reproduced, stored in a retrieval system, or transmitted,

in any form, or by any means, electronic, mechanical, photocopying, recording, or otherwise,

without the prior consent of the publisher.

Many of the designations used by manufacturers and sellers to distinguish their products are claimed

as trademarks. Where those designations appear in this book, and The Pragmatic Programmers, LLC

was aware of a trademark claim, the designations have been printed in initial capital letters or in all

capitals. The Pragmatic Starter Kit, The Pragmatic Programmer, Pragmatic Programming, Pragmatic

Bookshelf, PragProg and the linking g device are trademarks of The Pragmatic Programmers, LLC.

Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej

publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną,

fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje

naruszenie praw autorskich niniejszej publikacji.

Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich

właścicieli.

Materiały graficzne na okładce zostały wykorzystane za zgodą iStockPhoto Inc.

Wydawnictwo HELION dołożyło wszelkich starań, by zawarte w tej książce informacje były kompletne

i rzetelne. Nie bierze jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym

ewentualne naruszenie praw patentowych lub autorskich. Wydawnictwo HELION nie ponosi również

żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych

w książce.

Wydawnictwo HELION

ul. Kościuszki 1c, 44-100 GLIWICE

tel. 32 231 22 19, 32 230 98 63

e-mail: helion@helion.pl

WWW: http://helion.pl (księgarnia internetowa, katalog książek)

Pliki z przykładami omawianymi w książce można znaleźć pod adresem:

ftp://ftp.helion.pl/przyklady/twstnr.zip

Drogi Czytelniku!

Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres

http://helion.pl/user/opinie/twstnr

Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję.

Printed in Poland.

• Kup książkę

• Poleć książkę

• Oceń książkę

• Księgarnia internetowa

• Lubię to! » Nasza społeczność

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

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: