Una docena de herramientas para hacer tus primeros pinitos con HTML5

HTML5 (HyperText Markup Language, versión 5) es la quinta revisión del lenguaje básico de la World Wide Web, HTML. Su desarrollo está regulado por el consorcio W3C. Todavía se encuentra en modo experimental, aunque ya es usado por múltiples desarrolladores web por sus avances, mejoras y ventajas sobre su antecesor HTML4. Al no ser reconocido en viejas versiones de navegadores por sus nuevas etiquetas, se recomienda al usuario actualizar a la versión más nueva de su navegador preferido, para poder disfrutar de todo el potencial que provee HTML5.

La dupla formada por HTML5 y CSS3 (trío si contamos a JavaScript) conforma el futuro del desarrollo web de aplicaciones y probablemente la única tecnologia multiplataforma para crear aplicaciones para dispositivos móviles. Su impulso más grande ha venido de la mano del desarrollo para dispositivos móviles y parece que HTML5 se va imponiendo poco a poco a la utilización de Flash para la reproducción de vídeo en la web, algo que en parte debemos agradecer a Steve Jobs y su negativa a utilizar Flash en iOS.

Mi compañero @israelozarate7 ya escribió anteriormente sobre herramientas en forma de frameworks que posibilitaban el desarrollo de aplicaciones para dispositivos móviles, algunas de ellas basadas en HTML5 en un anterior post. Esta vez os propongo un recorrido por algunas herramientas para poder empezar a experimentar con HTML5 y la construcción de aplicaciones basadas en lo que será y de hecho está siendo un estándar de facto para el desarrollo de aplicaciones para la web y para dispositivos móviles.

Entre las herramientas que os propongo, existen elecciones para todos los públicos, desde aplicaciones visuales que no requieren apenas conocimientos de codificación, hasta frameworks que requieren de un poco más de conocimiento o experiencia a nivel de programación.

1. Radi

Radi permite crear contenido en HTML5 sin necesidad de aprender código alguno, mediante una sencilla interfaz visual basada en una línea de tiempo. Es una aplicación de diseño visual para Mac OS X, que produce código 100% estándar y legible en HTML5 + JavaScript. Permite la posibilidad realizar animaciones para la web y dibujar vectores sin necesidad de Flash.


Indicado para crear animaciones y páginas web interactivas, aplicaciones móviles e incluso libros electrónicos con formato Apple iBooks, Amazon Kindle 8 y el estándar EPub 3. Su uso es gratuito.

Radi

2. Tumult Hype

Aunque de momento solo está disponible para Mac OS X, es una de las herramientas más recomendables para la creación de animaciones en HTML5 y CSS3 para usuarios sin demasiada experiencia, debido a su buena interfaz gráfica. También cuenta con opciones para usuarios más avanzados.

Permite exportar las animaciones a iBooks Author y se puede integrar con Dropbox para subir automáticamente las animaciones creadas.

Su precio es de 49,99$ y está disponible en la App Store, aunque es posible descargar una versión de prueba. Podéis ver un galería de ejemplos realizados con Hype en la página del producto.


3. CocoonJS

CocoonJS es una plataforma creada por mis amigos de Ludei que permite desarrollar, acelerar y monetizar juegos basados en JavaScript y HTML5, listos para ser distribuidos en la App Store (iOS) y en Google Play (Android). Ofrece soporte completo del DOM y CSS, además de acceso a características de los dispositivos móviles (cámara, GPS, lista de contactos, etc…), canales de monetización (anuncios, IAP, etc…).

Es muy fácil de utilizar, ya que no requiere de un SDK especial. Los juegos se desarrollan en HTML5 y JavaScript y usando CocoonJS launcher, disponible para dispositivos iOS y Android, es posible probar directamente los desarrollos para estos entornos.

4. Sencha

Sencha dispone de un par de herramientas para realizar aplicaciones en HTML5 + CSS3 + JavaScript:
  • Sencha Touch 2: Es un framework para desarrollo de apps para dispositivos móviles. Es compatible con IOS, Android y BlackBerry. Podéis ver algunas demos en su página.

  • Sencha Animator: es una herramienta visual que permite realizar animaciones, incluso utilizando un timeline. Tiene versiones para Windows, Linux y Mac OSX Su precio es de 199$, aunque se puede descargar desde su página una demo del producto.
Sencha Animator

5. Flux

Flux es una aplicación del estilo WYSIWYG para el diseño web basado en HTML5. Es capaz de crear sitios web bastante completos a partir de cero. Flux no es una solución basada en plantillas sino que es un entorno de diseño visual.

Tiene un soporte completo para HTML5 y CSS3, incluyendo mapas de imagen, gradientes CSS3 y fuentes personalizadas. También posee autocompletado, inspector embebido y FTP integrado.

Se puede bajar una demo desde la página del producto.


6. Aptana Studio


Aptana Studio 3, es un entorno de desarrollo Open Source que cuenta con versiones para Windows, Linux y Mac OSX . Permite trabajar con los lenguajes más populares del desarrollo web actual, entre ellos HTML, CSS, JavaScript, PHP, Python y Ruby, entre otros. En sus últimas versiones ha incorporado también la posibilidad de trabajar con HTML5 y CSS3.

Aptana Studio

7. LimeJS

LimeJS es un framework para crear de manera rápida juegos en HTML5 de manera nativa y compatible con todos los dispositivos táctiles y navegadores de escritorio modernos. Posee buena documentación, aunque se encuentra en inglés.


Podéis ver las capacidades de este framework jugando a Voodoo Friends, un juego desarrollado con LimeJS y disponible en la Chrome Web Store.

LimeJS

8. Kendo UI

Construido sobre jQuery, Kendo UI es un framework muy completo con una interfaz de usuario que ofrece todo lo necesario para la construcción de modernas aplicaciones interactivas para la web. Entre otras características, incluye UI widgets y plantillas.

Con Kendo Mobilepodrás crear aplicaciones para dispositivos móviles basadas en HTML5 y con aspecto nativo para iOS, Android y BlackBerry.


Podéis ver algunas demos en la página del producto.

Kendo UI

9. Modernizr


Modernizr es una librería JavaScript Open Source que permite que HTML5 y CSS3 se muestre correctamente en navegadores antiguos que no dan soporte a estos lenguajes. Es muy fácil de usar y hay una amplia documentación online para aquellos que quieran saber más sobre su funcionamiento.

Modernizr

10. 52framework

Este framework es compatible con los navegadores populares y da soporte a HTML5, CSS3, PHP y jQuery, por lo que es una herramienta muy potente para los desarrolladores web. Este framework empezó como un proyecto personal que ha ido creciendo y que ahora ofrece una gran cantidad de recursos.

Podéis ver algunas demos en la página de dicho framework.

52Framework

11. HTML5 Boilerplate


Esta herramienta para HTML5 permite descargar diferentes versiones: con comentarios, sin comentarios o personalizada a nuestras necesidades. Al utilizar el anteriormente citado Modernizr, las páginas web creadas con HTML5 Boilerplate se ven correctamente incluso en navegadores que no dan soporte a HTML5 y CSS3.

HTML5 Boilerplate

12. LungoJS

Lungo es un framework basado en HTML5 y CSS3 y que incluye una API de manejo muy simple. Permite diseñar rápidamente aplicaciones para iOS, Android, Blackberry y webOS, con todas las características para estos dispositivos.


Posee un sitema de plugins denominados Sugars, que permite ampliar el framework con nuevas funcionalidades.

LungoJS

  

Como véis, existen diferentes alternativas para todos los públicos para poder iniciarse en el desarrollo de aplicaciones basadas en HTML5. ¿Utilizas alguna de estas herramientas? ¿Qué opinión te merecen? ¿Qué otras alternativas nos recomiendas en forma de IDEs visuales o frameworks para el desarrollo en HTML5?


Imagen destacada cortesía de svensonsan via photo pin cc

Comentarios

Entradas populares de este blog

Dabbleboard, una pizarra para hacer más productivas las reuniones

Community Managers: Una fórmula sencilla de medir el ROI para Pymes

5 procesadores de texto alternativos y no convencionales