SlideShare uma empresa Scribd logo
1 de 54
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

● Arquiteto de Produtos no Apontador

● Twitter: @chesterbr

● Mais informações: http://chester.me
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 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
<?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>
Prática
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
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
Exercício: Mashup em PHP
● Crie o mapa.html
● Crie o locais.php

● Altere o mapa.html para mostrar


  os locais do locais.php
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
 
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
 
Lib.SAPO.JS - Codebits2007
Lib.SAPO.JS  - Codebits2007Lib.SAPO.JS  - Codebits2007
Lib.SAPO.JS - Codebits2007Claudio Gamboa
 
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
 
Construindo um Google Pyrate
Construindo um Google PyrateConstruindo um Google Pyrate
Construindo um Google PyrateRoselma Mendes
 
Apresentação sobre MVVMC
Apresentação sobre MVVMCApresentação sobre MVVMC
Apresentação sobre MVVMCAlisson Agiani
 
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
 
Introdução ao MongoDB
Introdução ao MongoDBIntrodução ao MongoDB
Introdução ao MongoDBLuiz Duarte
 
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
 
Introdução ao MongoDB II
Introdução ao MongoDB IIIntrodução ao MongoDB II
Introdução ao MongoDB IILuiz Duarte
 
Workshop Node.js + MongoDB + Mongoose
Workshop Node.js + MongoDB + MongooseWorkshop Node.js + MongoDB + Mongoose
Workshop Node.js + MongoDB + MongooseLuiz Duarte
 
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
 
Django Tem Ritmo
Django Tem RitmoDjango Tem Ritmo
Django Tem Ritmoitalomaia
 
Internet em pauta: Desmistificando o desenvolvimento de websites
Internet em pauta: Desmistificando o desenvolvimento de websitesInternet em pauta: Desmistificando o desenvolvimento de websites
Internet em pauta: Desmistificando o desenvolvimento de websitesGabriel Fernandes
 
Backbone.js - A espinha dorsal de aplicações web
Backbone.js - A espinha dorsal de aplicações webBackbone.js - A espinha dorsal de aplicações web
Backbone.js - A espinha dorsal de aplicações webHenrique Gogó
 

Mais procurados (20)

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
 
Workshop de ELK - EmergiNet
Workshop de ELK - EmergiNetWorkshop de ELK - EmergiNet
Workshop de ELK - EmergiNet
 
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
 
Mini Curso Mashup Coreu
Mini Curso Mashup CoreuMini Curso Mashup Coreu
Mini Curso Mashup Coreu
 
Lib.SAPO.JS - Codebits2007
Lib.SAPO.JS  - Codebits2007Lib.SAPO.JS  - Codebits2007
Lib.SAPO.JS - Codebits2007
 
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
 
Construindo um Google Pyrate
Construindo um Google PyrateConstruindo um Google Pyrate
Construindo um Google Pyrate
 
Apresentação sobre MVVMC
Apresentação sobre MVVMCApresentação sobre MVVMC
Apresentação sobre MVVMC
 
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
 
Mongo + php
Mongo + phpMongo + php
Mongo + php
 
Introdução ao MongoDB
Introdução ao MongoDBIntrodução ao MongoDB
Introdução ao MongoDB
 
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
 
Introdução ao MongoDB II
Introdução ao MongoDB IIIntrodução ao MongoDB II
Introdução ao MongoDB II
 
Workshop Node.js + MongoDB + Mongoose
Workshop Node.js + MongoDB + MongooseWorkshop Node.js + MongoDB + Mongoose
Workshop Node.js + MongoDB + Mongoose
 
Bsides4cooler
Bsides4coolerBsides4cooler
Bsides4cooler
 
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
 
Django Tem Ritmo
Django Tem RitmoDjango Tem Ritmo
Django Tem Ritmo
 
2011 01-18 mongo-db
2011 01-18 mongo-db2011 01-18 mongo-db
2011 01-18 mongo-db
 
Internet em pauta: Desmistificando o desenvolvimento de websites
Internet em pauta: Desmistificando o desenvolvimento de websitesInternet em pauta: Desmistificando o desenvolvimento de websites
Internet em pauta: Desmistificando o desenvolvimento de websites
 
Backbone.js - A espinha dorsal de aplicações web
Backbone.js - A espinha dorsal de aplicações webBackbone.js - A espinha dorsal de aplicações web
Backbone.js - A espinha dorsal de aplicações web
 

Semelhante a Mashups: Criando Valor na Web 2.0

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
 
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
 
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
 
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
 
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
 
Construindo sua primeira ontologia
Construindo sua primeira ontologiaConstruindo sua primeira ontologia
Construindo sua primeira ontologiaRômulo Jales
 
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
 
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
 
Minicurso de PHP Com Ajax
Minicurso de PHP Com AjaxMinicurso de PHP Com Ajax
Minicurso de PHP Com AjaxAdler Medrado
 
Como um grande sistema REST funciona - arquitetura e desempenho
Como um grande sistema REST funciona - arquitetura e desempenhoComo um grande sistema REST funciona - arquitetura e desempenho
Como um grande sistema REST funciona - arquitetura e desempenhoDavid Robert Camargo de Campos
 
PHP e Ajax com XAJAX
PHP e Ajax com XAJAXPHP e Ajax com XAJAX
PHP e Ajax com XAJAXRafael Dohms
 
Palestra DataFlow - II São Paulo Perl Workshop
Palestra DataFlow - II São Paulo Perl WorkshopPalestra DataFlow - II São Paulo Perl Workshop
Palestra DataFlow - II São Paulo Perl WorkshopAlexei Znamensky
 
Mongo Db - PHP Day Workshop
Mongo Db - PHP Day WorkshopMongo Db - PHP Day Workshop
Mongo Db - PHP Day WorkshopDiego Sana
 
Navegadores por de baixo dos panos - Ana Luiza Bastos
Navegadores por de baixo dos panos - Ana Luiza BastosNavegadores por de baixo dos panos - Ana Luiza Bastos
Navegadores por de baixo dos panos - Ana Luiza BastosiMasters
 

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

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
 
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
 
MongoDB + PHP
MongoDB + PHPMongoDB + PHP
MongoDB + PHP
 
Nadando em Dinheiro com jQuery
Nadando em Dinheiro com jQueryNadando em Dinheiro com jQuery
Nadando em Dinheiro com jQuery
 
jQuery
jQueryjQuery
jQuery
 
jQuery
jQueryjQuery
jQuery
 
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
 
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)
 
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
 
Construindo sua primeira ontologia
Construindo sua primeira ontologiaConstruindo sua primeira ontologia
Construindo sua primeira ontologia
 
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
 
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
 
Minicurso de PHP Com Ajax
Minicurso de PHP Com AjaxMinicurso de PHP Com Ajax
Minicurso de PHP Com Ajax
 
Minicurso Web. Front-end e HTML5 (parte 2)
Minicurso Web. Front-end e HTML5 (parte 2)Minicurso Web. Front-end e HTML5 (parte 2)
Minicurso Web. Front-end e HTML5 (parte 2)
 
Como um grande sistema REST funciona - arquitetura e desempenho
Como um grande sistema REST funciona - arquitetura e desempenhoComo um grande sistema REST funciona - arquitetura e desempenho
Como um grande sistema REST funciona - arquitetura e desempenho
 
PHP e Ajax com XAJAX
PHP e Ajax com XAJAXPHP e Ajax com XAJAX
PHP e Ajax com XAJAX
 
Palestra DataFlow - II São Paulo Perl Workshop
Palestra DataFlow - II São Paulo Perl WorkshopPalestra DataFlow - II São Paulo Perl Workshop
Palestra DataFlow - II São Paulo Perl Workshop
 
Mongo Db - PHP Day Workshop
Mongo Db - PHP Day WorkshopMongo Db - PHP Day Workshop
Mongo Db - PHP Day Workshop
 
Ajax em java
Ajax em javaAjax em java
Ajax em java
 
Navegadores por de baixo dos panos - Ana Luiza Bastos
Navegadores por de baixo dos panos - Ana Luiza BastosNavegadores por de baixo dos panos - Ana Luiza Bastos
Navegadores por de baixo dos panos - Ana Luiza Bastos
 

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

Último

EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIAEAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIAMarcio Venturelli
 
Certificado - Data Analytics - CoderHouse.pdf
Certificado - Data Analytics - CoderHouse.pdfCertificado - Data Analytics - CoderHouse.pdf
Certificado - Data Analytics - CoderHouse.pdfLarissa Souza
 
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)Alessandro Almeida
 
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Dirceu Resende
 
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdfFrom_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdfRodolpho Concurde
 
Apresentação Comercial VITAL DATA 2024.pdf
Apresentação Comercial VITAL DATA 2024.pdfApresentação Comercial VITAL DATA 2024.pdf
Apresentação Comercial VITAL DATA 2024.pdfCarlos Gomes
 

Último (6)

EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIAEAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
 
Certificado - Data Analytics - CoderHouse.pdf
Certificado - Data Analytics - CoderHouse.pdfCertificado - Data Analytics - CoderHouse.pdf
Certificado - Data Analytics - CoderHouse.pdf
 
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
 
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
 
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdfFrom_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
 
Apresentação Comercial VITAL DATA 2024.pdf
Apresentação Comercial VITAL DATA 2024.pdfApresentação Comercial VITAL DATA 2024.pdf
Apresentação Comercial VITAL DATA 2024.pdf
 

Mashups: Criando Valor na Web 2.0

  • 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 ● Arquiteto de Produtos no Apontador ● Twitter: @chesterbr ● Mais informações: http://chester.me
  • 4. O que é Mashup?
  • 5. O que é Mashup?
  • 6. O que é Mashup?
  • 7. O que é Mashup?
  • 8. O que é Mashup?
  • 9. Mashup “uma composição incomum ou inovadora de conteúdo (tipicamente vindo de origens não-relacionadas) feita para consumo humano”
  • 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
  • 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. 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. Tipos de Mashup ● Mapas ● Fotos e Vídeos ● Busca e compras ● Notícias
  • 17. Flickr + Google Maps = http://flickrvision.com
  • 19.
  • 20. Lojas Online => http://buscape.com.br
  • 21. Sites de Notícias => http://news.google.com.br
  • 22.
  • 24. Tecnologia ● Arquitetura (APIs/sites/browsers) ● AJAX ● REST ● Crawling / Scraping ● Web Semântica/ RDF ● RSS e ATOM
  • 25. Arquitetura (os atores) ● Provedores de Conteúdo/APIs ● Site de Mashup ● Navegador (browser)
  • 27. APIs ● Funcionalidades (métodos, funções) ● Protocolos (como eu chamo?) ● Autenticação (quem pode chamar?) Uma API é um contrato!
  • 28.
  • 29. APIs no Brasil Fonte:
  • 30. AJAX
  • 31. AJAX
  • 33. AJAX Asynchronous JavaScript + XML Chamadas em segundo plano (sem o “reload)
  • 34. AJAX Asynchronous JavaScript + XML Lógica de apresentação e navegação no browser
  • 35. AJAX Asynchronous JavaScript + XML ...ou não (JSON)
  • 36. 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)
  • 37. AJAX Implementações possíveis: ‒Tag <iframe> ‒Objeto XMLHttpRequest Conselho de amigo: jQuery (http://jquery.com)
  • 38. 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>
  • 39. REST ● Representational State Transfer ● Usa apenas HTTP (RFC 2616) ● Entidades são caminhos, ex.: /clientes/empresaX/pedidos/32 ● Verbos HTTP: GET, PUT, DELETE...
  • 40. 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
  • 41. 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”]
  • 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. 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”
  • 44. RDF (FOAF) embutido <html> <head> </head> <body> <p >Oi, eu sou o Carlos Nascimento . <img src="chester.jpg" /> </p> </body> </html>
  • 45. 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>
  • 46. 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)
  • 47. 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)
  • 48. 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>
  • 50. 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
  • 51. 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
  • 52. Exercício: Mashup em PHP ● Crie o mapa.html ● Crie o locais.php ● Altere o mapa.html para mostrar os locais do locais.php
  • 53. Obrigado! chester@apontador.com @chesterbr http://chester.blog.br
  • 54. 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