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

Usa los comportamientos de interacción integrados de los controles de plataforma de las aplicaciones de la Tienda Windows para proporcionar experiencias intuitivas y atractivas que también sean 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.

Los controles de plataforma pueden administrar y responder a la entrada desde 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 otros sistemas operativos se centran principalmente en la entrada táctil, Windows te permite crear el tipo de aplicación que quieres, independientemente del dispositivo de entrada: 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).

Con los controles de plataforma puedes admitir la gama más amplia de funcionalidades y preferencias, hacer que tus aplicaciones sean lo más útiles, portátiles y accesibles posible, y atraer a la máxima audiencia posible de la Tienda Windows.

Si estás buscando más información sobre los comportamientos de las interacciones del usuario, consulta Personalización de la 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 las aplicaciones de la Tienda Windows con C++, C# o Visual Basic, consulta Interacción del usuario, 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. Esta muestra indica cómo puedes usar o adaptar las 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 movimiento panorámico y desplazamiento, diseños de forma, comportamientos del teclado táctil, 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 el formulario de un objeto cuadrado que toma una entrada indirecta a través del formulario, y 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:

Recorrido del formulario
Comportamientos del movimiento panorámico/desplazamiento incrustados
Comportamientos del teclado táctil
Controles de plataforma y compatibilidad con interacciones de usuario integradas

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 dos páginas (de arriba abajo): una página principal y una segunda página que contiene un formulario con varios controles de plataforma y el mezclador de colores.

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.

Te recomendamos que revises cada paso 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. 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.

Te recomendamos que diseñes la interfaz de usuario de tus aplicaciones de Windows 8.1 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 código adicional mínimo.

	Elige el patrón de navegación más adecuado para tu aplicación y su contenido. Para obtener más información, consulta el tema sobre la Patrones de navegación. En la muestra de interacción del usuario que admite este tutorial, comenzamos con la plantilla de navegación plana básica. 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 y Windows 8.
	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. Las interacciones del mouse son ideales para aplicaciones que requieren precisión al 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

Aquí revisaremos algunos detalles sobre la interfaz de usuario y la funcionalidad incluida en la muestra de interacción del usuario.

Es posible que algunos de estos detalles no sean pertinentes para tu aplicación. Selecciona según sea necesario.

	Directrices para diseños de formulario. Diseña formularios que ofrezcan una excelente experiencia de interacción y reduzcan al mínimo el desplazamiento. Ten en cuenta cómo el usuario rellenará al formulario, dónde podría ser necesario el desplazamiento y cómo administrar la aparición del teclado táctil y las notificaciones de errores en línea.
	Directrices sobre la entrada de texto Elige el control adecuado: cuándo usar un control de entrada de una o de varias líneas (con todos los pros y contras que tu madre nunca te contó).
	Directrices para el teclado táctil y el panel de escritura a mano. Admite la entrada de texto para factores de forma que no tienen un teclado de hardware ni otros dispositivos de teclado periféricos. El teclado táctil se invoca cuando el usuario pulsa en un campo de entrada editable y se descarta cuando el campo de entrada pierde el enfoque.
	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.
	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, necesitas dar solución a 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.

Administrar las interacciones del usuario

Aquí exploraremos las opciones que tienes para procesar y responder a las interacciones del usuario con tu aplicación, y se incluyen algunos detalles sobre la interfaz de usuario y la funcionalidad incluida en la muestra de interacción del usuario.

	Inicio rápido: agregar controladores de eventos y controles HTML La mayoría de las aplicaciones necesitan controles, como botones, casillas y listas desplegables. Esta muestra incluye un formulario que contiene varios controles que establecen propiedades en el mezclador de colores estático.
	Presentación y edición de texto Agrega controles de entrada de texto a tu aplicación de la Tienda Windows.
	El teclado táctil Invocar y descartar el teclado táctil.
	Implementar accesibilidad de teclado. Muchos usuarios ciegos o que tienen problemas de 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 o, probablemente, no puedan usarla.

Ú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

Obtén más información sobre la experiencia que deseas proporcionar a tus usuarios.

Diseño de accesibilidad

Obtén más información sobre la gran 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.