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 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 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 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 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()” 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 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 plug­ins 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/jquery­design

Tchelinux ­ Pelotas 2012 ­ Desenhando aplicativos ricos para Web com jQuery24

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 jQuery25

Agradecimentos

● TcheLinux (http://tchelinux.org)

● UCPel (http://ucpel.tche.br)

● Todos os participantes do evento● Apoiadores: