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/2010Construindo aplicações Web de última geração com Microsoft ASP.NET MVC 2 e jQueryVictor CavalcanteArquiteto de Softwarehttp://www.cavalcante.nethttp://twitter.com/vcavalcantevictor@cavalcante.net

2. 2AgendaWebStandardse o ASP.Net MVCjQuerySeletoresEventosPluginsAjaxJson

3. 3O 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. 4Tecnologias/LinguagensTecnologias para desenvolvimento de interfaces ricas como:Linguagens que podem ser utilizadas para desenvolvimento de interfaces ricas:

5. O que é WebStandardsPadrõesWeb;É um conjuntode padrõesproduzidospelaW3C;Destinado a orientar como deve ser desenvolvido páginas/sistemas para internet;5

6. O que é WebStandardsA 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 jQueryPoderosa biblioteca JavaScriptSimplifica tarefas comuns com JavaScriptAcessa qualquer parte das páginasusando CSS ou expressões XPath-likeModifica a aparência das páginasAltera o conteúdo das páginasAdiciona animação à páginaProve suporte a AjaxAbstrai os erros dos browsers8

9. Por que o jQueryLeve 14kb (MinifiedandGzipped)Suporte Cross Browser (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)Sintaxe CSS likeFácil para web-developers e web-designersComunidade ativaExtensibilidade com muitos pluginsAproximadamente 5000 plugins cadastrados9

10. Como funciona?Acrescente o arquivo do jQuery na páginaJá está pronto para usar o jQuery10

11. jQuerySelecionar parte do documento é o fundamentalO objeto jQuery é um wrapper para um grupo de elementos selecionados$() function é um factorymethod que cria os objetos jQuery11

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 p12

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 radio14

15. Demo

16. jQuery – Eventos$(document).ready();$(“#menu a”).click();$(“form”).submit();$(“select”).bind(“change”,function(){})16

17. Demo

18. jQuery – PluginsAjax (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. 20O que é o ASP.Net MVCUm novo template de projeto no Visual StudioUma opçãoUma nova maneira de desenvolver com ASP.NetUm template mais opinativo

21. Como funciona o ASP.NET MVC21Requisição HTTPRoutingModelControllerBDViewResposta (HTML, JSON, etc)

22. E agora?HTMLJavaScriptVerbos HTTPControle de estado da AplicaçãoGrandes poderes trazem grandes responsabilidades22

23. A mudança23

24. AJAXAsynchronousJavaScriptand XML(AJAX)Técnica de desenvolvimento web para criar aplicações webTroca 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 servidor24

25. AJAX - DerivaçõesAJAX AsynchronousJavaScriptandXMLAJAH AsynchronousJavaScriptandHTMLAJAJ AsynchronousJavaScriptandJSONJSON – JavaScriptObjectNotation25

26. JSON / XML{clientes:[{nome:'Victor',sobrenome:'Cavalcante'},{nome:'Mariana',sobrenome:'Frioli'}] }26

27. jQuery + ASP.Net MVCCom controle total sobre o HTML fica fácil criar páginas semanticamente corretasIsso facilita a consulta de elementos pelo jQueryO consulta por Ajax fica facilitada pelo retorno JSON27

28. jQuery + ASP.Net MVCA intenção do padrão MVC é a separação das camadasO jQuery ajuda isso, pois ele atua somente no clienteQuando precisa de dados do servidor ele solicita via Ajax28

29. Demo

30. Mindset30 - 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. LinksSite do ASP.Nethttp://www.asp.net/mvc Blog do Scot Hanselman (MSFT – Routing/MVC)http://www.hanselman.com/blog/CategoryView.aspx?category=ASP.NET+MVCBlog 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. LinksSite do jQueryhttp://www.jQuery.com jQuery UIhttp://www.jQuery UI.comAPI do jQueryhttp://api.jquery.com/http://api.jquery.com/browser jQuery 1.4 API Cheat Sheethttp://www.futurecolors.ru/jquery/ FireBughttp://getfirebug.com/32

33. 33

34. Victor CavalcanteArquiteto de Software - Stefaninihttp://www.cavalcante.nethttp://twitter.com/vcavalcantevictor@cavalcante.nethttp://www.dotnetarchitects.net04/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.