You are on page 1of 17

PROGRAMA DE INGENIERÍA DE SISTEMAS

GUÍA DIDÁCTICA de APRENDIZAJE
DATOS BÁSICOS

Asignatura: Programa: Semana académica: Ciclo: Número de créditos: Autor:

Seminario de Grado I Ingeniería de Sistemas 3 Técnico 4 Ing. William Ruiz Martínez

PROPÓSITO DE FORMACIÓN

Esta sesión del curso de Seminario de Grado I (Diseño de sitios WEB con Fireworks y Dreamweaver) tiene como finalidad que el estudiante pueda conocer el ambiente de trabajo de la aplicación Adobe Fireworks, sus diferentes paneles y barras de herramientas con el fin de que pueda aplicar en forma correcta la manipulación de las herramientas enfocadas al diseño WEB.

LECTURAS PREVIAS Y CONOCIMIENTOS NECESARIOS

Como lectura previa les recomiendo:  Manual de Fireworks CS4, páginas de la 14 a la 21.

AYUDAS DIGITALES

A continuación les describo la webgrafia y bibliografía recomendada para el desarrollo de la asignatura:    WEBGRAFIA http://www.desarrolloweb.com/manuales/47/ http://www.csszengarden.com/tr/espanol/ http://www.cristalab.com

año 2007 NUCLEO DE APRENDIZAJE: Especificar el núcleo de la clase según syllabus Divulgar una serie de conocimientos con el fin de que el estudiante pueda conocer. El area de trabajo de Fireworks 1.Adobe Systems. Optimizar 2. Barra de Herramientas 6. manipular y aplicar cada una de las diferentes herramientas de Fireworks según un propósito específico. Listado de Fotogramas e Historial . Capas y Activos 4.Guia del usuario -Adobe Systems. Área de Trabajo 5. Propiedades 7. Barra de Menús 3. 1.BIBLIOGRAFIA   Uso de Adobe Fireworks CS4. año 2008 Adobe Dreamweaver CS3.

. vectores. transparencia.. Herramientas básicas (Descripción) El panel Herramientas está organizado en seis categorías:  Seleccionar  Mapa de bits  Vector  Web .AREA 1. Barra de Menús DESCRIPCION Me presenta una serie de menús desplegables con diferentes opciones. Donde veremos y realizaremos nuestros diseños. Listado de fotogramas e historial de acciones realizadas. Dependiendo de la herramienta utilizada me muestra una serie de propiedades sobre ella. Relación de capas existentes y estilos predefinidos. como creación de formas. Propiedades 7. Opciones para optimizar los gráficos realizados. Fotogramas e Historial 2. Optimizar 5. Aquí tendremos los iconos de las herramientas de Fireworks. Formato.. calidad. 2.. Capas y activos 6. Barra de Herramientas 3. texto. Área de Trabajo 4. colores.

 Herramienta recorte: Permite extraer una sección o trozo de un objeto.  Herramienta Lazo: Permite contornear cualquier sección de la imagen con el fin de copiarla o extraerla de una imagen.2 MAPA DE BITS: Me permite realizar una serie de acciones solo aplicables a fotografías o imágenes de mapas de bits. mostrar el recorte como la nueva o aplicar efectos a la misma.  Herramienta subseleccion: Me Permite seleccionar un objeto para manipular los nodos que los componen.  Herramienta Recuadro: Permite seleccionar secciones o trozos de un mapa de bits para recortar la sección. .  Herramienta Pincel: Me permite utilizar diferentes estilos y galerías de estilos para aplicar a imágenes de mapas de bits. Colores  Ver 2.  Herramienta vara mágica: Me permite seleccionar tonos semejantes en una imagen.  Herramienta Escala: Permite manipular el tamaño.1 SELECCIONAR  Herramienta selección: Me Permite seleccionar un objeto para acciones como: Llevarlo a otra ubicación o dimensionar su tamaño. giro y distorsión de un objeto. 2.

 Herramienta borrador: Me permite borrar secciones o trozos de un mapa de bits.3 VECTOR: Me permite realizar una serie de acciones solo aplicables a imágenes vectoriales.  Herramienta Pluma: Me permite desplegar una plumilla o herramienta que en forma continua me permite dibujar secciones de líneas para conformar un objeto determinado. pintura al tacto y otros efectos a mapas de bits. alineaciones y efectos para el manejo de texto en mis creaciones.  Herramienta Desenfocar: Me permite aplicar efectos de saturacion.  Herramienta sello: Me permite copiar secciones de una imagen con el fin de duplicarlas o clonarlas en alguna sección de la misma imagen. desaturacion. . Contiene una particular herramienta para corregir el efecto de color rojo en los ojos de imágenes digitales.  Herramienta texto: Me permite manejar diferentes fuentes. que pueden ser interconectadas para formar un objeto.  Zonas Interactivas: Me permite construir zonas interactivas que muestran cierto tipo de información al usuario colocar el mouse encima de ellas. 2.  Herramienta Rectángulo: Me permite desplegar una galería de imágenes prediseñadas para aplicar a mis creaciones.  Herramienta Línea: Me permite dibujar líneas.  Herramienta remodelar: Me permite dar nueva forma a un objeto seleccionado. Herramienta Lápiz: Me permite dibujar líneas. 2.4 WEB: Me permite realizar una serie de acciones ya dirigidas a la construcción de elementos de una página WEB determinada.  Herramienta cuchillo: Me permite seccionar o cortar trozos de un objeto seleccionado.

EFECTOS Y EDICIÓN DE NODOS Cuando construyo algún tipo de objeto en Fireworks. MANEJO DE COLORES. etc).  objeto.  Mostrar y ocultar divisiones Interactivas 2.  Pantalla completa: Tipo de vista maximizado. degradados y colores de líneas aplicados a los objetos. que encierran 3 componentes principales: .  Cuentagotas: Me permite extraer el color de un objeto para aplicarlo a otro.  Pantalla completa con menús: Tipo de vista maximizado.  Pantalla estándar o normal: Es la vista por defecto. estoy haciendo una imagen vectorial. 3. no incluye los menús. recordemos que dicha imagen es la composición de una serie de líneas denominadas Vectores.  Zoom: Me permite activar el modo de ampliación o reducción del diseño.  Color de línea: Me permite aplicar un color a la línea o borde de un objeto.5 COLORES: Me permite establecer colores de fondo. CREACIÓN DE FIGURAS BÁSICAS. División: Me permite realizar una división o sección con el fin de determinar los diferentes elementos que puedo utilizar en una página WEB (Texto. imágenes.5 VER: Me permite ver de diferentes formas mi escritorio de trabajo. Cubo de pintura: Me permite aplicar un color de relleno a un 2. incluye los menús.  Mano: Permite mover el cursor mostrando en forma completa la creación.

Selecciono Rectángulo redondeado. Me dirijo al área de trabajo y dibujo la imagen en dicho espacio.1 OPCION HERRAMIENTA RECTÁNGULO Me dirijo a la herramienta rectángulo. Del mismo modo recordemos que los gráficos vectoriales no presentan el problema de pixelacion al sufrir una modificación de tamaño. de forma Tiradores de redimension Del objeto. Lo primero que debo determinar es si voy a utilizar la opcion herramienta Rectángulo para construir una figura de la galería que me ofrece o voy a construir la figura utilizando una herramienta como la Pluma. Tiradores cambio de del objeto. y doy un clic sostenido sobre la flecha negra en la parte inferior derecha de la herramienta. . debo tener en cuenta que debo dejar cerrada correctamente el contorno de la figura para poderla rellenar. 3. Ej.   Una serie de líneas que conforman un objeto Un contorno Un relleno o color interior. voy a visualizar el siguiente menú. Como observamos puedo seleccionar alguna de las figuras de la lista que me ofrece Fireworks. El efecto logrado es el mismo.

degradados o texturas.Como podemos observar en la imagen un objeto creado en Fireworks.2 FILTROS Los filtros. Color del borde del objeto. Color de relleno del objeto. Además en el panel propiedades encontramos las siguientes opciones. Posición Eje X. presenta 2 tipos de tiradores. voy a visualizar el siguiente menú. Efectos de borde del objeto Filtros de aplicación de efectos del objeto Si trabajo con colores degradados voy a observar la siguiente visualización.Eje Y objeto. del . Ancho y alto del objeto. es una herramienta que me permite aplicar cierto tipo de efectos sobre el objeto. Colores sólidos. Cuando deseo aplicar un filtro debe dar clic sobre la opcion símbolo + en la barra de propiedades. Opacidad o transparencia del color. Color 1 Color 2 3. los de redimension que me permiten cambiar el tamaño del objeto y los tiradores de cambio de forma que me permiten dar una nueva forma al objeto.

Una vez que de clic sobre dicha herramienta la figura se visualizara de la siguiente forma. del mismo modo yo puedo editar o modificar dichos nodos con el fin de cambiar la forma de una figura.Bisel y Relieve Difuminado Ruido Sombras y Brillo Acentuar Cuando establezco un filtro observo la siguiente visualización en la barra de propiedades. Si deseo suprimir el filtro doy clic sobre el símbolo .3 EDICION DE NODOS Los nodos son los componentes de una figura vectorial. 3.. Lo primero que debo un clic sobre la realizar para editar los nodos de un objeto es dar herramienta subseleccion. Además si doy doble clic sobre el texto del filtro puedo observar sus propiedades. Intensidad Opacidad Color Suavidad Puedo aplicar varios filtros a la vez. .

Veamos Nuevo nodo ELIMINAR NODOS: Si deseo eliminar un nodo a la figura me dirijo a la herramienta pluma y me ubico en alguna posición donde exista un nodo y doy clic sobre dicho nodo. .Modo nodos. AGREGAR NODOS: Si deseo agregar un nuevo nodo a la figura me dirijo a la herramienta pluma y me ubico en alguna posición del objeto donde no haya nodos y doy clic sobre dicha ubicación. edición de MODO EDICION DE NODOS Como observamos en la ilustración el rectángulo en cada uno de los nodos presenta un color blanco. lo que indica que esta en modo de edición. es decir que puedo cambiar su orientación.

MANEJO DE EFECTOS ESPECIALES Uno de los efectos que más llama la atención es el de creación de un gif animado. Por dicha razón vamos a proceder a conocer y aplicar la forma correcta de manipular los nodos en figuras curvas. Veamos la secuencia de pasos para lograr dicho efecto con Fireworks. Para empezar creamos un documento nuevo de reducido tamaño (50x50). 5.4. son las figuras curvas ya que en su realización es básico el poder manipular los nodos de forma correcta.+F2). voy a observar que aparecen una serie de tiradores en cada uno de los nodos de dicha figura. Cuando selecciono con la herramienta subseleccion una figura curva. CREACIÓN DE FIGURAS COMPLEJAS En diseño. . Vamos al menú "Ventana" y activamos "Fotogramas" (Mayús. es decir aquel muñequito que presenta algún movimiento específico. podemos decir que las figuras que exigen el mayor tiempo de realización y lógicamente la mayor complejidad en su construcción.

acto seguido. EXPORTACIÓN Y OPTIMIZACIÓN DE IMÁGENES Fireworks es una poderosa herramienta que me permite optimizar imágenes en diferentes formatos. Al dar clic sobre el botón de Play. será crear un nuevo fotograma. El siguiente paso. . Le asignamos un nombre y en exportar seleccionamos HTML e imágenes. y parece que el gif padezca hiperactividad por exceso de estimulantes. Podemos añadirle transparencia alpha si queremos que su fondo sea transparente (evidentemente. copiamos el contenido del primero al segundo. Nos pedirá que introduzcamos un valor de tiempo en centésimas de segundos (100cs =1s) durante el cual será mostrado el fotograma en cuestión. la animación se sucede demasiado deprisa. como podemos observar. 6. en el escenario (panel propiedades). En la parte inferior del panel "fotogramas" hacemos clic a añadir fotograma: Veremos que el escenario de dibujo se vacía. eso es porqué el fotograma que acabamos de insertar está vacío. Eso lo podemos arreglar determinando el tiempo que queremos que se muestre cada frame. importar varios tipos de imágenes y además exportar mis creaciones en formatos conocidos. Vamos al menú "Archivo" y hacemos clic en "Exportar". IMPORTACIÓN. Y modificamos la dirección de la boca. empezamos con la animación. Pero si vamos al fotograma anterior. veremos que lo que dibujamos sigue ahí. Nos colocamos en el primer fotograma (de momento es el único que existe) y dibujamos una carita. debemos decir que no debe haber fondo) en estos casos.Bueno. Una vez esto. Como queremos que el segundo fotograma sea parecido al primero. Ahora hay que exportarlo: Nos aseguramos que en "Optimización" esta marcado como gif Animado (menú desplegable). Lo conseguiremos haciendo doble clic en un frame. para que simule una sonrisa.

La paleta de colores contiene hasta 216 colores.2 Optimizar mediante una opcion establecida Seleccione Ventana > Optimizar para abrir el panel Optimizar.  GIF WebSnap 256 Convierte los colores en su color seguro para la Web más parecido. Elegir un tipo de archivo Para personalizar la optimización seleccione un tipo de archivo específico en el menú emergente Formato del archivo de exportación (en el panel Optimizar) y.  GIF animado WebSnap 128 Define el formato del archivo como GIF animado y convierte los colores en sus correspondientes seguros para la Web más parecidos. 3 Haga clic en Salir en la ventana Resultados del análisis del asistente.  GIF adaptable 256 Sólo contiene los colores reales utilizados en el gráfico. como por ejemplo la . En el primer panel. elija Tamaño de archivo de exportación objetivo hasta que el archivo que optimiza alcance el tamaño máximo. 2 Responda a todas preguntas que aparecen y haga clic en Continuar en cada panel. La paleta de colores puede contener hasta 256 colores como máximo.  JPEG – Archivo más pequeño Define la calidad en 60 y el suavizado en 2 para conseguir un gráfico con la mitad del tamaño conseguido con la opción JPEG . 1 Seleccione Archivo > Asistente de exportación. La paleta de colores contiene hasta 128 colores. el resto de opciones del panel Optimizar se configuran de forma automática.6.  JPEG – Calidad superior Define la calidad en 80 y el suavizado en 0 para conseguir un gráfico de alta calidad y gran tamaño. a continuación. 6. La paleta de colores contiene hasta 128 colores. Si se selecciona una opción preestablecida.  GIF Web 216 Fuerza a que todos los colores sean seguros para la Web. Se abre la ventana Presentación preliminar de la imagen con las opciones de exportación recomendadas.  GIF WebSnap 128 Convierte los colores en su color seguro para la Web más parecido. La paleta de colores puede contener hasta 256 colores como máximo. ❖ Seleccione una opción preestablecida en el menú emergente Configuración del Inspector de propiedades o en el panel Optimizar.Calidad superior pero con una menor calidad.1 Utilizando el asistente de exportación El Asistente de exportación le guía en todo el proceso de la optimización y exportación. establezca las opciones específicas de formato.

no todos los navegadores Web pueden mostrar imágenes PNG. PNG El formato PNG (formato de gráficos de red portátiles) es un formato de gráfico Web muy versátil que admite profundidades de color de hasta 32 bits. el tramado y la calidad. TIFF El formato TIFF (Tagged Image File Format) es un formato de gráficos utilizado para almacenar imágenes de mapas de bits. muchas aplicaciones multimedia admiten archivos TIFF importados. imágenes que utilizan texturas. Los archivos GIF contienen un máximo de 256 colores. Este formato se utiliza en páginas WAP (Wireless Application Protocol). PICT Desarrollado por Apple Computer y normalmente utilizado en sistemas operativos Macintosh. puede contener transparencias o un canal alfa y puede ser progresivo. La mayoría de las aplicaciones Mac pueden importar imágenes PICT       CASO DOCUMENTADO En esta tercera guía académica podemos colocar como referencia el sitio http://greenhouse. completamente realizado en Fireworks. los archivos PNG de Fireworks contienen información adicional específica de la aplicación que no se almacena en un archivo PNG exportado o en archivos creados en otras aplicaciones. imágenes con transiciones de color en degradado o cualquier imagen que precise más de 256 colores. WBMP El formato WBMP (mapa de bits inalámbrico) es un formato de gráficos utilizado en dispositivos portátiles como teléfonos móviles y PDA.fedehartman. sólo se visualizan dos colores: blanco y negro. JPEG es el formato óptimo para fotografías digitalizadas.profundidad de color.  GIF El formato GIF (formato de intercambio de gráficos) es un conocido formato de gráfico Web idóneo para viñetas. Además. Las imágenes que contienen áreas de colores sólidos se comprimen mejor cuando se exportan como archivos GIF. imágenes con zonas transparentes y animaciones.html. BMP Es el formato de archivo gráfico de Microsoft Windows. . Muchas aplicaciones pueden importar imágenes BMP. Ya que WBMP es un formato de 1 bit. JPEG Es un formato desarrollado por el grupo Joint Photographic Experts Group específicamente para imágenes fotográficas. Aunque PNG es el formato de archivo nativo para Fireworks. Puede guardar los ajustes como una nueva configuración preestablecida. Sin embargo. El formato JPEG admite millones de colores (24 bits). logotipos.com/index. Los archivos TIFF se utilizan principalmente en las publicaciones impresas.

Elabore el siguiente banner: Dimensión 500 X 600 .PRÁCTICA EN CLASE Aplicando las herramientas vistas en clase. Elabore el siguiente logo: Dimensión 200 X 200 2. 1. elaborar los siguientes diseños.

3. . Tomar como modelo esta imagen para aplicar un efecto similar. Elabore el siguiente banner: Dimensión 400 X 400 4. Elabore la siguiente barra superior para un contenedor dimensión 210 X 25 5.

CONSULTAS Y LECTURAS POSTERIORES Para la guía de clase Nro. Trabajo desarrollado en clase. Cumplimiento en la lectura y aplicación de los temas relacionados como trabajo autónomo. van a ser los siguientes:     Asistencia a la asignatura.CRITERIOS DE EVALUACIÓN Los criterios de evaluación que van a ser considerados en el desarrollo de la asignatura. Puntualidad a la hora de presentación de trabajos extraclase. páginas de la 36 a la 84. 4 se recomienda haber leído y puesto en práctica las siguientes lecturas:  Manual de Fireworks CS4. .