Dynmenu, introdução aos menus dinâmicos com DHTML  
Guia Ficheiros Imagens Extras Contacto
 
english
 

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:

  1. O texto é mais espaçado do que se usa no papel pois a leitura on-line é mais cansativa do que a leitura impressa.
  2. 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.
  3. O texto está dividido em secções curtas e bem delimitadas de modo a que os visitantes possam navegar no conteúdo mais agilmente.
  4. 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.
  5. 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
Home, Inicio  → WEB DESIGNJAVASCRIPT, DHTML
Escrito em Outubro 2003. inicio da página