1.

Datos Generales de la asignatura

Nombre de la asignatura: Diseo de interfaces.

Clave de la asignatura: DAD-1607

SATCA1: 2-3-5

Carrera: Ingeniera en Informtica.

2. Presentacin

Caracterizacin de la asignatura

Diseo de Interfaces es una materia de especialidad que aporta al perfil de

egreso la capacidad de disear y desarrollar interfaces amigables, accesibles y
usables orientadas a satisfacer las necesidades del entorno.
La importancia de la asignatura radica en la implementacin y utilizacin en forma
prctica varios conceptos de Sistemas de Informacin, Programacin, Calidad de
los Sistemas de Informacin, Desarrollo de Aplicaciones Web y los orienta al
Diseo de Interfaces.
Esta asignatura integra una serie de elementos bsicos de diseo y desarrollo,
adems de la metodologa y ciclos de vida para el desarrollo de proyectos,
finalmente el objetivo principal es que el estudiantado aplique estos principios de
diseo en el desarrollo de interfaces para las personas usuarias de diversas
capacidades.
Para que la comunidad estudiantil se desarrolle adecuadamente en esta materia
es necesario que se tenga competencias previas adquiridas en las materias de
Fundamentos de Sistemas de Informacin, Calidad de los Sistemas de
Informacin, Programacin en Ambientes Cliente Servidor, Desarrollo de
Aplicaciones Web y Programacin Orientada a Objetos; ya que cada una aporta
conocimientos esenciales para que la interfaz a desarrollar cumpla con la
funcionalidad esperada y sea de fcil manejo, as mismo, esta asignatura se
relaciona ampliamente con la asignatura de FrameWorks para Desarrollo de
Aplicaciones Web, y Herramientas de Apoyo al Desarrollo Web.

Intencin didctica

Diseo de interfaces, es una asignatura que complementa y profundiza algunos

temas de Desarrollo de Aplicaciones Web, inclusive su contenido amplio permite

1
Sistema de Asignacin y Transferencia de Crditos Acadmicos

Pgina | 1
las posibilidades para poder abordar la resolucin de problemas del entorno, que
requieran la programacin de interfaces que residan en diferentes dispositivos.

A continuacin se describe la asignatura en forma general:

En la unidad uno se conoce, analizan y comprenden los fundamentos de

interfaces desde los conceptos bsicos, la clasificacin de las interfaces,
elementos del diseo, y los efectos psicolgicos del color. Posteriormente en la
unidad dos se contemplan la usabilidad y accesibilidad de las interfaces como
elementos esenciales para lograr una buena facilidad de uso y aprendizaje. En la
unidad tres se estudian la metodologa, principios y estndares de diseo de
interfaces ajustables a cualquier dispositivo. La unidad cuatro abarca los
entornos de desarrollo y tecnologas web como medios para agilizar el diseo de
interfaces. Una vez considerado la teora del diseo as como las herramientas y
tecnologas web, la unidad cinco se enfoca en la construccin y evaluacin de las
interfaces.

El personal docente debe dominar los contenidos, guiar, y generar ambientes de

aprendizaje favorables, seguros e incrementar las condiciones para que los y las
estudiantes adquieran las competencias necesarias que se pretenden lograr por
cada unidad, mismos que deben ser participantes activos con iniciativa,
capacidad de investigacin, adems debern trabajar en equipo, y tener
disposicin de realizar todas sus prcticas y su proyecto de asignatura.

3. Participantes en el diseo y seguimiento curricular del programa

Lugar y fecha de Participantes Observaciones

elaboracin o revisin

Ex hacienda Nazareno Instituto Tecnolgico del Taller de definicin de

Santa Cruz Xoxocotln Valle de Oaxaca. especialidad de la
Oaxaca a 10 de Marzo de Ingeniera en Informtica
2015.

4. Competencia(s) a desarrollar

Competencia(s) especfica(s) de la asignatura

Define los conceptos bsicos necesarios de diseo de interfaces abordando
situaciones y problemas del rea, considerando ejercicios prcticos para su
mejor entendimiento.
Compara los diferentes patrones de diseo para adecuar el ms ptimo en el

Pgina | 2
 diseo de interfaces.
Usa la metodologa para identificar los requisitos para realizar el diseo de
interfaces de usuario haciendo uso de la teora del color, la tipografa e
iconografa para resolver necesidades de diversos tipos de usuario de manera
efectiva.
Construye interfaces de usuario que resuelvan diversas necesidades en
diferentes contextos para que se adapten a diversos dispositivos en diferentes
plataformas operativas.

5. Competencias previas
Desarrolla con programacin estructurada y programacin orientada a
objetos diversas aplicaciones para su correcto funcionamiento.
Identifica los componentes de la plataforma web para aplicar las herramientas
correspondientes para su configuracin.
Identifica las estructuras de programacin desarrollando aplicaciones para
poder emplear el lenguaje HTML as como diversos lenguajes de
programacin.
Conoce las caractersticas del lenguaje XML desarrollando aplicaciones que
resuelvan el intercambio de informacin estructurada.
Desarrolla aplicaciones web que implementan el intercambio de informacin a
travs de servicios web ya definidos.

6. Temario
No. Temas Subtemas
I Fundamentos de interfaces 1.1 Conceptos bsicos
1.1.1 Interfaces
1.1.2 Usos de las interfaces
1.2 Clasificacin de interfaces
1.3 Diseo
1.3.1 Elementos del diseo
1.3.2 Teora del color
1.3.3 Tipografa
1.3.4 Iconografa
1.4 Efectos psicolgicos del color
1.5 Luz, contraste, sombra, intensidad.
II Usabilidad y accesibilidad 2.1 Introduccin
2.1.1 Definiciones.
2.2 Facilidad de aprendizaje
2.3 Accesibilidad de la aplicacin

Pgina | 3
 2.4 Velocidad de desempeo
2.5 Tasa de error por parte de los
usuarios
2.6 Evaluacin de interfaces
III Metodologa, principios y 3.1 Diseo centrado en el usuario
estndares 3.1.1 Factores humanos a considerar
3.1.2 Diseo interactivo
3.1.2.1 Diseo de la vista desde fuera
3.1.2.2 Diseo de la estructura interna
3.2 Ciclo de vida de la interfaz
3.3 Ingeniera Web
3.3.1 Caractersticas
3.3.2 Etapas.
3.4 Estndares aplicables a Interfaces
ajustables a cualquier dispositivo
3.5 Patrones de diseo
3.5.1 Definicin de patrn
3.5.2 Patrones de diseo web
3.5.2.1 Diagrama de Gutenberg
3.5.2.2 Patrn Z
3.5.2.3 Patrn F
IV Herramientas y tecnologas web 4.1 Entornos de desarrollo
4.2 Tecnologas web
4.2.1 JavaScript MVC
4.2.2 CSS
4.2.1 AJAX
4.2.3 JQuery, JSON, XML
V Construccin y evaluacin de 5.1 Anlisis de requisitos
interfaces 5.2 Diseo
5.3 Prototipado
5.4 Evaluacin
5.5 Implementacin
5.6 Lanzamiento
5.7 Mtricas
5.7.1 Diseo
5.7.2 Usabilidad
5.7.3 Navegabilidad

7. Actividades de aprendizaje de los temas

Unidad I Fundamentos de interfaces

Competencias Actividades de aprendizaje

Especfica(s): Identifica los Buscar informacin sobre las

componentes de diseo para aplicarlos diferentes arquitecturas de

Pgina | 4
en el desarrollo de interfaces de
manera efectiva.
Genricas:
Competencias instrumentales
Capacidad de anlisis y sntesis
Capacidad de organizar y planificar
Conocimientos bsicos de la
carrera.
Comunicacin oral y escrita
Competencias interpersonales
Capacidad de comunicacin
interdisciplinaria.
Apreciacin de la diversidad y
multiculturalidad.
Competencias Sistmicas
Capacidad de aplicar los
conocimientos.
Habilidades de investigacin.
Unidad II Usabilidad y accesibilidad
Competencias
Especfica(s): Identifica las
caractersticas esenciales a considerar
para el desarrollo de interfaces de
manera eficiente.
Genricas:
Competencias instrumentales
Habilidades bsicas de manejo de
la computadora
Habilidad para buscar y analizar
informacin proveniente de fuentes
diversas.
Solucin de problemas
Toma de decisiones.
Competencias interpersonales
Trabajo en equipo
Competencias Sistmicas
Capacidad de aplicar los
conocimientos.
Habilidades de investigacin.
Capacidad de aprender
interfaces.
Identificar en interfaces los
esquemas de color.
Comparar los tipos de fuentes y
de iconos en las interfaces
actuales.
Analizar los diferentes elementos
que conforman una interfaz.
Comprender los efectos
psicolgicos del color.
Realizar un cuadro comparativo
de los tipos de interfaces
Actividades de aprendizaje
Buscar informacin sobre
conceptos de usabilidad y
accesibilidad de sitios web.
Investigar cmo se logra la
facilidad de aprendizaje de una
interfaz.
Analizar como una interfaz
puede ser utilizada de forma
adecuada, eficiente y
satisfactoria por los usuarios
finales.
Determinar qu elementos debe
considerarse en una interfaz
para que pueda ser utilizada por
cualquier persona con diferentes
habilidades o discapacidades.
Analizar los mtodos de
evaluacin de usabilidad en
interfaces
Pgina | 5
 Unidad III Metodologa, principios y estndares
Competencias
Especfica(s): Aplica la metodologa, el
ciclo de vida de la interfaz y los
estndares para generar interfaces que
cubran las necesidades de los usuarios
en diferentes contextos de forma
consistente.
Genricas:
Competencias instrumentales
Habilidades bsicas de manejo de
la computadora
Habilidad para buscar y analizar
informacin proveniente de fuentes
diversas.
Solucin de problemas
Toma de decisiones.
Competencias interpersonales
Trabajo en equipo
Competencias Sistmicas
Capacidad de aplicar los
conocimientos.
Habilidades de investigacin.
Capacidad de aprender
Unidad IV Herramientas y tecnologas web
Competencias
Especfica(s): Compara las diferentes
tecnologas para elegir la adecuada en
base a las necesidades de la interfaz
de manera concreta.
Aplica las diferentes tecnologas y
herramientas para el desarrollo de
interfaces de calidad de manera
precisa.
Genricas:
Competencias instrumentales
Habilidades bsicas de manejo de
la computadora
Actividades de aprendizaje
Investigar cules son las
diferentes metodologas para el
diseo de interfaces.
Mediante un mapa conceptual
explicar el ciclo de vida de una
interfaz.
Determinar los factores humanos
que se deben considerar en el
diseo de una interfaz.
Identificar y comprender las
caractersticas y etapas de la
Ingeniera web.
Buscar informacin sobre los
diferentes patrones de diseo
web
Actividades de aprendizaje
Comparar los entornos de
desarrollo actuales que se
utilizan como herramienta de
diseo de interfaces
Buscar informacin relevante de
las tecnologas web.
Aplicar el uso de JavaScript para
el diseo y desarrollo de
interfaces.
Analizar el uso de Ajax para
identificar como afecta a la
interfaz el intercambio de
informacin entre el cliente y el
Pgina | 6
 Habilidad para buscar y analizar servidor web.
informacin proveniente de fuentes Comprender el uso de JQuery,
diversas. JSON y XML en el diseo de
Solucin de problemas
interfaces
Toma de decisiones.
Competencias interpersonales
Trabajo en equipo
Competencias Sistmicas
Capacidad de aplicar los
conocimientos.
Habilidades de investigacin.
Capacidad de aprender
Unidad V Construccin y evaluacin de interfaces
Competencias Actividades de aprendizaje

Especfica(s): Desarrolla interfaces para Identificar los requisitos de

resolver problemas del mundo real en diseo de interfaces de un
diferentes reas de manera efectiva. problema de desarrollo de una
aplicacin web.
Genricas: Identificar los componentes o
Competencias instrumentales
Habilidades bsicas de manejo de elementos textuales y grficos
la computadora de las interfaces para
Habilidad para buscar y analizar organizarlos de una manera
informacin proveniente de fuentes eficiente.
diversas Emplear herramientas y
Solucin de problemas tecnologas web para el diseo y
Toma de decisiones.
prototipado de interfaces.
Competencias interpersonales
Trabajo en equipo Analizar los elementos de
Competencias Sistmicas usabilidad y accesibilidad en el
Capacidad de aplicar los diseo de las interfaces
conocimientos. desarrolladas.
Habilidades de investigacin.
Capacidad de aprender

8. Prctica(s)

Prcticas en que se incorporen los temas de teoras del color y psicologa

del color.
Realizar un collage con recortes fotografas o cualquier material disponible
enfocado a un tema especfico.
Construir mediante tcnicas de luz, sombra, contraste, e intensidad conos y
fondos para las interfaces.
Recoleccin de informacin para la obtencin de requisitos.
Pgina | 7
 Optimizar el contenido para incrementar el tiempo de respuesta.
Construir un prototipo de interfaz tomando como base el ciclo de vida de la
interfaz y un patrn de diseo.
Creacin de mtricas para la evaluacin de la interfaz considerando los
aspectos ms relevantes a calificar.
Explorar los diferentes IDEs para el desarrollo.
Realizar ejercicios en las diferentes tecnologas web.
Construccin de un proyecto final

9. Proyecto de asignatura

El presente proyecto tiene como objetivo general: integrar los conocimientos de

diseo de interfaces que el alumno va adquiriendo en el transcurso de las
unidades del presente programa de estudios, la competencia donde el o la
estudiante Construye interfaces de usuario que resuelvan diversas necesidades
en diferentes contextos de manera eficaz para concretarlos en la prctica
mediante el diseo de interfaces que cumplan con estndares.

El desarrollo del proyecto se explica a continuacin considerando las siguientes

fases:

Fundamentacin: El estudiantado desarrollara un anlisis de su entorno que les

permita detectar procesos que deseen automatizar o digitalizar, para optimizarlos
y hacerlos ms eficientes, este anlisis determinar la problemtica a resolver. Se
sugiere que relacionen su actividad diagnstica y de anlisis en conjunto con los
de las materias de especialidad. La asignatura deber aportar y extender los
conocimientos y recursos para que el alumno desarrolle interfaces que se
integren en la solucin de problemas del entorno.

Planeacin: Para llevar a cabo la planeacin del proyecto se recomienda tomar

en cuenta la elaboracin de un cronograma de actividades en que se realice el
planteamiento de los procesos a desarrollar, mismos que deben apegarse
estrictamente a un ciclo de vida de desarrollo de interfaces, tambin se sugiere la
elaboracin de un CheckList para llevar el seguimiento y verificar la ejecucin real
de cada uno de las actividades del cronograma.

Ejecucin: Se ponen en marchas las etapas del ciclo de vida de interfaces,

anlisis de requisitos, elaboracin del diseo de la interfaz, construccin del
prototipo, una vez terminado el prototipo se implementa, posteriormente se
somete a evaluacin, en caso de salir con un resultado ptimo en la evaluacin
se lanza, de lo contrario se retroalimenta y regresa a la etapa 1.

Evaluacin: Para la evaluacin se propone un cierre de proyectos en conjunto

con el de las materias de FrameWorks, y Herramientas de apoyo al desarrollo

Pgina | 8
web, en que cada equipo de trabajo exponga su proyecto en forma breve y
concisa, explicando la problemtica, y la forma en que integra y aplica las
competencias que ha adquirido en cada asignatura para la resolucin de las
mismas, finalmente deber exponer el mtodo por el que dar seguimiento a su
proyecto y el impacto del mismo.

10. Evaluacin por competencias

Para la evaluacin se sugiere contemplar

Exmenes de diagnstico.
Evaluaciones formativas.
Evaluaciones sumativas.

Para evaluar las actividades didcticas de esta asignatura se recomienda

ampliamente utilizar como instrumentos y herramientas de evaluacin las
siguientes rbricas.
Lista de cotejo para reportes de prctica digitales.
Guas de avaluacin para informes escritos.
Rbrica para cuadros comparativos.
Rbrica para cuadro sinptico.
Listas de cotejo para mapas mentales.
Gua de observacin para reportes escritos.
Guas de observacin de exposiciones.
Listas de cotejos para laboratorio.

11. Fuentes de informacin

Shneiderman, B. y Plaisant C. (2010). Designing the User Interface: Strategies for

Effective Human-Computer Interaction. USA. Pearson.
Crcoles, T.J.E. y Montero S. F. (2012). Diseo de interfaces Web. Espaa. RA-
MA.

Pgina | 9