Clipping de vídeo usando HTML5 y SVG en Firefox4

By Luis in Desarrollo web, Javascript

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.

Demo

Vía / Project London Trailer

Tres grandes tutoriales sobre HTML5

By Luis in css, Desarrollo web

HTML5 Rocks ha publicado 3 tutoriales muy interesantes sobre desarrollo de HTML5.

El primero de ellos trata sobre cómo mejorar el rendimiento de las aplicaciones en HTML5, a parte de alguna que es puramente Javascript y no HTML5 (como guardar en una variable un elemento DOM y no buscarlo cada vez que vayamos usarlo), la mayoría de ellas trata sobre el uso de transiciones CSS3 por parte del navegador y no mediante el uso de Javascript, ya que así sería el navegador el que se encargue de ello y pueda optimizar su ejecución, por ejemplo:

  var elem = evt.target;
  // Modernizr es una librería que nos indica que elementos CSS3 y HTML5 dispone el navegador
  if (Modernizr.csstransforms && Modernizr.csstransitions) {
    // Mediante CSS3
    elem.style.transition = 'all 3s ease-out';
    elem.style.transform = 'translateX(600px)';
  } else {
    // Mediante jQuery
    jQuery(elem).animate({ 'left': '600px'}, 3000);
  }

El siguiente tutorial nos indica cómo meterle efectos CSS3 a nuestros textos, y la verdad es que alguno está muy currado. Claro que yo no soy muy partidario de usarlos según que tipo de publicación (se puede abusar mucho de ello), pero la verdad es que nos puede venir muy bien.

Y por último consejos HTML5 y CSS para convertir nuestra web a formato adaptado para móviles. Algunos trucos de rencimiento como el uso del almacenamiento local y algo bastante interesante cómo indicar la orientación o el viewport de la página:

Improving the Performance of your HTML5 App

Typographic effects in canvas

“Mobifying” Your HTML5 Site

Usuarios de prueba para tus aplicaciones en Facebook

By Luis in Desarrollo web

De lo que se entera uno, Facebook te ofrece la posibilidad de crearte usuarios de prueba para realizar tus aplicaciones en Facebook.

Mediante la API de Graph podemos entre otras cosas:

Crear usuarios

POST /app_id/accounts/test-users?installed=true&permissions=read_stream

Añadir usuarios a tu app:

POST /app_id/accounts/test-users?installed=true&permissions=read_stream
&uid=[test_user_id]&owner_access_token=[app_access_token_of_current_owner_app]

Acceder a ellos:

GET  /app_id/accounts/test-users

Eso sí, tiene ciertas limitaciones:

  • Número limitado de usuarios que puedes crear
  • Los usuarios de prueba pueden interactuar con otros usuarios de prueba pero no con usuarios reales.
  • Los usuarios de prueba no pueden hacerse fan de páginas públicas o crear contenido público como escribir en el muro de una página.
  • Pueden ser usados por los desarrolladores de la aplicación.
  • Un usuario de prueba jamás se puede convertir en usuario real.

El rendimiento de Google Instant Previews

By Luis in Desarrollo web, Javascript

Algunas veces no nos paramos a pensar en los cambios que añade una web, en este caso Google, los problemas que pueden aparecer en tema de rendimiento. Y estos problemas suelen ser fundamentales a la hora de la impresión que se lleva un usuario de la web, claro, que Google no se caracteriza por problemas de rendimiento y los expertos que están trabajando allá deben ser de lo mejorcito que existe.

Después de este rollo introductorio, me gustaría apuntar los 3 aspectos que utiliza Google para mejorar el rendimiento que se centran sobre todo en la reducción del número de peticiones HTTP:

  • Compilación de Javascript: mediante Closure Compiler, consigue reducir el tamaño de los ficheros js, reutilizar variables, …
  • JSONP bajo demando: JSONP permite envolver la respuesta JSON con una llamada Javascript. Se realizan llamadas directas al script en vez de usar Ajax, lo cual permite hacer llamadas crossdomain y que el navegador lo cachee perfectamente. El problema es que si se añade la llamada con un createElement, el navegador se queda cargando, por lo que es mejor meterlo entre un setTimeout.
  • DATA URIs: es un método de añadir contenido en URLs usando base64, el problema es que IE8 sólo admite DATA URIs de 32k, por lo que dividen las imagenes en trozos y los “empalman” con etiquetas IMG. También han comprobado que aunque base64 añade hasta un 33% del tamaño, como lo devuelven en gzip, el tamaño final es más o menos el mismo.

Está claro que hay que aprender de los que saben.

Instant Previews: Under the hood

Vía / High Scalability