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.
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 crossbrowser (IE6+, FF2+,
Safari3+, Opera9+, Chrome/Chromium)
● Tamanho 31KB
● Facilita a vida de desenvolvedores e designers
● Mais popular, bem documentada, extensível através
de plugins
● 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
crossbrowser:
● $("ul.topnav > li").css("border", "3px double red");
● Alguns seletores e pseudoseletores 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
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()” capturaos 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
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 plugins 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/jquerydesign
Tchelinux Pelotas 2012 Desenhando aplicativos ricos para Web com jQuery
23
24. Dúvidas?
● Email: 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