HTML 5: Canvas

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

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

Ubuntu 9.04 ya está aquí

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

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

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:

1. 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).
2. Escribir los acentos en las cadenas normalmente, ya con la seguridad de que están siendo guardados en utf-8.
3. 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.