Upload
carlos-eduardo-alves
View
1.206
Download
1
Embed Size (px)
Citation preview
Desenhando aplicativos Desenhando aplicativos ricos para Webricos para Web
com jQuerycom jQuery
Carlos Eduardo “kmiksi” AlvesAgosto de 2012
TcheLinux Pelotas 2012
Tchelinux Pelotas 2012 Desenhando aplicativos ricos para Web com jQuery2
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 jQuery3
Revisão Web
● Histórico:
● HTML
● Introdução de CSS e JS
● IE e Flash
Tchelinux Pelotas 2012 Desenhando aplicativos ricos para Web com jQuery4
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 jQuery5
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 jQuery6
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 jQuery7
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 jQuery8
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 jQuery9
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 jQuery10
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 jQuery11
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 jQuery12
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 jQuery13
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 jQuery14
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 jQuery15
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 jQuery16
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 jQuery17
Atalhos de captura
● $(...)
.click( function(){ … } );
.dblclick( function(){ … } );
.change( function(){ … } );
.blur( function(){ … } );
.hover( function(){ … } );
.keypress( function(){ … } );
Tchelinux Pelotas 2012 Desenhando aplicativos ricos para Web com jQuery18
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 jQuery19
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 jQuery20
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 jQuery21
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 jQuery22
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 jQuery23
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 jQuery24
Dúvidas?
● Email: [email protected]
● Blog: http://kmiksi.blogspot.com
● Slides: http://slideshare.net/kmiksi
● Twitter: http://twitter.com/kmiksi
Tchelinux Pelotas 2012 Desenhando aplicativos ricos para Web com jQuery25
Agradecimentos
● TcheLinux (http://tchelinux.org)
● UCPel (http://ucpel.tche.br)
● Todos os participantes do evento● Apoiadores: