Mashups: Criando  Valor na Web 2.0 Carlos Duarte do Nascimento   chester@apontador.com@chesterbr http://chester.blog.br
O que vamos ver●   O que é um Mashup?    (e por que isso me interessa?)● Exemplos● Tecnologia● Prática    (exercício(s?) -...
Palestrante     (quem é esse cara?)● Bacharel em Matemática Aplicada e  Computacional (IME/USP)● Desenvolvedor de Software...
O que é Mashup?
Mashup   “uma composição incomum ouinovadora de conteúdo (tipicamente vindo de origens não-relacionadas)    feita para con...
O que é Mashup?
O que é Mashup?
O que é Mashup?
O que é Mashup?
Mashup   “uma composição incomum ouinovadora de conteúdo (tipicamente vindo de origens não-relacionadas)    feita para con...
Mashup   “uma composição incomum ouinovadora de conteúdo (tipicamente vindo de origens não-relacionadas)    feita para con...
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 coletiva ...
Mashup   “uma composição incomum ouinovadora de conteúdo (tipicamente vindo de origens não-relacionadas)    feita para con...
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)
APIsApplication Programming Interface
APIs● Funcionalidades (métodos, funções)● Protocolos (como eu chamo?)● Autenticação (quem pode chamar?)         Uma API é ...
APIs no Brasil         Fonte:
AJAX
AJAX
AJAXAsynchronous JavaScript + XML
AJAXAsynchronous JavaScript + XML     Chamadas em     segundo plano    (sem o “reload)
AJAXAsynchronous JavaScript + XML      Lógica de apresentação e       navegação no browser
AJAXAsynchronous JavaScript + XML                   ...ou não                    (JSON)
AJAX● Navegador chama HTML principal● Usuário clica/interage● Cada interação gera uma chamada ao  servidor (em background)...
AJAXImplementações possíveis:  ‒Tag <iframe>  ‒Objeto XMLHttpRequestConselho de amigo: jQuery (http://jquery.com)
AJAX com jQuery<script type=”text/javascript”>  $.getJSON("http://api.flickr.com/services ↵             /feeds/photos_publ...
REST● Representational State Transfer● Usa apenas HTTP (RFC 2616)● Entidades são caminhos, ex.:    /clientes/empresaX/pedi...
Crawling / Scraping● Extrair dados “na marra”● Último recurso (sujeito a quebra  e problemas legais)● Cuidados: não sobrec...
XPath<html>  <head>...</head>  <body>    <div>nome da pagina</div>    <div>campo1</div>    <p>campo2</p>    ...       <p i...
XPath<html>  <head>...</head>  <body>    <div>nome da pagina</div>    <div>campo1</div>    <p>campo2</p>    ...      <p id...
Web Semântica/RDF● Grosso modo: “descrever o   significado do conteúdo”● RDF (Resource Description  Framework) é um meta-f...
RDF (FOAF) embutido<html>  <head>  </head>  <body>    <p             >Oi, eu sou o            Carlos          Nascimento  ...
RDF (FOAF) embutido<html>  <head>    <link rel="schema.foaf"href="http://xmlns.com/foaf/0.1/" />    <link href="#chester" ...
RSS● Sigla com vários significados  (dica: Really Simple Sindication)● Descreve / agrega conteúdo  (web syndication) em um...
KML●   Keyhole Markup Language    (Keyhole Earth Viewer ⇒ Google Earth)● Descreve pontos geográficos● É um XML● Extensível...
KML<kml xmlns="http://www.opengis.net/kml/2.2">  <Document>    <Placemark>       <name>New York City</name>       <descrip...
Prática
Exercício:Yahoo! Pipes●   Y! Pipes: programação visual       http://pipes.yahoo.com●   Idéia: misturar dois jornais    dif...
Exercício: Mashup JavaScript● Mapear museus em São Paulo● Museus: Apontador● Mapas: Google Maps
Exercício: Mashup JavaScript●   Cadastre-se:     http://www.apontador.com.br● Crie o aplicativo, anote  o key e o secret● ...
Exercício: Mashup JavaScript●   Exemplo da API do Google Maps:    http://aponta.me/1yr● Crie o mapa.html copiando e  colan...
Exercício: Mashup JavaScript                           + O ideal seria criar uma página no servidor (museus.php), ex.: <?p...
Exercício: Mashup JavaScript                 + mas vamos ganhar tempo e chamar uma página já pronta:  var layer = new goog...
Obrigado!   chester@apontador.com@chesterbr http://chester.blog.br
Links ÚteisTextos● What is Web 2.0, Tim OReily: http://aponta.me/2F9q● Mashups: The new breed of Web app: http://aponta.me...
Mashups: Criando Valor na Web 2.0 (BandTec)
Mashups: Criando Valor na Web 2.0 (BandTec)
Mashups: Criando Valor na Web 2.0 (BandTec)
Upcoming SlideShare
Loading in …5
×

Mashups: Criando Valor na Web 2.0 (BandTec)

1,703 views
1,521 views

Published on

Palestra apresentada aos alunos da Faculdade BandTec em 30/Abr/2011

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

  • Be the first to like this

No Downloads
Views
Total views
1,703
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Mashups: Criando Valor na Web 2.0 (BandTec)

  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● Gerente de Produto no Apontador● Twitter: @chesterbr● Mais informações: http://chester.me
  4. 4. O que é Mashup?
  5. 5. Mashup “uma composição incomum ouinovadora de conteúdo (tipicamente vindo de origens não-relacionadas) feita para consumo humano”
  6. 6. O que é Mashup?
  7. 7. O que é Mashup?
  8. 8. O que é Mashup?
  9. 9. O que é Mashup?
  10. 10. Mashup “uma composição incomum ouinovadora de conteúdo (tipicamente vindo de origens não-relacionadas) feita para consumo humano”
  11. 11. Mashup “uma composição incomum ouinovadora 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
  12. 12. Web 2.0
  13. 13. Web 2.0
  14. 14. Web 2.0● Web como plataforma● Sempre em beta● Múltiplas plataformas● Experiência rica● Cavalgando a inteligência coletiva OReilly, 2005
  15. 15. Mashup “uma composição incomum ouinovadora 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
  16. 16. Tipos de Mashup● Mapas● Fotos e Vídeos● Busca e compras● Notícias
  17. 17. Exemplos
  18. 18. Flickr + Google Maps = http://flickrvision.com
  19. 19. cruzalinhas.appspot.com
  20. 20. Lojas Online => http://buscape.com.br
  21. 21. Sites de Notícias => http://news.google.com.br
  22. 22. Tecnologia
  23. 23. Tecnologia● Arquitetura (APIs/sites/browsers)● AJAX● REST● Crawling / Scraping● Web Semântica/ RDF● RSS e ATOM
  24. 24. Arquitetura (os atores)● Provedores de Conteúdo/APIs● Site de Mashup● Navegador (browser)
  25. 25. APIsApplication Programming Interface
  26. 26. APIs● Funcionalidades (métodos, funções)● Protocolos (como eu chamo?)● Autenticação (quem pode chamar?) Uma API é um contrato!
  27. 27. APIs no Brasil Fonte:
  28. 28. AJAX
  29. 29. AJAX
  30. 30. AJAXAsynchronous JavaScript + XML
  31. 31. AJAXAsynchronous JavaScript + XML Chamadas em segundo plano (sem o “reload)
  32. 32. AJAXAsynchronous JavaScript + XML Lógica de apresentação e navegação no browser
  33. 33. AJAXAsynchronous JavaScript + XML ...ou não (JSON)
  34. 34. 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)
  35. 35. AJAXImplementações possíveis: ‒Tag <iframe> ‒Objeto XMLHttpRequestConselho de amigo: jQuery (http://jquery.com)
  36. 36. 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>
  37. 37. REST● Representational State Transfer● Usa apenas HTTP (RFC 2616)● Entidades são caminhos, ex.: /clientes/empresaX/pedidos/32● Verbos HTTP: GET, PUT, DELETE...
  38. 38. 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
  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/pcampo3: //p[@id=”xyz”]
  40. 40. 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/pcampo3: //p[@id=”xyz”]
  41. 41. 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”
  42. 42. RDF (FOAF) embutido<html> <head> </head> <body> <p >Oi, eu sou o Carlos Nascimento . <img src="chester.jpg" /> </p> </body></html>
  43. 43. RDF (FOAF) embutido<html> <head> <link rel="schema.foaf"href="http://xmlns.com/foaf/0.1/" /> <link href="#chester" rev="foaf-homepagefoaf-made" rel="foaf-maker" /> </head> <body> <p id=”chester”>Oi, eu sou o <spanclass="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>
  44. 44. 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)
  45. 45. 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)
  46. 46. KML<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>
  47. 47. Prática
  48. 48. Exercício:Yahoo! Pipes● Y! Pipes: programação visual http://pipes.yahoo.com● Idéia: misturar dois jornais diferentes: http://estadao.com.br/ http://folha.com.br/
  49. 49. Exercício: Mashup JavaScript● Mapear museus em São Paulo● Museus: Apontador● Mapas: Google Maps
  50. 50. Exercício: Mashup JavaScript● Cadastre-se: http://www.apontador.com.br● Crie o aplicativo, anote o key e o secret● Aprenda sobre a API Apontador: http://api.apontador.com.br● Faça uma busca no navegador: http://api.apontador.com.br/v1/ search/places/byaddress ?state=sp&city=Sao+Paulo&term=museu
  51. 51. Exercício: Mashup JavaScript● Exemplo da API do Google Maps: http://aponta.me/1yr● Crie o mapa.html copiando e colando o exemplo● Mude o local e o zoom: var latlng = new google.maps.LatLng( -23.57775, -46.64326); var myOptions = { zoom: 15,
  52. 52. Exercício: Mashup JavaScript + O ideal seria criar uma página no servidor (museus.php), ex.: <?php header("Content-Type: application/vnd.google- earth.kml+xml") echo file_get_contents( “http://$key:$secret@ api.apontador.com.br/v1/search/places...”) (e na real, usaríamos libcurl no lugar de file_get_contents)
  53. 53. Exercício: Mashup JavaScript + mas vamos ganhar tempo e chamar uma página já pronta: var layer = new google.maps.KmlLayer( "http://chester.blog.br/museus.php", {preserveViewport: true}); layer.setMap(map);
  54. 54. Obrigado! chester@apontador.com@chesterbr http://chester.blog.br
  55. 55. Links ÚteisTextos● What is Web 2.0, Tim OReily: http://aponta.me/2F9q● Mashups: The new breed of Web app: http://aponta.me/11tYXDocumentação● Apontador API: http://api.apontador.com.br● Google Maps API “Hello World”: http://aponta.me/4DbfMídia● Vídeo do Girl Talk: http://aponta.me/AA8● Grey Album (DJ Danger Mouse): http://aponta.me/1CV

×