Lmst

Código aberto e auditável. #código

Brooke Nevils sintió que estaba 'rompiendo una especie de código' al denunciar a Matt Lauer por presunta violación #Brooke #código #denunciar #especie #estaba #Lauer #Matt #Nevils #por #presunta #rompiendo #sintió #una #violación #ButterWord #Spanish_News Comenta tu opinión 👇
https://butterword.com/brooke-nevils-sintio-que-estaba-rompiendo-una-especie-de-codigo-al-denunciar-a-matt-lauer-por-presunta-violacion/?feed_id=67421&_unique_id=697cbf1d0f06b

Y aquí estamos ante otro episodio de cosas que cambian y dejan todo roto a su paso. Aunque en realidad estoy exagerando. La función de incrustar de Sketchfab sigue trabajando, pero aprovecharé que han cambiado de dueño y reglas para implementar algo mas domestico, como con el resaltado de código que ya vimos antes.

Introducción

No termino de entender que criterios tiene WordPress para incrustar otras webs. Pego un enlace de mi blog y no hace nada, pero pego el enlace de mi modelo en sketchfab y ahí esta, funcional y bonito. https://recogiendofrutos.interlan.ec/2024/06/18/modelo-3d-patito-columpiandose/ ¿Significa esto que ya está? ¿No hay nada que arreglar? Por supuesto, pero tengo ganas de complicarme la vida con algo mas domestico para saber si se puede. Es decir, quiero tener todo el control posible del modelo que quiero compartir.

El problema

No hay problema, simplemente quiero ver que tal es intentar otros enfoques. Como meta principal que tengo, es hacer todo lo mas domestico posible. De preferencia, que el sitio sea visible con el navegador mas minimalista que se pueda. A veces hago pruebas con Elinks y hasta ahora todo funciona bien, pero quedan cosas que simplemente no van a trabajar en un sistema sin Javascript. ¿Que puedo hacer? La verdad, nada. Las imágenes no aparecen en la consola por obvias razones, pero actualmente no tengo un sistema de galerías integrado. trato de prescindir todo lo posible de Javascript con el fin de hacer mi sitio lo mas ligero posible, pero nada, es complicado. Con el tiempo implementaré un sistema para hacer zoom a las imágenes. Ahora bien, Esta idea que tengo no es solo para aplicar a modelos 3D, sino que quiero ver si se puede aplicar a objetos reales fotografiados. La fotogrametria es una buena idea, pero no estoy seguro de si esto es lo que busco.

Enfoques

Realmente esto podría ser gastar pólvora en gallinazos, pero me da curiosidad hacerlo, asi que se me ocurren varias formas de abordar esto. Podría ser que cargo el modelo entero y mediante javascript renderizarlo en pantalla, o podría ser que haga una galería especial en la que al desplazarse entre las imágenes parece ser un modelo 3D o también, usar un video con controles especiales, con el mismo propósito que el avanzarlo y retrocederlo de la impresión de ser un modelo 3D. Wordpress por supuesto, no permite subir archivos un poco especiales, por lo que intentaremos abordar esto mediante un repositorio adicional creado desde nuestra configuración de Nginx. Para estas pruebas, he diseñado un archivo de blender con rotación de cámara para los ejemplos.

Repositorio especial

Dado que wordpress no permite que suba ciertos tipos de archivos al servidor mediante su interfaz, pensé apropiado crear un directorio que contenga un conjunto de archivos estáticos que pueda integrar en alguna entrada mediante Iframes. Esto es útil porque WordPress tampoco me deja integrar código Javascript de forma coherente y a decir verdad, tampoco es que sea recomendable hacerlo así. Hay muchas vulnerabilidades fácilmente explotables que pueden aprovecharse de eso y en la consola misma sale un error advirtiendo que no puedes incrustar objetos remotos.

Solicitud de origen cruzado bloqueada: La política de mismo origen no permite la lectura de recursos remotos en https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9870688711293426&host=ca-host-pub-2644536267352236. (Razón: Solicitud CORS sin éxito). Código de estado: (null).

Bueno, en realidad si que puedes, modificando algunas cosas, pero no debes XD En todo caso, quiero aprovechar un poco el nuevo conocimiento adquirido en el articulo anterior y crearé un subdirectorio que se montará dentro de la URL de mi blog. Esto me permitirá subir contenido allí libremente que luego puedo incrustar en una entrada. Para esto, debo agregar el siguiente codigo antes del location /

location ^~ /public_repo/{
  alias /var/www/public_repo;
  index index.html
  try_files $uri $uri/ = 404;
}

Por supuesto, puedes ponerle el nombre que quieras y utilizar el directorio que quieras. Pero recuerda que tiene que tener usuarios y permisos compatibles con Nginx.

Archivo completo

Este enfoque es tal vez el mas sencillo y completo, puesto que basta con que tengas el archivo en formato glb para incrustarlo en la web mediante un lienzo model viewer y Javascript se encarga del resto.

<!-- Import the component -->
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/4.0.0/model-viewer.min.js"></script>
<model-viewer src="test.glb" ar ar-modes="webxr scene-viewer quick-look" camera-controls shadow-intensity="1" style="width: 100%; height: 400px;"></model-viewer>

Ventajas

El método mas sencillo.
Control total del objeto. Rotación en 360 grados.
Casi no se necesita agregar código.

Desventajas

Tienes que dejar expuesto tu archivo fuente y cualquiera lo puede descargar.
Dependiendo de lo que hagas, puede incrementar el tamaño resultante del archivo monstruosamente.
Lo mismo. Dependiendo de lo que hagas, es posible que necesites hacer un archivo especialmente diseñado para tu sitio, lo cual añade mucho trabajo innecesario.

DetallesArchivotest.glbTamaño3.78KBTiempo de carga index120msCarga de Model-Viewer1.79sTiempo de carga de archivo GLB110ms

Galería de imágenes

Da click al cubo y arrastra un poquito. Luego seguirá al cursor. El segundo enfoque que he analizado, es mediante 36 frames obtenidos directamente desde blender. Esto permite que se carguen las imágenes y se muestren según la posición del cursor y javascript se encargue del renderizado. El resultado es muy bueno, pero he notado que es demasiado pesado para un uso regular.

<html>

<head>
    <style>
        #viewer-container {
            touch-action: none;
            /* Bloquea el scroll nativo solo en este elemento */
            user-select: none;
            /* Evita que se seleccione el texto/imagen al arrastrar */
        }
    </style>
</head>

<body>
    <div id="viewer-container" style="width: 500px; height: 500px; cursor: ew-resize;">
        <img id="product-image" src="images/1.png" style="width: 100%; height: auto; user-select: none;">
    </div>

    <script>
        const imgElement = document.getElementById('product-image');
        const container = document.getElementById('viewer-container');
        const totalFrames = 36;
        let startX = 0;
        let currentFrame = 1;

        // 1. Array para almacenar las imágenes ya descargadas
        const images = [];
        let loadedCount = 0;

        // 2. Fase de Predescarga
        function preloadImages() {
            for (let i = 1; i <= totalFrames; i++) {
                const img = new Image();
                img.src = `images/${i}.png`;
                img.onload = () => {
                    loadedCount++;
                    if (loadedCount === totalFrames) {
                        console.log("Todas las imágenes cargadas. Interacción lista.");
                        // Opcional: ocultar un loader o habilitar el contenedor aquí
                        container.style.cursor = 'grab';
                    }
                };
                images[i] = img; // Guardamos el objeto imagen completo
            }
        }

        // Llamamos a la precarga de inmediato
        preloadImages();

        function handleStart(e) {
            // Detecta tanto mouse (e.pageX) como touch (e.touches[0].pageX)
            startX = e.pageX || e.touches[0].pageX;
        }

        function handleMove(e) {
            if (startX === 0) return;

            const x = e.pageX || e.touches[0].pageX;
            const diff = x - startX;
            const frameOffset = Math.floor(diff / 10);

            let newFrame = ((currentFrame + frameOffset - 1) % totalFrames + totalFrames) % totalFrames + 1;

            if (images[newFrame] && images[newFrame].complete) {
                imgElement.src = images[newFrame].src;
            }
        }

        function handleEnd(e) {
            if (startX === 0) return;

            // Para touch, la posición final suele estar en 'changedTouches'
            const x = e.pageX || (e.changedTouches ? e.changedTouches[0].pageX : startX);
            const diff = x - startX;

            currentFrame = ((currentFrame + Math.floor(diff / 10) - 1) % totalFrames + totalFrames) % totalFrames + 1;
            startX = 0;
        }

        // Eventos de Mouse (PC)
        container.addEventListener('mousedown', handleStart);
        window.addEventListener('mousemove', handleMove);
        window.addEventListener('mouseup', handleEnd);

        // Eventos de Touch (Móvil)
        container.addEventListener('touchstart', handleStart, {
            passive: false
        });
        window.addEventListener('touchmove', handleMove, {
            passive: false
        });
        window.addEventListener('touchend', handleEnd);
    </script>

</body>

</html>

Ventajas

No necesitas compartir el archivo fuente
Exportas solo lo que necesitas mostrar
El almacenamiento en Caché permite al visitante solo tener que esperar una vez a que se descargue todo

Desventajas

¡Pesa un montón!
La rotación solo se puede en el eje horizontal
Puede causar problemas en dispositivos mas limitados

DetallesArchivo36 imágenesTamaño36x95KB 3.4MB! 400px cada imagenTiempo de carga index125ms (el javascript ya esta en el mismo index con los estilos)Tiempo de carga de las imagenes1080s !!Latencia por Imagenes1.8s

Video completo

Da click al cubo y arrastra un poquito. Luego seguirá al cursor. Probablemente el mejor enfoque de todos. Gracias a los códecs de compresión, se puede conseguir un archivo realmente pequeño que no estorbe a los tiempos de carga de la página. Este enfoque permite que no necesites limitarte a usar Blender o similares para generar tus modelos, sino que mediante un buen trabajo de fotografía, también puedes utilizar videos apropiados para mostrar algún producto del mundo real.

<html>

<head>

</head>

<body>
    <!-- CSS para evitar saltos en móvil -->
    <style>
        #video-container {
            width: 100%;
            max-width: 600px;
            touch-action: none;
            /* Crucial para móviles */
            user-select: none;
        }

        video {
            width: 100%;
            pointer-events: none;
        }
    </style>

    <div id="video-container">
        <video id="product-video" muted playsinline preload="auto">
            <source src="0001-0036.webm" type="video/mp4">
        </video>
    </div>

    <script>
        const video = document.getElementById('product-video');
        const container = document.getElementById('video-container');

        let isDragging = false;
        let startX = 0;
        let startVideoTime = 0;
        const sensitivity = 0.005; // Ajusta qué tan rápido avanza el video al mover el dedo

        // Función para manejar el inicio del movimiento
        function handleStart(e) {
            isDragging = true;
            startX = e.pageX || e.touches[0].pageX;
            startVideoTime = video.currentTime;
        }

        // Función para calcular y mover el tiempo del video
        function handleMove(e) {
            if (!isDragging || !video.duration) return;

            const x = e.pageX || e.touches[0].pageX;
            const diff = x - startX;

            // Calculamos el nuevo tiempo basado en el desplazamiento
            let newTime = startVideoTime + (diff * sensitivity);

            // Ciclar el video (opcional, para rotación 360 infinita)
            if (newTime < 0) newTime = video.duration + newTime;
            if (newTime > video.duration) newTime = newTime - video.duration;

            video.currentTime = newTime;
        }

        function handleEnd() {
            isDragging = false;
        }

        // Eventos Mouse
        container.addEventListener('mousedown', handleStart);
        window.addEventListener('mousemove', handleMove);
        window.addEventListener('mouseup', handleEnd);

        // Eventos Touch
        container.addEventListener('touchstart', handleStart, {
            passive: false
        });
        window.addEventListener('touchmove', handleMove, {
            passive: false
        });
        window.addEventListener('touchend', handleEnd);
    </script>
</body>

</html>

Ventajas

El código Javascript es mas sencillo.
También es mas facil incrustar 1 archivo en lugar de los 36 anteriores.
Se ahorra un monton de tiempo y recursoso

Desventajas

Si bien el archivo resultante podría llegar a ser muy grande según necesites, aun es mas pequeño que un archivo GLB mediano.
La calidad del video puede verse afectada en pos de ahorrar espacio. GLB es vectorial, asi que incluso puedes hacerle zoom.
Sigue siendo un archivo adicional, afecta al tiempo de carga de tu pagina, por lo que puede reducir tu calificación SEO

DetallesArchivo0001-0036.webmTamaño12.38KBTiempo de carga index113msTiempo de carga del video126msLatencia por Video126ms He hecho también un video de ejemplo para demostrar el funcionamiento de este sistema de rotación usando imágenes reales de un objeto que tengo en casa. Es un diseño rápido y sin mucho cuidado, pero sirve para mostrar lo que trato de explicar.

Conclusiones

Está interesante esto de incrustar contenidos completos en otra dirección del hosting. Es decir, puedo evitar sobrecargar wordpress con plugins loquisimos y tengo la flexibilidad de crear los contenidos según me plazca. Javascript incluido. Me queda pendiente investigar por que no se usa esta idea de forma mas seguida. Tal vez porque requiera de grandes conocimientos técnicos que la mayoría de los que meten plugins a lo loco en WordPress, carecen. A ver que dice la ia:

Es una excelente pregunta, y toca un dilema común entre la eficiencia técnica y la facilidad de uso. Aquí te explico por qué muchas personas prefieren usar múltiples plugins en WordPress, a pesar de que eso pueda hacer el sitio más pesado, en lugar de optar por soluciones más ligeras como galerías HTML externas: 🧩 Ventajas de usar plugins en WordPress Facilidad de uso (sin necesidad de código): La mayoría de los usuarios de WordPress no tienen conocimientos técnicos. Los plugins permiten agregar funcionalidades complejas (como galerías, sliders, formularios, SEO, etc.) con unos pocos clics, sin escribir una sola línea de código. Integración nativa: Los plugins están diseñados para integrarse perfectamente con el sistema de WordPress, lo que facilita su gestión desde el panel de administración, sin necesidad de tocar archivos o subir contenido por FTP. Actualizaciones y soporte: Muchos plugins son mantenidos activamente, lo que significa que reciben actualizaciones de seguridad, nuevas funciones y soporte técnico. Escalabilidad: Si el sitio crece, es más fácil escalar funcionalidades con plugins que rehacer código personalizado. 🧱 Desventajas de usar muchos plugins Rendimiento: Cada plugin puede añadir scripts, hojas de estilo y consultas a la base de datos, lo que puede ralentizar el sitio si no se gestiona bien. Conflictos entre plugins: Algunos plugins pueden interferir entre sí, causando errores o comportamientos inesperados. Dependencia de terceros: Si un plugin deja de actualizarse o se vuelve incompatible con nuevas versiones de WordPress, puede romper funcionalidades clave del sitio. 🧰 Ventajas de usar un directorio externo con HTML Rendimiento optimizado: El contenido HTML estático se carga más rápido, sin necesidad de consultas a la base de datos o ejecución de scripts innecesarios. Control total: Puedes personalizar el código al 100% sin depender de las limitaciones de un plugin. Menor riesgo de vulnerabilidades: Al no depender de plugins de terceros, reduces la superficie de ataque. 🤔 ¿Entonces por qué se siguen usando plugins? Porque WordPress está pensado para democratizar la creación web. La mayoría de sus usuarios no son desarrolladores, sino bloggers, emprendedores, artistas, etc., que valoran más la rapidez, comodidad y accesibilidad que el rendimiento técnico puro. Para ellos, instalar un plugin es más viable que crear y mantener un directorio HTML externo. Si estás construyendo un sitio donde el rendimiento y la seguridad son prioritarios (por ejemplo, una web corporativa o de alto tráfico), entonces sí puede valer la pena usar soluciones más personalizadas y ligeras. Pero para la mayoría de los usuarios, los plugins siguen siendo la opción más práctica.

Bueno, muy equivocado no estaba XD https://interlan.ec/blog/2026/01/30/articulo-incrustar-modelos-3d-en-wordpress/ #blender #Código #desarrolloWeb #DIY #nginx #programacion #selfhosting #video #viewer

#Codigo #downloader #vpn #ipvanish
https://www.youtube.com/shorts/dMHDh-SFpFI

#Musk #Muskito publica en #código #abierto el #algoritmo de recomendación de su #red #social #X #opensource #foss www.lavanguardia.com/vida/2026012...

Musk publica en abierto el alg...

#Musk #Muskito publica en #código #abierto el #algoritmo de recomendación de su #red #social #X

#opensource #foss

https://www.lavanguardia.com/vida/20260120/11444296/asi-algoritmo-x-musk-publica-codigo-abierto-funcionamiento-ti-red-social.html

Una de las características de los blogs mas conocidas son los sistemas de comentarios, que le da el aspecto social para poder distinguirse de las paginas web comunes. Aunque en la actualidad es muy común que los blogs ya no tengan ni caja de comentarios ni forma de contacto, aun veo gente probando alternativas. Vamos analizando las alternativas disponibles y sumemos una propuesta.

Introducción

Iniciar un blog es una decisión que tiene muchos preparativos detrás. Y uno de los mayores disuasorios es el hecho de que requiere una inversión monetaria en diferentes escalas, que muchas veces no nos podemos permitir. Hay soluciones que dependiendo de lo que quieras y creas, pueden ser o no buena idea. WordPress ofrece el servicio gratuito de hosting de blogs, pero no es divertido lidiar con una versión castrada de WordPress. Blogger también ofrece servicios gratuitos en una plataforma súper limitada. Puedes apostarle a plataformas sociales como Facebook, Instagram, Tumbrl que si bien son limitadas, ofrecen un gran alcance, pero la magia del blogging es que puedes elegir la casa que quieras según tus necesidades o limitaciones.

Para este articulo, vamos a centrarnos en los generadores de sitios estáticos. Si ninguna de las alternativas anteriores te ha gustado, tal vez quieras probar crear tu blog c0mo un sitio estático y publicarlo en GitHub Pages puesto que no necesitas un servidor como en el caso de WordPress para servir paginas que ya has procesado localmente. Esto tiene la ventaja de que la carga es muy rápida y el alojamiento es gratuito, con el extra de que puede servirte de proyecto para tu hoja de vida. Por supuesto, tu página tendrá que usar un subdominio de GitHub, pero es un nombre con buena reputación que puedes utilizar de forma gratuita. Supongo que te darás cuenta del problema de utilizar un servidor de paginas estáticas; sin procesamiento del lado del servidor, no cuentas con el aspecto social del blogging.

A medida que escribía este articulo, me fui dando cuenta de que no necesitas tomarte tantas molestias. Elije wordpress y ya. Blogger también te sirve. Son gratis y no es como que vayas a meter algo mas que texto e imágenes. Pero me di cuenta de que hay muchas decisiones envueltas a la hora de elegir servir un sitio estático en github pages. No las voy a repasar, pero si fuera por mi, diría que es por experimentar. Justo la razón por la que mantengo este blog y la razón por la que me molesta la falta de soporte de resaltado de código en wordpress. Es divertido y aprendo mucho.

Justo por lo anterior, una de las ventajas de elegir un sitio estático estaría relacionado a la soberanía digital y a mantener un minimalismo en lo que publicas. Probablemente no necesites un servidor escuchando peticiones en el login todo el tiempo, o actualizando dinámicamente paginas que ya por tu elección, son estáticas. De hecho es lo que hay. En este blog, muchas paginas no vuelven a ser tocadas, por lo que no tiene sentido andar procesandolas una y otra vez. Se desperdicia recursos en algo que se puede hacer de forma mas eficiente.

Mencione antes también, la soberanía digital. Podrías estar preocupado por cuanta información sobre tus lectores sale de tu sitio a servidores externos. Esto implica que esos datos obedecen a reglas fuera de tu control, lo que también puede significar que esos mismos datos serán monetizados de alguna forma. Alguien podría hablar de estos detalles. No creo ser el adecuado para ello.

Sea cual sea tu razón para elegir sitios estáticos, hoy vamos a analizar algunas alternativas y luego propondre una por mi cuenta.

Las alternativas

Puedes utilizar muchas alternativas con diferentes enfoques según lo que prefieras. de hecho, Hugo mismo recomienda una lista que analizaremos un poco mas adelante. Pero debes tener en cuenta que todo lo gratis tiene un costo oculto que tal vez quieras o no asumir. El mas común en la perdida de soberanía digital. Las opciones de terceros, como Disqus monetizan con los datos de tus usuarios e insertan rastreadores, mientras que las opciones selfhosted como Commento o Isso te obligan a asumir la carga de procesamiento que evitabas al ingresar al mundo de los sitios estáticos. Ten en cuenta que esto ultimo también tiene un costo técnico en forma de parches de seguridad, actualizaciones y otras cosas que arruinan el concepto de simplicidad total que se espera de un sitio estático.

Vamos analizando las características de algunos ejemplos que he seleccionado. Por supuesto, hay mas que puedes consultar por tu cuenta.

Dependencia Externa¿Requiere Self-Hosting?Tipo de AlmacenamientoDisqus / FacebookAlta (Propietario)NoServidores de la empresa (Nube)Cactus CommentsMedia (Protocolo Matrix)OpcionalRed federada MatrixCommento / IssoBajaSiTu propia base de datos (SQL/Docker)Utterances / GiscusMedia (GitHub)NoGitHub Issues / DiscussionsStaticmanBaja (Transforma a Git)Si (Node.js)Tu propio repositorio (Archivos)

Disqus (La vieja escuela): Es el más fácil de instalar, pero el más invasivo. Dependes totalmente de su servidor y su política de privacidad.
Giscus/Utterances: Son muy populares actualmente. No requieren que tú gestiones un servidor, pero dependen de que GitHub esté activo y de que el usuario tenga una cuenta allí. Es «semi-estático» porque usa la API de GitHub.
Isso / Remark42: Son excelentes para la privacidad, pero te obligan a pagar un VPS o gestionar un contenedor Docker, lo cual anula la ventaja de tener un sitio estático «sin mantenimiento».
Staticman: Es lo más cercano a tu ideal, ya que convierte los comentarios en archivos de datos (JSON/YAML) dentro de tu repo, pero requiere un «servidor puente» (instancia de Node.js) para procesar el envío del formulario.

Mi propuesta

¿Por qué no? Vamos aprovechando los recursos existentes, que asumo ya tienes, ya que quieres y puedes montarte un blog.

Adelanto que esto solo es una prueba de concepto. En lo personal, las alternativas que analizamos son más completas y funcionales; aquí solo busco añadir una opción a la lista de alternativas existentes.

Mail-Comment es una prueba de concepto de comentarios en páginas estáticas basado en correo electrónico. De la misma forma en la que buscaba otros usos para IMAP, se me ocurrió esta idea, notándole algunas ventajas interesantes.

Soberanía digital: tus datos son tuyos. Los datos de tus seguidores son únicamente los que comparten entre ustedes en una comunicación normal de correo electrónico.
Panel de moderación improvisado: antes de hacer públicos los comentarios que recibes, puedes aprovechar los filtros de spam existentes y decidir qué publicar.
Control adicional de SPAM: agrega filtros y palabras clave para controlar el spam.
Múltiples salidas: elige la que más te convenga según la plataforma que tengas.
Filtro de dominio: añade reglas que permitan participar específicamente en el post elegido.
Widgets y botones: configúralos en tu sitio para facilitar el proceso.
Compatibilidad con Hugo: añade los comentarios directamente en tus posts de Hugo.
Minimalismo total: sin JavaScript añadido, sin iframes y sin necesidad de otros servidores, propios o ajenos.

Características

No necesita registro: cualquiera puede escribir un comentario, siempre y cuando tenga un correo electrónico.
Identidad (esto hay que revisarlo): identifícate con tu nombre de usuario de correo electrónico.
Compatibilidad con diferentes estrategias:
- Comentarios por archivos RSS. Puedes añadir un widget que lea archivos XML a modo de comentarios.
- Comentarios estáticos HTML. Exporta los comentarios como fragmentos HTML que puedes integrar en tu página.
- Comentarios estáticos MarkDown. Exporta los comentarios como fragmentos MarkDown que puedes integrar en tu pagina.
- Integración con Hugo. En tu instancia local, añade los comentarios al final de tus archivos MarkDown de hugo, según la url comentada.
- Integración con WordPress. Añade un webhook en tu servidor de WordPress para recibir los comentarios sobre una URL para una instancia Headless.

Dado que es un prototipo, estaré analizando mas cosas y mejoras que hacer.

Instalación y ejecución

En Linux necesitas crear un entorno virtual (venv). Te adjunto los comandos para crearlo y ejecutarlo, pero recuerda que tienes que editar el archivo .env:

git clone https://git.interlan.ec/Drk0027/mail-comment.git
cd mail-comment
pip install -r requirements.txt
cp .env.example .env
python -m venv
source venv/bin/activate
python email-processor.py

He dejado un archivo .env.example para que lo copies a .env y lo configures según tus necesidades. Recuerda que necesitas un servidor IMAP, que puede ser el de tu correo electrónico.

Advertencia
Recuerda que publicar tu dirección de correo puede ser algo sensible. Puede exponerte a spam y a vulnerabilidades que podrían causarte daño. Te recomiendo que, si quieres utilizar este enfoque, crees una cuenta nueva dedicada a esta tarea.
Nota
En el estado actual, el script revisa todos los correos de la carpeta INBOX, pero solo borra los que cumplan los requisitos de los que hablaremos mas adelante. Esto es por seguridad: así, si quieres hacer pruebas, no terminaras con toda tu bandeja aniquilada.
El script analiza uno por uno los correos dentro de la bandeja que has especificado. Si está muy llena o si tu servidor es lento, esta tarea puede tardar bastante.

Si bien, es posible utilizar el correo de gmail, es algo de lo que tengo dudas y no he tenido la oportunidad de probar todavía. Parece que se puede utilizar una clave de aplicación, si alguien lo intenta, puede decirme para actualizar este post. Aun así, en teoría puedes usar los mismos servidores que usarías en delta chat.

👉 https://providers.delta.chat/

Flujo de trabajo

Publica normalmente como siempre haces. Añade un texto o un botón para indicar a los usuarios como realizar los comentarios, mediante correo electrónico. Para que funcione esta herramienta, el asunto debe contener la URL de la pagina que se desee comentar. Esto sirve de validación para separar el spam de los comentarios legítimos.

Por supuesto, si no quieres agregar el botón o crees que el enlace mailto no funciona, puedes pedir que te escriban directo desde sus bandejas de entrada, indicando en el asunto la url del post que deseas que comenten.

Comentar esta entrada por correo electrónico

En el archivo .env deberás configurar el DOMAIN_TO_SEARCH con tu dominio para poder localizar el destino de los comentarios. Esto también te evitará algo de SPAM puesto que los procesos automatizados no saben que estarás utilizando este sistema de comentarios (a menos que se haga popular y los crawlers terminen aprendiendo como funciona y empiecen a joder simulando ser usuarios legítimos)

En el archivo .env también puedes configurar palabras clave que puedes usar a modo de filtro mediante IGNORE_KEYWORDS=publicidad,notificacion,spamintroduce todas las palabras que quieras usar. Pero esto es mas útil si eliges ejecutar este script de forma regular, con poca o ninguna supervisión.

Al ser un correo normal, puedes revisar la bandeja de entrada para leer lo que ha llegado y decidir si lo borras o lo dejas antes de ejecutar el programa. Usa tu bandeja de entrada a modo de panel de moderación y de esta manera, puedes incluso aprovechar los filtros de tu proveedor de correos, como gmail, que usualmente es muy efectivo.
Elije una o todas las opciones de exportación o integración.

SAVE_HTML=True
SAVE_MARKDOWN=True
SAVE_XML=True
SEND_WEBHOOK=True

Si estas usando una instancia Headless de wordpress, puedes utilizar un snippet o editar un plugin o tema para integrar y crear un nuevo webhook para recibir los comentarios.

https://git.interlan.ec/Drk0027/mail-comment/src/branch/main/functions.php

WP_WEBHOOK_URL=https://tusitio.com/wp-json/tudominio/v1/recibir-comentario
WEBHOOK_SECRET_TOKEN=mi_clave_secreta_123

Si estas usando Hugo, agrega el directorio donde estas editando tu sitio.

HUGO_DIR = /home/user/quickstart/
APPEND_HUGO = True

Esta función prepara todos los comentarios recibidos y los agrega al final de tus entradas en Hugo que correspondan a la URL equivalente.

Solo lo he probado con un despliegue básico de Hugo. Por eso se llama QuickStart XD

Ejecuta el script.

Recuerda usar un venv en linux. Hay formas de usarlo sin tener que andar activando el venv, pero me da pereza explicarlo ahora.

python email-processor.py

El Script hará las siguientes cosas:

Se conectará al servidor de correo
De la bandeja seleccionada (INBOX por defecto) revisará uno por uno los mensajes
- Obtiene el asunto (corresponde al titulo de la página y también al directorio local de Hugo)
- Filtra que el dominio de la URL corresponda al del sitio, registrado en el .env (evita spam)
- Obtiene remitente (se usará para identificar al comentarista)
- Obtiene el mensaje y depura el HTML con el fin de obtener una versión mas simple y libre de posibles scripts indeseados.
- Valida si el mensaje contiene alguna de las palabras de IGNORE_KEYWORDSy si no es el caso, continua el flujo
  - Si esta activo SAVE_MARKDOWN guardara un fragmento por mensaje
  - Si esta activo SAVE_XML guardará fragmentos para RSS en XML
  - Si esta activo SEND_WEBHOOK enviará el comentario al webhook de wordpress. Recuerda que tienes que haber configurado el secreto entre ambos.
  - Si esta activo SAVE_HTML guardara fragmentos HTML por mensajes
  - Si esta activo APPEND_HUGO convertirá el contenido HTML a Markdown y buscará en los directorios especificados en busca del post deducido de la URL. en caso de encontrarlo, agregara el comentario al final del post.
- Borra los mensajes procesados
Cierra la sesión IMAP

El resultado es que se integraran los comentarios en las entradas y estos se cargaran la próxima vez que actualices tu sitio.

Resultado de mail-comment y hugo

Conclusiones

He escrito esta herramienta como prueba de concepto para añadir más alternativas a sitios estáticos que no desean tener servicios externos ni depender de servidores propios o ajenos. La idea resultó más extensa de lo que creí para un simple script en Python que automatiza tareas, pero me inspiré en los bots de Telegram para su flujo de trabajo.

Dejo los recursos que he creado para que quien desee lo pruebe y, si así lo desea, me deje una opinión.

Actualización

Me quedan pendientes de hacer algunas cosas. como por ejemplo, una pagina de demo para mostrar funcionando el proyecto, pero me encontré con la particularidad de que no he contemplado el alojamiento en rutas de un dominio/subdominio y eso que funciona hasta para localhost jajaja

Tambien encontré otro servicio similar a mi idea. ¡Hasta por las mismas razones! jajaja.

Cito traducido de su pagina:

Cada vez menos sitios web independientes admiten comentarios enviados por los lectores. Una barrera es que los diseños existentes están fundamentalmente en desacuerdo con lo que el usuario quiere y lo que necesita el moderador del sitio. Las principales compensaciones son entre brindar una experiencia conveniente y respetuosa para el visitante del sitio, manteniendo al mismo tiempo la capacidad de moderar los comentarios en busca de spam y contenido ofensivo.
Históricamente, exigir a los usuarios que se registren para obtener cuentas antes de enviar comentarios ha sido el principal enfoque de moderación; sin embargo, un flujo de registro está en conflicto con el objetivo de conveniencia del visitante. Una alternativa a esto ha sido asociarse con grandes empresas comerciales de redes sociales para aprovechar su mayor conjunto de cuentas que muchos visitantes del sitio probablemente ya tendrán en estas otras plataformas. Este enfoque ayuda a aliviar el problema de conveniencia mencionado anteriormente (asumir que los visitantes utilizan las redes sociales), pero lo hace a expensas de su privacidad. Podría decirse que este compromiso es peor, porque los problemas de privacidad a menudo ocurren sin el conocimiento del lector.

https://spenc.es/writing/email-as-a-commenting-system/

Observo con curiosidad con que aunque la idea es la misma y las razones de su origen también, el desarrollo es totalmente diferente. Uh, súper diferente la verdad.

Mientras r3ply se orienta a un despliegue permanente en la nube, Mail-Comment se puede ejecutar bajo demanda en tu propio equipo, sin infraestructura adicional

r3ply está diseñado para desplegarse como un servicio permanente en la nube (ej. AWS), siempre activo y disponible para procesar comentarios en tiempo real.
Mail-Comment en cambio, funciona como un script autónomo que puedes ejecutar bajo demanda en tu propio equipo, sin necesidad de infraestructura adicional ni de mantener un servidor 24/7.

Pero ya que estamos, analicemos este ecosistema un momento

r3ply Proyecto open‑source que convierte correos electrónicos en comentarios para sitios web estáticos. Similar a Mail-Comment, aprovecha IMAP/SMTP y añade anonimización de direcciones. (parece que ha dado de baja su repo de git porque esta haciendo cambios y mejoras. al menos eso deduzco de sus comentarios)
Staticman Permite añadir comentarios a sitios estáticos mediante *pull requests* en GitHub/GitLab. https://staticman.net/
Cusdis Sistema ligero y open‑source de comentarios, centrado en privacidad. Aunque no está basado en correo, permite moderar comentarios vía notificaciones por email. https://cusdis.com/

https://interlan.ec/blog/2026/01/16/comentarios-en-sitios-estaticos/ #Código #DIY #email #experimentos #programacion #python #selfhosting

Militar afirma ter recebido “código” telepático de OVNI na Floresta de Rendlesham

https://arquivoufo.eurisko.com.br/2026/01/09/militar-afirma-ter-recebido-codigo-telepatico-de-ovni-na-floresta-de-rendlesham/

O Código Duro de Matar

Através da Adaptação por neuroplasticidade e memórias residuais, o paciente substitui o pensamento complexo pelo sentir objetivo. Essa transição garante Dignidade, transformando a progressão da doença em uma nova forma de interação e presença sensorial no mundo.

#Demência, #Código, #Adaptação, #Dignidade,

https://eternidade1.blogspot.com/2026/01/o-codigo-duro-de-matar.html

Visite nosso Blog!😍

O Código Duro de Matar

A Demência frontotemporal atrofia o intelecto social, mas preserva áreas sensoriais que permitem a criação de um novo Código de sobrevivência baseado em cores e sabores. Através da Adaptação por neuroplasticidade e memórias residuais, o paciente substitui o pensamento complexo pelo sentir objetivo. .

#Demência, #Código, #Adaptação, #Dignidade,

https://eternidade1.blogspot.com/2026/01/o-codigo-duro-de-matar.html

Estudo sugere que o Manuscrito Voynich pode ser, na verdade, um código secreto

https://muitocurioso.eurisko.com.br/estudo-sugere-que-o-manuscrito-voynich-pode-ser-na-verdade-um-codigo-secreto/

@claraalbor
Al final el hierro no tiene la culpa, sino el que tiene el mando en la mano. Lo de #Terminator es el gancho para el #debate, pero la realidad es que el #código no tiene voluntad; el peligro sigue siendo el mismo de siempre: nosotros mismos y qué hacemos con la herramienta.

Feliz Navidad 🎄⛄

#navidad #dev #programacion #codigo #developer

#1
A comienzos de la década de 1990, un joven estudiante de #informática de apenas 21 años publicó en #Internet un proyecto personal que parecía modesto: un núcleo de sistema operativo con poco más de diez mil líneas de #código. Ese estudiante era #LinusTorvalds y el proyecto se llamó #Linux. Lo que lo hizo especial no fue solo el código, sino la decisión de compartirlo de forma gratuita y permitir que otros lo estudiaran, lo modificaran y lo mejoraran.

#Codigo X + Complejidad Computaciónal #RESOLVER - El Enigma 2026

🇪🇸 La #petición para el #reconocimiento del trabajo de #código abierto como #voluntariado en #Alemania ya está disponible en español:

https://www.openpetition.de/petition/online/reconocimiento-del-trabajo-de-codigo-abierto-como-voluntariado-en-alemania 🇪🇸

(No, I don't speak Spanish. Thanks to Jon and Luat for taking care of the translation corrections)

¿Listo para pasar de los bloques al #código? 🚀

Microsoft Small Basic es tu punto de partida ideal. Aprende lógica de #programación con una sintaxis simple, crea tus primeras apps y establece una base sólida en .NET.

➡️ https://www.softandapps.info/2025/12/07/microsoft-small-basic-primer-contacto-con-programacion-textual/