O documento discute o desenvolvimento de aplicações web modernas usando ASP.NET MVC e jQuery. Ele explica como essas tecnologias se complementam, com ASP.NET MVC fornecendo uma estrutura MVC no backend e jQuery facilitando manipulação do DOM e Ajax no frontend.

1. 10/06/2010 Construindo aplicações Web de última geração com Microsoft ASP.NET MVC 2 e jQuery Victor Cavalcante Arquiteto de Software http://www.cavalcante.net http://twitter.com/vcavalcante victor@cavalcante.net

2. 2 Agenda WebStandardse 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:

5. O que é WebStandards PadrõesWeb; É um conjuntode padrõesproduzidospelaW3C; 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 (MinifiedandGzipped) 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 factorymethod 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:nth(3)”) quarto link $(“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) AnimationandEffects (408) Browser Tweaks (96) Data (190) DOM (191) Drag-and-Drop (47) Events (160) Forms (454) Integration (134) JavaScript (189) jQueryExtensions (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 O que é o ASP.Net MVC Um novo template de projeto no Visual Studio Uma opção Uma nova maneira de desenvolver com ASP.Net Um template mais opinativo

21. Como funciona o ASP.NET MVC 21 Requisição HTTP Routing Model Controller BD View 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 AsynchronousJavaScriptand 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 AsynchronousJavaScriptandXML AJAH AsynchronousJavaScriptandHTML AJAJ AsynchronousJavaScriptandJSON JSON – JavaScriptObjectNotation 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 - Nós precisamos de um controle Repeater! - Nós já o temos, se chama: laço de foreach. 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. Victor Cavalcante Arquiteto de Software - Stefanini http://www.cavalcante.net http://twitter.com/vcavalcante victor@cavalcante.net http://www.dotnetarchitects.net 04/05/2010

35. © 2010 Microsoft Corporation. All rights reserved. Microsoft, MSDN, the MSDN logo, and [list other trademarks referenced] are trademarks of the Microsoft group of companies. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED, OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.