Microfunciones favoritas en blogs/sitios web personales

• Una introducción a microfunciones que mejoran la experiencia de usuario de un blog

Notas al margen

• Una función que proporciona información adicional sin interrumpir el texto principal.
• Permite que el lector consulte fácilmente detalles adicionales o las fuentes.
• El uso de notas al margen en Gwern es especialmente impresionante. Sus textos las usan muchísimo y aportan información adicional sin romper el flujo del contenido principal.
• Con las notas al margen, se pueden consultar fácilmente las anotaciones sin tener que desplazarse hasta el final de la página.
• Se pueden ver distintos enfoques inspirados en Tufte CSS.

Tabla de contenido

• La tabla de contenido permite ver de un vistazo los temas principales del texto y moverse fácilmente a la sección deseada.
• Los generadores de sitios estáticos (por ejemplo, Hugo) pueden crearla automáticamente.
• El sitio de Lars Hupel ofrece una tabla de contenido dentro de las series para facilitar la navegación.

Bonus: indicador de progreso de la página

• La barra de progreso de la página muestra visualmente en qué parte de la página está el lector.
• Esta función se puede ver en Quanta Magazine.
• Se puede aprender a implementarla con este tutorial de CSS Tricks.

Encabezados fáciles de enlazar

• Se puede enlazar a una sección específica de la página usando el ID de un elemento HTML.
• Como no es visible para el usuario, conviene convertir cada elemento en un enlace para que sea fácil de referenciar.
• Esta función se puede ver en la documentación de Hugo.

Agrupación de publicaciones en serie

• Cuando se quiere escribir extensamente sobre varios temas, publicarlos como una serie puede hacerlos más fáciles de seguir para el lector.
• Se pueden agregar automáticamente botones de "siguiente" y "anterior", o generar un centro de navegación.
• Esta función se puede ver en el blog del lenguaje Chapel.

Artículos conversacionales

• Los textos en formato de diálogo los hacen más interesantes y fáciles de entender al plantear preguntas desde la perspectiva del lector y expresar inquietudes desde un punto de vista menos experimentado.
• El sitio de Xe Iaso y Faster than Lime usan con frecuencia este tipo de textos.

Indicar el origen de los bloques de código

• Al escribir código, mostrar el nombre del archivo y el número de línea en el bloque ayuda a que el lector lo entienda mejor.
• Ejemplo: Crafting Interpreters

Bonus: bloques de código con enlaces clicables

• El lenguaje de programación Agda genera bloques de código HTML que enlazan cada símbolo al lugar donde fue definido.
• Esta función se puede ver en Programming Languages Foundations in Agda.

Indicar enlaces externos

• Los enlaces que llevan a dominios externos se marcan con un ícono pequeño.
• Esta función se puede ver en James’ Coffee Blog ☕.

Bonus: distintos marcadores para distintos destinos

• El sitio de Gwern cambia el ícono según el destino del enlace.
• Por ejemplo: los enlaces a Wikipedia muestran una "W" y los de Haskell.org muestran un símbolo lambda.

Bonus: vista previa de enlaces

• Al pasar el cursor sobre un enlace, se muestra una vista previa de la página para que se pueda ver el contenido antes de hacer clic.
• Esta función se puede ver en el sitio de Gwern.

Feed RSS

• RSS es un estándar de feed que permite a un sitio publicar actualizaciones.
• Permite que los lectores reciban novedades sin tener que visitar directamente el sitio.

Enlaces a otros sitios

• Incluir enlaces a publicaciones de otros blogs o sitios ayuda a promover contenido relacionado.
• Esta función se puede ver en el blog de Drew DeVault.

Conclusión

• Estas microfunciones pueden hacer que un sitio sea más útil y atractivo.
• Integrarlas en tu propio sitio parece una muy buena idea.

[tsboard]

Justo estaba creando mi propio blog, así que gracias por esta noticia tan útil jaja

[GN⁺]

Opiniones de Hacker News

• Algunas sugerencias son buenas, pero la barra de progreso distrae demasiado y es innecesaria. Ya existe la barra de desplazamiento, así que no hace falta una barra de scroll adicional.
• No hacen falta adornos en los enlaces. El navegador ya muestra bien adónde llevan los enlaces, y los popups de vista previa también son una distracción innecesaria.
• Es buena idea implementar en el blog un índice en una sola página con todas las publicaciones. Permite ver los títulos de un vistazo y facilita la búsqueda.
• Me alegra que el tema de los blogs haya llegado a Hacker News. El servicio de blogs que estoy desarrollando está enfocado en el minimalismo. Quiero resolver el problema de que el arte ASCII no se muestra correctamente en Android.
• Me gustan varias de estas "microfunciones". Prefiero las funciones que no requieren JavaScript. Estoy implementando varias microfunciones en mi blog.
• Prefiero incluir la fecha completa en las publicaciones. En el contenido técnico, es importante saber cuándo fue escrito.
• No me gustan las explicaciones en formato de diálogo. Es mejor explicarlo en párrafos separados.
• No estoy de acuerdo con la función de vista previa de enlaces. Por temas de privacidad, prefiero revisar la URL antes de hacer clic en un enlace.
• RSS no debería ser una función "micro", sino una función básica.
• El sitio web de Gwern intenta hacer demasiadas cosas y eso vuelve lento al navegador. El problema es especialmente grave en móvil.
• La función de tabla de contenido debería implementarse en el navegador. El progreso de la página, los títulos enlazables y las vistas previas de enlaces también deberían ser responsabilidad del navegador. El autor del documento no necesita especificar fuentes ni colores.