La Web es más interactiva, divertida y envolvente cuando los sitios web funcionan correctamente con los nuevos dispositivos de entrada de información y pantallas táctiles. La versión Preliminar de Desarrollo de Windows incluye soporte para el manejo de entrada táctil y de puntero en las aplicaciones y sitios web. Los desarrolladores pueden ahora tener la certeza de que sus sitios funcionan bien con interfaz táctil y pueden crear nuevas experiencias que saquen todo el provecho posible de los métodos de entrada de datos más novedosos, como la interfaz multi-táctil y los gestos. Podemos ver cómo funciona todo esto ya, en el sitio web IE Test Drive, en unas demos llamadas Touch Effects, Lasso Birds y Flying Images.

Manejo de la entrada táctil en primera instancia sin afectar al ratón

Internet Explorer y las aplicaciones estilo Metro de Windows 8 nos proporcionan una experiencia táctil de primer nivel con Windows y esto lo hace sin menoscabo de otras modalidades de entrada de datos. Ahora podemos crear sitios web y aplicaciones con la misma experiencia táctil.

Todo empieza con la gestión de la entrada básica. En IE10 y las aplicaciones estilo Metro podemos escribir sobre una forma de entrada de datos más abstracta, llamada “Pointer”, o “puntero”. Un puntero puede ser cualquier punto de contacto de un objeto con la pantalla, ya sea un cursor de ratón, un lápiz, un dedo o varios dedos a la vez. Este modelo facilita el desarrollo de aplicaciones y sitios web que van a funcionar bien independientemente del hardware utilizado. De forma similar a como hemos hecho con la aceleración por hardware, la experiencia es mejor cuanto mejor es el hardware, porque las APIs contra las cuales escriben su código los desarrolladores son independientes del hardware en este sentido.

clip_image001
Los eventos de Puntero encapsulan la entrada desde ratón, lápiz o táctil para facilitar la creación de experiencias independientes del hardware.

Los eventos para capturar la entrada genérica desde puntero se parecen mucho a los que se utilizan para el ratón: MSPointerDown, MSPointerMove, MSPointerUp, MSPointerOver, MSPointerOut, etc.

Los eventos de puntero nos proporcionan todas las propiedades que habitualmente esperamos en los eventos de ratón (coordenadas X e Y del cliente, estados del botón, etc.), además de una serie de propiedades nuevas para otras modalidades de entrada: presión, geometría del contacto, parpadeo, etc. Así los desarrolladores pueden programar fácilmente la gestión de eventos de puntero y sus aplicaciones funcionarán con independencia del hardware utilizado.

A veces los desarrolladores prefieren ofrecer experiencias distintas para la interfaz táctil. En este caso los eventos de puntero indican también el tipo de entrada (táctil, lápiz o ratón) mediante la propiedad event.pointerType.

Esta puede ser una aplicación de dibujo muy rudimentaria, modificada ligeramente, que se incluye en la Guía de Desarrollo de IE10:

<style>

html {

    overflow: hidden;

    -ms-content-zooming: none; /* Disable pan/zoom */

}

</style>

<canvas id="drawSurface" width="500" height="500" style="border: 1px solid black;"></canvas>

<script type='text/javascript'>

    var canvas = document.getElementById("drawSurface");

    var context = canvas.getContext("2d");

    context.fillStyle = "rgba(255, 0, 0, 0.5)";

    canvas.addEventListener("MSPointerMove", paint, false);

    function paint(event) {

        context.fillRect(event.offsetX, event.offsetY, 5, 5);

    }

</script>

Por defecto, IE10 permite ampliar y mover la pantalla con el dedo. Algunas veces los desarrolladores prefieren gestionar el movimiento y cambio de escala dentro del propio sitio web. En este ejemplo mostramos cómo se gestiona la entrada táctil en el sitio web evitando las funciones de desplazamiento y zoom mediante las reglas de estilo overflow:hidden y –ms-content-zooming: none para hacer precisamente eso.

Soporte nativo para interfaz multi-táctil

En cada contacto con la pantalla se disparan eventos de contacto (“down”), movimiento (“move”) y separación (“up”). Así, aplicaciones como el ejemplo de dibujo anterior son compatibles con pantallas multi-táctiles sin necesidad de código especial. En algunas ocasiones puede que nos interese conocer información sobre la existencia de otros punteros en la pantalla. En cada evento de puntero podemos fácilmente obtener una lista completa de los punteros existentes en pantalla:

<style>

html {

    overflow: hidden;

    -ms-content-zooming: none; /* Disable pan/zoom */

}

#foo {

    width: 500px;

    height: 500px;

    background-color: red;

}

</style>

<div id="foo"></div>

<script>

    function handleEvent(event) {

        var currentPointers = event.getPointerList();

        if (currentPointers.length == 1) {

            event.target.style.backgroundColor = "red";

        } else {

            event.target.style.backgroundColor = "green"; //multiple touch points are used

        }

    }

    document.getElementById("foo").addEventListener("MSPointerMove", handleEvent, false);

</script>

Entrada avanzada mediante gestos

La versión Preliminar de Desarrollo de Windows incluye también soporte para el reconocimiento de gestos de alto nivel con punteros, como el cambio de escala, desplazamiento y rotación. Los desarrolladores pueden, con poco esfuerzo, aprovechar esta facilidad utilizando los eventos MSGestureStart, MSGestureChange y MSGestureEnd. En cada uno de ellos se proporciona información sobre la transformación asociada al propio gesto (ya sea una rotación, cambio de escala, traslación, etc.) que se puede incorporar a la aplicación de muchas maneras, como por ejemplo mediante las Transformaciones de CSS:

<style>

html {

    overflow: hidden;

    -ms-content-zooming: none; /* Disable pan/zoom */

}

#foo {

    background-color: red;

    width: 500px;

    height: 500px;

    -ms-transform-origin: 50%;

    -ms-transform-origin: 50%;

}

</style>

<div id="foo"></div>

<script>

    function handleEvent(event) {

        event.target.style.msTransform = "scale(" + event.scale + ")";

    }

    document.getElementById("foo").addEventListener("MSGestureChange", handleEvent, false);

</script>

Detección de funcionalidades, fallback y soporte para otros modelos

A fin de utilizar el mismo código en diversas plataformas, IE10 nos proporciona un método sencillo de detección para los eventos de puntero:

if (window.navigator.msPointerEnabled) {

    // the system will fire pointer events

}

Nota: en la actual versión Preliminar de Desarrollo de Windows, esta propiedad indica que el sistema soporta los eventos de puntero para entrada de lápiz y táctil. Sin embargo, de cara al futuro se modificará para detectar el soporte de eventos de puntero también con ratón.

Mediante el uso de la detección de funcionalidad podemos crear sitios web que funcionarán correctamente bajo distintos modelos de entrada. Lasso Birds es un ejemplo que funciona bien en la Preliminar de Desarrollo de Windows 8, en Apple iOS, en Google Android y en sistemas que cuentan únicamente con ratón. En Windows 8 utiliza los eventos de puntero para gestionar toda la entrada en un mismo bloque de código. En otras plataformas utiliza una combinación de eventos de ratón y eventos táctiles propietarios para ofrecer una experiencia similar.

if (window.navigator.msPointerEnabled) {

    elm.addEventListener("MSPointerDown", handleInput, false); // Fires for touch, pen, and mouse

} else {

    elm.addEventListener("mousedown", handleInput, false); // Fires for mouse only

}

Los eventos de puntero y de gesto son solo una parte de nuestro modelo de desarrollo para la interfaz táctil.

Para saber más detalles sobre los eventos de puntero, eventos de gestos y otras APIs de interfaz táctil, os recomiendo la Guía de Desarrollo de IE10. Esperamos ver pronto las experiencias táctiles creadas por vosotros y como siempre, vuestras aportaciones son bienvenidas, a través de Connect.

FUENTE: Jacob Rossi - http://blogs.msdn.com/b/ie/archive/2011/09/20/touch-input-for-ie10-and-metro-style-apps.aspx

 

Saludos,

El equipo de MSDN España