A día de hoy, hablar de animación web provoca un poco de nerviosismo debido al mal recuerdo que nos ha dejado nuestro queridísimo amigo flash.

Como ya sabemos, las animaciones flash tienen un peso desproporcionado, por lo que provocan lentitud en la página que lo contenga. Ojala fuera esto lo único que podemos achacarle a flash, pero lo cierto es que sus defectos no acaban en su lentitud de carga, sino que además vulneran la seguridad de tu navegador, poniéndolo a disposición de cualquier malvado con muchos conocimientos y muy pocas buenas ideas. Pero no acaba aquí, debido a estas y alguna desventaja más, los productos de muchas de las compañías más poderosas dentro de internet no son compatibles con él, como Facebook, Apple, Mozilla…

En esta odisea, en la que intentábamos darle más vistosidad y diseño a la web sin saturarla demasiado, cosa prácticamente imposible para la mayoría de los mortales, apareció la luz… HTML5.

Animaciones web con HTML5

El HTML es una tecnología que se utiliza hace 20 años para desarrollar websites con código HTML. La novedad del HTML5 es que posibilita reproducir contenido multimedia sin la necesidad de alguna aplicación de reproducción, o algún plugin. Además, no existe la necesidad de contar con ningún programa para editar los videos, con un editor de texto es más que suficiente para poder hacerlo. Pero no acaban aquí las ventajas de este, sino que a diferencia de flash, tiene coste 0, ya que como he dicho no necesitas de ningún programa para crear estas animaciones.

Cómo hacer animaciones web

Pero no he venido a hablaros de esto exactamente, como dice el título, quiero descubriros un programa que deja al alcance de tu mano, y no me refiero a la de los programadores, sino a la mano de cualquiera, el hecho de crear tus propias animaciones HTML5.

Cómo crear animaciones con HTML5

Como no podía ser de otro modo, este programa de diseño, viene de la mano del gigante Google, que como ya sabemos, va por delante del resto y aunque aún solo han sacado la versión beta, este ya nos permite crear multitud de animaciones con una facilidad sorprendente. La descarga de este programa es de lo más sencilla y podéis encontrarla en Google Web Designer, completamente gratuita.

Animaciones web con Google web designer

En este artículo no pretendo hacer un tutorial sobre esta herramienta, sino haceros un breve resumen de las posibilidades que ofrece y su funcionalidad, y al que le parezca interesante, que comience su andadura en solitario, aunque no temáis, “You will never walk alone”, ya que Google ha abierto un grupo en su foro sobre Web Designer administrado por los programadores que diseñaron la aplicación para que os puedan ayudar y resolver todas las dudas que tengáis, y por experiencia propia, son realmente rápidos y efectivos. Podéis comprobarlo aquí.

Además de esto, contáis con varios tutoriales por YouTube, donde te dan un curso básico del funcionamiento de la herramienta.

Animaciones con Google Web Designer

Ahora, me gustaría comentaros las opciones que tenéis a la hora de crear una animación web:

Crear animación con Google web designer

Como veis, el programa, al crear un nuevo archivo, te da la posibilidad de escoger entre las distintas plantillas pre-configuradas, dependiendo del tipo de animación que quieras hacer.

Entre las opciones, ya vemos la posibilidad de configuración específica para banners, donde la facilidad de creación hace incomprensible que siga habiendo empresas que paguen 350 euros por banner, cuando con este programa la creación no te quitaría más de 50 minutos.

Interfaz de Google Web Designer

También me gustaría enseñaros la interfaz gráfica del programa, que tiene una mezcla de estilos entre Photoshop y cualquier editor de video que se precie, con una línea de tiempo que te permite controlar los movimientos por milisegundos.

Interfaz Google web designer

Lo mejor de este programa si tienes algo de conocimiento en la programación de HTML, es la posibilidad de hacer cambios en el propio código de la animación si ves que tienes limitaciones con la interfaz, algo parecido a lo que te hacía Dreamweaver, pero obviamente con una mejora de calidad considerable.

Desventajas de Google Web Designer

Dicho esto, me veo obligado a contaros las desventajas que aún acarrea este programa, ya que en esta vida no solo puede haber cosas buenas.

Al estar en la versión Beta, veremos algunas funcionalidades limitadas, o algo inestables, pero con un poco de maña son fáciles de solucionar. El mayor problema lo encontraréis en que al ser un programa con tan poco tiempo de vida, no existe mucha información en internet sobre dicha herramienta, y la mayoría de las que hay, las encontraremos en inglés, por lo que si tienes problemas de idioma, suma un hándicap más. Pero como todo en esta vida, puedes ver el vaso medio lleno o medio vacío, ya que para encontrar la manera de hacer ciertas animaciones, no te quedará más remedio que investigar a base de prueba y error para sacar la solución, y no hay mejor manera de aprender que esta. Dado que no hay mucha gente actualmente trabajando de manera profesional con este programa, no veas como imposible ser uno de los futuros expertos de esta maravillosa interfaz.

Por último, comentar que Google ofrece un certificado gratuito, en el que de forma oficial puedes demostrar que eres competente en la utilización de esta herramienta. Podéis sacároslo aquíPodéis sacároslo aquí.

Dicho esto, solo me queda animaros a que lo probéis y que este artículo os haya sido de utilidad.

1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5,00 out of 5)

Cargando…

Coti Aguirre

(Colaborador de SEO Wolf)

Programador, comenzando pero inventando  a la vez. Tras haber pasado por varias empresas con distintas funciones dentro del departamento de IT, ahora me dedico a hacer mis pinitos de programación web en solitario.

GOD SAVE THE QUEEN!

Resumen
Animaciones web al alcance de tu mano
Nombre del artículo
Animaciones web al alcance de tu mano
Descripción
Descubre la fantástica herramienta Google Web Designer (aun en fase Beta), con la que crear animaciones web en HTML5 sin necesidad de programación.
Autor
Editorial
SEO Wolf
SEO Wolf Newsletter

Suscríbete a nuestra Newsletter

Únete a nuestra lista de correo para recibir las últimas noticias y actualizaciones de nuestro equipo.

Gracias por suscribirse