0

jQuery e ASP.Net MVC a dupla dinâmica

9,421

Published on

Apresentação utilizada no evento do Codificando 2010 no dia 19/06/2010;

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
9,421
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
50
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "jQuery e ASP.Net MVC a dupla dinâmica"

  1. 1. Victor Cavalcante Arquiteto de Software http://www.cavalcante.net http://twitter.com/vcavalcante victor@cavalcante.net
  2. 2. 2 Agenda  WebStandards e o ASP.Net MVC  jQuery  Seletores  Eventos  Plugins  Ajax  Json
  3. 3. 3 O que é uma aplicação Web?  Sistemas de informática desenvolvidos para rodar através de um Browser;  Utiliza um servidor para fazer o processamento;  A comunicação é feita através do protocolo HTTP;  Existe algumas tecnologias/linguagens padrões para exibição do conteúdo nos browsers;
  4. 4. 4 Tecnologias/Linguagens  Tecnologias para desenvolvimento de interfaces ricas como:  Linguagens que podem ser utilizadas para desenvolvimento de interfaces ricas: HTML CSS JavaScript
  5. 5. O que é WebStandards  Padrões Web;  É um conjunto de padrões produzidos pela W3C;  Destinado a orientar como deve ser desenvolvido páginas/sistemas para internet; 5
  6. 6. O que é WebStandards  A base do desenvolvimento Web;  Visa a separação das camadas;  Composto por 3 partes; 6
  7. 7. Por que WebStandards?  Todos os sites desenvolvidos segundo os padrões W3C podem ser acessados e visualizados por qualquer pessoa ou tecnologia, independente de hardware ou software;  Acessibilidade;  Portabilidade;  Velocidade; 7
  8. 8. O que é o jQuery Poderosa biblioteca JavaScript  Simplifica tarefas comuns com JavaScript  Acessa qualquer parte das páginas  usando CSS ou expressões XPath-like  Modifica a aparência das páginas  Altera o conteúdo das páginas  Adiciona animação à página  Prove suporte a Ajax  Abstrai os erros dos browsers 8
  9. 9. Por que o jQuery  Leve  14kb (Minified and Gzipped)  Suporte Cross Browser  (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)  Sintaxe CSS like  Fácil para web-developers e web-designers  Comunidade ativa  Extensibilidade com muitos plugins  Aproximadamente 5000 plugins cadastrados 9
  10. 10. Como funciona?  Acrescente o arquivo do jQuery na página  Já está pronto para usar o jQuery 10
  11. 11. jQuery  Selecionar parte do documento é o fundamental  O objeto jQuery é um wrapper para um grupo de elementos selecionados  $() function é um factory method que cria os objetos jQuery 11
  12. 12. jQuery – Seletores - CSS $(“p”) nome do elemento (tag) $(“#id”) identificador (id do CSS) $(“.class”) nome da classe do CSS $(“p.class”) elemento com 1 determinada classe $(“p a”) link que está dentro de um elemento p $(“p > a”) link que é filho direto de um elemento p 12
  13. 13. Demo
  14. 14. jQuery – Seletores - filtros $(“p:first”) primeiro parágrafo $(“li:last”) último item da lista $(“a:eq(3)”) quarto link $(“p:even”) ou p:odd parágrafo sim, parágrafo não $(“a:gt(3)”) ou a:lt(3) todo link acima do quarto $(“a:contains(‘click’)”) links que contenha a palavra click $(“:checked”) todos os itens “checados” $(“:radio”) todos os inputs do tipo radio 14
  15. 15. Demo
  16. 16. jQuery – Eventos  $(document).ready();  $(“#menu a”).click();  $(“form”).submit();  $(“select”).bind(“change”,function(){}) 16
  17. 17. Demo
  18. 18. jQuery – Plugins  Ajax (254)  Animation and Effects (408)  Browser Tweaks (96)  Data (190)  DOM (191)  Drag-and-Drop (47)  Events (160)  Forms (454)  Integration (134)  JavaScript (189)  jQuery Extensions (275)  Layout (249)  Media (172)  Menus (135)  Metaplugin (30)  Navigation (194)  Tables (90)  User Interface (785)  Utilities (413)  Widgets (307)  Windows and Overlays (134) 18
  19. 19. Demo
  20. 20. 20  Um novo template de projeto no Visual Studio  Uma opção  Uma nova maneira de desenvolver com ASP.Net  Um template mais opinativo O que é o ASP.Net MVC
  21. 21. Como funciona o ASP.NET MVC 21 Requisição HTTP Resposta (HTML, JSON, etc)
  22. 22. E agora?  HTML  JavaScript  Verbos HTTP  Controle de estado da Aplicação  Grandes poderes trazem grandes responsabilidades 22
  23. 23. A mudança 23
  24. 24. AJAX  Asynchronous JavaScript and XML(AJAX)  Técnica de desenvolvimento web para criar aplicações web  Troca pequenos pedaços de dados ao invés de carregar a página inteira.  Permite que a página troque seu conteúdo sem atualizar a página  É uma tecnologia do lado do cliente, não importando o lado do servidor 24
  25. 25. AJAX - Derivações  AJAX Asynchronous JavaScript and XML  AJAH Asynchronous JavaScript and HTML  AJAJ Asynchronous JavaScript and JSON  JSON – JavaScript Object Notation 25
  26. 26. JSON / XML  {clientes: [{nome:'Victor',sobrenome:'Cavalcante'}, {nome:'Mariana',sobrenome:'Frioli'}] } 26
  27. 27. jQuery + ASP.Net MVC  Com controle total sobre o HTML fica fácil criar páginas semanticamente corretas  Isso facilita a consulta de elementos pelo jQuery  O consulta por Ajax fica facilitada pelo retorno JSON 27
  28. 28. jQuery + ASP.Net MVC  A intenção do padrão MVC é a separação das camadas  O jQuery ajuda isso, pois ele atua somente no cliente  Quando precisa de dados do servidor ele solicita via Ajax 28
  29. 29. Demo
  30. 30. Mindset 30 Conversa entre desenvolvedores da Microsoft, segundo relatado por Scott Hanselman, do time do MVC.
  31. 31. Links  Site do ASP.Net  http://www.asp.net/mvc  Blog do Scot Hanselman (MSFT – Routing/MVC)  http://www.hanselman.com/blog/CategoryView.aspx?category=ASP. NET+MVC  Blog do Scott Guthrie (MSFT)  http://weblogs.asp.net/scottgu/archive/tags/ASP.NET/default.aspx  Blog do Phil Haack (MSFT – Routing/MVC)  http://haacked.com/Tags/ASP.NET%20MVC/default.aspx  Blog do Rob Conery (MSFT – Routing/MVC)  http://blog.wekeroad.com/tags/aspnetmvc  Blog do Giovanni:  http://unplugged.giggio.net/?tag=/asp.net+mvc 31
  32. 32. Links  Site do jQuery  http://www.jQuery.com  jQuery UI  http://www.jQuery UI.com  API do jQuery  http://api.jquery.com/ http://api.jquery.com/browser  jQuery 1.4 API Cheat Sheet  http://www.futurecolors.ru/jquery/  FireBug  http://getfirebug.com/ 32
  33. 33. 33
  34. 34. http://www.cavalcante.net http://twitter.com/vcavalcante victor@cavalcante.net http://www.dotnetarchitects.net
  1. A particular slide catching your eye?

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

×