Se acerca el MWC 2012, posiblemente esta sea una de las ediciones que mas expectativa ha generado, van a ser cuatro días cargados de novedades, presentaciones y oficializaciones de varios proyectos, uno de ellos es B2G, que paso de ser un experimento y no ser tomado en cuenta por muchos, a tener según se rumorea a LG como primer socio para el desarrollo de un dispositivo con B2G como su OS, B2G aun esta muy verde como para ser lanzado comercialmente, así que si hay un anuncio de un móvil con B2G seguramente estará orientado a desarrolladores y no a usuarios finales, vendría ser, salvando las distancias, algo así como lo que fue el N950 para el N9, un dispositivo para que los desarrolladores puedan ir probando, migrando y creando aplicaciones para que cuando B2G este listo para salir al mercado, lo haga con una cantidad interesante de WebApps listas para ser descargadas desde el Mozilla Marketplace.

Esperemos que los anuncios de la Fundación Mozilla en el MWC 2012 colmen las expectativas y permitan crear una masa critica de desarrolladores y empresas interesadas alrededor del proyecto, como para ir calentado motores les dejo algunas screenshots de la ultima build de Gaia, que si las comparan con las de mi anterior post acerca de Gaia, podrán apreciar el nuevo diseño de la UI y todo el avance que se ha llevado a cabo.

B2G Lockscreen y Homescreens

Mozilla Marketplace, Contactos y Mensajes

Browser y Galeria de Fotos

Hoy 7 de Febrero comenzó el deployment mundial de Symbian Belle, yo vengo usando Belle desde la primera versión que se filtro hace ya unos meses y puedo dar fe de que el cambio es grande y para mejor, pero el motivo de este post no es hablar sobre las mejoras que trae Belle, sino dejarles una lista de recursos que les van a servir a la hora de comenzar a adaptar o crear una nueva aplicación que aproveche el nuevo paradigma que propone Belle.

Diseño

En los siguientes links van a poder encontrar las guiás de diseño para Symbian Belle las cuales les van a permitir conocer los nuevos componentes y patrones que forman parte de la UI y como y donde utilizarlos, también encontraran información sobre la nueva iconografía y templates que les permitirán crear los iconos de sus aplicaciones con la seguridad de seguir al pie de la letra las recomendaciones del equipo de diseño de Nokia.

• Symbian Design Guidelines
• Designing for Symbian
• UI patterns
• UI components and stencils (Online)
• UI components and stencils (Offline)
• Iconography style summary
• Symbian iconography guidelines

Desarrollo

La mejor forma de que nuestras aplicaciones se adapten completamente al nuevo estilo y a los nuevos patrones de interacción que trae Belle es usando Qt en conjunto con Qt Components, en la siguiente lista de recursos encontraran, documentación, guiás de publicación, presentaciones y webinars que les permitirán ahondar en este tema.

Gaia, es la UI de Boot to Gecko, decir que esta en un estado de alpha seria algo muy optimista, Gaia mas que nada esta en un estado experimental, en donde se están probando y aplicando las mejoras que van apareciendo en WebAPI, así que tanto en lo visual como en lo estructural todo puede cambiar en mayor o menor medida.

En Gaia todo es una WebApp y la primera de las WebApps que vemos es la Homescreen (ver imagen debajo), la Homescreen usa window.navigator.mozApps para encontrar todas las WebApps instaladas y mostrar su correspondiente icono en la Homescreen, esto es en la teoría, actualmente el listado de apps que se ven en la Homescreen esta hardcodeado en el archivo ${GAIA}/apps/homescreen/webapi+apps.js, como dije al principio Gaia es una PoC (prueba de concepto) bastante experimental, por lo que en esta etapa del proyecto es posible encontrar cosas como estas.

B2G Lockscreen, Homescreen y Dialer

El resto de las aplicaciones están en un nivel muy básico de desarrollo, algunas están mas avanzadas y son mas funcionales que otras, por ejemplo ya es posible enviar SMSs usando B2G siempre y cuando lo estemos corriendo en un dispositivo, otra app que por obvias razones esta muy avanzada es el Browser, el resto de las apps están en sus comienzos, por lo que habrá que esperar para ver su evolución.

B2G Browser

Instalando Gaia

Podemos probar Gaia, flasehando una imagen de B2G en un dispositivo (Samsung Galaxy S2, Nexus S) he instalando Gaia encima, otra opción es hacer lo mismo pero corriendo todo en el emulador que trae el SDK de Android y por ultimo podemos correrlo dentro de un browser, esta ultima opción es la que escogí yo, el proceso para compilar Gaia, esta muy bien explicado en la Wiki de Mozilla, antes de comenzar con el proceso de compilación es recomendable chequear que cumplimos con todos lo pre requisitos necesarios para compilar Firefox, la información esta disponible para varias distros en Mozilla Developer Network, presten especial atención a Autoconf ya que Mozilla usa la versión 2.13 de Autoconf para las tareas de compilación y la mayoría de las distros viene con una versiones mas actualizada, por lo que casi con seguridad van a tener que hacer un downgrade.

Web Apps en Gaia

El modelo de desarrollo de apps para B2G se basa en estándares Web, usando HTML, CSS y JavaScript, si han creado una aplicación Web usando solo estas tecnologías el proceso de portarlas a B2G es algo trivial, ademas se esta trabajando en un conjunto de APIs para poder acceder a funciones “nativas” de los dispositivos y extender su funcionalidad, en la siguiente tabla pueden ver un listado de estas APIs.

Estructura de una WebApp

En el siguiente esquema pueden ver como esta organizada una pequeña WebApp, la estructura es la misma que utilizan las apps que viene precargadas con Gaia, así que estimo sera la que ellos recomendaran en un futuro, si lo desean pueden organizar los archivos de la manera que les parezca mas cómoda lo único que si o si tiene que estar presente en la WebApp es el archivo manifest.appcache.

paulo@kendra ~/repos/gaia/apps/subtego $ tree
.
├── js
│   ├── jlinq.js
│   ├── lines.js
│   └── stations.js
├── manifest.appcache
├── manifest.webapp
├── style
│   ├── icons
│   │   └── SubteGo.png
│   ├── images
│   │   ├── a.png
│   │   ├── b.png
│   │   ├── c.png
│   │   ├── d.png
│   │   ├── e.png
│   │   ├── h.png
│   │   ├── h.png
... ... ... ...
│   │   └── pin.png
│   └── ui.css
└── subtego.html

manifest.webapp

Este archivo describe la WebApp, el nombre y el icono que se verá en la Homescreen como así también el archivo de inicio de la WebApp.

{
  "name": "SubteGo",
  "description": "SubteGo for Gaia",
  "launch_path": "/subtego.html",
  "developer": {
    "name": "realnorth",
    "url": "http://realnorth.net"
  },
  "icons": {
    "120": "/icons/SubteGo.png"
  }
}

Si siguen estos simples pasos y usan estándares web, migrar o crear una aplicación “compatible” con B2G sera una tarea simple, si tienen dudas o quieren ahondar mas en el tema pueden aprender mucho mas viendo el código de las WebApps que se incluyen en Gaia o consultar directamente el código de una WebApp haciendo uso de la función “View Page Source” (ver primera imagen debajo) que se incluye en varias apps en Gaia.

B2G, función “View Page Source”

No soy un entusiasta de Android y posiblemente nunca lo sea, pero si hay algo de lo que soy fanatico, es del diseño de interfaces de usuario, es por eso que las nuevas Android Design Guidelines me resultan muy interesantes, Android contaba ya con unas guiás, pero eran muy limitadas y se centraban mas en el diseño de iconos que en otra cosas (mas importantes), estas nuevas guiás van un paso mas allá, tratando de transmitir la visión que de ahora en mas el equipo de UX de Android quiere imponer tanto a los fabricantes de dispositivos como a los desarrolladores de aplicaciones, explicando como usar y donde aplicar los diferentes patrones de interacción “aprobados”, como así también cuestiones relacionadas con el diseño visual de las apps, que tienen como objetivo unificar el lenguaje visual y terminar con el zoológico en el que se ha convertido el diseño de interfaces de usuario en Android.

El diseño de las guiás esta muy logrado y a pesar de haber leído y analizado muy poco de ellas, he podido comenzar a entender lo que el equipo de UX de Android quiere transmitir a sus usuarios, esperemos que tanto los OEMs como quienes desarrollen aplicaciones para Android empiecen a aplicar estos fundamentos tanto en sus dispositivos como en sus apps y que dejen de reinventar la rueda con paradigmas y diseños que nada tienen que ver con la plataforma o con “mejoras” en la UI (TouchWiz, MotoBlur, Sense) que lo único que agregan son problemas a los usuarios a la hora de actualizar de versión.

Mas información: Android Design Guidelines

Boot to Gecko, B2G para los amigos, es un proyecto que surgió a mediados de 2011 dentro de la Fundación Mozilla, la idea detrás de este proyecto es la creación de un Sistema Operativo para dispositivos móviles (smartphones, tablets), por ahora se encuentra en una fase exploratoria y de experimentación, en el mismo se están usando y llevando al limite las mas actuales tecnologías y estándares web abiertos. En primera instancia el objetivo de B2G no es crear un producto para luego ser ofrecido a fabricantes OEMs, pero si las cosas marchan bien, todo lo aprendido y desarrollado con B2G puede terminar convirtiéndose en un producto que podrá ser usado por fabricantes es sus dispositivos.

La conexión Android

En esta etapa inicial se están usando algunos componentes comunes con Android en el proyecto (Linux kernel, drivers, libusb y algunos componentes mas), esta decisión tiene como objetivo minimizar el trabajo que puedan llegar a tener los fabricantes de dispositivos que quieran utilizar B2G en los dispositivos Android que actualmente fabrican y venden, la conexión entre Android y B2G se limita a ciertas zonas del core y no pasa de ahí, esto quiere decir que B2G no es compatible con las aplicaciones Android, B2G no usa Dalvik ni ninguna otra tecnología de desarrollo de Android, ya que el modelo de desarrollo que la Fundación Mozilla quiere impulsar se basa en usar APIs Web actuales y futuras.

Show me the code

A diferencia de Tizen, el código de B2G esta disponible en GitHub desde el mismo momento en que fue anunciado, esto permite que el proyecto gane en credibilidad, y permita a gente testear B2G desde etapas muy tempranas del desarrollo.

Actualmente es posible probar B2G en el emulador que viene junto al SDK de Android o bien si tienen un Samsung Galaxy S2 o un Nexus S 4G pueden flashear la imagen en el dispositivo, el proceso no es complicado, aunque requiere de bastante tiempo y algunos cuidados, en mi caso no cuento ni con Galaxy S2 ni con un Nexus S para hacer pruebas, por lo que opte por compilar la versión que corre en el emulador, lamentablemente he fracasado miserablemente las dos veces en las que he intentado compilar B2G, espero hacerme un tiempo pronto para poder encontrar los problemas que me impiden compilarlo y así poder probarlo personalmente para compartir mis impresiones con ustedes.

Gaia

Gaia es el nombre de la phone experience en la que se esta trabajando para ser usada en B2G, por el momento esta todo muy verde, en la wiki del proyecto pueden ver algunos conceptos que han presentado algunos miembros de la comunidad.

En el siguiente video pueden ver la UI en funcionamiento, lo que ven es una prueba de concepto, por lo que no se puede tomar nada de lo que se ve como definitivo, lo que si resulta extremadamente interesante es la función a la View Page Source que permite ver el código html + css + javascript usado en cada uno de los componentes y aplicaciones usadas por la UI.

Como ven el proyecto pinta interesante y esta avanzando a paso firme, el numero de personas que están trabajando en el mismo paso de 2 o 3 personas a 20, y según algunos rumores, es posible que el próximo mes en el Mobile World Congress 2012 la Fundación Mozilla haga una presentación del proyecto, lo que con seguridad nos permitirá conocer mas acerca del futuro y la dirección que va a ir tomando el proyecto.

Recursos

Si están interesados en el proyecto, a continuación les dejo algunos links con recursos que les serán de utilidad para ir conociendo mas del mismo.

• B2G Wiki
• B2G Roadmap
• B2G FAQs
• B2G Presentation at Mozcamp Berlin
• B2G Presentation at Mozcamp Asia
• mozilla.dev.platform discussion group