DESENVOLVIMENTO EM AMBIENTE WEB Desenvolvimento Baseado em XML.

DESENVOLVIMENTO EM AMBIENTE WEB

Desenvolvimento Baseado em XML

WWW: World Wide Web

• Tecnologia Cliente-Servidor• Inclui mecanismos para:

– Download de arquivos– Upload de mensagens– Visualização de múltiplos formatos de arquivos no cliente.

REQUISIÇÃO

RESPOSTA

Arquivos

PROTOCOLO HTTP

Documentos Web

HTML(index.html)

1 – get index.html

Figura JPEG

(img.jpeg)

• 1) O cliente requisita a página HTML• 2) O servidor envia a página HTML para o Cliente• 3) O browser do cliente interpreta a página HTML.• 4) Se a página HTML fizer referência a outros arquivos o browser

solicita cada arquivo separadamente para o servidor.

2 – index.html3

4 – get img.jpeg

5 –img.jpeg

Tecnologias WWW

• WWW é o resultado da combinação de várias tecnologias:

• TCP/IP: infra-estrutura de rede• Arquitetura cliente/servidor: estratégia para

implementação dos serviços• HTTP: Protocolo de aplicação• MIME: padrão de codificação dos dados

– Multipurpose Internet Mail Extensions

• HTML: padrão de apresentação dos dados– Hypertext Markup Language

Cliente

Servidor Dados armazenados

Programa cliente WWW

(navegador)r

Cliente

Programa cliente WWW

(navegador)

Programa servidor

HTTP

Internet ou Intranet (REDE TCP/IP)

PROTOCOLO DE APLICAÇÂO

PADRONIZADO (HTTP)

PERMANENTEMENTE ATIVO.

HTML HTML HTML HTML

80

80

HTML HTML HTML OUTROS OBJETOS

MIME

URL: Universal Resource Locator

servidor

sistema dearquivos

PORTA 80

teste.html

http://www.pucpr.br/teste.html

Isso implica que uma conexãoTCP deve ser feita na porta 80,usando o protocolo HTTP.

domínio

Idenfica o recursodesejado .

recurso solicitado

www.pucpr.br

Formato Geral da URL

host

protocolo://host.domínio/arquivo.html

Exemplo de URL

Interface Universal

• WWW: Interface Universal para Dados e Aplicações

Informações Aplicações

WWWWWW

Aplicações

• Sistemas de Informação– Estáticas– Dinâmicas:

• Integração com Banco de Dados

• Transações Financeiras– Home Banking– Comércio Eletrônico: B2C e B2B

• Interface para outros sistemas– Gerência de Redes– Web Mail– Aplicativos Legados

Integração com a base existente

Servidor Web

mainframe

legacy system

Bases de sistemas de ERP

Base de documentos não estruturados

Acesso via WWW

Páginas HTML

Navegador(cliente universal)

Migração de Aplicativos e Sistemas

anos 70

anos 80

anos 90

MainFrameMainFrameInterface e lógica da aplicaçãoInterface e lógica da aplicação

Cliente - ServidorCliente - ServidorInterface gráfica separada da lógica de aplicaçãoInterface gráfica separada da lógica de aplicação

IntranetIntranetinterfaces homogêneas e Integração de Redesinterfaces homogêneas e Integração de Redes

DownSizing

Browsers + Objetos

Novos Meios de AcessoNovos Meios de AcessoWML/WAP eVoiceXMLWML/WAP eVoiceXML

MicroBrowsers + Browsers de Voz anos 00

ASP

JSP

Perl

PHPServlet

sJavaScrip

t

Applets Plug-ins

XML

Extensões da Tecnologia WWW

CGI

HTML

HTTP

Sempre presentes

Concorrentes

Facultativas

VoiceXML

WML

Tecnologias Básicas

• HTTP: – HyperText Transfer Protocol– Protocolo de Comunicação

• HTML: – Hypertext Markup Language– Linguagem definida de acordo com SGML

• CGI– Commong Gateway Interface

HTTP - HyperText Transfer Protocol

• Protocolo de aplicação da arquitetura TCP/IP usado para estabelecer a comunicação entre clientes e servidores no ambiente WWW.

requisita arquivo

recebe arquivocodificado em MIME

servidorsistema dearquivos

HTTP/1.0MIME-Version: 1.0Server: www.pucpr.brContent-Type: text/html<HTML><BODY>....</BODY></HTML>

GET teste.html

A formatação MIME inclui umcabeçalho que descreve o tipode conteúdo do documento. Nocaso de havem imagens ououtros arquivos não textoanexados, o cabeçalho MIMEdescreve também o padrão decondificação utilizado.

MIME – MultiPurpose Internet Mail Extensions

DOCUMENTO– página html

– arquivo texto

– arquivo de imagem

– arquivo de som

TIPO MIME– text/html

– text/plain

– image/gif, image/jpg, etc.

– audio/wav, audio/x-mpeg, etc.

HTTP: Funcionamento

• HTTP é um protocolo sem estado (stateless)– O servidor não guarda o estado do último cliente-servidor.– O cliente não guarda o estado do andamento da transação

com o servidor.1

2

3

N

Conexão TCP

Desconexão TCP

Requisição HTTP

Resposta HTTP

4

5

Requisição HTTP

Resposta HTTP

…

HTTP 1.1

HTTP Funcionamento

1

2

3

4

Conexão TCP

Desconexão TCP

Requisição HTTP

Resposta HTTP

HTTP 1.1 ARQUIVO

10 Mbytes

t

Neste ponto o arquivo de ter sido carregado por completo

STATELESS X STATEFULL

STATELESSSTATEFULL

Dados relativos a cada usuário, armazenados no servidor enquanto durar a conexão.

•GRANDE NÚMERO DE USUÁRIO•TEMPO DE RESPOSTA LONGO

•PEQUENO NÚMERO DE USUÁRIO•PEQUENO TEMPO DE RESPOSTA

HTML: Hypertext Markup Language

<HTML>

<HEAD>

<TITLE> TITULO QUE APARECE NO BARRA SUPERIOR DA JANELA </TITLE>

</HEAD>

<BODY>

<P> Texto Normal

<P> <B> Texto em Negrito </B>

<P> <A HREF=“http://www.pucpr.br”> link para outra pagina </A>

<P> <IMG SRC="mail.gif" HEIGHT=20 WIDTH=20>

</BODY>

</HTML>

• MARKUP: Linguagem baseada em TAGS

TAG

link para outra página

Tranferência de Documentos Hipertexto

INTRODUÇÃO

bláblábláblábláblábláblábláblábláblá......capítulo1capítulo2......observação.......bláblábláblábláblá......OBSERVAÇÃObláblábláblábláblá

página 1

página 2

página 3

página 4

CAPÍTULO 1

bláblábláblábláblá...seção1

CAPÍTULO 2

bláblábláblábláblá...

SEÇÃO 1

bláblábláblábláblá...

solicita página

recebe página

servidor

hiperlinkparamesmapágina

hiperlink paraoutra página

sistema dearquivos

Exemplo de Tags

• <HTML> ... </HTML>

• <HEAD> ... <HEAD>

• <BODY> ... </BODY>

• <TABLE> <TR><TD></TD></TR></TABLE>

• <P> ... </P>

• <BR/>

Tags para Formulários

<FORM ACTION=“POST” ACTION = “logon.cgi”>

<P>Login:

<INPUT TYPE=“Text" NAME = “Login">

<P>Senha:

<INPUT TYPE=“Password“NAME = “Senha">

<P> <INPUT TYPE = “Submit“ VALUE=“Logar">

</FORM>

Login:

Senha:

Logar

XML

• HTML: Hypertext Markup Language– Conjunto de TAGS pré-definidos

• XML: eXtensible Markup Language– Quem fornece a informação pode definir novos tags e atributos conforme sua necessidade.

• Aplicações para o XML.– Mediação entre dois ou mais sistemas

heterogêneos utilizando a Internet.– Distribuição do processamento para o cliente

XML X HTML

– HTML: As informações estão em formato livre.– XML: As informações estão categorizadas por TAGS

especiais

< Código HTML>

<H1> Invoice </H1>

<P>From: Joe

<P>To: A. Another

<P>Date: 01/01/2000

<P>Quantia: R$100,00

<P>Taxa: 21%

<P>Total: R$121,00

< Código XML>

<Invoice>

<From> Joe </From>

<To> A. Another </To>

<Date:> 01/01/2000 </Date:>

<Quantia “moeda” = ‘Real’ > 100,00 </Quantia >

<TaxadeJuros>: 21 </TaxadeJuros>

<Total “moeda” = ‘Real’> 121,00 </Total >

</Invoice>

Visualização no Internet Explorer 5.0

• O Internet Explorer utiliza folhas de estilo para visualizar páginas XML.

PÁGINA XML

Ref a uma folha de estilo:

<?xml-stylesheet href='bookorder.xsl' type='text/xsl'?>….

<TAGS XML>

PÁGINA XSL

A FOLHA DE ESTILO DEFINE COMO MOSTRAROS TAGS XML EM HTML

.XML

.XSL

Implementação com XML

Definição dos TAGS: DTD(Document Type Definition)

• <!ENTITY % address SYSTEM "http://www.myco.org/messages/XML/address.xml" >

• <!ENTITY % items SYSTEM "http://www.edifact.org/messages/XML/items.xml">

• <!ENTITY % data "(#PCDATA)"> • <!ELEMENT order (order-no, deliver-to, invoice-to, item+) > • <!ELEMENT order-no %data; > • <!ELEMENT deliver-to (address) > • <!ELEMENT invoice-to (address) > •  %address; •  %items;

Aplicações

• MathML.– Matemática.

• CML.– Química.

• PGML.– Gráficos de precisão.

• SMIL.– Multimídia (webTV).

• CDF.– Remessa automática de

dados.

• EDI– Intercâmbio eletrônico

(e-business)

• VOICEXML– Acesso a Internet via

Voz.

• WML– Wireless Markup

Language

EDI

• Sistema de intercâmbio ou troca de documentos eletrônicos– Permite trocar informações entre empresas sem a

intervenção humana.

SISTEMADISTRIBUIDOR

SISTEMAFABRICANTE

ENCOMENDA DE PRODUTOS

ENVELOPE

Coleção de documentos do mesmo tipo

Documento = message ou transaction set

Exemplo: Encomenda de Livro

• <?xml version='1.0'?>• <?xml-stylesheet href='bookorder.xsl' type='text/xsl'?>• <BOOKORDER>• <DATE>Friday, January 5, 19101 </DATE>• <ORDER-NO>ECC741220</ORDER-NO>• <BUYER>• <NAME>Edgard Jamhour</NAME>• <ORG>PUCPR</ORG>• <ADDRESS>• <STREET>Imaculaca Conceicao</STREET>• <CITY>Curitiba</CITY>• <STATE>PR</STATE>• <ZIP>80000</ZIP>• </ADDRESS>

• <PHONE>3301675</PHONE>• <FAX>3301669</FAX>• <EMAIL><A

HREF='[email protected]'>[email protected]</A>• </EMAIL>• </BUYER>• <MAINORDER><ORDER>• <TITLE>SSN</TITLE>• <AUTHOR>Tom Clancy</AUTHOR>• <QTY>1</QTY>• <ISBN>0-425-15911-6</ISBN>• <LANGUAGE>English</LANGUAGE>• </ORDER>• <ORDER>• </MAINORDER>• <COMMENT>Apenas um teste ....</COMMENT>• </BOOKORDER>

Common Gateway Interface

• CGI: – Gateway entre WWW e outras aplicações.– CGI é uma interface que permite executar programas e aplicações

externas sob o controle de um servidor HTTP.

Mensagem MIME e cabeçalho HTTP

Requisição HTTP Dados enviados pelo Cliente

Resposta não WWW

Servidor

WWWWWW

APLICAÇÃOAPLICAÇÃO

1

4

2

3

Seqüência De Eventos Da Chamada CGI

Abraão 30 anosJosé 40 anosPaulo 23 anosCarlos 50 anos...........

servidor

sistema dearquivos

banco com os dados detodos os funcionários deuma empresa.

aplicaçãoexterna

programaservidorWWW

consulta

Idade minima:

Selecione o Departamento:

anos30

InformaticaProducaoMarketingContabilidade

IIncluir funcionários em regime temporário:

SUBMIT Pressione para consultar

Formulario de Consulta

Idade=30&Depto=Producao&Temporario=SIM

5

1

2

3

4

7 6

Banco de Dados em Ambiente WWW

• As consultas são sempre processadas no servidor.

clienteclienteServidorServidorWWWWWW

clientecliente

tabelastabelas

tabelastabelas

Servidor de Servidor de Banco de DadosBanco de Dados

ServidorServidorWWWWWW

CGICGI

CGICGI

Web substitui outros ambientes?

Cliente(Navegador Web)

ServidorWEB

HTTP

Deve ser capaz de reproduzir os mesmos

recursos de interface das aplicações legadas

AplicaçãoLegada

Deve ser capaz de reproduzir os

mesmos recursos de aplicações servidoras

Limitações do Esquema CGI + Scripts + Forms

• A INTERFACE DO CLIENTE TABALHA APENAS COM TEXTO.– Não é possível inserir informações gráficas ou som nos

campos de um formulário HTML.

• O CGI PERMITE EFETUAR APENAS PROCESSAMENTO EM BATCH– Não é possível fazer processamento no lado do cliente.– Não é possível manter a conexão entre o cliente e o

servidor.

ASP

JSP

Perl

PHPServlet

sJavaScrip

t

Applets Plug-ins

XML

Extensões da Tecnologia WWW

CGI

HTML

HTTP

Sempre presentes

Concorrentes

Facultativas

VoiceXML

WML

JavaScript<HTML>

<HEAD> <SCRIPT LANGUAGE="JavaScript"> function calculo(form) { form.meses.value = eval(form.anos.value*12); } </SCRIPT></HEAD>

<BODY> <FORM>

<P>Idade em Anos: <INPUT TYPE="text" NAME="anos" SIZE=15></P>

<P><INPUT TYPE="button" VALUE="CALCULAR"onClick="calculo(this.form)">

<P>Idade em Meses:<INPUT TYPE = "text" NAME="meses" SIZE=15></P>

</FORM></BODY></HTML>

Como o documento aparecepara o usuário

Idade em anos:

CALCULAR

iidade em meses:

Formulario de Consulta

Quando o usuário pressiona obotão calcular, o programaJavaScript efetua um cálculo eatualiza o campo "idade emmeses".

1

2

Tecnologias WEB - Comparação

Fonte

ByteCode

Fonte Fonte

Interpretador

Executável

Interpretador

ExecutávelExecutável

DESENVOLVEDOR

USUÁRIO

compilado interpretado bytecode

PLUG-INS JAVASCRIPT JAVA

Compilador Compilador

Internet com Java

• OBJETIVO:– Disponibilizar qualquer tipo de aplicação sem precisar

instalar nenhum tipo de software no cliente.• CUSTO DE DEPLOYEMENT = ZERO

• CUSTO DE ATUALIZAÇÃO = ZERO

RISC com UNIX

WINDOWS com INTEL

aplicaçõesPrograma a ser instalado

Applets e Servlets

• Applets e Servlets são denominações dadas a programas escritos em java para Internet.

• Applets: aplicações para clientes– pequenas aplicações embutidas no navegador web.– implementam uma interface gráfica com o usuário.

• Servlets: aplicações para servidores– aplicações sem interface gráfica, executadas no

servidor.– funcionam de maneira similar ao CGI, mas possuem

um conjunto amplo de APIs que facilitam o desenvolvimento de novas aplicações.

<HTML>

<BODY>

<P>Exemplo de página HTML com applet<P>

<APPLET CODE=saldo.class WIDTH=420HEIGHT=240 ></APPLET>

</BODY>

</HTML>

Saldo Atual:

Valor da Transação:

Débito

Exemplo de página HTMLcom applet

Crédito

www.pucpr.br

texto bytecode

formulário.html saldo.class

texto

bytecode

GET formulário.html

GET saldo.class

1

2

3

4

Instalação de applets

formulário.html

Saldo.class

Aplicações Nativas para Web

requisição

resposta

SERVIDOR WEB

INTERPRETADOR

JSP

INTERPRETADOR

ASP

INTERPRETADOR

PERL

• Baseados em scripts interpretados em módulos colocados no servidor.

• Falam apenas pela porta 80 via HTTP.

INTERPRETADOR

PHP

ScriptsJSP

ScriptsASP

ScriptsPERL

ScriptsPHP

HTML

HTML

HTML

80

aplicações

Interpretador

requisição

resposta

SERVIDOR WEB

INTERPRETADOR

Scripts

HTML+

Código

HTML

HTML

80

FUNCIONA COMO UM CGI GENÉRICO

Scripts

Scripts

HTML

SERVIDOR WEB

DESENVOLVIMENTO EM AMBIENTE WEB Desenvolvimento Baseado em XML.

Documents

Transcript of DESENVOLVIMENTO EM AMBIENTE WEB Desenvolvimento Baseado em XML.