Embed Size (px)
Citation preview
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
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
Exemplo: um Periódico em PDF/HTML
(3)
Resumo emHTML
Exemplo: um Periódico em PDF/HTML
(4)
Exemplo: um Periódico em PDF/HTML
(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
