Download ProduccionDigital_2012-20-v2

PROGRAMACIÓN ACADÉMICA
COORDINACIÓN ACADÉMICADISEÑO GRÁFICO
ESCUELA DE ARQUITECTURA Y DISEÑO
SEMESTRE 2012 – 02 / 5 JULIO al 12 NOVIEMBRE
FECHA PRESENTACIÓN:
5
7
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
HC ___
TC X
MT ___
HC X
TC ___
MT___
ROYLAN GALEANO OSPINA
rdgaleano@gmail.com
3003630604
3006542514
CAMILO GALEANO
TC X
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 107
AULAS: Bloque 9, Aula 213
2. CONCEPCIÓN DEL CURSO
DESCRIPCIÓN DEL CURSO:
Introduce al estudiante en conceptos y teoría en torno a: Perfilación de
usuarios, diseño centrado en el usuario y arquitectura de la información,
desde las cuales iniciara el proceso de diseño y conceptualización de piezas
graficas digitales interactivas, para llegar a las técnicas y lenguajes de
producción para Internet: Html, css, css 3, action script 2 y 3, así como la
creación y edición de formatos gráficos como: Svg, png, jpg, gif, swf, pdf.
Mediante los talleres y la investigación se crean piezas gráficas digitales tales
como: Micro sitios web, ilustración digital, estereoviews, animaciones
interactivas en flash, fotografía HDR, Vistas panorámicas y en 360º, sistemas
de íconos para software y sitios web.
Se repasan mediante exposiciones, documentación y talleres las actuales
herramientas para la producción digital online accedidas desde dispositivos
como: PDA (Smartphones y tablets), computadores portátiles y de escritorio.
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:






OBJETIVO GENERAL:
Explorar las posibilidades y características de los medios digitales interactivos
y entornos multimedia para su: Concepción, producción y análisis.




OBJETIVOS ESPECÍFICOS:





DETERMINACIÓN DE
COMPETENCIAS:
Generar y optimizar insumos gráficos para piezas digitales
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
y3
Categorizar, describir y evaluar sitios web a partir de sus: Contenidos,
lenguaje grafico, lenguajes de producción, interactividad y perfilacion
de usuarios.
Usar herramientas de diseño, producción y administración online.



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, así
como los conceptos y técnicas para la: Navegación, interacción y
actualización.
Reconocer las características de la imagen digital, mediante el diseño
y edición en distintos formatos según necesidades y características
del proyecto.
Identificar los diferentes soportes y formatos que estructuran las
imágenes digitales.
Conocer los procesos productivos, las etapas, plataformas y
proveedores de software y herramientas para la producción de sitios
web.
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.
Identificar, buscar y usar las herramientas de diseño, producción y
administración online disponibles
Conoce las características y construye imágenes digitales de manera
óptima.
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
Usa herramientas online y colaborativas
3. ORGANIZACIÓN DEL TRABAJO ACADÉMICO
CONTENIDOS:
1. Diseño de Interacción:
 Definición de Interactividad
 Diseño Digital Vs. Diseño Impreso

E-book
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
 Historia, características, evolución
 Diseño para Internet,
 Análisis de sitios Web
 Comunicación y relación Cliente – diseñador – proveedor:
Elaboración de cotizaciones.
6. Herramientas online
 Offline Vs Online
 Categorías y aplicaciones
 Herramientas para la producción
7. Producción:
 Metodología de desarrollo en diseño web: Roles y funciones
 HTML 4 y 5
 Estilos en cascada CSS 2 y 3
 Fireworks
 Dreamweaver
 Flash + Action Script
CRONOGRAMA DE ACTIVIDADES
FECHA
CONTENIDO / ACTIVIDAD
Presentación del curso.
Conversatorio: Diseño digital Vs Diseño impreso
Semana 1
Julio 9 al 13
El libro electrónico - E-book.
Interactividad, definición teórica.
RECURSOS
OBSERVACIONES
Presentación: Grados de la interacción
Ejercicio: Indicios y acciones.
Entrega, presentación: Indicios y acciones.
Formato PDF
------Imagen vectorial – Imagen bitmap: Formatos y
características
Semana 2
Julio 16 al 19
Antialias, Canal alpha
Video Beam
El Pixel
Color digital y profundidad del color,
características del píxel, paletas: Rgb, Hsb, Lab,
Código hexadecimal.
Planteamiento del taller online: Grupo Imagen
Taller online y exposición en clase: Grupo
Imagen
Píxel art, Ascii art, Vector art, Modelado 3d,
fotografía Hdr, herramientas y técnicas.
Semana 3
Julio 23 al 27
Clínica de Photoshop, Fireworks e Illustrator:
Compartir técnicas para hacer selecciones,
eliminar fondos de bitmaps, crear patrones, pixel
art, ascii art, importar vectores, antialiasing,
acciones en Photoshop.
Conexión a Internet,
Video Beam
-\
Planteamiento del taller online: Grupo
Administración
Taller online y exposición en clase: Grupo
Administración, textos, docs
Arquitectura de la información
Como escribir para medios digitales
Semana 4
Julio 30 – Agosto
3
------Diagrama de contenidos.
El Usuario: Guión de usuario, creación de
personajes
Taller en clase: Perfil de usuario, Diagrama de
contenidos.
Conexión a Internet,
Video Beam
Entrega online: Perfil de usuario y Diagrama de
contenidos.
Interacción computacional
Formularios digitales: Html, html 5, jquery
Taller en clase: Formularios digitales
------Semana 5
Agosto 6 al 10
Planteamiento del taller online: Grupo
Desarrollo web
Conexión a Internet,
Video Beam
Jerarquías visuales
Menús de navegación: Ejemplos
Planteamiento de ejercicio: Menú de
navegación.
Corrección grupal: Menú de navegación.
Interfaces gráficas GUI: Historia y diseño
(usabilidad)
Sistemas de íconos.
Semana 6
Agosto 13 al 17
-------
Conexión a Internet,
Video Beam
Planteamiento de ejercicio: Sistema de
iconos, acciones básicas y acción compleja.
Asesoría para el taller online: Grupo Desarrollo
web.
Presentación del taller online: Grupo
Desarrollo web
Metodología de desarrollo de sitios Web, roles y
funciones.
Semana 7
Agosto 21 al 24
Corrección grupal: Sistema de iconos.
Conexión a Internet,
Video Beam
Entrega: Menú de navegación.
Planteamiento del taller online: Grupo Audio y
video.
Entrega: Sistema de iconos.
Semana 8
Agosto 27 al 31
Técnica digital: Html 4 y 5
Ejercicio en clase: Layout, texto e hipervínculos
en html
Conexión a Internet,
Video Beam
Planteamiento del taller online: Grupo
Desarrollo web
Presentación del taller online: Grupo Audio y
video.
Presentación del taller online: Grupo
Desarrollo web
Semana 9
Septiembre 3 al 7
-------
Conexión a Internet,
Video Beam
Técnica digital – Fireworks: Herramientas
básicas, optimización de imágenes, ejercicio con
slices, exportación como html e imágenes
Planteamiento del taller online: Grupo
Tipografia
Semana 10
Septiembre 10 al
14
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 – Dreamweaver
Presentación del taller online: Grupo Tipografía
Semana 11
Septiembre 17 al
21
Técnica digital – Dreamweaver
Conexión a Internet,
Video Beam
------Técnica digital – Flash
Semana 12
Septiembre 24 al
28
Semana 13
Octubre 1 al 5
Semana 14
Octubre 8 al 12
Planteamiento del taller online: Grupo
Publicaciones
Video Beam
Técnica digital – Flash
Asesorías del taller online: Grupo
Publicaciones
Técnica digital – Flash
Presentación del taller online: Grupo
Publicaciones
Conexión a Internet,
Video Beam
Seguimiento y desarrollo de ejercicio final
Semana 15
Octubre 16 al 19
Seguimiento y desarrollo de ejercicio final
Semana 16
Seguimiento y desarrollo de ejercicio final
Video Beam
Video Beam
Octubre 22 al 26
Semana 17
Noviembre 6
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
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.
TEXTOS GUÍA:
Tidwell, Jenifer. Designing Interfaces. O’Reilly,
2006.
MATERIAL
BIBLIOGRÁFICO:
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
+ Premios Webby
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?
PORCENTAJES
ASIGNADOS
Ejercicio: Interactividad
Se evalúa la pertinencia y recursividad de los recursos interactivos empleados
10 %
Ejercicio: Taller y presentación de herramientas online
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.
10 %
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.
15 %
Ejercicio: Diseño de formulario
Se evalúa innovación, coherencia temática y facilidad de uso.
10 %
Ejercicio: Menú de navegación
Se evalúa innovación, coherencia temática y facilidad de uso.
15 %
Ejercicio: Investigación en Internet – Análisis pagina web
Se evalúa la calidad y claridad de la exposición y los datos analizados
10 %
Ejercicio: Propuesta publicación digital
Se evalúa la planeación, calidad técnica y correcto uso de las herramientas de
software y online
20 %
7. CRONOGRAMA DE ENTREGAS
TEMA PROYECTO
1 Interacción: Indicios y acciones
2
3
Elaboración de diagramas de contenido y perfil
4 de usuario
5 Diseño de formulario
5 Menú de navegación
6 Sistema de íconos
7 Presentación de la investigación
8 Micro sitio en html y flash
FECHA
Julio 16 al 19
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