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

domingo, 16 de junio de 2013

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:


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.

lunes, 10 de junio de 2013

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

sábado, 8 de junio de 2013

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:


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.