• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Mashups: Criando Valor na Web 2.0
 

Mashups: Criando Valor na Web 2.0

on

  • 1,813 views

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

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

Statistics

Views

Total Views
1,813
Views on SlideShare
1,813
Embed Views
0

Actions

Likes
2
Downloads
26
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Mashups: Criando Valor na Web 2.0 Mashups: Criando Valor na Web 2.0 Presentation Transcript

    • 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 ● 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 Web Duane 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 Web Duane 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 (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
    • 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 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”]
    • 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 <?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