Tópicos avançados em internet B Carlos Oberdan Rolim Ciência da Computação Web 2.0 e AJAX Como funciona a web? HTTP é stateless Não mantém estado Atualizações na página necessitam de envio de requisição ao servidor a cada momento Web “normal” Cada atualização requer um “round trip” do cliente para o servidor Mesmo pequenas alteração seguem tal protocolo Grande quantidade de dados fazem o usuário esperar Dificulta uma rica experiência do usuário Web “normal” Arquitetura orientada ao servidor. Cliente e servidor não estão integrados. Experiência do Usuário A web hoje é dinâmica? O mesmo conteúdo é apresentado a todos os usuários Aplicações Web ainda perdem de aplicações Desktop Alternativas Java Applets .Net WinControls Macromedia Flash Flex Experiência do Usuário Controles HTML são limitados Alguns navegadores provém melhorias Diferentes versões da aplicação para diferentes navegadores Sair da padronização W3C pode causar problemas futuros Antigo paradigma Páginas web estáticas Provedores de conteúdo e informação Falta interatividade com o usuário Informação sempre vem do site para o usuário, ou seja, de cima para baixo Web 2.0 Desaparecem os sites e os portais e aparecem as aplicações web O usuário interage com a aplicação, a customizando de acordo com seu gosto Usuários interagem entre sí Usuários provêm informação e conteúdo, ou seja, a informação vem de baixo para cima Web 2.0 Serviços e interfaces são separados. Mashups Interface rica, leve e simples, sem roundtrips, mais parecidas com sistemas desktop (AJAX) Performance Nova bolha? Web 2.0 Exemplos: Wiki, Blogs, Tags, Del.icio.us, Digg, Google Home, Live.com, Flickr, You Tube, Orkut, My Space, You OS. Web 2.0 é muito mais que utilizar AJAX, é um novo paradigma Web 2.0 não é forma, é conteúdo You OS AJAX?! O que é isso? AJAX Asynchronous JavaScript And XML Permite a troca de informações entre cliente e servidor e a atualização de partes de um site sem a necessidade de um round trip Trabalha de modo Síncrono ou Assíncrono AJAX Existe desde 1998 (4ª geração) Microsoft Remote Scripting XmlHttpRequest inserido no IE5 1º site a utilizar o objeto foi o Outlook Web Access, em 2000 AJAX Não é uma tecnologia É uma técnica de programação Utiliza várias tecnologias CSS JavaScript/DOM XMLHTTP XMLHTTP API utilizada por Web Browser Scripts JavaScript, Jscript, VBScript, etc. Utilizada para transferir dados XML entre um Browser (Cliente) e um servidor Utiliza protocolo HTTP XMLHTTP Trabalha com qualquer tipo de arquivo Não está restrito a, mas normalmente utiliza XML, TXT, HTML ou JSON XmlHttpRequest é suportado por qualquer browser geração 5 ou superior AJAX (Vantagens) Utiliza menos banda da rede. Utiliza menos CPU do servidor. Interface semelhante à sistemas Desktop convencionais. Oportunidade de reaprender JavaScript... (tá, não é bem uma vantagem). AJAX (Vantagens) Operações não precisam mais aguardar resposta do servidor. AJAX - Fundamentos São cinco os fundamentos: AJAX - Fundamentos Web Standards e CSS Seguir os padrões das definições do W3C (Word Wide Web Consortium). Permitir uma separação clara do que é programação, o que é conteúdo e o que é estilo visual. (C#/VB, XML e CSS) AJAX - Fundamentos DOM (Document Object Model) O DOM é uma API que define claramente a estrutura e organização de um documento HTML É um modelo que pode localizar e alterar os elementos das páginas sem carregá-las novamente Utilizado em conjunto com Web Browser Scripts AJAX - Fundamentos XML (Extensible Markup Language) XML é uma linguagem de markups focada na descrição de dados Possui portabilidade e transparência no transporte de dados sobre os firewalls Extremamente flexível, extensível, e de fácil utilização Pode ser substituído pelo JSON quando for necessária melhor performance AJAX - Fundamentos JavaScript Possui a característica de poder ser executada pelo lado do cliente, sem envio de dados para o servidor Suportado em todos os navegadores atuais (IE, Firefox, Safari, etc.) É responsável pela união dos cinco componentes que fundamentam o AJAX AJAX - Fundamentos XMLHttpRequest Presente nos navegadores: IE 5.0+, Safari 1.2, Mozilla / Firefox e Netscape 7 Tem a capacidade de executar a troca de dados com o servidor remotamente e de forma assíncrona Retorna dados em qualquer formato PADRÃO RECONHECIDO PELO W3C! http://www.w3.org/TR/XMLHttpRequest/ (05/04/06) Anatomia Round-trip página usando AJAX Browser Apresentação Solicitação HTML de Dados JavaScript HTTP Dados Iniciais (HTML + CSS + Dados) ASP.NET Application Apresentação Aparência (Managed Code) XMLHTTP Processos de Render Dados XML Dados TXT HTML + CSS + Dados Serviços Dados Implementando XMLHTTP Objeto XMLHttpRequest Criado pela Microsoft para o IE5 No Internet Explorer Outros varnavegadores xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); //dependendo da versão… var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp = new XMLHttpRequest(); Solução ou outro problema? Ajax é difícil de implementar Mais uma linguagem a ser dominada JavaScript Difícil integração com ASP .NET Não é orientado a objetos Solução de problemas Criação de outros…