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

- 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

- 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

compras – Paypal / PagSeguro /

Um site, mixando diversas APIs

Arquitetura de um Mashup

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

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!

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

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

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

- Objetivo? Aumentar a acessibilidade

- Document Object Model

- Interface para acessar/modificar a

estrutura de um documento

XML/xHTML

- exemplo?

document.getElementById(“curso-sg”)

XML e JSON

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

<emprego>Analista de

Sistemas</emprego>

<apelido>Zezé do Pagode</apelido>

</pessoa>

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

- 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

"nome":"José",

"idade":"16",

"emprego":"Analista de Sistemas",

“apelido”:”Zezé do pagode”

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

alert("Janela do Javascript")

Javascript/dom/css

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

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

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

Phylazonit konyv mashup

Si A3 MashUp

¿Qué es un mashup? Mashup (aplicación web híbrida) Mashup (aplicación web híbrida)

Mashup webová aplikace

Trienamento Totvs Sobre Mashup

Mashup (grupo verde)

Banner Alunos Eng Civil COREU

¿Qué es un “mashup”?

Thiago Corrêa - Mashup

Mashup Awards 10 エアーシンセ

NFF mashup-foredrag

TD : un chat geolocalise (mashup)

Cultura mashup por Samuel Levi

Prezentace brunch mashup - ondrej obluk

YUI Mashup Camp

Mashup - Sustainability

DevOps Mashup - Codemotion ES 2015

Mashup et Marketing

Somus Jory 16.12.2009 Mashup Technologies

Web mashup