Utilizando AJAX para criar sistemas web 2.0 Bruno Feu Sapiens Soluções [email_address] Microsoft Student Partner Gold
<ul><li>Web “normal” </li></ul><ul><li>Web 2.0 </li></ul><ul><li>AJAX </li></ul><ul><li>ATLAS </li></ul><ul><li>ATLAS Tool...
Antes de mais nada... <ul><li>Atlas ainda está em BETA. </li></ul><ul><li>Nem tudo está documentado. </li></ul><ul><li>Últ...
Como funciona a web? <ul><li>HTTP é stateless </li></ul><ul><ul><li>Não mantém estado </li></ul></ul><ul><li>Atualizações ...
Web “normal” <ul><li>Cada atualização requer um “round trip” do cliente para o servidor </li></ul><ul><ul><li>Mesmo pequen...
Web “normal” <ul><li>Arquitetura orientada ao servidor. </li></ul><ul><li>Cliente e servidor não estão integrados. </li></ul>
Experiência do Usuário <ul><li>A web hoje é dinâmica?  </li></ul><ul><li>O mesmo conteúdo é apresentado a todos os usuário...
Experiência do Usuário <ul><li>Controles HTML são limitados </li></ul><ul><ul><li>Alguns navegadores provém melhorias </li...
Antigo paradigma <ul><li>Páginas web estáticas </li></ul><ul><li>Provedores de conteúdo e informação </li></ul><ul><li>Fal...
Web 2.0 <ul><li>Desaparecem os sites e os portais e aparecem as aplicações web </li></ul><ul><li>O usuário interage com a ...
Web 2.0 <ul><li>Serviços e interfaces são separados. </li></ul><ul><li>Mashups </li></ul><ul><li>Interface rica, leve e si...
Web 2.0 <ul><li>Exemplos: </li></ul><ul><ul><li>Wiki, Blogs, Tags, Del.icio.us, Digg, Google Home, Live.com, Flickr, You T...
You OS
AJAX?!  O que é isso?
AJAX <ul><li>A synchronous  J avaScript  A nd  X ML  </li></ul><ul><li>Permite a troca de informações entre cliente e serv...
AJAX <ul><li>Existe desde 1998 (4ª geração) </li></ul><ul><ul><li>Microsoft Remote Scripting </li></ul></ul><ul><li>XmlHtt...
AJAX <ul><li>Não é uma tecnologia </li></ul><ul><ul><li>É uma técnica de programação </li></ul></ul><ul><li>Utiliza várias...
XMLHTTP <ul><li>API utilizada por Web Browser Scripts </li></ul><ul><ul><li>JavaScript, Jscript, VBScript, etc. </li></ul>...
XMLHTTP <ul><li>Trabalha com qualquer tipo de arquivo </li></ul><ul><ul><li>Não está restrito a, mas normalmente utiliza X...
AJAX (Vantagens) <ul><li>Utiliza menos banda da rede. </li></ul><ul><li>Utiliza menos CPU do servidor. </li></ul><ul><li>I...
AJAX (Vantagens) <ul><li>Operações não precisam mais aguardar resposta do servidor. </li></ul>
AJAX  Fundamentos <ul><li>São cinco os fundamentos: </li></ul>
AJAX -  Fundamentos   Web Standards e CSS <ul><li>Seguir os padrões das definições do W3C (Word Wide Web Consortium). </li...
AJAX -  Fundamentos   DOM (Document Object Model)   <ul><li>O DOM é uma API que define claramente a estrutura e organizaçã...
AJAX -  Fundamentos   XML (Extensible Markup Language)   <ul><li>XML é uma linguagem de markups focada na descrição de dad...
AJAX -  Fundamentos   JavaScript   <ul><li>Possui a característica de poder ser executada pelo lado do cliente, sem envio ...
AJAX -  Fundamentos   XMLHttpRequest   <ul><li>Presente nos navegadores: IE 5.0+, Safari 1.2, Mozilla / Firefox e Netscape...
Anatomia  Round-trip página usando AJAX  Browser Solicitação de  Dados Apresentação HTML Serviços JavaScript HTML + CSS + ...
Implementando XMLHTTP <ul><li>Objeto XMLHttpRequest </li></ul><ul><ul><li>Criado pela Microsoft para o IE5 </li></ul></ul>...
Solução ou outro problema? <ul><li>Ajax é difícil de implementar </li></ul><ul><li>Mais uma linguagem a ser dominada </li>...
Agora… o Atlas!
ATLAS
ATLAS Framework para desenvolvimento de experiência do usuário mais rica, interativa e mais personalizada em aplicações Web
ATLAS <ul><li>Desenvolvimento orientado a objetos </li></ul><ul><ul><li>Sistema fortementa tipado, classes, herança,polimo...
ATLAS <ul><li>Comportamentos e componentes </li></ul><ul><ul><li>Auto-completion, drag and drop, popups, etc </li></ul></u...
ATLAS em ação!
ATLAS Toolkit <ul><li>Coleção com controles prontos e componentes para facilitar a criação de seus próprios controles para...
ATLAS Toolkit em ação!
Desvantagens <ul><li>Quando não utilizar AJAX/ATLAS </li></ul><ul><ul><li>Necessidade do back button </li></ul></ul><ul><u...
Desvantagens <ul><li>“ Ah, vou manter esses 50000 registros no lado cliente e assim eu vou poder paginas esse grid sem a n...
Back Button <ul><li>http://www.nikhilk.net/BackButtonSupport.aspx </li></ul>
<ul><li>Atlas CTP Julho de 2006 </li></ul><ul><li>Atlas Controls Toolkits (11/04/06) </li></ul><ul><li>Último CTP a qualqu...
Últimas Novidades <ul><li>O ATLAS não existe mais! </li></ul><ul><li>Agora existe: </li></ul><ul><ul><li>Microsoft ASP.Net...
E o futuro? <ul><li>Existem outras iniciativas… </li></ul><ul><ul><li>Magic Ajax, Schwarz </li></ul></ul><ul><ul><li>Atlas...
DÚVIDAS & PERGUNTAS Perguntas
LINKS & RECURSOS <ul><li>Atlas Web site </li></ul><ul><ul><li>http://atlas.asp.net </li></ul></ul><ul><li>Blogs </li></ul>...
Próximos SlideShares
Carregando em…5
×

CóPia De Minicurso Smsi

738 visualizações

Publicada em

Publicada em: Tecnologia
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

CóPia De Minicurso Smsi

  1. 1. Utilizando AJAX para criar sistemas web 2.0 Bruno Feu Sapiens Soluções [email_address] Microsoft Student Partner Gold
  2. 2. <ul><li>Web “normal” </li></ul><ul><li>Web 2.0 </li></ul><ul><li>AJAX </li></ul><ul><li>ATLAS </li></ul><ul><li>ATLAS Toolkit </li></ul>Agenda
  3. 3. Antes de mais nada... <ul><li>Atlas ainda está em BETA. </li></ul><ul><li>Nem tudo está documentado. </li></ul><ul><li>Último release: Julho 2006. </li></ul><ul><li>Versão final, fully suported, ainda este ano! </li></ul><ul><li>Melhor ainda no ano que vem, com a chegada do ORCAS. </li></ul>
  4. 4. Como funciona a web? <ul><li>HTTP é stateless </li></ul><ul><ul><li>Não mantém estado </li></ul></ul><ul><li>Atualizações na página necessitam de envio ao servidor </li></ul>
  5. 5. Web “normal” <ul><li>Cada atualização requer um “round trip” do cliente para o servidor </li></ul><ul><ul><li>Mesmo pequenas alteração seguem tal protocolo </li></ul></ul><ul><ul><li>Grande quantidade de dados fazem o usuário esperar </li></ul></ul><ul><li>Dificulta uma rica experiência do usuário </li></ul>
  6. 6. Web “normal” <ul><li>Arquitetura orientada ao servidor. </li></ul><ul><li>Cliente e servidor não estão integrados. </li></ul>
  7. 7. Experiência do Usuário <ul><li>A web hoje é dinâmica? </li></ul><ul><li>O mesmo conteúdo é apresentado a todos os usuários </li></ul><ul><li>Aplicações Web ainda perdem de aplicações Desktop </li></ul><ul><li>Alternativas </li></ul><ul><ul><li>Java Applets </li></ul></ul><ul><ul><li>.Net WinControls </li></ul></ul><ul><ul><li>Macromedia Flash </li></ul></ul>
  8. 8. Experiência do Usuário <ul><li>Controles HTML são limitados </li></ul><ul><ul><li>Alguns navegadores provém melhorias </li></ul></ul><ul><ul><li>Diferentes versões da aplicação para diferentes navegadores </li></ul></ul><ul><ul><li>Sair da padronização W3C pode causar problemas futuros </li></ul></ul>
  9. 9. Antigo paradigma <ul><li>Páginas web estáticas </li></ul><ul><li>Provedores de conteúdo e informação </li></ul><ul><li>Falta interatividade com o usuário </li></ul><ul><li>Informação sempre vem do site para o usuário, ou seja, de cima para baixo </li></ul>
  10. 10. Web 2.0 <ul><li>Desaparecem os sites e os portais e aparecem as aplicações web </li></ul><ul><li>O usuário interage com a aplicação, a customizando de acordo com seu gosto </li></ul><ul><li>Usuários interagem entre sí </li></ul><ul><li>Usuários provêm informação e conteúdo, ou seja, a informação vem de baixo para cima </li></ul>
  11. 11. Web 2.0 <ul><li>Serviços e interfaces são separados. </li></ul><ul><li>Mashups </li></ul><ul><li>Interface rica, leve e simples, sem roundtrips, mais parecidas com sistemas desktop (AJAX) </li></ul><ul><li>Marketing de Performance </li></ul><ul><li>Nova bolha? </li></ul>
  12. 12. Web 2.0 <ul><li>Exemplos: </li></ul><ul><ul><li>Wiki, Blogs, Tags, Del.icio.us, Digg, Google Home, Live.com, Flickr, You Tube, Orkut, My Space, You OS. </li></ul></ul><ul><li>Web 2.0 é muito mais que utilizar AJAX, é um novo paradigma </li></ul><ul><li>Web 2.0 não é forma, é conteúdo </li></ul>
  13. 13. You OS
  14. 14. AJAX?! O que é isso?
  15. 15. AJAX <ul><li>A synchronous J avaScript A nd X ML </li></ul><ul><li>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 </li></ul><ul><li>Trabalha de modo Síncrono ou Assíncrono </li></ul>
  16. 16. AJAX <ul><li>Existe desde 1998 (4ª geração) </li></ul><ul><ul><li>Microsoft Remote Scripting </li></ul></ul><ul><li>XmlHttpRequest inserido no IE5 </li></ul><ul><ul><li>1º site a utilizar o objeto foi o Outlook Web Access, em 2000 </li></ul></ul>
  17. 17. AJAX <ul><li>Não é uma tecnologia </li></ul><ul><ul><li>É uma técnica de programação </li></ul></ul><ul><li>Utiliza várias tecnologias </li></ul><ul><ul><li>CSS </li></ul></ul><ul><ul><li>JavaScript/DOM </li></ul></ul><ul><ul><li>XMLHTTP </li></ul></ul>
  18. 18. XMLHTTP <ul><li>API utilizada por Web Browser Scripts </li></ul><ul><ul><li>JavaScript, Jscript, VBScript, etc. </li></ul></ul><ul><li>Utilizada para transferir dados XML entre um Browser (Cliente) e um servidor </li></ul><ul><li>Utiliza protocolo HTTP </li></ul>
  19. 19. XMLHTTP <ul><li>Trabalha com qualquer tipo de arquivo </li></ul><ul><ul><li>Não está restrito a, mas normalmente utiliza XML, TXT, HTML ou JSON </li></ul></ul><ul><li>XmlHttpRequest é suportado por qualquer browser geração 5 ou superior </li></ul>
  20. 20. AJAX (Vantagens) <ul><li>Utiliza menos banda da rede. </li></ul><ul><li>Utiliza menos CPU do servidor. </li></ul><ul><li>Interface semelhante à sistemas Desktop convencionais. </li></ul><ul><li>Oportunidade de reaprender JavaScript... (tá, não é bem uma vantagem). </li></ul>
  21. 21. AJAX (Vantagens) <ul><li>Operações não precisam mais aguardar resposta do servidor. </li></ul>
  22. 22. AJAX Fundamentos <ul><li>São cinco os fundamentos: </li></ul>
  23. 23. AJAX - Fundamentos Web Standards e CSS <ul><li>Seguir os padrões das definições do W3C (Word Wide Web Consortium). </li></ul><ul><li>Permitir uma separação clara do que é programação, o que é conteúdo e o que é estilo visual. (C#/VB, XML e CSS) </li></ul>
  24. 24. AJAX - Fundamentos DOM (Document Object Model) <ul><li>O DOM é uma API que define claramente a estrutura e organização de um documento HTML </li></ul><ul><li>É um modelo que pode localizar e alterar os elementos das páginas sem carregá-las novamente </li></ul><ul><li>Utilizado em conjunto com Web Browser Scripts </li></ul>
  25. 25. AJAX - Fundamentos XML (Extensible Markup Language) <ul><li>XML é uma linguagem de markups focada na descrição de dados </li></ul><ul><li>Possui portabilidade e transparência no transporte de dados sobre os firewalls </li></ul><ul><li>Extremamente flexível, extensível, e de fácil utilização </li></ul><ul><li>Pode ser substituído pelo JSON quando for necessária melhor performance </li></ul>
  26. 26. AJAX - Fundamentos JavaScript <ul><li>Possui a característica de poder ser executada pelo lado do cliente, sem envio de dados para o servidor </li></ul><ul><li>Suportado em todos os navegadores atuais (IE, Firefox, Safari, etc.) </li></ul><ul><li>É responsável pela união dos cinco componentes que fundamentam o AJAX </li></ul>
  27. 27. AJAX - Fundamentos XMLHttpRequest <ul><li>Presente nos navegadores: IE 5.0+, Safari 1.2, Mozilla / Firefox e Netscape 7 </li></ul><ul><li>Tem a capacidade de executar a troca de dados com o servidor remotamente e de forma assíncrona </li></ul><ul><li>Retorna dados em qualquer formato </li></ul><ul><li>PADRÃO RECONHECIDO PELO W3C! http://www.w3.org/TR/XMLHttpRequest/ (05/04/06) </li></ul>
  28. 28. Anatomia Round-trip página usando AJAX Browser Solicitação de Dados Apresentação HTML Serviços JavaScript HTML + CSS + Dados ASP.NET Application Processos de Render Apresentação Aparência (Managed Code) XMLHTTP Dados Iniciais (HTML + CSS + Dados) Dados HTTP Dados XML Dados TXT
  29. 29. Implementando XMLHTTP <ul><li>Objeto XMLHttpRequest </li></ul><ul><ul><li>Criado pela Microsoft para o IE5 </li></ul></ul><ul><li>No Internet Explorer </li></ul><ul><li>Outros navegadores </li></ul>var xmlhttp = new ActiveXObject(&quot;Msxml2.XMLHTTP&quot;); //dependendo da versão… var xmlhttp = new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;); xmlhttp = new XMLHttpRequest();
  30. 30. Solução ou outro problema? <ul><li>Ajax é difícil de implementar </li></ul><ul><li>Mais uma linguagem a ser dominada </li></ul><ul><ul><li>JavaScript </li></ul></ul><ul><li>Difícil integração com ASP .NET </li></ul><ul><ul><li>Não é orientado a objetos </li></ul></ul><ul><li>Solução de problemas </li></ul><ul><ul><li>Criação de outros… </li></ul></ul>
  31. 31. Agora… o Atlas!
  32. 32. ATLAS
  33. 33. ATLAS Framework para desenvolvimento de experiência do usuário mais rica, interativa e mais personalizada em aplicações Web
  34. 34. ATLAS <ul><li>Desenvolvimento orientado a objetos </li></ul><ul><ul><li>Sistema fortementa tipado, classes, herança,polimorfismo, namespaces, eventos, etc. </li></ul></ul><ul><li>Portabilidade entre navegadores </li></ul><ul><ul><li>Não é necessário código específico para cada navegador </li></ul></ul><ul><ul><li>Bibliotecas tratam compatibilidade automaticamente </li></ul></ul>
  35. 35. ATLAS <ul><li>Comportamentos e componentes </li></ul><ul><ul><li>Auto-completion, drag and drop, popups, etc </li></ul></ul><ul><ul><li>Componentes que podem ser ligados a dados tão facilmente como controles nativos do .Net </li></ul></ul><ul><li>Gerenciamento de chamadas remotas </li></ul><ul><ul><li>Chamadas assíncronas via XMLHTTP </li></ul></ul><ul><ul><li>Nenhuma ou poucas linhas de código </li></ul></ul><ul><li>Modelo de programação similar ao ASP .NET </li></ul>
  36. 36. ATLAS em ação!
  37. 37. ATLAS Toolkit <ul><li>Coleção com controles prontos e componentes para facilitar a criação de seus próprios controles para o ATLAS </li></ul>
  38. 38. ATLAS Toolkit em ação!
  39. 39. Desvantagens <ul><li>Quando não utilizar AJAX/ATLAS </li></ul><ul><ul><li>Necessidade do back button </li></ul></ul><ul><ul><li>Preenchimento de formulários, quando houver chances do usuário perder a informação de vista </li></ul></ul><ul><ul><li>Transição entre páginas diferentes </li></ul></ul><ul><ul><li>Atualizações muito grandes (lembre-se que o AJAX utiliza scripts no lado do cliente) </li></ul></ul>
  40. 40. Desvantagens <ul><li>“ Ah, vou manter esses 50000 registros no lado cliente e assim eu vou poder paginas esse grid sem a necessidade de re-envio de informações!” </li></ul><ul><li>Utilize o AJAX somente quando houver algo a ganhar com isso. </li></ul>
  41. 41. Back Button <ul><li>http://www.nikhilk.net/BackButtonSupport.aspx </li></ul>
  42. 42. <ul><li>Atlas CTP Julho de 2006 </li></ul><ul><li>Atlas Controls Toolkits (11/04/06) </li></ul><ul><li>Último CTP a qualquer momento! </li></ul><ul><li>Versão final “fully suported” até o final do ano! </li></ul><ul><li>Totalmente integrado ao ORCAS, inclusive com Javascript Intellisense </li></ul><ul><li>E... </li></ul>Últimas Novidades
  43. 43. Últimas Novidades <ul><li>O ATLAS não existe mais! </li></ul><ul><li>Agora existe: </li></ul><ul><ul><li>Microsoft ASP.Net 2.0 AJAX Extensions </li></ul></ul><ul><ul><li>Microsoft AJAX Library </li></ul></ul><ul><ul><li>Microsoft ASP.Net AJAX Control Toolkit </li></ul></ul>
  44. 44. E o futuro? <ul><li>Existem outras iniciativas… </li></ul><ul><ul><li>Magic Ajax, Schwarz </li></ul></ul><ul><ul><li>Atlas é oficial da Microsoft </li></ul></ul><ul><li>O site oficial provém recursos </li></ul><ul><ul><li>Tutoriais </li></ul></ul><ul><ul><li>Documentos </li></ul></ul><ul><ul><li>Códigos </li></ul></ul><ul><ul><li>http://atlas.asp.net </li></ul></ul>
  45. 45. DÚVIDAS & PERGUNTAS Perguntas
  46. 46. LINKS & RECURSOS <ul><li>Atlas Web site </li></ul><ul><ul><li>http://atlas.asp.net </li></ul></ul><ul><li>Blogs </li></ul><ul><ul><li>http://www.nikhilk.net </li></ul></ul><ul><ul><li>http://weblogs.asp.net/scottgu </li></ul></ul><ul><ul><li>http://www.adrianobertucci.com </li></ul></ul><ul><li>Sites </li></ul><ul><ul><li>http://www.msdn.com.br </li></ul></ul><ul><ul><li>http://www.linhadecodigo.com.br </li></ul></ul><ul><ul><li>http://www.sapienssolucoes.com.br </li></ul></ul>

×