Aula
Renato M.E. Sabbatini, PhD
O Que É a Internet e Como Funciona:
III. A World Wide Web
Objetivos da Aula
Desenvolver o conhecimento básico
sobre como funciona a World Wide
Web (WWW) e seus serviços,
inclusive o que é a linguagem HTML e
o hipertexto
O Que É a WWW?
• é um serviço disponível através da Internet que
permite a transmissão e acesso a documentos
multimediais através do hipertexto (hipermídia)
• Usa um protocolo especial chamado HTTP
(HyperText Transfer Protocol) e uma linguagem
de especificação de documentos, chamada
HTML (Hypertext MarkUp Language)
• Usa uma convenção de endereços eletrônicos
para os recursos na rede chamada URL
(Uniform Resource Locator)
O Que É Multimídia
• Utilização de vários meios de apresentação
de informação em um mesmo produto:
–
–
–
–
texto
imagens estáticas
imagens dinâmicas (animações, vídeos)
sons
• Integração através de um software adequado
de apresentação (GUI)
• Inclui um componente de interatividade
O Que É Hipermídia
• É um produto multimídia interligado de
forma não linear, como em um hipertexto
• A navegação é feita através de vínculos, ou
“links”
• Os vínculos provocam o carregamento e
exibição de outros documentos ou meios
• Tem segmentos interativos e não interativos
O Que é um Protocolo?
• é uma convenção ou linguagem que permite a
comunicação entre computadores 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
O Que É a URL?
Um Formato de Endereço para a WWW:
Uniform Resource Locator
URL
• http://www.nlm.nih.gov/visible/sample.htm
Protocolo
Host
Diretó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.
• O 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 em 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 em 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
Como Funciona o HTTP?
A
Cliente
Http://www.nih.nlm.gov/visível/sample.htm
sample.htm
logo.gif
return.gif
Software do
browser
Visualização feita pelo browser
B
<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
A Essência da Produção na Web
• 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”
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.,
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)
Como Funciona 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
Arquivos Visualizáveis
• Os browsers são capazes de visualizar diretamente
apenas alguns tipos de arquivos:
– Texto (.TXT ou .HTML)
– Imagens (.JPEG, .JPG, .GIF, .PNG)
– Sons (.WAV)
• Os demais tipos de arquivos necessitam de
programas auxiliares para serem visualizados ou
tocados (são os chamados “plug-ins”)
• Alguns plug-ins já vem instalados, dependendo do
tipo de browser e versão, outros precisam ser
instalados pelo usuário.
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
Formatos de Imagens na Web
Formato
Visualizado por:
Tipo
GIF
Graphic Interchange Format
Browser
GIF
JPEG
Journalist’s Photo Experts Group
Browser
JPG
PNG
Portable Network Graphics
Browser
PNG
PCX, TIF, BMP
Aplicativos Auxiliares
---
Formatos de Áudio/Vídeo na Web
• Netscape´s Media Player (LiveAudio)
• Microsoft Media Player (áudio e vídeo), NetShow
• MPEG 3 (Moving Pictures Experts Group): áudio
e vídeo
• WAV: Wave File
• AVI: Audiovisual Interface (Windows)
• VXTreme, VDONet
• MIDI (música)
• Apple QuickTime (.QT)
• Movie Format (.MOV)
• RealAudio (.RA), RealVideo/RealMedia (.RM)
Formatos de Áudio/Vídeo
• Formatos que exigem download completo
antes de poderem ser visualizados ou
tocados
• Formatos que podem ser
visualizados/tocados à medida em que vão
sendo transmitidos (“streaming”)
Como Funciona o Streaming?
Cliente
Visualização
contínua dos
pacotes de áudio e/ou
video
Servidor
Envia arquivo
de audio e/ou video
em pacotes pequenos
e seriais
Plug-Ins para Videos
Apple QuickTime
Windows Media Player
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.,
Technologia “Push”: PointCast
PointCast: Personalização de
Canais
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:
InteliHealth
Anúncio por
Email
Johns
Hopkins
InteliHealth
Chamada Direta
ao artigo na
Web