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

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