Tags » ‘HTML5’

Publiqué un pequeño tutorial sobre animaciones en canvas en  maestrosdelweb.com, el mismo se divide en las siguientes dos entrasdas:

Animaciones 2D utilizando el Canvas de HTML5

Animaciones 2D con vídeo en canvas HTML5

Para los que les interese el aspecto lúdico que ofrecen las animaciones en canvas, los invito a descifrar esta magnífica obra de arte de Marijn Haverbeke (autor de Eloquent Javascript, entre otras cosas), que resume en apenas 1024 caracteres, como hacer un juego utilizando canvas.

Más información: Bouncing Beholder

nube.js

nube.js es una pequeña librería que tiene como objetivo generar nubes de palabras utilizando tecnologías nativas del browser, especialmente del <canvas>.

Motivación

Luego de ver la propuesta de wordle decidí tomar como ‘proyecto de fin de semana’ desarrollar una herramienta que permita generar nube de palabras directamente en el browser, utilizando tecnologías de moda, como es el caso del <canvas>.

Ejemplos

Algunos ejemplos de uso:

Con la llegada del canvas al browser, la posibilidad de trabajar con gráficos creció exponencialmente, permitiendo transformar y editar imágenes de manera compleja directamente en el cliente de manera bastante sencilla.

Hay que recordar (y advertir), que estas tecnologías aún están en formación, por lo cual es de esperar que sufra cambios en el futuro. En particular, la iteración de pixels aquí expuesta puede ser optimizada (por el momento únicamente en Firefox) de la manera que exponen en esta entrada: Faster Canvas Pixel Manipulation with Typed Arrays (Mozilla Hacks).

Un caché es básicamente una entidad que almacena información de manera transparente con el objetivo de reducir los costos de cómputos de operaciones futuras.

En el ámbito web el uso de caché es conocido en cuanto al servicio de contenido, que suele ser cacheado a fines de agilizar futuros requerimientos del mismo.

En general el uso de caché permite agilizar los procesos así como también reducir los costos operativos, lo cual decanta en una mejor experiencia de usuario.

Utilizando un cache básico

Suponiendo que tenemos una implementación bastante básica de caché con la siguiente interfaz:

cache.set(key, value)
cache.get(key)

Podemos modificar nuestro código para reducir las llamadas a operaciones costosas, reduciendo virtualmente en un 100% el trabajo requerido para las solicitudes adicionales. Caso de uso típico:

// Sin cache, se realiza siempre la
// operacion costosa
data = expensiveOperation();

// Con cache
data = cache.get('data');

// La operacion costosa solo se realiza en
// caso de que no exista la informacion en
// cache
if(!data) {
	data = expensiveOperation();
	cache.set('data', data);
}

Un ejemplo más concreto se puede dar con las consultas ajax. Suponiendo que nuestra aplicación realiza numerosos requests, podríamos generar un proxy para nuestros métodos ajax a fines de no realizar requests repetidos (algo bastante común en cualquier aplicación web).

HTML5 Logo

HTML5 Logo

Como si algo le faltase para terminar de convertirse en el término de moda en el ámbito del desarrollo web, el World Wide Web Consortium (W3C) difundió (de manera MUY marketinera) el logo “oficial” de HTML5.

Además del logo propio de HTML5, presentan una variedad de “íconos” que tienen como único fin exponer las capacidades y caracteristicas de los sitios / apps webs, nuevamente, de manera MUY marketinera, apelando a términos poco claros e implementaciones aún no definidas completamente.

Por ejemplo, si quisiemos dar a entender a un usuario que nuestra web implementa todos los chiches, deberíamos utilizar el siguiente banner:

HTML5 Badge

HTML5 Badge

De cualquier manera, nunca es suficiente cuando de promocionar se trata, así que ni lerdos ni perezosos también promocionan con remeras y otros artículos!

Leer más:

*Para los desconocedores del término:

hype 1  (hp) Slang n.
1. Excessive publicity and the ensuing commotion: the hype surrounding the murder trial.
(…)

  • Buscar

  • Ultimos Twits

  • Por fecha

    • 2012 (11)
    • 2011 (63)
    • 2010 (13)
  • Tags

  • Documentacion Javascript

    JavaScript Reference, JavaScript Guide, JavaScript API, JS API, JS Guide, JS Reference, Learn JS, JS Documentation