Upload
internet
View
124
Download
0
Embed Size (px)
Citation preview
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) > • <!--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.
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