{entre llaves}

Convertir un GIF animado en una hoja de sprites

2016-07-30T19:48:00.000-03:00

Buscando animaciones de ejemplo para crear animaciones de sprites, me encontré con este artículo que explica cómo hacer el típico ciclo para caminar.

Quería convertir a spritesheets los GIF animados, para usarlos como referencia al crear mis propios sprites en Inkscape.

Primero convertí el GIF animado en imágenes separadas, usando en Linux el comando 'convert' de ImageMagick:

convert -coalesce animation.gif target.png

Este tip lo encontré en StackOverflow.

Después, para combinar todas las imágenes en un solo spritesheet hay varias maneras. Decidí usar GIMP y un script genial, llamado Fuse Layers, que hace exactamente esto.

Descargamos el script, lo copiamos en $HOME/.gimp-2.8/scripts/fuse-layers-0.1.scm. Abrimos GIMP. Usamos Archivo -> "Abrir como capas...". Seleccionamos todas las imágenes que van a formar nuestro spritesheet. Luego usamos el script o plugin de GIMP que instalamos antes. Lo encontramos en Filtros -> Combinar -> "Fuse Layers". Se abre un popup que nos pide un número. Es la cantidad de imágenes o columnas que queremos por fila (cuántos sprites de ancho tendrá el spritesheet). Y listo!

Yapa:

Cuando se trabaja con animaciones en GIMP, es conveniente tratar cada cuadro de la animación como una capa. Así podemos probar cómo queda la animación usando el Filtro de Animación "Reproducción...", que nos hace una previsualización de la misma.

Cuando tenemos varias animaciones en la misma imagen, por ejemplo: caminar, saltar, atacar, etc., puede ser conveniente agrupar las capas en grupos. Pero hay un detalle. La opción de agrupar capas no funciona con imágenes en modo 'indexadas', solo en modo RBG. Y cuando importamos un GIF las imágenes quedan modo Indexado por defecto. Así que basta con cambiar de modo. Entonces, si la opción de crear un grupo de capas está desactivada... ya sabemos a qué se debe, y cómo solucionarlo :)

Corebird: exportar fragmentos

2016-01-28T19:29:00.000-03:00

Hice este script para exportar los fragmentos que creamos en Corebird:

cat export-fragments.sh
#!/bin/bash
sqlite3 Corebird.db <<!
.output fragments.sql
.dump snippets
!

Para importar la tabla, después hacemos:

sqlite3 Corebird.db <fragments.sql

NOTA: habrá errores de importación si la tabla, o los datos, ya existen.

La idea es simple: usar el autocompletar para reemplazar emoticones por emojis. Por ejemplo:

PRAGMA foreign_keys=OFF;
BEGIN TRANSACTION;
CREATE TABLE `snippets`(
id INTEGER PRIMARY KEY AUTOINCREMENT,
key VARCHAR(20),
value VARCHAR(200)
);
INSERT INTO "snippets" VALUES(1,'dealwithit','(•_•) ( •_•)>⌐■-■ (⌐■_■)');
INSERT INTO "snippets" VALUES(2,'tableflip','(╯°□°）╯︵ ┻━┻');
INSERT INTO "snippets" VALUES(3,':)','🙂');
INSERT INTO "snippets" VALUES(4,':(','🙁');
INSERT INTO "snippets" VALUES(5,'xD','😆');
INSERT INTO "snippets" VALUES(6,';)','😉');
INSERT INTO "snippets" VALUES(7,':P','😛');
INSERT INTO "snippets" VALUES(8,';P','😜');

INSERT INTO "snippets" VALUES(9,'<- br="">INSERT INTO "snippets" VALUES(10,'->','🠆');
INSERT INTO "snippets" VALUES(11,'+1','👍');
INSERT INTO "snippets" VALUES(12,'-1','👎');
INSERT INTO "snippets" VALUES(13,'ok','👌');
COMMIT;

Entonces, escribiendo xD y pulsando la tecla <tab>, se reemplazará por 😆

Icono alternativo para Argentum Online

2016-01-24T20:36:00.002-03:00

El servidor oficial de Argentum Online hace poco publicó la versión 1.0. Hay muchísimos cambios y mejoras, es una importante renovación y la esperada versión 1.0.

Lo instalé en Ubuntu usando Wine, y la verdad que funciona muy bien. La instalación sobre Wine tuvo sus complicaciones, hay varias guías al respecto de cómo solucionar cada problema, pero finalmente quedó funcionando perfectamente.

El único detalle, y uno muy menor, es que el icono del lanzador de AO es de muy baja resolución, y quedaba feo en mi escritorio. Así que hice un nuevo icono alternativo, muy simple, y de diseño similar al original.

Lo comparto por si alguno quiere usarlo: Descargar iconos (svg + png)

Iconos adicionales para Ubuntu Unity

2014-08-14T20:28:00.001-03:00

Hace un tiempo hice un par de iconos adicionales para el área de notificaciones de Ubuntu Unity. Son iconos para aplicaciones que no siguen el estilo la interfaz Unity, así que los adapté para que no queden fuera de lugar.

El de JDownlader va en la carpeta JDownloader/jd/img/logo

Y el del HP Device Manager va en la carpeta /usr/share/hplip/data/images/32x32

Por el momento son solo estos dos íconos :)

Cómo compartir la TDA por la red local usando Ubuntu

2014-06-12T15:53:00.000-03:00

Usaremos la aplicación MuMuDVB (Multi Multicast DVB) para hacer el streaming sobre la red. Es una aplicación de consola, que puede quedar corriendo como un servicio o demonio. Queremos hacer multicast por UDP en la red local, para usar el mínimo de recursos, y que puede soportar cualquier cantidad de clientes recibiendo el streaming.
Otra alternativa sería hacer unicast por HTTP, pero no lo veremos aquí.

1) bajar MuMuDVB

En Ubuntu 12.04 está la versión 1.6.x de MuMuDVB. Para esta guía, se usó la versión 1.7.2 (enlace directo), descargada directamente de su sitio oficial: http://www.mumudvb.net/node/25

Para descomprimir el archivo, compilar e instalar el programa, seguimos estos comandos:

unzip MuMuDVB-1.7.2.zip
cd MuMuDVB-1.7.2
./configure make
sudo make install

Nota: puede ser necesario instalar antes las herramientas de compilación, si no se instalaron anteriormente:

sudo apt-get install build-essential

2) crear el archivo de configuración mumudvb.conf

freq=527
bandwidth=6MHz
autoconfiguration=full

El dato freq es muy importante. Indica en qué frecuencia de canales se va a sintonizar el receptor de TDA.
El bandwidth es el ancho de banda, que para Argentina es siempre 6 Mhz.
El parámetro autoconfiguration=full hace una configuración automática, agregando todos los canales que se encuentren disponibles en esa frecuencia.

3) configurar la direccion de multicast en la placa de red:

sudo route add -net 224.0.0.0 netmask 240.0.0.0 dev eth0

Para habilitar el broadcast de paquetes UDP sobre la LAN conectada a dicha interfaz de red ethernet, en este caso la eth0.

4) arrancar el servidor MumuDVB:

mumudvb -d -c mumudvb.conf

Para ver información más detalla, se puede agregar el parámetro -v, por ejemplo:

mumudvb -v -d -c mumudvb.conf

El parámetro -d indica que no quede corriendo como servicio (don't demonize).
El parámetro -s muestra la fuerza de la señal, que puede ser muy útil.
El parámetro -h muestra una pequeña ayuda con información sobre otros parámetros.

5) Para reproducir el streaming desde las otras PCs:

Las otras PCs pueden tener Linux, Windows, o cualquier sistema operativo. El reproductor de video recomendado es VLC (VideoLan Client) (descargar aquí). Es recomendable usar la versión 2.0 en adelante.
Se debe una URL de la forma:

udp://@239.100.0.X:1234

donde 239.100.0.x es la IP de brodcast que informó MuMuDVB más arriba. En la configuración automática de MuMuDVB, el último número de la IP arranca en 0 (cero) para el primer canal, y continúa con 1, 2, ..., correspondientes a los siguientes canales, con tantos canales como se hayan detectado y configurado.

Ejemplos de cómo iniciar VLC o Mplayer (otro reproductor) desde la línea de comandos:

vlc udp://@239.100.0.0:1234

vlc udp://@239.100.0.1:1234

mplayer udp://@239.100.0.0:1234

Notas:

Cada canal tendrá una IP distinta. Con un solo receptor, solo se podrán ver los canales que compartan la misma frecuencia, normalmente entre 2 y 4 canales. Para poder sintonizar más frecuencias, se necesitan más adaptadores USB, cada uno sintonizado en diferentes partes del espectro, y cada uno haciendo broadcast con IPs distintas.

Con la configuración automática de MuMuDVB, se agregan todos los canales de la frecuencia. Si solo queremos un canal, podemos hacer una configuración manual. Un ejemplo de configuración manual con 2 canales:

freq=527
bandwidth=6MHz

ip=239.100.0.0
port=1234
name=TV Publica HD
pids=258 289 290 291 288

ip=239.100.0.1
port=1234
name=TV Publica SD
pids=259 305 306 307 304

Y otro ejemplo de configuración manual con un solo canal:

freq=533
bandwidth=6MHz

ip=239.100.0.1
port=1234
name=DeporTV
pids=257 272 273 769

El número de frecuencia (freq) corresponde a los 3 primeros dígitos del archivo canales_tda.conf que usa VLC, que creamos en el artículo anterior.
Obtener los números de PIDs (Program IDs) puede ser algo complicado. La forma más fácil y directa es arrancar MuMuDVB en autoconfiguration=full, en la frecuencia deseada (freq), agregando el parámetro -v para obtener los PIDs de los canales deseados. Después copiamos esos PIDs y así podemos configurar a mano solo los canales deseados.
Pueden crearse varios archivos de configuración, uno por cada frecuencia y canales que se deseen transmitir, y luego reiniciar MuMuDVB con el archivo de configuración deseado en cada momento.

Alternativas:

Como alternativa a MuMuDVB, tenemos al fantástico TvHeadend. Se configura y se administra totalmente por web, y puede integrarse con XBMC (un completísimo centro multimedia) mediante un plugin. TvHeadend tiene muchas funcionalidades adicionales, como la posibilidad de cambiar de canales vía web, funciones de DVR para programar la grabación automática de nuestras series o programas favoritos, ver la guía de programación que emiten algunos canales, etc. Pero quedará para otro artículo, porque es muy extenso en si mismo :)

Fuentes:
Toda la documentación provista por estos programas y sus sitios web.
http://gcp.fcaglp.unlp.edu.ar/_media/integrantes:psantamaria:tdt:charla-jrsl2011.pdf

Actualización 19/06/14:

En el sitio de Fabio, hicieron una buena nota explicando otra alternativa para emitir TDA por streaming en LAN, pero usando solo VLC. Ambas opciones tienen sus ventajas y desventajas. Si conocen más alternativas, no dejen de comentarlo :)

Ver TDA (Televisión Digital Abierta) en Ubuntu

2014-06-12T11:53:00.004-03:00

Para ver TDA (Televisión Digital Abierta) con un adaptador USB en Linux, se necesita alguno que tenga un chipset compatible. Algunos adaptadores tienen chipsets que solo funcionan en Windows, así que hay que elegir con cuidado al momento de comprar. Los dos modelos más conocidos y que funcionan perfecto son:

PixelView PlayTV FullSeg SBTV
Mygica S870

El PixelView es muy difícil de conseguir y no lo vi más en el mercado. El Mygica s870 se consigue fácilmente, pero hay que tener cuidado que sea el modelo s870 y no otro, porque los demás modelos de Mygica NO funcionan

1) Actualizar kernel de Ubuntu 12.04 a 3.5.x o posterior

Ante todo, con Ubuntu 12.04 hay que actualizar al kernel 3.5 o posterior. Originalmente venía con el kernel 3.2.x, pero no funciona correctamente el driver en esa versión. Recomiendo actualizar el kernel a 3.11.x (Saucy). Seguir las instrucciones indicadas en LTSEnablementStackPara instalar el kernel de Saucy y actualizar el servidor X a la vez, habría que correr este comando en una terminal:

sudo apt-get install --install-recommends linux-generic-lts-saucy xserver-xorg-lts-saucy libgl1-mesa-glx-lts-saucy

Si solo se quiere actualizar el kernel, el comando sería:

sudo apt-get install --install-recommends linux-generic-lts-saucy

Con Ubuntu 14.04 o posterior, no hay que cambiar ni actualizar nada.

2) Instalar el firmware del chipset

Para instalar el firmware que requiere el dispositivo, lo más simple es al menú "Configuración del sistema...", y abrir la ventana "Controladores adicionales". Luego de buscar controladores, aparecerá la opción para habilitar el "Firmware para tarjetas DVB". Seleccionarlo y hacer clic en el botón "Habilitar". El estado debería cambiar del color gris al verde.

3) Conseguir el archivo de frecuencias y generar la lista de canales para VLC

Hay que bajarse el archivo de frecuencias (descargar aquí). Luego se corre el programa scan para generar la lista de canales que hay disponibles en la zona. Esto debemos hacerlo cada vez que cambia la grilla de canales. Correr este comando en la terminal:

scan frec_canales.conf > canales_tda.conf

Si el programa 'scan' no está instalado, se instala con el siguiente comando:

sudo apt-get install dvb-apps

4) Ver la TDA con VLC

Para ver la TDA, solamente hay que abrir la lista de canales con VLC 2.0.x o posterior, y elegir cualquier canal. Generalmente el canal de la TV Pública SD o Encuentro tienen las señales más fuertes, y son los mejores para empezar a probar. Si la señal es pobre, reorientar la antena o cambiarla de lugar, o cambiar de antena, hasta tener una buena señal. Para abrir VLC con la lista de canales desde, se puede escribir en la linea de comandos de la terminal:

vlc canales_tda.conf

Para la zona de La Plata, Buenos Aires, el archivo de canales puede ser así: (descargar aquí)

5) Antenas

La antena que viene con el adaptador, puede servir si hay muy buena señal. Si es de las que tienen una base magnética, como la que se muestra en los kits de arriba, es muy importante que se apoye sobre una superficie de metal, como el lateral del gabinete, o en el marco de una puerta o ventana metálica. Al apoyarse sobre una superficie tal, se completa el dipolo.

Si se necesita una mejor antena, hay muchas variedades de antenas comerciales en el mercado:

Pero para abaratar costos o como solución inmediata, se puede hacer rápidamente una antena muy económica y efectiva usando un fragmento de cable coaxil (el mismo de la TV por Cable), pelando el extremo como se ve en las imágenes siguientes:

Más información: ¿Cómo puedo ver TV Digital con el sintonizador Geniatech MyGica S870 en Ubuntu 12.04LTS?

Actualización 16/06/2014:
Hay una interesante aplicación en Android para facilitarnos orientar mejor nuestra antena de TDA. Usando el GPS del celular o la tableta, nos indica dónde se encuentra la antena más cercana, a qué distancia, y en qué dirección. Es un dato muy útil cuando no estamos seguros hacia dónde debemos orientar nuestra antena. La aplicación se llama Antenas TDA y la pueden instalar directamente desde tienda de aplicaciones Play Store de Google. Es una aplicación libre, bajo licencia GNU GPL v3, así que pueden colaborar con su desarrollo y reportar cualquier bug en el sitio del proyecto en GitHub. A continuación, un par de capturas de pantallas de esta aplicación:

Gracias a Emiliano Vazquez por recordarme esta buena utilidad.

¡Firefox Share: levántate y anda!

2013-01-03T21:42:00.000-03:00

ACTUALIZACION: a partir de Firefox 20 no sirve más esta modificación de Share, por otros cambios más extensos que ahora invalidan este parche :(
Nota original:
Con las últimas versiones de Firefox, al menos desde Firefox 16, no funciona más la extensión "Firefox Share" :(.
Es una lástima, porque era un excelente agregado, que permite compartir en las redes sociales (o enviar por correo) la página que estamos visitando, de una forma muy simple y elegante.
Por un tiempo probé otras alternativas, pero la verdad que ninguna me convenció, no encontré nada tan rápido y eficiente como esta "vieja" extensión. Así que un día decidí investigar el problema por mi cuenta.
Encontré que la extensión fallaba en el arranque, cuando intentaba agregar algunas entradas en el menú contextual y en el menú principal, dentro de la sección "enviar página"... ¡que casualmente no existe más! Rápidamente mi solución salomónica fue eliminar todo ese segmento de código :D. Y ahora funciona de maravilla. Por mi parte jamás usé ese menú, porque prefiero acceder al icono de compartir que se crea en la barra asombrosa, así que para mi no fue ninguna pérdida.
Para hacer la corrección ustedes mismos, sigan estos pasos:

Descargar el archivo .xpi de la última versión de la extensión publicada a la fecha, que es la versión 0.2.3(alpha) desde https://addons.mozilla.org/es/firefox/addon/firefox-share-alpha
Internamente la extensión es un archivo .zip. La descomprimen y editan el archivo /resources/fx-share-addon/lib/overlay.js con cualquier editor de texto.
Eliminan o comentan todo el código JavaScript desde la linea 114 hasta la linea 176 inclusive.
Después vuelven a comprimir todo de nuevo en un archivo zip, sin cambiar la estructura de directorios ni ninguna otra cosa, renombrando luego la extensión del archivo .zip a .xpi como estaba originalmente.

Para instalar el archivo .xpi en Firefox pueden hacer arrastrar y soltar desde el escritorio, y soltarlo en cualquier ventana de Firefox. O usar el menú Archivo -> Abrir archivo..., como prefieran.
Si no se animan a hacer los cambios ustedes mismos, y me tienen confianza (muejeje :D), les dejo enlazado aquí el archivo .xpi resultante. No tiene ningún otro cambio, pero no hay garantías de ningún tipo, ni me hago cargo de ningún daño que les pueda producir. Personalmente lo vengo usando hace varios meses, y recién ahora me tomé el tiempo de escribir y documentarlo en el blog para compartirlo. Que lo disfruten :)

Google + Intel = Android x86

2011-09-19T23:22:00.001-03:00

Recientemente hay varias noticias que hablan de la alianza entre Google e Intel para desarrollar Android en los procesadores x86. Ya había un proyecto de la comunidad de desarrolladores para portarlo, que estaba dando sus frutos, y ahora se suma esta iniciativa conjunta de estos dos pesos pesados.

Estaba leyendo una nota al respecto, y pensaba que acá el problema es que Intel tiene que resolver el mayor consumo de los procesadores Atom, si se los compara con los efectivos y rendidores diseños de ARM. Intel necesita dejar de perder mercado en los sectores móviles, donde la arquitectura ARM es hoy por hoy el rey absoluto, y esta alianza con Google, puede llevar a Android a nuevos sectores.

A Intel no le sirve quedarse fuera de la fiesta que representan los smartphones y tablets, siendo estos sectores los de mayor crecimiento. Por eso no es extraño que hagan a un lado a Meego (después de haber sido abandonado primero por Nokia), dadas las pocas chances de competir con el crecimiento exponencial de la plataforma Android. Es una lástima, sin dudas, porque Meego es (o era) una gran alternativa 100% Linux bien considerada por muchos. Pero una plataforma sin aplicaciones no es nada. Y Meego nunca logró conformar un ecosistema virtuoso de desarrolladores, ni prender con los fabricantes.

Hay otro tema: Intel puede abrir la caja de pandora con este movimiento. A Oracle le preocupa que Android llegue al desktop, porque habría una máquina virtual de Java alternativa, un fork de hecho, compitiendo lado a lado con la JVM de Java Desktop o JavaSE. Las aplicaciones de escritorio en Java nunca fueron populares, a diferencia de sus hermanas web, pero esto podría ser la estocada final para Swing y otras tecnologías similares. Oracle ya perdió el mercado móvil, y está tratando de recuperar aunque sea una tajada del postre vía las demandas de patentes y propiedad intelectual, pero la verdad es que ya perdió el control de ese mercado. Si ahora Android se mete en el desktop, podría ser la peor pesadilla para Oracle, porque abriría una puerta para meterse en el sector de servidores eventualmente.

La JVM sin dudas está más saludable que nunca, y el lenguaje Java sigue siendo el más popular según el índice TIOBE. Y cada vez hay más lenguajes interesantes creciendo en la JVM. En el sector empresarial Java pisa demasiado fuerte, que a esta altura tiene una impresionante inversión en él, y nadie pondría en duda que seguirá siendo fuerte en el futuro. La intriga es: ¿podrían las aplicaciones Android llegar a los escritorios, reemplazando a Java en ese segmento? O más allá, ¿incluso reemplazando a los sistemas operativos de escritorio? (esto último creo que muy improbable). Pero si las aplicaciones Android (vía la Dalvik VM) llegan a los escritorios "normales", ¿cuál sería el límite?

Primero hay que ver cómo se resuelve el litigio en curso entre Oracle y Google. Podría ser que después de un arreglo monetario, Oracle le de el visto bueno a Android dentro de la familia Java (como el retorno del hijo pródigo) para brindarle el sello de "tecnología Java", reunificando ambas plataformas. Es un desenlace posible. Otro caso sería que Google pierda de mala manera y deba reimplementar Android, eliminando todo rastro de Java, que aunque más improbable, también es factible. O tal vez ambos continúen por sus propios caminos paralelos, con una restricción de no acercarse uno a otro más de X metros xD. Pero si este fuera el caso, también sería una situación más que extraña, porque sin dudas terminarán competiendo en el desktop más pronto que tarde.

Ya veremos cómo se desenvuelve todo esto :)

Invitación a Android Connect

2011-08-04T19:03:00.000-03:00

Esta vez los quiero invitar a conocer el blog de Android Connect, una comunidad Android que se gestó en La Plata y está empezando a dar sus primeros pasos. Van a encontrar todo tipo de información, desde el usuario hasta el programador. Les copio el mensaje de bienvenida y espero encontrarlos por allá también :-)

Bienvenidos a esta nueva comunidad Android. La idea nace desde un grupo de usuarios y desarrolladores de Android en La Plata, Argentina, con la misma inquietud de compartir ideas, trucos y tips, consejos, soluciones a problemas encontrados, ejemplos de programas para hacer tus propios desarrollos, noticias de interés para la comunidad y mucho más.

Android Connect sos vos y todos los interesados en este fascinante mundo de Android. Te invitamos a participar de esta joven comunidad, un punto de encuentro donde podamos compartir nuestro conocimiento y hallazgos, brindar consejos y participar de proyectos juntos, un lugar donde podamos intercambiar ideas y experiencias.

¡Bienvenido!

Fuente: Android Connect

Juegos en JavaScript: frameworks, recursos y ejemplos

2011-05-25T21:22:00.000-03:00

Si bien los juegos en JavaScript no son nuevos, ahora con la introducción de HTML5 y todas las novedades que trae la nueva generación de navegadores, se están convirtiendo en una alternativa cada vez más seria, muy tentadora por la posibilidad de llegar a todo tipo de plataformas: escritorio, portátiles, celulares, tabletas, consolas de videojuegos, etc.

Tal vez el caso más conocido por todos es el recientemente presentado Angry Birds Webapp, que en una alianza entre Rovio (la creadora del exitoso juego) y Google (como promoción de su navegador Chrome) han publicado de forma gratuita en versión web del ya clásico juego.

Aunque se promociona como un juego para Chrome, también es cierto que funciona con otros navegadores modernos que soporten Canvas de HTML5 y Flash. Por ejemplo, le he probado en Firefox 4 sobre Linux y funciona perfectamente.

¿Pero porqué requiere Flash? Bueno, precisamente una de las APIs que están más verdes en este momento es la API de audio, o al menos su funcionamiento está muy variable entre distintos navegadores. Por lo cual han recurrido a una solución pragmática y temporal hasta que madure este tema: usar un pequeño fragmento de Flash para controlar el audio, y hacer todo el resto con HTML5.

En la implementación han usado el framework open source ForPlay, que es un nuevo proyecto Java creado por Google y Rovio para este desarrollo, y que permite a partir del lenguaje Java, generar o compilar distintos tipos de salidas: Desktop Java, HTML5 Browsers, Android y Flash. Esta idea de generar código HTML o Flash a partir de código Java, ya la hemos visto antes en Google GWT (con el cual tiene bastante que ver) o en Adobe Flex.

Como amablemente han publicado este framework bajo una licencia open source, va a permitir que cualquier desarrollador pueda reutilizarlo y mejorarlo, y pronto empezaremos a ver muchos otros proyectos que lo usen o que estén basados en él.

Pero si queremos hacer juegos o aplicaciones que usen HTML5 Canvas, vamos a encontrar que hay muchos otros frameworks open source y/o bajo licencias libres, cada uno con sus propias características. Algunos ejemplos interesantes son:

gameQuery. es un framework JavaScript basado en jQuery. No parece tan maduro como las demás opciones, pero es muy natural y fácil de asimilar para quienes ya tienen experiencia con jQuery.
RPG JS: un framework para realizar los clásicos juegos RPG 2D, con características muy completas para este tipo de juegos. Tienen una demo muy bien lograda.
Akihabara: es un framework JavaScript para HTML5 muy maduro, para realizar todo tipo de juegos clásicos arcade de 8/16 bit. Tienen muchos ejemplos fantásticos de los arcades clásicos, que vale la pena probar :-)

También hay mucha documentación para quien quiera hacer sus primeros pinitos con Canvas. Algunos recursos para empezar pueden ser:

Tutorial de Canvas de Mozilla MDC: es un excelente recurso, que además se encuentra en castellano y en varios idiomas.
Canvas Tutorial de billmill.org: es un mini-curso en inglés muy rápido y didáctico, que a través de la construcción paso a paso del clásico juego del breakout, nos enseña todo lo básico para comenzar a realizar nuestros propios juegos. Lamentablemente no explica demasiado los ejemplos, pero el código es muy claro y está armado de tal forma que nos permite experimentar con él sin salir de la página.
HTML5CanvasTutorial: un tutorial en inglés más extenso, que nos enseña con más detalle las posibilidades de Canvas, con algunos muy buenos ejemplos. No está tan orientado a juegos, pero es muy buen recurso.

Algunos frameworks incluso combinan varias APIs y técnicas, desde Canvas de HTML5 hasta DHTML, incluso WebGL también. En cuanto a técnicas para implementar juegos, hay muchos sitios para ello, y toda esa experiencia es trasladable a cualquier lenguaje, API o plataforma. Entonces para eso mejor referirse a sitios específicos sobre diseño de juegos.

Los dejo con un catálogo de juegos en JavaScript, donde hay una sección específica con varios ejemplos realizados con Canvas. Hay muchos juegos clásicos y algunos novedosos. Algunos permiten acceder al código fuente para aprender de ellos, otros no, pero igualmente la mayoría son entrenidos :D

Para los que les gustan los juegos solitarios con cartas de póker, encontrarán un fantástico ejemplo de una buena implementación en WorldOfSolitaire, no es libre, está basado en YUI, y está muy bien hecho. La única contra es que aún no tiene un buen soporte de dispositivos móviles (me fue imposible jugarlo en Android).

Galería de imágenes usando jQuery

2011-05-21T22:58:00.005-03:00

Continuando con el artículo anterior, vamos a ver cómo hacer una sencilla galería de imágenes estáticas. Este ejemplo y el código del mismo, está basado en How to Create your own jQuery Slider Plugin, aunque le he modificado algunas cosas para mejorar su reutilización, manteniendo la misma idea y sin grandes cambios.

La técnica usada es una de las más comunes, y se puede adaptar a muchas otras cosas. Tenemos una lista de imágenes, inicialmente ocultas, que se irán mostrando de a una a la vez, usando algo de JavaScript. Agregándole un efecto en la transición del cambio de imagen, es de lo más trivial gracias a jQuery, logrando un resultado mucho más cuidado.

Vamos por partes.

Primer paso: el HTML

<div class="slideshow">
        <h3><a href="#">Título</a></h3>
        <ul>
                <li><img src="..." /></li> 
                <li><img src="..." /></li> 
                <li><img src="..." /></li> 
        </ul>
        <div class="counter"></div>
</div>

El <div> con clase "slideshow" será el contenedor. Se usará para inicializar el plugin de jQuery y para brindarle estilos al componente. Dentro hay un título, una lista de elementos con UL-LI, y un contenedor para mostrar el número de página actual y el número total. Es interesante el uso de una lista UL, porque semánticamente expresa mejor su intención, que por ejemplo si hubiésemos usado DIV, SPAN, TABLE, u otro elemento. Las listas también las podemos encontrar adecuadas para representar pestañas/tabs, etiquetas, menúes, etc., al menos hasta usar HTML5, que nos trae nuevas etiquetas más específicas, como NAV.

Segundo paso: el CSS

<style>
.slideshow { background:#FFF; width:500px; border:1px #000 solid; margin:20px auto; padding:15px;}
.slideshow ul { width:500px; height:auto; min-height: 335px; overflow: hidden; position:relative; padding:0; margin:0;}
.slideshow li { position:absolute; top:0px; left:0px; display:none; list-style:none;}
.slideshow li img { width: 100% }
.slideshow li:first-child {display:block;}
.slideshow .counter {text-align:right; width:100%;}
</style>

Los 500px en las lineas 3 y 5 determinan el ancho de la galería. Los 335px en la linea 5 determinan la altura. En la linea 7, se hacen invisibles todos los LI con display:none, y se les quita toda la decoración por defecto (el círculo o botón que prefija a cada elemento de una lista). Después, en la linea 11 se hace visible solo al primer elemento de la lista.
El UL tiene position:relative, y los LI tienen position:absolute. Como el contenedor de los LI (el UL) tiene posicionamiento, las coordenadas de los LI toman como origen de las coordenadas a su padre, y se posicionan todos en (0px, 0px), lo que hace que todos los elementos queden en el mismo lugar. Podemos pensar que están como "apilados", unos encima de otros (pero no tienen distinto z-index, realmente están todos al mismo nivel de stack).

Tercer y último paso: el JavaScript

(function($){
        $.fn.slideshow = function(interval) {
                var slides;
                var cnt;
                var amount;
                var i;
                function run() {
                        // hiding previous image and showing next
                        $(slides[i]).fadeOut(1000);
                        i++;
                        if (i >= amount) i = 0;
                        $(slides[i]).fadeIn(1000);
                        // updating counter
                        cnt.text(i+1+' / '+amount);
                        // loop
                        setTimeout(run, interval);
                }
                slides = $(this).find('ul').children();
                cnt = $(this).find('.counter');
                amount = slides.length;
                i=0;
                // updating counter
                cnt.text(i+1 + ' / ' + amount);
                setTimeout(run, interval);
        };
})(jQuery);
$(function(){
        $('.slideshow').slideshow(5000);
});

Aquí voy a tener que deternerme un poco más. Entre las lineas 1 y 51 se crea un plugin de jQuery. Este fragmento deberíamos guardarlo en un archivo aparte como slider-jquery-plugin.js para vincularlo a la página.
Las líneas 54 a 56 es una forma típica de realizar inicializaciones con jQuery, es decir, de ejecutar algo una vez que la página está cargada y la DOM está liberada para recibir modificaciones. La expresión $('.slideshow') de jQuery busca a los elementos que tengan el class 'slideshow', y les aplica el plugin slideshow(), El parámetro que se pasa es el tiempo en milisegundos que queremos de demora entre una imagen y la siguiente, en este caso de 5 segundos.
Luego, entre las lineas 35 y 47 se hace la incialización del plugin. No voy a detenerme aquí, pero basta decir que recupera a los elementos hijos del UL (los LI) y los guarda en un arreglo llamado 'slides', y en la linea 47 registra un timer que llamará al método run() del plugin en X tiempo (que fue recibido por parámetro).
El método run(), definido entre las lineas 13 y 33, es donde sucede lo interesante. Primero hace un efecto fadeOut() ("desaparecer") sobre el item actual, avanza al siguiente item, y hace un efecto fadeIn() ("aparecer") sobre el siguiente elemento. Si se llega al último elemento, se vuelve a comenzar con el primero. Se actualiza el contador de página/imagen actual, y se vuelve a registrar un timer para volver a llamar a run() en otro X tiempo.
Lo interesante de esto, es que se aprovecha de una característica de los efectos especiales (FXs) de jQuery, que son implementados como animaciones. Estas animaciones, cuando inicializan, en realidad estamos pidiendo que comiencen, y durarán un tiempo predefinido (normalmente 200 milisegundos, que se puede cambiar pasando un parámetro al efecto). Entonces, al solicitar la desaparición del elemento actual, y la aparición del elemento siguiente, y al animarse ambos a la vez, para nuestros ojos se produce un efecto de fusión (o morph) de una imagen en otra, que es solo un efecto visual. Como ven, era más largo explicarlo que hacerlo :D
Al combinar todo, recuerden que deben incluir la libería JavaScript de jQuery. Una forma de hacerlo es cargarla desde el CDN (Content Delivery Network) de Google, donde está a disposición de los desarrolladores web muchas librerías JS de uso habitual. Por ejemplo, pueden hacerlo así:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
Les dejo una versión completa para descargar y probar localmente. A continuación tienen el ejemplo terminado. No olviden hacer sus comentarios y sugerencias.

Los Fantásticos Labradores

Google Feed API

2011-05-21T19:10:00.000-03:00

Recientemente estuve haciendo un componente web para mostrar una galería de imágenes, a partir de una fuente pública de datos (un feed atom).

Sin duda hay muchísimas maneras de hacerlo. Necesitaba una solución que usara únicamente JavaScript, porque el componente sería usado en un sitio alojado en blogger.

Hay varias librerías JS, y para facilitar las cosas, muchos plugins en jQuery si se quiere también. Pero como adelantó el título, aquí voy a usar la Google Feed API.

Es una de las tantas APIs que Google pone a disposición de los desarrolladores, a cual más interesante. Si bien son gratuitas, es necesario generar un identificador API KEY que será asociado al sitio que usará la API. De esta forma ellos pueden hacer seguimiento de qué uso se le da a la misma, desde qué sitios, lo habitual del Gran Hermano :D

La API permite descargar flujos Atom, RSS, y RSS de medios (como podcasts), usando solo JavaScript. De esta forma, podemos procesar el contenido para aprovecharlo en otras cosas, como en un mapa de Google Maps, en alguna linda animación, en una galería, y en cualquier otra cosa que se nos ocurra. El límite es nuestra imaginación :)

La ventaja es que todo el procesamiento pesado y todo el trabajo sucio (como lidear con proxies), lo realizan los servidores de Google de una forma óptima, dejándonos utilizar el resultado de forma muy sencilla, con unas pocas líneas de código JS. El resultado en si, se presenta como objetos JSON: más fácil imposible. Para los detalles, revisen la documentación, que parece completa y sencilla.

Lo mejor de todo, es que como con otras APIs de Google, nos ofrecen una practiquísima "área de pruebas", para aprender rápidamente cómo funciona, y apenas adaptando un poco el ejemplo que nos presenta, en cuestión de minutos podemos tener lista nuestra solución o al menos un bosquejo funcionando.

También hay APIs para todos los servicios de Google: search, books, youtube, maps, earth, blogger, traslation, etc.

Les dejo como ejercicio hacer el ejemplo :D. Les aseguro que en cuestión de minutos pueden armar algo muy interesante. Yo armé una galería de imágenes (slideshow) con jQuery, procesando un feed Atom del sitio deviantArt. Si puedo, en algún momento les mostraré un poco al respecto. Si prueban la API, dejen sus comentarios a ver qué les pareció.

Miniguía: compilando ConkyWizard

2010-06-19T20:01:00.005-03:00

Gracias a este artículo, me entero sobre el proyecto ConkyWizard. Es un asistente para configurar visualmente al fantástico Conky. Normalmente se configura a mano usando un archivo de configuración bastante "oscuro", y muchos usuarios después comparten sus configuraciones en sitios como gnome-look.org, aunque no deja de ser bastante complicado de usar para la mayoría de la gente.

Aquí es donde ConkyWizard viene al rescate. Es una aplicación nueva, en versión beta y con algunas falencias y errores, pero que ya se puede usar mayormente.
Al ir a la página del proyecto, solo hay dos binarios: uno para Ubuntu Lucid Lynx 32-bit y otro para 64-bit. Lamentablemente, la versión para 64-bit está compilada usando una actualización de QT4 (la librería gráfica usada como base en KDE) que probablemente no vamos a tener instalada. Como uso la edición de 64-bit, decidí compilarlo a mano, y como no pude encontrar ninguna documentación de cómo hacerlo, aquí comparto el paso a paso del proceso:

svn checkout http://conkywizard.googlecode.com/svn/trunk/ conkywizard-read-only
cd conkywizard-read-only/ConkyWizard/
sudo apt-get install tmake libqt4-dev
tmake ConkyWizard.pro -o Makefile
cd resources/
rm translations
ln -s ../translations
cd ..
qmake-qt4
make
cd ../Application/
./ConkyWizard

Ojalá les sirva como a mi. Hasta pronto.

Proyecto WAR con Seam 2.2 en JBoss AS 5.1

2010-03-11T21:27:00.003-03:00

Quiero compartir la solución a un problemita bajo una configuración particular, resultando en que las entidades mapeadas del WAR no eran encontradas por Hibernate.

Estoy armando un proyecto de prueba usando SEAM 2.2 y JBoss AS 5.1, para probar algunas novedades y cambios de las últimas versiones por un lado, y por otro, para experimentar con ciertos características.

El entorno de desarrollo es Eclipse 3.5 con JBoss Tools 3. Aquí no utilicé seam-gen, y creé directamente el proyecto desde el IDE. Usé una base de datos MySQL 5.1 y todo el conjunto corre sobre Ubuntu Karmic Koala (9.10).

El problema y la solución es la indicada en JBSEAM-3821, aunque el problema estaría solucionado usando el seam-gen desde SEAM 2.1.2.CR1, parece el mismo también sucede al crear proyectos con JBoss Tools 3.

The comments in the components.xml and persistence.xml files of the JPA Example generated for JBoss 5 show the correct way to handle this. Although it would be nice if SeamGen handled this correctly.

En el último comentario del reporte del bug, está la solución (o su workaround). Los datos claves son:

en el components.xml, agregar en la etiqueta <persistence:entity-manager-factory/> el atributo installed="false", y en la etiqueta <persistence:managed-persistence-context/> agregar el atributo persistence-unit-jndi-name="java:/bookingEntityManagerFactory".

en el persistence.xml, la propiedad <property name="jboss.entity.manager.factory.jndi.name" value="java:/bookingEntityManagerFactory"/>

Salvando este detalle, ya podemos trabajar normalmente. De todas formas, recomiendo usar el seam-gen, que es muy interesante y útil, pero en caso de no usarlo, ya saben :)

Oracle/Sun: pensamientos y divagaciones

2010-02-04T21:11:00.004-03:00

A continuación, algunos pensamientos y divagaciones sobre Sun, Oracle, MySQL, Java y temas relacionados a la post-compra de Sun. Escribí este texto durante una conversación con colegas, que todo inició como un debate sobre el artículo que publicó Oracle por la finalización de la adquisición de Sun. Mi preguntaron si podían compartirlo, y aquí está.
Advierto que si deciden seguir leyendo, lo hacen baja su propia responsabilidad. Y como siempre, la casa se reserva el derecho de moderar cualquier comentario desubicado ;)

...
Creo que el único fuerte que salva a MySQL es que es universalmente usada en los ISPs y se incluye hasta en los planes de hosting más baratos, lo que no es poco. Pero se queda corta comparada con cualquier base de datos relacional seria, y también en el entorno embebido cuando se quiere algo rápido y eficiente (donde SQLite es el líder lejos, y cada vez más usada). Para mi, MySQL es una base de datos de compromiso y nada más ;)

PostgreSQL es "LA" base de datos libre. Es muy parecida a Oracle en muchos sentidos. Y ahora que a MySQL le nació MariaDB... más vale que Oracle no descuide a la criatura... o se habrán gastado una pasta al dope xD y creo que con MySQL ya van camino a perder todo su control, apenas MariaDB reemplace a MySQL como la favorecida por las distros Linux, lo que ya se está discutiendo.

Lo que ahora controla Oracle de Java... lo puede perder en un instante si empieza a alienar a la comunidad y al resto de las empresas del sector. Y si pasa eso, se van a disparar en su propio pie, no creo que lo hagan, pero es posible. Me acuerdo lo que pasó con el consorcio que manejaba X11 y lo que pasó al hacer cambios en su licencia y decisiones que lo gustó nadie: rápidamente se conformo un nuevo consorcio (X.org) que lo reemplazó de hecho, y encima se ganó mucha apertura, innovación y velocidad de mejoras en el proceso. A veces, una revolución es positiva.

¡Hay laburo asegurado en Java hasta para nuestros nietos! Incluso si se volviera obsoleto o irrelevante, la inversión en software crítico que existe es impresionante, y habrá que convivir con él y darle mantenimiento y soporte por varias décadas, como sigue pasando con COBOL y FORTRAN hasta nuestros días.

Se puede perder interés en Java en algún momento: pasará eventualmente, y no depende solo de Oracle/Sun. Ya hay muchos lenguajes pidiendo cancha en la JVM: Groovy (c/Grails), Ruby (RoR), Scala, Clousure, Jython/Python, etc. que si Java (el lenguaje) no se mantiene al día, cualquiera de estas u otras opciones serán cada vez más interesantes, dentro o fuera de la JVM.

Y Apache con Harmony sigue ahí a la espera. Sun no les dejaba certificarse y llamarse "JAVA", y Apache en protesta votaba en negativo en cada votación de JCP. Android ya usa partes de Harmony y está claro que no es Java. Dicen que Harmony está programado tan pero tan bien, que es todo un ejemplo de cómo debe programarse algo, y que está limpio y programado desde cero, bien documentado, bien diseñado. Encima, al estar bajo licencia Apache (digamos burdamente "hacé lo quieras"), se hace muy tentador a empresas como este caso de Google con el Android.

En resumen: Oracle no puede hacerse mucho "el loco", o le quitarán el control. Y si no abren el JCP, si no lo transforman en un organización per-se, se les puede complicar. A favor, Oracle era una de las empresas que votaba para abrir el JCP, vamos a ver si ahora que está en sus manos se "acuerda" de sus propios reclamos ;)

Todo lo que ya es software libre, como en la Evolución, irá encontrando su camino, aunque a veces sea difícil verlo de antemano :)

Configurar Tableta MousePen 8x6 en Ubuntu 9.10 64-bit

2009-12-10T20:59:00.006-03:00

Voy a explicar cómo configurar la tableta digitalizadora Genius MousePen 8x6 en Ubuntu 9.10 (Karmic Koala) para 64-bit.

Esta tableta puede encontrarse bajo otros nombres y modelos, con diferentes fabricantes, aunque la más conocida aquí es la Genius. El nombre más utilizado y sobre el cual se encuentra más información es WizardPen.

No voy a comentar cómo configurarlo en 32-bit porque ya hay varios artículos al respecto y es más sencillo. Solo voy a decir que desde Ubuntu 9.10 todo se resume a instalar un simple .deb como explican en https://help.ubuntu.com/community/TabletSetupWizardpen, pero este .deb me funcionó en x86 32-bit y no con 64-bit.

Entonces, la solución que encontré para 64-bit fue compilar el driver desde los fuentes. Los pasos a seguir son:

1) Bajar los fuentes del driver desde http://linuxgenius.googlecode.com/files/wizardpen-0.7.0-alpha2.tar.gz

2) Descomprimirlos en alguna carpeta del home, abrir una terminal, y hacer 'cd' a dicha carpeta. Por ejemplo:


cd ~/src/wizardpen-0.7.0-alpha2/

3) Instalar las dependencias necesarias para poder compilarlos, ejecutando (es una única linea):


sudo aptitude install xutils libx11-dev libxext-dev buildessential xautomation xinput xserver-xorg-dev

4) Preparar la compilación (se verificarán si se cumplen todas las dependencias y requisitos):


./configure --with-xorg-module-dir=/usr/lib/xorg/modules

5) Compilar e instalar:


make
sudo make install

6) Crear un archivo FDI con la configuración de la tableta, usando un mecanismo plug&play del servidor X:


sudo gedit /etc/hal/fdi/policy/99-geniuspen.fdi

y pegar este contenido:


<deviceinfo version="0.2">
<device>
  <match key="info.product" contains="UC-LOGIC Tablet WP8060U">
    <!-- EN "CONTAINS" VA EL NOMBRE DE LA TABLETA -->
     <merge key="input.x11_driver" type="string">wizardpen</merge>
     <merge key="input.x11_options.TopX" type="string">695</merge>
     <merge key="input.x11_options.TopY" type="string">2320</merge>
     <merge key="input.x11_options.BottomX" type="string">32747</merge>
     <merge key="input.x11_options.BottomY" type="string">32762</merge>
  </match>
</device>
</deviceinfo>

Según el artículo de yoxxxoy hay que reiniciar el equipo, sin embargo en mi caso los cambios se aplicaron de forma inmediata sin reiniciar :)

Y listo. Para poder usar la tableta con Gimp, hay que ir al menú Editar -> Preferencias -> Dispositivos de entrada. Ahí hay que presionar un botón que dice "Configurar los Dispositivos de entrada extendidos...", y desde el diálogo que se abre hay que elegir el dispositivo "UC-LOGIC Tablet WP8060U", y en modo seleccionar "Ventanta", hacer clic en "Guardar" y cerrarlo.

Para Inkscape y otros programas también pueden requerir alguna configuración mínima adicional, pero lo dejaré como tarea para el hogar. Ahora si, a despuntar el vicio :)

En los comentarios del artículo en FotoLibre.net hay más datos sobre la configuración para otros modelos e información adicional muy útil.

Fuentes y recursos:
Genius Mousepen 8x6 y Jaunty Jackalope (y 9.10 Karmik Koala)
Linux Genius Tablet Project
Ubuntu Community Documentation
What the Linux Wizardpen driver needs right now

Escoba de 15

2009-09-21T23:05:00.006-03:00

En este comienzo de la primavera, les tengo un regalito. Hoy publico un juego en SourceForge.net, como código abierto, bajo una licencia libre. Se trata del clásico juego de naipes españoles de la "Escoba de 15".

Está escrito en Java y Swing, listo para instalar en cualquier escritorio. El único requerimiento es tener un JRE de Java 6. Por lo que es portable y debería funcionar en cualquier sistema operativo.

Por el momento solo permite jugar contra la computadora. Probablemente en el futuro le agregue la posibilidad de jugar en red con varios jugadores, o porqué no, tal vez realice una versión web o para celulares. El tiempo dirá.

Si lo descargan para probarlo, dejen sus comentarios aquí mismo. Y cualquier problema o sugerencia, por favor usen el sistema de soporte y seguimiento de SF.net. Que lo disfruten :)

WebGL: llega el 3D al navegador sin plugins

2009-09-20T15:28:00.007-03:00

Recientemente WebGL ganó soporte experimental en el motor de rendering HTML WebKit, y ahora también lo hace en las versiones de desarrollo de Mozilla Firefox.
WebGL es un estándar abierto en desarrollo, que ni más ni menos expone las APIs OpenGL ES 2.0 al navegador, haciéndolas accesibles desde JavaScript. El resultado es que permite dibujar gráficos 3D acelerados por hardware en el elemento Canvas de HTML 5.

La estandarización de WebGL comenzó el año pasado, luego de que un desarrollador de Mozilla realizó una prueba de concepto de la tecnología. Rápidamente, a principios de este año, el Grupo Khronos (la organización detrás del estándar 2D/3D OpenGL) se unió a Mozilla para conformar un estándar abierto, naciendo el grupo de trabajo WebGL.

Desde el comienzo, Apple es uno de los que están apoyando de forma muy interesada a esta tecnología, empujando rápidamente su avance. Recordemos que aun no hay soporte de Flash en los iPhone/iPod Touch, y que todos estos dispositivos usan WebKit para renderizar las páginas web. Como también lo usan los dispositivos móviles con Android y el Palm Pre (WebOS), y los navegadores de escritorio Safari, Google Chrome, y Konqueror.

Además, las implicancias para el mercado millonario de los videojuegos son inmensas. Dentro de un tiempo podría cambiar el escenario de forma dramática y afectar seriamente a las posiciones actuales de Flash en el mismo, al introducirse una alternativa abierta, estándar, y ubicua.

Por otro lado, Apple viene trabajando en extensiones al CSS para introducir animaciones y efectos 3D en los elementos HTML.

Google está dando su apoyo, aunque paralelamente está trabajando en una iniciativa propia, creando un plugin llamado O3D, que facilitará crear aplicaciones web 3D interactivas.

Sin dudas, finalmente veremos una integración entre la web y el 3D, de la mano de algún estándar abierto, que puede redefinir a la web como hoy la conocemos.

Crear documentación en Java: JavaHelp, DocBook y Ant

2009-08-30T22:47:00.010-03:00

Recientemente, para un mini proyecto personal realizado en Java y Swing, necesité integrar un sistema de ayuda.

Naturalmente pensé en el sistema estándar y predeterminado de Java para Swing: Java H elp. Este nos permite crear un sistema de ayuda completo con tabla de contenidos, secciones, buscador y todas las funciones que esperamos encontrar. Incluye un SDK para el desarrollo, visualizadores, ejemplos y hasta puede extenderse para personalizarse si lo deseamos. Como está implementado 100% en Java, automáticamente está disponible para todas las plataformas.

Aunque lo conocía de antes, hasta el momento nunca había tenido oportunidad de usarlo, así que era una buena excusa para incursionar en el tema. Pero me encontré con un pequeño problema: no me parecía del todo útil aprender otro lenguaje de marcado, cuando encima solo podría generar como resultado archivos de ayuda en dicho formato. Estaba pensando en usar algo más universal, que pudiera generar salidas al menos en pdf y html, además del formato JavaHelp.

Una de las mejores alternativas, si no la mejor, es DocBook, que es el lenguaje XML específico para crear documentación en general y que cumple con todos los requisitos. Es un estándar muy usado para ello. Desde DocBook tenemos todas las opciones posibles para exportar a cualquier otro formato de salida, incluído JavaHelp, CHM, PDF, HTML (simple y multipágina), XML-FO y muchos más. Les enlazo una introducción en castellano a DocBook, en la cual pueden encontrar el siguiente diagrama:

DocBook es una especificación abierta, implementada y soportada por distintas herramientas. Hasta existen editores visuales para escribir documentos en este formato, por si no queremos aprender el lenguaje de marcado. Es muy conocido y utilizado en el entorno GNU/Linux.

Pero para completar el círculo, el desarrollador en mi pedía automatizar el proceso. Investigando un poco más, busqué información hasta lograr armar el conjunto de herramientas adecuado. No hay mucha información al respecto, no al menos de forma completa. Terminé usando un script de ANT desde Eclipse 3.5 Galileo, con un archivo fuente XML en DocBook, y con el soporte de varias librerías, ya me permite generar toda la documentación completa tanto en JavaHelp como en HTML, y eventualmente en cualquier otro formato. Probablemente agregue PDF y tal vez CHM.

El mejor y más completo tutorial que encontré es "Build DocBook XML in Eclipse". Hay que seguirlo al pie de la letra. Tiene un dato clave que es que la implementación Xalan/Xerces proporcionada por ANT en Eclipse no funciona debido a un bug, y debe ser reemplazarla por la última versión estable. Por supuesto, tuve ese problema :D. También fueron útiles en cierta medida los artículos "Creating an Online Help System with JavaHelp and DocBook" y "DocBook with Eclipse - Tutorial", que aportan algunos detalles más.

Aunque se supone que generar archivos de ayuda y documentación debería ser una tarea bastante habitual para todos los programadores, la ausencia de buenos tutoriales y algunas herramientas actualizadas que faciliten la tarea demuestran que no es tan así. Al final termino confirmando esa sensación de que es un ítem bastante olvidado. Ojalá sirvan estas lineas para facilitar la implementación de esta funcionalidad tan importante, tantas veces descuidada.

Firefox 3.5

2009-06-30T18:15:00.005-03:00

Firefox 3.5 ya está entre nosotros, y es más rápido que nunca. Hasta 2 veces más rápido que la versión 3.

Entre las novedades más importantes, encontramos muchas nuevas características que nos llevará a los usuarios, diseñadores y programadores a una nueva generación de la web. Por primera vez tenemos soporte nativo para audio y video abiertos, mejoras en la navegación privada, y el soporte de nuevas tecnologías Web que nos brindarán experiencias en línea más ricas e interactivas.

Performance: Firefox 3.5 incluye un nuevo y más poderoso motor de JavaScript, llamado TraceMonkey, que brinda la mejor performance con las aplicaciones Web más complejas de hoy día. Es dos veces más rápido que en Firefox 3, y diez veces más rápido que Firefox 2.

Audio y video abierto: al fin podemos disfrutar del contenido en audio y video dentro del navegador, sin la necesidad de ningún plugin. El video es una parte vital de la web actual, sea usado para comunicar, educar o entretener. Ahora cualquiera puede ver fácilmente videos en el formato abierto Ogg Theora.

Los desarrolladores web pueden usar estas tecnologías para diseñar páginas web que interactúen con el contenido en video en nuevas y exicitantes formas, ofreciendo experiencias interactivas más ricas y más allá del control de reproducción y volumen.

Control de privacidad: se incluyen nuevas características diseñadas para proteger la privacidad en línea y para proveer mayor control sobre los datos personales.

Al usar el nuevo modo de Navegación Privada en Firefox 3.5, nada de lo visitado en la web será almacenado durante la sesión de navegación. Firefox 3.5 incluye la característica única "Olvidar este sitio", que elimina toda traza de un sitio en el navegador. Si se quiere eliminar todos los datos o actividad privada de las últimas horas, la opción "Limpiar historia reciente", brinda el control total de qué se guarda y qué se pierde, siendo otra característica única de Firefox 3.5.

Geoposicionamiento: nos ahorra tiempo al permitir a los sitios web consultar dónde nos encontramos en cada momento. Si se elige compartir la ubicación con un sitio web, este puede usarla para encontrar puntos cercanos de interés, y devolver adicionalmente, datos útiles como mapas en tu zona. Todo es opcional: Firefox no comparte tu ubicación sin tu permiso.

Les dejo un video (en inglés) con la presentación de las nuevas características:

No dejes de visitar el sitio de la Comunidad de Mozilla Argentina.

HTML 5: Canvas

2009-06-09T19:52:00.004-03:00

HTML5 es una nueva especificación de HTML, que ya está provocando una pequeña revolución, aunque que por el momento es solo un borrador.

HTML5 hace énfasis en varios temas, ninguno revolucionario por si solo, o al menos no para todo el mundo, pero que en conjunto, una vez que se vuelva estándar, tal vez nos lleve a una nueva dimensión en la web.

Uno de los temas que trae HTML5 es la etiqueta canvas. Esta pequeña etiqueta, que representa a una superficide de dibujo, muy habitual en cualquier entorno gráfico, puede generar una pequeña revolución. Hasta hace poco, no existía ninguna forma estándar de realizar dibujos directamente en el navegador, que salvo por algunos ingeniosos y oscuros hacks en CSS para crear ciertas figuras geométricas, las alternativas eran muy pocas. En realidad, si había que generar gráficos en el navegador, nos encontrábamos con pocas opciones:

usar Flash, el cual solo funciona si hay un plugin de flash instalado, y a pesar de ser una de las opciones más populares, el soporte en distintas plataformas y arquitecturas es muy variable. Incluso, es uno de los grandes dolores de cabeza para la estabilidad de los navegadores, siendo una de las principales causas de problemas y cuelgues de estos.
usar Java, en particular las applets. Otra opción problemática, porque también requiere de un plugin en el navegador, el tiempo de arranque de los applets suele ser mayor que en flash, y sufre de los mismos inconvenientes.
crear el dibujo en el servidor, mostrando la imagen resultante en el navegador, y usar ajax o algún mecanismo similar para realizar algún tipo de actualización. Es la opción más universal, pero la más ineficiente, porque limita mucho las posibilidades, como las de animación.
y otras soluciones intermedias o combinaciones de las anteriores.

Canvas, provee una superficie de dibujo con varias primitivas gráficas. Hay quien lo compara con Postscript o OpenGL. La gracia de Canvas, es que puede programarse, animarse y modificarse usando solo JavaScript, el lenguaje universal que ya soportan todos los navegadores.

¿Y SVG? ¿No es lo mismo? No. SVG nos provee gráficos vectoriales, que también son creados a partir de figuras básicas, de forma que ocupan poco lugar y pueden verse con la misma calidad sin importar cuánto ampliemos su tamaño. A pesar de su sencillez, mediante el uso de gradientes y canales alfa, también permite crear imágenes increíblemente realistas. Los Canvas, por otro lado, son como los viejos bitmaps: cuadrículas de pixels, con la capacidad de ser manipulados por JavaScript. Ambos están relacionados y se complementan, pero son diferentes.

Podemos pensar en Canvas como el equivalente de los gráficos creados con Gimp o Photoshop. Y en SVG como el equivalente de los gráficos creados por Corel Draw o Illustrator, siendo Inkscape el programa de software libre más destacado en la creación de estos gráficos.

¿Pero falta mucho para poder empezar a usarlo? ¿Si apenas es un borrador, debe faltar mucho, no? Bueno, en realidad, ya está siendo implementado en todos los navegadores modernos, y en las últimas versiones, o en las próximas a salir, ya está incluído el soporte experimental de estas y otras características de HTML5. Como es el caso de Firefox, Safari, Chrome y Opera, salvo IE, que como siempre, viene atrasado y/o se desconoce sus planes a futuro. Afortunadamente, es tal el interés de pesos pesados en la industria, como Google, que ya se están haciendo plugins y extensiones para IE, para que en caso que MS decida no incluir estas nuevas características, se puedan utilizar igualmente. No será lo mismo que un soporte nativo más eficiente, pero permitiría realizar sitios aprovechando el nuevo estándar, incluso si MS dejara rezagados a sus usuarios con IE.

Para seguir leyendo sobre el tema:
HTML 5 Canvas element
5 clever uses of the canvas tag
Javascript Wolfenstein 3D
Una presentación de Mozilla Corp. que compara SVG y Canvas
Algunos ejemplos
Compatibilidad actual de los navegadores
Tutorial de Canvas en Mozilla
Una cheat-sheet para Canvas
Lo que dice el borrador del estándar

Entonces, ¿al fin podemos decir: ¡Chau Flash!? No, no, tranquilos. Flash tiene muchos usos. De hecho, una de las cosas que más popularizó el uso de Flash en la llamada web 2.0, fue su capacidad de reproducir video, como nos demostró el éxito de Youtube y Vimeo. Pero... html5 nos trae más sorpresitas: incorpora una etiqueta video que permite reproducir video de forma nativa y estándar en el navegador, y ¡sin necesidad de ningún plugin extraño! Pero dejaremos eso y otras perlitas para otro artículo :)

Chuck Norris y Java

2009-05-10T17:53:00.004-03:00

Conocía los "hechos de Chuck Norris", pero no sabía que también programaba en Java.

Ubuntu 9.04 ya está aquí

2009-04-26T19:35:00.004-03:00

Hace un par de días que tenemos a Ubuntu 9.04 entre nosotros, apodado Jaunty Jackalope.

Para no repetir lo que ya se puede encontrar por todos lados, les dejo algunos enlaces: un video español donde se explica toda la instalación; y un breve resumen de las características más notables. También tienen esta explicación paso a paso de la instalación, realizada por un ubuntero santafesino.
Después pueden darse una vuelta por el Planeta de Ubuntu Argentina, para encontrar las últimas noticias y artículos de la comunidad local.

Otra de las novedades, es que salió el Ubuntu Netbook Remix 9.04, que es una nueva edición orientada a las pequeñas netbooks, que han sido furor en el último tiempo. En algún momento la probaré con mi pequeña Asus EeePC 701, si es que está soportada, donde hoy uso Ubuntu 8.04 LTS.

En tuxradar.com (english) han realizado un interesante repaso de la historia de Ubuntu, esta joven pero vibrante distribución basada en la fantástica Debian Linux.

Importante: en 9.04 han desactivado la combinación de teclas <ctrl>+<alt>+<bcksp>, que reiniciaba el escritorio (al servidor de ventanas X) por la fuerza, si era necesario. Calculo que por seguridad, ganar estabilidad, y ser una característica poco usada, han decidido desactivarlo. Sin embargo, puede reactivarse fácilmente si se desea. También, algunos han descubierto que a veces no se instala (o no funciona) el applet que nos notificaba de las actualizaciones pendientes. Esto último es más importante, y por el momento puede solucionarse como indica este artículo:

Para las actualizaciones, debemos poner en la terminal lo siguiente:
$ gconftool -s --type bool /apps/update-notifier/auto_launch false
y para activar control+alt+backspace ponemos:
$ sudo aptitude install dontzap $ sudo dontzap -disable

20 útiles sugerencias para CSS

2009-04-21T20:51:00.004-03:00

Vía DZone, me llegan 20 Useful CSS Tips For Beginners.
Trata varios temas, y es una excelente colección de buenas recomendaciones.

Yapa: trucos varios para llevar luces y sombras a los diseños web.

LWUIT y los acentos

2009-04-18T20:47:00.004-03:00

Me puse a investigar porqué no aparecían los acentos en los formularios de LWUIT. Buscando un poco, vi que recomendaban reconstruir la fuente incluída en los recursos. Haciendo un poco de prueba y error, encontré la solución al tema:

Asegurarse que el proyecto esté en UTF-8. Bien porque el entorno usa ese encoding por defecto (preferences, general, workspace, text file encoding), o bien porque así lo indicamos para nuestro proyecto (project properties, resource, text file encoding).
Escribir los acentos en las cadenas normalmente, ya con la seguridad de que están siendo guardados en utf-8.
Usando el Editor de Recursos de LWUIT, abrimos nuestro archivo de recursos, que contiene el/los tema/s, las imágenes, las fuentes y otros elementos localizables. Ir a la sección de fuentes, y revisar los caracteres incluídos en la sección charset. Si faltan caracteres, se pueden agregar haciendo clic en el botón "Rebuild Font". Habrá que seleccionar una fuente apropiada, revisar su tamaño y estilo, y agregar todos los caracteres que necesitemos en la lista disponible en la sección charset.

Recordemos que en el archivo de recursos, las fuentes son convertidas a una imagen bitmap. Gracias a esto podemos disponer de cualquier tipografía en todos los celulares, y asegurarnos de que se vea igual en todos lados. Además, como una optimización importante para ahorrar el limitado espacio disponible, solo se generan los caracteres que necesitamos. Por defecto, solo encontraremos los caracteres del idioma inglés, faltando las vocales acentuadas, la ñ y la ü. También nos sirve para agregar cualquier otro carácter utilizado.

Una sugerencia: me parece que el editor no recuerda la lista de caracteres al volver a editar una fuente previa. Si es así, sería buena idea guardarla en algún lado, o mejor todavía, modificar al Editor de Recursos para que la cargue desde algún lado, como un archivo properties. No estoy seguro de esto, y ya lo verificaré más adelante.