Your SlideShare is downloading. ×
  • Like
Desenhando aplicativos ricos para Web com jQuery
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Desenhando aplicativos ricos para Web com jQuery

  • 1,131 views
Published

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,131
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
32
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. TcheLinux Pelotas 2012Desenhando aplicativos ricos para Web com jQuery Carlos Eduardo “kmiksi” Alves Agosto de 2012
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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