1 / 63

DIPLOMADO DE PAGINAS WEB Fireworks

DIPLOMADO DE PAGINAS WEB Fireworks. Ing. Edison David Charry P 2013. CONTENIDO DEL DIPLOMADO. INFRAESTRUCTURA. Que es Dominio? Clasificación de los Dominios Genéricos o 1er nivel . com .net . org . edu . gov Estatales o 2do nivel . fr . co .es Tercer Nivel .com.es .gov.co

wesley-doyle
Download Presentation

DIPLOMADO DE PAGINAS WEB Fireworks

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. CONTENIDO DEL DIPLOMADO

  3. INFRAESTRUCTURA • Que es Dominio? • Clasificación de los Dominios • Genéricos o 1er nivel .com.net .org .edu .gov • Estatales o 2do nivel .fr .co .es • Tercer Nivel .com.es .gov.co • Otros: .tv .info. Museum .travel entre otros.

  4. INFRAESTRUCTURA • Que es el Hosting? • Tipos: • Gratuito www.000webhost.com • Compartido (Reventa) pocos comprometidos • Hosting VPS (Virtual Private Server) Dedicado consta de 9 niveles. Hostgator • Hosting especializado (ejemplo WordPress) • Cloud hosting(hosting en la nube)

  5. Y Que Falta? • Diseñar la Página Web • Diagramar la Página Web • Desarrollar la Página Web • Publicar la Página Web • Mercadear la Pagina Web • Administrar o Actualizar la Página Web

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

  7. Software de Diseño

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

  9. EJERCICIO MI PRIMER BANNER EN FIREWORKS Diseñe una pieza gráfica de 300 pixeles de ancho por 600 de alto El Objetivo es tomar lo que presenta la herramienta y crear sin conocimiento

  10. Imagen de Lienzo

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

  12. Modulo de Herramientas

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

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

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

  16. EJERCICIO MI PRIMER BANNER MEJORADO EN FIREWORKS Mejore la pieza gráfica de 300 pixeles de ancho por 600 de alto realizada en el ejercicio anterior El Objetivo es mejorar el banner realizado pero ahora con el conocimiento y la ayuda que dan las herramientas de dibujo.

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

  18. MODULOS COSTADO DERECHO • Cuales Son? • Para que sirven? • Como ayudan a mejorar mi diseño?

  19. OPTIMIZAR / HISTORIAL / ALINEAR

  20. OPTIMIZAR / HISTORIAL / ALINEAR

  21. OPTIMIZAR / HISTORIAL / ALINEAR

  22. PAGINAS / ESTADOS / CAPAS

  23. PAGINAS / ESTADOS / CAPAS Nuevo / Duplicar / Eliminar

  24. PAGINAS / ESTADOS / CAPAS

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

  26. EJERCICIO SIMULE LA PRIMERA PAGINA PRINCIPAL DE SU PAGINA WEB Condiciones • SOLO DIBUJO NO ANIMADO

  27. PROYECTO FINAL • Como se va a hacer • Para Qué • Que se va a utilizar • Elementos Gráficos a utilizar. • Tema

  28. RECOMENDACIONES • LOS ARCHIVOS DEBEN UBICARSE EN LA RAIZ DEL DISCO

  29. CREE SU BIBLIOTECA DE MEDIOS • IMÁGENES, TEXTOS ICONOS ETC..

  30. RECOMENDACIONES • DESARROLLE UN STORY BOARD DE LA PAGINA

  31. CREAR EL MAPA DE NAVEGACION • Realice el Modelo E-R del Menú • Mapa del sitio

  32. Elementos WEB Que son? Para que son? Cuales Existen ? Como los podemos hacer?

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

  34. BOTONES

  35. BOTONES

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

  37. Elementos WEB en Fireworks

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

  39. Elementos WEB en Fireworks 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 películas graficas en Gif Ver enlace http://www.vueloiv.com/blog/diseno-web-tendencias-2013/

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

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

  42. SI QUIERE LLEGAR A ESTO …

  43. TENGA EN CUENTA 1. Dibujar El Diseño en Papel

  44. TENGA EN CUENTA 2. Dibujar El Diseño Fireworks

  45. TENGA EN CUENTA 3. Utilizo las herramientas de mapa de Bits para exportarlas a HTML

  46. TENGA EN CUENTA 4. Desarrollo en documentos independientes las secciones que lleven efectos

  47. TENGA EN CUENTA 4. Exporto a HTML, y nombro la carpeta con el nombre de la sección

  48. TENGA EN CUENTA 5. Selecciono la opción de HTML e imágenes

  49. TENGA EN CUENTA 6. Creo un nuevo documento en Dreamweaver y lo guardo con extensión html por ejemplo index.html

More Related