iPad, iPad, iPad… otro nuevo dispositivo para cautivar a los ávidos consumidores, pero que por lo menos trae interesantes nuevas tecnologías. Aparte de que crean que es un iPhone gigante, tiene varias innovaciones que permiten darle mucha rienda a la imaginación de los creadores de contenido específico para esta plataforma. Una de las que más me han interesados, corresponde a los eventos gestuales.

Este artículo abordará todos los eventos disponibles para iPad y que ocurren cuando el usuario interactúa con una página web en iOS. Aunque puedes visualizar los ejemplos con Safari 5 para escritorio o el mismo iPhone, la mejor interacción la puedes lograr desde un iPad mismo por la dimensión y calidad de su superficie táctil (o en su defecto con su simulador).

Eventos Multitouch

Puedes usar classes de eventos touch de tipo DOM en Javascript que ya están disponibles en iOS. Si quieres registrar estos eventos, el sistema envía objetos TouchEvent a aquellos elementos DOM mientras los dedos se mueven por sobre la superficie. Una secuencia multitouch comienza cuando un dedo toca por primera vez la superficie. La secuencia termina cuando el último de esos dedos se levanta de la misma superficie. Éstos eventos son similares a los usuales eventos de mouse, excepto que puedes tener toques simultáneos en la superficie en diferentes lugares de la misma. Un objeto de evento touch es utilizado para encapsular todos los toques que existen en un mismo momento en la pantalla. Cada dedo es representado por un objeto touch y las típicas propiedades que encuentras en un evento de mouse están en un evento touch, pero no el objeto mismo.

Cuatro son los principales eventos touch:

ontouchstart

ocurre cada vez que un dedo se posa sobre la pantalla.

ontouchmove

ocurre cuando un dedo que ya está en la pantalla se mueve sobre ella.

ontouchend

ocurre cada vez que un dedo sale de la pantalla.

ontouchcancel

el sistema puede cancelar los eventos en ciertas ocasiones, como por ej. cuando recibes un SMS mientras estás arrastrando un elemento.

Para registrarlos con Javascript:

element.addEventListener("touchstart", touchStart, false);
element.addEventListener("touchmove", touchMove, false);
element.addEventListener("touchend", touchEnd, false);
element.addEventListener("touchcancel", touchCancel, false);

Y si lo quieres implementar como una función:

function touchStart(event) {
   // tomemos las coordenadas del dedo cuando toca la pantalla
   var x = event.touches[0].pageX;
   var y = event.touches[0].pageY;
   alert('X = '+x+',Y = '+y);
}

Ver ejemplo 1

Un simple evento: arrastra un elemento cuando mueves el dedo:

function touchMove(event) {
   event.preventDefault();
   var touch = event.touches[0];
   var node = touch.target;
   node.style.position = "absolute";
   node.style.left = touch.pageX + "px";
   node.style.top = touch.pageY + "px";
}

Ver ejemplo 2

Detalle: por defecto, si arrastras un dedo sobre la pantalla es probable que la página comience a moverse (peor si ésta tiene scroll). Por suerte agregaron la función preventDefault() que hace que la página se quede quieta si lo necesitamos.

Las listas de eventos agrupan estos objetos, y contiene información para cada dedo que está tocando la pantalla. Además, contiene 2 otras listas: una que tiene información para los dedos que se originan del mismo elemento y otro que contiene sólo información para los dedos asociados al mismo evento. Estas listas están disponibles para cada evento touch, y son:

touches

una lista para cada dedo que está posado actualmente sobre la pantalla.

targetTouches

tal como touches, pero filtra sólo la información para los dedos que comienzan del mismo elemento.

changedTouches

lista la información para cada dedo involucrado en el mismo evento.

Las propiedades que contienen estas listas son:

clientX

coordenada X del toque relativa al viewport (pantalla visible).

clientY

coordenada Y del toque relativa al viewport.

screenX

coordenada X relativa a la pantalla.

screenY

coordenada Y relativa a la pantalla.

pageX

coordenada X relativa a la página completa (incluye offset del scroll).

pageY

coordenada Y relativa a la página completa.

target

elemento donde el evento touch fue originado.

indentifier

número identificados, único para cada evento touch.

Para entender mejor, veamos el siguiente caso:

1. Cuando pongo un dedo en la pantalla, las 3 listas tendrán la misma información en sus propiedades, pero changedTouches fue el que originó el evento.

2. Cuando pongo el segundo dedo, touches tendrá 2 items (uno para cada dedo); targetTouches tendrá 2 items sólo si el segundo dedo es posado en el mismo elemento del primero; changedTouches tendrá información relacionada al segundo dedo, porque fue lo que causó el evento.

3. Si pongo 2 dedos exactamente al mismo tiempo, tendré 2 items en changedTouches: uno para cada dedo.

4. Si muevo mis dedos, la única lista que cambiará es changedTouches y va a tener información relacionada a cada dedo que se vaya moviendo (al menos uno).

5. Cuando levanto un dedo, será eliminado de touches y targetTouches y aparecerá en changedTouches ya que fue el que originó el evento.

6. Si quito el último dedo se vaciarán touches y targetTouches, y changedTouches tendrá la información para ese ultimo dedo.

<div
   ongesturestart="gestureStart(event);"
   ongesturechange="gestureChange(event);"
   ongestureend="gestureEnd(event);"
>

Y mediante Javascript:

element.addEventListener("gesturestart", gestureStart, false);
element.addEventListener("gesturechange", gestureChange, false);
element.addEventListener("gestureend", gestureEnd, false);

Comencemos con un ejemplo simple:

function gestureStart(event) {
   // tomamos el angulo y tamaño del elemento
   var angle = event.rotation;
   var scale = event.scale;
   alert('angulo: '+angle+', dimension: '+scale);
}

Ver Ejemplo 3

Ahora escalamos y rotamos un elemento:

function gestureChange(event) {
   event.preventDefault(); 
   event.target.style.width = (200 * event.scale) + "px";
   event.target.style.height = (200 * event.scale) + "px";
   event.target.style.webkitTransform = 'rotate(' + event.rotation + 'deg)';
}

Ver Ejemplo 4

Creo que esto es un buen comienzo para que te interese esta plataforma, la que implementa un tipo de interacción háptica poco usual y con un gran potencial comercial.

Links:

• Safari Reference Library: Handling Events
• Safari Reference Library: Safari DOM Additions Reference
• Sitepen: Touching and Gesturing on the iPhone

Para quitarlo, basta declarar en CSS:

textarea {
	resize: none;
}

Ver ejemplo
(En Safari-Chrome)

Al declarar algunos valores en propiedades CSS como background-image, usualmente se permite poner o no el valor entre comillas dobles "" ó simples ”. Si escribes el código a mano, no las utilizas. Si usas algún editor, quizas las agrega. Pero ¿se debe o no poner comillas?

Esta pregunta que ha intrigado al hombre por años no tiene una respuesta definitiva. Por lo menos no la he encontrado de manos de la W3C, pero sí el uso de comillas en ciertas declaraciones tiene sentido:

… single quotes (‘), and double quotes (") must come in matching pairs …

Primero, no dice que deben ser utilizadas. Segundo, dice que si las utilizas, deben estar en par (si abres con comilla simple cierra con simple, etc.). Pero:

Inside the quotes, characters are parsed as a string.

Esto es lo importante. Si utilizas las comillas simples o dobles, el valor se pasa como string. Un ejemplo práctico y descuidado: si tienes una imagen con espacios en su nombre:

background: url('back ground.png')

Si utilizas comillas en su declaración la imagen se mostrará:

Ver ejemplo con comillas

Si no la utilizas, el browser no encontrará la imagen:

Ver ejemplo sin comillas

Este comportamiento es independiente del doctype que estés utilizando. Yo las uso.

Link:

• W3C: Syntax and basic data types

En esta ocasión, el podcast es bastante preciso y corto, y los temas que convergen son:

1. Yo no valido.
2. HTML5, CSS3 y rediseño de este sitio.

Y para ser más cabrón, desde ahora lo pueden escuchar aquí mismo (si tienen un browser moderno) a través de la nueva etiqueta <audio></audio>. Si no ven el player, pueden actualizar su navegador a Firefox ó Safari, ó simplemente bajar el archivo .zip el cual también entrego.

Escuchar (HTML5):

Bajar: Bajar Podcast 04 (13.20 min, 12.6mb, .zip)

Feed: RSS2

$('input').each(function(){
   // tomamos el valor actual del input
   var currentValue = $(this).val();
   // en el focus() comparamos si es el mismo por defecto, y si es asi lo vaciamos
   $(this).focus(function(){
      if( $(this).val() == currentValue ) {
         $(this).val('');
      };
   });
   // en el blur, si el usuario dejo el value vacio, lo volvemos a restablecer
   $(this).blur(function(){
      if( $(this).val() == '' ) {
         $(this).val(currentValue);
      };
   });
});

Ver ejemplo

Para esta nueva versión, he agregado las nuevas etiquetas que conforman HTML 5 para elementos de tipo bloque (las que son inline no las necesitan) y aproveché de realizar las siguientes mejoras en lo existente:

• Soporte para nuevas etiquetas HTML 5
• Mejor reset para campos de formularios
• Mejoras para listas ordenadas (<ol>) y tablas (<table>)

Ya está activo en este nuevo sitio, y espero sea aprovechado y de mucha ayuda en sus proyectos. La idea, como saben, es simplificar el codificado mediante el reset de estilos que traen por defecto los navegadores web.

Bajar hoja de estilo (.zip)

Pero recientemente un cliente pidió que los tabs se pudieran navegar con el historial del browser, o sea que si vas seleccionado diferentes tabs e incluso saliendo a otras páginas, puedas volver a ellas con el botón ‘Back’ o ‘Volver’ del navegador, y volver a pasar por ellos. Esto me resultó en un problema no menor que me costó solucionar, ya que los tabs suelen reaccionar ante eventos del click del mouse (como por ejemplo para mostrar tal <div> al clickear tal enlace <a> y que a éste se le agregue una class="selected" que indique su estado de seleccionado). Y esto suelo no quedar registrado en el caché del browser para que pueda ser navegado como se pidió. Pero bueno, pude solucionarlo y aquí lo comparto por si lo necesitan; implica 2 pasos diferentes los cuales deben funcionar en conjunto:

Primero, crearemos una simple función en jQuery para que funcionen los tabs. Esta es una de las maneras más simples de crear este tipo de menúes. Para el HTML:

<div class="tabs"><!-- .tabs -->
   <ul id="menu_tabs">
      <li><a href="#item1">Item 1</a></li>
      ...
   </ul> 
   <div id="item1" class="caja"><!-- #item1 -->
      <h2>Item 1</h2>
      <p>Donec gravida posuere arcu.</p>
   </div><!-- /#item1 -->
   ...</div><!-- /.tabs -->

Le aplicamos la siguiente instrucción en jQuery:

$(function(){
   // definimos variables para el contenedor y los<div>'s de los tabs
   var tabContainers = $('.tabs > div');
   // creamos el evento click para cada uno de los items del menu de tabs
   $('div.tabs ul a').each(function() {
      $(this).click(function(){
         // guardamos el ancla (#item1 por ej.) en una variable del link clickeado
         var hash = $(this).attr('href');
         // escondemos todos los tabs
         tabContainers.hide();
         // mostramos el <div> que sea igual al ancla guardado
         $(hash).show();
         // jugamos agregando y quitando classes del menu
         $('div.tabs ul a').removeClass('selected');
         $('a[href='+hash+']').addClass('selected');
      });
   });
   // para comenzar, hacemos que el primer elemento sea el clickeado
   $('div.tabs ul a:first').click();
});

Ver demo tabs

Bien, con esto tienes tu menú de tabs funcionando de manera básica pero práctica. Ahora como notarás, al ir por los tabs y volver con el botón del navegador éstos no seguirán el mismo recorrido devuelta, aunque en la URL sí se vea que van cambiando. Para que esto ocurra, debemos comparar no el hash del enlace (<a href="#item1"> por ej.), sino comparar con la URL que va cambiando. Además se debe incluir el plugin jQuery BBQ, el que realiza el ingreso de la URL con tabs al caché del browser. Con el mismo HTML, miren la nueva función:

$(function(){
   var tabContainers = $('.tabs > div');
   // creamos un nuevo evento y lo incluimos al browser
   $(window).bind('hashchange', function () {
      // nuestra variable no la sacamos del <a> sino de la URL y dejamos el primero seleccionado
      var hash = window.location.hash || '#item1';
      // el resto es prácticamente lo mismo
      tabContainers.hide();
      $(hash).show();
      $('div.tabs ul a').removeClass('selected');
      $('a[href='+hash+']').addClass('selected');
   });
   // ejecutamos este nuevo evento 'hashchange' mediante un trigger
   $(window).trigger('hashchange');
});

Ver demo Tabs + History

En este ejemplo, incluso podemos abrir mediante la URL en el tab que queramos, por ejemplo con el siguiente link abriremos el demo en el tab 3:

Ver demo Tabs + History en el tercer tab

En un campo de formulario, cuando lo seleccionas en iPhone/iPad para completarlo, automáticamente te muestra el teclado touch del aparato. Aparte del teclado QUERTY por defecto, existen 3 valores para type="" de <input /> que muestran diferentes tipos de teclados: numéricos, url y de e-mail:

<input type="text" /> (por defecto)

<input type="url" />

<input type="number" />

<input type="email" />

Los browsers que no soporten HTML5 lo obviarán y degradarán como si fuera un campo de tipo texto (type="text").

Se nota como un detalle menor pero seguro tus usuarios lo notarán y te diferenciarás con este tipo de detalles.

En esta ocasión el layout es bastante simple, uno típico que encontrarás en cualquier sistema de comentarios para blogs. Pero es un buen puntapié para que veas de qué se trata esto. Además, contiene las etiquetas fundamentales y más utilizadas para capturar datos de usuarios.

Espero sea de ayuda y que se entienda, como siempre lo muestro en 2 formatos: streaming para web y uno en alta calidad para que lo bajes y estudies offline. Además, puedes descargar el material utilizado para este videocast.