LungoJS,

LungoJS, aplicaciones móviles con HTML5, CSS3 y Javascript

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í