sábado, 15 de marzo de 2014

Cómo crear un sencillo portfolio fotográfico con Blogger, Flickr y Google Drive

Este post rompe con la dinámica habitual del fotoblog, pero es porque en él os voy a explicar cómo he creado mi nuevo portfolio, que podéis ver en http://santimb.photos/. Mi objetivo era conseguir montarlo en poco tiempo, gratis y con el mínimo mantenimiento posterior posible. A primera vista os puede parece un procedimiento complicado, pero una vez lo hagáis ya veréis que no es para tanto.

Elegí Blogger porque es una plataforma web gratuita, muy extendida (es de Google) y con posibilidad de personalizar la plantilla hasta niveles insospechados (si sabes algo de HTML y CSS), y Flickr porque es donde publico y organizo todas mis fotos.

El portfolio tiene que ser sencillo y claro en apariencia y diseño, y con los siguientes contenidos:
  • una biografía
  • un formulario de contacto
  • un enlace al blog
  • varias galerías con una selección de mis fotos más representativas
Estas galerías se van a corresponder con álbumes de Flickr, y lo ideal es que el portfolio obtenga las fotos directamente de allí para no tener que subirlas a Blogger, por lo que tendremos que buscar alguna herramienta o widget que lo pemita, y a ser posible que presente las fotos de una manera atractiva, rápida y elegante.

Elegimos la plantilla sencilla y la personalizamos quitándole todos aquellos bloques que no vayamos a usar. Es recomendable también deshabilitar la visualización Móvil. En cuanto a colores a mí me gusta el fondo muy claro, casi blanco, y el color del texto gris oscuro, sin llegar a negro, y respecto a fuentes, una Verdana o una Trebuchet resultan claras y elegantes. Podemos llegar a cambiar el aspecto de algunos elementos de la página gracias a las ayudas para el desarrollo que nos aportan los navegadores Web. La mayoría de ellos entran en un modo de depuración pulsando F12 que nos permite ver el código HTML de la página y localizar en ella los elementos que nos interesen para ver qué estilos CSS se aplican y poder alterarlos. Una vez encontramos la combinación correcta la podemos entrar en el diseñador de plantillas de Blogger, en el apartado Avanzado/Añadir CSS.

Modificando los CSS de la plantilla

El contenido que queramos poner en la página inicial lo crearemos como una nueva entrada de blog. En mi caso elegí la biografía. El resto de contenidos serán páginas. Para el formulario de contacto utilicé el servicio de generación de formularios online de http://www.emailmeform.com/. Los enlaces a los contenidos los añadimos a la página en gadgets de Lista de Páginas. Por defecto la plantilla ya tiene uno en la parte superior, debajo del título. En este gadget ponemos la biografía y el formulario de contacto, y añadimos también el enlace al blog o a cualquier otro sitio que queramos. En otro gadget de Lista de Páginasponemos el resto de contenidos. Yo añadí este gadget en la columna de la izquierda.

Hasta aquí la parte fácil. Ahora viene la más complicada, la de enlazar las galerías del porfolio con los álbumes de Flickr. Estuve probando varios servicios online que crean slideshows a partir de álbumes de Flickr y que se podían incrustar en las páginas de contenido como HTML, pero el problema es que utilizaban Adobe Flash, lo que los hacía incompatibles con dispositivos Apple y Android. Finalmente encontré una aplicación que genera slideshows en HTML5 compatibles con todos los dispositivos. La aplicación se llama VisualLightBox y se puede descargar gratuitamente de http://visuallightbox.com/. El único problema de este "visor" de fotos es que necesita un servicio de hosting Web para alojar todos los archivos que se usarán para presentar las fotos y sus miniaturas, y no se puede hacer con Blogger. Y para alojar estos archivos nada mejor que Google Drive.

Google ofrece a todos sus usuarios 15GB gratis de almacenamiento conjunto para Gmail, Google Docs y Google Drive. Google Drive funciona como Dropbox, como un disco virtual, y se puede enlazar físicamente con tu ordenador mediante una aplicación que nos podemos bajar desde la web de Google Drive, y así tu PC verá esta unidad como una carpeta más. Para almacenar los archivos que genere VisualLightBox tendremos que crear una carpeta en nuestro Google Drive y hacerla pública para que se pueda acceder desde la Web. Esto lo podemos hacer más cómodamente desde el PC, pulsando el botón derecho del ratón sobre la carpeta a compartir, seleccionando la opción Google Drive del menú contextual y luego Compartir.... Tenemos que elegir la opción que de acceso Público en la Web. Ahora nuestra carpeta ya será accesible desde cualquier sitio, pero la URL no será nada intuitivo, sino del estilo "http://googledrive.com/host/0B9bFpwATvM_hY2MzVK9lRjIxdlk". Podemos convertirla en una URL más amigable en el servicio http://gdriv.es/.

Ahora que ya tenemos resuelto el problema del hosting ya podemos volver con VisualLightBox. Esta aplicación es muy fácil de usar, y está en casi todos los idiomas. Sólo tienes que indicarle la URL del álbum de Flickr que quieres usar y ella descarga miniaturas de las fotos. Luego editas los títulos y/o cambias el orden de presentación si quieres, y cuando estés listo vas a Propiedades y allí indicas el comportamiento y el aspecto que ha de tener que slideshow y que más se adecúe al portfolio que estás creando. Una vez hecho todo esto vamos a Publicar y marcamos la primera opción, Publicar en la carpeta. Con el botón Buscar... localizaremos la carpeta local correspondiente a la carpeta Google Drive que hemos publicado más arriba. Finalmente publicamos y se guardarán unos archivos y carpetas en nuestro PC que automáticamente se sincronizarán con su homónima en Google Drive. Seguidamente se abrirá el slideshowlocal en un navegador para poder comprobar su aspecto y funcionamiento y decidir si tenemos que cambiar alguna cosa en Propiedades. Antes de acabar podremos guardar el proyecto para usos posteriores.

Llegamos a la parte final de todo este montaje, la de incrustar el slideshow en la página. Para ello necesitaremos cierto código HTML que encontraremos en el archivo index.html que ha generado VisualLightBox en nuestro Google Drive, pero que no podemos utilizar tal cual está. Abrimos el archivo con el Bloc de notas y lo primero que tenemos que hacer es reemplazar todos los "index_files/" por la URL definitiva correspondiente, ya que las páginas del portfolio estarán alojadas en Blogger pero ejecutarán código y cargarán imágenes de nuestro Google Drive. Si hemos publicado VisualLightBox directamente sobre la carpeta que compartimos en la Web reemplazaremos todos los "index_files/" por "http://gdriv.es/[el_nombre_que_decidimos_arriba_en_gdriv.es]/index_files/". Seguidamente nos fijamos en un fragmento que hay al principio del archivo, dentro de la sección HEAD, concretamente el comprendido entre la línea que contiene "Start VisualLightBox.com HEAD section" y la que contiene "End VisualLightBox.com HEAD section". Este fragmento corresponde al código del motor de visualización. Tendremos que seleccionarlo, copiarlo y pegarlo en la plantilla de Blogger, concretamente con la función Editar HTML, justo antes de la etiqueta que cierra la sección HEAD de la plantilla:

Código HTML de la sección HEAD

Guardamos y volvermos al index.html, y ahora nos fijamos en el segundo bloque, el que hay entre la línea que contiene "Start VisualLightBox.com BODY" y  la que contiene "End VisualLightBox.com BODY section". Esta parte corresponde a la parte visual del slideshow. Si os fijásteis, en la página Web que se abrió después de publicar con VisualLightBox, al pinchar sobre las miniaturas las fotos seguramente se mostraban un poco pequeñas. Eso es porque VisualLightBox abre las imágenes de Flickr de tamaño estándar (500px). Si queremos que se vean más grandes tendremos que añadir los sufijos correspondientes a los nombres de los archivos. Los archivos de imagen están en las etiquetas HTML que tienen "http://farm[un_numero].static.flickr.com/". Insertaremos "_z" o "_b" justo delante de ".jpg". El primer sufijo corresponde a 640px de ancho, y el segundo a 1024px. Una vez arreglado este código HTML seleccionamos el bloque, copiamos y pegamos en el cuerpo de la página que corresponderá a esta galería.

Y ya tenemos nuestro porfolio:

VisualLightBox integrado en la página

Espero que os sea útil todo este tutorial si no queréis perder mucho tiempo ni gastar dinero para tener vuestro propio portfolio fotográfico. Si tenéis alguna consulta o se os ocurre alguna sugerencia sobre este método, no dudéis en contactar conmigo. Ah, y recordad visitar mi portfolio en http://santimb.photos. ;)

SantiMB Photos

Anexo del 2/12/2016

Con motivo de recientes cambios en el servicio Google Drive, que ya no permite el acceso a archivos desde webs, el portfolio dejó de funcionar correctamente, así que me he visto obligado ha rehacerlo con WordPress y alojarlo en un "hosting". Por eso si entráis ahora en la dirección de arriba, http://santimb.photos, no veréis la web explicada en este artículo sino una totalmente reformada partiendo del mismo contenido. Pero eso ya será tema para otro artículo.

Nuevo portfolio creado con Wordpress



No hay comentarios:

Publicar un comentario en la entrada