Mini Curso Mashup Coreu

1.209 visualizações

Publicada em

Publicada em: Tecnologia, Educação
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
1.209
No SlideShare
0
A partir de incorporações
0
Número de incorporações
9
Ações
Compartilhamentos
0
Downloads
33
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Mini Curso Mashup Coreu

  1. 1. minicurso Mashup integrando Serviços na Web Marcelo Linhares – UOL
  2. 2. Quem vos fala... - 6 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... Mashup? Que raios é isto? ?
  4. 4. Agenda - Um pouco de história da WWW - WWW hoje! (vide Web 2.0 ou blá,blá,blá,blá...) - - Javascript, Json, CSS, EcmaScript, xHTML... - Hora do Café - Hands on code... - 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, Mashups , Web 2.0, cloud computing....
  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 (Jeff Bezos, Marck Zuckerberg e Larry Page que o diga...) - Usuário criando conteúdo - Interfaces mais ricas - Internet como plataforma - Software como serviço (ASP)
  14. 16. uma plataforma...?? - GMail/YahooMail x Outlook Express - GoogleDocs x MsOffice - Salesforce.com x RM Corpore
  15. 17. uma plataforma...?? - Novo modelo de licenciamento de software: - ASP (Application Service Provider)‏
  16. 18. Futuro? não.. presente!
  17. 19. vamos ser sinceros...
  18. 20. tudo isto seria possível, se ainda estivéssemos usando isto?
  19. 21. E se nossa conexão dependesse do famigerado kit multmídia?
  20. 22. Isto só foi possível porquê: A Lei de Moore funcionou!
  21. 23. Perguntas ???
  22. 24. Mas o minicurso não é de Mashup?
  23. 25. Ok, onde Mashup entra nesta história?... Usuário criando conteúdo + Interface mais rica + Internet como plataforma + Software como Serviço x 10*2 / 0,333 = Mashup
  24. 26. Mashup.... Uma coleção de serviços e aplicativos http ' misturados ' e (ou) integrados , formando assim uma nova aplicação.
  25. 27. Ou melhor..... “ Um mashup é um website ou uma aplicação web que usa conteúdo de mais de uma fonte para criar um novo serviço completo.” . @wikipedia
  26. 28. O quê? Imagina um serviço que dado um endereço , ele calcularia o frete dos produtos mais baratos de várias lojas , e através de uma configuração, efetuaria compras automáticas ?
  27. 29. Endereço – google maps cálculo do frete – correios produtos mais baratos (comparação de preços) – buscapé / shopping uol compras – Paypal / PagSeguro / F2b
  28. 30. Um site, mixando diversas APIs
  29. 31. Arquitetura de um Mashup
  30. 32. Content Provider. Sites que publicam conteúdo e disponibilizam o acesso através de APIs
  31. 33. API?
  32. 34. Application Programming Interface (API) um conjunto de instruções e padrões de programação para acesso a um aplicativo de software baseado na Web
  33. 35. No site programmableweb.com , existem mais de 1000 APIs públicas disponíveis para sua criatividade!
  34. 36. Como?
  35. 37. REST, Soap! Servindo XML (Atom, RSS) ou JSON, ou Screen Scrapping (caso o site não forneça uma API)
  36. 38. Aplicação
  37. 39. Pode ser server-side ou apenas client-side
  38. 40. Tecnologias envolvidas
  39. 41. tecnologias - xHTML e CSS - DOM Document Object Model - XML e JSON - Javascript - Linguagem server-side
  40. 42. XHTML e CSS
  41. 43. 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
  42. 44. xHTML - linguagem de marcação (báh..)‏ - “evolução” da HTML... - Objetivo? Aumentar a acessibilidade
  43. 45. DOM
  44. 46. DOM - Document Object Model - Interface para acessar/modificar a estrutura de um documento XML/xHTML - exemplo? document.getElementById(“curso-sg”)‏
  45. 47. DOM
  46. 48. XML e JSON
  47. 49. XML XML (Extensible Markup Language). Um padrão de linguagem para tornar mais fácil a transferência de dados entre aplicações.
  48. 50. XML <pessoa> <nome> José </nome> <idade> 16 </nome> <emprego> Analista de Sistemas </emprego> <apelido> Zezé do Pagode </apelido> </pessoa>
  49. 51. JSON &quot; JavaScript Object Notation &quot; , é um formato para a transferência de dados entre aplicações.
  50. 52. 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
  51. 53. 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” }
  52. 54. 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” }
  53. 55. JavaScript
  54. 56. Linguagem Client-Side responsável por agilizar interações entre o usuário e a página, baseado no padrão EcmaScript.
  55. 58. 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”)‏
  56. 59. Javascript - Todo comando javascript dentro do HTML é delimitado pela tag <script> - <script> alert(&quot;Janela do Javascript&quot;)‏ <script> -
  57. 60. 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>
  58. 61. Javascript / XMLHttpRequest - Objeto XMLHttpRequest - Objeto responsável por fazer as requisições assíncronas
  59. 62. Javascript / XMLHttpRequest - Primeiro problema! a criação do Objeto é diferente no Internet Explorer, neste (pseudo)browser o objeto é criado através de um ActiveX
  60. 63. Javascript / XMLHttpRequest var objeto = new XMLHttpRequest(); // firefox / ópera / konqueror / safari var objeto = new ActiveXObject(&quot;Msxml2.XMLHTTP&quot;); // Internet Explorer
  61. 64. 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 }
  62. 65. Linguagem server side
  63. 66. server-side - linguagem de programação executada no servidor - exemplo: php, ruby, python, asp, c, c++, Java...
  64. 67. Produtividade sempre é legal!
  65. 68. 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ê!
  66. 69. Produtividade - Firefox Firefox não é apenas um navegador, ele é um poderoso ambiente de desenvolvimento
  67. 70. 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 )‏
  68. 71. Quero saber mais, Como faço?
  69. 72. - 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
  70. 73. Só lembrando Ajax já virou commodity, para quem trabalha com web, dominar Ajax é tão essencial quanto matemática para um contador !
  71. 74. Hands-on Mão na massa!
  72. 75. Sabia que tem muita gente divulgando vagas no twitter ? Que tal criarmos um mashup que rastreia estas vagas?
  73. 76. Utilizaremos HTML e CSS puro , Jquery (lib para Javascript) e Twitter Search API
  74. 77. Agradecimentos

×