PROGRAMA DE INGENIERA DE SISTEMAS

GUA DIDCTICA de APRENDIZAJE

DATOS BSICOS

Asignatura: Programa: Semana acadmica: Ciclo: Nmero de crditos: Autor:

Seminario de Grado I Ingeniera de Sistemas 3 Tcnico 4 Ing. William Ruiz Martnez

PROPSITO DE FORMACIN

Esta sesin del curso de Seminario de Grado I (Diseo de sitios WEB con Fireworks y Dreamweaver) tiene como finalidad que el estudiante pueda conocer el ambiente de trabajo de la aplicacin Adobe Fireworks, sus diferentes paneles y barras de herramientas con el fin de que pueda aplicar en forma correcta la manipulacin de las herramientas enfocadas al diseo WEB.

LECTURAS PREVIAS Y CONOCIMIENTOS NECESARIOS

Como lectura previa les recomiendo: Manual de Fireworks CS4, pginas de la 14 a la 21.

AYUDAS DIGITALES

A continuacin les describo la webgrafia y bibliografa recomendada para el desarrollo de la asignatura: WEBGRAFIA http://www.desarrolloweb.com/manuales/47/ http://www.csszengarden.com/tr/espanol/ http://www.cristalab.com

BIBLIOGRAFIA Uso de Adobe Fireworks CS4- Adobe Systems, ao 2008 Adobe Dreamweaver CS3- Guia del usuario -Adobe Systems, ao 2007

NUCLEO DE APRENDIZAJE: Especificar el ncleo de la clase segn syllabus

Divulgar una serie de conocimientos con el fin de que el estudiante pueda conocer, manipular y aplicar cada una de las diferentes herramientas de Fireworks segn un propsito especfico. 1. El area de trabajo de Fireworks 1. Barra de Mens

3. rea de Trabajo

5. Capas y Activos

4. Optimizar

2.

Barra de Herramientas

6. Propiedades
7. Listado de Fotogramas e Historial

AREA
1. Barra de Mens

DESCRIPCION
Me presenta una serie de mens desplegables con diferentes opciones. Aqu tendremos los iconos de las herramientas de Fireworks, como creacin de formas, texto, vectores... Donde veremos y realizaremos nuestros diseos. Opciones para optimizar los grficos realizados. Formato, colores, calidad, transparencia... Relacin de capas existentes y estilos predefinidos. Dependiendo de la herramienta utilizada me muestra una serie de propiedades sobre ella. Listado de fotogramas e historial de acciones realizadas.

2. Barra de Herramientas

3. rea de Trabajo

4. Optimizar

5. Capas y activos

6. Propiedades

7. Fotogramas e Historial

2. Herramientas bsicas (Descripcin) El panel Herramientas est organizado en seis categoras:

Seleccionar

Mapa de bits

Vector

Web

Colores

Ver

2.1 SELECCIONAR Herramienta seleccin: Me Permite seleccionar un objeto para acciones como: Llevarlo a otra ubicacin o dimensionar su tamao. Herramienta subseleccion: Me Permite seleccionar un objeto para manipular los nodos que los componen. Herramienta Escala: Permite manipular el tamao, giro y distorsin de un objeto. Herramienta recorte: Permite extraer una seccin o trozo de un objeto.

2.2 MAPA DE BITS: Me permite realizar una serie de acciones solo aplicables a fotografas o imgenes de mapas de bits.

Herramienta Recuadro: Permite seleccionar secciones o trozos de un mapa de bits para recortar la seccin, mostrar el recorte como la nueva o aplicar efectos a la misma. Herramienta Lazo: Permite contornear cualquier seccin de la imagen con el fin de copiarla o extraerla de una imagen. Herramienta vara mgica: Me permite seleccionar tonos semejantes en una imagen. Herramienta Pincel: Me permite utilizar diferentes estilos y galeras de estilos para aplicar a imgenes de mapas de bits.

Herramienta Lpiz: Me permite dibujar lneas.

Herramienta borrador: Me permite borrar secciones o trozos de un mapa de bits. Herramienta Desenfocar: Me permite aplicar efectos de saturacion, desaturacion, pintura al tacto y otros efectos a mapas de bits. Herramienta sello: Me permite copiar secciones de una imagen con el fin de duplicarlas o clonarlas en alguna seccin de la misma imagen, Contiene una particular herramienta para corregir el efecto de color rojo en los ojos de imgenes digitales. 2.3 VECTOR: Me permite realizar una serie de acciones solo aplicables a imgenes vectoriales.

Herramienta Lnea: Me permite dibujar lneas, que pueden ser interconectadas para formar un objeto. Herramienta Pluma: Me permite desplegar una plumilla o herramienta que en forma continua me permite dibujar secciones de lneas para conformar un objeto determinado. Herramienta Rectngulo: Me permite desplegar una galera de imgenes prediseadas para aplicar a mis creaciones. Herramienta texto: Me permite manejar diferentes fuentes, alineaciones y efectos para el manejo de texto en mis creaciones. Herramienta remodelar: Me permite dar nueva forma a un objeto seleccionado. Herramienta cuchillo: Me permite seccionar o cortar trozos de un objeto seleccionado. 2.4 WEB: Me permite realizar una serie de acciones ya dirigidas a la construccin de elementos de una pgina WEB determinada.

Zonas Interactivas: Me permite construir zonas interactivas que muestran cierto tipo de informacin al usuario colocar el mouse encima de ellas.

 Divisin: Me permite realizar una divisin o seccin con el fin de determinar los diferentes elementos que puedo utilizar en una pgina WEB (Texto, imgenes, etc). Mostrar y ocultar divisiones Interactivas

2.5 COLORES: Me permite establecer colores de fondo, degradados y colores de lneas aplicados a los objetos.

Cuentagotas: Me permite extraer el color de un objeto para aplicarlo a otro. objeto. Color de lnea: Me permite aplicar un color a la lnea o borde de un objeto. Cubo de pintura: Me permite aplicar un color de relleno a un

2.5 VER: Me permite ver de diferentes formas mi escritorio de trabajo.

Pantalla estndar o normal: Es la vista por defecto.

Pantalla completa con mens: Tipo de vista maximizado, incluye los mens. Pantalla completa: Tipo de vista maximizado, no incluye los mens. Mano: Permite mover el cursor mostrando en forma completa la creacin. Zoom: Me permite activar el modo de ampliacin o reduccin del diseo.

3. CREACIN DE FIGURAS BSICAS, MANEJO DE COLORES, EFECTOS Y EDICIN DE NODOS Cuando construyo algn tipo de objeto en Fireworks, estoy haciendo una imagen vectorial, recordemos que dicha imagen es la composicin de una serie de lneas denominadas Vectores, que encierran 3 componentes principales:

Una serie de lneas que conforman un objeto Un contorno Un relleno o color interior.

Del mismo modo recordemos que los grficos vectoriales no presentan el problema de pixelacion al sufrir una modificacin de tamao. Lo primero que debo determinar es si voy a utilizar la opcion herramienta Rectngulo para construir una figura de la galera que me ofrece o voy a construir la figura utilizando una herramienta como la Pluma. El efecto logrado es el mismo, debo tener en cuenta que debo dejar cerrada correctamente el contorno de la figura para poderla rellenar.

3.1 OPCION HERRAMIENTA RECTNGULO Me dirijo a la herramienta rectngulo, y doy un clic sostenido sobre la flecha negra en la parte inferior derecha de la herramienta, voy a visualizar el siguiente men. Como observamos puedo seleccionar alguna de las figuras de la lista que me ofrece Fireworks. Ej. Selecciono Rectngulo redondeado. Me dirijo al rea de trabajo y dibujo la imagen en dicho espacio.

Tiradores cambio de del objeto.

de forma

Tiradores de redimension Del objeto.

Como podemos observar en la imagen un objeto creado en Fireworks, presenta 2 tipos de tiradores, los de redimension que me permiten cambiar el tamao del objeto y los tiradores de cambio de forma que me permiten dar una nueva forma al objeto.

Adems en el panel propiedades encontramos las siguientes opciones.

Posicin Eje X- Eje Y objeto.

Color de relleno del objeto.

Color del borde del objeto.

Ancho y alto del objeto.

Colores slidos, degradados o texturas.

Efectos de borde del objeto

Filtros de aplicacin de efectos del objeto

Si trabajo con colores degradados voy a observar la siguiente visualizacin. Opacidad o transparencia del color. Color 1

Color 2

3.2 FILTROS Los filtros, es una herramienta que me permite aplicar cierto tipo de efectos sobre el objeto. Cuando deseo aplicar un filtro debe dar clic sobre la opcion smbolo + en la barra de propiedades, voy a visualizar el siguiente men. del

Bisel y Relieve Difuminado Ruido Sombras y Brillo Acentuar

Cuando establezco un filtro observo la siguiente visualizacin en la barra de propiedades.

Si deseo suprimir el filtro doy clic sobre el smbolo - . Adems si doy doble clic sobre el texto del filtro puedo observar sus propiedades.
Intensidad Opacidad Color

Suavidad

Puedo aplicar varios filtros a la vez.

3.3 EDICION DE NODOS Los nodos son los componentes de una figura vectorial, del mismo modo yo puedo editar o modificar dichos nodos con el fin de cambiar la forma de una figura. Lo primero que debo un clic sobre la realizar para editar los nodos de un objeto es dar herramienta subseleccion.

Una vez que de clic sobre dicha herramienta la figura se visualizara de la siguiente forma.

Modo nodos.

edicin

de

MODO EDICION DE NODOS

Como observamos en la ilustracin el rectngulo en cada uno de los nodos presenta un color blanco, lo que indica que esta en modo de edicin, es decir que puedo cambiar su orientacin. AGREGAR NODOS: Si deseo agregar un nuevo nodo a la figura me dirijo a la herramienta pluma y me ubico en alguna posicin del objeto donde no haya nodos y doy clic sobre dicha ubicacin. Veamos

Nuevo nodo

ELIMINAR NODOS: Si deseo eliminar un nodo a la figura me dirijo a la herramienta pluma y me ubico en alguna posicin donde exista un nodo y doy clic sobre dicho nodo.

4. CREACIN DE FIGURAS COMPLEJAS En diseo, podemos decir que las figuras que exigen el mayor tiempo de realizacin y lgicamente la mayor complejidad en su construccin, son las figuras curvas ya que en su realizacin es bsico el poder manipular los nodos de forma correcta. Por dicha razn vamos a proceder a conocer y aplicar la forma correcta de manipular los nodos en figuras curvas.

Cuando selecciono con la herramienta subseleccion una figura curva, voy a observar que aparecen una serie de tiradores en cada uno de los nodos de dicha figura.

5. MANEJO DE EFECTOS ESPECIALES Uno de los efectos que ms llama la atencin es el de creacin de un gif animado, es decir aquel muequito que presenta algn movimiento especfico. Veamos la secuencia de pasos para lograr dicho efecto con Fireworks. Para empezar creamos un documento nuevo de reducido tamao (50x50). Vamos al men "Ventana" y activamos "Fotogramas" (Mays.+F2).

Bueno, acto seguido, empezamos con la animacin. Nos colocamos en el primer fotograma (de momento es el nico que existe) y dibujamos una carita.

El siguiente paso, ser crear un nuevo fotograma. En la parte inferior del panel "fotogramas" hacemos clic a aadir fotograma: Veremos que el escenario de dibujo se vaca, eso es porqu el fotograma que acabamos de insertar est vaco. Pero si vamos al fotograma anterior, veremos que lo que dibujamos sigue ah. Como queremos que el segundo fotograma sea parecido al primero, copiamos el contenido del primero al segundo. Y modificamos la direccin de la boca, para que simule una sonrisa.

Al dar clic sobre el botn de Play, como podemos observar, la animacin se sucede demasiado deprisa, y parece que el gif padezca hiperactividad por exceso de estimulantes. Eso lo podemos arreglar determinando el tiempo que queremos que se muestre cada frame. Lo conseguiremos haciendo doble clic en un frame. Nos pedir que introduzcamos un valor de tiempo en centsimas de segundos (100cs =1s) durante el cual ser mostrado el fotograma en cuestin. Ahora hay que exportarlo: Nos aseguramos que en "Optimizacin" esta marcado como gif Animado (men desplegable). Podemos aadirle transparencia alpha si queremos que su fondo sea transparente (evidentemente, en el escenario (panel propiedades), debemos decir que no debe haber fondo) en estos casos. Una vez esto, Vamos al men "Archivo" y hacemos clic en "Exportar". Le asignamos un nombre y en exportar seleccionamos HTML e imgenes.

6. IMPORTACIN, EXPORTACIN Y OPTIMIZACIN DE IMGENES Fireworks es una poderosa herramienta que me permite optimizar imgenes en diferentes formatos, importar varios tipos de imgenes y adems exportar mis creaciones en formatos conocidos.

6.1 Utilizando el asistente de exportacin El Asistente de exportacin le gua en todo el proceso de la optimizacin y exportacin. 1 Seleccione Archivo > Asistente de exportacin. 2 Responda a todas preguntas que aparecen y haga clic en Continuar en cada panel. En el primer panel, elija Tamao de archivo de exportacin objetivo hasta que el archivo que optimiza alcance el tamao mximo. 3 Haga clic en Salir en la ventana Resultados del anlisis del asistente. Se abre la ventana Presentacin preliminar de la imagen con las opciones de exportacin recomendadas.

6.2 Optimizar mediante una opcion establecida Seleccione Ventana > Optimizar para abrir el panel Optimizar. Si se selecciona una opcin preestablecida, el resto de opciones del panel Optimizar se configuran de forma automtica. Seleccione una opcin preestablecida en el men emergente Configuracin del Inspector de propiedades o en el panel Optimizar. GIF Web 216 Fuerza a que todos los colores sean seguros para la Web. La paleta de colores contiene hasta 216 colores. GIF WebSnap 256 Convierte los colores en su color seguro para la Web ms parecido. La paleta de colores puede contener hasta 256 colores como mximo. GIF WebSnap 128 Convierte los colores en su color seguro para la Web ms parecido. La paleta de colores contiene hasta 128 colores. GIF adaptable 256 Slo contiene los colores reales utilizados en el grfico. La paleta de colores puede contener hasta 256 colores como mximo. JPEG Calidad superior Define la calidad en 80 y el suavizado en 0 para conseguir un grfico de alta calidad y gran tamao. JPEG Archivo ms pequeo Define la calidad en 60 y el suavizado en 2 para conseguir un grfico con la mitad del tamao conseguido con la opcin JPEG - Calidad superior pero con una menor calidad. GIF animado WebSnap 128 Define el formato del archivo como GIF animado y convierte los colores en sus correspondientes seguros para la Web ms parecidos. La paleta de colores contiene hasta 128 colores. Elegir un tipo de archivo Para personalizar la optimizacin seleccione un tipo de archivo especfico en el men emergente Formato del archivo de exportacin (en el panel Optimizar) y, a continuacin, establezca las opciones especficas de formato, como por ejemplo la

profundidad de color, el tramado y la calidad. Puede guardar los ajustes como una nueva configuracin preestablecida. GIF El formato GIF (formato de intercambio de grficos) es un conocido formato de grfico Web idneo para vietas, logotipos, imgenes con zonas transparentes y animaciones. Las imgenes que contienen reas de colores slidos se comprimen mejor cuando se exportan como archivos GIF. Los archivos GIF contienen un mximo de 256 colores. JPEG Es un formato desarrollado por el grupo Joint Photographic Experts Group especficamente para imgenes fotogrficas. El formato JPEG admite millones de colores (24 bits). JPEG es el formato ptimo para fotografas digitalizadas, imgenes que utilizan texturas, imgenes con transiciones de color en degradado o cualquier imagen que precise ms de 256 colores. PNG El formato PNG (formato de grficos de red porttiles) es un formato de grfico Web muy verstil que admite profundidades de color de hasta 32 bits, puede contener transparencias o un canal alfa y puede ser progresivo. Sin embargo, no todos los navegadores Web pueden mostrar imgenes PNG. Aunque PNG es el formato de archivo nativo para Fireworks, los archivos PNG de Fireworks contienen informacin adicional especfica de la aplicacin que no se almacena en un archivo PNG exportado o en archivos creados en otras aplicaciones. WBMP El formato WBMP (mapa de bits inalmbrico) es un formato de grficos utilizado en dispositivos porttiles como telfonos mviles y PDA. Este formato se utiliza en pginas WAP (Wireless Application Protocol). Ya que WBMP es un formato de 1 bit, slo se visualizan dos colores: blanco y negro. TIFF El formato TIFF (Tagged Image File Format) es un formato de grficos utilizado para almacenar imgenes de mapas de bits. Los archivos TIFF se utilizan principalmente en las publicaciones impresas. Adems, muchas aplicaciones multimedia admiten archivos TIFF importados. BMP Es el formato de archivo grfico de Microsoft Windows. Muchas aplicaciones pueden importar imgenes BMP. PICT Desarrollado por Apple Computer y normalmente utilizado en sistemas operativos Macintosh. La mayora de las aplicaciones Mac pueden importar imgenes PICT

CASO DOCUMENTADO
En esta tercera gua acadmica podemos colocar como referencia el sitio http://greenhouse.fedehartman.com/index.html, completamente realizado en Fireworks.

PRCTICA EN CLASE
Aplicando las herramientas vistas en clase, elaborar los siguientes diseos.

1. Elabore el siguiente logo: Dimensin 200 X 200

2. Elabore el siguiente banner: Dimensin 500 X 600

3. Elabore el siguiente banner: Dimensin 400 X 400

4. Elabore la siguiente barra superior para un contenedor dimensin 210 X 25

5. Tomar como modelo esta imagen para aplicar un efecto similar.

CRITERIOS DE EVALUACIN
Los criterios de evaluacin que van a ser considerados en el desarrollo de la asignatura, van a ser los siguientes: Asistencia a la asignatura. Trabajo desarrollado en clase. Puntualidad a la hora de presentacin de trabajos extraclase. Cumplimiento en la lectura y aplicacin de los temas relacionados como trabajo autnomo.

CONSULTAS Y LECTURAS POSTERIORES

Para la gua de clase Nro. 4 se recomienda haber ledo y puesto en prctica las siguientes lecturas: Manual de Fireworks CS4, pginas de la 36 a la 84.