Slides do mini-curso ministrado durante a SECCOMP 2010 (XVIII Semana da Ciência da Computação) no campus de Rio Claro da UNESP, na qual alunos de Ciência da Computação foram apresentados ao universo da criação de mashups, viram alguns cases e tecnologias relacionadas e fizeram exercícios usando Yahoo! Pipes (para integrar feeds RSS) e JavaScript (integrando a Apontador API com o Google Maps).
SlideMeme - Habilitando o SlideShare dentro do Yahoo! Meme - Yahoo! Open Hack...
Criando valor com mashups 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
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
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)
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
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>
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)
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
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