Category: User Interface

Presenting Jolla

November 21st, 2012

Mas información: Jolla.com, Sailfish OS

Announcements, Design, User Interface , No response

Firefox OS sigue avanzando

November 19th, 2012

Firefox OS

Ha pasado mucho tiempo desde la ultima vez que escribí acerca de Firefox OS, o B2G como era conocido anteriormente, el tiempo que ha pasado ha sido muy bien aprovechado por la Fundación Mozilla, tan solo hace falta ver el repositorio de github para darse cuenta la magnitud del progreso, pero no todo ha sido código, también la comunidad tanto de empresas como de colaboradores que giran en torno a Firefox OS esta creciendo y tomando forma.

Si realmente están interesados en Firefox OS, pero no han podido seguir su desarrollo detenidamente y quieren ponerse al día sobre el estado del proyecto les recomiendo ver los videos que se encuentran a continuación, donde podrán conocer los objetivos del proyecto, las APIs, el Marketplace y el ambiente de desarrollo y si desean comenzar a trabajar con el, pueden probar Firefox OS usando el nuevo Firefox OS Simulator el cual es una extensión .xpi para Firefox, o pueden usar la versión desktop de las nightly builds de Firefox OS.

Firefox OS – Introduction & Components

Download slides: Firefox OS introduction (PDF)

FirefoxOS – Developer Enviroment, Apps, Marketplace

FirefoxOS – WebAPIs & UI hacking

Download slides: Firefox OS – WebAPIs & UI hacking (PDF)


Design, Development, User Interface , , No response

Boot to Gecko va tomando forma

February 25th, 2012

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 and Homescreens
B2G Lockscreen y Homescreens

Mozilla Marketplace, Contacts and Messages
Mozilla Marketplace, Contactos y Mensajes

B2G Browser and Photo Gallery
Browser y Galeria de Fotos

Announcements, User Interface , , , No response

Symbian Belle, mismo teléfono, nueva experiencia

February 7th, 2012

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.

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.

  • Changes in Symbian Belle and Qt 4.7.4
  • Optimize your apps for Nokia Belle
  • Update your Apps for Nokia Belle
  • Introduction to the Qt Quick Components
  • Qt Quick Components for Designers
  • Qt Quick Components Deep Dive
  • Getting your Qt app running and deployed on Symbian
  • Qt Components for MeeGo and Symbian Phones
  • Announcements, User Interface , , , , 1 response

    Gaia, la UI de Boot to Gecko (B2G)

    January 29th, 2012

    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 and Dialer
    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
    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.

    Aplicación API
    Dialer Telephony & Messaging API, Contacts API
    Battery Battery API
    Address Book Contacts API
    SMS Telephony & Messaging API, Contacts API
    Camera Camera API, Filesystem API
    Gallery Filesystem API
    Settings Device Status API, Settings API
    Games Accelerometer API, Mouse Lock API, Vibration API
    Maps Geolocation API, Contacts API

    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 "View Source" function and SubteGo
    B2G, función “View Page Source”

    Development, User Interface , , No response