Projetando e Publicando Publicações Eletrônicas Interativas na World Wide Web Curso.

Apresentação em tema: "Projetando e Publicando Publicações Eletrônicas Interativas na World Wide Web Curso."— Transcrição da apresentação:

1 Projetando e Publicando Publicações Eletrônicas Interativas na World Wide Web Curso

2 Instrutor Renato M.E. Sabbatini, PhD Núcleo de Informática Biomédica Universidade Estadual de Campinas Campinas, SP, Brasil sabbatin@nib.unicamp.br http://nibgw.unicamp.br/~sabbatin

3 Parte II A Tecnologia

4 O Que é a WWW? é um serviço disponível através da Internet que permite a transmissão e acesso a documentos multimediais Usa um protocolo especial chamado HTTP (HyperText Transfer Protocol) Usa uma convenção de endereços eletrônicos para os recursos na rede chamada URL (Uniform Resource Locator)

5 O Que é um Protocolo? é uma convenção ou linguagem que permite a comunicação entre computadors através de uma rede O protocolo principal usado pela Internet é o TCP/IP (Transmission Control Protocol/Internet Protocol) há muitos outros protocolos sob o TCP/IP. exemplos: –SMTP: ou Simple Mail Transfer Protocol –FTP: ou File Transfer Protocol

6 Uniform Resource Locator http://www.nlm.nih.gov/visível/sample.htm Protocolo Host Directórioarquivo Formato de Endereço para a WWW:

7 A Arquitetura Cliente-Servidor Cliente computador que recebe os dados Servidor computador que envia os dados I rede

8 Software Cliente: Netscape, Internet Explorer (browser) Software Servidor: WWW Server Protocolo A tecnologia “Pull” (Puxar) Cliente Servidor I Internet

9 O Que é o Browser ? um programa (cliente) que permite ler e extrair o conteúdo de páginas na Web, usando ou protocolo HTTP. ou programa também permite identificar links dentro de um documento e em outros computadores, e pular para outros sítios na Internet (navegação).

10 O Software Cliente do WWW (Browser) Menu ferramentas Endereço Área de exibição Status

11 Tipos de Browsers Netscape Communicator Microsoft Internet Explorer Mosaic Opera etc. Todos funcionam de maneira similar e hoje estão disponíveis gratuitamente através da Internet

12 O Que é um link (“elo”) ? é uma frase ou palavra, usualmente de uma cor diferente ou sublinhado, que permite pular para outros sites ou páginas no mesmo computador ou em outras computadores. Normalmente o que se faz é "clicar" o mouse em cima da frase ou palavra.

13 A Tecnologia “Pull” Uma Transação HTTP (1) Cliente Servidor www.nlm.nih.gov Servidor www.nlm.nih.gov I Internet Software cliente: Netscape, Internet Explorer Software servidor: WWW Server HTTP http://www.nih.nlm.gov/visível/sample.htm Buscar Conectar Pedír

14 Cliente Servidor www.nlm.nih.gov Servidor www.nlm.nih.gov I Internet Http://www.nih.nlm.gov/visível/sample.htm Confirmar Transferir Encerrar sample.htm logo.gif return.gif A Tecnologia “Pull” Uma Transação HTTP (2) Software cliente: Netscape, Internet Explorer Software servidor: WWW Server HTTP

15 A Esséncia da Publicação On- line deve produzir-se texto e imagens com qualidade tipográfica e gráficos on-line, e imagens de resolução alta Para reduzir o tempo de transmisão, o protocolo de HTTP transmite desde o servidor um "script" de especificação de página muito menor, em ASCII O browser monta uma página gráfica com base neste “script”

16 Como Funciona o HTTP Cliente Software do browser Http://www.nih.nlm.gov/visível/sample.htm sample.htm logo.gif return.gif The Visível Human Project National Library of Medicine The Visível Human Project National Library of Medicine Script em HTML Visualização feita pelo browser

17 Interconectando Documentos Como uma publicação deve subdividir-se lógicamente em segmentos separados de informação, deve haver uma maneira de conecta-los entre si, para permitir a navegação Isto é realizado por meio do hipertexto (imagems ou texto que representam "links" a outras imagens ou texto)

18 O Que é o Hipertexto? The Visível Human Project National Library of Medicine Amostras WHO The Visível Human Project National Library of Medicine Amostras WHO amostra.htm Visível Human: Amostras Nesta página você poderá achar algumas amostras de imagens geradas pelo Projeto “Ser Humano Visível” em três dimensões. Visível Human: Amostras Nesta página você poderá achar algumas amostras de imagens geradas pelo Projeto “Ser Humano Visível” em três dimensões. imagem.htm

19 O Que é o HTML? é uma linguagem para a especificação de documentos (HyperText MarkUp Language) Especifica para o browser os elementos de uma página (texto, imagens, etc.) e onde e como eles devem ocorrer um arquivo do texto que tem a extensão.HTM contém etiquetas (“tags”) demarcadoras entre os caracteres O browser interpreta estas etiquetas e comandos e monta a página na tela.

20 Os Elementos do HTML Etiquetas para a definição do documento: ou título, cabeçalho, corpo, etc., Etiquetas para a definição do texto: os parágrafos, cores, tamanhos, conjunto de fontes de caracteres, ênfase de texto, etc., Etiquetas para imagens, sons e vídeos Etiquetas para definir links Etiquetas para definir tabelas, formulários, etc.,

21 Formatos de Dados Comuns HTML HyperText Markup Language Browser SGML Standard Generalized Markup Language Aplicações Auxiliares PDF Portable Data Format Aplicações Auxiliares FormatoVisualizado por: ASCIIBrowser PostScript Aplicações Auxiliares RTF Rich Text Format Aplicações Auxiliares TXT HTM SGM PSP PDF RTF Tipo

22 Exemplo de Formato de Dados: ASCII

23 Exemplo de Formato de dados: PDF

24 Preparando os Aplicativos Auxiliares

25 As Vantagens do Adobe PDF é uma linguagem de descrição de páginas Permite um controle total sobre a formatação de páginas (muito melhor que HTML) um arquivo de PDF pode ser producido automáticamente por PageMaker a visualização off-line ou on-line é realizada pelo mesmo programa (Acrobat Reader), con muitas funções adicionais o Reader está no dominio público e disponível para baixar via rede Permite um hardcopy de alta qualidade de publicação

26 As Desventagens do Adobe PDF O usuário precisa instalar o Acrobat Reader O artigo inteiro é armazenado em um arquivo não comprimido Portanto, o usuário deve esperar até que ele seja totalmente transmitido para poder vusualizá-lo As palavras do texto não são colocadas em um índice acessível aos mecanismos de busca

27 Adobe PDF: Conclusões PDF é um método eficaz para obter qualidade de a publicação on-line, con todas as capacidades tipográficas e gráficas do PageMaker É fácil para o productor, mas difícil para o usuário Provavelmente a melhor maneira é oferecer ambas versões on-line: HTML e PDF

28 O Que é ou SGML? é uma linguagem generalizada de marcação de documentos, muito mais poderosa que o HTML, O HTML é um subconjunto do SGML Requer um browser especial ou um plug-in para os browsers de HTML existentes Difícil de usar, mas muito interessante para definir elementos da publicação Ainda não tem muito uso

29 Outros Formatos Portáteis Microsoft Windows HELP Word Perfect Envoy Farallon Replica Common Ground Folio VIEWS Macromedia Shockwave Microsoft Word

30 Multimeios Interativos: ShockWave

31 Multimeios Interativos: ShockWave Flash

32 Exemplo: um Periódico em PDF/HTML Home Page (capa)

33 Sumário Exemplo: Um Periódico em PDF/HTML (2)

34 Artigo em Texto Completo Exemplo: um Periódico em PDF/HTML (3)

35 Resumo em HTML Exemplo: um Periódico em PDF/HTML (4)

36 Exemplo: um Periódico em PDF/HTML (5) Artigo em PDF

37 Estrutura de Interconexão Sumário Resumo Texto HTML Texto PDF

38 Software Cliente: PointCast, BackWeb, etc ou plug-in para o browser Software servidor: WWW Push Server (e.g., NetCaster, Castanet) A Tecnologia “Push” (Empurrar) Cliente Servidor I Internet

39 a tecnologia “Push” O push mais antigo: o email comum (SMTP) Email reforçado: a visualização em HTML Extensões Multimediais do Correio da Internet (MIME) Auxiliares para os browsers: Netscape NetCaster, Webchannel para o Internet Explorer, etc. Clientes especiais: BackWeb, PointCast, etc.,

40 Technología “Push”: PointCast

41 PointCast: Personalização de Canais

42 PointCast: Screen Saver

43 Tecnologias Ativas CGI: Common Gateway Interface Execução de programas no lado do servidor JavaScript, Java e ActiveX Execução de programas (“applets”) no lado do cliente Dynamic HTML, HTML Script Extensões dinámicas au HTML

44 Programação CGI Cliente Servidor HTTP CGI-BIN HTTPD HTML Common Gateway Interface uma maneira de executr programas no servidor (localizdos no CGI-BIN) e comunicando-se com o servidor HTTP

45 Tarefas CGI Comuns em Uma Publicação Eletrônica Resposta automática a email e formulários Geração automática de páginas personalizadas Acesso a mecanismos de busca internos Acesso por identificador e senha Acesso e mantenimento de bancos de dados Implementação de contadores de acesso Acessos por cliques (ex., estatísticas de anuncios) Funcionamento de chats on-line, assinatura de listas, etc.

46 Programação Java Cliente Servidor HTTP HTTPD HTML JAVA Applets pequenos programas escritos em JAVA que se descarregam junto com a página solicitada e que executam na computador cliente JAVA

47 JavaScript Programa interpretado e que é incluso no código HTML com as etiquetas e <!-- hide var tot=0; var rt=0; function getCookieVal (offset) { var endstr = document.cookie.indexOf (";", offset); if (endstr == -1) endstr = document.cookie.length; return unescape(document.cookie.substring(offset, endstr)); }

48 Java Applet Programa compilado (executável) que é baizado junto com a página HTML, como um binário

49 Tarefas JAVA Comuns em uma Publicação Eletrônica Banners animados e gráficos Mapas sensíveis "inteligentes” Processamento de formulários do lado do cliente Aprovação de campos em formulários Questionários interativos Bate-papos (“chats”) baseados na Web

50 Abordagens Híbridas A publicação principal é baseada em HTTP, os resumos e anúncios são enviados a os leitores vía email ou webcasting A publicação principal é baseada em FTP, se colocam os resúmos em um website ou se enviam os artigos vía email, newsgroups ou webcasting A publicação principal é baseada em email, newsgroups ou webcasting, mas um website tem os resumos e apontadores.

51 Exemplo da Abordagem Híbrida: Johns Hopkins InteliHealth Anúncio por Email

52 Chamada Direta ao artigo na Web Johns Hopkins InteliHealth

53 Curso de Publicações Eletrônicas Fim da Parte II