Minicurso Smsi

827 views
779 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
827
On SlideShare
0
From Embeds
0
Number of Embeds
34
Actions
Shares
0
Downloads
25
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • 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>

    ×