Blog - 0x00

Old Computer Challenge - Web moderna para el ZX Spectrum

2025/10/19

Tabla de contenidos

El año pasado participé en el reto OCC, pero entre el trabajo y la vida personal me olvidé por completo de él. Por suerte, vi una publicación en internet de alguien que estaba haciendo el reto y me acordé. No quería perderme el reto de este año, ya que el año pasado fue divertido aprender algo nuevo, así que espero que no sea demasiado tarde.

El reto de este año consistía en un proyecto DIY: podías crear tu propio reto OCC. Así que pensé que sería divertido intentar recrear un sitio web y su navegación para el ZX Spectrum usando BASIC y las limitadas capacidades gráficas del ordenador.

Hardware #

Bueno, en este caso el hardware es el ZX Spectrum, aunque debo decir que utilicé un emulador (Fuse) para probar y ejecutar mi código.

Limitaciones #

La resolución de imagen del ZX Spectrum es de 256x192 píxeles, por lo que el espacio es muy limitado. La paleta de colores está formada por 8 colores, con una variante «más brillante».

Teniendo esto en cuenta, tuve que diseñar un sitio web para el ZX Spectrum y pensar cómo se navegaría por él.

Reto #

Así que, dados el hardware y las limitaciones, pensé que primero haría Google, ya que tiene un diseño sencillo y, diría yo, es conocido por todo el mundo.

Google #

La imagen de abajo muestra cómo sería la página de inicio de Google.

Para acceder a sus servicios, se pulsaría la primera letra del nombre del servicio. En caso de que hubiera más de uno con la misma letra, se usaría otra letra o simplemente se añadiría una segunda página de servicios.

En este caso, se puede acceder a la Búsqueda pulsando «S». Simplemente se pedirá la consulta y, en este ejemplo, busqué «Cómo ejecutar un LLM en un microprocesador». Para navegar por los diferentes resultados, se pulsaría «w» (arriba) o «s» (abajo).

Hacker News #

Hacker News tiene un contenido predominantemente textual, lo que hace que sea «fácil» diseñarlo para el ZX Spectrum, ya que sus capacidades gráficas son bastante limitadas.

Como puedes ver, en la barra superior aparecerá tu nombre de usuario y la cantidad de puntos que tienes. En este caso, decidí que la navegación sería «menos» interactiva y que se accedería a las publicaciones simplemente seleccionando un número (del 1 al 6). Si quieres ir a la segunda página de publicaciones, puedes pulsar «M», y si quieres enviar una publicación, pulsas «S».

Así que, si seleccionamos la primera publicación pulsando 1, se cargarán más detalles sobre ella y la sección de comentarios.

Verás el título, el usuario que la publicó, la hora y la sección de comentarios con su cantidad; en este caso, 42. El problema con la sección de comentarios es que algunas cadenas de comentarios pueden profundizar mucho y tener diferentes ramas, ya que varios usuarios pueden responder. Por eso, en este caso, lo que pensé fue simplemente navegar por los comentarios de nivel superior con «M» para ir al siguiente comentario y «B» para volver al anterior. Supongo que también se podría añadir una opción de «[R]esponder» para responder al comentario que se ve en pantalla. Para navegar por las respuestas, se pulsaría algo como «C» y se entraría en una página con los comentarios hijos del comentario principal. El único problema con esto es que, debido a que la pantalla es tan pequeña y limitada, la mayoría de las veces solo se podrá ver un comentario a la vez, y cuando una publicación tenga 300 comentarios, navegar por ellos será difícil.

Y así es como se vería el envío de un nuevo enlace: simplemente se «editarían» los diferentes campos y luego se pulsaría «S» para enviar.

Conclusión #

Personalmente, me divertí mucho haciendo esto. No tuve que dedicar mucho tiempo a investigar antes de empezar, ya que ya había hecho gran parte de ese trabajo en el reto del año pasado, por lo que pude centrarme en lo que quería hacer. Puedes consultar el código fuente y probarlo tú mismo en mi repositorio: https://codeberg.org/0x00cl/Web-ZX

Apéndice #

Aquí tienes vídeos de las interacciones en el ZX Spectrum.