Post on 20-Aug-2015
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: