Artistas Digitales

Los mejores frameworks para crear aplicaciones web moviles [parte 1]

Los mejores frameworks para crear aplicaciones web moviles [parte 1]

En la actualidad existen cientos talvez miles de frameworks escritos en HTML5 para moviles, y literalmente se puede gastar mucho tiempo comparando las ventajas y desventajas. Ya sea que estes por comenzar una nueva aplicacion o continuar una existente, el mejor consejo esque escribas tus propias interacciones DOM y estilos CSS.

Un comun denominador para el modelado de las paginas web moviles es el llamado “Single Page” esto significa puedes poner todo el contenido del sitio dentro de un solo archivo HTML, usualmente separado por tags “<div>” o algun otro elemento de tipo bloque.

Ventajas encontradas en este tipo de frameworks

  • Tiempo de desarrollo reducido.
  • Codificar y programar es menos complejo que en aplicaciones nativas (cualquier plataforma).
  • Código optimizado para trabajar con dispositivos de pantalla táctil.
  • Una sola aplicación,  para multiples dispositivos.
  • La gran mayoría son OpenSource o relacionadas (Las legiones de programadores y codificadores que a diario mejoran el código y documentación).

¿Por que poner todo el contenido bajo un mismo archivo?

La respuesta es facil, inicialmente por todos todos los efectos visuales que se pueden lograr con este tipo de estructura dentro del HTML ya sea mediante JavaScript o efectos nativos del dispositivo.

En segunda instancia se trata de reducir el numero peticiones HTTP lo cual involucra:

  • Reducción en el uso ancho de banda (conveniente si la terminal esta conectado atraves de una red sin WIFI)
  • Reducción en tiempo de carga del sitio (Mas usuarios felices y menos avandonos).
  • Menos peticiones = ahorro de procesamiento
Ahora que entendemos las base de una aplicacion web de este tipo, examinemos nuestros frameworks

Ejemplos de frameworks bajo el modelo “Single Page”

jQuery Mobile

Desde hace poco jQuery se estreno dentro de las interfaces para moviles y desde entonces su uso se a comenzado a esparcir de forma impresionante. jQuery Mobile es una libreria basada en navegacion mediante AJAX, un elemento poderoso de este frameworks es que su apariencia es totalmente modificable atraves de temas.

En la pagina oficial del proyecto se pueden crear temas de forma facil y rapida. Otra forma alternativa es mediante el uso de editores de imagenes como Adobe Fireworks.

Plataformas soportadas

Android, bada, BlackBerry, iOS, MeeGo, Symbian, webOS, and Windows Phone (hay otras mas).

Licencia

GPL 2

Modelo de programacion

CSS y JavaScript – Utiliza el modelo DOM

Ejemplo jQuery Mobile

<!DOCTYPE html><html>
<head>
<title>ArtistasDigitales Movil</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.1.1.min.css"/>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.1.1.js"></script>
</head>
<body>
<div data-role="page">
	<div data-role="header">
		<h1>ArtistasDigitales Movil</h1>
	</div>
	<!-- /header -->
	<div data-role="content">
		<ul data-role="listview" data-inset="true" data-filter="true">
			<li><a href="#">Noticias</a></li>
			<li><a href="#">Tecnologia</a></li>
			<li><a href="#">Tutoriales</a></li>
			<li><a href="#">SEO</a></li>
			<li><a href="#">Social Media</a></li>
		</ul>
		<h3>Recientes</h3>
		<ul data-role="listview" data-inset="true" >
			<li><a href="#">Todo acerca de jQueryMobile</a></li>
			<li><a href="#">Consejos de SEO</a></li>
		</ul>
	</div>
	<!-- /content -->
</div>
<!-- /page -->
</body>
</html>

Resultado

aplicaciones  web framework jquery mobile

jQTouch

Es un framework bueno y simple para comenzar con del desarrollo de aplicaciones moviles. Uno de sus problemas es que casi no existe ducumentaicon.

Plataformas soportadas
Android y iOS
Licencia
MIT
Programming Model
Robusto en CSS, ligero en su API de JavaScript – No soporta extensiones

Ejemplo basico

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQTouch &beta;</title>
<link rel="stylesheet" href="jqtouch.css" title="jQTouch">
<script src="zepto.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jqtouch.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jqt.themeswitcher.min.js" type="application/x-javascript" charset="utf-8"></script>
</head>
<body>
<div id="jqt">
<div id="home" class="current">
<div class="toolbar">
<h1>Artistas Digitales</h1>
</div>
<div class="scroll">
<ul class="rounded">
<li class="arrow"><a href="#">Noticias <small class="counter">5</small></a> </li>
<li class="arrow"><a href="#">Tecnologia <small class="counter">7</small></a></li>
<li class="arrow"><a href="#">Tutoriales <small class="counter">4</small></a></li>
<li class="arrow"><a href="#">SEO <small class="counter">4</small></a></li>
<li class="arrow"><a href="#">Social Media <small class="counter">4</small></a> </li>
</ul>
<h2>Noticias recientes</h2>
<ul class="rounded">
<li class="forward"><a target="_blank" href="#">Todo acerca de jQtouch</a></li>
<li class="forward"><a target="_blank" href="#">Consejos de SEO</a></li>
</ul>
<ul class="individual">
<li><a target="_blank" href="http://twitter.com/!#/artesdigitales_">@artesdigitales_</a></li>
<li><a target="_blank" href="http://twitter.com/!#/dagtok">@dagtok</a></li>
</ul>
<div class="info">
<p>Proyecto desarrollado por Kiibal <br>mas detalles en ArtistasDigitales.com</p>
</div>
</div>
</div>
</div>
</body>
</html>

Resultado

XUI

Es un hijo directo del proyecto phonegap, su estructura esta hecha para aprovechar el poder de JavaScript y no cuenta con elementos graficos ni hojas de estilo. Las aplicaciones generadas son muy ligeras, tiene la capacidad de manipular objetos DOM, soporta, uso de AJAX y algunas animaciones y transformaciones. A diferencia de los anteriores existe una version para plataformas especificas.

Plataformas soportadas

WebKit, IE Mobile, BlackBerry

Licencia

MIT

Modelo de programacion

Limpio, Similar a jQuery. Incluye soporte para plugins

Atencion: La siguiente semana publicaremos frameworks manejados al 100% con JS

¿Te gusto el artículo? Compartelo!!

Acerca del autor

Dejar un comentario