Animación 2D después de Flash

Las restricciones de algunos dispositivos móviles a la avanzadísima
tecnología Flash (lenguaje ActionScript) ha supuesto una caída de los
contenidos animados.

No ha sido así en el campo del vídeo, los juegos y las
apps móviles, donde Flash todavía tiene mucho camino que recorrer.

Ayer, mi amigo y gran profesor Javier Mateo comentaba que en
muchos sitios web ahora encontramos de nuevo el viejo y querido GIF animado, un
formato que es soportado por todos los navegadores y dispositivos.
Actualmente se está produciendo una explosión de nuevos
productos que permiten contar tus historias con movimiento y audio. Nos
encontramos a mitad de camino entre el ‘boom’ de la animación en Flash y la
nueva web móvil.

El principal obstáculo para su implantación siguen siendo los
viejos navegadores, especialmente los fabricados por Microsoft.

Aquí repasamos algunas opciones para animar tus proyectos
sin saber demasiado código. Son programas que ejecutan código CSS y el lenguaje
Javascript o su librería más extendida: jQuery.
I. DE FLASH A HTML5

Pros: Herramienta de Google para convertir documentos Flash
(swf) realizados con ActionScript 2 en contenido HTML5 no editable. Las
conversiones de ActionScript 3 (en funcionamiento desde 2006) se encuentran hoy
en fase experimental.
La conversión se realiza a través del navegador o cargando
una extensión el el programa Flash.
Cons: Así suena my bonito, pero las conversiones no siempre
son posibles.
Los documentos ‘SWF’ deben ser muy sencillos y pesar menos
de un mega.

Adobe Wallaby: fla
Otra herramienta para convertir documentos Flash  (fla) en HTML; en teoría el resultado es editable
y se ejecuta desde un programa instalado en el ordenador.
De momento, ambas herramientas son muy limitadas y están en
proceso de desarrollo.
Convierten pequeños y simples documentos, pero no una
aplicación.
La interactividad es muy difícil de convertir.
II. ANIMACIÓN EN  HTML5

Adobe Edge CC: Nueva versión el día 17


Crear contenido animado e interactivo para la web moderna.
El día 17 de junio sale la nueva versión: Animate CC.

Se
acabó el tiempo de prueba, empieza el partido y la hora de pagar un precio: 499dólares por licencia o 15 dólares de suscripción mensual, en la web de Adobe.

Pros: Una gran herramienta de animación, pensada por Adobe
para sustituir a Flash e integrarse perfectamente con proyectos HTML5. Su
corazón está escrito con jQuery. Es el futuro de la animación 2D.

Cons: No corre en navegadores antiguos. No hay parche. La
API de Animate no permite conversión a etiquetados antiguos.
Crear. Animar. HTML5.
Igualmente, pensado para tecnología HTML5, juega con su
propia API de Javascript.
Su última verión cuesta 60 dólares, en su web o en la Mac
AppStore.
Cons: Sólo para fieles del Mac y OX 10.6.6. No tienen
pensado sacar versión para Windows.
Pros: Compatible con IE6+ si se respetan algunas opciones.
Pros: Software en línea de Adobe Edge e Hype, con línea del
tiempo, escenas, fotogramas clave, efectos y posibilidad de programar con
javascript.
Corre en navegadores modernos, smartphones, iPhone, iPad y
Pcs.
Cons: No IE6+.
Precio: 120 euros.
Software para crear películas interactivas, juegos y
aplicaciones utilizando el motor de Javascript. La última versión acaba de
salir al mercado.
Pros: El nuevo paquete incluye versión para Windows y Mac OS
X. (antes sólo Windows). Según su web, funciona en el 99% de los navegadores
(IE6+) y en teléfonos inteligentes (smart phones).
La licencia cuesta 50 dólares a través de su web.

Animaciones móviles con CSS3.
Precio: 99 dólares.
Pros: Accesible en plataformas Windows, Mac OX y Linux.
Pensado para realizar pequeñas animaciones para móviles y
juegos simples interactivos.
Cons: sólo para navegadores modernos.
Herramienta para crear contenido y audio web en Flash o
HTML.
Pros: permite salida para HTML5 o para Flash y es compatible
con iBooks Author.
Versión para Mac y Windows.
Precio: 109 euros por licencia.
Contar historias visualmente.
Cons: Herramienta pensada para contenidos del iPad y el
iPhone, por tanto para plataformas nativas de iOS.
Están trabajando en una versión para Android.
19 dólares a través de la Mac App Store.

III. HERRAMIENTAS ONLINE
Página digital para crear y compartir dibujos realizados a
mano realizada con Javascript y el canvas de HTML5.
Cons: Herramienta online extremadamente básica.
Pros: Divertida.

Pros: Creatividad en la nube, sin necesidad de descargar
ningún programa.
Se trabaja desde el navegador y se guarda en la nube.
Los resultados se pueden exportar en formato javascript o
CSS a  tu sitio local.
Accesible tras rellenar un formulario.
Cons: Necesita un reproductor de javascript para renderizar
los trabajos.
Pensado especialmente para crear pequeñas publicidades para
navegadores HTML5 y dispositivos móviles. Se recomienda visualizar los trabajos
en Google Chrome.

Pros: sencillo software gratuito al que se accede a través
de navegador.
Cons: Herramientas muy limitadas, pensado para pequeños
trabajos, para navegadores que soporten tecnología HTML5. Recomiendan Firefox y
Chrome.
Como Mixeek, herramienta para trabajar en el navegador.
Pensada especialmente para animar tipografía y logos.
Herramienta para crear pequeñas publicidades, animar
tipografía o logos a través de tu navegador. Se exporta un archivo javascript y
necesita un reproductor que se guarda en la carpeta de tu sitio local o remoto.
Los trabajos se guardan en tu perfil de gmail.com.
Pros: Salida javascript aceptable en todos los navegadores,
incluido IE6. 
Cons: Pocas herramientas, limitaciones. Recuerda a la
primera versión de Flash.
Gratis.
IV. PASARON A OTRA VIDA

Software que reune las cararterísticas de los anteriores,
pero que ha dejado de desarrollarse.

HTML5: El futuro tiene muchos nombres

Texto publicado en VisualThinking.es.

Hace relativamente poco tiempo que las páginas en la red no tenían imágenes. El vídeo, la infografía o los gráficos interactivos eran un sueño para muchos diseñadores y editores. Las páginas eran puramente textuales y, así, las posibilidades de diagramación eran mínimas. Con la llegada de los ‘movie clips’, el PDF y el reproductor de animaciones ‘Flash’ los contenidos empezaron a moverse.
Rápidamente iban surgiendo tecnologías que se convertían en estándares para la comunidad digital. Pocos se preguntaban si aquello era realmente un modelo universal. Funcionaba después de darle muchos cabezazos al teclado del ordenador; cumplía el objetivo.

¿Funcionaba en todos los navegadores y sistemas operativos? No. Ante un problema de funcionalidad se buscaba la solución que abarcase la mayor parte del mercado. Es decir, se dejaba fuera una parte importante. Por tanto, funcionábamos sin un estándar. No existía. Lo que teníamos eran varios estándares propietarios desarrollados por las compañías de navegadores. Compartían vocabulario, pero no escritura y pronunciación.

Objetivo 2014
La llegada del lenguaje HTML5 (‘HyperText Markup Language’, en su versión número 5) es un hito histórico en el desarrollo del diseño web. Pese a que todavía está en desarrollo, la normativa final HTML5 se espera que sea aprobada en 2014, las posibilidades que ya conocemos son plenamente satisfactorias. En 2010, Steve Jobs dio las primeras pistas: ‘Los nuevos modelos creados en la era móvil, como el HTML5, ganarán el mercado’.

A partir de aquí comenzó a hablarse de un enfrentamiento entre los lenguajes Javascript (estandarizado en 1996) y ActionScript (propiedad de Adobe), HTML5 (abierto) y Flash (propiedad de Adobe) y los sistemas operativos MacOs X (Apple) y el Android (código libre basado en Linux).

En 2009, el ‘World Wide Consortium’ (W3C, la autoridad que valida el lenguaje HTML5) y el ‘Web Hypertext Application Technology Working Group’ (WHATWG, la comunidad que desarrolla el lenguaje HTML) decidieron caminar juntos para desarrollar definitivamente un estándar para la web, un lenguaje de etiquetas abierto a la participación de todo el mundo, no dependiente de compañías propietarias del desarrollo y que fuera compatible con todas las tecnologías de la web.

HTML5 no es propiedad de ninguna compañía. Las compañías deciden desarrollar con este lenguaje porque entienden que es el que mejor cumple sus expectativas de negocio. Lógico. En la era móvil y social todo el mundo quiere estar en todos los frentes. Por tanto, las batallas planteadas en los últimos años son molinos de viento que no merecen más comentario. Lo importante es que va a existir un estándar compatible con todos los navegadores y con el que ya se puede trabajar.

Sumando códigos hermanos
La combinación del lenguaje HTML5 (etiquetas básicas de la página) con las posibilidades del lenguaje en cascada CSS3 (estilo y presentación de las etiquetas) y el lenguaje de programación orientado a objetos Javascript (desarrollo de operaciones y aplicaciones) y todas sus librerías (gráficos, efectos visuales, formularios, tablas, matemáticas, criptografía o AJAX) es todo un reto para cualquier desarrollador, creativo o diseñador.

A finales de septiembre, Adobe Systems lanzó oficialmente al mercado el programa de gráficos animados Edge Animate 1.0. De momento, es gratuito y se descarga en su página web. Edge es una tecnología para crear contenido con HTML5, Javascript y la librería JQuery. Por tanto, los trabajos realizados con Edge alcanzarán todo el mercado de los móviles sin necesidad de instalar nada en ellos. El diseñador no se tendrá que preocupar de las excepciones de cada dispositivo o navegador, sencillamente porque ya no existirán. Esa es la promesa.

El problema actual es que no todo el mundo tiene instalado en su ordenador las últimas versiones de los navegadores, que son las que están preparadas para visualizar los contenidos en HTML5. A medida que las empresas pongan al día sus máquinas y los usuarios vayan descargándose las versiones más recientes de los navegadores, HTML5 empezará a crecer exponencialmente y conoceremos realmente todas sus posibilidades. Recuerdo ahora esta frase de la escritora francesa Françoise Sagan: ‘Sólo cerrando las puertas detrás de uno se abren ventanas hacia el porvenir’.

———————————-

Quick Tour VT.

———————————-

GRAPHICS: Best2010, G20

Gracias por visitar el sitio de Juantxo Cruz

Pulsa aquí.

Videográfico sobre el G20.
Por David Alamenda.

‘La necesidad de sorprender al lector, usuario y espectador (el gráfico es cross-platform) fue una de las máximas de esté gráfico.
La pieza tiene un marcado caracter didáctico, acompañado de datos curiosos y definitorios sobre el G-20. Más allá del lenguaje impreso y de las animaciones interactivas, decidí adentrarme, con mucho respeto, en el lenguaje audiovisual: elaboración de un guión, animaciones, voz en off, nuevas herramientas, estética retro, pero con la clara intención de seguir informando’.

GRAPHICS: eXplorer Statistics, NCVA, Suecia

Gracias por visitar el sitio de Juantxo Cruz

eXplorer Statistics
National Center for Visual Analytics (NCVA)
Suecia
Programación y análisis de la estadística.
«GeoAnalytics Visualization»
Introducción.

Gracias por visitar el sitio de Juantxo Cruz

Usuarios:
The WorlBank
The Economist
The BBC
Eurostat
OCDE
Statistic Denmark
City of Göteborg
Ericsson
Unilever

Gracias por visitar el sitio de Juantxo Cruz

National Center for Visual Analytics (NCVA) is a Swedish national resource funded through the Swedish Knowledge Foundation’s (KK-Stiftelsen) Visualization Program including VINNOVA, SSF, ISA and Vårdalstiftelsen and our industrial and government research partners. NCVA will help to spread geovisual and visual analytics technology into industry and government agencies.
NCVA is managed by Professor Mikael Jern VITA/ITN

Gracias por visitar el sitio de Juantxo Cruz

Strategies
Programming each new Visual Analytics application from scratch is a complex and expensive task and a very inefficient way to work. A high-level toolkit, comprising many well-tested and compatible components, will make this process far less time-consuming and help ensure the correct functioning of each new application produced. To achieve this we build upon our «GeoAnalytics Visualization» framework, GAV, to provide a generic visualization framework for a diverse range of application areas and fully integrated with web tools such as Flash/Flex (GAV Flash) or optimized for performance with Microsoft DirectX (GAV). This framework is designed to provide integrated views of large information spaces, coordinated viewing of information in context, and to approach complex information through the use the overview and detail paradigm. These are the principles behind the VA concept which have made it such a powerful idea in the scientific community. NCVA will show the effectiveness of the technology and provide results in four distinct forms:

1.Valuable applications, addressing key concerns for our partners in industry, public services and academia.
2.New or enhanced methods within GAV framework developed for these purposes but which will then be available to users in other potential areas of interest.
3.Novel techniques to facilitate the recording, review and dissemination of the reasoning within the VA process allowing the analyst to use interactive ‘story-telling’ to convey how conclusions are reached, improving the credibility of the results obtained.
4.New results from evaluation of these applications and techniques in the workplace context, feeding back into new and improved developments in a continuous cycle.
Applied research will be carried out in the context of a number of applications, drawn from diverse areas associated with the activities of the industrial partners, showing the generality of the underlying framework. Each of these applications can also be seen as a demonstrator of the technology. In this work, we will follow a ‘science-to-solutions’ approach to address the entire research, development and deployment process. The strong engagement by industry and public service partners that depend on state-of-the-art VA tools will guarantee that users will be involved from the start and will participate in the definition of the applied research agenda. The partners will, in turn, gain access to front line research, prototypes and components for integrating new and innovative VA tools.

Gracias por visitar el sitio de Juantxo Cruz

Postal addresses

Linköping
All units but the Faculty of Health Sciences
Linköping University
SE-581 83 LINKÖPING
Sweden

Tel: +46 13 28 10 00
Fax: +46 13 14 94 03
e-mail: liu@liu.se
Please notice that questions regarding study programmes, admission, application procedures, enrolment etc, should be sent to studyinfo@liu.se

Faculty of Health Sciences
Hälsouniversitetet
Universitetssjukhuset
SE-581 85 LINKÖPING

Tel: +46 13 22 20 00

Norrköping
All units
Linköping University
Campus Norrkšping
SE-601 74 NORRKÖPING

Tel switchboard: +46 11 36 30 00
Fax: +46 11 26 58 50

Economist: http://www.economist.com/britain-in-context/
OECD: http://www.oecd.org/innovation/strategy/charting
Statistics Denmark: http://www.dst.dk/OmDS/BagTal/Arkiv/2010-05-06-Motorcykler.aspx
OECD: http://vitagate.itn.liu.se/GAV/development/testVislet/
SCB and Eurostat: http://swedeneurostat.blogspot.com/2010/03/education-in-eu-example-with-vislets.html#links
Goteborg City: http://www.samhallsutvecklingen.se/413/stora-inkomstskillnader-i-goteborg/
OECD eXplorer: http://www.ncomva.com/?p=125 (NComVA Vislet demo with OECD eXplorer ageing population in EU 1990-2008).
OECD Factbook: http://www.ncomva.com/?page_id=111 (NComVA Vislet Demo with OECD Factbook – fertility versus women employment rate for 1970-2006)
OECD Regional development: http://www.oecd.org/gov/regional/statisticsindicators
World eXplorer: http://www.ncomva.com/?page_id=297/

GRAPHICS: Los valientes de Atacama

Gracias por visitar el sitio de Juantxo Cruz

Ariel Fernández, bravo infografista de LA TERCERA de Chile, es muy sincero.
Aquí un pequeño relato sobre la cobertura visual de su departamento, una aventura periodística única que ha puesto a los diarios chilenos y, en especial, a la Tercera en el planeta de la infografía. Durante muchos días, han sido la referencia mundial, desde Hong Kong hasta Londres, pasando por Nueva York.

TODO ESTABA CONTADO
‘Después de la urgencia de la cobertura diaria del accidente de los mineros llegamos a un punto que ya habiamos contado visualmente todo o al menos lo más importante’.

ADELANTARSE
‘Apostamos como sección de infografía a mostrar lo que sería noticia al día de publicación o al siguiente, apostamos por adelantarnos a los hechos hasta donde pudiésemos’.

EN EL TERRENO
‘Con fuentes anónimas para el público, pero con nombre, apellido y cargo para nosotros, un gran reporteo en terreno de uno de nosotros, Heglar Fleming, una excelente investigación de la periodista Carolina Araya desde Santiago, miembro de nuestra sección, y la inquietud de respuestas de todo el equipo de infografía’.

EQUIPO PEQUEÑO
‘Y obvio, la materialización, ya sea directa o indirecta de todo el equipo (que no está demás decirlo, 4 infografistas en Santiago para cubrir mineros, economía, internacional, todo lo demás’.

INFORMACIÓN AGOTADA
‘Conversando con la Directora de Arte, veíamos que nos venían por delante. A esas alturas no encontrábamos ninguna información que pudiese darse por parte de nosotros, que siguiera adelantándose a los hechos’.

LA COMPETENCIA
‘Habíamos llegado a un punto en que lo que se leyera mañana debimos haberlo publicado ayer, y no es lo que buscábamos. Ahí le comenté que sentía que le debíamos al lector un gran resumen visual de los 69 días, un documento histórico que resumiese todo el accidente. Al día siguiente lo publicó nuestra competencia, El Mercurio, por lo que descartamos dicha idea. Pero todavía así debíamos hacer ese gráfico. Así que optamos por llevarlo en internet’.

ESPECIAL MULTIMEDIA
‘Este especial lo realizaron algunos colegas. Nos dimos cuenta que teníamos varios trabajos ‘on line’, pero que con el transcurrir de los días careció de orden cronológico y de actualizaciones de datos, así que se reordenó y se actualizaron los datos’.

Abrazos y felicidades a su equipo, especialmente a Jorge Cortés, que fue padre en medio de toda esta historia.