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.

El más reciente gran paso es WebGL: un API OpenGL ES 2.0 para JavaScript. Es decir: gráficos 3D acelerados por hardware en el navegador. Estamos hablando del mismo tipo de tecnología con la que se desarrollan los juegos normales y corrientes. Y si bien JavaScript es más lento que el lenguaje C/C++ que utilizan los juegos, el hecho de que cada vez se haga más proceso en la GPU y menos en la CPU es una tendencia muy conveniente para hacer WebApps 3D competitivas.

WebGL no es un proyecto de especificación que algún dia verá la luz. Ya está aquí. Las últimas versiones de los principales navegadores ya lo implementan (lo que pone de manifiesto que Internet Explorer cada vez cumple menos su labor como navegador, ya que és la única excepción). Y las aplicaciones web que lo utilizan también están ya aquí. Por ejemplo:

Google Body Browser (http://bodybrowser.googlelabs.com/): un atlas anatómico completo en 3D.

Quake WebGL: por si teníamos alguna duda de si esto iba a servir para juegos. Hay una versión completa de Quake 2 (http://playwebgl.com/games/quake-2-webgl/) y visores de niveles de Quake 3 (http://media.tojicode.com/q3bsp/). Seguramente WebGL diera para portar juegos más modernos, si el código de estos estuviera disponible, claro.

Y otros muchos ejemplos de todo tipo: http://www.chromeexperiments.com/webgl

Sencillamente impresionante.

(Via el IMPRESCINDIBLE Criterion).

Fuera de Barcelona, sólo conocemos el excelente trabajo de Carmel Hassan y seguimos muy de cerca el trabajo de Investic (que además son de Pamplona, mi tierra natal).

Sin embargo, todavía hay clientes que dudan de la utilización de Drupal porque ven limitaciones en el tipo de páginas a crear y en el diseño que se puede aplicar a las mismas.

Para ellos, qué mejor que ver los siguientes ejemplos de webs hechas en Drupal:

1.- Berliner.de/

http://www.berliner.de/

2.- The White House

3.- Open Magazine

http://www.openthemagazine.com/

4.- Mac Life

5.- Eezer

6.- DrupalStyle

7.- Flock

8.- FOX

9.- Universal Music

10.- World Pulse

11.- Last Comedy

12.- Materia organikoa (Investic)

13.- Roca (UK, Portugal, Alemania y Benelux). FactorSIM

14.- Minyons escoltes i guies (consultoría por Atenea Tech)

Actualizo esta información. Me informa Shidarta, de Atenea que en realidad la web la han desarrollado los propios Minyons escoltes, y que ellos han realizado la consultoría.

15.- Ama tu salud (Neurotic)

Seguro que una vez visitados los ejemplos que aquí se pueden ver, más de un cliente podrá cambiar su percepción de la potencia de Drupal.

PD. Listado inspirado en parte en este post.

En un principio pensaba que sería un desarrollo serio, simuladores realmente interactivos, que permitan probar y cometer errores y que pudiesen mostrarte un aprendizaje de aprendizaje mediante la práctica.

La realidad, es que son simuladores más bien pobres (los que he podido probar, ya que algunos son .exe o requieren de Internet Explorer). De los que se hacían hace 10 años, con un arbol de decisiones en muchos casos de una sóla rama, lineales, con una interacción  baja, un uso de vídeo poco adecuado y unas animaciones muy poco elaboradas. No entro en diseño gráfico ni en usabilidad, que creo que son realmente un punto a mejorar. Hay partes del desarrollo que ni se leen correctamente, ya que están en flash, en blanco sobre fondo negro y en letra pequeñita.

En algunos simuladores, hacen un uso muy poco profesional del croma y del 3D, y en otros, para locutar, utilizan Loquendo. Supongo que ambas opciones son para ahorrar coste, aunque me gustaría ver la partida presupuestaria.

Pero hay una sorpresa. Por ejemplo, los Socioculturales. Estos simuladores tienen un diseño mucho más interesante, una usabilidad mejorable aunque razonable y una dinámica real de juego y simulación. Además, usan el 3D para mostrar objetos y escenarios, pero de forma muy correcta. Las dinámicas son clásicas, pero al menos no se ven anticuados nada más nacer.

Visto en El blog de Celestino Arteta

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.