Cambios en el blog
A simple vista, el blog abandona su esquema monocolumna con el menú horizontal, para pasarse a un modelo de tres columnas. A la izquierda el menú y algunos elementos generales. En el centro, la columna principal, conserva el texto principal de los artículos y se habilita una tercera columna para mostrar notas e información que puede ser interesante. Pero aparte de ese aspecto más llamativo, trae más cambios que quiero explicar un poco.
También hay algo de funcionalidad nueva en el código fuente que genera el blog, para facilitarme la tarea. No hay muchas novedades, porque el sistema está funcionando correctamente desde hace tiempo.
Otro aspecto que se nota al abrir el blog son los cambios de fuente de la página. La fuente principal que pasa la página es la Georgia. Como fuente de paso fijo se utiliza la DejaVu Sans en su versión Nerd Font por lo que me permite también utilizar algún que otro icono en el diseño de la página, sin recargar el peso de la misma con gráficos o fuentes específicas.
Código nuevo
Si alguien tiene más curiosidad, puede seguir los cambios en el repositorio de Codeberg. Si tiene algún problema con la implementación de su blog con ese código no dude en enviarme un mensaje al correo enlazado en el pie de página o a través de las herramientas del repositorio de Codeberg.
La primera funcionalidad que me parece destacable es la implementación de un generador de página en modo borrador para comprobar la visualización antes de subirla. En teoría, el sistema de blog en el que se basa ya lo hace. Sin embargo, yo utilizaba esa previsualización sólo de manera que debo publicar el artículo para generar el sitio de nuevo antes de subirlo. Algunas veces eso hace que pase un borrador desde el directorio de borradores al de artículos, se quedara allí y cuando publicaba otro, automáticamente me publicaba también el borrador que no quería. Cuando me daba cuenta corría a eliminar ese artículo y rehacer de nuevo todo el blog.
Previsualización de borradores
La nueva función de previsualización genera el archivo .html en el
mismo directorio de borradores, por lo que evito el problema de
publicar algo que aún no está maduro. Ocurre también cuando estoy
editando algún artículo para corregir errores. La nueva visualización
se llevará a cabo en el directorio de borradores.
En conjunto con la previsualización decidí también poder lanzar un
servidor http en el directorio del blog. Utiliza las variables
notxor-blog-port y notxor-blog-preview-directory para establecer los
parámetros para luego levantar el servidor de pruebas que trae Emacs
incorporado, para visualizar el sitio.
(defun notxor-blog-server-start () "Open server for preview drafts." (interactive) (setq httpd-port notxor-blog-port) (setq httpd-root notxor-blog-preview-directory) (httpd-start))
Mostrar una previsualización de borradores lo hará en el directorio de borradores.
(defun notxor-blog-preview-draft () "Render a preview of POST-FILENAME." (interactive) (notxor-blog-with-find-file (notxor-blog-matching-preview-filename buffer-file-name) (notxor-blog-render-html buffer-file-name)))
Este comando genera el archivo .html del archivo que estamos editando
tomándolo del buffer actual. Si estoy corrigiendo errores en un
artículo ya publicado no tengo que hacer nada, la previsualización se
realizará también en el directorio de borradores y por tanto minimizo
la posibilidad de publicar algo no terminado.
Javascript eliminado
He decidido eliminar todo rastro de javascript de la página. El javascript se mantenía principalmente por dos motivos. El primero eran los botones de donación por Paypal y por LiberaPay. En los siete años que llevaban puestos he recibido la friolera de 5€ en total, así que he decidido quitarlos, no tienen sentido. El otro motivo es la visualización de fórmulas matemáticas mediante MathJax. Para mí tenía sentido, pues utilizaba la misma sintaxis de LaTeX para visualizarlas y era algo que tenía conocido y asimilado. He decidido cambiarlo por el estándar MathML, aprobado por la W3C y por ISO. La mayoría navegadores lo soportan y no se necesita javascript.
Cuando me refiero a la mayoría de navegadores, me estoy refiriendo a que la mayoría de los navegadores gráficos lo soportan. Los basados en texto suelen no hacerlo.
La siguiente fórmula se verá defectuosa en ellos:
Tampoco se visualizará correctamente en Dillo, navegador que utilizo cada días más.
Nuevos macros y modos de anotación
Para simplificarme la introducción de código HTML he introducido
algunos macros nuevos, por lo que en la actualidad cuento con tres de
ellos para la edición de artículos en el blog:
#+macro: nota @@html:<span id="nota">@@$1@@html:<span class="nota">@@$2@@html:</span></span>@@ #+macro: sup @@html:<sup><b>$1</b></sup>@@ #+macro: inline @@html:<math display="inline" style="white-space:nowrap;">$1</math>@@
El macro inline me permite introducir una fórmula matemática en la
línea de texto normal. Por otro lado, el macro nota ya existía, aunque
lo uso muy poco. Lo comentaré más adelante. El macro sup permite
introducir superíndices directamente en la página, algo que pensé para
las notas y que también explicaré más adelante.
A vueltas con las notas
Ejemplo de notaEsta cosa se verá al pasar el cursor por encima. Se pueden utilizar negrita o cursiva, pero no puede haber saltos de línea. mediante despliegue de un marco al pasar el cursor por encima del texto resaltado mediante el subrayado. Esta nota se ha generado con el código siguiente:
Ejemplo de {{{nota(nota,Esta cosa se verá al pasar el cursor por encima. Se pueden utilizar negrita o cursiva\, pero no puede haber saltos de línea.)}}} mediante despliegue de un marco al pasar el cursor por encima del texto resaltado mediante el subrayado. Esta nota se ha generado con el código siguiente:
Es un intento de hacer algo más funcional a las etiquetas <acronym> y
<abbr>, que permita aplicar estilos a los textos.
Cambio de las notas desde el pie de página a las notas al margen[1].
[1]: Con las notas al pie de la página, ver qué dicen implica mover toda la atención fuera el texto y luego volver. En un libro sobre papel impreso me parece correcto. En una web me parece que perjudica más de lo que parece.
La nota anterior se ha conseguido mediante el siguiente código:
Cambio de las notas desde el pie de página a las notas al margen{{{sup([1])}}}. #+begin_margen [1]: Con las notas al pie de la página, ver qué dicen implica mover toda la atención fuera el texto y luego volver. En un libro sobre papel impreso me parece correcto. En una web me parece que perjudica más de lo que parece. #+end_margen
En la primera línea se utiliza el macro sup para situar la marca de
llamada de la nota y luego se utiliza un bloque margen para situar el
contenido en el lateral de la página.
Una vez hecho este tipo de notas me reservo el uso de las mismas. Hay
navegadores, que no tienen soporte completo para CSS donde este tipo
de estilos no se visualiza correctamente. Los sitúa mal o directamente
ni los muestra. Por ello, me decidí a implementar otro sistema de
mostrar advertencias, completar información y demás cosas que se hacen
con las notas a pie de página, mediante tres tipos de bloques que se
mostrarán en la misma columna central:
Puesto que no se visualizan correctamente las anotaciones que había preparado, me planteé utilizar también otros marcos, que se visualizan en la misma columna del texto, remarcando que es una anotación y no un texto más. Dillo y los navegadores de texto que utilizo no los visualizan exactamente como han sido diseñados, pero al menos no solapan texto.
Bloque de aviso
#+begin_aviso #+html: <h1>Título</h1> Esto es un bloque de aviso. El icono que utiliza es el clásico del triángulo con una exclamación dentro @@html:<code></code>@@ en color rojo. El resto del marco también utiliza colores rojizos. El título es opcional y se añade directamente en html. #+end_aviso
Título
Esto es un bloque de aviso. El icono que utiliza es el clásico del
triángulo con una exclamación dentro . El título es
opcional y se añade directamente en html.
Bloque de información adicional
#+begin_info #+html: <h1>Título</h1> Esto es un bloque de ejemplo. El icono que utiliza es el clásico círculo con una «i» dentro @@html:<code></code>@@ en color negro. El resto del marco también utiliza colores grises y el blanco de fondo. El título es opcional y se añade directamente en html. #+end_info
Título
Esto es un bloque de ejemplo. El icono que utiliza es el clásico círculo
con una «i» dentro en color negro. El resto del
marco también utiliza colores grises y el blanco de fondo. El título
es opcional y se añade directamente en html.
Bloque de sugerencias
#+begin_truco #+html: <h1>Título</h1> Esto es un bloque de truco. El icono que utiliza es el clásico de una llave y destornillador cruzados @@html:<code></code>@@. El color de fondo es un verde pálido y se utilizan tonos verdes para el resto de elementos. El título es opcional y se añade directamente en html. #+end_truco
Título
Esto es un bloque de truco. El icono que utiliza es el clásico de
una llave y destornillador cruzados . El
color de fondo es un verde pálido y se utilizan tonos verdes para el
resto de elementos. El título es opcional y se añade directamente en html.
Bloque de citas literales
#+begin_quote #+html:<h1>El Quijote</h1> En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor. Una olla de algo más vaca que carnero, salpicón las más noches, duelos y quebrantos los sábados, lantejas los viernes, algún palomino de añadidura los domingos, consumían las tres partes de su hacienda. #+attr_html: :class autor Miguel de Cervantes #+end_quote
El Quijote
En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor. Una olla de algo más vaca que carnero, salpicón las más noches, duelos y quebrantos los sábados, lantejas los viernes, algún palomino de añadidura los domingos, consumían las tres partes de su hacienda.
Miguel de Cervantes
No hay mucho más que decir sobre este marco o para qué sirve.
Marcos de caja
Abundando un poco más sobre los aspectos gráficos o de diseño, se han añadido otro tipo de marcos y resaltadores de contenido, como los marcos de caja.
Marcos con borde para todo tipo de resaltado.
En teoría se pueden usar cualquier tipo de texto en formato org.
#+begin_caja Marcos con borde para todo tipo de resaltado. #+html: <hr class="linea" /> En teoría se pueden usar cualquier tipo de texto en formato org. #+end_caja
También con imágenes:
O para remarcar la visualización de tablas:
| Cabecera 1 | Cabecera 2 | Cabecera 3 |
|---|---|---|
| uno | dos | tres |
| cuatro | cinco | seis |
Por supuesto, también se pueden mostrar sin marco:
| Cabecera 1 | Cabecera 2 | Cabecera 3 |
|---|---|---|
| uno | dos | tres |
| cuatro | cinco | seis |
Hay que observar también, que al meter cualquier cosa en un marco el tamaño de letra se reduce igual que las imágenes.
Tabs acordeón
Las tabs desplegables las iba a quitar, no recordaba para qué las usé. De hecho las llegué a quitar. Pero luego vi que en el curso de Esperanto que hice hace unos años y que pretendo rehacer las utilicé.
Con un contenido cualquiera. el que sea.
También con varios párrafos
Con otro contenido distinto.
Utilizarlas es un poco fastidioso, porque hay que utilizar demasiado
código html de manera directa. Las dos tabs anteriores se han generado
desde el siguiente código:
#+html: <div class="tabs"> #+html: <div class="tab"> #+html: <input type="radio" id="accion1" name="rd"> #+html: <label class="tab-label" for="accion1">Esto es una carpeta</label> #+begin_tab-content Con un contenido cualquiera. el que sea. También con varios párrafos #+end_tab-content #+html: </div> #+html: <div class="tab"> #+html: <input type="radio" id="accion2" name="rd"> #+html: <label class="tab-label" for="accion2">Otra carpeta</label> #+begin_tab-content Con otro contenido distinto. #+end_tab-content #+html: </div> #+html: <div class="tab"> #+html: <input type="radio" id="accionfin" name="rd"> #+html: <label class="tab-close" for="accionfin">Cerrar tabs</label> #+html: </div> #+html: </div>
Conclusiones
Me he estado currando esta actualización del blog con el objetivo de retomarlo. Lo tengo un poco abandonado y mi intención es escribir en él con más periodicidad. No sólo escribir, sino también publicarlo de manera más sencilla en lo que viene a ser el movimiento de la web sencilla.
Por ello, decidí eliminar todo rastro de javascript. Todo lo que hay
ahora mismo en el blog es html+css. Mantengo el css porque que el
contenido sea sencillo, no debería estar reñido con que sea también
agradable. Y también intentaré que sea legible incluso en los
navegadores más sencillos, como dillo o los de texto.
Comentarios