10/06/2010<br />Construindo aplicações Web de última geração com Microsoft ASP.NET MVC 2 e jQuery<br />Victor Cavalcante<b...
2<br />Agenda<br />WebStandardse o ASP.Net MVC<br />jQuery<br />Seletores<br />Eventos<br />Plugins<br />Ajax<br />Json<br />
3<br />O que é uma aplicação Web?<br />Sistemas de informática desenvolvidos para rodar através de um Browser;<br />Utiliz...
4<br />Tecnologias/Linguagens<br />Tecnologias para desenvolvimento de interfaces ricas como:<br />Linguagens que podem se...
O que é WebStandards<br />PadrõesWeb;<br />É um conjuntode padrõesproduzidospelaW3C;<br />Destinado a orientar como deve s...
O que é WebStandards<br />A base do desenvolvimento Web;<br />Visa a separação das camadas;<br />Composto por 3 partes;<br...
Por que WebStandards?<br />Todos os sites desenvolvidos segundo os padrões W3C podem ser acessados e visualizados por qual...
O que é o jQuery<br />Poderosa biblioteca JavaScript<br />Simplifica tarefas comuns com JavaScript<br />Acessa qualquer pa...
Por que o jQuery<br />Leve <br />14kb (MinifiedandGzipped)<br />Suporte Cross Browser <br />(IE 6.0+, FF 1.5+, Safari 2.0+...
Como funciona?<br />Acrescente o arquivo do jQuery na página<br />Já está pronto para usar o jQuery<br />10<br />
jQuery<br />Selecionar parte do documento é o fundamental<br />O objeto jQuery é um wrapper para um grupo de elementos sel...
jQuery – Seletores - CSS<br />$(“p”)	    		nome do elemento (tag)<br />$(“#id”)	    	identificador (id do CSS)<br />$(“.cl...
Demo<br />
jQuery – Seletores - filtros<br />$(“p:first”)			primeiro parágrafo<br />$(“li:last”) 			último item da lista<br />$(“a:nt...
Demo<br />
jQuery – Eventos<br />$(document).ready();<br />$(“#menu a”).click();<br />$(“form”).submit();<br />$(“select”).bind(“chan...
Demo<br />
jQuery – Plugins<br />Ajax (254)<br />AnimationandEffects (408)<br />Browser Tweaks (96)<br />Data (190)<br />DOM (191)<br...
Demo<br />
20<br />O que é o ASP.Net MVC<br />Um novo template de projeto no Visual Studio<br />Uma opção<br />Uma nova maneira de de...
Como funciona o ASP.NET MVC<br />21<br />Requisição HTTP<br />Routing<br />Model<br />Controller<br />BD<br />View<br />Re...
E agora?<br />HTML<br />JavaScript<br />Verbos HTTP<br />Controle de estado da Aplicação<br />Grandes poderes trazem grand...
A mudança<br />23<br />
AJAX<br />AsynchronousJavaScriptand XML(AJAX)<br />Técnica de desenvolvimento web para criar aplicações web<br />Troca peq...
AJAX - Derivações<br />AJAX AsynchronousJavaScriptandXML<br />AJAH AsynchronousJavaScriptandHTML<br />AJAJ AsynchronousJav...
JSON / XML<br />{clientes:<br />[{nome:'Victor',sobrenome:'Cavalcante'},<br />{nome:'Mariana',sobrenome:'Frioli'}]<br />  ...
jQuery + ASP.Net MVC<br />Com controle total sobre o HTML fica fácil criar páginas semanticamente corretas<br />Isso facil...
jQuery + ASP.Net MVC<br />A intenção do padrão MVC é a separação das camadas<br />O jQuery ajuda isso, pois ele atua somen...
Demo<br />
Mindset<br />30<br /> - Nós precisamos de um controle Repeater!<br /> - Nós já o temos, se chama: laço de foreach.<br />Co...
Links<br />Site do ASP.Net<br />http://www.asp.net/mvc <br />Blog do Scot Hanselman (MSFT – Routing/MVC)<br />http://www.h...
Links<br />Site do jQuery<br />http://www.jQuery.com <br />jQuery UI<br />http://www.jQuery UI.com<br />API do jQuery<br /...
33<br />
Victor Cavalcante<br />Arquiteto de Software - Stefanini<br />http://www.cavalcante.net<br />http://twitter.com/vcavalcant...
© 2010 Microsoft Corporation. All rights reserved. Microsoft, MSDN, the MSDN logo, and [list other trademarks referenced] ...
Upcoming SlideShare
Loading in...5
×

jQuery e ASP.Net mvc2

7,831

Published on

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

No Downloads
Views
Total Views
7,831
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
78
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

jQuery e ASP.Net mvc2

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

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

×