Your SlideShare is downloading. ×

jQuery e ASP.Net MVC a dupla dinâmica

9,335
views

Published on

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

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,335
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
50
Comments
0
Likes
1
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. Victor Cavalcante Arquiteto de Software http://www.cavalcante.net http://twitter.com/vcavalcante victor@cavalcante.net
  • 2. 2 Agenda  WebStandards e o ASP.Net MVC  jQuery  Seletores  Eventos  Plugins  Ajax  Json
  • 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 Tecnologias/Linguagens  Tecnologias para desenvolvimento de interfaces ricas como:  Linguagens que podem ser utilizadas para desenvolvimento de interfaces ricas: HTML CSS JavaScript
  • 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. O que é WebStandards  A base do desenvolvimento Web;  Visa a separação das camadas;  Composto por 3 partes; 6
  • 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. 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. 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. Como funciona?  Acrescente o arquivo do jQuery na página  Já está pronto para usar o jQuery 10
  • 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. 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. Demo
  • 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. Demo
  • 16. jQuery – Eventos  $(document).ready();  $(“#menu a”).click();  $(“form”).submit();  $(“select”).bind(“change”,function(){}) 16
  • 17. Demo
  • 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. Demo
  • 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. Como funciona o ASP.NET MVC 21 Requisição HTTP Resposta (HTML, JSON, etc)
  • 22. E agora?  HTML  JavaScript  Verbos HTTP  Controle de estado da Aplicação  Grandes poderes trazem grandes responsabilidades 22
  • 23. A mudança 23
  • 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. AJAX - Derivações  AJAX Asynchronous JavaScript and XML  AJAH Asynchronous JavaScript and HTML  AJAJ Asynchronous JavaScript and JSON  JSON – JavaScript Object Notation 25
  • 26. JSON / XML  {clientes: [{nome:'Victor',sobrenome:'Cavalcante'}, {nome:'Mariana',sobrenome:'Frioli'}] } 26
  • 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. 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. Demo
  • 30. Mindset 30 Conversa entre desenvolvedores da Microsoft, segundo relatado por Scott Hanselman, do time do MVC.
  • 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. 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
  • 34. http://www.cavalcante.net http://twitter.com/vcavalcante victor@cavalcante.net http://www.dotnetarchitects.net