Download usuario web html las

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
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 125
AULAS: Bloque 9, Aula 213
2. CONCEPCIÓN DEL CURSO
DESCRIPCIÓN DEL CURSO:
Introduce al estudiante en las técnicas, conceptualización y los lenguajes de
producción para Internet: Html, css, action script 2 y 3, así como conceptos y
teoría en torno a: Perfilación de usuarios y arquitectura de la información, de
manera que le permite conceptualizar y crear piezas gráficas digitales tales
como: Micro sitios web, ilustración digital, estereoviews, animaciones
interactivas en flash y sistemas de íconos para software y sitios web,
guiándolo a través de ejercicios prácticos de manera que conozca: El
alcance, los formatos, plataformas, técnicas y características y el lenguaje de
programación requerido en la materialización de éstas.
RECOMENDACIONES
Geometría del diseño I y II, Illustrator, Photoshop, Flash y Dreamweaver.
(SABERES PREVIOS):
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, construcció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
Evaluar críticamente sitios web a partir de su lenguaje grafico,
interactividad e información
Usar las herramientas de diseño, producción y administración online
disponibles



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.
Identificar, buscar y usar las herramientas de diseño, producción y
administración online disponibles
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
Usa herramientas online y colaborativas
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
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
 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
RECURSOS
Presentación del curso.
Conversatorio: Diseño digital Vs Diseño impreso
El libro electrónico - E-book.
Semana 1
Julio 9 al 13
Interactividad, definición teórica.
Presentación: Grados de la interacción
Ejercicio: Indicios y acciones.
Semana 2
Julio 16 al 19
Entrega, presentación: Indicios y acciones.
-------
Video Beam
OBSERVACIONES
Imagen vectorial – Imagen bitmap: Formatos y
características
Antialias, Canal alpha
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
Píxel art, Ascii art, Vector art, Modelado 3d,
fotografía Hdr.
Semana 3
Julio 23 al 27
Clínica de Photoshop, Fireworks e Illustrator:
Compartir técnicas para eliminar fondos de
bitmaps, crear patrones, importar vectores,
antialiasing etc
Conexión a Internet,
Video Beam
------Planteamiento del taller online: Grupo
Administración
Taller online y exposición en clase: Grupo
Imagen
Arquitectura de la información
Como escribir para medios digitales
Diagrama de contenidos.
El Usuario: Guión de usuario, creación de
personajes
Semana 4
Julio 30 – Agosto
3
-------
Conexión a Internet,
Video Beam
Taller online y exposición en clase: Grupo
Administración, textos, docs
Taller en clase: Perfil de usuario, Diagrama de
contenidos y articulo para la web.
Entrega online: Perfil de usuario y Diagrama de
contenidos y articulo para la web.
Interacción computacional
Semana 5
Agosto 6 al 10
Formularios digitales
-------
Conexión a Internet,
Video Beam
Taller en clase: Formularios digitales
Planteamiento del taller online: Grupo
Desarrollo web
Jerarquías visuales
Menús de navegación: Ejemplos
Planteamiento de ejercicio: Menú de
navegación.
Semana 6
Agosto 13 al 17
-------
Conexión a Internet,
Video Beam
Sistemas de íconos.
Ejercicio: Sistema de iconos, acciones básicas y
acción compleja.
Asesoría para el taller online: Grupo Desarrollo
web.
Corrección: Menú de navegación.
Corrección: Sistema de iconos.
------Interfaces gráficas GUI: Historia y diseño
(usabilidad)
Semana 7
Agosto 21 al 24
Metodología de desarrollo de sitios Web, roles y
funciones.
Conexión a Internet,
Video Beam
Formato PDF
Presentación del taller online: Grupo
Desarrollo web
Colchón, Por definir
Semana 8
Agosto 27 al 31
Entrega: Menú de navegación.
Conexión a Internet,
Video Beam
Entrega: Sistema de iconos.
Técnica digital: Html 4 y 5
Ejercicio en clase: Layout, texto e hipervínculos
Semana 9
en html
Septiembre 3 al 7
Ejercicio: Análisis de un sitio Web
Planteamiento de ejercicio: Menú de
navegación.
Conexión a Internet,
Video Beam
Presentación en clase: Análisis de un sitio Web
Corrección en clase: Menú de navegación
Semana 10
Septiembre 10 al
14
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
Semana 11
Septiembre 17 al
21
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
Septiembre 24 al
28
Semana 13
Octubre 1 al 5
------Video Beam
Técnica digital – Herramientas online:
Planteamiento de ejercicio
Técnica digital – Herramientas online:
Demostraciones por equipos
Semana 14
Octubre 8 al 12
Técnica digital – Herramientas online:
Demostraciones por equipos
Semana 15
Octubre 16 al 19
Ejercicio Final: Producción por definir
Semana 16
Octubre 22 al 26
Seguimiento y desarrollo de ejercicio final
Semana 17
Noviembre 6
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
MATERIAL
BIBLIOGRÁFICO:
TEXTOS GUÍA:
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.
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
+ 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
15 %
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.
5%
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
FECHA
Julio 16 al 19
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
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