Botones

Los usuarios de una página Web mueven el ratón por la pantalla o lo colocan sobre determinados puntos que llaman su atención. Cuando el puntero se transforma en una mano nos encontramos sobre un área activa. El usuario sabe, que actuando sobre esa área puede desencadenar acciones como saltar a otra página Web. Puede que la acción se desencadene automáticamente al pasar el ratón por encima (evento onMouseOver) o puede que se desencadene después de hacer clic en ese punto (evento onClick). De modo que tenemos eventos como: pasar el ratón por encima, hacer click, retirar el ratón o incluso, el evento cargar la página. Estos eventos actúan como detonantes de acciones como cambiar una imagen, saltar a otro punto de esa página o cargar otra página diferente. A este proceso, de mover el ratón  o hacer clic para desencadenar acciones, le llamamos navegar por la página. Conseguir que los usuarios de una página Web lleguen a otros destinos es crucial en el diseño. Hay diferentes soluciones para conseguir que un usuario pase de una página Web a otra o que la información cambie en determinadas zonas de la pantalla. Los elementos de navegación denominados rollover desencadenan acciones cuando el ratón pasa por encima de ellos. Otros elementos muy populares son los botones. Los botones se agrupan a veces formando una barra de navegación. Pueden tener dos o más estados diferentes según lo que haga el usuario, como pasar el ratón por encima del botón o hacer click sobre él. También son muy populares los menús emergentes como elemento de navegación.

Antes de continuar diremos que llamamossímbolo a un objeto que se almacena en una biblioteca. De esa forma tenemos el objeto disponible para utilizarlo en el documento. Arrastrando el símbolo desde la biblioteca se coloca en el lienzo. Lo que se coloca en el lienzo es una o más instancias del símbolo no el símbolo propiamente dicho que permanece en la biblioteca. La instancia está ligada al símbolo. Si se modifica el símbolo se modifican todas sus instancias. También es posible modificar una instancia sin que las modificaciones afecten al símbolo.

Cualquier objeto que tengamos en el lienzo se puede convertir en botón. Para ello hay que convertirlo en símbolo que se almacena en la biblioteca de símbolos. La biblioteca de símbolos está ligada al documento, es decir, cada documento tiene la suya, si bien es posible exportar o importar símbolos o incluso la biblioteca entera de un documento a otro. Por otra parte, Fireworks cuenta con una biblioteca de símbolos de botón ya diseñados, entre los que el usuario puede elegir. También es posible ampliar esa biblioteca con nuestros propios diseños.

Fireworks cuenta con un editor de botones. El editor permite manipular el botón de forma cómoda. Aunque los botones acaban en el documento una vez diseñados, no hay que confundir el lienzo con el editor de botones. El lienzo se utiliza para colocar y modificar objetos mientras que el editor cuenta con lo necesario para crear y modificar los botones. Una vez colocado el botón en el lienzo podemos moverlo pero no podemos por ejemplo cambiar los estados del botón. Eso se haría desde el editor de botones. Podemos citar las siguientes características de ese editor:

1. Puede convertir prácticamente cualquier gráfico u objeto de texto en un botón.
2. Puede importar otros botones ya creados.
3. Fireworks cuenta con una biblioteca de símbolos predefinida. Podemos considerar que un botón es un tipo especial de símbolo. Puede arrastrar uno de estos símbolos al documento. El objeto aparece entonces en el documento y se dice que es una instancia del símbolo. De este modo, si cambia el aspecto gráfico de un botón tiene la posibilidad de actualizar automáticamente el aspecto de todas las instancias del botón en una barra de navegación del documento.
4. También puede trabajar con una instancia del botón sin afectar al resto de las instancias del mismo botón y sin romper la relación símbolo-instancia.
5. Si arrastra la instancia de botón en el documento, Fireworks desplaza todos los componentes y estados asociados
6. Puede editar un botón de forma sencilla. Con un doble clic en la instancia situada en el lienzo podrá modificarlo en el Editor de botones o utilizando el Inspector de propiedades.

Estados de un botón

Un botón puede tener hasta cuatro estados diferentes. Cada estado representa el aspecto del botón en respuesta a una acción del ratón.

• El estado Arriba es el estado predeterminado. Es la apariencia del botón cuando el usuario lo ve por primera vez.
• El estado Sobre es el aspecto del botón al mover el puntero sobre él. Este estado avisa al usuario de que al hacer clic, es probable que se produzca una acción.
• El estado Abajo es el que corresponde al botón cuando se hace clic en él. A menudo se utiliza una imagen cóncava del botón para indicar que se ha pulsado. Este estado suele indicar la página Web actual, cuando tenemos una barra de navegación con varios botones.
• El estado Sobre y Abajo se presenta cuando se mueve el puntero sobre un botón que se encuentra en estado Abajo. Este estado de botón normalmente indica que el puntero está sobre el botón correspondiente a la página Web actual en las barras de navegación con varios botones. Es un estado de uso poco frecuente.

Con el Editor de botones puede crear todos estos estados, así como el área o división para la activación de la acción del botón. Es una forma muy rápida de crear botones. La mayoría de los botones utilizan lenguaje JavaScript para llevar a cabo su cometido. El editor crea automáticamente el programa JavaScript correspondiente sin que el usuario tenga necesidad de conocer este lenguaje.

El editor muestra cuatro fichas en forma de pestaña en la parte superior del Editor, que se corresponden con los cuatro estados del botón y el área activa. Además aparecen sugerencias que le ayudan a tomar decisiones de diseño para los cuatro estados de botón.

En este tema verá que puede utilizar diferentes técnicas para crear botones.

Creación de un botón de tres estados

Los botones más simples tiene dos estados: estado Arriba (sin pulsar) y estado Abajo (pulsado). En esta práctica haremos un botón de tres estados.

Paso 1. Preparar el objeto que convertiremos en botón

Como hemos dicho cualquier diseño puede servir. Incluso podemos importar uno ya preparado. Preferimos comenzar diseñándolo todo para que sirva de ejercicio. El diseño puede hacerlo directamente en el editor de botones, pero en este ejercicio, preferimos hacerlo directamente en el lienzo y luego convertir el objeto en símbolo de botón. Si lo hace con el editor, esta conversión a simbolo es automática. Si prefiere actuar desde el editor seleccione Edición > Insertar > Nuevo botón para abrir el Editor de botones.

1. Cree un lienzo blanco 200 x 50, resolución 72.
2. Haga clic en Ver > Ajustar todo para aprovechar mejor la pantalla.
3. Comience trazando un rectángulo y a la izquierda, trace otro con las siguientes características: An 110, Alt 25, posición X 22, Y 12. Trazo negro, 1 píxel tipo 1-píxel Hard. Relleno degradado lineal. Primer color #FEF2C2, segundo color #B08D00. Textura pergamino al 50%.
4. Dentro de él, a la izquierda trace otro rectángulo con las siguientes características: An 21, Alt 21, posición X 24, Y 14. Trazo color #ECE9D8, 2 píxeles tipo 1-píxel Hard. Relleno sólido color #ECE9D8. Textura 0%. Este objeto debe situarse por encima del rectángulo anterior en el panel Capas.
5. Trace una línea negra, An 1, Alt 22, X 46, Y 13, de 1 píxel tipo 1 píxel Hard y sin relleno. Este objeto debe quedar delante del anterior, en el panel capas.
6. Dentro del cuadradito de la iszquierda trace un polígono estrellado de 5 puntas, trazo color #ECE9D8, 2 píxeles tipo 1-píxel Hard. Relleno sólido color #ECE9D8. Textura 0%. Sitúe este objeto arriba en la capa.
7. Seleccione todos los objetos mediante una arrastre con el puntero y haga clic en Modificar > Agrupar. Observe que en el panel se indica que es un grupo de 4 objetos.

Paso 2. Convertir el objeto en símbolo

1. Haga clic en Seleccionar > Seleccionar todo o bien seleccione todo con un arrastre del puntero.
2. Haga clic en Modificar > Símbolo > Convertir en símbolo
3. En la ventana de diálogo que aparece seleccione Tipo botón. El nombre del símbolo es arbitrario, ponga boton1 por ejemplo. Haga clic en Aceptar.

Observe lo que ha ocurrido. El objeto que diseño parece ahora verdoso cuando lo selecciona. El icono en forma de flechita del ángulo inferior izquierdo indica que se trata de una instancia de un símbolo de biblioteca. Además aparece un tirador de comportamiento como corresponde a un objeto que tiene eventos y acciones asociadas.

Despliegue el panel Activos ficha Biblioteca y verá en la lista el símbolo tipo botón.

Paso 3. Editar el botón y preparar los estados

El siguiente paso es preparar los estados del botón desde el editor de botones. Ya hemos indicado que el editor se puede abrir seleccionando Edición > Insertar > Nuevo botón para abrir el Editor de botones. También puede abrirlo con doble clic sobre la instancia de un símbolo.

1. Despliegue de nuevo el panel capas. Haga doble clic sobre la instancia del botón para abrir el editor.
2. Observe que en la capa Web se ha creado una división para definir el área activa.
3. Observe que el editor tiene 4 fichas, una para cada estado y una ficha Área activa para la división.
4. Observe que el editor muestra en pantalla Instrucciones que le pueden ayudar y que tiene un botón Importar por si quiere importar un botón. Haga clic en Importar un botón y eche un vistazo a la lista de botones que ya existen en la biblioteca de Fireworks. Haga clic en Cancelar para no importar porque, como ejercicio, estamos utilizando nuestro propio diseño.
5. Preparemos el estado Arriba. Seleccione la herramienta texto, tipo de letra Impact Normal con un tamaño 18, color negro. Este botón lo queremos como botón Inicio en una página Web, por lo tanto, escriba la palabre Inicio. Centre el texto en el botón. Observe que el texto aparece en panel capas en la Capa 1.
6. Abra la ficha Sobre. Aparece vacía. En ella colocamos el objeto que se verá cuando el ratón pase por encima del botón. Utilizaremos el mismo objeto inicial con alguna modificación. Haga clic en Copiar gráfico arriba.
7. Seleccione el botón y desagrupe. Ahora es posible hacer cambios.
8. Cambie sólo la estrella del recuadro con un trazo color rojo #CC0000.
9. Una vez modificado seleccione todo y reagrupe.
10. Pase a la ficha del estado Abajo. haga clic en en Copiar gráfico Sobre. Observe que la casilla Incluir estado Abajo en Barrra Nav queda seleccionada por defecto. Este estado de botón es adecuado para los botones que van a formar parte de barras de navegación.
11. Seleccione y desagrupe. Los cambios que haremos son: Color #B08B00 para el trazo de la estrella y y relleno #CC0000 para el rectángulo pequeño. Utilice el panel Capas para seleccionar los objetos.
12. El cuarto estado no lo utilizamos en este ejemplo.
13. Haga clic en la ficha Área activa. Vea que, de forma automática, se ha añadido una divisón que cubre todo el botón y actuará como área activa.
14. Haga clic en Listo para cerrar el editor de botones.
15. Puede probar el botón desde Fireworks si hace clic en la pestaña Vista previa. Pase el ratón por encima y verá el cambio. Hga clic sobre el botón para probar el estado Abajo. También puede probar el botón en el navegador pulsando F12.
16. Guarde el trabajo co el nombre botoninicio.png.

La exportación de símbolos a otro documento o la importación la puede hacer mediante el botón de opciones del panel Biblioteca. Por ejemplo, para importar símbolos, siga los siguientes pasos:

• Abra el panel Biblioteca del grupo Activos.
• Haga clic en en el botón menú de opciones del panel.
• Seleccione Importar símbolos.
• Localice la biblioteca guardada y haga clic en Abrir.
• Aparece una ventana con la lista de símbolos. Seleccione uno o varios de ellos y haga clic en Importar.

También puede utilizar el menú: Seleccione Edición > Bibliotecas > Botones o bien Otras. Si selecciona Botones aparece la biblioteca predefinida de Fireworks, si selecciona Otras puede localizar otra biblioteca cualquiera guardada previamente.

Filtros de biselado para dibujar estados de un botón

Al aplicar cambios en la imagen para cada estado de botón, puede utilizar filtros automáticos para lograr interesantes efectos. Como ejemplo crearemos un botón de tres estados, con un filtro Bisel Elevado en el gráfico del estado Arriba, y el efecto Resaltado para el estado Abajo.

1. Cree un lienzo blanco de 200 x 50, resolución 72.
2. Haga clic en Edición > Insertar > Nuevo botón. Se abre el editor de botones con la ficha de estado Arriba.
3. Trace un rectángulo de 80 x 30. Color #990000, sin trazo, textura Gasa al 50%.
4. Añada un filtro bisel interior de 5 de anchura y elevado.
5. Pase al estado Sobre. Haga clic en Copiar gráfico Arriba. Una copia de la imagen anterior aparece en la ventana del editor.
6. Haga doble clic sobre el filtro y cambie la opción Elevado por Resaltado. El color se aclara.
7. Pase al estado Abajo y copie la imagen del estado anterior haciendo clic en Copiar gráfico Sobre.
8. Haga doble clic sobre el filtro y cambie la opción Resaltado por Hundido.
9. Haga clic en Listo y pruebe el resultado en Vista Previa y también con el explorador (Pulse F12).
10. Guarde el trabajo con el nombre botonbisel.png

Ejercicio - Botonera completa y exportación como biblioteca de Dreamweaver

La siguiente práctica utiliza lo estudiado sobre botones. Se introduce alguna novedad y se realiza un proyecto de botonera completo. Después se exporta la botonera como biblioteca de Dreamweaver. De esa forma podemos insertar la botonera en una página Web utilizando esta herramienta.

1. Cree un lienzo blanco de 800 x 100 (aunque el tamaño no es importante), resolución 72. Haga clic en Aceptar y luego en Ver > Ajustar todo.
2. Haga clic en Edición > Insertar > Nuevo botón. Se abre el editor de botones.
3. Dibuje un rectángulo de 110 x 25 y céntrelo. Trazo ninguno, color de relleno #00CCFF, textura Gasa al 50%, borde suavizado.
4. Añada un filtro bisel interior, de ancho 5, opción de estado Elevado.
5. Utilice la lupa si necesita ver mejor lo que hace. Escriba el primer nombre (Julia Álamo) con la herramienta de texto. Letra Arial, negra de 10 puntos. Centre bien el texto sobre el primer botón.
6. Pase el estado Sobre y copie el gráfico del estado Arriba. Haga doble clic sobre el filtro en el inspector de propiedades para modificarlo. Modifique el filtro para que la opción de estado sea Resaltado.
7. Pase el estado Abajo y copie el gráfico del estado Sobre. Modifique el filtro para que la opción de estado sea Hundido.
8. Haga clic en Listo para alir del editor. Observe que en el documento se ha insertado una instancia del botón.
9. Necesitamos 10 botones dispuestos en dos filas y separados 2 píxeles. Desplace el botón utilizando el teclado. Recuerde que el movimiento rápido se consigue al mantener pulsada la tecla de mayúsculas. Lleve el botón hacia la izquierda y arriba. Con la instancia seleccionada haga un clon (Edición > Clonar). Recuerde que el clon no lo ve porque queda encima. Desplace el clon a la derecha. Repita la operación hasta conseguir los 10 botones dispuestos como se indica en la figura.
10. Asegúrese de tener un buen alineamiento de los botones. Seleccione la fila superior y haga clic en Modificar > Alinear > Superior. Hágalo también con la fila inferior.
11. Cuando tenga los botones bien alineados y separados 2 píxeles, haga clic fuera del lienzo para tener en el inspector de propiedades el botón Ajustar lienzo. Haga clic sobre él y el lienzo se ajusta a la barra que ha diseñado.
12. Haga clic en Ver > Ajustar todo.
13. Para rellenar los huecos con una textura puede importar la siguiente imagen fondo.jpg. Ajústela para que rellene el lienzo y pásela a la parte baja de la pila de capas.
14. Aunque el nombre de los botones no es determiante es bueno no utilizar el nombre por defecto para poder reconocer las imágenes cuando se haga la exportación. Vaya seleccionando los botones y llámeles btn1, btn2, btn3, etc.
15. El siguiente paso es escribir la etiquetas de texto de los botones.
16. Utilice la casilla de texto del inspector de propiedades del segundo botón y modifique el nombre (Enrique Alhama). Cambie los demás nombres por los siguientes: Antonio Arribas, Javier Brihuega, Marcial Espinosa, Juan Manuel García, Fernando García, Teresa González, Cristeta Pérez-Beato, Gonzalo Pérez. El resultado lo puede ver en la figura.
17. Sólo falta poner un texto alternativo para cada botón y las URL para que funcionen los enlaces. Seleccione la primera instancia del botón. En el inspector de propiedades escriba en la casila Alt los dos apellidos y el nombre: Álamo Rodríguez, Julia. En la casilla Vínculo escriba: ../jualro/index.htm. Los dos puntos indican carpeta raíz.
18. Complete las demás instancias de acuerdo con la siguiente lista:

18. Ya tenemos la botonera completada. Sólo falta guardarla y exportarla. Guarde el documento con el nombre botonera.png. No cierre todavía Fireworks.
19. Para insertar la botonera en una página Web, utilizaremos una página ya construida. Bájese la carpeta dmat.zip y cópiela en su carpeta de trabajo. Descomprima la carpeta. Para ello, ábrala y verá que contiene una carpeta dmat con los archivos de la página Web. Cópiela y péguela en su carpeta de trabajo. Mire en la carpeta dmat y verá que tiene una página Web y carpetas auxiliares con otros archivos. Observe que hay una carpeta Library que de momento está vacía. Esa carpeta es el destino cuando exporte la botonera.
20. En Fireworks, haga clic en Archivo > Exportar. En la casilla Guardar en, busque y coloque la carpeta Library situada en dmat. En la casilla Exportar seleccione Biblioteca de Dreamweaver [.lbi]. Marque colocar imágenes en subcarpeta. Deje como nombre botonera.lbi. Haga clic en Exportar. Si mira en la carpeta Library verá una carpeta img con las imágenes de los botones y el archivo de biblioteca botonera.lbi.
21. Todo loque teníamos que hacer desde Fireworks ya está hecho. Ahora trabajaremos desde Dreamweaver. Abra Dreamweaver. Haga clic en el menú Sitio > Nuevo sitio. Ponga nombre al sitio. Por ejemplo dmat. Como carpeta raíz local del sitio tiene que buscar y colocar la carpeta dmat. Haga clic en Aceptar.
22. Abra el archivo dmat.html. En el panel Sitio, seleccione la pestaña Activos y haga clic en el icono Biblioteca. Aparece en la lista el archivo botonera.lbi que exportó anteriormente.
23. Arrastre la biblioteca botonera.lbi hasta colocarla delante de la palabra Bienvenido...
24. Como ve se ha insertado la botonera. Guarde la página y pruébelo desde Windows ejecutando la página dmat.html situada en la carpeta dmat. Pruebe la botonera.

Diseño de un botón sin usar el editor de botones

1. Cree un lienzo blanco 200 x 50 con resolución 72.
2. Haga clic en el lienzo con la herramienta de texto.
3. Configure las propiedades del texto: tipo de letra Lithograph, tamaño 12, color #666600, Ajuste entre caracteres o separación 7. Escriba un texto para el botón, por ejemplo: Enrique Alhama.
4. Observe que el texto se sitúa en la Capa 1. Despliegue el panel fotogramas. La imagen se sitúa sobre el fotograma 1. Seleccione Fotograma 1. Haga clic en el botón de opciones del panel Fotogramas. Haga clic en Duplicar fotogramas para copiar la imagen en un Fotograma 2. Como el botón tendrá dos estados, no necesitamos añadir más fotogramas.
5. El siguiente paso es modificar la imagen del fotograma 2. El estado Arriba del botón mostrará la imagen del fotograma 1, el estado Sobre mostrará la imagen del fotograma 2. Seleccione Fotograma 2. Trace un rectángulo que rodee el texto, color #003366 con un trazo de 1 pixel duro y sin relleno.
6. Queremos tener sólo tres lados, así que cortaremos el lado inferior. Seleccione el rectángulo. Utilice la herramienta cuchilla para dar un corte horizontal (mantenga pulsada la tecla mayúsculas) por encima del lado inferior del rectángulo.Hhaga clic en la herramienta selección y seleccione la parte inferior del corte. Bórrela.
7. Si quiere ajustar la altura con precisión, seleccione lo que queda del rectángulo. Seleccione el puntero hueco o herramienta subselección . Manteniendo pulsada la tecla mayúsculas para hacer una selección múltiple haga clic en los puntos inferioresde los lados verticales. Con las teclas flecha arriba o abajo, ajuste la altura a 16 píxeles. Con esto hemos creado la imagen del estado Sobre del botón. Recuerde que está situada en el fotograma 2.
8. El siguiente paso es añadir una división para asociarle un comportamiento. Seleccione el rectángulo reducido a tres lados. Haga clic en Edición > Insertar > División rectangular. La división aparece en la capa Web del panel de capas. En el inspector de propiedades ponga nombre a la división, por ejemplo btn1.
9. Seleccione la división utilizando el panel Capas. Solo falta añadir el comportamiento. Abra el panel Comportamientos (Ventana > Comportamientos). Como diseñamos un botón sólo con estado Sobre utilizamos un Rollover simple. Ya sabe que este comportamiento conssite en una intercambio de imágenes cuando el ratón pasa por encima de la zona activa (onMouseOver). Haga clic en el botón añadir comportamiento  y seleccione Rollover simple.
10. Pruebe el diseño haciendo clic en Vista Previa o pulsando F12 para verlo en un navegador.
11. Guarde el trabajo con el nombre btnsobre.