Pasar de flash a html5

En noviembre de 2011, Adobe anunció que suspendería el desarrollo de su Flash Player para dispositivos móviles después del lanzamiento de Flash Player 11.1 para dispositivos Android y BlackBerry Playbook, optando por concentrarse en herramientas para crear aplicaciones HTML5 para dispositivos móviles. Aunque Adobe reiteró su compatibilidad con Flash Player para navegadores de computadoras personales, muchos piensan que es solo cuestión de tiempo antes de que Adobe también cancele la compatibilidad con la versión para PC. Esta es una mala noticia para las empresas que invierten mucho en aplicaciones Flash, así como para los desarrolladores que han invertido tiempo en adquirir las habilidades de programación necesarias para crear aplicaciones Flash.

Veamos algunas de las diferencias entre Flash y HTML5 y proporcionemos algunos consejos y herramientas para ayudar a facilitar la transición entre estas dos plataformas.

Conceptos básicos de la plataforma Flash

Flash a menudo se usa como un término general para referirse a una plataforma propietaria de Adobe que en realidad consta de los siguientes componentes:

• Flash: una herramienta utilizada principalmente para diseñar y crear animaciones
• Flex: el entorno de desarrollo utilizado para crear aplicaciones, incluido un kit de desarrollo de software (SDK)
• MXML: lenguaje de marcado utilizado en proyectos Flash
• ActionScript: un lenguaje de script

Para ejecutar una aplicación Flash en un navegador web, se debe descargar el complemento Flash Player. Como alternativa, se puede compilar una aplicación Flash para que se ejecute en el entorno de tiempo de ejecución de escritorio Adobe AIR. Nuevamente, Adobe AIR debe estar instalado en la computadora del usuario para que se ejecute una aplicación de AIR.

Flash utiliza los siguientes formatos de archivo principales:

• .fla: archivo de proyecto Flash
• .flv: archivo de video Flash
• .swf: archivo de aplicación Flash / Flex compilado que puede contener archivos .flv

Conceptos básicos de la plataforma HTML5

HTML5 es una plataforma estándar abierta que consta de lo siguiente:

• HTML5: lenguaje de marcado utilizado para crear páginas web
• Hojas de estilo en cascada 3 (CSS3): lenguaje de hoja de estilo utilizado para especificar el formato de los objetos en una página web HTML5
• Interfaces de programación de aplicaciones (API): API para admitir funciones como arrastrar y soltar y mensajes de documentos cruzados
• JavaScript: lenguaje de secuencias de comandos utilizado con HTML5 para habilitar la animación

Una de las ventajas de HTML5 es que se ejecuta en navegadores web de forma nativa y no requiere un complemento. Sin embargo, para funcionar correctamente, un navegador debe ser compatible con las funciones HTML5 y CSS3 para una página web HTML5. Los principales navegadores tienen diferentes niveles de soporte para HTML5 y CSS3, y la implementación no está completa. JavaScript es casi universalmente compatible con los navegadores; sin embargo, los usuarios tienen la opción de "desactivar" JavaScript, en cuyo caso los scripts del lado del cliente creados con JavaScript no se ejecutan.

Los formatos de archivo HTML5 incluyen lo siguiente:

• .htm / .html: archivo de página web HTML5
• .css: archivo de hoja de estilo CSS3

A partir de 2011, la especificación HTML5 actual no especifica los formatos de archivo de video compatibles, lo que deja a los navegadores individuales elegir qué formatos admitir. Los formatos compatibles actuales incluyen lo siguiente:

• .mp4: archivo de video MPEG 4 con códec de video H.264 y códec de audio AAC
• .webm: archivo de video WebM con códec de video VP8 y códec de audio Vorbis
• .ogg: archivo de video Ogg con códec de video Theora y códec de audio Vorbis

Convertir proyectos Flash a HTML5

La conversión manual de un proyecto Flash complejo a HTML5 es un proceso que requiere mucho trabajo y mucho tiempo, debido a las diferencias de plataforma. El desarrollador debe convertir las animaciones creadas con Flash y ActionScript en HTML5 y JavaScript. Afortunadamente, hay algunas herramientas que ayudan a automatizar la conversión de Flash a HTML5.

Adobe lanzó Wallaby, una herramienta experimental que se puede descargar de forma gratuita desde el sitio web de Adobe Labs. Wallaby toma un archivo de proyecto Flash (.fla) como entrada y exporta HTML5 y admite archivos CSS y JavaScript. Sin embargo, las notas de la versión Wallaby contienen una lista bastante larga de características que no se convierten, las más importantes son ActionScript, películas y sonido. Wallaby es una herramienta limitada diseñada principalmente para convertir contenido gráfico animado en HTML5, para que pueda integrarse en páginas web utilizando una herramienta de diseño de páginas web.

Google Labs ha lanzado Swiffy, una herramienta gratuita basada en la web que convierte un archivo de aplicación Flash compilado (.swf) a HTML5. El resultado se puede incrustar en una página web, pero no es fácil de editar para un desarrollador. Al igual que Wallaby, Swiffy no convierte todas las funciones de Flash. Swiffy admite la conversión de ActionScript, pero solo la versión 2.0 (ActionScript se encuentra actualmente en la versión 3.0). La salida de Swiffy solo se ejecuta en navegadores que admiten gráficos vectoriales escalables (SVG).

Edge, una nueva herramienta de desarrollo para HTML5

A medida que HTML5 se convierte en la plataforma elegida, surgen nuevas herramientas para proporcionar entornos de diseño y desarrollo que integran HTML5, CSS3 y JavaScript.

En agosto de 2011, Adobe lanzó una versión preliminar de la herramienta de desarrollo Edge. Edge permite a un diseñador crear animaciones HTML5 y agregar animaciones a proyectos HTML5 existentes. Los diseñadores de Flash reconocerán algunos elementos familiares en la interfaz de usuario de Edge, incluidos el escenario, la ventana de propiedades y la línea de tiempo de la animación. Sin embargo, Edge genera archivos CSS y JavaScript, y su contenido de animación se almacena en una estructura de datos de notación de objetos JavaScript (JSON).

Al momento de escribir este artículo, Edge anticipó su cuarta versión preliminar. Se están agregando nuevas características a cada versión.

Convertir YouTube a HTML5

Una señal del cambio a HTML5 es que YouTube ahora ofrece la opción de usar un reproductor de video HTML5 para ver videos.

Antes de ofrecer la opción HTML5, todos los videos de YouTube fueron entregados a través de un reproductor de video Flash. Los usuarios podían cargar archivos de video en casi cualquier formato, y YouTube luego convertiría cada video al formato Flash (.flv) requerido.

YouTube ahora también está codificando videos con el códec de video H.264 y el formato WebM para la entrega HTML5. Para ver videos en formato HTML5, debe tener un navegador que admita la etiqueta de video HTML5 y un formato de video utilizado por YouTube.

El legado de Flash

Como se señaló anteriormente, Adobe continúa desarrollando la versión para PC de Flash Player, por ahora. Incluso si Adobe deja de admitir Flash Player en el futuro, las aplicaciones Flash heredadas seguirán siendo compatibles en la Web, probablemente durante años. Entonces, Flash no desaparecerá por completo en el corto plazo. Las herramientas están disponibles para convertir aplicaciones Flash en aplicaciones HTML5, pero actualmente, estas herramientas no admiten la conversión de todas las funciones de Flash. A medida que el estándar HTML5 se vuelve dominante, es probable que las herramientas de conversión de archivos Flash se vuelvan más sofisticadas, y se crearán nuevas herramientas para desarrollar contenido con la plataforma HTML5.