Nuevo diseño de “Diarios de una Bultaco”

Dándole una vuelta al blog…

La literatura “blogera” que circula por Internet dice que la vida media de un blog esta entre los 15 meses y los 2 años; la gran mayoría no supera el año de vida…

Realmente es difícil mantener un blog activo unos cuantos años. Tuve la oportunidad de verlo nada más comenzar con este. Diarios de una Bultaco nacía para documentar y guardar el proceso de restauración de una antigua Bultaco Alpina del año 1979.

El tema tenía un recorrido muy corto, unos pocas entradas recogerían los trabajos de  restauración de la moto; en otros 3 post sintetizaba la historia del modelo, y para de contar…

 

Cabecera del blog, desde sus inicios hasta el 2013

…así que muy pronto el blog cambió de dirección y se convirtió en el contenedor para otras dos aficiones con las que alargar su vida y, de paso, compartir información y conocimientos (pocos) con otros navegantes interesados en lo mismos temas. Una forma de devolver lo que yo mismo aprendía y absorbía de otras páginas. Finalmente la temática del blog serían los vehículos clásicos, los viajes y la fotografía.

Cabecera desde 2013 hasta Mayo 2016

Por supuesto, no faltaba la motivación. Sin ella cualquier blog tiene muy poco recorrido. Escribir una entrada siempre ha sido un hobby , nunca una obligación. Más aún cuando el blog es simplemente la web personal de un aficionado, sin ninguna connotación profesional o comercial.

Así podía ser la nueva cabecera…

… y así acabó siendo, 100% de elaboración casera

Las redes sociales tampoco lo han puesto fácil, al contrario. Es mucho más sencillo hacer microblogging en Facebook o Twitter que preparar una extensa entrada.

El contenido del blog tampoco lo pone fácil… apenas publico entradas cortas, de 30 / 40 líneas y un par de imágenes. Los viajes son poco propensos a ese formato… salvo que te limites a contar lo que ya todos sabemos. Lo mismo sucede con las fotos, hay que seleccionarlas y “revelarlas”, con la eficaz ayuda de Lightroom.

Llega un momento donde –casi sin quererlo- te marcas unos mínimos de calidad. Muy poco tienen que ver las fotos de los primeros años a las que ahora acompañan a los post… detrás hay unas cuantas horas de trabajo que sería imposible realizar sin verdadera motivación y afición.

Como premio tengo muchos recuerdos de viajes, carreras de motos y exposiciones de vehículos clásicos fácilmente accesibles. Sin el blog hace ya mucho que estarían en otra dimensión de mi disco duro mental.

Por supuesto no me olvido de los blogeros que he tenido oportunidad de conocer, algunos en “vertical” como dicen los radioaficionados. Grandes viajeros con los que he podido cambiar impresiones. Moteros –por aquí queda alguna salida en moto inolvidable-, o pilotos de motos clásicas que han querido compartir su historia y la de sus máquinas.

Y también algún maestro, como el desaparecido Javier Herrero –enciclopedia viviente de la historia motociclista española- que no sé como llegó hasta Diarios de una Bultaco y me envió un mail con el texto que encabeza el índice de los post del GP de La Bañeza

RENOVARSE O MORIR- Modificando la plantilla del blog

Llegado este punto tengo claro que hay que afrontar el trabajo de renovar el diseño del blog, hace tiempo anticuado, y buscar uno más funcional y actual.

La idea de cambiar la plantilla ronda desde hace meses, pero la pereza para hacerlo la supera con mucho. El primer intento –voy a lo fácil- será sustituirla por alguno de los miles de diseños que se ofrecen por internet.

Unas cuantas pruebas -buscando el mas adecuado- dejan un desalentador resultado final. Siempre hay problemas; porque la plantilla de la que parto tiene el código modificado. El resultado se presume incierto, poco satisfactorio y con mucho trabajo por medio.

Cuando tengo claro lo que voy buscando voy a por el segundo intento.

Este transcurre por un camino que siempre he tratado de evitar, por el trabajo que conlleva y la incertidumbre sobre el resultado final: Modificar el código HTML de la plantilla para dejarla a mi gusto.

El trabajo será una buena oportunidad para refrescar los olvidados conocimientos sobre HTML y aprender un poco de JavaScript y CSS.

El nuevo diseño está claro: hay que “limpiar” la página de carga del blog. Dejando atrás el antiguo formato que muestra los post completos, con el resultado de una página inicial interminable y lenta en el tiempo de carga.

La idea es mostrar un fragmento de los dos o tres últimos post, un slider con la foto y el título de otra media docena de entradas distintas a las anteriores y reducir  –en tamaño e información-  la barra lateral del blog. Su contenido no desaparece, lo llevare a otras páginas enlazadas desde el menú principal.

A medida que hago los cambios aprovecho la oportunidad para incorporar algunos efectos de diseño que hacen más fácil o atractivo navegar por el blog.

Así, en el espacio vacío de los laterales que dejan los navegadores se incorpora un logo flotante del blog,  con fondo transparente, y las flechas que llevan al inicio y al final de la página con un agradable efecto de scroll.

Un botón Volver lleva de regreso a la página anterior.

Utilicé este artículo para añadir el código a mi plantilla:

http://www.charkleons.com/2015/06/como-agregar-las-flechas-de-ir-arriba-e.html 

Más complicado resultó adaptar el código para que el fragmento del último post publicado fuera, visualmente, distinto del resto.

Opté por encuadrarlo, con un fondo de otro color, y añadir un botón en el área del título para resaltar la novedad. El botón enlaza con el contenido completo de la entrada.

Asimismo se aplican en este post unos efectos Hover –hay toda una colección que permite modificar texto e imágenes-. En este caso el título aumenta de tamaño, con un efecto zoom,  al pasar el cursor por encima y la imagen -o imágenes- que se muestren en el fragmento se degradan a blanco y negro al pasar el cursor por encima.

Enlace para el código efecto zoom en el texto:

 http://www.ciudadblogger.com/2011/11/aumentar-el-titulo-del-blog-o-imagen-de.html

Como aplicar el efecto Hover para degradado de imágenes:

http://www.oloblogger.com/2012/09/imagenes-escala-grises-css.html

Advertir que los efectos Hover no funcionan en todos los navegadores – o mejor dicho en según que versión de navegador- Se ven bien en Firefox, Chrome, Opera, Edge, Safari y en las versiones anteriores a la 10 de Internet Explorer –las dos últimas han dejado de soportarlos-.

Diseño para el primer post. La imagen en color se degrada a B/N al pasar el cursor

Título del primer post con efecto Zoom

El cuerpo principal del blog se completa con dos fragmentos de la penúltima y antepenúltima entrada. Para facilitar más contenidos al posible lector añadí a continuación un slider que muestra progresivamente la imagen y título (ambas enlazables) de los seis post anteriores. Inicialmente deberían de ser entradas anteriores aleatorias, pero el código JavaScript que debería seleccionar los post aleatoriamente no funciona (de momento…).

La base para este Slider es el código publicado en el enlace: http://www.oloblogger.com/2013/08/slider-entradas-recientes.html

Captura del Slider situado al final de página

Para rematar, el final de la página  principal se divide en tres columnas donde se sitúa parte de la información que antes estaba en la barra lateral derecha.

Este artículo de CiudadBlogger sirvió de base:

http://www.ciudadblogger.com/2012/01/anadir-dos-columnas-de-gadgets-arriba.html

Por último, se modificó el código que muestra las entradas más vistas. Añadiendo dos efectos Hover. El primero recorta la imagen a formato circular y el segundo la muestra –con un efecto de rotación- en un tamaño mayor, fácilmente modificable mediante código.

Estos artículos fueron la base para modificar el Gadgets “Post más populares”:

http://www.oloblogger.com/2012/06/transformando-el-gadget-de-posts.html

http://www.oloblogger.com/2012/08/miniaturas-blogger-grandes-redondas.html

Izq. vista normal. Dcha. efecto  Hover al pasar el cursor por la imagen

ENLACES CON LAS  HERRAMIENTAS UTILIZADAS

Las paginas web´s de  CiudadBlogger, Oloblogger y Charkleons resultaron imprescindibles para llevar a buen fin estos cambios.

Si bien, -tal y como comentaba al principio sobre la dificultad para mantener vivo un blog- alguna de estas páginas llevan tiempo “dormidas” – CiudadBlogger publicó su ultima entrada en enero del 2015- sus artículos siguen estando vigentes.

En ellas hay cientos de artículos con el código necesario para implementar todos los cambios que puedas imaginar en la plantilla de tu blog.

Con el agradecimiento para sus autores: El Potro, Oloman y Charkleons por compartir sus trucos y conocimientos.

Perdido entre tanto código los tutoriales de HTML y CSS de w3school arrojaron luz donde solo veía sombras.

http://www.w3schools.com/html/

http://www.w3schools.com/css/

El blog se renovó nuevas imágenes, botones, logos y gift´s animados creados, de forma rápida, con estas utilidades online:

Online Imagen Editor – Muy útil para crear imágenes transparentes o modificar fondos.

Picasion – Sencillo y rápido para crear gif animados a partir de nuestras fotos.

Makeagif – Editor de Gif animados.

Pho.to – Retoques y efectos sorprendentes a tus imágenes con unos pocos clicks.

La Web HTML Color Codes resultó imprescindible para identificar los colores por su código hexadecimal y efectuar pruebas con el blog.

… Y LA MAQUINA DEL TIEMPO

Si estas interesado en ver una versión antigua de una pagina web -incluso de la tuya- para ver como han evolucionado, este es el enlace a la máquina del tiempo en Internet, donde se conservan instantáneas de diversas fechas.

https://archive.org/web/

Simplemente tecleando la dirección (URL) nos muestra una barra temporal y un calendario donde están resaltadas las fechas en las que hay archivada una captura de la página referenciada.