Dicas e Truques em HTML
Truques
com imagens
Texturas
no background
Da
mesma forma que é possível definir uma cor de
fundo diferente para as páginas, pode-se colocar
uma imagem como papel de parede. Primeiro cria-se
um arquivo .GIF e depois inclui-se o
atributo BACKGROUND no tag <BODY>.
A
imagem que será colocada no fundo deve ser suave
o suficiente para permitir que o texto a ser
colocado por cima fique legível. No exemplo que
mostramos aqui, no entanto, escolhemos um padrão
quadriculado para mostrar como o arquivo de imagem
é repetido na tela para compor o background.
<BODY
BACKGROUND=textura.gif>
Neste
exemplo, o arquivo textura.gif é
utilizado como padrão de fundo da página. Várias
cópias da imagem são colocadas lado a lado até
ocupar toda a área do documento.
Imagem
de um pixel
Deve-se
ter outros cuidados ao escolher as imagens para o
fundo. O principal problema é o tamanho em bytes
destes arquivos. As dimensões da imagem influem
no tamanho do arquivo. Para criar um arquivo o
mais econômico possível pode-se fazer uma imagem
de apenas um pixel quadrado. Esse pixel,
que estará ocupando um tamanho mínimo em bytes,
será reproduzido em todo o fundo da página,
dando a impressão de ser um arquivo único.
Baixa
resolução
Outra
forma de melhorar a performance da página Web é
enviar primeiro uma versão em baixa resolução
das imagens. Esse truque é mais útil quando a
imagem é de grandes proporções. Digamos que a
imagem seja bastante complexa, ocupando acima de
30 Kbytes. Cria-se uma versão simplificada da
mesma imagem (em preto e branco, por exemplo) e
informa-se ao navegador para carregá-la antes.
Assim, o usuário pode ter uma idéia da ilustração
antes de ter que esperar pela imagem em alta
resolução. Criado para o Netscape, esse truque
é chamado de low/high resolution flip trick.
A inclusão da imagem de baixa resolução é
conseguida com a colocação do atributo LOWSRC,
que indica o arquivo que será carregado primeiro.
<IMG
SRC=altareso.gif LOWSRC=baixares.gif>
No
exemplo acima, o arquivo altareso.gif é
a imagem definitiva, de alta resolução. O
arquivo baixares.gif é a imagem de baixa
resolução, que será carregada antes.
A
principal utilidade desse truque é nos imagemaps.
Sem ter que esperar pela imagem de alta resolução,
o usuário pode escolher uma área da versão
menos definida e seguir a sua navegação. Alguns
lugares da rede aproveitam o recurso para criar
uma pequena animação.
Fundo
transparente
Os
programas de desenho, independente do formato da
figura, gravam uma imagem no formato retangular.
Mesmo que a imagem seja um círculo, quando a
ilustração for colocada na página Web, ela irá
ocupar um espaço retangular. Se esse círculo
tiver sido desenhado sobre um fundo branco, esse
fundo acompanhará a imagem.
É
possível fazer uma imagem ficar com o fundo
transparente. Digamos que o fundo da página tenha
uma textura e é preciso colocar uma imagem que
deixe ver o fundo em volta dela. Pode-se definir
que determinada área da imagem não tenha cor
nenhuma e dar a impressão de “vazado”.
Para
fazer uma imagem com fundo transparente é preciso
utilizar um programa como o LViewPro, que
seleciona uma determinada cor como a cor de fundo.
Ao carregar a imagem no navegador, essa cor não
será mostrada, dando o efeito de transparência.
Por isso é preciso que a área que se pretende
deixar transparente seja de uma cor só. Essa cor
não pode se repetir em qualquer outra parte da
imagem. Do contrário essa parte também ficará
transparente.
No
exemplo a seguir, a imagem foi criada sobre um
fundo cinza. A intenção é colocar a figura
sobre uma textura. Abre-se o arquivo no LViewPro e
escolhe-se Background Color no menu Options. O
programa mostra uma tela com todas as cores
presentes na imagem. Seleciona-se a cor que ficará
transparente (neste caso, o cinza) e clica-se em
OK. Ao salvar o arquivo, o programa pede uma
confirmação de gravação no formato GIF89.
Clica-se em OK. Ao carregar a imagem no navegador,
a área que estava na cor cinza ficou transparente
e por baixo da imagem apareceu a textura.
Anti-alias
O
efeito anti-alias, disponível em alguns programas
de desenho, como o Photoshop, suaviza as bordas de
uma imagem. O efeito mistura os pixels da borda
com os pixels do fundo. Por exemplo, se a borda
está na cor preta e o fundo na cor branca, o
anti-alias coloca na borda uma gradação de tons
de cinza. Assim, o contorno da imagem fica com
maior resolução.
Dependendo
do tamanho, é difícil notar as diferenças entre
imagens com ou sem-anti-alias. Mas se olharmos
mais de perto, veremos como é construído o
anti-alias.
No
exemplo acima, a primeira imagem, sem anti-alias,
tem contorno cheio de “degraus”. A segunda
imagem, com o efeito, mistura os pixels da borda
com os do fundo, gerando alguns pontos
acinzentados para fazer a transição de forma
mais suave.
Uma
desvantagem do anti-alias é que a área de
transição entre o contorno e o fundo aumenta a
complexidade da imagem e, conseqüentemente, gera
arquivos com mais bytes. Quando possível, deve-se
evitar o efeito para que os arquivos de imagem
fiquem com um tamanho menor.
Combinação
com o background
As
imagens com anti-alias também dificultam o
uso do fundo transparente. Na verdade, os dois
truques são praticamente incompatíveis. Como é
preciso escolher apenas uma cor para fazer uma
imagem com fundo transparente, os tons da transição
no contorno aparecem como se fossem um borrão.
Quando o uso do anti-alias é indispensável,
recomenda-se que a imagem seja produzida já sobre
o fundo definitivo. Por exemplo, se o fundo da página
for preto, a imagem deve ser criada no programa de
desenho sobre um fundo da mesma cor. Se as cores
forem idênticas, nem é preciso converter a
imagem para fundo transparente. Mas, se for necessário
fazer a transparência, os tons da borda combinarão
com a cor de fundo da página.
Outra
situação em que se deve coordenar o fundo da página
e o da imagem que está sendo produzida é quando
se utiliza uma textura como background. Nem
sempre uma imagem com fundo transparente funciona
sobre uma textura. A dica de novo é criar a
imagem já sobre a textura que será utilizada. É
preciso que a textura escolhida seja uniforme para
que não haja problemas de “encaixe” quando a
imagem for colocada na página.
Letreiro
O
Internet Explorer implementa uma forma muito
simples de dar movimento ao texto. O recurso
funciona como um letreiro luminoso de bolsa de
valores, no qual o texto corre da direita para a
esquerda. No caso do letreiro produzido para o
Internet Explorer, utiliza-se o tag <MARQUEE>
para marcar o trecho de texto que será animado.
Uma série de atributos permitem controlar o tipo
de rolagem do texto (da esquerda para a direita ou
vice-versa), a velocidade e o tamanho do letreiro,
entre outras coisas.
Um
letreiro simples seria:
<MARQUEE
HEIGHT=30 WIDTH=300 DIRECTION=LEFT
SCROLLAMOUNT=50>Este texto rola pela tela da
direita para a esquerda.</MARQUEE>
No
exemplo acima, uma área de 30 pixels de
altura (HEIGHT=30) por 300 pixels
de largura (WIDTH=300) será criada para
a exibição do texto em movimento, que será
apresentado da direita para a esquerda (DIRECTION=LEFT).
A velocidade é expressa também em pixels
pelo atributo SCROLLAMOUNT. Quanto mais pixels,
mais rápido correrá o texto na tela.
Trechos
de vídeo
No
Microsoft Internet Explorer 2.0 é possível
incluir um trecho de vídeo numa página. A
Microsoft inventou um atributo chamado DYNSRC
(de dynamic source, fonte dinâmica) para
ser incluído dentro do tag <IMG>.
O formato de arquivo de vídeo suportado é o AVI
(Audio Video Interleave). Para que os demais
navegadores, incapazes de entender o atributo DYNSRC,
possam também receber a imagem, ainda que estática,
inclui-se no mesmo tag o atributo SRC
com o arquivo de imagem comum correspondente.
<IMG
DYNSRC=video.avi SRC=imagem.gif WIDTH=50 HEIGHT=50
START=MOUSEOVER LOOP=INFINITE>
O
exemplo acima implementa numa página lida com o
Internet Explorer 2.0 o arquivo de vídeo video.avi.
Outros navegadores (como o Netscape) irão mostrar
apenas a imagem imagem.gif. O atributo START=MOUSEOVER
indica que o trecho de vídeo começará a ser
executado quando o usuário passar o mouse sobre
ele. O atributo LOOP=INFINITE declara que
o vídeo será exibido continuamente até que o
usuário mude de página.
Outros
atributos são:
START=FILEOPEN:
o vídeo começa a ser exibido assim que a página
é carregada
CONTROLS:
adiciona um conjunto de botões para controlar a
execução do vídeo
LOOP=n:
Executa o trecho de vídeo “n” vezes. Se for
colocado LOOP=5, o vídeo será exibido
cinco vezes.
LOOPDELAY=n:
especifica, em milisegundos, de quanto em quanto
tempo o trecho de vídeo será executado quando
colocado em loop.
Trilha
sonora
O
Internet Explorer 2.0 também aceita colocar uma
trilha sonora em uma página Web. Como no tag
que implementa a execução de vídeo, é possível
utilizar um dispositivo de looping, que
pode manter o arquivo tocando constantemente ou
por um número definido de vezes. Para colocar uma
trilha sonora, a Microsoft criou o tag BGSOUND.
Pode-se incluir trechos de áudio nos formatos
WAV, AU ou MIDI.
<BGSOUND
SRC=som.wav LOOP=INFINITE>
Neste
exemplo, o arquivo de áudio som.wav será
executado constantemente até que o usuário
troque de página. Só depois que a página é
carregada que o som começa a tocar. É possível
também fazer com que o som seja tocado por um número
determinado de vezes. Exemplo:
<BGSOUND
SRC=som.wav LOOP=5>
No
exemplo acima, o arquivo som.wav será
executado cinco vezes.
Marca
d'água
No
Internet Explorer pode-se controlar o
comportamento da imagem de fundo, o background.
A empresa criou um atributo para o tag <BODY>
chamado BGPROPERTIES. Com a opção BGPROPERTIES=FIXED,
a imagem de fundo fica fixa quando o usuário rola
o texto para cima. O recurso dá a impressão da página
ter uma marca d'água e de que o texto flutua
sobre o fundo.
<BODY
BACKGROUND=fundo.gif BGPROPERTIES=FIXED>
|
