View
1.651
Download
0
Category
Preview:
DESCRIPTION
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).
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● 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!
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