TcheLinux Rio Grande 2011Desenhando aplicativos ricos        para Web    Carlos Eduardo “kmiksi” Alves           Agosto de...
Conteúdo da palestra●   Revisão Web●   jQuery●   jQuery UI●   Exemplos de efeitos ricos●   E o Flash?●   Exemplos de aplic...
Revisão Web●   Histórico:    ●   HTML    ●   Introdução de CSS e JS    ●   IE e Flash                 Tchelinux ­ Rio Gran...
Revisão Web●   Hoje:       ●   Web Applications       ●   HTML5, Canvas, Web GL e CSS3       ●   Navegadores “modernos”   ...
jQuery●   Biblioteca Javascript cross­browser (IE6+, FF2+,      Safari3+, Opera9+, Chrome/Chromium)●   Tamanho 31KB●   Fac...
jQuery●   Recursos:       ●   Facilitar a manipulação de elementos HTML       ●   Tratamento de eventos       ●   Animaçõe...
Incluindo a jQuery●   Google Libraries API (http://code.google.com/.../devguide.html)    <script type="text/javascript" sr...
Manipulação de Elementos●   Em DOM:        document.getElementById("info")            .style.display = "block";●   Em jQue...
Manipulação de Elementos●   Em DOM:        var el = document.getElementById("info");          el.parentNode.removeChild(el...
Seletores CSS●   Você pode utilizar seletores CSS para capturar      e manipular elementos DOM:        $("#meu_id").hide()...
Seletores CSS●   Alguns seletores são implementados de maneira      cross­browser:       ●   $("ul.topnav > li").css("bord...
Métodos úteis●   $(...)             .addClass("umaclasse");             .removeClass("outraclasse");             .toogleCl...
Efeitos●   $("div").animate({"left": "+=50px"}, "slow");●   $("div").show("slow");●   $("div").hide("slow");●   $("div").f...
Manipulação de eventos●   Eventos Web nativos (click, load, mouseover...)●   Eventos internos do jQuery●   Eventos de méto...
Alguns exemplos de captura●   $(...)             .click( function(){ … } );             .dblclick( function(){ … } );     ...
Qualquer evento●   Método “.bind()” captura eventos         $("#alerta").bind("click", function(){               alert("Fo...
Eventos customizados●   Método “.trigger()” dispara eventos●   O método “.bind” captura­os e executa a função      predete...
Plug-ins●   Estendem funcionalidades●   Tutoriais de criação disponíveis●   Métodos para facilitar a criação de plugins●  ...
jQuery UI●   Estender os recursos da jQuery●   Elementos de interface gráfica●   Recursos prontos       ●   Animações     ...
Exemplos de efeitos ricos●   Arrastar e soltar●   Transições●   Diálogos●   Abas●   Campos de data●   Slider●   Grid (plug...
E o Flash?●   Tecnologia praticamente onipresente no mercado●   Não necessária para tudo●   Utilização sadia●   Estão pres...
Exemplos de aplicativos ricos●   Jogos        ●   RPGjs (http://rpgjs.com/examples)        ●   GameQuery (http://gamequery...
Fontes de documentação●   Documentação oficial       ●   http://jquery.com       ●   http://jqueryui.com●   Alternativos  ...
Dúvidas?●   E­mail: EduardoPizzani@gmail.com        ●    Blog: http://kmiksi.blogspot.com    ●       Slides: http://slides...
Agradecimentos●   TcheLinux (http://tchelinux.org)       ●   FURG (http://furg.br)●   Todos os participantes do evento    ...
Próximos SlideShares
Carregando em…5
×

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

2.125 visualizações

Publicada em

Desenhando aplicativos ricos para Web - Carlos Eduardo Alves (Sulclínica)
Ao longo dos anos, a Web passou a ser populada por aplicativos flash devido a sua capacidade de produzir aplicativos ricos, fazendo com que muitos desenvolvedores utilizassem a tecnologia para produzir efeitos simples nas páginas web. Porém hoje existe outra realidade, os avanços das tecnologias envolvidas, bem como o desenvolvimento de bibliotecas gráficas em javascript, trouxeram aos desenvolvedores um número maior de possibilidades para trazer os mesmos efeitos ricos às suas páginas. Com base nessas informações, a palestra (para usuários/desenvolvedores de nível intermediário) será focada em mostrar recursos práticos para embelezar as páginas e/ou aprimorar a experiência do usuário final.

0 comentários
2 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
2.125
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
22
Comentários
0
Gostaram
2
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

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

  1. 1. TcheLinux Rio Grande 2011Desenhando aplicativos ricos para Web Carlos Eduardo “kmiksi” Alves Agosto de 2011
  2. 2. 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 Web 2
  3. 3. Revisão Web● Histórico: ● HTML ● Introdução de CSS e JS ● IE e Flash Tchelinux ­ Rio Grande 2011 ­ Desenhando aplicativos ricos para Web 3
  4. 4. 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 Web 4
  5. 5. 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 Tchelinux ­ Rio Grande 2011 ­ Desenhando aplicativos ricos para Web 5
  6. 6. 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 Web 6
  7. 7. 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 Web 7
  8. 8. 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 Web 8
  9. 9. 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 Web 9
  10. 10. 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 Web 10
  11. 11. 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"); Tchelinux ­ Rio Grande 2011 ­ Desenhando aplicativos ricos para Web 11
  12. 12. 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 Web 12
  13. 13. 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 Web 13
  14. 14. 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 Web 14
  15. 15. Alguns exemplos de captura● $(...) .click( function(){ … } ); .dblclick( function(){ … } ); .change( function(){ … } ); .blur( function(){ … } ); .hover( function(){ … } ); .keypress( function(){ … } ); Tchelinux ­ Rio Grande 2011 ­ Desenhando aplicativos ricos para Web 15
  16. 16. 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 Web 16
  17. 17. Eventos customizados● Método “.trigger()” dispara eventos● O método “.bind” captura­os 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 Web 17
  18. 18. 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 Web 18
  19. 19. 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 Web 19
  20. 20. 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 Web 20
  21. 21. 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) Tchelinux ­ Rio Grande 2011 ­ Desenhando aplicativos ricos para Web 21
  22. 22. 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 Web 22
  23. 23. Fontes de documentação● Documentação oficial ● http://jquery.com ● http://jqueryui.com● Alternativos ● http://visualjquery.com ● http://tinyurl.com/jquery­design Tchelinux ­ Rio Grande 2011 ­ Desenhando aplicativos ricos para Web 23
  24. 24. Dúvidas?● E­mail: 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 Web 24
  25. 25. Agradecimentos● TcheLinux (http://tchelinux.org) ● FURG (http://furg.br)● Todos os participantes do evento ● Patrocinadores: Tchelinux ­ Rio Grande 2011 ­ Desenhando aplicativos ricos para Web 25

×