SEO para apps

 SEO son las siglas de Search Engine Optimization. Mucho se escucha y se lee sobre el SEO, pero podemos resumirlo en que hay dos tipos de SEO. Uno es el SEO blanco, el “legal”, el que nos beneficia a todos porque nos ayuda a aparecer mejor posicionados en los temas que trata nuestro sitio y a encontrar con mayor facilidad lo que buscamos como usuarios. El otro es el SEO negro, el de las malas artes, el que nos engaña y el que, por suerte, cada vez está más controlado. Pues bien, así como existen SEO para webs y su homólogo en redes sociales ( el SMO ), también existe SEO para apps ( ASO ).

 A continuación os dejo unos consejos que aúnan SEO para apps puro ( y blanco ) con otros que enlazan con la usabilidad y el marketing, pues todos estos aspectos buscan lo mismo: conseguir que quien desee una aplicación como la nuestra la descargue, tanto si es gratuita como de pago.

 Los comienzos nunca son sencillos y en el mundo de las apps menos aún. Los buscadores muestran las aplicaciones concediendo mayor relevancia a las más descargadas. ¿ Qué puedo hacer yo para mejorar mi visibilidad ?

 En primer lugar, pensar muy bien en qué nicho queremos colocar nuestra app. Imaginemos que creamos una app para aprender euskera. Podemos indicar que nuestra app trata de “idiomas”, un nicho donde hay bastantes descargas pero también mucha competencia, o elegir el nicho “euskera”. Casi seguro que quien busque una app relacionada con el euskera esté buscando algo relacionado con el aprendizaje de esa lengua, y aunque en principio van a venir menos personas, si elegimos el nicho más selectivo las personas que vengan van a estar interesadas en nuestra app, donde además se nos encontará con más facilidad porque hay menos competencia, y tendremos a la larga más descargas ( y con ello mejoraremos en los buscadores ).

 También hay qué pensar qué deseamos una vez que alguien visite la presentación de lo que ofrecemos. En el caso de las webs suele interesar que la gente se quede el mayor tiempo posible, pero en el mundo de las aplicaciones para móviles sucede justo lo contrario. Esto es así porque se ha comprobado que las interfaces que permiten una visita más rápida obtienen mayor proporción de descargas, y de nuevo tienen mejores resultados ASO.

 En cambio tanto en SEO como en ASO se deben tener en cuenta las keywords o palabras clave. También se puede optar por intentar competir por las más solicitadas o apostar por varias keywords long tail, donde es más sencillo posicionarse. Es importante señalar que las keywords deben ponerse o bien en el título, o bien en su apartado correspondiente, pero de nada sirve repetirlas ni es aconsejable separarlas. Asimismo la descripción de la app no ayuda al posicionamiento, por lo que es mejor dejarla para lo que es, para informar sobre qué ofrece nuestra aplicación.

 Como corolario podemos decir que en el SEO tradicional el contenido es el rey, mientras en el SEO para aplicaciones móviles el contenido y un diseño que favorezca el porcentaje de clicks deben ir de la mano.

Learnexperiment (2): menús dinámicos con LungoJS

Anteriormente vimos como usar los estilos de FirefoxOS, pero en esta ocasión pasaremos a usar un framework llamado LungoJS que permite obtener un estilo coherente en distintas plataformas (FirefoxOS, Android, iOS,...). Con el vamos a crear los menús de nuestra aplicación de manera dinámica utilizando una estructura definida mediante JSON. Así que haré referencia a artículos anteriores que os dejo aquí listados junto con otros enlaces interesantes:

• El ejemplo desarrollado en el artículo y su código fuente
• El anterior artículo de esta serie, en el que usamos los estilos de FirefoxOS para hacer la ventana principal
• Nuestra introducción a LungoJS y un pequeño tutorial de JSON
• Las páginas de LungoJS y QuoJS, en donde podréis encontrar información sobre estos frameworkx

LungoJS

Para comenzar vamos a hacer un esquema simple de navegación con LungoJS: La pantalla principal, con una lista a modo de menú con un único elemento que llevará a otra pantalla en blanco con una cabecera que tendrá un botón de volver a la pantalla anterior. Vamos a ver el resultado, antes de hablar del código:

Naturalmente en las capturas no se aprecia la transición de las pantallas, para lo que podéis probar el prototipo. Por lo demás es un caso muy simple. Veamos ahora la parte del código necesario para que esto funcione (solo muestro el contenido del <body>, dado que el resto son simples referencias a archivos de la librería):

<section id="main" data-transition="">
 <header data-title="Learn Experiment">
  
 </header>

 <article id="menu" class="active list scroll">
  <ul>

   <li class="arrow">
    <a href="#menu" data-router="section">
     <strong>Choose the hiragana</strong>
    </a>
   </li>
  </ul>

 </article>
</section>

<section id="menu" data-transition="slide">
 <header data-title="Choose the hiragana">
  <nav class="left">
   <a href="#back" data-router="section" class="left">
    <span class="icon left blue"></span>
   </a>
  </nav>
 </header>

 <article id="menu-article" class="active list scroll">
 </article>
</section>

Anteriormente dije que en la programación con HTML casi podríamos funcionar solo con etiquetas <div>, pero esto no es así para LungoJS, que aprovecha las nuevas etiquetas de HTML5 para simplificar el código dando mayor expresividad:

• Las dos pantallas de la aplicación se distinguen por los dos bloques <section> (líneas 1 y 17). Tienen un identificador cada una y la segunda usa una propiedad "data-transiution" que define la animación entre una y otra como un "slide".
• Dentro de cada pantalla hay una cabecera <header> y un <article>. El segundo es el contenido de la pantalla, mientras que el primero es la barra azul de la parte superior que contiene el título, definido con el atributo "data-title"
• Además la segunda contiene un elemento <nav> (línea 19) que sirve para definir los botones de navegación. En este caso un enlace a la página anterior (href="#back").
• En la primera pantalla se puede ver, dentro del artículo, una lista (línea 7) con un único elemento con el texto "Choose the Hiragana" (línea 10) que es un enlace a la segunda pantalla gracias de nuevo al atributo "href", que apunta a "#menu"
• Hay mochos otros atributos que no he comentado por ser simples cuestiones de diseño, pero si voy a comentar el atributo "data-router". En resumen, indica la manera en que se abre el enlace en LungoJS. En este caso, en el que el valor es "section", lo que hace es abrir una nueva sección según el "id" indicado, pero hay otras opciones. Es un tema importante por que el comportamiento normal de los enlaces es muy distinto a este.

Así que hemos visto como con LungoJS es fácil definir un menú de navegación entre dos pantallas con solo editar el HTML, sin necesidad de meter programación. Y lo que es más: Este interfaz se verá igual, y funcionará bien en cualquier dispositivo moderno.

Creando el menú dinámico

Definir así toda la navegación de la aplicación sería posible. Pero en nuestro caso tenemos muchas cosas comunes de una pantalla a otra, y por ello nos viene mejor crear una definición simple de la estructura de la aplicación con JSON y generar el contenido dinámicamente, de tal manera que reutilizaremos más el código que hagamos.

Empecemos por ver la estructura en JSON:

var menus=[
 {
  'titulo':'Escoger el hiragana',
  'ejercicios':[
   {'titulo':'Vocales, k & s'},
   {'titulo':'Sonidos t, n & h'},
   {'titulo':'Sonidos m, y, r & w'},
   {'titulo':'Sonidos k, g, t & d'},
   {'titulo':'Sonidos s, z, h, b & p'},
   {'titulo':'Kanas similares'},
   {'titulo':'Diptongos 1'},
   {'titulo':'Diptongos 2'},
  ]
 },
 {
  'titulo':'Escribir el romaji',
  'ejercicios':[
   {'titulo':'Vocales, k & s'},
   {'titulo':'Sonidos t, n & h'},
   {'titulo':'Sonidos m, y, r & w'},
   {'titulo':'Sonidos k, g, t & d'},
   {'titulo':'Sonidos s, z, h, b & p'},
   {'titulo':'Kanas similares'}
  ]
 },
 {
  'titulo':'Escribir el hiragana',
  'ejercicios':[
   {'titulo':'Vocales, k & s'},
   {'titulo':'Sonidos t, n & h'},
   {'titulo':'Sonidos m, y, r & w'},
   {'titulo':'Sonidos k, g, t & d'},
   {'titulo':'Sonidos s, z, h, b & p'},
   {'titulo':'Kanas similares'}
  ]
 }
]

En resumen: Es una lista de menús, y cada menú tiene un título y una lista de ejercicios, cada uno de los cuales tiene a su vez su propio título. La idea es que a partir de esta estructura se genere el interfaz de navegación de la aplicación de manera automática. La ventaja, además del código que nos ahorramos, es que mañana podremos cambiar cosas muy fácilmente al reutilizar el código.

A partir de esta información creamos un proceso que genera el menú principal:

for(var menu in menus){
 var opcion=$$('<li class="arrow"><a id="menu'+menu+
  '" href="#ejercicios" data-router="section"><strong>'+
  menus[menu].titulo+'</strong></a></li>');
    
 $$('#menu ul').append(opcion);
}

• La línea 1 abre un bucle "foreach" sobre la lista de menús, lo que viene a significar que "para cada menú en menús, hacemos esto". Es decir, el contenido entre corchetes se repite tres veces, una por cada menú que tenemos.
• Conviene aclarar que en los bucles "foreach" de javascript no sacamos el elemento en si, sino su clave. En este caso la variable "menu" tomará los valores 0, 1 y 2 en cada repetición. Gracias a ello podremos acceder a cada elemento como menus[menu], como veremos a continuación.
• La segunda línea crea una variable "opcion" con el código necesario para hacer cada uno de los elementos de la lista principal. Aquí reside una de las potencias de la programación dinámica, pues de haberlo hecho de manera estática habríamos tenido que repetir este código por cada elemento, mientras que cualquier cambio que queramos hacer ahora nos basta con hacerlo aquí.
• En esta misma línea de código tenemos dos variables que intercalamos: la variable "menu" en el "id", lo que hará que se generen los identificadores "menu0", "menu1" y "menu2", y el título de cada uno de los menús, al que accedemos mediante "menus[menu].titulo"
• Por último añadimos la opción a la lista del artículo identificado como "menu" (línea 6). Quizás os hayáis fijado que estamos usando "$$" para acceder a las funciones. La sintaxis es prácticamente la misma que la de jQuery, pero no se trata de esta librería, sino otra de los mismos creadores de LungoJS: "QuoJS", y por ello el uso de "$$" en lugar de "$" que usa jQuery.

Con esto, al ejecutar el programa, aparecerá el menú principal con las tres opciones iniciales. Pero ahora toca ir un paso más allá: Que al pulsar en cada una de las opciones aparezcan los submenús con sus respectivas opciones.

Respondiendo a eventos

En la función de inicialización escribiremos la siguiente instrucción: "$$('#menu a').tap(pulsaOpcion)". De nuevo las dos "$$" nos indican que es una función de QuoJS, que actua sobre "#menu a", es decir, los enlaces del menú principal. Y aquí aparece algo nuevo, la función "tap". Es algo que es también propio de QuoJS, un manejador de evento para el evento de pulsar sobre la pantalla en un móvil. Y es que QuoJS está pensado para móviles. En realidad este manejador en el ordenador no es distinto al "click" de jQuery, pero con QuoJS nos aseguramos de que funcione bien en móviles, y además su librería de eventos es mucho más amplia en función de los gestos típicos que podemos realizar sobre la pantalla del móvil.

Pero en esta ocasión no necesitamos saber más. Simplemente sirve para detectar cuando el usuario abre un menú para cargar sobre el los datos correspondientes:

function pulsaOpcion(){
 var menu=$$(this).attr('id').substr(4)
 $$('#ejercicios header .title').text(menus[menu].titulo);
 
 $$('#ejercicios ul').empty()
 for(var ejercicio in menus[menu].ejercicios){
  var opcion=
   $$('<li class="arrow"><a id="ejercicio'+menu+'-'+ejercicio+
   '" href="#ejercicio" data-router="section"><strong>'+
   menus[menu].ejercicios[ejercicio].titulo+
   '</strong></a></li>');
  
  $$('#ejercicios ul').append(opcion);
 }
}

• En cuanto se pulsa una opción lo primero que hacemos es obtener el identificador de la opción pulsada (línea 1). Como este identificador es del tipo "menuN", podemos obtener de esta manera los datos correspondientes a dicha opción.
• A continuación ponemos el título de la opción pulsada en la segunda pantalla "ejercicios" (línea 3).
• En la línea 5 vaciamos cualquier elemento que haya en la lista de la segunda pantalla para así insertarlos de nuevo.
• Esto se hace a continuación, con un bucle similar al que ya hemos visto solo que en este caso recorremos las opciones del submenú ("menus[menu].ejercicios")

Con esto ya obtenemos todo el menú de navegación de la aplicación: Tres opciones en el menú principal que nos dan acceso a 20 ejercicios:

Ese será el siguiente paso, crear la pantalla del ejercicio, que para cada opción recibirá diferentes contenidos, igualmente definidos mediante JSON. Veremos con ello mucha más funcionalidad, como reproducir sonido. Poco a poco iremos definiendo una aplicación real, que espero terminar por incluir en el market de FirefoxOS y en otras plataformas, para poder ver así un ejemplo completo de todos los pasos del desarrollo.

Google

Nuestra aplicación en Android

Tener desarrollada una aplicación para FirefoxOS significa poder tenerla para otras plataformas fácilmente, como Webapp. En este artículo vamos a ver como pasar nuestra aplicación de tiradas de dados a Android con los menores cambios posibles. Aquí tenéis algunos enlaces útiles para seguir el artículo:

• Código fuente de la aplicación para Android creada en el ejemplo
• El anterior artículo en el que creamos la aplicación de tirar dados para FirefoxOS
• Un interesante manual sobre Android en Español, de la Universidad Complutense de Madrid
• Información sobre la instalación de Eclipse con el plugin ADT

El primer paso que hemos de dar es descargar el entorno de programación que prefiramos para programar Android. En mi caso uso Eclipse con el plugin ADT, que podéis instalar siguiendo las instrucciones. Una vez lo tengamos creamos un proyecto nuevo en blanco y metemos nuestra aplicación HTML en el directorio "assets":

Con esto ya tenemos el código dentro del proyecto, pero todavía no mostrará nada si lo ejecutamos. Para que funcione debemos hacer dos cosas: Crear en la vista un componente de tipo WebView que nos muestre el contenido HTML y modificar el controlador principal para que cargue en dicho componente nuestra página de inicio. Lo primero es lo mas sencillo: Vamos a la carpeta "res/layout" y buscamos la plantilla principal, en mi caso "activity_main.xml". Ahí solo hay que insertar el siguiente componente:

   
<android.webkit.WebView
        android:id="@+id/webkit"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />

Este deberá de colocarse dentro de la etiqueta raíz (en mi caso "RelativeLayout") sustituyendo cualquier otro contenido que hubiese. Nos creará el componente de tipo WebView ocupando todo el alto y ancho de la ventana principal. A continuación abrimos el código, en mi caso: "src/com.legendarya.lanzadados/MainActivity" y buscamos el método "onCreate":

   
protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);

 // Código insertado para la WebApp
 WebView mWebView = (WebView) findViewById(R.id.webkit);
 mWebView.getSettings().setJavaScriptEnabled(true);
 mWebView.loadUrl("file:///android_asset/index.html");
}

La primera línea es la descripción del método, y junto a las dos siguientes (la llamada al padre y la elección de la plantilla) es el contenido que teníamos originalmente. Lo que hemos añadido son las tres últimas líneas:

• Primero localizamos el WevView (identificado en este caso como "webkit")
• La siguiente línea indica que el Javascript esté activado para este componente, pues por defecto no lo está y sin el la programación no funcionaría.
• Por último se carga dentro del componente nuestra pantalla principal "index.html"

¡Listo! Solo con esto, que podemos reutilizar para otros proyectos cambiando tan solo el contenido de "assets", ya podemos ejecutar la aplicación obteniendo el siguiente resultado:

En conclusión

En este artículo hemos creado fácilmente una webapp de Android a partir de una aplicación FirefoxOS que habíamos desarrollado anteriormente. Este es el esquema que aplicaremos de ahora en adelante: Desarrollar ejemplos en FirefoxOS que se puedan portar posteriormente a otras plataformas, ahorrándonos así mucho trabajo y logrando mayor difusión. Por tanto la mayoría de los próximos artículos se centrarán simplemente en el desarrollo de webapps sobre FirefoxOS y las tecnologías que necesitamos aprender para ello.

Sin embargo de vez en cuando escribiré algún que otro artículo tanto para ver como portar la aplicación a las demás plataformas (empezando por iPhone) como para describir problemas y posibles soluciones en la compatibilidad de las diversas tecnologías, y la manera de resolverlas, como el framework LungoJS.

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

Programando un foro para FirefoxOS (II): Creando la base de datos

Como hablamos anteriormente, para crear un foro en el que puedan escribir diferentes usuarios desde sus móviles necesitamos de un servidor web con base de datos en el que almacenar los mensajes. En este artículo veremos como instalar un servidor web en el propio ordenador para poder hacer el desarrollo y crearemos una pequeña base de datos con phpMyAdmin.

Este artículo es innecesario para los que solo os interese la programación de móviles, y será posible hacer el resto de pasos sin necesidad de este dado que dejaré la base de datos necesaria funcionando online en mi propio servidor. En cualquier caso puede ser interesante por conocer un poco del lenguaje de consultas a bases de datos SQL.

Como siempre, aquí tenéis unos enlaces útiles para la lección:

• Zona de descarga del servidor WAMP
• Documentación del gestor de bases de datos PHPMyAdmin
• Introducción al lenguaje SQL de acceso a bases de datos

Lo primero que hay que hacer es descargar e instalar un servidor, que en mi caso será el WAMP. Es un paquete que instala sobre Windows el servidor Apache, con bases de datos MySQL y el lenguaje de programación PHP. En definitiva, un todo en uno para montar una web dinámica. Una vez instalado y ejecutado aparecerá un icono verde en la barra de tareas:

Si en lugar de verde está en color rojo indica que el servidor no termina de arrancar, y si fuese en amarillo es el servidor de base de datos MySQL el que no se está ejecutando. Dando por hecho que todo haya ido bien, podemos abrir el navegador de internet y escribir la dirección "127.0.0.1", que es la IP local, que siempre apunta al propio ordenador. Lo que veremos será una página similar a esta:

A continuación podemos pulsar en el apartado "Tools" el enlace a phpMyAAdmin, que no es más que un interfaz de acceso a las bases de datos MySQL escrito en PHP. Desde ahí, pulsando sobre la pestaña "base de datos", podemos crear una nueva base de datos escribiendo el nombre ("foro", por ejemplo):

El "cotejamiento" es el formato en que se guardan los textos, para el que suelo usar "utf-8-general-ci" (Formato de Texto Universal de 8 Bits, útil para trabajar con distintos idiomas). Pero no es imprescindible marcarlo y se puede cambiar más adelante. Una vez creada la base de datos aparecerá en el lateral, y podremos acceder a ella para crear las estructuras de datos:

Aquí podremos ya crear las tabas, en donde empezaremos con una llamada "tema" con 5 columnas:

Las columnas que crearemos son: un identificador numérico (id), que permita asignar un número a cada tema, un campo "foro", con el identificador del foro al que pertenece, y otro "usuario" con el del autor del tema. Un campo "fecha" que indique cuando se actualizó por última vez y por último y un campo "título", de tipo texto, para el título del tema:

Los campos seran por tanto de tipo INT (número entero) excepto la fecha, que será de tipo DATETIME, y el título, que será CHAR (texto de tamaño fijo) en el que indicamos una longitud de 200 caracteres máximo. Pero además indicaremos un par de datos más en los atributos de la izquierda: La clave primaria y los índices:

En la fila del identificador (id), en la columna de índice, escogemos la opción "primary". Esto indica que el identificador (id) será único, es decir, que no habrá dos temas con el mismo número de identificador. Y también marcaremos la opción de "autoincrement", que significa que al crear un nuevo tema automáticamente escogerá para el un identificador que sea un número superior que el anterior (uno, dos, tres,...). Además pondremos los campos de foro y tema como índices. Esto le dice al gestor que podemos buscar en la tabla por dichos atributos (buscar los temas que pertenezcan a un foro, por ejemplo) y lo que hará el gestor es guardar un índice de temas ordenado por el tema al que pertenecen para acelerar las búsquedas.

Por último pulsamos "Guardar", creando así la tabla. Dependiendo de la versión de phpMyAdmin usada mostrará además el código SQL utilizado, pues al final todos estos formularios y datos introducidos no hacen mas que generar un código SQL que es como tradicionalmente se haría la creación de bases de datos. Gracias a estos programas nos ahorramos tener que saber de memoria el lenguaje SQL, pero aún así lo veremos un instante para conocerlo un poco:

CREATE TABLE IF NOT EXISTS `tema` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `foro` int(11) NOT NULL,
  `usuario` int(11) NOT NULL,
  `fecha` datetime NOT NULL,
  `titulo` char(200) NOT NULL,
  PRIMARY KEY (`id`),
  KEY `foro` (`foro`,`usuario`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

Lo primero que quería hacer constar es lo sencillo que está creado este lenguaje, preparado para ser leído por personas fácilmente. Así por ejemplo "CREATE TABLE IF NOT EXIST" significa obviamente "Crear tabla si no existe". Otras cuestiones sobre esta instrucción:

• Tras dicha declaración se pone el nombre de la tabla a crear. En nuestro caso "tema"
• Los campos de la tabla se sitúan después, entre paréntesis y separados por comas
• Para cada campo se pone primero el nombre (ej: "id"), después el tipo ("int(11)", "datetime", "char(200)"), y finalmente otros atributos, como una indicación de que no puede tomar valor nulo (NOT NULL) o que el valor se debe de incrementar automáticamente con cada nuevo elemento (AUTOINCREMENT).
• También dentro de la tabla se indican las claves: la clave primaria (PRIMARY KEY) y los índices (KEY)
• Finalmente, tras el paréntesis, se indica otra información de la tabla, que no voy a describir con detalle pero que en este caso es el tipo de motor que se usará para acceder, la codificación del texto y con que número comienza la clave primaria.

He de admitir que yo mismo no me se esta sintaxis de memoria, dado que la creación de tablas se hace muy de tarde en tarde y normalmente con un gestor de este tipo, pero en próximos artículos tendremos que utilizar otras instrucciones de SQL más recurrentes para la consulta y modificación de los datos que si resulta fácil acabar aprendiendo.

Esto lo comenzaremos a ver en el próximo artículo, en donde se realizará una actividad transversal con la creación de un nuevo tema que irá desde la aplicación en FirefoxOS donde se pedirán los datos, hasta la base de datos MySQL, pasando por un servicio en el servidor que reciba la orden, escrito en PHP.

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.

Learn Experiment: Usando los estilos de FirefoxOS

Este artículo comienza una serie basada en la migración de una aplicación real de Android (Hiragana Learn Experiment) a FirefoxOS. Pretendo con ello ver la programación necesaria para crear una aplicación real, paso a paso. Vamos a empezar en esta ocasión con la creación del menú principal, y junto con este introduciremos el uso de los estilos propios de FirefoxOS. A continuación dejo algunos enlaces útiles:

• El código fuente del programa y un ejemplo del resultado
• Nuestro artículo anterior sobre jQuery y selectores
• Un resumen de los estilos de FirefoxOS (en inglés)

Respecto a la aplicación, es un conjunto de ejercicios para aprender Hiragana (el silabario japonés). En esta ocasión desarrollaremos tan solo el menú principal,  que no es más que una lista con los tres tipos de ejercicios: "Escoger el hiragana correcto", "Escribir en romaji" y "Escribir el hiragana". Por hoy nos limitaremos a mostrar estas opciones, pero además daremos a la app el estilo de FirefoxOS. Empecemos por ver el contenido del <body>, dado que el resto de la página es casi idéntico a lo que vimos en anteriores ocasiones:

<body role="application">
   <section  role="region" id="list-view">
      <header>
         <h1>Hiragana</h1>
      </header>
   
      <article id="appList" data-type="list">
         <ul>
            <li><a href="#"><p>Escoger el hiragana</p></a></li>
            <li><a href="#"><p>Escribir en romaji</p></a></li>
            <li><a href="#"><p>Escribir el hiragana</p></a></li>
         </ul>
      </article>
    </section>
</body>

Esta estructura es importante conservarla tal cual por que al usar estilos predefinidos, estos solo se aplicarán sobre una estructura con el siguiente formato:

• El bloque <section> que divide el contenido en secciones, compuestas por un <header> y un <article>
• El bloque <header>, en donde hemos situado el título <h1>, pero donde podría haber también botones y herramientas.
• El <article> que contiene el contenido de la página/sección.
• La lista <ul> que contiene tres elementos <li> los cuales consisten en un enlace <a> (que actualmente no enlazan a nada) y dentro de los cuales se incluye un párrafo <p> con el título de la opción.

Veamos ahora la hoja de estilos (css) necesaria para dar a este contenido el aspecto adecuado:

@import url(firefoxos/responsive.css);
@import url(firefoxos/headers.css);
@import url(firefoxos/lists.css);

html, body{
 margin:0;
 font-family:sans-serif;
 font-size:10px;
}

Como podéis ver los estilos son muy sencillos de nuevo, pero esto es por que estamos haciendo uso de otras hojas de estilo definidas por otros programadores. Por ello en la nuestra tan solo usamos:

• La instrucción "@import url(....);", que nos permite cargar otras hojas de estilo. En este caso usamos las hojas de estilo ya definidas por FirefoxOS, ahorrándonos casi todo el trabajo
• Una definición de estilos con el selector "html, body", en donde la coma simplemente indica que el estilo se aplica tanto al elemento <html> como al <body>
• Lo primero que hacemos es aplicar un margen nulo, para que no quede un espacio en blanco con el borde de la página, que es lo que sucedería por defecto.
• Por último indicamos un tamaño de fuente a toda la página de 10 píxeles, e indicamos que se use un tipo de letra "sans-serif", que son los tipos de letra que carecen de remates en los extremos y pueden ser más fáciles de leer en ciertas pantallas.

El resultado lo podemos ver a continuación. Como podréis entender, tanto la cabecera naranja, como el fondo azul que se "ilumina" al pulsar una opción son el resultado de usar las hojas de estilo de FirefoxOS con la estructura apropiada:

En conclusión

En este artículo hemos visto como aplicar los estilos por defecto de FirefoxOS. Con ello no solo nos ahorramos trabajo sino que logramos un diseño más consistente con las demás aplicaciones del teléfono. Poco a poco iremos viendo nuevos elementos del interfaz y como utilizarlos. En el próximo artículo empezaremos a desarrollar la navegación dentro de la aplicación, incluyendo la generación dinámica de contenidos de los menús.

Programando un foro para FirefoxOS (I)

Este artículo es el comienzo de una serie que mostrará el desarrollo de una plataforma de comunicación destinada a recibir feedback de los usuarios directamente desde las aplicaciones móviles. Es decir, en la propia aplicación un usuario podrá escribir un mensaje proponiendo mejoras o dando sugerencias, y otros podrán responder con su propia opinión.

Es un proyecto complejo, y de hecho se usará en varias aplicaciones reales comenzando por algunas que he programado para Android (ej: Hiragana Learn Experiment), pero en estos artículos nos centraremos sobre todo en su diseño e integración en FirefoxOS, aunque se hablará también de otras partes del desarrollo, incluyendo la programación del servidor y su implementación en Android u otras plataformas.

En este primer artículo nos centraremos en el diseño de la plataforma, que como se verá no es tan simple como pudiera parecer en un primer momento. Los datos concretos no tienen importancia, pero espero que el concepto general de diseño os sirva si vais a trabajar en vuestras propias aplicaciones.

Definiendo los requisitos

Empezando por lo básico, el programa permitirá varias acciones al usuario:

• Ver lista de temas
• Crear un tema nuevo
• Ver tema
• Responder a tema
• Votar mensaje
• Permitir a los usuarios escoger que nombre de usuario mostrar a los demás
• Destacar los mensajes y temas del desarrollador
• Indicar cuando un tema ha sido leído por el usuario y cuando tiene mensajes nuevos

Esta es la funcionalidad necesaria, y en un mundo ideal nuestros requisitos acabarían aquí. Pero la realidad es que aquí empiezan nuestros problemas. Para empezar ¿que ocurre cuando no tengamos conexión a internet? Podríamos dar una versión sin conexión, pero empecemos por algo más simple:

• Si no hay Internet, tan solo mostraremos un mensaje indicándolo

¿Y que ocurre si se meten demasiados contenidos: temas, mensajes textos? Habrá que limitar la información que se muestra:

• En el foro se mostrarán solo los últimos 30 temas actualizados
• En cada tema los mensajes se mostrarán de 30 en 30, divididos en páginas
• Los títulos de los temas tendrán un máximo de 100 caracteres
• Los textos de los mensajes tendrán un máximo de 400 caracteres

¿Pero y si un usuario se pone a enviar demasiados mensajes? Necesitaremos nuevos límites para evitar que llene todo el foro tan solo con sus mensajes:

• No se permitirá crear mas de un tema al día a cada usuario
• No se permitirá mandar más de dos mensajes seguidos en un mismo tema a un mismo usuario, en menos de dos horas

Esto es solo una muestra de los requisitos, que probablemente se vaya ampliando con el tiempo, pero que nos permitirá comenzar a definir el resto de la "aplicación".

Diseñando la base de datos

La base de datos es donde se almacena la información que crean o modifican los usuarios. Se organiza en elementos de diferentes tipos (como usuarios, temas,...) cada uno con sus propios campos (nombre, título, fecha,...). En nuestro caso tendremos los siguientes tipos de elementos, en principio:

Cada "caja" es un tipo de elemento y las flechas entre ellas indican relaciones. El sentido de la flecha indica dependencias, así un foro tiene temas, y un tema tiene mensajes. Un usuario puede haber iniciado o leído varios temas, y haber escrito o votado varios mensajes. A continuación detallo los campos para cada tipo de elemento:

• Usuario: Nombre, tipo (0=normal, 1=desarrollador), clave_producto
• Aplicación: Nombre, usuario (propietario de la app), clave_producto
• Foro: Aplicación, nombre, orden
• Tema: Foro, título, usuario (quien lo creó), fecha (en que se insertó el último mensaje)
• Mensaje: Tema, usuario (que lo escribió), fecha (en que se escribió), texto
• Leído: Tema (leído), usuario (que lo leyó), fecha (de la última lectura)
• Voto: Mensaje (que se vota), usuario (que lo vota)

Normalmente las bases de datos se representan como conjunto de tablas en las que cada tipo de elemento es una tabla, y sus campos son columnas de dicha tabla, mientras que por cada elemento se inserta una fila (usuario, tema, mensaje,...).

Realizar el diseño de la base de datos suele ser sencillo, pero a la vez es importante para tener clara la organización de la información y las operaciones a realizar en cada actividad.

Diseño de navegación

El diseño de navegación consiste en diseñar un esquema con las diferentes pantallas de la aplicación y unirlas con flechas indicando como se puede navegar entre ellas. En nuestro caso:

• Temas: Muestra la lista de temas ordenados por fecha de último mensaje. Un botón permitirá crear nuevos temas
• Nuevo tema: Formulario en el que se podrán escribir un título y un primer mensaje para el nuevo tema
• Mensajes: Muestra la lista de mensajes de un tema, ordenados por fecha, con los últimos al final. Un botón permitirá escribir un nuevo mensaje.
• Permitirá escribir un nuevo mensaje en el tema.

Se podría entrar en mas detalle con la descripción del interfaz, pero dado que probablemente lo acabemos cambiando de aquí al final, no es problema mantenerlo sencillo de momento.

Diseño del servicio web

Este es un paso que vosotros no tendréis que hacer habitualmente. Pero dado que en esta ocasión el foro lo usarán varios usuarios, los mensajes deben de encontrarse en un lugar común, en Internet, y por tanto hemos de definir un servicio web que permita acceder a dichas funciones.

Un servicio web no es mas que un conjunto de direcciones web que permiten modificar contenidos

• Obtener temas: Devolverá la lista de temas de un foro ordenados por fecha descendente
• Parámetros: Foro, usuario, clave de aplicación
• Obtener mensajes: Devolverá la lista de mensajes de un tema ordenados por fecha ascendente
• Parámetros: Tema, usuario, clave de la aplicación, mensaje inicial, mensajes a devolver
• Crear tema: Creará un nuevo tema en un foro
• Parámetros: Foro, clave de aplicación, usuario, nombre, título del tema, texto del primer mensaje
• Escribir mensaje: Creará un nuevo mensaje en el tema
• Parámetros: Tema, clave de aplicación, usuario, nombre, texto del mensaje
• Votar mensaje: Incrementará el número de votos del mensaje
• Parámetros: Mensaje, clave de aplicación, usuario, nombre

Conclusiones

A lo largo del artículo hemos dado los primeros pasos para desarrollar una aplicación, o en este caso, mas bien un complemento para las aplicaciones. Esta es una tarea que puede hacer cualquiera, sin necesidad de saber programar, aunque la experiencia en desarrollo suele ser siempre positiva. En próximos artículos nos meteremos manos a la obra con las siguientes actividades:

• Creación de la base de datos con SQL y PHPMyAdmin
• Creación de los servicios web con PHP
• Desarrollo de la aplicación de foros para FirefoxOS, que funcione a partir de dichos servicios.

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.

Diseñando aplicaciones I: Interfaces con HTML

Un interfaz es la parte de una aplicación que el usuario "ve", y con la que se comunica. En las aplicaciones de FirefoxOS (como en las aplicaciones web) este interfaz está definido mediante HTML, usándose generalmente un archivo HTML para cada pantalla de la aplicación.

Pero HTML fue originalmente un lenguaje para escribir documentos en la web, y creo necesario señalar las diferencias que implica el usarlo para desarrollar aplicaciones. Este artículo por tanto se ajustará a un nivel básico de conocimientos, así que disculpad si algunas de las cosas que comento ya las conocéis.

Si habéis aprendido HTML para hacer páginas web seguro que conoceréis muchas etiquetas (<p>, <ol>, <strong>, <em>, <h1>,...). La buena noticia para los que no las conozcan es que para programar aplicaciones casi nos basta con usar una sola: el bloque <div>. Mientras que las otras etiquetas tienen un aspecto y comportamiento predefinido, esta otra está pensada para adoptar cualquiera que necesitemos:

Como se muestra en la imagen anterior, todo interfaz lo podemos dividir en un conjunto de bloques identificables, los cuales adoptarán su aspecto y comportamiento final usando respectivamente CSS y javascript. Respecto al aspecto podemos usar distintas letras, márgenes, fondos, colores, bordes,... Respecto al comportamiento podemos cambiar el texto de un bloque, hacer que realice cálculos al pulsarlo, que muestre el progreso mediante una barra que se alarga o acorta,...

Pero para poder hacer todo eso necesitamos una manera de identificar dichos bloques y es aquí donde entran los atributos más importantes de HTML: "id" y "class". El primero identifica un bloque de manera única, mientras que el segundo admite una lista de palabras que puede compartir con otros bloques:

<div id="boton_continuar" class="boton destacado">
</div>

En el ejemplo anterior el bloque podría ser identificado por ser un bloque <div>, por su identificador "boton_actual" o por sus clases "boton" o "destacado". Por ejemplo, en CSS:

div{
   margin:1em;
}

.boton{
   border-radius:3em;
}

#boton_continuar{
   background:green;
}

Este código haría que el bloque anterior tuviese un margen por ser un div, tuviese las esquinas redondeadas por tener la clase "boton", y el fondo verde por ser el "boton_continuar". Fijaos que mientras la etiqueta se pone tal cual, la clase se identifica poniendo un punto delante, y el identificador usando una almuhadilla (#).

Javascript no tiene una manera equivalente de identificar los bloques, pero se han creado librerías que permiten hacerlo. En concreto nosotros usaremos una llamada jQuery:

$('.boton').click(
   // Aquí iria una función que se ejecuta al pulsar
   // cualquier bloque con la clase "boton"
)

// La siguiente instrucción pone el texto "Continuar"
// En el botón identificado como "boton_continuar"
$('#boton_continuar').text('Continuar')

Como podéis observar jQuery utiliza una el símbolo del dolar ($), seguido de unos paréntesis entre los que se introduce el selector al que le queremos aplicar el efecto, ya sea asociarle un evento o modificarlo de manera dinámica. Hay formas más complejas de definir selectores, como seleccionar solo los bloques que estén dentro de otros dados, o solo los bloques pares o impares,... Lo importante por ahora es saber que podemos usar estos selectores tanto para definir el aspecto de los bloques con CSS, como para definir su comportamiento con jQuery.

Otras etiquetas HTML

Aunque con los bloques <div> tenemos casi toda la funcionalidad que necesitamos, quería mencionar algunas de las otras etiquetas que se suelen utilizar en aplicaciones HTML y la razón para usarlas:

• Los bloques <span>: Son genéricos como los <div> pero pensados para ser usados dentro de párrafos de texto, aunque en realidad pueden 
• Las imágenes <img>: Siguen siendo necesarias para mostrar imágenes dentro de la aplicación.
• Las listas <ul>, <li>: Se suelen utilizar para definir menús o listados de elementos
• Los enlaces <a>: Aunque se podrían programar con javascript, siguen siendo una manera rápida de enlazar con otros contenidos.
• Los elementos de formulario <input> y <textarea>: Interesantes sobre todo a la hora de meter campos de edición de texto.

Nuestro primer programa en FirefoxOS

En este artículo vamos a configurar el entorno de trabajo que usaremos en los próximos tutoriales. Para ponerlo en práctica haremos también nuestro primer programa, lo más sencillo posible. Como es típico en estos casos este programa lo único que hará será mostrar un "Hola mundo" en pantalla.

Antes de comenzar os dejo una lista de enlaces que usaremos en este artículo:

• El código fuente del programa desarrollado y un ejemplo del resultado.
• El editor de código que yo utilizo: Notepad++, y un tutorial de HTML para quienes no conozcáis el lenguaje (aunque los ejemplos se podrán seguir sin ello)
• El navegador Firefox necesario para instalar el simulador de FirefoxOS que se instala como un plugin del navegador.

Solo necesitaremos tres archivos para esta primera tarea: Un icono, un archivo HTML que mostrará el "Hola mundo" y un archivo llamado "manifest.webapp" que es lo que usa FirefoxOS para saber que se trata de una aplicación y obtener la información que necesita:

Como ya sabréis FirefoxOS se programa con tecnologías web, así que quienes conozcáis el campo tendréis ventaja. Empezaremos viendo el código de la aplicación que es simplemente la estrucura del contenido que se muestra en pantalla, en lenguaje HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Hola mundo</title>
</head>
<body>
    <h1>¡Hola mundo!</h1>
</body>
</html>

Una breve explicación para los que no seáis programadores web:

• El doctype indica el tipo de documento, en este caso HTML5, mientras que las etiquetas <html> marcan el contenido del documento.
• Dentro tenemos las etiquedas <head> y <body>. El <body> es lo que muestra la página, mientras que <head> son cosas accesorias
• En este caso tiene <title>, que es el título que se muestra en la pestaña del navegador, y <meta>, que indica la codificación internacional UTF-8 (premite usar desde la "ñ" hasta símbolos chinos)
• Por último, en el body tenemos lo único que se mostrará, un título de primer nivel <h1> que tiene escrito "¡Hola mundo!"

Aquí podéis ver el resultado del primer ejemplo "Hola mundo".

En cierto sentido ya tenemos el "programa" de ejemplo. Mas adelante le añadiremos interactividad y diseño, pero hoy vamos a ir en otra dirección, pues con esto solo no es una aplicación FirefoxOS.  Para que lo sea, nos falta escribir el archivo "manifest.webapp" con la información relativa a nuestra aplicación. Este archivo está en formato JSON, que es un lenguaje de descripción de datos con la sintaxis de javascript. Pero se explica mejor viéndolo:

{
    "name": "Hola mundo",
    "description": "Ejemplo básico de web app",
    "launch_path": "/index.html",
    "icons": {
        "64": "/icon.png"
    }
}

Como podéis comprobar es tremendamente sencillo: Tenemos el nombre de la aplicación (name), una descripción (description), el acceso a la primera pantalla (launch_pad) y una referencia al icono (icons). No me molestaré en describir más en este tutorial, solo tenéis que cambiar el texto entre comillas para adaptar vuestra aplicación. En lugar de ello vamos a ver que hace falta para probar esto en una firefoxOS, o mejor dicho, en su simulador.

Para hacerlo, lo primero que necesitáis es el navegador Firefox instalado, para después instalar el simulador de FirefoxOS que funciona como un plugin del navegador. Una vez tengáis ambos, aparecerá la opción en el menú del navegador en Firefox > Desarrollador web > Firefox OS Simulator:

Al pulsar ahí se nos abrirá la página de control del simulador. Lo primero que haremos será añadir la aplicación que hemos creado pulsando el botón "Add Directory":

Entonces buscaremos en nuestro ordenador el programa que hemos desarrollado y escogeremos su archivo "manifest.webapp". Si no lo habéis hecho paso a paso podéis descargar aquí el código fuente del programa. Una vez seleccionado aparecerá la siguiente pantalla, indicando que hemos instalado el programa, y podremos entonces arrancar el emulador, pulsando en el interruptor en el que ahora mismo pone "Stopped":

Entonces veremos ver el simulador, que representa la pantalla de un teléfono. Si arrastramos lateralmente hacia la izquierda podremos recorrer las diferentes pantallas de aplicaciones hasta encontrar la nuestra:

Y pulsando en ella podremos verla su sencillo código en ejecución:

Con esto ya hemos visto como crear una aplicación sencilla y ejecutarla en el simulador. En próximos artículos ya podremos comenzar a hacer cosas más complejas e interesantes. Si tenéis alguna sugerencia sobre lo que os gustaría ver o hacer, serán bien recibidas.

FirefoxOS: Una nueva manera de programar para móviles

Supongo que todos conocéis el navegador Firefox, el tercero en discordia junto a Internet Explorer y Chrome. FirefoxOS no es más que un nuevo sistema operativo para móviles que entrará a competir con Android e iOS, y que usa como base el navegador web para la ejecución de las apps. 

 Uno podría preguntarse si un nuevo sistema operativo para móviles tiene sentido en un mundo dominado por Google y Apple. El caso es que lo que si tiene sentido es el enfoque que le van a dar, y lo demostraremos paso a paso en este blog. Por que lo interesante de FirefoxOS no es el sistema, sino las apps. Apps basadas en tecnologías web, y por lo tanto mucho más fáciles de programar, y mucho más versátiles y accesibles. 

 Si alguna vez te has planteado crear apps para móviles, o aplicaciones web, y eres aficionado a la informática o te gustaría saber algo de programación, este es tu lugar. La web tiene una curva de aprendizaje muy suave, y desde el primer artículo comenzaremos a crear aplicaciones que funcionarán en móviles FirefoxOS y en cualquier navegador web. Y poco a poco iremos viendo tecnologías y técnicas más avanzadas para poder desarrollar cada vez cosas más interesantes.

 Vamos a hablar aquí también de otras cuestiones interesantes para este campo, desde la publicidad para apps hasta el SEO, desde la programación en el servidor hasta la obtención de beneficios. Y espero que vosotros también os animéis a participar. Por que este campo permite desarrollar gran cantidad de ideas, y hace falta gente con iniciativa dispuesta a aprender y colaborar para ponerlas en marcha.