DIPLOMADO DE PAGINAS WEBFireworks (Clase 1)Ing. Edison David Charry P

2013

CONTENIDO

Modulo 1

• Que es una Imagen ? • Representación grafica ?• Cuales son los formatos que existen• Cuales los más comunes y compatibles con la Web• Que es un Pixel (Picture Element) R,A,V?• Que es Fireworks?• Cuales son las versiones y para que sirve ?• Con que programas es compatible?• Acceso a Fireworks ()

Software de Diseño

Definición• Adobe Fireworks es una aplicación basada en la forma de estudio de

Adobe Flash pero con más parecido a un taller, destinado para el manejo híbrido de gráficos vectoriales con Gráficos en mapa de bits y que ofrece un ambiente eficiente tanto para la creación rápida de prototipos de sitios Web e interfaces de usuario, como para la creación y Optimización de Imágenes para web. La aplicación permite crear menús emergentes, rollover o imagenes de sustitución, un efecto muy conocido en donde una imagen existente en la página web es sustituida por otro cuando el puntero del ratón se posa sobre ella, restituyéndose cuando quitamos el puntero de ella. Originalmente fue desarrollado por Macromedia, compañía que fue comprada en 2005 por Adobe Systems.

• Fireworks está disponible de forma individual o integrado en Adobe CS3/CS4/CS5 y por tanto ha sido diseñado para integrarse con otros productos de Adobe, como Dreamweaver y Flash. En la Suite de Adobe se identifica por usar el color amarillo, color que venia usando como representación desde que pertenecía a Macromedia.

Modulo 2

• Que es el lienzo ?• Menú superior• Barra de herramientas• Herramientas adicionales• Que son los complementos• Efectos• Como optimizar una Imagen. • Alinear y Justificar• Ejercicio.

ESPACIO DE TRABAJO

Modulo de Herramientas

Modulo de Herramientas

Herramienta Puntero Herramienta Sub selecciónHerramienta RecortarHerramienta Inclinar

Herramienta Recuadro y Ovalo Herramienta Lazo y lazo poligonoHerramienta Varita mágica Herramienta Pincel

Herramienta BorradorHerramienta PincelHerramienta Desenfocar Herramienta Sello

Modulo de HerramientasHerramienta de Linea Herramienta Figuras

Herramienta Zona interactiva Herramienta DivisiónOcultar divisiones Mostrar divisiones y zonas

Herramienta de Pluma Herramienta de Texto

Herramienta de Estilo libre Herramienta Cuchilla

Cuentagotas Cubo de PinturaBordes y Fondos

Zoom y vistas

Timeline - Propiedades

Propiedades: Dimensiones, filtros texturas, tonos

Propiedades de Lienzo

Efectos adicionales a utilizar en manejo de imágenes

OPTIMIZAR ALINEAR Y ESTILOS

CONTENIDO

• Fireworks• Dreamweaver• Flash• Promoción de sitios Web /

Mercadeo

Modulo 3

• Que es una Capa ? • Cortar una foto?• Colores degradados • Herramienta de sub selección modificación de

figura (De circulo al ovalo)• Que es un Pixel (Picture Element) R,A,V?• Que es Fireworks?• Cuales son las versiones y para que sirve ?• Con que programas es compatible?• Acceso a Fireworks ()

Definición• Adobe Fireworks es una aplicación basada en la forma de estudio de

Adobe Flash pero con más parecido a un taller, destinado para el manejo híbrido de gráficos vectoriales con Gráficos en mapa de bits y que ofrece un ambiente eficiente tanto para la creación rápida de prototipos de sitios Web e interfaces de usuario, como para la creación y Optimización de Imágenes para web. La aplicación permite crear menús emergentes, rollover o imagenes de sustitución, un efecto muy conocido en donde una imagen existente en la página web es sustituida por otro cuando el puntero del ratón se posa sobre ella, restituyéndose cuando quitamos el puntero de ella. Originalmente fue desarrollado por Macromedia, compañía que fue comprada en 2005 por Adobe Systems.

• Fireworks está disponible de forma individual o integrado en Adobe CS3/CS4/CS5 y por tanto ha sido diseñado para integrarse con otros productos de Adobe, como Dreamweaver y Flash. En la Suite de Adobe se identifica por usar el color amarillo, color que venia usando como representación desde que pertenecía a Macromedia.

Modulo 4

• Que es el lienzo ?• Menú superior• Barra de herramientas• Herramientas adicionales• Que son los complementos• Efectos• Como optimizar una Imagen. • Alinear y Justificar• Ejercicio.

Modulo de Herramientas

Herramienta Puntero Herramienta Sub selecciónHerramienta RecortarHerramienta Inclinar

Herramienta Recuadro y Ovalo Herramienta Lazo y lazo poligonoHerramienta Varita mágica Herramienta Pincel

Herramienta BorradorHerramienta PincelHerramienta Desenfocar Herramienta Sello

Modulo de HerramientasHerramienta de Linea Herramienta Figuras

Herramienta Zona interactiva Herramienta DivisiónOcultar divisiones Mostrar divisiones y zonas

Herramienta de Pluma Herramienta de Texto

Herramienta de Estilo libre Herramienta Cuchilla

Cuentagotas Cubo de PinturaBordes y Fondos

Zoom y vistas

Propiedades: Dimensiones, filtros texturas, tonos

Efectos adicionales a utilizar en manejo de imágenes

OPTIMIZAR ALINEAR Y ESTILOS

Definir el Proyecto

Como Para Que

Que se Va a utilizarElementos gráficos.

Tema

Antes de Dibujar

1. Desarrolle un Story-board del sitio

2. Realice el Modelo E-R del Menú3. Tenga a mano la biblioteca de

medios que posiblemente utilizara para el desarrollo.

Elementos WEB en Fireworks1.Botones: (Estados Arriba, Sobre, Area activa,

Abajo, Acciones (Top,blank,self,parent), componentes Url, Alt,Estado) , utiles al momento de desarrollo del Modelo E – R (Descripción del Mapa del sitio.)

Pueden ser: Dinámicos, Tipo Banner, Estáticos

Elementos WEB en Fireworks

2.Menús : Es un conjunto de Botones, presentados en una lista de opciones que puede desplegar en una pagina Web (Horizontales, Verticales estructura de Árbol Padre – hijo), tipos normales, de verificación y submenú)

Pueden ser: Horizontales, Verticales, Texto, Gráficos, Secciones.

Elementos WEB en Fireworks

3. Manejo de Imágenes : Se presentan como el intercambio de imágenes al pasar el cursor del mouse, entregando información.

Representados como: Slideshows, secciones fijas con cambios de

imágenes

Elementos WEB en Fireworks

4. Interpolaciones o animados : Se presentan como imágenes animadas , estas se presentan en formato Gif

Representados como: Películas, Banners o botones animadosCinemagraph o peliculas graficas en Gif Ver enlace http://www.vueloiv.com/blog/diseno-web-tendencias-2013/

Tecla F8

1. Gráfico: Une los Elementos o Capas, convirtiendo en 1 solo elemento grafico editable sobre el lienzo2. Botón. Une los elementos seleccionados y les habilita las propiedades de Botón con sus estados, activa e elementos principales: URL destino, Alt Anuncio y Estado del Botón3. Animación: Habilita fotogramas para poder un Gif Animado.

Una vez Dibujado ..

1. Realice el corte de las secciones o piezas por desarrollar.

2. Exportelas en Codigo HTML3. Editelas por medio de Dreamweaver4. Elimine la imagen de corte e importe la

pieza desarrollada.Nota: No borre las carpetas objeto de los dibujos exportados, cree nuevas paginas html.

PASOS PARA DESARROLLAR UNA EXCELENTE PAGINA WEB1. Dibujar El Diseño

Etiquetas de HTMLTablas Listas

Etiquetas de HTMLTablas Listas

Etiquetas de HTMLTablas Listas

Etiquetas de HTMLTablas Listas