• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

jQuery e ASP.Net MVC a dupla dinâmica

on

  • 9,875 views

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;

Statistics

Views

Total Views
9,875
Views on SlideShare
7,257
Embed Views
2,618

Actions

Likes
1
Downloads
47
Comments
0

6 Embeds 2,618

http://cavalcante.net 2515
http://www.cavalcante.net 50
http://feeds.feedburner.com 24
http://blog.lambda3.com.br 19
http://translate.googleusercontent.com 5
http://feed.lambda3.com.br 5

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    jQuery e ASP.Net MVC a dupla dinâmica jQuery e ASP.Net MVC a dupla dinâmica Presentation Transcript

    • jQuery e ASP.NET MVC 2 a dupla dinâmica.
      Victor Cavalcante
      Arquiteto de Software
      http://www.cavalcante.net
      http://twitter.com/vcavalcante
      victor@cavalcante.net
    • 2
      Agenda
      WebStandards e o ASP.Net MVC
      jQuery
      Seletores
      Eventos
      Plugins
      Ajax
      Json
    • 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
      Tecnologias/Linguagens
      Tecnologias para desenvolvimento de interfaces ricas como:
      Linguagens que podem ser utilizadas para desenvolvimento de interfaces ricas:
    • O que é WebStandards
      Padrões Web;
      É um conjuntode padrõesproduzidospelaW3C;
      Destinado a orientar como deve ser desenvolvido páginas/sistemas para internet;
      5
    • O que é WebStandards
      A base do desenvolvimento Web;
      Visa a separação das camadas;
      Composto por 3 partes;
      6
    • 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
    • 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
    • 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
    • Como funciona?
      Acrescente o arquivo do jQuery na página
      Já está pronto para usar o jQuery
      10
    • 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
    • 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
    • Demo
    • 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
    • Demo
    • jQuery – Eventos
      $(document).ready();
      $(“#menu a”).click();
      $(“form”).submit();
      $(“select”).bind(“change”,function(){})
      16
    • Demo
    • 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
    • Demo
    • 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
    • Como funciona o ASP.NET MVC
      21
      Requisição HTTP
      Routing
      Model
      Controller
      BD
      View
      Resposta (HTML, JSON, etc)
    • E agora?
      HTML
      JavaScript
      Verbos HTTP
      Controle de estado da Aplicação
      Grandes poderes trazem grandes responsabilidades
      22
    • A mudança
      23
    • 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
    • AJAX - Derivações
      AJAX AsynchronousJavaScriptandXML
      AJAH AsynchronousJavaScriptandHTML
      AJAJ AsynchronousJavaScriptandJSON
      JSON – JavaScriptObjectNotation
      25
    • JSON / XML
      {clientes:
      [{nome:'Victor',sobrenome:'Cavalcante'},
      {nome:'Mariana',sobrenome:'Frioli'}]
      }
      26
    • 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
    • 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
    • Demo
    • 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.
    • 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
    • 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
    • 19/06/2010
      Victor Cavalcante
      Arquiteto de Software - Stefanini
      http://www.cavalcante.net
      http://twitter.com/vcavalcante
      victor@cavalcante.net
      http://www.dotnetarchitects.net