Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Producción Digital 201620

503 views

Published on

Programa del curso Producción Digital 2016 20

Published in: Design
  • Be the first to comment

  • Be the first to like this

Producción Digital 201620

  1. 1. PROGRAMACIÓN ACADÉMICA COORDINACIÓN ACADÉMICA DISEÑO GRÁFICO ESCUELA DE ARQUITECTURA Y DISEÑO SEMESTRE 2016 – 20 FECHA PRESENTACIÓN: 19 07 2016 1. IDENTIFICACIÓN DEL CURSO PROGRAMA ACADÉMICO: DISEÑO GRÁFICO x DISEÑ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 OSPINA rdgaleano@gmail.com 3006542514 HC _X_ TC ___ MT ___ JUAN CAMILO GALEANO MEJIA juanc.galeano@upb.edu.co 3137028668 HC ___ TC _X_ MT ___ INTENSIDAD SEMANAL: HORAS PRESENCIALES: 4 HORAS TUTORIALES: HORAS AUTÓNOMAS: 2 HORARIOS: MARTES 2:00 P.M – 5:20 P.M 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, newsletter, landing page, ilustración digital, 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.
  2. 2. METAS DE APRENDIZAJE: Al finalizar el curso el estudiante estará en capacidad de:  Conocer e identificar sus intereses y perfil como diseñador grafico 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 y de contenidos.  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 web para su concepción, análisis y desarrollo. OBJETIVOS ESPECÍFICOS:  Identificar los roles actuales de producción web 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 y usa las herramientas e interfaces que nos permiten crear imágenes, textos e hipertextos.  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. 3. 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, Glitch art, Video 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:  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
  4. 4. CRONOGRAMA DE ACTIVIDADES FECHA CONTENIDO / ACTIVIDAD RECURSOS OBSERVACIONES Semana 1 julio 19 Presentación del curso. Encuesta: Expectativas, conocimientos, gustos e intereses Conversatorio  Diseño digital vs. diseño impreso  Perfiles y rol del diseñador para medios digitales  Interactividad: Grados, Indicio y Acción Semana 2 julio 26 Exposición, entrega  Grados de interacción Interactividad  Definición teórica. --------- Técnica  Color digital y profundidad del color  Características del píxel  Paletas: rgb(a), hsb, lab, hexadecimal  Imagen vectorial – Imagen bitmap  Formatos de Imagen digital  Antialias  Canal alpha Conexión a Internet, Video Beam Semana 3 agosto 2 Evaluación online: Grados de interacción Color digital y profundidad El píxel Arte digital:  Píxel art, Ascii art, Vector art, Modelado 3d, Fotografía HDR, Video Mapping, Glitch art ---------- Herramientas Online: Imagen Ejercicio: Expresión gráfica digital Conexión a Internet, Video Beam Semana 4 agosto 9 Entrega: Expresión grafica digital Arquitectura de la información Conexión a Internet, Video Beam
  5. 5.  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. Semana 5 agosto 16 Interfaces  GUI  Historia y diseño  Jerarquías visuales  Layout  Navegación: Patrones  Formularios  Contenidos ------------ Prototipos  Estáticos  Dinámicos  Prototipos en papel  Prototipos en PDF dinámico  Video, story board Conexión a Internet, Video Beam Semana 6 agosto 23 Ejercicio interfaz GUI con navegación: Realizar prototipo en papel , incluye menú, contenidos, identidad y sistema de iconos Conexión a Internet, Video Beam Semana 7 agosto 30 Corrección: Ejercicio Interfaz para smartphone o tablet Sistemas de iconos Estado del arte: Observación, análisis Ejercicio: Informe y publicación en el blog del curso Html básico: Layout, texto e hipervínculos en html desde text edit, sublime, brackets o code pen Conexión a Internet, Video Beam
  6. 6. Taller online: Maqueado HTML con CSS en Codecademy Semana 8 septiembre 6 Entrega: Informe y publicación en el blog del curso Desarrollo web  Metodología de desarrollo de sitios Web, roles y funciones  Herramientas para la producción: Online y offline.  HTML, CSS  Dreamweaver.  Cómo funciona Internet  Servidores  Hosting y dominio  Publicación en la web, FTP ---------- Trabajo autónomo: Análisis de herramientas para la creación de una página web: Cmap publicado en el blog, Conexión a Internet, Video Beam Semana 9 septiembre 13 Publicaciones Digitales:  Boletines de noticias o: Newsletter  Sitios web: o Corporativos o Transaccionales o Informativos o De lanzamiento o: Landing pages o Productos y servicios  Redes Sociales, comunidades  Aprendizaje en línea o: E-learning  Apps  Publicaciones editoriales HTML y CSS GUI: Diseño, Estado del arte, prospectiva UX: Diseño de experiencia de usuario Startups y emprenderismo Conexión a Internet, Video Beam
  7. 7.  SEO: Posicionamiento en Buscadores  Front End Development: Herramientas y lenguajes para el desarrollo Semana 10 septiembre 20 Newsletter  Formatos, tamaño, layout  Características técnicas  Spam y correo basura  Listas de correo  Herramientas Técnica digital – Slicing: Herramientas básicas, optimización de imágenes, exportación como html e imágenes, estructura de carpetas Semana 11 septiembre 27  Móviles y tabletas  Formatos y tamaños  Diseño responsivo  HTML5 (css3 y jquery): Características, componentes, herramientas de producción:  Dreamweaver  ------------------------  Desarrollo web  Hosting y dominios  Equipo de diseño y desarrollo, roles y funciones  FTP: File Transfer Protocol Conexión a Internet, Video Beam Semana 12 octubre 4 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.
  8. 8. Semana 13 octubre 11 Diseño,de landing page responsiva en html5 Semana 14 octubre 18 Diseño, Desarrollo y montaje de landing page responsiva en html5 Semana 15 octubre 25 Desarrollo y montaje de landing page responsiva en html5 Semana 16 noviembre 1 Desarrollo y montaje de landing page responsiva en html5 Semana 17 noviembre 8 Entrega final: Landing page responsiva, manual de estilos. 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  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  Platzi: Comunidad web
  9. 9. 5. METODOLOGÍA Curso teórico - prácticos. Clases magistrales: Teóricas y de manejo de software, presentaciones Exposición de hallazgos y ejercicios por parte de los estudiantes Trabajo autónomo online 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 Grados Se evalúa la pertinencia y recursividad de los recursos interactivos empleados 10% Ejercicio: Expresión grafica digital Se 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: Interfaz de usuario con navegación: GUI. Se evalúa: Diseño de interfaz, navegación, lenguaje gráfico, estrategia de contenidos y sistema de iconos. 15% Taller: Layout en html con Text Edit y Codecademy 5% Ejercicio: Investigación en Internet – Análisis pagina web Se evalúa la calidad y claridad de la exposición y los datos analizados 5% Evaluación Parcial: 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 CC 2015, HTML4 y HTML5 Se 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 así como el documento de apoyo: Manual de Estilos, con toda la información que debe contener para claridad de los componentes del proyecto entregado. 25%
  10. 10. 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

×