TcheLinux Pelotas 2012Desenhando aplicativos    ricos para Web      com jQuery  Carlos Eduardo “kmiksi” Alves         Agos...
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 ­ Pelotas 2012 ...
Revisão Web●   Hoje:       ●   Web Applications       ●   HTML5, SVG, Canvas, Web GL e CSS3       ●   Navegadores “moderno...
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...
Conceito básico●   Método “.trigger()” dispara eventos●   O método “.bind()” captura­os e executa a função      predetermi...
Capturar eventos●   Método “.bind()” captura eventos         $("#alerta").bind("click", function(){               alert("F...
Atalhos de captura●   $(...)             .click( function(){ … } );             .dblclick( function(){ … } );             ...
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 (não necessariamente jQuery)●   Jogos        ●   RPGjs (http://rpgjs.com/examples)     ...
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://slide...
Agradecimentos           ●   TcheLinux (http://tchelinux.org)               ●    UCPel (http://ucpel.tche.br)●   Todos os ...
Upcoming SlideShare
Loading in...5
×

Desenhando aplicativos ricos para Web com jQuery

1,217

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,217
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
34
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Desenhando aplicativos ricos para Web com jQuery

  1. 1. TcheLinux Pelotas 2012Desenhando aplicativos ricos para Web com jQuery Carlos Eduardo “kmiksi” Alves Agosto de 2012
  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 ­ Pelotas 2012 ­ Desenhando aplicativos ricos para Web com jQuery 2
  3. 3. Revisão Web● Histórico: ● HTML ● Introdução de CSS e JS ● IE e Flash Tchelinux ­ Pelotas 2012 ­ Desenhando aplicativos ricos para Web com jQuery 3
  4. 4. 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 Tchelinux ­ Pelotas 2012 ­ Desenhando aplicativos ricos para Web com jQuery 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 ­ Pelotas 2012 ­ Desenhando aplicativos ricos para Web com jQuery 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 ­ Pelotas 2012 ­ Desenhando aplicativos ricos para Web com jQuery 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 ­ Pelotas 2012 ­ Desenhando aplicativos ricos para Web com jQuery 7
  8. 8. Manipulação de Elementos● Em DOM: document.getElementById("info") .style.display = "block";● Em jQuery: $("#info").css("display", "block"); $("#info").show(); Tchelinux ­ Pelotas 2012 ­ Desenhando aplicativos ricos para Web com jQuery 8
  9. 9. Manipulação de Elementos● Em DOM: var el = document.getElementById("info"); el.parentNode.removeChild(el);● Em jQuery: $("#info").remove(); Tchelinux ­ Pelotas 2012 ­ Desenhando aplicativos ricos para Web com jQuery 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 ­ Pelotas 2012 ­ Desenhando aplicativos ricos para Web com jQuery 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 ­ Pelotas 2012 ­ Desenhando aplicativos ricos para Web com jQuery 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 ­ Pelotas 2012 ­ Desenhando aplicativos ricos para Web com jQuery 12
  13. 13. Efeitos● $("div").animate({"left": "+=50px"}, "slow");● $("div").show("slow");● $("div").hide("slow");● $("div").fadeIn("slow");● $("div").fadeOut("slow"); Tchelinux ­ Pelotas 2012 ­ Desenhando aplicativos ricos para Web com jQuery 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 ­ Pelotas 2012 ­ Desenhando aplicativos ricos para Web com jQuery 14
  15. 15. Conceito básico● Método “.trigger()” dispara eventos● O método “.bind()” captura­os e executa a função  predeterminada $(#foo).bind(custom, function(event, param, param2){   alert(param + "n" + param2); }); $(#foo).trigger(custom, [Custom, Event]); Tchelinux ­ Pelotas 2012 ­ Desenhando aplicativos ricos para Web com jQuery 15
  16. 16. Capturar eventos● Método “.bind()” captura eventos $("#alerta").bind("click", function(){ alert("Foi clicado!!!"); }); $("#draggable").bind("dragstart", function(){ alert("Arrastando!!!"); }); Tchelinux ­ Pelotas 2012 ­ Desenhando aplicativos ricos para Web com jQuery 16
  17. 17. Atalhos de captura● $(...) .click( function(){ … } ); .dblclick( function(){ … } ); .change( function(){ … } ); .blur( function(){ … } ); .hover( function(){ … } ); .keypress( function(){ … } ); Tchelinux ­ Pelotas 2012 ­ Desenhando aplicativos ricos para Web com jQuery 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 ­ Pelotas 2012 ­ Desenhando aplicativos ricos para Web com jQuery 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 ­ Pelotas 2012 ­ Desenhando aplicativos ricos para Web com jQuery 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 ­ Pelotas 2012 ­ Desenhando aplicativos ricos para Web com jQuery 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 ­ Pelotas 2012 ­ Desenhando aplicativos ricos para Web com jQuery 21
  22. 22. 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 Tchelinux ­ Pelotas 2012 ­ Desenhando aplicativos ricos para Web com jQuery 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 ­ Pelotas 2012 ­ Desenhando aplicativos ricos para Web com jQuery 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 ­ Pelotas 2012 ­ Desenhando aplicativos ricos para Web com jQuery 24
  25. 25. Agradecimentos ● TcheLinux (http://tchelinux.org) ● UCPel (http://ucpel.tche.br)● Todos os participantes do evento ● Apoiadores: Tchelinux ­ Pelotas 2012 ­ Desenhando aplicativos ricos para Web com jQuery 25
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×