martes, 9 de julio de 2013

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.


martes, 2 de julio de 2013

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:


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