ADOBE EDGE REEMPLAZA TOTALMENTE A ADOBE FLASH

Análisis de Adobe Edge, un programa con el que crear contenido para la web dinámico e interactivo basado en estándares abiertos como HTML5, CSS3 y Javascript.

La semana pasada nos enteramos de que Adobe no va a continuar el desarrollo de su versión para móviles de Flash. Esta noticia nos ha hecho reflexionar sobre la muerte de Flash y ciertamente, no deja de ser parte de verdad. Desde el momento en el que se limita Flash a los ordenadores personales y sabiendo que cada día las personas se conectan más sobre dispositivos móviles, nadie en su sano juicio va a querer desarrollar un sitio web que necesite forzosamente el plugin de Flash para ejecutarse.

Comento este asunto porque me ha servido de motivación para probar la apuesta de Adobe para la animación web basada en estándares abiertos, Edge, un programa que a todas luces sustituirá a Flash, ya que permite hacer más o menos lo mismo, aunque con tecnologías relacionadas como el HTML5 y compatibles con los navegadores modernos sin necesidad de ningún plugin.

Dado que Adobe está retirándose de la lucha por la implantación de Flash, es una buena idea conocer mejor qué es lo que la empresa de Photoshop tiene reservado para un futuro cercano. La respuesta, como decía, no es otra que Edge, y a pesar tiene muchas similitudes en su interfaz que nos hacer recordar bastante a Flash, el código resultante para la creación de las animaciones es bien distinto. Mientras que uno producía los SWF, de las películas de Flash, su sucesor produce HTML5.

Potenciando los estándares web

Panel de propiedades de los elementos en Adobe Edge El mundo del desarrollo web y las posibilidades de los navegadores han cambiado mucho en los últimos tiempos. En estos momentos es perfectamente posible hacer muchas cosas basando el trabajo enteramente en estándares abiertos. Con CSS3, por ejemplo, podemos ahora impactantes animaciones, con Javascript podemos dar vida a todo eso y HTML 5 incluye APIs diversas que se pueden utilizar para mejorar sensiblemente las capacidades de los navegadores.

Bajo ese marco Adobe, creador de algunos del mejor programa de diseño y algunos de los mejores softwares para desarrollar páginas web, ha reaccionado con una apuesta clara por los lenguajes del futuro de la web, creando un software dedicado a los diseñadores, para que puedan construir contenido dinámico e interactivo a golpe de ratón.

Desde los menús de Adobe Edge tenemos un despliegue avanzado de todas las características del HTML5 y CSS3, como las esquinas redondeadas, transformaciones diversas (rotaciones, escalado, traslaciones), etc. Todo lo podemos seleccionar a través de una interfaz bastante sencilla de manejar y que por supuesto requiere pocos o ningún conocimiento de los lenguajes que, por dentro, sirven de motor a todas esas características de diseño y animación.

Además, como no podía ser de otro modo, la interfaz se completa con un “timeline” muy parecido al de Flash, donde podemos situar los actores de las animaciones (nuestras capas, textos, etc) y el avance de las transformaciones que se deben realizar con el paso del tiempo. Quien haya experimentado alguna vez con Flash, u otros programas como Director, sabrá de sobra de lo que estoy hablando.

Como decía, los diseñadores estarán encantados con la posibilidad de “programar animaciones” en lenguajes web, pero sin tener que vérselas con el muchas veces complicado código fuente. Sin embargo, los que nos dedicamos más a la parte de programación, también podremos sentirnos agradecidos por la nueva herramienta de productividad que Adobe pone en nuestras manos. Es que, si tenemos alguna idea de Javascript, jQuery, CSS3 y HTML5, sabemos que el desarrollo a mano a veces se hace muy laborioso, hasta convertirse en un trabajo de chinos.

timeline de Adobe Edge

No obstante, no nos olvidemos que, al final, Adobe Edge no es más que una envoltura para trabajar con lenguajes web de estándares abiertos, por lo que los conocimientos de CSS y Javascript son más que de agradecer para comenzar a utilizar el programa sin demasiadas complicaciones. Además, a medida que queramos obtener mayor desempeño y programar interacciones más complejas, seguramente se haga imprescindible tirar líneas de código Javascript.

El código que genera Adobe Edge

Nos ha resultado grato observar cómo

...