INTERACCIÓN Y EXPERIENCIA DE USUARIO

Estilos de interacción

Manipulación directa

2.1 Manipulación directa · Pregunta

¿Son las interfaces interactivas tipo WIMP naturales o aprendibles?

El material para responder se desarrolla en «Manipulación directa».

ESTILOS DE INTERACCIÓN

Estilos de interacción representativos

ESTILOS DE INTERACCIÓN

Manipulación directa: Interacción mediante acciones físicas sobre objetos virtuales que simulan propiedades y comportamiento del mundo real.
Navegación y selección por menús: Uso de listas o paneles jerárquicos para explorar opciones y elegir comandos o funciones.
Rellenado de formularios: Introducción de datos mediante campos específicos para estructurar la información que el sistema procesa.
Lenguajes de comandos: Interacción textual donde el usuario escribe órdenes exactas para que el sistema las ejecute.
Lenguaje natural (humano): Comunicación verbal mediante texto o voz usando lenguaje cotidiano y entendible sin codificación técnica.
Entornos inmersivos: Interfaces que sumergen al usuario en un espacio digital tridimensional, permitiendo interacciones realistas dentro del entorno virtual

ESTILOS DE INTERACCIÓN

Manipulación directa

Es el paradigma inherente en las interfaces WIMP (Windows, Icons, Menus and Pointers)
Uso intensivo del drag-and-drop
Navegación fluida

Manipulación directa

Ejemplo 1. Manipulación directa para convertir bosquejos hechos a mano en gráficos vectoriales [1']

Características de la manipulación directa

Los objetos de interés siempre están representados con una metáfora visual
La forma de invocar comandos es interactuar con el objeto a través de acciones físicas
Se obtiene una retroalimentación inmediata de la acción sobre el objeto, que es reversible

Características de la manipulación directa

Manipulación directa: Elegir entre actuar y describir

Enrico Tartarotti utiliza gestos como ampliar una foto o arrastrar un archivo para explicar la ventaja de actuar sobre objetos visibles. Esas acciones no exigen redactar una instrucción. Sin embargo, una interfaz con demasiadas opciones puede acumular paneles y menús difíciles de explorar. Su argumento favorece combinar modalidades según la tarea, no reemplazar siempre la GUI por un chat.
Vídeo: The Weird Future Of User Interfaces: manipulación directa, desde 6:53.
Propuesta de actividad: realizar la misma tarea con un gesto y con una petición escrita. Comparar descubribilidad, precisión y facilidad de corregir el resultado.

Ejemplos de manipulación directa

Sistemas de información geográfica con GPS
Videojuegos
CAD/CAM

Ejemplos de manipulación directa

¿Son las interfaces interactivas tipo WIMP naturales o aprendibles?

Ejemplos de manipulación directa

Ver la serie The Billion Dollar Code sobre los orígenes de Google Earth.

2.1 Manipulación directa

Manipulación directa

Objeto visibleSeleccionar

→

Acción físicaMover

→

Feedback inmediatoComprobar

ESTILOS DE INTERACCIÓN

Estilos de interacción representativos

ESTILOS DE INTERACCIÓN

Manipulación directa: Interacción mediante acciones físicas sobre objetos virtuales que simulan propiedades y comportamiento del mundo real.
Navegación y selección por menús: Uso de listas o paneles jerárquicos para explorar opciones y elegir comandos o funciones.
Rellenado de formularios: Introducción de datos mediante campos específicos para estructurar la información que el sistema procesa.
Lenguajes de comandos: Interacción textual donde el usuario escribe órdenes exactas para que el sistema las ejecute.
Lenguaje natural (humano): Comunicación verbal mediante texto o voz usando lenguaje cotidiano y entendible sin codificación técnica.
Entornos inmersivos: Interfaces que sumergen al usuario en un espacio digital tridimensional, permitiendo interacciones realistas dentro del entorno virtual

ESTILOS DE INTERACCIÓN

Manipulación directa

Es el paradigma inherente en las interfaces WIMP (Windows, Icons, Menus and Pointers)
Uso intensivo del drag-and-drop
Navegación fluida

Manipulación directa

Ejemplo 1. Manipulación directa para convertir bosquejos hechos a mano en gráficos vectoriales [1']

Características de la manipulación directa

Los objetos de interés siempre están representados con una metáfora visual
La forma de invocar comandos es interactuar con el objeto a través de acciones físicas
Se obtiene una retroalimentación inmediata de la acción sobre el objeto, que es reversible

Características de la manipulación directa

Manipulación directa: Elegir entre actuar y describir

Enrico Tartarotti utiliza gestos como ampliar una foto o arrastrar un archivo para explicar la ventaja de actuar sobre objetos visibles. Esas acciones no exigen redactar una instrucción. Sin embargo, una interfaz con demasiadas opciones puede acumular paneles y menús difíciles de explorar. Su argumento favorece combinar modalidades según la tarea, no reemplazar siempre la GUI por un chat.
Vídeo: The Weird Future Of User Interfaces: manipulación directa, desde 6:53.
Propuesta de actividad: realizar la misma tarea con un gesto y con una petición escrita. Comparar descubribilidad, precisión y facilidad de corregir el resultado.

Ejemplos de manipulación directa

Sistemas de información geográfica con GPS
Videojuegos
CAD/CAM

Ejemplos de manipulación directa

¿Son las interfaces interactivas tipo WIMP naturales o aprendibles?

Ejemplos de manipulación directa

Ver la serie The Billion Dollar Code sobre los orígenes de Google Earth.

ESTILOS DE INTERACCIÓN

Estilos de interacción representativos

ESTILOS DE INTERACCIÓN

Manipulación directa: Interacción mediante acciones físicas sobre objetos virtuales que simulan propiedades y comportamiento del mundo real.
Navegación y selección por menús: Uso de listas o paneles jerárquicos para explorar opciones y elegir comandos o funciones.
Rellenado de formularios: Introducción de datos mediante campos específicos para estructurar la información que el sistema procesa.
Lenguajes de comandos: Interacción textual donde el usuario escribe órdenes exactas para que el sistema las ejecute.
Lenguaje natural (humano): Comunicación verbal mediante texto o voz usando lenguaje cotidiano y entendible sin codificación técnica.
Entornos inmersivos: Interfaces que sumergen al usuario en un espacio digital tridimensional, permitiendo interacciones realistas dentro del entorno virtual

ESTILOS DE INTERACCIÓN

Manipulación directa

Es el paradigma inherente en las interfaces WIMP (Windows, Icons, Menus and Pointers)
Uso intensivo del drag-and-drop
Navegación fluida

Manipulación directa

Ejemplo 1. Manipulación directa para convertir bosquejos hechos a mano en gráficos vectoriales [1']

Características de la manipulación directa

Los objetos de interés siempre están representados con una metáfora visual
La forma de invocar comandos es interactuar con el objeto a través de acciones físicas
Se obtiene una retroalimentación inmediata de la acción sobre el objeto, que es reversible

Características de la manipulación directa

Manipulación directa: Elegir entre actuar y describir

Enrico Tartarotti utiliza gestos como ampliar una foto o arrastrar un archivo para explicar la ventaja de actuar sobre objetos visibles. Esas acciones no exigen redactar una instrucción. Sin embargo, una interfaz con demasiadas opciones puede acumular paneles y menús difíciles de explorar. Su argumento favorece combinar modalidades según la tarea, no reemplazar siempre la GUI por un chat.
Vídeo: The Weird Future Of User Interfaces: manipulación directa, desde 6:53.
Propuesta de actividad: realizar la misma tarea con un gesto y con una petición escrita. Comparar descubribilidad, precisión y facilidad de corregir el resultado.

Ejemplos de manipulación directa

Sistemas de información geográfica con GPS
Videojuegos
CAD/CAM

Ejemplos de manipulación directa

¿Son las interfaces interactivas tipo WIMP naturales o aprendibles?

Ejemplos de manipulación directa

Ver la serie The Billion Dollar Code sobre los orígenes de Google Earth.

Volver

ESTILOS DE INTERACCIÓN

Estilos de interacción representativos

ESTILOS DE INTERACCIÓN

Manipulación directa: Interacción mediante acciones físicas sobre objetos virtuales que simulan propiedades y comportamiento del mundo real.
Navegación y selección por menús: Uso de listas o paneles jerárquicos para explorar opciones y elegir comandos o funciones.
Rellenado de formularios: Introducción de datos mediante campos específicos para estructurar la información que el sistema procesa.
Lenguajes de comandos: Interacción textual donde el usuario escribe órdenes exactas para que el sistema las ejecute.
Lenguaje natural (humano): Comunicación verbal mediante texto o voz usando lenguaje cotidiano y entendible sin codificación técnica.
Entornos inmersivos: Interfaces que sumergen al usuario en un espacio digital tridimensional, permitiendo interacciones realistas dentro del entorno virtual

ESTILOS DE INTERACCIÓN

Manipulación directa

Es el paradigma inherente en las interfaces WIMP (Windows, Icons, Menus and Pointers)
Uso intensivo del drag-and-drop
Navegación fluida

Manipulación directa

Ejemplo 1. Manipulación directa para convertir bosquejos hechos a mano en gráficos vectoriales [1']

Características de la manipulación directa

Los objetos de interés siempre están representados con una metáfora visual
La forma de invocar comandos es interactuar con el objeto a través de acciones físicas
Se obtiene una retroalimentación inmediata de la acción sobre el objeto, que es reversible

Características de la manipulación directa

Manipulación directa: Elegir entre actuar y describir

Enrico Tartarotti utiliza gestos como ampliar una foto o arrastrar un archivo para explicar la ventaja de actuar sobre objetos visibles. Esas acciones no exigen redactar una instrucción. Sin embargo, una interfaz con demasiadas opciones puede acumular paneles y menús difíciles de explorar. Su argumento favorece combinar modalidades según la tarea, no reemplazar siempre la GUI por un chat.
Vídeo: The Weird Future Of User Interfaces: manipulación directa, desde 6:53.
Propuesta de actividad: realizar la misma tarea con un gesto y con una petición escrita. Comparar descubribilidad, precisión y facilidad de corregir el resultado.

Ejemplos de manipulación directa

Sistemas de información geográfica con GPS
Videojuegos
CAD/CAM

Ejemplos de manipulación directa

¿Son las interfaces interactivas tipo WIMP naturales o aprendibles?

Ejemplos de manipulación directa

Ver la serie The Billion Dollar Code sobre los orígenes de Google Earth.

Volver

ESTILOS DE INTERACCIÓN

Estilos de interacción representativos

ESTILOS DE INTERACCIÓN

Manipulación directa: Interacción mediante acciones físicas sobre objetos virtuales que simulan propiedades y comportamiento del mundo real.
Navegación y selección por menús: Uso de listas o paneles jerárquicos para explorar opciones y elegir comandos o funciones.
Rellenado de formularios: Introducción de datos mediante campos específicos para estructurar la información que el sistema procesa.
Lenguajes de comandos: Interacción textual donde el usuario escribe órdenes exactas para que el sistema las ejecute.
Lenguaje natural (humano): Comunicación verbal mediante texto o voz usando lenguaje cotidiano y entendible sin codificación técnica.
Entornos inmersivos: Interfaces que sumergen al usuario en un espacio digital tridimensional, permitiendo interacciones realistas dentro del entorno virtual

ESTILOS DE INTERACCIÓN

Manipulación directa

Es el paradigma inherente en las interfaces WIMP (Windows, Icons, Menus and Pointers)
Uso intensivo del drag-and-drop
Navegación fluida

Manipulación directa

Ejemplo 1. Manipulación directa para convertir bosquejos hechos a mano en gráficos vectoriales [1']

Características de la manipulación directa

Los objetos de interés siempre están representados con una metáfora visual
La forma de invocar comandos es interactuar con el objeto a través de acciones físicas
Se obtiene una retroalimentación inmediata de la acción sobre el objeto, que es reversible

Características de la manipulación directa

Manipulación directa: Elegir entre actuar y describir

Enrico Tartarotti utiliza gestos como ampliar una foto o arrastrar un archivo para explicar la ventaja de actuar sobre objetos visibles. Esas acciones no exigen redactar una instrucción. Sin embargo, una interfaz con demasiadas opciones puede acumular paneles y menús difíciles de explorar. Su argumento favorece combinar modalidades según la tarea, no reemplazar siempre la GUI por un chat.
Vídeo: The Weird Future Of User Interfaces: manipulación directa, desde 6:53.
Propuesta de actividad: realizar la misma tarea con un gesto y con una petición escrita. Comparar descubribilidad, precisión y facilidad de corregir el resultado.

Ejemplos de manipulación directa

Sistemas de información geográfica con GPS
Videojuegos
CAD/CAM

Ejemplos de manipulación directa

¿Son las interfaces interactivas tipo WIMP naturales o aprendibles?

Ejemplos de manipulación directa

Ver la serie The Billion Dollar Code sobre los orígenes de Google Earth.

Volver

Vídeos recomendados

Manipulación directa: Elegir entre actuar y describir

The Weird Future Of User Interfaces

Enrico Tartarotti

The Weird Future Of User Interfaces: manipulación directa, desde 6:53

2.1 Manipulación directa · Pregunta

¿Qué distancia traslacional suponen estas UI?

2.1 Manipulación directa

Acercar intención y acción

01Distancia altaTraducir la intención a una orden

02Distancia bajaActuar sobre el objeto visible

2.1 Manipulación directa · Pregunta

¿Qué futuro espera a la manipulación directa?

El material para responder se desarrolla en «Del gesto al resultado».

Futuro de la manipulación directa

¿Qué futuro espera a la manipulación directa?

Futuro de la manipulación directa

Pantallas táctiles
Interfaces 2D y 3D
Inteligencia artificial

Futuro de la manipulación directa

Ejemplo 2. Conversión de imágenes bitmap en SVG usando ML [1'47'']

Futuro de la manipulación directa

Illustrator: Del trazo manual a la asistencia aprendida

El tutorial de Illustrator parte de un dibujo en papel fotografiado y lo reconstruye con herramientas de trazado, grosor de línea y color. La persona decide qué contornos conservar y cómo darles forma. El vídeo de Two Minute Papers presenta otro enfoque: aprender a limpiar bocetos a partir de ejemplos de entrada y salida.
Conviene distinguir rasterización, vectorización y simplificación. Cambiar la representación no equivale a decidir qué trazos son relevantes. El trabajo de investigación presentado procesa bocetos raster para obtener líneas limpias; el flujo completo puede incluir después su vectorización.
Vídeo: Make Your Sketchbook Drawing Into a Digital Masterpiece with Illustrator.
Vídeo: Deep Learning Program Simplifies Your Drawings.
Fuente: Learning to Simplify: proyecto de Simo-Serra y colaboradores.

2.1 Manipulación directa

Del gesto al resultado

Futuro de la manipulación directa

¿Qué futuro espera a la manipulación directa?

Futuro de la manipulación directa

Pantallas táctiles
Interfaces 2D y 3D
Inteligencia artificial

Futuro de la manipulación directa

Ejemplo 2. Conversión de imágenes bitmap en SVG usando ML [1'47'']

Futuro de la manipulación directa

Illustrator: Del trazo manual a la asistencia aprendida

El tutorial de Illustrator parte de un dibujo en papel fotografiado y lo reconstruye con herramientas de trazado, grosor de línea y color. La persona decide qué contornos conservar y cómo darles forma. El vídeo de Two Minute Papers presenta otro enfoque: aprender a limpiar bocetos a partir de ejemplos de entrada y salida.
Conviene distinguir rasterización, vectorización y simplificación. Cambiar la representación no equivale a decidir qué trazos son relevantes. El trabajo de investigación presentado procesa bocetos raster para obtener líneas limpias; el flujo completo puede incluir después su vectorización.
Vídeo: Make Your Sketchbook Drawing Into a Digital Masterpiece with Illustrator.
Vídeo: Deep Learning Program Simplifies Your Drawings.
Fuente: Learning to Simplify: proyecto de Simo-Serra y colaboradores.

Futuro de la manipulación directa

¿Qué futuro espera a la manipulación directa?

Futuro de la manipulación directa

Pantallas táctiles
Interfaces 2D y 3D
Inteligencia artificial

Futuro de la manipulación directa

Ejemplo 2. Conversión de imágenes bitmap en SVG usando ML [1'47'']

Futuro de la manipulación directa

Illustrator: Del trazo manual a la asistencia aprendida

El tutorial de Illustrator parte de un dibujo en papel fotografiado y lo reconstruye con herramientas de trazado, grosor de línea y color. La persona decide qué contornos conservar y cómo darles forma. El vídeo de Two Minute Papers presenta otro enfoque: aprender a limpiar bocetos a partir de ejemplos de entrada y salida.
Conviene distinguir rasterización, vectorización y simplificación. Cambiar la representación no equivale a decidir qué trazos son relevantes. El trabajo de investigación presentado procesa bocetos raster para obtener líneas limpias; el flujo completo puede incluir después su vectorización.
Vídeo: Make Your Sketchbook Drawing Into a Digital Masterpiece with Illustrator.
Vídeo: Deep Learning Program Simplifies Your Drawings.
Fuente: Learning to Simplify: proyecto de Simo-Serra y colaboradores.

Volver

Vídeos recomendados

Illustrator: Del trazo manual a la asistencia aprendida

Make Your Sketchbook Drawing Into a Digital Masterpiece with Illustrator

Zimri Mayfield

Deep Learning Program Simplifies Your Drawings | Two Minute Papers #107

Two Minute Papers

Illustrator: Del trazo manual a la asistencia aprendida

El tutorial de Illustrator parte de un dibujo en papel fotografiado y lo reconstruye con herramientas de trazado, grosor de línea y color. La persona decide qué contornos conservar y cómo darles forma. El vídeo de Two Minute Papers presenta otro enfoque: aprender a limpiar bocetos a partir de ejemplos de entrada y salida.
Conviene distinguir rasterización, vectorización y simplificación. Cambiar la representación no equivale a decidir qué trazos son relevantes. El trabajo de investigación presentado procesa bocetos raster para obtener líneas limpias; el flujo completo puede incluir después su vectorización.
Vídeo: Make Your Sketchbook Drawing Into a Digital Masterpiece with Illustrator.
Vídeo: Deep Learning Program Simplifies Your Drawings.
Fuente: Learning to Simplify: proyecto de Simo-Serra y colaboradores.

Lenguajes de comandos

2.2 Lenguajes de comandos

Lenguajes de comandos

IntenciónBuscar archivos

→

SintaxisExpresar una orden

→

EjecuciónObtener el resultado

Volver

2.2 Lenguajes de comandos

Dos formas de controlar

01Manipulación directaReconocer · explorar · deshacer

02ComandosRecordar · combinar · automatizar

Lenguajes de programación visual

2.3 Lenguajes de programación visual

Programar con bloques

01Evento: pulsar botón

02Leer un valor

03Si cumple la condición

04Mostrar el resultado

2.3 Lenguajes de programación visual

Construir mediante modelos

01ElementosElegir piezas

→

02RelacionesConectar

→

03ModeloExplorar el conjunto

Lenguaje humano

2.4 Lenguaje humano

Lenguaje humano

01PersonaExpresa una intención

Parte de una intención y comprueba si consigue su objetivo.

→

02SistemaInterpreta el contexto

Ejecuta las acciones dentro del alcance permitido.

→

03RespuestaConfirmar o corregir

El sistema permite reconocer el efecto de la acción.

Lenguaje humano

A tratar en el tema Interacción multimodal y verbal

Lenguaje humano

Lenguaje natural
Interfaces de voz

Lenguaje humano

Lenguaje humano: Lenguaje cotidiano, especificaciones y estado visible

Saleh Kayyali distingue la aparente sencillez de escribir una petición del trabajo necesario para precisar objetivos, contexto y restricciones. Al aumentar la complejidad, el texto puede convertirse en una especificación. La desaparición de controles visibles también puede ocultar el estado y obligar a inspeccionar lo que ha hecho un agente.
Vídeo: When the Interface Flattens Into a Prompt, desde 5:00.
Implicación para el diseño: ofrecer formas de explorar, comprobar y corregir, además de un campo de texto.
Propuesta de actividad: describir una tarea primero en lenguaje libre y después con restricciones explícitas; anotar las decisiones que la primera versión dejaba al sistema. Las hipótesis del vídeo sobre efectos cognitivos son materia de discusión, no una prueba de que usar IA cause pérdida de capacidad crítica.

Vídeos recomendados

Lenguaje humano: Lenguaje cotidiano, especificaciones y estado visible

When the Interface Flattens Into a Prompt

Interface Studies

When the Interface Flattens Into a Prompt, desde 5:00

Lenguaje humano: Lenguaje cotidiano, especificaciones y estado visible

Saleh Kayyali distingue la aparente sencillez de escribir una petición del trabajo necesario para precisar objetivos, contexto y restricciones. Al aumentar la complejidad, el texto puede convertirse en una especificación. La desaparición de controles visibles también puede ocultar el estado y obligar a inspeccionar lo que ha hecho un agente.
Vídeo: When the Interface Flattens Into a Prompt, desde 5:00.
Implicación para el diseño: ofrecer formas de explorar, comprobar y corregir, además de un campo de texto.
Propuesta de actividad: describir una tarea primero en lenguaje libre y después con restricciones explícitas; anotar las decisiones que la primera versión dejaba al sistema. Las hipótesis del vídeo sobre efectos cognitivos son materia de discusión, no una prueba de que usar IA cause pérdida de capacidad crítica.

Entornos inmersivos

2.5 Entornos inmersivos

Entornos inmersivos

01Realidad virtualEntorno simulado

La mirada, los gestos y los mandos permiten explorar y actuar en el entorno.

02Realidad aumentadaInformación sobre el mundo

03Realidad mixtaObjetos físicos y digitales

Entornos inmersivos

A tratar en el tema Entornos inmersivos

Entornos inmersivos

Interacción gestual
Realidad virtual
Realidad aumentada
Realidad mixta
Realidad extendida

Entornos inmersivos

Entornos inmersivos: De la pantalla a la relación espacial

La semblanza de Sutherland de la Fundación BBVA conecta su trabajo en interacción gráfica con el desarrollo del primer casco de realidad virtual. El mapa de Computer Science sitúa también la realidad virtual, aumentada y la telepresencia entre las aplicaciones de la informática.
Vídeos: Fundación BBVA: Ivan Sutherland: Relaciona las contribuciones de Ivan Sutherland a la interacción gráfica y la realidad virtual
Propuesta de actividad: comparar apuntar con un ratón y seleccionar un objeto en un entorno inmersivo: referencia espacial, dispositivo de entrada y feedback necesario. Estos vídeos aportan contexto histórico; no sustituyen un tutorial de desarrollo de AR/VR.

Vídeos recomendados

Entornos inmersivos: De la pantalla a la relación espacial

La Fundación BBVA premia a Ivan Sutherland por revolucionar la interacción humano-máquina

Fundación BBVA

2.5 Entornos inmersivos

Elegir según la tarea

¿Qué estilo usarías para…?

Mover un objeto · repetir cien acciones · explorar un espacio

Lenguaje humano

A tratar en el tema Interacción multimodal y verbal

Lenguaje humano

Lenguaje natural
Interfaces de voz

Lenguaje humano

Lenguaje humano: Lenguaje cotidiano, especificaciones y estado visible

Saleh Kayyali distingue la aparente sencillez de escribir una petición del trabajo necesario para precisar objetivos, contexto y restricciones. Al aumentar la complejidad, el texto puede convertirse en una especificación. La desaparición de controles visibles también puede ocultar el estado y obligar a inspeccionar lo que ha hecho un agente.
Vídeo: When the Interface Flattens Into a Prompt, desde 5:00.
Implicación para el diseño: ofrecer formas de explorar, comprobar y corregir, además de un campo de texto.
Propuesta de actividad: describir una tarea primero en lenguaje libre y después con restricciones explícitas; anotar las decisiones que la primera versión dejaba al sistema. Las hipótesis del vídeo sobre efectos cognitivos son materia de discusión, no una prueba de que usar IA cause pérdida de capacidad crítica.

Entornos inmersivos

A tratar en el tema Entornos inmersivos

Entornos inmersivos

Interacción gestual
Realidad virtual
Realidad aumentada
Realidad mixta
Realidad extendida

Entornos inmersivos

Entornos inmersivos: De la pantalla a la relación espacial

La semblanza de Sutherland de la Fundación BBVA conecta su trabajo en interacción gráfica con el desarrollo del primer casco de realidad virtual. El mapa de Computer Science sitúa también la realidad virtual, aumentada y la telepresencia entre las aplicaciones de la informática.
Vídeos: Fundación BBVA: Ivan Sutherland: Relaciona las contribuciones de Ivan Sutherland a la interacción gráfica y la realidad virtual
Propuesta de actividad: comparar apuntar con un ratón y seleccionar un objeto en un entorno inmersivo: referencia espacial, dispositivo de entrada y feedback necesario. Estos vídeos aportan contexto histórico; no sustituyen un tutorial de desarrollo de AR/VR.