Produccion Digital 2014 20

PROGRAMACIÓN ACADÉMICACOORDINACIÓN ACADÉMICA DISEÑO GRÁFICO

ESCUELA DE ARQUITECTURA Y DISEÑOSEMESTRE 2014 – 20

FECHA PRESENTACIÓN: 14 07 2014

1. IDENTIFICACIÓN DEL CURSO

PROGRAMA ACADÉMICO:DISEÑO GRÁFICO

xDISEÑO INDUSTRIAL

DISEÑO VESTUARIO

ARQUITECTURA

NOMBRE DEL CURSO: Producción Digital

NRC DEL CURSO: 10814 No. DE CRÉDITOS: 2

CICLO: DISCIPLINAR X PROFESIONAL ____ INTEGRACIÓN ____

TIPO DE CURSO: TEÓRICO ____ PRÁCTICO ____ TEO – PRÁCTICO X

EQUIPO DOCENTE:

NOMBRE DE CADA DOCENTE +SU CORREO ELECTRÓNICO

FIJO y CELULAR

T. DE VINCULACIÓN

ROILAN GALEANO [email protected]

3006542514 HC _X_ TC ___ MT ___

JUAN CAMILO GALEANO [email protected]

3137028668 HC ___ TC _X_ MT ___

INTENSIDAD SEMANAL: HORAS PRESENCIALES: 4

HORASTUTORIALES:

HORASAUTÓNOMAS: 2

HORARIOS: MARTES 2:00 P.M – 5:20 MIÉRCOLES 8:00 A.M – 12:00MIÉRCOLES 2:00 P.M – 5:20

AULAS: Bloque 9, Aula 107

2. CONCEPCIÓN DEL CURSO

DESCRIPCIÓN DEL CURSO:

Introduce al estudiante en las técnicas, metodologías y conceptualización básicas para entender el concepto de diseño de interacción y desarrollar piezas informativas e interactivas digitales para la plataforma web tal y como: Micro sitios, ilustración digital, estereoviews, animaciones interactivas en flash y sistemas de íconos para software y web.

Permite entender y aplicar los lenguajes de etiquetado y programación: Html, css3 y jquery, edición y creación de imágenes e interfaces graficas de usuario GUI, así como metodologías para la perfilación de usuarios, toma de requerimientos y estructuración de la información, de manera que a través de ejercicios prácticos conoce y aplica los formatos, plataformas, técnicas y metodologías requeridas para la materialización de éstos.

RECOMENDACIONES (SABERES PREVIOS):

Geometría del diseño I y II, Illustrator, Photoshop, Flash y Dreamweaver.

METAS DE APRENDIZAJE: Al finalizar el curso el estudiante estará en capacidad de:

Conocer e identificar sus intereses y perfil como diseñador grafico

mailto:[email protected]

para medios digitales Conocer el concepto y los grados de la interacción Planificar el desarrollo de un micrositio web Desarrollar diagramas de contenidos Hacer guiones de usuario Generar y optimizar insumos gráficos para piezas digitales Crear sistemas de iconos optimizados para medios digitales Elaborar páginas web en HTML5. Evaluar críticamente sitios web a partir de su interfaz, interacción,

estrategia gráfica, de contenidos e interacción. Conocer herramientas online para diseño y creación web Publicar y administrar un sitio usando protocolos de transferencia de

archivos FTP.

OBJETIVO GENERAL: Explorar las técnicas, conceptos y características en torno al diseño gráfico y de interacción para medios digitales y entornos multimedia, para su concepción, análisis y desarrollo.

OBJETIVOS ESPECÍFICOS:

Identificar los roles actuales de producción para el perfil de los diseñadores gráficos

Conocer e identificar los grados de la interacción Conocer los elementos que conforman las interfaces de usuario y los

principios de la interacción humano-computador. Reconocer las características y tratamiento de la información para

medios digitales: Contenidos, navegación, interacción y actualización. Reconocer las características y formatos de la imagen digital para su

óptima producción. Conocer los procesos productivos, etapas, plataformas y

herramientas de producción de las piezas gráficas, interactivas, productivas e informativas basadas en Internet.

Interactuar con profesionales y proveedores que intervienen en la producción digital basados en TIC.

Usar lenguaje de etiquetado HTML5. Observar el estado del arte en diseño y desarrollo web Conocer herramientas online para diseño y creación web

DETERMINACIÓN DE COMPETENCIAS:

Elabora guiones de usuario Produce diagramas de contenido Identifica los grados de interacción de cualquier pieza grafica

interactiva Conoce las características y elementos constitutivos de la imagen

digital. Construye imágenes digitales optimizadas. 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. Conoce su posición o rol frente al trabajo interdisciplinario Propone soluciones a partir de metodologías de diseño centrado en

el usuario

3. ORGANIZACIÓN DEL TRABAJO ACADÉMICO

CONTENIDOS:

1. Diseño de Interacción: Diseño Digital vs Diseño Impreso Definición de Interactividad Indicio y acción Casos y usos

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,

mapping.

3. Estructura de la información: Arquitectura de la información Como escribir para medios digitales Perfil de usuarios, creación de personas Estructuras de navegación y diagrama de contenidos Manual de estilos Formato PDF

4. Interface de usuario: Definición de Interactividad Historia, evolución y categorías Menú de navegación y componentes Jerarquías visuales Diseño de sistemas de iconos Usabilidad web Diseño, tecnologías y estado del arte

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. Producción: Metodología de desarrollo en diseño web: Roles y funciones HTML5. Historia de los lenguajes de marcado. CSS3. Estilos. Apariencia. Look and feel. Jquery. Programación de acciones básicas Video y Audio digital Photoshop Fireworks Dreamweaver FTP Publicación en la web: Dominios y hosting

CRONOGRAMA DE ACTIVIDADES

FECHA CONTENIDO / ACTIVIDAD RECURSOS OBSERVACIONES

Semana 1Julio 15 - 16 Presentación del curso.

Conversatorio Diseño digital vs. diseño impreso Perfiles y rol del diseñador para

medios digitales

Interactividad Definición. Indicio y acción

Semana 2Julio 22 - 23

Exposición Grados de interacción

Evaluación online: Grados de interacción

Interactividad Definición teórica.

---------

Técnica Color digital y profundidad del

color Características del píxel Paletas: rgb, hsb, código

hexadecimal Imagen vectorial – Imagen

bitmap Formatos de Imagen digital Antialias Canal alpha

Ejercicio: Collage, vector – bitmap.

Concepto:Formato y tamaño: 800 X 600 px

Conexión a Internet, Video Beam

Semana 3Julio 29 - 30 Arte digital

Píxel art Ascii art Vector art Modelado 3d Fotografía HDR. Video Mapping

Herramientas online: Imagen

----------

Interfaces: Sistemas de iconos

Ejercicio: Sistema de iconos, acciones


básicas y una acción compleja.

Entrega ejercicio: Collage, vector – bitmap.

Semana 4Agosto 5 - 6

Arquitectura de la información Como escribir para medios

digitales Estrategia de contenidos. Diagrama de contenidos

El Usuario

----------

Técnica Formato PDF

Taller en clase Perfil de usuario y diagrama de

contenidos.

Corrección: Sistema de iconos



HCI: Human Computer Interaction

Definición

Estudios de campo

Prototipos

Pruebas de usuario

Interfaces GUI Historia y diseño Jerarquías visuales Menús de navegación Formularios

------------

Prototipos Estáticos Dinámicos Prototipos en papel Prototipos en PDF dinámico Usar Fireworks para hacer

prototipos.

Ejercicio menú de navegación: Realizar prototipo en papel y luego darle dinamismo en Fireworks.



Entrega: Sistema de iconos.

Corrección, seguimiento

Menú de navegación.

Herramientas online:

Desarrollo web

Audio y video

Imagen

Administrativas

Publicaciones

----

Ejercicio en clase: Layout, texto e hipervínculos en html desde text edit



Entrega: Menú de navegación.

Observatorio digital (análisis de sitios) Público objetivo Interacción Navegación: Menú, estructura de

contenidos y mapa Lenguaje de programación Técnicas y línea gráfica Resolución tamaños Diseño responsivo Lenguaje de contenidos y tono

Ejercicio: Análisis de un sitio web

----------

Desarrollo web Metodología de desarrollo de

sitios Web, roles y funciones Herramientas para la producción:

Online y offline. HTML CSS Dreamweaver. Servidores. ¿Cómo funciona internet? Hosting y dominio Publicación en la web, FTP Plataformas online: CMS,

plantillas.


Semana 8Septiembre 2 - 3 Exposición: Análisis web


Técnica digital – Fireworks: Herramientas básicas, optimización de imágenes, ejercicio con slices, exportación como html e imágenes

Semana 9Septiembre 9 - 10

Ejercicio:

Maqueado con CSSConexión a Internet, Video Beam



Productos digitales Newsletter Sitios corporativos,

transaccionales e informativos Comunidades, web 2.0 Landing pages Banners lineales e interactivos Facebook tab Facebook aplication Apps para smarthphones y

tablets

----------

Móviles y tabletas Formatos y tamaños Diseño responsivo

Newsletter Formatos Características técnicas Spam y correo basura Listas de correo Herramientas

Ejercicio

Newsletter, diseño gráfico. (Diagramación de imagen de 600x900px con aspecto boletín)

Taller en clase Montaje y desarrollo de

Newsletter para Mailchimp.


Entrega

Newsletter

Semana 12Septiembre 30 – Octubre 1

Navegadores Historia Función Estado actual Límites y conflictos

HTML5 Historia y origen Proyección Lenguajes de marcado Etiquetas Dreamweaver Editor de texto Herramientas online

CSS3 Concepto Función Posibilidades y alcances

Desarrollo web

Hosting y dominios

Equipo de diseño y desarrollo, roles y funciones

Flash Historia Utilidad Conflicto actual Funciones

Animación Banners animados con flash GIF animados

Ejercicio Banner en flash Banner en GIF animado

Semana 13Octubre 7 - 8 Formularios digitales:

Formas, uso y características Html 5, jquery Herramientas online

Ejercicio: Diseño de formulario con herramientas online

--------

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, Tablas, alineación.

Semana 14Octubre 14 - 15

Técnica digital – Dreamweaver:

--------

Web social Facebook Twitter Juego sociales Flickr Instagram Herramientas o webapps Web 2.0

SEO Google Bing Search Engine Optimization Metadatos

Ejercicio Diseño de tab para Facebook

con tres estados: inicial, suscribirse y suscrito.

Semana 15Octubre 21 - 22 40 años Facultad de Diseño

Semana 16Octubre 28 - 29 Desarrollo y montaje de sitio web

Semana 17Noviembre 4 - 5 Desarrollo y montaje de sitio web

4. REFERENCIA BIBLIOGRÁFICA

MATERIAL BIBLIOGRÁFICO:

TEXTOS GUÍA: 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.

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.

Keith, Jeremy. HTML5 for Web Designers. A Book Apart, 2010.

Kissane, Erin. The Elements of Content Strategy. A Book Apart, 2011.

Cederholm, Dan. CSS3 for Web Designers. A Book Apart, 2010.

Monteiro, Mike. Design is a Job. A Book Apart, 2012.

TEXTOS Y/O DOCUMENTOS COMPLEMENTARIOS:

URLs recomendadas según el tema.

Revista I.D.

Revista How

Revista Communication Arts

Revista Wired

Smashing Magazine

A List Apart

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

Evaluación: Interactividad y GradosSe evalúa la pertinencia y recursividad de los recursos interactivos empleados 10%

Ejercicio: Vector + BitmapSe evalúa el formato, tamaño y técnica de la imagen propuesta. 5%

Taller: Perfil de usuario y diagrama de contenidos.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. 5 %

Taller: Layout en html con Text Edit 5%

Ejercicio: Menú de navegaciónSe evalúa innovación, coherencia, producción y usabilidad. 5%

Ejercicio: Investigación en Internet – Análisis pagina webSe evalúa la calidad y claridad de la exposición y los datos analizados 5%

Ejercicio: Newsletter, diseño gráfico.Se evalúa la diagramación y la comprensión digital 5%

Evaluación: Conceptos y técnicas vistas en clase 10%

Taller: Formulario online.Se evalúa aplicación y uso de las formas y estrategia. 5%

Taller: Layout en dreamweaver, HTML4 y HTML5Se evalúa aplicación y uso de la herramienta y las etiquetas html y css 5%

Ejercicio: Desarrollo de una Landing Page en HTML5, publicada a través de FTP.

Se evalúa la calidad técnica y correcto uso del HTML5.30%

7. 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 y diagramas

Produccion Digital 2014 20

Design

Transcript of Produccion Digital 2014 20