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.
PROTOCOLO HTTP
REQUISIÇÃO
Arquivos
RESPOSTA
Documentos Web
•
•
•
•
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.
1 – get index.html
3
HTML
(index.html)
2 – index.html
4 – get img.jpeg
5 –img.jpeg
Figura
JPEG
(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
PROTOCOLO DE
APLICAÇÂO
PADRONIZADO
(HTTP)
MIME
Programa
servidor
HTTP
80
PERMANENTEMENTE
ATIVO.
80
Servidor
Programa
cliente
WWW
(navegador)
r
Programa
cliente
WWW
(navegador)
Cliente
Cliente
Dados
armazenad
os
HTML
HTML
HTML
HTML
OUTROS
OBJETOS
HTML
HTML
HTML
Internet ou Intranet
(REDE TCP/IP)
URL: Universal Resource Locator
protocolo://host.domínio/arquivo.html
Formato Geral da URL
Exemplo de URL
http://www.pucpr.br/teste.html
Idenfica o recurso
desejado .
www.pucpr.br
servidor
host
teste.html
PORTA 80
domínio
Isso implica que uma conexão
TCP deve ser feita na porta 80,
usando o protocolo HTTP.
recurso solicitado
sistema de
arquivos
Interface Universal
• WWW: Interface Universal para
Dados e Aplicações
WWW
Informações
Aplicações
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
Navegador
(cliente universal)
Base de documentos
não estruturados
Páginas
HTML
Servidor Web
Bases de sistemas de
ERP
mainframe
Acesso via WWW
legacy system
Migração de Aplicativos e Sistemas
MainFrame
Interface e lógica da aplicação
anos 70
DownSizing
Cliente - Servidor
Interface gráfica separada da lógica de aplicação
anos 80
Browsers + Objetos
Intranet
interfaces homogêneas e Integração de Redes
MicroBrowsers +
Browsers de Voz
Novos Meios de Acesso
WML/WAP eVoiceXML
anos 90
anos 00
Extensões da Tecnologia WWW
Concorrentes
VoiceXML
PHP
Facultativas
Servlet
s
Perl
JavaScrip
t
Applets
JSP
Plug-ins
XML
CGI
HTTP
HTM
L
Sempre
presentes
AS
P
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.
GET teste.html
servidor
sistema de
arquivos
requisita arquivo
recebe arquivo
codificado em MIME
HTTP/1.0
MIME-Version: 1.0
Server: www.pucpr.br
Content-Type: text/html
<HTML>
<BODY>
....
</BODY>
</HTML>
A formatação MIME inclui um
cabeçalho que descreve o tipo
de conteúdo do documento. No
caso de havem imagens ou
outros arquivos não texto
anexados, o cabeçalho MIME
descreve também o padrão de
condificação utilizado.
MIME – MultiPurpose Internet Mail
Extensions
DOCUMENTO
– página html
TIPO MIME
– arquivo texto
– text/plain
– arquivo de
imagem
– image/gif, image/jpg,
etc.
– arquivo de
som
– audio/wav, audio/xmpeg, etc.
– text/html
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.
Conexão TCP
1
HTTP 1.1
2
3
4
5
Requisição HTTP
Resposta HTTP
Requisição HTTP
Resposta HTTP
…
N
Desconexão TCP
HTTP Funcionamento
1
2
3
HTTP 1.1
Conexão TCP
Requisição HTTP
Resposta HTTP
ARQUIVO
4
Desconexão TCP
10 Mbytes
Neste ponto o arquivo de ter
sido carregado por completo
t
STATELESS X STATEFULL
Dados relativos a cada usuário,
armazenados no servidor enquanto
durar a conexão.
STATELESS
•GRANDE NÚMERO DE USUÁRIO
•TEMPO DE RESPOSTA LONGO
STATEFULL
•PEQUENO NÚMERO DE USUÁRIO
•PEQUENO TEMPO DE RESPOSTA
HTML: Hypertext Markup Language
• MARKUP: Linguagem baseada em TAGS
TAG
<HTML>
<HEAD>
<TITLE> TITULO QUE APARECE NO BARRA SUPERIOR DA JANELA </TITLE>
</HEAD>
link para outra
<BODY>
página
<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>
Tranferência de Documentos Hipertexto
hiperlink para
outra página
página 1
página 2
página 4
CAPÍTULO 1
SEÇÃO 1
bláblábláblábláblá
...
seção1
bláblábláblábláblá
...
INTRODUÇÃO
hiperlink
para
mesma
página
bláblábláblábláblá
bláblábláblábláblá
......
capítulo1
capítulo2
......
observação
.......
bláblábláblábláblá
......
OBSERVAÇÃO
bláblábláblábláblá
solicita página
recebe página
página 3
CAPÍTULO 2
bláblábláblábláblá
...
servidor
sistema de
arquivos
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 MOSTRAR
OS 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) >
• <!--Import standard address class--> %address;
• <!--Import standard item class--> %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.
SISTEMA
DISTRIBUIDOR
ENVELOPE
ENCOMENDA DE
PRODUTOS
Coleção de documentos do
mesmo tipo
Documento = message ou
transaction set
SISTEMA
FABRICANTE
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.
Requisição HTTP
WWW
1
Dados enviados
pelo Cliente
2
APLICAÇÃO
4
3
Servidor
Mensagem MIME e
cabeçalho HTTP
Resposta não
WWW
Seqüência De Eventos Da Chamada CGI
Idade minima:
30
3
1
Formulario de Consulta
anos
Idade=30&Depto=Producao&
Temporario=SIM
Selecione o Departamento:
2
Informatica
Producao
Marketing
Contabilidade
programa
servidor
WWW
IIncluir funcionários em regime
aplicação
externa
4
temporário:
5
SUBMIT
Pressione para consultar
6
7
servidor
Abraão
José
Paulo
Carlos
......
.....
30
40
23
50
consulta
anos
anos
anos
anos
sistema de
arquivos
banco com os dados de
todos os funcionários de
uma empresa.
Banco de Dados em Ambiente WWW
Servidor de
Banco de Dados
cliente
Servidor
WWW
tabelas
CGI
cliente
•
Servidor
WWW
CGI
tabelas
As consultas
são sempre
processadas
no servidor.
Web substitui outros ambientes?
Deve ser capaz de
reproduzir os
mesmos recursos de
aplicações
servidoras
Deve ser capaz de
reproduzir os mesmos
recursos de interface das
aplicações legadas
HTTP
Cliente
(Navegador Web)
Servidor
WEB
Aplicação
Legada
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.
Extensões da Tecnologia WWW
Concorrentes
VoiceXML
PHP
Facultativas
Servlet
s
Perl
JavaScrip
t
Applets
JSP
Plug-ins
XML
CGI
HTTP
HTM
L
Sempre
presentes
AS
P
WML
JavaScript
<HTML>
1
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function calculo(form) {
form.meses.value = eval(form.anos.value*12);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
Como o documento aparece
para o usuário
Formulario de Consulta
Idade em anos:
<P>Idade em Anos:
<INPUT TYPE="text" NAME="anos" SIZE=15></P>
CALCULAR
2
<P><INPUT TYPE="button" VALUE="CALCULAR"
onClick="calculo(this.form)">
iidade em meses:
<P>Idade em Meses:
<INPUT TYPE = "text" NAME="meses" SIZE=15></P>
</FORM>
</BODY>
</HTML>
Quando o usuário pressiona o
botão calcular, o programa
JavaScript efetua um cálculo e
atualiza o campo "idade em
meses".
Tecnologias WEB - Comparação
PLUG-INS
DESENVOLVEDOR
JAVASCRIPT
compilado
interpretado
Fonte
Fonte
JAVA
bytecode
Fonte
Compilador
Compilador
ByteCode
USUÁRIO
Executável
Interpretador
Interpretador
Executável
Executável
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
aplicações
Programa a ser instalado
RISC
com UNIX
WINDOWS
com INTEL
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>
Exemplo de página HTML
com applet
<BODY>
<P>Exemplo de página HTML com applet<P>
Saldo Atual:
<APPLET CODE=saldo.class WIDTH=420
HEIGHT=240 >
</APPLET>
Valor da Transação:
</BODY>
Crédito
Débito
</HTML>
www.pucpr.br
1
GET formulário.html
2
formulário.html
3
GET saldo.class
4
texto
formulário.html
Saldo.class
texto
bytecode
bytecode
saldo.class
Instalação de applets
Aplicações Nativas para Web
• Baseados em scripts interpretados em
módulos colocados no servidor.
• Falam apenas pela porta 80 via HTTP.
aplicações
HTML
HTML
requisição
80
resposta
HTML
SERVIDOR
WEB
INTERPRETADO
R
JSP
Scripts
JSP
INTERPRETADO
R
ASP
Scripts
ASP
INTERPRETADO
R
PERL
Scripts
PERL
INTERPRETADO
R
PHP
Scripts
PHP
Interpretador
FUNCIONA COMO
UM CGI GENÉRICO
SERVIDOR
WEB
HTML
INTERPRETADO
R
requisição
80
resposta
HTML
HTML
+
Código
SERVIDOR
WEB
HTML
Scripts
Scripts
Scripts