Mashups: Criando
  Valor na Web 2.0



 Carlos Duarte do Nascimento
   chester@apontador.com
@chesterbr http://chester.blo...
O que vamos ver
●   O que é um Mashup?
    (e por que isso me interessa?)
● Exemplos
● Tecnologia

● Prática

    (exercíc...
Palestrante
     (quem é esse cara?)

● Bacharel em Matemática Aplicada e
  Computacional (IME/USP)
● Desenvolvedor de Sof...
O que é Mashup?
O que é Mashup?
O que é Mashup?
O que é Mashup?
O que é Mashup?
Mashup
   “uma composição incomum ou
inovadora de conteúdo (tipicamente
 vindo de origens não-relacionadas)
    feita para...
Mashup
   “uma composição incomum ou
inovadora de conteúdo (tipicamente
 vindo de origens não-relacionadas)
    feita para...
Web 2.0
Web 2.0
Web 2.0
● Web como plataforma
● Sempre em beta

● Múltiplas plataformas

● Experiência rica

● Cavalgando a inteligência c...
Mashup
   “uma composição incomum ou
inovadora de conteúdo (tipicamente
 vindo de origens não-relacionadas)
    feita para...
Tipos de Mashup
● Mapas
● Fotos e Vídeos

● Busca e compras

● Notícias
Exemplos
Flickr + Google Maps = http://flickrvision.com
cruzalinhas.appspot.com
Lojas Online => http://buscape.com.br
Sites de Notícias => http://news.google.com.br
Tecnologia
Tecnologia
● Arquitetura (APIs/sites/browsers)
● AJAX

● REST

● Crawling / Scraping

● Web Semântica/ RDF

● RSS e ATOM
Arquitetura
            (os atores)
● Provedores de Conteúdo/APIs
● Site de Mashup

● Navegador (browser)
APIs
Application Programming Interface
APIs
● Funcionalidades (métodos, funções)
● Protocolos (como eu chamo?)

● Autenticação (quem pode chamar?)




         U...
APIs no Brasil




         Fonte:
AJAX
AJAX
AJAX
Asynchronous JavaScript + XML
AJAX
Asynchronous JavaScript + XML


     Chamadas em
     segundo plano
    (sem o “reload)
AJAX
Asynchronous JavaScript + XML


      Lógica de apresentação e
       navegação no browser
AJAX
Asynchronous JavaScript + XML

                   ...ou não
                    (JSON)
AJAX
● Navegador chama HTML principal
● Usuário clica/interage

● Cada interação gera uma chamada ao


  servidor (em back...
AJAX
Implementações possíveis:
  ‒Tag <iframe>
  ‒Objeto XMLHttpRequest

Conselho de amigo:
 jQuery (http://jquery.com)
AJAX com jQuery
<script type=”text/javascript”>
  $.getJSON("http://api.flickr.com/services ↵
             /feeds/photos_p...
REST
● Representational State Transfer
● Usa apenas HTTP (RFC 2616)

● Entidades são caminhos, ex.:


     /clientes/empre...
Crawling / Scraping
● Extrair dados “na marra”
● Último recurso (sujeito a quebra


  e problemas legais)
● Cuidados: não ...
XPath
<html>
  <head>...</head>
  <body>
    <div>nome da pagina</div>
    <div>campo1</div>
    <p>campo2</p>
    ...
   ...
XPath
<html>
  <head>...</head>
  <body>
    <div>nome da pagina</div>
    <div>campo1</div>
    <p>campo2</p>
    ...
   ...
Web Semântica/RDF
● Grosso modo: “descrever o
   significado do conteúdo”
● RDF (Resource Description


  Framework) é um m...
RDF (FOAF) embutido
<html>
  <head>



  </head>
  <body>
    <p             >Oi, eu sou o

            Carlos
          N...
RDF (FOAF) embutido
<html>
  <head>
    <link rel="schema.foaf"
href="http://xmlns.com/foaf/0.1/" />
    <link href="#ches...
RSS
● Sigla com vários significados
  (dica: Really Simple Sindication)
● Descreve / agrega conteúdo


  (web syndication) ...
KML
●   Keyhole Markup Language
    (Keyhole Earth Viewer   Google Earth)
● Descreve pontos geográficos
● É um XML

● Exten...
KML
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
<Placemark>
  <name>New...
Prática
Exercício: Yahoo! Pipes
●   Y! Pipes: programação visual
       http://pipes.yahoo.com

●   Idéia: misturar dois jornais
 ...
Exercício: Mashup em PHP
● Apontador + Google Maps
● Idéia: mapear bares em Rio Claro

● Cadastro no Apontador:
        ht...
Exercício: Mashup em PHP
● Crie o mapa.html
● Crie o locais.php

● Altere o mapa.html para mostrar


  os locais do locais...
Obrigado!




   chester@apontador.com
@chesterbr http://chester.blog.br
Links Úteis
Textos
● What is Web 2.0, Tim O'Reily: http://aponta.me/2F9q
● Mashups: The new breed of Web app: http://apont...
Mashups: Criando Valor na Web 2.0
Mashups: Criando Valor na Web 2.0
Mashups: Criando Valor na Web 2.0
Upcoming SlideShare
Loading in …5
×

Mashups: Criando Valor na Web 2.0

2,010 views

Published on

Slides do mini-curso ministrado durante a SECCOMP 2010 (XVIII Semana da Ciência da Computação) no campus de Rio Claro da UNESP, na qual alunos de Ciência da Computação foram apresentados ao universo da criação de mashups, viram alguns cases e tecnologias relacionadas e fizeram exercícios usando Yahoo! Pipes (para integrar feeds RSS) e JavaScript (integrando a Apontador API com o Google Maps).

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,010
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
28
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Mashups: Criando Valor na Web 2.0

  1. 1. Mashups: Criando Valor na Web 2.0 Carlos Duarte do Nascimento chester@apontador.com @chesterbr http://chester.blog.br
  2. 2. O que vamos ver ● O que é um Mashup? (e por que isso me interessa?) ● Exemplos ● Tecnologia ● Prática (exercício(s?) - aprenda fazendo!)
  3. 3. Palestrante (quem é esse cara?) ● Bacharel em Matemática Aplicada e Computacional (IME/USP) ● Desenvolvedor de Software (20 anos) ● Entusiasta do Software Livre ● Arquiteto de Produtos no Apontador ● Twitter: @chesterbr ● Mais informações: http://chester.me
  4. 4. O que é Mashup?
  5. 5. O que é Mashup?
  6. 6. O que é Mashup?
  7. 7. O que é Mashup?
  8. 8. O que é Mashup?
  9. 9. Mashup “uma composição incomum ou inovadora de conteúdo (tipicamente vindo de origens não-relacionadas) feita para consumo humano”
  10. 10. Mashup “uma composição incomum ou inovadora de conteúdo (tipicamente vindo de origens não-relacionadas) feita para consumo humano” Mashups: A nova raça de aplicações Web Duane Merril, 2006/2009
  11. 11. Web 2.0
  12. 12. Web 2.0
  13. 13. Web 2.0 ● Web como plataforma ● Sempre em beta ● Múltiplas plataformas ● Experiência rica ● Cavalgando a inteligência coletiva O'Reilly, 2005
  14. 14. Mashup “uma composição incomum ou inovadora de conteúdo (tipicamente vindo de origens não-relacionadas) feita para consumo humano” Mashups: A nova raça de aplicações Web Duane Merril, 2006/2009
  15. 15. Tipos de Mashup ● Mapas ● Fotos e Vídeos ● Busca e compras ● Notícias
  16. 16. Exemplos
  17. 17. Flickr + Google Maps = http://flickrvision.com
  18. 18. cruzalinhas.appspot.com
  19. 19. Lojas Online => http://buscape.com.br
  20. 20. Sites de Notícias => http://news.google.com.br
  21. 21. Tecnologia
  22. 22. Tecnologia ● Arquitetura (APIs/sites/browsers) ● AJAX ● REST ● Crawling / Scraping ● Web Semântica/ RDF ● RSS e ATOM
  23. 23. Arquitetura (os atores) ● Provedores de Conteúdo/APIs ● Site de Mashup ● Navegador (browser)
  24. 24. APIs Application Programming Interface
  25. 25. APIs ● Funcionalidades (métodos, funções) ● Protocolos (como eu chamo?) ● Autenticação (quem pode chamar?) Uma API é um contrato!
  26. 26. APIs no Brasil Fonte:
  27. 27. AJAX
  28. 28. AJAX
  29. 29. AJAX Asynchronous JavaScript + XML
  30. 30. AJAX Asynchronous JavaScript + XML Chamadas em segundo plano (sem o “reload)
  31. 31. AJAX Asynchronous JavaScript + XML Lógica de apresentação e navegação no browser
  32. 32. AJAX Asynchronous JavaScript + XML ...ou não (JSON)
  33. 33. AJAX ● Navegador chama HTML principal ● Usuário clica/interage ● Cada interação gera uma chamada ao servidor (em background) ● Respostas do servidor acionam eventos (JavaScript), que redesenham partes da Página (usando DOM)
  34. 34. AJAX Implementações possíveis: ‒Tag <iframe> ‒Objeto XMLHttpRequest Conselho de amigo: jQuery (http://jquery.com)
  35. 35. AJAX com jQuery <script type=”text/javascript”> $.getJSON("http://api.flickr.com/services ↵ /feeds/photos_public.gne?tags= ↵ cat&tagmode=any&format=json& ↵ jsoncallback=?", function(data){ $.each(data.items, function(i,item){ $("<img/>").attr("src", item.media.m).appendTo("#images"); if ( i == 3 ) return false; }); }); </script>
  36. 36. REST ● Representational State Transfer ● Usa apenas HTTP (RFC 2616) ● Entidades são caminhos, ex.: /clientes/empresaX/pedidos/32 ● Verbos HTTP: GET, PUT, DELETE...
  37. 37. Crawling / Scraping ● Extrair dados “na marra” ● Último recurso (sujeito a quebra e problemas legais) ● Cuidados: não sobrecarregar o servidor, obedecer ROBOTS.TXT ● Sugestão: XPath
  38. 38. XPath <html> <head>...</head> <body> <div>nome da pagina</div> <div>campo1</div> <p>campo2</p> ... <p id=”xyz”>campo3</p> </body> </html> campo1: /html/body/div[2] campo2: /html/body/p campo3: //p[@id=”xyz”]
  39. 39. XPath <html> <head>...</head> <body> <div>nome da pagina</div> <div>campo1</div> <p>campo2</p> ... <p id=”xyz”>campo3</p> </body> </html> campo1: /html/body/div[2] campo2: /html/body/p campo3: //p[@id=”xyz”]
  40. 40. Web Semântica/RDF ● Grosso modo: “descrever o significado do conteúdo” ● RDF (Resource Description Framework) é um meta-formato ● Pode ser embutido no próprio HTML ● Dica: pesquise “microformats”
  41. 41. RDF (FOAF) embutido <html> <head> </head> <body> <p >Oi, eu sou o Carlos Nascimento . <img src="chester.jpg" /> </p> </body> </html>
  42. 42. RDF (FOAF) embutido <html> <head> <link rel="schema.foaf" href="http://xmlns.com/foaf/0.1/" /> <link href="#chester" rev="foaf-homepage foaf-made" rel="foaf-maker" /> </head> <body> <p id=”chester”>Oi, eu sou o <span class="foaf-name"><span class="foaf- firstName">Carlos</span> <span class="foaf- surname">Nascimento</span></span>. <img src="chester.jpg" class="foaf- depiction" /> </p> </body> </html>
  43. 43. RSS ● Sigla com vários significados (dica: Really Simple Sindication) ● Descreve / agrega conteúdo (web syndication) em uma timeline ● Publish / Subscribe ● É só um XML! (1.0 era RDF)
  44. 44. KML ● Keyhole Markup Language (Keyhole Earth Viewer Google Earth) ● Descreve pontos geográficos ● É um XML ● Extensível e tem subsets, ex.: ARML (Augmented Reality ML)
  45. 45. KML <?xml version="1.0" encoding="UTF-8"?> <kml xmlns="http://www.opengis.net/kml/2.2"> <Document> <Placemark> <name>New York City</name> <description>New York City</description> <Point> <coordinates> -74.006393,40.714172,0 </coordinates> </Point> </Placemark> </Document> </kml>
  46. 46. Prática
  47. 47. Exercício: Yahoo! Pipes ● Y! Pipes: programação visual http://pipes.yahoo.com ● Idéia: misturar dois jornais diferentes: http://jornalcidade.uol.com.br http://www.nytimes.com
  48. 48. Exercício: Mashup em PHP ● Apontador + Google Maps ● Idéia: mapear bares em Rio Claro ● Cadastro no Apontador: http://www.apontador.com.br ● Cadastrar aplicativo, anotar key e secret
  49. 49. Exercício: Mashup em PHP ● Crie o mapa.html ● Crie o locais.php ● Altere o mapa.html para mostrar os locais do locais.php
  50. 50. Obrigado! chester@apontador.com @chesterbr http://chester.blog.br
  51. 51. Links Úteis Textos ● What is Web 2.0, Tim O'Reily: http://aponta.me/2F9q ● Mashups: The new breed of Web app: http://aponta.me/11tYX Documentação ● Apontador API: http://api.apontador.com.br ● Google Maps API “Hello World”: http://aponta.me/4Dbf Mídia ● Vídeo do Girl Talk: http://aponta.me/AA8 ● Grey Album (DJ Danger Mouse): http://aponta.me/1CV

×