ProduccionDigital_2012-10-v1

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:
19
1
2012
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
FIJO y
DOCENTE +
CELULAR
SU CORREO ELECTRÓNICO
T. DE VINCULACIÓN
CAROLINA QUIMBAY
carolina.quimbay@upb.edu.co
3003630604
HC ___
TC X
MT ___
ROYLAN GALEANO OSPINA
rdgaleano@gmail.com
3006542514
HC X
TC ___
MT___
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
c 17 - 18
El libro electrónico - E-book.
Interactividad, definición intuitiva.
Ejercicio: Impreso interactivo.
Interactividad, definición teórica.
Presentación: Grados de la interaccion
-------
Semana 2
Enero 24 - 25
Video Beam
Imagen vectorial – Imagen bitmap: Formatos y
características 800 X 500, PNG . camuflaje
Antialias
OBSERVACIONES
Entrega: Impreso interactivo
Color digital y profundidad del color,
características del píxel, paletas: rgb, hsb.
Código hexadecimal.
------Semana 3
Enero 31 – Feb 1
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
Febrero 7 - 8
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
Febrero 14 - 15
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
Febrero 21 - 22
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
Febrero 28 - 29
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.
------Semana 8
Marzo 6 - 7
Estado del arte en diseño web
Conexión a Internet,
Video Beam
Técnicas para la producción: Html, html 5,
javascript, flash, rss, css, cms (joomla y
wordpress), blogs, redes sociales.
Taller: Técnica digital Html
Ejercicio en clase: Texto y tablas en html
Semana 9
Marzo 13 - 14
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 10
Marzo 20 - 21
Técnica digital – Fireworks: Herramientas
básicas, ejercicio con slices, exportación como
html e imágenes
Conexión a Internet,
Video Beam
Semana 11
Marzo 27 - 28
Técnica digital – Dreamweaver: Definición de
sitio con carpeta raíz, edición de html, creación
de hoja de estilos, hipervínculos, imágenes,
tablas …
Conexión a Internet,
Video Beam
------Técnica digital – Flash
Técnica digital – Flash
Semana 12
Abril 3 - 4
Semana 13
Abril 10 - 11
Semana 14
Abril 17 - 18
Semana 15
Abril 24 - 25
Semana 16
Mayo 1 - 2
Semana 17
Mayo
------Video Beam
Ejercicio: Micro sitio en html y flash
Seguimiento y desarrollo de ejercicio final
Seguimiento y desarrollo de ejercicio final
Conexión a Internet,
Video Beam
Seguimiento y desarrollo de ejercicio final
Video Beam
Seguimiento y desarrollo de ejercicio final
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
Ejercicio: Collage vectorial + bitmap.
Se evalúa la aplicación de las técnicas y concepto para desarrollar este gráfico.
PORCENTAJES
ASIGNADOS
10 %
10 %
Ejercicio: Composición Píxel art o Stereoview
Se evalúa la aplicación del estilo de imagen digital escogido
0%
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.
20 %
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
20 %
5%
Ejercicio: Micrositio en html, css y flash. Propuesta portal Revista Ingenio
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
Enero 24 - 25
2 Expresión análoga y digital
Febrero 7 - 8
3 Pixel art
Elaboración de diagramas de contenido y perfil Febrero 7 - 8
4 de usuario
5 Diseño de formulario
Febrero 14 - 15
5 Menú de navegación
Febrero 28 - 29
6 Sistema de íconos
Marzo 13 - 14
7 Presentación de la investigación
Marzo 20 - 21
8 Micro sitio en html y flash
Mayo
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