screenshot of the quest plus history

Web Quest+ history

En febrero del 2025 decidí crear la página web questplushistory.com tras ver que no había nadie que hiciera seguimiento de los cambios en la suscripción de Meta Quest+.

Seguimiento

Más específicamente, esta es la información sobre la que hago seguimiento:

  • Juegos mensuales. Los 2 juegos mensuales que se te quedan asociados a tu cuenta.
  • Catálogo. Un catálogo de juegos de rotación continua, así que hago seguimiento de cuales entran y cuales salen del catálogo
  • Ofertas. Aquellas ofertas anunciadas por Meta que aplican descuentos masivos.

Creación del frontend

Al principio de mi relación con WordPress (allá por 2017), solía usar las herramientas de personalización de los temas para personalizar la web. Más adelante pasé a usar herramientas como Elementor, que están genial. Sin embargo, se me dio por probar el nuevo (y al parecer bastante odiado) editor de bloques Gutenberg para construir la página web y me ha gustado bastante.

Por tanto, me gustaría romper una lanza en favor de él, pues creo que el odio está en parte (y solo en parte), injustificado. Creo que gran parte de él proviene de la aversión al cambio, la cual yo no he sentido al no estar muy acostumbrado al editor clásico.

Trabajo manual

Al comienzo del proyecto subestimé el trabajo manual que implicaría mantener la página web. Pensaba que usando las funciones de Gutenberg, como la de copiar y pegar bloques, introducir la información se me haría muy llevadero.

Exceso de contenido en una misma página

Una de las cosas que no había previsto, era que el editor de la página (Gutenberg) se ralentizaría al llegar a los 30 juegos:

  • Operaciones lentas. Cada pequeña acción como copiar y pegar elementos pasaba de ser instantánea a tardar varios segundos, haciendo el proceso de añadir y cambiar cosas exasperante
  • Bugs. A menudo, los menús contextuales se quedaban atascados y se «reproducían», acumulándose y tapando el contenido de la pantalla, lo cual me forzaba a recargar la página

Cambios visuales

El hacer cambios visuales a gran escala (a todos los elementos) sí que lo había previsto. Partí de la premisa de que apenas le haría cambios una vez hubiera finalizado el proceso creativo. Y lo cierto es que no me equivoqué, pues el estilo (CSS) lo he mantenido desde entonces.

Sin embargo, no tener capacidad de maniobra en ese aspecto, es decir, que un pequeño cambio haya que replicarlo individualmente en cada elemento es un riesgo muy grande.

Curiosidades

Me pareció interesante añadirle un apartado de curiosidades («Fun Facts»), ya que me di cuenta de que había juegos que además de estar en el catálogo también habían estado en los juegos mensuales.

Hacerlo una vez es fácil, pero mantenerlo de forma manual añade mucha carga de trabajo al tener que chequear coincidencias cada vez que la lista de juegos mensuales o de catálogo cambia.

Automatización

Debido a todo lo explicado en el apartado anterior («Trabajo manual»), decidí enmendar mi error y comenzar el proceso de automatización que debería de haber aplicado desde el comienzo.

Shortcode: de JSON a HTML

Mi idea inicial era crear un shortcode que hiciera uso de la base de datos de WordPress para almacenar y consultar la información (juegos mensuales/catálogo y ofertas). Sin embargo, tras consultárselo a ChatGPT me aconsejó sustituir la base de datos por archivos JSON para una mayor eficiencia de consulta, así que le hice caso.

Además de eso, le pedí que me generara el código base para el shortcode a partir del código HTML que había creado de forma manual anteriormente. El resultado fue muy satisfactorio: el código era muy sencillo y había integrado bien el HTML original. Visualmente se veía mal porque faltaba hacerle varios ajustes, pero fue una muy buena base por la cual empezar.

A partir de esa base incrementé la lógica para que genere diferente código dependiendo de si la página es la de juegos mensuales, catálogo o ofertas. Además, añadí la lógica para que las coincidencias (curiosidades) entre los juegos mensuales y del catálogo se detectaran automáticamente.

Por si te interesara ver el código, los JSONs están siempre accesibles desde Quest+ History y he creado un gist con el shortcode.

Seguridad

Siguiendo los consejos de un curso de WordPress de Raiola Networks que hice recientemente y ChatGPT, apliqué las siguientes medidas de seguridad:

Limitar los intentos de login

Instalé el plugin Limit Login Attempts Reloaded y, si los datos que este plugin te indica son reales, había miles de intentos de login fallidos en esta web (mi porfolio). Cosa que no ocurría en la página de quest+ history, pero mejor prevenir.

Cambiar la dirección del wp-admin

Usando el plugin WPS Hide Login, pude poner una URL de login personalizada, reduciendo prácticamente a cero los intentos fallidos de acceso en todas mis webs.

Negar el acceso a los logs

Averigüé que desde el navegador puedes, siempre y cuando existan (para ello hay que tener el modo debug activado), acceder a los logs que wordpress genera. En mi caso, considero que mis logs no contienen ninguna información sensible, pero siempre es mejor prevenir que curar.

Por ello, edité el .htaccess para que prohibir el acceso a los logs.

Otros ajustes

Plugin personalizado

Al principio ponía el código del shortcode directamente en el functions.php, pero no tardé en crear un plugin personalizado para aislar el código y que no se vea afectado por actualizaciones.

Evitar traducciones

Algunos textos de la página, como los títulos de los juegos, considero que no deben ser traducidos por los navegadores. Por tanto, quería que cuando un usuario haga clic en «traducir esta página», traduzca toda la página excepto eso.

Resultó ser bastante sencillo, pues solo con el atributo de HTML5 translate=»no» era señal suficiente como para que mis navegadores no lo tradujeran. Sin embargo, apliqué también la solución legacy por si acaso: usar la clase notranslate.

Publicado en Adobe Photoshop, Edición de imagen, Software, Tecnología, Tipo, Web, Wordpress.