Frameworks para el desarrollo de aplicaciones para dispositivos móviles basados en tecnología web

En el desarrollo de aplicaciones para dispositivos móviles se puede indicar tres tipos de aplicaciones: aplicaciones basadas en tecnología web, aplicaciones nativas y aplicaciones hibridas.

Las aplicaciones basadas en tecnología web son básicamente páginas web que interactúan dinámicamente mediante Javascript y pueden presentar un diseño similar a una aplicación nativa, sin embargo tienen algunas limitaciones en cuanto a la interacción con el hardware del dispositivo debido a que deben ser ejecutados en un navegador instalado en el dispositivo además que requieren de acceso a internet.

Las aplicaciones nativas son desarrolladas en el lenguaje que es soportado por el sistema operativo del dispositivo móvil, por ejemplo Objective C para IOS o Java para Android, mediante el cual se puede tener acceso a todas las características del hardware del dispositivo, sin embargo la aplicación es ejecutada solo en el sistema operativo para el cual fue desarrollado.

Las aplicaciones hibridas es una fusión de los conceptos de aplicación basada en tecnología web y nativa. El código nativo es proporcionado por medio de un framework que tiene un API de Javascript con el cual el código Javascript de la aplicación puede acceder algunas funciones del hardware del dispositivo móvil, como ser tomar fotografías con la cámara, acelerómetro y otras. Los archivos de la aplicación hibrida son almacenados localmente, por lo cual no se requiere de un navegador y acceso a internet para que la aplicación sea ejecutada.

apps-hibridas

HTML5 se está convirtiendo en la mejor alternativa para el desarrollo de aplicaciones multiplataforma, por lo cual se puede desarrollar aplicaciones móviles hibridas haciendo uso de esta tecnología. Como se indicó anteriormente, se necesita de un framework que permita convertir una aplicación con código HTML5, Javascript y CSS3 en una aplicacion que se ejecute en diferentes dispositivos móviles como iOS, Android, Blackberry y otros, PhoneGap o Apache Cordova es un framework de código abierto con el cual se puede empaquetar el proyecto y distribuirlo en tiendas como Appstore o Google Play.

Se puede desarrollar aplicaciones HTML5 desde cero, sin embargo existen diversos frameworks que permiten desarrollar interfaces similares al de las aplicaciones nativas pero usando tecnología web, es decir HTML5, Javascript y CSS3. A continuación se muestran algunos de los frameworks:

JQuery Mobile
jQuery Mobile

JQuery Mobile es un framework basado en HTML5 optimizado para todas las plataformas de dispositivos móviles, es uno de los más populares y está desarrollado a partir de JQuery y JQuery UI. Su implementación es sencilla y posee amplia documentación, además cuenta con ThemeRoller for Mobile para la creación la temas personalizados aprovechando las ventajas de CSS3.

Sencha Touch 2

sencha

Sencha Touch 2 es una framework para el desarrollo de aplicaciones móviles de alto rendimiento basados en HTML5. Este framework incluye soporte para Blackberry 10 e IE 10 y es compatible con iOS, Android, BlackBerry, Windows Phone y otros. Esta desarrollado a partir de la plataforma HTML5 de Sencha, por lo cual se puede emplear Sencha Cmd, que es una herramienta de línea comando multiplataforma que permite realizar muchas tareas de manera automática como ser generar un nuevo proyecto.

PhoneJS

PhoneJS

PhoneJS es un framework que contiene lo necesario para crear aplicaciones usando HTML5 y Javascript para desarrollar aplicaciones compatibles con los más populares smartphones y tablets. Es compatible para aplicaciones de IOS, Android y WindowsPhone. PhoneJS aprovecha todas las funcionalidades de JQuery y opcionalmente se puede incluir Knockout para el desarrollo de las interfaces de usuario con el modelo MVVM (Model-View-ViewModel).

Kendo UI

kendoUI

Kendo UI es un framework para el desarrollo de sitios web con HTML5 y aplicaciones mobiles. Posee widgets basados en JQuery, una simple y consistente interfaz de programación, un framework MVVM, temas y templates. Permite construir aplicaciones que parecen y se usan igual que una aplicación nativa por medio de un simple código de interfaz de usuario usando solo HTML5 y JavaScript.

Anuncios

Generadores HTML5

HTML5 y CSS3 tienen nuevas características para los que trabajamos en el diseño y desarrollo Web, y en este artículo se pretende mostrar algunas de las mejores herramientas que se necesita para poder dominar estas nuevas características.

Tenemos que recordar que dentro del estándar de la W3C (borrador html5: http://www.w3.org/html/wg/drafts/html/master/) , no solo esta la sintaxis (header, footer, nav, video), sino también herramientas como almacenamiento local, canvas, svg, websocket y todas esas características que visualmente hacen que una Web tenga buena acogida.

También es bueno recordar que estas nuevas características aún no son totalmente compatibles con los motores de renderizado (browser).

A continuación una lista de la que probé:

Generadores HTML5

Los generadores de HTML, son básicamente, una plantilla ya completo y listo para poder trabajar sobre ella. entre las mas importantes están:

INITIALIZR
http://www.initializr.com/

Initializr es un generador de plantillas HTML5 para ayudar a empezar con un nuevo proyecto basado en HTML5 Boilerplate. Genera una plantilla personalizable, limpio, con todo lo que necesita para empezar.

ini

HTML5 Template Generator
http://shikiryu.com/html5/

HTML5 Template Generator es mucho más completa que la anterior opción. Ya que permite agregar características (titulo, descripción, autor, etc.) dentro de un frameword muy robusto como los es Blueprint (http://www.blueprintcss.org/) o sobre HTML5 Boiler Plate (http://html5boilerplate.com/). Además de  agregue librerias  de terceros (jQuery, Google Analitics) muy populares.

html5

Quackit HTML5 Generador
http://www.quackit.com/html/html_generators/html_code_generator.cfm

Este es un generador bastante genérico y básico, el cual permite introducir gran parte de información inicial de un proyecto Web. Lo que realmente llama la atención es que no solo genera HTML, sino también CSS. Para los que recién están aprendiendo a utilizar hojas de estilo en cascada, les caerá como anillo al dedo.

code_generator

Switch to HTML5 Generator
http://switchtohtml5.com/

Este es un generador bastante interesante. Lo que hace es que te permite generar una estructura de forma rápida y fácil, pero a diferencia de HTML5 Boilerplate, éste permite determinar el uso especifico de etiquetas pertenecientes a HTML5 (header, section, nav, aside, footer, etc.).

SwitchToHTML5

Herramientas Web 2.0 para crear presentación online

Las presentaciones digitales son un forma muy común de exponer en diferentes ámbitos (colegio, universidad, empresa o en cualquier reunión que a merite el apoyo de este tipo de elementos). Normalmente la costumbre de muchos es elaborar presentaciones en el conocido “PowerPoint”, pero a veces esto resulta ser algo tan común que puede aburrir a los espectadores y terminar opacando la presentación.

La mejor manera de hacerlo es a través de herramientas que sean llamativas, interactivas y sobre todo que puedan generar un gran impacto, y que mejor que hacer uso de herramientas Web 2.0 que están a nuestro alcance

A continuación un resumen de algunas de ellas:

Prezi

prezi

Prezi es una herramienta de presentación online que permite crear presentaciones con un aspecto visual muy llamativo a las presentaciones. Actualmente es una de más utilizadas. Tiene la opción de poder utilizarse de manera online o también incluye una versión de escritorio pero solo para los planes de pago. Con cualquier plan se puede crear fácilmente presentaciones propias y compartirlas en línea o descargarlos para verlas sin conexión.

SlideRocket

SlideRocket

SlideRocket permite crear presentaciones desde templates existentes o subir tus archivos de PowerPoint. La herramienta permite colaborar con equipos de trabajo para trabajar conjuntamente en las presentaciones, y cada presentación puede ser compartida por una URL o incrustados en páginas web y blogs. SlideRocket incluye información estadística detallada que le permite ver quién ha visto la presentación, de dónde, cuánto tiempo se esaába en cada diapositiva. SlideRocket es de pago y cuesta $ 24 por usuario al mes con una prueba de 14 días disponible gratuitamente.

PreZentit

PreZentit

PreZentit es una herramienta para crear presentaciones de forma gratuita, actualmente se encuentra en fase beta y su única limitación es 250 Mb de almacenamiento de imágenes. Con PreZentit se puede crear presentaciones en línea, y otros usuarios tienen la opción de trabajar en la presentación al mismo tiempo. Las presentaciones creadas tienen la opción de ser públicas o privadas, y se pueden descargar y ver sin conexión. Las presentaciones creadas, tienen un formato de páginas Web, por lo que es factible la edición si asi se lo requiere.

Empressr

Empressr

Con Empressr se puede subir imágenes, vídeo y audio para crear presentaciones online. Las presentaciones se pueden compartir con sus contactos o “incrustados” en páginas Web y blogs. Desde la parte administrativa de la cuenta se puede ver quién y cuántas personas han visto la presentación. Empressr es una herramienta gratuita.

Tiki-Toki

Tiki_Toki

No todas las presentaciones tienen que ser necesariamente de la manera convencional, esta herramienta nos permite mostrar la presentación de manera lineal, en un modo de Linea de Tiempo.

Ahora, y finalmente, si lo que se quiere es realizar la presentación utilizando únicamente código HTML5 y transiciones CSS3, entonces podemos recurrir a librerias como Impress.js, del cual ya se habló en una anterior entrada: http://bit.ly/11SlO37