Uso de sitios web estáticos para archivos pequeños

 (alexwlchan.net)
4 puntos por GN⁺ 2024-10-19 | 1 comentarios | Compartir por WhatsApp
  • Para volver a encontrar más tarde documentos, capturas de pantalla, marcadores y medios acumulados localmente, se agrega un sitio web estático a cada colección pequeña para navegarla
  • Cada colección se conserva como una carpeta en el disco, y se abre el archivo HTML de la raíz en el navegador para ofrecer metadatos y formas de organización más ricas que Finder
  • Se escribe a mano, sin servidor web, sistema de build, dependencias ni frameworks de JavaScript; cada sitio tiene, como mucho, unos cientos de líneas de código, por lo que encaja con proyectos pequeños
  • Las jerarquías de carpetas existentes, las etiquetas de Finder, las apps de tipo “everything bucket” y las herramientas hechas a medida tenían, respectivamente, problemas de jerarquía impuesta, limitaciones de implementación, necesidad de adaptarse a la forma de pensar de la app y carga de mantenimiento
  • La organización manual lleva tiempo, pero ayuda a elegir solo los archivos que vale la pena guardar, y la simplicidad de HTML favorece la preservación a largo plazo

Ver un archivo local como un mini sitio web

  • Se crean sitios web estáticos por colección para navegar archivos locales
    • Documentos escaneados
    • Documentos creados por uno mismo
    • Capturas de pantalla guardadas
    • Marcadores de páginas web guardadas
    • Archivos de video y audio guardados
  • Cada colección tiene una vista distinta según el tipo de archivo
    • Una colección de capturas de pantalla se muestra como una grilla de imágenes
    • Los marcadores se muestran como una lista de enlaces de texto
    • Los videos se organizan como una lista que mezcla miniaturas y texto
  • El objetivo no es un sistema complejo, sino crear una interfaz de exploración de archivos un poco mejor que macOS Finder
    • Se pueden incluir más metadatos en la página
    • Se pueden usar métodos propios de búsqueda y organización

Forma de organización y elección tecnológica

  • Cada colección es una carpeta en el disco local, y el sitio web consiste en uno o más archivos HTML en la raíz de esa carpeta
  • Para usarlo, se abre el archivo HTML directamente en el navegador web
  • Deliberadamente se mantiene una escala baja y un nivel técnico bajo
    • Sin servidor web
    • Sin sistema de build
    • Sin dependencias
    • Sin framework de JavaScript
  • Todo se escribe a mano, pero en proyectos pequeños es manejable
    • Cada sitio web tiene, como mucho, unos cientos de líneas de código
  • Se considera probable que dure mucho tiempo porque está compuesto solo por archivos del disco y HTML
    • Mantiene la simplicidad y portabilidad de la estructura de archivos y carpetas
    • Solo agrega encima las funciones necesarias

Por qué los métodos anteriores no duraron

  • La forma común de archivos y carpetas impone una estructura jerárquica, y cada archivo debe estar exactamente en un lugar
    • Funciona bien para algunos datos, como el código
    • Con archivos multimedia era difícil diseñar una jerarquía satisfactoria
    • Al dudar en qué carpeta poner algo, el escritorio terminaba desordenado
  • Se prefiere el etiquetado por palabras clave porque permite poner varias etiquetas a un archivo y volver a encontrarlo de distintas maneras
    • macOS Finder también admite etiquetas, pero la implementación no parecía suficiente como para usarla en algo importante
  • Las apps de tipo “everything bucket” como DEVONThink, Evernote y Yojimbo tampoco encajaban
    • Daban la sensación de tener que cambiar la forma de pensar para adaptarse a la app
  • También se intentó crear herramientas propias de organización de archivos al menos unas 12 veces, y uno de los últimos intentos fue docstore
    • Encajaba mejor con la forma propia de pensar, pero generaba carga de mantenimiento
    • Cada actualización de Python o de macOS rompía algo y había que corregir el código

Convertir una carpeta en un mini sitio web

  • Si se coloca en la carpeta superior un archivo HTML que funcione como índice, se pueden mostrar todos los archivos con los metadatos y etiquetas deseados
  • Este enfoque simplifica la estructura de carpetas y reduce la carga de tener que encontrar una jerarquía perfecta
    • Los archivos normalmente se agrupan solo por año o por la primera letra del nombre de archivo
    • Las carpetas solo se miran al agregar archivos nuevos; no se usan para navegar
    • Para encontrar archivos, siempre se usa el sitio web
  • El sitio web permite encontrar archivos de varias formas mediante etiquetas de palabras clave y oculta los detalles de la estructura real de carpetas
  • HTML se eligió como una tecnología flexible, de bajo mantenimiento y con pocas probabilidades de desaparecer
    • Es una tecnología base de la web
    • Casi todas las computadoras modernas tienen un navegador capaz de renderizar páginas HTML
    • Incluso el primer sitio web hecho para una clase en 2006 se renderiza sin problemas en navegadores modernos

Por qué sirve para archivos “pequeños”

  • Como gran parte de la organización de archivos, la redacción de metadatos y la creación del visor se hacen a mano, no escala bien para colecciones grandes
  • Incluso guardar cientos de elementos lleva bastante tiempo, pero esa fricción ayuda a elegir qué guardar
    • Obliga a evaluar si vale la pena organizarlo bien
    • Hace preguntarse si es probable volver a ver un archivo que ni siquiera se quiere dedicar 1 minuto a guardar
    • Para los archivos que se decide guardar, se escriben metadatos con más cuidado para que sean fáciles de encontrar después
  • Antes, miles de archivos se acumulaban en carpetas grandes y ambiguas y, al no estar bien organizados, no se volvían a consultar
  • Ahora hay pequeños sitios web con unos cientos de elementos, y esos elementos se eligen con más cuidado y se describen de forma útil
  • Aunque guste la automatización, se aceptan de forma positiva las restricciones que aporta un proceso más manual

Sitios web estáticos como herramienta de preservación

  • La inspiración de este método vino de la exportación de cuentas de Twitter
    • La exportación de una cuenta de Twitter ofrece un mini sitio web que se puede explorar localmente
    • Varias plataformas de redes sociales también entregan los datos en forma de sitio web para que una persona pueda explorarlos fácilmente
  • Los sitios web estáticos también pueden ser útiles como método de preservación digital para archivos born-digital
    • La simplicidad, la longevidad y el bajo mantenimiento son aún más valiosos para instituciones de memoria que buscan preservar durante décadas o siglos
    • Incluso con el Bloc de notas o un editor de texto básico se puede crear un sitio web HTML básico
  • En el proyecto Data Lifeboat se están creando sitios web estáticos más grandes como forma de empaquetar parte del archivo de Flickr
    • Los archivos locales suelen parecerse más a una vista de lista, pero el sitio web dentro de Data Lifeboat tiene más páginas y funciones
  • El artículo de Ed Summers sobre sitios estáticos para preservar Historypin también es un ejemplo en la misma línea

Migración gradual y uso personal de HTML

  • Como ya hay muchos archivos dispersos por todo el disco, moverlo todo de una vez implica mucho trabajo
  • Los archivos nuevos se guardan en sitios web estáticos, y los archivos antiguos se sacan de su ubicación anterior y se mueven a la carpeta del sitio estático correspondiente cada vez que se encuentran
  • Después de crear la estructura inicial del sitio, casi no hubo carga de mantenimiento para mantenerlo funcionando
  • Para quienes quieran crear su primer sitio web, se recomienda HTML for People de Blake Watson
    • Contiene la filosofía de que “si quiere, cualquiera debería poder crear un sitio web con HTML”
  • Durante mucho tiempo se pensó en HTML como una herramienta para publicar sitios web que verían otras personas, pero también puede usarse para archivos personales locales
  • En una actualización del 19 de febrero de 2025, se agregó un artículo de seguimiento que explica los detalles del código: How I create static websites for tiny archives

Lecturas relacionadas

1 comentarios

 
GN⁺ 2024-10-19
Opiniones en Hacker News

  • Copia imágenes del portapapeles y las guarda en un archivo HTML para usarlo como galería de un solo archivo
    https://gist.github.com/egeozcan/b27e11a7e776972d18603222fa5...
    Ejemplo en vivo: https://gistpreview.github.io/?b27e11a7e776972d18603222fa523...
    Elegir con el selector de archivos también funciona, pero arrastrar y soltar normalmente no anda muy bien. Si funciona correctamente, la imagen se inserta en línea dentro del documento como un blob
    Después de agregar una imagen, si guardas la página tal cual, es decir, si presionas file->save, también se guarda el blob. Si quieres quitar algo antes de guardar, por ejemplo borrar una imagen, abre el inspector de elementos, elimínala y luego guarda la página
    Este archivo se puede subir a un servidor o abrirlo con doble clic en una computadora o en el celular

  • En los comentarios se habla mucho de Markdown, y sumo mi voto a favor. El texto plano es lo mejor. Pienso mucho en recopilar y conservar mis datos, y el texto plano es central para eso, además de tener muy buena compatibilidad a futuro
    Desde WordPerfect he preferido documentos con formato más determinista y liviano, donde se puedan ver directamente los caracteres de formato. Markdown es excelente y, de hecho, es casi un lenguaje de dominio específico para HTML
    La clave del texto plano son las herramientas. Hay algunas herramientas de Markdown que han aparecido en HN, pero que todavía no vi acá
    https://addons.mozilla.org/en-US/firefox/addon/markdown-view... - renderiza Markdown de forma agradable en el navegador
    https://casual-effects.com/markdeep/ - formateador de Markdown independiente, compatible con la web y con muchas funciones

    • Hice un pequeño JS para alojar archivos Markdown directamente. Se renderizan como HTML en el navegador, sin conversión previa ni plugins
      Si se usa en un sitio web local como este, se obtiene la comodidad de escribir simplemente Markdown normal
      => https://www.tducret.com/pure-markdown/
      Código fuente: https://github.com/tducret/pure-markdown
    • Alojo mis archivos Markdown con GitHub. Dejé un poco más ordenado el tema en un artículo que escribí. De hecho hay unos 4 o 5 artículos con ideas similares, y estoy buscando formas de hacerlo más simple
      Quisiera que también lo puedan usar usuarios no técnicos, pero todavía no llegué a eso
      https://joeldare.com/using-neat-css-on-github-pages
    • Yo también estoy usando cada vez más Plain Text. Escribí mis ideas sobre mi archivo en https://brajeshwar.com/2022/plain-text/
      Entran bastantes personas desde Google/Search buscando cómo tomar notas en texto plano, y parece que ese artículo simple les resultó útil

  • Convierto el contenido a Markdown con las imágenes relacionadas y lo guardo en un Obsidian vault. La sincronización la manejo yo mismo con Syncthing. Se está convirtiendo en un auxiliar de memoria estilo Zettelkasten bastante eficaz en la laptop y el teléfono
    También importo Google/Facebook Takeout, reformateo los resultados y guardo e indexo allí toda la correspondencia visible para humanos. El texto es barato, así que evito la mayoría de las imágenes. Aun así todavía pesa menos de 200 MB, se puede buscar al instante con una buena UI y, como es un conjunto de archivos Markdown, se puede mover fácilmente

    • ¿Vas a soltar las tres palabras “auxiliar de memoria estilo Zettelkasten” sin ningún contexto?
    • ¿Con qué sincronizas Obsidian en el teléfono? ¿También con Syncthing?

  • Personalmente, dependo de Obsidian de una forma parecida. Si hay algo que quiero guardar, como una publicación de Facebook que quizá pueda compartir más adelante, lo guardo junto con el enlace original. Los servicios externos pueden desaparecer en cualquier momento, así que los datos locales tienen dos ventajas: son nuestros y son fáciles de buscar.
    También hice un script que convierte los destacados de Kindle en archivos Markdown. Si a alguien le interesa, podría pulirlo un poco y compartirlo.
    Para contenido público, el ecosistema de generadores de sitios estáticos sigue mejorando. Empecé con Jekyll porque es el valor predeterminado de GitHub, pasé por Gridsome y al final me quedé con Nuxt 3 Content, que ahora se siente como el punto ideal para mí. Si empezara hoy, quizá habría elegido Astro.
    En cualquier caso, la barrera de entrada es más baja que nunca. Puedes alojar un sitio gratis en GitHub y, si necesitas estilos personalizados, los modelos de IA ayudan muchísimo con el trabajo de CSS.
    Markdown es como JavaScript para dar formato al texto. Aunque tenga partes raras, al final funciona bien.

    • Hice un fork de la app de Android [1] para que, al compartir un artículo con la app, lo convierta a Markdown y luego lo envíe a Obsidian. También uso una extensión de Firefox que, mediante Advanced URI, una extensión de Obsidian, envía a Obsidian la versión Markdown del artículo, incluidos los metadatos iniciales[2].
      [1] https://github.com/IAmStoxe/obsidian-markdownr
      [2] https://addons.mozilla.org/en-US/firefox/addon/markdownload/ - También hay una extensión para Chrome
    • Me interesa el script para Kindle. Cuando guardas publicaciones de Facebook, ¿simplemente copias y pegas el contenido, lo conviertes a Markdown y lo metes en Obsidian? Me gustaría saber más sobre el flujo real.

  • Vengo haciendo algo parecido desde hace 15 años. Creo HTML portátil con imágenes incrustadas, mp3, etc., para no necesitar software aparte para verlo. Hoy, si lo llevas en la nube o en el teléfono, basta con tener un navegador en cualquier dispositivo y sistema operativo.
    Incrustar mp3 en HTML puede aumentar el tamaño, pero solo necesitas un navegador, sin reproductor de música ni app aparte.
    Últimamente estoy intentando guardar las cosas en formato MHTML junto con HTML, en vez de incrustarlas manualmente.
    Basta con levantar un servidor HTTP simple y explorar el archivo.
    Con imágenes lo hago así: guardar todas las imágenes en una carpeta → abrir un servidor localhost → abrir la carpeta en el navegador → con JavaScript convertir los enlaces en etiquetas con src=link → cuando el navegador carga y muestra todas las imágenes, usar “Guardar como” para obtener un archivo MHTML incrustado.
    O también puedes crear un HTML con etiquetas img y enlaces a carpetas mediante un script Bash simple, o crear MHTML con una plantilla manual.
    Pero no hace falta hacerlo manualmente si puedes dejar que el navegador haga el trabajo pesado.
    Además, incrustar imágenes binarias directamente en MHTML es mucho más eficiente y consume menos memoria que incrustarlas en Base64. Por ejemplo, con 15 imágenes, la codificación binaria en MHTML ocupaba 4 MB, mientras que la codificación Base64 en MHTML ocupaba 5 MB.
    Otra opción es ejecutar python -m http.server en cualquier carpeta o, en Linux, usar tree -H http://localhost:8000 con una profundidad recursiva configurada.
    Luego abres en el navegador los enlaces de carpetas del servidor o el HTML generado por tree, y desde la línea de comandos ejecutas wget -rkpN -e robots=off http://localhost:8000, lo que recrea una carpeta con un index.html navegable. Después ya no necesitas un servidor para verlo.
    Es el mismo enfoque que con las exportaciones de Google, Twitter o YouTube.

  • Pensando en algo parecido, terminé creando mi propio framework pequeño: https://www.smallweb.run
    La función clave que agrega frente a una configuración manual existente es mapear subcarpetas a subdominios. También permite sitios web dinámicos, pero parece que eso no te interesa.
    Ejemplo: ~/smallweb/example => https://example.localhost
    Si te interesa, también hay una pequeña comunidad en Discord: https://discord.smallweb.run

    • Parece que simplemente reinventaste CGI/PHP.

  • Personalmente, para tomar notas en el trabajo prefiero VimWiki. Lo uso como lugar donde mezclar ideas, documentos cortos y fragmentos de código que encuentro en la web.
    Como sobre todo quiero guardar artículos, tutoriales y tips útiles, suelo archivar sitios web completos. Para eso, lo que más me gusta es SingleFile[1].
    Con SingleFile puedes guardar sitios web con imágenes incrustadas, y también agregar anotaciones o recortar anuncios molestos, etc. También soporta copias de sitios web sin distracciones. Recomiendo mucho echarle un vistazo.
    [1]https://github.com/gildas-lormeau/SingleFile

    • SingleFile es excelente. Junto con uBlock y Tree Style Tab, está en mi lista estándar de instalación del navegador.

  • Este tipo de artículos siempre me resulta interesante. Me gusta el enfoque de baja tecnología y mantenible, pero nunca he pasado una cantidad significativa de tiempo revisando trabajos antiguos.
    Las fotos son la excepción, pero me bastó con simplemente desplazarme por una línea de tiempo de fotos personales ordenada por fecha. De joven dedicaba más tiempo a estas cosas, pero en algún momento me di cuenta de que en realidad nunca las miraba.
    Me pregunto por qué la gente vuelve con frecuencia a trabajos de hace años.

    • Rara vez vuelvo a ver capturas de pantalla, pero cada vez que lo hago me inspiro y alguna vez terminé empezando un proyecto de repente. Creo que necesito un archivo que me muestre una al azar cada día.
    • Una vida revisada es una vida vivida dos veces.

  • Al menos en mi caso, si tuviera que editar a mano un archivo HTML cada vez que agrego un elemento a la colección, por más rápido y simple que sea, creo que a largo plazo jamás lo mantendría
    Parece un caso ideal para usar un generador de sitios estáticos DIY muy simple. Si está escrito en Bash o Perl, será compatible con el futuro para siempre

  • Usar sitios web estáticos de esta forma no es algo nuevo. La inspiración vino de la exportación de cuentas de Twitter, que ofrece un pequeño sitio web que se puede navegar localmente. También he visto que varias otras plataformas de redes sociales ofrecen un sitio web para explorar los datos de una forma legible para personas
    Leí en algún lado que las exportaciones de Telegram también funcionan así. Dicen que los archivos originales vienen más o menos organizados en directorios, que ya se pueden navegar por sí solos, y que además incluyen un pequeño sitio web estático local para recorrerlos con más comodidad
    Es muy distinto de Google Takeout, la última exportación masiva que usé. Google Takeout simplemente hace un volcado tonto de archivos originales con un esquema de nombres sin sentido para el usuario y XML incomprensible
    Incluso ahora no tengo la certeza de haber recibido todos los datos que pedí antes de borrarlos del lado de la nube

    • Facebook también hacía esto cuando me fui hace unos años. Te daba un gran volcado de datos y fotos, y además incluía archivos HTML para poder explorarlos mejor