Desenhando aplicativos ricos para Web - Carlos Eduardo Alves (Sulclínica)

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


Revisão Web

● Histórico:

● HTML

● Introdução de CSS e JS

● IE e Flash


Revisão Web

● Hoje:● Web Applications● HTML5, Canvas, Web GL e CSS3● Navegadores “modernos”● Frameworks em Javascript

● Ext JS● YUI● GWT● Prototype● MooTools● jQuery


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


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


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>

http://code.google.com/intl/pt-BR/apis/libraries/devguide.html#jquery

http://www.asp.net/ajaxLibrary/cdn.ashx

http://www.cdnjs.com/#/search/jquery


Manipulação de Elementos

● Em DOM:

document.getElementById("info").style.display = "block";

● Em jQuery:

$("#info").css("display", "block");

$("#info").show();


Manipulação de Elementos

● Em DOM:

var el = document.getElementById("info");el.parentNode.removeChild(el);

● Em jQuery:

$("#info").remove();


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


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


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

http://docs.jquery.com/Main_Page


Efeitos

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

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

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

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

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


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


Alguns exemplos de captura

● $(...)

.click( function(){ … } );

.dblclick( function(){ … } );

.change( function(){ … } );

.blur( function(){ … } );

.hover( function(){ … } );

.keypress( function(){ … } );


Qualquer evento

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

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

});

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

});


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


Plug-ins

● Estendem funcionalidades

● Tutoriais de criação disponíveis

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

● Incluídos como bibliotecas Javascript


jQuery UI

● Estender os recursos da jQuery

● Elementos de interface gráfica

● Recursos prontos

● Animações

● Diálogos

● Efeitos avançados

● Efeitos ricos


Exemplos de efeitos ricos

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


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)


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

http://rpgjs.com/examples

http://gamequery.onaluf.org/demos.php

http://chromeexperiments.com/


Fontes de documentação

● Documentação oficial

● http://jquery.com

● http://jqueryui.com

● Alternativos

● http://visualjquery.com

● http://tinyurl.com/jquerydesign

http://jquery.com/

http://jqueryui.com/

http://visualjquery.com/

http://tinyurl.com/jquery-design


Dúvidas?

● Email: [email protected]

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

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

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

mailto:[email protected]

http://kmiksi.blogspot.com/

http://slideshare.net/kmiksi

http://twitter.com/kmiksi


Agradecimentos

● TcheLinux (http://tchelinux.org)● FURG (http://furg.br)

● Todos os participantes do evento

● Patrocinadores:

http://tchelinux.org/

http://furg.br/

Documents

Desenhando aplicativos ricos para Web - Carlos Eduardo Alves (Sulclínica)