Códice | Entradas sobre «herramienta»

wysiwyg.css

JavGuerra — Wed, 27 Apr 2022 00:00:00 GMT

Etiquetas: #css, #html, #markdown, #herramienta

En ocasiones debemos presentar pequeñas páginas web a las que no merece la pena dedicarles tiempo de maquetación con CSS, como páginas para mostrar ejemplos, ejercicios, etc. pero a las que queremos darle una presentación básica que nos muestre el contenido algo más pulido que con los estilos por defecto del navegador.

wysiwyg.css de Jeremy Thomas es un fichero .css con una sola clase llamada «.wysiwyg» (What You See Is What You Get) que lo hace por nosotros. Su uso es sencillo, descargamos el fichero wysiwyg.css de la página del proyecto, lo enlazamos en el head de nuestra página, y por último creamos un div que envuelva todo aquel contenido de la página que queramos que se vea afectado por los cambios de estilo de la clase «.wysiwyg», o incluso toda la página, de principio a fin.

<body>
    <div class="wysiwyg">
        <!-- Mi HTML -->
    </div>
</body>

La clase .wysiwyg define estilos para cabeceras, párrafos, listas, tablas, bloques de código, enlaces… Al aplicarla, todo el contenido dentro del div se mostrará con los estilos definidos en ella. La página de este proyecto es un ejemplo de uso de esa clase.

el proyecto en Github también permite descargarnos un fichero .scss sobre el que realizar cambios en los valores por defecto de la clase .wysiwyg antes de transpilarlo a .css.

Algunas cosas que podemos cambiar en el .scss son:

Variables que guardan los colores por defecto
Espaciado
Tipografía
Otros (Todas las opciones de personalización están deshabilitadas inicialmente).

Ir a la página de wysiwyg.css para más información.

Animación interactiva

JavGuerra — Sat, 14 May 2022 00:00:00 GMT

Etiquetas: #web, #html, #css, #javascript, #animación, #herramienta

Cree atractivos diseños interactivos basados en HTML5 y gráficos en movimiento que puedan ejecutarse en cualquier dispositivo.

Así se presenta Google Web Designer en su web. Se trata de una herramienta disponible para varios sistemas operativos que puede descargarse para crear animaciones y elementos interactivos en HTML5 y que se integra con otros productos de Google, como Google Drive, Display & Video 360 y Google Ads.

Veamos cómo funciona con un ejemplo:

Esta simple animación que preparé para la asignatura de Diseño de Interfaces Web de F.P.G.S. de Desarrollo de Aplicaciones Web, contiene la imagen de un cronómetro en formato SVG que creé con la herramienta Inkscape, y dos botones que nos permiten iniciar y parar la animación o reiniciar la animación. Al iniciar con el botón «START», las agujas del cronómetro comienzan a correr hasta llegar a 20 segundos, momento en el que suena una campanilla, y la animación vuelve a su punto de origen.

Google Web Designer se parece a otras herramientas de edición de animaciones como la extinta Adoble Flash.

Permite:

Crear eventos e interacción usando los que vienen con la herramienta o creando otros propios con JavaScript.
Arrastrar y soltar componentes en su proyecto para agregar instantáneamente funcionalidades como galerías de imágenes, reproductores de video, mapas y más. Además, cada componente informa automáticamente las métricas sin necesidad de codificación.
Crear varias páginas para incluir varias escenas dentro de un proyecto.
Crear reglas de medios en su bloque de anuncios para establecer el estilo y el diseño del diseño, de modo que un solo bloque de anuncios pueda adaptarse a cualquier tamaño de pantalla en el que aparezca.
Animar escenas simples en el modo Rápido o usando capas en una línea de tiempo en el modo Avanzado unsando rutas de movimiento y aceleración personalizada.
Crea y manipula contenido 3D usando CSS3. Permite girar objetos y diseños 2D a lo largo de cualquier eje, visualizando transformaciones y traslaciones 3D mientras editamos.
Admite una amplia gama de formatos de anuncios gráficos y de video en todas sus plataformas publicitarias.

Aunque no es muy conocida, es una herramienta potente, y finalmente, el resultado del trabajo con Google Web Designer es completamente compatible con los estándares web actuales, manejando con CSS y JavaScript toda la animación y gestión de eventos, y ofreciendo resultados adaptables al dispositivo donde se muestre la animación interactiva.

Descargar Google Web Designer

Brackets vuelve

JavGuerra — Sat, 14 May 2022 00:00:00 GMT

Etiquetas: #html, #css, #javascript, #herramienta

¿Acaso se había ido? Brackets es un editor de texto orientado al desarrollo web, implementado en JavaScript, fácilmente extensible mediante HTML/CSS/JS, y que está disponible para Windows, OS X y Linux bajo una licencia abierta.

Tras el éxito arrollador de Visual Studio Code, Adobe, la empresa detrás de su desarrollo, abandonó el proyecto por su baja cuota de uso, pero nuevas versiones han sido lanzadas desde entonces de la mano de la comunidad. ¡Brackets sigue vivo!

Brackets emplea como base el editor CodeMirror y retoma ideas y conceptos ya ensayados en otra herramienta discontinuada llamada Adobe Edge Code. Tiene alrededor una amplia comunidad de desarrolladores que están ampliando los horizontes de esta herramienta rápidamente, haciéndola versátil en otras áreas del trabajo y la edición de múltiples formatos de documentos.

De hecho, un nuevo proyecto derivado de Brackets ha visto la luz. Se trata de Phoenix, un editor web completamente on-line (aunque no funciona aún con Firefox…).

Extensiones

Con las extensiones de Brackets podemos gestionar el control de versiones (p.ej. Git), revisar el código escrito, añadir notas, hacer seguimiento de TODO’s, escribir código de forma automática con unas pocas pulsaciones de tecla mediante el uso de estructuras de código pre-guardadas…

La propia herramienta, una vez instalada, dispone de editor interno que permite modificar directamente, sin cambiar de documento, el código CSS asociado a una etiqueta HTML. Permite ver, con sólo pasar por encima, el color de una descripción CSS, y tiene previsualización en vivo de documentos a través de Chrome. Lo que modifiquemos en el código irá reflejándose en la página mostrada en Chrome en tiempo real.

Adobe proponía seguir estos pasos (en inglés) para iniciarse en el uso de Brackets.

Por mi parte, fue de gran ayuda la visualización de este tutorial en video de J&G Proyectos Web para aprender su correcto uso:

Cuando instalamos Brackets por primera vez, la interfaz parece algo desangelada, pero a medida que añadimos extensiones esto cambia. En el vídeo se explica muy bien cómo empezar a preparar tu entorno de trabajo.

El uso de distintos temas permite cambiar su aspecto acercándolo aún más a nuestras preferencias. Son innumerables los que están disponibles, pero de entrada te recomiendo el uso del tema Monokai para Brackets o alguno de los temas contenidos en el paquete Themes for Brackets. Estos están disponibles también vía el gestor de extensiones.

Una extensión que te ayudará a elegir qué instalar es Extensions Rating, que indica valoraciones de las extensiones disponibles en función del número de descargas y su popularidad.

Este es un listado de extensiones que no debes perderte:

Emmet
Brackets Snippets (by edc)
HTMLHint
Brackets Todo
Special Html Characters
Document outline
RightClickExtended
Brackets Tools
SFtpUpload
Bracket Git
Notes
CanIUse

Será fácil encontrarlas en el gestor de extensiones y conocer más sobre su uso y potencial.

Para terminar de redondear el trabajo con Brackets, te propongo el uso de la fuente de letra Inconsolata. Tan sólo debes añadir ‘Inconsolata’, (con comillas, seguido de una coma) al principio, en la casilla «Tipo de letra» en Preferencias de temas, opción a la que se accede vía «Ver > Temas…»

Si pese a todo lo dicho, Brackets no es lo que estás buscando, te recomiendo que repases esta completa comparativa de editores alternativos.

Edición de video

JavGuerra — Sat, 14 May 2022 00:00:00 GMT

Etiquetas: #html, #css, #edición, #video, #herramienta

Esta simple edición de video que preparé para la asignatura de Diseño de Interfaces Web de FPGS. de Desarrollo de Aplicaciones Web, no es, desde luego, una obra de arte, ya que incluye filtros de video sin demasiado sentido, tal como pedía el ejercicio, pero ejemplifica el trabajo realizado con una herramienta de edición de video no lineal como es OpenShot Video Editor.

Aquí el resultado:

El ejercicio muestra, no obstante, algunas cuestiones interesantes:

El vídeo hace uso de las etiquetas figure, video y figcaption de HTML5.
Emplea el reproductor de video implícito en el navegador.
Cuenta con subtítulos sincronizados con la reproducción de video en formato vtt.
La página y el vídeo son responsive, adaptándose al tamaño de la ventana del navegador.
El video incluye efectos de imagen, transiciones, música y títulos de crédito.

El video maltratado aquí, corresponde al corto «Big Buck Bunny» realizado con la herramienta 3D Blender. Ambos, el video y la herramienta, son de uso libre.

OpenShot Video Editor es una herramienta de edición libre que merece una entrada a parte más adelante.

Usando Sergey SSG

JavGuerra — Fri, 26 Aug 2022 00:00:00 GMT

Etiquetas: #web, #html, #node.js, #ssg, #herramienta

«Si alguna has hecho un cambio en cada encabezado en un sitio web totalmente estático, sabrás lo engorroso y propenso a errores que es copiar y pegar los cambios en todos los ficheros. Ahí es donde entra en juego Sergey. Sergey le permite mover ese encabezado a un único fichero que se puede importar y te ayuda a incluirlo donde lo necesites.»

Así describe el autor de esta herramienta la funcionalidad de su Generador de Sitios Estáticos. Se trata de una utilidad simple que permite hacer importaciones de código en nuestro HTML empleando Node.js para generar la página resultante.

La página de ejemplo

En esta entrada voy a mostrar un ejemplo práctico. Cómo usar Sergey SSG en la web de una iniciativa sobre tarjetas de emergencia para enfermedades raras o poco frecuentes.

Hay una serie de requisitos funcionales y operativos por los que se ha optado por la creación de una página estática:

Rápida. La página debe cargar lo más rápido posible para que pueda ser accedida incluso en entornos donde hay poco ancho de banda, ya que la información médica que contiene debe estar disponible en cualquier lugar de Latinoamérica, por este motivo, debe pesar poco para un consumo bajo de ancho de banda y no usar procesos como la consulta a BBDD que retrasen su carga.
Mantenible. La página debe poder actualizarse con rapidez y sin gran esfuerzo.

Se optó por desarrollar la página sin usar ningún CMS ni base de datos de respaldo, empleando sólo HTML + CSS. Para la maquetación se usó Bootstrap, simplificando el desarrollo y su posterior mantenimiento, y las zonas comunes de las páginas web fueron extraídas para ser insertadas como slots, en cada página HTML. Esto permite que para hacer cambios en estos contenidos repetidos sólo sea necesario modificar un fichero, y el resto de páginas mostrarán los cambios.

Sergey SSG

Todos los generadores de sitios estáticos funcionan de forma análoga. Toman una serie de páginas codificadas de una forma concreta y las convierten a HTML que puede ser usado en un navegador. lo que los diferencia es el código que incluyen estas páginas para generar el resultado que deseamos.

Ya que el propósito de esta entrada no es hacer una revisión de la herramienta, te dejo enlace a un video de Jonathan MirCha sobre sus características y uso básico paso a paso.

LiveCoding Primeros pasos con Sergey un SSG minimalista

La instalación y uso de Sergey SSG requiere tener instalado Node.js.

Ver las indicaciones de instalación en: https://sergey.trysmudford.com/

Importaciones

La página de ejemplo consta de una HTML principal o portada y de él derivan todas las otras páginas estáticas de la web. Todas ellas tienen la misma estructura:

Inicio, con la información del head de la página.
Cabecera de la página, con el logo y el título de la página. (En algunos casos contiene más de un logo)
Cuerpo de la página. Este es el contenido que cambia en cada página.
Fin, o pie de página.

Inicio, cabecera y fin son los contenidos que se repiten y no cambian, si bien en ellos, como veremos, hay información específica de cada página.

Lo que necesito es que cada página web estática contenga el cuerpo de la página, es decir la información propia y específica de esa página, pero que las otras partes de la página que tienen una estructura repetida se inserten en la página desde otro fichero.

Por alguna razón, HTML no implementa esta característica que si tienen CSS y JavaScript, y aunque en su momento se intentó llevar a cabo, no cuajó. Ver info sobre Imports HTML.

Según parece, hay un estándar en ciernes llamado HTML módulos que permitiría importar HTML como si fuesen módulos de Javascript mediante import. Para saber más: HTML Modules Explainer

Hasta que se estandarice, Sergey SSG es una razonable alternativa.

Vamos por partes

…dijo el descuartizador de Boston. Este mal chiste da pie a entender cómo vamos a trabajar.

Cada parte susceptible de repetirse en las distintas páginas se sacará, a una carpeta llamada _imports, y estos documentos «importables» serán referenciados en cada una de las páginas donde se utilicen.

Para conocer las etiquetas de importación de Sergey SSG, puedes visitar la sección Slots de su página.

Las partes que vamos a reutilizar son:

inicio.html
cabecera.html
cabecera-multiple.html
fin.html

1. Inicio

Este fichero contiene el head de la página, y el comienzo del body:

<!DOCTYPE html>
<html lang="es" prefix="og: http://ogp.me/ns# website: http://ogp.me/ns/website#">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title><sergey-slot name="title" /></title>
    <meta name="description" content="<sergey-slot name="description" />" />
    <meta name="author" content="Javier Guerra" />
    <meta name="license" content="CC-BY Conectiva.Lat" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:site" content="@conectiva_lat" />
    <meta property="og:url" content="https://conectiva.lat/emergencias/index.html" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="Tarjetas de emergencia" />
    <meta property="og:description" content="Descargar las tarjetas de emergencia para Enfermedades Poco Frecuentes." />
    <meta property="og:image" content="https://conectiva.lat/emergencias/assets/banner.png" />
    <meta property="og:image:type" content="image/png" />
    <meta property="og:image:width" content="1024" />
    <meta property="og:image:height" content="512" />
    <meta property="og:image:alt" content="Banner" />
    <meta property="og:locale" content="es_ES" />
    <link rel="manifest" href="https://conectiva.lat/emergencias/manifest.json" />
    <link rel="shortcut icon" href="<sergey-slot name="assets" />assets/favicon.png" />
    <link rel="stylesheet" href="<sergey-slot name="assets" />assets/estilos.css" />
    <sergey-slot />
</head>

<body>
    <div class="container">

Como se aprecia, hay una serie de etiquetas sergey-slot en este fichero. Para entenderlo mejor, tenemos que ver cómo se inserta este fichero en las páginas.

<sergey-import src="inicio">
    <sergey-template name="title">Tarjetas de Emergencia</sergey-template>
    <sergey-template name="description">Descargar las tarjetas de emergencia para Enfermedades Poco Frecuentes.</sergey-template>
</sergey-import>

Estas son las líneas que uso en el fichero index.html para insertar la cabecera de la página.

Vemos aquí un <sergey-import src="inicio"> que indica cual es el import que voy a insertar, que en este caso se llama inicio (inicio.html), y una serie de etiquetas sergey-template con información que debe ir en la cabecera que voy a importar. Esta información será distinta en cada HTML, pero no así el resto de contenido de la cabecera que está en el fichero externo. Con estos sergey-template indico qué datos deben sustituirse en el import genérico allí donde aparezca una etiqueta sergey-slot en inicio.html, consiguiendo de esta forma tener un fichero externo, común a todas las páginas que lo incluyan, donde puedo hacer cambios de forma sencilla que afectarán a todas esas páginas, pero sin perder la funcionalidad de la personalización de algunos aspectos de cada página, como por ejemplo el titulo…

Con este import definimos el title de la página, la description y puedo añadir contenido en este caso al final de head si lo deseo, como he hecho con el script dentro del sergey-import, ya que en el fichero inicio.html he colocado un <sergey-slot /> justo antes de la etiqueta de cierre de la cabecera.

En este caso no incluyo templates para los <sergey-slot name="assets" /> en inicio.html porque no los necesito, pero cuando uso este import en ficheros que están dentro de subcarpetas, si debo indicar sus rutas, pudiendo añadir entonces:

<sergey-template name="assets">../</sergey-template>

para indicar así que estoy en una subcarpeta, añadiendo ../ al inicio de la ruta de assets/favicon.png y assets/estilos.css, que ahora serán ../assets/favicon.png y ../assets/estilos.css respectivamente, alcanzando sin errores los contenidos ubicados en la carpeta assets. Como vimos en el fichero inicio.html, los slot para estas rutas serían:

<link rel="shortcut icon" href="<sergey-slot name="assets" />assets/favicon.png" />
<link rel="stylesheet" href="<sergey-slot name="assets" />assets/estilos.css" />

No importa usar comillas dobles dentro de comillas dobles, ya que Sergey SSG se encargará de sustituir <sergey-slot name="assets" /> por ../ en el fichero final resultante.

{: .box-note} Nota: Cuando en el fichero de importación incluyo un <sergey-slot /> pero no le envío contenido, Sergey SSG crea un salto de línea no deseado. Cuando hacemos un import de contenido que está tabulado, Sergey tabula la primera línea del contenido que incluye en <sergey-slot /> correctamente, pero no hace lo mismo con el resto de líneas, que no conservan el tabulado original. Si eres un obseso de la tabulación de tus líneas de código tienes un problema. He abierto una Issue para que estas cuestiones puedan ser corregidas en la siguiente versión, si esta llega a ver la luz. Por lo demás, el software funciona correctamente y hace su función.

2. Cabecera

La cabecera contiene el logo, el título y subtítulo. El código es:

<header>
    <div class="row">
        <div class="col-sm order-sm-last text-end">
            <a href="https://conectiva.lat" target="_blank">
                <img src="<sergey-slot name="assets" />assets/conectiva-logo.svg" width="148" alt="Logo de Conectiva" />
            </a>
        </div>
        <div class="col-sm">
            <h1><sergey-slot name="h1" /></h1>
            <h2><sergey-slot name="h2" /></h2>
        </div>
    </div>
</header>

<a href="#contenido" class="visually-hidden-focusable">Ir a los recursos</a>

que es llamado desde el HTML con:

<sergey-import src="cabecera">
    <sergey-template name="h1">Tarjetas de emergencia</sergey-template>
    <sergey-template name="h2">Enfermedades Poco&nbsp;Frecuentes</sergey-template>
</sergey-import>

En este caso se trata del código incluido en el fichero index.html. si se tratase de un fichero en una subcarpeta, deberíamos incluir los _template_ de la ruta del logo. Por ejemplo:

<sergey-import src="cabecera">
    <sergey-template name="h1">Tarjeta de emergencias</sergey-template>
    <sergey-template name="h2">Síndrome de Loeys-Dietz</sergey-template>
    <sergey-template name="assets">../</sergey-template>
</sergey-import>

Como en inicio.html, el import trae el fichero, en este caso cabecera.html, y lo inserta en el html rellenando las etiquetas slots con el contenido especificado en las etiquetas template.

3. Cabecera múltiple

En algunas páginas, como ocurre aquí, la cabeceras incluye dos logos. El código del import en este caso es:

<header>
    <div class="row">
        <div class="col-sm order-sm-last text-end">
            <ul class="enLinea">
                <sergey-slot />
                <li>
                    <a href="https://conectiva.lat" target="_blank">
                            <img src="<sergey-slot name="assets" />assets/conectiva-logo.svg" width="148" alt="Logo de Conectiva" />
                    </a>
                </li>
            </ul>
        </div>
        <div class="col-sm">
            <h1><sergey-slot name="h1" /></h1>
            <h2><sergey-slot name="h2" /></h2>
        </div>
    </div>
</header>

<a href="#contenido" class="visually-hidden-focusable">Ir a los recursos</a>

que no se diferencia mucho de la cabecera simple, si no es por la inclusión de un <sergey-slot /> y de la lista ordenada que va a incluir los distintos logos. Este import será llamado desde las páginas con el código:

<sergey-import src="cabecera-multiple">
    <sergey-template name="h1">Tarjeta de emergencias</sergey-template>
    <sergey-template name="h2">Síndrome Ehlers-Danlos</sergey-template>
    <sergey-template name="assets">../../</sergey-template>
    <li>
        <a href="https://www.facebook.com/ACOEDCR" target="_blank">
            <img src="../../assets/acoed.svg" width="150" alt="Logo ACOED" />
        </a>
    </li>
</sergey-import>

Como se aprecia, no es necesario seguir el mismo orden de los slots para definir los template.

4. Fin

En el fichero fin.html defino el pie y el cierre de página:

        <footer>
            <div class="row">
                <div class="nota">
                    <div class="d-flex">
                        <div class="ms-3 me-3">
                            <i class="bi bi-info-circle"></i>
                        </div>
                        <div>
                            <p>
                                <small>Las <a href="https://conectiva.lat/emergencias/index.html">tarjetas de
                                    emergencia</a> son una iniciativa abierta y gratuita del equipo de trabajo de
                                    Emergencias de <a href="https://conectiva.lat" target="_blank">Conectiva</a> para
                                    las personas afectadas por Enfermedades Raras, Huérfanas o Poco Frecuentes.</small>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </footer>

    </div>
</body>

</html>

En este caso no uso ningún slot, por lo que el código para importarlo es muy simple:

<sergey-import src="fin" />

Imagina la de cosas que se pueden hacer con esta forma de trabajar. Incluir por ejemplo un banner donde quieras en tu página y poder cambiarlo según las circunstancias, extraer partes de la página para hacerla modular, menús, secciones, etc.

Una página completa

Una vez vista cada importación por partes, veamos cómo quedaría el index.html:

<sergey-import src="inicio">
    <sergey-template name="title">Tarjetas de Emergencia</sergey-template>
    <sergey-template name="description">Descargar las tarjetas de emergencia para Enfermedades Poco Frecuentes.</sergey-template>
</sergey-import>

<sergey-import src="cabecera">
    <sergey-template name="h1">Tarjetas de emergencia</sergey-template>
    <sergey-template name="h2">Enfermedades Poco&nbsp;Frecuentes</sergey-template>
</sergey-import>


<!-- Aquí el código HTML de nuestra página -->


<sergey-import src="fin" />

Al generar la página con npm start a partir de este código, se mostraría lo siguiente:

<!DOCTYPE html>
<html lang="es" prefix="og: http://ogp.me/ns# website: http://ogp.me/ns/website#">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Tarjetas de Emergencia</title>
    <meta name="description" content="Descargar las tarjetas de emergencia para Enfermedades Poco Frecuentes." />
    <meta name="author" content="Javier Guerra" />
    <meta name="license" content="CC-BY Conectiva.Lat" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:site" content="@conectiva_lat" />
    <meta property="og:url" content="https://conectiva.lat/emergencias/index.html" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="Tarjetas de emergencia" />
    <meta property="og:description" content="Descargar las tarjetas de emergencia para Enfermedades Poco Frecuentes." />
    <meta property="og:image" content="https://conectiva.lat/emergencias/assets/banner.png" />
    <meta property="og:image:type" content="image/png" />
    <meta property="og:image:width" content="1024" />
    <meta property="og:image:height" content="512" />
    <meta property="og:image:alt" content="Banner" />
    <meta property="og:locale" content="es_ES" />
    <link rel="manifest" href="https://conectiva.lat/emergencias/manifest.json" />
    <link rel="shortcut icon" href="assets/favicon.png" />
    <link rel="stylesheet" href="assets/estilos.css" />
</head>

<body>
    <div class="container">

        <header>
            <div class="row">
                <div class="col-sm order-sm-last text-end">
                    <a href="https://conectiva.lat" target="_blank">
                        <img src="assets/conectiva-logo.svg" width="148" alt="Logo de Conectiva" />
                    </a>
                </div>
                <div class="col-sm">
                    <h1>Tarjetas de emergencia</h1>
                    <h2>Enfermedades Poco&nbsp;Frecuentes</h2>
                </div>
            </div>
        </header>

        <a href="#contenido" class="visually-hidden-focusable">Ir a los recursos</a>


<!-- Aquí el código HTML de nuestra página -->


        <footer>
            <div class="row">
                <div class="nota">
                    <div class="d-flex">
                        <div class="ms-3 me-3">
                            <i class="bi bi-info-circle"></i>
                        </div>
                        <div>
                            <p>
                                <small>Las <a href="https://conectiva.lat/emergencias/index.html">tarjetas de
                                    emergencia</a> son una iniciativa abierta y gratuita del equipo de trabajo de
                                    Emergencias de <a href="https://conectiva.lat" target="_blank">Conectiva</a> para
                                    las personas afectadas por Enfermedades Raras, Huérfanas o Poco Frecuentes.</small>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </footer>

    </div>
</body>

</html>

Los ficheros generados resultantes, ya como páginas estáticas con todo su contenido, estarán en la carpeta public, y serán estos ficheros los que podremos subir a nuestro servidor.

Más opciones en Sergey SSG

Sergey SSG tiene un par de opciones más interesantes.

Puede gestionar enlaces con sergey-link, algo muy útil cuando queremos mostrar a los usuarios dónde se encuentran dentro de la página.

Sergey SSG también puede importar texto en formato Markdown como se indica aquí.

Si intentas visualizar los cambios de las páginas que estás creando antes de generar tus ficheros estáticos, estos se mostrarán con errores, ya que el código de Sergey SSG no es reconocido por el navegador. Te recomiendo que revises las distintas opciones para ejecutar Sergey SSG e incluso para tener una previsualización de los cambios que vas realizando en tiempo real.

Enlaces

Ir a la página de las tarjetas de emergencia
Generadores de sitios estáticos
Sergey SSG
Repositorio de Sergey SSG en GitHub
LiveCoding Primeros pasos con Sergey un SSG minimalista - Video
PostHTML Static Site Starter - Alternativa
Mini SSG - Alternativa
Eleventy - Alternativa popular

Sinclair QL SCR Viewer

JavGuerra — Sat, 10 Feb 2024 00:00:00 GMT

Etiquetas: #web, #html, #javascript, #herramienta, #código, #retro, #sinclair ql, #software libre

El QL original tiene dos modos de pantalla, el modo de 256×256 pixels a 8 colores, y el modo de 512×256 pixels a 4 colores.

La aplicación Sinclair QL SCR Viewer es un HTML que permite cargar en el navegador un archivo de imagen en estos formatos ubicado en local o en remoto, mediante un botón INPUT, para mostrar su contenido sin que ocurran errores de CORS, y sin usar un servidor.

La imagen resultante puede descargarse en formato PNG con un tamaño de 1024×768 pixels.

Se escribió un artículo para QBlog con más información de cuál es la estructura de codificación de las pantallas en estos dos modos que puedes consultar.

El desarrollo se ha llevado a cabo a ratos, durante una semana, y se ha hecho uso de la IA Phind para consultas técnicas que han sido de gran utilidad. La aplicación acrtualmente está en la versión 1.0.

Hice uso de GitHub pages para alojar el desarrollo y también la aplicación que está disponible en:

Objetivo de la aplicación

Hagamos un poco de arqueología. En los tiempos del QL (años 80) era muy normal cargar y salvar a y desde memoria de pantalla las imágenes que querían mostrarse. Solía usarse para mantener al usuario atento con una pantalla colorida mientras terminaba la carga del programa desde algún medio de almacenamiento. ¡Esto podía demorar minutos!

Dado que las imágenes de pantalla del QL son datos con estructura, pero sin cabecera, es complicado poder visualizarlas en un PC si no se lleva a cabo una conversión, y eso es justamente lo que hace esta aplicación, además de permitir descargar la pantalla en formato PNG.

La idea era crear una herramienta que no dependiera de ningún sistema host, para que pudiera ser usada en cualquier sistema operativo actual. Emplear HTML + JavaScript era una opción interesante que permitía hacer uso de la aplicación en local, pero también ofrecer la aplicación como un servicio en línea.

Características

Maneja pantallas en modos 8 y 4.
Detecta automáticamente el modo de pantalla.
Permite el cambio de modo de la imagen cargada.
Funciona en local evitando errores de CORS.
Descarga la imagen visualizada en PNG.
Es responsive.
Es accesible.
Detecta errores de carga.

Info sobre el funcionamiento de la aplicación

El desarrollo inicialmente se centró en el parser o analizador sintáctico que debía «entender» los dos modos. Mediante un botón de carga y un evento asociado se accede al fichero, y luego se procesa.

Igualmente se asocian eventos al botón de cambiar de modo y al botón de descargar archivos. Estos eventos llaman a sus correspondientes funciones.

El código ha sido optimizado para poder funcionar en local sin que se generen errores de CORS (Cross-Origin Resource Sharing en inglés), una funcionalidad de los navegadores que ayudan a evitar problemas relacionados con la seguridad de la información.

Para visualizar correctamente la imagen se hace uso de una función que revisa los datos cargados y determina si la imagen está en modo 8 o en modo 4 y, si corresponde, cambia el modo de visualización.

A la hora de visualizar la imagen se han empelado dos canvas, uno donde se dibuja la imagen y otro que contiene este primer canvas que lo muestra en la escala adecuada para que se vea completo y proporcional en cualquier dispositivo. La proporción de la imagen es 4:3 y el tamaño de la imagen es de 1024x768.

Se ha elegido esta resolución porque es múltiplo de las resoluciones de ambos modos. De hecho, para representar correctamente las imágenes de los modos 8 y 4, un pixel de una imagen en modo 8 ocupará cuatro pixeles de ancho y tres de alto en la imagen resultante, y un pixel de una imagen en modo 4 ocupará dos píxeles de ancho y tres píxeles de alto en la imagen resultante.

La representación de color de los modos se realiza de la siguiente forma: el modo 8 usa cuatro bits por pixel para representar cada color (GFRB - Green, Flash, Red, Blue), con una profundidad de color de 8 (negro, azul, rojo, magenta, verde, cian, amarillo, blanco). Hay un bit que no se usa, que corresponde al flash (F) o parpadeo, una característica que tiene este ordenador. El modo 4 usa 2 bits por pixel (GR - Green, Reed), con una profundidad de color de 4 (negro, rojo, verde, blanco). Pues bien, para poder mostrar los colores en formato RGB, si un bit R, G o B está a cero, el valor de su componente RGB será 0, si es 1, el valor de su componente RGB será 255. En el modo 4, para obtener el valor de B, si los valores G y R están a 1, el valor B será 1, y el valor de su componente, 255, en caso contrario, será 0.

La pantalla del QL clásica tiene un tamaño de 32.768 bytes en ambos modos. Al cargar la imagen esto se comprueba, así como si el archivo está vacío o si no se ha podido acceder al medio.

Con el botón de intercambio de modo, podemos cambiar el modo de visualización de la imagen, caso que puede ser de utilidad si la detección automática no terminó de funcionar correctamente. Esto se hace sin necesidad de volver a acceder a la imagen, aprovechando los datos que están almacenados en el buffer.

La descarga en PNG permite obtener una imagen que se guardará con el formato nombre + sufijo + extensión. El nombre corresponde al nombre del archivo original. La extensión será _QL8 o _QL4 según corresponda, y la extensión será .png.

Para el desarrollo se ha tenido en cuenta el uso accesible de la aplicación, mediante la incorporación de etiquetas WAI-ARIA en el código.

Saber más

Visor para banco de preguntas

JavGuerra — Thu, 12 Mar 2026 00:00:00 GMT

Etiquetas: #javascript, #html, #css, #código, #herramienta

Recientemente me presenté a una certificación en mi trabajo, y contábamos con un banco de preguntas y respuestas para repasar. Es frecuente también que, en nuevos exámenes se incluyan preguntas de exámenes anteriores, por lo que decidi prepararme una aplicación para estudiar y aprender las respuestas a las preguntas. En esta entrada verás cómo funciona y podrás acceder al código para descargarlo.

El programa visor

El programa visor se ejecuta en un navegador web, y sirve para mostrar, de forma consecutiva o aleatoriamente, un conjunto de preguntas y respuestas para estudiarlas. Para ello:

Usa ← / → para navegar por las preguntas.
Pulsa S para mostrar/ocultar la solución.
Pulsa R para barajar las preguntas.
Recarga la página para ordenarlas.

Mediante este programa es posible repasar las respuestas a las preguntas de los exámenes si mantienes activada la función de mostrar solución, reteniendo de esta forma la respuesta correcta, o bien recorrer las preguntas para intentar acertar las respuestas y ver inmediatamente el resultado mostrando/ocultando la solución a la pregunta.

| .

El programa requiere que esté habilitado el soporte JavaScript en el navegador.

Eres libre de usarlo, modificarlo y redistribuirlo bajo las condiciones de la licencia es GPL v.3.

Estructura de los datos

Al abrir la aplicación, esta importa un fichero llamado bancoDePreguntas.js que contiene:

Cada una de las preguntas del banco de preguntas
Las respuestas posibles asociadas a cada pregunta
El número de respuesta correcta de entre las respuestas
El número de examen al que corresponde la pregunta (opcional)

La estructura de los datos es la siguiente:

window.bancoDePreguntas = [
  {
    "pregunta": "Texto de la pregunta",
    "opciones": [
      "Respuesta 1.",
      "Respuesta 2.",
      "Respuesta 3.",
      "Respuesta 4."
    ],
    "correcta": 0,
    "examen": 1
  },

  ...otras preguntas aquí...

]

El valor correcta indica la opción correcta de ente las opciones posibles. En el ejemplo, la primera opción es la 0 y la cuarta es la 3 (índice 0).

Cada pregunta debe tener, al menos, dos respuestas posibles.

Bancos de preguntas

Se pueden incorporar nuevas preguntas al banco de preguntas o también intercambiar el fichero bancoDePreguntas.js con otras temáticas de estudio, en ese caso:

El fichero bancoDePreguntas.js debe estar en la carpeta donde se encuentre el programa visor.html.
El nuevo banco de preguntas debe tener el nombre bancoDePreguntas.js, por lo que se deberá renombar el fichero del banco de preguntas actual.
El banco de preguntas debe tener al menos una pregunta con sus correspondientes opciones, e indicar la respuesta correcta.

ToDo

Como todo programa, puede ser mejorado. Aquí algunas propuestas:

Añadir un título, no obligatorio, al banco de preguntas en bancoDePreguntas.js.
Desordenar las posibles respuestas.
Añadir un selector interactivo de examen.
Opción para mantener o no la solución a las preguntas al cambiar de pregunta.
Opción para mostrar el resultado tras un tiempo determinado.
Añadir notas no obligatorias a las preguntas.
Opción para indicar que una pregunta no debe ser mostrada, aunque esté en el banco de preguntas.
Seleccionar uno o varios exámenes para mostrar, excluyendo el resto, o bien seleccionar exámenes a excluir, mostrando el resto.
Incluir un fichero de configuración para personalizar el visor.
Hoja de estilos externa para posibilitar el cambio de diseño del visor.

Consideración

Para su desarrollo básico se ha empleado la IA Copilot, y posteriormente ha sido modificado manualmente para añadir nuevas funcionalidades, para que sea accesible y para que se adapte a la ventana del dispositivo donde es abierto.

Enlaces

De Thunder a Postman

JavGuerra — Thu, 02 Apr 2026 00:00:00 GMT

Etiquetas: #api, #json, #herramienta, #código, #javascript, #node.js

Necesitaba migrar colecciones de API desde Thunder Client (una extensión de VS Code) a Bruno (cliente API), pero Bruno no importa directamente colecciones de Thunder Client. Sin embargo, Bruno sí importa colecciones de Postman. Así que creé este script que convierte cualquier colección exportada de Thunder Client al formato estándar de Postman Collection v2.1.0, permitiendo importarla en Bruno (o Postman) sin perder carpetas, autenticación, archivos ni estructura. En esta entrada te explico cómo funciona el script.

¿Qué es Bruno?

Bruno es un cliente de API de código abierto, offline y respetuoso con la privacidad. A diferencia de otras herramientas, no requiere cuenta, no sincroniza tus colecciones en la nube y todos los datos se guardan localmente en tu ordenador. Es rápido, ligero y perfecto para equipos que priorizan la seguridad y el control de sus propios archivos.

Planteamiento

Thunder Client exporta las colecciones en un formato JSON propio. Postman y Bruno usan otro formato diferente. El script actúa como un “traductor” que lee el JSON de Thunder Client, lo interpreta y genera un JSON válido para Postman, conservando:

Las peticiones (GET, POST, PUT, DELETE, etc.)
Las carpetas y subcarpetas
Los headers, autenticación y cuerpos de las peticiones
Los archivos adjuntos en formularios

Puedes descargar el script desde el:

Dificultades de la conversión

Estructura inconsistente del JSON de Thunder Client
Las exportaciones no siguen un formato fijo: las peticiones pueden estar en requests, en items, en tests o en arrays con nombres personalizados como requests_carpeta_auth. El script tuvo que aprender a buscar en cualquier lugar.

Carpetas anidadas sin un identificador claro
Thunder Client a veces usa parentId, otras veces _parentId, o simplemente anida objetos. Reconstruir la jerarquía a cualquier nivel requirió una función recursiva robusta.

Variables en URLs
Thunder Client permite {{variables}} en las URLs. Si intentas parsear la URL con new URL(), el script falla. Hubo que detectar y proteger estos casos.

Autenticación dispersa
La autenticación puede venir en un bloque auth o directamente en los headers. Además, hay que soportar Bearer, Basic y API Key (que puede ir en header o en query param).

Archivos en formdata
Los archivos no se representan como strings simples, sino como objetos con ruta o strings especiales (@/ruta). Hay que identificarlos y convertirlos al formato que espera Postman.

Headers con espacios
Algunos headers exportados tenían espacios al inicio o final del nombre, lo que provocaba errores en Bruno. Hubo que limpiarlos con trim().

BOM en archivos Windows
Los archivos exportados desde Windows incluyen una marca de orden de bytes (BOM) invisible que rompe el parseo JSON. Hubo que detectarla y eliminarla.

El script paso a paso

1. Lee el archivo de entrada

El script recibe como parámetro el archivo JSON exportado desde Thunder Client. Verifica que el archivo existe y que es un JSON válido. Si el archivo tiene BOM (marca de orden de bytes típica de Windows), lo elimina automáticamente para evitar errores.

2. Extrae todas las peticiones

Busca las peticiones en cualquier lugar del JSON: en la raíz, dentro de carpetas, en arrays con nombres personalizados, etc. No importa cómo haya estructurado Thunder Client la exportación.

3. Extrae la estructura de carpetas

Identifica las carpetas y subcarpetas, detectando sus identificadores (folderId, parentId) para reconstruir la jerarquía original, incluyendo subcarpetas anidadas a cualquier nivel.

4. Convierte cada petición individualmente

Para cada petición, traduce:

URL: La segmenta en partes (host, path, query params) para Bruno, pero respeta las variables {{variable}} sin intentar parsearlas.
Headers: Los mantiene y limpia espacios accidentales.
Autenticación: Soporta Bearer Token, Basic Auth y API Key (tanto en header como en query param).
Cuerpo (body): Maneja JSON (con resaltado de sintaxis), formularios multipart (con detección automática de archivos) y urlencoded.

5. Construye la colección Postman

Reconstruye la jerarquía completa usando recursividad: carpetas raíz, subcarpetas y peticiones en su lugar correspondiente. Si la exportación no incluye identificadores, usa un método alternativo como respaldo.

6. Guarda el resultado

Escribe el archivo JSON en el formato estándar de Postman Collection v2.1.0, listo para importar.

7. Muestra estadísticas

Al finalizar, informa sobre cuántas peticiones y carpetas se han convertido.

El resultado: características principales destacadas

Característica	Qué hace
Jerarquía completa	Respeta carpetas y subcarpetas anidadas a cualquier nivel
Búsqueda exhaustiva	Encuentra peticiones estén donde estén en el JSON
Autenticación múltiple	Bearer, Basic y API Key (header o query)
Soporte para archivos	Detecta y convierte campos de tipo file en formularios
Compatibilidad con Bruno	Segmenta el host y limpia rutas para importación perfecta
Resaltado JSON	Configura los cuerpos JSON para que se vean con colores
Manejo robusto	Valida archivos, limpia BOM, muestra errores claros
Sin dependencias	Usa solo módulos nativos de Node.js

Ejemplo de uso

node convertir-thunder-a-postman.js prueba-thunder.json coleccion-postman.json

Salida esperada:

✅ Conversión completada con éxito.
🚀 Fichero generado: coleccion-postman.json
📊 Peticiones: 24 | Carpetas: 7

Limitaciones del script

Variables de colección: No se importan automáticamente (deben recrearse a mano)
Scripts pre-request y tests: No se convierten (la API es compatible, pero hay que copiarlos manualmente)
Autenticación avanzada: OAuth 2.0, AWS Signature y Digest no están soportados

Enlaces

Acceder a BBDD Oracle con DBeaver

JavGuerra — Wed, 10 Jun 2026 00:00:00 GMT

Etiquetas: #herramienta, #servidor, #bbdd, #software libre, #oracle

DBeaver es una herramienta de gestión de bases de datos multiplataforma y de código abierto que permite conectarse y trabajar con distintos sistemas como Oracle, MySQL, PostgreSQL o SQL Server desde una única interfaz. Ofrece funcionalidades como ejecución de consultas SQL, exploración de estructuras, edición de datos y administración de conexiones, destacando por su flexibilidad y compatibilidad con múltiples drivers. En esta te explico cómo instalar los drivers originales de Oracle en DBeaver.

Descargando DBeaver

Puedes descargar la última versión de la aplicación desde:

Download DBeaver Community

Hay disponibles versiones para Windows, macOS y Linux.

Si vas a descargar la versión de Windows, dispones también de un fichero .zip que no requiere instalación en el sistema. Tan sólo descomprimes la carpeta en el lugar que decidas y la aplicación estará lista para usarse.

El problema

Elegí esta herramienta porque, como otras, me permite acceder a la BBDD desde mi entorno local, pero empleando los drivers originales de Oracle, con lo que consigo la máxima compatibilidad, con un software versátil y abierto. Pero al seguir los pasos para descargar automáticamente los drivers:

Abrir DBeaver.
Ir a Database → Driver Manager.
Buscar Oracle en la lista y seleccionarlo.
Pulsar Edit.
Ir a la pestaña Libraries.
Y pulsar Download/Update.

Obtuve un error. Ocurre que Oracle no permite la descarga automática directa en muchos casos, así que DBeaver falla.

La alternativa

Descargar los drivers directamente desde la página de Oracle:

Oracle Database JDBC driver and Companion Jars Downloads

Deberás seleccionar los drivers adecuados. En mi caso decidí descargar el fichero ojdbc11-full.tar.gz bajo el título Zipped JDBC driver (ojdbc11.jar) and Companion Jars que viene con todos los ficheros necesarios y está certificado para las versiones JDK 11 de Java (en mi caso) y versiones superiores.

Una vea descargado, hay que descomprimir el contenido en la carpeta que desees. También puedes descomprimirlo en la carpeta pluggins dentro de la carpeta de DBeaver.

Instalando los drivers

El siguiente paso es instalar los drivers en la aplicación. Por defecto, DBeaver carga cuatro de ellos.

ojdbc11.jar (la versión para mi JDK.) Obligatorio. El driver JDBC principal de Oracle que permite la conexión a BBDD.
orai18n.jar Recomendado. Es el soporte de internacionalización (i18n) que permite manejar caracteres especiales, codificaciones (UTF-8, etc.) y distintos idiomas correctamente.
xdb.jar Opcional. Librería para XML DB de Oracle si se trabaja con XML almacenado en la base de datos y se requieren funcionalidades avanzadas tipo XMLType.
xmlparserv2.jar Opcional. Parser XML de Oracle para procesar XML internamente y dar soporte a funcionalidades de xdb.jar.

Para ello debes estar en la pestaña libraries del driver Oracle en la en la opción Driver manager del menú Database. Ver pasos para llegar más arriba. Y una vez allí:

Pulsamos Add File, seleccionamos cada fichero mencionado, y le damos a Open.
Repetimos la opción por cada fichero.
Una vez tenemos todos los drivers abiertos, ya no necesitamos los drivers que aparecen por defecto. Los quitamos con Delete para que no den problemas.

Conectar a la BBDD

Ahora ya podemos ver si todo ha ido bien.

En el menú Database, hacemos clic en la opción New connection e introducimos los datos de la conexión. La nueva conexión a BBDD aparecerá en el espacio de conexiones de la izquierda.

TIPs

Podemos arrastrar el nombre de la BBDD a Bookmarks (Favoritos) en la lista de abajo, a la izquierda, para poder acceder de forma fácil a ella.

También podemos poner DBeaver en español. Para esto iremos a Windows, luego Preferences, y en la opción User Interface elegiremos el idioma español.

Para más información sobre el uso de DBeaver, puedes consultar la documentación en el Wiki:

About DBeaver

Enlaces

Oracle SQL Literal Converter

JavGuerra — Wed, 09 Sep 2026 00:00:00 GMT

Etiquetas: #herramienta, #sql, #oracle, #html, #css, #javascript, #node.js, #responsive, #web, #bbdd, #código

Cuando trabajas con bases de datos Oracle a través de herramientas de administración como SQL*Plus, SQL Developer, Toad o PL/SQL Developer, es casi inevitable chocarse antes o después con el mismo obstáculo frustrante: la gestión de literales de texto con caracteres especiales.

Quien haya ejecutado alguna vez un INSERT o UPDATE con un texto como “Ibáñez & Asociados” sabrá exactamente de qué hablo. Por un lado, el símbolo del ampersand (&) hace que SQL*Plus se detenga pidiendo interactiva y molestamente el valor para una “variable de sustitución” &Asociados. Por otro lado, los caracteres con acentos, la ñ, los signos de apertura (¿, ¡) o los símbolos de moneda suelen corromperse si el cliente SQL y la base de datos no comparten exactamente la misma configuración NLS o codificación de caracteres.

Para solucionar este dolor de cabeza, he desarrollado OSQLC (Oracle SQL Literal Converter).

Puedes descargar el script o acceder a la página web desde el:

También puedes acceder directamente al conversor web desde: Oracle SQL Literal Converter

¿Cómo funciona la sanitización?

La solución técnica más limpia en Oracle consiste en aislar los caracteres problemáticos y reemplazarlos por su función nativa chr(N) equivalente (basada en el juego de caracteres ISO-8859-1 / Latin-1), concatenándolos con el resto de la cadena.

OSQLC analiza el script SQL y realiza esta transformación de forma transparente. Por ejemplo, convierte esta sentencia propensa a errores:

INSERT INTO clientes (nombre, direccion) 
VALUES ('Ibáñez & Asociados', 'C/ Ramón y Cajal, nº 45');

En este otro código, seguro y portátil para cualquier entorno Oracle:

INSERT INTO clientes (nombre, direccion) 
VALUES ('Ib' || chr(225) || chr(241) || 'ez ' || chr(38) || ' Asociados', 'C/ Ram' || chr(243) || 'n y Cajal, n' || chr(186) || ' 45');

Además, el motor de procesado de OSQLC incluye características avanzadas:

Respeto estricto de comentarios: Preserva intactos los comentarios de línea (–) y de bloque (/* … */) sin alterar su contenido.
Soporte para Cita Alternativa (q’…’): Procesa correctamente la sintaxis Alternative Quoting Mechanism de Oracle.
Control de saltos de línea: Convierte los retornos de carro (\n y \r) en chr(10) y chr(13), evitando que se rompa la sintaxis en literales multilínea.

Dos versiones para cada tipo de flujo de trabajo

Para hacer la herramienta lo más versátil posible, la he estructurado en dos modalidades complementarias:

1. Versión CLI (Node.js)

Pensada para desarrolladores, automatizaciones o integración en canalizaciones CI/CD y scripts de despliegue. Te permite procesar archivos .sql directamente desde la terminal con un comando sencillo:

node osqlc.js mi_script.sql script_sanitizado.sql

2. Versión Web (HTML/JS Standalone)

Diseñada para un uso diario, rápido y visual desde cualquier navegador. Se trata de una interfaz web con estilo oscuro que funciona de forma 100% local (client-side).

No requiere servidores, no instala nada y garantiza la privacidad total, ya que el código SQL jamás sale de tu navegador.

Entre sus características destacan:

Drag & Drop: Arrastra directamente tus archivos .sql a la zona de carga.
Validación inteligente: Verifica que la extensión sea .sql o .txt y analiza el contenido en busca de palabras clave de SQL (como INSERT, SELECT, UPDATE), lanzando avisos si detecta un archivo incorrecto por error.
Edición y descarga directa: Puedes pegar código a mano o descargar el archivo convertido con un solo clic.

Ventajas

Con OSQLC, lo que antes requería reemplazar caracteres a mano de forma tediosa o lidiar con parámetros de sesión como SET DEFINE OFF, ahora se resuelve en un instante. Ya sea automatizando despliegues en la consola o arrastrando un archivo en la web, la sanitización queda cubierta de punta a punta.

¿Te has encontrado con este problema en Oracle alguna vez? ¡Espero que la herramienta te sea tan útil en tu día a día como a mí!

Enlaces

Conoce todas las características de OSQLC:

Sinclair QL Planet

JavGuerra — Mon, 14 Sep 2026 00:00:00 GMT

Etiquetas: #herramienta, #retro, #sinclair ql

En el mundo de la informática retro, la información sobre un sistema tan de nicho pero apasionante como el Sinclair QL suele estar dispersa en múltiples blogs, foros y sitios personales. Para intentar solucionar esto y centralizar las novedades del universo QL en un solo lugar, he puesto en marcha un Planet (agregador de feeds) con un diseño marcadamente retro. En esta entrada os cuento cómo funciona por dentro y los pasos que he seguido para implementarlo y desplegarlo.

¿Qué es Pluto?

Pluto es un motor de feed estático y agregador de noticias en línea de código abierto que recopila artículos desde múltiples fuentes RSS o Atom para combinarlos en una única página web personalizada. Utiliza Ruby porque se beneficia de la flexibilidad de su sintaxis y del maduro ecosistema de procesamiento de textos y plantillas ERB (Embedded Ruby) característico de este lenguaje, lo que permite transformar datos estructurados en sitios web de forma limpia e intuitiva. En el entorno de Ruby, las gemas (gems) son paquetes de software o librerías independientes reusables (similares a los paquetes de npm en JavaScript o pip en Python) que permiten añadir funcionalidades específicas a una aplicación —como en el caso de la propia gema pluto, que encapsula todas las herramientas necesarias para descargar, parsear y compilar tus feeds automáticamente.

¿Cómo funciona el agregador?

El sitio opera como un generador de sitios estáticos (SSG) alimentado por fuentes web. No requiere un servidor dinámico con base de datos tradicional, PHP o Node.js ejecutándose continuamente. Así funciona:

Recopilación: Usa Pluto, diseñado para descargar feeds XML de las fuentes suscritas (blogs en WordPress, Blogger, subforos de phpBB, etc.) y unificarlos en una base de datos local SQLite temporal.
Filtrado dinámico: A través de plantillas ERB, se procesa el contenido capturado:
- Elimina ruido (por ejemplo, descartando respuestas repetitivas Re: en foros como phpBB para mostrar solo temas nuevos).
- Ajusta los límites de visualización (hasta 50 artículos recientes).
- Formatea las fechas y horas en formato GMT relativo y absoluto.
Genera HTML/CSS: Se compila un único archivo index.html optimizado, con soporte para modo oscuro/claro basado en las preferencias del sistema y estilos CSS retro.
Genera RSS/Atom: Se genera un feed RSS/Atom con los artículos recientes a partir de sus correspondientes plantillas.
Despliegue automatizado (GitHub Actions): Un workflow programado ejecuta el proceso de generación periódicamente y publica el resultado directo en GitHub Pages.

Puedes acceder a y a su reposirorio en GitHub.

Pasos para ponerlo en funcionamiento

1. Definición de fuentes (planet.ini)

El primer paso fue crear el archivo de configuración donde se listan las fuentes a las que el planeta está suscrito. Aquí podemos incluir blogs completos o filtrar por etiquetas/subforos específicos.

2. Personalización de la plantilla (planet.starter.html.erb)

Para lograr la estética CRT deseada y solucionar limitaciones de algunos feeds, adaptamos la plantilla ERB:

Sencillez en los metadatos: Dado que muchos feeds no estandarizan el autor de cada entrada, simplificamos los metadatos para mostrar la hora de publicación y el tiempo transcurrido (14:30 GMT (hace 2 horas)).
Filtro anti-respuestas para foros: Como los feeds de phpBB suelen devolver todas las respuestas cuando el servidor tiene deshabilitado el modo de solo temas, añadimos una condición Ruby para saltar cualquier publicación cuyo título contenga Re:.

  <% next if item.title.downcase.include?('re:') %>

Límite de artículos: Ajustamos el bucle a .limit(100) al consultar la base de datos y un contador para mostrar un máximo de 50 artículos principales limpios en portada.

3. Automatización continua con GitHub Actions

Para evitar tener que compilar el sitio a mano en local cada vez que hay noticias, creo un flujo de trabajo en .github/workflows/static.yml que:

Se ejecuta periódicamente (por ejemplo, cada pocas horas mediante un cron de GitHub).
Instala Ruby y la gema pluto.
Ejecuta el comando de compilación: pluto build planet.ini -t planet-starter.
Sube el directorio generado a la rama de GitHub Pages.

Resultado final

El resultado es un agregador ultrarrápido, ligero, de bajo mantenimiento y con una estética que evoca la era dorada de la microinformática de los 80. Todo el contenido relevante del Sinclair QL se actualiza solo y está disponible a un par de clics.