• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Web 2.0 e AJAX
 

Web 2.0 e AJAX

on

  • 2,251 views

 

Statistics

Views

Total Views
2,251
Views on SlideShare
2,235
Embed Views
16

Actions

Likes
1
Downloads
42
Comments
0

1 Embed 16

http://www.slideshare.net 16

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

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

    Web 2.0 e AJAX Web 2.0 e AJAX Presentation Transcript

    • Web 2.0 e AJAX  Augusto de Carvalho Fontes
    • Agenda  •  Web 2.0  •  Rich Internet Applications (RIA)  •  AJAX  •  Exemplo  •  AJAX Toolkits e Frameworks  •  Conclusão
    • Web 2.0  •  O nome “Web 2.0” foi dado pela O’Reilly Media em 2004  •  Novos serviços online  –  Britannica Online à Wikipedia  –  nytimes.com à Blogs  –  Sites pessoais à MySpace  –  abc.go.com à YouTube  –  Yahoo! Directory à del.icio.us  •  Características  –  Web como uma plataforma  –  Inteligência Coletiva  –  Mashups  –  Melhor experiência do usuário
    • Web 2.0  •  Web como uma plataforma  – Armazenamento e processamento no servidor  •  Ex: Writely, Flickr, GMail  – Novas formas de lucro  – Não há lançamento de versões, o  aprimoramento é contínuo  – Não há necessidade de portar para diversas  plataformas  – APIs Online  •  Google Maps API, Amazon Web Services, eBay API
    • Web 2.0 Web 2.0 
    • Web 2.0  •  Inteligência Coletiva  –  Colaboração  •  Wikis  •  SourceForge.net  •  YouTube  –  Folksonomy  •  Metodologia de recuperação de informação  •  Tags (rótulos) são associados de forma colaborativa  –  Na taxonomia geralmente os próprios autores associam os rótulos  •  Ex: del.icio.us, flickr.com, last.fm, etc.
    • Web 2.0  •  Inteligência Coletiva  –  Filtros de SPAM colaborativos  –  Blogs  •  Mashups  –  Utiliza conteúdo de mais de uma fonte para criar um  novo serviço  –  Através de uma API ou Web Feeds (RSS, Atom, etc.)  –  Ex: HousingMaps (Google Maps + Craigslist)  •  Melhor experiência do usuário  –  Rich Internet Applications (RIA)
    • Web 2.0 Web 2.0 
    • Rich Internet Application (RIA)  •  Incorporar usabilidade das aplicações em desktop  para a Web  –  O programa responde de forma intuitiva e rápida  –  Tudo acontece naturalmente  •  Aplicações Web tradicionais  –  A Web foi originalmente projetada para navegação por  documentos HTML  –  Modelo “Clique, aguarde e recarregue”  –  A página é transferida do servidor para o cliente e  recarregada a cada evento, envio de dados ou  navegação  –  Modelo de comunicação síncrono  –  Perda de contexto
    • Rich Internet Application (RIA)  •  Modelo síncrono  Cliente  Atividade do usuário  Atividade do usuário  Atividade do usuário  Tr an sm is são  Tr an sm is são  T ran sm is são   Tempo  T ran sm is são Processamento  Processamento  Servidor 
    • Rich Internet Application (RIA)  •  Rich Internet Application (RIA)  –  A idéia não é tão recente  –  Java Applet (1995)  –  Macromedia Flash (1996)  –  Java WebStart  –  DHTML  •  HTML + JavaScript + CSS + DOM  –  DHTML com IFrame oculto  –  Flex  •  Flash + comunicação assíncrona  –  AJAX  •  DHTML + XMLHttpRequest (comunicação assíncrona)
    • Rich Internet Application (RIA)  •  Modelo assíncrono  Cliente  Atividade do usuário  Interação  Interação  Interação  Processamento  Exibição  Exibição  Exibição o  o  o  T ran s m is s ã T ran s m is s ã T ran s m is s ã T ran s m is s ã T ran s m is s ã T ran s m is s ã Tempo  o  o  o  Servidor  Processamento  Processamento  Processamento 
    • AJAX  •  Asynchronous JavaScript and XML  – O termo surgiu em fevereiro de 2005 no artigo  “Ajax: A New Approach to Web Applications” de  Jesse James Garrett.  •  Exemplos  – Tadalist  – Amazon.com Diamond Search  – Novo Yahoo Mail Beta  – Google Calendar
    • AJAX AJAX 
    • AJAX  •  Características  – Modelo assíncrono  – Interface mais natural e intuitiva  – Atualização parcial da tela  •  Apenas os elementos que contêm novas informações  são atualizados  •  Não há perda de contexto  – Fluxo baseado em dados
    • AJAX  Usuário  Navegador  Servidor  1: Visita uma aplicação AJAX  2: HTML/JS/CSS iniciais
    • AJAX  Event  Response  Usuário  Handler  Handler  Servidor  1: Ação  2: Requisição  3: Processamento  4: Resposta  5: Atualizar Interface
    • AJAX  •  Casos de uso para AJAX  –  Validação em tempo real com lógica no servidor  •  Ex: Verificar disponibilidade de um login de usuário  –  Auto­completar  •  Ex: Google Suggest  –  Operações Mestre­Detalhe  •  Ex: Carregamento de comboboxes  –  Componentes de interface avançados (widgets)  •  Ex: Árvores, menus, barra de progresso.  –  Notificação proveniente do servidor  •  Simulada através de requisições periódicas
    • AJAX  •  Tecnologias Utilizadas  –  HTML/XHTML (Estrutura)  •  Maior necessidade de um documento bem formatado  –  CSS (Apresentação)  •  Permite separação da apresentação do documento (estilo)  •  Pode ser alterado por JavaScript  –  JavaScript (Comportamento)  •  Amplamente utilizada  •  Utilizado pela grande maioria dos navegadores. Não há  necessidade de instalação de plugins  –  DOM  •  Representa a estrutura de documentos XML e HTML
    • AJAX  •  Tecnologias Utilizadas  – HTTP, Formulários  •  É uma requisição HTTP comum  – Programação do lado do servidor  •  O servidor ainda é necessário  •  JSP, Servlets, JSF, Struts  – XMLHttpRequest  •  Objeto JavaScript que fornece a comunicação  assíncrona com o servidor
    • AJAX  •  XMLHttpRequest  –  Objeto JavaScript  –  Adotado pelos navegadores modernos  •  Primeira implementação nativa no Mozilla 1.0 (2002)  –  A World Wide Web Consortium publicou uma  especificação como “Working Draft” em 5 de abril de  2006  –  No Internet Explorer é um controle ActiveX chamado  MSXML  •  O IE7 irá suportar o objeto XMLHttpRequest de forma nativa
    • AJAX  •  XMLHttpRequest  –  Comunica­se com o servidor utilizando requisições  HTTP comuns: GET/POST  –  Permite comunicação assíncrona  –  Funciona ao fundo  •  Não interrompe a operação do usuário  –  O tipo da resposta (Content­Type) pode ser:  •  text/xml  •  text/plain  •  text/json  •  text/javascript
    • AJAX  •  Métodos do XMLHttpRequest  Método Descrição  open(method, URL, asyncFlag,  Abre e prepara uma requisição HTTP identificada  username, password)  pelo método e URL. asynchFlag indica se a  comunicação deve ser assíncrona ou não.  setRequestHeader(label, value)  Associa um valor a um cabeçalho HTTP antes de  fazer a requisição.  send(postdata)  Executa a requisição HTTP.  getAllResponseHeaders()  Retorna uma lista de todos os cabeçalhos HTTP da  resposta  getResponseHeader(label)  Retorna o cabeçalho HTTP associado ao label  abort()  Interrompe uma requisição que está sendo  processada. 
    • AJAX  •  Propriedades do XMLHttpRequest  Propriedade Descrição  onreadystatechange  Informa a função JavaScript que deve ser chamada  a cada mudança de estado  readystate  Estado atual da requisição, pode ser:  0 = não iniciada  1 = iniciando conexão  2 = conexão estabelecida  3 = em atividade (algum dado foi recebido)  4 = completa  status  Status HTTP recebido do servidor  200 = OK  403 = Forbidden  500 = Internal Error  ... 
    • AJAX  •  Propriedades do XMLHttpRequest  Propriedade Descrição  responseText  Representação textual (string) dos dados enviados  pelo servidor  responseXML  Representação do documento XML enviado pelo  servidor  statusText  Representação textual (string) do status HTTP  recebido do servidor (OK, Not Found, etc) 
    • AJAX  •  API DOM (Document Object Model)  – Os navegadores mantém uma representação  dos documentos que estão sendo exibidos  •  Disponível pelo objeto JavaScript document  – A API DOM permite que código JavaScript  altere a árvore DOM programaticamente  •  Exemplos:  – Adicionar uma nova linha a uma tabela  – Alterar o conteúdo de uma DIV  – Alterar o estilo CSS de um elemento
    • Exemplo  Validação em tempo real pelo  servidor
    • AJAX Toolkits e Frameworks  •  Tipos de soluções disponíveis hoje  – Bibliotecas JavaScript (lado do cliente)  – Frameworks de chamada remota via Proxy  – Componentes JSF com comportamento AJAX  – Wrappers  – Tradutor Java para JavaScript  – Frameworks com extensão para AJAX
    • AJAX Toolkits e Frameworks  •  Bibliotecas JavaScript (lado do cliente)  –  Pode ser utilizada com qualquer tecnologia do lado  do servidor  –  Podem ser combinadas com outras bibliotecas  –  Cuida de incompatibilidades de browsers  –  Utiliza IFrame oculto se necessário  –  Captura eventos de navegação como os botões  avançar e voltar  –  Componentes de interface avançados (widgets)  –  API JavaScript mais fácil de usar para controle de  eventos, erros, etc.  –  Ex: Dojo Toolkit, Rico, Script.aculo.us
    • AJAX Toolkits e Frameworks  •  Frameworks de chamada remota via Proxy  – Similar ao modelo de comunicação RPC  •  Arquitetura baseada em stubs e skeletons  – O framework gera o stub do cliente (proxy) para  chamadas ao código do servidor  – Faz o marshalling de todos os parâmetros  – Ex: Direct Web Remoting (DWR), JSON­RPC  – DWR 2.0 irá suportar AJAX Reverso  •  Chamada JavaScript a partir do código Java
    • AJAX Toolkits e Frameworks  •  Componentes JSF com comportamento  AJAX  – Esconde toda a complexidade da programação  AJAX  •  O autor não precisa saber JavaScript  – Componentes JSF são reutilizáveis  – Ex: ajax4jsf, ICEfaces, DynaFaces
    • AJAX Toolkits e Frameworks  •  Wrappers  – Atualmente existem vários toolkits com  diferentes componentes e sintaxes de uso  – Empacota (wrap) os componentes visuais em  custom tags (JSP) ou componentes JSF  – Tenta consolidar as diferentes bibliotecas  JavaScript (lado do cliente)  •  Depende de bibliotecas como o Dojo, DHTML  Goodies, Script.aculo.us.  – Ex: jMarki
    • AJAX Toolkits e Frameworks  •  Tradutor Java para JavaScript  – Desenvolve a aplicação AJAX usando apenas  código Java  – Quando a aplicação é implantada, converte  código Java para JavaScript  – “Hosted Mode” – permite depuração do código  – Ex: Google Web Toolkit (GWT)
    • AJAX Toolkits e Frameworks  •  Frameworks com extensão para AJAX  – Alguns Frameworks de desenvolvimento de  aplicação para Web estão trazendo  comportamento nativo ao AJAX  – Ex: Ruby on Rails, Echo2, Shale
    • Conclusão  •  Prós  – Interface mais intuitiva e natural  – Fluxo baseado em dados (não em páginas)  – Não necessita de plugins  – Grande redução na carga na rede  •  Apenas os dados relevantes para a solicitação do  usuário são trafegados  – Solução RIA mais viável atualmente  – Diversos toolkits e frameworks estão surgindo
    • Conclusão  •  Contras  – Aumento de complexidade  •  Pode ser resolvido com componentes JSF  – Código visível por hackers  – Ainda existe incompatibilidade de navegadores  – JavaScript é difícil de manter e depurar  – Existem poucos modelos de arquitetura e  melhores práticas  – Os Toolkits e Frameworks ainda estão imaturos  •  A maioria em versão beta
    • Links  •  Writely  –  http://www.writely.com/  •  Flickr  –  http://www.flickr.com/  •  GMail  –  http://www.gmail.com/  •  HousingMaps  –  http://www.housingmaps.com/  •  TadaList  –  http://www.tadalist.com/  •  Amazon Diamond Search  –  http://www.amazon.com/gp/gsl/search/finder/104­3928955­  0300739?ie=UTF8&redirect=true&productGroupID=loose_diamonds  •  Novo Yahoo Mail Beta  –  http://whatsnew.mail.yahoo.com/  •  Google Calendar  –  http://www.google.com/calendar/
    • Links  •  Google Suggest  –  http://www.google.com/webhp?complete=1&hl=en  •  Dojo Toolkit  –  http://dojotoolkit.com/  •  Rico  –  http://openrico.org/  •  Script.aculo.us  –  http://script.aculo.us/  •  Direct Web Remoting (DWR)  –  http://getahead.ltd.uk/dwr  •  JSON­RPC  –  http://json­rpc.org/  •  ajax4jsf  –  https://ajax4jsf.dev.java.net/  •  ICEfaces  –  http://www.icesoft.com/products/icefaces.html
    • Links  •  DynaFaces  –  https://jsf­extensions.dev.java.net/nonav/mvn/slides.html  •  DHTML Goodies  –  http://www.dhtmlgoodies.com/  •  jMarki  –  https://ajax.dev.java.net/  •  Google Web Toolkit (GWT)  –  http://code.google.com/webtoolkit/  •  Ruby on Rails  –  http://www.rubyonrails.org/  •  Echo2  –  http://www.nextapp.com/platform/echo2/echo/  •  Shale  –  http://struts.apache.org/struts­shale/