Responder a la interacción del usuario (HTML)
[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows en tiempo de ejecución. Si estás desarrollando para Windows 10, consulta la documentación más reciente
Obtén información sobre la plataforma de interacción del usuario, los orígenes de entrada (incluidos el panel táctil, la entrada táctil, el mouse, la pluma o el lápiz y el teclado), los modos (teclado táctil, rueda del mouse, borrador del lápiz, etc.) y las interacciones del usuario que admiten las aplicaciones de la Tienda Windows y las aplicaciones de la Tienda de Windows Phone.
Actualizaciones para Windows 8.1: Windows 8.1 incorpora varias actualizaciones y mejoras para las API para entrada de puntero. Para obtener más información, consulta el tema sobre cambios en las API para Windows 8.1.
Explicamos cómo se proporcionan de forma gratuita las funciones básicas de interacción y entrada con los controles integrados de los marcos de lenguaje (aplicaciones que usan JavaScript, aplicaciones que usan C++, C# o Visual Basic y aplicaciones que usan DirectX con C++), cómo los patrones de interacción se comparten entre marcos de lenguaje y cómo personalizar la experiencia de interacción del usuario.
A través de directrices, procedimientos recomendados y ejemplos, te mostraremos cómo aprovechar al máximo las funciones de interacción de Windows para crear aplicaciones con experiencias del usuario intuitivas, atractivas y envolventes.
Sugerencia La información sobre este tema es específica para desarrollar aplicaciones con JavaScript.
Consulta el tema sobre Responder a la interacción del usuario (XAML) para aplicaciones que usan C++, C# o Visual Basic.
Consulta Responder a la interacción del usuario (DirectX y C++) para las aplicaciones que usan DirectX con C++.
Requisitos previos: Si acabas de empezar a desarrollar aplicaciones con JavaScript, consulta estos temas para familiarizarte con las tecnologías presentadas aquí.
Crear la primera aplicación de la Tienda Windows con JavaScript
Guía básica para crear aplicaciones de la Tienda Windows con JavaScript
Infórmate de los eventos con Inicio rápido: agregar controles HTML y controlar eventos y Captura y propagación de eventos con eventos de DOM
Funciones de la aplicación, de principio a fin: Consulta esta funcionalidad con más detalle como parte de nuestra serie Funciones de la aplicación, de principio a fin
Interacción del usuario, de principio a fin (HTML)
Personalización de la interacción del usuario, de principio a fin (HTML)
Directrices sobre la experiencia del usuario:
Las bibliotecas de control de la plataforma (HTML y XAML) proporcionan una experiencia de interacción del usuario de Windows completa, incluidas interacciones estándar, efectos físicos animados y comentarios visuales. Si no necesitas compatibilidad para interacción personalizada, usa estos controles integrados.
Si los controles de la plataforma no son suficientes, estas directrices para la interacción del usuario te pueden ayudar a proporcionar una experiencia de interacción atractiva y envolvente que sea coherente en todos los modos de entrada. Estas instrucciones se centran principalmente en la entrada táctil, pero también son válidas para entradas de panel táctil, mouse, teclado y lápiz.
- Directrices para las interacciones del usuario comunes
- Directrices para deslizamiento transversal
- Directrices para zoom óptico y cambio de tamaño
- Directrices para movimiento panorámico
- Directrices para rotación
- Directrices para zoom semántico
- Directrices para seleccionar texto e imágenes
- Directrices para destinos
- Directrices para información visual
Muestras: Verás esta funcionalidad en acción en nuestras muestras de aplicaciones.
Personalización de la interacción del usuario, muestra de principio a fin
Entrada: muestra de funcionalidades del dispositivo
Muestra de desplazamiento, movimiento panorámico y zoom HTML
Entrada: muestra de control de eventos de puntero de DOM
Entrada: muestra de gestos instanciables
Entrada: gestos y manipulaciones con GestureRecognizer
Entrada: muestra de entrada de lápiz simplificada
Entrada: muestra de entrada de lápiz
Introducción a la plataforma de interacción del usuario de Windows 8
Diseña tus aplicaciones pensando en interacciones táctiles. Cada vez son más y más variados los dispositivos compatibles con la entrada táctil, y las interacciones táctiles son, justamente, un aspecto fundamental de la experiencia que ofrece Windows.
Dado que la entrada táctil es un modo principal de interacción para los usuarios de Windows y Windows Phone, las plataformas se han optimizado para entrada táctil para que tus aplicaciones sean precisas, fáciles de usar y tengan mayor capacidad de respuesta. Y no te preocupes, los modos de entrada probados y garantizados (como mouse, lápiz y teclado) se admiten completamente y funcionan de forma coherente con la entrada táctil (consulta el tema sobre gestos, manipulaciones e interacciones). La velocidad, la precisión y la información táctil que ofrecen esos modos de entrada tradicionales resultan familiares y atractivos para muchos usuarios. Estas experiencias de interacción únicas y distintivas no se han visto afectadas.
Sé creativo a la hora de diseñar la experiencia de interacción del usuario. Ofrece compatibilidad con la variedad más amplia de funciones y preferencias para cautivar a la mayor audiencia posible y, de ese modo, atraer a más clientes a tu aplicación.
Desde los controles integrados a la personalización completa, la plataforma de interacción del usuario se basa en niveles de funciones que incorporan flexibilidad y eficacia progresivamente:
Controles integrados
Aprovecha los controles integrados para proporcionar una experiencia de interacción de usuario común que funciona bien con la mayoría de aplicaciones de Windows y Windows Phone.
Los controles integrados se diseñan desde cero para optimizarlos para entrada táctil, a la vez que proporcionan experiencias de interacción coherentes y atractivas en todos los modos de entrada. Admiten un conjunto completo de gestos: pulsar y sostener, pulsar, deslizar, deslizar rápidamente, reducir, ampliar, girar. Al combinar estos gestos con las manipulaciones directas, como realizar un movimiento panorámico, hacer zoom, girar, arrastrar, y con el comportamiento de inercia realista, ofrecen una experiencia de interacción atractiva y envolvente que cumple con los procedimientos recomendados y es coherente en toda la plataforma de Windows.
Para obtener más información sobre las bibliotecas de controles, consulta Agregar controles y contenido.
Vistas
Modifica la experiencia de interacción del usuario mediante la configuración de zoom y movimiento panorámico/desplazamiento de las vistas de tu aplicación. Una vista de aplicación determina cómo un usuario accede a tu aplicación y su contenido, y los manipula. Las vistas también proporcionan comportamientos como inercia, puntos de ajuste y "devolución" de límite de contenido.
La configuración del movimiento panorámico y del desplazamiento determina la forma en que los usuarios pueden navegar dentro de una vista única cuando el contenido de la vista no cabe dentro de la ventanilla. Una vista única puede ser, por ejemplo, una página de una revista o libro, la estructura de carpetas de un equipo, una biblioteca de documentos o un álbum de fotos.
La configuración de zoom se aplica tanto al zoom óptico como al control SemanticZoom. El zoom semántico es una técnica optimizada para entrada táctil para presentar grandes conjuntos de contenido o datos relacionados dentro de una vista única y navegar por ellos. Funciona mediante dos modos distintos de clasificación (o niveles de zoom). Esto es similar al movimiento panorámico y al desplazamiento en una vista única. El movimiento panorámico y el desplazamiento pueden usarse junto con el zoom semántico.
Usa vistas de la aplicación y las siguientes propiedades de las hojas de estilo CSS, atributos de Document Object Model (DOM) y eventos de DOM para modificar los comportamientos de movimiento panorámico o desplazamiento y de zoom. Esto puede proporcionar una experiencia de interacción más uniforme que la que permite el control de los eventos de puntero y de gestos.
| Superficie de API | Propiedades de CSS | Atributos DOM | Eventos de DOM |
|---|---|---|---|
| touch-action especifica si es posible manipular una región determinada mediante el movimiento panorámico o el zoom. | |||
| Movimiento panorámico o desplazamiento | |||
| Zoom | msContentZoomFactor | onmscontentzoom | |
| Ambos | onmsmanipulationstatechanged | ||
Para más información sobre las vistas de aplicación, consulta el tema acerca de la definición de diseños y vistas.
Para obtener más información sobre el zoom, consulta Directrices para zoom óptico y cambio de tamaño o Directrices para zoom semántico.
Para más información sobre el desplazamiento y el desplazamiento lateral, consulta las directrices para desplazamiento lateral.
Eventos de puntero y de gestos de DOM
Un puntero es un tipo de entrada genérico con un mecanismo de eventos unificado. Expone información básica, como la posición de la pantalla, en el origen de entrada activo, que puede ser entrada táctil, panel táctil, mouse o lápiz. Los gestos abarcan desde simples interacciones estáticas, como pulsar, hasta manipulaciones más complejas, como hacer zoom, realizar un movimiento panorámico y girar. Para obtener más detalles, consulta el tema sobre gestos, manipulaciones e interacciones.
Nota
Los eventos de gestos estáticos se desencadenan una vez completada una interacción. Los eventos de gestos de manipulación indican una interacción continua. Estos eventos comienzan a desencadenarse cuando el usuario toca el elemento y continúan hasta que el usuario levanta el dedo o se cancela la manipulación.
El acceso a los eventos de puntero y gestos permiten usar el lenguaje de diseño de la interacción táctil de Windows 8 para:
- Juegos
- Controles personalizados e información visual
- Interacciones personalizadas
Aprovecha el reconocimiento de gestos integrado proporcionado mediante estos eventos de gestos de DOM:
| Tipo | Eventos de gestos de DOM |
|---|---|
| Eventos generales | MSManipulationStateChanged |
| Eventos de puntero | |
| Eventos de gestos estáticos | |
| Eventos de gestos de manipulación |
Para más información acerca del control de eventos de puntero o de gestos, consulta los temas de inicio rápido: control de punteros e inicio rápido: control de gestos de DOM básicos.
Personalizar la experiencia del usuario
Para personalizar y controlar completamente la experiencia de interacción de tu aplicación, usa las API de Windows en tiempo de ejecución . Con estas API, puedes habilitar interacciones del usuario personalizadas y controlar otras opciones de configuración y funcionalidades de hardware, como dispositivos de mouse con un botón derecho, un botón de rueda, una rueda inclinable, o bien botones X y dispositivos de lápiz con botones de menú contextual y extremos borradores.
Los tipos Windows.UI.Core, Windows.UI.Input y Windows.UI.Input.Inking proporcionan la mayoría de las API con los datos del dispositivo de entrada expuestos mediante Windows.Devices.Input.
Las clases GestureRecognizer, PointerPoint y PointerPointProperties te resultarán útiles para controlar los gestos y las manipulaciones.
Antes de proporcionar experiencias de interacción personalizadas con gestos y manipulaciones nuevos o modificados, ten en cuenta los siguientes puntos:
- ¿Ya existe un gesto que proporciona la experiencia que necesita tu aplicación? No proporciones un gesto personalizado para hacer zoom o realizar movimientos panorámicos cuando podrías simplemente adaptar tu aplicación para que admita o interprete un gesto que ya existe.
- ¿El gesto personalizado generará una falta de uniformidad en las aplicaciones?
- ¿El gesto requiere una compatibilidad de hardware específica, como la cantidad de contactos?
- ¿Existe un control (como SemanticZoom) que proporcione la experiencia de interacción que necesitas? Si un control puede controlar la entrada del usuario de manera intrínseca, ¿es necesario un gesto o una manipulación personalizados?
- ¿El gesto o la manipulación personalizados dan como resultado una experiencia de interacción uniforme y natural?
- ¿Tiene sentido la experiencia de interacción? Si la interacción depende de factores como la cantidad de contactos, la velocidad, el tiempo (no se recomienda) y la inercia, asegúrate de que estas restricciones y dependencias sean coherentes y detectables. Por ejemplo, el modo en que los usuarios interpretan la velocidad y la lentitud puede afectar directamente a la facilidad de uso de tu aplicación y a la satisfacción de los usuarios respecto de la experiencia.
- ¿Las capacidades físicas del usuario afectan al gesto o a la manipulación? ¿Es de fácil acceso?
- ¿Será suficiente un comando de la barra de la aplicación o algún otro comando de interfaz de usuario?
En resumen, crea únicamente gestos y manipulaciones personalizados si existe un requisito claro y bien definido y no hay ningún gesto básico que sea compatible con el escenario.
Para más información sobre las interacciones personalizadas, consulta los temas de inicio rápido: gestos estáticos e inicio rápido: gestos de manipulación.
Temas relacionados
Conceptual
Desarrollar aplicaciones de la Tienda Windows (JavaScript y HTML)