O documento apresenta uma palestra sobre desenvolvimento de aplicações ricas para web com jQuery. A palestra discute a história da web, jQuery e jQuery UI, exemplos de efeitos e plugins, e como jQuery pode ser usado para manipular elementos, eventos, animações e Ajax sem o uso de Flash. Fontes de documentação sobre jQuery e exemplos de aplicativos ricos também são apresentados.

1. TcheLinux Pelotas 2012
Desenhando aplicativos
ricos para Web
com jQuery
Carlos Eduardo “kmiksi” Alves
Agosto de 2012

2. Conteúdo da palestra
● Revisão Web
● jQuery
● jQuery UI
● Exemplos de efeitos ricos
● E o Flash?
● Exemplos de aplicativos ricos
● Fontes de documentação
Tchelinux ­ Pelotas 2012 ­ Desenhando aplicativos ricos para Web com jQuery
2

3. Revisão Web
● Histórico:
● HTML
● Introdução de CSS e JS
● IE e Flash
Tchelinux ­ Pelotas 2012 ­ Desenhando aplicativos ricos para Web com jQuery
3

4. Revisão Web
● Hoje:
● Web Applications
● HTML5, SVG, Canvas, Web GL e CSS3
● Navegadores “modernos”
● Frameworks em Javascript
● Ext JS
● YUI
● GWT
● Prototype
● MooTools
● jQuery
Tchelinux ­ Pelotas 2012 ­ Desenhando aplicativos ricos para Web com jQuery
4

5. jQuery
● Biblioteca Javascript cross­browser (IE6+, FF2+,
Safari3+, Opera9+, Chrome/Chromium)
● Tamanho 31KB
● Facilita a vida de desenvolvedores e designers
● Mais popular, bem documentada, extensível através
de plug­ins
● Software livre, com trechos de códigos contribuídos
por individuais do mundo todo
Tchelinux ­ Pelotas 2012 ­ Desenhando aplicativos ricos para Web com jQuery
5

6. jQuery
● Recursos:
● Facilitar a manipulação de elementos HTML
● Tratamento de eventos
● Animações e efeitos
● Interações AJAX
● Redução e reuso de código
Tchelinux ­ Pelotas 2012 ­ Desenhando aplicativos ricos para Web com jQuery
6

7. Incluindo a jQuery
● Google Libraries API (http://code.google.com/.../devguide.html)
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/
jquery/1.6.2/jquery.min.js"></script>
● Microsoft Ajax CDN (http://www.asp.net/ajaxLibrary/cdn.ashx)
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/
jquery-1.6.2.min.js"></script>
● CDNJS (http://www.cdnjs.com/#/search/jquery)
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/
jquery/1.6.2/jquery.min.js"></script>
● Local
<script type="text/javascript" src="js/jquery.min.js"></script>
● Instalado no servidor
<script type="text/javascript" src="/javascript/jquery/jquery.min.js"></script>
Tchelinux ­ Pelotas 2012 ­ Desenhando aplicativos ricos para Web com jQuery
7

8. Manipulação de Elementos
● Em DOM:
document.getElementById("info")
.style.display = "block";
● Em jQuery:
$("#info").css("display", "block");
$("#info").show();
Tchelinux ­ Pelotas 2012 ­ Desenhando aplicativos ricos para Web com jQuery
8

9. Manipulação de Elementos
● Em DOM:
var el = document.getElementById("info");
el.parentNode.removeChild(el);
● Em jQuery:
$("#info").remove();
Tchelinux ­ Pelotas 2012 ­ Desenhando aplicativos ricos para Web com jQuery
9

10. Seletores CSS
● Você pode utilizar seletores CSS para capturar
e manipular elementos DOM:
$("#meu_id").hide();
$(".minha_classe").show();
$("#meu_id, .minha_classe").toogle();
$("form input").addClass("campo_do_form");
Tchelinux ­ Pelotas 2012 ­ Desenhando aplicativos ricos para Web com jQuery
10

11. Seletores CSS
● Alguns seletores são implementados de maneira
cross­browser:
● $("ul.topnav > li").css("border", "3px double red");
● Alguns seletores e pseudo­seletores são
implementados como extensões jQuery:
● $(":button").css("background", "yellow");
$("div:animated").toggleClass("colored");
Tchelinux ­ Pelotas 2012 ­ Desenhando aplicativos ricos para Web com jQuery
11

12. Métodos úteis
● $(...)
.addClass("umaclasse");
.removeClass("outraclasse");
.toogleClass("maisumaclasse");
.html("<p>innerHTML aqui</p>");
.text("um texto");
.attr("alt", "TcheLinux.org");
.show();
.hide();
.remove();
● http://docs.jquery.com/Main_Page
Tchelinux ­ Pelotas 2012 ­ Desenhando aplicativos ricos para Web com jQuery
12

13. Efeitos
● $("div").animate({"left": "+=50px"}, "slow");
● $("div").show("slow");
● $("div").hide("slow");
● $("div").fadeIn("slow");
● $("div").fadeOut("slow");
Tchelinux ­ Pelotas 2012 ­ Desenhando aplicativos ricos para Web com jQuery
13

14. Manipulação de eventos
● Eventos Web nativos (click, load, mouseover...)
● Eventos internos do jQuery
● Eventos de métodos do jQuery
● Eventos criados pelo usuário
Tchelinux ­ Pelotas 2012 ­ Desenhando aplicativos ricos para Web com jQuery
14

15. Conceito básico
● Método “.trigger()” dispara eventos
● O método “.bind()” captura­os e executa a função
predeterminada
$('#foo').bind('custom', function(event, param, param2){
alert(param + "n" + param2);
});
$('#foo').trigger('custom', ['Custom', 'Event']);
Tchelinux ­ Pelotas 2012 ­ Desenhando aplicativos ricos para Web com jQuery
15

16. Capturar eventos
● Método “.bind()” captura eventos
$("#alerta").bind("click", function(){
alert("Foi clicado!!!");
});
$("#draggable").bind("dragstart", function(){
alert("Arrastando!!!");
});
Tchelinux ­ Pelotas 2012 ­ Desenhando aplicativos ricos para Web com jQuery
16

17. Atalhos de captura
● $(...)
.click( function(){ … } );
.dblclick( function(){ … } );
.change( function(){ … } );
.blur( function(){ … } );
.hover( function(){ … } );
.keypress( function(){ … } );
Tchelinux ­ Pelotas 2012 ­ Desenhando aplicativos ricos para Web com jQuery
17

18. Plug-ins
● Estendem funcionalidades
● Tutoriais de criação disponíveis
● Métodos para facilitar a criação de plugins
● Incluídos como bibliotecas Javascript
Tchelinux ­ Pelotas 2012 ­ Desenhando aplicativos ricos para Web com jQuery
18

19. jQuery UI
● Estender os recursos da jQuery
● Elementos de interface gráfica
● Recursos prontos
● Animações
● Diálogos
● Efeitos avançados
● Efeitos ricos
Tchelinux ­ Pelotas 2012 ­ Desenhando aplicativos ricos para Web com jQuery
19

20. Exemplos de efeitos ricos
● Arrastar e soltar
● Transições
● Diálogos
● Abas
● Campos de data
● Slider
● Grid (plugins prontos)
● Temas (themeroller)
● Webcam (plugin)
Tchelinux ­ Pelotas 2012 ­ Desenhando aplicativos ricos para Web com jQuery
20

21. E o Flash?
● Tecnologia praticamente onipresente no mercado
● Não necessária para tudo
● Utilização sadia
● Estão presentes em plug­ins de terceiros para
jQuery (webcam, slider3D)
Tchelinux ­ Pelotas 2012 ­ Desenhando aplicativos ricos para Web com jQuery
21

22. Exemplos de aplicativos
ricos (não necessariamente jQuery)
● Jogos
● RPGjs (http://rpgjs.com/examples)
● GameQuery (http://gamequeryjs.com/demo/)
● Chrome Experiments (http://chromeexperiments.com)
● Aplicativos ricos
● Google Mail, Yahoo!Mail
● Google Docs
● Facebook, Twitter, Google Plus
● Páginas ricas X Páginas ricas em Flash X Páginas simples em Flash
Tchelinux ­ Pelotas 2012 ­ Desenhando aplicativos ricos para Web com jQuery
22

23. Fontes de documentação
● Documentação oficial
● http://jquery.com
● http://jqueryui.com
● Alternativos
● http://visualjquery.com
● http://tinyurl.com/jquery­design
Tchelinux ­ Pelotas 2012 ­ Desenhando aplicativos ricos para Web com jQuery
23

24. Dúvidas?
● E­mail: EduardoPizzani@gmail.com
● Blog: http://kmiksi.blogspot.com
● Slides: http://slideshare.net/kmiksi
● Twitter: http://twitter.com/kmiksi
Tchelinux ­ Pelotas 2012 ­ Desenhando aplicativos ricos para Web com jQuery
24

25. Agradecimentos
● TcheLinux (http://tchelinux.org)
● UCPel (http://ucpel.tche.br)
● Todos os participantes do evento
● Apoiadores:
Tchelinux ­ Pelotas 2012 ­ Desenhando aplicativos ricos para Web com jQuery
25