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

Instrutor Renato M.E. Sabbatini, PhD Núcleo de Informática Biomédica Universidade Estadual de Campinas Campinas, SP, Brasil

Parte II A Tecnologia

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)

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

Uniform Resource Locator Protocolo Host Directórioarquivo Formato de Endereço para a WWW:

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

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

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).

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

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

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.

A Tecnologia “Pull” Uma Transação HTTP (1) Cliente Servidor Servidor I Internet Software cliente: Netscape, Internet Explorer Software servidor: WWW Server HTTP Buscar Conectar Pedír

Cliente Servidor Servidor I Internet 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

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”

Como Funciona o HTTP Cliente Software do browser 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

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)

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

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.

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.,

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

Exemplo de Formato de Dados: ASCII

Exemplo de Formato de dados: PDF

Preparando os Aplicativos Auxiliares

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

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

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

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

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

Multimeios Interativos: ShockWave

Multimeios Interativos: ShockWave Flash

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

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

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

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

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

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

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

a tecnologia “Push” O push mais antigo: o comum (SMTP) 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.,

Technología “Push”: PointCast

PointCast: Personalização de Canais

PointCast: Screen Saver

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

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

Tarefas CGI Comuns em Uma Publicação Eletrônica Resposta automática a 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.

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

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)); }

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

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

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

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

Chamada Direta ao artigo na Web Johns Hopkins InteliHealth

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