Contenido

Ambilight para HTML5 Video

26 mar

+ 13

El tag <video /> del estándar HTML5 va a convertirse en el formato de visualizar videos en Internet, es solo cuestión de tiempo. Ya hemos visto algunas interesantes aplicaciones que se le puede dar, pero esta es sin duda, y por ahora, la más espectacular que he visto.

ambilight_video_html5
(Ver Imagen)

Mediante <canvas /> conseguimos simular el efecto luminoso que Phillips impuso en sus televisores planos con los colores que vemos en el vídeo que estamos reproduciendo. Podemos ver el código fuente que lo implementa directamente desde aquí.

Ver ejemplo.

Crea tu propio framework de animaciones

25 mar

+ 5

Interesante artículo en el que nos muestra, en pocos pasos y mucho código como crear nuestro propio framework Javascript destinado a trabajar con animaciones. Ideal para los que queremos minimizar nuestro código Javascript eliminando esos KB que los frameworks nos incluyen

// Definimos el constructor
function Effect(opt) {
  this.opt = {
    element: opt.element,
    duration: opt.duration || 1000,
    fps: opt.fps || 40,
    onComplete: opt.onComplete || function(){}
  };
}

Effect.compute = function(from, to, delta) {
  return from + (to - from) * delta;
};

// Métodos de la clase
Effect.prototype = {
  start: function(props) {
    if(this.timer) return;
    var that = this, fps = this.opt.fps;
    this.time = +new Date;
    this.timer = setInterval(function() { that.step(props); },
                             Math.round(1000/fps));
  },
  step: function(props) {
     var currentTime = +new Date, time = this.time, opt = this.opt;
     if(currentTime < time + opt.duration) {
      var delta = (currentTime - time) / opt.duration;
     this.setProps(opt.element, props, delta);
    } else {
      this.timer = clearInterval(this.timer);
      this.setProps(opt.element, props, 1);
      opt.onComplete();
    }
  },
  setProps: function(elem, props, delta) {
    var style = elem.style;
    for(var prop in props) {
      var values = props[prop];
      style[prop] = Effect.compute(values[0], values[1], delta)
        + (values[2] || '');
    }
  }
};

Y para usarla, simplemente tendremos que definir las nuevas propiedades del elemento al que le queremos aplicar el efecto.

var elem = document.getElementById("myElementId");
var fx = new Effect({
  element: elem,
  duration: 1000
});
fx.start({
  'width': [0, 20, 'px'],
  'height': [0, 5, 'em']
});

Y listo, ya tenemos efecto. No he probado a encadenar efectos, pero debería funcionar, permitiendo conseguir animaciones interesantes.

Tabla de compatibilidades CSS3/HTML5 en los diferentes navegadores

23 mar

+ 16

Útil listado de compatibilidades CSS3 y HTML5 disponibles en los diferentes navegadores web. Muy útil para saber si esa propiedad nueva que queremos utilizar está disponible para la mayoría de navegadores.

Pregunta freak: Viajes a la velocidad de luz

22 mar

+ 34

Si pudieras viajar a la velocidad de la luz desde Madrid a New York, ¿podríamos decir que físicamente estamos en New York y que nuestros ojos aún ven Madrid?

Impel, completo ORM en Javascript para HTML5

22 mar

+ 13

Conocemos como ORM al mapeo de un objeto-relacional, o en palabras mundanas, al mapeo de una entidad de una base de datos en un objeto. La mayoría de lenguajes de programación implementan diferentes opciones y herramientas para realizar dicha tarea en los frameworks que usamos.

 var Card = new Class({
       Extends    : ImpelClass,
       peer_class : "CardPeer",
       toString   : function(){
                      return this.getName() + " of " + this.getSuit();
                    }
   });

 var CardPeer = new ImpelPeer({
        'columns'      : { 'id'    : 'card.id',    'suit' : 'card.suit',
                           'value' : 'card.value', 'name' : 'card.name'},
        'table'        : 'card',
        'base_object'  : 'Card'
   });

Javascript no iba a ser menos, y más ahora que HTML5 ha traido la base de datos al navegador con todo lo que eso conlleva. Impel, es el primero ORM que he visto para javascript y aunque no me ha dado tiempo a probarlo, parece que tiene muy buena pinta.

Dispone de una API bastante completa y al estar completamente modularizado, nos permite incluir nuevos módulos a nuestros proyectos fácilmente.

Flash vs HTML5, pongámoslos a prueba

22 mar

+ 75

Se habla mucho de que HTML5 va a matar a Flash, y que las nuevas tecnologías que se están integrando en los nuevos estándares ofrecen versiones compatibles muy superiores a lo que ahora podemos conseguir con flash.

Pero la gente de Man in Blue, no se contentó con solo leer lo que otros opinaban, así que se han puesto manos a la obra para realizar un benchmark entre los diferentes lenguajes disponibles.

flash-vs-html5
(Ver Imagen)

En el ejemplo ha usado una aplicación que genera partículas aleatorias y las mueve por la página caóticamente haciendo trabajar el procesador de nuestra máquina.

Podemos verla funcionando en:

Los resultados

graph_win_ie
(Ver Imagen)
graph_win_chrome
(Ver Imagen)
graph_osx_safari
(Ver Imagen)
graph_osx_ff
(Ver Imagen)

Como podemos ver en las gráficas, la superioridad de Flash está latente en todos los navegadores. Da igual el número de partículas que se usen, los resultados, actualmente, son muy superiores a los conseguidos con las otras alternativas.

Han ganado esta batalla, pero aún no han ganado la guerra“, con esta frase expreso lo que siento al ver estos resultados. Flash está ahí, y poco a poco esto debería de ir cambiando. Tendremos que estar atentos :D

Inactividad, desmotivación y esas cosas

17 mar

+ 174

Muchos son los que me han preguntado por mail, twitter o buzz, el por que no posteo últimamente. Y aunque he intentado dejarlo pasar esperando a que se me pase creo que es el momento de dar la cara y explicarlo.

Hace ya un tiempo que vengo bastante desmotivado, los que lleven más tiempo en el blog, sabrán que no es la primera vez que me pasa, quiero pensar que es temporal y que como las otras veces las ganas de escribir y comentar cosillas van a volver.

Con el tiempo he dejado de ver el blog como una via de escape donde dejar lo que voy descubriendo y de paso compartirlo con todos vosotros. Principalmente por que lo estoy viendo como una obligación y no como un hobbie. Osea que ya no encuentro las ganas que antes tenía por escribir. La falta de comentarios últimamente ha hecho que lo sienta como una canal unidireccional y pierda la gracia que antes tenía, entre otras cosas.

Sigo compartiendo via Twitter todo lo que me parece interesante, con la diferencia de que ahora en 140 carácteres no necesito extenderme y me resulta más cómodo aportar mi granito de arena.

No quiero dar la impresión de que esto es un adios, por que para mi esto es muy importante y sobretodo quiero seguir con ello, pero no así como estoy. Quiero hacerlo con las ganas que siempre he tenido.

Así que siento el coñazo, no soy una persona que le guste hablar de sus sentimientos (no creo que nadie tenga que sufrir de mis problemas teniendo los suyos propios) y espero valoréis lo difícil que ha sido para mi escribir estas líneas.

Un saludo y disculpas por cualquier tipo de molestia que haya podido ocasionar.