View
1.675
Download
0
Category
Preview:
Citation preview
Desenhando aplicativos ricosDesenhando aplicativos ricospara Webpara Web
Carlos Eduardo “kmiksi” AlvesAgosto de 2011
TcheLinux Rio Grande 2011
Tchelinux Rio Grande 2011 Desenhando aplicativos ricos para Web2
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 Rio Grande 2011 Desenhando aplicativos ricos para Web3
Revisão Web
● Histórico:
● HTML
● Introdução de CSS e JS
● IE e Flash
Tchelinux Rio Grande 2011 Desenhando aplicativos ricos para Web4
Revisão Web
● Hoje:● Web Applications● HTML5, Canvas, Web GL e CSS3● Navegadores “modernos”● Frameworks em Javascript
● Ext JS● YUI● GWT● Prototype● MooTools● jQuery
Tchelinux Rio Grande 2011 Desenhando aplicativos ricos para Web5
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 Rio Grande 2011 Desenhando aplicativos ricos para Web6
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 Rio Grande 2011 Desenhando aplicativos ricos para Web7
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 Rio Grande 2011 Desenhando aplicativos ricos para Web8
Manipulação de Elementos
● Em DOM:
document.getElementById("info").style.display = "block";
● Em jQuery:
$("#info").css("display", "block");
$("#info").show();
Tchelinux Rio Grande 2011 Desenhando aplicativos ricos para Web9
Manipulação de Elementos
● Em DOM:
var el = document.getElementById("info");el.parentNode.removeChild(el);
● Em jQuery:
$("#info").remove();
Tchelinux Rio Grande 2011 Desenhando aplicativos ricos para Web10
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 Rio Grande 2011 Desenhando aplicativos ricos para Web11
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 Rio Grande 2011 Desenhando aplicativos ricos para Web12
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 Rio Grande 2011 Desenhando aplicativos ricos para Web13
Efeitos
● $("div").animate({"left": "+=50px"}, "slow");
● $("div").show("slow");
● $("div").hide("slow");
● $("div").fadeIn("slow");
● $("div").fadeOut("slow");
Tchelinux Rio Grande 2011 Desenhando aplicativos ricos para Web14
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 Rio Grande 2011 Desenhando aplicativos ricos para Web15
Alguns exemplos de captura
● $(...)
.click( function(){ … } );
.dblclick( function(){ … } );
.change( function(){ … } );
.blur( function(){ … } );
.hover( function(){ … } );
.keypress( function(){ … } );
Tchelinux Rio Grande 2011 Desenhando aplicativos ricos para Web16
Qualquer evento
● Método “.bind()” captura eventos
$("#alerta").bind("click", function(){alert("Foi clicado!!!");
});
$("#draggable").bind("dragstart", function(){alert("Arrastando!!!");
});
Tchelinux Rio Grande 2011 Desenhando aplicativos ricos para Web17
Eventos customizados
● Método “.trigger()” dispara eventos
● O método “.bind” capturaos e executa a função predeterminada
$('#foo').bind('custom', function(event, param1, param2) {
alert(param1 + "\n" + param2);
});
$('#foo').trigger('custom', ['Custom', 'Event']);
Tchelinux Rio Grande 2011 Desenhando aplicativos ricos para Web18
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 Rio Grande 2011 Desenhando aplicativos ricos para Web19
jQuery UI
● Estender os recursos da jQuery
● Elementos de interface gráfica
● Recursos prontos
● Animações
● Diálogos
● Efeitos avançados
● Efeitos ricos
Tchelinux Rio Grande 2011 Desenhando aplicativos ricos para Web20
Exemplos de efeitos ricos
● Arrastar e soltar● Transições● Diálogos● Abas● Campos de data● Slider● Grid (plugins prontos)● Temas (themeroller)● Webcam (plugin)
Tchelinux Rio Grande 2011 Desenhando aplicativos ricos para Web21
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 Rio Grande 2011 Desenhando aplicativos ricos para Web22
Exemplos de aplicativos ricos
● Jogos● RPGjs (http://rpgjs.com/examples)● GameQuery (http://gamequery.onaluf.org/demos.php)
● 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 Rio Grande 2011 Desenhando aplicativos ricos para Web23
Fontes de documentação
● Documentação oficial
● http://jquery.com
● http://jqueryui.com
● Alternativos
● http://visualjquery.com
● http://tinyurl.com/jquerydesign
Tchelinux Rio Grande 2011 Desenhando aplicativos ricos para Web24
Dúvidas?
● Email: EduardoPizzani@gmail.com
● Blog: http://kmiksi.blogspot.com
● Slides: http://slideshare.net/kmiksi
● Twitter: http://twitter.com/kmiksi
Tchelinux Rio Grande 2011 Desenhando aplicativos ricos para Web25
Agradecimentos
● TcheLinux (http://tchelinux.org)● FURG (http://furg.br)
● Todos os participantes do evento
● Patrocinadores:
Recommended