Mini Curso Mashup Coreu

MiniCurso – Mashup, Integrando Serviços na Web – Ciência da Computação - Coreu21 de maio de 2009

minicurso

Mashup integrando Serviços

na WebMarcelo Linhares – UOL


Quem vos fala...

- 6 anos de experiência com webdevelopment- Webmaster @UOL S/A- marcelolinhares.com // pessoal- algumas brincadeiras:> vagasem.info // oportunidades em TI> marcelolinhares.com/bolsa // gestão de portfólio online


Sobre o minicurso...

Mashup? Que raios é isto?

?


Agenda

- Um pouco de história da WWW- WWW hoje! (vide Web 2.0 ou blá,blá,blá,blá...)- - Javascript, Json, CSS, EcmaScript, xHTML...- Hora do Café- Hands on code...- BrindesBrindes


Um detalhe...

Perguntas, dúvidas, sugestões, e comentários são SEMPRE bem vindos, a sua participação no mini-curso é fundamental


Um pouco de história...

- Um cara legal chamado Tim Berners

Lee criou a WWW em 1991

- Em 1993 o mesmo nerd criou o

HTML

- Ainda em 93, surge o Mosaic


Mosaic Browser (nostalgia)


Este é o “cara”....


Coleção de documentos

- A Web era nada mais que uma

coleção de documentos hipertexto

interligadas entre si

- Web como plataforma? Ainda não...


10 anos depois


10 anos depois

- Estouro da bolha,

- Espuelas enriqueceu ;-)

- A AOL Brasil fracassou!

- O Google apareceu

- Banda Larga, SOA, Mashups, Web

2.0, cloud computing....


Enfim....

10 anos depois, a

internet

se reiventou...


A modinha da Web2.0- Sem especulação, internet

realmente começou a dar dinheiro

(Jeff Bezos, Marck Zuckerberg e Larry Page que o diga...)

- Usuário criando conteúdo

- Interfaces mais ricas

- Internet como plataforma

- Software como serviço (ASP)


uma plataforma...??

- GMail/YahooMail x Outlook Express

- GoogleDocs x MsOffice

- Salesforce.com x RM Corpore


uma plataforma...??

- Novo modelo de licenciamento de software:

- ASP (Application Service Provider)


Futuro? não..

presente!


vamos ser sinceros...


tudo isto seria possível, se ainda estivéssemos usando isto?


E se nossa conexão dependesse do famigerado kit multmídia?


Isto só foi possível porquê:

A Lei de

Moore funcionou!


Perguntas ???


Mas o minicurso não é de Mashup?


Ok, onde Mashup entra nesta história?...

Usuário criando conteúdo

+ Interface mais rica

+ Internet como plataforma

+ Software como Serviço

x 10*2 / 0,333 = Mashup


Mashup....

Uma coleção de serviços e aplicativos http 'misturados' e (ou) integrados, formando assim uma nova aplicação.


Ou melhor.....

“Um mashup é um website ou uma aplicação web que usa conteúdo de mais de uma fonte para criar um novo serviço completo.”.

@wikipedia


O quê?

Imagina um serviço que dado um endereço, ele calcularia o frete dos produtos mais baratos de várias lojas, e através de uma configuração, efetuaria compras automáticas?


Endereço – google maps

cálculo do frete – correios

produtos mais baratos (comparação

de preços) – buscapé / shopping

uol

compras – Paypal / PagSeguro /

F2b


Um site, mixando diversas APIs


Arquitetura de um Mashup


Content Provider.Sites que publicam conteúdo e disponibilizam o acesso através de APIs


API?


Application Programming Interface (API) um conjunto de instruções e padrões de programação para acesso a um aplicativo de

software baseado na Web


No site programmableweb.com, existem mais de 1000 APIs públicas disponíveis para sua criatividade!


Como?


REST, Soap!Servindo XML (Atom, RSS) ou

JSON, ou Screen Scrapping (caso o site

não forneça uma API)


Aplicação


Pode ser server-side ou apenas client-side


Tecnologias envolvidas


tecnologias

- xHTML e CSS

- DOM Document Object Model

- XML e JSON

- Javascript

- Linguagem server-side


XHTML e CSS


xHTML e CSS

- Web standards e CSS. Sites

preparados conforme os padrões da

w3c (World Wide Web Consortium),

utlizando xHTML para o conteúdo e

CSS para o comportamento visual


xHTML

- linguagem de marcação (báh..)

- “evolução” da HTML...

- Objetivo? Aumentar a acessibilidade


DOM


DOM

- Document Object Model

- Interface para acessar/modificar a

estrutura de um documento

XML/xHTML

- exemplo?

document.getElementById(“curso-sg”)


DOM


XML e JSON


XML

XML (Extensible Markup Language). Um padrão de linguagem para tornar mais fácil a transferência de dados entre aplicações.


XML

<pessoa>

<nome>José</nome>

<idade>16</nome>

<emprego>Analista de

Sistemas</emprego>

<apelido>Zezé do Pagode</apelido>

</pessoa>


JSON

"JavaScript Object Notation", é um formato para a transferência de dados entre aplicações.


JSON

- Simples

- Tem a vantagem de ser mais leve

que o XML

- Normalmente utilizado quando os

dados trafegados entre as

aplicações são críticos


JSON

{

"nome":"José",

"idade":"16",

"emprego":"Analista de Sistemas",

“apelido”:”Zezé do pagode”

}


JavaScript


Linguagem Client-Side

responsável por agilizar

interações entre o usuário

e a página, baseado no

padrão EcmaScript.


Javascript- Linguagem interpretada

- Roda no cliente (client-side)

- Criada pela Netscape inicialmente

para fazer validações client-side nos

formulários HTML

- A intenção do JavaScript é prover

maior interatividade entre o sistema

e o usuário

document.getElementById(“curso-sg”)


Javascript

- Todo comando javascript dentro do

HTML é delimitado pela tag

<script>

- <script>

alert("Janela do Javascript")

<script>

-


Javascript/dom/css

- Atribuindo borda vermelha a um elemento xHTML cujo ID seja “curso-sg”

<script> document.getElementById(“curso-

sg”).style.border = “5px solid red”

<script>


Javascript / XMLHttpRequest

- Objeto XMLHttpRequest

- Objeto responsável por fazer as

requisições assíncronas



- Primeiro problema! a criação do

Objeto é diferente no Internet

Explorer, neste (pseudo)browser o

objeto é criado através de um

ActiveX



var objeto = new

XMLHttpRequest(); // firefox /

ópera / konqueror / safari

var objeto = new

ActiveXObject("Msxml2.XMLHTTP");

// Internet Explorer



function getXML() {

var objeto; // declara o objeto

try { // tenta criar objeto XMLHTTPRequest

objeto = new XMLHttpRequest()

}catch(e) { // caso dê erro, tenta criar o ActiveXObject

objeto = new ActiveXObject("Msxml2.XMLHTTP");

}

return objeto

}


Linguagem server side


server-side

- linguagem de programação executada no servidor

- exemplo: php, ruby, python, asp, c,

c++, Java...


Produtividade sempre é legal!


Produtividade em JS

- existem frameworks JS que irão melhorar muito sua produtividade

- jquery, script.acu.lo.us,

mototools, dwr (Java), Spry

(Adobe)

- Fique atento ao uso de frameworks,

não deixem elas dominarem você!


Produtividade - Firefox

Firefox não é apenas um navegador,

ele é um poderoso ambiente de

desenvolvimento


Produtividade - Firefox- Console de Erros eficiente (Nativo)

- DOM Inspector - verifica Árvore de

Objetos DOM (Nativo)

- Extensão FireBug para Depurar

Scripts/CSS/HTML e verificar Árvore de

Objetos DOM

- Extensão WebDeveloper ( CSS/ JavaScript

/ xHTML / Validadores )


Quero saber mais, Como faço?


- Não se esqueça, o Google é seu amigo ;-);

- Participe de listas de discussão, blogs,

fóruns, interaja;

- Já existem bons livros na área

- Qualquer dúvida, beba direto da fonte

W3C, Especificação EcmaScript


Só lembrandoAjax já virou commodity, para

quem trabalha com web, dominar Ajax é tão essencial quanto matemática para um

contador !


Hands-onMão na massa!


Sabia que tem muita gente divulgando vagas

no twitter? Que tal criarmos um mashup

que rastreia estas vagas?


UtilizaremosHTML e CSS puro, Jquery (lib

para Javascript) e Twitter Search API


Agradecimentos

Mini Curso Mashup Coreu

Technology

Transcript of Mini Curso Mashup Coreu