Códice | Entradas sobre «web»

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

El cadáver exquisito

JavGuerra — Sun, 15 May 2022 00:00:00 GMT

Etiquetas: #web, #html, #css, #javascript, #arte, #meiac, #juego

Imagen: Victor Brauner, André Bretón, Jacques Hérold e Yves Tanguy (1935)

«El cadáver / exquisito / beberá / el vino / nuevo»

Alrededor de los años veinte, los pintores surrealistas inventaron un juego para «fabricar» figuras fantásticas. En realidad, era un derivado de un juego que ya se hacía con las palabras y que consistía en componer una frase entre varias personas: uno de los participantes en el juego escribe la primera palabra de una frase y luego pliega la hoja de forma que su palabra quede oculta; el que está a su lado hace lo mismo, pasa la hoja a su vecino y así sucesivamente…

En Francia, el juego con las palabras se llama «Le cadavre exquis» porque la primera frase escrita con este sistema rezaba: «El cadáver / exquisito / beberá / el vino / nuevo».

En lugar de jugar con palabras, los pintores surrealistas utilizaron las partes de una figura: el primer jugador dibuja la cabeza; el segundo, el cuerpo; el tercero, las piernas; y el último, los pies. Basta con indicar, sobre la línea plegada, los puntos donde se dejó el dibujo escondido. Con este sistema es posible dibujar personajes fantásticos, animales y plantas… ¡de otro mundo!

Tomando esta idea como referencia, en un «Taller de experimentación artística por ordenador» que impartí para el Museo Extremeño e Iberoamericano de Arte Contemporáneo (MEIAC) en 1997, llevamos a cabo una versión digital de dicho juego. Aquí el resultado:

Visualmente, el resultado no está a la altura de los estándares de hoy día. Tampoco la codificación de la página es un prodigio, pero su código guarda algo interesante que ahora contaré.

La mecánica del juego es sencilla. Los alumnos hicieron un total de diez (10) dibujos completos de sus personajes fantásticos imaginarios, de cabeza a pies. Estas imágenes fueron escaneadas, divididas en tres partes y almacenadas en tres carpetas distintas: «arriba», «medio» y «abajo» todas con el mismo tamaño. Cada imagen fue numerada como image0.jpg a image9.jpg, y todas ellas usaban los mismos puntos de corte para la cabeza, el cuerpo y las extremidades inferiores.

La página elige al azar una imagen de cada una de las tres carpetas mencionadas, mostrando una composición de ellas totalmente nueva e inesperada. ¡Ahora es el ordenador el que juega al cadáver exquisito!

¿Como funciona?

Esta es la parte sorprendente. En aquellos días los navegadores soportaban JavaScript limitadamente, y las versiones del lenguaje no estaban tan avanzadas. No se disponía de la función matemática Math.random() y el acceso al DOM estaba en pañales. Pero con el siguiente código que me ayudó a escribir en su momento un buen amigo, se hizo posible.

var valor=9;
var fecha=new Date();
var mili=fecha.getTime();	    
var segundo=fecha.getSeconds();
var minuto=fecha.getMinutes();	    
var hora=fecha.getHours();
var numero;

numero=Math.round((mili/segundo)%valor);
document.write('<img src="arriba/image'+numero+'.jpg" width="250" height="130"><br>');
	    
numero=Math.round((mili/minuto)%valor);
document.write('<img src="medio/image'+numero+'.jpg" width="250" height="130"><br>');

numero=Math.round((mili/hora)%valor);
document.write('<img src="abajo/image'+numero+'.jpg" width="250" height="130"><br>');

Para mostrar imágenes al azar, usé los datos de fecha y hora para generar valores pseudo-aleatorios en un rango de enteros entre 0 y 9. Y para poner las imágenes emplee document.write() pasándole como parámetro el código HTML que mostraría cada una de las tres imágenes aleatorias. Para conseguir el número de imagen empleé Math.round() con la fórmula que puede verse en el código. Con dichas operaciones, cada vez que se genera la página se obtienen valores lo suficientemente distintos como para conseguir resultados que no se repiten.

El código JavaScript se inserta en la página en la posición donde se deben mostrar las imágenes, de esa forma el document.write() no requiere localizar el elemento dentro del cual poner las imágenes. El código ya está ahí.

Para generar un nuevo «cadáver exquisito» hacemos clic en el botón «Pulse» que recargará la página, generando un nuevo resultado, pues el momento en el tiempo entre la primera composición de imágenes y la nueva es distinto.

Cronómetro en JavaScript

JavGuerra — Sun, 22 May 2022 00:00:00 GMT

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

Ejercicio de programación realizado en el bootcamp Full Stack Web Developer que estoy haciendo.

Enunciado

Diseñaremos un HTML que represente un cronómetro con el formato que queramos, por ejemplo: 00:00.

Añadiremos los botones:

Iniciar: Activará el cronómetro, incrementando el contador cada (1) segundo.

Parar: Detiene el cronómetro.

Continuar: Vuelve a activar el cronómetro.

Contar hasta 10: Inicia el cronómetro y lo para a los 10 segundos (y para el crono).

Guardar: Guarda el estado del crono en localStorage en el momento en que es pulsado (sin parar el crono).

Ver tiempos: Mostrará el listado de tiempos divido en sesiones que se ha guardado en localStorage.

Queremos guardar en local Storage un conjunto de listados de tiempos divididos por sesiones, si es la primera vez que el usuario accede a la página web, la sesión será la número 1, y así sucesivamente.

Añadiremos los botones pertinentes para borrar todos los datos de local Storage o solo los datos de una sesión en concreto.

Resolución

Este ejercicio es un compendio de todo lo visto hasta ahora en el Bootcamp.

La aplicación que he desarrollado cumple con el enunciado, haciendo uso de las funciones de manejo de tiempos de JavaScript (setInterval, setTimeout, clearInterval), y las funciones de manejo de localStorage (.setItem(), .getItem(), .clear()…), e incluye algunas mejoras:

Operativa de la aplicación:

Los botones del cronómetro se activan y desactivan según sean necesarios en cada función de la aplicación. Se recomienda leer mi entrada sobre lógica interactiva.
Implementa cuenta regresiva en el contador hasta 10.
Al guardar un cronometraje, se muestra la lista de los cronometrajes de la sesión actual. Podemos listar también los cronometrajes de todas las sesiones, incluida la actual. El listado mostrará la sesión, el número del cronometraje dentro de esta sesión, el tiempo guardado (minutos y segundos), la fecha y hora, y el botón de borrar.
Al borrar una sesión desde la lista de sesiones, si no se trata de la sesión actual, la aplicación reordena las sesiones para no dejar huecos entre ellas. Si tenemos cinco sesiones, y borramos la sesión tres, la sesión cuatro pasará a ser la tres, y la sesión cinco pasará a ser la cuatro.

Desde el punto de vista de la usabilidad:

Web adaptable según el dispositivo.
Cuidado aspecto visual empleando CSS.
El formateo básico se realiza mediante una clase CSS llamada wysiwyg.css de la que hablé en este post.
Usa Bootstrap Icons y fuente personalizada llamada Digit (sin info del autor).
Es accesible, empleando etiquetas descriptivas y etiquetas WAI-ARIA para señalar las regiones de la web que cambian durante la ejecución de la aplicación.
Ha sido probada en los navegadores web Firefox y Chrome.

Problemas resueltos:

La aplicación emplea una serie de funciones para activar y desactivar los botones e incluir las etiquetas WAI-ARIA correspondientes.

Con dos variables controlo los eventos del cronómetro (cronometro) y del final de la cuenta atrás (parada10s).

La variable tiempo guarda el tiempo en segundos que se llevan contabilizados en el cronometraje en cada momento.

En sesion guardo los cronometrajes de la sesión actual. Es un vector o Array de objetos, donde cada objeto es un cronometraje, que se guarda en el formato:

{'segundos': tiempo, 'fechaHora': fechaHora}

En numSesion guardo el número de sesión actual. Las sesiones se guardan en localStorage con el nombre que corresponde a su número de orden.

Uso una sesión o clave guardada en localStorage con el nombre ultSesion que contiene el número de orden de la última sesión guardada. De esta forma puedo consultarla para saber si hay sesiones guardadas, y cuál es el número de orden de la última que se guardó.

A la hora de guardar y recuperar las sesiones guardadas en localStorage creí erróneamente que estas se guardaban en orden descendiente, que podía recorrer la lista de claves de localStorage con un bucle, como si se tratase de una pila de datos «LIFO» (Last Input - First Output), de tal forma que la última clave que añadimos a localStorage sería la primera en la lista, y su número de orden sería 0. Así, si recorría la lista con clave = localStorage.key(i), obtendría primero la clave 0, la última, luego la 1, la penúltima, la 2, la antepenúltima, etc… pero esto no funciona siempre así.

Parece que no podemos confiar en este orden, por lo que las sesiones deben guardarse y recuperarse sin tener en cuenta la posición que ocupan en localStorage, lo que me obligó a reescribir la función historLocal() (listado del historial) y las «delicadas» funciones borraClave(clave) (borra una sesión) y ordenaClaves(clave, numSesiones) (ordena las sesiones cuando hay un hueco) que, sinceramente, me llevaron más tiempo del que merecían hasta que volvieron a estar perfectamente ajustadas.

Otra cuestión que me sorprendió fue la del manejo de los tiempos en los intervalos empleados en la cuenta regresiva (Contar hasta 10). Firefox y Chrome no funcionan igual. Si contamos desde 10 segundos hasta 0, realmente hay 11 segundos. Pues bien, mientras en Firefox esto funcionaba bien empleando parada10s = setTimeout( parateCrono, 11000); (parateCrono es una función que para el cronómetro) en Chrome el resultado final de la cuenta regresiva, en vez de 0 es -1, así que debí crear la siguiente función para corregir esto:

function limite(miliSeg) {
    return navigator.userAgent.indexOf("Firefox") > -1 ? miliSeg + 1000 : miliSeg;
}

Que comprueba si estamos usando Firefox, entonces devuelve el valor 11000 (11 segundos), sino devuelve 10000 (10 segundos), para luego poder usarlo de esta forma:

parada10s = setTimeout( parateCrono, limite(10000));

Los iconos empleados en los botones inicialmente eran confusos. Con la revisión del compañero del bootcamp Francesc cambié la combinación de iconos para hacer la aplicación más usable.

Por último, señalar que la aplicación maneja sólo minutos y segundos, hasta un máximo de 3.600 segundos (de 0 a 3.599). Inspirado por la presentación del compañero del bootcamp Borja, incluí el siguiente código dentro de la función que muestra el cronómetro:

if (minSeg.minutos == 59 && minSeg.segundos == 59) {
    parateCrono();
    btnInactivo(btnContin, true);
}

Esto para el cronómetro y pone inactivo el botón de continuar cuando la aplicación llega a 59 minutos y 59 segundos.

Enlaces

Ver el código fuente

Referencias:

Mosaico JS

JavGuerra — Mon, 27 Jun 2022 00:00:00 GMT

Etiquetas: #web, #código, #css, #html, #javascript, #dom, #juego

Ejercicio que combina lógica de programación en JavaScript, y el uso de eventos asociados a los elementos del DOM que consiste en elegir un pincel y pintar las celdas de una tabla para construir un mosaico de colores.

El juego

La página muestra ocho botones redondos de otros tantos colores de una gama que va de los colores oscuros, empezando por el negro, a los colores claros, terminando con el blanco. Al hacer clic en cada botón elegimos el color deseado.

Debajo de estos botones está la tabla de 16x16 celdas sobre las que vamos a pintar con el color seleccionado. Al hacer clic sobre una celda, esta cambia su color de fondo al nuevo color. Podemos componer dibujos con esta técnica como el que se ve en la imagen.

Para borrar emplearemos el color blanco, ya que este es el color por defecto de cada celda de la tabla, o bien podemos corregir errores pintando con otro color distinto.

Para borrar todo el dibujo deberemos recargar la página. Dada la simplicidad del ejemplo, no se han implementado opciones para guardar y cargar los mosaicos creados.

Lo básico, el HTML

El código html es una fuente de información para la aplicación que voy a desarrollar.

<body>
    <header>
        <h1><img id="logo" src="assets/img/mosaico.png" alt="logo" />Mosaico</h1>
        <small>¡Elije un color y haz clic en el mosaico para pintar!</small>
        <nav>
            <button id="btnNegro" class="negro"></button>
            <button id="btnAzul"  class="azul" ></button>
            <button id="btnRojo"  class="rojo" ></button>
            <button id="btnMagen" class="magen"></button>
            <button id="btnVerde" class="verde"></button>
            <button id="btnCian"  class="cian" ></button>
            <button id="btnAmari" class="amari"></button>
            <button id="btnBlanc" class="blanc"></button>
        </nav>
    </header>

    <main></main>
</body>

Dentro de <nav> indico el identificador id y la clase class que definirá el color de cada botón <button>. Esta clase me va a servir para simplificar la codificación del juego, ya que, como veremos más adelante, voy a aprovechar esta información para seleccionar el color del pincel con el que pintaremos, es decir, cuando hagamos clic en cada uno de los botones, dispararemos un evento que me permitirá ejecutar una función que leerá la clase asociada a este. Como la clase indica el color del botón, podemos usarla para saber qué color hemos elegido. Al pulsar el botón rojo estaremos obteniendo la clase .rojo que luego podemos aplicar en las celdas del mosaico.

Por supuesto, en el CSS cada clase definirá el color, por ejemplo:

.rojo {
  background-color: #f00;
}

Sencillo, ¿verdad? Veamos cómo funciona.

El programa en JS

Básicamente el programa hará lo siguiente:

Asociará un evento que llama a la función color() en cada uno de los ocho botones para poder elegir el color con el que pintar.
Dibujará una tabla con las dimensiones deseadas (inicialmente 16x16, pero se puede cambiar), y a cada celda de la tabla le asociará un evento que llama a la función pinta() cuya tarea es cambiar el color de la celda sobre la que se ha echo clic.
Inicializará las dos variables que usaremos en el juego.

Esto último paso es simple:

let btnSel = el('#btnNegro');
let pincel = btnSel.className;

Estas variables servirán para:

Variable	Uso
`btnSel`	Contendrá la referencia al botón que hemos seleccionado. Esto nos permitirá mostrar el botón como seleccionado y desmarcar el botón cuando cambiemos nuestra selección por otro botón seleccionado.
`pincel`	Contendrá la clase relativa al color seleccionado que hemos obtenido al hacer clic en alguno de los botones de la barra de navegación.

Asociando el evento de la función color

Para que los ocho botones de colores funcionen, debo asociarles un evento de tal forma que, al hacer clic en ellos, realicen su función, nunca mejor dicho:

el('#btnNegro').onclick = color;
el('#btnAzul' ).onclick = color;
el('#btnRojo' ).onclick = color;
el('#btnMagen').onclick = color;
el('#btnVerde').onclick = color;
el('#btnCian' ).onclick = color;
el('#btnAmari').onclick = color;
el('#btnBlanc').onclick = color;

La función el() es una forma de abreviar:

function el(el) { return document.querySelector(el); }

Como se aprecia, lo que hace la función el() es devolver un elemento de nuestro HTML tomando como referencia su selector, usando para ello la función querySelector();

Como ya tenemos el elemento HTML que corresponde a cada botón, podemos asignarle un escuchador de evento con .onclick que llame a la función color() al hacer click en ese botón.

¿Y qué hace la función color()?

function color() {
    btnSel.classList.remove('seleccion');
    btnSel = this;
    pincel = this.className;
    btnSel.classList.add('seleccion');
}

Primeramente elimina la clase .seleccion que es la encargada de dar el efecto hundido del botón seleccionado (btnSel).

Seguidamente obtiene la referencia del botón que acabamos de seleccionar haciendo uso de this. Aquí this hace referencia al objeto que llama a la función, es decir, al botón que lanzó el evento. Ahora ya sabemos cual es el botón sobre el que hemos hecho clic.

Para obtener el color del pincel con el que vamos a pintar, leo la clase asociada al botón con .className. Esta clase, como vimos cuando creamos el HTML, es la encargada de definir el color de fondo del botón, y es la que usaremos para pintar las celdas a partir de ahora cuando llamemos a la función pinta().

Para indicar visualmente al usuario el color que ha seleccionado, ponemos la clase .seleccion en el nuevo botón.

En resumen, como sabemos cual fue el botón que seleccionamos anteriormente, quitamos la clase que indica visualmente que el botón está seleccionado, porque ya ha dejado de estarlo, asociamos a la variable btnSel el nuevo botón, y a la variable pincel la clase asociada al botón que indica su color, y finalmente ponemos la marca de selección en el nuevo botón seleccionado.

Dibujando la tabla con las celdas sobre las que pintaremos

Creo la tabla y la conecto al DOM mediante:

el('main').appendChild( creaTabla(numCols, numFils) );

La función creaTabla() recibe dos parámetros que indican su altura y anchura en celdas. Si lo deseamos, podemos cambiar el valor de estas variables para hacer que el mosaico tenga otras dimensiones cambiando los valores en:

const numCols = 16;
const numFils = 16;

Esta función creaTabla() no destaca especialmente si no es por dos cosas:

function creaTabla(numCols, numFils) {
    let table, tbody, tr, td;
    tbody = creaEl('tbody');
    for (let i = 1; i <= numFils; i++) {
        tr = creaEl('tr');
        for (let i = 1; i <= numCols; i++) {
            td = creaEl('td');
            td.classList.add('blanc');
            td.onclick = pinta; // ¡Magia!
            tr.appendChild(td);
        }
        tbody.appendChild(tr);
    }
    table = creaEl('table');
    table.appendChild(tbody);
    return table;
}

Hago uso de la función .creaEl() para acortar la instrucción encargada de la creación de elementos del DOM:

function creaEl(el) { return document.createElement(el); }

Cada vez que creo un <td> (celda) le asigno un evento que llama a la función pinta():

    td = creaEl('td');
    td.classList.add('blanc');
    td.onclick = pinta; // ¡Magia!

Estas tres líneas dentro del bucle anidado crean las celdas de cada fila, les asignan la clase .blanc que pone el fondo de las celdas de color blanco por defecto, y luego asocia la función pinta() al evento .onclick de cada celda de forma que al hacer click en ella su fondo se pintará del color que indique pincel:

function pinta() { this.className = pincel; }

De nuevo aquí this es fundamental para poder trabajar con la celda seleccionada, que es la que lanzó el evento. Al hacer clic en la celda, cambiamos de color esa misma celda. Así de simple.

En resumen

Esto sería todo. Resumiendo la operativa de la aplicación, partiendo de un HTML con las clases que indican el color de cada uno de los botones del juego que sirven para seleccionar el color, asocio un evento a cada botón para saber el color del pincel con el que vamos a pintar las celdas. Inicialmente, el color seleccionado es el negro, y el botón seleccionado es el que corresponde a ese color.

Al hacer clic en cada celda, hacemos que el fondo de esta cambie al color seleccionado.

Puedes jugar al juego y ver el código completo en el repositorio haciendo clic en los siguientes enlaces.

¿Te animas a hacer tus propios dibujos pixel art?

Enlaces

Repositorio JavGuerra/MosaicoJS

Mastermind en PHP

JavGuerra — Sat, 06 Aug 2022 00:00:00 GMT

Etiquetas: #web, #código, #php, #juego, #formularios

Este juego interactúa con el usuario y pasa parámetros mediante POST a través de un formulario. El reto es hacerlo de tal forma que esos parámetros sean recibidos y procesados en la misma página que los envió, por lo tanto, la página debe contener toda la operativa de los distintos escenarios posibles del juego: al iniciar el juego, tras una tirada, si se producen errores, si se termina el juego… Veamos cómo.

El juego

Mastermind es un juego simple. Se trata de adivinar un número de 4 dígitos distintos (no repetidos). Cada dígito tendrá un valor entre 0 y 9. A través de un formulario, introducimos los cuatro dígitos. Al enviar el formulario recibiremos la respuesta de cuantos dígitos hemos acertado, o si hemos acertado el número completo con los dígitos en su orden correcto.

Si un dígito está en su posición correcta dentro del número, se contabilizará como un «muerto». Con cuatro muertos ganamos el juego, es decir, habremos acertado el número.

Si un dígito forma parte del número de cuatro dígitos, pero su posición en él no es la correcta, se contabilizará como un «herido». Esto nos permitirá sospechar que vamos por buen camino, y podremos probar nuevas combinaciones.

Para enviar el formulario debemos completar las casillas con los cuatro dígitos.

Para iniciar otra partida, ya sea a mitad de jugada o tras haber ganado, es suficiente con recargar la página sin enviar el formulario.

Escenarios

Dado que tenemos un juego en una SPA (Simple Page Aplication), la lógica del juego tiene que estar contenida en ella al completo, y mediante condicionales, actuar de una forma u otra según sea el caso. Estos casos son:

La primera vez que accedemos a la página del juego.
La recepción de datos y comprobaciones tras una tirada.
Cuando el juego ha terminado: Se ha averiguado el número.
Enviar datos y comprobar si hay errores en el formulario.

Puedes ver el código del juego completo al final de esta entrada.

Veamos cada escenario y su correspondiente código. Obviaré en esta entrada los estilos CSS que son incluidos en el head de la página. Pero antes, vamos con el formulario.

Formulario

El formulario es simple. Emplea una serie de campos ocultos, que veremos después, para pasar la información recabada del formulario (los 4 dígitos) y de las tiradas anteriores en el juego. Su estructura será:

<form name="input" action="<?php echo $_SERVER['PHP_SELF'];?>" method="post">
    // Campos ocultos
    // Campos de formulario (4 input)
    // Comprobaciones de error de cada campo input
    <input type="submit" name="enviar" class="boton" value="Enviar" />
</form>

Con <?php echo $_SERVER['PHP_SELF'];?> indico la dirección donde debo enviar (mediante POST) el resultado del formulario, en este caso la misma página (PHP_SELF), esté en la ruta que esté.

Con name="enviar" podré indicar si estoy enviando los datos del formulario. Empleando el botón submit tengo esa garantía, ya que es el medio de que dispongo (el botón) para hacer justamente el envío.

1. Empezando a jugar

Empiezo averiguando si he recibido algún dato del formulario. Si no es así es que estamos ante la primera tirada.

$enviado = isset($_POST['enviar']);
$muertos = 0;
$mostrarNum = true;

if ($enviado) {
    // Procesar los datos recibidos del formulario
} else {
    // Generar un número al azar de cuatro dígitos no repetidos
    $numero = range(0, 9);
    shuffle($numero);
    $numero = array_slice($numero, 0, 4);
    $numero = implode($numero);
}

Con isset($_POST['enviar']) obtengo true si he recibido datos del formulario (el valor asociado al botón submit) o false en caso contrario. La variable $enviado contendrá ese valor booleano que determinará que rumbo tomará el programa. $_POST['enviar'] nos lo dirá si contiene el valor "Enviar" recibido del formulario (value="Enviar") o no.

Inicializo la variable $muertos que contendrá el número de dígitos acertados en su posición correcta. Al principio será 0, porque aún no hay aciertos. Usaré esta variable como condicional más adelante.

La variable $mostrarNum es un swich que me provee de una característica del juego, la de mostrar o no un interrogante en pantalla. Al pasar con el ratón sobre este interrogante puedo comprobar el número que estoy intentando acertar. Esta opción se implementó para hacer comprobaciones durante el desarrollo, pero ha quedado como una característica. Pon la variable en false si sientes que vas a tener la tentación de hacer trampas…

Esta ayuda se mostrará en el programa con la siguiente línea:

if ($mostrarNum) echo "<dfn id='numero' title='$numero'>?</dfn>" . "\n\n";

Con la comprobación if ($enviado), como decía, discrimino si debo procesar los datos recibidos del formulario o por el contrario debo inicializar el juego. El número de cuatro dígitos a averiguar es lo que necesito en este caso. Para obtenerlo al azar, empleo lo siguiente:

$numero = range(0, 9);
shuffle($numero);
$numero = array_slice($numero, 0, 4);
$numero = implode($numero);

En el arreglo $numero introduzco los dígitos del 0 al 9 con range(), y luego los mezclo (altero su posición en el arreglo) con shuffle(). Con array_slice() recorto el arreglo para que contenga sólo los cuatro primeros elementos, osea, los cuatro dígitos al azar. Finalmente, con implode() concateno esos cuatro elementos en uno, siendo ahora $numero una cadena de cuatro caracteres.

Podría haber obtenido un número al azar entre 0 y 9999 con rand() o incluso con mt_rand(), pero esto conllevaría conversiones de número a cadena, rellenado de 0 a la izquierda si el número obtenido al azar es menor que 1000, y comprobar que cada dígito sea distinto. Esta solución propuesta es más divertida e imaginativa, ¿verdad?

2. Recibiendo datos del formulario

Desde el formulario recibimos los siguientes valores:

El número que estamos intentando averiguar para poder hacer comprobaciones
Los cuatro dígitos que hemos introducido en el formulario.
El arreglo con las tiradas que hemos realizado hasta ahora. En la primera tirada no contendrá nada.

Veamos cómo recuperar y procesar los datos recibidos:

if ($enviado) {
    // Recuperar número
    if (isset($_POST['numero'])) $numero = $_POST['numero'];
    // Recuperar dígitos
    if (isset($_POST['d1'])) $d1 = $_POST['d1'];
    if (isset($_POST['d2'])) $d2 = $_POST['d2'];
    if (isset($_POST['d3'])) $d3 = $_POST['d3'];
    if (isset($_POST['d4'])) $d4 = $_POST['d4'];
    // Recuperar $tiradas[]
    if (isset($_POST['tiradas'])) $tiradas = $_POST['tiradas'];

    if (validaEntero($d1) && validaEntero($d2) && validaEntero($d3) && validaEntero($d4)) {

        $numEnviado = $d1 . $d2 . $d3 . $d4;
        
        // Comprobar datos entrantes
        $muertos = numMuertos($numero, $numEnviado);
        $heridos = numHeridos($numero, $numEnviado, $muertos);

        // Añadir tirada
        $tiradas[] = array($numEnviado, $muertos, $heridos);
    }
} else {
    // Generar un número al azar de cuatro dígitos no repetidos
}

Si cierta variable está presente, obtengo su valor. Por ejemplo con:

if (isset($_POST['numero'])) $numero = $_POST['numero'];

Cuando he recuperado el resto de valores, hago una comprobación básica por cada uno de los 4 dígitos recibidos con la función validaEntero(). Esta función hace lo siguiente:

// Validar un número entero entre 0 y 9, ambos inclusive
function validaEntero($numero) {
    return isset($numero) && ctype_digit($numero) && $numero <= 9 && $numero >= 0;
}

Devuelve true o false si el dígito que le pasamos es un número entre 0 y 9 o no.

De esta forma, podemos usarlo para tratar y obtener el número enviado:

    if (validaEntero($d1) && validaEntero($d2) && validaEntero($d3) && validaEntero($d4)) {
        $numEnviado = $d1 . $d2 . $d3 . $d4;
        // Comprobar datos entrantes
        // Añadir tirada
    }

Si los cuatro dígitos validan, en la cadena $numEnviado guardo el número de cuatro dígitos que estoy probando en esta jugada.

Compruebo a continuación el total de muertos y heridos a partir de ese dato.

// Comprobar datos entrantes
$muertos = numMuertos($numero, $numEnviado);
$heridos = numHeridos($numero, $numEnviado, $muertos);

Las funciones numMuertos() y numHeridos() calcularán los aciertos:

// Calcular el número de muertos
function numMuertos($numero, $numEnviado) {
    $contador = 0;
    $l = strlen($numero);
    for($i = 0; $i < $l; $i++) {
        if (substr($numero, $i, 1) == substr($numEnviado, $i, 1)) $contador++;
    }
    return $contador;
}        

// Calcular el número de heridos
function numHeridos($numero, $numEnviado, $muertos) {
    $contador = 0;
    $l = strlen($numero);
    for($i = 0; $i < $l; $i++) {
        if (strpos($numEnviado, substr($numero, $i, 1)) !== false) $contador++;
    }
    return $contador - $muertos;
}

La función numMuertos() comparará los valores de cada posición de los caracteres de cada una de las dos cadenas, el número que intentamos averiguar y el numero que hemos enviado por el formulario. Con cada coincidencia,el $contador se incrementa en 1. La función devuelve el número de coincidencias exactas, osea, el número de muertos.

La función numHeridos() por otra parte, recorre los caracteres del número que hemos enviado y comprueba si están contenido en el número que debemos acertar. Si es así el $contador se incrementa en 1. La función devuelve la diferencia entre el número de heridos y el número de muertos, ya que los aciertos en esta función no discriminan si los valores coincidentes están en su posición correcta o no, y los contabiliza como heridos, cuando puede que realmente estos valores sean muertos, y estos ya estaban contabilizados en la variable $muertos.

Cuando tenemos los datos, ya podemos añadir el resultado a la lista de tiradas:

// Añadir tirada
$tiradas[] = array($numEnviado, $muertos, $heridos);

El arreglo $tiradas[] contendrá un arreglo por cada tirada que almacenará el número que enviamos, el numero de muertos y el número de heridos obtenido.

3. ¿El juego terminó?

Pero ¿habremos acertado el número? Vamos a comprobarlo.

if ($enviado && $muertos == 4) { 
    // Partida finalizada
    echo "\t\t<br />\n\t\t<h3>¡¡¡Enhorabuena!!! Has acertado el número " . $numero . " en " . count($tiradas) . " jugadas.</h3>\n";
} else {
    // Seguir jugando
    if (isset($tiradas)) {
    foreach ($tiradas as $indice => $valor) {
        echo "\t\t" . "<p>" . ($indice + 1) . ". Con el número introducido: " . $valor[0] . ", tienes " . $valor[1] . " muertos y " . $valor[2]. " heridos.</p>" . "\n";
        }
    }

// Formulario

}

Si tengo cuatro muertos, ¡he ganado!. habré acertado el número en una serie de intentos que muestro con count($tiradas). En caso contrario, sigo jugando.

Si hay tiradas if (isset($tiradas)) muestro los datos de cada una de ellas con un foreach: número introducido, muertos y heridos de cada tirada, y a continuación muestro el formulario para seguir intentándolo.

4. El formulario completo y sus comprobaciones

Aquí el código que iré desgranado y que va dentro de la comprobación anterior, en el else, en caso de que no acertara el número:

<h3>Introduce tu número:</h3>
<form name="input" action="<?php echo $_SERVER['PHP_SELF'];?>" method="post">

    <!-- Campos ocultos -->
    <?php
        echo '<input type="hidden" name="numero" value="' . $numero . '" />' . "\n";

        if ($enviado && !empty($tiradas)) {
            foreach ($tiradas as $indice => $valor){
                echo "\n\t\t\t" .'<input type="hidden" name="tiradas[' . $indice . '][0]" value="' . $valor[0] . '" />' . "\n";
                echo "\t\t\t" .'<input type="hidden" name="tiradas[' . $indice . '][1]" value="' . $valor[1] . '" />' . "\n";
                echo "\t\t\t" .'<input type="hidden" name="tiradas[' . $indice . '][2]" value="' . $valor[2] . '" />' . "\n";
        }}
    ?>

    <!-- Dígito 1 -->
    <input type="number" name="d1" class="campo" min="0" max="9" value="<?php if ($enviado && validaEntero($d1)) echo $d1; ?>" required="required" />
    <?php if ($enviado && !validaEntero($d1)) echo '<span class="alerta"> &larr;</span>'."\n" ?>

    <!-- Dígito 2 -->
    <input type="number" name="d2" class="campo" min="0" max="9" value="<?php if ($enviado && validaEntero($d2)) echo $d2; ?>" required="required" />
    <?php if ($enviado && !validaEntero($d2)) echo '<span class="alerta"> &larr;</span>'."\n" ?>

    <!-- Dígito 3 -->
    <input type="number" name="d3" class="campo" min="0" max="9" value="<?php if ($enviado && validaEntero($d3)) echo $d3; ?>" required="required" />
    <?php if ($enviado && !validaEntero($d3)) echo '<span class="alerta"> &larr;</span>'."\n" ?>

    <!-- Dígito 4 -->
    <input type="number" name="d4" class="campo" min="0" max="9" value="<?php if ($enviado && validaEntero($d4)) echo $d4; ?>" required="required" />
    <?php if ($enviado && !validaEntero($d4)) echo '<span class="alerta"> &larr;</span>'."\n" ?>

    <!-- Enviar -->
    &nbsp;&nbsp;<input type="submit" name="enviar" class="boton" value="Enviar" />
</form>

Ya expliqué, más arriba, los parámetros de form y el envío del formulario. Entendido esto, el formulario tiene tres cuestiones de interés.

Preparar los datos que se enviarán en el formulario, incluyendo los que llegaron a través del anterior formulario.
Recibir los datos en los cuatro campos input para ser enviados. En cada campo deberá estar el valor de cada dígito recibido del formulario anterior. Las características de HTML se ocupan de que los valores introducidos estén en rango antes de enviarse, pero aún así podemos recibir datos alterados por POST, luego:
Comprobar que los datos recibidos sean los correctos, y si no, reseñar el error.

4.1. Campos ocultos

En esta parte del formulario, completo los distintos campos ocultos con información necesaria para la siguiente tirada: el número a acertar, y cada uno de los arreglos de cada tirada anterior, conteniendo el número que enviamos en la tirada, el número de muertos y el número de heridos.

<!-- Campos ocultos -->
<?php
    echo '<input type="hidden" name="numero" value="' . $numero . '" />' . "\n";

    if ($enviado && !empty($tiradas)) {
        foreach ($tiradas as $indice => $valor){
            echo "\n\t\t\t" .'<input type="hidden" name="tiradas[' . $indice . '][0]" value="' . $valor[0] . '" />' . "\n";
            echo "\t\t\t" .'<input type="hidden" name="tiradas[' . $indice . '][1]" value="' . $valor[1] . '" />' . "\n";
            echo "\t\t\t" .'<input type="hidden" name="tiradas[' . $indice . '][2]" value="' . $valor[2] . '" />' . "\n";
    }}
?>

Véase que cada tirada debe incluirse con sus correspondientes valores como input ocultos por separado en el cuerpo de la página, ya que no podemos pasar un arreglo como valor de un campo de un formulario. Afortunadamente, sí podemos recibir estas tiradas como un arreglo para tratarlas. Recuerda, como vimos antes:

// Recuperar $tiradas[]
if (isset($_POST['tiradas'])) $tiradas = $_POST['tiradas'];

4.2. Recibir los datos de los input

El código para los cuatro campos input es el siguiente:

<!-- Dígito 1 -->
<input type="number" name="d1" class="campo" min="0" max="9" value="<?php if ($enviado && validaEntero($d1)) echo $d1; ?>" required="required" />
<?php if ($enviado && !validaEntero($d1)) echo '<span class="alerta"> &larr;</span>'."\n" ?>

<!-- Dígito 2 -->
<input type="number" name="d2" class="campo" min="0" max="9" value="<?php if ($enviado && validaEntero($d2)) echo $d2; ?>" required="required" />
<?php if ($enviado && !validaEntero($d2)) echo '<span class="alerta"> &larr;</span>'."\n" ?>

<!-- Dígito 3 -->
<input type="number" name="d3" class="campo" min="0" max="9" value="<?php if ($enviado && validaEntero($d3)) echo $d3; ?>" required="required" />
<?php if ($enviado && !validaEntero($d3)) echo '<span class="alerta"> &larr;</span>'."\n" ?>

<!-- Dígito 4 -->
<input type="number" name="d4" class="campo" min="0" max="9" value="<?php if ($enviado && validaEntero($d4)) echo $d4; ?>" required="required" />
<?php if ($enviado && !validaEntero($d4)) echo '<span class="alerta"> &larr;</span>'."\n" ?>

Mediante este código, repetido en cada input (convenientemente modificado), muestro el valor de cada dígito recibido de la jugada anterior, si esta se produjo. Sino no muestro nada.

value="<?php if ($enviado && validaEntero($d1)) echo $d1; ?>"

4.3. Si hay error en los datos recibidos, resaltarlo

Para asegurarnos que los dígitos que recibimos del formulario anterior son correctos, es necesario comprobarlos de nuevo del lado del servidor (ahora con PHP), aunque ya lo hiciéramos con las funcionalidades de HTML. Esto garantiza que los datos no fueron alterados en el envío mediante, tal vez, una modificación de la fuente HTML a través de las herramientas del navegador.

if ($enviado && !validaEntero($d1)) echo '<span class="alerta"> &larr;</span>'."\n";

Con este código tras cada campo, señalaremos aquellos campos input que contengan un error, en este caso añadiendo una flecha (←) y pintándola de color rojo con la clase CSS alerta.

Completado el formulario, con sus campos ocultos y los datos de todos los input, -que son campos obligatorios y tienen rangos numéricos definidos-, ya podemos enviarlo (botón sent) a la misma página para ser procesados tal como se indicó en el punto 2 de esta entrada, y así hasta acertar el número o hasta que recarguemos la página, caso en el que empezaremos de cero, en el punto 1 de esta entrada.

El programa completo

El HTML con el código PHP completo es el siguiente:

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <title>Mastermind</title>
    <meta name="description" content="Mastermind" />
    <meta name="keywords" content="DWES, DAW, Juego, Tarea 2" />
    <meta name="author" content="Javier Guerra" />
    <meta name="license" content="CC-BY" />
    <meta name="date" content="2019-01-31" scheme="YYYY-MM-DD" />
    <style>
        html,body{padding:0;margin:0;width:100%;height:100%;font-family:sans-serif;font-weight:300;background-color:#efeffb}.contenedor{margin:25px auto;padding:10px 20px 20px;width:100%;max-width:100%;border-radius:10px;background-color:#FFF;-webkit-box-shadow:5px 5px 5px 0 rgba(0,0,0,0.10);-moz-box-shadow:5px 5px 5px 0 rgba(0,0,0,0.10);box-shadow:5px 5px 5px 0 rgba(0,0,0,0.10)}@media(min-width:1023px){.contenedor{padding:20px 30px 30px;width:67%}}@media(min-width:1215px){.contenedor{padding:30px 40px 40px;width:50%}}#numero{display:block;text-align:right;height:0}h1,h2{margin-top:0;margin-bottom:5px;color:#1883ba}h3{margin-top:10px;margin-bottom:0;color:#1883ba}p{margin-top:5px;margin-bottom:5px}hr{border:0;margin:0;height:1px;background-image:linear-gradient(to right,rgba(0,0,0,0.50),rgba(0,0,0,0))}.campo,.boton{margin-top:5px;padding:5px;font-weight:600;font-size:16px;border-radius:5px;border:2px solid #1883ba;color:#1883ba}.campo{width:64px}.boton{width:128px;text-decoration:none;color:#fff;background-color:#1883ba}.boton:hover{color:#1883ba;background-color:#efeffb}#autor{display:block;text-align:center;font-size:small;margin-bottom:25px}.alerta{color:red}
    </style>
</head>

<body>
    <div class="contenedor">

        <?php
        
        $enviado = isset($_POST['enviar']);
        $muertos = 0;
        $mostrarNum = true;
        
        // Calcular el número de muertos
        function numMuertos($numero, $numEnviado) {
            $contador = 0;
            $l = strlen($numero);
            for($i = 0; $i < $l; $i++) {
                if (substr($numero, $i, 1) == substr($numEnviado, $i, 1)) $contador++;
            }
            return $contador;
        }        
        
        // Calcular el número de heridos
        function numHeridos($numero, $numEnviado, $muertos) {
            $contador = 0;
            $l = strlen($numero);
            for($i = 0; $i < $l; $i++) {
                if (strpos($numEnviado, substr($numero, $i, 1)) !== false) $contador++;
            }
            return $contador - $muertos;
        }
        
        // Validar un número entero entre 0 y 9, ambos inclusive
        function validaEntero($numero) {
            return isset($numero) && ctype_digit($numero) && $numero <= 9 && $numero >= 0;
        }

         
        if ($enviado) {

            // Recuperar número
            if (isset($_POST['numero'])) $numero = $_POST['numero'];
            // Recuperar dígitos
            if (isset($_POST['d1'])) $d1 = $_POST['d1'];
            if (isset($_POST['d2'])) $d2 = $_POST['d2'];
            if (isset($_POST['d3'])) $d3 = $_POST['d3'];
            if (isset($_POST['d4'])) $d4 = $_POST['d4'];
            // Recuperar $tiradas[]
            if (isset($_POST['tiradas'])) $tiradas = $_POST['tiradas'];

            if (validaEntero($d1) && validaEntero($d2) && validaEntero($d3) && validaEntero($d4)) {

                $numEnviado = $d1 . $d2 . $d3 . $d4;
                
                // Comprobar datos entrantes
                $muertos = numMuertos($numero, $numEnviado);
                $heridos = numHeridos($numero, $numEnviado, $muertos);

                // Añadir tirada
                $tiradas[] = array($numEnviado, $muertos, $heridos);
            }

        } else {

            // Generar un número al azar de cuatro dígitos no repetidos
            $numero = range(0, 9);
            shuffle($numero);
            $numero = array_slice($numero, 0, 4);
            $numero = implode($numero);

        }
        

        if ($mostrarNum) echo "<dfn id='numero' title='$numero'>?</dfn>" . "\n\n";
        echo "\t\t" . "<!-- Encabezado -->\n";
        echo <<< CADENA
        <h1><svg width=24 height=24>
        <circle cx=6 cy=6 r=6 fill="red" />
        <circle cx=18 cy=6 r=6 fill="yellow" />
        <circle cx=6 cy=18 r=6 fill="yellow" />
        <circle cx=18 cy=18 r=6 fill="lawngreen" />
        </svg> Mastermind</h1>
        <h2>El juego de los muertos y heridos</h2>\n
         <!-- Jugadas -->
        <br />
        <hr />\n
CADENA;
        
        if ($enviado && $muertos == 4) { 
            
            // Partida finalizada
            echo "\t\t<br />\n\t\t<h3>¡¡¡Enhorabuena!!! Has acertado el número " . $numero . " en " . count($tiradas) . " jugadas.</h3>\n";

        } else {

        // Seguir jugando

        if (isset($tiradas)) {
        foreach ($tiradas as $indice => $valor) {
            echo "\t\t" . "<p>" . ($indice + 1) . ". Con el número introducido: " . $valor[0] . ", tienes " . $valor[1] . " muertos y " . $valor[2]. " heridos.</p>" . "\n";
            }
        }

        echo "\t\t<hr />\n\t\t<br />\n"
        ?>

        <!-- Formulario -->
        <h3>Introduce tu número:</h3>
        <form name="input" action="<?php echo $_SERVER['PHP_SELF'];?>" method="post">

            <!-- Campos ocultos -->
            <?php
                echo '<input type="hidden" name="numero" value="' . $numero . '" />' . "\n";

                if ($enviado && !empty($tiradas)) {
                    foreach ($tiradas as $indice => $valor){
                        echo "\n\t\t\t" .'<input type="hidden" name="tiradas[' . $indice . '][0]" value="' . $valor[0] . '" />' . "\n";
                        echo "\t\t\t" .'<input type="hidden" name="tiradas[' . $indice . '][1]" value="' . $valor[1] . '" />' . "\n";
                        echo "\t\t\t" .'<input type="hidden" name="tiradas[' . $indice . '][2]" value="' . $valor[2] . '" />' . "\n";
                }}
            ?>

            <!-- Dígito 1 -->
            <input type="number" name="d1" class="campo" min="0" max="9" value="<?php if ($enviado && validaEntero($d1)) echo $d1; ?>" required="required" />
            <?php if ($enviado && !validaEntero($d1)) echo '<span class="alerta"> &larr;</span>'."\n" ?>

            <!-- Dígito 2 -->
            <input type="number" name="d2" class="campo" min="0" max="9" value="<?php if ($enviado && validaEntero($d2)) echo $d2; ?>" required="required" />
            <?php if ($enviado && !validaEntero($d2)) echo '<span class="alerta"> &larr;</span>'."\n" ?>

            <!-- Dígito 3 -->
            <input type="number" name="d3" class="campo" min="0" max="9" value="<?php if ($enviado && validaEntero($d3)) echo $d3; ?>" required="required" />
            <?php if ($enviado && !validaEntero($d3)) echo '<span class="alerta"> &larr;</span>'."\n" ?>

            <!-- Dígito 4 -->
            <input type="number" name="d4" class="campo" min="0" max="9" value="<?php if ($enviado && validaEntero($d4)) echo $d4; ?>" required="required" />
            <?php if ($enviado && !validaEntero($d4)) echo '<span class="alerta"> &larr;</span>'."\n" ?>

            <!-- Enviar -->
            &nbsp;&nbsp;<input type="submit" name="enviar" class="boton" value="Enviar" />

        </form>

        <?php } ?>

    </div>
    <span id="autor">2019 (CC-BY) Javier Guerra</span>
</body>

</html>

Enlaces

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

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:

Conceptos Full Stack Web Developer

JavGuerra — Sat, 23 Apr 2022 00:00:00 GMT

Etiquetas: #portfolio, #web, #código, #html, #css, #javascript

Maquetación elaborada con HTML 5, CSS 3 y JavaScript Vanilla que incluye formulario y es accesible y responsive.

Conceptos FSWD

Práctica final del Ramp-up del Bootcamp de FSWD
Repositorio en GitHub: JavGuerra / conceptos-fswd

La página

Esta página corresponde a la práctica final del ramp-up del bootcamp sobre Full Stack Web Developer que estoy realizando en este momento.

En ella se muestran algunos conceptos aprendidos en esta primera fase, e incluye «algo más» de mi propia cosecha. A continuación algunas de estas mejoras.

14 características destacables de esta página web

CSS transpilado con Sass.
Usa Vanilla JS (JavaScript puro).
La web implementa los criterios del estándar XHTML (revisado con Nu Html Checker).
El diseño es adaptable (responsive) según el dispositivo.
Usa la librería y los iconos de Bootstrap Icons y las fuentes de letra de Google Fonts.
Aplica un efecto Paralax a la portada (hero).
Implementa el protocolo Open Graph (head) para la correcta inserción de la web en redes sociales.
Es compatible con Progessive Web Aplication (PWA) a través de fichero manifest.json, por lo que la página puede ser instalada en dispositivos móviles como una web app.
Implementa técnicas de seguridad en el formulario:
- Hace uso de un Honeypod, mediante el campo “hp”, para evitar el SPAM.
- Hace uso de un campo oculto “dato” para evitar ataques por XSS y CRSF.
Es accesible (revisado con el complemento WAVE):
- Emplea párrafos y etiquetas contextuales sólo visibles para lectores de pantalla.
- Hace uso de etiquetas WAI-ARIA para describir eventos interactivos.
El fichero README.md tiene sintáxis de marcado ligero Markdown.
Dispone de un código QR para acceso rápido a la web a través de dispositivos móviles.
Ha sido probado en los navegadores web Firefox y Chrome.
Web alojada en Github pages.

Acceder a la página web

Buscaminas en JavaScript

JavGuerra — Thu, 28 Apr 2022 00:00:00 GMT

Etiquetas: #portfolio, #web, #código, #css, #html, #javascript, #bootstrap, #jquery, #juego

Programé Buscaminas en JavaScript como un juego atípico que no consiste en evitar las minas, como estamos acostumbrados en los juegos de escritorio del mismo nombre, sino en hacerlas estallar.

Una vez se genera el tablero con las dimensiones que deseemos, tendremos una serie de intentos para acertar la posición de las minas. Cada fallo cuenta, así como cada acierto. Termina la partida cuando se han superado el número de fallos posibles o cuando se encuentran todas las minas.

Realicé este juego durante una semana, como práctica de programación de la asignatura de Desarrollo Web en Entorno Cliente de Formación Profesional de Grado Superior de Desarrollo de Aplicaciones Web (DAW).

La aplicación, programada en JavaScript, usa Bootstrap y JQuery, es cross-browser y compatible con navegadores antiguos, tiene diseño responsive, cumple con los estándares W3C, de accesibilidad web y de accesibilidad de contenidos dinámicos (WAI-ARIA).

Como ejercicio de programación, es un buen ejemplo de manejo de eventos en JavaScript para interactuar con las casillas del tablero.

¿Te apetece una partidita?

Ver el codigo fuente en Github.

PS.: La ayuda depara alguna sorpresa… pero intenta jugar sin hacer trampa.

Carousel con Bootstrap

JavGuerra — Fri, 29 Apr 2022 00:00:00 GMT

Etiquetas: #portfolio, #web, #viaje, #código, #css, #html, #javascript, #bootstrap, #fotografía, #edición, #venezuela

Las primeras veces que viajé a Venezuela quedé impactado por su belleza y las gentes que allí conocí. Me inspiró para realizar esta galería de fotos de ejemplo para la asignatura de Diseño de Interfaces Web de Formación Profesional de Grado Superior de Desarrollo de Aplicaciones Web (DAW).

La galería muestra un carousel de imágenes con Boortrap y JavaScript, es responsive y cumple con los estándares web y de accesibilidad.

Es un buen ejercicio para mostrar las posibilidades del diseño web con HTML y CSS.

La foto de esta entrada es un montaje que realicé con Gimp tomando como base las tres fotos de la galería componiendo con ellas un collage y aplicando filtros de envejecido.

Summer Quiz

JavGuerra — Tue, 21 Jun 2022 00:00:00 GMT

Etiquetas: #portfolio, #web, #código, #html, #css, #javascript, #juego, #accesibilidad, #responsive

«Fun 10-question quiz to test your knowledge». Práctica final del módulo de JavaScript avanzado del Bootcamp de FSWD, por Alejandro Rodríguez y Javier Guerra.

El juego

El bootcamp de FSWD que estoy realizando, consta de varios módulos. El de JavaScript avanzado termina ahora, y este es el ejercicio final de esta fase de mi formación.

Se trata de un ejercicio que comprende todos los conceptos generales aprendidos, y que, como siempre, incluye alguna que otra cosa más allá del enunciado.

Enunciado

El ejercicio consiste en elaborar una SPA que consulte una API de preguntas y respuestas y que cuente con tres partes: 1. bienvenida y gráficas de estadísticas, 2. mostrar diez preguntas, una a una, con sus respectivas opciones de respuesta, y 3. página de resultado.

Conceptualmente hablando, las estadísticas de la parte 1 bien podrían aparecer en la fase 3, la de resultados, pero este es, en resumidas cuentas, el enunciado.

Algunas características destacables del enunciado son que la aplicación se debe ejecutar en una sola página web (SPA), que realiza consultas a una API, que guarda las puntuaciones en localStorage y que muestra estadísticas. Esta última parte, aunque accesoria, pues no se ha visto en el bootcamp, supuso un reto interesante, ya que ha dado para escribir varias entradas previas en este blog: Spinner loader asíncrono, Creación de un contador de resultados, Gráfica de lineas dinámica con SVG y Cargar SVG dinámicamente, todas ellas técnicas incluidas en el ejercicio.

Es un buen ejercicio para practicar, e igualmente espero que puedas disfrutarlo jugándolo. Este ejercicio lo he llevado a cabo con el apoyo del compañero Alejando.

Características destacables

Operativa de la aplicación

Aplicación de una sola página (SPA).
Integración de 25 preguntas propias en un JSON. Usa una en cada partida.
Hace uso de localStorage pata guardar y leer las puntuaciones.
Gráficas dinámicas en SVG de elaboración propia y uso de DOM para su gestión.
- Gráfica de líneas para mostrar estadísticas. Manejo del id ‘theline’.
- Contador visual para mostrar el resultado final del quiz. Manejo del id ‘hand’.
Animaciones CSS de gráfica de líneas y personajes.
Carga de las gráficas SVG al inicio de la app con fetch para hacer uso de los id que incorporan y poder así hacer cambios dinámicos. Con <img> esto no funcionaría.
Los posibles errores se muestran a través de una ventana modal <dialog>.
Usa JavaScript puro (Vanilla JS) sin frameworks.
Recopila librería de funciones propia en el fichero js/functions.js
Repositorio compartido en Github y web alojada en Github pages.

Usabilidad

La web implementa los criterios del estándar XHTML (revisado con Nu Html Checker).
El diseño es adaptable (responsive) según el dispositivo.
Es accesible (revisado con el complemento del navegador WAVE):
- Hace uso de etiquetas WAI-ARIA para describir eventos interactivos.
Tiene temática coherente y un cuidado aspecto visual trabajado con CSS.
Interfaz en inglés acorde al contenido de la API.
Emplea un ‘spin’ asíncrono para informar al usuario de que se está gestionado la consultas.
Los botones no se activan hasta que terminan los procesos asíncronos: cargas, consultas…
La selección de las opciones de cada pregunta se hace a través de botones de radio cuyo aspecto modificado con CSS simula el aspecto de botones de selección.
Muestra barra de puntuaciones medias y barra de progreso del cuestionario.
Implementa el protocolo Open Graph (en el head) para la correcta inserción de la web en RRSS.
Es compatible con Progessive Web Aplication (PWA) a través de fichero manifest.json, por lo que la página puede ser instalada en dispositivos móviles como una web app.
Se dispone de un código QR para acceso rápido a la web a través de dispositivos móviles.
Ha sido probada con los navegadores web Firefox y Chrome.
Extra: La consola del navegador muestra ayuda con las respuestas.

Enlaces

Tienda 8 bits

JavGuerra — Fri, 18 Nov 2022 00:00:00 GMT

Etiquetas: #portfolio, #web, #formación, #becas, #node.js, #express, #react, #mongodb, #javascript, #accesibilidad, #responsive

Durante el año 2022 cursé el Bootcamp de Desarrollo Web Full Stack que Becas Santander llevó a cabo en colaboración con Fundación Universia, Indra y The Bridge.

El día 17 de noviembre finalizó la formación con un acto de entrega de diplomas on-line en el que tuve ocasión de mostrar mi proyecto final «Tienda 8 bits» junto con Alex, otro de mis compañeros, quien también expuso su proyecto.

A parte de los compañeros y los profesores, asistieron al evento Alejandra Cuenca y Diego Díaz por parte de The Bridge, Cristina Soriano por Minsait/Indra, y Beatriz Arribas y Carlos Sánchez por Universia.

Video

El evento se llevó a cabo de forma presencial y on-line, y de él he rescatado el video de mi presentación que comparto a continuación.

Descripción técnica

Back end

Tecnologías empleadas: Node.js + Express + MongoDB + Mongoose
Módulos: compression, cors, helmet, dotenv, nodemon, mongoose-paginator-v2

Características destacadas de la API:

Emplea módulos ESM.
Está preparada para el versionado de la API.
Está preparada para el uso de BBDD MongoDB local o en remoto (config.js).
Preserva la seguridad del acceso a la API con el uso del módulo helmet.
Devuelve las rutas de los enlaces a las fotos y logos dinámicamente.
Cuenta con documentación de la API.

Front end

Tecnologías empleadas: React + Vite, axios, react-router-dom, react-hook-form
Módulos propios: setSpin, inactiveBtn, compareTwoObjects

Características destacadas de la App:

El diseño es adaptable (responsive) según el dispositivo.
CSS propio. No usa frameworks.
Es accesible (revisado con el complemento WAVE).
Utiliza fuentes de Google Font en los títulos para preservar la accesibilidad.
Implementa el protocolo Open Graph para la correcta inserción de la web en RRSS.
Es compatible con Progessive Web Aplication (PWA) a través de fichero manifest.json, por lo que la página puede ser instalada en dispositivos móviles como una web app.
Ha sido probada con los navegadores web Firefox y Chrome.
Tratamiento de imágenes con software libre: Gimp e InkScape.

Fuentes

Wikipedia
Enciclopedia «Mi Computer», editorial Delta, 1984.

Licencias

Sobre el código fuente: GNU GENERAL PUBLIC LICENSE Version 3
Sobre el contenido de la web: (CC) BY-SA 3.0
Sobre las fotos: Son propiedad de sus respectivos autores.
Sobre las fuentes de letra: Google Fonts
Sobre los iconos: Heroicons
Material usado sin ánimo de lucro bajo criterios didácticos y formativos.

Acceder a la aplicación

Enlaces

Artículos informativos elaborados por el autor relacionados con esta práctica:

Cartelera DAW

JavGuerra — Thu, 20 Jun 2024 00:00:00 GMT

Etiquetas: #portfolio, #web, #java, #spring boot, #bootstrap, #thymeleaft, #spring security, #accesibilidad, #responsive

Recientemente he presentado mi proyecto fin de estudios de Formación Profesional de Grado Superior DAW. Era algo que llevaba aparcado durante demasiado tiempo y finalmente esta etapa se ha cerrado.

El proyecto ha consistido en una aplicación web monolítica, desarrollada en Java, usando el framework Spring Boot, y ha sido desplegada en el servicio de Railway.com.

El proyecto

El proyecto Cartelera DAW desarrolla una plataforma web para mostrar información cinematográfica cuyos usuarios potenciales son los espectadores y las distribuidoras de películas, cines y salas de proyección.

La plataforma, que está basada en Java y Spring Boot, utiliza un patrón Modelo-Vista-Controlador y una arquitectura cliente-servidor, haciendo uso del IDE IntelliJ IDEA, de Maven para la gestión del proyecto, de Git y GitHub para el versionado de código, de MySQL e Hibernate para la gestión de la base de datos y de una configuración LAMP dockerizada para las pruebas. Para el despliegue se utilizaron tecnologías como Docker y metodologías CI/CD. Para el frontend se ha empleado el gestor de plantillas Tymeleaft y Bootstrap.

Adicionalmente se proponen una serie de estrategias comerciales para garantizar la sostenibilidad del modelo empresarial del proyecto.

Se elaboró una memoria de 70 páginas y una presentación.

El objetivo era aprender y usar tecnologías nuevas no estudiadas en DAW.

La calificación final ha sido de 9 de 10, y se ha llevado a cabo en un periodo de tres semanas.

La formación previa

Pero el proyecto no partía de cero. Durante los meses de enero y febrero, y hasta el 9 de marzo de 2023, participé en un curso de especialización en Java + Spring de la Fundación Adecco dentro del Proyecto Digital School Erasmus+

Se trataba de una formación mentorizada que incluía un trabajo en grupo para desarrollar una aplicación web. En mi grupo de trabajo me encargué de la coordinación del equipo mediante Trello y de la planificación de las funcionalidades de la aplicación y las propuesta de mejora de la app. El grupo se llamaba Cinéfilos, y Cartelera DAW bebe de la estructura simple de aquella práctica que me sirvió para entender cómo funciona el framework.

El proyecto ahora presentado ha cambiado mucho desde aquella versión, tanto en su estructura como en su diseño. Partía de un código inconcluso donde sólo se habían implementado los CRUDs básicos, con fallos de integridad y sin funcionalidades mínimas, pero ahora la aplicación ha sido probada y revisada en profundidad, y cuenta con características que refuerzan sus funcionalidades.

En el curso, así como en la práctica, obtuve una calificación de 10/10.

Características

Además de los requisitos solicitados para el MVP, en la app se ha implementado:

Seguridad de rutas
Registros de usuario
Validaciones de formularios
Automatizaciones
Documentación con JavaDoc
Implementación de Logs
Notificaciones
Despliegue dockerizado

Cuenta con:

Portada dinámica
Diseño responsive
Diseño accesible
Aviso legal y privacidad
Aviso de cookies
Ayuda en línea
Spinner loader

Desarrollo y despliegue

Tanto en el desarrollo como en el despliegue ha jugado un papel importante Docker.

La BBDD MySQL y PHPMyAdmin han sido lanzados usando contenedores gestionados con la herramienta Portainer.

El despliegue se lleva a cabo tomando el código fuente y, mediante un dockerfile, construyendo la imagen del contenedor que es lanzado en el servidor.

Spring Boot contiene un servidor Tomcat encargado de servir las páginas de la aplicación.

Indicaciones de instalación

Tras clonar el repositorio, es necesario crear un usuario en la BBDD relacional llamado «cartelera-daw» con el password que deseemos. Estos datos, así como el puerto por defecto de la app (8082), pueden ser introducidos en el fichero «aplication.propieties», en la carpeta resources.

Cada vez que se inicia la aplicación, esta recarga los datos en la BBDD.

Una vez iniciada la aplicación en local, se puede acceder a ella en la dirección: http://localhost:8082

El acceso al panel de administración requiere de usuario y contraseña. Por defecto, la aplicación tiene un usuario «admin» y su contraseña es «admin».

ADVERTENCIA: Se recomienda que, tras el primer acceso, la contraseña de admin sea cambiada o se cree una nueva cuenta de usuario desde la que eliminar la cuenta «admin».

Licencia

Sobre el código fuente: GNU GENERAL PUBLIC LICENSE Version 3

Enlaces

Códice

JavGuerra — Wed, 21 Aug 2024 00:00:00 GMT

Etiquetas: #portfolio, #web, #código, #astro, #ssg, #tailwind, #javascript, #typescript, #zod, #node.js, #markdown, #responsive, #accesibilidad

Hacia tiempo que quería darle un giro a mi anterior git-blog elaborado con Jekill. Hace un mes me topé con Astro, un SSG en JavaScript/TypeScript bajo Node.js, que cuenta con una excelente documentación, y que además incluye un tutorial para hacer un blog. Esto terminó de decidirme para realizar el cambio que ahora presento.

Retos

Para llevar a cabo el desarrollo de un nuevo blog personalizado, se me presentaban dos retos:

Realizar la aplicación para que fuera operativa al menos con la mayoría de funcionalidades que ya tenía en el anterior blog.
Migrar las entradas del blog anterior a la nueva estructura de la aplicación, lo que además implicaba repensar esta estructura.

La aplicación

Elaborar la aplicación fue realmente sencillo. Siempre hay atascos, pero con la documentación, el tutorial, el Discord de Astro, los videos de YouTube y la IA, fueron subsanándose. El proyecto ha sido el mejor aprendizaje posible.

Tres cosas me han llevado algo de tiempo:

Extender la colección de posts usando el esquema RSS.
Utilizar el componente «Image» de Astro.
JavaScript/TypeScript no funciona como se espera usando transiciones.

Lo relativo a la colección es lógico, porque estaba usando conceptos nuevos y aprendiendo a usar la biblioteca Zod para definir y validar el esquema de los datos de las colección de entradas del blog. Zod permite validar el frontmatter o cabecera de cada post para que no falte nada. La idea era partir del esquema rssSchema y extenderlo para que incluyese algunos datos no contemplados, como por ejemplo el coverImage o los tags (Ver fichero /src/content/config.ts).

Pero confieso que el uso del componente Image me ha dado algún quebradero de cabeza, posiblemente relacionado con el schema mencionado, pues no me ha sido posible usar indistintamente imágenes con rutas relativas o rutas absolutas en los encabezados de las entradas. El problema tiene que ver con el atributo src.

Si bien Image permite indicar una ruta relativa (/public) o remota (https), cuando se trata de usar la carpeta /src/assets surgen los problemas. La solución pasa por importar las imágenes, pero ¿qué ocurre cuando se ha de importar una colección de imágenes, para, por ejemplo, el listado de los proyectos del portafolio?

Mi opción consiste en crear un arreglo con todas las imágenes importadas usando import.meta.glob(), y luego acceder a cada elemento del arreglo referenciado por su ruta, como se muestra aquí:

---
import portfolio from "@/content/_portfolio.json";  // proyectos con sus respectivas rutas de imagenes
const images = import.meta.glob("@/assets/portfolio/*", { eager: true });

const projects = portfolio.projects.map(project => {
  const image = images[`/src/assets/portfolio/${project.img}`] as Record<string, any>;
  return { ...project, image }; // a cada proyecto se le añade la imagen importada
---

projects.map(project => 
  <Image src={project.image.default} alt={project.alt} inferSize />
)

Este ejemplo simplificado mostrará la lista de imágenes asociadas a los proyectos.

La migración

Versión previa del blog en Jekill

Tras conseguir que todo funcionase, llegó el turno de la migración, que pensaba que sería complicada, pero sólo fue laboriosa.

Haciendo uso del filtrado de contenido del IDE fui cambiando los enlaces de Jekill de las referencias entre las distintas entradas, y creando el nuevo encabezado (frontmatter) de cada entrada escrita en Markdown.

A medida que este cambio se iba realizando fue necesario ir adaptando los estilos de texto haciendo uso de Tailwind y su plugin Typography.

Por último, como decidí incluir las transiciones de Astro, me topé con un problema curioso. Para activar o desactivar el menú hamburguesa uso JavaScript. La primera vez que se usa, funciona, pero en los siguientes casos, deja de hacerlo. Lo mismo ocurre con el botón «Volver».

He tenido que hacer una comprobación para recargar siempre el evento click en ambos casos. Ver /src/components/Hamburger.astro y /src/components/ButtonLink.astro respectivamente.

Lo mejor de todo es que ha sido divertido hacerlo, y conocer Astro, esta nueva y muy potente herramienta que creo que va a dar mucho juego. Quedan por delante innumerables mejoras y actualizaciones, por lo que la diversión continúa.

Características

La aplicación cuenta con las siguientes secciones: portada, sobre mi, porfolio, blog, temas y enlaces recomendados. Hace uso de las características avanzadas de Astro, y también:

Incluye RSS de contenidos
Enlaza con la API de Mastodon
Implementa sitemap para SEO
Incluye estadísticas del sitio
Integra Disqus para comentarios
Implementa un buscador
Usa tema de color claro/oscuro automático
Realiza transiciones de página
Es accesible
Es responsive
Usa TypeScript
Contiene etiquetado Open Graph
Es compatible con PWA
Consigue una calificación de carbono «A» (ver)

Licencias

Sobre los contenidos (entradas del blog): CC BY-SA
Sobre el código fuente: GNU GENERAL PUBLIC LICENSE Version 3
Iconos: Solar Linear Icons en SVG Repo
Tipografía: Blogger_Sans-Medium

Saber más

Ir a la página

https://javguerra.github.io/

Recursos TIC

JavGuerra — Wed, 11 Dec 2024 00:00:00 GMT

Etiquetas: #portfolio, #web, #java, #spring boot, #bootstrap, #thymeleaft, #spring security, #accesibilidad, #responsive, #selenium, #api, #swagger, #javadoc, #junit, #mockito, #docker, #jacoco, #github actions, #ci-cd, #sonarqube

Recientemente he cursado una formación con Adecco, y este es mi proyecto fin de estudios, que ha consistido en desarrollar una aplicación que permita gestionar recursos TIC y listas de recursos, para realizar los tests correspondientes, aplicando los conocimientos aprendidos, y que ha sido desplegada en el servicio de Railway.com.

El proyecto

La plataforma, que está basada en Java y Spring Boot, utiliza un patrón Modelo-Vista-Controlador y una arquitectura cliente-servidor, haciendo uso del IDE IntelliJ IDEA, de Maven para la gestión del proyecto, de Git y GitHub para el versionado de código, de MySQL, H2 y el ORM Hibernate para la gestión de la base de datos y de una configuración LAMP dockerizada para las pruebas.

Para el frontend se ha empleado el gestor de plantillas Tymeleaft y Bootstrap.

Para los tests se ha usado JUnit, Mockito, Selenium. la API se ha probado con Swagger y las estadísticas se han generado con JaCoCo y SonarQube.

Para el despliegue se utilizaron tecnologías como Docker y metodologías CI/CD con GitHub Actions.

La planificación y codificación se han llevado a cabo usando Trello.

Destacados

Además de los requisitos del MVP, se han incluido las siguientes funcionalidades:

Diseño responsive, “mobile first”
Web accesible AA. Testada con WAVE
Seguridad por diseño
Confirmaciones de borrado
Implementación de login de usuarios
Integra el editor TinyMCE
Provee API REST e interfaz Swagger
Incluye aviso legal, privacidad y cookies
Documentación la aplicación con JavaDoc
Usa el protocolo OpenGraph para RR.SS.
Manifest para móviles (PWA)
Desarrollada con Linux + Docker LAMP
Despliegue

Video

El proyecto fue presentado a empresas de tecnología, y se puede ver en el vídeo de la presentación del proyecto aquí:

Indicaciones de uso

Requisitos

Para ejecutar el proyecto se requiere:

Java 23 o superior
Maven
MySQL
Docker

Configuración

Actualmente la aplicación se ejecuta localmente en el puerto 8082.

Puede construirse un contenedor Docker con la imagen de la aplicación ejecutando el fichero docker.sh que hace uso de docker-compose para lanzar la aplicación y la BBDD que requiere.

Para generar un informe de cobertura de testing, se puede ejecutar el comando mvn site y acceder a él en el directorio target/site/jacoco/index.html.

Autores

Desarrollado por Javier y Kevin

Licencia

Sobre el código fuente: GNU GENERAL PUBLIC LICENSE Version 3

Enlaces

Batman para QL

JavGuerra — Fri, 06 Jun 2025 00:00:00 GMT

Etiquetas: #sinclair ql, #portfolio, #web, #código, #html, #css, #javascript

El 10 de mayo de 2025 fue lanzado «Batman QL», un remake del «Batman» de 1986 de Jon Ritman y Bernie Drummond para el retro-ordenador Sinclair QL a cargo de Joan Gayón. Yo hice mi parte elaborando la landing page del lanzamiento que presento en esta entrada.

Joan es un compañero de nuestro grupo de aficionados en torno a esta máquina, y su juego ha causado sensación, siendo, hoy por hoy, la mejor versión de este clásico para un ordenador de los 80, y el mejor juego para QL de todos los tiempos, tanto por su jugabilidad como por sus gráficos.

La página de lanzamiento

Visita la página para conocer más sobre este juego.

Características

Multiidioma. La web está disponible tanto en español como inglés. Un fichero index.php determina, en función del navegador, si el visitante habla español o no, y redirige a una u otra página.
En sintonía con el aspecto del juego. El menú de la página simula el menú del juego, y el colorido y la temática son afines.
Responsive, Se adapta a distintos dispositivos como móviles (movile first), tabletas y pantallas de ordenador.
Accesible. funciona en lectores de pantalla por voz.
Icono para moviles. Es compatible con Progessive Web Aplication (PWA) a través de fichero manifest.json, por lo que la página puede ser instalada en dispositivos móviles como una web app.
Información para redes sociales, Implementa el protocolo Open Graph para la correcta inserción de la web en redes sociales.
Sin frameworks. No emplea frameworks de JavaScript o CSS, sino código propio, haciendo más liviana la carga.
Estadísticas. La web enlaza un servicio de estadísticas de visitas.

La presentación

Además de en las redes sociales, tanto el juego como la página fueron presentados el día 17 de mayo de 2025 en el Museo de Historia de la Computación, con un significativo alcance para lo que supone una comunidad como esta.

Se hicieron eco del lanzamiento las principales web del sector, como Amigawave, Indie Retro News, El Mundo del Spectrum, Computer Emuzone, Spectrum Computing, El Spectrumero, Retroinvaders, Perfect Pixel, Vintage is the new old, spectrumandretronews, Modern Retro Gaming News, De Vuego, Retro8bitshop, Planet Sinclair, entre otras.

En la primera semana se recibieron más de 1.200 visitas al Blog y la web desde 42 países, más de 3.300 visitas a los posts en foros retro, y se contabilizaron más de 700 descargas.

Ver la presentación del juego en PDF.

El juego

Puedes obtener información sobre el juego, sus características y modo de uso en su web o en su manual disponible para descarga, y también en el artículo Batman, Joan Gayón (2025) en nuestro blog sobre QL.

Te adelanto que se trata de una copia fiel pixel a pixel del original, mejorada con mayor colorido, Si autor lo ha llevado a cabo como un reto personal y un homenaje que ha presentado grandes desafíos técnicos.

Dispones de una versión preparada para emulador en Windows que puedes descargar.