¡Cuidado con Adobe Edge!
Hace tiempo que un colega me viene hablando del Adobe Edge, el programa de Adobe para hacer dibujos en HTML5 y CSS3. Cuando salió la versión demo para bajar, lo bajé, pero la verdad que nunca lo probé hasta hoy, y si bien lo encuentro una herramienta útil para animaciones (su interfaz gráfica es muy similar a Flash), me parece que tenemos que tener cuidado con su uso y para qué lo queremos.
Me puse a buscar en la web, ejemplos hechos con Adobe Edge, y uno de los primeros que encontré fue este:
Ejemplo de ilustración hecho con Adobe Edge
Lo bueno
Es una linda ilustración (sin animación en este caso), que, a diferencia de una imagen, al hacer zoom in la vamos a ver agrandarse con la misma nitidez que con su tamaño inicial. Algo positivo que noté es que si miramos el código fuente, no vamos a ver markup HTML vacío como en muchas otras demos de CSS3 en la web, Adobe Edge crea todos los elementos a través de javascript.
Lo malo de Adobe Edge
Lo negativo de Edge, es que esta ilustración necesita cargar más de 200 KB en archivos!!
Si, esto se debe a que, por ejemplo, Adobe Edge necesita jQuery, algo que a algunos desarrolladores no les importaría, ya que usan este framework en todos sus proyectos, pero no todos usamos esta librería. Además de jQuery, nos encontramos con otros 4 (si, cuatro) archivos javascript y uno CSS, aumentando así en gran cantidad los http request, incrementando la carga del sitio:
Más de 200 KB y demasiadas http requests
La imagen de la galera de más arriba (el ejemplo en cuestión), es un archivo PNG que pesa… 12 KB, lo cual también implica una sola http request, mucho mejor que 6!
Otro punto negativo: desde el punto de vista del SEO, si usamos Adobe Edge, tendríamos una imagen menos para que los motores de búsqueda indexen.
Las dudas
Después de ver esto me surgieron algunas dudas, siendo la principal: no es mejor hacer este tipo de cosas utilizando SVG o canvas, o mejor aún, un simple PNG si el trabajo no implica animación?
Cuándo me dijeron que Adobe Edge utilizaba HTML5, enseguida imaginé un programa tipo Flash que exportaba a canvas (obviamente con su respectivo código javascript) pero no este “paquete” que sale de Adobe Edge.
La demo está muy buena, pero no me imagino haciendo esto para un sitio de verdad, inyectando así como si nada 200 KB ( y unas cuantas llamadas http) para cargar una simple imagen.
¿Alguien más lo probó?
Has probado Wallaby? También de Adobe. Leí algo acerca de que pasa Flash a HTML5, pero aún no lo probé.
No, no lo he probado. Pero según lo que estuve leyendo (y lo que recuerdo de su código) es algo muy parecido a lo que hace el Adobe Edge.