LungoJS,

LungoJS: Un primer diseño con navegación (y II)

0
Shares

En el primer post de esta serie de dos, como podemos  crear en dos minutos un template para navegar entre articles a través del elemento aside. Dábamos un repaso a atributos como data-target, data-icon y data-image viendo estos atributos HTML5 fundamentales para nuestra estética y navegación.

Como complemento al post de ayer, vamos a ver cómo podemos navegar entre secciones suigueindo la misma filosofía del data-target y sin entrar todavía a ver nada de LungoJS. Veíamos que había un elemento en el aside llamado Configuración que tenía este aspecto:

 <a href="#pagina-dos" data-target="section" data-icon="items">Configuración</a>

Si nos fijamos, apunta a pagina-dos y tiene como data-target, un section. Es ésta parte del marcado:

        <section id="pagina-dos">
            <header data-title="WebApp - Página Dos" data-target="back">
                <a href="#back" data-target="section" data-icon="left" class="button onright"></a>
            </header>

            <footer class="toolbar">
                <nav>
                    <a href="#a1" data-target="article" class="current" data-icon="home">Home</a>
                    <a href="#a2" data-target="article" data-icon="calendar">Eventos</a>
                    <a href="#a3" data-target="article" data-icon="map">Ubicación</a>
                    <a href="#a4" data-target="article" data-icon="files">Archivos</a>
                    <a href="#a5" data-target="article" data-icon="items">Configuración</a>
                </nav>
            </footer>

            <article id="a1">A-1</article>
            <article id="a2">A-2</article>
            <article id="a3">A-3</article>
            <article id="a4">A-4</article>
            <article id="a5">A-5</article>

        </section>

 

¿Qué tenemos nuevo por aquí? Dos partes, dentro del header de pagina-dos, un botón para volver a la pagina-home y un footer que implementa un pequeño menú.  Os dejo con el código completo y el video demostración.

<!doctype html>
<html manifest="index.appcache">
    <head>
        <meta charset="utf-8">
        <title>LungoJS: Cómo definir tu webapp con template.</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>
                <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>
            <article id="configuracion">Configuración</article>

        </section>

        <section id="pagina-dos">
            <header data-title="WebApp - Página Dos" data-target="back">
                <a href="#back" data-target="section" data-icon="left" class="button onright"></a>
            </header>

            <footer class="toolbar">
                <nav>
                    <a href="#a1" data-target="article" class="current" data-icon="home">Home</a>
                    <a href="#a2" data-target="article" data-icon="calendar">Eventos</a>
                    <a href="#a3" data-target="article" data-icon="map">Ubicación</a>
                    <a href="#a4" data-target="article" data-icon="files">Archivos</a>
                    <a href="#a5" data-target="article" data-icon="items">Configuración</a>
                </nav>
            </footer>

            <article id="a1">A-1</article>
            <article id="a2">A-2</article>
            <article id="a3">A-3</article>
            <article id="a4">A-4</article>
            <article id="a5">A-5</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>

Video:



1 comentario

favio

noviembre 7, 2013

EXECELENTE APORTE NO HAY MUCHA INFORMACION SOBRE LUNGO EN ESPAÑOL TE AGRADEZCO MUCHO EL APORTE QUE HACES Y TAMBIEN CONSULTARTE SI SE PUEDE INTRODUCIR MAPAS DE OPEN STREET MAP Y GOOGLE MAPS

Responder

Leave a Reply

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.