Herramientas para producir objetos interactivos con estándares abiertos

En los últimos años los estándares abiertos han experimentado muchas novedades, por lo que en este artículo te daremos algunas herramientas para la producción de objetos interactivos con los lenguajes libres HTML5 y CSS3 que puedes tener como base para cualquier desarrollo web de calidad.

Pero, ¿qué es el HTML5 y CSS3?

html5

HyperText Markup Language (versión 5), es la quinta versión del lenguaje básico de la World Wide Web, HTML que es el código fuente de los sitios web. HTML5 surge como una evolución lógica del estándar anterior y por la necesidad de lograr que dichos sitios y aplicaciones en red puedan soportar lo último en elementos multimedia y que ser ejecutadas en dispositivos móviles, que de hecho, ese es uno de los objetivos principales para lo cual el estándar fue pensado.

Las novedades de esta nueva revisión del estándar es que posee nuevos elementos y atributos que permiten que los sitios web tener una apariencia moderna e innovadora, incluyendo mayor interacción en los contenidos que presenta (sin necesidad de utilizar plugins externos). Así mismo, HTML5 permite que sea posible mejorar la velocidad y visualización de las páginas web en dispositivos móviles, ofrece mayores posibilidades a la hora de codificar el diseño web utilizando menos código y los grandes navegadores (Chrome, Mozilla Firefox, Safari, Opera, Internet Explorer) ofrecen compatibilidad con este estándar.

CSS3

Hoja de estilos en cascada o CSS3 (siglas en inglés de cascading style sheets) es la ultima versión de CSS que es el lenguaje que proporciona estilo o la apariencia de las páginas web.

Las novedades la nueva versión de este lenguaje es que trae elementos mucho más avanzados que combinado con el HTML5 permite desarrollar paginas web más atractivas. De esta manera CSS3 introduce nuevos estilos para presentar interfaces mas sofisticadas, aumenta las capacidades para que los navegadores soporten las características y presentación de los contenidos basados en HTML, a través de simples definiciones de CSS se desarrollan complejas interfaces visuales, soporta Media Queries que permite a diseñadores y desarrolladores crear estilos que se adapten a dimensiones específicas de pantalla, así como también introduce animación y transformaciones a través de estilos CSS.

A continuación, se presentan algunas herramientas con sus respectivas características para la producción de objetos interactivos con tecnologías HTML5 y CSS3.

HTML5 MAKER http://html5maker.com/ html5maker

Es una aplicación que permite crear banner animados y presentaciones desde el propio navegador (en linea) sin necesidad de descargar el programa. No requiere de registro para acceder directamente al panel de edición. Ofrece una cuenta Premium para más posibilidades de edición. El entorno es muy amigable, intuitivo y simple de usar por lo que en pocos pasos puedes crear una presentación. Contiene plantillas predeterminadas que se pueden usar y editar. HTML5 Maker funciona a la perfección en todos los navegadores web. Además crea animaciones responsive, que se adaptan a las pantallas de los dispositivos móviles. Exporta los archivos en Javascript, HTML5 o Flash (SWF).

MOOVLY https://www.moovly.com/

moovly

Es una herramienta en linea que permite crear fácilmente vídeos animados y otros contenidos multimedia desde el propio navegador sin necesidad de descargar el programa. Se requiere registro en la web para su uso. La aplicación ofrece servicio gratuito y también de pago. La versión gratuita permite crear presentaciones de hasta 10 minutos con múltiples opciones y con la versión paga se puede acceder a características más completas de la herramienta. Moovly es compatible con todos los navegadores web. Posee gran variedad de imágenes prediseñadas y la opción para añadir las propias que posibilitan infinitas combinaciones. Además se caracteriza por ser una mezcla entre flash, movie maker y powerpoint en una única herramienta. Los archivos se descargan en formato mp4 o Flash, para publicarlo en youtube, facebook o compartirlo.

ANIMATRON https://www.animatron.com/

animatron

Es una aplicación web gratuita que crea fácilmente animaciones y contenido interactivo en formato HTML5 sin necesidad de descargar el programa. La aplicación ofrece versión paga y también gratuita, por lo que se puede probar la herramienta sin registro durante 14 días e indefinidamente con un registro gratuito, pero sin registro no permite guardar el proyecto; aunque presenta bastantes limitaciones. El entorno es muy amigable y fácil de usar. Animatron es compatible con muchos navegadores. Cuenta con todas las herramientas necesarias para el diseño por lo que no es necesario tener amplios conocimientos de programación web. Además permite la colaboración en línea, es decir, que con solo enviar el enlace del proyecto a otro usuario juntos pueden trabajar en el mismo proyecto. El archivo generado puede ser publicado como un vídeo, gif o en HTML5 para ser integrado en un sitio web.

MUGEDA https://www.mugeda.com/

mugeda

Es una app que no requiere de descarga ni instalación para crear y distribuir contenidos de animación basadas en HTML5 que pueden ser visualizadas en todas las pantallas, incluyendo PC, Móvil, Tablet y Smart TV. La herramienta requiere registro en la web para su uso con una versión gratuita con características básicas. También ofrece la versión paga con características más completas de la herramienta. El entorno de trabajo de Mugeda es sencillo, similar a otras herramientas de maquetación y puede ser visualizado en todos los navegadores web. Con el uso de la aplicación los contenidos móviles se hacen más atractivos con imágenes, vídeos, audio, animaciones, interacciones, acciones. Si eres un desarrollador experimentado puedes usar la API (Application Programming Interface) para crear aplicaciones y además proporciona una plataforma única donde programadores y diseñadores trabajan colaborativamente.

TWEENUI http://tweenui.com/

tweenuiTweenUI es una aplicación web para crear anuncios gráficos o animaciones HTML5/ JavaScript para tu web que no requiere instalación por lo que las animaciones se crean directamente desde el navegador. No requiere de registro para acceder directamente al panel de edición online. El entorno es fácil de usar y no requiere ningún tipo de plug -ins. Los archivos se ejecutan en todos los navegadores y en todos los dispositivos (incluyendo los teléfonos iPad, iPhone y Andriod). La herramienta publica la animación directamente en cualquier página web o aplicación móvil con sólo unas pocas líneas de JavaScript.

GOOGLE WEB DESIGNER https://www.google.com/webdesigner/

GoogleWebDesigner

Es la última herramienta de Google que pone a disposición para el desarrollo de sistemas interactivos de sitios HTML5 y gráficos en movimiento que se pueden ejecutar en cualquier dispositivo. Es una aplicación que requiere de instalación. La descarga es gratuita y es instalable para Windows, Mac y Linux. Su interfaz visual permite alternar cómodamente entre la vista de diseño y la de código. Es compatible con todos los navegadores web. Ofrece funciones de animación avanzadas como la manipulación 3D en un editor visual (entorno WYSIWYG), objetos y diseños 2D. Google Web Designer posee dos maneras de edición: modo rápido o el avanzado. Además de diseñar proporciona integración con Google Drive, DoubleClick Studio y Ad Words. Así mismo, para los desarrolladores el código generado puede ser editado o ajustado y el resultado se muestra de forma automática. Es una aplicación perfecta tanto para diseñadores web profesionales como para personas sin conocimientos de programación que quieran crear sus propios anuncios, banners o animaciones.