Google está trabajando en Android Studio, que será una plataforma de desarrollo de aplicaciones para Android. En este momento se encuentra en su versión 0.1, y está disponible para que cualquiera pueda descargarla (ver apartado de enlaces al final del artículo).

Android Studio se basa en el aclamado IntelliJ IDEA Community Edition de la compañía JetBrains. Por ahora no es más que una versión preliminar, pero seguro que el poder probarla hará las delicias de los curiosos. Los amantes de Eclipse tienen además el plugin ADT, que seguramente ya muchos estarán usando.

El desarrollo de Google está siendo realizado con una estrecha colaboración de JetBrains, proporcionando al producto las características desarrolladas por ambas. Esto, seguramente en un futuro próximo, atraerá a muchos programadores hacía la plataforma IntelliJ IDEA.

En breve, mi compañero Txema Rodríguez os ampliará esta noticia con un reportaje exhaustivo del producto. ¡Permaneced atentos!.

Más información | Android Studio

Arc90 nos trae esta interesante extensión de Chrome que hace que podamos ver, de forma muy rápida, cómo quedaría nuestra aplicación en un teléfono iPhone. Glimpse es un producto pensado para ver los resultados de forma inmediata y ágil.

No se le puede pedir tampoco demasiado, ya que páginas muy complejas (pongamos por ejemplo facebook) fallan, debemos tener muy en cuenta por tanto esta carencia.

¿Cómo se usa?

Sólo tendremos que escribir la URL correspondiente en la caja de texto proporcionada a tal efecto, y rápidamente obtendremos la visualización que tendríamos en un iPhone, y lo haríamos en un navegador no móvil. Sin más complicaciones ni pretensiones.

Arc90 ha publicado este plugin bajo la licencia Apache 2.0, con código abierto, pudiendo acceder al repositorio a través de Github.

Más información | Glimpse en la Chrome Web Store | Arc90

La Fundación Mozilla ha dejado claro desde el principio con Firefox OS que harían lo posible para hacer un gran ecosistema y no querían lucrarse con ello, como bien demuestran permitiendo enviar de forma gratuita a cualquier persona una aplicación al Marketplace (a diferencia de las tiendas de otros sistemas operativos móviles).

Tras ver como desarrollar una app para este nuevo sistema móvil basado en HTML5 y como hacer las aplicaciones instalables sin pasar por el Marketplace toca ver como es de fácil subir nuestra propia app.

Validar la aplicación

Lo primero que debemos de hacer cuando hemos terminado la aplicación es validar el archivo manifest.webapp, ya sea mediante la herramienta de validación del Marketplace o con la reciente versión 3.0 del simulador de Firefox OS que verifica las aplicaciones que instalamos en el.

Mandar la aplicación

Para mandar nuestra aplicación tenemos que ir a la zona de desarrolladores del Marketplace y acceder a la sección de enviar una aplicación (teniendo una cuenta de Mozilla Persona, del que ya comentamos un poco su funcionamiento).

La primera opción es la del tipo de dispositivo donde distribuiremos nuestra app, pudiendo elegir entre Firefox OS, Firefox para Android (diferenciados por Smartphone y Tablet) y por último en Firefox de escritorio y poder distribuir nuestra aplicación en Windows, Linux y Mac. Tras esta elección podemos especificar la URL del archivo manifest.webapp o directamente subir un archivo empaquetado para que sea validado y nos den el visto bueno al manifiesto de la aplicación.

Tras este trámite tendremos que dar más detalles sobre la aplicación, como hacer un resumen de su funcionamiento, enmarcarlo en alguna categoría, exponer nuestra política de privacidad y algunos datos más.

Parte interna del Marketplace

Tras haber enviado nuestra primera aplicación nos encontraremos con la lista de aplicaciones enviadas (estén aceptadas o no), donde podremos realizar cambios en sus datos, que hemos introducido anteriormente y además podremos gestionar varias cosas más.

• Administrar miembros del equipo: podemos añadir a cualquier persona y puede tener el rol de desarrollador (pudiendo modificar cualquier dato de la app menos poder añadir o quitar usuarios del equipo), visualizador (que puede ver la información de la aplicación) o asistencia (que puede ver la configuración de la aplicación y gestionar los reembolso), sin olvidar al propietario que puede gestionar todos los aspectos de la app.
• Administrar la compatibilidad: podemos cambiar las plataformas donde poder descargar la aplicación y cambiar los países donde se distribuirá (actualmente solo permite a unos cuantos países hispanohablantes, probablemente gracias a la influencia de Telefónica y Estados Unidos y Polonia).
• Estadísticas: también tenemos un apartado donde ver las estadísticas de las aplicaciones.

La imagen anterior es del sistema interno del Marketplace, que los chicos de la comunidad de Mozilla Hispano me han enviado amablemente, ya que la aplicación que hemos analizado su desarrollo en estos artículos (la del test de vibración) está pendiente de ser aprobada.

Tiempo de tramitación

Desde Mozilla nos comentan que los tiempos de aprobación de las aplicaciones que no requieren permisos (es decir, no son más que una página web) tienen poco tiempo de demora, pero con las aplicaciones que solicitan permisos especiales se analizan exhaustivamente para evitar malos usos por parte de los desarrolladores.

En Genbeta Dev | Desarrollo en Firefox OS
Más información | Developer Hub – Firefox Marketplace

Nokia acaba de realizar un movimiento estratégico muy interesante al presentar un nuevo móvil de gama muy económica: el Asha 501.

Un pequeño smartphone que es capaz de aguantar la batería más de 40 días, y en el que lo más interesante, desde el punto de vista de desarrollo, es la incorporación de la nueva plataforma de software Nokia Asha, la cual se ha construido sobre la tecnología de las Series 40.

Así se incluye en la plataforma una nueva VM de Orange – el desarrollo se sigue realizando en J2ME; un nuevo Asha UI; el API de Mobile Internationalization (JSR-238); y APIs específicos de Nokia para notificaciones, selección de archivos, escalado de imágenes, estado de la red, contactos y acceso a la configuración del teléfono.

Con respecto a la parte de Web Apps, se usa Gecko como plataforma de rendering, nuevos APIs de UI, captura de fotos y videos.

Puesto en contacto con un representante de Nokia España, ha comentado que la plataforma ha sido creada para poder ofrecer a los usuarios una experiencia de calidad en Smartphone por debajo de los 100$, y facilitar a los desarrolladores una plataforma para crear aplicaciones con un rendimiento óptimo sobre estos teléfonos.

La experiencia de usuario que ofrece el teléfono ha sido rediseñada para pantallas de 3” y el UI usa la navegación basada en el concepto de swipe – arrastrar las pantallas con el dedo para pasar de unas a otras.

El teléfono estará disponible a partir de Junio en 90 países, de momento no se han especificado cuales son. Así que habrá que esperar para averiguar si España está en esta lista de países. Oscar Gutierrez Isiegas, DX Breadth Manager -Spain

Preguntado de la posible competencia con modelos de la gama de entrada de Lumia, ha comentado que el Asha 501 y la plataforma de desarrollo están muy enfocados a smartphones de bajo precio con lo que no es competencia directa con el Nokia 520, que está un punto por encima.

En resumen, una nueva tecnología de desarrollo para divertirnos aprendiendo.

Más información | Nokia developer Asha
En Xataka | Nokia Asha 501
En Xatakamovil | Nokia Asha 501, toda la información

Tras entrar de lleno en las bases del desarrollo de Firefox OS toca convertir las aplicaciones web en aplicaciones instalables para Firefox OS, Firefox para Android o Firefox de escritorio.

Y es que estas aplicaciones también se pueden instalar en nuestro móvil con Android o nuestro Escritorio igual que lo hacemos en Firefox OS, simplemente tenemos que poner en uso el manifest.webapp y la API para la instalación de aplicaciones web de Mozilla.

API para la instalación

Mozilla ha creado una API para la instalación de aplicaciones web que aún no es estándar pero podemos usar perfectamente con Firefox, que es lo importante en este caso.
En la API disponemos de cuatro funciones que nos sirven leer los datos de la aplicación instalada que está en uso, la información de las aplicaciones instaladas desde el Marketplace y un par de funciones para instalar una aplicación que está alojada en un servidor web o una que está empaquetada (en formato .zip).

Instalar la aplicación

Tenemos dos funciones para la instalación, pero ambas actúan igual, tras ser llamadas se valida la aplicación (examinando el manifest.webapp, asegurando que estén los datos correctos y los archivos relacionados presentes y comprueba que se tiene acceso para instalar la aplicación), posteriormente se le pide permiso al usuario para instalar la aplicación y por último se instala y genera los iconos para acceder a la app (esto pasa en todas las plataformas).

Podemos acceder a la API con window.navigator.mozApps, donde encontramos la función install(), que nos permite establecer la URL del manifest.webapp y establecer uno o más recibos de compra (en el caso de ser una aplicación de pago).

var instalar = window.navigator.mozApps.install(url, [recibos de aplicaciones de pago]);

Tras hacer la instalación podemos comprobar si se ha realizado correctamente o no con el evento onsuccess u onerror que genera la petición de instalación.

function install(){
	var instalar = window.navigator.mozApps.install("http://vibracion.firefoxos.xitrus.es/manifest.webapp")
	instalar.onsuccess = function () {
		alert('Instalado correctamente.')
	}
	instalar.onerror = function () {
		alert('Error en la instalación ('+this.error.name+')')
	}
}

Otra opción que tenemos es usar la función installPackage() que funciona igual que la anterior función pero en la URL debemos de establecer un paquete .zip con el manifest.webapp y todos los archivos de la aplicación web.

var instalar = window.navigator.mozApps.installPackage(url);

Saber la información de la aplicación

También puede que nos haga falta saber datos del manifiesto en el uso de la aplicación, por eso disponemos de la función getSelf() que nos devuelve, si no se produce algún error, todo el objeto JSON del manifest.webapp.

En este ejemplo usaremos el supuesto manifest.webapp del primer artículo sobre como desarrollar para Firefox OS.

var appInfo = window.navigator.mozApps.getSelf();
//Accedemos al manifest.webapp
alert(appInfo.manifest.name)			// “Vibración”
alert(appInfo.manifest.developer.name)		// “Pedro Gutiérrez”

Resumen

Hacer las aplicaciones instalables no es complicado, pero tenemos que tener en cuenta que al instalarla no aseguramos que se pueda ver sin conexión a Internet, simplemente se crea el acceso directo y se otorga permisos si es necesario a la aplicación, por lo que deberíamos de usar la caché de HTML5 para que estas páginas se guardasen localmente.

En Genbeta Dev | Desarrollo en Firefox OS
Más información | Mozilla

Diseñar en Firefox OS es muy simple, teniendo en cuenta que las aplicaciones están hechas con HTML5 y CSS3, la única diferencia es que disponemos de una UI que nos recomiendan usar y que podemos establecer el logo de la aplicación, en este aspecto se asemeja a las apps de Chrome.

Mozilla ha puesto a nuestro disposición todos los bloques de la UI de Firefox OS, que incluyen botones, interruptores, cabeceras, menús y algunas cosas más, que pueden ser usadas en cualquier proyecto (no depende de Firefox OS) y vamos a poner en práctica.

Recomendaciones de diseño

Antes de nada vamos a repasar unos fundamentos básicos del desarrollo de aplicaciones móviles:

• Debemos de ser directos y concisos, expresando lo que se quiere decir con pocas palabras para evitar que el usuario ignore el mensaje y decida abandonar la tarea o continuar sin más.
• Marcar bien los pasos que debe seguir el usuario, con iconos preferentemente, que describan las acciones a tomar.
• Si hay alguna acción que tardará en realizarse como descargar información o hacer cálculos largos es recomendable avisar al usuario con un símbolo de descarga o de cargando para evitar que el usuario interprete que la aplicación ha dejado de funcionar.
• Hay que minimizar la escritura en la aplicación, ya que escribir en un móvil es mucho más pesado que en un ordenador, y para ello es recomendable usar checkbox, botones, selectores y otros recursos simples.

Icono de la aplicación

En el artículo anterior vimos como establecer el icono de la aplicación (pudiendo establecer varios tamaños), pero ahora vamos a entrar en el diseño del mismo, que viene también con instrucciones por parte de Mozilla.

Hay tres cosas ha tener en cuenta en el icono: la primera es que se mostrará con unas dimensiones de 60×60 píxeles, que es preferible usar un icono circular o con las esquinas redondeadas y que además el propio sistema añadirá una sombra a la forma del icono.

A lo largo de este artículo iremos creando una aplicación que solo tiene la intención de probar la UI proporcionada por Mozilla y tendrá como icono el logotipo de Genbeta (la caja con un mundo y la letra beta, que tiene más sustancia que el logotipo de Genbeta Dev).

Para el icono de la aplicación nos proporcionan diversos archivos .psd y .png para crear un icono circular, como será nuestro caso, o usar un icono que no es circular y ponerlo sobre una base que nos proporcionan.

Este sería el modelo de icono que pretenden que sea el estándar, aunque también proponen el círculo con elementos que sobresalgan, como el propio símbolo de Firefox (es un círculo pero la cola y las orejas del zorro sobresalen). Pero si aún así no queremos adaptarnos a un círculo podemos tomar las otras dos referencias que nos proponen, ambas son formas cuadradas, la primera de 54x54 y 8px de radio o la segunda opción de 52x52 con 1px de radio, pero sobre todo lo que no quieren son iconos que ocupen todo el cuadro y tengan las esquinas rectas (por poner algún ejemplo podéis visitar el Marketplace de Firefox OS y ver como casi ningún icono cumple las pautas estéticas).

Poniendo en funcionamiento la UI

Mozilla ha liberado todo Gaia (que como ya comentamos es la última capa del sistema, la que sirve la interfaz) y tiene disponible en sus entrañas toda la UI que pondremos en funcionamiento. Se puede conseguir desde GitHub (está distribuido en dos carpetas: style para los estilos que están terminados y style_unestable con todo el CSS que puede sufrir cambios, está incompleto o mal documentado) y debemos de descargar los bloques de la UI que queramos usar, o mejor descargar todos los estilos y añadir los que nos hagan falta.

Al igual que en el anterior artículo podemos probar el ejemplo funcionando y podemos instalarlo en Firefox OS o si tenemos Firefox en Android (que tras instalar una app nos crea un acceso directo en el escritorio del móvil o tablet).

Prueba de la UI de Firefox OS

Componentes

Tenemos que tener en cuenta que los componentes solo incorporan el diseño básico, debemos de controlar nosotros cuando aparecen y desaparecen y las transiciones entre elementos.

Estos componentes se pueden llamar desde la propia página o importándolo desde las hojas de estilos (esta es la opción que expone Mozilla). La siguiente lista está compuesta por todos los componentes que podemos añadir en nuestro archivo CSS si todos los componentes que hemos descargado desde GitHub están en la carpeta “resources”.

@import url(resources/action_menu.css);     /* menús de acciones */
@import url(resources/buttons.css);         /* botones */
@import url(resources/confirm.css);         /* panel de confirmación */
@import url(resources/headers.css);         /* cabeceras */
@import url(resources/status.css);          /* panel de alerta de estado */
@import url(resources/switches.css);        /* interruptores, radio y checkbox */

Menú de acciones

El menú de acciones muestra una lista simple, que se debe de mostrar tras un evento desde la interfaz principal y desde este escogeríamos alguna opción de la lista de la que disponemos.

Podemos añadir las opciones que queramos añadiendo nuevos <button> y automáticamente el último aparecerá como un botón más destacado, que está pensado para cancelar la acción. También tiene un bloque para el título.

En la prueba de la UI podemos encontrar este elemento pulsando el icono de opciones de la cabecera (esquina superior izquierda).

<form role="dialog" data-type="action" id="sample-menu">
  <header id="sample-title"> Título </header> <!-- Título opcional -->
  <menu>
    <button > Acción </button>
    <button disabled> Acción </button>
    <button > Acción </button>
    <button > Cancelar </button>
  </menu>
</form>

Botones

Esta UI nos proporciona tres tipos de botones: el estándar, el de la acción recomendada y el de alerta o peligroso (gris, azul y rojo respectivamente). Que pueden ser añadidos en cualquier lugar y reaccionan al pasar por encima y varían también al estar deshabilitados.

También se pueden crear listas de botones compactas, que redondea las esquinas del primer y último elemento automáticamente.

En la prueba de la UI los botones son los protagonistas, con un interruptor podemos mostrarlos u ocultarlos y con un checkbox podemos deshabilitarlos.

<!-- Todos permiten el "disabled" -->
<button> Normal </button>
<button class="recommend">Recomendado</button>
<button class="danger">Peligroso</button>
<!-- Así se genera la lista de botones compactos -->
<ul class="compact">
  <li><button> Acción 1 </button></li>
  <li><button> Acción 2 </button></li>
  <li><button> Acción 3 </button></li>
  <li><button> Acción 4 </button></li>
</ul>

Confirmación

Es un panel similar al de el menú de acciones, pero incorpora dos botones en la parte inferior de la pantalla donde nos permite elegir entre continuar la acción o cancelarla, y nos permite añadir un cuadro de texto.

Podemos añadir distintos títulos, imágenes y bloques a nuestro antojo, como en la imagen lateral.

Este bloque de la UI no lo he puesto en funcionamiento porque no actuaba del todo correctamente al añadir textos o imágenes.

<form role="dialog" data-type="confirm">
  <section>
    <h1>Confirmación</h1>
    <p>¿Quieres borrar el contacto?</p>
  </section>
  <menu>
    <button>Cancelar</button>                 <!-- botón estándar -->
    <button class="danger">Borrar</button>    <!-- botón de alerta -->
  </menu>
</form>

Cabeceras

Las cabeceras son totalmente personalizables, son el punto fuerte de la UI, tienen tres temas que podemos cambiar y la parte importante está en el botón de la esquina superior izquierda, que es con el que en todo el sistema operativo se retrocede o se accede a los menús.

Podemos añadir varios botones o textos, sin contar el título tenemos tres botones que pueden llevar a otras acciones (uno en la izquierda y otros dos en la derecha) y además podemos añadir una subcabecera.

Disponemos del tema naranja por defecto, el tema oscuro (class="skin-dark") y el tema organic que es grisáceo (class="skin-organic").

En la app de demostración de la UI si pulsamos el botón de menú (el botón superior izquierdo) nos sale un menú de acciones para cambiar el color de la cabecera.

<section role="region">
  <header>
    <a href="#"><span class="icon icon-back">Atrás</span></a> <!-- botón izquierdo -->
    <menu type="toolbar">
      <button><span class="icon icon-edit">Editar</span></button> <!-- botón derecho -->
    </menu>
    <h1>Aplicación</h1> <!-- Título -->
  </header>
  <header>
    <h2>Muy bonita</h2> <!-- Subcabecera -->
  </header>
</section>

Interruptores

En este bloque tenemos varios elementos, los input de tipo radio y checkbox y en dos colores: azul y rojo, este último para advertir de una acción peligrosa.

Los radio son simplemente circulares y se rellenan al estar activos, mientras que los checkbox nos permiten usarlos circulares con un tick en el centro al estar activos o como si fuesen un interruptor.

<!-- Checkbox normal -->
<label>
  <input type="checkbox">
  <span></span>
</label>
<!-- Checkbox rojo -->
<label class="danger">
  <input type="checkbox">
  <span></span>
</label>
<!-- Radio normal -->
<label>
  <input type="radio">
  <span></span>
</label>
<!-- Radio rojo -->
<label class="danger">
  <input type="radio">
  <span></span>
</label>
<!-- Interruptor -->
<label>
  <input type="checkbox" data-type="switch">
  <span></span>
</label>

Más elementos de la UI

La UI tiene unos cuantos elementos más a nuestra disposición pero no todos funcionan como deberían o directamente algunos no están documentados, aunque en el sistema operativo están implementados y funcionan perfectamente.

Alternativas a la UI

La existencia de este pack para la interfaz de usuario no nos obliga a tenerlo que usar, podemos hacer cualquier diseño, aunque es recomendable hacerlo adaptable, pero no tenemos ninguna limitación, admite toda la tecnología de HTML5 y CSS3 y tiene un rendimiento bastante bueno, mejor en el renderizado que en la ejecución de grandes scripts.
Por poner un ejemplo del rendimiento, en renderizado se come, literalmente, el Geeksphone Keon (el móvil con Firefox OS de gama baja, de 90 euros) a mi Galaxy S+, con un experimento donde hay rotaciones 3D de CSS3 en movimiento.
En cuanto a una prueba rápida con Octane si sale perdiendo el Geeksphone con una puntuación de 240 contra 430, aún así el funcionamiento está fenomenal y la estabilidad bastante buena, aunque aún hay que pulirlo (es normal en una prerelease).

En Genbeta Dev | Desarrollo en Firefox OS
Más información | Guía de estilo y Documentación de la UI

Desde que llegaron las primeras noticias sobre Firefox OS este nuevo sistema basado en HTML5 querían dejar claro lo fácil que era desarrollar sobre esta plataforma y también destacaba por su arquitectura simple (basada en un núcleo Linux y el motor de renderizado Gecko) y ahora ya está todo lo necesario para empezar a desarrollar accesible para cualquiera que se quiera aventurar con Firefox OS.

Desarrollar para Firefox OS no es solo hacer una página web, por lo que para empezar veremos como probar las funciones que solo podemos usar en móviles con Firefox para Android o con el simulador, como configurar el archivo manifest.webapp en un momento y ver que requisitos de seguridad nos exigen desde Mozilla para las aplicaciones de su nuevo sistema.

Herramientas

Lo primero que tenemos que hacer es disponer de unas cuantas herramientas básicas si queremos probar el correcto funcionamiento de nuestras apps y la correcta interacción con Firefox OS o con el navegador Firefox para Android, aunque no son necesarias ninguna para desarrollar la propia app, para esto solo te hace falta un navegador y que funcione correctamente en el Firefox de escritorio.

Realmente la única diferencia entre una web y una webapp reside en el archivo manifest.webapp, que es el que nos permite instalar la aplicación (si no entramos en aplicaciones de pago o el uso de APIs algo más avanzadas que necesitan derechos adicionales para usarse).

Para simular al sistema completo tenemos el simulador de Firefox OS que es simplemente una extensión de Firefox que se instala al instante y nos proporciona un menú con una lista de las aplicaciones que le añadimos al simulador (que tienen que tener un manifest.webapp válido), que se instalan instantáneamente en Firefox OS, aunque podemos hacerlo de una forma más realista desde el propio sistema de las varias formas que se puede hacer. El simulador incorpora todo lo que tiene cualquier móvil con este sistema, incluidas las APIs de los ajustes, contactos y demás.

Además el simulador tiene, como era de esperar una consola de depuración, pero aún trae más, tenemos también una consola para depurar remotamente cualquier dispositivo móvil con Firefox o Firefox OS.

Otro modo de probar las aplicaciones de una forma más realista si no disponemos de un terminal con Firefox OS es usar Firefox para Android, que nos permite instalar las aplicaciones y acceder a algunas APIs que no podemos usar desde un navegador (como la de la vibración del móvil) y es sobre lo que estoy realizando las pruebas y sobre lo que podréis probar el primer resultado descargando Firefox desde Google Play.

Formas de servir las aplicaciones

Hay dos formas de servir las aplicaciones, que posteriormente podremos validad o enviar al Market place, la primera es la más común y es empaquetar el archivo, simplemente con una compresión zip donde tendremos todos los archivos y el manifest.webapp. Y por otro lado tendremos las aplicaciones alojadas en un servidor web, que proporcionan la comodidad de poderse usar desde cualquier dispositivo y no solo desde Firefox OS, además de que la tienda de aplicaciones será consciente automáticamente de los cambios realizados (leyendo el manifest.webapp), aunque este método tiene una peculiaridad, el manifest tiene que tener un tipo MIME específico, muy simple de cambiar.

Manifiesto de la aplicación

Como ya he comentado el manifest.webapp es algo indispensable para las aplicaciones de Firefox OS y contiene todos los datos de cada app como su nombre, descripción, datos del desarrollador y algunos datos relacionados con la seguridad como desde donde se permite instalar la aplicación o los permisos que se conceden.

Para probar todo esto he creado una aplicación bastante inútil que nos permite “jugar” con la vibración del móvil, paro pensada con una finalidad “seria”, como es crear ritmos o efectos con la vibración y que te muestre el código necesario para recrear esa misma vibración con la función del navegador navigator.vibrate().

Podéis coger vuestros Android con Firefox instalado y probarlo, si lo hacéis desde el navegador de escritorio hace exactamente lo mismo que con el móvil, menos… eso de vibrar (es decir, es 100% inútil si no es con un móvil).

Sabiendo de que va la chapuza de app os voy a mostrar el manifest.webapp que tiene.

{
    "version": "1.0",
    "name": "Vibración",
    "description": "Prueba Vibración - Genbeta Dev - Pedro Gutiérrez",
    "launch_path": "/index.html",
    "icons": {
        "16": "/img/icons/logo-16.png",
        "48": "/img/icons/logo-48.png",
        "128": "/img/icons/logo-128.png"
    },
    "developer": {
        "name": "Pedro Gutiérrez",
        "url": "http://www.genbetadev.com"
    },
    "installs_allowed_from": ["*"],
    "locales": {
        "en": {
            "description": "Vibration Test - Genbeta Dev - Pedro Gutiérrez",
            "developer": {
                "name": "Pedro Gutiérrez",
                "url": "http://www.genbetadev.com"
            }
        }
    },
    "default_locale": "es",
    "permissions": {     
    },
    "fullscreen": "true"
}

Es completamente un objeto JSON y contiene información sobre la aplicación y sus desarrolladores y además aspectos de seguridad.

Saltándonos los aspectos básicos nos encontramos con installs_allowed_from que contiene un array con todos los sitios desde donde se puede instalar la app, como medida de seguridad más que nada para evitar instalar cosas que no son accidentalmente (en mi ejemplo he puesto el comodín * por comodidad, pero se puede establecer que se instale desde un dominio completo, un subdominio, una ruta o diferenciando puertos).

El parámetro locales proporciona una información de la aplicación y de los desarrolladores alternativa según el lenguaje y por último está permissions que pese a que no lo he utilizado nos permite especificar el nombre del permiso y la explicación de su uso (además de tener que especificar el permiso) y ya la repararemos más adelante detenidamente.

Ubicación del manifest

El manifest.webapp siempre tiene que estar en la raíz del lugar donde se encuentre la aplicación, ya sea empaquetada o teniéndola en un servidor web, pero en este caso tenemos que tener en cuenta su MIME type, que es application/x-web-app-manifest+json (se decantaron por algo fácil de memorizar) y podemos configurarlo de varias formas.

#Añadir esta línea en .htaccess (en servidor Apache)
AddType application/x-web-app-manifest+json .webapp

#Resolver la siguiente cabecera
Content-Type: application/x-web-app-manifest+json;

#Añadir en mime.types esta línea (en servidor NGINX)
types {
application/x-web-app-manifest+json   webapp;
}

Diseño

Lo vuelvo a recordar: es una página web, ni más ni menos, por lo que hacer el diseño no es nada nuevo para la mayoría, solo que nos recomiendan poner en práctica el Responsive Design (del que ya os hemos hablado ampliamente).

Desarrollo de la aplicación

En esta parte voy a recalcar tres cosas, primero es que tenemos dos tipos de APIs: las Web APIs (como la vibración o el nivel de carga de la batería) y las WebRT APIs (que es necesario tener permiso para usarlas y nos permiten acceder a los ajustes, agenda, contactos y demás). Y otra cosa que tenemos que tener en cuenta para el uso de estas aplicaciones es la seguridad, que para hacer uso de ciertos permisos especiales (como el uso de las WebRT APIs) tiene que cumplir unas directivas básicas.

El sentido de poner en práctica estas medidas es para evitar posibles ataques XSS, inyección de enlaces con código o inyección de HTML. Algunas de estas medidas no permiten que una aplicación valide correctamente con el validador de aplicaciones y algunas otras más simples y menos aprovechables para malos fines nos recomendarán solventarlas, pero no supone un problema.

Las medidas de seguridad son las siguientes:

• El código que esté dentro de una etiqueta <script> dentro del HTML será ignorado.
• Las URLs que ejecuten una función JavaScript mediante javascript: serán ignoradas.
• Todos los eventos que se ejecuten desde cualquier elemento (como onload, onclick, onfocus…) serán ignorados, en su lugar debemos de usar addEventListener().
• La función eval() está desactivada por defecto.
• Las funciones setTimeout() y setInterval que pasen las funciones como cadenas de texto en lugar de pasar una función a través de una variable será ignoradas.
• Por defecto los datos pasados por URLs (como son texto o imágenes) que se establecen con data: serán deshabilitados.

Además nos recomiendan el uso de https, sobre todo con el archivo manifest.webapp

Ampliación

Hablar sobre como desarrollar en Firefox OS en un solo artículo sería interminable, pero os adelanto unas cuantas cosas que vamos a ir viendo y son necesarias para hacer cosas complejas:

• Hacer diseños correctos para las apps (con Responsive Design).
• Establecer permisos y hacer uso de las APIs.
• Como publicar una aplicación en el Marketplace.
• Añadir las funciones de instalación en el dispositivo.
• Hacer uso de los métodos de pago y las medidas contra el pirateo de las aplicaciones.
• Crear aplicaciones que funcionen sin conexión.

Resumen

Teniendo en cuenta el fuerte apoyo que está teniendo Firefox OS y la facilidad de desarrollar para este sistema no viene mal tener unos conocimientos básicos de la plataforma, por lo que os recomiendo ir siguiendo el avance de la serie.

PD: si probáis la app en Firefox para Android o si sois de los pocos que tienen un móvil con Firefox OS no dudéis en pulsar “Extra” y darle a “Vibrar”, demuestra un uso muy poco útil de la vibración del móvil, pero uno que si se le podría dar es el de complementar a un juego o vibrar al recibir notificaciones.

Más información | Introducción a Firefox OS (Mozilla)
En Genbeta Dev | Desarrollo en Firefox OS

Spotbros es una startup española que lleva unos meses en el mercado con su aplicación de mensajería para iOS y Android. Rivaliza directamente con Whatapps o Line. Ya cuenta con más de un millón de usuarios y siguen evolucionando ofreciendo funcionalidades extras al concepto habitual que tenemos de mensajería instantánea. Una de ellas es que los desarrolladores ya podemos integrar aplicaciones en Spotbros, gracias al SDK conectada a su API que acaban de presentar, para que los usuarios las usen directamente en el cliente de mensajería.

Para apoyar el desarrollo de aplicaciones que se integren, Spotbros ha abierto un portal para desarrolladores donde se pueden dar de alta aplicaciones (SBApp), así como hacer seguimiento de las estadísticas de uso: mensajes enviados a tu app o el número de seguidores que tiene. Todas la apps se pueden encontrar en el catalogo público dentro de Spotbros, aunque también podemos crear aplicaciones privadas para uso personal o entre amigos.

Tanto como desarrolladores independientes como empresas podemos desarrollar todo tipo de aplicaciones que se comuniquen con la infraestructura de mensajería de Spotbros, usando el SDK que nos proporcionan en PHP para enganchar con nuestro propio sistema de bot o handler de mensajes. No existe límite de usuarios por aplicación ni número de peticiones de mensajes, siempre que se respete el límite de 10 mensajes por minuto como medida anti spam.

Para conectar nuestra aplicación a la infraestructura de Spotbros podemos hacerlo usando el SDK o delegando las peticiones a servicios web de terceros que hagan uso del API, en los ejemplos podemos encontrar ejemplos de delegación. Desde Spotbros están abiertos a que la comunidad de desarrolladores programen su propio código en diversos lenguajes para integrarlo posteriormente al proyecto.

Un caso de éxito de aplicaciones integradas en Spotbros es la que la EMT presentó recientemente ofreciendo un servicio de información a sus viajeros a través del envío de mensajes directos. Por ejemplo, con el envío del mensaje “Espera ” recibimos información sobre el tiempo que resta para que pase nuestro bus.

Podéis encontrar toda la documentación en el portal para desarrolladores de Spotbros, así como el Github con todo el código y ejemplo del uso de la plataforma.

El 20 de Abril se realizará un hackathon en las oficinas de Spotbros. Es una buena oportunidad para conocer más sobre esta aplicación de mensajería y las posibilidades que nos aporta a los desarrolladores de aplicaciones

Más información | Spotbros Developer Portal
Sitio web | Spotbros
En Xataka Android | Spotbros sigue creciendo y llega al millón de usuarios

Android no para de ampliar su ecosistema de terminales, lo que hace que testear una aplicación con garantías de que funcione correctamente en cualquier móvil o tablet sea cada vez más complicado. Por este motivo las empresas se están enfocando en automatizar todos los procesos manuales de pruebas y que sean más complejas. Una de las herramientas que más me ha llamado la atención es Spoon, la cual permite testear sobre una APK los tests de instrumentación que tengamos al mismo tiempo en distintos dispositivos ahorrando mucho tiempo, además de comprobar las diferencias en cada uno.

La aplicación arranca siguiendo los pasos que hayamos definido en las pruebas de instrumentación. Spoon genera un sumario con los resultados agrupados en un HTML estático. Cada dispositivo tiene una ficha con el resultado individual de cada uno de los tests que ha ejecutado exitosamente o con error incluyendo la traza del test, además de una visión global del conjunto de terminales. Aquí vemos un ejemplo de sumario de los resultados.

En este vídeo podéis ver un ejemplo práctico arrancando varios terminales al mismo tiempo pasando los tests simultáneamente.

Como añadido, Spoon permite hacer capturas para cada estado que definamos en la ejecución de los test, los cuales podremos ver en las distintas resoluciones reales de cada dispositivo. Muy útil para detectar fallos visuales o de interacción.

Todo el código del proyecto está disponible en GitHub, donde podemos descargar los jar y consultar las dependencias si usamos Maven. Para ejecutar Spoon con los tests basta con seguir las sencillas instrucciones de la documentación que haremos directamente desde línea de comandos.

Más información | Spoon
Via | Square Blog

New Relic es un completo sistema de motorización de maquinas que permite tener un control en tiempo real de los recursos disponibles. Quizás sea uno de lo más conocidos e instalados para controlar aplicaciones webs, ahora lanza una interesante versión para hacer lo mismo pero de aplicaciones móviles Android e iOS.

Los que habéis usado New Relic habréis comprobado la sencillez de instalación para monitorizar en tiempo real todo tipo de recursos de vuestras maquinas: procesos, carga de página, red, discos, etc… pudiendo fijar umbrales para el envío de alertas. Añadiendo el SDK de New Relic a nuestra aplicación podemos conocer datos como el rendimiento de las conexiones de red a nuestros servidores o los crash report cuando falle.

Un tema que queda invisible cuando distribuimos una aplicación móvil es cuál será el rendimiento de las conexiones de red con nuestros servidores. Es decir, los fallos en las respuesta que puede dar la API que provee los datos a la aplicación móvil: excepciones, timeout, errores de los datos, etc… Con New Relic podemos conocer todos los tipos de mensajes HTTP que reciben nuestras apps, además de los tiempos de respuesta (dato importante para analizar si nuestra aplicación es lenta)

A través de los distintos paneles podemos ver las estadísticas que nos ofrece:

• Conexiones HTTP: tiempos de respuesta, mensajes de error, número de peticiones, etc…
• Errores: crash report cuando en la aplicación se produzca algún fallo tanto de ejecución como con la conexión a nuestra API
• Fijar alertas sobre umbrales de datos de referencia: tiempos de respuesta, errores de autenticación, etc…
• Estadísticas del rendimiento de la aplicación en distintos dispositivos. Conociendo los tiempos de ejecución, el uso de la memoria o la velocidad de red.
• Estadísticas de los usuarios según las distintas versiones de software del sistema operativo

Vía | New Relic Blog
Más información | New Relic for Mobile