Google ha desarrollado un nuevo formato de compresión de imagenes llamado WebP (se pronuncia “weppy”). Es para imágenes de estilo fotográfico y en la galeria de ejemplos de comparación, la calidad es la misma o superior con un tamaño de imágenes menor…
La verdad es que Firefox4 está de lujo, y las demos que ofrece Mozilla son increíbles. De una de ellas he sacado cómo hacer clipping en vídeos usando HTML5 y la posibilidad de incrustar SVG (sólo funciona en Firefox4).
El método es sencillo, tengo un SVG que muestra el contorno y los botones de play y pausa, además tiene un clipPath que se usará para el estilo clip-path del vídeo:
SVG
Vídeo
Javascript
var play = document.getElementById('play');
var pause = document.getElementById('pause');
var video = document.getElementById('video');
play.addEventListener('click', function() {
play.style.display = 'none';
pause.style.display = 'block';
video.play();
}, true);
pause.addEventListener('click', function() {
play.style.display = 'block';
pause.style.display = 'none';
video.pause();
}, true);
video.addEventListener("ended", function() {
play.style.display = 'block';
pause.style.display = 'none';
video.pause();
}, true);
El vídeo es el mismo que el de la demo de Mozilla, he puesto el borde semi-transparente para que se vea el clipping como va.
Facebook es una aplicación que está muy de moda en estos momentos (no entiendo por qué) y aunque su desarrollo no es muy complicado, obtener la información de cómo hacer las cosas y encontrar algo en su documentación puede ser algo difícil. Su Wiki es un horror, los ejemplos escasos y los foros no muy útiles. Por ello, quien necesite encontrar ejemplos y tutoriales puede venirle bien esta lista:
Muchas veces el intentar desarrollar aplicaciones demasiado diferentes o mal implementadas, hace que las páginas que la página web de nuestro cliente no sea indexada por Google:
Menús Javascript: los buscadores no siguen los enlaces javascript.
Mapa de imagen: al igual que los javascripts, no pueden seguir las imágenes.
Enlaces con imágenes o rollover: cuando contienen javascript y no están desarrollados por CSS.
Pop-ups: desarrollados mediante Javascript.
Menús por combos: cuando los menús se crean mediante SELECT, normalmente se accede por un formulario.
Enlaces en etiquetas NOSCRIPT: debido al abuso de esta etiqueta por parte de spammers, los buscadores no le hacen caso.
Frames: debido a su mal uso, Google ha penalizado su uso.
Java: no puede acceder a su contenido ni ejecutarlos.
Flash: ya tratado con anterioridad el uso del Flash o no, los motores de búsqueda no los tratan. De todas formas, siempre es recomendable presentar una alternativa al Flash.
Buenos consejos a tener en cuenta cuando quieras desarrollar un aplicación de internet (Rich Internet Applications):
Hazlo interactivo: en vez de ir página a página, hazlo que sea interactivo, edita contenidos, usa drag & drop.
Invita a usarlo: pequeños efectos con hover puede conseguir que el usuario se atreva a interactuar.
Usa popups ligeros: no se trata de ventanas popups, sino capas que de despliegan. Intenta usarlos cuando puedas para no tener que ir de página en página.
Piensa en la interacción como si fuera un storyboard: situa los frames como un storyboard para hacerte una mejor idea de cómo se deben producir las acciones.
Indica que acciones se realizan: avisa cuando se haya producido una acción, sin necesidad de dejar la página.
Piensa en objetos: en vez de pensar en contenidos y páginas.
Vamos con otra situación típica que nos solemos encontrar en el momento de desarrollar una web: rotar imágenes al azar cada vez que ingresamos o actualizamos una URL, y de la que José Román escribía hace unos días.
Lo probaremos mediante 3 casos en Javascript y mediante un script en el servidor (PHP, JSP, ASP, …). A parte, se pueden hacer distintos usos de ellas, según sea nuestra forma de programar o la imaginación o necesidades que tengamos.