Proyecto docente

GUÍA DOCENTE
CURSO: 2016/17
40847 - CREANDO INTERFACES DE
USUARIO
CENTRO: 180 - Escuela de Ingeniería Informática
TITULACIÓN: 4008 - Grado en Ingeniería Informática
ASIGNATURA: 40847 - CREANDO INTERFACES DE USUARIO
CÓDIGO ULPGC: 40847
CÓDIGO UNESCO: 1203, 3304
MÓDULO: COMPUTACIÓN
MATERIA:
CRÉDITOS ECTS: 6
CURSO: 4
LENGUA DE IMPARTICIÓN (Especificar créditos de cada lengua)
ESPAÑOL: 6
INGLÉS:
TIPO: Obligatoria
SEMESTRE: 2º semestre
REQUISITOS PREVIOS
Diseño de Interfaces de Usuario
Plan de Enseñanza (Plan de trabajo del Profesor)
Contribución de la asignatura al perfil profesional:
Aplicar herramientas avanzadas en la construcción de interfaces de usuario. Explicar los
fundamentos de sistemas gráficos y su implicación en las tecnologías sobre las que se construyen
las interfaces de usuarios avanzadas tales como por ejemplo videojuegos o realidad virtual.
Competencias que tiene asignadas:
G1, G2, G3, G4, G5, N1, N2, N3, N4, N5, CP06
Objetivos:
OB1. Presentar y explicar la evolución de los sistemas gráficos en computación y como este hecho
determina las tecnologías sobre las que se construyen las interfaces de usuario.
OB2. Presentar y explicar una introducción a los fundamentos matemáticos de la representación
gráfica y los fundamentos físicos básicos de la luz, su proyección y reflexión, en los que se basan
las librerías gráficas.
OB3. Presentar y explicar la secuencia de los procesos computacionales del denominado
“pipeline” gráfico.
OB4. Presentar, explicar y utilizar las librerías gráficas más utilizadas como por ejemplo OpenGL.
OB5. Presentar, explicar y utilizar herramientas de construcción de interfaces de usuarios
avanzadas en C/C++ como Qt.
Página 1 de 10
Contenidos:
La asignatura Diseño de Interfaces de Usuario (DIU) constituye el antecedente formativo de esta
asignatura; ella se enfoca a presentar por un lado los aspectos teóricos, empíricos y cognitivos
implicados en las interfaces de usuario. Por otro lado, se introducen y utilizan las herramientas de
diseño basadas en Java/Swing, sobre todo utilizando herramientas como GUI Builder (Matisse)
que automatizan el proceso de maquetado y generación de código. Esta herramienta es un ejemplo
de una línea de herramientas enfocada al diseño (que es más completo que el de programación) de
interfaces de usuarios como son el ya citado GUI Builder en Netbeans, Swing Designer en Eclipse
ambos en Java y en C/C++ el Qt Designer y Blend en Visual Studio.
La mayor parte de la interfaces de usuario habituales en versión de escritorio pueden abordarse
con el nivel de esas herramientas, pero no así un número más reducido de las mismas, que pueden
exigir mayores prestaciones, mayor interoperabilidad con gráficos. Por ejemplo Videojuegos y
Realidad Virtual, que aunque no son el objetivo de esta asignatura, las habilidades adquiridas
pueden ser muy útiles para la proyección profesional del alumno en esos campos cada vez más
importantes.
La asignatura de Creación de Interfaces de Usuarios (CIU) se enfoca sobre todo desde un punto de
vista de uso de tecnologías fundamentales que permitan abordar interfaces de usuario más
avanzadas. Se aborda la creación de interfaces mediante programación C/C++. Aunque las
herramientas en este lenguaje no alcanzan el nivel de automatización alcanzado con GUI Builder,
si permiten la interoperabilidad más eficiente con gráficos. En esta línea se presenta una breve
introducción al entorno Qt.
La parte mas importante de la signatura se destina a presentar los elementos básicos de gráficos
por computador, muy especialmente utilizando como vehículo la librería OpenGL que constituye
el estándar de facto de la industria de gráficos y de muchas de sus sectores profesionales
derivados. Los gráficos por computador son importantes, además de por sí mismos, también
porque muchas interfaces de usuario avanzadas, que trascienden del tradicional modelo de
escritorio para adentrarse en otros paradigmas, su implementación se sustenta en el soporte
tecnológico muy sólido como es OpenGL. Aunque existen otras plataformas alternativas como
Direct3D (parte de DirectX), se ha preferido estudiar OpenGL por su alto grado de estandarización
y por ser multiplataforma.
Se estudiará y utilizará la librería OpenGL y con ello se adquirirá la habilidad básica para poder
utilizar en el futuro subconjuntos de la misma tales como OpenGL ES (Embedded Systems) para
entornos empotrados y dispositivos ubicuos y WebGL que es un subconjunto codificado en el
lenguaje de JavaScript para ser utilizado en el contexto de HTML5.
Seguidamente, se describen todos los módulos descompuestos en temas incorporando las
competencias, un breve desglose de contenidos, la duración temporal y la bibliografía asociada
que incorpora exhaustivamente la literatura gris en Internet. Dada la limitación de recursos
temporales, en algunos módulos se incorporan temas de Estudio de Casos para poder ilustrar sobre
ejemplos concretos multitud de detalles que no pueden desarrollarse de forma regular.
MÓDULO 1. Gráficos en la GUI y OpenGL. (26 horas T)
---------------------------------------------------------------------Tema 1.1. Paradigmas de Interacción Avanzada (2 hora) (G1, G2, G3, G4, G5, N1, N2, N3, N4,
N5, CP06) Influencia de las tecnologías graficas en videojuegos y áreas emergentes como realidad
virtual.
Página 2 de 10
Tema 1.2. Visión general de Gráficos y OpenGL (2 hora) (G1, G2, G3, G4, G5, N1, N2, N3, N4,
N5, CP06) Evolución de los sistemas gráfcios. Standares OpenGL y Direct3D. Evolución de
OpenGL, subconjuntos OpenGL ES y WebGL. [Hea10] [Mcr05] [Ang12] [Shr12]
Tema 1.3. Librerías y Toolkits (4 hora) (G1, G2, G3, G4, G5, N1, N2, N3, N4, N5, CP06)
Librería auxiliar GLU y toolkit GLUT. Utilidades de Windowing. [Hea10] [Mcr05] [Ang12]
[Shr12]
Tema 1.4. Proyecciones Ortográficas y Perspectiva (2 hora) (G1, G2, G3, G4, G5, N1, N2, N3,
N4, N5, CP06) Proyecciones geométricas. [Hea10] [Mcr05] [Ang12] [Shr12]
Tema 1.5. Vértices, líneas, triángulos y polígonos. (2 hora) (G1, G2, G3, G4, G5, N1, N2, N3,
N4, N5, CP06) . [Hea10] [Mcr05] [Ang12] [Shr12]
Tema 1.6. Transformaciones y matrices (2 hora) (G1, G2, G3, G4, G5, N1, N2, N3, N4, N5,
CP06) Traslaciones, rotaciones, escalado y perspectiva [Hea10] [Mcr05] [Ang12] [Shr12]
Tema 1.7. Modelos de cámara (2 hora) (G1, G2, G3, G4, G5, N1, N2, N3, N4, N5, CP06)
Matrices de modelos y cámara. [Hea10] [Mcr05] [Ang12] [Shr12]
Tema 1.8. Iluminación y materiales (2 hora) (G1, G2, G3, G4, G5, N1, N2, N3, N4, N5, CP06)
Tipos de iluminación: ambiente, difusa y especular. Modelo de Phong [Hea10] [Mcr05] [Ang12]
[Shr12]
Tema 1.9. Modelos 3D (2 hora) (G1, G2, G3, G4, G5, N1, N2, N3, N4, N5, CP06) Formatos de
modelos 3D, PLY, OBJ. [Hea10] [Mcr05] [Ang12] [Shr12]
Tema 1.10. Imágenes y texturas (4 hora) (G1, G2, G3, G4, G5, N1, N2, N3, N4, N5, CP06)
Lectura y rendering de imágenes, Mapeo de texturas. Operaciones de filtrado [Hea10] [Mcr05]
[Ang12] [Shr12]
Tema 1.11. Curvas y superficies. Interpolación, splines, B-splines y NURBS (2horas) (G1, G2,
G3, G4, G5, N1, N2, N3, N4, N5, CP06) [Len12] [Jan15] [Vin13]
Bibliografía del Módulo.
----------------------------[Len12] Mathematics for 3D Game Programming and Computer Graphics, E. Lengyel, Course
Technology, 2012
[Jan15] Mathematical Structures for Computer Graphics, S.J. Janke, Wiley, 2015,
[Vin13] Calculus for Computer Graphics, John Vince, Springer, 2013
[Hea10] Computer Graphics with OpenGL, D.D: Hearn, Prentice Hall, 2010
[Mcr05] Advanced Graphics Programming Using OpenGL, T. McReynolds, D. Blythe, Morgan
Kaufman, 2005
[Ang12] Interactive Computer Graphics, a Top-Down Approach with Shader-based OpenGL, E.
Angel, D Shreiner, Addison-Wesley, 2012
Página 3 de 10
[Shr12] OpenGL Programming Guide, D. Shreiner et al, Addison-Wesley, 2012
[Ogl] OGLdev. Modern OpenGL Tutorials, http://ogldev.atspace.co.ul/
MÓDULO 2. Diseño de Interfaces de Usuario con Qt (4 horas T)
------------------------------------------------------------------------------Tema 2.1 Entorno Qt. Modelo-Vista. Ventana principal y clases básicas. Qt Creator yQt Designer
(2 horas) (G1, G2, G3, G4, G5, N1, N2, N3, N4, N5, CP06). [Sum11] [Bla08] [Th07] [Mol07]
Tema 2.2 Widgets, Layout, Eventos y Diálogos, (2 horas) (G1, G2, G3, G4, G5, N1, N2, N3, N4,
N5, CP06) [Sum11] [Bla08] [Th07] [Mol07]
Bibliografía del Módulo
----------------------------[Ezu06] An Introduction to Design Patterns C++ with Qt4, A. Ezut, P. Ezut, Ptrentice-Hall 2006
[Sum11] Advanced Qt Programming, M. Summerfield, Addison-Wesley, 2011
[Bla08] C++ GUI Programming with Qt4, J. Blanchette, M Summerfeld, Prentice-Hall, 2008
[Th07] Fundations of Qt Development, J. Thelin,, Apress, 2007
[Mol07] The book of Qt: the art of building Qt Applications, D. Molkentin, Open Source Press,
2007
PROGRAMA DE PRÁCTICAS
El programa de práctica se enfoca a reforzar y complementar los contenidos presentados en el
aula. Se adopta la metodología de mantener un relativo paralelismo entre los contenidos expuestos
en el aula (con cierta pre-anticipación) y los utilizados en el laboratorio. Se exceptúa un caso, y es
que mientas se imparten los primeros temas del Módulo 1, de naturaleza general, se realizarán
simultáneamente las primeras prácticas de OpenGL de naturaleza más simple, como por ejemplo
la de creación del Frame, o ventana principal, el dibujo de primitivas geométricas muy básicas. En
el resto de las prácticas se procurará mantener una cierta sincronía temporal.
Práctica 1. Primeros pasos en OpenGL (2 horas)
Práctica 2. Utilización del Toolkit GLUT (4 horas)
Práctica 3. Dibujo de objetos geométricos básicos (4 horas)
Práctica 4. Transformaciones y matrices (2 horas)
Práctica 5. Modelos de cámara (2 horas)
Práctica 6. Orbitación y Zoom (2 horas)
Práctica 7. Iluminación y materiales (2 horas)
Práctica 8. Modelos 3D (2 horas)
Práctica 9. Imágenes y texturas (4 horas)
Práctica10. Crear Interfaces de Usuario en Qt.(2 horas)
Práctica 11. Crear aplicaciones de OpenGL en Qt. (2 horas)
Práctica 12. Monitorización del Proyecto (4 horas)
Página 4 de 10
Práctica 5. Proyectos avanzados OpenGL. Texturas y modelos 3D (4 horas)
Práctica 6. Gráficos y CUDA (4horas)
Práctica 7. Introducción a Qt (2 horas)
Práctica 8. Proyectos con Qt Designer (4 horas)
Práctica 9. Monitorización del Proyecto de Curso (4 horas)
Metodología:
La forma de llevar a cabo la docencia, o metodología se articula en la docencia presencial que se
organiza en clases de teoría, prácticas en aula y prácticas en laboratorio según se enumeran:
AF1. Clases de Teoría: Se presentan los contenidos incidiendo en la vertiente de utilidad de los
métodos y procedimientos presentados. Se indicará cuales son además las líneas de lectura y
estudio personal que alumno deberá seguir para complementar las sesiones presenciales. Se
realizarán en un contexto científico pero se incidirá también en los contextos profesionales y
sociales que son también muy importantes en el diseño de interfaces de usuario.
AF2. Clases de Práctica en aula y laboratorio: Se presentará en primer lugar en las sesiones en el
aula la situación de las tareas, actividades y ejercicios que se realizaran en el laboratorio, en el
contexto de los métodos teóricos y como las actividades prácticas ilustran e incrementa el
conocimiento, habilidades y destrezas en la resolución de problemas de programación tendentes a
crear sistemas de interfaces de usuario demostrativos. Se realizarán en un contexto orientado a la
actividad profesional del diseño de interfaces de usuario
AF3. Tutorías: Se realizarán tanto individualmente como en grupos para aclarar los problemas y
dudas que surgen tanto de los conceptos en clases teóricas como en las actividades prácticas
AF4. Desarrollo práctico de una Interface de Usuario operativa focalizada en el uso de gráficos y/o
focalizada en el uso de la herramienta Qt. Incluirá diseño conceptual, diseño del software,
programación y defensa pública con demostración Esta actividad es de especial proyección hacia
el contexto profesional y social.
La docencia de la materia se organiza en la enseñanza de conceptos y fundamentos
complementada con las prácticas que generan habilidad y destreza. Podemos distinguir entre las
horas presenciales y las no presenciales.
Si bien se considera a nivel formal la distinción entre prácticas en aula y prácticas en laboratorio,
en la práctica se realizarán ambas en el laboratorio asignado, pero la primera hora de la sesión de
dos horas se hará énfasis en las explicaciones del profesor apoyado por medios audiovisuales,
mientas que la siguiente hora se centrará en el trabajo de los alumnos tutorizados por el profesor.
La materia consta de 6 créditos, que a razón de 25 horas/crédito equivale a 150 horas totales que se
distribuyen de la forma siguiente:
Presenciales No-Presenciales Totales
Teoría:
30
45
75
PA:
15
20
35
PL:
15
20
35
Evaluación:
5
Totales:
60
85
150
Página 5 de 10
La materia se imparte en el primer cuatrimestre en un periodo de 15 semanas, lo que implica que
la dedicación del alumno a la materia es:
Enseñanza presencial = 4 horas/semana (2 de Teoría + 1 de Práctica en aula+ 1 de Prácticas en
laboratorio)
Enseñanza no presencial = 5.6 horas/semana (3 de Teoría + 1.3 de Prácticas en aula + 1.3 de
Prácticas en laboratorio)
Evaluacion:
Criterios de evaluación
---------------------------Para la evaluación se tendrán en cuanta las distintas actividades programadas: La asistencia
participativa en las clases de teoría y prácticas en aula, la aprobación de un trabajo de curso y la
aprobación de las prácticas encargadas.
FE1. Realización y defensa de un trabajo de curso encargado por el profesor en el que el alumno
propondrá un proyecto preliminar de interface de usuario para una aplicación con especificaciones
definidas. Competencias: G1,G2,G3,G4,G5,N1,N2,N3,N4,N5,CP06. Esta relacionada con la
Actividad formativa AF4 principalmente además de la AF1 y AF3
FE2. Realización y presentación de las respectivas memorias de cada una de las prácticas
planificadas
y
expuestas
en
el
campus
virtual.
Competencias:
G1,G2,G3,G4,G5,N1,N2,N3,N4,N5,CP06. Está relacionada con la actividad formativa AF2 y
AF3.
Sistemas de evaluación
---------------------------El sistema de evaluación establecerá en base al siguiente criterio: nota = min(10, 0.5*nota del
trabajo de curso + 0.5*nota media de las prácticas + 0.1*asistencia y participación) El sistema de
evaluación será idéntico en las diversas convocatorias de la asignatura.
Criterios de calificación
----------------------------Para la calificación de los diversos elementos sujetos a valoración, trabajos y prácticas, se tendrán
en cuenta los contenidos, así como la organización y presentación de los mismos.
Plan de Aprendizaje (Plan de trabajo del Estudiante)
Tareas y actividades que realizará según distintos contextos profesionales (científico,
profesional, institucional, social)
TA1. Realización de comentarios y opiniones que el profesor solicita a los alumnos de forma
individual o grupal a los alumnos con el objeto de fomentar el sentido crítico y la interacción
social. Contexto Científico y Social.
TA2. Realización de ejercicios prácticos en el laboratorio. Contexto Científico y Profesional.
TA3. Realización y exposición pública del diseño y programación de una interfaz propuesta por el
profesor. En este caso el alumno trabajará sobre y supuesto concreto y expondrá y defenderá las
Página 6 de 10
decisiones adoptadas. Se pretende que el alumno se sitúe en un entorno más próximo al
profesional donde debe concretar y defender sus propuestas. Contexto Profesional y Social.
Temporalización semanal de tareas y actividades (distribución de tiempos en distintas
actividades y en presencialidad - no presencialidad)
Se tomará una equivalencia de 1 ECTS como 25 horas de las cuales 10 son presenciales y las
restantes 15 como no presenciales.
Horas Presenciales Horas No-presenciales
Módulo 1
Tema 1-1
Tema 1-2
Tema 1-3
Tema 1-4
Tema 1-5
Tema 1-6
Tema 1-7
Tema 1-8
Tema 1-9
Tema 1-10
Tema 1-11
2
2
4
2
2
2
2
2
2
3
3
6
3
3
3
3
3
3
6
3
Módulo 2
Tema 2-1 2
Tema 2-2
4
2
3
2
3
La planificación de las diferentes semanas del curso (15 por ser una signatura cuatrimestral) es la
siguiente:
Teoría
Prácticas
Semana 1: Tema 1-1
Práctica 1
Semana 2: Tema 1-2 Práctica 2
Semana 3: Tema 1-3 Práctica 2
Semana 4: Tema 1-3
Práctica 3
Semana 5: Tema 1-4
Práctica 4
Semana 6: Tema 1-5
Práctica 5
Semana 7: Tema 1-6
Práctica 6
Semana 8: Tema 1-7
Práctica 7
Semana 9: Tema 1-8
Práctica 8
Semana 10: Tema 1-9
Práctica 9
Semana 11: Tema 1-10
Práctica 9
Semana 12: Tema 1-10
Práctica 10
Semana 13: Tema 1-11
Práctica 11
Semana 14: Tema 2-1
Práctica 12
Semana 15: Tema 2-2
Práctica 12
Recursos que tendrá que utilizar adecuadamente en cada uno de los contextos
profesionales.
El alumno tendrá que utilizar los recursos didácticos que se podrán a su disposición: apuntes,
bibliografía, enlaces a libros on-line y documentación. En las prácticas, el alumno utilizará las
plataformas de desarrollo Microsoft Visual Studio y Qt instaladas previamente en los equipos de
Página 7 de 10
los laboratorios.
RE1. Notas de curso elaboradas por el profesor
RE2. Documentación pública disponible en Internet.
RE3. Bibliografía disponible en la Biblioteca.
RE4. Entornos de Desarrollo Microsoft Visual Studio y Qt disponibles en los Laboratorios.
RE5. Notas de definición de objetivos y de orientación en las prácticas
Resultados de aprendizaje que tendrá que alcanzar al finalizar las distintas tareas.
Al finalizar la docencia de teoría y relacionada con la actividades formativas AF1, AF2 y AF3:
RA1. Conocer los fundamentos formales de la representación de gráficos 3D.
RA2. Conocer y saber utilizar la librería OpenGL para la programación de aplicaciones avanzadas
que impliquen interacción.
RA2. Conocer y saber utilizar a nivel básico el entornos de programación avanzada C/C++ como
Qt para construir Interfaces de Usuario para entornos Windows, Linux y Android.
Al finalizar las prácticas y el trabajo propuesto, relacionadas con las actividades formativas AF2,
AF3 y AF4.
RA8. Diseñar y programar prototipos de interfaces de usuario avanzadas con la incorporación de
gráficos, utilizando herramientas y librerías que reflejan el estado del arte profesional.
Plan Tutorial
Atención presencial individualizada
Se atenderá presencialmente y de forma individualizada a los alumnos en el horario establecido
para las tutorías. El lugar de atención será el despacho del profesor D3-6. Se atenderá en el horario
de tutorías que oficialmente establece el Departamento, o bien en caso excepcional en un horario
concertado entre profesor y alumno.
Atención presencial a grupos de trabajo
Cuando se requiera, por ejemplo en actividades prácticas, se realizará atención en grupos de
trabajo. Se realizarán en horarios de tutorías o bien horarios concertados y según el número de
alumnos implicados, se realizaran en el despacho D3-6, una sala de reunión o bien un aula o
laboratorio.
Atención telefónica
En desuso, pero se atenderá cuando sea solicitada.
Página 8 de 10
Atención virtual (on-line)
La atención se realizará mediante la Plataforma Moodle de la Universidad.
Datos identificativos del profesorado que la imparte.
Datos identificativos del profesorado que la imparte
Juan Ángel Méndez Rodríguez
Departamento:
Ámbito:
Área:
Despacho:
Teléfono:
(COORDINADOR)
260 - INFORMÁTICA Y SISTEMAS
075 - Ciencia De La Comp. E Intel. Artificial
075 - Ciencia De La Comp. E Intel. Artificial
INFORMÁTICA Y SISTEMAS
928458746
Correo Electrónico: [email protected]
Bibliografía
[1 Básico] Calculus for computer graphics /
by John Vince.
Springer,, London … [etc.] : (2013)
978-1-4471-5465-5
[2 Básico] OpenGL programming guide: the official guide to learning OpenGL, versions 3.0 y 3.1 /
Dave Shreiner, the Khronos OpenGL ARB Working Group.
Addison-Wesley,, Upper Saddle River, NJ [etc.] : (2009) - (7th ed.)
978-0-321-55262-4
[3 Básico] Computer graphics with OpenGL /
Donald Hearn, M. Pauline Baker.
Pearson,, Upper Saddle River, NJ : (2003) - (3rd ed.)
0-13-120238-3
[4 Básico] Mathematics for 3D game programming and computer graphics /
Eric Lengyel.
Cengage Learning,, Boston : (2012) - (3rd ed.)
9781435458864
[5 Básico] C++ GUI programming with Qt 4 /
Jasmin Blanchette, Mark Summerfield.
Prentice Hall,, Upper Saddle River, N.J : (2008) - (2nd ed.)
978-0-13-235416-5
[6 Básico] CUDA by example :an introduction to general-purpose GPU programming /
Jason Sanders, Edward Kandrot.
Addison-Wesley,, Boston : (2011)
978-0-13-138768-3
[7 Básico] Advanced Qt programming :creating great software with C++ and Qt 4 /
Mark Summerfield.
Addison-Wesley,, Upper Saddle River, NJ : (2013) - (4th pr.)
978-0-321-63590-7
[8 Básico] Mathematical structures for computer graphics /
Steven J. Janke.
Wiley,, Hoboken : (2015)
978-1-118-71219-1
Página 9 de 10
[9 Básico] Advanced graphics programming using OpenGL /
Tom McReynolds, David Blythe.
Elsevier,, Amsterdam [etc.] : (2005)
1-55860-659-9
[10 Recomendado] An introduction to design patterns in C++ with Qt /
Alan Ezust and Paul Ezust.
Prentice Hall,, Upper Saddle River, NJ : (2012) - (2nd ed.)
978-0-13-282645-7
[11 Recomendado] Interactive computer graphics: a top-down approach with OpenGL /
Edward Angel.
Addison Wesley,, Boston [etc.] : (2003) - (3rd ed.)
0-201-77343-0
[12 Recomendado] Foundations of Qt development /
Johan Thelin.
Apress,, Berkeley : (2007)
978-1-59059-831-3 (pbk)
Página 10 de 10