Que te lean: ¿cómo?

Cuando escribimos en Markdown, expresamos nuestros pensamientos y pareceres en un formato de texto plano¹ que normalmente se trasladará al formato HTML, leyéndonos en nuestro navegador web, pero que también puede ser transportado a otros formatos, como un PDF o un fichero Word. En Pandoc convertiremos con el siguiente comando:

pandoc -s --css template.css --mathjax --toc --toc-depth=4 diseño_reshulon.md -o ~/diseño_reshulon.html

Y aunque sea una página HTML, se diseña con una mentalidad distinta de la que tendríamos para una página web, priorizando la lectura. Para una página web buscaríamos cómo representar los diversos elementos gráficos y de texto, cómo hacer que los usuarios interactúen con nosotros, creando en algunos casos una comunidad; pero en Markdown es cuando pretendemos expresarnos en la Red de las Redes y que nos lean, así que priorizaremos la comodidad de la lectura, buscando que los parágrafos, tablas, imágenes y demás elementos fluyan. ¡Al meollo!

1. Haz un boceto en papel y ten en mente el diseño que quieres llevar a cabo. Visualiza cómo será la tipografía, el contraste y los elementos que necesites, como referencias bibliográficas, imágenes, enlaces, índices, etcétera. Dependerá de si quieres un artículo completo y con referencias, o una cuartilla en donde reflejes en un periquete tus pensamientos.

2. Tradicionalmente la envoltura del texto ha sido una factoría de jaquecas, especialmente por cómo lo vería el lector, y se están haciendo esfuerzos por mejorarla, véase la propiedad text-wrap: pretty².

3. Elige bien tu tipografía y no olvides precargarla. En general, serif para titulares, decían. En caso contrario, usa las tipografías del sistema. Tahoma es una apropiada y con toque retro.

4. No olvides dar una anchura máxima a las imágenes, trátalas bien. Y también destaca las citas. Dale un formato chulo y comprensible a las tablas.

5. Encuentra una paleta de colores reconocible y, sobre todo, enfatiza elementos como las citas, los enlaces, el índice o las notas al pie. Cuida el contraste, ante todo.

6. Procura que tengas un índice presentable y bien distintivo. Sobre fondo blanco un gris claro no es mala idea.

7. Depende, pero si vas a utilizar tablas, gráficos y figuras en general utiliza doble columna. CSS ofrece algo sencillo:

article {
    column-count: 2;
    column-gap: 1em;
}

8. No olvides la escala. Y elige un buen tamaño para tu texto, pongamos 22 píxeles. Prioriza la legibilidad y la comodidad, también pon un interlineado y una separación clara de parágrafos.

9. Tus lectores agradecerán no tener tortícolis, así que lo ideal en tiempos de monitores panorámicos con 16:9 y 16:10 es tener un tope de 60 a 80 caracteres para el texto, de tal manera que no ocupe toda la pantalla. Mal ejemplo, común en la web clásica dado que las resoluciones de 4:3 eran comunes. Y un buen ejemplo. Se han hecho avances en UX y conviene conocerlos.

10. ¡Y sobre todo, ten algo interesante que decir!

¡Exprésate! ¡Y desplegarás con tu obra más elemental de CI/CD!

pandoc -s --css template.css --mathjax --toc --toc-depth=4 diseño_reshulon.md -o diseño_reshulon.html && curl -F "articles/$_=@$_" "https://[USER]:[PASSWORD]@neocities.org/api/upload"