Un completo curso de diseño gráfico, ilustración, diseño web y tipografía.

La navegación

Durante los primeros años de la web, el aspecto de las páginas era más bien gris (¡y no tan sólo porque el fondo fuera gris, que lo era!): pocas imágenes, siempre el texto en Times o Helvetica, una estructura de página y de navegación previsible. El hipertexto de la primera generación de páginas web era semejante al de la ayuda más simple que encontremos en Windows. En las webs actuales los diseñadores tienen una gran libertad y más recursos. Entre otras cosas, tienen numerosas opciones para diseñar la estructura de navegación de la web y pueden recurrir a los gráficos para guiar a los visitantes a través de las páginas, con una experiencia más rica y variada que con los simples hiperenlaces de texto.

Para establecer el sistema de navegación, debemos pensar mucho en la estructura de la web (o utilizar un programa que contemple esta posibilidad, como NetObjects Fusion.) Antes de hacer nada con el ordenador, es conveniente trabajar con lápiz y papel en el modelo de estructura: qué secciones incluirá, qué páginas dependen de cada sección... después podremos elegir el tipo de esquema de navegación más adecuado. Los programas que admiten un desarrollo visual de la estructura de una web son especialmente agradables de utilizar en esta fase, puesto que se puede crear el organigrama y mover las secciones y documentos a voluntad para hallar el esquema más lógico y de mayor usabilidad.

Uso de imágenes en el sistema de navegación

Las imágenes tienen un gran impacto dentro de las páginas web, no sólo como ilustración, sino también como un recurso que atrae la atención. Esta cualidad puede aprovecharse para emplear las imágenes como hilo conductor de la navegación en nuestro sitio web.

Como sucede con tantas cosas, el abuso en el empleo de cierto tipo de imágenes (sobre todo si son chillonas o animaciones vulgares) puede distraer en lugar de llamar la atención selectivamente. El diseñador tiene que elegir de forma sensible las imágenes apropiadas y dosificarlas con sensatez. Así, una imagen puede servir para dirigir la atención en los enlaces preferentes de la página, sin que sean necesarias explicaciones adicionales. Por ejemplo, si nos interesa que el visitante se dirija a una página donde tenemos las novedades, nada mejor que incluir una pequeña imagen para indicarlo.

Mapas de imagen.

mapa de imagen -ejemplo

Todos los navegadores actuales admiten los image maps o mapas de imagen para la navegación (como el de arriba de estas líneas o el que tenemos en la parte superior de esta página) . En su versión más simple, no son más que una imagen como la que tenemos al lado: presenta diferentes regiones que enlazan a distintas páginas. Estas regiones vienen definidas por unas coordenadas, y pueden tener forma rectangular, elíptica o poligonal, con las dimensiones que se especifiquen. Uno de estos mapas de imagen, ciertamente, se puede sustituir por imágenes parciales que enlazan con las correspondientes páginas. La ventaja del mapa, en este caso, está en que se trata de una imagen única y puede ser también más fácil sustituirla. Los mapas de imagen tienen muchas posibilidades creativas. Últimamente se han abandonado bastante, a favor de los efectos de mouseover o de Flash, así como menús desplegables, pero pueden resolver esquemas de navegación atractivos e imaginativos: pueden simbolizar diferentes partes de un edificio o partes de un cuerpo, un objeto, en una metáfora visual de la navegación a través de la web.

Por lo que respecta al diseño, una de las mayores ventajas del mapa de imagen es la independencia de las restricciones en el formato de la página. No es necesario limitarse a las pautas de colocación del texto y las tablas. Si creamos un mapa de imagen, cuidando el tamaño para que no sea excesivamente grande, tendremos una magnífica forma de establecer una navegación atractiva y original. Incluso si los visitantes tienen desactivada la carga automática de las imágenes -cosa que cada vez es menos frecuente- aunque se pierdan el atractivo visual de nuestro mapa, los enlaces seguirán siendo activos: como precaución, podemos incluir una etiqueta ALT en la imagen indicando que se trata de un mapa de imagen; además, con los modernos navegadores, al pasar por la región donde hay un enlace, aparece un mensaje que indica el nombre que hemos asignado a éste: podéis comprobarlo con nuestros ejemplos. Más detalles sobre los mapas de navegación en una página especial.

Los programas de gráficos para la web, como Fireworks, están especializados en la creación de elementos de navegación. Crear un botón como los del ejemplo es muy rápido y hay muchas opciones donde elegir.

Barras de navegación.

Las barras de navegación son probablemente el más utilizado sistema de navegación. Pueden consistir sólo en texto o también estar formadas por imágenes o botones. En este último caso, la barra de navegación se prepara inicialmente en el editor de imágenes, para después asignar los enlaces correspondientes. En este caso, de hecho, la barra de navegación puede sustituirse por un mapa de imagen.

También existen versiones más sofisticadas de las barras de navegación, con elementos desplegables, árboles de carpetas y páginas que se expanden, etcétera, como si se tratara de menús de un programa, y se pueden preparar mediante el uso de scripts de HTML dinámico,  de Javascript, con Java o Flash.

Crear una barra de navegación con un programa avanzado como Netobjects Fusion es sencillísimo, porque aplica el estilo elegido a las secciones de la web que le indiquemos, en forma de plantilla, y actualiza sin errores cualquier cambio que hagamos en la plantilla, los nombres de las páginas o su ubicación. El sistema es totalmente flexible y de una facilidad increíble. Si no utilizamos Fusion -u otro programa capaz de utilizar plantillas de esta manera- la solución obvia sería crear nuestra propia plantilla, que contenga los elementos fijos de la navegación que se repitan a lo largo de una sección. Para crear la plantilla si en programa no tiene una opción específica, simplemente creamos el modelo, y lo guardamos con un nombre tal como plantilla.html. Para crear las páginas a partir de esta plantilla, la abrimos, añadimos contenido y a la hora de guardar, en lugar de Guardar... (que sobreescribiría sobre la plantilla), elegimos Guardar como... y le damos un nombre diferente. La plantilla puede ser utilizada de nuevo para crear nuevas páginas que tengan una serie de partes constantes.

Mouseovers: imágenes alternantes

Un recurso que últimamente se utiliza mucho, tal vez demasiado -de forma innecesaria en la mayoría de casos- es el mouseover : el cambio de una imagen por otra en el momento en que el ratón pasa por encima. El efecto no sólo es estético, sino que de algún modo ayuda a saber en qué parte nos encontramos y que hemos encontrado un enlace. De todos modos, este efecto también tiene posibilidades creativas, y encontramos ejemplos de uso muy interesantes. Para crear un mouseover es necesario programar en JavaScript, o bien un editor visual de páginas web capaz de hacerlo: los editores avanzados, como Golive, Dreamweaver o Netobjects Fusion tienen esta capacidad, y definir el efecto es la simplicidad misma. Un editor básico como Frontpage Express o Composer es incapaz de crearlo (al menos hasta la versión 4-5) y aprender toda esta programación no vale la pena, a menos que nos dediquemos al tema profesionalmente. Si no se quiere gastar dinero y tener todo lo necesario para generar estos efectos (y muchísimas más cosas, como menús desplegables y mucho más) la solución existe en forma de freeware: First Page 2000. Este magnífico programa incluye un módulo especializado en la creación de imágenes de mouseover; si se quiere se puede generar todo el código y después copiar y pegar dentro del editor de páginas que usemos normalmente. Una forma alternativa de manejar los mouseovers es un efecto que hace cambiar, además otra imagen. Este efecto tiene muchas posibilidades. Puede servir para mostrar información que permanece oculta hasta que con el ratón pasamos por encima de un botón que enlaza a una determinada página o sección. Así, en la página puede haber más información de la que aparenta al cargarse, información que se va desvelando a medida que cambiamos de posición el ratón. Nos sirve para examinar de una forma interactiva y entretenida aquello que nos ofrece la web que visitamos. Es una posibilidad interesante y abierta a la experimentación; con frecuencia nos encontramos atractivas aplicaciones del truco (por ejemplo, en la portada de efuse.com.)

Efectos de rollover con CSS.

Finalmente, podemos crear efectos de mouseover sin imágenes, es decir, sólo con texto. Se puede conseguir utilizando hojas de estilo; ahora bien, el truco sólo funciona para Explorer v. 4 o 5. Netscape hasta la versión 4 no lo incorpora esta característica.

Mapas visuales  o textuales de la web.

Un mapa visual o textual, como sumario de todos los contenidos de una web, permite al visitante localizar rápidamente aquello que le interesa y ahorrarse viajes innecesarios a través del sitio. Cuando preparamos un mapa visual, es necesario que la estructura esté bien clara, y se vea bien qué secciones pertenecen a cada rama.

El mapa de la web suele figurar en una página aparte, dado que en un sitio de un cierto tamaño un esquema detallado puede llegar a ser considerablemente grande. Este mapa se puede crear en forma textual, en forma de índice, con una breve explicación de los contenidos, o bien de forma gráfica, utilizando un esquema de carpetas, o cualquier metáfora visual adecuada. Por ejemplo, para una página de una empresa de productos alimenticios, diferentes comestibles podrían representar las secciones correspondientes. Nuestra web dispone de un mapa - índice, generado automáticamente a partir de la estructura de la web. Si queremos un mapa de nuestra web sin tener que realizar todo el trabajo de escribirlo, existe un servicio gratis que lo creará para nosotros: http://www.freefind.com. Merece la pena visitarlo, porque también ofrecen otros servicios interesantes, como búsqueda por palabras o expresiones dentro de nuestras páginas. Alternativamente, podemos extraer los enlaces de las páginas e irlos pegando en una página que hará de índice. ¿Cómo extraer estos enlaces? Con un script gratuito que podéis encontrar en Dynamic Drive (http://dynamicdrive.com/dynamicindex5.)

Menús desplegables

Este tipo de elemento de navegación tiene la ventaja de ocupar poco espacio y a la vez contener una cantidad de secciones y subsecciones, organizadas de forma jerárquica. Se trata de desplegables al estilo de los utilizados en las aplicaciones de software. Existen varias formas posibles de crear este tipo de menús: con Flash, con un applet de Java  o con HMTL dinámico. Sin duda, los efectos más espectaculares y atractivos se pueden conseguir con Flash, pero el sistema no es ni mucho menos intuitivo o simple. El sistema más simple es utilizar un script ya preparado, que se puede obtener de sitios como www.dynamicdrive.com y adaptar los nombres de los botones y los enlaces correspondientes a las necesidades de nuestro propio proyecto.