Códice | Entradas sobre «portfolio»

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.