Aplicaciones de Windows
Contraer la tabla de contenido
Expandir la tabla de contenido

Responder a la interacción del usuario (aplicaciones de la Tienda Windows con JavaScript y HTML)

En este artículo describimos la plataforma de interacción del usuario, los modos de entrada (táctil, mouse, lápiz o pluma, teclado, etc.) y las interacciones del usuario admitidos por las aplicaciones de la Tienda Windows y la nueva interfaz de usuario de Windows 8. Explicamos cómo se proporciona gratuitamente la funcionalidad de interacción y entrada básica, cómo personalizar la experiencia de interacción del usuario y cómo los modelos de interacción se comparten en diferentes marcos de lenguaje (aplicaciones de la Tienda Windows con JavaScript y aplicaciones de la Tienda Windows con C++, C# o Visual Basic).

A través de directrices, procedimientos recomendados y ejemplos, te mostraremos cómo aprovechar totalmente las funcionalidades de interacción de Windows 8 para crear aplicaciones de la Tienda Windows con experiencias de usuario intuitivas, atractivas y envolventes.

Guía básica: ¿Qué relación tiene este tema con los demás? Consulta el tema sobre la guía básica para aplicaciones de la Tienda Windows con JavaScript.

En esta sección

Audiencia del desarrollador

Damos por sentado que estás familiarizado con HTML, JavaScript y las hojas de estilos en cascada (CSS).

Si no te interesa mucho JavaScript

Consulta estos documentos sobre interacción del usuario para otros marcos de lenguaje:

Introducción a la plataforma de interacción del usuario de Windows 8

Diseña tus aplicaciones de Windows 8 pensando en las interacciones táctiles: cada vez son más y más variados los dispositivos compatibles con entrada táctil, y las interacciones táctiles son un aspecto fundamental de la experiencia que ofrece Windows 8.

Dado que la funcionalidad táctil es un modo principal de interacción para los usuarios de Windows 8, la nueva interfaz de usuario de Windows se ha optimizado para entrada táctil a fin de que sea precisa y fácil de usar, y tenga mayor capacidad de respuesta. El resto de los modos de entrada verdaderos, probados y garantizados (como mouse, lápiz y teclado) se admiten completamente y son funcionalmente coherentes con la entrada táctil (consulta el tema sobre gestos, manipulaciones e interacciones). La velocidad, la precisión y la información táctil que ofrecen esos modos de entrada tradicionales resultan familiares y atractivos para muchos usuarios. Estas experiencias de interacción únicas y distintivas no se han visto afectadas.

Incorporar interacciones táctiles en el diseño de tus aplicaciones puede mejorar de manera notable la experiencia del usuario. Sé creativo en el diseño de esta experiencia, ofrece compatibilidad con la variedad más amplia de funcionalidades y preferencias, atrae a la mayor audiencia posible y, de ese modo, tu aplicación atraerá más clientes en la Tienda Windows.

La plataforma de interacción del usuario para aplicaciones de la Tienda Windows se basa en varios niveles de funcionalidad que incorporan flexibilidad y eficacia progresivamente:

Controles integrados

Aprovecha las plantillas de proyecto de JavaScript y los controles integrados que se exponen a través de los marcos de lenguaje para proporcionar una experiencia de interacción del usuario completa en la plataforma.

Los controles integrados se diseñan desde cero para optimizarlos para la funcionalidad táctil a la vez que proporcionan experiencias de interacción coherentes y atractivas en todos los modos de entrada. Son compatibles con un completo conjunto de gestos de Windows 8 (pulsar y sostener, pulsar, deslizar, deslizar rápidamente, reducir, ampliar, girar), al que se suman las manipulaciones directas (desplazar lateralmente, aplicar zoom, girar, arrastrar) y el comportamiento de inercia realista para ofrecer una experiencia de interacción atractiva y envolvente que cumpla con los procedimientos recomendados de Windows 8 y sea coherente en toda la plataforma de Windows.

La funcionalidad de interacción de los controles integrados funciona bien para la mayoría de las aplicaciones de la Tienda Windows.

Para obtener más información sobre las bibliotecas de controles, consulta el tema sobre cómo agregar controles y contenido (aplicaciones de la Tienda Windows con JavaScript y HTML).

Vistas

Modifica la experiencia de interacción del usuario mediante la configuración de zoom y movimiento panorámico/desplazamiento de las vistas de tu aplicación. Una vista de aplicación determina cómo un usuario obtiene acceso a tu aplicación y su contenido, y los manipula. Las vistas también proporcionan comportamientos de aplicación de la Tienda Windows como inercia, puntos de ajuste y "devolución" de límite de contenido.

La configuración del desplazamiento y el desplazamiento lateral dicta la forma en que los usuarios pueden navegar dentro de una sola vista (por ejemplo, una página de una revista o libro, la estructura de carpetas de un equipo, una biblioteca de documentos o un álbum de fotos) cuando el contenido de la vista no cabe dentro de la ventanilla.

La configuración de zoom se aplica tanto al zoom óptico como al control SemanticZoom. El zoom semántico es una técnica optimizada para funcionalidad táctil para presentar grandes conjuntos de contenido o datos relacionados dentro de una sola vista mediante dos modos distintos de clasificación (o niveles de zoom) y navegar por ellos. Esta funcionalidad es similar al movimiento panorámico y el desplazamiento (que pueden usarse junto con el zoom semántico) en una vista única.

Usa estas propiedades de CSS, atributos de DOM y eventos de DOM para implementar tus propios comportamientos de zoom y de desplazamiento y desplazamiento lateral:

Superficie de APIPropiedades de CSSAtributos DOMEventos de DOM
Desplazamiento

-ms-overflow-style

-ms-scroll-chaining

-ms-scroll-limit

-ms-scroll-limit-x-max

-ms-scroll-limit-x-min

-ms-scroll-limit-y-max

-ms-scroll-limit-y-min

-ms-scroll-rails

-ms-scroll-snap-points-x

-ms-scroll-snap-points-y

-ms-scroll-snap-type

-ms-scroll-snap-x

-ms-scroll-snap-y

-ms-scroll-translation

-ms-touch-action

scroll

scrollHeight

scrolling

scrollLeft

scrollTop

scrollWidth

onscroll

Zoom

-ms-content-zoom-chaining

-ms-content-zooming

-ms-content-zoom-limit

-ms-content-zoom-limit-max

-ms-content-zoom-limit-min

-ms-content-zoom-snap

-ms-content-zoom-snap-points

-ms-content-zoom-snap-type

msContentZoomFactor onmscontentzoom
Ambos onmsmanipulationstatechanged

Nota  Usa -ms-touch-action para habilitar o deshabilitar el desplazamiento lateral y el zoom en una región.

 

Para más información sobre las vistas de aplicación, consulta el tema acerca de la definición de diseños y vistas.

Para más información sobre el zoom, consulta las directrices para zoom óptico y cambio de tamaño o las directrices para zoom semántico.

Para más información sobre el desplazamiento y el desplazamiento lateral, consulta las directrices para desplazamiento lateral.

Eventos de puntero y de gestos de DOM

Un puntero es un tipo de entrada genérico con un mecanismo de eventos unificado que expone información básica (como la posición de la pantalla) en la fuente de entrada activa (mouse, táctil o lápiz). Los gestos abarcan desde simples interacciones estáticas, como la pulsación, hasta manipulaciones más complejas, como hacer zoom, desplazarse lateralmente y girar. Para obtener más detalles, consulta el tema sobre gestos, manipulaciones e interacciones.

Nota  

Los eventos de gestos estáticos se desencadenan una vez completada una interacción. Los eventos de gestos de manipulación indican una interacción continua. Estos eventos comienzan a desencadenarse cuando el usuario toca el elemento y continúan hasta que el usuario levanta el dedo o se cancela la manipulación.

El acceso a los eventos de gestos y de puntero te permite usar el lenguaje de diseño de la interacción táctil de Windows 8 para juegos, controles personalizados e información visual, extendiendo los gestos de Windows 8, procesando datos de entrada sin procesar y llevando a cabo otras interacciones personalizadas.

Aprovecha el reconocimiento de gestos integrado proporcionado mediante estos eventos de gestos de DOM:

TipoEventos de gestos de DOM
Eventos generales onmsmanipulationstatechanged
Eventos de puntero

onmsgotpointercapture

onmslostpointercapture

onmspointercancel

onmspointerdown

onmspointerhover

onmspointermove

onmspointerout

onmspointerover

onmspointerup

Eventos de gestos estáticos

onmsgesturehold

onmsgesturetap

Eventos de gestos de manipulación

onmsgesturechange

onmsgestureend

onmsgesturestart

onmsinertiastart

 

Para más información acerca del control de eventos de puntero o de gestos, consulta los temas de inicio rápido: control de punteros e inicio rápido: control de gestos de DOM básicos.

Personalizar la experiencia del usuario

Para personalizar y controlar completamente la experiencia de interacción de tu aplicación, usa las API de la plataforma de Windows en tiempo de ejecución. Además de habilitar interacciones de usuario personalizadas, puedes controlar otras opciones de configuración y funciones de hardware, como dispositivos de mouse con un botón secundario, un botón de rueda, una rueda inclinable, o bien botones X y dispositivos de lápiz con botones de menú contextual y extremos borradores.

Los tipos Windows.UI.Core, Windows.UI.Input y Windows.UI.Input.Inking proporcionan la mayoría de las API con los datos del dispositivo de entrada expuestos mediante Windows.Devices.Input.

Las clases GestureRecognizer, PointerPoint y PointerPointProperties te parecerán las más útiles para tratar los gestos y manipulaciones.

Importante  Te recomendamos que no personalices el comportamiento de los gestos básicos de Windows, ya que esto podría generar una experiencia del usuario confusa e incoherente. Crea únicamente gestos personalizados si existe un requisito claro y bien definido y no hay ningún gesto básico que sea compatible con el escenario.

Para más información sobre las interacciones personalizadas, consulta los temas de inicio rápido: gestos estáticos e inicio rápido: gestos de manipulación.

Temas relacionados

Conceptual
Desarrollar aplicaciones de la Tienda Windows (JavaScript y HTML)
Diseño de la interacción táctil
Referencia
Windows.Devices.Input
Windows.UI.Core
Windows.UI.Input
Windows.UI.Input.Inking
Windows.UI.Xaml.Input
Muestras (API de Windows)
Entrada: muestra de funcionalidades del dispositivo
Entrada: muestra de manipulaciones y gestos (JavaScript)
Entrada: muestra de entrada de lápiz
Muestras (DOM)
Entrada: muestra de control de eventos de puntero de DOM
Entrada: muestra de gestos instanciables
Muestras (XAML)
Entrada: muestra de eventos de entrada del usuario XAML
Entrada: muestra de desplazamiento, desplazamiento lateral y zoom
Muestra de desplazamiento, movimiento panorámico y zoom XAML
Muestra de entrada
Muestras (DirectX)
Entrada: muestra de manipulaciones y gestos con C++
Entrada: muestra de prueba de acceso táctil
Entrada: muestra de entrada de lápiz simplificada

 

 

Mostrar:
© 2018 Microsoft