Aunque la utilización de pestañas en el navegador nos permite visitar múltiples sitios web bajo una misma ventana, la verdad es que cuando se tienen muchas abiertas la navegación entre ellas se vuelve una pesadilla y cuesta localizar el contenido. Mozilla nos presenta TabCandy, su intento para organizar y simplificar la navegación entre pestañas, probablemente disponible para la versión 4 de su navegador Firefox.

TabCandy es un panel en el que podremos organizar todas nuestras pestañas abiertas y agruparlas en secciones. Desde un icono en la barra superior accederemos a esta vista en la que las pestañas se encuentran organizadas por grupos a nuestro gusto, donde cada sección tiene un nombre que nosotros definimos y ajustamos en posición y dimensiones.

Las buenas relaciones de Google con Adobe, promoviendo Flash en sus teléfonos Android, no tienen por qué ser un motivo de despreciar HTML5 y apoyar a los desarrolladores web a utilizar más esta tecnología.

A través de la web http://www.html5rocks.com/ Google ofrece presentaciones, tutoriales y ejemplos para dar a conocer entre los programadores las ventajas y capacidades de la unión de HTML + CSS + JS. Tutoriales por ejemplo para aprender como habilitar tu aplicación web para que funcione en modo offline, acceso a la geolocalización o leer archivos locales mediante JavaScript.

He creado un pequeño ejemplo para mostraros tres de las nuevas propiedades que encontraremos disponibles en CSS3: las transformaciones, las transiciones y las sombras. El ejemplo friki reproduce la animación del título en la introducción de la serie Lost (como tributo a su finalización).

Aviso: Este ejemplo solo funcionará en aquellos navegadores que ya tengan implementadas estas nuevas propiedades de CSS3, como por ejemplo Firefox 3.7, Safari 4, Chrome 5 y Opera 10.

El ejemplo muestra el texto LOST inicialmente con una opacidad, tamaño de fuente y rotación. Cuando se posiciona el cursor sobre el texto gracias a la propiedad transition aplicaremos una animación que cambiará estos tres valores iniciales y le añadirá una sombra al texto.

El código CSS necesario sería:

div{
-webkit-transform: rotate(-15deg) scale(1) skew(0deg);
-webkit-transition: all 3s ease-in;
}
div:hover{
text-shadow: 3px 3px 5px #CCC;
-webkit-transform: rotate(20deg) scale(1) skew(-30deg);
}

De este modo estaríamos indicando que el texto inicial tiene una rotación de -15 grados, sin plegamiento y sin escalado. La transformación que se va a aplicar afectará a todas las propiedades (all), durará 3 segundos y como se comportará durante el tiempo de animación (en este caso ease-in).

El punto final de la animación lo asignamos en el div:hover. Aquí indicamos una sombra para el texto (posición izq/der, posición arriba/abajo, tamaño y color) y la transformación final del texto.

Demostración | Descargar [55]

El desarrollador David Kaneda ha publicado la nueva versión (beta) de su proyecto open source jQTouch, un plugin para el framework jQuery que ayuda a desarrollar aplicaciones para el iPhone usando HTML, CSS, y Javascript.

Esta nueva versión se acompaña con nuevos temas visuales y demostraciones de uso (como un gestor de tareas). Además se ha dado soporte para nuevos eventos, nuevas transiciones entre las páginas, detectar el cambio de orientación y controlar el deslizamientos con el dedo sobre un elemento.

Una nueva opción del plugin permite arrancar la página a tamaño completo y mostrar una imagen mientras la aplicación se carga, ofreciendo un toque visual mucho más profesional y que nos hace olvidar de que se trata de una aplicación web.

jQTouch está escrito en HTML5, CSS3, y jQuery y el autor indica que funciona en los dispositivos iPhone, Android y Palm Pre. ¡Gracias David!

Más información, video de demostración y descarga en la web oficial del proyecto.