1. DATOS INFORMATIVOS:

Transcripción

1 1. DATOS INFORMATIVOS: MATERIA O MÓDULO: GRAFICACIÓN Y ANIMACIÓN CÓDIGO: CARRERA: NIVEL: INGENIERÍA EN SISTEMAS QUINTO No. CRÉDITOS: CRÉDITOS TEORÍA: 2 CRÉDITOS PRÁCTICA: 2 SEMESTRE / AÑO ACADÉMICO: Primer Semestre PROFESOR: Nombre: Grado académico o título profesional: Breve indicación de la línea de actividad académica: Indicación de horario de atención a estudiantes: Correo electrónico: Xavier Jiménez Álvaro Diseñador, Máster en Diseño, Diploma superior en asistencia académica y pedagogía del diseño Diseño gráfico, multimedia y web Arquitectura de marca, Comunicación estratégica y Gestión de diseño Viernes de 18h30 a 20h30 javijimenez19@hotmail.com xfjimenez@puce.edu.ec Teléfono: / DESCRIPCIÓN DE LA MATERIA: El curso está orientado al diseño y desarrollo de interfaces gráficas interactivas y web con énfasis en la usabilidad. Se utilizarán diversos métodos y técnicas para crear sus diversos componentes y se emplearán cuatro aplicaciones del paquete de diseño Adobe Creative Suite CS (Illustrator, Photoshop, Flash y Dreamweaver) 3. OBJETIVO GENERAL: Desarrollar en los participantes destrezas para la maquetación y construcción de interfaces gráficas interactivas y web y sus componentes fundamentales mediante el conocimiento y ejercitación en herramientas tecnológicas y la reflexión correspondiente a esta práctica.. OBJETIVOS ESPECÍFICOS: - Definir los aspectos fundamentales a tomar en cuenta para el desarrollo de una interface gráfica interactiva. - Diferenciar los elementos estructurales de la imagen, su clasificación, comportamiento y aplicaciones fundamentales. 1

2 - Identificar las características fundamentales para la animación gráfica de objetos y sus distintas aplicaciones en la interacción como intros, botones, banners, controles, etc. - Reconocer las distintas opciones en la maquetación de sitios web y la incorporación de elementos de imagen, animación, audio, video, etc. - Interrelacionar las distintas aplicaciones para la construcción de soluciones creativas y pertinentes y que promuevan la usabilidad en el desarrollo de interfaces gráficas. 5. CONTENIDOS Sesión Fecha Contenidos 1 17-ags 0. Introducción y preliminares 0.1 Presentación, objetivos, modalidad y evaluación del curso 0.2 Conceptos generales de interfaz Componentes Comunicación Interacción 0.3 Conceptos generales de usabilidad Eficiencia: facilidad y claridad Esfuerzo cognitivo Leyes de la simplicidad 0. Planificación del proceso de diseño de interfaces 1. Componentes de la interface 1.1 Forma y espacio Resolución de pantalla y área óptima Formas básicas y composición Ley de tercios e impares 1.1. Retículas 2 19-ags 1.2 Imágenes vectoriales Diferencias, características y uso Crear y visualizar un documento en AI Reglas, guías y grillas de dibujo 1.2. Herramientas de dibujo Dibujo de líneas, polígonos y planos Puntos de anclaje Práctica ags Recorte y modificación Rotación y transformación Color de contorno y relleno Uso de capas: ocultar y bloquear Exportar elementos de color y transparencia Raster de imágenes vectoriales y exportar a wmf Práctica ags Importar imágenes de mapa de bits Vectorizar imágenes bmp Trabajo con tipografía Tipografía en curvas y formas Exportar elementos vectoriales: outlines y respaldos Práctica ags 1.3 Imágenes de mapa de bits o pixelares Abrir y visualizar una imagen en Photoshop Tamaño y resolución: pixelado Recorte libre y con parámetros 1.3. Tamaño de documento y lienzo Capas y máscaras: modos de fusión Fotomontaje Práctica 2

3 Sesión Fecha Contenidos 6 02-sep Modos de color RGB y CMYK Ajuste manual y automático: contraste, brillo, curvas Selección geométrica y operaciones Selección libre y por rango de color Efectos de enfoque y desenfoque Calado de bordes y configuraciones Práctica sep Herramientas de pintura: pincel, aerógrafo, lápiz y borrador Herramienta clon Brushes, gradientes y motivos Utilizar el historial Transformación libre, distorsión y perspectiva Práctica sep Efectos en capas: sombras, relieves, texturas, etc Transparencia en sectores de imagen Formatos de archivo y propiedades: psd, jpg, gif, png Exportar imágenes con transparencia Acciones con lotes de imágenes Compresión de imágenes para web Práctica sep 1. Gif animado 1..1 Dibujo vectorial de un gif en Illustrator 1..2 Importar objetos inteligentes 1..3 Controlar los frames de animación en Photoshop 1.. Crear un gif en mapa de bits 1..5 Exportar: configuración 1..6 Visualización de gifs Práctica sep 1.5 Sonido y animación en power point Insertar y configurar sonido: mp3, wma, midi Insertar animaciones gif Transición de diapositivas y control manual 1.5. Animar objetos Botones de navegación y vínculos Patrón de diapositivas Práctica sep Entrega del proyecto 1 Autoevaluación del módulo 1 Presentación del proyecto 2 Objetivos y requerimientos sep 2. Interfaces gráficas animadas en Flash 2.1 Conceptos y animación básica Escenario, línea de tiempo, propiedades y paneles Clases de símbolos: Movie clip, gráfico y botón Clases de fotogramas 2.1. Dibujo vectorial en flash: características Interpolación de movimiento: leyes Práctica sep 2.2 Animación con múltiples símbolos e imágenes Importar imágenes pixelares Crear símbolos gráficos Animar con múltiples símbolos 2.2. Transformar instancias de símbolos Guías y máscaras de un símbolo Práctica sep 2.3 Botones y banners Interactividad básica: crear botones Control de estados Diseño de botoneras 2.3. Crear banners 3

4 Sesión Fecha Contenidos Trabajo con la biblioteca: duplicación de elementos Botones con transparencia Práctica oct 2. Animación avanzada 2..1 Morphing y Warphing; conceptos básicos 2..2 Interpolación de forma 2..3 Morphing de texto 2.. Shape hints para controlar animaciones 2..5 Crear Movie clips 2..6 Animación cuadro por cuadro 2..7 Herramienta huesos Práctica oct 2.5 Navegación y galería de imágenes Controles básicos: play( ) y stop( ) Galería de imágenes sin animación Galería de imágenes animada 2.5. Mapas de navegación Tipos de acciones Práctica oct 2.6 Botones con imágenes pixelares y transparentes Diseño de botones en Photoshop Optimizar mediante formato jpg o png Crear los distintos estados del botón 2.6. Optimizar flash para la web Práctica oct 2.7 Botones avanzados con sonido y animación Importar sonido a flash Formatos y calidades más adecuadas para la web Crear un botón con sonido 2.7. Poner sonido a una animación Crear un botón con una animación en el rollover Símbolos dentro de otros símbolos Práctica oct 2.8 Introducción a Action Script, niveles de interactividad Acciones básicas: goto (frame, label, escena) Links a archivos externos: geturl ( ) Instanciar un Movie Clip. Uso del SetProperty 2.8. Propiedades: posición X, posición Y, alpha, visibilidad, rotación, Xscale, Yscale y otros Diferencias entre Actionscript 2 y 3. Porque el AS3 está orientado al área de sistemas principalmente. Práctica oct 2.9 Objetos Drag & Drop Clips de película y botones dragueables Limitar un objeto que tiene propiedad de D&D Concepto de Slider Slider para interactuar con el usuario y modificar objeto en el escenario Herramienta de Huesos. Práctica oct 2.10 Random y control de sonido con Action Script Utilizar random() para crear situaciones al azar Control de Sonido en Flash. Creación de botones de on y off Manejo de volumen y paneo de sonido Botones animados para control de sonido Práctica oct Entrega del proyecto 2 Autoevaluación del módulo 2 Presentación del proyecto 3 Objetivos y requerimientos

5 Sesión Fecha Contenidos 23 0-nov 3. Interfaces gráficas web con Dreamweaver 3.1 Conceptos básicos Tipo de documentos utilizados en la web: html, css, php, etc Definir y crear un sitio web Utilizar el administrador de archivos 3.1. Operaciones básicas: crear una página, insertar, texto, imágenes y animaciones Vínculo de páginas y prueba en navegadores Uso de texto: elección de fuentes y modo de uso Práctica nov 3.2 Lenguaje html y vínculos Estructura del lenguaje Etiquetas comunes Vínculos absolutos y relativos Vínculos a otro sitio y a archivos: pdf, zip, doc, etc Vínculos a carpetas de otro sitio y mails Vínculos mediante imágenes: Image Maps: Múltiples links desde una solo imagen Vínculos mediante botones de texto Vínculos mediante botoneras Flash Comportamientos Java script de vínculos Práctica nov 3.3 Tablas y sectores de imágenes desde Photoshop Diagramación mediante tablas: fijas y variables Anidar tablas para configuraciones variables Preferencias: color, borde, cellpad, cellspace Área de resolución segura: tamaño óptimo de la web Photoshop como herramienta de diagramación Sectores de imágenes para banners y botones Práctica nov 3. Fondos optimizados y botones con esquinas redondeadas 3..1 Fondos con gradientes que se repiten en horizontal 3..2 Fondos en mosaico 3..3 Configuración de mosaico en photoshop 3.. Botones con bordes redondos 3..5 Botones ampliables y ajustables 3..6 Optimizar imágenes para fondos de marcos y pantalla Práctica nov 3.5 Botones con efectos en photoshop Sombras Reflejos Brillos 3.5. Brillos con canales y niveles Efectos 3d Practica nov 3.6 Estilos CSS. Hojas de estilo en cascada Importancia de los estilos: ventajas y desventajas Reglas css: selector y declaración Clases de estilos: de etiqueta, de clase y avanzados 3.6. Aplicación de estilos a etiquetas Componentes de la declaración de los estilos Nociones básicas para maquetación de sitios con CSS Etiqueta div id para estructurar páginas Práctica nov 3.7 Estilos CSS de clase y avanzados Padding y Margin, posición absoluta y relativa de elementos Aplicar estilos de clase a etiquetas de texto e imagen Etiquetas rollover para textos y botones 5

6 Sesión Fecha Contenidos 3.7. Configurar propiedades por defecto de la página Reubicar o modificar elementos cambiando los estilos Copiar estilos de página Práctica nov 3.8 Galería de imágenes con CSS Definir áreas y estilos para los componentes de la galería Estructura de estilos Crear las imágenes pares: botón e imagen desplegada 3.8. Aplicar los estilos con la propiedad invisible en la declaración Práctica dic 3.9 Menús y botones desplegables: Sprys Objetivo y modo de empleo Spry Tabbed Panels (crear paneles tabulados) Spry Accordion (crear paneles plegables) 3.9. Spry Collapsible Panel Archivos adicionales en CCS y Javascript Práctica dic 3.10 Formularios HTML Crear formularios Recoger información de usuarios Parámetros de un formulario html Parámetros URL Validación de formularios Formulario de contacto con CSS Práctica dic 3.11 Video y sonido en HTML Insertar archivos de video FLV sin necesidad de saber y/o tocar Flash Propiedades del control de video Insertar un video que esta subido a Youtube.com Smart objects de Photoshop (CS) Práctica dic 3.12 Cómo subir un sitio a la web? Concepto de un servidor remoto Configurando Dreamweaver con los datos del proveedor Subir archivos. Actualizar el sitio. Sincronizar los archivos Otras herramientas para hacer FTP: CuteFTP, FireFTP, etc.: ventajas y desventajas dic Entrega del proyecto 3 Autoevaluación del módulo 3 6. METODOLOGÍA, RECURSOS: Cada sesión se realizará en el centro de cómputo de la facultad utilizando computadoras Mac con software de diseño Adobe Creative Suite (CS) para cada estudiante. Mediante el acercamiento a los conceptos teóricos fundamentales y el desarrollo de ejercicios prácticos planificados para cada sesión se desarrollará los contenidos establecidos. De igual manera, en cada unidad se culminará con el desarrollo de un proyecto personal que motive y rete al estudiante a investigar soluciones innovadoras para los problemas planteados. La utilización de la pregunta y la participación del grupo en la resolución de los ejercicios será el centro del aprendizaje en el aula y de manera pertinente se incorporará materiales bibliográficos, audiovisuales y material digital de ejemplos para reforzar el aprendizaje de la materia. 6

7 7. EVALUACIÓN: CRONOGRAMA DE EVALUACIONES: La materia será evaluada mediante 30 prácticas y 3 proyectos de complejidad media. Durante cada clase se evaluará la práctica realizada y los estudiantes deberán enviar al profesor mediante correo electrónico los ejercicios culminados. La puntualidad del envío será considerado un requisito fundamental de evaluación acompañado a los requerimientos de cada ejercicio. Las fechas importantes de entrega y evaluación de los proyectos son los siguientes: Sesión Fecha Actividad 1 17 de agosto Inicio del semestre de septiembre Entrega y evaluación del primer proyecto de octubre Entrega y evaluación del segundo proyecto 33 9 de diciembre Fin de clases de diciembre Entrega y evaluación del tercer proyecto SISTEMA DE CALIFICACIÓN (puntaje asignado a pruebas parciales): Ítem Cantidad Puntaje Prácticas de clase pts. Proyecto pts. Proyecto pts. Proyecto 3 1 7pt. Total 50 pts. FECHA DE ENTREGA DE CALIFICACIONES EN SECRETARÍA: Se entregará las calificaciones de acuerdo a las fechas estipuladas en la programación de la facultad y se informará a los estudiantes y al coordinador permanentemente. 8. BIBLIOGRAFÍA: Textos de Referencia: - Adobe, (2008) Adobe Illustrator CS Guía del usuario, California: Adobe Systems Incorporated - Adobe, (2008) Adobe Photoshop CS Guía del usuario, California: Adobe Systems Incorporated - Adobe, (2008) Adobe Flash Profesional CS Guía del usuario, California: Adobe Systems Incorporated - Adobe, (2008) Adobe Dreamweaver CS Guía del usuario, California: Adobe Systems Incorporated Textos Recomendados: - Royo J.(200), Diseño Digital, Barcelona: Paidós - E-media, Guía de buenas prácticas para diseñadores Gráfica Web (manual digital) - Adobe (2007) Aprendizaje de Actions Script 2.0 en Flash, California: Adobe Systems Incorporated (libro digital) 7

8 - Pedregosa, M., Diseño y programación de páginas web, Desarrollo web (libro digital) Webs de referencia: Aprobado: Por el Consejo de Escuela f) Director de Escuela fecha: Por el Consejo de Facultad f) Decano fecha: 8

9 Asignatura: Graficación y Animación Organización Docente Semanal SEMANA (1-17) N de horas de clases teóricas ACTIVIDADES DE INTERACCIÓN DOCENTE - ESTUDIANTES (HORAS PRESENCIALES) N de horas de clases prácticas, laboratorios, talleres N de horas de tutorías especializadas TRABAJO AUTÓNOMO DEL ESTUDIANTE (HORAS NO PRESENCIALES) ACTIVIDADES (Descripción) N de horas EVALUACIONES TEMAS A TRATAR (N del tema, unidad, o capítulo descritos en Contenidos) 1 semana semana semana semana semana semana semana semana semana semana semana Entrega y evaluación proyecto 1 Entrega y evaluación proyecto 2 S1 y S2 0.,1, 1.1, 1.2 S3 y S 1.2 S5 y S6 1.3 S7 y S8 1.3 S9 y S10 1., 1.5 S11 y S12 2., 2.1 S13 y S1 2.2, 2.3 S15 y S16 2., 2.5 S17 y S18 2.6, 2.7 S19 y S20 2.8, 2.9 S21 y S

10 12 semana semana semana semana semana semana semana EXÁMENES Entrega y evaluación proyecto 2 S23 3, 3.1 S2 y S25 3.2, 3.3 S26 y S27 3., 3.5 S28 y S29 3.6, 3.7 S30 y S31 3.8, 3.9 S32 y S , 3.11 S3 y S