minicurso Desenvolvimento Web  com  Ajax Marcelo Linhares – UOL
Quem vos fala... - 5 anos de experiência com webdevelopment - Webmaster @UOL S/A - marcelolinhares.com // pessoal - alguma...
Sobre o minicurso... Apresentar os principais conceitos de construção de interfaces ricas para web utilizando Ajax..... .....
Agenda - Um pouco de história da WWW - WWW hoje! (vide Web 2.0 ou blá,blá,blá,blá...) - Interfaces ricas - Ajax?  - Javasc...
Um detalhe... Perguntas, dúvidas, sugestões, e comentários são  SEMPRE  bem vindos, a sua  participação  no mini-curso é  ...
Um pouco de história... - Um cara legal chamado Tim Berners Lee criou a WWW em 1991 - Em 1993 o mesmo nerd criou o HTML - ...
Mosaic Browser (nostalgia)
Este é o “cara”....
Coleção de documentos - A Web era nada mais que uma coleção de documentos hipertexto interligadas entre si -  Web como pla...
10 anos depois
10 anos depois - Estouro da bolha,  - Espuelas enriqueceu ;-) - A AOL Brasil fracassou! - O Google apareceu - Banda Larga,...
 
Enfim.... 10 anos depois, a  internet  se reiventou...
 
A modinha da Web2.0 - Sem especulação, internet realmente começou a dar dinheiro ! - Usuário criando conteúdo - Interfaces...
no ponto que queria chegar... Interfaces  mais ricas
Por um momento, esqueça... Python, C++, C-Ansi, JSP, Java, Smaltak, PHP, ASP, C#, Ruby, TCL, Perl, Pascal, Zope, Plone, AB...
Isto não importa para o usuário!
não acredita em mim... “ o que  distingue uma empresa de outra num mesmo segmento de atuação?  Eu afirmo a vocês que o que...
continua não acreditando.... -  Orkut  foi escrito em .NET -  WikiPedia ,  FaceBook  foi escrito em PHP - Plataforma base ...
Uma plataforma chamada Internet!
uma plataforma...?? - SOA  - Mashups - Acessibilidade - Computação Ubíqua - Cloud Computing
uma plataforma...?? - GMail/YahooMail x Outlook Express - GoogleDocs x MsOffice - Salesforce.com x RM Corpore
uma plataforma...?? - Novo modelo de licenciamento de software:  - ASP (Application Service Provider)
Futuro? não.. presente!
vamos ser sinceros...
tudo isto seria possível, se ainda estivéssemos usando isto?
E se nossa conexão dependesse do  famigerado kit multmídia?
Isto só foi possível porquê: A Lei de Moore  funcionou!
Perguntas ???
5 minutos  para o café....
Mas o minicurso não é de AJAX?
Onde Ajax entra nesta história?
conceituando... “ Uma  técnica  para criação de interfaces web mais ricas” Ou melhor...  A synchronous  J avaScript  A nd ...
conceituando...?? - Muitos desenvolvedores já programavam usando Ajax - Termo criado por James Garret em 2005 - Mérito? Fi...
como funciona?...cliente
como funciona?...desenvolvedor
Navegadores carregam  não apenas  o conteúdo!
Navegador  lê os dados , a  aplicação trata a sua  exibição .
Transferência de dados  transparente para o Usuário
Vantagens?
Se bem utilizado,  melhora  muito a  experiência  do  usuário !
auto-complete...
Feedbacks mais rápidos...
Feedbacks mais rápidos...
dragn-drop...
dragn-drop...
CUIDADO!
Nem tudo  são flores   se mal utilizado, ajax pode dar dor de cabeça para o usuário!
Não dar feedback após a ação
Usuário não pode voltar, nem adicionar página nos favoritos
Indexabilidade comprometida
Inacessível
Tudo isto pode ser resolvido   claro, basta apenas o desenvolvedor ser menos preguiçoso!
Tecnologias envolvidas
tecnologias - xHTML e CSS - DOM Document Object Model - XML e JSON - Javascript - Linguagem server-side
XHTML e CSS
xHTML e CSS - Web standards e CSS. Sites preparados conforme os padrões da w3c (World Wide Web Consortium), utlizando xHTM...
xHTML - linguagem de marcação (báh..) - “evolução” da HTML... - Objetivo? Aumentar a acessibilidade
DOM
DOM - Document Object Model - Interface para acessar/modificar a estrutura de um documento XML/xHTML - exemplo? document.g...
DOM
XML e JSON
XML XML (Extensible Markup Language). Um padrão de linguagem para tornar mais fácil a transferência de dados entre aplicaç...
XML <pessoa> <nome> José </nome> <idade> 16 </nome> <emprego> Analista de Sistemas </emprego> <apelido> Zezé do Pagode </a...
JSON &quot; JavaScript Object Notation &quot; , é um formato para a transferência de dados entre aplicações.
JSON - Simples - Tem a vantagem de ser mais leve que o XML - Normalmente utilizado quando os dados trafegados entre as apl...
JSON { &quot; nome &quot;:&quot;José&quot;, &quot; idade &quot;:&quot;16&quot;, &quot; emprego &quot;:&quot;Analista de Si...
JSON { &quot; nome &quot;:&quot;José&quot;, &quot; idade &quot;:&quot;16&quot;, &quot; emprego &quot;:&quot;Analista de Si...
JavaScript
Linguagem Client-Side responsável por agilizar interações entre o usuário e a página, baseado no padrão EcmaScript.
 
Javascript - Linguagem interpretada - Roda no cliente (client-side) - Criada pela Netscape inicialmente para fazer validaç...
Javascript - Todo comando javascript dentro do HTML é delimitado pela tag  <script>  -  <script> alert(&quot;Janela do Jav...
Javascript/dom/css -  Atribuindo borda vermelha a um elemento xHTML cujo ID seja “curso-sg” <script>  document.getElementB...
Javascript / XMLHttpRequest - Objeto XMLHttpRequest - Objeto responsável por fazer as requisições assíncronas
Javascript / XMLHttpRequest - Primeiro problema! a criação do Objeto é diferente no Internet Explorer, neste (pseudo)brows...
Javascript / XMLHttpRequest var objeto  = new XMLHttpRequest(); // firefox / ópera / konqueror / safari var objeto  = new ...
Javascript / XMLHttpRequest function getXML() { var objeto; // declara o objeto try {  // tenta criar objeto XMLHTTPReques...
Linguagem server side
server-side - linguagem de programação executada no servidor - exemplo: php, ruby, python, asp, c, c++, Java...
Produtividade  sempre é legal!
Produtividade em JS - existem frameworks JS que irão melhorar muito sua produtividade -  jquery ,  script.acu.lo.us ,  mot...
Produtividade - Firefox Firefox não é apenas um navegador, ele é um poderoso ambiente de desenvolvimento
Produtividade - Firefox - Console de Erros eficiente (Nativo) - DOM Inspector - verifica Árvore de Objetos DOM (Nativo) - ...
Quero saber mais,  Como faço?
- Não se esqueça, o Google é seu amigo ;-); - Participe de listas de discussão, blogs, fóruns, interaja; - Já existem bons...
Só lembrando Ajax já virou commodity, para quem trabalha com web, dominar Ajax é tão essencial quanto matemática para um c...
Brindes e sorteios - Livro de Ajax - Lindas camisetas do  PagSeguro - Bolinha anti-stress (para ser utilizada logo depois ...
sorteio do livro... <script> alert(&quot;sorteado é: &quot; + parseInt(Math.random()*70)) </script>
Brindes do PagSeguro - Simplesmente a melhor opção para disponibilizar meios de pagamento no seu site ;-) - Pagamento segu...
Brindes do UOL - UOL precisa de pessoas inteligentes, estimuladas e criativas, envie seu currículo! - Adoção do SCRUM como...
Agradecimentos
Próximos SlideShares
Carregando em…5
×

Minicurso Ajax - 5. Semana de Informática PUC Minas São Gabriel

5.137 visualizações

Publicada em

Minicurso de ajax ministrado no dia 11 de outubro de 2008 na 5. Semana de Informática da PUC Minas São Gabriel

Publicada em: Tecnologia
0 comentários
6 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
5.137
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2.301
Ações
Compartilhamentos
0
Downloads
169
Comentários
0
Gostaram
6
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Minicurso Ajax - 5. Semana de Informática PUC Minas São Gabriel

  1. 1. minicurso Desenvolvimento Web com Ajax Marcelo Linhares – UOL
  2. 2. Quem vos fala... - 5 anos de experiência com webdevelopment - Webmaster @UOL S/A - marcelolinhares.com // pessoal - algumas brincadeiras: > vagasem.info // oportunidades em TI > marcelolinhares.com/bolsa // gestão de portfólio online
  3. 3. Sobre o minicurso... Apresentar os principais conceitos de construção de interfaces ricas para web utilizando Ajax..... ...em apenas 3 horas! ?
  4. 4. Agenda - Um pouco de história da WWW - WWW hoje! (vide Web 2.0 ou blá,blá,blá,blá...) - Interfaces ricas - Ajax? - Javascript, CSS, EcmaScript, xHTML... - Hora do Café - Mão na massa... - Brindes
  5. 5. Um detalhe... Perguntas, dúvidas, sugestões, e comentários são SEMPRE bem vindos, a sua participação no mini-curso é fundamental
  6. 6. Um pouco de história... - Um cara legal chamado Tim Berners Lee criou a WWW em 1991 - Em 1993 o mesmo nerd criou o HTML - Ainda em 93, surge o Mosaic
  7. 7. Mosaic Browser (nostalgia)
  8. 8. Este é o “cara”....
  9. 9. Coleção de documentos - A Web era nada mais que uma coleção de documentos hipertexto interligadas entre si - Web como plataforma? Ainda não...
  10. 10. 10 anos depois
  11. 11. 10 anos depois - Estouro da bolha, - Espuelas enriqueceu ;-) - A AOL Brasil fracassou! - O Google apareceu - Banda Larga, SOA, Web 2.0....
  12. 13. Enfim.... 10 anos depois, a internet se reiventou...
  13. 15. A modinha da Web2.0 - Sem especulação, internet realmente começou a dar dinheiro ! - Usuário criando conteúdo - Interfaces mais ricas - Internet como plataforma
  14. 16. no ponto que queria chegar... Interfaces mais ricas
  15. 17. Por um momento, esqueça... Python, C++, C-Ansi, JSP, Java, Smaltak, PHP, ASP, C#, Ruby, TCL, Perl, Pascal, Zope, Plone, ABAP, AWK, Lua, Cobol, Assembly, Haskell, Prolog, Cold-Fusion, Ada, Fortran, Clipper, BASIC, Caché, dBase, Shell-Script..
  16. 18. Isto não importa para o usuário!
  17. 19. não acredita em mim... “ o que distingue uma empresa de outra num mesmo segmento de atuação? Eu afirmo a vocês que o que diferencia as empresas no século XXI é a ergonomia. ” Jorge Steffens – Presidente DataSul
  18. 20. continua não acreditando.... - Orkut foi escrito em .NET - WikiPedia , FaceBook foi escrito em PHP - Plataforma base do Google é essencialmente Java e Python - Twitter é feito em Ruby pergunto: Esta informação é relevante para você ?
  19. 21. Uma plataforma chamada Internet!
  20. 22. uma plataforma...?? - SOA - Mashups - Acessibilidade - Computação Ubíqua - Cloud Computing
  21. 23. uma plataforma...?? - GMail/YahooMail x Outlook Express - GoogleDocs x MsOffice - Salesforce.com x RM Corpore
  22. 24. uma plataforma...?? - Novo modelo de licenciamento de software: - ASP (Application Service Provider)
  23. 25. Futuro? não.. presente!
  24. 26. vamos ser sinceros...
  25. 27. tudo isto seria possível, se ainda estivéssemos usando isto?
  26. 28. E se nossa conexão dependesse do famigerado kit multmídia?
  27. 29. Isto só foi possível porquê: A Lei de Moore funcionou!
  28. 30. Perguntas ???
  29. 31. 5 minutos para o café....
  30. 32. Mas o minicurso não é de AJAX?
  31. 33. Onde Ajax entra nesta história?
  32. 34. conceituando... “ Uma técnica para criação de interfaces web mais ricas” Ou melhor... A synchronous J avaScript A nd X ML
  33. 35. conceituando...?? - Muitos desenvolvedores já programavam usando Ajax - Termo criado por James Garret em 2005 - Mérito? Ficou mais fácil vender Ajax para os clientes!
  34. 36. como funciona?...cliente
  35. 37. como funciona?...desenvolvedor
  36. 38. Navegadores carregam não apenas o conteúdo!
  37. 39. Navegador lê os dados , a aplicação trata a sua exibição .
  38. 40. Transferência de dados transparente para o Usuário
  39. 41. Vantagens?
  40. 42. Se bem utilizado, melhora muito a experiência do usuário !
  41. 43. auto-complete...
  42. 44. Feedbacks mais rápidos...
  43. 45. Feedbacks mais rápidos...
  44. 46. dragn-drop...
  45. 47. dragn-drop...
  46. 48. CUIDADO!
  47. 49. Nem tudo são flores se mal utilizado, ajax pode dar dor de cabeça para o usuário!
  48. 50. Não dar feedback após a ação
  49. 51. Usuário não pode voltar, nem adicionar página nos favoritos
  50. 52. Indexabilidade comprometida
  51. 53. Inacessível
  52. 54. Tudo isto pode ser resolvido claro, basta apenas o desenvolvedor ser menos preguiçoso!
  53. 55. Tecnologias envolvidas
  54. 56. tecnologias - xHTML e CSS - DOM Document Object Model - XML e JSON - Javascript - Linguagem server-side
  55. 57. XHTML e CSS
  56. 58. xHTML e CSS - Web standards e CSS. Sites preparados conforme os padrões da w3c (World Wide Web Consortium), utlizando xHTML para o conteúdo e CSS para o comportamento visual
  57. 59. xHTML - linguagem de marcação (báh..) - “evolução” da HTML... - Objetivo? Aumentar a acessibilidade
  58. 60. DOM
  59. 61. DOM - Document Object Model - Interface para acessar/modificar a estrutura de um documento XML/xHTML - exemplo? document.getElementById(“curso-sg”)
  60. 62. DOM
  61. 63. XML e JSON
  62. 64. XML XML (Extensible Markup Language). Um padrão de linguagem para tornar mais fácil a transferência de dados entre aplicações.
  63. 65. XML <pessoa> <nome> José </nome> <idade> 16 </nome> <emprego> Analista de Sistemas </emprego> <apelido> Zezé do Pagode </apelido> </pessoa>
  64. 66. JSON &quot; JavaScript Object Notation &quot; , é um formato para a transferência de dados entre aplicações.
  65. 67. JSON - Simples - Tem a vantagem de ser mais leve que o XML - Normalmente utilizado quando os dados trafegados entre as aplicações são críticos
  66. 68. JSON { &quot; nome &quot;:&quot;José&quot;, &quot; idade &quot;:&quot;16&quot;, &quot; emprego &quot;:&quot;Analista de Sistemas&quot;, “ apelido”:”Zezé do pagode” }
  67. 69. JSON { &quot; nome &quot;:&quot;José&quot;, &quot; idade &quot;:&quot;16&quot;, &quot; emprego &quot;:&quot;Analista de Sistemas&quot;, “ apelido”:”Zezé do pagode” }
  68. 70. JavaScript
  69. 71. Linguagem Client-Side responsável por agilizar interações entre o usuário e a página, baseado no padrão EcmaScript.
  70. 73. Javascript - Linguagem interpretada - Roda no cliente (client-side) - Criada pela Netscape inicialmente para fazer validações client-side nos formulários HTML - A intenção do JavaScript é prover maior interatividade entre o sistema e o usuário document.getElementById(“curso-sg”)
  71. 74. Javascript - Todo comando javascript dentro do HTML é delimitado pela tag <script> - <script> alert(&quot;Janela do Javascript&quot;) <script> -
  72. 75. Javascript/dom/css - Atribuindo borda vermelha a um elemento xHTML cujo ID seja “curso-sg” <script> document.getElementById(“curso-sg”).style.border = “5px solid red” <script>
  73. 76. Javascript / XMLHttpRequest - Objeto XMLHttpRequest - Objeto responsável por fazer as requisições assíncronas
  74. 77. Javascript / XMLHttpRequest - Primeiro problema! a criação do Objeto é diferente no Internet Explorer, neste (pseudo)browser o objeto é criado através de um ActiveX
  75. 78. Javascript / XMLHttpRequest var objeto = new XMLHttpRequest(); // firefox / ópera / konqueror / safari var objeto = new ActiveXObject(&quot;Msxml2.XMLHTTP&quot;); // Internet Explorer
  76. 79. Javascript / XMLHttpRequest function getXML() { var objeto; // declara o objeto try { // tenta criar objeto XMLHTTPRequest objeto = new XMLHttpRequest() }catch(e) { // caso dê erro, tenta criar o ActiveXObject objeto = new ActiveXObject(&quot;Msxml2.XMLHTTP&quot;); } return objeto }
  77. 80. Linguagem server side
  78. 81. server-side - linguagem de programação executada no servidor - exemplo: php, ruby, python, asp, c, c++, Java...
  79. 82. Produtividade sempre é legal!
  80. 83. Produtividade em JS - existem frameworks JS que irão melhorar muito sua produtividade - jquery , script.acu.lo.us , mototools , dwr (Java), Spry (Adobe) - Fique atento ao uso de frameworks, não deixem elas dominarem você!
  81. 84. Produtividade - Firefox Firefox não é apenas um navegador, ele é um poderoso ambiente de desenvolvimento
  82. 85. Produtividade - Firefox - Console de Erros eficiente (Nativo) - DOM Inspector - verifica Árvore de Objetos DOM (Nativo) - Extensão FireBug para Depurar Scripts/CSS/HTML e verificar Árvore de Objetos DOM - Extensão WebDeveloper ( CSS/ JavaScript / xHTML / Validadores )
  83. 86. Quero saber mais, Como faço?
  84. 87. - Não se esqueça, o Google é seu amigo ;-); - Participe de listas de discussão, blogs, fóruns, interaja; - Já existem bons livros na área - Qualquer dúvida, beba direto da fonte W3C, Especificação EcmaScript
  85. 88. Só lembrando Ajax já virou commodity, para quem trabalha com web, dominar Ajax é tão essencial quanto matemática para um contador !
  86. 89. Brindes e sorteios - Livro de Ajax - Lindas camisetas do PagSeguro - Bolinha anti-stress (para ser utilizada logo depois da prova de ATP) - Baralhos de SCRUM... o que é SCRUM?
  87. 90. sorteio do livro... <script> alert(&quot;sorteado é: &quot; + parseInt(Math.random()*70)) </script>
  88. 91. Brindes do PagSeguro - Simplesmente a melhor opção para disponibilizar meios de pagamento no seu site ;-) - Pagamento seguro - Cartão de crédito, boleta ou transferência....
  89. 92. Brindes do UOL - UOL precisa de pessoas inteligentes, estimuladas e criativas, envie seu currículo! - Adoção do SCRUM como metodologia de desenvolvimento dos projetos de internet!
  90. 93. Agradecimentos

×