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/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">
<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>
tunelko
marzo 9, 2012Hola,
En primer lugar LungoJs no ofrece métodos directos para acceder a tu hardware: no hay acceso a cámara, por ejemplo. No necesitas ninguna entorno / editor concreto, ni tan siquiera un servidor web donde hacer pruebas (lo ejecutas en local). Sólo un navegador webkit compatible que cumpla los mencionados estándares (no pruebas LungoJs con Firefox, no te a funcionar). Pruébalo en un entorno real accediendo vía iPad, navegador de tu móvil, etc … Y si quieres simuladores, me temo que el que te muestro en el video sólo está disponible para Mac OS X ya que está dentro del paquete XCode, entorno de desarrollo de aplicaciones MAC OS X, iPad,Iphones,…. Que yo sepa no existe esto en Windows. De las funcionalidades que comentas, todas excepto el acceso a cámara, están soportadas.En resumen, no puedes acceder a nada que esté en el dispositivo o en la SD (agenda, contactos, fotografías, acelerómetro… ) a no ser que combines phoneGap + LungoJS (yo no lo haría) o programes específicamente una base de tu aplicación en LungoJS y luego desarrolles en Android SDK, Objective-C, etc..
Si conoces HTML5, su funcionalidad y filosofía , tienes mucho ganado con LungoJS. Para ser sincero, a mi phonegap no me termina de convencer por dos motivos: su limitada API y porque si tengo que hacer algo de forma nativa, lo hago, no necesito una librería con métodos en JS para acceder a lo que ya me ofrecen API’s como la de Android y demás. No sé si me explico.
Con respecto a la base de datos … es HTML5 …. es decir, es sqlite y el propio LungoJs tiene implementados métodos para acceder a ellos. Te recomiendo un enlace para saber en profundidad que es eso de HTML5 http://www.html5rocks.com/en/mobile
Un saludo !
Novato
marzo 9, 2012Perfecto. Muchas gracias ! Me has servido de mucho para aclarar conceptos.
He visto algunos simuladores de android para windows. Voy a ir probando.
Saludos
tunelko
marzo 9, 2012Para Android instálate el Eclipse con el plugin AVT + Android SDK.
http://developer.android.com/sdk/installing.html
De nada !
Novato
marzo 8, 2012Interesante ejemplo que me despiertan algunas dudas:
¿Una aplicación hecha con lungojs no queda empaquetada como una aplicacion phonegap? ¿Son simplemente páginas html como cualquier pagina web?
¿Que plataforma de desarrollo utilizais?
Gracias
tunelko
marzo 9, 2012Hola,
LungoJS es un framework de desarrollo para aplicaciones móviles cuya característica principal es la compatibilidad con HTML5, CSS3 y Javascript. No tiene nada que ver con phonegap. Este último es una especie de ‘pasarela’ o librería (.jar) que permite el desarrollo en las plataformas móviles que describen en su web. Es decir, tiene su propia API. A diferencia de otros frameworks para móviles, LungoJS se centra en estos dispositivos, siendo así mucho más rápido y ligero. Dicho esto, sí, se puede decir que con LungoJS puedes desarrollar webapps solo tocando estas tecnologías: HTML5, CSS3 y Javascript. No necesitas nada mas.
Se pueden crear webapps compatibles sin necesidad de centrarse en un único o varios lenguajes o SDKs (Android, iOS,blackberry,…) ya que todos estos lenguajes tienen ‘webviews’ donde presentar la información que te interesa, es decir, tu aplicación.
No se utiliza ninguna plataforma de desarrollo específica pero se pueden crear ‘webapps’ para las plataformas especificas de cada dispositivo solo presentando la webvview y añadiendo la compatibilidad Javascript. En definitiva, aprovecha las características de los móviles más recientes. En otros posts hablaré de como ‘paquetizar’ con LungoJS una aplicación para Android o iOS en unas pocas lineas de dichas plataformas de desarrollo.
Por último, gracias por tu mensaje y como aclaración, yo solo soy un entusiasta de LungoJS, no tengo nada que ver con su desarrollo, aunque si me he unido de forma activa a su comunidad y he descubierto numerosas posibilidades para desarrollar aplicaciones móviles. No descartes desarrollar de forma nativa, pero si tienes que elegir un framework HTML5/CSS3/Javascript, este es el tuyo.
Novato
marzo 9, 2012Hola de nuevo.
Parto de cero en este entorno y antes de empezar quiero estar seguro de haber escogido el mejor camino en cuanto a que no me de problemas de portabiliadad, que sea «pequeño» y efectivo y esto es lo que a priori creo que esta solucion proporciona.
Mis necesidades son:
– crear menus i formularios facilmente y con estéteica decente.
– acceso a una base de datos para guardar la info
– acceso a la camara
– acceso a la geolocalización
No sé si deberia ir por phonegap + lungojs o lungojs solamente. De momento no me importa el método de distribución via markets o qualquier otro.
Creo que me he expresado mal al comentarte en que plataforma trabajais. Me referia a editor/simulador/compilador… Veo que tu video esta hecho sobre un mac. En entorno windows sabes que editor/simulador es el adecuado para empezar a «jugar» con lungojs.
Tengo la necesidad de meterme ya en el tema, con proyectos pequeños, y en principio quiero hacer las pruebas con un adroid (galaxy mini) i desde windows. Si me puedes recomendar herramientas te lo agradezco y/o alguna lista-forum. Yo vengo del entorno microsoft c,vb i despues .net y soy absolutamente novato en vuestro entorno. No me atrevo a entrar en la lista de lungojs sin antes haberme hecho un esquema claro de la metodologia a seguir en este entorno y haber escrito mis primeras pruebas.
Luego distribuir una aplicacion hecha en html5/javascript/lungojs (sin phonegap) seria como hacer un zip de una carpeta con todos los archivos?
Y finalmente otra pregunta. La base de datos que maneja lungojs/html5 es similar a sqlite o es algo mas bàsico?.
Gracias
p.d. estaré atento al post de «paquetizar».
Tunelko. A technology point of blog. - LungoJS: Un primer diseño con navegación (y II)
marzo 8, 2012[…] Un primer diseño con navegación (y II) 8 marzo, 2012 por tunelko Leave a Comment TweetEn el primer post de esta serie de dos, como podemos crear en dos minutos un template para navegar entre articles a […]