| |
 |
Além da introdução dos menus
dinâmicos, este guia cobre características que são
ilustradas no guia e discutidas nesta secção.
|
| |
Imagens roll-over |
| |
Os events associados às imagens de roll-over
usam o event handler onMouseOver, embora de
uma forma menos comum: enquanto a maior parte dos programadores
o usa dentro da definição do link, <A
HREF="....html">, eu uso-o dentro da definição
da imagem <IMG SRC="....png"> para
tirar partido da possibilidade de passar o handler do objecto
IMG directamente para a função imgOver(imgHndl);
deste modo não é necessário qualquer tipo de
nome ou índice para o objecto IMG pois ele está disponível
a partir do seu handler.
Para mudar a propriedade source (SRC="...")
da imagem, basta adicionar/retirar o sufixo "ov" do nome
do ficheiro, se a convenção mencionada em Funções:
dm_func.js tiver sido seguida.
O handler onMouseOut é necessário para
repôr a imagem na sua condição normal, assim
que o ponteiro saia de cima dela. A função imgOver(imgHndl)
retira o sufixo "ov" do nome da source (SRC="...")
da imagem.
Se o leitor usar imagens nos menus, deverá incluir um event
handler onMouseOver dentro de <A HREF="....html">
para mostrar os menus dinâmicos e um par de onMouseOver,
onMouseOut dentro de <IMG SRC="....png">
para trocar a imagem de roll-over.
Uma forma alternativa de obter um efeito roll-over usa as definições
das StyleSheet para alterar as propriedades de um link quando
um ponteiro passa por cima dele. O código abaixo cria um
efeito de roll-over em links de texto inseridos nos
elementos <TD class="tab"> e <TD
class="tabm">.
td.tab a { color: #ffffff; text-decoration: none; }
td.tab a:hover { color: #000000; }
td.tabm a { color: #ffffff; text-decoration: none; }
td.tabm a:hover { color: #000000; }
O leitor deve ser cuidadoso com as propriedades que altera, pois
uma mudança exagerada pode alterar a paginação.
Por exemplo ,
td.tabm a:hover { color: #000000; font-size: xx-large; }
desencadeará resultados inesperados - para dizer o mínimo.
Esta solução é menos rica do que as infinitas
possibilidades das imagens de imagens de roll-over, mas é
mais simples, mais rápida de implementar e modificar e não
requer a descarga (download) de ficheiros adicionais do servidor
de Internet.
|
| |
Paginação |
| |
A paginação deste guia é muito simples e privilegia
a leitura no écran (tela). Se o leitor gostar dela, pondere
as regras seguintes ao desenhar o seu sítio:
- O texto é mais espaçado do que se usa no papel
pois a leitura on-line é mais cansativa do que a
leitura impressa.
- Há uma margem esquerda em branco para que os olhos possam
descansar enquanto percorrem a página. Em alguns casos,
acrescento também uma margem direita.
- O texto está dividido em secções curtas
e bem delimitadas de modo a que os visitantes possam navegar no
conteúdo mais agilmente.
- A paginação tira partido de toda a largura do
écran (tela): se tiver um monitor pequeno, terá
que usar "desenrolar" as páginas, mas se tiver
um monitor grande o texto estende-se até à margem
direita; seria ineficiente usar uma largura fixa que obrigasse
os visitantes a percorrer longas páginas enquanto uma grande
faixa à direita permanecia vazia.
Na literatura anglo-saxónica isto é frequentemente
definido como "liquid layout", pois tal como os líquidos,
toma a forma do recipiente.
- Há poucas imagens "decorativa" - de facto apenas
uma por página - para minimizar o tempo de acesso e reduzir
a distracção dos utilizadores que procuram este
guia por causa dos menus dinâmicos e não das imagens.
|
| |
Tamanho das letras |
| |
A possibilidade de mudar o tamanho das letras é a característica
porventura mais incompreendida dos browsers. Muitos web designers
rejeitam-na e a maioria dos outros ignora-a. Não obstante,
julgo que o leitor deveria acolher esta característica pois
ela é essencial para os utilizadores com dificuldades visuais.
A possibilidade de fixar o tamanho das letras apareceu com as StyleSheets
mas, mesmo antes disso, alguns web designers usavam imagens em vez
de texto para poderem escolher o tipo de letra, o tamanho e outros
atributos, independentemente das preferências dos utilizadores.
Reconheço que o web design é um trabalho criativo
e que o autor deve ter a possibilidade de definir o seu trabalho,
incluindo a apresentação dos textos. Por analogia,
o utilizador não pode mudar o aspecto dos textos numa revista
em papel ou na sua televisão. Se tiver dificuldades, terá
de comprar uma televisão maior.
Sem embargo, o facto de na Web existir a possibilidade de aumentar
ou reduzir as letras deve ser encarado como uma vantagem e não
uma contrariedade. Ao bloquear o tamanho das letras, força-se
o utilizador a reduzir a resolução do écran
- se tal fôr possível - quando está diante de
um sítio com letras pequenas demais. Ou então, o utilizador
sente-se convidado a ir embora...
Este guia usa uma forma de definição de fontes (tipos
de letra) que permite alterar o tamanho das letras. Infelizmente,
os diversos browsers interpretam as definições das
fontes de maneira diferente:
- Internet Explorer 6
- A definição em pixels,
font-size: 14px;
, fixa o tamanho da letra, enquanto a definição
em pontos, font-size: 14pt; , permite mudá-lo.
- Netscape Navigator 7 (and Mozilla)
- A definição em pixels,
font-size: 14px;
, ou em pontos, font-size: 14pt; , permite mudar
o tamanho da letra, mas o grau de mudança é diferente.
|
| |
Fundos transparentes |
| |
Usar fundos transparentes ou semitransparentes com menus dinâmicos
é normalmente má ideia, excepto que se possa controlar
o conteúdo da secção <BODY>...</BODY>,
localizado sob os menus.
Tentei ilustrar este problema nos menus de "Imagens e "Extras"
(experimente passar o ponteiro do rato sobre estes menus):
- Fundo transparente
- No menu das imagens, o fundo da entrada sob o ponteiro é
transparente. Este efeito não pretende desacreditar os
menus baseados em imagens, pois é igualmente possível
com menus baseados em texto.
Tal como o leitor pode ver, é mais difícil ler as
linhas do menu com o fundo transparente e a última linha
é quase invisível em resultado do fraco contraste.
Por esse motivo, só usei os fundos transparentes nas imagens
"ov" (ver imagens Roll-over) para
assegurar alguma legibilidade.
- Fundo semitransparente
- No menu "Extras", o fundo da tabela é formado
por um padrão em xadrez, com 50% colorido e 50% transparente.
Este fundo é mais legível do que o fundo transparante,
mas o conforto de leitura continua diminuído sem quaisquer
ganhos aparentes.
Apesar destas desvantagens, usei o efeito dos fundos semitransparentes
num sítio em que a beleza era o critério mais importante.
No meu álbum de fotografias
da Bélgica usei menus dinâmicos com fundos semitransparentes
mas tive de aumentar o tamanho das entradas dos menus para assegurar
a legibilidade. No mesmo álbum usei fundos transparentes
para as setas de navegação, mas neste caso os símbolos
são claros e ocupam um lugar fixo na página.
|
| ©2003 João Gomes Mota |
|
|