SlideShare uma empresa Scribd logo
1 de 58
Baixar para ler offline
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?) - aprenda fazendo!)
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
O que é Mashup?
Mashup
   “uma composição incomum ou
inovadora de conteúdo (tipicamente
 vindo de origens não-relacionadas)
    feita para consumo humano”
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 consumo humano”
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
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




                      O'Reilly, 2005
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
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?)




         Uma API é um contrato!
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 background)
● Respostas do servidor acionam eventos


  (JavaScript), que redesenham partes da
  Página (usando DOM)
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_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>
REST
● Representational State Transfer
● Usa apenas HTTP (RFC 2616)

● Entidades são caminhos, ex.:


    /clientes/empresaX/pedidos/32
● Verbos HTTP: GET, PUT, DELETE...
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
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”]
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”]
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”
RDF (FOAF) embutido
<html>
  <head>



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

            Carlos
          Nascimento               .
      <img src="chester.jpg"
            />
    </p>
  </body>
</html>
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>
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)
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)
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>
Prática
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/
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
● 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
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,
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)
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);
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://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

Mais conteúdo relacionado

Mais procurados

Curso JavaScript - Aula sobre DOM e Ajax
Curso JavaScript - Aula sobre DOM e AjaxCurso JavaScript - Aula sobre DOM e Ajax
Curso JavaScript - Aula sobre DOM e AjaxTiago Antônio da Silva
 
Zabbix Conference LatAm 2019 - Automação: Ganhando produtividade
Zabbix Conference LatAm 2019 - Automação: Ganhando produtividadeZabbix Conference LatAm 2019 - Automação: Ganhando produtividade
Zabbix Conference LatAm 2019 - Automação: Ganhando produtividadeIgor Nicoli
 
Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS
Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JSDesenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS
Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JSRomulo Fagundes
 
Django Tem Ritmo
Django Tem RitmoDjango Tem Ritmo
Django Tem Ritmoitalomaia
 
Introdução ao MongoDB
Introdução ao MongoDBIntrodução ao MongoDB
Introdução ao MongoDBLuiz Duarte
 
Introdução ao MongoDB II
Introdução ao MongoDB IIIntrodução ao MongoDB II
Introdução ao MongoDB IILuiz Duarte
 
Mecanismo de Busca com Node.js + MongoDB
Mecanismo de Busca com Node.js + MongoDBMecanismo de Busca com Node.js + MongoDB
Mecanismo de Busca com Node.js + MongoDBLuiz Duarte
 
Workshop Node.js + MongoDB + Mongoose
Workshop Node.js + MongoDB + MongooseWorkshop Node.js + MongoDB + Mongoose
Workshop Node.js + MongoDB + MongooseLuiz Duarte
 
Aplicações rápidas para a Web com Django
Aplicações rápidas para a Web com DjangoAplicações rápidas para a Web com Django
Aplicações rápidas para a Web com DjangoFreedom DayMS
 
Hpricot GURU-SP por Jonas Alves
Hpricot GURU-SP por Jonas AlvesHpricot GURU-SP por Jonas Alves
Hpricot GURU-SP por Jonas AlvesJonas Alves
 
Construindo um Google Pyrate
Construindo um Google PyrateConstruindo um Google Pyrate
Construindo um Google PyrateRoselma Mendes
 
Novidades do elasticsearch 2.0 e como usá-lo com PHP
Novidades do elasticsearch 2.0 e como usá-lo com PHPNovidades do elasticsearch 2.0 e como usá-lo com PHP
Novidades do elasticsearch 2.0 e como usá-lo com PHPLuiz Henrique Zambom Santana
 
Crawling - Coleta de dados na Web com PHP
Crawling - Coleta de dados na Web com PHP Crawling - Coleta de dados na Web com PHP
Crawling - Coleta de dados na Web com PHP Luis Gustavo Almeida
 
Criando aplicações JavaScript com CouchApp + Sammy.js
Criando aplicações JavaScript com CouchApp + Sammy.jsCriando aplicações JavaScript com CouchApp + Sammy.js
Criando aplicações JavaScript com CouchApp + Sammy.jsHenrique Gogó
 
React e Ratchet, async e websockets com PHP, por Gabriel Couto
React e Ratchet, async e websockets com PHP, por Gabriel CoutoReact e Ratchet, async e websockets com PHP, por Gabriel Couto
React e Ratchet, async e websockets com PHP, por Gabriel CoutoiMasters
 
Desenvolvimento de aplicações PHP com MongoDB
Desenvolvimento de aplicações PHP com MongoDBDesenvolvimento de aplicações PHP com MongoDB
Desenvolvimento de aplicações PHP com MongoDBAri Stopassola Junior
 

Mais procurados (20)

Html, css, js, ajax
Html, css, js, ajaxHtml, css, js, ajax
Html, css, js, ajax
 
Curso JavaScript - Aula sobre DOM e Ajax
Curso JavaScript - Aula sobre DOM e AjaxCurso JavaScript - Aula sobre DOM e Ajax
Curso JavaScript - Aula sobre DOM e Ajax
 
Zabbix Conference LatAm 2019 - Automação: Ganhando produtividade
Zabbix Conference LatAm 2019 - Automação: Ganhando produtividadeZabbix Conference LatAm 2019 - Automação: Ganhando produtividade
Zabbix Conference LatAm 2019 - Automação: Ganhando produtividade
 
Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS
Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JSDesenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS
Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS
 
Django Tem Ritmo
Django Tem RitmoDjango Tem Ritmo
Django Tem Ritmo
 
Introdução ao MongoDB
Introdução ao MongoDBIntrodução ao MongoDB
Introdução ao MongoDB
 
Introdução ao MongoDB II
Introdução ao MongoDB IIIntrodução ao MongoDB II
Introdução ao MongoDB II
 
Mongo + php
Mongo + phpMongo + php
Mongo + php
 
Mecanismo de Busca com Node.js + MongoDB
Mecanismo de Busca com Node.js + MongoDBMecanismo de Busca com Node.js + MongoDB
Mecanismo de Busca com Node.js + MongoDB
 
Workshop Node.js + MongoDB + Mongoose
Workshop Node.js + MongoDB + MongooseWorkshop Node.js + MongoDB + Mongoose
Workshop Node.js + MongoDB + Mongoose
 
Aplicações rápidas para a Web com Django
Aplicações rápidas para a Web com DjangoAplicações rápidas para a Web com Django
Aplicações rápidas para a Web com Django
 
Hpricot GURU-SP por Jonas Alves
Hpricot GURU-SP por Jonas AlvesHpricot GURU-SP por Jonas Alves
Hpricot GURU-SP por Jonas Alves
 
Java script aula 10 - angularjs
Java script   aula 10 - angularjsJava script   aula 10 - angularjs
Java script aula 10 - angularjs
 
Construindo um Google Pyrate
Construindo um Google PyrateConstruindo um Google Pyrate
Construindo um Google Pyrate
 
Novidades do elasticsearch 2.0 e como usá-lo com PHP
Novidades do elasticsearch 2.0 e como usá-lo com PHPNovidades do elasticsearch 2.0 e como usá-lo com PHP
Novidades do elasticsearch 2.0 e como usá-lo com PHP
 
Workshop de ELK - EmergiNet
Workshop de ELK - EmergiNetWorkshop de ELK - EmergiNet
Workshop de ELK - EmergiNet
 
Crawling - Coleta de dados na Web com PHP
Crawling - Coleta de dados na Web com PHP Crawling - Coleta de dados na Web com PHP
Crawling - Coleta de dados na Web com PHP
 
Criando aplicações JavaScript com CouchApp + Sammy.js
Criando aplicações JavaScript com CouchApp + Sammy.jsCriando aplicações JavaScript com CouchApp + Sammy.js
Criando aplicações JavaScript com CouchApp + Sammy.js
 
React e Ratchet, async e websockets com PHP, por Gabriel Couto
React e Ratchet, async e websockets com PHP, por Gabriel CoutoReact e Ratchet, async e websockets com PHP, por Gabriel Couto
React e Ratchet, async e websockets com PHP, por Gabriel Couto
 
Desenvolvimento de aplicações PHP com MongoDB
Desenvolvimento de aplicações PHP com MongoDBDesenvolvimento de aplicações PHP com MongoDB
Desenvolvimento de aplicações PHP com MongoDB
 

Semelhante a Mashups: Criando Valor na Web 2.0 (BandTec)

PHP e AJAX: do Request ao Framework
PHP e AJAX: do Request ao FrameworkPHP e AJAX: do Request ao Framework
PHP e AJAX: do Request ao FrameworkRafael Dohms
 
Desenvolvimento de Aplicações para o Google App Engine (CPBR5)
Desenvolvimento de Aplicações para o Google App Engine (CPBR5)Desenvolvimento de Aplicações para o Google App Engine (CPBR5)
Desenvolvimento de Aplicações para o Google App Engine (CPBR5)Carlos Duarte do Nascimento
 
Desenvolvimento de aplicações para o Google App Engine
Desenvolvimento de aplicações para o Google App EngineDesenvolvimento de aplicações para o Google App Engine
Desenvolvimento de aplicações para o Google App EngineCampus Party Brasil
 
Minicurso Ajax - 5. Semana de Informática PUC Minas São Gabriel
Minicurso Ajax - 5. Semana de Informática PUC Minas São GabrielMinicurso Ajax - 5. Semana de Informática PUC Minas São Gabriel
Minicurso Ajax - 5. Semana de Informática PUC Minas São GabrielMarcelo Linhares
 
Nadando em Dinheiro com jQuery
Nadando em Dinheiro com jQueryNadando em Dinheiro com jQuery
Nadando em Dinheiro com jQueryReinaldo Junior
 
Minicurso de PHP Com Ajax
Minicurso de PHP Com AjaxMinicurso de PHP Com Ajax
Minicurso de PHP Com AjaxAdler Medrado
 
RubyConfBr 2015 - Rails & Javascript: faça isso direito
RubyConfBr 2015 - Rails & Javascript: faça isso direitoRubyConfBr 2015 - Rails & Javascript: faça isso direito
RubyConfBr 2015 - Rails & Javascript: faça isso direitoCezinha Anjos
 
TDC 2015 - Rails & Javascript: faça isso direito
TDC 2015 - Rails & Javascript: faça isso direitoTDC 2015 - Rails & Javascript: faça isso direito
TDC 2015 - Rails & Javascript: faça isso direitoCezinha Anjos
 
Prototype Framework Javascript
Prototype Framework JavascriptPrototype Framework Javascript
Prototype Framework JavascriptMarcio Romu
 
PHP e AJAX: do Request ao Framework
PHP e AJAX: do Request ao FrameworkPHP e AJAX: do Request ao Framework
PHP e AJAX: do Request ao FrameworkRafael Dohms
 
Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa
Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosaChrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa
Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosaJoselito Nascimento
 
Mongo Db - PHP Day Workshop
Mongo Db - PHP Day WorkshopMongo Db - PHP Day Workshop
Mongo Db - PHP Day WorkshopDiego Sana
 
Ajax para quem_ouviu_falar
Ajax para quem_ouviu_falarAjax para quem_ouviu_falar
Ajax para quem_ouviu_falarCharleston Anjos
 

Semelhante a Mashups: Criando Valor na Web 2.0 (BandTec) (20)

Mini Curso Mashup Coreu
Mini Curso Mashup CoreuMini Curso Mashup Coreu
Mini Curso Mashup Coreu
 
PHP e AJAX: do Request ao Framework
PHP e AJAX: do Request ao FrameworkPHP e AJAX: do Request ao Framework
PHP e AJAX: do Request ao Framework
 
Desenvolvimento de Aplicações para o Google App Engine (CPBR5)
Desenvolvimento de Aplicações para o Google App Engine (CPBR5)Desenvolvimento de Aplicações para o Google App Engine (CPBR5)
Desenvolvimento de Aplicações para o Google App Engine (CPBR5)
 
Desenvolvimento de aplicações para o Google App Engine
Desenvolvimento de aplicações para o Google App EngineDesenvolvimento de aplicações para o Google App Engine
Desenvolvimento de aplicações para o Google App Engine
 
Minicurso Ajax - 5. Semana de Informática PUC Minas São Gabriel
Minicurso Ajax - 5. Semana de Informática PUC Minas São GabrielMinicurso Ajax - 5. Semana de Informática PUC Minas São Gabriel
Minicurso Ajax - 5. Semana de Informática PUC Minas São Gabriel
 
jQuery
jQueryjQuery
jQuery
 
jQuery
jQueryjQuery
jQuery
 
Nadando em Dinheiro com jQuery
Nadando em Dinheiro com jQueryNadando em Dinheiro com jQuery
Nadando em Dinheiro com jQuery
 
Minicurso de PHP Com Ajax
Minicurso de PHP Com AjaxMinicurso de PHP Com Ajax
Minicurso de PHP Com Ajax
 
RubyConfBr 2015 - Rails & Javascript: faça isso direito
RubyConfBr 2015 - Rails & Javascript: faça isso direitoRubyConfBr 2015 - Rails & Javascript: faça isso direito
RubyConfBr 2015 - Rails & Javascript: faça isso direito
 
MongoDB + PHP
MongoDB + PHPMongoDB + PHP
MongoDB + PHP
 
TDC 2015 - Rails & Javascript: faça isso direito
TDC 2015 - Rails & Javascript: faça isso direitoTDC 2015 - Rails & Javascript: faça isso direito
TDC 2015 - Rails & Javascript: faça isso direito
 
Ajax em java
Ajax em javaAjax em java
Ajax em java
 
Prototype Framework Javascript
Prototype Framework JavascriptPrototype Framework Javascript
Prototype Framework Javascript
 
PHP e AJAX: do Request ao Framework
PHP e AJAX: do Request ao FrameworkPHP e AJAX: do Request ao Framework
PHP e AJAX: do Request ao Framework
 
Aplicacoes Rapidas Para Web Com Django
Aplicacoes Rapidas Para Web Com DjangoAplicacoes Rapidas Para Web Com Django
Aplicacoes Rapidas Para Web Com Django
 
Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa
Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosaChrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa
Chrome Apps e NodeWebkit: traga seu webapp para o Desktop - #outubrorosa
 
Modern PHP
Modern PHPModern PHP
Modern PHP
 
Mongo Db - PHP Day Workshop
Mongo Db - PHP Day WorkshopMongo Db - PHP Day Workshop
Mongo Db - PHP Day Workshop
 
Ajax para quem_ouviu_falar
Ajax para quem_ouviu_falarAjax para quem_ouviu_falar
Ajax para quem_ouviu_falar
 

Mais de Carlos Duarte do Nascimento

Mais de Carlos Duarte do Nascimento (9)

git fail --force (make it up with your pull requests)
git fail --force (make it up with your pull requests)git fail --force (make it up with your pull requests)
git fail --force (make it up with your pull requests)
 
git fail --force (faça as pazes com seus pull requests)
git fail --force (faça as pazes com seus pull requests)git fail --force (faça as pazes com seus pull requests)
git fail --force (faça as pazes com seus pull requests)
 
ruby2600 - an Atari 2600 emulator written in Ruby
ruby2600 - an Atari 2600 emulator written in Rubyruby2600 - an Atari 2600 emulator written in Ruby
ruby2600 - an Atari 2600 emulator written in Ruby
 
Atari 2600 VCS Programming
Atari 2600 VCS ProgrammingAtari 2600 VCS Programming
Atari 2600 VCS Programming
 
Programação para Atari 2600
Programação para Atari 2600Programação para Atari 2600
Programação para Atari 2600
 
Aplicativos Mobile: Da Idéia ao Produto (ou não)
Aplicativos Mobile: Da Idéia ao Produto (ou não)Aplicativos Mobile: Da Idéia ao Produto (ou não)
Aplicativos Mobile: Da Idéia ao Produto (ou não)
 
Apontador API (para programadores Python)
Apontador API (para programadores Python)Apontador API (para programadores Python)
Apontador API (para programadores Python)
 
Cruzalinhas - Palestra Relâmpago no Fisl 11
Cruzalinhas - Palestra Relâmpago no Fisl 11Cruzalinhas - Palestra Relâmpago no Fisl 11
Cruzalinhas - Palestra Relâmpago no Fisl 11
 
SlideMeme - Habilitando o SlideShare dentro do Yahoo! Meme - Yahoo! Open Hack...
SlideMeme - Habilitando o SlideShare dentro do Yahoo! Meme - Yahoo! Open Hack...SlideMeme - Habilitando o SlideShare dentro do Yahoo! Meme - Yahoo! Open Hack...
SlideMeme - Habilitando o SlideShare dentro do Yahoo! Meme - Yahoo! Open Hack...
 

Mashups: Criando Valor na Web 2.0 (BandTec)

  • 1. Mashups: Criando Valor na Web 2.0 Carlos Duarte do Nascimento chester@apontador.com @chesterbr http://chester.blog.br
  • 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. 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. O que é Mashup?
  • 5. Mashup “uma composição incomum ou inovadora de conteúdo (tipicamente vindo de origens não-relacionadas) feita para consumo humano”
  • 6. O que é Mashup?
  • 7. O que é Mashup?
  • 8. O que é Mashup?
  • 9. O que é Mashup?
  • 10. Mashup “uma composição incomum ou inovadora de conteúdo (tipicamente vindo de origens não-relacionadas) feita para consumo humano”
  • 11. 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
  • 14. Web 2.0 ● Web como plataforma ● Sempre em beta ● Múltiplas plataformas ● Experiência rica ● Cavalgando a inteligência coletiva O'Reilly, 2005
  • 15. 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
  • 16. Tipos de Mashup ● Mapas ● Fotos e Vídeos ● Busca e compras ● Notícias
  • 18. Flickr + Google Maps = http://flickrvision.com
  • 20.
  • 21. Lojas Online => http://buscape.com.br
  • 22. Sites de Notícias => http://news.google.com.br
  • 23.
  • 25. Tecnologia ● Arquitetura (APIs/sites/browsers) ● AJAX ● REST ● Crawling / Scraping ● Web Semântica/ RDF ● RSS e ATOM
  • 26. Arquitetura (os atores) ● Provedores de Conteúdo/APIs ● Site de Mashup ● Navegador (browser)
  • 28. APIs ● Funcionalidades (métodos, funções) ● Protocolos (como eu chamo?) ● Autenticação (quem pode chamar?) Uma API é um contrato!
  • 29.
  • 30. APIs no Brasil Fonte:
  • 31. AJAX
  • 32. AJAX
  • 34. AJAX Asynchronous JavaScript + XML Chamadas em segundo plano (sem o “reload)
  • 35. AJAX Asynchronous JavaScript + XML Lógica de apresentação e navegação no browser
  • 36. AJAX Asynchronous JavaScript + XML ...ou não (JSON)
  • 37. 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)
  • 38. AJAX Implementações possíveis: ‒Tag <iframe> ‒Objeto XMLHttpRequest Conselho de amigo: jQuery (http://jquery.com)
  • 39. 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>
  • 40. REST ● Representational State Transfer ● Usa apenas HTTP (RFC 2616) ● Entidades são caminhos, ex.: /clientes/empresaX/pedidos/32 ● Verbos HTTP: GET, PUT, DELETE...
  • 41. 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
  • 42. 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”]
  • 43. 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”]
  • 44. 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”
  • 45. RDF (FOAF) embutido <html> <head> </head> <body> <p >Oi, eu sou o Carlos Nascimento . <img src="chester.jpg" /> </p> </body> </html>
  • 46. 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>
  • 47. 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)
  • 48. 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)
  • 49. 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>
  • 51. 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/
  • 52. Exercício: Mashup JavaScript ● Mapear museus em São Paulo ● Museus: Apontador ● Mapas: Google Maps
  • 53. 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
  • 54. 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,
  • 55. 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)
  • 56. 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);
  • 57. Obrigado! chester@apontador.com @chesterbr http://chester.blog.br
  • 58. 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