CURSO DE DISEÑO DE PÀGINAS WEB

Transcripción

1 CURSO DE DISEÑO DE PÀGINAS WEB Fireworks CS3 DREAMWEAVER CS3 FLASH CS3 Objetivo: Aplicar los conocimientos aprendidos en el diplomado para desarrollar sitios web atractivos con navegación sencilla, interactiva y dinámica. Dirigido a: Quienes de manera personal y/o profesional deseen crear sitios web.. 1

2 Inicio FIREWORKS CS3 Introducción: Aplicación enfocada al desarrollo de interfases para web, además del manejo y manipulación de gráficos vectoriales como en mapa de bits, agregando animación o de forma estática sin olvidar el uso de la interacción en dichas interfases e imágenes. Objetivos: El conocimiento de la interfaz del programa, entendimiento de sus funciones principales y el empleo de las herramientas. TEMAS: Introducción y bases de diseño 1 Importancia de la integración de imagen a proyectos Web. 1.2 Terminologías Vector Mapa de Bits Capa Fotogramas Lienzo 1.3 Tipos de archivos de imagen. 1.4 Diferencias de procesos de imagen en proyectos Web Creación Edición Animación de gráficos Integración e interactividad 1.5 Ventajas del manejo de imagen en capas 2. Procesos de arranque 2.1 Creación de un nuevo archivo 3. Diseño de interfase 3.1 Área de trabajo: 3.2 Espacio de trabajo (organización de ventanas y paneles) 3.4 Panel de propiedades 3.5 Herramientas de selección 3.6 Herramientas de creación y edición de Mapa de bits 3.7 Herramientas de creación y edición de Vectores 3.8 Panel de color 3.9 Panel de visualización del diseño de interfase 2

3 FIREWORKS CS3 4. Procesos Especiales 4.1 Creación de Formas vectoriales 4.2 Importación de imágenes. 4.3 Herramientas de selección. 4.4 Uso del panel de alineación 5. Uso del color, filtros y fusión (Blend mode) 5.1 Aplicación de paleta de colores 5.2 Creación de gradientes 5.3 Texturas 5.4 Filtros 5.5 Fusión. 6. Creación de Simbolos 6.1 Tipos Gráficos Animación Botones (Interacción). 8. Animación de imágenes 9. Presentación en navegador Web 10. Exportación a formatos de imagen 10.1 Formato nativo 10.2 Selección de formato óptimo (previsualización) 10.3 Optimizado para Web 10.4 Exportación de archivos html 11. Exportación a otras aplicaciones 11.1 A Dreamwever 11.2 A Flash Las herramientas de texto. Los tipos de edición de texto. Efectos que se aplican al texto. 7. Herramientas Web 7.1 Insertar Hotspot 7.2 Insertar Slices (Swap image) 7.3 Uso de Comportamientos 3

4 Inicio DREAMWEAVER CS3 Introducción: Aplicación de gran poder en el desarrollo de sitios Web, agregando elementos vistosos y muy útiles. Maneja el formato html, aunque tiene posibilidades de trabajar en otros formatos propios para Internet. Es un programa accesible y compatible con otras aplicaciones de diseño. La estructura de. este programa permite el trabajo en código, diseño o ambos. Objetivos: Conocimiento del programa, entender el flujo de trabajo y lógica, sin olvidar del aprovechamiento total de las herramientas, que lo caracterizan.. Temas 1. -Terminologías y uso del HTML 1.1 Estructura de un documento en HTML 1.2 Términos de desarrollo Web 1.3 Etiquetas iniciales y más usadas 2. Desarrollo-de un sitio Web 2.1 Inicio del desarrollo del sitio Web 2.2 Alta y edición de un sitio 2.3 Manejo dé sitios Web desarrollados 3. Entorno de trabajo 3.1 Diseño de interface 3.2 Vista de desarrollo 3.4 Selección de extensión 3.5 Propiedades de la página 3.6 Panel de propiedades 3.7 Ventanas de trabajo (activación/desactivación) Elementos para insertar 4. Inserción de elementos 4.1 Texto 4.2 Imágenes 4.3 Links básicos 4.4 Capas (layers) Inserción de elementos en capas 4.5 Tablas Manejo de tablas y elementos propios 4

5 Inicio DREAMWEAVER CS3 5. Hipervínculos y comportamientos 5.1 En diversos elementos 5.2 Marcadores 5.3 Destinos (targets) _blank _parent _self _top 5.4 Rollover image 5.5 Barra de navegación 5.6 Botones en formato Flash 5.7 Mapa sensible (hotspot) 6. Manejo de Framework Spry 6.1 Desarrollo Spry Tabbed Panel 6.2 Desarrollo Spry Acordeon 6.3 Desarrollo Spry Collapsible Panel 7. Inserción diversa 7.1 Archivos de Flash 7.2 Texto tipo Flash 7.3 Applets 7.4 Plugin 7.5 Integraciñon con Fireworks 7.6 Tags 7.7 Caracteres especiales 7.8 Elementos javascript en código 8. Creación de formularios y prácticas en CSS 9. Puesta del sitio en la red 9.1 Métodos administrativos, cambio y actualización 9.2 Configuración de acceso vía FTP interno 5

6 FLASH CS3 Introducción: Herramienta de excelente nivel para el desarrollo de sitios Web de alto impacto, utilizando animaciones y procesos que permiten la interacción con el usuario final, incorpora imágenes, programación intuitiva, elementos de navegación, además de elementos sonoros y video. Objetivos: Conocimiento del programa, entender el flujo de trabajo y lógica, sin olvidar de! aprovechamiento total de las herramientas que lo acompañan. Temas: 1. Bases de uso y manejo 1.1 Terminologías 1.2 Conocimiento de interfase 1.3 Determinación de área de trabajo 1.4 Finalidad de las herramientas 2. Herramientas y ventanas de trabajo 2.1 Herramientas de trazo y uso 2.2 Herramientas de selección en vectores y mapas de bits 2.3 Activación y desactivación de ventanas de trabajo Propiedades Barras de herramientas Biblioteca Acciones Alineación 2.4 Escalado, rotación y sesgado 2.5 Elementos y herramientas de dibujo 3. Paneles 3.1 Escenario 3.2 Escena 3.3 Línea de Tiempo (Timeline) 3.4 Capas y propiedades de capa 3.5 Frames y propiedades de frame 4. Ajuste de trabajo 4.1 Ajuste de propiedades de escena 4.2 Apertura nuevo archivo 4.3 Apertura de archivo previo 4.4 Importación de archivos externos a escena 6

7 Inicio FLASH CS3 5. Símbolos 5.1 Clip de película 5.2 Botón 5.3 Gráfico 5.4 Inserción a Biblioteca y agregado a escena 5.5 Cambio de comportamientos 5.6 Cambio de un vector o un bitmap a símbolo 6. Propiedades de la película 6.1 Unidades de medida 6.2 Tamaño 6.3 Fondo 7. Capas 7. 1 Creación y eliminación de capas 7.2 Visualización e importancia del bloqueo de capas 7.3 Manejo de mascaras 8. Trabajo en ventanas 8.1 Efectos 8.2 Agregado de escenas 8.3 Acciones 8.4 Compilación y ejecución de película 9. Texto e imagen 9.1 Insertar texto 9.2 Modificación de propiedades de texto 9.3 Introducción de cuadros de texto dinámicos 9.4 Desarrollo de formularios electrónicos básicos 9.5 Formatos de imagen permitidos 9.6 Manipulación de imagen 10. Procesos de animación 10.1 Animación cuadro a cuadro 10.2 Animación vía Movimiento (motion tweening), 10.3 Animación vía Forma (motionshape) 10.4 Creación de animación utilizando una capa guía 7

8 FLASH CS3 11. Sintaxis de acciones básicas (actionscript), 11.1 Control de línea de tiempo stop() play() gotoandplay gotoandstop on on (press) on (realase) Combinación de sentencias 11.2 Navegador/Red Carga de archivos SWF utilizando loadmovie Asignación de link vía geturl Pantalla vía fscommand 12. Importación y usos de formatos de sonido y audio 12.1 Formatos e importación 12.2 Integración de sonido y video a comportamientos 13. Publicación final 13.1 Puesta en página Web 13.2 Creación de SWF Integrado HTML Formatos de imagen Archivos de proyectos.exe y Mac Proyecto de video 14. Instalación de Plug-in 14.1 Plataforma 14.2 Actualización 15. Integración con otros programas de la Suite Adobe CS Fireworks CS Ilustrator CS Photoshop CS3 8