O minicurso sobre desenvolvimento web com AJAX, ministrado por Marcelo Linhares, abrange conceitos essenciais para a criação de interfaces ricas em apenas três horas. O curso explora a história da web, a evolução das tecnologias e a importância do AJAX na experiência do usuário, além de discutir linguagens e frameworks que melhoram a produtividade dos desenvolvedores. O material também menciona diversas vantagens e desvantagens do uso de AJAX, destacando a necessidade de boas práticas na sua aplicação.

1. minicurso Desenvolvimento Web com Ajax Marcelo Linhares – UOL

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. Sobre o minicurso... Apresentar os principais conceitos de construção de interfaces ricas para web utilizando Ajax..... ...em apenas 3 horas! ?

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. Um detalhe... Perguntas, dúvidas, sugestões, e comentários são SEMPRE bem vindos, a sua participação no mini-curso é fundamental

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. Mosaic Browser (nostalgia)

8. Este é o “cara”....

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 anos depois

11. 10 anos depois - Estouro da bolha, - Espuelas enriqueceu ;-) - A AOL Brasil fracassou! - O Google apareceu - Banda Larga, SOA, Web 2.0....

13. Enfim.... 10 anos depois, a internet se reiventou...

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

16. no ponto que queria chegar... Interfaces mais ricas

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..

18. Isto não importa para o usuário!

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

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ê ?

21. Uma plataforma chamada Internet!

22. uma plataforma...?? - SOA - Mashups - Acessibilidade - Computação Ubíqua - Cloud Computing

23. uma plataforma...?? - GMail/YahooMail x Outlook Express - GoogleDocs x MsOffice - Salesforce.com x RM Corpore

24. uma plataforma...?? - Novo modelo de licenciamento de software: - ASP (Application Service Provider)

25. Futuro? não.. presente!

26. vamos ser sinceros...

27. tudo isto seria possível, se ainda estivéssemos usando isto?

28. E se nossa conexão dependesse do famigerado kit multmídia?

29. Isto só foi possível porquê: A Lei de Moore funcionou!

30. Perguntas ???

31. 5 minutos para o café....

32. Mas o minicurso não é de AJAX?

33. Onde Ajax entra nesta história?

34. conceituando... “ Uma técnica para criação de interfaces web mais ricas” Ou melhor... A synchronous J avaScript A nd X ML

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!

36. como funciona?...cliente

37. como funciona?...desenvolvedor

38. Navegadores carregam não apenas o conteúdo!

39. Navegador lê os dados , a aplicação trata a sua exibição .

40. Transferência de dados transparente para o Usuário

41. Vantagens?

42. Se bem utilizado, melhora muito a experiência do usuário !

43. auto-complete...

44. Feedbacks mais rápidos...

45. Feedbacks mais rápidos...

46. dragn-drop...

47. dragn-drop...

48. CUIDADO!

49. Nem tudo são flores se mal utilizado, ajax pode dar dor de cabeça para o usuário!

50. Não dar feedback após a ação

51. Usuário não pode voltar, nem adicionar página nos favoritos

52. Indexabilidade comprometida

53. Inacessível

54. Tudo isto pode ser resolvido claro, basta apenas o desenvolvedor ser menos preguiçoso!

55. Tecnologias envolvidas

56. tecnologias - xHTML e CSS - DOM Document Object Model - XML e JSON - Javascript - Linguagem server-side

57. XHTML e CSS

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

59. xHTML - linguagem de marcação (báh..) - “evolução” da HTML... - Objetivo? Aumentar a acessibilidade

60. DOM

61. DOM - Document Object Model - Interface para acessar/modificar a estrutura de um documento XML/xHTML - exemplo? document.getElementById(“curso-sg”)

62. DOM

63. XML e JSON

64. XML XML (Extensible Markup Language). Um padrão de linguagem para tornar mais fácil a transferência de dados entre aplicações.

65. XML <pessoa> <nome> José </nome> <idade> 16 </nome> <emprego> Analista de Sistemas </emprego> <apelido> Zezé do Pagode </apelido> </pessoa>

66. JSON &quot; JavaScript Object Notation &quot; , é um formato para a transferência de dados entre aplicações.

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

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” }

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” }

70. JavaScript

71. Linguagem Client-Side responsável por agilizar interações entre o usuário e a página, baseado no padrão EcmaScript.

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”)

74. Javascript - Todo comando javascript dentro do HTML é delimitado pela tag <script> - <script> alert(&quot;Janela do Javascript&quot;) <script> -

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>

76. Javascript / XMLHttpRequest - Objeto XMLHttpRequest - Objeto responsável por fazer as requisições assíncronas

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

78. Javascript / XMLHttpRequest var objeto = new XMLHttpRequest(); // firefox / ópera / konqueror / safari var objeto = new ActiveXObject(&quot;Msxml2.XMLHTTP&quot;); // Internet Explorer

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 }

80. Linguagem server side

81. server-side - linguagem de programação executada no servidor - exemplo: php, ruby, python, asp, c, c++, Java...

82. Produtividade sempre é legal!

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ê!

84. Produtividade - Firefox Firefox não é apenas um navegador, ele é um poderoso ambiente de desenvolvimento

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 )

86. Quero saber mais, Como faço?

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

88. Só lembrando Ajax já virou commodity, para quem trabalha com web, dominar Ajax é tão essencial quanto matemática para um contador !

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?

90. sorteio do livro... <script> alert(&quot;sorteado é: &quot; + parseInt(Math.random()*70)) </script>

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....

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!

93. Agradecimentos