TECNOLÓGICO NACIONAL DE MÉXICO

1. Datos Generales de la asignatura

Nombre de la asignatura: Diseño de Interfaces

Clave de la asignatura: TAD-1807

SATCA: 2-3-5 (Horas Teóricas – Horas Prácticas -

Créditos)

Carrera: Ingeniería en Sistemas computacionales,

Ingeniería en Tecnologías de la Información
y Comunicaciones

2. Presentación

Caracterización de la asignatura

Esta asignatura aporta al perfil del Ingeniero en Sistemas Computacionales y del

Ingeniero en Tecnologías de la Información y Comunicaciones, conocimientos suficientes
para el diseño, implementación y evaluación de interfaces multiplataforma y
multidispositivos, integrando diferentes conceptos, técnicas, herramientas y tecnologías.

Esta asignatura es una parte esencial en el desarrollo de aplicaciones web que aporta
elementos para que el futuro profesionista desarrolle las habilidades necesarias que le
permitan integrar soluciones computacionales para ser implementadas en diferentes
plataformas y dispositivos, garantizando la funcionalidad de la solución propuesta.

Intención didáctica

El profesor deberá contar con experiencia en el área de diseño y desarrollo web y haber
participado en proyectos relacionados con ésta área. Deberá desarrollar la capacidad
para coordinar el trabajo en equipo, así como proponer actividades para el aprendizaje
significativo que consideren los distintos estilos de aprendizaje de los estudiantes, el

Página | 1
 TECNOLÓGICO NACIONAL DE MÉXICO

entorno de la institución, la formación del profesor y el ámbito profesional en el que se

desenvolverán los futuros profesionistas; todo esto con el compromiso de lograr las
competencias requeridas al término de la materia.

El contenido está organizado en cuatro temas. El primer tema se centra en los

fundamentos de las interfaces gráficas, tomando en cuenta las diversas herramientas
para el diseño de interfaces así como también una visión general de las tendencias
actuales.

En el segundo tema, el alumno desarrollará un prototipo tomando en cuenta los principios

de diseño y utilizando herramientas para el diseño del mismo.

El tercer tema, se centra principalmente en la implementación de un framework para

desarrollar la interfaz, tomando en cuenta la ergonomía y los dispositivos a los que va
enfocada.

Finalmente, en el tema cuatro, los alumnos aplicarán distintas técnicas de evaluación

utilizadas para determinar que la interfaz cumpla con usabilidad, accesibilidad, así como
métodos de analítica web.

3. Participantes en el diseño y seguimiento curricular del programa

Lugar y fecha de Participantes Observaciones

elaboración o revisión

Villahermosa, Tabasco. Academia de Sistemas y Reunión para la elaboración

Marzo 09, 2017. Computación del Instituto de materia de especialidad.
Tecnológico de
Villahermosa.

4. Competencia(s) a desarrollar
Competencia(s) específica(s) de la asignatura

Conoce las tendencias actuales en el diseño de interfaces gráficas para web, así como
Página | 2
 TECNOLÓGICO NACIONAL DE MÉXICO

implementa en distintas plataformas y dispositivos empleando frameworks y aplicando

los principios básicos en el diseño de las mismas y finalmente, aplica métodos de
evaluación de experiencia de usuario en las interfaces creadas.

5. Competencias previas
Habilidades del manejo de la computadora.

Analiza, diseña y planifica interfaces para la web (sitios o páginas).

Construye proyectos web mediante un lenguaje de marcado.

Utiliza un lenguaje de presentación en un proyecto web.

Utiliza paquetes computacionales de texto, animaciones, imágenes entre otros.

Utiliza un lenguaje de programación del lado del cliente para la construcción de

interfaces gráficas para la web.

Utiliza un lenguaje de programación del lado del servidor para la construcción de

interfaces gráficas para la web.

6. Temario
No. Temas Subtemas

1 Fundamentos 1.1 Interfaces gráficas

1.2 Herramientas de diseño
1.2.1 Herramientas para el diseño
1.2.2 Herramientas para
optimización de gráficos
1.2.3 Herramientas para
animaciones y videos
1.2.4 Herramientas para
desarrollo

Página | 3
 TECNOLÓGICO NACIONAL DE MÉXICO

1.3 Tendencias del diseño

2 Interfaces de usuario 2.1 Principios de diseño

2.2 Arquitectura de información
2.3 Wireframes
2.4 Diseño modular
2.5 Diagramas de interacción
2.6 Ergonomía del diseño

3 Diseño de interfaces 3.1 Frameworks para el diseño de

multidispositivos interfaces
3.1.1 Características
3.1.2 Componentes
3.2 Implementación de un framework
3.3 Diseño responsivo
3.4 Formularios
3.5 Eventos
3.6 Validación
3.7 Integración de librerías externas

4 Experiencia de usuario 4.1 Conceptos fundamentales

4.1.1 Usabilidad
4.1.2 Accesibilidad
4.2 Métodos
4.2.1 Analítica web
4.2.2 Pruebas

7. Actividades de aprendizaje de los temas

1. Fundamentos

Competencias Actividades de aprendizaje

Página | 4
 TECNOLÓGICO NACIONAL DE MÉXICO

Específica(s): Conoce e implementa  Identificar los diferentes elementos

herramientas para el desarrollo de de las interfaces gráficas para web.
interfaces gráficas para web.
 Selección e implementación de
Investiga y comprende las interfaces
herramientas para el desarrollo de
gráficas así como las nuevas tendencias.
interfaces gráficas para web.
Genéricas:
 Desarrollar ejemplos prácticos del
Competencias instrumentales uso de cada una de las distintas
herramientas de diseño.
 Capacidad de análisis, síntesis y
abstracción.
 Realizar un reporte de investigación
 Habilidad en el uso de tecnologías sobre las tendencias de las
de información y comunicación. interfaces gráficas para web.
Competencias interpersonales

 Capacidad crítica y autocrítica

Competencias sistemáticas

 Habilidad de investigación
 Capacidad de aplicar conocimientos
en la práctica

2. Interfaces de usuario

Competencias Actividades de aprendizaje

Específica(s): Conoce e implementa los Realizar un reporte de investigación

principios básicos para el diseño de sobre todos los subtemas.
interfaces gráficas para web.
Diseñar la arquitectura de información
Desarrolla prototipos de interfaces gráficas para un proyecto final.
para web en base a la arquitectura de
Diseñar los Wireframes considerando la

Página | 5
 TECNOLÓGICO NACIONAL DE MÉXICO

información previamente diseñada. arquitectura de información.

Crea diagramas de interacción de las Proponer el diseño modular del

interfaces gráficas para web. prototipo de interfaces gráficas para
web.
Genéricas:
Diseñar los diagramas de interacción
Competencias instrumentales entre las distintas interfaces gráficas de
un proyecto propuesto.
 Capacidad de análisis, síntesis y
abstracción. Analizar y aplicar la ergonomía del
 Habilidad en el uso de tecnologías diseño en el prototipo de las interfaces
de información y comunicación. gráficas de un proyecto propuesto.
Competencias interpersonales

 Capacidad crítica y autocrítica

Competencias sistemáticas

 Habilidad de investigación
 Capacidad de aplicar conocimientos
en la práctica

3. Diseño de interfaces multidispositivos

Competencias Actividades de aprendizaje

Específica(s): Realizar un reporte de investigación

sobres los frameworks de diseño de
Compara e implementa frameworks de interfaces para web, considerando sus
diseño, para crear interfaces gráficas para características y componentes.
web adaptables a múltiples dispositivos.
Implementar un framework en el
Implementa elementos de formularios, desarrollo de las interfaces gráficas para
maneja eventos y validación en el diseño de web.

Página | 6
 TECNOLÓGICO NACIONAL DE MÉXICO

las interfaces gráficas para web. Elaborar prácticas de laboratorio con la

implementación de elementos de
Implementa librerías externas en las formularios, eventos y validación en las
interfaces gráficas para web. interfaces gráficas para web.
Genéricas: Investigar e incorporar librerías externas
Competencias instrumentales que permitan incrementar las
funcionalidades de las interfaces
 Capacidad de análisis, síntesis y gráficas desarrolladas.
abstracción.
 Habilidad en el uso de tecnologías
de información y comunicación.

Competencias interpersonales

 Capacidad crítica y autocrítica

Competencias sistemáticas

 Habilidad de investigación
 Capacidad de aplicar conocimientos
en la práctica

4. Experiencia de usuario

Competencias Actividades de aprendizaje

Específica(s): Usa técnicas que permiten Desarrollar interfaces gráficas para

evaluar la experiencia de usuario y web, en la que se pueda evaluar las
métodos de analítica web. reglas de usabilidad web.

Genéricas: Desarrollar interfaces donde se

Competencias instrumentales implemente aspectos de accesibilidad
 Capacidad para identificar, plantear para personas con algún tipo de
y resolver problemas. discapacidad. Incluyendo problemas

Página | 7
 TECNOLÓGICO NACIONAL DE MÉXICO

 Capacidad para gestionar y visuales, auditivos, físicos, cognitivos,

formular proyectos. neurológicos y del habla.
Competencias interpersonales
Aplicar métodos de analítica web y
 Capacidad para trabajar en equipo.
diversas pruebas para medir, analizar y
 Capacidad crítica y autocrítica.
generar reporte del tráfico de internet
Competencias sistémicas
para entender y optimizar el uso de un
 Habilidades de investigación.
proyecto web.
 Capacidad de aplicar los
conocimientos en la práctica.
 Capacidad de generar nuevas
ideas (creatividad).

8. Práctica(s)

 Realizar diseño de animaciones que integren imágenes, audio y video.

 Llevar a cabo tareas de modificación de imágenes fijas para crear efectos
visuales, aplicando la creatividad para obtener un elemento de la interfaz que sea
atractivo al usuario.
 Desarrollar ejemplos prácticos del uso de cada herramienta de diseño.
 Proponer un proyecto web a desarrollar durante todo el semestre.
 Diseñar Wireframes.
 Diseñar diagramas de interacción.
 Desarrollar interfaces aplicando frameworks de diseño.
 Investigar e incorporar librerías externas.
 Evaluar usabilidad y accesibilidad de un proyecto web

9. Proyecto de asignatura

El objetivo del proyecto que planteé el docente que imparta esta asignatura, es demostrar
el desarrollo y alcance de la(s) competencia(s) de la asignatura, considerando las
siguientes fases:

Página | 8
 TECNOLÓGICO NACIONAL DE MÉXICO

· Fundamentación: marco referencial (teórico, conceptual, contextual, legal) en el

cual se fundamenta el proyecto de acuerdo con un diagnóstico realizado, mismo que
permite a los estudiantes lograr la comprensión de la realidad o situación objeto de
estudio para definir un proceso de intervención o hacer el diseño de un modelo.

· Planeación: con base en el diagnóstico en esta fase se realiza el diseño del

proyecto por parte de los estudiantes con asesoría del docente; implica planificar un
proceso: de intervención empresarial, social o comunitario, el diseño de un modelo,
entre otros, según el tipo de proyecto, las actividades a realizar los recursos
requeridos y el cronograma de trabajo.

· Ejecución: consiste en el desarrollo de la planeación del proyecto realizada por

parte de los estudiantes con asesoría del docente, es decir en la intervención (social,
empresarial), o construcción del modelo propuesto según el tipo de proyecto, es la
fase de mayor duración que implica el desempeño de las competencias genéricas y
especificas a desarrollar.

· Evaluación: es la fase final que aplica un juicio de valor en el contexto laboral-

profesión, social e investigativo, ésta se debe realizar a través del reconocimiento de
logros y aspectos a mejorar se estará promoviendo el concepto de “evaluación para
la mejora continua”, la metacognición, el desarrollo del pensamiento crítico y reflexivo
en los estudiantes.

10. Evaluación por competencias

Son las técnicas, instrumentos y herramientas sugeridas para constatar los desempeños
académicos de las actividades de aprendizaje. La evaluación debe ser continua y
formativa.
 Portafolio de evidencias.
 Solución de casos prácticos.
 Solución de prácticas de diseño de interfaces gráficas para la web.
 Pruebas escritas y/o en línea por tema.
 Proyecto de integración final.
 Análisis de información de diversas fuentes.

Página | 9
 TECNOLÓGICO NACIONAL DE MÉXICO

 Participación en las actividades de aprendizaje.

11. Fuentes de información

1. Scott, Bill y Neil, Theresa. (2009). Designing Web Interfaces. First Edition, Estados
Unidos: O’Reilly Media, ISBN 978-0-596-51625-3.

2. Rees, Michael y White, Andrew. (2001). Designing Web Interfaces Interactive

Workbook. First Edition, Canadá: Prentice Hall, ISBN 0-13-085897-8.

3. Crumlish, Christian y Malone, Erin. (2009). Designing Social Interfaces Principles,

patterns, and practices forim provingthe user experience. First Edition, Estados
Unidos: O’Reilly Media, ISBN 978-0-596-15492-9.

4. Dhanesh, Ameeta. (2003). DesigningUsableWeb Interfaces. Edición Ilustrada,

Universidad Estatal de Pensilvania: Prentice Hall, ISBN0130888540

5. Bernal, Fernando y Cortijo, Francisco. (2005). Desarrollo profesional de aplicaciones

Web con ASP.NET. Primera Edición, México: Prentice Hall, ISBN 84-609-4245-7.

6. Magal, Teresa y Tortajal, Ignacio. (2006). Preproducción Multimedia, Comunicación

Audiovisual. Primera Edición, España: Universidad Politécnica de Valencia, ISBN84-
8363-040-0.

7. Luc Van Lancker, (2009). XHTML y CSS- Los nuevos estándares del código fuente,
Segunda edición, Ediciones ENI, ISBN9782746047426.

8. Chistohe Aubry Edicinoes : ENI HTML5 Y CSS3 Para sitios con Diseño Web
Responsive Publicado: Noviembre 2014 ISBN:778-2-7460-9318-8 REP:
LNIOWTRQDSHTM

9. Diseño de interfaces Web libro de José Eduardo Córcoles Tendero; Francisco

Montero Simarro RA-MA S.A. Editorial y Publicaciones 1ª ed., 1ª imp.(2012) 232
páginas; 25x20 cm ISBN: 8499641547 ISBN-13: 9788499641546

Página | 10
 TECNOLÓGICO NACIONAL DE MÉXICO

10. Diseño interfaces web Córcoles Tendero, Jose Eduardo; Montero Simarro, Francisco
Autor Editorial: RA-MA (2012) ISBN 10: 8499641547 ISBN 13: 9788499641546.

Página | 11