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.

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.

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.