Bienvenidos al blog de FactorSIM.

Hoy he estado creando un sprite para el nuevo curso que estamos desarrollando. Bueno, en realidad yo he hecho un script y el script ha hecho el sprite, porque no tenía yo ganas de crear 100 imágenes a mano. Este es el resultado:

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.

Un ejemplo más de cómo las interfaces en 3D están ganando terreno. En este caso, http://bumptop.com/

Visto en el Caparazón

En http://www.factormoodle.com/drupal57/googlemap_view tenemos (desde hace un tiempo, de hecho) un ejemplo de uso de googlemaps en drupal.

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

Perceptive Pixel