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
Download
