Diseño y desarrollo de una aplicación meteorológica para teléfonos inteligentes

Asignatura: Aplicaciones Rich Media

Consultor y profesor: Daniel de Fuenmayor López / Carlos Casado Martínez

A lo largo de las diferentes PECs y prácticas propuestas por la asignatura Aplicaciones Rich Media se ha trabajado el proceso de diseño y desarrollo de una aplicación para teléfonos inteligentes haciendo uso del binomio Adobe Flash y Adobe AIR. Dicha aplicación, bautizada como MeteoPocket, permite al usuario obtener las condiciones meteorológicas de un lugar concreto para el día en curso, así como un pronóstico del tiempo para la próxima semana, haciendo uso de los datos que proporciona la API de acceso a información meteorológica que ofrece la plataforma de Yahoo!

Etapas y retos

Pese a que la práctica final forma por sí sola un ejercicio completo que plantea el desarrollo de toda la aplicación, el seguimiento de la evaluación continua hace mucho más fácil su realización al definir hitos parciales. Tareas más pautadas o segmentadas, que se van elaborando de forma progresiva y que permiten atacar aspectos aislados del ciclo de desarrollo básico de una ARM.

Las PEC

El trabajo empieza en la segunda PEC, que ataca los tres primeros escalones del ciclo. En ella se plantea la realización de una propuesta gráfica de la aplicación a través de una serie de wireframes que permitan expresar todos los requerimientos del enunciado de la forma más eficaz, simple e intuitiva posible. Una primera aproximación para saber si el diseño de la interfaz y de la interacción funciona adecuadamente. Ante todo hay que recordar que el soporte de visualización será la pantalla de un móvil, y por lo tanto tendrá unas necesidades concretas, como la limitada resolución de pantalla, su orientación o la interfaz táctil que necesita unos tamaños de hit area adecuados para hacer fluida la interacción.

Se trata de entender qué es lo que realmente está solicitando el ejercicio para plasmarlo en dichos esquemas gráficos. Resulta interesante analizar posibles referencias o diseños de concepto de los que extraer un denominador común y señalar, así, cuáles son las mejores prácticas a tener en cuenta para nuestro diseño. Es el momento de detectar patrones compositivos que ayuden a que el usuario se sienta cómodo y su curva de aprendizaje sea mínima. Hecho esto, empezamos a conformar una propuesta esquemática a través de la plataforma online Moqups .

Posteriormente realizamos una propuesta gráfica detallada mediante la herramienta de diseño vectorial Adobe Illustrator. Optamos por un diseño plano o flat design, que otorgue más importancia al contenido que a la estética. Nos decantamos por el uso de un color principal, en este caso el rojo, en combinación con el negro y el blanco que actúan como colores básicos, creando así una harmonía entre todas las opciones del aplicativo. Un punto decisivo en cualquier diseño de interfaz es la coherencia entre sus pantallas, que permite al usuario sentirse cómodo y seguro en la aplicación.

Como se puede ver en las pantallas, se utiliza una composición con mucho aire entre elementos, de forma que la lectura resulte agradable. El patrón muestra siempre una cabecera con el logotipo de la aplicación, el icono de menú y el título de la pantalla actual y una zona de contenido con scroll vertical si fuera necesaria.

La tercera PEC empieza a plantear el desarrollo funcional de la aplicación, que hace referencia a los pasos de codificación y pruebas. Hasta ahora, el prototipo no era más que una colección de simples pantallas que mostraban un contenido estático. Es aquí donde ActionScript 3.0 empieza a tomar un papel relevante. Se introduce el concepto de recuperar datos reales a través de llamadas a la Yahoo! Weather API . De la misma forma, se trabaja en el almacenamiento de información en el dispositivo, que permite guardar las preferencias del usuario así como mostrar información incluso cuando no se dispone de conectividad a Internet.

La práctica

Pasado este punto, la práctica se presenta como una ampliación de todo lo implementado en PECs anteriores. En ella se reflejan pequeñas mejoras, como la posibilidad de que el usuario defina el punto geográfico para el que se desea obtener información meteorológica.

Se añade una nueva pantalla de preferencias que permite seleccionar una ciudad a través de un cuadro de búsqueda para obtener su identificador único o WOEID (Where On Earth ID), que es el que se emplea internamente para consultar la información meteorológica relacionada. La búsqueda por nombre es opcional, pero resulta indispensable si se desea que la aplicación resulte más funcional e intuitiva.

El análisis de patrones comentado anteriormente conlleva a plantearse una duda: ¿es realmente necesario acceder a la aplicación a través del menú? Seguramente todos estemos de acuerdo en que es una pantalla que no aporta información relevante. ¿No sería mejor que la pantalla inicial fuera la del tiempo para el día en vigor, permitiendo que el usuario tenga acceso inmediato a la información? En este caso, la práctica tiene en cuenta este aspecto y modifica el punto de entrada a la aplicación.

Por último, aprovechando el código único que representa cada estado meteorológico (despejado, nublado, nieve…), asignamos una imagen distintiva para cada condición haciendo que sea fácilmente comprensible de forma visual. Para evitar una ardua tarea de diseño de iconografía, decidimos incorporar una tipografía de código abierto bautizada como Weather Icons , que permite representar las diferentes condiciones meteorológicas en función del identificador relacionado. Éstos son algunos ejemplos de los diferentes estados meteorológicos:

El resultado final del proyecto se puede visualizar, a la mitad de la resolución original y adaptado para su funcionamiento en un navegador, mediante la muestra interactiva que sigue a continuación:

Conclusiones

Después de llevar a cabo todo el proceso de diseño y desarrollo desde las fases iniciales, nos encontramos con un camino muy entretenido, didáctico, constructivo y ameno, que nos ha permitido afrontar desde una perspectiva práctica un ejercicio que comparte muchas características básicas con cualquier proyecto de mayor envergadura. Y, aunque siempre hay muchos aspectos a mejorar, me siento muy orgulloso del resultado.

Si bien es cierto que Adobe Flash presenta un sinfín de posibilidades, con un potente entorno de desarrollo, también comparto la opinión de que hubiera sido muy útil tomar contacto con otros lenguajes que están tomando un papel muy importante hoy en día en el mundo de las ARM, como HTML5. No obstante, todo el conocimiento adquirido será fácilmente aplicable a muchos otros lenguajes de programación. Y es que no hay que olvidar lo que bien expone el refrán: el saber no ocupa lugar.

Cita recomendada: LEÓN, Sergio. Diseño y desarrollo de una aplicación meteorológica para teléfonos inteligentes. Mosaic  [en línea], abril 2014, no. 117. ISSN: 1696-3296. DOI: https://doi.org/10.7238/m.n117.1418.