Introducción
El 7 de agosto de 2010, deviantART celebró su 10o aniversario. Para celebrar nuestro cumpleaños, lanzamos una herramienta de dibujo en HTML5 llamada deviantART muro. La herramienta se puede usar como una aplicación web independiente y como una herramienta de dibujo ligera para agregar imágenes a los comentarios de un foro.
La comunidad de deviantART recibió con gran entusiasmo esta nueva herramienta de dibujo, y la herramienta en sí ahora ve tanto tráfico como algunas propiedades web de tamaño aceptable. Desde su lanzamiento, se envía un nuevo dibujo a través de deviantART muro una vez cada 5 segundos. Estos son solo los números de dibujos completados; muchos más se iniciaron, pero no se guardaron.
En el siguiente artículo, se brinda información sobre cómo usamos HTML5, por qué elegimos usar las tecnologías que usamos y lo que descubrí al escribir una de las primeras aplicaciones HTML5 completas para un sitio web importante.
Mi fondo
A fines de 2005, fui uno de los desarrolladores responsables de la herramienta de dibujo que usaba Draw Here. Se trataba de una herramienta de 'graffiti web' iniciada por un anotaciones. Se utilizaba para dibujar imágenes en cualquier página web. Draw Here se creó inicialmente con SVG (Firefox 1.5 Beta acababa de lanzarse; era uno de los primeros navegadores compatible con SVG).
En Internet Explorer, creamos SVG en segundo plano, pero renderizamos el dibujo con VML. WebKit no era compatible con SVG en ese momento, así que porté nuestro código para renderizarlo con el lienzo (que era una tecnología nueva que solo se veía en WebKit en ese momento). En un momento, incluso creé un puerto para que nuestro código SVG se pudiera renderizar en navegadores más antiguos usando muchos elementos div pegados. (Por supuesto, esto fue más bien una broma para mostrar que se podía hacer y que era muy lenta de usar).
En su apogeo, Draw Here se usaba para hacer unos 100 dibujos por día. Era lo suficientemente completo como para llamarse más que solo un experimento, aunque no tenía las mejoras finales de una aplicación web importante. A mediados de 2006, se abandonó el proyecto, aunque el sitio sigue cobrando, sobre todo para sonreír.
Tecnologías que utiliza deviantART muro
Debido a mi experiencia en el uso de diversas tecnologías HTML5 en sus primeros días, me pidieron que fuera el desarrollador principal de deviantART muro. Cualquier persona que lea este artículo probablemente comprenderá por qué decidimos utilizar HTML5, en lugar de una tecnología basada en complementos, como Silverlight o Flash. Queríamos algo que fuera sólido y que, además, usara estándares abiertos.
Decidir entre lienzo y SVG
Decidimos hacer la capa de dibujo usando lienzo. Algunas personas pueden preguntarse cuándo deben usar lienzo y cuándo deben usar SVG. Hay muchas superposiciones en cuanto a lo que se puede hacer con las dos tecnologías: como se demostró con Draw Here, ambas tecnologías se pueden usar para crear una aplicación de dibujo.
Descubrí que SVG es excelente si quieres mantener los controladores de los objetos que dibujaste. Por ejemplo, si deseas que el usuario pueda dibujar una línea y, luego, arrastrar fragmentos de la línea para cambiar su forma, sería bastante trivial si se usara con SVG. Pero lo mismo es muy incómodo cuando se usa el lienzo.
Cuando usas lienzos, llamas cosas en él y te olvidas de eso. Un lienzo en blanco y uno que se dibujó durante una hora actúan exactamente como en el código, y tienen casi el mismo espacio en memoria. Si bien un programa de dibujo de tramas suele funcionar muy bien con el fuego y olvida la tecnología, algunas cosas son difíciles. Por ejemplo, crear una función de deshacer rápido es mucho más difícil en el lienzo que en el SVG. En SVG, puedes mantener un controlador para las últimas líneas que colocaste, y deshacerlo es solo una cuestión de quitar esos objetos. Con el lienzo, una vez que se pinta una línea, no se sabe qué estaba debajo, por lo que es necesario volver a dibujar el área donde estaba.
Una vez que vimos anteriormente el asunto y decidimos que iba a usar HTML5 para el lienzo, decidimos usar pequeños fragmentos de otros accesorios HTML5 aquí y allá. Un ejemplo de ello es cómo usamos localStorage para realizar un seguimiento de la configuración del pincel del usuario. De esta manera, una vez que tengan los diversos pinceles configurados como les gusta, pueden volver a esos parámetros la próxima vez que usen nuestra herramienta. LocalStorage significa que no tenemos que usar nuestra cookie ni hacer viajes al servidor para obtener esas preferencias.
Usa Canvas
El lienzo ha recorrido un largo camino en los últimos cinco años. Con Draw Here, en realidad no publicamos el puerto de lienzo, porque el rendimiento no era bueno. Creo que podemos decir que, probablemente, funcione mejor de lo que imaginas. Borrar una gran sección del lienzo y volver a dibujar formas complicadas suele ocurrir a velocidades más rápidas que la percepción humana. Lo único que a veces es demasiado lento es usar getImageData() para hacer muestras de píxeles. Obviamente, la velocidad de la operación depende del tamaño del lienzo, pero, en un lienzo grande, hacer getImageData() en el momento incorrecto puede demorar el tiempo suficiente para que el usuario sienta que la aplicación tarda en responder.
Después de leer varios instructivos sobre lienzos, originalmente pensé que era algo pesado que debía usarse con moderación, tal vez una o dos veces en una página. No sé si todos entienden esto, pero lo hice, así que lo usaba con moderación cuando empezamos a programar deviantART muro. Sin embargo, después de un tiempo, descubrí que hay muchos lugares pequeños en los que un lienzo puede ahorrarte mucho esfuerzo. Por ejemplo, en las maquetas de nuestra app se especificaba que debería haber un selector de color con dos triángulos superpuestos que mostraban los colores primario y secundario:
Mi primer instinto fue empezar a pensar en una forma de crear este pequeño aparato de IU con HTML y CSS tradicionales. Las personas que son muy buenas para hackear CSS podrían señalar cómo se puede hacer todo esto con CSS, pero la forma de triángulo de las dos partes que cambian de color hace que no sea tan obvio.
Cuando se me ocurrió que usara solo un lienzo, creé el widget con un solo elemento DOM y un par de líneas de JavaScript. deviantART muro usa nodos lienzo en todo el lugar. Cada capa es un lienzo, y cambiar el orden de las capas es solo cuestión de cambiar el índice z. La paleta de zoom "navigator" que muestra una vista reducida del área de dibujo es simplemente otro lienzo que, ocasionalmente, llama a drawImage() con los lienzos de capas como imágenes de origen. Incluso el cursor del área de dibujo (un círculo de dos tonos que ajusta su tamaño según el tamaño del pincel y el zoom) es un lienzo que flota debajo del mouse.
La razón por la que éramos más liberales con el lienzo que con otras tecnologías HTML5 es que la biblioteca ExplorerCanvas de Google permite simular el lienzo en Internet Explorer. Eso me lleva a la siguiente sección.
Internet Explorer (IE)
El motivo principal por el que la mayoría de los sitios web importantes aún no usan HTML5 es que no quieren perder a sus usuarios de Internet Explorer. Estoy seguro de que la primera pregunta que la mayoría de los desarrolladores piensan cuando escuchan que deviantART hizo una aplicación de dibujo en HTML5 es: "¿Qué se hizo sobre IE?".
Al principio, decidimos que haríamos el mejor esfuerzo cuando se trataba de hacer que las cosas funcionen en Internet Explorer, pero que estábamos haciendo el estilo de denominador menos común para el desarrollo web. Debido a que la comunidad web adoptó el enfoque de que un sitio no puede lanzarse hasta que se vea igual en todos los navegadores conocidos, los usuarios no pueden saber cuándo falta su navegador. El usuario promedio se atribuye a los problemas de velocidad de su conexión a Internet y cada página se procesa más o menos de la misma manera. Así que deciden cuál es su navegador favorito según elementos arbitrarios de la interfaz de usuario, como el color del botón Atrás.
Decidimos crear cualquier función interesante que se nos ocurra con la especificación HTML5, intentar hacer que funcione en Internet Explorer y, si no pudiera funcionar, mostraríamos una ventana modal que explique que la función no estaba disponible porque el navegador aún no implementó un estándar web.
En un principio, intentamos que todo funcionara con ExplorerCanvas (exCanvas) de Google. Es sorprendentemente bueno imitar el lienzo para la mayoría de las cosas. Sin embargo, tiene una desventaja. Cada trazo que se realiza en el lienzo es un objeto DOM en la traducción de VML subyacente. En la mayoría de los casos que puedes intentar con el lienzo, no hay problema, pero algunos de los pinceles de deviantART Muro crean formas a partir de la superposición de muchos trazos. Cuando Internet Explorer se enfrenta a una VML que tiene miles de nodos, incluso en una máquina rápida, se cae y falla. Debido a esto, para muchas de las llamadas de dibujo, teníamos que ingresar a código en la VML real y usar trucos en los que concatenamos los nodos y usamos el comando move para especificar dónde debería haber espacios. Muchos de los pequeños controles y elementos de la interfaz usan una etiqueta de lienzo, ya que esos usos pequeños suelen funcionar bien con exCanvas.
Además de hacer que algunos elementos funcionen con exCanvas, sugerimos a los usuarios que puedan seguir usando su versión de Internet Explorer si instalaron el complemento de Google Chrome Frame. Google Chrome Frame es un complemento que incorpora el motor de renderización de Google Chrome en Internet Explorer. Desde la perspectiva de los usuarios, siguen usando el navegador que conocen, pero, más que nada, nuestra página se procesa con las capacidades de HTML5 y el JavaScript más rápido de Chrome.
Sabía que iba a ser fácil portar archivos para que funcionen con Chrome Frame, pero no me di cuenta de lo simple que era. Solo tienes que agregar una metaetiqueta adicional y listo, las cosas empiezan a funcionar en IE.
Resumen
Es una alegría trabajar con las nuevas tecnologías en la especificación HTML5, y diría que todo lo que usé está listo para este momento. Incluso si necesitas que todo funcione sin problemas en IE, hay una cantidad sorprendente de cosas que puedes hacer combinando Canvas y exCanvas. Y escribir una capa de traducción entre SVG y VML también es sorprendentemente factible. Una vez que empiezas a usar la tecnología, es como entrar en un mundo completamente nuevo.
Referencias
- deviantART muro
- foro de deviantART, donde puedes dibujar (requiere acceso)
- ExplorerCanvas
- Google Chrome Frame