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 - algumas brincadeiras: > vagasem.info // oportunidades em TI > marcelolinhares.com/bolsa // gestão de portfólio online
Sobre o minicurso... Apresentar os principais conceitos de construção de interfaces ricas para web utilizando Ajax..... ...em apenas 3 horas! ?
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
Um detalhe... Perguntas, dúvidas, sugestões, e comentários são  SEMPRE  bem vindos, a sua  participação  no mini-curso é  fundamental
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
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 plataforma? Ainda não...
10 anos depois
10 anos depois - Estouro da bolha,  - Espuelas enriqueceu ;-) - A AOL Brasil fracassou! - O Google apareceu - Banda Larga, SOA, Web 2.0....
 
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 mais ricas - Internet como plataforma
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, ABAP, AWK, Lua, Cobol, Assembly, Haskell, Prolog, Cold-Fusion, Ada,  Fortran, Clipper, BASIC, Caché, dBase, Shell-Script..
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 diferencia as empresas no século XXI é a  ergonomia. ” Jorge Steffens – Presidente DataSul
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ê ?
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  X ML
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!
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 xHTML para o conteúdo e CSS para o comportamento visual
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.getElementById(“curso-sg”)
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ções.
XML <pessoa> <nome> José </nome> <idade> 16 </nome> <emprego> Analista de Sistemas </emprego> <apelido> Zezé do Pagode </apelido> </pessoa>
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 aplicações são críticos
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” }
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” }
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çõ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”)
Javascript - Todo comando javascript dentro do HTML é delimitado pela tag  <script>  -  <script> alert(&quot;Janela do Javascript&quot;) <script> -
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>
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)browser o objeto é criado através de um ActiveX
Javascript / XMLHttpRequest var objeto  = new XMLHttpRequest(); // firefox / ópera / konqueror / safari var objeto  = new ActiveXObject(&quot;Msxml2.XMLHTTP&quot;); // Internet Explorer
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 }
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 ,  mototools ,  dwr  (Java),  Spry  (Adobe) - Fique atento ao uso de frameworks, não deixem elas dominarem você!
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) - Extensão FireBug para Depurar Scripts/CSS/HTML e verificar Árvore de Objetos DOM - Extensão WebDeveloper ( CSS/ JavaScript / xHTML / Validadores )
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 livros na área - Qualquer dúvida, beba direto da fonte W3C, Especificação EcmaScript
Só lembrando Ajax já virou commodity, para quem trabalha com web, dominar Ajax é tão essencial quanto matemática para um contador !
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?
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 seguro - Cartão de crédito, boleta ou transferência....
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!
Agradecimentos

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

  • 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 - Umpouco 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 dehistó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.
  • 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.
  • 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 anosdepois, a internet se reiventou...
  • 14.
  • 15.
    A modinha daWeb2.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 quequeria 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 importapara o usuário!
  • 19.
    não acredita emmim... “ 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.
  • 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.
  • 26.
  • 27.
    tudo isto seriapossível, se ainda estivéssemos usando isto?
  • 28.
    E se nossaconexão dependesse do famigerado kit multmídia?
  • 29.
    Isto só foipossível porquê: A Lei de Moore funcionou!
  • 30.
  • 31.
    5 minutos para o café....
  • 32.
    Mas o minicursonão é de AJAX?
  • 33.
    Onde Ajax entranesta 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...?? - Muitosdesenvolvedores já programavam usando Ajax - Termo criado por James Garret em 2005 - Mérito? Ficou mais fácil vender Ajax para os clientes!
  • 36.
  • 37.
  • 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.
  • 42.
    Se bem utilizado, melhora muito a experiência do usuário !
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
    Nem tudo são flores se mal utilizado, ajax pode dar dor de cabeça para o usuário!
  • 50.
    Não dar feedbackapós a ação
  • 51.
    Usuário não podevoltar, nem adicionar página nos favoritos
  • 52.
  • 53.
  • 54.
    Tudo isto podeser resolvido claro, basta apenas o desenvolvedor ser menos preguiçoso!
  • 55.
  • 56.
    tecnologias - xHTMLe CSS - DOM Document Object Model - XML e JSON - Javascript - Linguagem server-side
  • 57.
  • 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 - linguagemde marcação (báh..) - “evolução” da HTML... - Objetivo? Aumentar a acessibilidade
  • 60.
  • 61.
    DOM - DocumentObject Model - Interface para acessar/modificar a estrutura de um documento XML/xHTML - exemplo? document.getElementById(“curso-sg”)
  • 62.
  • 63.
  • 64.
    XML XML (ExtensibleMarkup 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; JavaScriptObject 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.
  • 71.
    Linguagem Client-Side responsávelpor agilizar interações entre o usuário e a página, baseado no padrão EcmaScript.
  • 72.
  • 73.
    Javascript - Linguageminterpretada - 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 - Todocomando 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 / XMLHttpRequestvar objeto = new XMLHttpRequest(); // firefox / ópera / konqueror / safari var objeto = new ActiveXObject(&quot;Msxml2.XMLHTTP&quot;); // Internet Explorer
  • 79.
    Javascript / XMLHttpRequestfunction 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.
  • 81.
    server-side - linguagemde programação executada no servidor - exemplo: php, ruby, python, asp, c, c++, Java...
  • 82.
  • 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 - FirefoxFirefox 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 seesqueç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 Ajaxjá 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.