Battery used Battery charging

Reconstruyendo un sitio web con energía solar

Estás viendo una versión completamente reconstruida del sitio web con energía solar, que ahora te permite desactivar la compresión por difusión y ver las imágenes originales.

Una captura de pantalla del archivo Markdown de esta página (en inglés).
Una captura de pantalla del archivo Markdown de esta página (en inglés).
Ver imagen original Ver imagen interpolada

Durante los últimos meses hemos estado trabajando en cambiar el generador de sitios web estáticos (Pelican) del sitio web con energía solar a otro (Hugo). Muchos lectores no notarán los cambios de inmediato, ya que no hemos realizado ajustes importantes en el diseño. Sin embargo, la nueva plataforma nos ha permitido abordar algunos problemas basados en los comentarios que hemos recibido a lo largo de los años.

El nuevo sitio web solar fue diseñado por Marie Otsuka y Roel Roscam Abbing, las mismas personas que estuvieron detrás del diseño solar original Marie Verdeil asistieron durante todo el proceso y coordinaron la migración del sitio web.

Cambio de plataformas

El sitio web solar original, lanzado en 2018, funcionaba con un generador de sitios estáticos llamado Pelican. Si bien esta sigue siendo una buena opción para un sitio web relativamente pequeño, la versión alimentada por energía solar de Low-tech Magazine ha crecido significativamente con el tiempo. Inicialmente, solo presentaba una selección del sitio web en inglés, pero con el tiempo se ha expandido para contener no solo más artículos en inglés, sino también traducciones en otras cinco lenguas. Organizar artículos y publicar cambios en un sitio web tan grande se convirtió en un proceso engorroso. Por ejemplo, tomaba más de una hora regenerar el sitio ante cambios, incluso si solo agregábamos un comentario.

Hugo es un generador de sitios estáticos escrito en un lenguaje de programación más rápido. En Pelican, gran parte de la funcionalidad que necesitábamos para el sitio web, como el soporte para múltiples idiomas y la compresión de imágenes, venían como complementos de calidad variable. Esto llevó a limitaciones con el tiempo. En Hugo, estas características están mejor soportadas desde el principio, ya que son parte central del proyecto. Como consecuencia de cambiar a Hugo, logramos reducir el tiempo de generación en el servidor de más de una hora a aproximadamente doce minutos. En una computadora portátil moderna, la diferencia es entre varios minutos y varios segundos de generación. 1 Esta diferencia en tiempo también significa una diferencia en el uso de energía en el servidor.

Además de las compilaciones de sitios web más rápidas, Hugo permite una mejor organización del contenido y es más flexible en la definición de categorías para mostrar ese contenido. Esto nos permitió, por ejemplo, crear páginas dedicadas que destacan a los diferentes colaboradores y traductores del magazine. Sin embargo, a pesar de que ambos proyectos utilizaban entradas escritas en Markdown, migrar todo el contenido de Pelican a Hugo fue una tarea que consumió mucho tiempo. Tanto debido a las diferencias sutiles en el formato de metadatos de las entradas como porque nuestra configuración de Hugo requiere sus propios shortcodes para permitir la visualización de imágenes, leyendas y enlaces. Convertimos la mayoría de los artículos de una plataforma a otra utilizando un script personalizado, pero aún así tomó otros dos meses resolver y reparar manualmente las inconsistencias en el contenido.

Cambios de diseño

Medidor de batería

La nueva plataforma nos permitió abordar dos problemas de diseño que surgieron regularmente en los comentarios durante los últimos años. El primero se refiere al medidor de batería, que refleja el estado de la batería de nuestra configuración de sitio web fuera de la red. Algunas personas encontraron que interfería con el proceso de lectura, especialmente cuando está a la mitad de la página. El medidor de batería sigue siendo una parte fundamental de nuestro diseño, revelando la infraestructura material que respalda el sitio web. Sin embargo, ahora permanece en la parte superior del documento y ya no se mueve a medida que uno desplaza hacia abajo un artículo para interferir con el texto.

Imágenes

La segunda y mayor mejora de diseño concierne a las imágenes. La compresión de imágenes con dithering funciona muy bien para muchas imágenes e incluso hace que las imágenes en blanco y negro sean más atractivas. Sin embargo, algunas imágenes se vuelven poco claras. Esto es especialmente cierto para los gráficos, que pueden volverse ilegibles si no se diseñan teniendo en cuenta el dithering. Para algunas otras imágenes, los colores transmiten información que se pierde en el proceso de dithering.

El nuevo diseño permite al visitante desactivar la compresión de dithering para imágenes individuales, revelando la foto o ilustración original. Las imágenes originales que mostramos están comprimidas de manera convencional y son ligeramente más pesadas que las imágenes con dithering. Revelarlas aumenta así la carga en nuestro servidor. Queda por ver cómo esto influirá en el uso de energía y el tiempo de actividad del sitio web solar.

Además, las imágenes ya no ocupan toda la pantalla, lo cual es especialmente ventajoso cuando se ve el sitio web en una pantalla de computadora grande.

Código fuente

Como fue el caso con el tema original de Pelican, lanzamos el tema de Hugo como software de código abierto. El tema original del sitio web solar y los complementos siguen estando disponibles, pero ya no se actualizan ni se mantienen.

Ejecutando Low-tech Magazine en 1 sitio web

Este rediseño importante es el penúltimo paso hacia la ejecución de Low-tech Magazine en solo un (alimentado por energía solar) sitio web. Desde el lanzamiento del sitio web alimentado por energía solar en 2018, el antiguo sitio web (en inglés) ha permanecido en línea y actualizado. Esto es problemático, por varias razones.

En primer lugar, ejecutar dos sitios web similares no es coherente con nuestro objetivo de reducir la huella ecológica de la publicación. Esto es aún más importante porque el sitio web original, un sitio web dinámico alojado en la plataforma de blogs TypePad, no es liviano. Un segundo sitio web que funciona con energía de la red también contradice el propósito de desconectarse cuando el clima es malo: el antiguo sitio web permanece en línea sin importar el clima. En segundo lugar, la necesidad de actualizar dos sitios web implica mucho trabajo adicional que sería mejor dedicar a escribir e investigar. El diseño de cada artículo debe hacerse dos veces, en plataformas diferentes. Los comentarios y los cambios en los artículos también deben actualizarse en dos plataformas.

La mayor calidad de las imágenes fue una de las principales razones para mantener el antiguo sitio web actualizado. Ahora que las imágenes originales se pueden ver en el sitio web alimentado por energía solar, ya no actualizaremos el antiguo sitio web. A partir de ahora, el contenido nuevo (incluidos los comentarios sobre artículos antiguos) solo aparecerá en el sitio web alimentado por energía solar. El sitio web de TypePad permanecerá en línea hasta el verano, cuando planeamos trasladar la parte del archivo que aún no se ha convertido al formato web estático. Se trata principalmente de artículos y páginas de los primeros días.

Para la mayoría de los otros idiomas, el cambio al sitio web alimentado por energía solar ya se ha completado y los sitios web originales se han cerrado. La única excepción es el sitio web original en neerlandés, que ya no se actualiza pero permanece en línea (también alojado en TypePad) para mantener accesibles los artículos más antiguos. Debido al gran número de artículos originales en ese sitio web, será el último sitio web original en desaparecer, si es que alguna vez lo hace. Todavía conserva el diseño original de 2007.


  1. Para comprender la diferencia, ejecutamos tanto el generador de sitios Hugo como el de Pelican en un experimento. La compilación de Pelican se basa en el tema solar y plugins. La compilación de Hugo se basa en el tema solar_v2 y en scripts de dithering y cálculo de tamaño de archivo definidos en el script de compilación. Ambos sitios tienen 447 artículos en varios idiomas y más de 1500 imágenes. Los resultados del experimento son visibles en la tabla a continuación. Las dos primeras filas muestran cuánto tiempo tarda en construirse el sitio en el primer intento. Durante el primer intento, todos los activos deben generarse y las imágenes deben comprimirse, lo que lleva más tiempo que los intentos posteriores donde los activos están en caché. Las dos últimas filas muestran los tiempos de generación cuando los activos ya están en caché. Los tiempos mostrados son el tiempo promedio de tres ejecuciones tanto en el servidor solar (un procesador A20 con dos núcleos de 1 GHz y 1 GB de RAM) como en una computadora portátil moderna (un procesador Intel i7-8650U con cuatro núcleos a 1.9 GHz y 32 GB de RAM). Generar el sitio de Hugo en el servidor solar sin activos en caché no es posible de hacer de una vez porque el proceso se queda sin memoria o excede el límite de tiempo de espera de Hugo. En ese caso, el comando debe ejecutarse varias veces seguidas. Aunque parece que Hugo es más lento que Pelican en la computadora portátil, es probable que se explique porque el sitio de Hugo ejecuta ambas una lógica de dithering y otra lógica de compresión para las imágenes. En Pelican, las imágenes solo se ditherizan y las originales no se recomprimen.

    Hugo Pelican
    Servidor Solar (primer intento) - 100 minutos, 47 segundos
    Computadora moderna (primer intento) 13 minutos, 31 segundos 12 minutos, 53 segundos
    Servidor Solar (en caché) 11 minutos, 57 segundos 68 minutos, 47 segundos
    Computadora moderna (en caché) 46 segundos 04 minutos, 57 segundos
     ↩︎