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 HTML (index.html) 2 – index.html 3 Figura JPEG (img.jpeg) 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
URL: Universal Resource Locator
WWW: Interface Universal para Dados e Aplicações Informações Aplicações
Aplicações Sistemas de Informação Transações Financeiras 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 Bases de sistemas de ERP Servidor Web 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 anos 90 Intranet interfaces homogêneas e Integração de Redes MicroBrowsers + Browsers de Voz anos 00 Novos Meios de Acesso WML/WAP eVoiceXML
Extensões da Tecnologia WWW Concorrentes VoiceXML ASP JSP Perl PHP Servlets JavaScript Applets Plug-ins XML Facultativas CGI HTML HTTP WML Sempre presentes
Tecnologias Básicas HTTP: HTML: CGI 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.
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 1.1 … 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
t HTTP Funcionamento HTTP 1.1 Neste ponto o arquivo de ter 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
STATELESS X STATEFULL STATELESS 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
HTML: Hypertext Markup Language MARKUP: Linguagem baseada em TAGS TAG <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> link para outra página
Tranferência de Documentos Hipertexto
Exemplo de Tags <HTML> ... </HTML> <HEAD> ... <HEAD> <BODY> ... </BODY> <TABLE> <TR><TD></TD></TR></TABLE> <P> ... </P> <BR/>
Tags para Formulários Login: Senha: Logar <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
HTML: Hypertext Markup Language XML: eXtensible 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. CML. PGML. SMIL. CDF. EDI VOICEXML WML Matemática. 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 SISTEMA FABRICANTE ENVELOPE ENCOMENDA DE PRODUTOS 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='jamhour@ppgia.pucpr.br'>jamhour@ppgia.pucpr.br</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. WWW Requisição HTTP Dados enviados pelo Cliente 1 2 APLICAÇÃO 4 3 Servidor Mensagem MIME e cabeçalho HTTP Resposta não WWW
Seqüência De Eventos Da Chamada CGI Abraão 30 anos José 40 Paulo 23 Carlos 50 ...... ..... servidor sistema de arquivos banco com os dados de todos funcionários de uma empresa. aplicação externa programa WWW consulta Idade minima: Selecione o Departamento: Informatica Producao Marketing Contabilidade 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 cliente Servidor de Banco de Dados Servidor WWW CGI tabelas As consultas são sempre processadas no servidor. Servidor WWW cliente CGI tabelas
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 ASP JSP Perl PHP Servlets JavaScript Applets Plug-ins XML Facultativas CGI HTML HTTP WML Sempre presentes
JavaScript
Tecnologias WEB - Comparação PLUG-INS JAVASCRIPT JAVA DESENVOLVEDOR compilado interpretado bytecode Fonte Fonte Fonte Compilador Compilador ByteCode USUÁRIO Interpretador Interpretador Executável Executável Executável
Programa a ser instalado 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
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.
Instalação de applets 1 2 3 4 www.pucpr.br formulário.html saldo.class GET formulário.html www.pucpr.br 2 texto formulário.html 3 GET saldo.class 4 Saldo.class bytecode texto bytecode Instalação de applets formulário.html saldo.class
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 80 SERVIDOR WEB INTERPRETADOR PERL Scripts PERL resposta HTML INTERPRETADOR PHP Scripts PHP
Interpretador FUNCIONA COMO UM CGI GENÉRICO SERVIDOR WEB HTML + Código HTML requisição INTERPRETADOR 80 SERVIDOR WEB HTML Scripts Scripts resposta Scripts HTML