Curso
Projetando e Publicando
Publicações Eletrônicas
Interativas na World Wide Web
Instrutor
Renato M.E. Sabbatini, PhD
Núcleo de Informática Biomédica
Universidade Estadual de Campinas
Campinas, SP, Brasil
[email protected]
http://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
Formato de Endereço para a WWW:
Uniform Resource Locator
• http://www.nlm.nih.gov/visível/sample.htm
Protocolo
Host
Directório
arquivo
A Arquitetura Cliente-Servidor
Cliente
computador que
recebe os dados
rede
I
Servidor
computador que
envia os dados
A tecnologia “Pull” (Puxar)
Cliente
Internet
I
Software Cliente:
Protocolo
Netscape, Internet Explorer
(browser)
Servidor
Software Servidor:
WWW Server
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
http://www.nih.nlm.gov/visível/sample.htm
Internet
I
Servidor
www.nlm.nih.gov
Buscar
Conectar
Pedír
HTTP
Software cliente:
Netscape, Internet Explorer
Software servidor:
WWW Server
A Tecnologia “Pull”
Uma Transação HTTP (2)
Cliente
Http://www.nih.nlm.gov/visível/sample.htm
Internet
I
Confirmar
Transferir
Encerrar
HTTP
Software cliente:
Netscape, Internet Explorer
Servidor
www.nlm.nih.gov
sample.htm
logo.gif
return.gif
Software servidor:
WWW Server
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
Http://www.nih.nlm.gov/visível/sample.htm
sample.htm
logo.gif
return.gif
Software do
browser
Visualização feita pelo browser
<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
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>
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 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 < 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
Formato
Visualizado por:
Tipo
ASCII
Browser
TXT
HTML
HyperText Markup Language
Browser
HTM
SGML
Standard Generalized
Markup Language
Aplicações Auxiliares
SGM
PostScript
Aplicações Auxiliares
PSP
PDF
Portable Data Format
Aplicações Auxiliares
PDF
RTF
Rich Text Format
Aplicações Auxiliares
RTF
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)
Exemplo: Um
Periódico em
PDF/HTML
(2)
Sumário
Exemplo: um
Periódico em
PDF/HTML
(3)
Artigo em
Texto Completo
Exemplo: um
Periódico em
PDF/HTML
(4)
Resumo em
HTML
Exemplo: um
Periódico em
PDF/HTML
(5)
Artigo em PDF
Estrutura de Interconexão
Resumo
Sumário
Texto HTML
Texto PDF
A Tecnologia “Push” (Empurrar)
Cliente
Software Cliente:
PointCast, BackWeb, etc
ou plug-in para o browser
Internet
I
Servidor
Software servidor:
WWW Push Server
(e.g., NetCaster, Castanet)
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 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
HTTPD
HTML
HTTP
CGI-BIN
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 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
Cliente
Servidor
HTML
HTTPD
HTTP
JAVA
JAVA
JAVA Applets
pequenos programas escritos em JAVA que se descarregam junto com a
página solicitada e que executam na computador cliente
JavaScript
<SCRIPT LANGUAGE="JavaScript">
<!-- 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));
}
</SCRIPT>
Programa interpretado e que é incluso no código HTML com
as etiquetas <SCRIPT> e </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 por
Email
Johns
Hopkins
InteliHealth
Chamada Direta
ao artigo na
Web
Curso de Publicações Eletrônicas
Fim da Parte II