Mashups: CriandoValor na Web 2.0
Carlos Duarte do [email protected]
@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 WebDuane 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 WebDuane 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
● Provedores de Conteúdo/APIs ● Site de Mashup● Navegador (browser)
(os atores)
APIsApplication 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 daPágina (usando DOM)
AJAXImplementaçõ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/pcampo3: //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/pcampo3: //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!
[email protected]@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