Desenhando aplicativos ricos para Web com jQuery

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

Transcript of Desenhando aplicativos ricos para Web com jQuery

Page 1: Desenhando aplicativos ricos para Web com jQuery

Desenhando aplicativos Desenhando aplicativos ricos para Webricos para Web

com jQuerycom jQuery

Carlos Eduardo “kmiksi” AlvesAgosto de 2012

TcheLinux Pelotas 2012

Page 2: Desenhando aplicativos ricos para Web com jQuery

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

Page 3: Desenhando aplicativos ricos para Web com jQuery

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

Page 4: Desenhando aplicativos ricos para Web com jQuery

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

Page 5: Desenhando aplicativos ricos para Web com 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

Page 6: Desenhando aplicativos ricos para Web com jQuery

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

Page 7: Desenhando aplicativos ricos para Web com jQuery

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>

Page 8: Desenhando aplicativos ricos para Web com jQuery

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();

Page 9: Desenhando aplicativos ricos para Web com jQuery

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();

Page 10: Desenhando aplicativos ricos para Web com jQuery

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");

Page 11: Desenhando aplicativos ricos para Web com jQuery

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");

Page 12: Desenhando aplicativos ricos para Web com jQuery

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

Page 13: Desenhando aplicativos ricos para Web com jQuery

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");

Page 14: Desenhando aplicativos ricos para Web com jQuery

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

Page 15: Desenhando aplicativos ricos para Web com jQuery

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']);

Page 16: Desenhando aplicativos ricos para Web com jQuery

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!!!");

});

Page 17: Desenhando aplicativos ricos para Web com jQuery

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(){ … } );

Page 18: Desenhando aplicativos ricos para Web com jQuery

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

Page 19: Desenhando aplicativos ricos para Web com jQuery

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

Page 20: Desenhando aplicativos ricos para Web com jQuery

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)

Page 21: Desenhando aplicativos ricos para Web com jQuery

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)

Page 22: Desenhando aplicativos ricos para Web com jQuery

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

Page 23: Desenhando aplicativos ricos para Web com jQuery

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

Page 24: Desenhando aplicativos ricos para Web com jQuery

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

Dúvidas?

● E­mail: [email protected]

● Blog: http://kmiksi.blogspot.com

● Slides: http://slideshare.net/kmiksi

● Twitter: http://twitter.com/kmiksi

Page 25: Desenhando aplicativos ricos para Web com jQuery

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: