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

  • 10,065 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
10,065
Views on SlideShare
7,447
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