Material cedido pelo Prof. Edgard Jamhour WWW Material cedido pelo Prof. Edgard Jamhour
Programa Tecnologias Web CGI para Banco de Dados JavaScript JAVA ASP
WWW Histórico: Objetivo: Características: Desenvolvido por Tim Berners-Lee no início dos anos 90. Objetivo: Estabelecer um novo meio de comunicação mais ergonômico, sem os delays inerentes aos sistemas até então existentes: e-mail, FTP ou FAX. Características: Deveria permitir trocar informações de maneira transparente para usuários trabalhando com plataformas (sistema operacional e hardware) diferentes. INFORMAÇÃO INDEPENDENTE DA PLATAFORMA
Definições WWW: Hypermídia: Sistema de hipermídia interativo construído originalmente sobre a Internet. Numa intranet, o sistema WWW é instalado numa rede privada. Hypermídia: hipertexto, imagem, audio e vídeo.
Hipermídia Arquivo 1 Arquivo 3 Arquivo 2 Documento 2 Documento 1 Link página HTML (texto) página HTML (texto) Documento 2 Documento 1 Link objeto binário Objeto incorporado Objeto incorporado Arquivo 1 Arquivo 3 Arquivo 2
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
Tecnologias WWW
Infra-estrutura de Comunicação Servidor Web PROVEDOR PROVEDOR REDE PÚBLICA INTERNET PROVEDOR Clientes Informação e Dados Disponibilizados
Internet, Intranet ou Extranet? WAN Privada Extranet WWW e TCP/IP Internet Intranet WAN Pública LAN
Extranets REDE B REDE A Canal de comunicação criptografado EMPRESA FILIAL REDE B REDE A Canal de comunicação criptografado Tecnologia baseada em chaves
Aplicações Publicação de Informações Groupware Transações Financeiras Estáticas Dinâmicas: Integração com Banco de Dados Groupware Correio Eletrônico, Videoconferência, Chat Automação de Processos (Workflow) Transações Financeiras Bancárias Comerciais
Por que WWW? Software do cliente gratuito. CUSTO Software do cliente gratuito. Fácil implantação e atualização. Tecnologia evolutiva, baseada em objetos incorporados. A tecnologia é “quase padronizada” e “quase não-proprietária”. A mesma informação pode ser disponibilizada no meio interno e externo. Infra-estrutura de comunicação gratuita, de alcance global. TECNOLOGIA INTEGRAÇÃO
Internet e Negócios ? Negócios Internet não gerenciada ineficiente gerenciamento rigoroso desprotegida eficiência segurança Internet
Informação gráfica ou textual sem necessidade de programação Desafios da Intranet Páginas Estáticas Páginas Dinâmicas Executam Processamento Interagem com Banco de Dados Informação gráfica ou textual sem necessidade de programação funcionário qualquer funcionário especializado
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 aplicações + dados anos 70 DownSizing Cliente - Servidor aplicações e dados separados anos 80 anos 90 Browsers + Objetos Intranet interfaces homogêneas e Integração de Redes
WWW: Interface Universal para Dados e Aplicações Informações Aplicações
Padrões Padrões associados ao sistema WWW: HTTP: HTML: HyperText Transfer Protocol Protocolo de Comunicação HTML: Hypertext Markup Language Linguagem definida de acordo com SGML
HTML HTML: Hypertext Markup Language A) Descriptive Markup Linguagem criada em 1990 de acordo com a especificação SGML Basea-se em 2 princípios fundamentais: A) Descriptive Markup As partes de um documento HTML são marcadas com nomes descritivos como <CHAPTER> ou <TITLE>. Exemplo: <TITLE> Especialização </TITLE> <BODY> Conteúdo do documento </BODY> B) Hypertexto Define links entre elementos de documentos Link = relacionamento entre 2 elementos: SITUADOS NO MESMO DOCUMENTO SITUADOS EM DOCUMENTOS DIFERENTES
Exemplo de página HTML <HTML> <HEAD> Em HTML toda a informação é transmitida na forma de texto. Objetos gráficos e multimídia podem ser chamados partir da página HTML. <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 página </A> <P> <IMG SRC="mail.gif" HEIGHT=20 WIDTH=20> inserção de figura </BODY> </HTML>
Tranferência de Documentos Hipertexto
TAGS de Controle Corpo do documento <BODY TEXT="#000000" BGCOLOR="#C0C0C0" LINK="#0000EE" VLINK="#551A8B" ALINK="#FF0000” BACKGROUND="Backpuc.jpg"> </BODY> Nenhum texto pode ser escrito fora dos tags <BODY> ... </BODY>. BGCOLOR = "cor" A cor de fundo do documento BACKGROUND = "URL" A URL de uma imagem para ser usada no lugar do BGCOLOR. TEXT, LINK, VLINK, ALINK = "cor" As cores do texto regular, links, links visitados e links ativos (correntemente selecionados).
Tags de Hipertexto Referências 2 tipos: internas (âncoras) e externas <BODY> <P><A HREF="Indice.htm">Referencia a um outro documento</A> <P><A HREF="#Parte1">Referencia ao mesmo documento</A> <P><A NAME="Parte1"></A>Parte 1 </BODY> <A> Define uma âncora, um link ou uma declaração de ancora. HREF = "URI" TARGET = "frame1" NAME = "nome de uma referência no texto (âncora)"
Tags de Texto <BODY> <P>Texto Simples <P><B>Texto em Negrito</B> <P><B><I>Texto em Negrito e Italico</I></B> <P><B><I><FONT COLOR="#0000FF"><FONT SIZE=+1> Texto com Tamanho e cor diferentes </FONT></FONT></I></B> <P>Texto que <BR> continua em outra linha. <P><CENTER>Texto Centralizado</CENTER> <P><HR WIDTH="100%">Linha Horizontal <P><H1> Titulo em Nivel 1 <P><H2> Titulo em Nivel 2, menor do que Nivel1 </BODY>
Tags de Listas <BODY> <OL> <LI>Item 1</LI> <UL> </UL> </BODY>
Tags para Formulários <FORM ACTION = meucgi> <P><TEXTAREA ROWS="10" COLS="20"> Texto inicial da caixa de edicao </TEXTAREA></P> <P> <INPUT TYPE="checkbox" NAME = "check1" CHECKED> Texto ao lado da Checkbox <P> <INPUT TYPE="button" VALUE = "Meu Botao"> Texto do Botao <P> <INPUT VALUE = "Edit Box"> </FORM>
Tags para Formulário <FORM ACTION = meucgi2> <SELECT SIZE="6"> <P> <OPTION> Primeiro <P> <OPTION> Segundo <P> <OPTION> Terceiro <P> <OPTION> Quarto <P> <OPTION> Quinto <P> <OPTION SELECTED> Sexto </SELECT> </FORM>
Tags para Tabelas <TABLE BORDER=1 > <TR> <TD>linha1/coluna1</TD> <TD>linha1/coluna2</TD> </TR> <TD> linha2/coluna1</TD> <TD> linha1/coluna2 </TD> <TD> linha3/coluna1</TD> <TD> linha3/coluna2 </TD> <CAPTION ALIGN=BOTTOM>Minha Tabela </CAPTION> </TABLE>
Tags para Mapas <IMG SRC="barra.gif" usemap="#barra"> <MAP name="barra"> <AREA shape="rect" coords="18,4,62,44” href=”pagina1.htm"> <AREA shape="rect" coords="36,20,36,20" href=" pagina2.htm"> <AREA shape="rect" coords="66,4,111,46" href=" pagina3.htm"> <AREA shape="rect" coords="45,23,45,23" href=" pagina4.htm"> <AREA shape="rect" coords="39,38,39,38" href=" pagina5.htm"> <AREA shape="rect" coords="20,26,20,26" href=" pagina6.htm"> <AREA shape="default" nohref> </MAP>
Tags para Frames <HTML> <FRAMESET COLS = "30%,20%,*" ROWS = "3*,*"> <FRAME SRC =”Pagina1.htm" NAME = "Frame1"> <FRAME SRC ="Pagina2.htm" NAME = "Frame2"> <FRAME SRC ="Pagina3.htm" NAME = "Frame3"> <FRAME SRC ="Pagina4.htm" NAME = "Frame4"> <FRAME SRC ="Pagina5.htm" NAME = "Frame5"> <FRAME SRC ="Pagina6.htm" NAME = "Frame6"> </FRAMESET> </HTML>
Tags para Frames IMPORTANTE: Os links devem especificar os frames onde as páginas serão mostradas: <A HREF=”pagina.htm" TARGET="Frame1"> coloca a pagina no Frame1 <A HREF=”pagina.htm" TARGET="Frame2"> coloca a pagina no Frame2 Targets Especiais para especificar onde os documentos ligados serão apresentados: TARGET = “_self” (mesmo documento da âncora) TARGET = “_top” (janela inteira)
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.
HyperText Transfer Protocol HTTP é um protocolo de rede construído para o WWW. protocolo orientado a objeto, sem estado (stateless). Objetos: Formatados em MIME página html: Tipo MIME = text/html arquivo texto = text/plain arquivo de imagem = image/gif, image/jpg, etc. arquivo de som = audio/wav, audio/x-mpeg, etc.
HTTP: Funcionamento HTTP é um protocolo sem estado (stateless) 1 2 3 4 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 2 requisição 3 resposta 4 desconexão
STATELESS X STATEFULL STATELESS STATEFULL Dados relativos a cada usuário, armazenados no servidor enquanto durar a conexão. STATELESS STATEFULL PEQUENO NÚMERO DE USUÁRIO PEQUENO TEMPO DE RESPOSTA GRANDE NÚMERO DE USUÁRIO TEMPO DE RESPOSTA LONGO
HTTP: Identificação de recursos
index.htm ou default.html URL e Sites index.htm ou default.html
Arquitetura Cliente-Servidor Inicialmente, a arquitetura WWW previa uma arquitetura cliente-servidor pura. todo processamento feito no servidor Extensões recentes incluíram também capacidade de processamento nos clientes. (HTML-estático) Java JavaScript VBScript ActiveX Plugins requisição resposta CGI Soluções Proprietárias
Common Gateway Interface Forma não proprietária para construir páginas WWW dinâmicas. CGI não é uma linguagem de programação. 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 do Cliente APLICAÇÃO Servidor Resposta não WWW Mensagem MIME e cabeçalho HTTP
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
Tipos de Banco de Dados Cliente-Servidor: Banco de Dados em Arquivo: As requisições são processadas sempre no servidor. Apenas a resposta é enviada ao cliente. Banco de Dados em Arquivo: As requisições são sempre processadas no cliente. Todos os dados das tabelas são enviados ao cliente para processamento local. cliente servidor tabelas cliente tabelas
Banco de Dados em Ambiente WWW Servidor de Banco de Dados Servidor WWW cliente tabelas CGI As consultas são sempre processadas no servidor. Servidor WWW tabelas cliente CGI
Limitações do Esquema CGI + Scripts + Forms A entrada de dados nos formulários é necessariamente orientada a caracteres. Não é possível inserir informações gráficas ou som nos campos de um formulário HTML. O Modelo computacional associado ao CGI é do tipo “batch”, toda a entrada de dados é processada no servidor em bloco. As respostas do servidor sempre geram a resposta na forma de uma nova página HTML. É centralizado, pois o todo o processamento dos forms de todos os clientes é realizado no servidor.
Extensões da Tecnologia WWW
JavaScript Conceito: Linguagem interpretada pelo navegador, incorporada na forma de texto ao código fonte das páginas HTML, destinada a adicionar capacidade de processamento no lado do cliente.
Paradigma e Tecnologia de Java A linguagem Java está sendo desenvolvida em torno de 2 conceitos principais: A) O Modelo de Objetos B) Portabilidade: Linguagem PSEUDO - INTERPRETADA = BYTECODE JAVA pode ser utilizada em 2 contextos: Linguagem de programação de propósito geral. Linguagem de programação para WEB. compilado interpretado bytecode Fonte Fonte Fonte ByteCode DESENVOLVEDOR 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 3 GET saldo.class 4 bytecode texto bytecode Instalação de applets formulário.html saldo.class
Restrições dos Applets O BROWSER IMPÕE AS SEGUINTES RESTRIÇÕES: O APPLET NÂO PODE: ler ou gravar arquivos na máquina local. Disparar a execução de um programa ou carregar uma biblioteca a partir da máquina local. fazer conexões de rede, exceto com o host de onde vieram ler variáveis de ambiente alterar propriedades do sistema O APPLET PODE: apresentar informações multimídia invocar métodos públicos de outros applets na mesma página HTML invocar páginas HTML para serem visualizadas.
Considerações sobre Restrições dos Applets Os applets só podem utilizar o próprio código Java e a API de Java que o visualizador provê. As restrições dos applets são relaxadas quando um applet é carregado do sistema local. Todo o código Java recebido a partir da rede passa por um processo de verificação do seu byte code. Efetua-se as seguintes verificações: se o código é realmente da Máquina Virtual de Java se não há conversão ilegal de tipos se não há estouro da pilha de execução se os registradores não são usados incorretamente
Utilizando Applets para Acessar Banco de dados 1) Integração de applets e CGI 2) Integração de applets com aplicações externas via sockets ou RMI. 3) JDBC
Problemas com o CGI O programa CGI precisa ser carregado do disco para memória antes de ser executado. Cada programa CGI é executado na memória como um processo independente. A execução de várias requisições simultâneas pode levar a uma saturação dos recursos do servidor. Aplicação requisição Servidor WWW Aplicação requisição Aplicação requisição
Extensões do Servidor Grandes fabricantes (Microsoft, Netscape, Sun) propuseram extensões do servidor Web capazes de manter o estado das aplicações. Servidor com Extensão CGI Carga da aplicação Carga da aplicação requisição requisição Execução Execução resposta Descarga da aplicação Apenas na primeira vez que o programa for chamado resposta
ASP: Active Server Pages Tecnologia ASP ASP: Active Server Pages Tecnologia de desenvolvimento baseada em 2 fundamentos: Componentes (Server Components, implementados segundo a arquitetura COM/Microsoft) Scripts de servidor, utilizados para manipular os componentes. ASP é uma solução desenvolvida incialmente para o servidor IIS da Microsoft. Atualmente, a tecnologia ASP está sendo portada para diversos sistemas UNIX.