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

Presentación del tema: "DIPLOMADO DE PAGINAS WEB Fireworks (Clase 1) Ing. Edison David Charry P 2013."— Transcripción de la presentación:

1 DIPLOMADO DE PAGINAS WEB Fireworks (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. Adobe Flashmapa de bitsOptimizaciónMacromediaAdobe 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.DreamweaverFlashMacromedia

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

8

9 Modulo de Herramientas

10 Herramienta Puntero Herramienta Sub selección Herramienta Recortar Herramienta Inclinar Herramienta Recuadro y Ovalo Herramienta Lazo y lazo poligono Herramienta Varita mágica Herramienta Pincel Herramienta Borrador Herramienta Pincel Herramienta DesenfocarHerramienta Sello

11 Modulo de Herramientas Herramienta de Linea Herramienta Figuras Herramienta Zona interactivaHerramienta División Ocultar divisionesMostrar divisiones y zonas Herramienta de Pluma Herramienta de Texto Herramienta de Estilo libre Herramienta Cuchilla CuentagotasCubo de Pintura Bordes y Fondos Zoom y vistas

12 Timeline - Propiedades Propiedades: Dimensiones, filtros texturas, tonos Propiedades de Lienzo

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. Adobe Flashmapa de bitsOptimizaciónMacromediaAdobe 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.DreamweaverFlashMacromedia

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.

18

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

20 Modulo de Herramientas Herramienta de Linea Herramienta Figuras Herramienta Zona interactivaHerramienta División Ocultar divisionesMostrar divisiones y zonas Herramienta de Pluma Herramienta de Texto Herramienta de Estilo libre Herramienta Cuchilla CuentagotasCubo 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 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.

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

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.. 1.Realice el corte de las secciones o piezas por desarrollar. 2.Exportelas en Codigo HTML 3.Editelas por medio de Dreamweaver 4.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