Programación Página web oficial Arrecifes. Oasis de Vida

Páginas web, apps, blogs, tiendas online, plataformas de enseñanza...

Programación Página web oficial Arrecifes. Oasis de Vida

Última modificación: 7 febrero 2018

1.- Descripción del Proyecto

Diseño y programación página web  realizada para la empresa Bluescreen, S.L. página oficial de la película, “Arrecifes. Oasis de vida”, primera película submarina de España para la gran pantalla.

2.- Características del Proyecto

Funcionalidades Imprescindibles de la Página Web

Dos de los requisitos más importantes que debe cumplir este proyecto son;

1.- Descarga de archivos de alta calidad, cuando se promociona una película hay que facilitar a los profesionales de los medios de comunicación (prensa, radio, televisión, bloggers…) imágenes de alta calidad de la película, carteles y logos de promoción, documentos de making of, entrevistas, bio de directores, etc.

2.- Geolocalización: la película Arrecifes. Oasis de vida, se proyectará en múltiples salas de cine de España, la promotora de la película indica que sería de utilidad que los usuarios pudiesen acceder a los datos de las salas de proyección más cercanas a su ubicación en la fecha en la que se realiza la consulta, es decir; si un usuario está interesado en ver la película un día concreto, la web permite que el usuario pueda indicar su ubicación y carga los cines más cercanos a su ubicación en dicha fecha, mediante gps llevará al usuario hasta la sala de cine seleccionada.

Otras características de la página web

La película se rodó en diferentes localizaciones; Cuba, Egipto, Maldivas… se implementa un mapa interactivo para separar el material  según localizaciones.

3.- Desarrollo del Proyecto

Programación Página Web

Theme Premium WordPress

La web se programa en wordpress, se decide utilizar un tema premium que soporta vídeos e imágenes de alta calidad, el tema seleccionado para el desarrollo del proyecto es Blacklabel, un tema responsive que lleva incorporado woocommerce, en un futuro se puede ampliar la funcionalidad de la página para vender la pélicula, imágenes … en la web.

Si quieres conocer las características completas del Theme Premium de wordpress de este proyecto lo encontrarás aquí:

Custom Post Types

Se separan las entradas creando custom post types para localizaciones, archivos de prensa y salas de cine. El custom post type de cines puede cargarse desde una base de datos externa, mediante javascript, php y ajax la página mostrará según fechas las salas donde se proyecta la película, si el usuario de la web decide localizar su posición el funcionamiento será similar a lo anterior pero mostrando sólo la ubicación, coordenadas… de las salas más cercanas a la posición del usuario.

Mapa Interactivo

El primer pensamiento es intentar buscar un plugin de creación de mapas interactivos para mostrar las distintas localizaciones de rodaje de la película, en general los plugins que pueden cumplir esta función llevan incorporadas características que no son necesarias para nuestro desarrollo y en este proyecto no compensa instalar un plugin que en la mayoría de los casos son bastante pesados, ya que con unas pocas líneas de código se puede solucionar. Se crea un nuevo archivo php dentro de la página y usando  html+css+ajax y php+MySQL se implementa un mapa interactivo con las localizaciones de rodaje, mediante eventos de ratón y ajax, la página muestra la descripción e imágenes según localización.

API Google Maps

Encontré algunas empresas extranjeras que tenían desarrollado aplicaciones web para geolocalización, es muy común ver este código en tiendas online que tienen diferentes tiendas físicas por ejemplo zara, media market… la decisión era comprar el código o crearlo usando la API de Google Maps, comprarlo quedo descartado ya que las empresas que tenían desarrollado este tipo de código estaba implementado para su correcto funcionamiento en otros países y los parámetros a modificar dentro de la programación eran muy numerosos.

Por suerte la API de Google Maps está muy bien documentada y después de dedicar algunas horas al estudio de la misma decidí desarrollar la página de localización de cines cercanos a la ubicación del usuario.

Traducciones

Se modifican los archivos .po y .mo para modificar traducciones del tema y los plugins.

Páginas php y css

Cada página de la web debe mostrar distintos custom post types con distintos diseños para ello se crean distintas page.php y se añade una hoja de estilos .css que implementa y modifica en gran parte el diseño del tema original.

Iconos Geolocalización

Google pone a disposición de los desarrolladores varios iconos de geolocalización, sin embargo en este caso para cumplir con las directrices de diseño de la página se compraron iconos en la web 123rf, uno de los bancos de imágenes, vídeos, audios… más importantes y en la que confío para muchos de mis proyectos, tienen millones de imágenes de pago y gratuitas y servicio de atención al cliente en español.

Stock Photos from 123RF

Redes Sociales

La película se promociona en facebook y twitter, se integra el page plugin de últimos comentarios de facebook en el index de la página y dos iconos de enlace a las redes sociales. Dentro del backoffice de wordpress se instala un plugin que permite enviar a facebook y/o twitter aquellas entradas y custom post types que interesen e interactuar y crear comentarios directamente desde wordpress.

4.- Tecnologías

  1. WordPress
  2. html5+css3
  3. ajax
  4. Diseño Responsive
  5. Theme wordpress premium Backlabel
  6. API Google Maps
  7. Woocommerce

Conocí a Nerea hace ya unos años, cuando nos planteábamos cambiar nuestra antigua web hecha en flash por algo más actual. Sus aportaciones fueron vitales para dar un fuerte impulso a nuestra imagen. No solo nos aconsejó, sino que se involucró como si fuese una más de nosotros. Llegó a tal punto esta participación que le pedimos por favor que fuese ella la que le diese forma y tomase las decisiones más adecuadas…, nosotros nos limitamos a facilitarle la estructura. El resultado fue impresionante. Desde entonces, todos nuestros proyectos, cambios, mejoras, e incluso gestiones en servidores las hace ella, no tenemos la más mínima duda. …Esta relación profesional se ha consolidado en el tiempo y ha generado una nueva relación: la amistad. No sé si puedo, debo, o es correcto dar un consejo desde aquí, pero si lo puedo hacer es éste: contacta con ella, cuéntale tu proyecto y déjate llevar porque al segundo de estar hablando con ella, su cabecita empezará a trabajar para tí.

José Manuel Herrero Gaspar

Director, Op. Subacuático en Bluescreen, Bluescreen, S.L.

Bluescreen

¿Te ha ayudado el artículo? Si es así me alegro.

Si necesitas más información puedes dejar un comentario…

Ver otros trabajos Lph