LungoJS,

LungoJS: Un primer diseño con navegación

0
Shares

En la entrada anterior, comentaba la estructura básica de una webapp con LungoJS y el aspecto que ofrecía ésta nada mas descomentar las líneas de la instancia App en app.js. Sin abandonar nuestro index.html, vamos a generar una primera página de bienvenida para manejar los elementos HTML5 que nos van a permitir definir atributos interesantes en nuestra navegación.

Prototipo de navegación

Todo lo que vamos a hacer es definir un menú lateral con nuestra etiqueta ‘aside’ poniendo en su interior los elementos del menú a modo de ejemplo para ver cómo podemos desplazarnos por los items colocados en el citado menú. La etiqueta header es una cabecera para la parte superior de nuestra webapp. Admite atributos html5 como data-title, que nos permite definir un pequeño texto a modo de título. Así que, después de body, metemos nuestra primera section:

 <section id="pagina-home">
            <header data-title="WebApp - Inicio">
                <a href="#" data-target="aside" data-icon="files" class="button onleft"></a>
            </header>
...

Nuestra <section> tiene un id llamado pagina-home, que indica lo que debe llevar nuestro enlace cuando apliquemos data-target=”section”  y dentro del <header> tenemos un enlace cuyo data-target es “aside”, sencillo. Además con sólamente poner data-icon=”files” class=”button onleft” le está indicando que queremos un icono a modo de botón a la izquierda. Seguimos ahora con la etiqueta <aside> y <article>:

...
            <aside>
                <a href="#home" data-target="article" class="current" data-icon="home">Home</a>
                <a href="#eventos" data-target="article" data-icon="calendar">Eventos</a>
                <a href="#ubicacion" data-target="article" data-icon="map">Ubicación</a>
                <a href="#archivos" data-target="article" data-icon="files">Archivos</a>
                <a href="#pagina-dos" data-target="section" data-icon="items">Configuración</a>
            </aside>
            <article id="home"><h2>Home</h2></article>
            <article id="eventos">Eventos</article>
            <article id="ubicacion">Ubicación</article>
            <article id="archivos">Archivos</article>
...

Aquí empezamos a definir el menú aside que recordemos está oculto dependiendo del tamaño de nuestra pantalla, pudiéndose desplegar  con el botón del header. Como veréis, cada href de aside lleva a su correspondiente id de article ya que tenemos un data-target=”article”. Gracias a la propiedad font-face de css3 tenemos iconos con data-icon (aunque podemos poner data-image para poner una imagen). El conjunto de iconos de LungoJS es bastante completo. Si os fijáis, no hay nada en footer, ya que lo abordaremos en en el siguiente post, cuando cambiemos de section :-)

 

 

Sólo nos falta cerrar el section y ver si funciona, os dejo el código completo:

<!doctype html>
<html manifest="index.appcache">
    <head>
        <meta charset="utf-8">
        <title>LungoJS: Un primer diseño con navegación.</title>
        <meta name="description" content="Ejemplos para el blog de tunelko">
        <meta name="author" content="Tunelko (@tunelko)">
        <!-- 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/[email protected]">
        <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">

        <section id="pagina-home">
            <header data-title="WebApp - Inicio">
                <a href="#" data-target="aside" data-icon="files" class="button onleft"></a>
            </header>

            <footer>

            </footer>

            <aside>
                <a href="#home" data-target="article" class="current" data-icon="home">Home</a>
                <a href="#eventos" data-target="article" data-icon="calendar">Eventos</a>
                <a href="#ubicacion" data-target="article" data-icon="map">Ubicación</a>
                <a href="#archivos" data-target="article" data-icon="files">Archivos</a>

            </aside>

            <article id="home"><h2>Home</h2></article>
            <article id="eventos">Eventos</article>
            <article id="ubicacion">Ubicación</article>
            <article id="archivos">Archivos</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>