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.

Perceptive Pixel

Digimemo es un dispositivo que combina una tableta digitalizadora y un bolígrafo adaptado para poder capturar (como si de una tableta gráfica se tratase), lo que escribimos en un papel. Permite almacenar más de 1000 páginas (usando una memoria CompactFlash).

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.

Read the rest of this entry »