Capa
Seções
NOTÍCIAS

DOWNLOAD

ANÁLISES

COMPRAS

BOLETIM

WIRED NEWS

IDG NOW!

PC WORLD

AJUDA

COLUNISTAS


 digite + enter


CURSO BÁSICO DE HTML
Caíque Severo

Dicas e Truques

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.


Exemplo 23: o arquivo de imagem para ser usado como fundo

<BODY BACKGROUND=textura.gif>


Exemplo 24: colocando uma textura no fundo da página

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.


Exemplo 25: imagem preparada para ficar com fundo transparente


Exemplo 26: página com imagem com fundo transparente

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.


Exemplo 27: imagem sem anti-alias


Exemplo 28 imagem com anti-alias

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.


Exemplo 29: imagem sem anti-alias vista mais de perto


Exemplo 30: imagem com anti-alias vista mais de perto

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.


Exemplo 31: imagem preparada sobre o fundo definitivo


Exemplo 32: página com imagem com anti-alias e fundo

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>

» Mapas »

Introdução

Uma página Web simples

Melhorando a aparência

Hyperlinks

Imagens

Tabelas

Dicas

Mapas

Erros mais comuns

Exemplos de páginas Web

Tabela de acentos

Lista de tags

Cores
Copyright© 1996 - 2003 Terra Networks S.A. Todos os direitos reservados. All rights reserved.