Adobe Edge

  • Por
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 es el código fuente que genera Adobe Edge, para definir las páginas dinámicas creadas con su interfaz. En realidad es una serie de llamadas a librerías y plugins ampliamente utilizados por los desarrolladores, en el fondo, todos los frameworks y plugins que venimos comentando y recomendando desde DesarrolloWeb.com durante los pasados años.

Adobe Edge utiliza el ultraconocido framework Javascript jQuery y algunos plugins como Easing, para la creación de efectos especiales en jQuery. Todo ello nos hace entender que la empresa de Photoshop ha decidido esta vez no hacer la guerra por su cuenta y, en vez de ello, utilizar las mismas herramientas que los desarrolladores ya usan.

Pero lo que realmente nos gusta es ver cómo todo el código ha generado Adobe Edge es tan solo Javascript, HTML y CSS. No digo que con ello un programador pueda fácilmente editar a mano un archivo generado por medio del programa, cuyos scripts pueden ser bastante complicados, aunque sí demuestra que con los lenguajes web y siguiendo los estándares del HTML5, se pueden hacer aplicaciones tan impactantes como las que se pueden realizar bajo Flash.

Una preview que nos deja con la miel en los labios

Todo lo dicho hasta el momento puede derivar en lectores decepcionados, si es que se deciden a instalar Adobe Edge. Quiero dejar claro que, de momento, solo han puesto a disposición de la comunidad una preview del programa. Es decir, el software hoy todavía se encuentra en fase de desarrollo.

De hecho, en el momento de escribir estas líneas, puedes encontrar Edge dentro de los denominados Adobe Labs, en la dirección: http://labs.adobe.com/technologies/edge/

Nota: Nosotros hemos probado la preview 3 de Adobe Edge sobre un ordenador Mac con OS X v10.6. No sé si las versiones Windows tendrán más cosas o si cuando leas estas líneas habrán sacado otras previews o incluso el programa completo.

Que sea una preview por una parte es bueno, puesto que la ofrecen de manera gratuita, pero por otra no deja de ser un programa desarrollado a medias y en el que se echan en falta muchas cosas aun. De momento, permite colocar simplemente 3 tipos de actores en las páginas, elementos DIV, elementos DIV con esquinas redondeadas y elementos DIV con texto. Como se puede ver, de todos los integrantes que podríamos necesitar en una página, solo tenemos disponibles diversas variantes del elemento DIV. Por supuesto, echamos en falta otros elementos de los documentos HTML y también recursos multimedia como audio y vídeo, widgets jQuery, etc.

Es de suponer que, cuando el programa se lance definitivamente al mercado, estará mucho más completo de lo que hoy se encuentra y casi con toda certeza, que no sea gratuito.

Pantalla completa de Adobe Edge

Edge: Borrón a Flash y cuenta nueva

En mi opinión, la existencia de Edge significa que Adobe se ha dado cuenta que luchar él solo contra todos, intentando implantar a toda costa un sistema propietario como Flash, no lleva a ningún lugar. En cierto modo, la decisión de discontinuar el desarrollo de Flash para móviles, confirma un poco esa suposición. Con todo, parece obvio que, al menos una sección de Adobe, tiene claro que no hay necesidad de seguir apostando exclusivamente por una tecnología que a día de hoy no necesita la Web (puesto que con HTML 5 ya no es necesario un producto propietario como Flash para el desarrollo de webs dinámicas e interactivas). La compañía, gracias Edge, da un paso al frente destacándose como ilustre creador de la primera herramienta para diseñadores que permite crear animaciones e interactividad avanzadas con HTML 5.

Sin embargo no me parece correcto suponer que, todo lo que Adobe había conseguido con Flash, no haya servido para nada. Durante muchos años Flash ha sido una excelente herramienta que era capaz de hacer cosas que no eran posibles de otro modo. Flash ha derrumbado muchas murallas y hoy continua siendo una buena tecnología para usos concretos. Ahora bien, debe dejar paso a los estándares abiertos, que por fin parecen soportar todas las necesidades que los desarrolladores veníamos experimentando.

Crear un producto de la gama de Adobe Edge y servirse como motor de los conocidos lenguajes HTML5, CSS3 o Javascript, tiene un mérito enorme. Y si lo piensas, todavía más viniendo del propietario de su mayor competidor, Flash.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir