Programación de interfaces de usuario en sistemas interactivos 2D y 3D
MF2733_3
Módulo formativo MF2733_3: Programación de interfaces de usuario en sistemas interactivos 2D y 3D
150 horas
C1: Aplicar la configuración de estructuras y elementos del interfaz de usuario (UI) de un sistema interactivo, estableciendo los componentes y puntos de anclaje para gestionar la estrategia de visualización de información, avisos y errores en la aplicación, siguiendo un documento de diseño de un juego (‘Game Design Document’ -GDD-) o proyecto de realidad virtual o extendida.
CE1.1 Describir las características de los editores visuales de interfaces de usuario, explicando las opciones de configuración y su funcionalidad.
CE1.2 Describir procedimientos de configuración de superficies, ‘canvas’, paneles y componentes de tipo contenedor, explicando los pasos a seguir para asignar parámetros visuales tales como tamaño, posición, color y transparencia entre otros.
CE1.3 Explicar procedimientos de configuración de puntos de anclaje (‘anchors’) del interfaz, explicando los pasos a seguir para planificar la estrategia de cambio de tamaño (‘resize’), para que la interfaz se ajuste a cualquier resolución de pantalla de la plataforma para la que vaya dirigida la UI.
CE1.4 Enumerar elementos de las interfaces gráficas de usuario tales como botones, barras deslizadoras (‘sliders’), desplegables ‘dropdown’, casillas de marcado (‘check list’), entre otras, explicando el proceso de edición visual y personalización del aspecto a través de ‘sprites’.
CE1.5 Describir el proceso de encapsulado en paquetes del ‘software’, indicando los pasos a seguir, para su reutilización en escenas o su exportación en otros proyectos.
CE1.6 Explicar procedimientos de gestión de datos persistentes a través de base de datos, tanto en servidores como en local y/o utilizando un diccionario de datos, explicando los pasos, parámetros y mecanismos de configuración de la conexión y de generación de consultas.
CE1.7 En un supuesto práctico de aplicación de la configuración de estructuras y elementos del interfaz de usuario (UI) de un sistema interactivo, estableciendo los componentes y puntos de anclaje para gestionar la estrategia de visualización de información, avisos y errores en la aplicación, siguiendo un documento de diseño de un juego (‘Game Design Document’ -GDD-) o proyecto de realidad virtual o extendida:
– Establecer una superficie en la que se genera una interfaz mediante el editor visual, utilizando componentes de tipo contenedor.
– Configurar ‘canvas’ y paneles definidos en el documento de diseño o proyecto, usando la plataforma de desarrollo asignado parámetros visuales tales como tamaño, posición, color y transparencia entre otros.
– Configurar puntos de anclaje (‘anchors’) del interfaz, planificando la estrategia de cambio de tamaño (‘resize’), para que la interfaz se ajuste a cualquier resolución de pantalla de la plataforma para la que vaya dirigida la UI.
– Generar elementos de las interfaces gráficas de usuario mediante editores visuales, utilizando las funcionalidades propias del editor, configurando objetos proporcionados por la plataforma de desarrollo tales como botones, barras deslizadoras (‘sliders’), desplegables ‘dropdown’, casillas de marcado (‘check list’), entre otras, personalizando el aspecto a través de ‘sprites’.
– Preparar el ‘software’, desarrollado mediante encapsulado en paquetes para su reutilización en escenas o su exportación a paquetes para posterior importación en otros proyectos.
– Gestionar los datos persistentes a través de base de datos en servidores, en local y/o utilizando un diccionario de datos, mediante configuración de la conexión y generación de consultas.
C2: Aplicar procedimientos de establecimiento de pautas de diseño y de configuración de las animaciones de la interfaz gráfica de usuario, distribuyendo controles y mensajes, cuidando el aspecto para mejorar la usabilidad, siguiendo los criterios establecidos en un GDD o documento de diseño de un proyecto de realidad virtual o extendida.
CE2.1 Diferenciar componentes básicos y avanzados en un UI, señalando la funcionalidad y objetivos de cada componente.
CE2.2 Detallar el proceso de configuración del aspecto y del comportamiento de componentes avanzados en un UI, utilizando lenguajes tales como html, xml o css, entre otros o, en su caso, utilizando componentes externos a la plataforma de desarrollo e importándolos en el proyecto y personalizándolos.
CE2.3 Describir el procedimiento de diseño de interfaces para aplicaciones de gestión 2D multiplataforma, creando el sistema de redimensión (‘resize’) y definiendo las políticas de reutilización de elementos.
CE2.4 Definir los criterios para homogeneizar los elementos de la UI y que afectan a la fuente, el color, el comportamiento y cualquier parámetro común, usando una plataforma de desarrollo.
CE2.5 Explicar los principios de usabilidad de interfaces, tales como coherencia, facilidad de interpretación, entre otros, para obtener un diseño intuitivo, perceptible y comprensible, respondiendo a los principios heurísticos tales como visibilidad del estatus, consistencia con el mundo real, libertad de control del usuario, prevención de errores, flexibilidad y eficiencia, diseño minimalista, disponibilidad de sistemas de ayuda u otros.
CE2.6 Describir criterios para definir una política de mensajes con el usuario, limitando la extensión de cada uno y procurando su precisión y claridad, anticipando la posible reutilización paneles, mensajes y otros elementos.
CE2.7 Enumerar parámetros de aspecto de una UI, tales como tamaño, sonidos, colores, espacios y márgenes, entre otros, explicando los criterios que facilitan su legibilidad, siguiendo estándares y principios de usabilidad y en función del perfil y características del usuario al que va dirigido.
CE2.8 Explicar las funciones y operativa del generador de animaciones y del sistema de partículas de una plataforma de desarrollo, describiendo los pasos para crear los fotogramas clave en los que se asignan posición, tamaño, escala o rotación y el color para configurar su comportamiento dinámico.
CE2.9 En un supuesto práctico de aplicación de procedimientos de establecimiento de pautas de diseño y de configuración de las animaciones de la interfaz gráfica de usuario, distribuyendo controles y mensajes, cuidando el aspecto para mejorar la usabilidad siguiendo los criterios establecidos en un GDD o documento de diseño de un proyecto de realidad virtual o extendida:
– Adaptar el aspecto y el comportamiento de componentes avanzados de un UI, utilizando lenguajes tales como html, xml o css, entre otros o, en su caso, utilizando componentes externos a la plataforma de desarrollo e importándolos en el proyecto y personalizándolos.
– Diseñar Las interfaces para aplicaciones de gestión 2D multiplataforma, creando el sistema de redimensión (‘resize’) y definiendo las políticas de reutilización de elementos de diseño.
– Homogeneizar elementos de la UI respecto a la fuente, el color, el comportamiento y cualquier parámetro común al conjunto de objetos que la conforman y que nos proporciona la plataforma de desarrollo.
– Ubicar controles de usuario en la interfaz, usando los principios de usabilidad tales como coherencia, facilidad de interpretación, entre otros, para obtener un diseño intuitivo.
– Establecer una política de mensajes con el usuario, limitando la extensión de cada uno y procurando su precisión y claridad, anticipando la posible reutilización paneles, mensajes y otros elementos.
– Diseñar el aspecto de la interfaz de usuario, estableciendo parámetros tales como tamaño, sonidos, colores, espacios y márgenes, entre otros para facilitar su legibilidad, siguiendo estándares y principios de usabilidad y en función del perfil y características del usuario al que va dirigido.
– Desarrollar animaciones sobre componentes del interfaz de usuario a través del generador de animaciones o del sistema de partículas de la plataforma de desarrollo, creando los fotogramas clave en los que se asignan posición, tamaño, escala o rotación y el color y configurando su comportamiento dinámico.
C3: Aplicar procedimientos de configuración de eventos producidos desde la UI, asociándolos a los objetos de una interfaz, usando la plataforma de desarrollo y siguiendo las pautas que indica un GDD o documento de diseño de un proyecto de realidad virtual o extendida, para gestionar la interacción con usuarios.
CE3.1 Enumerar los tipos de eventos producidos desde una UI, indicando por qué situaciones se disparan.
CE3.2 Describir procedimientos para definir un código que dé respuesta a un evento a través de la programación de clases y métodos, indicando cómo asociarlo a los objetos de comunicación de la UI que nos proporciona una plataforma de desarrollo.
CE3.3 Explicar el proceso de integración de una interfaz en un producto a desarrollar, indicando cómo realizar las conexiones sobre el ‘back?end’ o sobre el motor de la aplicación.
CE3.4 En un supuesto práctico de aplicación de procedimientos de configuración de eventos producidos desde la UI, asociándolos a los objetos de una interfaz, usando la plataforma de desarrollo y siguiendo las pautas que indica un GDD o documento de diseño de un proyecto de realidad virtual o extendida para gestionar la interacción con usuarios:
– Configurar la entrada de eventos de un interfaz para darles respuesta a través de la programación de clases y métodos, asociándolos a los objetos de comunicación de la UI que nos proporciona la plataforma de desarrollo.
– Gestionar eventos dinámicos de la UI, relacionándolos con el método que los trata, tomando como parámetro de entrada del método el valor de salida del evento del elemento a controlar.
– Integrar la capa de la interfaz en el producto a desarrollar, realizando las conexiones sobre un ‘back-end’ o sobre el motor de la aplicación.
C4: Aplicar procedimientos de diseño de una UI para espacios 3D propios de entornos de realidad virtual, aumentada y/o mixta (VR, AR, MR), configurando los componentes contenedores y adaptando el diseño a la tercera dimensión.
CE4.1 Determinar estrategias de visualización, según se trabaje en el espacio 3D con una única cámara o con varias.
CE4.2 Explicar el proceso de configuración de ‘canvas’ en función de la estrategia de visualización.
CE4.3 Describir posibilidades de diseño de contenedores y componentes 3D teniendo en cuenta las tecnologías a utilizar para interactuar con dispositivos tales como teclado, ratón, ‘joystick’, guantes hápticos o controladores de realidad virtual, entre otros.
CE4.4 Explicar la relación entre el número de cámaras con las vistas que se quiera proporcionar al usuario y con la plataforma para la que se va a desarrollar la aplicación tal como equipo de sobremesa, móvil, tableta, gafas VR, entre otros, describiendo los condicionantes de cada caso.
CE4.5 Describir las características configurables en interfaces de usuario dirigidas a la realidad aumentada (AR), teniendo en cuenta si se va a trabajar sobre un espacio 2D, un espacio 3D o si se va a hacer uso de la realidad mixta (MR), estableciendo parámetros propios de un entorno 3D tales como profundidad y transparencia, entre otros.
CE4.6 En un supuesto práctico de aplicación de procedimientos de diseño de una UI para espacios 3D propios de entornos de realidad virtual, aumentada y/o mixta (VR, AR, MR) configurando los componentes contenedores y adaptando el diseño a la tercera dimensión:
– Configurar un ‘canvas’, creando una estrategia de visualización según se trabaje en el espacio 3D con una única cámara o con varias.
– Diseñar contenedores y sus componentes teniendo en cuenta las tecnologías a utilizar, interactuando con dispositivos tales como teclado, ratón, ‘joystick’, guantes hápticos o controladores de realidad virtual, entre otros.
– Definir el número de cámaras virtuales en función de las vistas que se quiera proporcionar al usuario y de la plataforma para la que se va a desarrollar la aplicación tal como equipo de sobremesa, móvil, tableta, gafas VR, entre otros.
– Diseñar una interfaz de usuario dirigida a la realidad aumentada (AR), teniendo en cuenta si se va a trabajar sobre un espacio 2D, un espacio 3D o si se va a hacer uso de realidad mixta (MR), estableciendo parámetros propios de un entorno 3D tales como profundidad y transparencia, entre otros.
Capacidades cuya adquisición debe ser completada en un entorno real de trabajo.
C1 respecto a CE1.7; C2 respecto a CE2.9; C3 respecto a CE3.4; C4 respecto a CE4.6;
Otras Capacidades:
Responsabilizarse del trabajo que desarrolla y del cumplimiento de los objetivos.
Demostrar cierto grado de autonomía en la resolución de contingencias relacionadas con su actividad.
Comunicarse eficazmente con las personas adecuadas en cada momento.
Demostrar creatividad y cuidar la estética de los elementos visuales.
Mostrar en todo momento una actitud de respeto hacia los compañeros, procedimientos y normas internas de la empresa.
Participar y colaborar activamente en el equipo de trabajo.
Aplicar de forma efectiva el principio de igualdad de trato y no discriminación en las condiciones de trabajo entre mujeres y hombres.
1 Estructuras y elementos del interfaz de usuario (UI) de un sistema interactivo
Editores visuales. Características y configuración.
‘Canvas’, superficies, paneles y componentes tipo contenedor. Configuración. Tamaño, posición, color, transparencia, entre otros. Puntos de anclaje (‘anchor’). Estrategia de cambio de tamaño (‘resize’).
Elementos del UI: botones, barras deslizadoras (‘sliders’), desplegables ‘dropdown’, casillas de marcado (‘check list’), entre otras. Edición visual. Personalización con ‘sprites’.
Reutilización del ‘software’. Encapsulado en paquetes del ‘software’.
Gestión de datos persistentes. Conexión a base de datos y consultas.
2 Pautas de diseño y de configuración de las animaciones de la interfaz gráfica de usuario de un sistema interactivo
Componentes básicos y avanzados en un UI. Configuración del aspecto y del comportamiento de componentes avanzados.
Diseño de interfaces para aplicaciones de gestión 2D. Políticas de ‘resize’ y políticas de reutilización.
Parámetros de aspecto de una UI. Tamaño, sonidos, colores, espacios y márgenes, entre otros.
Usabilidad de interfaces. ‘Principios de usabilidad’. Principios heurísticos.
Política de mensajes con el usuario. Reutilización.
Generador de animaciones. Fotogramas clave. Posición, tamaño, escala o rotación y el color.
Comportamiento dinámico.
Sistema de partículas.
3 Configuración y gestión de eventos de la interfaz gráfica de usuario de un sistema interactivo
Eventos. Tipos. Captura y gestión.
Clases, métodos y atributos.
Integración del UI en el sistema interactivo.
4 Diseño de interfaces gráfica de usuario en espacios 3D
Estrategias de visualización. Número de cámaras. Vistas. Procedimientos de adaptación al tipo de plataforma visual.
‘Canvas’. Configuración.
Diseño de contenedores y componentes 3D.
Características configurables de UI en 3D. Realidad virtual, aumentada y/o mixta (VR, AR y MR).
SI QUIERES APRENDER MÁS…
TE LLAMAMOS Y TE LO EXPLICAMOS TODO
