Download imágenes técnica medios

PROGRAMACIÓN ACADÉMICA
COORDINACIÓN ACADÉMICADISEÑO GRÁFICO
ESCUELA DE ARQUITECTURA Y DISEÑO
SEMESTRE 2011 – 02 / 5 JULIO al 12 NOVIEMBRE
FECHA PRESENTACIÓN:
5
7
2011
1. IDENTIFICACIÓN DEL CURSO
PROGRAMA ACADÉMICO:
DISEÑO
GRÁFICO
NOMBRE DEL CURSO:
Producción Digital
NRC DEL CURSO:
13269
No. DE CRÉDITOS:
2
CICLO:
DISCIPLINAR X
PROFESIONAL ____
INTEGRACIÓN ____
TIPO DE CURSO:
TEÓRICO ____
PRÁCTICO ____
TEO – PRÁCTICO X
EQUIPO DOCENTE:
x
DISEÑO
INDUSTRIAL
DISEÑO
VESTUARIO
ARQUITECTURA
NOMBRE DE CADA
FIJOy
DOCENTE +
CELULAR
SU CORREO ELECTRÓNICO
T. DE VINCULACIÓN
CAROLINA QUIMBAY
[email protected]
3003630604
HC ___
TC X
MT ___
ROYLAN GALEANO OSPINA
[email protected]
3006542514
HC ___
TC ___
MTX
INTENSIDAD SEMANAL:
HORAS
PRESENCIALES:4
HORAS
TUTORIALES:
HORARIOS:
MARTES 2:00 P.M – 5:20 P.M
MIÉRCOLES 8:00 A.M – 12:00 P.M
MIÉRCOLES 2:00 P.M – 5:20 P.M
HORAS
AUTÓNOMAS: 2
AULAS: Bloque 9, Aula 125
AULAS: Bloque 9, Aula 213
2. CONCEPCIÓN DEL CURSO
DESCRIPCIÓN DEL CURSO:
Introduce al estudiante en las técnicas, conceptualización, lenguajes html,
css, action script 2, perfilación de usuarios y arquitectura de la información,
de manera que le permiten crear piezas gráficas digitales tales como: Micro
sitios web, ilustración digital, estereoviews, animaciones interactivas en flash
e íconos para software y sitios web, guiándolo a través de ejercicios prácticos
de manera que conozca los formatos, plataformas, técnicas y características
y el lenguaje de programación requerido en la materialización de éstas.
RECOMENDACIONES
(SABERES PREVIOS):
Geometría del diseño I y II, Illustrator, Photoshop, Flash y Dreamweaver.
Al finalizar el curso el estudiante estará en capacidad de:
METAS DE APRENDIZAJE:

Generar y optimizar insumos gráficos para piezas digitales





OBJETIVO GENERAL:
Explorar las posibilidades y características de los medios digitales interactivos
y entornos multimedia para su: concepción, construcción y análisis.



OBJETIVOS ESPECÍFICOS:



DETERMINACIÓN DE
COMPETENCIAS:
Crear sistemas de iconos optimizados para medios digitales
Elaborar un sitio web básico con css y html 4.
Elaborar banners en flash con interactividad básica en action script 2
Elaborar animaciones pseudo 3d con estereoviews
Evaluar críticamente sitios web a partir de su lenguaje grafico,
interactividad e información




Conocer los elementos que conforman las interfaces de usuario y los
principios de la interacción humano-computador.
Reconocer la estructura y las características de la información y la
imagen digital, mediante la comprensión y aplicación de conceptos
como navegación, interacción y actualización.
Conocer los procesos productivos, las etapas, plataformas y
proveedores de software y herramientas de producción de las piezas
gráficas digitales.
Identificar los diferentes soportes y formatos que estructuran las
imágenes digitales.
Aprender a interactuar con los diferentes profesionales y proveedores
que intervienen en la producción digital basados en tecnologías de
información y comunicación TIC.
Conoce las características y elementos constitutivos de la imagen
digital de manera optima.
Construye imágenes digitales óptimas.
Conoce las herramientas e interfaces que nos permiten crear
imágenes, textos e hipertextos.
Conoce y articula las herramientas que debe utilizar en los diferentes
procesos dependiendo de las características del producto digital.
Conoce su posición frente al trabajo interdisciplinario
3. ORGANIZACIÓN DEL TRABAJO ACADÉMICO
1. Diseño de Interacción:
 Definición de Interactividad
 Diseño Digital Vs. Diseño Impreso
 E-book
 Casos y usos
CONTENIDOS:
2. La gráfica digital:
 El píxel
 Profundidad del color
 Imagen Vectorial – imagen Bitmap
 Formatos de imagen
 Píxel art, Ascii art, Vector art, Modelado 3D, fotografia HDR.
3. Estructura de la información:
 Arquitectura de la información
 Como escribir para medios digitales
 Perfil de usuarios
 Estructuras de navegación
 Diagrama de contenidos (Mapa de navegación)
 Manual de estilos
 Formato PDF
4. Interface de usuario:
 Historia, evolución y categorías
 Menú de navegación
 Jerarquías visuales
 Usabilidad
 Tecnologías y Estado del arte
 Diseño de iconos
5. Internet, más que Web
 Diseño para Internet, historia, características, evolución
 Análisis de sitios Web
 Estrategia conceptual y comunicativa para un sitio Web
 Comunicación y relación Cliente – diseñador – proveedor:
Elaboración de cotizaciones.
6. Multimedia
 El guión multimedia
 Offline Vs Online
 Categorías y aplicaciones
 Herramientas para la producción
 Audio digital
 Video digital
7. Producción:
 Metodología de desarrollo en diseño web: Roles y funciones
 HTML 4
 Estilos en cascada CSS
 Photoshop
 Fireworks
 Dreamweaver
 Flash
CRONOGRAMA DE ACTIVIDADES
FECHA
CONTENIDO / ACTIVIDAD
RECURSOS
Presentación del curso.
Conversatorio: Diseño digital Vs Diseño impreso
Semana 1
Julio 5 - 6
El libro electrónico - E-book.
Interactividad, definición intuitiva.
Ejercicio: Impreso interactivo.
Interactividad, definición teórica.
Presentación: Impreso interactivo
-------
Semana 2
Julio 12 - 13
Video Beam
Imagen vectorial – Imagen bitmap: Formatos y
características
Antialias
OBSERVACIONES
Entrega: Impreso interactivo
Color digital y profundidad del color,
características del píxel, paletas: rgb, hsb.
Código hexadecimal.
------Semana 3
Julio 19
Píxel art, Ascii art, Vector art, Modelado 3d, Hdr.
Conexión a Internet,
Video Beam
Clínica de Photoshop e illustrator: Compartir
técnicas para eliminar fondos de bitmaps,
importar vectores, antialiasing etc
Ejercicio: Expresión vectorial y bitmap, collage
temático (definir tamaño y temática)
Entrega: Expresión vectorial y bitmap,
Ejercicio: Pixel art o Stereoview, composición o
avatar
Arquitectura de la información
Como escribir para medios digitales
Semana 4
Julio 26 - 27
Diagrama de contenidos.
Conexión a Internet,
Video Beam
El Usuario
------Taller en clase: Perfil de usuario y Diagrama de
contenidos.
Entrega: Pixel art o Stereoview
Interacción computacional
Formularios digitales
Jerarquías visuales
Semana 5
Agosto 2 - 3
Menús de navegación: Ejemplos
Conexión a Internet,
Video Beam
------Taller en clase: Menú de navegación:
Corrección idea inicial.
Ejercicio: Menú de navegación
Corrección: Menú de navegación.
Semana 6
Agosto 9 - 10
Entrega: Formularios digitales
-------
Conexión a Internet,
Video Beam
Sistemas de íconos.
Ejercicio: Sistema de iconos, acciones básicas y
una acción compleja.
Entrega: Menú de navegación.
Corrección: Sistema de iconos.
-------
Semana 7
Agosto 16 - 17
Interfaces gráficas GUI: Historia y diseño
(usabilidad)
Conexión a Internet,
Video Beam
Metodología de desarrollo de sitios Web, roles y
funciones.
Manual de estilos
Formato PDF
Entrega: Sistema de iconos.
Técnicas para la producción: Html, html 5,
javascript, flash, rss, css, cms (joomla y
wordpress), blogs, redes sociales.
Técnica digital – Html
Ejercicio en clase: Texto y tablas en html
Semana 8
Agosto 23 - 24
Ejercicio: Análisis de un sitio Web:look and feel,
Interacción, programación, lenguaje y tono,
navegación y estructura de contenidos y publico
objetivo,
Conexión a Internet,
Video Beam
(Definir categorías a observar: Aplicaciones,
tiendas, redes sociales, portafolios, eventos,
productos, moda, blogs, portales … ), contexto
colombiano
Presentación en clase: Análisis de un sitio Web
Semana 9
Agosto 30 - 31
------Técnica digital – Photoshop, Fireworks
Técnica digital – Fireworks: Herramientas
básicas, ejercicio con slices, exportación como
html e imágenes
Semana 10
Sept 6 - 7
------Técnica digital – Dreamweaver: Definición de
sitio con carpeta raíz, edición de html, creación
Conexión a Internet,
Video Beam
Conexión a Internet,
Video Beam
de hoja de estilos, hipervínculos, imágenes,
tablas …
Técnica digital – Dreamweaver y css
Semana 11
Sept 13 - 14
Conexión a Internet,
Video Beam
------Técnica digital – Flash
Técnica digital – Flash
Semana 12
Sept 20 - 21
Semana 13
Sept 27 - 28
------Video Beam
Ejercicio: Micro sitio en html y flash
Seguimiento y desarrollo de ejercicio final
Semana 14
Oct 4 -5
Seguimiento y desarrollo de ejercicio final
Semana 15
Oct 11 - 12
Seguimiento y desarrollo de ejercicio final
Semana 16
Oct 18 -19
Seguimiento y desarrollo de ejercicio final
Semana 17
Oct 25 -26
Conexión a Internet,
Video Beam
Video Beam
Video Beam
Entrega final
4. REFERENCIA BIBLIOGRÁFICA
Yale C/AIM (Web Style Guide,1997).
Lynch and Horton
Garrett, Jesse James. The Elements of Users
Experience. New Riders. New York, 2003
Bou, G. El guión multimedia. Anaya, Madrid,
1997.
MATERIAL
BIBLIOGRÁFICO:
TEXTOS GUÍA:
Kristof, Ray., Satran, Amy. Diseño Interactivo.
Biblioteca Profesional de Diseño. Anaya
Multimedia. Madrid, 1998.
Caplin, Steve. Diseño de iconos. Gustavo Gili,
2001.
Tidwell, Jenifer. Designing Interfaces. O’Reilly,
2006.
Saffer, Dan. Designing for interaction. New
Riders,2007.
Brown, Dan. Communicating Design. New
Riders, 2007.
+ URLs recomendadas según el tema.
+ Revista I.D.
TEXTOS Y/O DOCUMENTOS
COMPLEMENTARIOS:
+ Revista How
+ Revista Communication Arts
5. METODOLOGÍA
Curso teórico con algunos ejercicios prácticos.
Clases magistrales: Teóricas y de manejo de software
Proyección de presentaciones ppt / flash
Invitados especiales, lectura de documentos, investigación por parte de los alumnos, taller de diseño.
6. EVALUACIÓN
CRITERIOS DE EVALUACIÓN
¿Qué se evalúa? - ¿Cómo se evalúa?
Ejercicio: Interactividad
Se evalúa la pertinencia y recursividad de los recursos interactivos empleados
PORCENTAJES
ASIGNADOS
10 %
Ejercicio: Collage vectorial + bitmap.
Se evalúa la aplicación de las técnicas y concepto para desarrollar este gráfico.
10 %
Ejercicio: Composición Píxel art o Stereoview
Se evalúa la aplicación del estilo de imagen digital escogido
10 %
Ejercicio: Elaboración de diagramas de contenido y perfil de usuario
Se evalúa la claridad conceptual, teórica y formal de estas piezas impresas.
5%
Ejercicio: Diseño de formulario
Se evalúa innovación, coherencia temática y facilidad de uso.
5%
Ejercicio: Menú de navegación
Se evalúa innovación, coherencia temática y facilidad de uso.
15 %
Ejercicio: Sistema de iconos, acciones básicas y una acción compleja.
Se evalúa calidad técnica de la imagen y claridad conceptual de la representación.
Ejercicio: Investigación en Internet – Análisis pagina web
Se evalúa la calidad y claridad de la exposición y los datos analizados
15 %
5%
Ejercicio: Micrositio en html, css y flash
Se evalúa la calidad técnica y correcto uso del Dreamweaver, Flash y Fireworks
para el diseño y construcción de un micrositio web.
25 %
7. CRONOGRAMA DE ENTREGAS
TEMA PROYECTO
FECHA
1 Impreso interactivo
Julio 12 - 13
2 Expresión análoga y digital
Agosto 2 - 3
3 Pixel art
Julio 26 – 27
Elaboración de diagramas de contenido y perfil Julio 26 - 27
4 de usuario
5 Diseño de formulario
Agosto 9 - 10
5 Menú de navegación
Agosto 16 - 17
6 Sistema de íconos
Agosto 23 - 24
7 Presentación de la investigación
Agosto 30 - 31
8 Micro sitio en html y flash
Oct 25 -26
8. PARA TENER EN CUENTA EN CLASE – REGLAS DEL JUEGO
Calificaciones desde 0 a 5
Con 6 faltas de asistencia se cancela la materia
No hay entregas extemporáneas
Auto motivación y responsabilidad al usar la conexión permanente a Internet
MATERIALES
Computador con acceso a Internet
Papel, colores, marcadores para prototipos