En caso de que haya tenido problemas en poder acceder al blog, era debido a que le estaba realizando varios cambios y remodelaciones a la plantilla, ya que la anterior tenía cosas que no me terminaban de convencer, por lo que tuve que seleccionar otra plantilla diferente, y no bastaba con solo seleccionarla, porque todavía tenía varias cosas que no me convencían y tenía que tener en mente ideas de diseño más aparte tener que estudiar el código para poder realizar esos cambios deseados, durante ese período tuve que colocar el blog en privado para evitar que los usuarios al entrar viesen las cosas con las que estaba experimentando o presenten problemas de usabilidad. Luego de más de 3 semanas de remodelación del blog, por fin pude hacer el diseño que quería (al menos a corto plazo), es por eso que les voy a contar todos los cambios que he tenido que hacer en el blog de principio a fin y los problemas con los que me tuve en enfrentar al aplicar dichos cambios.
Cambio de la plantilla.
Lo primero que tuve que comenzar
fue cambiar la plantilla, las características que utilizaba la plantilla
anterior era en que en la página de inicio, las últimas publicaciones se
mostraban de forma completa, mientras que en la versión móvil, se mostraba una
vista previa de la publicación mostrando una imagen cuadrada chica en el lado
izquierdo y en el lado derecho el título y un resumen del contenido, esta forma
de la versión móvil no me convencía para nada y ya lo había modificado para que
muestre la imagen de manera centrada con la relación de aspecto correcta. No
obstante, después tomaría la decisión de cambiarme la plantilla a Emporio, esta plantilla sentía que concordaba más
con la temática de mi blog, ya que en la página de inicio ahora muestra primero
la entrada destacada (opcional, en mi caso yo la removí) y seguido, se muestran
las entradas en columnas, la página es responsive
ya que en vez de utilizar una versión móvil por separada, el banner, las
publicaciones y los gadgets se acomodaban de acuerdo a la resolución del dispositivo.
Así mismo el diseño lo notaba más moderno y compacto, el anterior no es que
fuera malo ya que ese diseño suele ser más ideal para personas quienes desean
comenzar a trabajar en su blog y generalmente para contar más sus experiencias
personales, pero en mi caso, no solo redacto experiencias,
sino también otras cosas como tutoriales y noticias y es necesario que el sitio pueda ser más
eficiente e interactivo para los usuarios quienes la visitan.
Comienzan
los primeros problemas
Al haber cambiado la plantilla,
ya era de esperar que se manifestaran algunos desajustes y problemas en
especial por las modificaciones de las entradas y algunos gadgets que había
realizado con la plantilla anterior.
Problemas con la fuente y párrafo de los textos
El
primer problema que noté y sabía que me daría más problemas era con las
entradas, pues cada vez que suelo redactar una entrada, primero la redacto en Word y luego copio y pego el formato. Esto
ocasionaba que de manera aleatoria el párrafo de los textos variaba mucho y
tenía que modificar manualmente la altura de las líneas, sin embargo, al estar
algunas parcheadas y otras no, al cambiar el diseño, todo esto volvió a quedar
desalineado sumado a que algunos fragmentos de texto permanecían con la fuente
Arial la cual usaba del Word (la fuente original de la plantilla anterior no me
gustaba). Lo que tuve que hacer fue ir revisando cada entrada (siendo un total
de más 40 así que imagínate) y con la opción de reemplazo en la edición HTML,
quitar todos los siguientes parámetros de jalón en cada entrada.
line-height:
107% (El porcentaje
podría variar del ajuste)
font-family:
Arial
También tuve que modificar
otros parámetros debido a elementos especiales como los mensajes de
advertencias y algún otro párrafo especial.
No se muestran todas las
entradas por página
Esto
ya me había pasado con la plantilla anterior y pensé que se solucionaría con la
nueva, pero seguía todo igual. Algo extraño que me pasaba era en cuanto a la
cantidad máxima de publicaciones que debían mostrarse en la página de inicio o
las de entradas anteriores, no importaba cual número asignaba, siempre se
mostraban mucho menos entradas de las establecidas, y si iba a la siguiente
página para ver las anteriores, no era constante, es decir, a veces podían
mostrar hasta 5 y otras veces solo 1. Busqué varias soluciones pero algunas
eran difíciles y otras solo sugerirían cambiar la plantilla o tener que reducir
el texto o imágenes de las publicaciones (que locura esto último). Hasta que
encontré una solución muy sencilla que consistía únicamente en insertar un salto de línea en cada entrada, este
salto lo podía colocar después del primer párrafo de la publicación. Haciendo
esto en cada entrada me solucionó el problema (como me hubiese haber sabido
esto desde el principio).
Problemas con la usabilidad
en dispositivos antiguos
Por naturaleza, a mí me
gusta que en mi blog, cualquier persona pueda acceder a él sin importar el
dispositivo que use sea cual sea. Con mi pequeña colección de dispositivos
(celulares, computadoras, tablets y consolas) realizo un laboratorio de pruebas
para analizar el comportamiento del sitio en cada uno de ellos. Con la
plantilla anterior no tenía casi ningún inconveniente y la experiencia en la
mayoría de dispositivos era aceptable. Sin embargo, al aplicar la nueva
plantilla, y eso que presuntamente es responsive,
los dispositivos en especial los más antiguos sufrían de varios inconvenientes.
Algunos dispositivos
cargaban el sitio con un zoom demasiado grande, otros superponían los gadgets
tapando el contenido de la publicación y en el peor de los casos, simplemente
se crasheaba el navegador. La experiencia no solo leyendo, sino navegando era
mala, muy complicado o hasta imposible poder hacer una búsqueda. Algunas de las
cosas que tuve que modificar fueron las siguientes.
- Modificar el tamaño
resposive de algunos de los gadgets
- Eliminar algunos elementos
o gadgets innecesarios
- Modificar parámetros de
ciertos elementos, un ejemplo de estos es este:
.sidebar-container{
z-index:-5;
}
Este parámetro en
particular, se encarga de indicar un orden de posicionado al elemento,
generalmente tenía un valor positivo demasiado grande, y los dispositivos
antiguos, cuando el elemento como el de las entradas destacadas el cual debe
ubicarse en la parte inferior del sitio, en ellos simplemente lo ponían en el
mismo lugar donde se encuentran los párrafos de la publicación y eso ocasionaba
que se superponía sobre dichos párrafos dificultando así la lectura, todos los
elementos tienen un valor z-index y al colocarle un valor al gadget inferior al
de la sección de la publicación, se solucionó este problema pero aun así,
habían otros problemas que serían arreglados en los siguientes ajustes.
Aplicando los cambios con la nueva plantilla
Agregando la barra de
secciones, subsecciones y búsquedas
Después de hacer las
correcciones menores, seguiría con las mayores empezando por la página de
inicio. La página se veía bien pero de las cosas que no me satisfacían mucho
eran: La ubicación del campo de búsqueda, el que el banner no se podía apreciar
en su máximo esplendor debido al estorbo del gadget de búsqueda (mencionado
anteriormente) y otros gadgets, y en que la versión móvil la manera en cómo se
reajustan la sección de etiquetas.
Así que tuve que poner manos a la obra con la edición HTML y CSS estudiando el código para reajustar y acomodar esos gadgets de la manera correcta dependiendo de la resolución del dispositivo. Esto me consumió mucho tiempo, ya que tuve asignar varios valores en distintas resoluciones, tener que agregar mucho código para la barra tanto para la versión de escritorio como móvil, distintos parámetros y por ensayo y error probar cada uno ya que a veces solían tener conflicto con los predeterminados. También se le agregó código Javascript para las listas desplegables de la versión móvil que ya había utilizado esa barra en la plantilla anterior pero debido al cambio se había desajustado. Así quedaron los resultados.
De manera similar, tuve que modificar la barra cuando se encuentra en una publicación ya que es diferente que el de la página de inicio, tenía dos opciones, hacer que se utilice el mismo banner y barra de la página inicio o modificar directamente la barra, tomé la 2da opción ya que sentía que era más práctico tener una barra sencilla en las publicaciones que el banner, tuve que modificar parámetros nuevamente y acoplar las barras que hice en la página de inicio a esta. Los resultados quedaron de la siguiente manera.
El
banner predeterminado cuando se encuentra en una entrada o post (antes)
El
banner mejorado (después)
También agregué algunas secciones adicionales en el pie de página y en la lista desplegable móvil. Es importante y sugerido que las leas ya que indican el propósito y guía de este blog que creé, así como los otros medios que utilizo (como YouTube) y el uso correcto de dichos medios.
Otros ajustes
Banner dinámico y ajuste
El banner de la página de
inicio representa no solo el título de mi blog, sino también los juegos que he
jugado a lo largo del tiempo. Al cambiar la plantilla, el banner no se mostraba
en su resolución original, en su lugar cargaba una imagen más reducida, esto no
se notaba cuando tiene un dispositivo de baja resolución o tamaño pero si
bastante si era lo contrario, modifiqué la etiqueta de la imagen que utilizaba
por defecto asegurándome de también modificar los parámetros condicionales, ya
que si no tenía cuidado con eso, alteraba también el banner de las
publicaciones. Después de eso, lo que quería era que el banner fuese diferente
y cambie de manera aleatoria cada vez que se entre a la página ya que esto me
daría más la oportunidad de que se pudiesen ver más de los juegos que he
jugado. Entonces sería reemplazar la sección donde se encuentra la imagen
preestablecida por este script.
function randRange(lowval, highval){
returnMath.floor(Math.random()*(highval-lowval+1))+lowval;
}
var randHdr = randRange(1,2);
if(randHdr == 1){
document.write("<img
src='https://blogger.googleusercontent.com/Banner_01min.webp'/>")
}
else if(randHdr == 2){
document.write("<img
src='https://blogger.googleusercontent.com/Banner_02min.webp'/>")
}
En este script de ejemplo, permite
mostrar hasta un máximo de 2 imágenes diferentes cada vez que se desea acceder
a la página de inicio, pero solo modificando el segundo parámetro de la función
randRange() y agregando distintos else if, puedo agregar la cantidad de imágenes aleatorias
que yo quisiera.
Ajuste de la relación de
aspecto de las miniaturas de las publicaciones
Ya había lidiado esto con la
anterior plantilla y al cambiarla, tendría que nuevamente en hacer los ajustes
en el código CSS de la misma, lo que me gusta de la nueva plantilla es que la
imagen sin importar el tamaño o relación de aspecto que tenía, se centraba y
autoajustaba al estándar que ofrecía. Tuve que hacer la modificación
dependiendo del tamaño de la página, ya que al ser responsive, la relación
cambiaba, por lo que tuve cuidado al modificar cada parámetro para que la
relación 16:9 se mantenga lo mejor posible. Dado que algunas pocas imágenes de
las publicaciones no tenían ese aspecto, simplemente la plantilla lo acomodaba
centrando y cortando la imagen para que quepa y se ajuste al estándar lo cual
era de agradecer.
Entradas populares en la sección de una publicación
La
sección de entradas populares en una página de publicación en la versión para
tablets
En la página de una
publicación se encuentran las publicaciones más populares del momento, estas se
ubican en la parte derecha en la versión de escritorio y en la parte inferior
en la versión móvil, sin embargo, en la versión intermedia (equivalente a
tablet) la cual es la misma que la móvil, no se veía bien ya que las entradas
se veían muy grandes ocupando mucho espacio las miniaturas, por lo que
modificando el código, hice que en este punto se divida en 2 columnas, una vez
que el largo sea más corto, se ajustaría nuevamente a ser una sola columna.
Pruebas finales
Ya con los últimos ajustes
hechos, era hora de poner en acción el blog utilizando mi colección de
dispositivos para asegurarme de que todo funcione en orden, si bien, no pude
resolver todos los problemas en el caso de los dispositivos más antiguos en
especial el del PS vita, pues este siempre
se bloqueaba al entrar en una publicación y por más que edité o removí scripts
siempre pasaba lo mismo, por lo que la única solución era desactivar el Javascript por completo desde el
navegador, pero afectaba el uso de las funciones del encabezado y el banner dinámico
ya no se mostraba al depender de esta función, no obstante, en todos los
dispositivos se podía consultar una publicación o realizar una búsqueda siendo
lo suficientemente pasable para ser usable.
He terminado lo esencial
pero todavía hay más por agregar en el futuro
Luego de mucho esfuerzo y
arduo trabajo, he logrado tener un diseño más acorde a como lo tenía pensado y
que sea más usable e interactivo, yo sé que Blogger no me permite ofrecer tanta
personalización con el código en especial por no poder insertar PHP, MySQL o
eliminar algunos complementos, además de que tengo que tener todo junto en un
archivo xml y no poder ordenar y separar mis hojas de estilo (CSS) y JavaScript,
pero no hay presupuesto de momento para comprar y mantener un alojamiento y
dominio (así es la vida). Esto no será el final ya que pienso agregar a futuro
posiblemente nuevos gadgets o widgets que puedan mejorar la experiencia del
usuario y lograr que se enganche y pueda estar atento a todas las novedades de
este blog las cuales habrá siempre nuevas publicaciones de distintos géneros (videojuegos,
gadgets, noticias, tutoriales, experiencias personales y más). Si ha pasado por
algo similar durante el desarrollo de su blog o sitio web, puede dejar sus
experiencias e impresiones en la caja de comentarios.
Comentarios
Publicar un comentario