Ajustes al sitio, octubre 2022

Fuentes alojadas de manera local, clases CSS adicionales, arreglos al layout y otras cosas que han cambiado por acá (el diablo está en los detalles). Antes de continuar debo señalar que…

¡El feed va desnudo!

Muchos detalles quedarán perdidos si lees esto desde cualquier otro lugar que no sea el enlace original en fixionauta.net pues transmitir mis entradas por medio del feed (RSS o Atom) arranca de cuajo cualquier otra cosa que no sea el contenido mismo, dejando en el limbo de la eterna virtualidad a la hoja de estilo que se encarga del diseño general que incluye fuentes personalizadas, colores, tamaños, espacios y todos los detalles particulares en un sitio web. Habiendo dicho esto…

---

Ajustes al diseño

Hice pequeños cambios teniendo en cuenta ciertas reglas básicas de Diseño Editorial entendiendo que debían adaptarse a un entorno virtual; por supuesto, el editor de WordPress ayuda mucho pero aún así han sido necesarias algunas líneas de código. Como el Diseño Web y la Programación nunca han sido mis puntos fuertes seguramente hay detalles que pueden pulirse y mejorarse.

En el rediseño de hace meses implementé un layout para las entradas y páginas estáticas y otro para el portafolio (en donde mi intención fue resaltar la galería de imágenes donde presento mi trabajo) pensando en que ambos funcionaran de manera complementaria, ahora se ha reforzado esa idea.

Lo primero que hice fue reorganizar las cabeceras, alineando de mejor manera los elementos, añadiendo enlaces a redes sociales y unas líneas traídas directamente del layout del portafolio. Aquí una comparativa:

Fuentes y jerarquía

Acceder a un catálogo de fuentes tipográficas gratuitas a través de Google es sencillo en WordPress, la cosa se complica un poco cuando quieres usar familias de fuentes que no se encuentran en Google Fonts. Hay varios plugins para facilitar la tarea y también soluciones para hacerlo sin necesidad de éstos, instalando web fonts en el servidor para mostrarlas en tu página a través de código. Para reemplazar a IBM Plex Mono y a Fira Sans he elegido las siguientes fuentes tipográficas:

Unas vez que las nuevas fuentes fueron elegidas y la jerarquía (Título, subtítulo, texto) fue implementada hice otro ajuste al cuerpo de texto al activar la separación de las palabras por sílabas al final de cada renglón para aprovechar mejor el espacio:

La idea original era justificar los textos pero tras probar varias propiedades CSS ninguna me convenció del todo, terminé con resultados burdos que no llegaban a algo que me hubiese gustado: Un justificado igual al que se aplica a los libros impresos. Aún así estoy conforme con lo logrado hasta ahora.

Otro poco de CSS ha servido para mejorar la jerarquía creando el subtítulo (o entradilla), una frase o texto que va después del título y que sirve para describir el tema general de un artículo, se encuentra representado en el primer párrafo de este texto. Además, las medidas de todos los caracteres pasaron de ser definidos en px a rem.

Anotaciones

El pie de imagen (o de foto, figura, ilustración, etcétera) es un texto descriptivo o explicativo que en principio debe ser breve y se encuentra estrechamente relacionado con la imagen que le antecede.

WordPress implementa los pie de imagen por descontado y debo reconocer que en años recientes los he ido usando con mayor frecuencia aunque el estilo con el que Blank Canvas (mi plantilla actual) los despliega puede ser mejorado. De entrada el texto viene justificado al centro y eso quizá funcioné en encabezados y títulos pero me parece un error en textos que pretenden describir o explicar algo. Además, hojeando algunos libros de mi biblioteca veo pies de imagen justificados a izquierda o derecha (incluso uno cuya posición de los pies depende de la página en la que se encuentra, página par con texto justificado a la izquierda, página impar con texto justificado a la derecha) pero en ninguno vi que la justificación se encontrara al centro. Modificando el código CSS se le puede dar un mejor aspecto, con ese fin he cambiado el interlineado, el tamaño y color de la fuente y el espacio entre caracteres, además de añadir la facultad de separar palabras por sílabas al final de los renglones como en los cuerpos mayores de texto. Si a alguien le interesa o le sirve, el código que he usado es el siguiente:

figcaption {
	color: var( --wp--preset--color--secondary );
	font-size: .875rem;
	letter-spacing: .05rem;
	line-height: 1.2rem;
	text-align: left;
	hyphens: auto;
	border-bottom: .15rem solid;
	border-bottom-color: var( --wp--preset--color--tertiary );
	padding-bottom: .5rem;
}
figcaption::before {
	font-feature-settings: 'ss01';
	content: "d";
	padding-right: 1ch;
}

Como se puede notar por la línea font-feature-settings: 'ss01'; estoy aprovechando las variantes estilísticas de Soleil para desplegar un icono al principio de todos los pie de imagen. Como el resultado final me gustó me pasé varios días preguntándome si lo podía aplicar a algo más y eso me llevó a recordar que en el pasado quise implementar las notas a pie de página, así que en base al código anterior cree clases CSS adicionales para usarlas en anotaciones como pie de página y notas al margen, conservando un criterio unificado:

Este texto corresponde a una nota a pie de página, texto de naturaleza breve colocado al inferior de una página en donde suele incluirse información complementaria al cuerpo del contenido, por ejemplo, referencias bibliográficas, citas, digresiones o notas explicativas.

En textos impresos las notas a pie de página (o sus hermanas, las notas al final) funcionan bien, pero en una página de internet es un suplicio ir navegando por medio de hipervínculos entre el cuerpo de texto principal y las anotaciones. Una solución son las notas al margen que se insertan en los espacios en blanco a la izquierda y a la derecha del contenido principal.

Este texto corresponde a una nota al margen, texto breve con información complementaria al cuerpo principal de texto que puede ir numerada.

Como se puede ver, en el Diseño Editorial hay varias clases de notas que pueden ser usadas (cada una con sus particularidades), para simplificar las cosas en un medio que no es impreso voy a limitarme a usar las notas al margen (aunque conservaré el código necesario para las notas a pie de página por si alguna vez las necesito). La convención indica que las anotaciones deben ser breves y pocas, tampoco se trata de llenar los márgenes con contenido, para eso siempre será mejor redactar otra entrada.

Estas notas al margen se aprecian mejor si se accede a través de un navegador de escritorio. En tabletas y móviles todo se colapsa en una sola columna, aunque las notas siguen siendo distinguibles por el tamaño, color y elemento de diseño distinto al resto del contenido. Como mencioné al principio, si se lee esto a través de alguno de los sitios donde comparto el feed (GoodReads, Feedly, el lector de WordPress.com y otros) lo que se verá será el contenido sin florituras, de tal forma que las notas se van a integrar al resto sin ninguna clase de diferenciación.

Algo que queda pendiente es ajustar las distancias entre párrafos y encabezados, por ahora siempre es la misma pero sería genial si los encabezados tuvieran un mayor espacio superior para agrupar mejor el contenido… no he logrado dar con la forma exacta de hacer eso en Blank Canvas, las que he probado no dan con el resultado exacto pero seguro que eventualmente lograré corregir eso.

Para terminar…

Esta entrada estuvo cocinándose por varias semanas en las que iba agregando, quitando y editando texto e imágenes, aunque no pensé que fuera a terminar con tal extensión. Ojalá tuviera el presupuesto suficiente para contratar a alguien que hiciera los cambios por acá, como no es así toca ir implementando cosas de poco a poco.

Quizá esta clase de trabajo es el que tira para atrás las intenciones de mucha gente de montarse un espacio propio, las redes sociales presentan todo masticadito y en la boca para publicar contenido, pero seguiré insistiendo en que crear un sitio sencillo y funcional no representa mucho esfuerzo.

Por otra parte, WordPress no es la única herramienta para crear un sitio personal, hay varias mucho más sencillas. Quizá en el futuro haga un listado de las que tengo en mi radar.