CAPITULO 1.

En este curso trataremos de ir analizando ordenadamente las principales herramientas y sus aplicaciones bsicas, ms algunas pistas para trabajar eficientemente con Fireworks MX. Pero como primeramente necesitamos conocer el terreno sobre el cual vamos a trabajar, comenzaremos por la interface.

1. Interfase Cuando abras Fireworks te encontrars con un panorama ms o menos similar a este:

Hemos marcado cada una de las partes con colores diferentes para que puedas guiarte mejor: Barra de mens: es comn a todos los programas. A veces contienen opciones que no se encuentran en las herramientas que estn ms a la vista. Muchas de estas opciones las iremos viendo en el desarrollo del curso. Barra de herramientas: tambin es comn a todos los programas, y contiene las opciones de uso ms frecuente o necesario, tales como guardar, copiar, pegar, etc. "Canvas": es el rea de trabajo propiamente dicha. Paleta de herramientas: contiene las herramientas especficas de Fireworks de uso ms frecuente. Algunas de estas herramientas contienen dentro de s mismas otras opciones de uso. Las iremos viendo ms adelante. Paneles de control: estn agrupados a la izquierda y contienen opciones especficas para trabajar dentro de elementos ya creados en Fireworks. Barra de propiedades: cambia o se adecua al elemento que tengamos seleccionado, mostrndonos las propiedades que podemos cambiar de ese elemento.

En esta primera parte veremos slo las partes de la interface que incumben especficamente a Fireworks, y dentro de estas, las bsicas, como para comenzar a trabajar, ya que el resto las iremos viendo a medida que avancemos en la complejidad de los ejercicios.

1.1. Canvas:

El canvas es propiamente el rea donde trabajaremos, y para trabajo en web, que es el que realizamos propiamente con Fireworks, las medidas que utilizamos no son centmetros o pulgadas, sino pixels. Entonces tenemos: 1- Canvas ( el rea de trabajo) 2- Solapas de "vistas". La que dice "original" es donde trabajamos. Las otras son el "preview" de nuestros trabajos antes de exportarlos como gif, jpeg, tiff, o cualquiera de los formatos que usaremos posteriormente. Fjate que adems del Preview tenemos 2-UP

4UP

Esto es para ver 2 o 4 opciones ms de "preview", y elegir la que visualmente nos parezca ms apropiada. Obviamente, para esto, hacer falta haber desarrollado cierto "ojo" clnico. 3- El indicador del tamao de canvas que estamos utilizando, y si hacemos clic, nos indicar adems la resolucin en pixels que estamos utilizando.

4- El porcentaje de zoom con que estamos viendo. Haciendo clic se despliega un men con las distintas opciones de zoom disponibles.

CAPITULO 2.Paleta de herramientas Veremos en esta primera parte las herramientas bsicas para empezar a trabajar: Herramienta de seleccin: incluye tambin la herramienta de "subseleccin", que sirve para seleccionar elementos que estn "tapados" por otros cuando ests trabajando con muchos elementos. Herramienta para escalar: sirve para modificar proporcionalmente el tamao de los elementos. Las herramientas de Skew y Distort sirven para distorsionar la forma del elemento seleccionado. El Crop sirve para seleccionar un rea que ser cortada, y la herramienta que lo acompaa sirve para seleccionar unrea determinada y exportarla independientemente del resto de una imagen. Las herramientas de Marquee sirven para seleccionar un rea determinada de la imagen, ya sea para coparla, ya sea para trabajar en ella sin modificar el resto de la imagen. Las herramientas de Lasso y Polygon Lasso son variantes de Marquee, y sirven para seleccionar reas a mano alzada o poligonales respectivamente. La herramienta Paint Bucket es simplemente la herramienta de relleno, y su variante, la Gradient Tool, es para rellenos degradados. Las opciones de ese degradado se configuran luego desde el panel de propiedades. La herramienta Pen sirve dibujar elementos con slo hacer clic y trazar sus lados. Esta acompaada por la Vector Path, que sirve para trazos de distintos tipos (bamb, cinta, aergrafo, etc); y la Redraw Path Tool, que permite redibujar o agrandar un dibujo, conservando las caractersticas de trazo o configuracin.

Bueno, es obvio que estas herramientas son para dibujar distintas formas.

Eraser Tool: para borrar. Brush Tool: para dibujar trazos. Line Tool: para dibujar lneas rectas. Pencil Tool: para dibujar lneas a mano alzada Subselection Tool: para trabajar con los nodos de trazos vectoriales. Text Tool: herramienta de texto. Herramienta de bordes. Herramienta de relleno.

1.3. Barra de Propiedades.

No la describiremos en detalle aqu porque cambia constantemente, segn el elemento que tengamos seleccionado.

1.4. Paneles colapsables. Respecto a ellos tampoco haremos una descripcin detallada en esta primera parte ya que tienen muy diversas funciones que iremos recorriendo a lo largo de este curso. Bstenos saber el modo de manejarlos. Los puntos que estn encerrados en el crculo amarillo forman el rea desde la cual, haciendo clic y sin soltar el mouse, podemos arrastrar el panel fuera del rea donde se encuentra, y dejarlo "flotante" en cualquier lugar de la pantalla. Fjate ahora en las reas encerradas en el crculo verde. En el panel de "Optimize" la flecha indica hacia abajo, y es porque el panel est desplegado. En el panel de "Colors" y en los dems, la flecha indica hacia el costado porque los paneles estn "colapsados" o cerrados. Haciendo clic en estas rea

CAPITULO 3. Tratamiento de imgenes: Siguiendo con el tema de los efectos sobre los objetos de la clase anterior, famos a finalizar aprendiendo una utilidad sumamente provechosa que trae Fireworks. Supongamos que hemos trabajado durante un lapso de tiempo prolongado, buscando una textura especfica para nuestro emprendimiento grfico: A la figura del ejemplo le hemos puesto: 1. Un Drop Shadow de 10 2. Color slido verde, Textura Oilslick a 86 Pues bien, supongamos que logramos esta apariencia despus de mucho probar, y la necesitaremos frecuentemente. Pues para no tomarnos el trabajo de configurar cada figura cada vez que la hagamos, podemos guardar esto como un estilo: Si no lo tenemos, abrimos el panel de estilos con Window>Styles. Teniendo cuidado de tener seleccionada la imagen en la que trabajaste los efectos, haces clic en el botn New Style (que est marcado), y te aparecer esta ventana: Aqu definimos: 1. Name: el nombre del estilo nuevo que queremos crear. 2. Properties: tipo, color y efectos, tanto de los rellenos como de los bordes. El resto de las opciones que aparecen desmarcadas son utilizadas para cuando trabajamos con texto. Le damos OK y ya tenemos el nuevo estilo incorporado al panel de estilos: La prxima vez que quieras usarlo, slo debes seleccionar la forma a la que deseas aplicar el estilo, luego hacer clic en el estilo que quieras. Y por ltimo debemos ver las herramientas que nos permiten modificar las formas que creamos. En principio tenemos la herramienta para escalar . Seleccionando la forma que deseamos modificar, hacemos clic en esta herramienta y tendremos lo siguiente: 1. Los nodos que aparecen en los vrtices sirven para modificar el tamao de la imagen proporcionalmente, tanto en alto como en ancho. Los nodos de los lados sirven para modificar el tamao, o del alto de la figura (los nodos de los lados superior e inferior); o del ancho de la figura (los nodos de los lados izquierdo y derecho. Si paseamos el mouse por los contornos de la figura veremos que en algn punto el puntero se transforma en una flecha circular. Es entonces cuando podremos "rotar" la figura. El punto marcado como 3, es el centro de rotado. Se puede llevar a cualquier lado de la figura, y siempre actuar como el punto de referencia del rotado de la figura.

2.
3.

Recordemos tambin que dentro de la Scale Tool tenemos tambin otras dos

herramientas:

que nos sirven para distorsionar las imgenes.

3. Tratamiento de imgenes: 3.1. Importacin de imgenes: Para importar las imgenes a un canvas ya definido seguimos los siguientes pasos: 1. Hacemos clic en el botn de importar y seleccionamos la imagen que vamos a llevar al canvas.

2. 3. 4.

Pueden ocurrir dos cosas: que la imagen sea menor que el canvas y deseemos trabajar con el canvas a medida, o bien que el canvas sea ms pequeo que la foto. En ambos casos hay que readaptar ambos: la foto y el canvas. En el primer caso (la foto o imagen ms pequea que el canvas), utilizamos Modify>Canvas>Trim Canvas. En el caso contrario (en que la foto es mayor que el canvas), utilizamos Modify>Canvas>Fit Canvas.

3.2. Tratamiento de imgenes: Ahora que tenemos nuestra imagen, debemos empezar a tratarla para lograr la mayor calidad y el menor "peso" posible en KB (no olvidemos que estamos trabajando para web, en donde es importante que haya poco peso, es decir, la menor cantidad posible de bytes). Lo primero que debemos hacer es obtener, visualmente, nuestro "producto final". Es decir, con todas las modificaciones o efectos visuales que vayamos a necesitar. Para esto Fireworks tiene varias herramientas, de las cuales te mostraremos algunas. la imagen que utilizaremos es un cuadro llamado "Columpio", del pintor francs Fragonard. Los dos primeros efectos son Blur y Sharpen (paleta de herramientas), que, para explicar a grosso modo, tienen que ver con el menor o mayor pixelado de las imgenes, y en este sentido se puede decir que son herramientas opuestas. Por ejemplo: Aqu tenemos la cara de la mujer del cuadro en un aumento del 400% con respecto al original que te mostramos. Como ves, la imagen est compuesta de pequeos "cuadraditos" de distintos colores y tonalidades. Pues bien, esos "cuadraditos" son los pixels que forman toda imagen que no sea vectorial (para trabajar en imagenes vectoriales puedes tomar el curso de Freehand), lo que pasa es que, al ser tan pequeos, no se notan al 100%, como puedes ver en la imagen original. Sharpen: Esta herramienta sirve para acrecentar el efecto de pixelado. Esto en ciertos casos puede ocasionar un efecto beneficioso a los ojos del usuario, pues acrecienta el contraste de las tonalidades, dndole a la imagen mayor luminosidad y brillo. Pero tomemos en cuenta que esto es slo un "efecto visual" para el ojo inexperto de un usuario comn. En realidad, darle mayor sharpen a una imagen es, casi siempre bajar la calidad de la imagen. Pero como dije "a veces" queda bien. Compara la imagen original, con esta imagen. Si miras con atencin, vers que la imagen original tiene ms "brillo" y en apariencia, se ve mejor. Es porque le hemos puesto el efecto de sharpen para "resaltarla" an ms (Filters>Sharpen>Sharpen) de modo general. La herramienta propiamente dicha te servir para aplicar este efecto en determinadas partes. Obviamente, esta herramienta (como todas, una vez que las seleccionas en la paleta de herramientas), es configurable desde la barra de propiedades. Miremos este ejemplo: esta es la misma imagen de la cara de la mujer, en el mismo zoom: slo que en el borde del sombrero le pasamos la herramienta de sharpen con Size 13, y una intensidad de 63. En la imagen siguiente le he vuelto a pasar la herramienta de sharpen, para que veamos en qu puede desembocar un abuso de esta herramienta: Blur: Esta herramienta sirve, precisamente, para contrarrestar los efectos de una imagen demasiado pixelada. Efectivamente, a nuestra imagen le hemos dado un blur general (Filters>Blur>Blur): Si miramos con atencin, veremos que los pixels ya no son TAN ntidos, lo que redundar en una mayor "suavidad" en la imagen ms grande. Burn: Este efecto toma la gama de colores original del lugar por donde la pasamos, y la obscurece. Se puede usar para arreglar partes de una imagen con exceso de luminosidad. Nuevamente comparemos con la imagen original, y veamos esta otra, en donde le hemos aplicado el Burn a los volados inferiores del vestido, y a la manga superior, que en original estaban con mucha luz. Dodge: Como podrs imaginar, es el contrario de Burn. O sea que toma la gama de colores original del lugar por donde la pasamos, y la aclara. Smudge: Toma el color del lugar donde apoyas el mouse, y lo "desparrama" por donde lo vayas pasando. Es ms que nada una herramienta para crear efectos artsticos, aunque tambin te puede servir para fundir los bordes de una foto con un fondo determinado.

En esta foto hemos hecho dos tipos de Smudge. Uno un poco ms notorio, que es el que te marcamos. Y en otro, que prcticamente no se nota, fundimos el cielo ms claro que rodeaba a la montaa, con otro ms obscuro que sacamos de otra foto. Pero hemos trabajado en un zoom tan grande, que el trabajo hecho ha sido smamente fino, y no se nota. CAPITULO 3.3. Otros efectos: El panel de Layers puede brindarnos una multitud de efectos para las imgenes:

te recomiendo probar uno a uno los efectos para poder ver concretamente de qu manera modifican las imgenes ("Una imagen vale por mil palabras" ... dicen). Respecto al trabajo con layers (capas), nos resta hacer referencia a algunos efectos con los que podemos trabajar por medio de ellos. Miremos primeramente con atencin que, adems de los efectos del men que te mostramos anteriormente, vemos otros elementos. Mira con atencin el panel con esta imagen de ejemplo. Tenemos la imagen en modo Normal, es decir, sin ningn efecto de Layer en especial, y tenemos adems tres tipos de layers (o capas):

1. Web Layer: que es donde irn los links, las reas especiales, slices, y otras cosas que veremos despus. No hace falta que las ubiques t en ese lugar: el programa lo hace por s solo. 2. Layer 1: que es el Layer en donde podrs (si as lo deseas), poner otro objeto, pero para hacerlo tendrs que seleccioner ese layer, o sea, posicionarte sobre l primero. Si no, todo lo que hagas se ir agregando (en este caso) en el ... 3. Background: este layer aparece, en este caso, porque no hemos importado una imagen a un documento nuevo, sino porque hemos abierto directamente una imagen con Fireworks. Si Hubisemos abierto un documento nuevo, tendramos como Layer por defecto el Layer 1, y no habra ninguno que se llamase Background. Y los botones de abajo, algunos de los cuales veremos ahora. As que, ya tenemos todos los elementos como para empezar a ver algunos mefectos que podemos hacer con los Layers. Uno es, por ejemplo, el de las "transparencias" (si has hecho el curso de Flash, seguramente recordars el "alfa" que se puede aplicar): Hacemos clic (en el panel de layers) sobre el layer 1, para que lo que dibujemos o insertemos o importemos caiga en ese layer y no, por ejemplo, en el de Background. Dibujamos una imagen determinada. En este caso es un rectngulo de color azul, de tal modo que quede como muestra la imagen: Ahora tomamos el Layer 1 por el nombre y lo llevamos hacia abajo del Layer Background, de tal manera que en el panel quede as: Seleccionamos el Layer de Background y le damos un valor de 80. Lo que estamos haciendo es "bajar" la densidad de la imagen, de modo que se empiece a transparentar el elemento que hay por debajo. El resultado es ms o menos este: Como podemos ver, la transparencia de la foto deja ver la tonalidad azul ms intensa del rectngulo que est abajo. De esta manera se pueden combinar varias imgenes y obtener efectos muy interesantes, siempre y cuando trabajemos cada elemento en un layer distinto.

Hay otro efecto para el que no hacen falta layers: Importamos una foto y dibujamos sobre ella una forma determinada. Es importante que esta forma tenga color blanco y no otro.

Seleccionamos ambos elementos y vamos a Modify>Mask>Group as Mask, obteniendo as el siguiente resultado:

O sea que la imagen toma la forma de la imagen que hayamos puesto sobre ella. El efecto inverso sera poner la imagen por debajo de la foto, y para eso podemos utilizar los botones de la barra de herramientas superior que vemos aqu: . Y en este caso, el color de la imagen ser tambin muy importante, pues la imagen tomar la gama de colores de la imagen que tenga abajo. Aqu, por ejemplo, utilizamos la misma imagen, pero en vez de darle color blanco, le dimos color rojo. No ha quedado muy lindo, pero es slo para ilustrar el ejemplo: Practiquen, y si tienen alguna duda, recurran a uestro Foro. All hay muchos usuarios que, como Uds. desean compartir sus conocimientos y dudas con los dems.
CAPITULO 4. Optimizacin de imgenes: "Optimizar" una imagen para web es tratar de lograr la mejor calidad visual en la imagen, junto con el menor peso posible en Bytes, adems, obviamente, de la optimizacin esttica, que estar marcada por el tipo de diseo, el producto, la formacin del diseador, etc. Esto requiere, no slo pautas tcnicas claras, sino el desarrollo de cierta "intuicin" que se va adquiriendo solamente con la prctica constante. Aqu te daremos los pasos bsicos para lograr la mejor resolucin posible. Para comenzar hemos tomado una imagen y la hemos abierto con Fireworks: La ventana comienza por decirte varias cosas: 1. 2. El formato en que est guardada la imagen original, que en este caso es un JEPG. El tamao real en pixels (1258x882), y el zoom que est usando el programa para verla entera (26%).

Como te imaginars, 1258 x 882 es un tamao un poco grande como para verla cmodamente en una resolucin de 800 x 600 (que suele ser el estandard), as que, una de las primeras cosas que debemos hacer es reducir su tamao. Para eso vamos a Modify>Canvas>Image size: Y aqu debemos aclarar algunas pautas: 1. Si bien Fireworks es un programa que tambin nos puede dar la opcin de trabajar en proyectos para imprenta, su fuerte es la web, por eso obviaremos la parte de "Print size", que est referida a la parte de impresin y trabaja en pulgadas (inches), y no en pixels, como trabajamos en la web. A excepcin del tem "Resolution". Aqu tratemos de no utilizar ms de 100, pues para la web es suficiente resolucin con esto. An se puede llegar a utilizar 75, pero eso variar segn los resultados que vayamos viendo una vez que tengamos ms formado el ojo para este tipo de cosas. Salvo que nuestra intencin sea crear algn tipo de composicin artstica, las imgenes NUNCA se deforman. O sea que, ya se achiquen o se agranden, es importante mantener la proporcin de ancho y alto, por eso el casillero de "Constrain proportions" debe mantenerse activado.

2.

As que, establecidos estos supuestos, vamos a suponer que, por cuestiones de espacio, la imagen no puede tener ms de 400 pixels de ancho. Con que pongas "400" en el lugar en donde dice "1258" bastar, pues al tener activada la opcin "Constrain proportions", el 882 cambiar "proporcionalmente" para mantener la imagen igual, pero ms pequea. Una vez que hemos arreglado el tamao final de la imagen, nos toca optimizar el "peso" de la misma, para que los usuarios de nuestra pgina no deben esperar demasiado para verla. Para comenzar iremos a la solapa de "Preview", en donde veremos, no slo el peso exacto de la imagen, sino tambin su aspecto real, el que vern los usuarios. Esto ltimo lo decimos porque muchas veces, lo que vemos en la solapa "original" es de mejor calidad visual que la realidad que se ve en el Preview.

La imagen que tenemos aqu pesa 14,24 Kb, y tardara (ms o menos) 2 segundos en un mdem de 56 Kb, segn nos dice el programa. Pero lo cierto es que este clculo slo es real en condiciones ideales, o sea: un buen equipo, una buen mdem, un buen proveedor de Internet (ISP), una buena hora (en que no est medio pas conectado), que la pgina est alojada en un buen Hosting, etc, etc, etc. Y todos sabemos sabemos por experiencia que estas condiciones ideales no se dan TODAS juntas como para que una imagen de 14,24 Kb baje en 2 segundos. Por eso, nuestra optimizacin debe apuntar a las condiciones de conexin medias o medio-bajas, y no a las mejores. Y para esas condiciones, esta imagen es realmente pesada. Habrn notado ya que hay otras dos solapas: 2-Up y 4-Up. Estas opciones nos ofrecen otras previsualizaciones de la imagen que estamos trabajando: Y aqu s, ya entra en juego nuestro "ojo" clnico para ver cual de las 4 imgenes (o 2, en el caso de ir a la solapa 2-Up) se ve mejor. Una vez seleccionada, trabajamos sobre la que hayamos elegido. Ahora debemos optimizar el peso, y para eso vamos al panel de "Optimize": En este panel vemos:

1. 2.

3.

4. 5. 6.

Men desplegable en donde podremos seleccionar el ms adecuado para nuestro trabajo, siempre atentos a que el peso de nuestra imagen no se incremente. Los ms comnmente usados para web son GIF y JEPG (JPG). La calidad de imagen ser un influencia directa sobre el aspecto de la misma, pero tambin sobre su peso. Por eso, debemos tener mucho cuidado: bajar la calidad de una imagen implica que pese menos, pero hay cierto lmite que no debemos sobrepasar, y corresponde al momento en que la imagen empieza a verse realmente mal. Nosotros hemos bajado la calidad de 66 a 60, y el peso baj de 14,24 Kb a 12,47 Kb, tomando en cuenta que la imagen qued de un tamao de 400 x 280 pixels. As y todo queremos que la imagen baje rpido, o por lo menos, que el tiempo que ocupe en bajar no incomode al usuario. Para eso vamos a "partir" la imagen: Nos posicionamos en la solapa de Original. necesitamos que se vean las reglas, as que, si no se ven, vamos a View>Rulers. Haciendo clic en alguna de las reglas, y sin soltar el mouse, nos ubicamos sobre la imagen. Al movernos veremos que salen unas lneas verdes de la regla. Esas lneas verdes son las "guas". Si no las podemos ver, vamos a View>Guides>Show Guides. Trabajando con un Zoom del 100% sacaremos tres guias de la regla lateral y las pondremos respectivamente a la altura de los 100, 200, y 300 pixels. Igualmente de la regla superior sacaremos una gua y la pondremos a la altura de los 140 pixels.

Tenemos entonces una imagen dividida en 8 partes, y si el peso total de la imagen es de 12,47 Kb, tenemos que cada una de las partes de esta imagen pesa 1,55875 Kb ... casi nada an para una mala conexin. A este respecto cabe aclarar algo: esta reduccin del peso de la imagen es ms psicolgica que real, y est ms orientada al usuario. Llega un momento en que la imagen no puede ser reducida de peso, porque afectara seriamente su calidad. Lo mismo y con mayor razn, ocurre cuando debemos exponer imgenes con MUY buena calidad en la web: la mayora de las veces, para conservar esa calidad, debemos conformarnos con bajarles muy poco el peso, y el resultado es una imagen pesada, inevitablemente pesada. En el caso de nuestra imagen, es obvio que sigue pesando 12,47 Kb, pero para el usuario no es lo mismo quedarse mirando un espacio en blanco hasta que bajen los 12 Kb, que ir viendo de a poco que la imagen va bajando a su monitor. Es una cuestin psicolgica: si el usuario espera demasiado, se termina cansando; si ve los frutos de su espera (aunque sea de a poco), aguardar un poco ms hasta ver la imagen entera.

5. Exportacin de imgenes: Ahora debemos tocar lo referente a la exportacin de las imgenes, o sea, hacerlas legibles para que puedan ser usadas por los programas de integracin con la web. El formato original de los archivos de Fireworks es ".png", pero para web, suele exportarse como JPG o GIF.

Hay varios mecanismos para exportar las imgenes. Veremos algunos de ellos. 1- Tenemos nuestra imagen dividida en partes, pero para que este "efecto psicolgico" y prctico del que hablbamos, sea eficiente, no podemos exportar imagen por imagen. As que vamos a ir a la herramienta Export , o bien a File>Export. 2- Nos aparece esta ventana: Y as es como debemos tener configurado correctamente para exportar esta imagen "partida": 1. 2. 3. 4. El Nombre del archivo (no hace falta que le pongamos la extensin). Tipo: HTML and slices. O sea que luego no la buscaremos como un archivo de imagen (jpg o gif), sino como html o htm. En HTML seleccionamos la operacin a realizar. No tenemos que preocuparnos, porque hay slo dos opciones: la que ves y la que sirve para para copiar al Clipboard. Adems, esta opcin suele configurarse automticamente. Slices: Los "slices" son reas interactivas que podemos armar manualmente (lo veremos ms adelante". Cuando exportamos una imagen del modo en que lo hacemos ahora, hay que armar tantos slices como partes en que nos queda dividida la imagen por medio de las guias. Se imaginan si la imagen hubiese quedado dividida en 54 partes? Tendramos que hacer a mano 54 Slices!! Pues para que eso no ocurra, Fireworks no da la posibilidad de indicarle que tome las guias como martcadores de divisin para los slices (Slice along guides).

El resultado de esta exportacin lo tomaremos luego desde programas de integracin web tales como Dreamweaver, programa del que te recomendamos hacer el correspondiente curso. Las otras opciones de exportacin estn referidas a realizarlo como imagen, pero las diferencias son mnimas: Ya sea GIF o JPG, bastar con que en el tem "Tipo", le pongamos "Images only". Nos bastar ahora aprender cmo integrar estas cosas con Dreamweaver, pero esto formar parte de los temas de la prxima entrega. Les recuerdo que pueden compartir sus dudas, inquietudes y conocimientos en nuestro foro. All encontrarn gente que, como Uds. est interesada en estos temas. CAPITULO 5. Creacin de algunos elementos para web: 5.1. Botones: Hoy en da, el concepto de "navegabilidad" de una pgina determina, de muchas maneras, la eficacia y claridad en la presentacin de un producto en la web. Adems de procurar tener un organigrama completo y preciso, es necesario que todas las secciones de ese organigrama sean accesibles desde cualquier lugar del sitio, y en cualquier momento que el usuario quiera accederlas, evitando con esto los ya anacrnicos "volver" que poblaban las primeras pginas web. Con este fin es que la "botonera" de una pgina se ha vuelto un elemento necesario y constitutivo de todo sitio web que se precie de ser tal. Los modelos pueden variar, pero lo importante es que en la botonera se halle el acceso rpido e intuitivo a cualquier lugar de un sitio. En este sentido, la elaboracin de botones individuales o de "barras de navegacin" completas es smamente rpida y fcil en Fireworks. Vamos a comenzar por hacer un botn: 1- Vamos a Edit>Insert>New Button. Nos encontraremos entonces en la siguiente ventana: Las "instancias" son los distintos estados de funcin en una pgina web. UP: es cmo se ver el botn por defecto, cuando entramos a la pgina. OVER: es cmo se ver el botn cuando el mouse pase sobre l. DOWN: es cmo se ver el botn cuando presionesmos sobre l para hacer clic y hacerlo funcionar. OVER WHILE DOWN: es cmo se ver el botn una vez que estemos en el link a dnde nos condujo. Por ejemplo: estamos en la pgina principal, y hacemos clic en un botn que se llame "clientes", entonces

iremos a la seccin de clientes, y el botn de clientes cambiar de aspecto, para recordarnos grficamente que estamos en la seccin clientes. ACTIVE AREA: en esta seccin determinamos qu parte del botn funcionar como botn. Pero vamos a ir paso por paso: En el UP hemos puesto un botn de "Inicio" tal como se ver normalmente. Para evitar las dificultades de intentar dibujar exactamente lo mismo en el OVER, utilizamos primeramente el botn "Copy Up Graphic" (copiar el grfico del UP), y una vez realizado, le hacemos los cambios que creamos convenientes. En este caso slo le cambiamos el color y agregamos una pequea sombra al texto. Lo mismo hemos hecho en DOWN, o sea, copiar el grfico del OVER, y luego le hemos cambiado un poco el color, para diferenciarlo. Nos salteamos el OVER WHILE DOWN, porque el proceso consite exctamente en lo mismo, o sea, en cambiar o conservar el aspecto del botn, segn querramos. En ACTIVE AREA vemos que el botn aparece cubierto por un rea transparente. Esta rea es un "Slice" y es la que posibilita que el rea marcada por el mismo sea interactiva, o sea, por ejemplo, que le podamos agregar un link. El tamao de este slice determinar el rea que funcionar como botn. En este caso, obviamente, ambos tamaos coinciden: el del botn y el del rea activa. Nuestro botn ya est bsicamente terminado, as que le damos a DONE, para volver al canvas normal de nuestro trabajo: y as es como se ve en el rea de trabajo, con el slice superpuesto. Si visualmente nos molesta verlo de esta manera, podemos recurrir a los botones que sirven para ocultar o mostrar los slices, y que se hallan en la paleta de herramientas. Podemos ver, adems, el botn terminado y funcionando: Si pasamos el mouse sobre l, sin hacer clic, veremos el cambio de grficos del UP al OVER. Si hacemos clic sobre l, veremos que queda de otro color. Ese es el aspecto que le asignamos al OVER WHILE DOWN, o sea, el aspecto que tendr el botn una vez usado (por decirlo de alguna manera). No hace falta repetir todo el proceso para elaborar otros botones. Basta con mantener la tecla ALT presionada y arrastar el primer botn: automticamente lo duplicar. Luego, en la barra de propiedades, le haremos los cambio necesarios: En Text le ponemos el texto que llevar el nuevo botn. Si hiciese falta, en Link, le ponemos el link correspondiente, y as sucesivamente podemos ir duplicando los botones sin necesidad de trabajarlos uno por uno. 4.2. Menes y submenes: Es frecuente que en la estructura de contenidos de un sitio, nos encontremos con que una seccin deber estar dividida en varias "sub-secciones". Para no afectar la navegabilidad del sitio, se utilizan los menes y submenes, que pueden nacer de algn botn en particular. Siguiendo con nuestro ejemplo, hemos duplicado otra vez un botn para crear el que se llame Links, pero en nuestro proyecto imaginario, la seccin links estar dividida en tres secciones; y una de estas tres, en otras dos. Seleccionamos el botn de Links, y vamos a Modify>Pop-up Menu>Add Pop-Up Menu. En esta ventana empezamos a armar el men de Links, que estar dividido en Portales, Diseo, y Tutoriales. Pero en nuestro proyecto imaginario, dividiremos Tutoriales en dos secciones: Lo que hemos hecho aqu es:

1- Con el signo + agregar dos nuevos campos abajo de Tutoriales, a los que hemos dado los nombres de Gratutos y Pagos, con sus correspondientes vnculos. 2- Los hemos "Indentado" (as se llama la operacin que los "subordina" a Tutoriales). 3- hacemos clic en Next para seguir armando estos menes. Hacemos clic en Next y pasamos a la parte de la configuracin "grfica" de los botones del men. 1- Hay dos estilos para los botones. nosotros hemos escogido el de "Image" porque es el ms variado en opciones, y es el que la da cierto "volmen" a los botones. La opcin de HTML es grficamente mucho ms sencilla, pero en fin, son opciones de cada uno: dependen del concepto esttico por el que se haya optado para el sitio. Como ven, hay adems opciones para configurar el tipo de fuente (letra) que se utilizar, el tamao, alineacin del texto, etc. 2- Tambin puedes configurar a tu gusto los colores que tendrn los botones tanto en la instancia UP como en OVER, o bien utilizar los estilos predefinidos que nos da Fireworks. Las siguientes opciones, que se hayan en las solapas de Advanced y Position hacen referencia a aspectos ms detallados de la apariencia, y a la posicin que tendrn los menes y sibmenes respecto al botn de origen.