Artículo Fireworks

La verdad sobre los menús emergentes en Fireworks 8

A los que siguen las publicaciones en los foros de Fireworks quizá les suene mi nombre. Supongo que me he ganado una reputación como enemigo del uso del menú emergente original de Fireworks tal y como se implementó en Macromedia Fireworks MX 2004 y versiones anteriores. Estoy aquí para decirles que tienen toda la razón. En mi opinión, hay bastantes razones para no usar esos menús emergentes, y he invertido un tiempo considerable en publicar mis comentarios en este sentido.

Entonces, ¿por qué escribo este artículo? Porque tengo los siguientes objetivos:

• Quiero decirle al equipo de Fireworks que agradezco el esfuerzo que ha dedicado a crear este nuevo sistema de menús.
• Quiero decirles a ustedes que ya no voy a aburrirles más con mis habituales mensajes en contra del uso de este sistema de menús.
• Tengo la esperanza de que el equipo de desarrollo de Dreamweaver tenga en cuenta estos comentarios y se centre en la característica de menú emergente para futuras versiones de dicho programa.

Para ir al grano, les diré que estoy satisfecho de que esta característica se haya mejorado notablemente en Fireworks 8.

En este artículo describo brevemente la creación de un menú de diversos modos. Examinaré y disertaré sobre el formato creado por Fireworks listo para ser importado a Dreamweaver, al tiempo que describiré lo que creo que podrían ser útiles mejoras a tener en cuenta en el formato resultante.

Requisitos

Para completar este tutorial, deberá instalar el software siguiente:

Fireworks 8

• Probar
• Comprar

Dreamweaver 8

• Probar
• Comprar

Conocimientos previos

Algo de soltura en HTML y CSS, además de experiencia previa con los menús emergentes de Fireworks.

Creación de un menú emergente

Aquellos usuarios que hayan empleado la función de menú emergente en versiones anteriores de Fireworks se sentirán como en casa con la nueva. El panel de configuración y el cuadro de diálogo son idénticos en Fireworks MX 2004 y Fireworks 8, ya que ofrecen exactamente las mismas opciones. Empleando esta función en Fireworks 8, puede crear conjuntos de menús visualmente agradables. Su atractivo es fácil de ver.

Para examinar los menús emergentes que crea Fireworks 8, deberá crear varios archivos extremadamente sencillos. Para el primero de ellos, abra Fireworks y seleccione Archivo > Nuevo para crear una página nueva (digamos que de 640 x 400 píxeles, por ejemplo). Seleccione la herramienta de texto e introduzca Link1 en algún lugar de la página.

Salga de la herramienta de texto y dibuje una división alrededor de Link1 (la mía la hice con una anchura de 41 píxeles y una altura de 23 píxeles). Selecciónela, asígnele el nombre link1button, utilice el ojo de buey de la división seleccionada para abrir el menú contextual y seleccione Añadir menú emergente del menú. Se abrirá un panel y hará que esta división muestre un submenú sencillo con una única opción. En este panel, introduzca Sub1-1 bajo el encabezado de columna Texto. No es necesario introducir un vínculo o un destino.

Ahora haga clic en el botón Siguiente para avanzar a la ficha Aspecto (o simplemente haga clic en la ficha), en la que podrá establecer que éste sea un menú vertical. Sin realizar ningún otro ajuste, el submenú se dibujará sobre la primera opción del menú, por lo que deberá avanzar a la ficha Posición y hacer clic en el icono de la segunda posición desde la izquierda. Deje el resto de parámetros de esta y otras fichas con sus valores predeterminados y concluya este menú haciendo clic en Listo. Guarde este archivo como singlebutton.png.

Obtenga una vista previa del menú seleccionando Archivo > Vista previa en el navegador y seleccionando a continuación el navegador deseado. Deberá ver un menú con un solo botón que, al pasar el ratón por él, abra un submenú de una sola opción.

Con singlebutton.png todavía abierto, ahora puede añadir más botones al menú. En este tutorial añadirá otros tres botones de menú y asignará a cada uno de ellos un submenú emergente sencillo. Para ello, anule la selección de la opción de divisiones visibles en las herramientas Capa de Web, haga doble clic en Link1 y añada a él Link2 Link3 Link4 (yo he dejado dos espacios entre los nombres de los vínculos).

Ahora salga del modo de texto, active la opción de divisiones visibles y seleccione la herramienta de división para añadir una división de dimensiones similares a las de link1button a cada una de las tres nuevas opciones del menú. Comenzando por Link2, asigne nombre a cada una de las nuevas divisiones empleando una nomenclatura similar a la empleada anteriormente: link2button, link3button y link4button. Una a una, seleccione las nuevas divisiones y utilice el ojo de buey para añadir un menú emergente con un submenú sencillo: Sub2-1, Sub3-1 y Sub4-1. Guarde esta nueva organización de menú como fourbutton.png.

Una vista previa en el navegador debería mostrar de nuevo el trabajo que ha realizado.

Importación del menú emergente a Dreamweaver

Ahora que ha creado dos menús (uno con un solo botón y un menú emergente sencillo y otro con cuatro botones, cada uno con un menú emergente sencillo), es el momento de importarlos a Dreamweaver y examinar el formato.

Abra singlebutton.png y seleccione Archivo > Exportar. Elija un sitio de destino para los archivos desde aquí (yo creé una carpeta llamada single y coloque en ella estos archivos). En el panel Exportar, asegúrese de que el campo Exportar está configurado con HTML e imágenes, que el campo HTML está configurado con Exportar Archivo HTML, que el campo Divisiones está configurado con Exportar divisiones y que la casilla de verificación Incluir áreas sin divisiones está activada.

Haga clic en el botón Opciones y seleccione su estilo de HTML y la extensión que prefiera. De las cuatro casillas de verificación de dicho panel de configuración de HTML, debe tener seleccionadas al menos las dos últimas (Usar CSS para los menús emergentes y Escribir CSS en un archivo externo). Haga clic en Aceptar para salir de este panel de configuración de HTML y del panel Exportar anterior para guardar los archivos.

Haga lo mismo para fourbutton.png (yo creé una carpeta llamada fourbutton y coloqué en ellas estos archivos). Ya ha creado todos los archivos necesarios para el resto de este tutorial. Para mí, este proceso obtiene los siguientes archivos pertinentes en la única carpeta (y los análogos en la carpeta fourbutton): singlebutton.html, singlebutton.css y mm_css_menu.js. Los archivos singlebutton se utilizarán para describir los detalles del menú y su construcción. Los archivos fourbutton permiten examinar el CSS necesario para este ejemplo ligeramente más "realista" o práctico.

El proceso de inserción de estos menús en Dreamweaver es exactamente el mismo que en las últimas versiones. Abra la página de Dreamweaver, sitúe el punto de inserción en el lugar en el que desea que se inserte el menú y seleccione Insertar > Objetos de imagen > HTML de Fireworks. En el resto de este tutorial examinará el código escrito por Fireworks para comprender cómo se crean estos menús y cómo funcionan. Utilizaré los archivos originales escritos por Fireworks 8 para esta explicación.

Observación del código

Una simple mirada al código HTML revela inmediatamente que estos menús son muy distintos a los que creaban las versiones anteriores de Fireworks. La diferencia más significativas es que los vínculos no se escriben en formato HTML simple en la página.

En Dreamweaver, he definido un sitio especialmente para este tutorial. La raíz de este sitio contiene las carpetas single y fourbutton. Para ver cómo crea Fireworks estos menús, deberá comenzar por lo más simple. Utilice la vista Código en Dreamweaver para ver el contenido de singlebutton.html en la carpeta simple. Debería ver lo siguiente (el formato se incluye más abajo):

• La página está vinculada a mm_css_menu.js, un mero vestigio de un archivo JavaScript de 80 líneas (comparado con el archivo mm_menu.js original) que contiene las funciones necesarias para mostrar y ocultar los submenús, así como para temporizar su aparición en pantalla.
• La hoja de estilos CSS se especifica con una regla @import incrustada que oculta los estilos de Netscape 4 y versiones posteriores.
• El CSS está vinculado a un tipo de medio de "pantalla" que lo oculta a impresoras u otros dispositivos.
• El menú y los submenús asociados se sitúan dentro de un contenedor div externo que llamaremos el "div del menú".
• El menú propiamente dicho es un punto de anclaje HTML estándar situado en una celda de tabla. Llamaremos a esta tabla la "tabla del menú".
• El submenú es en realidad una anidación de etiquetas div situadas en un contenedor div, ubicado en la parte inferior del formato del div del menú, debajo de la etiqueta de fin de la tabla y encima de la etiqueta de cierre </div>. Las anidaciones adicionales se realizan supuestamente para dar cabida a sistemas complejos con múltiples niveles de submenús.
• El submenú propiamente dicho está anidado dentro de un div contenedor que es específico de dicho submenú.
• En la configuración de los menús emergentes (en la ficha Aspecto), puede optar por utilizar HTML o imágenes para los vínculos de submenús. En este tutorial, hemos conservado los valores predeterminados (HTML). Por consiguiente, el submenú se crea a partir de un vínculo de texto sencillo, en este caso, "Sub1-1."
• Existe una nomenclatura establecida para identificar a cada uno de estos elementos: el div del menú, el div del contenedor del submenú y el div específico del submenú. Esta nomenclatura es un poco arcaica, como podrá observar.

El formato HTML saliente se muestra aquí (junto con mis adiciones y mostrando la convención de denominación adoptada para los divs):

<div id="FWTableContainer165705776"><!-- Este es el div del contenedor del menú externo -->
<table border="0" cellpadding="0" cellspacing="0" width="640"><!-- Esta es la tabla del menú -->
<!-- fwtable fwsrc="singlebutton.png" fwbase="singlebutton.gif" fwstyle="Dreamweaver" fwdocid = "165705776" fwnested="0" -->
  <tr>
<!-- Shim row, height 1. -->
...snip...
  <tr><!-- row 1 -->
...snip...
  </tr>
  <tr><!-- row 2 -->
   <td rowspan="2">...snip...</td>
   <td><a href="javascript:;" onMouseOut="MM_menuStartTimeout(1000);" onMouseOver="MM_menuShowMenu('MMMenuContainer0817151145_0', 'MMMenu0817151145_0',0,23,'link1button');"><img name="link1button" src="images/link1button.gif" width="41" height="23" border="0" alt=""></a></td><!-- Esta es la imagen del vínculo superior del menú (link1button) --> 
   <td rowspan="2">...snip...</td>
   <td>...snip...</td>
  </tr>
  <tr><!-- row 3 -->
   <td>...snip...</td>
   <td>...snip...</td>
  </tr>
<!--   Esta tabla se creó automáticamente con Macromedia Fireworks   -->
<!--   http://www.macromedia.com   -->
</table>
<div id="MMMenuContainer0817151145_0"><!-- Este es el div del submenú -->
   <div id="MMMenu0817151145_0" onMouseOut="MM_menuStartTimeout(1000);" onMouseOver="MM_menuResetTimeout();">
      <a href="#" id="MMMenu0817151145_0_Item_0" class="MMMIFVStyleMMMenu0817151145_0" onMouseOver="MM_menuOverMenuItem('MMMenu0817151145_0');">
         Sub1-1
      </a>
   </div>
</div>
</div>

La función del menú se controla mediante controladores de eventos aplicados a las diversas etiquetas </div>. ¡La lógica es extremadamente parecida a la lógica que empleábamos hace unos años cuando estos menús se creaban con líneas de tiempo DHTML! Al mover el ratón por encima del vínculo superior del menú, se muestra el submenú con una llamada a MM_menuShowMenu, mientras que al desplazar el ratón fuera de éste se inicia un temporizador interno. Cuando se acciona el primer temporizador, el submenú se cierra. Al mover el ratón por encima del div del submenú, se detiene el temporizador iniciado más arriba, con una llamada a MM_menuResetTimeout, mientras que al mover el ratón fuera de este div, se inicia de nuevo este temporizador.

El CSS de este menú se escribe de la siguiente forma:

• Una regla inicial que fuerza las imágenes de las celdas de la tabla con display:block. Se trata de una solución a la interpretación estricta de Netscape de la visualización en línea de imágenes con un espacio debajo para descendentes de texto en páginas sin un tipo de documento válido y completo.
• Una cascada de reglas que controla los estilos de diversos divs de menú y submenús y su contenido, como cabría esperar.
• Una position:relative para el div del menú. Esto permite la presencia de los menús dentro de una celda de tabla si es preciso, aunque utilicen una posición absoluta.
• Una disposición de modelo de cuadro para Internet Explorer anterior a IE6 en el submenú.
• Posición absoluta en el div del submenú para colocarlo, de la forma deseada, bajo el vínculo superior del menú.

Los detalles de las reglas del archivo CSS pueden obtenerse examinando los correspondientes archivos CSS generados por la exportación.

Para singlebutton.html, el archivo CSS tiene una longitud de 81 líneas. Para fourbutton.html, el archivo CSS tiene una longitud de 282; las líneas adicionales se necesitan para el estilo individual de cada submenú. Esto significa que los menús más complejos requieren archivos CSS más largos.

Me dejaría algo en el tintero si no dijera algo más sobre este esquema de denominación concreto. La nomenclatura para las ID de etiquetas div (de ahí sus selectores de reglas de estilos) es bastante críptica, además de voluminosa. Podríamos considerar los nombres de divisiones como una forma de simplificar estas ID, reduciendo así los requisitos de espacio para enumerarlas (no sólo en el selector de etiquetas de Dreamweaver, sino también en el código y CSS). Como usuario, puede que desee editarlos manualmente para hacerlos más legibles.

Además, la existencia de una opción para aplicar un estilo independiente a cada submenú (lo que viene impuesto por la interfaz de usuario de los menús, ya que cada submenú es una entidad independiente) parece ofrecer una gran flexibilidad, pero el precio a pagar por ello es muy elevado. El formato de la página, además de la nomenclatura del selector, es innecesariamente complicada para ofrecer esta flexibilidad. En mi opinión personal, este estilo extra para cada submenú es innecesario. El sistema de menús se vería enormemente beneficiado con esta simplificación.

En resumen, creo que el diseño de estos menús emergentes es relativamente estándar, si no avanzado. La mayoría de los sistemas de menús que se muestran, debaten y utilizan actualmente se crean a partir de un modelo de lista anidada en lugar de etiquetas de puntos de anclaje aisladas con acciones div para mostrar y ocultar. La ventaja real del enfoque anterior es la simplicidad de presentación cuando JavaScript no está disponible, además del formato semántico: las listas tienen un significado inherente no compartido por una serie de etiquetas de puntos de anclaje adyacentes. Personalmente, quisiera ver este enfoque como futura mejora de Fireworks.

El menú debería funcionar bien con plantillas de Dreamweaver y también debería ser modificado y depurado fácilmente por cualquiera que tuviera unos mínimos conocimientos de HTML/CSS. Los menús propiamente dichos son legibles mediante motor de búsquedas, aunque (al igual que muchos otros sistemas de menús) no funcionan si JavaScript no está activado.

Creo que, para terminar, es justo hacerlo con palabras de ánimo. Estoy esperanzado con la posibilidad de abrir un menú al "viejo estilo" y volver a guardarlo como menú CSS. Se trata de una cuestión crucial, en mi opinión, para todos aquellos que trabajan con menús anteriores completamente escritos en JavaScript. Estaré encantado de que esta inclusión se haga realidad.

Acerca del autor