O documento apresenta um minicurso sobre Mashup, que consiste na integração de serviços na web através da combinação de conteúdos e APIs de diferentes fontes para criar novas aplicações. O minicurso discute a história da web, conceitos como XML, JSON e APIs, e realiza um exemplo prático de Mashup utilizando a API de busca do Twitter.

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

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

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