Transferir como PDF, PPTX
![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”]](https://image.slidesharecdn.com/mashups-101021220356-phpapp02/85/Mashups-Criando-Valor-na-Web-2-0-41-320.jpg)
![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”]](https://image.slidesharecdn.com/mashups-101021220356-phpapp02/85/Mashups-Criando-Valor-na-Web-2-0-42-320.jpg)
Carregado porCarlos Duarte do Nascimento
Mashups: Criando Valor na Web 2.0
O documento apresenta uma introdução sobre mashups na Web 2.0, definindo-os como composições inovadoras de conteúdo de fontes diversas. Aborda também exemplos práticos, tecnologias subjacentes como APIs, AJAX e REST, além de exercícios para aplicar esses conceitos. Conclui com recursos e links úteis para aprofundamento no tema.
Mais conteúdo relacionado
Semelhante a Mashups: Criando Valor na Web 2.0
Mashups: Criando Valor 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 vamosver ● 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
- 4. O que éMashup?
- 5. O que éMashup?
- 6. O que éMashup?
- 7. O que éMashup?
- 8. O que éMashup?
- 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
- 11.
- 12.
- 13. Web 2.0 ● Webcomo 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
- 16.
- 17. Flickr + GoogleMaps = http://flickrvision.com
- 18.
- 20. Lojas Online =>http://buscape.com.br
- 21. Sites de Notícias=> http://news.google.com.br
- 23.
- 24. Tecnologia ● Arquitetura (APIs/sites/browsers) ●AJAX ● REST ● Crawling / Scraping ● Web Semântica/ RDF ● RSS e ATOM
- 25. Arquitetura (os atores) ● Provedores de Conteúdo/APIs ● Site de Mashup ● Navegador (browser)
- 26.
- 27. APIs ● Funcionalidades (métodos,funções) ● Protocolos (como eu chamo?) ● Autenticação (quem pode chamar?) Uma API é um contrato!
- 29. APIs no Brasil Fonte:
- 30.
- 31.
- 32.
- 33. AJAX Asynchronous JavaScript +XML Chamadas em segundo plano (sem o “reload)
- 34. AJAX Asynchronous JavaScript +XML Lógica de apresentação e navegação no browser
- 35. AJAX Asynchronous JavaScript +XML ...ou não (JSON)
- 36. AJAX ● Navegador chamaHTML 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)
- 37. AJAX Implementações possíveis: ‒Tag <iframe> ‒Objeto XMLHttpRequest Conselho de amigo: jQuery (http://jquery.com)
- 38. AJAX com jQuery <scripttype=”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 StateTransfer ● 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
- 41. 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”]
- 42. 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”]
- 43. Web Semântica/RDF ● Grossomodo: “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>
- 45. 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>
- 46. RSS ● Sigla comvá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)
- 48. KML <?xml version="1.0" encoding="UTF-8"?> <kmlxmlns="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>
- 49.
- 50. 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
- 51. Exercício: Mashup emPHP ● 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 emPHP ● Crie o mapa.html ● Crie o locais.php ● Altere o mapa.html para mostrar os locais do locais.php
- 53. Obrigado! chester@apontador.com @chesterbr http://chester.blog.br
- 54. Links Úteis Textos ● Whatis 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