WebApp movil para las Hogueras de San Juan de Alicante

Hogueras San Juan Alicante 2011

Hace unos meses publiqué un pequeño post sobre la webapp para fallas que desarrollamos para el Portal de Turismo de la Comunitat Valenciana. Ahora le toca el turno a su proyecto gemelo: la Guía Móvil para las Hogueras de Alicante (hogueras.comunitatvalenciana.com)

Para las Fallas de valencia estaba previsto una versión de la guía adaptada para Facebook que al final, por tiempos, tuvimos que recortar en el proyecto final. Aprovechando que ya teníamos mucho trabajo hecho para las fallas, hemos podido meter una pequeña aplicación para facebook de la guía.

Como las dos guías (la de hogueras y la de fallas) comparten muchas características, esto es lo que publiqué en el anterior post:

¿que información le resultará útil a alguien en la calle, en las Hogueras de Alicante y con un smartphone en la mano?

  • Información sobre las Hogueras de Alicante (información general, consejos, etc…).
  • Listar las Hogueras 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 Alicante. Un detalle importante a tener cuenta es que las fotos no iba a estar disponibles hasta “La Plantà”

Y la parte técnica:

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 hogueras 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 packWPtap 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.

Hogueras San Juan Alicante 2011

Hogueras San Juan Alicante 2011

Hogueras San Juan Alicante 2011

Con todo esto tenemos la versión optimizada para móviles, pero ¿y la versión de Facebook?.
Para crear la app que actualmente está funcionando como pestaña en la web de la Comunitat Valenciana, los pasos serían los siguientes:

  • Crear una app nueva en Facebook
  • Diseñar un theme nuevo para WordPress ya que va funcionar con la misma configuración a nivel permalinks, nombre de las páginas, etc…
  • Usar el selector de theme “theme test drive” para utilizar uno u otro en base al diseño a mostrar: facebook, escritorio, movil, etc…
  • Optimizar el diseño para que los contenidos se muestren correctamente en un ancho de 520px y siguiendo las pautas de diseño para pestañas en Facebook
Hogueras San Juan Alicante 2011

App en Facebook funcionando en la pestaña de la Comunitat Valenciana

Hogueras San Juan Alicante 2011

Ejemplo de ficha de Hoguera en Facebook

En otro post explicaré más a fondo los pasos para crear la app y usar los contenidos de WordPress.

Las fotos de que hay publicadas son las del día de la plantà y muchas de ellas no estaban terminadas o se ven gruas y camiones. En la versión que hicimos para las fallas sólo se mostraba una foto pero para la versión de hogueras tuvimos que hacer cambios para mostrar más fotos por ficha.

Podéis ver las fotos de las hogueras de categoría especial que hemos hecho para la web app de hogueras en mi cuenta de flickr. Las hice en 3 horas contrareloj para que tenerlas disponibles al día siguiente de la plantà.

Set en Flickr de las fotos para la web app

Set en Flickr Hogueras Alicante 2011

Podéis acceder a la web y los distintos enlaces (QR, página en Facebook, etc..) en el subdominio hogueras.comunitatvalenciana.com