Creando una web móvil para las Fallas de Valencia

Si otras veces he comentado el proceso que hemos seguido en la agencia para crear un juego en Facebook (La Mascletá, Valencia Racing Team, La Tomatina, etc…), esta vez, para variar un poco, voy a explicar el proceso para crear la Guía móvil de Fallas de Valencia (Iphone, Android, etc..).

La Guía Móvil de Fallas de Valencia funciona en el subdominio fallas.comunitatvalenciana.com Si no se accede desde un móvil se mostrará una página informativa con una breve descripción, código QR y acceso a un simulador para ver los contenidos desde el navegador si no tienes un móvil a mano. El simulador se encuentra en fallas.comunitatvalenciana.com/simulador (no es compatible con IE, hay que usar Chrome, Firefox o Safari)

Simulador móvil vía web

El desarrollo de una web de esta temática, al tener una vida muy corta (su utilidad se limita unas fechas muy concretas), tiene que implementarse de la forma más ágil posible.

Lo primero a tener en cuenta, el contexto:  ¿que información le resultará útil a alguien en la calle, en las Fallas de Valencia y con un smartphone en la mano?

  • Información sobre las Fallas de Valencia (información general, consejos, etc…).
  • Listar las fallas con su localización usando mapas (Google Maps en este caso).
  • Agenda de eventos geolocalizada.
  • Poder verse de forma optimizada desde un iPhone/Android/Smartphone.

La información debía ser útil tanto a turistas como a la gente de Valencia. Un detalle importante a tener cuenta es que las fotos no iba a estar disponibles hasta “La Plantà” (el dia que montan las fallas en la calle), por lo que había que empezar usando los bocetos hasta tener las fotos “reales” de cada falla. Este pequeño detalle hacía necesario un gestor de contenidos (¿cuando no se necesita?) y que resultó más imprescindible aún ya que fueron unas fallas pasadas por agua y hasta un día antes de la noche de la “quema”

Cuando ya teníamos claros los elementos a incluir en nuestra webapp, empezamos con bocetos, mockups, etc..

Primeros bocetos de la Guía Móvil Fallas de Valencia

Los bocetos pasados a limpio con Balsamiq Mockups

Con los elementos sobre la mesa (requisitos técnicos, elementos a incluir, interfaz, etc..) podemos tomar decisiones sobre las herramientas y tecnología a utilizar:

  • WordPress como CMS por la agilidad a la hora de gestionar contenidos y el amplio ecosistema de utilidades y plugins para el uso con móviles.
  • jQuery Mobile como framework javascript para la adaptación del interfaz para móviles.
  • Google maps para la geolocalización de las fallas y eventos.

Usar WordPress nos da  acceso a una inmensa cantidad de plugins con los que poder dar salida a cada necesidad de la webapp. De todos lo que utilizamos, estos son los más importantes:

  • Mobile pack o WPtap Mobile Detector. para asignar el theme movil cuando se acceda desde móvil
  • GeoMashup. Para la implementación de Google Maps a las fichas
  • Magic Fields. Para la personalización de campos en las fichas de las hogueras y agenda
  • qTranslate. Para gestionar los idiomas (castellano e inglés) qTranslate no me gusta usarlo en proyectos en el que importe el seo, pero en este proyecto era algo secundario.
  • Theme Test Drive. Para mostrar de forma pública un theme y en el simulador una versión móvil adaptada para escritorio o facebook.

El diseño del theme se creó a partir de cero utilizando la librería jQuery Mobile. Aunque el desarrollo para móviles puede parecer más sencillo al disponer de menos elementos, hay que tener en cuenta la fragmentación de los dispositivos móviles y las distintas características de cada navegador. Muchas de las transiciones o efectos de jQuery Mobile funcionan de forma diferente en iPhone o en Android, limitacion del ancho de banda, etc…

Inicio con selección de idiomas y guardado en pantalla inicio

 

 

Página de inicio

Descripción de la Falla y subsecciones

Sección Guía con pestañas

Mapa de Fallas y Agenda geolocalizados

 

Los pormenores de todo desarrollo dan para 3 o 4 posts, así que lo voy a dejar aquí :)

La guía se puede probar en el simulador de la web pero lo mejor para verla de forma completa es usar un iPhone o teléfono con Android y visitar la guía:

http://fallas.comunitatvalenciana.com

Si tenéis alguna duda, ya sabéis dónde estoy ;)