Idioma: HTML | XAML

Responder a las interacciones del panel táctil (HTML)

Applies to Windows only

Diseña y crea aplicaciones de la Tienda Windows con las que puedan interactuar los usuarios a través de un panel táctil.

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

Consulta Responder a la entrada del panel táctil (XAML) para obtener información sobre aplicaciones de la Tienda Windows con C++, C# o Visual Basic.

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

Características de la aplicación, de principio a fin:  Consulta esta funcionalidad con más detalle como parte de la serie Características 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 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.

Personalización de la interacción del usuario, muestra de principio a fin

Entrada: muestra de funcionalidades del dispositivo

Entrada: muestra de control de eventos de puntero de DOM

Muestra de desplazamiento, movimiento panorámico y zoom HTML

Entrada: muestra de manipulaciones y gestos (JavaScript)

Entrada: muestra de gestos instanciables

Introducción

Un panel táctil combina la entrada multitáctil indirecta con la entrada precisa de un dispositivo señalador, como un mouse. 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. Optimiza el diseño de tu aplicación de la Tienda Windows para la entrada táctil y obtén compatibilidad con paneles táctiles de manera predeterminada.

Los paneles táctiles integran diversas experiencias de interacción, por lo que te recomendamos que proporciones comandos de interfaz de usuario de estilo mouse además de la compatibilidad integrada con la entrada táctil. Por ejemplo, usa botones Anterior y Siguiente para que los usuarios puedan pasar de una página de contenido a otra además de realizar movimientos panorámicos por el contenido.

Windows 8.1 admite un conjunto de gestos conocidos que se han optimizado para la entrada del panel táctil. Los gestos y las directrices que se explican en este tema te ayudarán a asegurarte de que tu aplicación admite la entrada del panel táctil sin problemas y con muy poco código.

Directrices de experiencia del usuario para admitir interacciones del panel táctil

Estas son algunas directrices para admitir interacciones del panel táctil.

Lenguaje del panel táctil de Windows 8.1

Windows 8.1 proporciona un escueto conjunto de interacciones del panel táctil que se usan de forma coherente en todo el sistema. Optimiza tu aplicación para la entrada táctil y del mouse, y este lenguaje hará que los usuarios se sientan cómodos al instante, lo que aumentará su confianza y les permitirá aprender a usar tu aplicación con mayor facilidad.

PeriodoDescripció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.

Pulsar con un dedo para la acción principal

Usa un solo dedo para pulsar en un elemento e invocar su acción principal (como iniciar una aplicación o ejecutar un comando).

Pulsar con dos dedos para hacer clic con el botón derecho

Pulsa con dos dedos al mismo tiempo para mostrar la barra de la aplicación con comandos globales o en un elemento para seleccionarlo y mostrar la barra de la aplicación con comandos contextuales.

Nota  Pulsa con dos dedos 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.

Deslizar con dos dedos para realizar un movimiento panorámico

El deslizamiento se usa principalmente para interacciones de movimiento panorámico, pero también se puede usar para mover, dibujar o escribir.

Reducir y ampliar para hacer zoom

Los gestos de reducir y ampliar se usan comúnmente para el cambio de tamaño y el zoom semántico.

Presionar con un dedo y deslizar para reordenar

Arrastra un elemento.

Presionar con un dedo y deslizar para seleccionar texto

Presiona dentro de texto seleccionable y deslízalo para seleccionarlo. Pulsa dos veces para seleccionar una palabra.

Bordes para comandos del sistema

Al deslizar rápidamente desde el borde derecho (o desde el borde izquierdo en los diseños de derecha a izquierda) de la pantalla, aparecen los accesos que exponen los comandos del sistema.

Al deslizar rápidamente desde el borde izquierdo (o desde el borde derecho en los diseños de derecha a izquierda), aparece una lista de las aplicaciones en ejecución.

Zona de clic con los botones primario y secundario

Simula las funciones de los botones primario y secundario de un dispositivo de mouse.

 

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 panel táctil puede acceder directamente. Te recomendamos que proporciones interfaces de usuario tanto para entrada táctil como para entrada del mouse.

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.

Información visual

  • Cuando se detecte un cursor del panel táctil (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 cursor del panel táctil no se mueve por un determinado período o el usuario inicia una interacción táctil, haz que la interfaz de usuario del panel táctil 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 panel táctil. Resérvalos para las interacciones del teclado.
  • Muestra información visual simultáneamente para todos los elementos que representan el mismo destino de entrada.

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 panel táctil. 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 panel táctil:

  • Usa siempre el cursor de flecha (Cursor de flecha) para elementos en los que se puede hacer clic. No uses el cursor de mano que señala (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 (Cursor de texto) para texto seleccionable.
  • Usa el cursor de movimiento (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 (Cursor de ajuste vertical, Cursor de ajuste horizontal, Cursor de ajuste diagonal (inferior izquierda, superior derecha), Cursor de ajuste diagonal (superior izquierda, inferior derecha)) cuando se puede ajustar el tamaño de un objeto.
  • Usa los cursores de mano que sujeta (Cursor de mano que sujeta (abierta), Cursor de mano que sujeta (cerrada)) al desplazar contenido lateralmente dentro de un Canvas fijo (como un mapa).

Temas relacionados

Conceptual
Responder a la interacción del usuario

 

 

Mostrar:
© 2014 Microsoft