Mashups: Criando Valor na Web 2.0 (BandTec)

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

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 como plataforma
● Sempre em beta

● Múltiplas plataformas

● Experiência rica

● Cavalgando a inteligência coletiva

O'Reilly, 2005

Tipos de Mashup
● Mapas
● Fotos e Vídeos

● Busca e compras

● Notícias

Flickr + Google Maps = http://flickrvision.com

Lojas Online => http://buscape.com.br

Sites de Notícias => http://news.google.com.br

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
Asynchronous JavaScript + XML

AJAX

Chamadas em
segundo plano
(sem o “reload)

AJAX

Lógica de apresentação e
navegação no browser

AJAX

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

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>

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

● 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

● 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,

+
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)

+
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

Mashups: Criando Valor na Web 2.0 (BandTec)

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Mashups: Criando Valor na Web 2.0 (BandTec)

Similar to Mashups: Criando Valor na Web 2.0 (BandTec) (20)

More from Carlos Duarte do Nascimento

More from Carlos Duarte do Nascimento (9)

Mashups: Criando Valor na Web 2.0 (BandTec)