Transcript No Slide Title
Serviços de navegação
São serviços que permitem
varrer
ou
vasculhar
documentos em computadores remotos obter texto, som e imagem de uma multiplicidade de fontes mostrar automaticamente a informação recuperada guardar uma cópia no disco local imprimir uma cópia em papel seguir referências para documentos relacionados, dispensando o conhecimento exacto do nome do ficheiro e até da máquina as referências podem mudar de servidor diferentes dos serviços de recuperação (ftp) que se limitam a transferir informação sem a mostrar
Internet - 1
gopher
Serviço baseado em menús cada linha do menú está associada a outro menú a um ficheiro que é visualizado ou a um programa para executar funcionamento do navegador contacta o servidor (um de cada vez) obtém uma página de informação fecha a ligação mostra a informação as fronteiras do computador diluem-se e o conjunto dos servidores de gopher funcionam como um grande repositório integrado
Internet - 2
Hipertexto
Misturar as referências (realçadas) com o texto têm a vantagem de lhes dar contexto e de facilitar uma sequência natural de consulta estes documentos designam-se de hipertexto ou hipermédia texto, áudio, imagem parada ou vídeo
LEIC Disciplinas
----- ----- NMP ------
NMP 1998/1999
----- ----- Alunos ------
Alunos
----- Luis Rui ------
Luis
------
Rui
----- ----- Curso ----- ----- Curso ------
Internet - 3
World Wide Web
Origem: vários grupos de físicos pretendiam partilhar informação multimédia integrada, sem terem de a enviar para as várias equipas acesso à informação por pedido (
pull
) em vez de por envio (
push
) no CERN (1991) definiu-se a linguagem HTML e no NCSA implementou-se o
browser
Mosaic serviço mais importante: em 1995 o tráfego WWW ultrapassou o de FTP responsável pela actual expansão da Internet
Internet - 4
Navegadores
Quem controla as normas da Web é o W3C World Wide Web Consortium em sentido estrito, WWW refere-se ao serviço de navegação que usa o protocolo http os navegadores mais comuns são o Netscape Navigator e Microsoft Internet Explorer (guerra!) para além de funcionarem como clientes WWW, também incluem clientes para os outros serviços (ftp, telnet, e-mail, gopher) transferem ficheiros ASCII ou HTML que mostram e ficheiros binários que também mostram se a aplicação ajudante (
helper
) ou um software adicional (
plug-in
ou
applet
) estiverem definidos, caso contrário armazenam-nos em disco interface universal, incluindo bases de dados
Internet - 5
URL
A localização de um qualquer recurso é definida num URL -
Uniform Resource Locator
serviço://computador/ficheiro serviço
indica o protocolo do servidor pretendido (http, ftp, gopher, ...); se omisso, usa-se o http da Web
computador
é a máquina onde corre o servidor
ficheiro
é o nome completo do ficheiro pretendido; se omisso, usa-se habitualmente
Welcome.html
ou
index.html
para facilitar a organização das áreas de trabalho
http://tom.fe.up.pt/~ei96023/casa.html
corresponde de facto ao ficheiro
~ei96023/public_html/casa.html
os directórios
~ei96023
para todos e o ficheiro e
public_html casa.html
têm que ter permissão x tem que ter permissão r
Internet - 6
HTML
HyperText Markup Language
é uma linguagem de estruturação de documentos, incluindo recursos multimédia, e de especificação de ligações, com suporte para outros serviços, como o ftp e o gopher é um caso particular da linguagem SGML (
Standard General Markup Language
) utilizada em processamento de texto HTML é definida por um DTD (
Document Type Definition
) SGML está na versão 4.0
a concorrência entre navegadores origina o aparecimento de
extensões
à norma podem amarrar a um navegador e dificultar o acesso através de outros navegadores por vezes, as mais usadas acabam por ser incorporadas na versão seguinte da norma
Internet - 7
HTML não é
Não é uma ferramenta de processamento de texto é uma linguagem de anotação de documentos, para evidenciar a sua
estrutura e conteúdo
, mais do que a forma, que pode variar entre navegadores inclui contudo comandos que afectam a forma, tais como a fonte, os títulos e as mudanças de linha não se devem usar os comandos de estrutura só pelo efeito gráfico que produzem não existe notas de rodapé, sumários e índices automáticos cabeçalhos e rodapés tabuladores listas com sublistas numeradas tratamento gráfico de equações matemáticas
Internet - 8
Ferramentas de desenvolvimento
Necessários um editor e um navegador dois métodos de construção das páginas primeiro escrever o texto e depois marcá-lo • pode usar-se um processador de texto normal e respectivas ferramentas de correcção ortográfica, etc., e em seguida acrescentar as marcas sistematicamente (gravar em texto) • pode recorrer-se à gravação em formato HTML de documentos MS Office, embora muitas vezes seja necessário afinar o resultado • a ferramenta shareware HTML Author é útil para complementar o Word escrita simultânea do conteúdo e das marcas • editores que facilitam a geração de código HTML com visualização num navegador (
HomeSite
) • editores WYSIWYG só interessam se for possível chegar facilmente ao código gerado (
Adobe PageMill
)
Internet - 9
Primeiro documento
Exemplo
Este documento mostra que os espaços no código fonte são ignorados pelo navegador.Introduzi um novo paragrafo.
Internet - 10
Estrutura de um documento
Documento HTML = texto + marcas armazenado e transmitido como ficheiro de texto ASCII partes : cabeçalho (título) + corpo
Internet - 11
Marcas
As anotações HTML são constituídas por
marcas
texto
indiferentes a maiúsculas maior parte delimita uma região com um início e um fim • há marcas sem fim (ex:
) • nas marcas encaixadas convém manter o escopo hierárquico
Internet - 12
Função das marcas
as marcas aconselham o navegador a mostrar o conteúdo segundo uma dada forma, mas não são imperativas não se trata de definir disposição de página mas de transmitir conteúdos redimensionar a janela muda o aspecto mas ver CSS os navegadores ignoram marcas desconhecidas e tentam ultrapassar erros respeitar a sintaxe para facilitar o trabalho de analisadores de texto embora não exigida, é boa prática incluir a marca
Internet - 13
Caracteres especiais
Só parte dos 256 caracteres ISO 8859-1 são representáveis e ainda menos são normalizados entidade carácter com nome &
nome
; < > < > á á ê ê & º × º & × entidade carácter numérica A A ì ì õ õ Ü Ü •
nnn
;
Internet - 14
Comentários
tudo entre as marcas não visualizado mas passa no View Source não está normalizado o encaixe de comentários (Netscape aceita) certos navegadores usam os comentários para incluir comandos específicos para o seu servidor que outros navegadores não entenderiam CSS inclusão de ficheiros do lado do servidor geração dinâmica de conteúdo
Internet - 15
Cabeçalho
Descreve propriedades do documento, em marcas inclusas específicas
Internet - 16
Divisões e parágrafos
Um texto pode estar estruturado em divisões resumo, capítulos, secções, anexos, bibliografia, etc.
marca
align
=
left
(omissão),
center
ou
right
, posiciona o texto atributo
class= nome nome
permite definir um estilo para a classe e usá-lo sistematicamente as marcas
- muda de linha e adiciona espaço
…
limita-se a introduzir uma mudança de linha é muitas vezes omitido;
omitido no primeiro parágrafo
Internet - 17
Texto estruturado
Introdução: O trabalho presente visa demonstrar a necessidade de os agricultores se actualizarem.
Início do capítulo. Resumo: este é o primeiro capítulo e trata da actualização tecnológica. A utilização de … dimensão.
Encostado à direita . Este é um parágrafo fechado.
Encostado à esquerda por omissão.
Novo parágrafo.
Internet - 18
Títulos de divisões
Separação visual de partes do texto feita com títulos, linhas, espaçamentos, … seis níveis de títulos
, , …, tem o tamanho da fonte normal; escolher para a menor subdivisão e muito pequenos; só para elementos extra existem os atributos
tem o tamanho da fonte normal; escolher para a menor subdivisão e muito pequenos; só para elementos extra existem os atributos
e muito pequenos; só para elementos extra existem os atributos
align
e
class
manter a consistência na escolha dos níveis repetir o conteúdo da marca
Internet - 19
Aparência do texto
Estilos baseados no conteúdo são marcas que anotam a função especial do elemento e devem ser mostradas com aparência diferente do texto normal actualmente são pouco diferenciadas (convertidas para itálico ou negrito) sensíveis ao atributo
class
e têm sempre fim exemplos mais usados • - citação bibliográfica; incluir ligação, se existir; itálico • - código para computador; monoespaçado • - definição; útil para produzir índices; • - enfatizar; itálico • - forte; negrito
Internet - 20
Aparência do texto
Estilos físicos são marcas que indicam directamente o aspecto pretendido, mas não transportam significado redefiníveis na classe exemplos • , , , - negrito, itálico, traçado, sublinhado • , - tamanho relativo; fonte seguinte; encaixável •
Internet - 21
Exemplo de fontes
Internet - 22
Código do exemplo
Fontes
Modelo
O HTML usa um esquema de
fontes virtuais
com
7 tamanhos
. O tamanho por omissão é o
3
. A relação entre tamanhos adjacentes é de 20%. A especificação de tamanhos pode ser absoluta (1..7) ou relativa ( size=+1
).
Uso
Realçar uma expressão com
a marca
<big>
produz
uma variação relativa encaixada. Diminuir tamanho do texto normal com <basefont size=-1> passa para 2. Aqui,
<big> fica com 3,
pois a variação é relativa. Realçar texto com
<font size=7>
indica tamanho absoluto. Este é o
mínimo e não adianta tentar
reduzir
mais
. Os expoentes x
2
e índices x
2
não mudam de tamanho automaticamente.
Internet - 23
Fontes
Tamanho de uma fonte marca
aumenta o tamanho 3 níveis marca (sempre com fim) •
...
nível, porque é sempre relativo à fonte base só aumenta 1 e são encaixáveis Escolha de fonte Côr • a fonte escolhida é a primeira que exista no sistema do navegador Sol ou Sol #FFFF00 significa vermelho e verde no máximo (FF), sem azul (RGB)
Internet - 24
Côr
Nomes normalizados aqua (#00FFFF) fuchsia (#FF00FF) gray (#808080) maroon (#800000) navy (#000080) red (#FF0000) silver (#C0C0C0) black (#000000) green (#008000) blue (#0000FF)lime (#00FF00) olive (#808000) purple (#800080) teal (#008080) yellow (#FFFF00) white (#FFFFFF) Mapa de cores normalizado cada côr primária (vermelho, verde e azul) só pode tomar 6 valores de brilho (00, 33, 66, 99, CC, FF) o mapa contém apenas 216 cores (6x6x6), mas que não precisam de ser convertidas: convém usar só estas, para garantir consistência em navegadores diferentes
Internet - 25
Controlo de quebras
muda de linha, mas só recomeça abaixo de qualquer imagem ou tabela que esteja encostada à esquerda ...
respeita os espaçamentos e quebras do texto preformatado útil para quadros e código; monoespaçado interpreta marcas que não impliquem quebras (fontes, ligações)
Internet - 26
Exemplo de quebras
Quebras
Este texto aparece antes da imagem, a qual vai ser alinhada à esquerda.
Esta frase está na mesma linha da imagem
pelo que fica à sua direita.
O parâmetro de limpeza faz ultrapassar a imagem.
Este bocado de texto tem muitos espaços e mudanças de linha.
Internet - 27
Réguas
Uma régua
(
<hr> ) tem o efeito de uma quebra, não tem espaço antes nem depois, e funciona como um separador.
Para retirar o efeito 3D, usa-se noshade .
Parâmetros interessantes:
size -- espessura
width -- largura em pixel ou em % da janela
align -- alinhamento
Recomenda-se o uso da percentagem para tornar o aspecto relativo ao tamanho da janela.
Pode-se mudar a côr.
Internet - 28
Formatos de imagem
GIF - graphical interchange format 256 cores comprime sem perda de informação ícones e desenhos visualização de imagem aproximada em 1/4 do tempo • entrelaçamento de 4 em 4 linhas transparência • pixels da côr do fundo são ignorados pelo navegador animação • ficheiro GIF pode conter várias imagens mostradas em sequência JPEG - joint photographic experts group milhares de cores maior compressão, com perdas fotografias
Internet - 29
Regras de uso
Usar imagens que tenham conteúdo e não apenas para “colorir” a página simplificar as imagens reduzir tamanho, evitar dithering usando cores normalizadas reutilizar imagens ícones podem ficar na cache dividir documentos grandes manter cada documento abaixo dos 50KByte colocar índices com ligações para os documentos relacionados isolar imagens grandes colocar uma versão reduzida no documento principal especificar as dimensões
Internet - 30
Marca ![]()
Atributos
src
- URL absoluto ou relativo da localização do ficheiro gráfico
lowsrc
- URL de uma imagem de carregamento mais rápido
alt
- texto a mostrar caso a imagem não o seja
align
- posiciona o texto relativamente à sua linha •
top, middle, bottom
- acerta a linha com o topo da imagem, o meio ou o fundo (varia do Netscape para o IE) •
left, right
- encosta a imagem e põe o texto a envolvê-la centrar - usa-se a marca
border
- espessura do caixilho; 0 elimina, o que pode prejudicar a identificação dos que possuem ligações
height
e
width
- dimensão em pixel, acelera o carregamento; é usada para reservar espaço e para escalar as imagens
hspace
,
vspace
- número de pixels extra na horizontal e vertical
Internet - 31
Exemplos de imagens
Eis o dono do carro.
![Carro da esquerda](carro.jpg)
![Carro da direita](carro.jpg)
Internet - 32
Mapas
Mapa
Internet - 33
Mapa sensitivo
O atributo
usemap
faz com que uma imagem fique sensível à passagem do rato definindo na marca
Internet - 34
Mapa sensitivo
www.boutell.com/mapedit Indiferente a ordem?
Internet - 35
A marca
Cores fundo: bgcolor texto: text ligação: link ligação visitada: vlink ligação activa: alink Nota: mudar as cores pode confundir o leitor Fundo no atributo
background
indicar um URL de uma imagem pequena que é replicada automaticamente até preencher todo o fundo
Internet - 36
Atributos do corpo
Um mau exemplo de valores para os atributos do corpo, pois obscurece a leitura.Internet - 37
Desenho do documento
Três marcas para controlar posicionamento geral definidas no navegador da Netscape Espaçamento vertical, horizontal, rectangular
Internet - 38
Abertura de espaços
Primeiro, um exemplo de definição de um bloco de espaço.
Norte
Oeste
Leste.
Sul
Agora, espaço vertical.
E termina com
espaço horizontal.
Internet - 39
Colunas
Texto em colunas
A marca <multicol> tem os atributos
gutter
- espaço entre colunas e
width
- dimensão total absoluta ou relativa à janela.
<\p>
O efeito de várias colunas pode ser simulado com recurso a tabelas.
Internet - 40
Camadas
Uma camada é um documento HTML
src
vai buscar conteúdo a URL sem
ou sem posicionamento, é incluída no fluxo normal posicionamento (top, left
) relativo ao canto superior esquerdo do documento ou da camada que contenha uma camada inclusa as camadas são transparentes, a menos que se defina
bgcolor background
ou atributo
name
se for necessário referir a camada camadas sucessivas, ao mesmo nível, são postas por cima das anteriores;
above, below, z-index
controlam sobreposição pode-se controlar a visibilidade com JavaScript (camadas inclusas herdam as propriedades da que as contém)
Internet - 41
Exemplo de camadas
Efeito de sombra
Efeito de sombra
Uma camada <layer> não ocupa … para o seu sítio.
Internet - 42
Tipos de endereços
Usa-se um URL para identificar um recurso FTP- ftp://utilizador:senha@servidor:porta/caminho;type=tipo • tipo: i - binário, a - ascii, d- directório notícias- nntp://servidor:porta/grupo/artigo correio- mailto:utilizador@servidor terminal remoto- telnet://utilizador:senha@servidor:porta gopher- gopher://servidor:porta/caminho ficheiro- file://servidor/caminho • local: file:///C|/caminho ou file://localhost/caminho código- javascript:instruções Web- http://servidor:porta/caminho#fragmento http://servidor:porta/caminho?pesquisa
• usar apenas caracteres 0-9, A-Z, a-z, $-_.+!*’(), • codificar os outros em hexadecimal (US-ASCII) • exemplos: / - %2F, ? - %3F, (espaço) - %20, “ %22
Internet - 43
Âncoras e ligações
Uma
âncora
identifica um ponto do documento
Revisão bibliográfica
Umaligação
permite indicar ao navegador qual o documento a mostrar a seguir ... após o que se apresenta uma revisão bibliográfica sobre ...
Neste formato indica-se, para além do documento, qual o fragmento que se pretende visualizar O corpo da marca é a parte visível da ligação; apresenta-se realçada; deve ser suficientemente explicativa para se compreender o conteúdo desse documento, mesmo sem se ler o contexto
Internet - 44
Atributos da marca
onClick, onMouseOver, onMouseOut
valor é sequência de instruções JavaScript ... caiu do
onMouseOver= "window.inbox='Barco rabelo no Douro';return true" onMouseOut= "window.inbox=' ';return true" title="Barco rabelo">barco
mostra e apaga na barra de estado o conteúdo do link atributo
title
pode ser usado pelo navegador para dar um título à janela que só mostra uma fotografia atributos
rel
e
rev
definem significado das relações directa e inversa entre origem e destino da ligação meta-informação, apoio à automatização exemplos: next, prev, head, toc, parent, child, index, glossary ...
Internet - 45
Endereços relativos
Omitir partes de endereço completar com as partes correspondentes do documento actual a parte de endereço contida na marca
morada
no doc
capa.html
• http://tom.fe.up.pt/relatorios/rel29/imagens/minhafoto.html
• permite mover o relatório 29 para outro directório ou servidor sem quebrar as ligações se tiver
• abrindo um doc com
file
, todos os URL relativos ficam
file
Internet - 46
Estilos de ligações
Listas de ligações listas de descrições de itens contendo ligações ligações dispersas auto-descritivas evitar chamadas do tipo CARREGUE AQUI!
usar imagens pode ser pouco descritivo acrescentar mensagem explicativa na barra de estado imagens sensíveis
ismap
- processamento do lado do servidor pelo programa indicado em
href
implica ter a imagem no corpo de
usemap
- processamento no cliente • circle, polygon, rectangle; href e nohref
Internet - 47
Listas
Tipos de listas listas não ordenadas (
- ) • atributo
-
- …
- … (nas listas de definições) as listas podem ser compactadas (
compact
) encaixadas
start=n
indica o número inicial;
value=n
altera o valor corrente
Internet - 48
Exemplo de listas
Vertebrados
Mamíferos
Primatas.
<
li type="disc">
Cetáceos.
type
controla o aspecto do símbolo (
disc, circle, square)
listas ordenadas (
- ) • atributos
start
• atributo
type
e
value
para controlar a numeração controla o aspecto do símbolo (
1, A, a, I, i)
menus (
- ) item de uma lista
Aves
Invertebrados.
Coisa
O que se chama a um objecto na falta de melhor.
Objecto
O que se chama a uma coisa quando não ocorre outra.
Internet - 49
Tabelas