View
1.369
Download
1
Category
Preview:
DESCRIPTION
Palestra apresentada aos alunos da Faculdade BandTec em 30/Abr/2011
Citation preview
Mashups: CriandoValor na Web 2.0
Carlos Duarte do Nascimentochester@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 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<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
Recommended