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

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édicaUniversidade Estadual de Campinas

Campinas, SP, Brasil

[email protected]://nibgw.unicamp.br/~sabbatin

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

• http://www.nlm.nih.gov/visível/sample.htm

Protocolo Host Directório arquivo

Formato de Endereço para a WWW:

A Arquitetura Cliente-Servidor

ClienteCliente

computador que recebe os dados

ServidorServidor

computador queenvia os dados

Irede

Software Cliente:Netscape, Internet Explorer

(browser)

Software Servidor:WWW Server

Protocolo

A tecnologia “Pull” (Puxar)

ClienteCliente ServidorServidorIInternet

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)

MenuferramentasEndereç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)

ClienteCliente Servidorwww.nlm.nih.gov

Servidorwww.nlm.nih.govIInternet

Software cliente:Netscape, Internet Explorer

Software servidor:WWW Server

HTTP

http://www.nih.nlm.gov/visível/sample.htm BuscarConectarPedír

ClienteCliente Servidorwww.nlm.nih.gov

Servidorwww.nlm.nih.govIInternet

Http://www.nih.nlm.gov/visível/sample.htm ConfirmarTransferirEncerrar

sample.htmlogo.gifreturn.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

ClienteCliente

Software dobrowser

Http://www.nih.nlm.gov/visível/sample.htm

sample.htmlogo.gifreturn.gif

<HTML><BODY BGCOLOR=#FFFFFF><IMG SRC=“logo.gif” ALIGN=left><H1>The Visível Human Project</H1><HR><IMG SRC=“return.gif” ALIGN=left>National Library of Medicine

<HTML><BODY BGCOLOR=#FFFFFF><IMG SRC=“logo.gif” ALIGN=left><H1>The Visível Human Project</H1><HR><IMG SRC=“return.gif” ALIGN=left>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?

<HTML><BODY BGCOLOR=#FFFFFF><IMG SRC=“logo.gif” ALIGN=left><H1>The Visível Human Project</H1><HR><IMG SRC=“return.gif” ALIGN=left>National Library of Medicine<P><A HREF=“imagem.htm”>Amostras</A><P><A HREF=“http://www.who.ch”>WHO</A>

<HTML><BODY BGCOLOR=#FFFFFF><IMG SRC=“logo.gif” ALIGN=left><H1>The Visível Human Project</H1><HR><IMG SRC=“return.gif” ALIGN=left>National Library of Medicine<P><A HREF=“imagem.htm”>Amostras</A><P><A HREF=“http://www.who.ch”>WHO</A>

amostra.htm

<HTML><BODY BGCOLOR=#FFFFFF><IMG SRC=“logo.gif” ALIGN=left><H1>Visível Human: Amostras</H1><BR>Nesta página você poderá achar algumasamostras de imagens geradas pelo Projeto“Ser Humano Visível” em três dimensões.

<HTML><BODY BGCOLOR=#FFFFFF><IMG SRC=“logo.gif” ALIGN=left><H1>Visível Human: Amostras</H1><BR>Nesta página você poderá achar algumasamostras 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 < e >

• 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

HTMLHyperText Markup Language

Browser

SGMLStandard Generalized

Markup LanguageAplicações Auxiliares

PDFPortable Data Format

Aplicações Auxiliares

Formato Visualizado por:

ASCII Browser

PostScript Aplicações Auxiliares

RTFRich 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 emTexto Completo


(3)

Resumo emHTML


(4)


(5)

Artigo em PDF

Estrutura de Interconexão

SumárioSumário

ResumoResumo

Texto HTMLTexto HTML

Texto PDFTexto PDF

Software Cliente:PointCast, BackWeb, etcou plug-in para o browser

Software servidor:WWW Push Server

(e.g., NetCaster, Castanet)

A Tecnologia “Push” (Empurrar)

ClienteCliente ServidorServidorIInternet

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

Technología “Push”: PointCast

PointCast: Personalização de Canais

PointCast: Screen Saver

Tecnologias Ativas

• CGI: Common Gateway InterfaceExecução de programas no lado do servidor

• JavaScript, Java e ActiveXExecução de programas (“applets”) no lado do

cliente

• Dynamic HTML, HTML ScriptExtensões dinámicas au HTML

Programação CGI

ClienteCliente ServidorServidor

HTTPHTTPCGI-BIN

HTTPD

HTML

Common Gateway Interfaceuma 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 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.

Programação Java

ClienteCliente ServidorServidor

HTTPHTTP

HTTPDHTML

JAVA Appletspequenos programas escritos em JAVA que se descarregam junto com a

página solicitada e que executam na computador cliente

JAVA JAVA

JavaScript

Programa interpretado e que é incluso no código HTML comas etiquetas <SCRIPT> e </SCRIPT>

<SCRIPT LANGUAGE="JavaScript"><!-- hidevar 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));}</SCRIPT>

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

Exemplo da Abordagem Híbrida:Johns Hopkins InteliHealth

Anúncio porEmail

Chamada Direta ao artigo na Web

Johns Hopkins InteliHealth

Curso de Publicações Eletrônicas

Fim da Parte II

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

Documents