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

URL: Universal Resource Locator

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: B 2 C e B 2 B • 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 Acesso via WWW Servidor Web Bases de sistemas de ERP mainframe legacy system

Migração de Aplicativos e Sistemas Main. Frame Interface e lógica da aplicação anos 70 Down. Sizing 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 Micro. Browsers + Browsers de Voz Novos Meios de Acesso WML/WAP e. Voice. XML anos 90 anos 00

Extensões da Tecnologia WWW Concorrentes Voice. XML Facultativas PHP Servlet s Perl Java. Scrip t Applets Plug-ins XML CGI HTTP HTML Sempre presentes JSP AS P WML

Tecnologias Básicas • HTTP: – Hyper. Text Transfer Protocol – Protocolo de Comunicação • HTML: – Hypertext Markup Language – Linguagem definida de acordo com SGML • CGI – Commong Gateway Interface

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

MIME – Multi. Purpose Internet Mail Extensions DOCUMENTO – página html TIPO MIME – arquivo texto – text/plain – arquivo de imagem – image/gif, image/jpg, etc. – arquivo de som – text/html – audio/wav, audio/xmpeg, 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. Conexão TCP 1 HTTP 1. 1 2 3 4 5 N Requisição HTTP Resposta HTTP … 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

Exemplo de Tags • • <HTML>. . . </HTML> <HEAD>. . . <HEAD> <BODY>. . . </BODY> <TABLE> <TR><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: e. Xtensible 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> <H 1> Invoice </H 1> <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 > <Taxade. Juros>: 21 </Taxade. Juros> <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) > •  %address; •  %items;

Aplicações • Math. ML. – Matemática. • CML. – Química. • PGML. – Gráficos de precisão. • SMIL. – Multimídia (web. TV). • 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>ECC 741220</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> • </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 Selecione o Departamento: Idade=30&Depto=Producao& Temporario=SIM 2 Informatica Producao Marketing Contabilidade programa servidor WWW IIncluir funcionários em regime SUBMIT temporário: aplicação externa 4 5 Pressione para consultar 6 7 servidor Abraão José Paulo Carlos. . . 30 40 23 50 consulta anos sistema de arquivos banco com os dados de todos os funcionários de uma empresa.

Banco de Dados em Ambiente WWW cliente Servidor de Banco de Dados 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 Voice. XML Facultativas PHP Servlet s Perl Java. Scrip t Applets Plug-ins XML CGI HTTP HTML Sempre presentes JSP AS P WML

Java. Script

Tecnologias WEB - Comparação PLUG-INS DESENVOLVEDOR JAVASCRIPT compilado interpretado Fonte JAVA bytecode Fonte Compilador Byte. Code USUÁRIO Executável Interpretador 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.

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 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 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 + Código SERVIDOR WEB HTML Scripts