Personalización de la interacción del usuario, de principio a fin (HTML)

Artículo
12/12/2015

[ 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

Dispositivos de entrada admitidos por las aplicaciones de la Tienda Windows

Puedes crear interacciones de usuario personalizadas que sean intuitivas y atractivas y, al mismo tiempo, eficaces y coherentes en todos los dispositivos de entrada. Sigue las directrices, los procedimientos recomendados y los ejemplos aquí descritos para definir estas experiencias del usuario para tu aplicación de la Tienda Windows.

Nota Te recomendamos que uses las bibliotecas de controles de plataforma (HTML y XAML) siempre que sea posible. Los controles de estas bibliotecas proporcionan una experiencia de interacción de usuario de Windows 8.1 completa, incluidas interacciones estándar, efectos físicos animados, comentarios visuales y accesibilidad. Si no necesitas compatibilidad para interacción personalizada, usa estos controles integrados.

Las aplicaciones de la Tienda Windows pueden procesar la entrada de diferentes orígenes, entre ellos, entrada táctil, panel táctil, ratón, pluma/lápiz y teclado. También pueden procesar la entrada de diferentes modos de dispositivos de entrada, como teclado táctil, rueda del ratón y borrador de lápiz. Mientras que otras plataformas se centran principalmente en la entrada táctil, puedes crear el tipo de aplicación de la Tienda Windows que quieres, sin restricciones: aplicaciones de consumo, aplicaciones de productividad, aplicaciones híbridas innovadoras en PC, portátiles, tabletas y prácticamente cualquier factor de forma que exista (o que aún no exista).

Si buscas más información acerca de controles de plataforma y sus comportamientos de interacción, consulta la sección Interacción del usuario, de principio a fin (HTML).

Requisitos previos

Las directrices, las tareas y el código de ejemplo que se incluyen en este tema son exclusivamente para desarrollar aplicaciones de la Tienda Windows con JavaScript. Para la versión de la aplicación de la Tienda Windows con C++, C# o Visual Basic, consulta la sección Navegación jerárquica, de principio a fin (XAML).

Si acabas de empezar a desarrollar aplicaciones de la Tienda Windows con JavaScript, consulta estos temas para familiarizarte con las tecnologías presentadas aquí.

Desarrollo de aplicaciones de la Tienda Windows con JavaScript

Familiarízate con todos los aspectos relacionados con el desarrollo de aplicaciones de la Tienda Windows con JavaScript, desde la pantalla Inicio al diseño y los controles de la interfaz de usuario.
Crear la primera aplicación de la Tienda Windows con JavaScript

Usa JavaScript con HTML5 y hojas de estilo CSS para crear una aplicación básica de la Tienda Windows.

Muestra de interacción del usuario

Además de las muestras y fragmentos de código incluidos en los temas a los que hacemos referencia más adelante, trabajaremos con la muestra de interacción del usuario personalizada. Esta muestra indica cómo puedes usar o adaptar diferentes funciones y conceptos de interacción en tu aplicación de la Tienda Windows. La muestra incluye principios, recomendaciones y detalles de implementación para controles personalizados, accesibilidad de la interfaz de usuario e interacciones personalizadas. Veamos cómo ponemos nuestros consejos en práctica.

Breve descripción de la muestra

En la muestra, creamos un mezclador de colores. Está en forma de un objeto cuadrado que toma una entrada indirecta de una pantalla táctil, panel táctil, ratón, pluma/lápiz o teclado. Usa estos datos para especificar un color RGB y un ángulo de rotación, que traduce a un nivel de rojo, verde o azul correspondiente.

La muestra hace una demostración de las siguientes características:

Control personalizado
Compatibilidad con personalizaciones básicas (HTML y XAML) de los comportamientos de la interacción del usuario
Detección, reconocimiento y procesamiento de gestos personalizados

Este es un diagrama reticular que te da una idea de cómo funciona esta muestra y de la funcionalidad de interacción del usuario que la muestra implementa.

La muestra contiene tres páginas (de izquierda a derecha): una página de inicio, una segunda página que contiene un control personalizado compatible con rotación basada en DOM, y una tercera página con un control personalizado que implementa funcionalidad adicional mediante las API GestureRecognizer de Windows.UI.Input.

De momento, este es un boceto muy general de las tareas que te ayudarán a compilar una aplicación que sigue los procedimientos recomendados sobre interacción del usuario en aplicaciones de la Tienda Windows. Cada tarea te lleva a la información correspondiente en el Centro de desarrollo de aplicaciones de la Tienda Windows.

Si no estás familiarizado con el desarrollo de aplicaciones de la Tienda Windows o con la interacción del usuario, la facilidad de uso y la accesibilidad, es mejor revisar cada paso. Encontrarás agrupados los aspectos relacionados del desarrollo de la interacción del usuario.

Planear la aplicación

Antes de empezar a diseñar y desarrollar la aplicación, planéala. Tómate el tiempo necesario para identificar a tu público y las características y actividades que admite tu aplicación.

Diseña la interfaz de usuario de tu aplicación de la Tienda Windows principalmente para interacciones táctiles. La entrada táctil es de naturaleza imprecisa (requiere un área de entrada) en comparación con otros tipos de entrada que normalmente tienen la precisión de un píxel. Los controles optimizados para entrada táctil, junto con un conjunto de API de interacción de la plataforma para el procesamiento de eventos basados en puntero, proporcionan una funcionalidad equivalente en todos los dispositivos con un poco de código adicional.

	Elige el patrón de navegación más adecuado para tu aplicación y su contenido. Para obtener más información, consulta Modelos de navegación. En la muestra de interacción del usuario que admite este tutorial, comenzamos con la plantilla Navegación plana. Descarga la plantilla y haz pruebas a medida que realizas estos pasos o ve directamente a usar la plantilla para comenzar a diseñar y desarrollar tu propia aplicación.
	Interfaz de usuario de aplicaciones de la Tienda Windows, de principio a fin (HTML). Diseña y distribuye los elementos y el contenido de la interfaz de usuario, como la ventana de la aplicación, los controles flotantes, los cuadros de diálogo y las barras de la aplicación. Usamos directrices, procedimientos recomendados y ejemplos para ayudarte a aprovechar todas las ventanas de las funcionalidades de la interfaz de usuario de Windows 8.1 y crear una interfaz de usuario intuitiva y coherente con otras aplicaciones de la Tienda Windows.
	Responder a la interacción del usuario. 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 ratón, la pluma o el lápiz y el teclado), los modos (teclado táctil, rueda del ratón, borrador del lápiz, etc.) y las interacciones que admiten las aplicaciones de la Tienda Windows.
	Cómo interactúan los usuarios con los dispositivos de entrada. Compara las interacciones comunes y cómo se relacionan con los gestos de entrada táctil, panel táctil, ratón y teclado.

Dispositivos de entrada

Aunque está optimizada para entrada táctil, la plataforma es completamente compatible con los demás dispositivos de entrada aquí enumerados.

	Responder a las interacciones del ratón. Usa las interacciones del ratón para aplicaciones que requieren precisión a la hora de apuntar y hacer clic.
	Responder a las interacciones del teclado. El teclado es indispensable para personas con ciertas discapacidades o para los usuarios que, simplemente, lo consideran una manera más eficaz de interactuar con una aplicación.
	Responder a las interacciones de pluma y lápiz. Se puede usar una pluma o un lápiz como dispositivo señalador y como dispositivo de dibujo. Normalmente está asociado a la funcionalidad de tinta digital.
	Responder a las interacciones del panel táctil. Un panel táctil combina la entrada multitáctil con la entrada precisa de un dispositivo señalador, como un ratón. Esta combinación hace que el panel táctil sea ideal tanto para la interfaz de usuario optimizada para entrada táctil de Windows 8.1 como para los destinos más pequeños de las aplicaciones de productividad y el entorno de escritorio.

Diseñar tus interacciones

Sé creativo cuando sigas las directrices sobre la experiencia del usuario para las interacciones del usuario. Elige qué dispositivos de entrada admite tu aplicación y cómo responde. Mejora la experiencia del usuario entre dispositivos, admite un rango más grande de funcionalidades y preferencias, y atrae a un público lo más grande posible en la Tienda Windows. Esto hará que tu aplicación sea lo más fácil de usar, accesible y portátil posible.

Estas directrices de 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:

Directrices para las interacciones del usuario comunes

Crea experiencias de interacción del usuario con una funcionalidad coherente en todos los dispositivos.
Directrices para deslizar el dedo rápidamente desde el borde

Permite la selección con el gesto de deslizar rápidamente y las interacciones de arrastrar (mover) con el gesto de deslizar.
Directrices para zoom óptico y cambio de tamaño

El zoom óptico permite a los usuarios ampliar la vista del contenido dentro de un área de contenido (se usa en el propio área de contenido), mientras que el cambio de tamaño permite cambiar el tamaño relativo de uno o más objetos en un área de contenido sin cambiar la vista del área (se usa sobre los objetos que están dentro del área de contenido).
Directrices para panorámica

Ten en cuenta cómo el movimiento panorámico y el desplazamiento ayudan a los usuarios a navegar dentro de una sola vista, por ejemplo, la estructura de carpetas de un equipo, una biblioteca de documentos o un álbum de fotos. Además, observa cómo los usuarios pueden explorar contenido que no entra dentro de la ventanilla, ya sea horizontal o verticalmente.
Directrices para rotación

Gira los objetos en una dirección circular (en el sentido de las agujas del reloj o en el sentido contrario) utilizando entrada táctil u otros controles de la interfaz de usuario para ratón, pluma/lápiz o teclado.
Directrices para zoom semántico

Presenta grandes conjuntos de datos o contenido relacionado y navega por ellos dentro de una sola vista (como un álbum de fotos, una lista de aplicaciones o una libreta de direcciones).
Directrices para seleccionar texto e imágenes

Proporciona una interfaz de usuario y funcionalidad para la selección de contenido.
Directrices para destinos

Aumenta la satisfacción del usuario con tu aplicación mejorando la precisión y la confianza de la entrada táctil.
Directrices para información visual

Ayuda a los usuarios a comprender, aprender y adaptarse a tu aplicación, al sistema y al dispositivo de entrada. Para ello, indica el éxito de una interacción, mejora la sensación de control de los usuarios, promueve la interacción, utiliza el estado del sistema y reduce los errores. La información visual (también denominada visualizaciones de contacto o interfaz de usuario de información) muestra si una interacción se detecta, interpreta y administra como se espera.

Administrar las interacciones del usuario

Aquí, exploramos tus opciones para procesar las interacciones de los usuarios con la aplicación, y responderlas. También revisaremos algunos detalles sobre la interfaz de usuario y la funcionalidad incluida en la muestra de interacción del usuario.

	Inicio rápido: punteros Personaliza las interacciones de los usuarios con eventos de puntero.
	Inicio rápido: gestos y manipulaciones de DOM Personaliza las interacciones de los usuarios con eventos de Document Object Model (DOM).
	Inicio rápido: gestos estáticos Inicio rápido: gestos de manipulación Personaliza las interacciones de los usuarios con GestureRecognizer.
	Animación de la interfaz de usuario Integra el aspecto de Windows 8 en tu aplicación de la Tienda Windows con el conjunto de animaciones de la plataforma Biblioteca de animaciones (para eventos de puntero o gestos de deslizar) o personaliza las animaciones con hojas de estilo CSS, Nivel 3 (CSS3) Transiciones, Animaciones y Transformaciones.
	Implementar accesibilidad de teclado. Muchos usuarios que tienen problemas de visión o movilidad dependen del teclado como el único medio para navegar por la interfaz de usuario de tu aplicación y acceder a su funcionalidad. Si tu aplicación no proporciona un buen acceso de teclado, estos usuarios tendrán dificultades para usarla o, probablemente, no puedan usarla.
	Hacer que los eventos táctiles sean accesibles. Para hacer que la entrada táctil sea accesible, enlaza los eventos de puntero con eventos de clic del ratón.
	Probar la accesibilidad de tu aplicación. Usa las herramientas de pruebas de accesibilidad incluidas en el Kit de desarrollo de software de Windows (SDK) para Windows 8, Inspeccionar y el Comprobador de accesibilidad (AccChecker) de la interfaz de usuario, para ayudarte a comprobar la accesibilidad de tu aplicación. Si quieres declarar tu aplicación como accesible en la Tienda Windows, soluciona todos los errores de prioridad 1 notificados por AccChecker con verificaciones web de Accessible Rich Internet Applications (ARIA) habilitadas. Recuerda: El Narrador admite un conjunto de gestos táctiles personalizados (que se describen en este tema) para desplazarse por el contenido de tu aplicación y leerlo.

Últimas acciones

Certifica la aplicación con el Kit para la certificación de aplicaciones en Windows.

Ejecuta el Kit para la certificación de aplicaciones en Windows para asegurarte de que la aplicación cumple los requisitos de la Tienda Windows. Hazlo cada vez que agregues funciones importantes a la aplicación.