Personalización de la interacción del usuario, de principio a fin (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
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:
|
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.
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. |
|
¡Has terminado! Tu implementación debe ser similar a la de la muestra de interacción del usuario. Relájate y disfruta del éxito. |
¿Quieres más información?
Planear aplicaciones de la Tienda Windows
¿Qué experiencia quieres proporcionar a los usuarios?
Aborda la amplia variedad de capacidades, discapacidades y preferencias de tus usuarios.
Diseño para diferentes factores de forma
Obtén más información sobre cómo admitir distintos dispositivos, métodos de entrada y orientaciones de pantalla.
Índice de las directrices de la experiencia del usuario
Examina la lista completa de directrices de la experiencia de usuario.
Muestras
DOM
API de aplicaciones de la Tienda Windows