DESENVOLVIMENTO EM AMBIENTE WEB Desenvolvimento Baseado em XML

1
DESENVOLVIMENTO EM AMBIENTE WEBDesenvolvimento
Baseado em XML
2
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
3
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.

HTML (index.html)
3
Figura JPEG (img.jpeg)
4
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

5
(No Transcript)
6
URL Universal Resource Locator
7
Interface Universal

• WWW Interface Universal para Dados e Aplicações

WWW
Informações
Aplicações
8
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

9
Integração com a base existente
Navegador (cliente universal)
Base de documentos não estruturados
Páginas HTML
Bases de sistemas de ERP
Servidor Web
mainframe
Acesso via WWW
legacy system
10
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
anos 90
Intranet interfaces homogêneas e Integração de
Redes
MicroBrowsers Browsers de Voz
anos 00
Novos Meios de Acesso WML/WAP eVoiceXML
11
Extensões da Tecnologia WWW
Concorrentes
VoiceXML
Facultativas
WML
Sempre presentes
12
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

13
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.

14
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.

15
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
Conexão TCP
2
Requisição HTTP
HTTP 1.1
3
Resposta HTTP
4
Requisição HTTP
5
Resposta HTTP

N
Desconexão TCP
16
HTTP Funcionamento
1
Conexão TCP
2
Requisição HTTP
3
Resposta HTTP
HTTP 1.1
ARQUIVO 10 Mbytes
4
Desconexão TCP
Neste ponto o arquivo de ter sido carregado por
completo
t
17
STATELESS X STATEFULL
Dados relativos a cada usuário, armazenados no
servidor enquanto durar a conexão.
STATELESS
STATEFULL

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

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

18
HTML Hypertext Markup Language

• MARKUP Linguagem baseada em TAGS

TAG

• ltHTMLgt
• ltHEADgt
• ltTITLEgt TITULO QUE APARECE NO BARRA SUPERIOR
  DA JANELA lt/TITLEgt
• lt/HEADgt
• ltBODYgt
• ltPgt Texto Normal
• ltPgt ltBgt Texto em Negrito lt/Bgt
• ltPgt ltA HREFhttp//www.pucpr.brgt link para
  outra pagina lt/Agt
• ltPgt ltIMG SRC"mail.gif" HEIGHT20 WIDTH20gt
• lt/BODYgt
• lt/HTMLgt

link para outra página
19
Tranferência de Documentos Hipertexto
20
Exemplo de Tags

• ltHTMLgt ... lt/HTMLgt
• ltHEADgt ... ltHEADgt
• ltBODYgt ... lt/BODYgt
• ltTABLEgt ltTRgtltTDgtlt/TDgtlt/TRgtlt/TABLEgt
• ltPgt ... lt/Pgt
• ltBR/gt

21
Tags para Formulários

• ltFORM ACTIONPOST ACTION logon.cgigt
• ltPgtLogin
• ltINPUT TYPEText" NAME Login"gt
• ltPgtSenha
• ltINPUT TYPEPasswordNAME Senha"gt
• ltPgt ltINPUT TYPE Submit VALUELogar"gt
• lt/FORMgt

Login
Senha
Logar
22
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

23
XML X HTML

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

lt Código HTMLgt ltH1gt Invoice lt/H1gt ltPgtFrom
Joe ltPgtTo A. Another ltPgtDate 01/01/2000 ltPgtQuant
ia R100,00 ltPgtTaxa 21 ltPgtTotal R121,00
lt Código XMLgt ltInvoicegt ltFromgt Joe lt/Fromgt
ltTogt A. Another lt/Togt ltDategt 01/01/2000
lt/Dategt ltQuantia moeda Real gt 100,00
lt/Quantia gt ltTaxadeJurosgt 21 lt/TaxadeJurosgt
ltTotal moeda Realgt 121,00 lt/Total
gt lt/Invoicegt
24
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 lt?xml-styl
esheet href'bookorder.xsl' type'text/xsl'?gt . lt
TAGS XMLgt
.XML
PÁGINA XSL A FOLHA DE ESTILO DEFINE COMO
MOSTRAR OS TAGS XML EM HTML
.XSL
25
Implementação com XML
26
Definição dos TAGS DTD(Document Type Definition)

• lt!ENTITY address SYSTEM "http//www.myco.org/mes
  sages/XML/address.xml" gt
• lt!ENTITY items SYSTEM "http//www.edifact.org/me
  ssages/XML/items.xml"gt
• lt!ENTITY data "(PCDATA)"gt
• lt!ELEMENT order (order-no, deliver-to,
  invoice-to, item) gt
• lt!ELEMENT order-no data gt
• lt!ELEMENT deliver-to (address) gt
• lt!ELEMENT invoice-to (address) gt
• lt!--Import standard address class--gt address
• lt!--Import standard item class--gt items

27
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

28
EDI

• Sistema de intercâmbio ou troca de documentos
  eletrônicos
• Permite trocar informações entre empresas sem a
  intervenção humana.

SISTEMA DISTRIBUIDOR
SISTEMA FABRICANTE
ENVELOPE
ENCOMENDA DE PRODUTOS
Coleção de documentos do mesmo tipo Documento
message ou transaction set
29
Exemplo Encomenda de Livro

• lt?xml version'1.0'?gt
• lt?xml-stylesheet href'bookorder.xsl'
  type'text/xsl'?gt
• ltBOOKORDERgt
• ltDATEgtFriday, January 5, 19101 lt/DATEgt
• ltORDER-NOgtECC741220lt/ORDER-NOgt
• ltBUYERgt
• ltNAMEgtEdgard Jamhourlt/NAMEgt
• ltORGgtPUCPRlt/ORGgt
• ltADDRESSgt
• ltSTREETgtImaculaca Conceicaolt/STREETgt
• ltCITYgtCuritibalt/CITYgt
• ltSTATEgtPRlt/STATEgt
• ltZIPgt80000lt/ZIPgt
• lt/ADDRESSgt

30

• ltPHONEgt3301675lt/PHONEgt
• ltFAXgt3301669lt/FAXgt
• ltEMAILgtltA HREF'jamhour_at_ppgia.pucpr.br'gtjamhour_at_pp
  gia.pucpr.brlt/Agt
• lt/EMAILgt
• lt/BUYERgt
• ltMAINORDERgtltORDERgt
• ltTITLEgtSSNlt/TITLEgt
• ltAUTHORgtTom Clancylt/AUTHORgt
• ltQTYgt1lt/QTYgt
• ltISBNgt0-425-15911-6lt/ISBNgt
• ltLANGUAGEgtEnglishlt/LANGUAGEgt
• lt/ORDERgt
• ltORDERgt
• lt/MAINORDERgt
• ltCOMMENTgtApenas um teste ....lt/COMMENTgt
• lt/BOOKORDERgt

31
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.

WWW
Dados enviados pelo Cliente
Requisição HTTP
1
2
APLICAÇÃO
4
3
Servidor
Mensagem MIME e cabeçalho HTTP
Resposta não WWW
32
Seqüência De Eventos Da Chamada CGI
33
Banco de Dados em Ambiente WWW
cliente
Servidor de Banco de Dados
Servidor WWW
tabelas
CGI

• As consultas são sempre processadas no servidor.

Servidor WWW
cliente
tabelas
CGI
34
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
35
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.

36
Extensões da Tecnologia WWW
Concorrentes
VoiceXML
Facultativas
WML
Sempre presentes
37
JavaScript
38
Tecnologias WEB - Comparação
PLUG-INS
JAVASCRIPT
JAVA
compilado
interpretado
bytecode
DESENVOLVEDOR
Fonte
Fonte
Fonte
Compilador
Compilador
ByteCode
USUÁRIO
Interpretador
Interpretador
Executável
Executável
Executável
39
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

Programa a ser instalado
aplicações
RISC com UNIX
WINDOWS com INTEL
40
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.

41
1
GET formulário.html
www.pucpr.br
2
texto
formulário.html
3
GET saldo.class
4
bytecode
Saldo.class
texto
bytecode
Instalação de applets
formulário.html
saldo.class
42
Aplicações Nativas para Web

• Baseados em scripts interpretados em módulos
  colocados no servidor.
• Falam apenas pela porta 80 via HTTP.

aplicações
Scripts JSP
INTERPRETADOR JSP
HTML
HTML
requisição
INTERPRETADOR ASP
Scripts ASP
SERVIDOR WEB
80
INTERPRETADOR PERL
Scripts PERL
resposta
INTERPRETADOR PHP
HTML
Scripts PHP
43
Interpretador
FUNCIONA COMO UM CGI GENÉRICO
SERVIDOR WEB
HTML Código
HTML
requisição
INTERPRETADOR
SERVIDOR WEB
80
Scripts
HTML
Scripts
resposta
Scripts
HTML