1	Modulo I Introdução a Programação Web Prof. Ismael H F Santos
2	Ementa Modulo VII – Programação Web com Java Arquitetura da World Wilde Web - WWW URI e URL Protocolo HTTP Tecnologias do lado do Cliente Tecnologias do lado do Servidor
3	Bibliografia Linguagem de Programação JAVA Ismael H. F. Santos, Apostila UniverCidade, 2002 The Java Tutorial: A practical guide for programmers Tutorial on-line: http://java.sun.com/docs/books/tutorial Java in a Nutshell David Flanagan, O´Reilly & Associates Just Java 2 Mark C. Chan, Steven W. Griffith e Anthony F. Iasi, Makron Books. Java 1.2 Laura Lemay & Rogers Cadenhead, Editora Campos
4	Livros Core Java 2, Cay S. Horstmann, Gary Cornell Volume 1 (Fundamentos) Volume 2 (Características Avançadas) Java: Como Programar, Deitel & Deitel Thinking in Patterns with JAVA, Bruce Eckel Gratuito. http://www.mindview.net/Books/TIJ/
5	POO-Java
6	Arquitetura TCP/IP
7	Arquitetura TCP/IP
8	Arquitetura WWW
9	Arquitetura WWW
10	A Arquitetura WWW (cont)
11	Clientes WWW Browsers exibem e permitem a navegação através de documentos exemplos Netscape Navigator Internet Explorer Amaya HotJava NCSA Mosaic Lynx Máquinas de busca Qualquer programa utilizando os serviços oferecidos por um servidor Web
12	Servidores WWW Não necessitam ser dedicados Exemplos Apache Internet Information Server (IIS) Netscape Enterprise Server NCSA httpd Jigsaw
13	Conteúdo Estático x Conteúdo Dinâmico Conteúdo estático ausência de um processamento adicional para entregar/exibir o documento principal interação é pela navegação através de hiper-links Conteúdo dinâmico inclusão de processamento adicional além da pura entrega de documentos e interpretação das marcações HTML
14	Porque Conteúdo Dinâmico Permitir que sistemas de informação aproveitem a infra-estrutura oferecida pela Web simplicidade e portabilidade (em alguns casos) para os projetistas infra-estrutura de distribuição para o projetista simplicidade para o usuário final browser como desktop Aplicações home banking, comércio eletrônico, bibliotecas digitais, máquinas de busca, etc.
15	POO-Java
16	Universal Resource Identifier (URI) Como identificar os recursos (documentos)? URL (Uniform Resource Locator) Como recuperar um documento? HTTP (Hypertext Transfer Protocol) Como definir o formato do conteúdo dos documentos? HTML (Hypertext Markup Language)
17	Sintaxe de URIs RFC 1630: descreve a notação de URIs em um nível sintático Separação em duas partes URI = scheme “:” scheme-specific-part Esquema identifica o esquema de definição dos nomes (naming scheme) IANA (Internet Assigned Numbers Authority) uma lista dos esquemas e referências para suas definições Parte específica ao esquema identificação propriamente dita de um objeto particular para um dado esquema inteiramente dependente do esquema sendo utilizado
18	URL e URN URI = scheme “:” scheme-specific-part URL – Uniform Resource Locator Identificação e localização de recursos através de endereços URN – Uniform Resource Name Identificação e localização de recursos através de nomes Definem as semânticas para URIs
19	URL Sintaxe para parte específica do esquema Principais esquemas URL registrados (IANA) file ldap prospero ftp mailto telnet http news wais https nntp
20	URL para esquema HTTP URI engloba URL e URN Exemplos de URL (esquema HTTP) http://www.dimap.ufrn.br:80/~sbmidia2000/ http://www.telemidia.puc-rio.br/index.html http://www.altavista.com/cgi-bin/query?q=client%2Fserver http://139.82.95.14/index.html
21	POO-Java
22	HTTP – Hypertext Transfer Protocol Objetivo original capacidade de recuperar, de um servidor, documentos simples baseados na mídia texto protocolo leve e rápido Baseado em um modelo simples de arquitetura clienteservidor pedido/resposta protocolo sem estado Utiliza um serviço de transporte confiável, orientado a conexão (TCP) Protocolo mais utilizado na Internet, na atualidade Versões: HTTP/0.9, HTTP/1.0 e HTTP/1.1
23	Mensagens HTTP/0.9
24	HTTP/1.0 – maio/96 (RFC 1945) Permitiu ao servidor responder códigos de erro e informações sobre a entidade, por exemplo, o tipo de conteúdo. Definiu o conceito de tipo de mídia MIME – Multipurpose Internet Mail Extensions, como padrão para identificação de conteudo. MIME possui arquitetura aberta permitindo a uma aplicação incorporar suporte a novos tipos de dados Formato flexível de mensagem. O cliente passou a poder enviar dados ao servidor. Mecanismos de autenticação.
25	Alguns MIME Types
26	Tipos MIME text/plain - arquivo no formato texto (ASCII); text/html - dosumento no formato HTML, o padrão para documentos Web; application/zip - arquivo compactado; image/gif - imagem codificada no formato GIF; image/jpeg - imagem codificada no formato JPEG.
27	Mensagens HTTP/1.0
28	Cabeçalhos HTTP/1.0 General (requisição e resposta) não se aplicam a entidades Entity (requisição e resposta) usados para transmitir meta-informações de uma entidade Request (requisição) contêm informações do cliente Response (resposta) contêm informações que não podem ser transmitidas na status-line
29	Mensagens HTTP/1.1
30	Métodos de Requisição em HTTP/1.1 Métodos GET - retorna o objeto, ou seja, a informação requisitada. HEAD - retorna somente informações sobre o objeto, como tamanho, data de criação etc. POST - envia informações para o servidor Web PUT - envia uma cópia de um objeto/informação para ser armazenado num servidor Web. DELETE - apaga um objeto armazenado no servidor Web. OPTIONS CONNECT TRACE
31	Pedido HTTP completo
32	Resposta HTTP
33	Resposta HTTP Uma resposta HTTP é formada por três elementos: Linha de status indicando sucesso ou falha do pedido. Descrição da informação contida na resposta (Metainformação/MIME). A própria informação que foi requisitada.
34	HTTP – Códigos de Retorno A linha de status traz as seguintes informações: A versão do protocolo HTTP; O código de status que define o resultado do pedido; Uma pequena frase explicando o que significa o código. Código status é compostos de 3 dígitos, divididos em categorias em função do primeiro dígito 1xx – informativo 2xx – sucesso 3xx – redireção 4xx – erro do cliente 5xx – erro do servidor Podem ser estendidos
35	Resposta HTTP - Status Os principais códigos de status existentes: 200 (Document follows) - pedido bem sucedido. A informação requisitada será retornada. 401 (Unautorized) - a informação requisitada é de acesso restrito, sendo necessário se autenticar. 403 (Forbidden) - acesso proibido. 404 (Not found) - a informação requisitada não foi encontrada ou teve permissão de acesso negada. A primeira opção é muito freqüente na Internet e pode ocorrer por erro de digitação de uma URL. 500 (Server Error) - erro no servidor Web. Comum quando da execução de scripts.
36	Resposta HTTp
37	Métodos de Requisição em HTTP/1.1 Cabeçalhos
38	Modificações HTTP/1.1 Melhora no modelo de conexão TCP por requisição/resposta HTTP persistente (P-HTTP) Mantém uma conexão aberta durante várias requisições para um mesmo servidor novos métodos de requisição CONNECT, OPTIONS e TRACE melhor suporte para cache esquema mais seguro de autenticação elimna a transferência de nome e senha de forma limpa suporte à transferência parcial de entidades suporte à negociação de conteúdo
39	Proxy Motivação Cache redução de carga no servidor e do trafego na conexão com a Internet redução do tempo de resposta para os usuários Segurança filtragem de requisições conversão de protocolos
40	Proxy – Cenários de uso
41	Criticas HTTP Sem estado requisições em paralelo numa mesma conexão precisam ser enfileiradas Implementação integral complexa Fundamentado no TCP como protocolo de transporte Requisições em um único sentido Ausência de um padrão para definição de extensões Mecanismo de negociação de conteúdo ainda restrito
42	Cliente e servidor HTTP
43	Principais métodos HTTP (requisição)
44	Cabeçalhos HTTP
45	Comunicação HTTP
46	POO-Java
47	Plug-ins Tecnologia originalmente projetada pela Netscape Netscape Navigator 2.0 Internet Explorer 3.0 passou também a oferecer suporte Permite também que aplicações existentes sejam facilmente integradas à Web Principal utilidade: exibir conteúdo cujo formato não é tratado pelo browser conteúdos específicos das aplicações (PDF, PostScript, etc), áudio, vídeo
48	Plug-ins Módulo de código separado que se comporta como se fosse parte do browser associado a um ou mais tipos de mídia (tipo MIME) biblioteca de código nativo C específico a uma plataforma (sistema operacional) dependente da interface de programação do browser
49	Inserindo plug-ins em páginas HTML Elementos HTML utilizados para inserção de plug-ins OBJECT quando o browser não sabe tratar a especificação, o conteúdo do elemento deve ser apresentado Objects podem ser aninhados <object data=“clock.avi” type=“video/msvideo” height=“100%” width=“100%” classid=“http://microsoft.com/plugins/” > < object data=“clock.gif” type=“image/gif”> <p>Hora certa. </object> </object>
50	Inserindo plug-ins em páginas HTML Elementos HTML utilizados para inserção de plug-ins EMBED (não faz parte da especificação HTML 4.01) elemento não mais padronizado na DTD HTML embed src=“clock.avi” type=“video/msvideo” width=“100%” height=“100%”> Modos de exibição de um plug-in Embutido, escondido ou página inteira
51	Modelo de Execução de Plug-ins Plug-ins executam no mesmo espaço de memória do browser DLLs, objetos compartilhados, bibliotecas compartilhadas, etc. Ciclo de vida de um plug-in está associado ao ciclo de vida da página que o aciona Quando o browser encontra em uma página uma referência (URI) para um arquivo que está associado a um Plug-in browser carrega o código do plug-in na memória (se ainda não otiver feito) cria uma nova instância do plug-in (o browser pode criar várias instâncias de um mesmo plug-in simultaneamente) Quando o browser sai da página que contém a referência para o plug-in ou tem sua janela fechada, a instância do plug-in é removida da memória quando a última instância de um plug-in é removida, o código do plug-in é retirado da memória
52	Modelo de Execução de Plug-ins Quando um plug-in não está carregado em memória, o mesmo só ocupa espaço em disco Plug-ins são dependentes de plataforma e browser e não permitem interagir diretamente com o conteúdo HTML para por exemplo: substituir imagens (simular animações) simular menus de opções mudar características de apresentação do documento de acordo com a interação do usuário acrescentar conteúdo dinamicamente
53	Scripts Usados para adicionar funcionalidades dinâmicas a páginas HTML estáticas. Página HTML carrega (de forma embutida ou através de uma referência) scripts que são executados pelo browser alterar a especificação de apresentação dos elementos acrescentar conteúdo dinamicamente ao documento verificar a entrada de dados em um formulário controlar o browser Principais linguagens de script utilizadas Tcl, JavaScript (inicialmente chamado de LiveScript) - Netscape Jscript e VBScript - Microsoft
54	Scripts Padrão para linguagens de script interpretadas no cliente ECMAScript ( European Computer Manufactors Associations Script) padrão de junho de 1997, JavaScript e JScript são implementações Por que Linguagens de Script? Interpretadas (não exigem compilação) oferecendo independência de plataforma Simples de programar, sendo mais adequadas para usuários não experts em programação. Ideais para tarefas simples Desvantagens Ineficiência e recursos limitados por isso são indicadas para tarefas simples
55	Scripts Para executar os scripts , o cliente WWW ( browser) precisa de um interpretador da linguagem de script utilizada no documento
56	Scripts Pode aparecer várias vezes, tanto no Head como no Body do documento HTML. Fica a cargo de cada linguagem de script oferecer uma sintaxe para referenciar elementos HTML no documento <p>Última atualização feita em: <script type=“text/javascript”> <!-- ß evita que browsers que document.write(document.lastModified); não dão suporte a scripts --> exibam o conteúdo do </script> script na tela ! Informa a data da última modificação do documento
57	Scripts Exemplo de Script Associado a Eventos HTML <form> <input type=“button” value=“Aperte!” onclick=“alert(‘Clicou no botão!’)”> </form> Os eventos intrínsecos normalmente são utilizados em conjunto com funções declaradas na área de SCRIPT
58	Style Sheets HTML pode ser visto como aplicação SGML DTD SGML + Declaração SGML Style Sheets: especificação da apresentação do documento linguagens para especificação de folhas de estilo DSSSL ( Document Style Semantics and Specification Language ) para SGML CSS (Cascading Style Sheets) para HTML
59	HTML Apesar do SGML focar em conteúdo, as primeiras versões do HTML tinham elementos e atributos para especificar a apresentação do documento tamanhos e cores das fontes - <FONT>, <BASEFONT>, ... alinhamentos e margens - <CENTER>, atributo Align, ... formatação de texto - <U> (sublinhado), <STRIKE> (riscado) A partir da versão 4.0, o uso desses elementos e atributos foi desaconselhado (deprecated), devendo os mesmos serem substituídos por especificações nas style sheets. HTML 4 define três DTDs
60	HTML Transitional DTD utilizada só para interpretação, não para gerar novos documentos, pois contém elementos e atributos deprecated. Esses elementos e atributos eram utilizados para especificar formatação nas versões antigas e agora devem ser substituídos nas style sheets (CSS) Strict DTD utilizada para gerar novos documentos Frameset DTD usado para especificar documentos contendo uma estrutura de frames
61	CSS - Cascading Style Sheets Formatação do texto cores, fontes (tipo e tamanho), negrito, sublinhado, alinhamento dos parágrafos, ... Formatação espacial margens superior, inferior, direita, esquerda, bordas, ... Formatação das tabelas Sintaxe de CSS: Grupo de declarações propriedade1:valor1; propriedade2:valor2 Ex.: color: red; font-size:16px Associados a elementos HTML elemento { grupo de declarações } Ex.: P{color: red; font-size: 16px}
62	Por que CSS ? Especificar diferentes apresentações para um único documento Possibilitar uma aparência consistente para um conjunto de documentos (site) Facilita a manutenção <H1><FONT COLOR="yellow" FACE=”Arial">A ßno .html heading</FONT></H1> H1 {font-family:Arial; color: yellow} ßno .css HTML não foi projetado e não oferece suporte suficiente para controlar a apresentação ex.: espaçamento entre linhas, sombreado nas fontes, ...
63	Por que CSS ? Style sheet embutida no cabecalho do .html <html> <head> <style type="text/css"> <!-- body {color: red} h1 {color: black} --> </style> </head> <body> ... </body> </html> Diretamente em cada elemento do documento - inline style: qualquer elemento, exceto <html>, pode ter um estilo associado <p style="color: green">Este é um parágrafo.</p>
64	Por que CSS ? Vantagem de usar a style sheet por fora Reuso, facilidade de modificação e manutenção, maior poder de expressão para os recursos de apresentação reduz o tamanho dos documentos e portanto o tempo de download Desvantagem de usar a style sheet por fora quando uma página for lida offline, o usuário deve salvar, além da página HTML, o arquivo contendo a style sheet
65	Por que CSS ? Como especificar um estilo? seletores associam grupos de declarações a elementos type selector => Ex.: p{color: red; font-size: 16px} class selector Documento HTML <p class="introductoryparagraph"> .... </p> Style Sheet P.introductoryparagraph {color: blue} .introductoryparagraph {color: blue}
66	Múltiplas style sheets
67	Exemplo DHTML Sublinha a âncora só quando o mouse estiver sobre a mesma <html> <head> <style> .on {text-decoration:underline; color:blue;} .off {text-decoration:none; color:black;} </style> </head> <body> <ul> <li> <a href=“apresentacoes.html” class=“off” onmouseover=“this.classname=‘on’;” onmouseout=“this.classname=‘off’;”>Apresentações</a> <li> <a href=“artigos.html” class=“off” onmouseover=“this.classname=‘on’;” onmouseout=“this.classname=‘off’;”>Artigos</a> </ul> </body> </html>
68	O que pode ser feito com Scripts + CSS Acrescentar dinamicamente conteúdo a uma página HTML enquanto a página está sendo processada pelo browser Alterar o conteúdo de alguns elementos HTML Alterar características de apresentação dos elementos Obter a lista de links “elos” do documento Controlar o comportamento do browser exibir mensagens através de dialog boxes ou na linha de status do browser abrir e fechar novas janelas do browser navegar no histórico de documentos simulando o comportamento dos botões back e forward do browser Ler e escrever valores em elementos para entradas de dados em qualquer formulário do documento Ler e escrever em Cookies
69	O que NÃO pode ser feito com Scripts As linguagens Script não possuem recursos gráficos Por razões de segurança, não se tem acesso para ler ou escrever em arquivos no cliente. Não oferece suporte para comunicação em rede a não ser baixar o conteúdo de uma URL Não tem capacidade para abrir múltiplas threads
70	Linguagens de Sistema Outra possibilidade para introduzir dinamismo em documentos na Web é através de uma linguagem de sistema programas precisam ser distribuídos e executados em uma variedade de plataformas (clientes WWW) programa (compilado) precisa ser independente de plataforma Applets Java Programas que podem ser baixados de qualquer servidor WWW Executados localmente em qualquer cliente WWW que saiba executar código Java browsers possuem uma máquina virtual Java (JVM) embutida ou implementada como um plug-in Quando o browser carrega uma página Web que faz referência a um applet, ele traz o applet de um servidor WWW (bytecode) e o executa localmente
71	POO-Java
72	Servidores WWW Primeiros servidores HTTP simples traduziam o nome do recurso requisitado em um arquivo, enviando o conteúdo do arquivo como resposta Diversos fatores tornaram complexa a configuração apropriada e a gerência eficiente de servidores HTTP servidores hospedando uma quantidade grande de documentos aumento na complexidade do protocolo HTTP
73	Servidores WWW Fazem o mapeamento entre URL-path e o recurso local http://www.inf.puc-rio.br/index.html URL - caminho virtual Mapeamento c:\inetpub\wwwhome\index.html caminho físico no sistema de arquivos do servidor
74	Servidores WWW Tipos de recursos estáticos resposta é gerada pelo servidor sem a ajuda de um outro processo externo tradução da URL-path em um path físico do recurso envio da resposta acrescida de algumas informações (tipo MIME, tamanho, data de última modificação, etc.) · dinâmicos resposta é gerada dinamicamente através de algum processamento externo ao servidor tradução da URL-path em um path físico de um programa programas são normalmente identificados por extensões ou por prefixos especiais para URL-paths (diretórios virtuais)
75	Tecnologias Server-side
76	CGI – Common Gateway Interface
77	Ineficiência do CGI
78	CGI: Exemplo
79	APIs do Servidor
80	Servlet API
81	Vantagens dos Servlets
82	Problemas dos Servlets, CGIs e APIs
83	Solução: scripts de servidor
84	Controle de sessão
85	Cookies
86	Exemplo com cookies: Loja Virtual