Las imágenes PNG individuales ocupan unos 950 bytes cada una. Parece poco, pero juntando las 100 salen 94.989 bytes. El sprite con las 100 imágenes dispuestas en una cuadrícula de 10×10 ocupa 14.384 bytes: un 15% del tamaño total de las imágenes individuales. Y de cara al navegador, en lugar de ser 100 peticiones es sólo una única carga (evitando latencia de cada imagen, su overhead, el hecho de que ningún navegador en su sano juicio lanzaría 100 peticiones en paralelo contra el mismo servidor, etc, etc…) .

Tal vez este sea un caso un poco extremo y habitualmente no nos encontremos con cosas tan evidentes, pero creo que esto explica por qué todos “los grandes” (google, yahoo, etc…) recomiendan el uso de sprites.

El resultado? Un linda pelotita que rueda y rueda cuando javascript le sopla…
Cómo se hace? En mi caso, con este script tan bonito:

1
2
3
4
5
6
7
8
9
10
11
12
13

#! /bin/sh
 
mkdir -p imgs
for i in `seq 1 100`; do
	sed -e s/##ENDANGLE##/`echo "scale=20; ( $i - 25 ) * 2 * 3.1415926535897932384626433832795 / 100" | bc`/g < drawing.svg > drawing_t.svg
	echo "$i..."
	"/cygdrive/c/Archivos de programa/Inkscape/inkscape.exe" -e 'C:\Documents and Settings\DaniM\Escritorio\sprites\imgs\'$i'.png' 'C:\Documents and Settings\DaniM\Escritorio\sprites\drawing_t.svg'
done
 
echo "Final sprite..."
sq=`seq 1 100`
names=`for i in $sq; do ( echo imgs/$i.png ) done`
/cygdrive/c/Archivos\ de\ programa/ImageMagick-6.4.0-Q8/montage.exe -background transparent -tile 10x10 -geometry +0+0 $names progress_sprite.png

El funcionamiento es sencillo: uso inkscape para crear un archivo vectorial SVG con el gráfico, utilizo sed para modificarle el ángulo final del arco y lo convierto a PNG invocando inkscape desde la linea de comandos. Una vez tengo las 100 imágenes, utilizo montage (parte de ImageMagick) para juntarlas en un sprite.

Como podeis ver, utilicé cygwin. Si hubiera usado un sistema operativo de verdad, no tendría que haber puesto toda esa marabunta de rutas en dos formatos diferentes.

Una opción interesante hubiera sido procesar el fichero SVG mediante xsltproc en lugar de mediante sed. Para casos más complejos seguramente sería una muy buena opción. Pero eso… lo dejo como ejercicio para el lector.

Visto en el Caparazón

Lo más interesante es cómo está hecho. Y es que este ejemplo combina los dos elementos que considero fundamentales en drupal: CCK y vistas. Cada punto marcado en el mapa es un nodo de drupal, de un tipo GoogleMaps Marker. Este tipo contiene sólamente un título y un campo CCK para introducir las coordenadas.

De esta manera, cualquiera que cree un nodo de este tipo, hará aparecer un nuevo punto en el mapa. El mapa no es otra cosa más que una vista. Es decir: una lista de todos los nodos de tipo GoogleMaps Marker, sólo que con un formato algo diferente de la típica tabla mostrando los campos de cada entrada. El resto son unas cuantas llamadas al API de GoogleMaps, que está todo lo bien diseñada que cabía esperar.

Ya lo dijo en us momento el tal Federico Fellini: “la televisión es el espejo donde se refleja la derrota de todo nuestro sistema cultural“.

Ahora el espejito es cada vez más enorme, más tecnificado, más dolby-soundround, más TDT, más plasma, más LCD 1029x1080p, más high definition…. bla bla bla… pero igual de decadente. Y es que nunca habíamos soñado ver con tanto lujo de detalles tanta sandez televisiva!!!

Y yo me pregunto: ¿Todos los personajillos de la telebasura pareceran más inteligentes vistos en una tele de última generación que vistos con un tubo de rayos catódicos??? Ahí dejo eso…

Todo esto es una reflexión que acompaña a nuestro recien estrenado canal de TV en internet: http://www.mogulus.com/factorsim

Lo que dibujas en unas hojas determinadas, se almacena en la memoria de la tarjeta, y mediante USB se transmite al ordenador. Este modelo de hojas (con una rejilla de coordenadas) es un sistema común en estos dispositivos. Cuando termina, el ordenador necesita filtrarlo por un sistema de OCR que interprete el texto.

Fly Pen. Esta herramienta de digitalización nos facilita entre otras cosas, hacer operaciones matemáticas, digitalizar documentos, reproducir música o traducir al castellano de palabras inglesas… sólo con la escritura.

Livescribe, además permite grabar audio y reproducirlo después.