Desenhando aplicativos ricos para Web com jQuery

TcheLinux Pelotas 2012

Desenhando aplicativos
ricos para Web
com jQuery

Carlos Eduardo “kmiksi” Alves
Agosto de 2012

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

Revisão Web

● Histórico:

● HTML

● Introdução de CSS e JS

● IE e Flash

3

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
4

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

5

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

6

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>

7

Manipulação de Elementos

● Em DOM:
document.getElementById("info")
.style.display = "block";

● Em jQuery:
$("#info").css("display", "block");
$("#info").show();

8

Manipulação de Elementos

● Em DOM:
var el = document.getElementById("info");
el.parentNode.removeChild(el);

● Em jQuery:
$("#info").remove();

9

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

10

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

11

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
12

Efeitos
● $("div").animate({"left": "+=50px"}, "slow");

● $("div").show("slow");

● $("div").hide("slow");

● $("div").fadeIn("slow");

● $("div").fadeOut("slow");

13

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

14

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

15

Capturar eventos
● Método “.bind()” captura eventos

$("#alerta").bind("click", function(){
alert("Foi clicado!!!");
});

$("#draggable").bind("dragstart", function(){
alert("Arrastando!!!");
});

16

Atalhos de captura
● $(...)
.click( function(){ … } );
.dblclick( function(){ … } );
.change( function(){ … } );
.blur( function(){ … } );
.hover( function(){ … } );
.keypress( function(){ … } );

17

Plug-ins
● Estendem funcionalidades

● Tutoriais de criação disponíveis

● Métodos para facilitar a criação de plugins

● Incluídos como bibliotecas Javascript

18

jQuery UI
● Estender os recursos da jQuery
● Elementos de interface gráfica
● Recursos prontos
● Animações
● Diálogos
● Efeitos avançados
● Efeitos ricos

19

Exemplos de efeitos ricos
● Arrastar e soltar
● Transições
● Diálogos
● Abas
● Campos de data
● Slider
● Grid (plugins prontos)
● Temas (themeroller)
● Webcam (plugin)
20

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)

21

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

22

Fontes de documentação
● Documentação oficial
● http://jquery.com

● http://jqueryui.com

● Alternativos
● http://visualjquery.com
● http://tinyurl.com/jquerydesign

23

Dúvidas?
● Email: EduardoPizzani@gmail.com

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

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

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

24

Agradecimentos
● TcheLinux (http://tchelinux.org)
● UCPel (http://ucpel.tche.br)
● Todos os participantes do evento
● Apoiadores:

25

Desenhando aplicativos ricos para Web com jQuery

Mais conteúdo relacionado

Semelhante a Desenhando aplicativos ricos para Web com jQuery

Desenhando aplicativos ricos para Web com jQuery