iPhone y Android con el framework Lungo

Este blog se orienta hacia FirefoxOS, pero no pretendemos dejar a un lado otras plataformas. FirefoxOS se programa mediante HTML5 y eso significa que estas mismas apps se podrán utilizar en cualquier dispositivo, aunque no tengan tan buena integración como con FirefoxOS. Por ello una parte de este blog se dedicará a ver como adaptar nuestras aplicaciones a otros dispositivos.

Y con ese objetivo voy a presentaros Lungo, un framework de origen español para el desarrollo de aplicaciones móviles multiplataforma (iPhone, Android, Web, Blackberry,...), basado en HTML5. En un próximo artículo crearé una aplicación tanto para FirefoxOS como para Android usando este framework, que además de la integración en diferentes sistemas promete unas herramientas adaptadas a la construcción de aplicaciones móviles muy interesantes.

Por el momento os dejo con un vídeo de introducción. Es demasiado largo por que se enrollan un poco, y lo que mostrarán aquí probablemente lo veamos en próximos artículos si realmente es tan potente como promete. Pero también resulta interesante por otros comentarios a nivel de desarrollo, tecnología y dinámica de trabajo:

  Habla

JSON y tipos de datos en javascript

JSON es una de las maneras de transferir información en Internet. La gran ventaja de este formato es que en realidad es código javascript y por tanto es mucho más fácil trabajar con el que con XML o simple texto plano. Aprovecharemos este artículo no solo para hablar de este formato, que usaremos en próximos artículos, sino también para conocer los tipos de datos usados en javascript y en casi cualquier otro lenguaje de programación. Los siguientes son enlaces útiles para esta lección:

• Los ejemplos interactivos que se usan en la lección y que describiremos a continuación. Podéis descargar también su código fuente si tenéis curiosidad.
• La referencia de JSON (en inglés), más precisa que lo que comento en el artículo.

Ejemplos interactivos

Antes de comenzar, en el siguiente enlace podréis encontrar unos ejemplos interactivos para la lección. Consiste en una lista de ejemplos que muestran diferentes fragmentos de código que se pueden editar y ejecutar con el botón de debajo. He creado una función llamada "mostrar_en_pantalla", que muestra el contenido que le pasemos como parámetro en el área gris de la derecha:

La idea es simplemente que según vayáis leyendo el artículo podáis probar los distintos ejemplos e intentar hacer cambios para comprobar el resultado, sobre todo a la hora de acceder a contenidos. También veremos al final del artículo que para generar la lista de ejemplos hemos usado JSON, con lo que lo usaremos como ejemplo práctico de lo visto en el artículo.

Para quien tenga curiosidad, la clave del programa está en la función "eval(código)", que es una función de javascript que ejecuta sobre la marcha, el código que le pasemos como parámetro. Así que lo que nosotros hacemos es simplemente pasarle lo que hay escrito en el área de texto.

Tipos básicos

Javascript (y por tanto JSON) permite almacenar números, textos, variables booleanas (que toman valores de verdadero y falso) y también valores nulos (null). Esta es la información básica que se utiliza en estructuras más complejas, como veremos más abajo. Pero por el momento veamos un ejemplo de cada uno de estos casos:

var variable_nula; // Una variable sin valor asignado tiene el valor null
var variable_nula2=null; // También se puede asignar directamente

var booleano=true; // Los booleanos pueden ser ciertos (true) 
var booleano2=false; // o falsos (false)

var numero=10; // Número entero
var numero2=-15.5; // Número negativo decimal
var numero3=5.5+e3; // Equivale a 5,5 x 10 elevado a 3 = 5500

var texto="Hola mundo"; // El texto se identifica por ir entre comillas

// Si el propio texto tiene comillas se le pone una barra delante
var texto2="Este texto tiene\"comillas\"";

// Se pueden meter barras (\\), tabulación (\t) y saltos de línea (\n)
var texto3="Texto con \\, tabulador:(\t) \n Esto es una nueva línea" 

Los números, como habréis visto, pueden usar el punto para usar decimales, y el guión para valores negativos, y también permiten fórmulas exponenciales para valores muy grandes o muy pequeños (ej: 10.5e+6 significa 10,5 millones).

Los textos en principio son cualquier cadena situada entre comillas dobles (") o simples ('), aunque hay varias excepciones indicadas por una barra invertida que las precede: Si hemos de escribir comillas dentro del texto deberemos anteponer una barra invertida (\") para diferenciarlas de las barras de apertura y cierre, y lo mismo si queremos escribir la barra invertida, que habremos de escribirla dos veces (\\). Las barras también nos permiten hacer saltos de línea (\n) y tabulaciones (\t).

En los ejemplos podéis probar a modificar los números y textos y comprobar el resultado.

Arrays

Un array es una lista de elementos. Pueden ser números, textos, booleanos o incluso otros arrays u objetos:

var array1=[1,2,3,4,5];

var array2=["Juan","María","Pedro","Luisa"];

var array3=[
 [1,2,3,4,5],
 ["Juan","María","Pedro","Luisa"],
 [null,false,[1,2],"Hola mundo",13.5]
];

Los arrays se acceden mediante un índice, comenzando en "0". Es decir, al primer elemento se accede mediante "array[0]", al segundo con "array[1]", al tercero con "array[2]",...

Hay un par de ejemplos de arrays, donde podéis probar a añadir más elementos y acceder a ellos con distintos índices.

Objetos

Un objeto es un elemento con varias propiedades de cualquier tipo, identificadas con etiquetas. Por ejemplo podríamos crear un objeto persona que tuviese una propiedad "nombre", de tipo texto, otra propiedad "edad", de tipo número, otra "fecha_de_nacimiento", que fuese a su vez otro objeto con las propiedades "día", "mes" y "año",...:

var persona={
 "nombre":"Juan",
 "edad":35,
 "soltero":true,
 "fecha":{
  "día":12,
  "mes":6,
  "año":1975
 },
 "amigos":["Pedro","Jose","Marta"]
}

Hay dos maneras de acceder a las propiedades de un objeto: O bien usando un punto (ej: persona.nombre), o usando corchetes (ej: persona["fecha_de_nacimiento"]). El primer método es más habitual, pero el segundo tiene usos interesantes. Podéis ver un ejemplo de esto, y probar ambas formas de acceder a las propiedades, además de añadir vuestros propios campos.

Un ejemplo de JSON

Hasta ahora hemos visto los tipos de datos de javascript, que usaremos en JSON, pero en realidad hemos hablado poco de este lenguaje en si. Para hacerlo, nada mejor que un ejemplo. Como dijimos al principio, el propio programa de ejemplos interactivos utiliza JSON para generar la lista de ejemplos. La idea es muy simple ¿como sabe el programa que ejemplos mostrar en la lista y que códigos corresponden a cada uno? Pues muy sencillo: podemos crear una estructura JSON que lo indique. En nuestro caso:

var ejemplos=[
 {
  "titulo":"Números",
  "codigo":"var numero=10;\n\nmostrar_en_pantalla(numero)"
 },
 {
  "titulo":"Decimales",
  "codigo":"var numero=10.1;\n\nmostrar_en_pantalla(numero)"
 },
 {
  "titulo":"Texto",
  "codigo":"var texto=\"Hola mundo\";"+
   "\n\nmostrar_en_pantalla(texto)"
 },
 {
  "titulo":"Texto con comillas",
  "codigo":"var texto=\"Texto con \\\"comillas\\\"\\b\";"+
   "\n\nmostrar_en_pantalla(texto)"
 },
 {
  "titulo":"Array numérico",
  "codigo":"var array_de_numeros=[1,2,3,4];\n\n// Observa "+
   "que los índices de los arrays empiezan en cero, "+
   "\n// así que el número 3 muestra el cuarto elemento"+
   "\nmostrar_en_pantalla(array_de_numeros[3])"
 },
 {
  "titulo":"Array de texto",
  "codigo":"var array_de_texto=[\"Juan\",\"María\",\"Ana\","+
   "\"Luis\"];\n\nmostrar_en_pantalla(array_de_texto[0])"
 },
 {
  "titulo":"Array de arrays",
  "codigo":"var array_de_arrays=[\n\t[1,2,3,4],"+
   "\n\t[\"Juan\",\"María\",\"Ana\",\"Luis\"],"+
   "\n\t[\"uno\",2,false,null]\n];"+
   "\n\nmostrar_en_pantalla(array_de_arrays[1][2])"
 },
 {
  "titulo":"Objeto",
  "codigo":"var persona={\n\t\"nombre\":\"Juan\",\n\t\"edad\":35"+
   "\n};\n\nmostrar_en_pantalla(persona.nombre)"
 }
];

Como podéis ver se trata de una lista de objetos en el que cada objeto tiene un título para mostrar en el menú, y un código para mostrar en el área de texto editable cuando se pulse en el elemento correspondiente de la lista.

Así que JSON simplemente permite almacenar información de una manera estructurada que luego nuestros programas podrán usar, transmitir o almacenar. En próximos artículos veremos lo útil que es esto en multitud de situaciones.

Javascript, jQuery y FirefoxOS: La programación orientada a eventos

En el artículo anterior vimos como crear un programa para FirefoxOS, pero ese programa no hacía nada más que mostrar un texto. En esta ocasión vamos a permitir al usuario interactuar con la aplicación, y para eso introduciremos el uso de javascript y jquery con un sencillo ejemplo de un programa que simula tiradas de dados.

Antes de empezar, algunos enlaces de interés:

• El código fuente del programa y un ejemplo del resultado
• Nuestro artículo anterior sobre Interfaces HTML
• Una introducción al lenguaje javascript y otra sobre la librería jQuery

En esta ocasión, además de los archivos ya vistos, tendremos un par de carpetas con los scripts (js) y los estilos (css). Pero de nuevo empezaremos viendo el HTML que contiene los elementos del interfaz:

<!DOCTYPE html>
<html>
<head>
    <title>Tirada de dados</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/estilo.css" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
</head>
<body>
    Número de caras: <input type="number" id="numero_caras" value="6" />
    Número de dados: <input type="number" id="numero_dados" value="1" />
    <input type="button" value="Tirar dados" id="tirar_dados" />
    <div id="result" ></div>
</body>
</html>

Esta vez podemos ver las siguientes novedades respecto al código anterior:

• En la cabecera tenemos los enlaces a la hoja de estilos <link>, y al javascript <script>
• En el body tenemos varios elementos <input>, dos de tipo "number" (para introducir números) y el tercero, un botón.
• Por último tenemos un elemento <div> que es una simple capa vacía en donde escribiremos el resultado de la tirada.

La idea es sencilla. Al pulsar el botón se calcula la tirada, que se mostrará en el campo resultado. Todo esto se hace en el script "app.js":

$(iniciar);

function iniciar() {
    $("#tirar_dados").click(tirar_dados);
}

function tirar_dados() {
    var suma=0;
    var tiradas=new Array();
    for(var i=0;i<$('#numero_dados').val();i++){
        tiradas.push(Math.ceil($('#numero_caras').val()*Math.random()));
        suma+=tiradas[tiradas.length-1];
    }
    $("#result").text("Resultado: "+suma+" = "+tiradas.join(" + "))
}

En realidad no suelo escribir código de esta manera, pero creo que será más fácil de explicar:

• En la línea 1 se usa una función de jQuery que obliga a esperar a que se cargue la página antes de hacer nada más.
• Cuando se ha cargado la página se llama a la función iniciar. Lo único que se hace aquí es seleccionar el botón con identificador "tirar_dados" y establecer un evento de manera que cuando alguien lo pulse se llame a la función "tirar_dados"
• El cálculo se hace en la función "tirar_dados", y consiste simplemente en:
• Cada tirada la "calculamos" generando un valor aleatorio entre 0 y 1, multiplicándolo por el valor indicado en el campo "número de caras" y redondeando el resultado hacia arriba (línea 11)
• Repetimos estas tiradas tantas veces como número de dados se haya indicado (líneas 10 a 13)
• Y vamos sumando los resultados en una variable para obtener el resultado final (línea 12)
• Finalmente mostramos el resultado (en el bloque "result"), mostrando tanto la suma como la lista de tiradas parciales separadas por "+" (línea 14)

Hay varias cosas que quiero que os queden claras aquí por que luego se usarán en cada tutorial, así que pasaré sobre ellas sin comentarlas de nuevo:

1. Siempre hay que inicializar la aplicación, esperando a que todo esté cargado
2. En la inicialización se deben establecer los elementos con los que va a interactuar el usuario, y asociar a ellos los eventos correspondientes.
3. Tanto para inicializar, como para asociar eventos, como para hacer cambios en los objetos del documento HTML, se utilizará jQuery. Así que acostumbraos a ver la instrucción $('selector').

Queda un detalle por resolver, y este es que el bloque <div> en el que se muestran los resultados tiene un estilo diferente, y naturalmente esto lo hemos establecido en el archivo "css/estilo.css":

#result{
 font-size:1.3em;
 font-weight:bolder;
}

Es un archivos sencillo, que simplemente establece el bloque identificado como "result" en negrita y con un tamaño de fuente de 1.3em. Para quienes no lo sepáis, la unidad "em" es una unidad de medida relativa al tamaño de fuente del bloque dentro del que está el actual, en este caso del <body>. En nuestro caso concreto 1.3em significa que el tamaño del texto en "result" será un 30% mayor que el tamaño del texto en el <body>.

Usaremos mucho esta medida relativa pues se ajusta mejor al dispositivo que usemos. De hecho en el próximo tutorial de esta serie vamos a tratar justamente el uso de hojas de estilo para dar una apariencia consistente a las aplicaciones de FirefoxOS, y en este contexto hablaremos más de tamaños y otras cuestiones de estilo.