|
(Alguno de los ejemplos sólo funcionan en Internet Explorer)
- Botones
- Äreas de trabajo
- Variaciones en los textos
- 4.1 Barra de Opciones con Rollover: Con frecuencia no precisamos un menú multinivel que responda a una arquitextura de contenidos compleja.
De hacho, siempre que sea posible y las opciones de navegación no sean muy numerosas suele ser recomendable usar estructuras planas de navegación (de un único nivel): para el usuario son muy usables ya que tiene todas las opciones a la vista y repentiza fácilmente las posibilidades de que dispone.
En casos de este tipo, una barra horizontal o vertical de navegación es idónea para dirigir el movimiento del usuario en el site. Una forma de implementarlas de una forma sencilla y atractiva haciendo uso de Hojas de Estilo es la presentada en nuestra sección de Usabilidad en flashes:
Lo no recomendable Accesibilidad Uso de imagenes Testing de Usabilidad
Con una sencilla función Javascript que realice el rollover sobre las celdas de opciones de la tabla de navegación y 2 clases de estilo (una para la barra, una para las opciones en estado de reposo y otra para las opciones en estado de activación), más las pseudo-clases de los hiperenlaces tendremos una agradable barra de navegación:
Las clases de estilo para las celdas de la tabla de navegación las hemos diseñado de la siguiente manera:
.recomendRelated {background: #F2F0F0;padding: 5px;border-right: 1px solid #7E2E3C;border-bottom: 1px solid #7E2E3C;border-left: 0px solid #BFA3A8;border-top: 0px solid #BFA3A8;}
.recomendOnRelated {background: #F2F0F0;padding: 5px;border-right: 0px solid #9F9398;border-bottom: 0px solid #9F9398;border-left: 1px solid #9F9398;border-top: 1px solid #9F9398;}
Las pseudo-clases para los hiperenlaces son tan sencillas como::
a.Related:link {font-size: 10px;color: #000000;text-decoration: none;font-weight:normal;font-family: verdana,arial,helvetica;sans-serif;}
a.Related:hover {font-size: 10px;color: #C21000;text-decoration: none;font-weight:normal;font-family: verdana,arial,helvetica;sans-serif;}
a.Related:active {font-size: 10px;color: #000000;text-decoration: none;font-weight:normal;font-family: verdana,arial,helvetica;sans-serif;}
a.Related:visited {font-size: 10px;color: #000000;text-decoration: none;font-weight:normal;font-family: verdana,arial,helvetica;sans-serif;}Y la función Javascript que realiza el rollover sobre las celdas de la tabla de navegación (y además lanza la página enlazada) es:
var pulsada=new Array();
function buttonMenu(id,classe,ev)
{
if (ev==0)
{
if(pulsada[0]!=id) document.getElementById(id).className=classe;
}
else if(ev==1)
{
if(pulsada[0]!=id) document.getElementById(id).className=classe;
}
else
{
if(pulsada[0]!=id&&pulsada!='') document.getElementById(pulsada[0]).className=pulsada[1];
pulsada[0]=id;
pulsada[1]='recomendRelated';
document.getElementById(id).className=classe;
}
}Aunque esta función utilizada realmente hace más cosas, pero en lo que respecta al cometido que se pretende realmente lo cumple, y de momento lo vamos a dejar aquí.
Finalmente, el código HTML para cada celda es:
<td class="recomendRelated" id="4" title="Recomendaciones sobre Técnicas de Testing de Usabilidad" onMouseOver="buttonMenu(4,'recomendOnRelated',1)" onMouseOut="buttonMenu(4,'recomendRelated',0)" onClick="buttonMenu(4,'recomendOnRelated',2);Launch('tecUseSummary.htm')"> <a class="Related" href="tecUseSummary.htm"> Testing de Usabilidad</a></td>
- 4.2 Barra de Opciones con Rollover y Opción Seleccionada: Este segundo caso que presentamos es muy similar al anterior pero presenta algunas mejoras.
No sólo activaremos la celda sobre la que pasa para el ratón y al "clickar" lanzará el hiperenlace asociado, sino que además utilizaremos una tercera clase de estilo para un nuevo estado de la celda: el que nos indicará que hemos hecho click sobre la misma.
Esta metodología es especialmente útil para barras de navegación que enlazan a ubicaciones internas dentro de la página, ya que en cualquier momento aporta información al usuario de cuál fue la última opción seleccionada pues ésta permanece activada en el mapa de opciones.
Una de estas barras de navegación la hemos implementado de una forma sencilla y atractiva en nuestra sección de Sitios Útiles
Artículos Directorios Hojas de Estilo Diseño Scripts Shareware & Freeware
Con una sencilla función Javascript que realice el rollover sobre las celdas de opciones de la tabla de navegación y 4 clases de estilo (una para la barra y 3, una para cada estado de las celdas de navegación), tenemos solucionada la funcionalidad deseada:
En primer lugar diseñamos la clase de fondo de la Barra de Navegación:
.toolsBarArea {background:#D4D0C8;border: 2px groove #F3EFE7;}
A continuación tendremos las 3 clases de estilo para las celdas de la tabla de navegación para los 3 estados que estas pueden adoptar:
.toolsBarOff {background:#D4D0C8;color:#000000;border: 2px outset #F3EFE7;font-weight: normal;font-size: 10px;text-align: center;padding: 1px 3px;font-family: arial,helvetica,sans-serif;}
.toolsBarOn {background:#D4D0C8;color:#000000;border: 2px inset #F3EFE7;font-weight: normal;font-size: 10px;text-align: center;padding: 1px 3px;font-family: arial,helvetica,sans-serif;}
.toolsBarOver {background:#F4F0E8;color:#000000;border: 2px inset #F3EFE7;font-weight: normal;font-size: 10px;text-align: center;padding: 1px 3px;font-family: arial,helvetica,sans-serif;}
Y la función Javascript que realiza el rollover sobre las celdas de la tabla de navegación (y además lanza la página enlazada) es:
var pulsada=new Array();
function toolsBar(id,classe,ev)
{
if (ev==0)
{
if(pulsada[0]!=id) document.getElementById(id).className=classe;
}
else if(ev==1)
{
if(pulsada[0]!=id) document.getElementById(id).className=classe;
}
else
{
if(pulsada[0]!=id&&pulsada!='') document.getElementById(pulsada[0]).className=pulsada[1];
pulsada[0]=id;
pulsada[1]='toolsBarOff';
document.getElementById(id).className=classe;
}
}Que es el mismo código que el mostrado en el caso 4.1 Barra de Opciones con Rollover. Esta función nos permite, además del rollover de celdas, "recordar" cual fue la última opción pulsada, e inhibir para esta la funcionalidad de rollover.
Finalmente, el código HTML para cada celda es:
<td class="toolsBarOff" id="6" title="Shareware & Freeware" onMouseOver="toolsBar(6,'toolsBarOn',1)" onMouseOut="toolsBar(6,'toolsBarOff',0)" onClick="toolsBar(6,'toolsBarOver',2);Launch('#shareware')"> Shareware & Freeware</td>
- 4.3 Menú Dinámico Multinivel: La especificación CSS2 provee una forma de asociar sombra al texto, mediante la propiedad:
Si además utilizamos layers y algo de Javascript para controlar la:visibilidad de las capas, podemos crear Menús Dinámicos con el número de subniveles de navegación que deseemos. A continuación mostramos un ejemplo de esto.
(El código que muestra y oculta las capas sólo está montado para la opción Discos y en el submenú correspondiente para la opción Bandas sonoras (y con limitaciones), ya que un desarrollo exahustivo pertenecería más a un capítulo sobre Javascript/DHTML):
Artículos Discos Libros Videos y DVD's Informática Consumibles Oficina Informática En primer lugar definimos las siguientes clases de estilo para implementar contenedores, opciones de menú de 1º nivel, de 2º, de 3º...
.rightArea2Table {table-layout: fixed;background: #1D4C55;padding: 3px;border: 2px outset #AAD9E2;}
.rightArea2Header {background-image:url(../images/rightArea2Bg.gif);background-repeat:repeat-x;heigth: 12px;color:#1D4C55;border: 1px solid #FFFFFF;font-size:10px;font-weight: bold;font-family:verdana, arial, helvetica, sans-serif;}
.rightArea2Content {background: #8FA1A4;color:#F3F6F6;padding: 1px 5px;border-bottom: 1px groove #000000;font-weight:normal;font-size: 10px;text-decoration: none;font-family: verdana,arial,helvetica,sans-serif;}
.rightEj1Table {table-layout: fixed;background: #003366;border: 1px solid #FFBB00;}
.rightEj1Content {background: #5577AA;color:#FFFFFF;padding: 1px 5px;font-weight:normal;font-size: 10px;font-family: verdana,arial,helvetica,sans-serif;}
.rightEj2Table {table-layout: fixed;background: #EE9900;border: 1px solid #BB0055;}
.rightEj2Content {background: #FFCC00;color:#003366;padding: 1px 5px;font-weight:normal;font-size: 10px;font-family: verdana,arial,helvetica,sans-serif;}
a.right2ALaunch:link {color:#FFFFFF;font-weight: normal;font-size:10px;text-decoration: none;font-family: verdana, arial,helvetica,sans-serif;}
a.right2ALaunch:hover {color:#FFFFFF;cursor: hand;font-weight: normal;font-size:10px;text-decoration: underline;font-family: verdana, arial,helvetica,sans-serif;}
a.right2ALaunch:active {color:#FFFFFF;font-weight: normal;font-size:10px;text-decoration: none;font-family: verdana, arial,helvetica,sans-serif;}
a.right2ALaunch:visited {color:#FFFFFF;font-weight: normal;font-size:10px;text-decoration: none;font-family: verdana, arial,helvetica,sans-serif;}
a.right3ALaunch:link {color:#000000;font-weight: normal;font-size:10px;text-decoration: none;font-family: verdana, arial,helvetica,sans-serif;}
a.right3ALaunch:hover {color:#000000;cursor: hand;font-weight: normal;font-size:10px;text-decoration: underline;font-family: verdana, arial,helvetica,sans-serif;}
a.right3ALaunch:active {color:#000000;font-weight: normal;font-size:10px;text-decoration: none;font-family: verdana, arial,helvetica,sans-serif;}
a.right3ALaunch:visited {color:#000000;font-weight: normal;font-size:10px;text-decoration: none;font-family: verdana, arial,helvetica,sans-serif;}
Cada uno de los contenedores de opciones (1º, 2º, 3º nivel...) le ponemos en una capa, y cada una de las capas tendrá una clase de estilo que utilizaremos para ubicar el contenedor en la pantalla y para hacerlo visible o invisible:
.ejAreas1 {position: relative;top: 2px;left: 5px;width: 130px;display: block;}
.ejAreas2 {position: relative;top: -120px;left: 95px;width: 105px;visibility: hidden;}
.ejAreas3 {position: relative;top: -175px;left: 170px;width: 90px;visibility: hidden;}
Cada uno de los contenedores de opciones (1º, 2º, 3º nivel...) es una tabla, y cada celda de la tabla una opción de navegación (obviaremos escribir toda la estructura, ya que puede comprobarse viendo el código de la página).
Asociamos a los eventos onMouseOver y onBlur de cada una de las opciones de menú una función que asignará el atributo visibility: hidden / visible a la capa que contiene el submenú correspondiente:
<a class="right2ALaunch" href="javascript: void(null)" onClick="activaLayer('layer2',1)" onBlur="activaLayer('layer2',0);activaLayer('layer1',0)"> Bandas sonoras</a>
La función que manejará el atributo visibility: hidden / visible de cada capa de menú / submenú será:
function activaLayer(id,opc)
{
document.getElementById(id).style.visibility=(opc==0)? 'hidden' : 'visible';
}Evidentemente, esta función será un poco más complicada, ya que deberá gestionar la aparición o no de un buen número de capas en función del lugar de la ventana del navegador dónde se haya hecho "click" y esto precisa algunas líneas de código más. Pero para coger la idea es suficiente.
Con un uso creativo de Hojas de Estilo:pueden crearse atractivos Menús de Navegación sin usar una sóla imágen, o usando alguna muy pequeña (de forma auxiliar) si somos muy perfeccionistas y pretendemos mayor creatividad gráfica.
 |
Botones | Äreas de trabajo | Textos | Menús | Barras de Herramientas | Posicionamiento de objetos | Ocultar objetos |  |
| WebUsable.com | © Todos los derechos reservados. |
|
