Mini Curso Mashup Coreu
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,811
On Slideshare
1,804
From Embeds
7
Number of Embeds
2

Actions

Shares
Downloads
32
Comments
0
Likes
1

Embeds 7

http://www.linkedin.com 5
http://www.slideshare.net 2

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. minicurso Mashup integrando Serviços na Web Marcelo Linhares – UOL
  • 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. Sobre o minicurso... Mashup? Que raios é isto? ?
  • 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. 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, Mashups , Web 2.0, cloud computing....
  • 12.  
  • 13. Enfim.... 10 anos depois, a internet se reiventou...
  • 14.  
  • 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)
  • 16. uma plataforma...?? - GMail/YahooMail x Outlook Express - GoogleDocs x MsOffice - Salesforce.com x RM Corpore
  • 17. uma plataforma...?? - Novo modelo de licenciamento de software: - ASP (Application Service Provider)‏
  • 18. Futuro? não.. presente!
  • 19. vamos ser sinceros...
  • 20. tudo isto seria possível, se ainda estivéssemos usando isto?
  • 21. E se nossa conexão dependesse do famigerado kit multmídia?
  • 22. Isto só foi possível porquê: A Lei de Moore funcionou!
  • 23. Perguntas ???
  • 24. Mas o minicurso não é de Mashup?
  • 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
  • 26. Mashup.... Uma coleção de serviços e aplicativos http ' misturados ' e (ou) integrados , formando assim uma nova aplicação.
  • 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
  • 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 ?
  • 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
  • 30. Um site, mixando diversas APIs
  • 31. Arquitetura de um Mashup
  • 32. Content Provider. Sites que publicam conteúdo e disponibilizam o acesso através de APIs
  • 33. API?
  • 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
  • 35. No site programmableweb.com , existem mais de 1000 APIs públicas disponíveis para sua criatividade!
  • 36. Como?
  • 37. REST, Soap! Servindo XML (Atom, RSS) ou JSON, ou Screen Scrapping (caso o site não forneça uma API)
  • 38. Aplicação
  • 39. Pode ser server-side ou apenas client-side
  • 40. Tecnologias envolvidas
  • 41. tecnologias - xHTML e CSS - DOM Document Object Model - XML e JSON - Javascript - Linguagem server-side
  • 42. XHTML e CSS
  • 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
  • 44. xHTML - linguagem de marcação (báh..)‏ - “evolução” da HTML... - Objetivo? Aumentar a acessibilidade
  • 45. DOM
  • 46. DOM - Document Object Model - Interface para acessar/modificar a estrutura de um documento XML/xHTML - exemplo? document.getElementById(“curso-sg”)‏
  • 47. DOM
  • 48. XML e JSON
  • 49. XML XML (Extensible Markup Language). Um padrão de linguagem para tornar mais fácil a transferência de dados entre aplicações.
  • 50. XML <pessoa> <nome> José </nome> <idade> 16 </nome> <emprego> Analista de Sistemas </emprego> <apelido> Zezé do Pagode </apelido> </pessoa>
  • 51. JSON &quot; JavaScript Object Notation &quot; , é um formato para a transferência de dados entre aplicações.
  • 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
  • 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” }
  • 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” }
  • 55. JavaScript
  • 56. Linguagem Client-Side responsável por agilizar interações entre o usuário e a página, baseado no padrão EcmaScript.
  • 57.  
  • 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”)‏
  • 59. Javascript - Todo comando javascript dentro do HTML é delimitado pela tag <script> - <script> alert(&quot;Janela do Javascript&quot;)‏ <script> -
  • 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>
  • 61. Javascript / XMLHttpRequest - Objeto XMLHttpRequest - Objeto responsável por fazer as requisições assíncronas
  • 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
  • 63. Javascript / XMLHttpRequest var objeto = new XMLHttpRequest(); // firefox / ópera / konqueror / safari var objeto = new ActiveXObject(&quot;Msxml2.XMLHTTP&quot;); // Internet Explorer
  • 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 }
  • 65. Linguagem server side
  • 66. server-side - linguagem de programação executada no servidor - exemplo: php, ruby, python, asp, c, c++, Java...
  • 67. Produtividade sempre é legal!
  • 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ê!
  • 69. Produtividade - Firefox Firefox não é apenas um navegador, ele é um poderoso ambiente de desenvolvimento
  • 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 )‏
  • 71. Quero saber mais, Como faço?
  • 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
  • 73. Só lembrando Ajax já virou commodity, para quem trabalha com web, dominar Ajax é tão essencial quanto matemática para um contador !
  • 74. Hands-on Mão na massa!
  • 75. Sabia que tem muita gente divulgando vagas no twitter ? Que tal criarmos um mashup que rastreia estas vagas?
  • 76. Utilizaremos HTML e CSS puro , Jquery (lib para Javascript) e Twitter Search API
  • 77. Agradecimentos