Powered by

Móvil & Web Hotel

Eventos Touchscreen para Web Mobile. Infografía

0 comentarios

16 agosto 2012 a las 6:00, por

diseño web móvil

Multitouch, vía Pinterest

A medida que la web mobile evoluciona para permitir aplicaciones cada vez más sofisticadas (y que nuestros dedos desarrollen habilidades jamás imaginadas en el homo sapiens), los desarrolladores web necesitamos una manera de controlar estos eventos. Por ejemplo, casi cualquier aplicación de ritmo rápido requiere que el usuario pueda pulsar varios botones a la vez, que, en el contexto de una pantalla táctil, implica multi-touch.

Eventos Touch

Vemos primero los 3 eventos táctiles básicos:

  • touchstart: el dedo se coloca sobre un elemento DOM.
  • touchmove: el dedo se arrastra a lo largo de un elemento DOM
  • touchend: el dedo se retira del elemento DOM

Cada evento táctil incluye tres listas de toques:

  • touches
  • targetTouches
  • changedTouches

Estas listas consisten en objetos que contienen información:

  • identifier: un número que identifica de forma única el dedo en curso en la sesión de contacto.
  • target: el elemento DOM que era el objetivo de la acción.
  • cliente/página/coordenadas pantalla: información donde ocurrió el evento
  • radio de coordenadas y ángulo de rotación

Las Mejores Prácticas

1. Prevenir el Zoom

La configuración predeterminada no funcionan muy bien para multi-touch, ya que los golpes y los gestos son a menudo asociados con el comportamiento del navegador, como desplazamiento y zoom.

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, user-scalable=no”>

2. Prevenir el Scroll

Algunos dispositivos móviles tienen comportamientos por defecto para touchmove, como el clásico efecto iOS overscroll, lo que hace exceda los límites del contenido. Esto es confuso en muchas aplicaciones multi-touch, y fácilmente se puede desactivar:

document.body.addEventListener(‘touchmove’, function(event) {

event.preventDefault();
}, false);

3. Prestar atención con Multi-touch complejos

Si estamos desarrollando una aplicación multi-touch que involucra complejas combinaciones de varios dedos, tenga cuidado de cómo reaccionará ante eventos de toque.

4. Hacer uso de targettouches y changedtouches

Recuerde que event.touches es una matriz de todos los dedos en contacto con la pantalla, no sólo los que están en el objetivo del elemento de DOM. Puede que le resulte mucho más útil el uso de event.targetTouches o event.changedTouches  en su lugar.

Por último, te recomendamos que le eches un vistazo a la documentación que ha desarrollado W3C de especificaciones para eventos touch para web mobile y al artículo de buenas prácticas para web mobile de Eric Bidelman.

Idiso

Idiso

En Idiso somos mucho más que proveedores tecnológicos; nuestra misión es aportar valor a nuestros clientes. Queremos convertirnos en THE GLOBAL HOTEL SALES PARTNER, maximizando los ingresos del hotelero gracias a nuestras soluciones de distribución y comercialización 360º.

0 comentarios 

Deja un comentario

campos obligatorios *

También te puede interesar