Acciones sobre pantallas táctiles
A diferencia del diseño web convencional, en el diseño para móviles, o tabletas, la interface táctil es diferente a la interface basada en ratón. En una pantalla táctil el modo de comportamiento del usuario es totalmente distinto y eso es algo que tenemos que tener en cuenta y sobre todo aprovechar sus ventajas.
Estamos familiarizados con la experiencia de interacción con la ayuda del ratón, seguramente una experiencia a la que todavía le queda mucho tiempo. La interface táctil es relativamente nueva. En un principio se trasladó la experiencia de ratón a la pantalla táctil, pero en seguida y de forma casi natural, comenzaron a desarrollarse una serie de interacciones basadas en la forma de tocar la pantalla. Gestos, distinción entre el uso de uno o más dedos, acciones pre grabadas que permiten recordar gestos y asociarlos a una acción, etc…
Esta evolución también tiene su parte negativa, las múltiples posibilidades de interacción que nos facilita la pantalla táctil no puede trasladarse al clic del ratón, si a esto le sumamos que con un simple giro de pantalla podemos seguir interactuando con la página, vemos que cada vez es más necesario tener un diseño específico para cada plataforma, aunque es cierto que según para qué tipo de web nos puede valer el mismo, hay webs como este blog en el que lo único que le interesa al usuario es leer un contenido, por lo que no es necesario que aplique ningún tipo de evento «touch» a la página.
Dicho esto, pasemos a ver de qué modo podemos controlar la acción que el usuario está efectuando sobre su pantalla táctil.
Al igual que en un clic, podemos detectar si el usuario ha pulsado, si se encuentra pulsando o si ha dejado de pulsar un botón táctil. Pero como comentábamos antes, además de los eventos que podemos importar del ratón, tenemos más, como por ejemplo el detectar si está utilizando la interface con uno o más dedos, si está realizando un gesto, etc…
DETECTAR LA INTERACCIÓN DEL USUARIO EN UNA PANTALLA TÁCTIL.
Este código que vamos a ver a continuación es sólo susceptible a pantallas táctiles, por lo que en el resto de dispositivos pasará desapercibido.
Touch Events nos permite gestionar directamente los eventos táctiles, y múltiples puntos de contacto para los dispositivos táctiles.
Esta interfaz define el Touchstart , touchEnd , touchMove , touchenter , touchleave y touchcancel como los distintos tipos de eventos que podemos utilizar.
El siguiente código devuelve diferentes respuestas, en función del número de puntos de contacto en la pantalla táctil:
<div id='touchable'>
This element is touchable.
</div>
<script>
document.getElementById('touchable').addEventListener('touchstart', function(ev) {
if (ev.touches.item(0) == ev.targetTouches.item(0))
{
/**
* If the first touch on the surface is also targeting the
* "touchable" element, the code below should execute.
* Since targetTouches is a subset of touches which covers the
* entire surface, TouchEvent.touches >= TouchEvents.targetTouches
* is always true.
*/
document.write('Hello Touch Events!');
}
if (ev.touches.length == ev.targetTouches.length)
{
/**
* If all of the active touch points are on the "touchable"
* element, the length properties should be the same.
*/
document.write('All points are on target element')
}
if (ev.touches.length > 1)
{
/**
* On a single touch input device, there can only be one point
* of contact on the surface, so the following code can only
* execute when the terminal supports multiple touches.
*/
document.write('Hello Multiple Touch!');
}
}, false);
</script>
El significado de los distintos eventos es el siguiente:
Touchstart
Detecta cuando el usuario coloca un punto de contacto sobre la superficie táctil. Si el punto de contacto se encuentra dentro de un marco, el evento debe ser enviado a un elemento en el contexto de navegación hijo de ese marco.
touchEnd
Detecta cuando el usuario elimina un punto de contacto sobre la superficie táctil, por ejemplo, al arrastrarlo fuera de la pantalla.
touchMove
Detecta cuando el usuario mueve un punto de contacto sobre la superficie táctil. Valores como RadiusX , RadiusY , RotationAngle o force, nos pueden también a ayudar a distinguir el tipo de movimiento que se ha realizado y obrar en consecuencia, devolviendo una u otra acción.
touchenter
Detecta cuando el usuario mueve un punto de contacto sobre el área interactiva definida por un elemento DOM.
touchleave
Detecta cuando el usuario mueve un punto de contacto fuera del área interactiva definida por un elemento DOM.
touchcancel
Detecta cuando el usuario cancela de algún modo la acción sobre el punto de contacto de la superficie táctil.
Para todos aquellos que queráis ampliar documentación, podéis encontrarla en dvcs.w3.org
Trackbacks/Pingbacks