Passant de flaix a html5

Al novembre de 2011, Adobe va anunciar que deixaria de desenvolupar el seu Flash Player per a dispositius mòbils després del llançament de Flash Player 11.1 per a dispositius Android i BlackBerry Playbook, optant en lloc de concentrar-se en les eines per crear aplicacions HTML5 per a dispositius mòbils. Tot i que Adobe va reiterar el seu suport de Flash Player per a navegadors d’ordinadors personals, molts pensen que només és qüestió de temps abans que Adobe també finalitzi el suport per a la versió de PC. Aquesta és una mala notícia per a les empreses que inverteixen molt en aplicacions Flash, així com per als desenvolupadors que han invertit temps en l’adquisició de les habilitats de programació necessàries per crear aplicacions Flash.

Analitzem algunes de les diferències entre Flash i HTML5 i proporcionem alguns consells i eines per facilitar la transició entre aquestes dues plataformes.

Fonaments de la plataforma Flash

El flaix s'utilitza sovint com a terme paraigua per referir-se a una plataforma Adobe propietària que en realitat consta dels components següents:

• Flash: una eina utilitzada principalment per dissenyar i crear animacions
• Flex: l'entorn de desenvolupament que s'utilitza per crear aplicacions, inclòs un kit de desenvolupament de programari (SDK)
• MXML: llenguatge de marcatge utilitzat en projectes Flash
• ActionScript: llenguatge de script

Per executar una aplicació Flash en un navegador web, cal descarregar el connector de Flash Player. Com a alternativa, es pot compilar una aplicació Flash per executar-se a l’entorn d’execució d’escriptori Adobe AIR. De nou, Adobe AIR s’ha d’instal·lar a l’ordinador de l’usuari per poder executar una aplicació AIR.

Flash utilitza els formats principals de fitxer:

• .fla: fitxer del projecte de flaix
• .flv: fitxer de vídeo en flash
• .swf: fitxer d'aplicacions Flash / Flex compilat que pot contenir fitxers .flv

Conceptes bàsics sobre la plataforma HTML5

HTML5 és una plataforma estàndard oberta que consta de:

• HTML5: llenguatge de marcatge utilitzat per crear pàgines web
• Fulls d'estil en cascada 3 (CSS3): llenguatge de full d'estil que s'utilitza per especificar la formatació d'objectes en una pàgina web HTML5
• Interfícies de programació d'aplicacions (API): API que admeten funcions com ara missatgeria arrossegable i de documents
• JavaScript: llenguatge de script utilitzat amb HTML5 per activar l'animació

Un dels avantatges de HTML5 és que funciona directament en navegadors web i no requereix cap complement. Tanmateix, per funcionar correctament, un navegador ha de ser compatible amb les funcions HTML5 i CSS3 per a una pàgina web HTML5. Els navegadors principals tenen diferents nivells de suport a HTML5 i CSS3 i la implementació no està completa. El navegador és pràcticament universalment admès pels navegadors; tanmateix, els usuaris tenen l'opció de "desactivar" JavaScript, en aquest cas no s'executen scripts del costat del client creats amb JavaScript.

Els formats de fitxer HTML5 inclouen el següent:

• .htm / .html: fitxer de pàgines web HTML5
• .css: fitxer de full d'estil CSS3

A partir del 2011, l’especificació HTML5 actual no especifica els formats de fitxers de vídeo compatibles, deixant a l’abast dels navegadors individuals que triïn quins formats admeten. Els formats actuals compatibles inclouen els següents:

• .mp4: fitxer de vídeo MPEG 4 amb còdec de vídeo H.264 i còdec d'àudio AAC
• .webm: fitxer de vídeo WebM amb còdec de vídeo VP8 i còdec d'àudio Vorbis
• .ogg: fitxer de vídeo Ogg amb còdec de vídeo Theora i còdec d'àudio Vorbis

Converteix els projectes de Flash a HTML5

La conversió manual d’un projecte Flash complex a HTML5 és un procés que requereix molta mà d’obra i requereix temps, a causa de les diferències de plataforma. El desenvolupador ha de convertir les animacions creades amb Flash i ActionScript en HTML5 i JavaScript. Afortunadament, hi ha algunes eines que ajuden a automatitzar la conversió de Flash a HTML5.

Adobe ha llançat Wallaby, una eina experimental que es pot descarregar gratuïtament des del lloc web d'Adobe Labs. Wallaby pren un fitxer de projecte Flash (.fla) com a entrada i exporta HTML5 i admet fitxers CSS i JavaScript. Tot i això, les notes de llançament de Wallaby contenen una llista bastant llarga de funcions que no es converteixen, les més importants són ActionScript, pel·lícules i so. Wallaby és una eina limitada dissenyada principalment per convertir contingut gràfic animat en HTML5, de manera que es pot integrar a pàgines web mitjançant una eina de disseny de pàgines web.

Google Labs ha llançat Swiffy, una eina gratuïta basada en web que converteix un fitxer d'aplicacions Flash compilat (.swf) a HTML5. La sortida es pot incrustar en una pàgina web, però per a un desenvolupador no és fàcil editar-la. Com Wallaby, Swiffy no converteix totes les funcions de Flash. Swiffy admet la conversió ActionScript, però només la versió 2.0 (ActionScript actualment es troba a la versió 3.0). La sortida Swiffy només s’executa en navegadors que admetin gràfics vectorials escalables (SVG).

Edge, una nova eina de desenvolupament per a HTML5

A mesura que HTML5 es converteix en la plataforma d’elecció, van apareixent noves eines per proporcionar entorns de disseny i desenvolupament que integren HTML5, CSS3 i JavaScript.

L'agost de 2011, Adobe va llançar una versió prèvia de l'eina de desenvolupament Edge. Edge permet al dissenyador crear animacions HTML5 i afegir animacions als projectes HTML5 existents. Els dissenyadors de Flash reconeixeran alguns elements familiars a la interfície d'usuari de Edge, com ara l'escenari, la finestra de propietats i la línia de temps de l'animació. Edge, però, genera fitxers CSS i JavaScript, i el contingut d'animació s'emmagatzema en una estructura de dades de JavaScript (Nota Object Object Notation) (JSON).

En el moment d'escriure aquest document, Edge preveia la seva quarta publicació prèvia. S'estan afegint noves funcions a cada llançament.

Conversió de YouTube a HTML5

Un dels senyals del pas a HTML5 és que YouTube ara ofereix l’opció d’utilitzar un reproductor de vídeo HTML5 per visualitzar vídeos.

Abans d’oferir l’opció HTML5, tots els vídeos de YouTube es van lliurar mitjançant un reproductor de vídeo Flash. Els usuaris podrien penjar fitxers de vídeo en gairebé qualsevol format i, a continuació, YouTube convertiria cada vídeo al format Flash (.flv) requerit.

YouTube també està codificant vídeos amb el còdec de vídeo H.264 i el format WebM per a l’entrega de HTML5. Per visualitzar vídeos en format HTML5, heu de tenir un navegador que admet l’etiqueta de vídeo HTML5 i un format de vídeo usat per YouTube.

El llegat de Flash

Com s'ha apuntat anteriorment, Adobe continua desenvolupant la versió per a PC de Flash Player, de moment. Tot i que Adobe deixi de ser compatible amb Flash Player en el futur, les aplicacions Flash heretades continuaran sent compatibles amb el web, probablement durant anys. Per tant, Flash no desapareixerà completament en cap moment. Les eines estan disponibles per convertir les aplicacions Flash en aplicacions HTML5, però actualment aquestes eines no admeten la conversió de totes les funcions de Flash. A mesura que l’estàndard HTML5 esdevé dominant, és probable que les eines de conversió d’arxius Flash es facin més sofisticades, i es crearan noves eines per desenvolupar contingut amb la plataforma HTML5.