aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

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.

(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.

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.

(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:

• Flash
• HTML
• Canvas
• SVG

Los resultados

(Ver Imagen)	(Ver Imagen)
(Ver Imagen)	(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 😀

Hace unos días descubrí via delicious, Sketchpad, un paint enriquecido completamente online que se aprovecha de las nuevas herramientas que HTML5 pone a nuestra disposición.

(Ver Imagen)

El resultado, como se puede ver, es realmente sorprendente. No solo por lo elegante del diseño, sinó por la soltura con la que se mueve y las posibilidades que ofrece:

• Uso de degradados
• Uso de patrones
• Paleta de colores
• Historial de modificaciones
• Posibilidad de salvar el dibujo con Data URI

Sin duda una muestra lo que nos vamos a ir encontrando por Internet en un futuro no muy lejano.

Hace unos meses, Andrés Fernandez nos deleitó con una implementación que nos permitía aplicarle un filtro de escala de grises a imágenes desde Javascript. La idea, era crear un objeto <canvas /> al que le añadimos la imagen a su contexto para después ir procesándola. El resultado era eficaz, pero como el mismo comenta, lento para un uso práctico.

(Ver Imagen)

Con el cambio de año, el script también ha sufrido un cambio, y menudo cambio. Se trata de un cambio que nos permite aplicar el efecto en porciones de segundo, haciendo que su uso a nivel práctico sea factible.

(Ver Imagen)

Como curiosidad decir que, con este experimento no solo podremos convertir imágenes en imágenes en blanco y negro, sinó que como veremos en el post, podemos aplicarle diferentes colores e incluso podemos convertir imágenes en «asciart» 😀

(Ver Imagen)

¿Conocéis a este personaje? 😀

En Carsonified.com nos muestran un interesante tutorial con el que iniciarnos en el uso de <canvas /> mediante Javascript.

// Comprobamos que <canvas /> esté disponible
if(drawingCanvas && drawingCanvas.getContext) {
 // Inicializamos el lienzo 2D
 var context = drawingCanvas.getContext('2d');

// Creamos la cara amarilla
 context.strokeStyle = "#000000";
 context.fillStyle = "#FFFF00";
 context.beginPath();
 context.arc(100,100,50,0,Math.PI*2,true);
 context.closePath();
 context.stroke();
 context.fill();

 // Añadimos 2 ojos verdes
 context.strokeStyle = "#000000";
 context.fillStyle = "#FFFFFF";
 context.beginPath();
 context.arc(80,80,8,0,Math.PI*2,true);
 context.closePath();
 context.stroke();
 context.fill();

 context.fillStyle = "#009966";
 context.beginPath();
 context.arc(80,80,5,0,Math.PI*2,true);
 context.closePath();
 context.fill();

 context.strokeStyle = "#000000";
 context.fillStyle = "#FFFFFF";
 context.beginPath();
 context.arc(120,80,8,0,Math.PI*2,true);
 context.closePath();
 context.stroke();
 context.fill();

 context.fillStyle = "#009966";
 context.beginPath();
 context.arc(120,80,5,0,Math.PI*2,true);
 context.closePath();
 context.fill();

 // Creamos una nariz con firma de diamante
 context.fillStyle = "#000000";
 context.beginPath();
 context.moveTo(93,100);
 context.lineTo(100,93);
 context.lineTo(107,100);
 context.lineTo(100,107);
 context.closePath();
 context.fill();

 // Añadimos la sonrisa                   
 context.strokeStyle = "#000000";
 context.beginPath();
 context.moveTo(70,110);
 context.quadraticCurveTo(100,150,130,110);
 context.quadraticCurveTo(100,150,70,110);                
 context.closePath();
 context.stroke();
}

Este código, nos permite generar la cara amarilla que vemos en el «Hello World» que vemos debajo:

(Ver Imagen)

Mucho código pero muchas posibilidades.

Doodle.js es una librería que nos permite trabajar fácilmente con el elemento <canvas /> y todo lo que ello conlleva. Con una estética similar a jQuery, dibujar sobre el lienzo que es <canvas /> es tan sencillo como esto:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
  <!-- CANVAS PARA IE -->
  <!--[if IE]><script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script><![endif]-->

  <!-- SCRIPT DOODLE -->
  <script src="./doodle-0.1.js" type="text/javascript"></script>
  <!-- JAVASCRIPT -->
  <script type="text/javascript">
    function init() {
			(function(oo) {
			 oo.canvas('#my_canvas');
			 var box = oo.rect({x:25, y:25,width:50, height:50, fill:"#ff0000"});
			 box.draw(); //draw a red box with initial parameters

			 box.modify({fill:'rgb(0,255,0)'}).translate(50,0).draw();
			 box.modify({fill:'purple'}).rotate(-45).draw();
			 box.modify({fill:'yellow'}).translate(50,0).scale(1.5).draw();
			 box.modify({fill:'blue'}).transform(1.5,0,0,1.5,50,0).draw();

			})($doodle);
    };
  </script>
  </head>
  <body onload="javascript:init();">
  <!-- ELEMENTO CONTENEDOR CANVAS -->
    <canvas id="my_canvas" width="600" height="400">
      <p>Error: El elemento canvas no está disponible para este navegador.</p>
    </canvas>
  </body>
</html>

Ejemplos

No os perdais algunos de los ejemplos disponibles en la página de la librería:

• Espiral multicolor
• Rebotes múltiples