Para desarrollar aplicaciones en dispositivos móviles tenemos numerosas posibilidades en cuanto a lenguajes, plataformas y entornos de desarrollo. Principalmente, hay dos opciones: crear aplicaciones nativas para cada dispositivo con su respectivo lenguaje o crear una ‘webapp‘ compatible para HTML5, un lenguaje de marcado que está en auge debido a las numerosas funcionalidades que a dia de hoy ofrece. En esta entrada vamos a explicar como empezar a utilizar uno de los más recientes frameworks para aplicaciones móviles, LungoJS, un gran trabajo de desarrollo de la mano de Javier Jiménez que está mantenido por el propio Javier Jiménez y Guillermo Pascual (TapQuo).
LungoJS: La sencillez de lo estándar
LungoJs basa su filosofía en crear aplicaciones partiendo de la premisa de utilizar todo el potencial de los estándares de la industria web mas recientes: HTML5, CSS3 junto a Javascript. A diferencia de otros frameworks como JqueryMobile o Sencha se centra en dispositivos móviles más recientes no manteniendo retrocompatibilidad para dispositivos que dentro de unos meses no tendrán demasiado uso. Esto lo hace bastante ligero y nos permite centrarnos fácilmente en este tipo de desarrollo. La curva de aprendizaje es realmente rápida, sobre todo echando un vistazo a las explicaciones y vídeos que el autor ha puesto a nuestra disposición en la red.
Primeros pasos con LungoJS
Después de bajarnos la última versión a fecha de esta entrada nos damos cuenta que podemos ‘meterle mano’ sin necesidad de tener un servidor web ya que utiliza toda su programación en el front-end pudiendo así probar todo su potencial en navegadores compatibles con HTML5, actualmente la mayoría, pero específicamente lo podemos hacer en Safari o Chrome, ya que Firefox no es completamente compatible con los comentados estándares. Mejor aún, podemos probarlo en dispositivos móviles o simuladores (ios ,android) de estos. Vamos a ver que estructura tiene lo que nos hemos bajado:
Todo está contenido con un único index.html donde podemos organizar nuestra navegación a través de sections(<section></section>)y artciles(<article></article>), asides, para la navegación lateral (<aside></aside>) y footers (<footer></footer>). Lo primero que debemos tocar es el app.js, descomentando para definir allí nuestra instancia del objeto App:
var App = (function(lng, undefined) {
//Define your LungoJS Application Instance
lng.App.init({
name: 'BuscaTweets',
version: '1.1'
});
return {
};
})(LUNGO);
Vamos a ver ahora que tenemos en el index.html, sobre todo fijarnos en la parte final del archivo donde carga todo lo referente a LungoJS:
<!doctype html>
<html manifest="index.appcache">
<head>
<meta charset="utf-8">
<title>LungoJS</title>
<meta name="description" content="">
<meta name="author" content="Javier Jiménez Villar (@soyjavi)">
<!-- Mobile viewport optimization http://goo.gl/b9SaQ -->
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta http-equiv="cleartype" content="on">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- For iPhone 4 with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/images/icon@2x.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/images/icon-72.png">
<link rel="apple-touch-icon-precomposed" href="assets/images/icon.png">
<link rel="apple-touch-startup-image" href="assets/images/default.png">
<!-- Main Stylesheet -->
<link rel="stylesheet" href="./lungo.js/lungo-1.1.2.min.css">
<link rel="stylesheet" href="./lungo.js/lungo.theme.default.css">
</head>
<body class="app">
<!--
First, you have to do is create a LungoJS Application instance in the file app.js.
...and use a Webkit browser as Chrome or Safari.
-->
<section id="hello_world">
<header data-title="Hello world!">
<a href="#" data-target="aside" data-icon="files" class="button"></a>
</header>
<footer></footer>
<aside></aside>
<article></article>
</section>
<!-- LungoJS (Production mode) -->
<script src="lungo.js/lungo-1.1.2.packed.js"></script>
<!-- LungoJS - Sandbox App -->
<script src="app/app.js"></script>
<script src="app/data.js"></script>
<script src="app/events.js"></script>
<script src="app/services.js"></script>
<script src="app/view.js"></script>
</body>
</html>
Tenemos un section con un header, un footer, un aside y un article. Estos elementos se van a visualizar nada mas descomentar las líneas del app.js, teniendo este aspecto:
Por ahora tenemos un bonito «Hello World» con una interfaz totalmente neutra, pudiendo nosotros extender dicha interfaz a través de la creación de nuevos temas con css3. Esto es un comienzo, para aquellas personas que no conocían LungoJS. En próximas entregas voy a ir explicando como podemos dotar a nuestra interfaz de la lógica de navegación, tarea bastante intuitiva conociendo HTML5 y de la mano de este framework.
Podéis ver mas vídeos de LungoJS y participar en su comunidad aquí
Tunelko. A technology point of blog. - LungoJS: Un primer diseño con navegación
marzo 8, 2012[…] Un primer diseño con navegación 7 marzo, 2012 por tunelko Leave a Comment TweetEn la entrada anterior, comentaba la estructura básica de una webapp con LungoJS y el aspecto que ofrecía ésta nada mas […]