DIPLOMADO DE PAGINAS WEB Fireworks (Clase 1)

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

2. CONTENIDO

3. 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 ()

4. Software de Diseño

5. 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.

6. 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.

7. ESPACIO DE TRABAJO

9. Modulo de Herramientas

10. Modulo de Herramientas Herramienta Sub selección Herramienta Puntero Herramienta Recortar Herramienta Inclinar Herramienta Recuadro y Ovalo Herramienta Lazo y lazo poligono Herramienta Varita mágica Herramienta Pincel Herramienta Pincel Herramienta Borrador Herramienta Desenfocar Herramienta Sello

11. Modulo de Herramientas Herramienta de Linea Herramienta de Pluma Herramienta de Texto Herramienta Figuras Herramienta Cuchilla Herramienta de Estilo libre Herramienta Zona interactiva Herramienta División Ocultar divisiones Mostrar divisiones y zonas Cuentagotas Cubo de Pintura Bordes y Fondos Zoom y vistas

12. Timeline - Propiedades Propiedadesde Lienzo Propiedades: Dimensiones, filtros texturas, tonos

13. Efectos adicionales a utilizar en manejo de imágenes OPTIMIZAR ALINEAR Y ESTILOS

14. CONTENIDO • Fireworks • Dreamweaver • Flash • Promoción de sitios Web / Mercadeo

15. 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 ()

16. 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.

17. 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.

19. Modulo de Herramientas Herramienta Sub selección Herramienta Puntero Herramienta Recortar Herramienta Inclinar Herramienta Recuadro y Ovalo Herramienta Lazo y lazo poligono Herramienta Varita mágica Herramienta Pincel Herramienta Pincel Herramienta Borrador Herramienta Desenfocar Herramienta Sello

20. Modulo de Herramientas Herramienta de Linea Herramienta de Pluma Herramienta de Texto Herramienta Figuras Herramienta Cuchilla Herramienta de Estilo libre Herramienta Zona interactiva Herramienta División Ocultar divisiones Mostrar divisiones y zonas Cuentagotas Cubo de Pintura Bordes y Fondos Zoom y vistas

21. Propiedades: Dimensiones, filtros texturas, tonos

22. Efectos adicionales a utilizar en manejo de imágenes OPTIMIZAR ALINEAR Y ESTILOS

23. Definir el Proyecto Como Para Que Que se Va a utilizar Elementos gráficos. Tema

24. Antes de Dibujar • Desarrolle un Story-board del sitio • Realice el Modelo E-R del Menú • Tenga a mano la biblioteca de medios que posiblemente utilizara para el desarrollo.

25. Elementos WEB en Fireworks 1.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

26. Elementos WEB en Fireworks 2.Menús : Es un conjunto de Botones, presentados en unalista 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.

27. 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

28. 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 animados Cinemagraph o peliculas graficas en Gif Ver enlace http://www.vueloiv.com/blog/diseno-web-tendencias-2013/

29. Tecla F8 1. Gráfico: Une los Elementos o Capas, convirtiendo en 1 solo elemento grafico editable sobre el lienzo 2. 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ón 3. Animación: Habilita fotogramas para poder un Gif Animado.

30. Una vez Dibujado .. • Realice el corte de las secciones o piezas por desarrollar. • Exportelas en Codigo HTML • Editelas por medio de Dreamweaver • Elimine la imagen de corte e importe la pieza desarrollada. Nota: No borre las carpetas objeto de los dibujos exportados, cree nuevas paginas html.

31. PASOS PARA DESARROLLAR UNA EXCELENTE PAGINA WEB 1. Dibujar El Diseño

32. Etiquetas de HTML Tablas Listas

33. Etiquetas de HTML Tablas Listas

34. Etiquetas de HTML Tablas Listas

35. Etiquetas de HTML Tablas Listas