Responder a las interacciones del mouse (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

Responde a la entrada de mouse en tus aplicaciones de la Tienda Windows con C++, C# o Visual Basic controlando los mismos eventos que usas para las entradas táctiles y las entradas manuscritas.

Estos eventos comunes permiten implementar la funcionalidad básica de entrada sin tener que escribir un código aparte para cada dispositivo de entrada. Sin embargo, puedes seguir aprovechando las funcionalidades especiales de cada dispositivo (como los eventos de rueda de mouse), si así lo deseas.

Sugerencia La información de este tema es específica para desarrollar aplicaciones de la Tienda Windows con JavaScript.

Consulta Responder a las interacciones del mouse (XAML) para aplicaciones de la Tienda Windows con C++, C# o Visual Basic.

Consulta Desarrollo de controles de mouse (DirectX y C++) para aplicaciones de la Tienda Windows usando DirectX con C++.

Requisitos previos: Si acabas de empezar a desarrollar aplicaciones de la Tienda Windows 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

Encontrarás más información sobre eventos en Inicio rápido: agregar controles HTML y controlar eventos

Funciones de la aplicación, de principio a fin: Consulta esta funcionalidad con más detalle como parte de la 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 directrices se centran principalmente en la entrada táctil, pero también son adecuadas para las entradas de panel táctil, mouse, teclado y lápiz.

Muestras: Para ver esta función en acción, consulta las Muestras de aplicaciones de la Tienda Windows.

Muestra de personalización de la interacción del usuario, de principio a fin

Entrada: muestra de funcionalidades del dispositivo

Entrada: muestra de gestos instanciables

Entrada: gestos y manipulaciones con GestureRecognizer

Introducción

La entrada del mouse es ideal para las interacciones del usuario que requieren precisión al apuntar y hacer clic. Desde luego que la interfaz de usuario de Windows 8 admite esta precisión inherente, ya que se ha optimizado para la imprecisa naturaleza de la entrada táctil. Optimiza el diseño de tu aplicación de la Tienda Windows para la entrada táctil y obtén compatibilidad básica con mouse de manera predeterminada.

El mouse y la entrada táctil difieren en la posibilidad de esta última de simular la manipulación directa de los elementos de interfaz de usuario en la pantalla a través de gestos físicos realizados sobre esos objetos (como deslizar rápidamente, deslizar, arrastrar, girar, etc.).

Para proporcionar compatibilidad con las interacciones de mouse en escenarios que enfaticen la manipulación directa, usa una interfaz de usuario específica de mouse para ofrecer una funcionalidad equivalente a los usuarios de tu aplicación, independientemente del dispositivo que usen. Por ejemplo, al detectar un mouse, usa una barra de desplazamiento para simular el movimiento panorámico o los botones Anterior y Siguiente para pasar de una página de contenido a otra.

Recomendaciones para admitir interacciones de mouse

Estas son algunas instrucciones para admitir interacciones del mouse.

Lenguaje del mouse de Windows 8

Windows 8 proporciona un escueto conjunto de interacciones del mouse que se usan de forma coherente en todo el sistema. La aplicación de este lenguaje de forma coherente hace que la aplicación resulte familiar a los usuarios. Esto permite aumentar la confianza del usuario y ayuda a que la aplicación sea más fácil de aprender y de usar.

Periodo	Descripción
Mantener el mouse para obtener información	Mantén el mouse sobre un elemento para mostrar información más detallada o elementos visuales didácticos (como información sobre herramientas) sin confirmar una acción. Para más información acerca de la información sobre herramientas, consulta el tema acerca de cómo agregar información sobre herramientas.
Clic con el botón primario para acción principal	Haz clic con el botón primario sobre un elemento para invocar su acción principal (como iniciar una aplicación o ejecutar un comando).
Desplazar para cambiar de vista	Muestra barras de desplazamiento para moverte hacia arriba, hacia abajo, a la izquierda y a la derecha dentro de un área de contenido. Los usuarios pueden desplazarse haciendo clic en las barras de desplazamiento o girando la rueda del mouse. Las barras de desplazamiento pueden indicar la ubicación de la vista actual dentro del área de contenido (al desplazar lateralmente con entrada táctil se muestra una interfaz de usuario similar).
Clic con el botón derecho para seleccionar y ordenar	Haz clic con el botón derecho para mostrar las barras de la aplicación con comandos globales. Haz clic con el botón derecho en un elemento para seleccionarlo y mostrar la barra de la aplicación con comandos contextuales para el elemento seleccionado. Nota Haz clic con el botón secundario para mostrar un menú contextual si la selección o los comandos de la barra de la aplicación no son comportamientos de interfaz de usuario adecuados. Pero te recomendamos encarecidamente que uses la barra de la aplicación para todos los comportamientos de comandos.
Comandos de la interfaz de usuario para hacer zoom	Muestra los comandos de la interfaz de usuario en la barra de la aplicación (como + y -), o bien presiona Ctrl y gira la rueda del mouse, para emular los gestos de reducir y ampliar.
Comandos de la interfaz de usuario para girar	Muestra los comandos de la interfaz de usuario en la barra de la aplicación o bien presiona Ctrl+Mayús y gira la rueda del mouse, para emular el gesto de girar. Gira el dispositivo propiamente dicho para girar toda la pantalla.
Clic con el botón primario y arrastrar para reorganizar	Haz clic con el botón primario en un elemento y arrástralo para moverlo.
Clic con el botón primario y arrastrar para seleccionar texto	Haz clic con el botón primario dentro de texto seleccionable y arrástralo para seleccionarlo. Haz doble clic para seleccionar una palabra.
Mouse sobre esquinas y bordes para comandos del sistema	Al mover el mouse a las esquinas superior derecha o inferior derecha (o al borde izquierdo en diseños de derecha a izquierda) de la pantalla, aparecen los accesos que exponen los comandos del sistema. Mueve el mouse hacia la esquina superior izquierda en los diseños de izquierda a derecha (o hacia la esquina superior derecha en los diseños de derecha a izquierda) para mostrar una miniatura de la última aplicación usada. Haz clic o haz clic y arrastra para recorrer las aplicaciones en ejecución y cambiar a una de ellas, o arrastra para acoplar la aplicación (si lo admite la resolución de pantalla). Mueve el mouse hacia la esquina inferior izquierda en los diseños de izquierda a derecha (o hacia la esquina inferior derecha en los diseños de derecha a izquierda) para mostrar una miniatura de la pantalla Inicio. Haz clic con el botón primario y arrastra desde el borde superior hacia el borde inferior de la pantalla para cerrar la aplicación actual. Haz clic con el botón izquierdo y arrastra desde el borde superior hacia abajo y hacia los bordes izquierdo o derecho para acoplar la aplicación actual a ese lado de la pantalla.

Hardware

Consulta las funciones del dispositivo de mouse (MouseCapabilities) para identificar cuáles son los aspectos de la interfaz de usuario de tu aplicación a los que el hardware del mouse puede acceder directamente. Para más información sobre cómo consultar las funciones de dispositivos, consulta el tema de inicio rápido: identificación de dispositivos de puntero.

Algunos dispositivos de mouse tienen cinco botones. Los botones cuarto y quinto, llamados botones X, por lo general navegan hacia atrás y hacia adelante en exploradores web como Windows Internet Explorer. Asocia estos botones con la interfaz de usuario correspondiente (botones Atrás y Adelante) en tu aplicación.

Si un mouse tiene un botón de rueda, haz que al girar hacia adelante y hacia atrás se active el desplazamiento vertical (hacia arriba y hacia abajo) dentro del área de contenido. Activa el desplazamiento horizontal (hacia la izquierda y hacia la derecha) si el área de contenido no se desplaza verticalmente. Si el botón de rueda es una rueda inclinable, solo debería activar el desplazamiento horizontal.

La rueda del mouse debe activar el zoom (si está expuesto) cuando el usuario presiona la tecla modificadora Ctrl.

Información visual

Cuando se detecte un mouse (a través de eventos de movimiento o mantenimiento del mouse), muestra la interfaz de usuario específica del mouse para indicar las funciones expuestas por el elemento. Si el mouse no se mueve por un determinado período o el usuario inicia una interacción táctil, haz que la interfaz de usuario del mouse vaya desapareciendo gradualmente. Esto mantiene la interfaz de usuario ordenada y organizada.
No uses el cursor para obtener información al mantener el mouse. La información proporcionada por el elemento es suficiente (consulta la sección Cursores más abajo).
No muestres información visual si un elemento no admite interacción (por ejemplo, texto estático).
No uses rectángulos de foco con las interacciones del mouse. Resérvalos para las interacciones del teclado.
Muestra información visual simultáneamente para todos los elementos que representan el mismo destino de entrada.
Proporciona botones (como + y -) para emular las manipulaciones táctiles, como desplazar lateralmente, girar, hacer zoom, etc.

Para obtener instrucciones más generales sobre la información visual, consulta el tema sobre las directrices para información visual.

Cursores

Hay disponible un conjunto de cursores estándar para un puntero del mouse. Estos se usan para indicar la acción principal de un elemento.

Cada cursor estándar tiene asociada una imagen predeterminada correspondiente. El usuario o una aplicación pueden reemplazar la imagen predeterminada asociada con cualquier cursor estándar en cualquier momento. Las aplicaciones de la Tienda Windows especifican las imágenes de cursor mediante la función PointerCursor.

Si necesitas personalizar el cursor del mouse:

Usa siempre el cursor de flecha () para elementos en los que se puede hacer clic. No uses el cursor de mano que señala () para vínculos u otros elementos interactivos. En su lugar, usa efectos de mantenimiento del mouse (descritos anteriormente).
Usa el cursor de texto () para texto seleccionable.
Usa el cursor de movimiento () cuando la acción principal es un movimiento (por ejemplo, al arrastrar o recortar). No uses el cursor de movimiento para elementos en los que la acción principal es la navegación (como los iconos del Inicio).
Usa los cursores de ajuste horizontal, vertical y diagonal (, , , ) cuando se puede ajustar el tamaño de un objeto.
Usa los cursores de mano que sujeta (, ) al desplazar contenido lateralmente dentro de un Canvas fijo (como un mapa).

Comandos

Al hacer clic en el botón secundario del mouse, se debería activar la barra de la aplicación. En la interfaz de usuario de tu aplicación, evita zonas muertas que no aceptan clics con el botón derecho. Para más información sobre las barras de la aplicación, consulta el tema acerca de cómo agregar barras de la aplicación.

Temas relacionados

Responder a la interacción del usuario