Algo de desarrollo web para iPad

23 Jun

Algo de desarrollo web
para iPad

Definitivamente la explosión de dispositivos móviles en el mercado ha acelerado lo que es el desarrollo html5/css3/javascript, sumado a eso, los dispositivos touchscreen han creado una serie de novedosas interacciones que hacen el trabajo de desarrollo web bastante más desafiante. Estuve haciendo una web exclusiva para ipad y me encontré con un par de cuestiones que hicieron del proyecto algo bastante interesante.

Los evento “touchstart” y “touchend”

Con la intención de realizar el mismo efecto de rollOver sobre un link (elemento “a”) que otrora conseguiamos con el pseudo-elemento de css :hover, recurrimos a js para trabajar con los eventos “touchstart” y “touchend”. Como indican desde sus nombres son la acción que se ejecuta al iniciarce y al finalizar el “toque”. Ya vemos que en este tipo de dispositivos no hay un verdadero efecto de hover dado que no hay cursor. Asi usando jquery (que otra cosa sino) bindiamos tales eventos. Primero fue necesario reconocer el dispositivo:

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {

Luego bindeamos los eventos de manera encadenada:

$("a.link").bind('touchstart', function(){
$(this).addClass('clase-con-estilos-efecto-hover')
   }).bind('touchend', function(){
 $(this).removeClass(''clase-con-estilos-efecto-hover'')
   });

Al no tratarse de un dispositivo ipad, ipod o iphone, le insertamos esas clases en el evento de hover, esto lo hacemos en el “else” de nuestro condicional, quedando el código completo asi:

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
$("a.link").bind('touchstart', function(){
$(this).addClass('clase-con-estilos-efecto-hover')
   }).bind('touchend', function(){
 $(this).removeClass('clase-con-estilos-efecto-hover')
   });
}else{
$('a.link').hover(function(){
$(this).addClass('clase-con-estilos-efecto-hoverr')
},function(){
$(this).removeClass('clase-con-estilos-efecto-hover')
})
}

Cambiando la orientacion del dispositivo

Recordemos siempre que el usuario puede cambiar la orientación del dispositivo y eso modificará nuestra web. Cuando por ejemplo existen elementos posicionados de manera absoluta habrá que reposicionarlos según la orientación. Primero detectamos la orientación: window.addEventListener('orientationchange', nombre-de-la-funcion-que se ejecuta-al-cambiar-la-orientacion, false); o su versión jquery: $(window).bind("orientationchange",nombre-de-la-funcion-que se ejecuta-al-cambiar-la-orientacion) y finalmente la función que se ejecuta podría ser algo asi:

function cambiarOrientacion() {
var orientacion = Math.abs(window.orientation) === 90 ? 'horizontal' : 'vertical';
if(orientacion == "horizontal"){
 //ejecuta la acción para esta orientacion
}
}

Otra alternativa si se trata simplemente de modificar los archivos css podemos setear el tipo de medio sin recurrir a js:

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

Esto se pone realmente interesante.

maxiFalcone