Códice | Entradas sobre «código»

Blogeando...

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

Etiquetas: #código, #markdown, #jekill, #ssg

Hola Mundo. Primera entrada del blog.

Nota: Esta entrada hace referencia a la versión inicial de este blog realizado con Jekill. El repositorio de esa versión del blog es: blog.

Gracias a Jekill, un Generador de Sitios Estáticos (SSG) y Github pages, hoy ve la luz este blog para volcar en él apuntes de interés sobre los temas que me apasionan.

Lo he llamado «códice» por su similitud con un conjunto de hojas sueltas cosidas entre si, como eran los libros antes de la encuadernación.

El tema gráfico empleado en este blog es Beautiful Jekyll del que hice fork traduje al español y cambié algunas configuraciones para empezar.

Si quieres crear tu propio blog, en su repositorio tienes las indicaciones necesarias para instalar todo.

Fizz buzz

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

Etiquetas: #código, #javascript, #algoritmia

«Fizz buzz» es un ejercicio que habitualmente se usa como prueba para la selección de candidatos en programación. Su origen es un juego de niños para aprender a dividir.

Escribir un programa que muestre en pantalla los números del 1 al 100, sustituyendo los múltiplos de 3 por la palabra “fizz”, los múltiplos de 5 por “buzz” y los múltiplos de ambos, es decir, los múltiplos de 3 y 5 (o de 15), por la palabra “fizzbuzz”.

Este simple enunciado encierra toda una gama de posibilidades en su algoritmo de resolución, y en él es de importancia tanto la rapidez con la que se resuelve el problema como la optimización (u originalidad) del código.

Esta es mi propuesta de resolución en JavaScript.

const result = [];

for (let i = 1; i <= 100; i++) {
  let value = '';

  if (i % 3 === 0) value += 'fizz';
  if (i % 5 === 0) value += 'buzz';

  result.push(value || i);
}

console.log(result.join(', '));

Básicamente el programa comprueba en bucle si cada número del 1 al 100 es divisible por 3 ó por 5. Si lo es, guarda «fizz», «buzz» o «fizzbuzz» en el caso de ser divisible por los dos (3 y 5). Si no lo es, guarda el número que estoy evaluando y pasa al siguiente número.

Esta es una versión que además de correcta, es muy legible. Pero si quisiéramos hacer una versión al estilo funcional, por ejemplo para usarla en React, podríamos emplear map.

const result = [...Array(100).keys()]
  .map(i => {
    const n = i + 1;
    return (n % 3 ? '' : 'fizz') + (n % 5 ? '' : 'buzz') || n;
  })
  .join(', ');

console.log(result);

¿Crees que puede optimizarse más?

Ver el código de este y otros retos de programación en GitHub.

Lógica interactiva

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

Etiquetas: #código, #javascript, #algoritmia

Programar es una diversión difícil. En ocasiones las interacciones entre los disparadores de eventos y los estados de las variables y los objetos interelacionados multiplican sus opciones, haciendo complicado establecer, de memoria, todas las permutaciones posibles para no dejar ninguna de ellas sin implementar en nuestro código.

En la página que he preparado para ilustrar esta entrada, tenemos cinco botones de un menú de opciones. Cada opción interactúa con los estados de los otros botones mientras se van añadiendo, quitando o cambiando elementos del DOM (en este caso artículos de una sección), y activando o desactivando los botones según sea necesario en cada momento. Es fácil entender la mecánica del ejemplo probándolo.

Los disparadores son los botones que generan eventos, y algunas condiciones del propio programa, como cuando hemos borrado todos los elementos del DOM o cuando añadimos el primer elemento tras ello. Los estados corresponden a los botones ON/OFF, y al valor de las variables que se emplean para llevar a cabo las acciones asignadas a cada botón.

Imaginemos que con el botón «Cambiar» alteramos el contenido del último elemento de la lista de elementos que hemos añadido al DOM (como se ve en la imagen). Esto hará que el botón «Cambiar» se desactive en este momento, porque ya no tenemos que cambiar el elemento recien cambiado, y el botón «Limpiar» se active, si no lo estaba ya, para ofrecer al usuario la opción de limpiar los elementos cambiados. Si borramos seguidamente este último elemento con «Borrar», deberemos comprobar si el botón «Limpiar» debe desactivarse si ya no hay elementos cambiados, y si el botón «Cambiar» debe activarse de nuevo si el que ahora es el último elemento no fue cambiado anteriormente, o mantenerse desactivado en tal caso. Añadir nuevos elementos altera otra vez el estado del botón «Cambiar» que debe activarse ofreciendo la opción de cambiar este nuevo elemento. Estas son algunas de las permutaciones posibles.

Tabla «disparadores/estados»

Mediante una tabla en una sencilla hoja de cálculo podemos contabilizar en el eje de las Y (primera columna) todos aquellos disparadores (eventos y condiciones) de nuestra aplicación, y en el eje de las X (filas) todos los estados, tanto de las variables como de los objetos (botones u otros), y ver cómo se interelacionan en tiempo de ejecución. Lo difícil entonces será determinar con claridad cuáles son los disparadores y cuáles los estados. Si lo hacemos bien, con esta herramienta podemos clarificar, sin olvidar nada, cada interacción lógica derivada de las opciones de la aplicación, de forma similar a como se ve en la siguiente imagen.

En este ejemplo, «Arranque» se refiere al estado de los botones al inicio. «Click btn…» corresponde a la pulsación de cada uno de los cinco botones. «Sin elementos» corresponde a la situación en la que se han borrado todos los elementos. «Añadir primer elemento» corresponde a los cambios a realizar cuando esta condición se presenta. Por último, «Click de inicio» y «Click de parada» corresponden al estado de los botones cuando los pulsamos y cuando se termina de realizar su tarea asignada. Como se aprecia, los botones son desactivados al pulsarlos para impedir que puedan ser pulsados de nuevo en tanto no terminen su ejecución, momento en el que (algunos de ellos) son reactivados.

Esta tabla resumida incluye sólo la interacción de estados de los botones, -obviando el estado de las variables para no complicar el ejemplo-, anotando en las celdas de cada columna el estado del botón según los disparadores indicados al principio de cada fila. A la hora de pasar a la fase de codificación de nuestra aplicación, nos será fácil determinar si hemos implementado todas y cada una de las interacciones posibles reflejadas en la tabla simplemente cotejándola. Cuando tengas ante ti un abanico de opciones inabarcables, esta puede ser una solución para salir del atolladero.

De paso, este ejercicio sirve para mostrar el uso de JavaScript en el manejo de nodos del DOM.

Descargar la tabla de decisiones completa del ejercicio en formato .ods (Open Document) o .xls (Excel).

Actualización. Ver este ejemplo de uso de botonera aún más complicado: Cronómetro en JavaScript

Un simple efecto Parallax

JavGuerra — Tue, 03 May 2022 00:00:00 GMT

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

Parallax es un efecto que se aplica generalmente a las imágenes de fondo de una página web, y que consiste en mantener estático, o mover a una velocidad distinta, el resto de los elementos de la página al hacer scroll. Parecerá de esa forma que la página tiene profundidad. En mi página de ejemplo a la que hacía referencia en este post, puede verse aplicado en la portada o zona «Hero».

esto se consigue de una forma muy sencilla. Sólo tienes que crear un div en el HTML y ponerle una clase, p. ej. «.parallax», y luego, en el CSS, en esa clase, incluir la altura que le darás al div y la imagen de fondo que le vas a poner. Por supuesto, dentro de ese div puedes incluir texto, imágenes… En el caso del ejemplo mencionado puse el título de la página.

min-height: 100vh;
background: url("fondo.jpg") center/cover no-repeat fixed;

Estas son las dos líneas que he incluido en mi código para lograrlo. La primera le dice al navegador que el div va a tener la altura de la ventana del navegador, sea esta cual sea. Pero también se puede poner un valor fijo, por ejemplo height: 300px.

La segunda le dice al navegador que el div va a tener una imagen de fondo, en este caso fondo.jpg, y que la tiene que poner centrada vertical y horizontalmente (center), ocupando todo el ancho del div (cover), y poniéndola fija (fixed) para que no se mueva. Este es el efecto que buscamos.

El fixed lo hace todo. El fondo del div permanecerá estático, y la página lo irá tapando a medida que hacemos scroll hacia abajo.

En esta otra página landing que realicé para un evento, puede verse un uso parecido de efecto parallax a modo de cortinilla o separador de sus distintas secciones.

Este efecto tiene un inconveniente, y es que no funciona bien en el navegador Safari en iOS (iPad/iPhone), como se comenta aquí, aunque es posible encontrar soluciones más o menos imaginativas buscando por Internet.

Mis páginas de ejemplo con este efecto Parallax:

- post

El efecto Parallax puede complicarse aún más para conseguir resultados increibles. Puedes encontrar ejemplos con sólo una búsqueda.

Accesibilidad Web

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

Etiquetas: #código, #html, #css, #javascript, #accesibilidad, #usabilidad

«El poder de la Web está en su universalidad. El acceso por cualquier persona, independientemente de la discapacidad que presente es un aspecto esencial.»

Fuente: World Wide Web Consortium Launches International Program Office for Web Accessibility Initiative. Tim Berners-Lee, Director del W3C e inventor de la World Wide Web.

Todos presentaremos en algún momento de nuestra vida alguna discapacidad en menor o mayor grado. El envejecimiento de la población acentúa esto, sumando un número destacable de personas que requieren algún tipo de adaptación (visual, auditiva, cognitiva, motriz) a la hora de acceder a la información en línea, por eso es importante que nuestras webs tengan esto en cuenta para poder llegar a cualquier tipo de público.

Con ayuda de la página de ejemplo que preparé y reseñe en esta entrada, iré describiendo algunas buenas prácticas que suelo emplear en las webs que desarrollo.

Comprensión del contexto

Para algunas personas el acceso a la web es posible sólo mediante el uso de programas de lectura de pantalla que traducen la página de arriba a abajo, secuencialmente, a mensajes de voz o a líneas de lectura en un teclado Braille.

Esta entrada no pretende ser un completo compendio de buenas prácticas, sino un acercamiento básico al sentido de la accesibilidad web que permita sensibilizar sobre ello.

Mi primer objetivo es pues dar a conocer adecuadamente el contexto en el que cada elemento de la página se presenta y describir cada cosa que lo necesite, como la misma página, a través de un <title> o las imágenes con el atributo alt (Los iconos, a no ser que tengan alguna función informativa, no requieren de este atributo). Afortunadamente. esta es una práctica comúnmente usada por los desarrolladores hoy día. Pero hay más.

Redes Sociales
Cuando compartimos nuestra web en redes sociales, queremos que esto ayude a generar visitas, por lo que es bueno contar con una descripción y una imagen que referencie adecuadamente su contenido. Mediante el protocolo Open Graph conseguimos que esta información sea ofrecida de manera automática al publicarla en la red social. Esto se consigue mediante una serie de indicaciones en el head de la página que contienen la información necesaria debidamente formateada. Pues bien, esto que nace como un recurso para SEO y para conseguir clics de potenciales visitantes, también ayuda a las personas con alguna discapacidad a realizar una mejor navegación informándoles de lo que encontrarán al hacer clic, ahorrándoles incertidumbre y tiempo valioso.

El lenguaje
Hay al menos dos cuestiones de importancia a tener en cuenta en este apartado:

El contenido debe ser claro, orientado a todo tipo de público, y bien estructurado para que cualquier persona, incluso aquella que presente problemas de comprensión lectora, pueda entenderlo.
La página debe contar con el atributo lang en la etiqueta html (lang="es") que describe el idioma principal de la página. Todos aquellos textos y enlaces que se presenten en otro idioma deben ir debidamente señalizados con la esta etiqueta también. Ver este ejemplo: <span lang="en">front end</span>. Cuando se escucha una página a través de un sintetizador de voz, se agradece que las palabras en otro idioma no generen confusión.

El color Para las personas con baja visión o con afecciones en la percepción de los colores, es importante que los textos y el fondo presenten un contraste adecuado para que sean legibles.

Ir al contenido
Cuando usamos lectores de pantalla se hace tedioso escuchar o leer toda la información del header (titulo, menú de navegación…) una y otra vez, por lo que es de ayuda contar con un enlace al principio de la página que nos lleve directamente al contenido. Algo como esto: <a href="#contenido" class="sr">Ir al contenido</a>. Al hacer clic en el enlace saltaremos directamente al <main>, ahorrándonos un tiempo valioso. Pero no querremos que este enlace aparezca en nuestro diseño web visual. Mediante la clase .sr conseguimos esto. en mi caso, la clase que aplicamos a este enlace contiene lo siguiente:

.sr {
  position: absolute;
  overflow: hidden;
  text-indent: -9999px;
}

La clase .sr hará que la etiqueta exista y pueda ser leída por un lector de pantalla, que no toma en cuenta dónde se ubican visualmente los elementos de la página, pero no se mostrará en nuestro diseño, porque estará oculta en -9999px, fuera de la pantalla.

Esta técnica es útil también para incluir comentarios de navegación, información complementaria, incluso, como en el caso del formulario que incluye la web, para mostrar las etiquetas de los campos del formulario que han sido eliminadas del diseño por una cuestión estética.

Por supuesto, la página debe estar adecuadamente estructurada con las etiquetas semánticas correspondientes (section, article, etc.) para poder realizar una navegación secuencial correcta.

Interactividad
Al interactuar con la página, botones, enlaces y campos de formulario deben estar adecuadamente identificados, y dotados de un contexto semántico (p.ej. label). Los enlaces deben ser auto-descriptivos, de tal forma que al leer el texto del enlace sepamos que nos depara hacer clic en él.

No es muy complicado cuando tomamos conciencia de ello, pero existe una traba mayor, los cambios en la página. Cuando hacemos clic en un menú desplegable, la página cambia para mostrarnos una información que hasta ahora no estaba disponible. Cuando introducimos un valor erróneo en un campo de formulario, el mensaje de error que se muestra es una aparición que debe ser notificada, y el foco de dónde comenzar a escribir para corregir ese dato debe apuntar al campo erróneo.

Mediante el uso de etiquetas WAI-ARIA podemos describir esos eventos y mostrar sus estados correctamente. Veamos el siguiente ejemplo.

<button id="hamburguesa" aria-controls="menu" aria-label="Botón de menú" aria-expanded="false">
    <span class="barra1"></span>
    <span class="barra2"></span>
    <span class="barra3"></span>
</button>

<nav id="menu">
    <ul>
        <li><a href="#descripcion">Descripción</a></li>
        <li><a href="#perfiles">Perfiles</a></li>
        <li><a href="#tecnologias">Tecnologías</a></li>
        <li><a href="#contactar">Contactar</a></li>
    </ul>
</nav>

Esta pieza de código corresponde al menú de la página. El <button> permite que se despliegue o se repliegue (ON/OFF) el menú del <nav> cuando nuestro dispositivo tiene una pantalla pequeña (es responsive). Así pues, con aria-controls="menu", establecemos esa relación. Con aria-label="Botón de menú" aportamos una descripción de la función del botón. Y con aria-expanded="false" indicamos si el botón esta activado o no. En este caso aparece como false, desactivado, pero esto cambia al hacer clic en él, y es nuestra responsabilidad actualizar esta etiqueta mediante JavaScript, como se hace en el fichero script.js:

const h = document.getElementById("hamburguesa");
h.onclick = hamburguesa;
...
h.setAttribute(
    "aria-expanded",
    h.getAttribute("aria-expanded") === true ? false : true;
);

Al hacer click en el botón del menú (‘hamburguesa’ llamado así porque su icono de tres líneas se asemeja al famoso bocadillo), la etiqueta aria-expanded cambia su valor de false a true o viceversa. Así informaremos al usuario de un lector de pantalla si el botón está pulsado o no en cada momento.

Tablas
Las páginas pensadas para su uso por terminales móviles primero (responsive) ayudan mucho a clarificar el flujo del contenido de la navegación, pero si hay algo que rompe con todo ello son las tablas. ¿Cuál es el orden correcto para leer una tabla? ¿fila a fila? ¿Y qué hay de las columnas o filas agrupadas?

Las etiquetas semánticas nuevamente son de ayuda aquí (<thead>, <tbody>, <tfoot>, y <tr> para los encabezados) y algunos atributos de HTML ayudan a paliar esto en cierta medida, como scope="colgroup" (columnas) y scope="rowgroup" (filas) que indican que las siguientes filas o columnas forman parte de un grupo con un mismo contexto.

Como se puede ver en la tabla de la web de ejemplo, todas las celdas debajo de la celda del encabezado «Front end» o del encabezado «Back end» estarían dentro de un colgroup y las celdas al lado de las celdas de encabezado «Desarrollo», «Diseño», «Sistemas», etc. estarían dentro de un rowgroup. No es una solución perfecta, pero definiendo estos bloques, ayudamos a la navegación. Estas etiquetas se suelen aplicar a los elementos <th>.

Conclusiones

Hacer desarrollo web accesible no es más complicado que hacer diseño responsive, aunque implica dedicarle un poco más tiempo y empatía.

Para que tus diseños sean exitosos, contempla lo siguiente:

Hacer contenido claro, bien estructurado, y definir adecuadamente el contexto de cada cosa que mostremos en la web. Desarrollamos para personas.
Aportar atajos y ayudas a la navegación si es posible, y sin exagerar.
Vigilar los eventos interactivos, y señala adecuadamente sus estados.
Revisar el código con herramientas que nos permitan conocer si hemos pasado algo por alto, y así corregirlo, como el complemento WAVE para el navegador.

Enlaces de interés:

Introducción a la accesibilidad web - W3C
Accesibilidad Web - Wikipedia
Normas de accesibilidad - PAE
Unidad de accesibilidad digital - Universidad de Alicante
Sergio Luján Mora - Profesor universitario experto
Usable y accesible - Consultora freelance
complemento WAVE - Herramienta
WAI-ARIA - Estándar

Validación de formularios

JavGuerra — Fri, 13 May 2022 00:00:00 GMT

Etiquetas: #código, #html, #javascript, #formularios, #usabilidad

¿Cómo procesar un formulario antes de enviarlo, realizando validaciones propias en sus campos y aprovechando simultáneamente la validación de restricciones implícita en HTML5?

Que ambos tipos de validaciones se den al mismo tiempo es importante, ya que si esto se hiciera consecutivamente, es decir, una a continuación de la otra, llevando a cabo primero nuestra validación y luego la de HTML5, correríamos el riesgo de que los campos propios ya validados pudieran ser alterados por el usuario una vez pasada la primera validación, si en la segunda validación hay campos erróneos que obligan al usuario a editarlos, y por tanto el formulario se enviaría con errores. Veamos cómo se haría.

Tenemos un formulario con tres campos requeridos (obligatorios): «nombre», «edad» y «correo», y al campo «edad» le añado una restricción propia, que su valor debe ser mayor o igual a 16, y si esto no se cumple, deberé mostrar un mensaje de error personalizado en el mismo campo (al estilo de los mensajes de error de HTML5). El formulario cuenta con dos botones: «Borrar» y «Enviar».

Si no tuviésemos que realizar nuestra validación, el proceso sería sencillo, ya que HTML se ocupa de todo por nosotros. Al hacer click en el botón enviar de tipo submit (<button type="submit">Enviar</button>), se lanza el evento submit(), y el formulario se envía si no hay errores tras validarlo, o nos muestra los errores de validación de campos implícita en HTML5. Pero para poder realizar nuestras propias validaciones debemos romper este flujo, y tomar el control de la validación.

Tomando el control

Esto podemos hacerlo de dos formas:

Capturamos el evento submit() asociado al botón «Enviar» con enviar.addEventListener('click', validaForm); en JavaScript, incluyendo en function validaForm(evento) un evento.preventDefault(); que evite que el action del formulario se procese, y realizando por nuestra cuenta todas las validaciones (las propias y las de HTML5), usando su (API), para terminar lanzando el evento form.submit() que retomará el curso del formulario.
Usamos un botón «Enviar» que no incluya el type="submit", y asociamos este botón a un evento que llame a la función de validación validaForm() desde la cual, al final, lanzaremos también el form.requestSubmit() si se cumplan las dos condiciones de este ejemplo: edad correcta y campos obligatorios rellenados.

La opción elegida aquí es la segunda por ser la más simple para cumplir el objetivo marcado de llevar a cabo ambas validaciones. Desde la mencionada función validaForm() comprobamos la edad con la función validaEdad() que debe devolver True o False, y comprobamos nosotros mismos si el formulario tiene errores con form.checkValidity(), que también devuelve True o False. Si ambas comprobaciones son True, el formulario se envía.

Al utilizar form.requestSubmit(), el navegador se comporta exactamente igual que si el usuario hiciera clic en un botón de envío: ejecuta automáticamente la validación nativa (respetando atributos como required o pattern), muestra los mensajes de error al usuario si algo falla y dispara el evento submit, permitiendo que el formulario se gestione de forma segura y completa.

Veamos el código JavaScript:

01. const enviar = document.querySelector('#enviar');
02. const form   = document.formulario;
03. 
04. enviar.addEventListener('click', validaForm);
05. 
06. function validaForm(evento) {
07.   evento.preventDefault();
08.   if (validaEdad() && form.checkValidity()) {
09.     alert('Ambas validaciones son correctas.');
10.     form.requestSubmit();
11.   } else {
12.     alert( 'El formulario contiene errores.' );
13.   }
14. }
15. 
16. /* Comprueba que el usuario tenga más de 16 años */
17. function validaEdad() {
18.   const edad = Number(form.edad.value);
19.   if (edad < 16) {
20.     form.edad.setCustomValidity('Demasiado joven.');
21.     return false;
22.   }
23.   form.edad.setCustomValidity('');
24.   return true;
25. }

Para llegar a esta solución me inspiré en una pregunta realizada en StackOverflow, y en el enlace de W3Schools que aparece en la señalada como mejor respuesta de esa pregunta.

En caso de tener que llevar a cabo más validaciones propias, bastaría con encadenarlas en el ìf() de la línea 8, o crear una función a parte que incluya todas nuestras validaciones, que sustituya a validaEdad() y que devuelva True o False.

La función validaEdad()

Cuando se ejecuta la función validaEdad(), pueden pasar dos cosas:

Si la edad no es la adecuada, se marca el error en la línea 20: Al pasar un texto como 'Demasiado joven.', el navegador marca el campo como inválido. Mientras exista este mensaje, el formulario estará bloqueado y no se podrá enviar.

Si la edad es la adecuada, se limpiar el error en la línea 23: Es imprescindible pasar una cadena vacía '' cuando el dato sea correcto. Esto indica al navegador que el campo vuelve a ser válido, permitiendo así el envío. Si no “limpias” el mensaje al cumplirse la condición, el campo quedará marcado como erróneo permanentemente.

Debes aplicar esta misma lógica en cada validación propia que realices.

Valida / NO valida

¿Qué ocurre si la edad no es correcta o si uno de los campos obligatorios está vacío? Como el formulario no es correcto, se mostrará la alerta de la línea 12. Podemos sustituir esta alerta del ejemplo por una serie de acciones de aviso al usuario u otras para informar de que algo no ha ido bien (o no hacer nada, si no necesitamos el else). En caso contrario, si todo ha ido bien, el formulario será válido, y se llevará a cabo lo estipulado en las líneas 9 y 10.

La alerta de la línea 9 del ejemplo puede sustituirse por cualquier cosa que queramos llevar a cabo antes de enviar el formulario en la línea 10, por ejemplo, mostrar los valores de los campos para que el usuario los revise antes de enviar, si estamos realizando una compra, un envío de dinero… Por último, en la línea 10, enviamos el formulario con form.requestSubmit().

Eso es todo. Puedes ver el ejemplo empleado en esta entrada y más información relacionada en los siguientes enlaces:

Enlaces

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:

Paginación

JavGuerra — Mon, 30 May 2022 00:00:00 GMT

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

Imaginemos una lista de entradas de un blog, o una galería de imágenes, con un número de items o elementos alto. Pongamos mil. Esto se hace difícil de manejar, tanto por las dimensiones de las pantallas como por el número de elementos al que el usuario prestará atención, y también existe un problema técnico, el consumo de memoria que implica mostrar todos los items de esa lista, y el tiempo que tarda en hacerlo. Ese retraso entre que se carga la página, se «pinta» y se devuelve el control al usuario supone un tiempo de espera incómodo.

Paginar es mostrar el contenido separado en páginas para, de esta forma, hacerlo más asequible al usuario, y esta es la solución de la que hablaré en esta entrada.

Planteamiento

Nota: Para una mejor comprensión de la resolución de este ejercicio, algunas variables que podrían ser globales, como es el caso de longitud del vector y otras, se repiten en las disitntas funciones.

En un vector o array tenemos una serie de elementos o items que queremos mostrar paginados, y queremos que estos items se muestren por ejemplo de diez en diez. Para hacerlo necesitaremos el vector, el número de elementos por página y deberemos averiguar el número de páginas que podemos mostrar. Luego recorreremos las páginas ayudandonos de una variable que hará las veces de índice.

Para mostrar el resultado, el HTML contendrá lo siguiente:

<section id="galeria" role="region" aria-live="polite"></section>

<section id="navegacion">
    <button id="irInic" aria-label="Inicio">&lt;&lt;</button>
    <button id="anteri" aria-label="Anterior">&lt;</button>
    <span   id="pagina" role="region" aria-live="polite"></span>
    <button id="siguie" aria-label="Siguiente">&gt;</button>
    <button id="irFin"  aria-label="Fin">&gt;&gt;</button>
</section>

Una sección galeria donde mostrar los items. en este caso las imágenes.

Una sección de navegacion con los botones para recorrer las páginas y donde informar al usuario de la página donde nos econtramos.

Esto implica la siguiente configuración de valores iniciales en el fichero .js:

let nFotos  = 10;
let pagina  = 1;
let galeria = [];

/* Obtener los datos a incluir en galeria */

elGaleria = elemento('#galeria');
elPaginac = elemento('#pagina' );

btnIrInic = elemento('#irInic' );
btnAnteri = elemento('#anteri' );
btnSiguie = elemento('#siguie' );
btnIrFin  = elemento('#irFin'  );

btnIrInic.onclick = inicial;
btnAnteri.onclick = anterior;
btnSiguie.onclick = siguiente;
btnIrFin.onclick  = final;

paginacion(galeria, pagina, nFotos);

/* Devuelve un elemento */
function elemento(sel) { return document.querySelector(sel); }

La variable nFotos contiene el número de elementos por página. Iniciamos la variable pagina a 1, y el vector galeria, que contendrá las rutas a las imagenes, a un vector vacío [].

Para cargar la lista de imágenes de la galería en el vector galeria, podemos usar fetch() contra una API o un JSON guardado localmente, por ejemplo.

Seguidamente obtenemos los elementos elGaleria y elPagina y los cuatro botones para movernos por las páginas de la galería. A cada uno de ellos le asignamos un evento que ejecutará una función al hacer click que nos llevará a la primera página, a la anterior, a la siguiente o a la última respectivamente, alterando el valor de la variable pagina y llamando a la función que muestra la galería. Veamos estas funciones:

/* Va a la primera página */
function inicial() {
    pagina = 1;
    paginacion(galeria, pagina, nFotos);
}

/* Va a la página anterior */
function anterior() {
    pagina--;
    paginacion(galeria, pagina, nFotos);
}

/* Va a la página siguiente */
function siguiente() {
    pagina++;
    paginacion(galeria, pagina, nFotos);
}

/* Va a la última página */
function final() {
    let longitud = galeria.length;
    pagina = Math.ceil(longitud / nFotos);
    paginacion(galeria, pagina, nFotos);
}

Cada una de estas cuatro funciones llama a la función paginacion, para acutalizar el contenido de la galería con tres valores: el vector, la página a mostrar y el número de fotos por página.

En la función final calculo el número de páginas posibles atendiendo a la longitud del vector, así, obteniendo el valor entero resultante de dividir la longitud del vector entre el número de imágenes por página devolverá el número de la última página (o el número total de páginas) que guardo en pagina, valor que necesito para llamar a la función paginacion.

Paginando

/* Pagina los elementos de un vector en función de página y elementos por página */
function paginacion(vector, pagina, elementos) {
    let longitud, numPags, inicio;
    longitud = vector.length;
    if (longitud) {
        // Averigua el elemento de inicio
        numPags = Math.ceil(longitud / elementos);
        if (pagina > numPags) pagina = numPags;
        if (pagina < 1) pagina = 1;
        inicio = (pagina - 1) * elementos;
        // Ajusta el número de elementos si se requiere
        if (longitud < elementos) {
            elementos = longitud;
        } else if (longitud - inicio < elementos) {
            elementos = longitud - inicio;
        }
        // Resuelve
        ctrlBotonesPag(pagina, numPags);
        listaElementos(vector, inicio, elementos); 
    }
}

Esta es la función donde se produce la «magia». Tras hallar la longitud del vector recibido, si esta es mayor que cero, paso a calcular primeramente el elemento de inicio de la página que vamos a mostrar. Si la pagina es 1, elemento del vector que guardará inicio será 0 (cero), si la página es la 2 el valor será 10, -pues cabe recordar que el número de elementos por página (nFotos) es 10-, y así sucesivamente.

Realizo una serie de comprobaciones para obtener el valor de inicio adecuado: Si la página que recibimos por parámetros es mayor que el número de páginas posibles del vector, la página a mostrar será la última. Si el valor de página es menor que 1, el valor de página será 1, evitando de esta forma que el programa intente mostrar elementos del vector que no existen.

Una vez tengo el valor de inicio veo si es necesario ajustar el número de elementos que se mostrarán en la página. Así, si el número de elementos por página (nFotos) es mayor que el número de items del vector, el valor de elementos se ajusta al número total de items del vector. Sino, se comprueba si el número de items que quedan por mostrarse en esta página (longitud - inicio) es menor que el número de elementos (nfotos), y si es así, se ajusta el valor de elementos. Este caso ocurre cuando la última página tiene un número de elementos menor que el de nFotos.

Como ya tengo todo lo que necesito, llamo consecutivamente a dos funciones, la encargada de activar o desactivar los botones ctrlBotonesPag(pagina, numPags); y la encargada de «pintar» la galería listaElementos(vector, inicio, elementos); mostrando las fotos y la información relativa a la página. Veamos la primera de ellas:

/* Activa o desactiva los botones según la página */
function ctrlBotonesPag(pagina, numPags) {
    btnInactivo(btnIrInic, false);
    btnInactivo(btnAnteri, false);
    btnInactivo(btnSiguie, false);
    btnInactivo(btnIrFin,  false);
    if (pagina == 1) {
        btnInactivo(btnIrInic, true);
        btnInactivo(btnAnteri, true);
    }
    if (pagina == numPags) {
        btnInactivo(btnSiguie, true);
        btnInactivo(btnIrFin,  true);
    }
}

Esta función primeramente activa todos los botones, por si fuese el caso de que alguno de los ellos hubiera sido desactivado previamente, y luego comprueba si estamos en la primera página, desactivando entonces los botones de ir al inicio de la galería (btnIrInic) e ir a la página anterior (btnAnteri) o si estamos en la última página, desactivando entonces ir al a página siguiente (btnSiguie) e ir al final de la galería (btnIrFin).

Para activar y desactivar los botones, empleo la siguiente función:

/* Cambia el estado de un botón dado */
function btnInactivo(boton, estado) {
    boton.disabled = estado;
    boton.setAttribute('aria-disabled', estado);
}

Recibe como parámetros el botón y el estado que deseamos ponerle: true = inactivo o false = activo.

Una vez tengo los botones en sus estados correctos, sólo queda mostrar la galería.

Mostrando

/* Muestra la cantidad de elementos de un vector desde la posición dada */
function listaElementos(vector, inicio, elementos) {
    let longitud = vector.length;
    let primero  = inicio + 1;
    let fin = inicio + elementos;

    elGaleria.textContent = '';
    elPaginac.textContent = '';
    botonera(false);

    vector.slice(inicio, fin).forEach(
        (urlFoto, i) => {
            /*
             * Código para mostrar la galería
             */
        }
    )

    elPaginac.innerHTML = `Fotos: ${primero} a ${fin} de ${longitud}`;
    botonera(true);
}

Los parámetros que recibimos son el vector (galeria), el número del item inicial (ìnicio) y los elementos por página (nFotos) a mostrar. Con ellos obtengo la longitud, el número de orden del elemento primero de la página inicio + 1 y el elemento final del vector que debemos mostrar inicio + elementos.

Seguidamente limpio la página para: el contenido de la galería, el contenido de la info de la paginación, y oculto la botonera. Esto último lo hago con la función botonera(status) que veremos al finalizar.

Con vector.slice(inicio, fin).forEach((urlFoto, i) => { // }) primeramente obtenemos los elementos del vector que necesitamos con .slice(inicio, fin) y mediante el .forEach() itero los elementos a mostrar, obteniendo del vector la url de la foto (urlFoto) y el índice (i) de elementos del .forEach(). Dentro de la función flecha se debe incluir el código para mostrar las imágenes dentro del elemento elGaleria del HTML, por ejemplo:

elGaleria.innerHTML +=`<div><a href="${urlFoto}" target="_blank">`
    + `<img src="${urlFoto}" alt="Foto ${primero + i}" /></a></div>`

Al terminar de recorrer el vector resultante de aplicar .slice(), incluyo la información de la página en el elemento elPagina del HTML, y muestro la botonera que anteriormente oculté. Esta sería la función para hacerlo que mencioné antes:

/* Activa o desactiva la botonera */
function botonera(status) {
    btnIrInic.style.display = status ? 'initial' : 'none';
    btnAnteri.style.display = status ? 'initial' : 'none';
    btnSiguie.style.display = status ? 'initial' : 'none';
    btnIrFin.style.display  = status ? 'initial' : 'none';
}

Como se aprecia, true = activa y false = desactiva la botonera mostrándola u ocultándola.

Con esto ya tendríamos presentada la página de la galería con el número de elementos indicado, la información de la página y los botones para movernos por la galería, que era el objetivo de esta entrada.

Enlaces

Podemos ver un caso de uso en esta:

El ejemplo anterior usa la API Dog CEO.

Spinner loader asíncrono

JavGuerra — Mon, 30 May 2022 00:00:00 GMT

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

Durante los procesos asíncronos que se llevan a cabo, por ejemplo al usar fetch() para consumir una API remota, se producen retrasos al mostrar los resultados en el navegador. El uso de spinner loader ayuda a informar al usuario de que uno o varios procesos están en marcha y se está procesando la información que solicitó tal vez mediante un campo de búsqueda.

Girando…

Para mostrar un spinner loader por pantalla cuando uno o varios de estos procesos se estén ejecutando necesitaré:

Una función que active o desactive el spinner loader según un valor de status true/false.
Una función que compruebe si hay o no procesos asíncronos activos aún.
Ubicar en pantalla el spinner loader.

El HTML deberá contener la siguiente línea:

<dialog id='zona'><div class="spinner"></div></dialog>

La etiqueta <dialog> es relativamente desconocida, pero de gran utilidad. La descubrí en este twitt de @Manz. Esta etiqueta permite crear ventanas modales con HTML. <dialog> muestra una ventana por encima del contenido de la página y aplica un efecto de fondo sombreado al resto de la página.

Para dibujar el spinner loader, seguí las indicaciones de la entrada «Cómo crear un spinner loader con CSS» Este es el código CSS que incluye también el del diálogo.

#zona {
  border: none;
  background: none;
}

#zona:focus {
  outline: none;
}

.spinner {
  margin: 0 auto;
  border: 5px solid LightGray;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border-left-color: LightSeaGreen;

  animation: spin 1s ease infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

El modal identificado como #zona se mostrará sin fondo y sin borde, osea, totalmente transparente. En él muestro el spinner loader. #zona tendrá el tamaño del spinner loader, y aparecerá centrado tanto vertical como horizontalmente en la pantalla, manteniéndose centrado aún haciendo scroll.

Con .spinnerse describe el aspecto del spinner loader y se indicará que debe animarse infinitamente girando 360 grados cada segundo.

Activando / desactivando

Como estamos trabajando con procesos asíncronos, se puede dar el caso de que, al lanzar un proceso asíncrono, el spinner loader ya esté mostrado, por tanto no tendremos que mostrarlo. Debo controlar si hay procesos asíncronos en marcha. Esto lo hago con una simple variable spin que va incrementando o decrementando su valor según el número de procesos asíncronos lanzados.

Inicializo también la variable intervalo que usaré para controlar un setInterval() que comprueba periódicamente el estado de los procesos asíncronos, osea, la variable spin.

Capturo la #zona donde se mostrará el diálogo modal con el spinner loader, como se muestra a continuación:

let spin = intervalo = 0;
elZona   = document.querySelector('#zona');

Veamos cómo funciona la activación o desactivación asíncronas mediante el siguiente código:

/* Activa o desactiva el spin */
function ponSpin(estado) {
    estado ? spin++ : spin--;

    if (estado && !intervalo) {
        intervalo = setInterval(compruebaSpin, 300);
        elZona.showModal();
    }
}


/* Comprueba si el spin ha llegado a cero y desactiva comprobación */
function compruebaSpin() {
    if (!spin) {
        clearInterval(intervalo);
        intervalo = 0;
        elZona.close(); 
    }
}

Cuando iniciamos un proceso asíncrono, se debe llamar a la función ponSpin(true) con el valor true, esto incrementará en 1 el valor de spin. Sólo si estoy incrementando spin (estado = true), y es la primera vez que se activa (!intervalo), lanzo compruebaSpin() cada 300 milisegundos con intervalo = setInterval(compruebaSpin, 300);y muestro la ventana modal que contiene el spinner loader con elZona.showModal();.

Es necesario lanzar el setInterval() porque desconocemos en qué momento los procesos asíncronos terminarán, por lo que se debe comprobar el estado de los procesos cada cierto tiempo.

Al finalizar un proceso asíncrono debemos llamar de nuevo a la función con ponSpin(false), y el valor false decrementará en 1 el valor de spin, que irá decreciendo hasta llegar a 0.

La función compruebaSpin(), como vimos, es lanzada cada 300 milisegundos, y su función es comprobar si spin ha llegado a 0, y si es así, desactiva el setInterval() y oculta la ventana modal que contiene el spinner loader con elZona.close();.

Importante: Hay que ser cuidadoso para indicar tantos cierres del spinner loader como aperturas se llevan a cabo, es decir, por cada ponSpin(true) debe haber un ponSpin(false), de otra forma, podemos quedarnos con un spinner loader girando indefinidamente o que se cerró antes de haber concluido todos los procesos asíncronos.

Este podría ser un ejemplo de código para poner en marcha y concluir un spinner loader:

/* Consulta la API en la ruta dada y ejecuta la función callback() */
function consultaAPI(ruta, callback) {
    ponSpin(true);
    fetch(ruta)
        .then(respuesta => { // fetch() no maneja errores de conexión, luego...
            if (!respuesta.ok) throw Error(respuesta.statusText);
            return respuesta.json();
        })
        .then(data => callback(data))
        .catch(err => {
            console.error(err);
        })
        .finally( ponSpin(false) );
}

Enlaces

Podemos ver un caso de uso en esta

El ejemplo anterior usa la API Dog CEO.

Info sobre la etiqueta <dialog>.
Artículo «Cómo crear un spinner loader con CSS».

Contador de resultados

JavGuerra — Sat, 04 Jun 2022 00:00:00 GMT

Etiquetas: #código, #css, #html, #javascript, #svg, #usabilidad

La información visual es percibida con más claridad que la escrita. A la hora de mostrar resultados, por ejemplo los aciertos o fallos de un examen on-line, podemos complementar la información escrita con una gráfica dinámica que muestre los resultados de un vistazo, aportando además valor al resultado.

El contador

Para mostrar la información de este ejemplo, he elaborado una gráfica en formato .SVG que contiene un contador en semicírculo con paneles descriptivos. La aguja apunta a los paneles rotulados con el texto: «insuficiente», «regular», «bien» y «excelente» según un resultado numérico entre 0 y 10, donde 0 es ninguna pregunta acertada y diez corresponde a un total de diez sobre diez preguntas contestadas correctamente.

El fichero SVG lo he creado con InkScape, una herramienta libre de dibujo vectorial. el diseño asemeja algunas imágenes que encontré haciendo una búsqueda por Internet. Para su elaboración, he tenido en cuenta dos cuestiones importantes:

El tamaño del dibujo tiene las proporciones (ancho x alto) de la imagen que se mostrará en la página. En el caso de este contador, 400px x 240px. Es importante guardar el documento con la medida en píxeles, para poder trabajar después con el tamaño de la imagen desde CSS, si queremos aplicarle distintos tamaños, por ejemplo para la visualización de esta gráfica en diferentes tipos de pantalla (móviles, tablets…).
La gráfica cuenta con una aguja indicadora. Para poder acceder a ella desde JavaScript y que la aguja apunte adecuadamente, he incluido una etiqueta ID (id="aguja") en el elemento SVG que agrupa las líneas del dibujo que corresponden a la aguja. Esto podemos hacerlo directamente desde InkScape. En este caso, el elemento quedaría así:

<g id="aguja" transform="matrix(.28946 0 0 .28839 126 -138.93)">

El atributo «transform» dentro del SVG indica la posición de la aguja, su tamaño y ángulo de giro. El que se muestra aquí corresponde a la aguja en posición vertical, equivalente a un resultado de 5, entre 0 y 10. Para cubrir todo el rango de puntuaciones, la aguja debe girar 18 grados en un sentido y en otro, es decir, que irá girando de 0 a 180 grados en saltos de 18 grados.

Calcular los valores de la posición de la aguja en cada uno de esos intervalos no es tarea fácil. Para acortar camino, guardé la misma gráfica con la aguja en las distintas 11 posiciones y obtuve el valor de transform en cada una de ellas. Este será el valor que luego pasaremos a la gráfica para indicar qué posición debe tener la aguja en función de la puntuación obtenida. Esta es la tabla obtenida:

Puntos	Valores de la aguja
0	transform=“matrix(0 -.28946 .28839 0 -139.16 -20.501)”
1	transform=“matrix(.089449 -.2753 .27428 .089119 -107.1 -76.177)”
2	transform=“matrix(.17014 -.23418 .23332 .16951 -59.407 -119.22)”
3	transform=“matrix(.23418 -.17014 .16951 .23332 -.74583 -145.42)”
4	transform=“matrix(.2753 -.089449 .089119 .27428 63.14 -152.21)”
5	transform=“matrix(.28946 0 0 .28839 126 -138.93)”
6	transform=“matrix(.2753 .089449 -.089119 .27428 181.67 -106.87)”
7	transform=“matrix(.23418 .17014 -.16951 .23332 224.72 -59.174)”
8	transform=“matrix(.17014 .23418 -.23332 .16951 250.92 -.51273)”
9	transform=“matrix(.089449 .2753 -.27428 .089119 257.71 63.373)”
10	transform=“matrix(0 .28946 -.28839 0 244.42 126.23)”

Teniendo el SVG y esta información, usando JavaScript podemos mostrar una gráfica dinámica de resultados.

Presentación

En el ejemplo, la gráfica aparece con un recuadro de texto debajo que indica también el resultado. Mediante CSS posiciono la gráfica con un valor de margen superior negativo para que esta quede justo por encima del recuadro, lo que consigue el efecto de que la gráfica y el recuadro está unidos por la intersección de la aguja.

El código html sería el siguiente:

<div id="resultados">

    <svg version="1.1" viewBox="0 0 105.83 58.208" xmlns="http://www.w3.org/2000/svg">
        <title>Contador con aguja</title>
        <desc>La aguja indica los aciertos de 0 a 10 en un contador en forma de semicírculo que tiene cuatro zonas rotuladas con el texto: «insuficiente», «regular», «bien» y «excelente».</desc>

        ...

        <g id="aguja" transform="matrix(.28946 0 0 .28839 126 -138.93)">

        ...

    </svg>

    <p><span id="nota">0</span> de 10 aciertos</p>
</div>

Para no ocupar espacio de esta entrada el SVG no se muestra completo. Los puntos suspensivos corresponden a las etiquetas que deberían estar ahi. El SVG como se aprecia, estaría incrustado, completo, y el elemento que agrupa a los elementos que dibujan la aguja bien identificado.

En el párrafo se mostraría el resultado de forma textual. ambos, imagen y resultado, están dentro de un DIV contenedor llamado «resultados».

La gráfica en SVG ocupa lo suyo. Hay técnicas para cargar dinámicamente la imagen sin necesidad de colocar el SVG in-line desde el principio. Por ahora el SVG aparecerá incrustado en la página, ya que si lo enlazamos como una imagen (<img src="contador.svg" alt="Contador"/>) no podremos acceder a la etiqueta «aguja» que necesitamos para hacer la gráfica interactiva.

Deliberadamente he eliminado las etiquetas width y height de svg para poderlas manejar desde CSS.

Los estilos CSS para mostrar correctamente estos elementos son los siguientes:

#resultados {
    width: 480px;
    margin: 220px auto;
    text-align: center;
    background-color: lightblue;
    border-radius: 15px;
    border-bottom: 5px solid lightslategray;
}

#resultados svg {
    margin-top: -220px;
    width: 400px;
    height: 220px;
}

#resultados p {
    margin-top: 0.25em;
    margin-bottom: 0.5em;
    font-family:Arial, Helvetica, sans-serif;
    font-size: xxx-large;
    color: red;
    text-shadow: 2px 2px 0 DimGray;
}

Dinamismo

Ya disponemos de la gráfica incrustada en el HTML correctamente representada con CSS, y la tabla de posiciones de la aguja, y en esta parte veremos el motivo de toda esta preparación.

El siguiente código en JavaScript permite obtener el resultado esperado:

const nota = document.getElementById('nota');
let aciertos = Math.floor(Math.random() * 10);

nota.textContent = aciertos;
ponAguja(aciertos);

function ponAguja(aciertos) {
    const aguja = document.getElementById('aguja');
    const posicionAguja = [
        '0 -.28946 .28839 0 -139.16 -20.501',
        '.089449 -.2753 .27428 .089119 -107.1 -76.177',
        '.17014 -.23418 .23332 .16951 -59.407 -119.22',
        '.23418 -.17014 .16951 .23332 -.74583 -145.42',
        '.2753 -.089449 .089119 .27428 63.14 -152.21',
        '.28946 0 0 .28839 126 -138.93',
        '.2753 .089449 -.089119 .27428 181.67 -106.87',
        '.23418 .17014 -.16951 .23332 224.72 -59.174',
        '.17014 .23418 -.23332 .16951 250.92 -.51273',
        '.089449 .2753 -.27428 .089119 257.71 63.373',
        '0 .28946 -.28839 0 244.42 126.23'
    ]

    aguja.setAttribute('transform', `matrix(${posicionAguja[aciertos]})`);
}

Obtengo el elemento «nota» donde pondremos el número de aciertos.

La variable «aciertos», en este ejemplo, se obtiene aleatoriamente en un rango entero entre 0 y 10.

Pongo los aciertos y llamo a la función ponAguja(aciertos) y le paso el parámetro «aciertos».

La función obtiene el elemento del SVG identificado con «aguja», y contiene un arreglo posicionAguja[] con todos los valores posibles para la aguja, desde 0 a 10.

En la última línea, cambiamos el valor del atributo ‘transform’ del SVG con el valor correspondiente a los aciertos guardado en el arreglo posicionAguja[];

El código completo

Con cada recarga de la página, la gráfica y el cuadro de texto mostrarán un valor distinto.

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contador</title>

    <style>
        #resultados {
            width: 480px;
            margin: 220px auto;
            text-align: center;
            background-color: lightblue;
            border-radius: 15px;
            border-bottom: 5px solid lightslategray;
        }
        
        #resultados svg {
            margin-top: -220px;
            width: 400px;
            height: 220px;
        }

        #resultados p {
            margin-top: 0.25em;
            margin-bottom: 0.5em;
            font-family:Arial, Helvetica, sans-serif;
            font-size: xxx-large;
            color: red;
            text-shadow: 2px 2px 0 DimGray;
        }
    </style>
</head>

<body>
    <div id="resultados">
       
        <svg version="1.1" viewBox="0 0 105.83 58.208" xmlns="http://www.w3.org/2000/svg">
            <title>Contador con aguja</title>
            <desc>La aguja indica los aciertos de 0 a 10 en un contador en forma de semicírculo que tiene cuatro zonas rotuladas con el texto: «insuficiente», «regular», «bien» y «excelente».</desc>
            <g clip-path="url(#a)"><path d="m52.914-0.001674c-4.7395 0-9.4778 0.63742-14.085 1.9017-0.06321 0.01729-0.12652 0.03416-0.18965 0.05168-0.24752 0.0689-0.49482 0.1388-0.74157 0.21136-0.29501 0.08651-0.58912 0.17555-0.88262 0.26716-0.16716 0.05233-0.33398 0.10566-0.50075 0.15968-0.35229 0.1138-0.70374 0.23024-1.0537 0.3514-0.09768 0.03392-0.19494 0.06936-0.2925 0.10387-0.40857 0.14415-0.81597 0.2918-1.2211 0.44596-0.0026 6.09e-4 -0.0032 0.0015-0.0048 0.0021-2.598 0.98893-5.1231 2.1832-7.5494 3.576-3.2712 1.8893-6.2375 4.028-9.0004 6.5319-10.096 9.0697-16.394 21.745-17.385 35.433-0.01191 0.16487-0.0085 0.32633 0.0026 0.48575-0.07855 1.0993-0.12549 2.2058-0.13951 3.3186l106.09 2.7e-5c-0.01-1.1385-0.0541-2.2702-0.13229-3.3946 6e-3 -0.13439 5e-3 -0.27062-5e-3 -0.40876-0.93929-12.97-6.6434-25.03-15.827-33.976l7e-3 -0.0072c-3.2035-3.1564-6.6655-5.7325-10.563-7.984-4.1446-2.3803-8.5755-4.1793-13.168-5.3666-0.0541-0.01402-0.10813-0.02852-0.16227-0.04237-0.40282-0.10279-0.80713-0.20018-1.2123-0.29352-0.12364-0.02855-0.24725-0.05658-0.37105-0.08423-0.37005-0.08246-0.74075-0.16212-1.1126-0.23668-0.15193-0.03054-0.30417-0.05865-0.4563-0.08785-0.27332-0.05233-0.54692-0.10285-0.82114-0.1509-0.24984-0.04391-0.50001-0.08526-0.75033-0.12557-0.21667-0.03478-0.43346-0.06866-0.65061-0.10077-0.41838-0.06208-0.83732-0.11847-1.2568-0.17053-0.07014-0.0087-0.14015-0.01845-0.21032-0.02687-0.0066-7.93e-4 -0.01323-0.0013-0.01958-0.0021-0.27715-0.03317-0.55448-0.06421-0.832-0.09302-1.8286-0.18982-3.6647-0.28891-5.501-0.28891z" fill="#fff" stroke-width=".26458"/><g stroke-width=".28892"><path d="m14.799 16.135c-9.531 9.9166-14.753 22.823-14.928 36.701h31.392c0.09043-5.5163 2.2581-10.797 6.0732-14.796z" fill="#f97301"/><path d="m51.864 0.020187c-8.951 0.16984-17.713 2.594-25.47 7.0468-3.8979 2.2513-7.365 4.8542-10.568 8.0106l22.427 22.033c3.7181-3.4716 8.5272-5.555 13.612-5.8964z" fill="#ffe900"/><path d="m91.031 16.135c9.5273 9.8511 14.813 22.791 14.928 36.701h-31.392c-0.090433-5.5163-2.2581-10.797-6.0732-14.796z" fill="#0cb200"/><path d="m53.271 0.0057678v31.169c5.333 0.1904 10.417 2.2988 14.309 5.9351l22.422-22.06c-3.2035-3.1564-6.6654-5.7323-10.563-7.9838-7.9616-4.5724-16.979-7.0059-26.168-7.0615z" fill="#9bd701"/></g><path d="m53.118 8.6805c-11.772 0.0020187-23.065 4.6483-31.409 12.922-8.3434 8.2745-13.059 19.504-13.115 31.233h3.1687c-0.0035-0.08667-0.0067-0.17336-0.0097-0.26006 0-10.911 4.3503-21.375 12.094-29.09 7.7436-7.715 18.246-12.049 29.198-12.049 10.951-3.7e-5 21.454 4.3342 29.198 12.049 7.7436 7.715 12.094 18.179 12.094 29.09-3e-3 0.0867-0.0062 0.17339-0.0097 0.26006h3.3207c-0.056473-11.73-4.7727-22.96-13.118-31.236-8.3448-8.2759-19.639-12.92-31.412-12.92z" fill="#808080" fill-opacity=".5" stroke-linecap="round" stroke-width=".079454"/><path d="m53.286 0v8.6857c11.439 0.052083 22.391 4.479 30.636 12.384l6.0792-6.0175c-3.1719-3.091-6.7207-5.773-10.563-7.9838-7.9573-4.577-16.97-7.0047-26.154-7.0684zm-1.3525 0.020101c-8.9701 0.16618-17.759 2.5737-25.538 7.0483-3.9002 2.2434-7.431 4.9511-10.568 8.0106l6.2254 6.2024c8.0259-7.7926 18.696-12.272 29.881-12.571zm-37.062 16.013c-9.4804 9.73-14.999 22.87-14.999 36.804h8.7223c0.055006-11.435 4.5492-22.387 12.506-30.598zm76.125 0.01402-6.0416 6.0193c8.0762 8.2283 12.627 19.261 12.693 30.768h8.3133c-8.6e-4 -13.734-5.3674-26.929-14.964-36.79z" fill="#e5e5e5" stroke-linecap="round" stroke-width=".079454"/><path d="m12.171 24.438 0.99192-1.3687 0.2474 0.17797-0.77966 1.0758 0.64324 0.46272 0.7471-1.0309 0.2474 0.17797-0.7471 1.0309 0.78733 0.56637 0.79859-1.1019 0.2474 0.17797-1.0108 1.3948zm-1.511 2.3014 1.2275-1.899 0.25655 0.16461-0.51509 0.79688 1.9966 1.281-0.19729 0.30523-1.9966-1.281-0.51509 0.79688zm-1.2563 2.1918 0.24028-0.42344 2.5365 0.06864-1.9517-1.0993 0.17314-0.30514 2.3329 1.314-0.24028 0.42344-2.5365-0.06864 1.9517 1.0993-0.17314 0.30514zm-1.1115 2.2062 0.74762-1.515 0.27384 0.13414-0.58763 1.1908 0.71198 0.34875 0.56309-1.1411 0.27384 0.13413-0.56309 1.1411 0.87148 0.42688 0.60187-1.2197 0.27384 0.13413-0.76186 1.5439zm-0.4834 1.0786 0.14749-0.33 2.4482 1.086-0.14748 0.33zm-0.083943 0.6806 0.3552 0.14092q-0.22616 0.10662-0.38157 0.26826-0.15474 0.15998-0.24107 0.37597-0.16999 0.42535 0.00145 0.75518 0.16984 0.32917 0.66347 0.52498 0.49197 0.19516 0.84409 0.07307 0.35045-0.12275 0.52045-0.54808 0.086326-0.21599 0.084311-0.43815-0.00145-0.22382-0.092045-0.45615l0.35187 0.13959q0.049683 0.22375 0.030697 0.44527-0.018323 0.21987-0.10597 0.43919-0.22511 0.56326-0.6998 0.75028-0.47636 0.18638-1.0751-0.05113-0.60034-0.23817-0.81607-0.69912-0.21738-0.4616 0.00773-1.0249 0.08898-0.22264 0.22737-0.39486 0.13739-0.17456 0.32486-0.30039zm-1.3344 2.8983 0.12082-0.34062 2.5268 0.88968-0.12082 0.34059zm-0.68313 2.0879 0.46418-1.4631 0.29097 0.09163-0.35491 1.1186 0.75306 0.23717 0.32029-1.0095 0.29097 0.09163-0.32029 1.0095 1.2203 0.38431-0.10928 0.34445zm-0.75549 2.7512 0.092676-0.35109 1.5745 0.41254q0.41662 0.10916 0.64037 0.0069 0.22199-0.10271 0.31102-0.43997 0.088566-0.33554-0.05399-0.53375-0.14429-0.19869-0.56092-0.30786l-1.5745-0.41254 0.092676-0.35109 1.6179 0.42393q0.5069 0.13282 0.69936 0.45139 0.19292 0.31683 0.064176 0.80455-0.1292 0.48946-0.45405 0.67247-0.3244 0.18128-0.8313 0.04847zm-0.095522 0.81326 0.34599 0.07269q-0.13919 0.18094-0.22438 0.34947-0.085197 0.16852-0.12038 0.33476-0.061105 0.28874 0.017976 0.46984 0.079448 0.17935 0.2867 0.22289 0.17388 0.03653 0.28531-0.0479 0.11004-0.08655 0.22596-0.36559l0.08909-0.20426q0.15922-0.37961 0.39028-0.52663 0.22969-0.14914 0.54934-0.08199 0.38113 0.08007 0.52378 0.37687 0.14302 0.29505 0.038953 0.78679-0.039254 0.18549-0.12585 0.38662-0.086221 0.19938-0.21617 0.40602l-0.36533-0.07675q0.16674-0.18978 0.27191-0.38336t0.14739-0.39305q0.064066-0.30272-0.020552-0.49231-0.084624-0.18958-0.30593-0.23607-0.1932-0.04059-0.32726 0.05553-0.13371 0.09437-0.24518 0.35241l-0.087706 0.20638q-0.16273 0.37886-0.36874 0.5202-0.20601 0.14132-0.50635 0.07822-0.34776-0.07305-0.49651-0.35835-0.14838-0.28705-0.057652-0.71576 0.038886-0.18374 0.11262-0.36747 0.073737-0.18373 0.1827-0.3692zm-0.90022 4.3749 0.077792-0.48023 2.4026-0.81286-2.2133-0.3559 0.056057-0.34604 2.6457 0.42543-0.077795 0.48023-2.4026 0.81286 2.2133 0.3559-0.05606 0.34604zm-0.14762 1.1651 0.045312-0.35841 2.6589 0.33367-0.045312 0.35841zm97.927-3.1896 0.24568 1.6704-0.30194 0.04407-0.19312-1.3129-0.78501 0.11461 0.18504 1.2581-0.30194 0.04408-0.18504-1.2581-0.96082 0.14028 0.19779 1.3448-0.30194 0.04408-0.25036-1.7022zm-0.49787-2.682 0.42747 2.2182-0.29968 0.05732-0.17938-0.93084-2.3322 0.44611-0.06871-0.35654 2.3322-0.44611-0.17939-0.93084zm-0.58818-2.434 0.11608 0.47247-1.8951 1.681 2.1776-0.5311 0.0836 0.34047-2.6031 0.63486-0.11609-0.47247 1.8951-1.681-2.1776 0.5311-0.08365-0.34047zm-0.6953-2.3561 0.48974 1.6162-0.29212 0.08787-0.38496-1.2703-0.75951 0.22846 0.36886 1.2173-0.29212 0.08787-0.36886-1.2173-0.92966 0.27964 0.3943 1.3012-0.29212 0.08787-0.49909-1.647zm-0.71033-2.0476 0.1211 0.3405-2.2384 0.79025 0.43587 1.2255-0.28762 0.10155-0.55698-1.566zm-0.90804-2.2725 0.64298 1.5619-0.28233 0.11536-0.5054-1.2277-0.73404 0.29993 0.48427 1.1764-0.28233 0.11536-0.48427-1.1764-0.89846 0.36712 0.51764 1.2575-0.28233 0.11536-0.65522-1.5917zm-0.46632-0.55948-0.34509 0.16395q0.07511-0.23777 0.06165-0.46119-0.01271-0.22182-0.11314-0.43166-0.19778-0.41323-0.55724-0.51192-0.35783-0.09945-0.83741 0.12839-0.47796 0.22707-0.62726 0.56746-0.14768 0.33961 0.0501 0.75284 0.10044 0.20985 0.26544 0.3593 0.16577 0.15107 0.3985 0.2426l-0.34185 0.16242q-0.19855-0.11568-0.34883-0.28007-0.1495-0.16276-0.25148-0.37583-0.26191-0.54722-0.07718-1.0213 0.18635-0.47489 0.768-0.75123 0.58326-0.2771 1.0693-0.12167 0.48765 0.15466 0.74959 0.70188 0.10353 0.21631 0.13636 0.43449 0.03523 0.21904 5.78e-4 0.44158zm-1.8763-4.1153 0.18709 0.34039-0.55394 1.0587 1.1954 0.10835 0.18709 0.34039-1.5427-0.13704-0.7803 1.4697-0.18709-0.34039 0.63762-1.2042-1.3644-0.11806-0.18795-0.34194 1.7143 0.15146zm-1.2157-1.9899 0.89293 1.4348-0.25934 0.16021-0.70185-1.1278-0.6743 0.41655 0.67253 1.0807-0.25934 0.16021-0.67253-1.0807-0.82531 0.50984 0.71887 1.1551-0.25934 0.16021-0.90995-1.4621zm-20.071-17.151 0.44154 0.20757 0.11797 2.5253 0.95669-2.0201 0.31818 0.14958-1.1436 2.4147-0.44154-0.20757-0.11797-2.5253-0.9567 2.0201-0.31817-0.14958zm-2.2809-0.94304 1.5694 0.63659-0.11507 0.28158-1.2336-0.50039-0.29919 0.73211 1.182 0.47948-0.11507 0.28158-1.182-0.47948-0.36617 0.89609 1.2635 0.51253-0.11507 0.28158-1.5993-0.64873zm-1.1057-0.40663 0.34052 0.12414-0.92092 2.5074-0.34052-0.12413zm-2.5733 0.60562-0.30266 0.93061 0.55324 0.17861q0.27833 0.089862 0.44861 0.018861 0.17252-0.072138 0.24943-0.30861 0.07746-0.23818-0.0209-0.394-0.09612-0.15699-0.37444-0.24684zm0.33974-1.0446-0.24899 0.76556 0.51055 0.16483q0.25272 0.081588 0.40611 0.027714 0.15564-0.05503 0.21872-0.24897 0.06252-0.19224-0.03114-0.32776-0.09196-0.13496-0.34469-0.21655zm-0.25308-0.39377 0.88112 0.28446q0.39445 0.12734 0.55478 0.35956 0.16033 0.23223 0.06239 0.53335-0.0758 0.23307-0.22991 0.3356-0.1541 0.10252-0.3769 0.068187 0.23672 0.13658 0.32032 0.35533 0.08584 0.21758 0.0017 0.47619-0.11066 0.34024-0.40322 0.45072-0.29253 0.11046-0.72116-0.027916l-0.91523-0.29548zm-25.533-0.24008q0.12254 0.01243 0.25808 0.11367 0.13729 0.10082 0.29618 0.29577l0.5219 0.62961-0.37971 0.086471-0.48742-0.5916q-0.18948-0.23202-0.33158-0.28954-0.14034-0.057935-0.35033-0.010122l-0.38498 0.087665 0.25238 1.1001-0.35349 0.080495-0.59716-2.6029 0.79792-0.18171q0.44797-0.10201 0.71123 0.034324 0.26328 0.13633 0.34967 0.5129 0.05639 0.24582-0.02191 0.43426-0.07655 0.18804-0.28088 0.30062zm-1.1362-0.89147 0.21198 0.924 0.44447-0.10121q0.25548-0.058183 0.35818-0.20448 0.10404-0.14843 0.05165-0.37681-0.0524-0.22838-0.21003-0.31357-0.15629-0.087319-0.41176-0.029139zm-2.0189 0.58866-0.11033 1.412 0.94827-0.26718zm-0.29412-0.28697 0.39555-0.11145 1.7121 2.2923-0.36272 0.1022-0.42198-0.5929-1.1624 0.32752-0.04782 0.72527-0.3679 0.10366zm-2.8118 0.88683 0.34385-0.11462 0.75349 2.2437 1.2375-0.41251 0.09682 0.28831-1.5814 0.52712zm-2.6804 1.0151 0.33936-0.13217 0.59273 1.5107q0.15684 0.39974 0.37155 0.51965 0.21406 0.11825 0.54007-0.00871 0.32434-0.12631 0.40116-0.35783 0.07617-0.2332-0.08067-0.63296l-0.59272-1.5107 0.33936-0.13217 0.60908 1.5523q0.19082 0.48637 0.04578 0.82895-0.14337 0.34194-0.61481 0.52553-0.47312 0.18426-0.81292 0.03048-0.33812-0.15442-0.52893-0.64077zm-0.08394 2.5292-0.30055-0.65162-0.53822 0.24642-0.12442-0.26975 0.86444-0.39579 0.48045 1.0416q-0.12862 0.22225-0.32637 0.3974-0.1985 0.17354-0.45946 0.293-0.57084 0.26136-1.0467 0.07772-0.47495-0.18602-0.74854-0.77914-0.27432-0.59475-0.10591-1.0734 0.16929-0.48098 0.74015-0.74234 0.23813-0.10902 0.47877-0.14834 0.24228-0.040072 0.47579-0.00908l0.16114 0.34938q-0.25388-0.070739-0.49535-0.05465-0.24148 0.016092-0.4682 0.11989-0.4469 0.2046-0.5573 0.55628-0.10878 0.35091 0.11833 0.84328 0.22635 0.49075 0.56448 0.63708 0.33977 0.14557 0.78666-0.059034 0.17452-0.079901 0.29803-0.17188 0.12277-0.093603 0.20281-0.20701zm-4.8108-0.18745 1.4983-0.78852 0.14253 0.26882-1.1777 0.61978 0.37057 0.69894 1.1285-0.59391 0.14253 0.26882-1.1285 0.59391 0.45358 0.85548 1.2062-0.63483 0.14253 0.26882-1.5268 0.80357zm-0.50656 1.9236q0.1204-0.0259 0.28071 0.02861 0.16185 0.05359 0.37343 0.19008l0.69169 0.43804-0.3343 0.19918-0.64709-0.41251q-0.25219-0.1623-0.40519-0.17325-0.15144-0.01185-0.3363 0.09828l-0.3389 0.20194 0.58135 0.96847-0.31117 0.18542-1.3755-2.2915 0.70246-0.41857q0.39436-0.23498 0.68706-0.18641 0.29267 0.04857 0.49168 0.3801 0.1299 0.21641 0.11391 0.41972-0.01444 0.2024-0.17385 0.3724zm-1.3572-0.49788 0.48829 0.81346 0.39129-0.23315q0.22492-0.13401 0.27718-0.30477 0.05289-0.17321-0.0678-0.37427t-0.29704-0.23352q-0.17573-0.03491-0.40064 0.09911z" stroke-width=".076444"/></g><g id="aguja" transform="matrix(.28946 0 0 .28839 126 -138.93)"><path d="m-253.45 566.27c-1.858 2e-3 -3.7288 2.2916-3.7828 5.1506l-14.79 85.096c-0.58463 3.3637-0.30092 4.8301-0.31528 8.1508 0 10.432 8.4567 18.888 18.888 18.888 10.432 0 18.888-8.9443 18.888-19.376 0-3.3866 0.21618-4.1153-0.4047-7.5835l-15.237-85.113c1.5e-4 -2.8995-1.4061-5.2129-3.2465-5.213z"/><path d="m-253.45 566.27c-1.858 2e-3 -3.7288 2.2916-3.7828 5.1506l-14.79 85.096c-0.58463 3.3637-0.61848 4.7142-0.31528 8.151 0 10.432 8.4567 18.888 18.888 18.888z" fill="#666"/><circle cx="-253.45" cy="664.67" r="9.7464" fill="#666"/><path d="m-253.45 654.92a9.7464 9.7464 0 0 0-9.7464 9.7464 9.7464 9.7464 0 0 0 9.7464 9.7464z"/></g><defs><clipPath id="a"><path d="m23.149 9.0991c-13.438 9.0736-21.972 23.8-23.14 39.93-0.15217 2.1011 1.5767 3.8119 3.6915 3.8119h23.734c2.1149 0 3.8162-1.7234 4.2038-3.792 1.684-8.9862 8.8444-16.036 17.883-17.606 2.0808-0.36161 5.5414-0.36701 7.6197 7e-3 8.8097 1.5835 15.08 8.6234 16.556 17.595 0.34174 2.0774 2.0454 3.7972 4.1604 3.7972h24.273c2.1149 0 3.8437-1.7107 3.6915-3.8119-1.1682-16.131-9.7021-30.858-23.14-39.931-1.7503-1.1818-4.7243-2.8926-6.6269-3.8119-14.606-7.0578-31.673-7.0578-46.279 0-1.9025 0.91927-4.8765 2.63-6.6269 3.8119z" fill="#0f0" stroke-linecap="round" stroke-width=".079454"/></clipPath></defs>
        </svg>

        <p><span id="nota">0</span> de 10 aciertos</p>
    </div>

    <script>
        const nota = document.getElementById('nota');
        let aciertos = Math.floor(Math.random() * 10);

        nota.textContent = aciertos;
        ponAguja(aciertos);

        function ponAguja(aciertos) {
            const aguja = document.getElementById('aguja');
            const posicionAguja = [
                '0 -.28946 .28839 0 -139.16 -20.501',
                '.089449 -.2753 .27428 .089119 -107.1 -76.177',
                '.17014 -.23418 .23332 .16951 -59.407 -119.22',
                '.23418 -.17014 .16951 .23332 -.74583 -145.42',
                '.2753 -.089449 .089119 .27428 63.14 -152.21',
                '.28946 0 0 .28839 126 -138.93',
                '.2753 .089449 -.089119 .27428 181.67 -106.87',
                '.23418 .17014 -.16951 .23332 224.72 -59.174',
                '.17014 .23418 -.23332 .16951 250.92 -.51273',
                '.089449 .2753 -.27428 .089119 257.71 63.373',
                '0 .28946 -.28839 0 244.42 126.23'
            ]
            
            aguja.setAttribute('transform', `matrix(${posicionAguja[aciertos]})`);
        }
    </script>
</body>
</html>

Enlace

Ver ejemplo de aplicación práctica. Summer Quiz Es necesario terminar una partida para obtener resultados.
Ver también: Creación de gráfica de lineas dinámica con SVG
Ver también: Cargar SVG dinámicamente
Libro sobre SVG SCALABLE de Jorge Aznar.

Gráfica de lineas dinámica con SVG

JavGuerra — Sun, 12 Jun 2022 00:00:00 GMT

Etiquetas: #código, #css, #html, #javascript, #svg, #usabilidad

Como comentaba en el anterior artículo sobre la creación de un contador de resultados, la representación visual ayuda a asumir mejor la información. En este artículo mostraré cómo elaborar una gráfica de líneas dinámica que represente, por ejemplo, las puntuaciones de las últimas cinco jugadas con valores en un rango entre cero y diez.

La gráfica de líneas

Primeramente toca diseñar una gráfica en .SVG que sirva de base para mostrar la línea de resultados que pretendo. Esto lo hago con InkScape. La gráfica que muestra la imagen es muy sencilla, y de ella destaca la línea roja, que, inicialmente, dibujo en la posición de la línea de puntuación cero. como se puede ver aquí:

He rehecho a mano la línea roja para poder acceder a los nodos con más facilidad, empleando el elemento polyline con los siguientes valores:

<polyline id="theline" points="11 73 33.5 73 56 73 78.5 73 101 73"
fill="none" marker-end="url(#dotLine)" marker-mid="url(#dotLine)" marker-start="url(#dotLine)"
stroke="#d8232a" stroke-linecap="round" stroke-linejoin="round"/>

En points="11 73 33.5 73 56 73 78.5 73 101 73" está toda la magia. Este parámetro contiene los valores de los puntos de la linea creada, diez valores en total que corresponden a la posición x e y de cada punto. Si tengo la ubicación de los puntos de la línea, y un identificador id="theline" para poder hacer cambios, ya puedo representar valores en la gráfica dinámicamente.

Para los círculos en los puntos de conexión de la línea, que son referenciados en marker-end, marker-mid y marker-start, hice los siguientes cambios en el SVG:

<marker id="dotLine" overflow="visible" orient="auto">
    <circle transform="scale(.2) translate(-8 -8)" cx="8" cy="8" r="8"
        fill="#f0fff0" stroke="#d8232a" stroke-width="4"/>
</marker>

Presentación

Como hicimos en la creación de un contador de resultados, para poder acceder al identificador dentro del SVG, este debe estar disponible en el DOM, por lo que no sería posible acceder a su id haciendo uso del elemento <img> de HTML.

El código HTML para insertar «en linea» el SVG sería el siguiente:

<div id="contenedor">

    <h1>Gráfica dinámica</h1>

    <svg id="grafica" version="1.1" viewBox="0 0 105.83 79.375" xmlns="http://www.w3.org/2000/svg">
        <title>Gráfica de líneas</title>
        <desc>Muestra una gráfica con dos ejes. En el eje horizontal, se muestran las últimas cinco partidas ordenadas de más antigua a más reciente. En el eje vertical, los ciertos de cada uno de los partidos. La línea une las diferentes puntuaciones del gráfico.</desc>
        <defs><marker id="dotLine" overflow="visible" orient="auto"><circle transform="scale(.2) translate(-8 -8)" cx="8" cy="8" r="8" fill="#f0fff0" stroke="#d8232a" stroke-width="4"/></marker></defs>
        ...
        <polyline id="laLinea" points="11 73 33.5 73 56 73 78.5 73 101 73" fill="none" marker-end="url(#dotLine)" marker-mid="url(#dotLine)" marker-start="url(#dotLine)" stroke="#d8232a" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>

    <p id="arreglo"></p>

</div>

Para no ocupar espacio de esta entrada, el SVG no se muestra completo. Los puntos suspensivos corresponden a las etiquetas que deberían estar ahi. El SVG como se aprecia, estaría incrustado, y el elemento de la línea bien identificado con id="laLinea".

En el párrafo "arreglo" es donde se mostrarán los valores numéricos que se usarán para representar la gráfica.

Como dijimos en el anterior artículo, la gráfica en SVG ocupa lo suyo. Hay técnicas para cargar dinámicamente la imagen sin necesidad de colocar el SVG in-line desde el principio.

Deliberadamente he eliminado los atributos width="400" y height="300" de la etiqueta svg porque voy a manejar estos valores desde CSS, aunque dejarlas tampoco sería un problema.

Los estilos CSS para mostrar correctamente estos elementos son los siguientes:

#contenedor {text-align: center}

#grafica {
    width: 100%;
    max-width: 400px;
    height: auto}

#laLinea {animation: elevador 1s ease}

@keyframes elevador {
    0%   {transform: translateY(73px) scaleY(0)}
    100% {transform: translateY(0)    scaleY(1)}
}

Como se ve, he definido también una animación para mostrar el resultado. Al cargar los nuevos valores de la gráfica, los puntos de la línea estarán en la posición del eje de la puntuación cero, (en la posición 73px) con una escala de 0, es decir la línea estará totalmente aplastada. Durante un segundo, irá tomando su forma original ocupando toda la gráfica con las medidas correctas. Esto hace el efecto de que los nodos de la línea se elevan hasta la posición que debe ocupar en la gráfica. Se entiende mejor viendo el ejemplo.

Dinamismo

Ya disponemos de la gráfica incrustada en el HTML, y en esta parte veremos el motivo de toda esta preparación.

El siguiente código en JavaScript permite obtener el resultado esperado:

const elLinea = document.getElementById('laLinea');
const elArreg = document.getElementById('arreglo');
let ejesY = [];

for (let i = 0; i < 5; i++) {
    ejesY.push(Math.floor(Math.random() * 11)); // 0-10
}
elArreg.textContent = `Valores = [${ejesY}]`;
fijaLinea(ejesY);

function fijaLinea(ordenadas = []) {
    let numOrd = ordenadas.length;
    if(numOrd < 5) for (let i = 0; i < 5 - numOrd; i++) ordenadas.push(0);
    let ord = ordenadas.slice(-5).map(y => 73 - y * 7.1);
    elLinea.setAttribute('points',
        `11 ${ord[0]} 33.5 ${ord[1]} 56 ${ord[2]} 78.5 ${ord[3]} 101 ${ord[4]}`);
}

Primeramente obtengo los elementos que emplearé en el código elLinea y elArreg, y declaro el arreglo ejesY que contendrá los valores a mostrar. Seguidamente relleno el arreglo con cinco valores al azar en un rango entre 0 y 10. Muestro los valores en la web, llamo a la función fijaLinea(ejesY) y le paso como parámetro el arreglo. Esta función es la responsable de que la línea tenga la forma deseada.

En la posición y = 73 está la línea de la puntuación 0. Cada línea de puntuación esta a una distancia de -7.1px. Así: 0 = 73, 1 = 65,9, .. 9 = 9,1, 10 = 2. Con estos datos, la función fijaLinea() funciona de la siguiente manera: Si el arreglo que le pasamos tiene un número de elementos menor que cinco, rellena a ceros el arreglo. Después toma los últimos cinco elementos del arreglo (pudiera ser que el arreglo recibido tuviese más de cinco elementos).

A cada elemento del array le aplica el cálculo necesario para convertir la puntuación a la coordenada «y» correspondiente. Con este nuevo arreglo, ya podemos pasar los datos de la línea al SVG con setAttribute. El valor inicial del atributo points:

points="11 73 33.5 73 56 73 78.5 73 101 73"

pasa a ser:

`11 ${ord[0]} 33.5 ${ord[1]} 56 ${ord[2]} 78.5 ${ord[3]} 101 ${ord[4]}`

siendo los valores del arreglo ord cada una de las cinco posiciones «y» de los puntos de la polilínea. Esto es todo lo que necesitamos para mostrar los datos.

El código completo

Con cada recarga de la página, la gráfica mostrará valores distintos.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gráfica de líneas</title>

    <style>
        #contenedor {text-align: center}

        #grafica {
            width: 100%;
            max-width: 400px;
            height: auto}

        #laLinea {animation: elevador 1s ease}

        @keyframes elevador {
            0%   {transform: translateY(73px) scaleY(0)}
            100% {transform: translateY(0)    scaleY(1)}
        }
    </style>
</head>
<body>
    <div id="contenedor">

        <h1>Gráfica dinámica</h1>

        <svg id="grafica" version="1.1" viewBox="0 0 105.83 79.375" xmlns="http://www.w3.org/2000/svg">
            <title>Gráfica de líneas</title>
            <desc>Muestra una gráfica con dos ejes. En el eje horizontal, se muestran las últimas cinco partidas ordenadas de más antigua a más reciente. En el eje vertical, los ciertos de cada uno de los partidos. La línea une las diferentes puntuaciones del gráfico.</desc>
            <defs><marker id="dotLine" overflow="visible" orient="auto"><circle transform="scale(.2) translate(-8 -8)" cx="8" cy="8" r="8" fill="#f0fff0" stroke="#d8232a" stroke-width="4"/></marker></defs>
            <g transform="matrix(.99339 0 0 .97827 .43246 .039862)" fill="none"><g stroke="#ccc" stroke-width=".26839"><path d="m105.57 9.424h-99.395"/><path d="m105.57 16.73h-99.408"/><path d="m105.57 24.037h-99.309"/><path d="m105.57 31.343h-99.438"/><path d="m105.57 38.649h-99.515"/><path d="m105.57 45.956h-99.435"/><path d="m105.57 53.262h-99.416"/><path d="m105.57 59.999h-99.416"/><path d="m105.57 67.305h-99.469"/><path d="m10.957 1.98v72.528"/><path d="m100.96 1.9385v72.528"/><path d="m33.458 1.98v72.528"/><path d="m55.959 1.98v72.528"/><path d="m78.461 1.98v72.528"/></g><rect x="6.2237" y="2.1209" width="99.342" height="72.487" stroke="#3cb371" stroke-linecap="round" stroke-width=".53688"/></g><g transform="matrix(1.0003 0 0 1.0006 .44383 .038459)" fill="#3cb371" stroke-width=".26458" aria-label="109876543210"><path d="m1.1672 4.0498h-0.44855v-2.9735l-0.89951 0.33038v-0.40514l1.2781-0.4799h0.069935z"/><path d="m4.676 2.5522q0 0.78376-0.26768 1.1648-0.26768 0.38103-0.83681 0.38103-0.5619 0-0.83199-0.37138-0.2701-0.37379-0.27974-1.1141v-0.59566q0-0.77411 0.26768-1.1503 0.26768-0.3762 0.83923-0.3762 0.56672 0 0.8344 0.36415 0.26768 0.36174 0.27492 1.119zm-0.44614-0.61013q0-0.56672-0.15916-0.82476-0.15916-0.26045-0.50402-0.26045-0.34244 0-0.49919 0.25804t-0.16158 0.79341v0.71382q0 0.56913 0.16399 0.84164 0.1664 0.2701 0.50161 0.2701 0.33038 0 0.48955-0.25563 0.16158-0.25563 0.16881-0.80546z"/><path d="m4.1841 9.5492q-0.13987 0.1664-0.33521 0.26768-0.19293 0.10129-0.42444 0.10129-0.30386 0-0.53054-0.14952-0.22428-0.14952-0.34727-0.41961-0.12299-0.27251-0.12299-0.60048 0-0.35209 0.13264-0.63424 0.13505-0.28215 0.38103-0.43167t0.57395-0.14952q0.5209 0 0.81993 0.39067 0.30145 0.38826 0.30145 1.0611v0.13022q0 1.0249-0.40514 1.4976-0.40514 0.47026-1.2227 0.48231h-0.086816v-0.3762h0.094051q0.55225-0.0096 0.84887-0.28698 0.29662-0.27974 0.32315-0.88263zm-0.6873 0q0.22428 0 0.41238-0.13746 0.19051-0.13746 0.27733-0.34003v-0.17846q0-0.43891-0.19051-0.71382-0.19051-0.27492-0.48231-0.27492-0.29421 0-0.47267 0.22669-0.17846 0.22428-0.17846 0.59325 0 0.35932 0.17122 0.59325 0.17363 0.23151 0.46302 0.23151z"/><path d="m4.6037 15.541q0 0.26286-0.13987 0.46784-0.13746 0.20498-0.37379 0.32074 0.27492 0.11817 0.43408 0.34485 0.16158 0.22669 0.16158 0.51366 0 0.45579-0.30868 0.72588-0.30627 0.2701-0.80788 0.2701-0.50643 0-0.8127-0.2701-0.30386-0.27251-0.30386-0.72588 0-0.28456 0.15434-0.51366 0.15675-0.2291 0.43167-0.34727-0.23392-0.11576-0.36897-0.32074t-0.13505-0.46543q0-0.44373 0.28456-0.70418t0.75-0.26045q0.46302 0 0.74759 0.26045 0.28698 0.26045 0.28698 0.70418zm-0.36415 1.6375q0-0.29421-0.1881-0.4799-0.18569-0.18569-0.48714-0.18569t-0.48472 0.18328q-0.18087 0.18328-0.18087 0.48231t0.17604 0.47026q0.17846 0.17122 0.49437 0.17122 0.3135 0 0.49196-0.17122 0.17846-0.17363 0.17846-0.47026zm-0.67042-2.2355q-0.26286 0-0.42685 0.16399-0.16158 0.16158-0.16158 0.44132 0 0.26768 0.15916 0.43408 0.16158 0.16399 0.42926 0.16399t0.42685-0.16399q0.16158-0.1664 0.16158-0.43408t-0.1664-0.43649-0.42202-0.16881z"/><path d="m4.7411 21.918-1.4542 3.2604h-0.46784l1.4494-3.1447h-1.9003v-0.36656h2.373z"/><path d="m4.2251 28.707v0.37862h-0.081993q-0.5209 0.0096-0.82958 0.30868-0.30868 0.29903-0.35691 0.84164 0.27733-0.31833 0.75723-0.31833 0.4582 0 0.7307 0.32315 0.27492 0.32315 0.27492 0.8344 0 0.5426-0.29662 0.86816-0.29421 0.32556-0.79099 0.32556-0.50402 0-0.81752-0.38585-0.3135-0.38826-0.3135-0.99839v-0.17122q0-0.96945 0.41238-1.4807 0.41479-0.51366 1.2323-0.52572zm-0.58601 1.582q-0.2291 0-0.42202 0.13746-0.19293 0.13746-0.26768 0.34486v0.16399q0 0.43408 0.19534 0.69936 0.19534 0.26527 0.48714 0.26527 0.30145 0 0.47267-0.22186 0.17363-0.22186 0.17363-0.58119 0-0.36174-0.17604-0.5836-0.17363-0.22428-0.46302-0.22428z"/><path d="m2.6793 37.503 0.17846-1.7508h1.799v0.41238h-1.4204l-0.10611 0.95739q0.25804-0.15193 0.58601-0.15193 0.4799 0 0.76206 0.31833 0.28215 0.31592 0.28215 0.85611 0 0.5426-0.29421 0.85611-0.2918 0.31109-0.81752 0.31109-0.46543 0-0.75964-0.25804t-0.33521-0.71382h0.42202q0.040997 0.30145 0.21463 0.45579 0.17363 0.15193 0.4582 0.15193 0.31109 0 0.48714-0.21222 0.17846-0.21222 0.17846-0.58601 0-0.35209-0.19293-0.56431-0.19051-0.21463-0.50884-0.21463-0.2918 0-0.4582 0.12781l-0.11817 0.09646z"/><path d="m4.3577 45.127h0.48714v0.36415h-0.48714v0.81511h-0.44855v-0.81511h-1.5989v-0.26286l1.5723-2.4333h0.47508zm-1.541 0h1.0924v-1.7219l-0.053055 0.09646z"/><path d="m3.123 51.377h0.33521q0.31592-0.0048 0.49678-0.1664 0.18087-0.16158 0.18087-0.43649 0-0.61736-0.61495-0.61736-0.28939 0-0.46302 0.1664-0.17122 0.16399-0.17122 0.43649h-0.44614q0-0.4172 0.30386-0.69212 0.30627-0.27733 0.77652-0.27733 0.49678 0 0.77894 0.26286 0.28215 0.26286 0.28215 0.7307 0 0.2291-0.14952 0.44373-0.14711 0.21463-0.40273 0.32074 0.28939 0.09164 0.44614 0.30386 0.15916 0.21222 0.15916 0.51849 0 0.47267-0.30868 0.75t-0.80305 0.27733-0.80546-0.26768q-0.30868-0.26768-0.30868-0.70659h0.44855q0 0.27733 0.18087 0.44373t0.48472 0.1664q0.32315 0 0.49437-0.16881t0.17122-0.48472q0-0.30627-0.1881-0.47026t-0.5426-0.16881h-0.33521z"/><path d="m4.7749 60.392h-2.3006v-0.32074l1.2154-1.3505q0.2701-0.30627 0.37138-0.49678 0.1037-0.19292 0.1037-0.39791 0-0.27492-0.1664-0.45096t-0.44373-0.17604q-0.3328 0-0.51849 0.19051-0.18328 0.1881-0.18328 0.52572h-0.44614q0-0.48472 0.31109-0.78376 0.3135-0.29903 0.83681-0.29903 0.48955 0 0.77411 0.25804 0.28456 0.25563 0.28456 0.68247 0 0.51849-0.66077 1.2347l-0.94051 1.0201h1.7629z"/><path d="m3.9405 67.435h-0.44855v-2.9735l-0.89951 0.33038v-0.40514l1.2781-0.4799h0.069935z"/><path d="m4.676 72.98q0 0.78376-0.26768 1.1648-0.26768 0.38103-0.83681 0.38103-0.5619 0-0.83199-0.37138-0.2701-0.37379-0.27974-1.1141v-0.59566q0-0.77411 0.26768-1.1503 0.26768-0.3762 0.83923-0.3762 0.56672 0 0.8344 0.36415 0.26768 0.36174 0.27492 1.119zm-0.44614-0.61013q0-0.56672-0.15916-0.82476-0.15916-0.26045-0.50402-0.26045-0.34244 0-0.49919 0.25804t-0.16158 0.79341v0.71382q0 0.56913 0.16399 0.84164 0.1664 0.2701 0.50161 0.2701 0.33038 0 0.48955-0.25563 0.16158-0.25563 0.16881-0.80546z"/></g><g transform="translate(-.061333 -.081667)" fill="#3cb371" stroke-width=".26458"><g transform="translate(.46707)" aria-label="1"><path d="m11.524 79.312h-0.44855v-2.9735l-0.89952 0.33038v-0.40514l1.2781-0.4799h0.06993z" fill="#3cb371"/></g><g transform="translate(.33346)" aria-label="3"><path d="m55.289 77.34h0.33521q0.31592-0.0048 0.49678-0.1664 0.18087-0.16158 0.18087-0.43649 0-0.61736-0.61495-0.61736-0.28939 0-0.46302 0.1664-0.17122 0.16399-0.17122 0.43649h-0.44614q0-0.4172 0.30386-0.69212 0.30627-0.27733 0.77652-0.27733 0.49678 0 0.77894 0.26286t0.28215 0.7307q0 0.2291-0.14952 0.44373-0.1471 0.21463-0.40273 0.32074 0.28939 0.09164 0.44614 0.30386 0.15916 0.21222 0.15916 0.51849 0 0.47267-0.30868 0.75t-0.80305 0.27733-0.80546-0.26768q-0.30868-0.26768-0.30868-0.70659h0.44855q0 0.27733 0.18087 0.44373t0.48472 0.1664q0.32315 0 0.49437-0.16881t0.17122-0.48472q0-0.30627-0.1881-0.47026t-0.5426-0.16881h-0.33521z" fill="#3cb371"/></g><g transform="translate(.49737)" aria-label="2"><path d="m34.356 79.312h-2.3006v-0.32074l1.2154-1.3505q0.2701-0.30627 0.37138-0.49678 0.1037-0.19293 0.1037-0.39791 0-0.27492-0.1664-0.45096t-0.44373-0.17604q-0.3328 0-0.51849 0.19051-0.18328 0.1881-0.18328 0.52572h-0.44614q0-0.48472 0.31109-0.78376 0.3135-0.29904 0.83681-0.29904 0.48955 0 0.77411 0.25804 0.28456 0.25563 0.28456 0.68247 0 0.51849-0.66077 1.2347l-0.94051 1.0201h1.7629z" fill="#3cb371"/></g><g transform="translate(-.47277)" aria-label="5"><path d="m100.22 77.552 0.17846-1.7508h1.799v0.41238h-1.4204l-0.10611 0.95739q0.25804-0.15193 0.58602-0.15193 0.4799 0 0.76205 0.31833 0.28215 0.31592 0.28215 0.85611 0 0.5426-0.29421 0.85611-0.2918 0.31109-0.81752 0.31109-0.46543 0-0.75964-0.25804t-0.33521-0.71382h0.42202q0.041 0.30145 0.21463 0.45579 0.17364 0.15193 0.4582 0.15193 0.31109 0 0.48714-0.21222 0.17845-0.21222 0.17845-0.58601 0-0.35209-0.19292-0.56431-0.19052-0.21463-0.50884-0.21463-0.2918 0-0.4582 0.12781l-0.11817 0.09646z" fill="#3cb371"/></g><g transform="translate(-.13501)" aria-label="4"><path d="m79.29 78.133h0.48714v0.36415h-0.48714v0.81511h-0.44855v-0.81511h-1.5989v-0.26286l1.5723-2.4333h0.47508zm-1.541 0h1.0924v-1.7219l-0.05305 0.09646z" fill="#3cb371"/></g></g>
            <polyline id="laLinea" points="11 73 33.5 73 56 73 78.5 73 101 73" fill="none" marker-end="url(#dotLine)" marker-mid="url(#dotLine)" marker-start="url(#dotLine)" stroke="#d8232a" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>

        <p id="arreglo"></p>

    </div>

    <script>
        const elLinea = document.getElementById('laLinea');
        const elArreg = document.getElementById('arreglo');
        let ejesY = [];

        for (let i = 0; i < 5; i++) {
            ejesY.push(Math.floor(Math.random() * 11)); // 0-10
        }
        elArreg.textContent = `Valores = [${ejesY}]`;
        fijaLinea(ejesY);

        function fijaLinea(ordenadas = []) {
            let numOrd = ordenadas.length;
            if(numOrd < 5) for (let i = 0; i < 5 - numOrd; i++) ordenadas.push(0);
            let ord = ordenadas.slice(-5).map(y => 73 - y * 7.1);
            elLinea.setAttribute('points',
                `11 ${ord[0]} 33.5 ${ord[1]} 56 ${ord[2]} 78.5 ${ord[3]} 101 ${ord[4]}`);
        }
    </script>
</body>
</html>

Con estas indicaciones, hacer tu propia gráfica de líneas no debería ser excesivamente complicado.

Para conocer más sobre SVG y cómo editarlo, te recomiendo el libro SCALABLE de Jorge Aznar.

Enlaces

Ver ejemplo de aplicación práctica. Summer Quiz (Es necesario terminar una partida para obtener resultados.)
Ver también: Creación de un contador de resultados
Ver también: Cargar SVG dinámicamente
Libro sobre SVG SCALABLE de Jorge Aznar.

Cargar SVG dinámicamente

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

Etiquetas: #código, #css, #html, #javascript, #svg, #usabilidad

Esta entrada en el blog complementa el contenido de los artículos Creación de un contador de resultados y Gráfica de lineas dinámica con SVG, pero puede leerse con independencia de ellos. Veremos cómo cargar un SVG (o cualquier otra cosa que nos propongamos) en el DOM una vez renderizada la página en el navegador apoyándonos en la instrucción fetch(). Se asume que el lector conoce el uso de esta instrucción.

La idea la tomé de este repositorio: Reproducción de acceso a SVG externo con CSS.

Como sabemos, podemos cargar imágenes, y también SVG en nuestra página con la etiqueta img:

<img src="imagen.svg" alt="Imagen de ejemplo en formato SVG" />

pero esto presenta un inconveniente. Desde el DOM, con JavaScript, no podemos acceder a las etiquetas del fichero SVG, y esto es fundamental para poder aplicar cambios dinámicos a la imagen.

La alternativa es poner el SVG en línea dentro del HTML, de una forma parecida a:

<svg id="imagen" version="1.1" xmlns="http://www.w3.org/2000/svg">
...
</svg>

En los puntos suspensivos estaría el cuerpo del SVG. Pero esto presentaría otro problema, y es que aumenta el tamaño del HTML de manera considerable, y lo hace menos legible.

La propuesta de esta entrada es la de hacer la carga del SVG dinámicamente, una vez se ha cargado la página, empleando fetch() para «traer» la imagen desde el servidor e insertarla en el DOM directamente tomando como referencia un elemento padre del HTML:

<div id="imagen"></div>

Veamos cómo de sencillo es esto.

El código

EL HTML de nuestra página sería pues muy simple:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo SVG</title>
    <script defer src="funciones.js"></script>
</head>
<body>

    <div id="imagen"></div>
    
</body>
</html>

Toda la magia se llevaría a cabo en la siguientes funciones para hacer posible la carga dinámica de la imagen:

01. function el(el) { return document.querySelector(el) }
02. 
03. function fetchAPI(url, callback, tipo = 'json') {
04.     // setSpin(true);
05.     fetch(url)
06.         .then(respuesta => {
07.             if (!respuesta.ok) throw Error(respuesta.statusText);
08.             return tipo == 'json' ? respuesta.json() : respuesta.text();
09.         })
10.         .then(datos => callback(datos))
11.         .catch(err => console.log(err));
12.         // .finally(setSpin(false));
13. }
14. 
15. let urlImagen = 'https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg';
16. let cargaImagen = xml => el('#imagen').innerHTML = xml;
17. fetchAPI(urlImagen, cargaImagen, 'text');

Nota: La línea 4 y la línea 12 llaman a la función setSpin() que describí en la entrada Spinner loader asíncrono, y podemos prescindir de ellas sin problema si no vamos a usarlas.

Veamos que hace esto. En la línea 1 tenemos una función cuya utilidad es la de acortar la llamada a querySelector(). Más allá de la estética, simplifica la escritura de código. La usaré en la línea 16.

La función fetchAPI() contiene la estructura genérica de una consulta fetch(), y la usaré en la línea 17, tras haber definido la dirección donde está ubicado el SVG en la línea 15 urlImagen, y la función que se ocupará de poner la imagen en el DOM de la línea 16 cargaImagen. Básicamente, la llamada:

fetchAPI(urlImagen, cargaImagen, 'texto');

lo que hace es pasar a fetch() la dirección de la imagen SVG y mediante la función callback cargaImagen(), que es una función flecha asignada a una variable, una vez fetch obtenga la imagen, ponerla dentro del contenedor div que describimos en el HTML. El parámetro 'texto' sirve para indicar que lo que vamos a cargar debe ser leído como texto, y no como un json. Realmente podríamos poner cualquier cosa aquí: ‘text’, ‘false’… lo que se nos ocurriese, ya que la función fechAPI consulta si lo que estamos indicando que debe devolver es ‘json’ en la línea 8:

    return tipo == 'json' ? respuesta.json() : respuesta.text();

y cualquier otra opción será entendida como que debe devolver la dos datos de tipo text() en vez de json(), que es el formato que requiere el contenido xml que describe el SVG que estamos cargando. por defecto, esta función devolverá un json si no indicamos este parámetro en la llamada.

En la línea 13 comprobamos que la petición fetch(url) no ha devuelto ningún error. fetch() no realiza esta comprobación por nosotros, y si se obtiene respuesta del servidor, así sea un error, entenderá que la petición se ha llevado a cabo, y devolverá la respuesta obtenida. Con esta línea nos aseguramos de que todo ha ido bien, si no es así, lanzo un error que será capturado en la línea 17 y mostrado por consola, parando la ejecución de la función.

Una vez devueltos los datos desde la línea 8, es en la línea 10 donde se procesa la función callback_ cargaImagen que paso como parámetro:

xml => el('#imagen').innerHTML = xml;

Esta función flecha toma los datos xml recibidos de fetch(), que deben estar en formato .text() y los inserta en el div que identificamos con el id="imagen" usando .innerHTML.

Desde ese momento ya disponemos de acceso completo al .SVG mediante el DOM.

Código completo

Puedes copiar y pegar este código para hacer pruebas:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo SVG</title>
</head>
<body>

    <div id="imagen"></div>

    <script>
        function el(el) { return document.querySelector(el) }

        function fetchAPI(url, callback, tipo = 'json') {
            // setSpin(true);
            fetch(url)
                .then(respuesta => {
                    if (!respuesta.ok) throw Error(respuesta.statusText);
                    return tipo == 'json' ? respuesta.json() : respuesta.text();
                })
                .then(datos => callback(datos))
                .catch(err => console.log(err));
                // .finally(setSpin(false));
        }

        let urlImagen = 'https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg';
        let cargaImagen = xml => el('#imagen').innerHTML = xml;
        fetchAPI(urlImagen, cargaImagen, 'text');
    </script>

</body>
</html>

Enlaces

Ver ejemplo de aplicación práctica. Summer Quiz. El SVG inicial de la gráfica y el SVG final de resultados se cargan mediante este método. Es necesario terminar una partida para obtener resultados que se muestren en la gráfica.
Creación de un contador de resultados.
Gráfica de lineas dinámica con SVG.
Spinner loader asíncrono.
Libro sobre SVG SCALABLE de Jorge Aznar.
Reproducción de acceso a SVG externo con CSS.
Imagen SVG de prueba en Wikipedia.

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

Filtrado múltiple

JavGuerra — Fri, 15 Jul 2022 00:00:00 GMT

Etiquetas: #código, #javascript, #node.js, #express

En programación es habitual trabajar con datos de entrada. Un caso común son los campos (obligatorios o no) que recibimos de un formulario para realizar búsquedas en una base de datos y devolver datos al usuario, o para dar de alta nueva información… pero estos datos de entrada, según las circunstancias, pueden variar. Para un mismo formulario, podemos recibir uno o varios campos, lo que complica la forma en que hacemos las búsquedas de información. En esta entrada veremos como simplificar el filtrado para hacer consultas a los datos.

Supuesto práctico

Tenemos una lista de productos almacenados en un arreglo o lista de objetos. Cada objeto tiene las propiedades nombre, tipo y precio, y deseamos hacer búsquedas sobre esta lista, devolviendo los objetos que cumplan con los datos recibidos desde un formulario. Los datos recibidos pueden ser todos ellos, es decir, valores para cada una de las tres propiedades, o sólo el dato de búsqueda de uno de ellos o dos de ellos (faltando un dato en este último caso). Veamos primeramente la estructura de datos:

let productos = [
    {
        "nombre": "LAVADORA SECAMAS",
        "tipo": "hogar",
        "precio": 700
    },
    {
        "nombre": "TELEVISOR TV",
        "tipo": "video",
        "precio": 1200
    },
    {
        "nombre": "ARMARIO RIO",
        "tipo": "hogar",
        "precio": 300
    }
];

Una búsqueda nombre: 'LAVADORA' me devolvería el primer objeto. Si busco por tipo: 'hogar' me devolverá el primer y el tercer objeto… Y si busco por tipo: 'video' y precio: menor que 1500 me devolverá el segundo objeto.

Comunmente…

Para hacer una búsqueda sobre esta lista, tendría que comprobar si he recibido un valor para cada uno de las propiedades de los objetos de la lista, y si es así, realizar el filtrado por el primer valor para obtener el primer resultado, pasar al siguiente valor si lo hubiese, para obtener el siguiente resultado filtrado, y así con tantos valores como haya recibido del formulario. El código sería algo como esto:

let resultados = productos;

if (nombre || tipo || precio) {
    if (nombre) resultados = resultados.filter(producto => producto.nombre.includes(nombre));
    if (tipo)   resultados = resultados.filter(producto => producto.tipo.includes(tipo));
    if (precio) resultados = resultados.filter(producto => producto.precio < precio);
} else {
    resultados = [];
}

console.log(resultados);

Este encadenado de filtrados me obliga a realizar tres filtrados e ir guardando el resultado para el siguiente filtro, si la entrada de formulario, por tanto la variable que guarda su valor, existe.

Como se aprecia en el código, primeramente copio el contenido de productos a resultados, para ir filtrando el resultado. Esto lo hago porque no sé qué valores recibiré, por lo tanto no sabré donde empezará productos.filter, si en el primer, segundo o tercer if.

Seguidamente compruebo si tengo valores en las variables nombre, tipo y precio. Si alguna de ellas existe, realizo el filtrado sobre los datos, sino, devuelvo un arreglo o lista vacía. Así pues, si existe nombre, filtro por nombre, si existe tipo, filtro por tipo y si existe precio filtro por precio, consecutivamente.

Otra manera de hacerlo

Es posible hacer un sólo filtrado que incluya las tres condiciones. Para ello usaré el operador condicional ternario (?):

const resultados = (nombre || tipo || precio)
? productos.filter(producto =>
    (nombre ? producto.nombre.includes(nombre) : true) &&
    (tipo   ? producto.tipo.includes(tipo) : true) &&
    (precio ? producto.precio < precio : true))
: [];

La lista resultados tendrá el valor del filtro o una lista vacía según reciba o no reciba alguno de los valores para filtrar.

Dentro de filter incluimos ahora los tres criterios de filtrado de una vez, pero igualmente debemos comprobar si cada uno de las variables que recibimos tiene o no valores para filtrar, es decir, si el dato de entrada existe.

Si una variable tiene valor, osea, si hemos recibido sus datos del formulario, entonces se incluirá la condición de filtrado, sino se incluirá un true. Nos fijamos en una de las líneas:

    (nombre ? producto.nombre.includes(nombre) : true) &&

Si la variable nombre tiene datos, entonces se incluirá la comprobación producto.nombre.includes(nombre) en el filtrado, de otra forma se incluirá un true.

Como estamos filtrando por un total de hasta tres condiciones que tienen que ser verdaderas (&&), si alguna de ellas no se cumple, el filter pasará al siguiente elemento de la lista, y no devolverá este elemento.

Imaginemos que sólo hemos recibido el nombre del producto. ¿Qué pasa con las otras dos condiciones derivadas de tipo y precio?. Devolverán true, condicionando la respuesta de filtrado a lo que devuelva la condición de nombre. Por ello los true que no sean resultado de la condición de una o varias de las variables no tendrán ninguna influencia en el valor de la comprobación.

Si tenemos dos variables, la tercera será true, y la condición de filtrado funcionará sólo si las dos condiciones con valores de entrada son true si han pasado la comprobación asociada a esa variable.

Otra manera más

En programación no hay un único camino para hacer las cosas. Tras la lectura de esta entrada, Marcos, de un foro de Discord, me propuso una alternativa aún más simple. Vamos a ver cómo funciona:

const resultados = (nombre || tipo || precio)
? productos.filter(producto =>
      (!nombre || producto.nombre.includes(nombre)) &&
      (!tipo   || producto.tipo.includes(tipo)) &&
      (!precio || producto.precio < precio))
: [];

La lógica de fondo no deja de ser la misma, se basa en un booleano que nos dice si se va a tener en cuenta la condición o se va a incluir un true, pero esta refinada forma de hacerlo consiste en «jugar» con el valor inverso del contenido de una variable, de tal forma que si la variable existe, su valor será false (Ej. !nombre) debiendo aplicar entonces la condición de filtrado (||), y si no existe, el valor de la variable será true. Elegante.

Un poco más allá

La siguiente es una función basada en la codificación anterior y devuelve un objeto que incluye un código de respuesta y el listado de objetos resultante.

function respuesta(nombre = undefined, tipo = undefined, precio = undefined) {
    let codigo = (nombre || tipo || precio) ? 0 : 2;
    const resultados = (codigo == 0)
        ? productos.filter(producto =>
            (!nombre || producto.nombre.includes(nombre)) &&
            (!tipo   || producto.tipo.includes(tipo)) &&
            (!precio || producto.precio < precio))
        : [];
    if (codigo == 0) codigo = (resultados.length) ? 0 : 1;
    return { codigo, resultados };
}

La variable codigo va a contener tres posibles valores:

Valor	Significado
0	Datos encontrados.
1	No se han encontrado datos.
2	No se han recibido datos de entrada.

De tal forma que en:

    let codigo = (nombre || tipo || precio) ? 0 : 2;

se determina si se ha recibido alguna de las variables, asignándole el código correspondiente, y en la línea:

    if (codigo == 0) codigo = (resultados.length) ? 0 : 1;

se determina si se ha obtenido algún resultado tras la búsqueda, si el código era 0, es decir, si había datos de entrada.

por último en la línea:

    return { codigo, resultados };

Devolvemos el objeto con la información de lo sucedido y el resultado de la búsqueda.

La línea anterior es equivalente a:

    return { codigo: codigo, resultados: resultados };

Esta función puede ser útil para, por ejemplo, trabajar con rutas en Node.js/express:

router.get('/', (req, res) => {
    const { nombre, tipo, precio } = req.query;
    res.json( respuesta(nombre, tipo, precio) );
});

Conexión persistente a MongoDB en Node.js

JavGuerra — Sun, 24 Jul 2022 00:00:00 GMT

Etiquetas: #código, #javascript, #node.js, #express, #mongodb

Esta semana tocó aprender sobre MongoDB. Una de las cuestiones que me llamaron la atención en los ejercicios que realizamos era la necesidad de abrir y cerrar la conexión a la Base de Datos (en adelante «BBDD») en cada consulta, algo que supone una sobrecarga importante para el servidor, así que me puse a investigar la manera de hacer que la conexión a la BBDD permaneciese abierta y dando servicio a través de los distintos módulos de la aplicación. Esto es lo que descubrí, con ayuda de la comunidad.

Cambiando el chip

Pasar de manejar datos embebidos en módulos como en el caso de la publicación sobre filtrado múltiple a consultar una base de datos como MongoDB presenta retos importantes. el principal es que debo establecer la conexión al servicio y esperar una respuesta. Una consulta típica a MongoDB tendría esta forma:

if (process.env.NODE_ENV !== 'production') require('dotenv').config();
const mongoClient = require('mongodb').MongoClient;

const url = `${process.env.DB_HOST}:${process.env.DB_PORT}/`;
const db_name = process.env.DB_DATABASE;
const collection = "products";

(url, function(err, database) {
    if (err) throw err;
    const db = database.db(db_name);
    db.collection(collection).find().toArray(function(err, result){
        if (err) throw err;
        console.log(result);
        database.close();
    });
});

En la primera línea, en función de si la aplicación está funcionando en local, en modo desarrollo, o bien en producción en el servidor, cargo o no el módulo dotenv que me permite tener las variables globales que luego usaré en url y db_name por ejemplo definidas en un fichero .env. Puedes ampliar conocimientos sobre este asunto en .dovenv.

Tras importar mongoClient, y definir las variables que se emplearán en la conexión (url a la BBDD, nombre de la BBDD y nombre de la colección) lanzo un mongoClient.connect() que devuelve bien un error de conexión o abre la conexión (cliente) al gestor de BBDD MongoDB. Luego, con const db = database.db(db_name); obtengo acceso a la BBDD, y seguidamente hago una consulta con db.collection(collection).find(). Una vez obtengo el resultado de la búsqueda (en este caso todos los documentos dentro de la colección de la BBDD), los muestro por consola y cierro la base de datos con database.close();.

Pero si deseo hacer otra búsqueda, o en el módulo tengo una serie de rutas, todas ellas apuntando a una consulta a la BBDD, el número de aperturas y cierres de la conexión se multiplica por el número de consultas. Esto en una página personal o con poco tráfico es sostenible, pero no lo es para grandes flujos de acceso o incluso para situaciones de picos concretos de acceso al servidor (horas de más tráfico, momentos del año donde las consultas se incrementan, por ejemplo cuando se solicitan los resultados de un evento, las notas de fin de curso, una noticia que ha tenido popularidad o alcance…).

Mantener la conexión abierta para distintas consultas en un módulo es fácil, pero, ¿cómo abrirla a través de los distintos módulos de la aplicación?

Primer acercamiento: Importar y conectar

Mi primera opción fue que si voy a emplear la conexión en distintos módulos debía extraer el proceso de conexión a un módulo a parte y luego importarlo allá donde lo necesite, y dicho y hecho:

if (process.env.NODE_ENV !== 'production') require('dotenv').config();
const MongoClient = require('mongodb').MongoClient;

const url = `${process.env.DB_HOST}:${process.env.DB_PORT}/`;
const db_name = process.env.DB_DATABASE;

const loadDB = async () => {
    try {
        const client = await MongoClient.connect(url);
        const db = client.db(db_name);
        return db;
    } catch (err) {
        console.log(err);
    }
};

module.exports = loadDB;

Este módulo realiza lo mismo que en el ejemplo anterior, es decir, abre una conexión a MongoDB, pero lo hace exportando la función asíncrona loadDB para que pueda ser llamada desde otros módulos con:

const loadDB = require('../services/DB');
let db;
const collection = "products";

(async () => db = await loadDB())();

db.collection(collection).find().toArray(function(err, result){
    if (err) throw err;
    console.log(result);
});

Tras cargar loadDB, declaro la variable de ámbito global db que contendrá la conexión a la BBDD, y en la línea:

(async () => db = await loadDB())();

Ejecuto la función asíncrona loadDB() para obtener la conexión que se guardará en db, y ya puedo hacer la consulta con db.collection(collection).find().

Esta consulta podría formar parte de una ruta de express:

const express = require('express');
const router = express.Router();
const loadDB = require('../services/DB');
let db;
const collection = "products";

(async () => db = await loadDB())();

router.get('/ejemplo', (req, res) => {
    db.collection(collection).find().toArray(function(err, result){
        if (err) throw err;
        res.json(result);
    });
})

module.exports = router;

Pero claro, esta forma de proceder implica abrir una conexión por cada módulo de rutas que use la función loadDB. No es lo que busco.

Alternativa: función callback al rescate

¿Qué tal si, en vez de intentar traer a cada módulo la conexión a la BBDD llevo las rutas a la función que abre la conexión directamente mediante una función callback? Veamos…

Para que todas las rutas puedan usar la variable db que se declara cuando se lleva a cabo la conexión, podría establecer una única conexión a la base de datos desde index.js (o app.js) osea, desde el fichero principal de la aplicación Node.js, y referenciar las rutas dentro de una función callback que le pase al módulo encargado de abrir la conexión.

Esta idea fue la que me propuso ZeroBl, que se tomó el tiempo de responder a mis preguntas en un foro de Discord, y tras pasarme el código que él usa para establecer su conexión, y buscar un poco más de información en StackOverflow, el resultado fue el siguiente:

Módulo de conexión a la BBDD

if (process.env.NODE_ENV !== 'production') require('dotenv').config();
const MongoClient = require('mongodb').MongoClient;

const url = `${process.env.DB_HOST}:${process.env.DB_PORT}/`;
const db_name = process.env.DB_DATABASE;

let _db;
let _client;

const connectDB = function (callback) {
    try {
        MongoClient.connect(url, {
            useNewUrlParser: true,
            useUnifiedTopology: true
        }, function (err, client) {
            _client = client;
            _db = client.db(db_name);
            return callback(err, client);
        });
    } catch (err) {
        throw err;
    }
}

const getDB = function () {
    if (_db) return _db;
    throw 'BBDD no encontrada.';
}

const disconnectDB = function () {
    if (_db) return _client.close();
    throw 'BBDD no encontrada.';
}

module.exports = { connectDB, getDB, disconnectDB };

Como se aprecia, este módulo devuelve tres funciones: connectDB que abre la conexión, getDB que obtiene la conexión a la BBDD, y disconnectDB, que cierra la conexión a la BBDD.

A connectDB le paso un callback que se ejecutará en el ámbito donde está viva la conexión. Igual deberemos obtener la referencia a _db en cada módulo que usemos. Lo voy a explicar enseguida.

Con disconnectDB puedo cerrar la conexión a la BBDD desde cualquier parte del programa, pero también debo importarlo si queremos usarlo.

El index.js

O cualquier otro js que haga las veces de inicio de nuestra app:

if (process.env.NODE_ENV !== 'production') require('dotenv').config();
const express = require('express');
const app = express();
const port = process.env.PORT;
const mongoDB = require('./services/DB');

mongoDB.connectDB(function (err, client) {
    if (err) throw err;

    // Ej. http:localhost:3000/ejemplo
    const RouteEjemplo = require('./routes/ejemplo');
    app.use('/ejemplo', RouteEjemplo);

    // otras rutas...

    // Ej. http:localhost:3000/exit
    app.get('/exit', function (req, res) {
        client.close();
        res.end('Fin');
        process.kill(process.pid, 'SIGTERM');
    });

    app.use((req, res) => {
        res.status(404).send('Error 404: No encontrado.');
    });

    app.use((err, req, res, next) => {
        console.error(err.stack);
        const status = err.status || 500;
        res.status(status).send(`Error ${status}: ${err.message}.`);
    });

    const server = app.listen(port, function () {
        console.log(`Servidor levantado en el puerto ${port}.`);
    });

    process.on('SIGTERM', function () {
        server.close(() => console.log('Proceso terminado.'))
    });
});

Importo el módulo de mongoDB y conecto a la BBDD con:

mongoDB.connectDB(function (err, client) {
    // Función callback
});

Función a la que le paso como callback todo el manejo de rutas, e incluso levanto el servidor. Recuerda que esta función se ejecutará tras establecer la conexión en la línea:

return callback(err, client);

Al ejecutar la función obtengo dos posibles valores, o bien un error, o bien el cliente para la conexión. Esto me va a permitir hacer uso del cliente desde la misma función callback, para, por ejemplo, cerrar la conexión, como ocurre en la ruta /exit en:

client.close();

Usar una ruta para cerrar la aplicación por supuesto es un ejemplo ilustrativo, y no es la mejor forma de hacerlo. ;)

Si quiero cerrar la aplicación desde dentro de un módulo de, por ejemplo, una ruta, debo usar disconnectDB().

La ruta de ejemplo

Como dije, para poder utilizar la BBDD en las distintas rutas o en los módulos de la aplicación, debo importar la referencia a db en cada módulo con:

const mongoDB = require('../services/DB');
const db = mongoDB.getDB();

y a partir de ahí puedo usar db en todo el módulo. Así de simple.

Esto es posible porque, como hemos visto, estamos llamado a esta ruta dentro del callback que pasamos a la función que abre la conexión.

En resumen

Mediante un módulo que devuelve tres funciones podemos abrir la conexión a la BBDD (recibiendo y ejecutando un callback) obtener la referencia a la BBDD y cerrar la conexión a la BBDD.

Dentro del callback definimos las rutas (app.use) que van a hacer uso de la BBDD, y en cada módulo donde se defina la ruta o las sub-rutas, deberemos obtener la referencia a la BBDD para poder usarla.

En este enlace a StackOverflow (en inglés) podrás obtener más información y alternativas a esta solución.

Kit básico para manejo del DOM

JavGuerra — Mon, 25 Jul 2022 00:00:00 GMT

Etiquetas: #código, #javascript, #dom

El uso del DOM desde JavaScript ha mejorado mucho en los últimos años. Librerías como jQuery facilitaron enormemente la tarea del programador a la hora de acceder a identificadores, clases y etiquetas, y aunque ahora disponemos de nuevas formas de acceso en JavaScript que han hecho olvidar en parte aquella librería, la forma en que trabajamos con el DOM aún se puede mejorar. En esta entrada veremos unas pocas funciones que nos ayudarán en el día a día.

Nota: Este artículo ha sido publicado también en IfGeekThen, el blog de NTT Data, el 24 de abril de 2026.

Selección al estilo jQuery

Para empezar, un canto a la nostalgia. Si usabas la famosa librería y echas de menos su forma tan simple de funcionar, aquí tienes una aproximación a la selección de elementos del DOM.

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

o en versión función flecha, como más te guste:

const $ = el => document.querySelector(el);

La función $(el) seleccionará un elemento (el) del DOM que podemos asignar a una variable o con el que podemos usar propiedades, por ejemplo:

$('#aviso').classList.add('rojo');

que añadirá la clase .rojo al elemento con el id aviso.

El uso de querySelector() ha venido a simplificar mucho el acceso a los elementos del DOM, pero con esta función $(), seleccionar elementos es aún más simple, y va a ser de ayuda en las siguientes funciones.

Podemos mejorar esta función dándole la posibilidad de buscar dentro de un elemento específico.

const $ = (el, parent = document) => parent.querySelector(el);

Podríamos usarla de esta forma:

const fila = $("#fila3", tabla);

Donde tabla es el elemento padre. De no indicarlo, el elemento padre será todo el documento (document).

También podemos seleccionar varios elementos con $$() con esta función:

const $$ = el => document.querySelectorAll(el);

E igualmente podemos mejorar esto:

const $$ = (el, parent = document) => [...parent.querySelectorAll(el)];

Aquí, además de poder indicar el nodo padre, obtendremos automáticamente el NodeList en un array ([…]).

Crear nuevos elementos y conectarlos al DOM

La creación de nuevos elementos del DOM requiere de varios pasos. Crear el elemento, introducir la información en el elemento si es necesario y conectarlo al elemento padre. ¿Qué tal si lo simplificamos con una función?

function createEl(parent, tag, content = "") {
    const el = document.createElement(tag);
    if (content) el.textContent = content;
    parent.appendChild(el);
    return el;
}

Con la función createEl() cubrimos los tres pasos necesarios para crear, completar y conectar un nuevo elemento, y la función nos devolverá el nuevo elemento para que podamos trabajar con él:

const $titulo = createEl($('body'), 'h1', 'Hola Mundo');

Con esta línea crearemos un elemento H1 dentro del body que contendrá el texto 'Hola Mundo', y la referencia al nuevo elemento está contenida en la variable $titulo.

El $ de la variable titulo no es necesario (ni que estuviésemos programando en PHP…), pero recordando el uso de jQuery, es una buena forma de identificar aquellas variables que hacen referencia a elementos del DOM para diferenciarlas de las otras.

Esta versión puede mejorarse mucho para, por ejemplo, añadir atributos (attrs) e hijos (children)… hasta donde te de la imaginación.

Uso práctico: Creación de tablas básicas con createEl()

Esta nueva función es muy potente, y simplifica mucho las líneas de código que tenemos que usar para crear estructuras del DOM complejas con JavaScript. Un ejemplo de ello son las tablas y sus etiquetas anidadas. Veamos cómo sería una función que crease una tabla simple con createEl():

function createTable(parent, id, headers, footers = null) {

    const table = createEl(parent, 'table');
    table.setAttribute('id', id);

    const thead = createEl(table, 'thead');
    let tr = createEl(thead, 'tr');

    for (const header of headers) {
        const th = createEl(tr, 'th', header);
        th.setAttribute('scope', 'col');
    }

    if (footers) {
        const tfoot = createEl(table, 'tfoot');
        tr = createEl(tfoot, 'tr');
        for (const footer of footers) {
            createEl(tr, 'td', footer);
        }
    }

    return createEl(table, 'tbody');
}

La función createTable() crea una tabla dentro de un elemento padre, le asigna un identificador, y crea las cabeceras y pies que le indiquemos, devolviendo la referencia al elemento tbody de la tabla para que podamos rellenarla con filas y columnas.

Un ejemplo sencillo de uso sería:

$tBody = createTable($('#section'), 'miTabla', ['núm.', 'producto']);

$tBody.innerHTML = '<tr><td>1</td><td>vegetales</td></tr>';

que mostrará la siguiente tabla a la que podemos seguir añadiendo elementos:

núm	producto
1	vegetales

Fácil y cómodo. ¿verdad?

Vaciar un elemento de forma eficiente

Vaciar un contenedor con innerHTML = "" funciona, pero la siguiente función es más eficiente y segura, porque no reemplaza el contenedor entero y no rompe event listeners internos, lo que puede provocar pérdida o duplicación de eventos.

function emptyEl(el) {
    while (el.firstChild) {
        el.removeChild(el.firstChild);
    }
}

Un ejemplo para borrar el contenido de una lista:

emptyEl($("#lista"));

Añadir o quitar una clase CSS

La función:

function toggleClass(el, className) {
    return el.classList.toggle(className);
}

aprovecha el.classList.toggle() para:

Añadir una clase si el elemento no la tiene.
Quitar una clase si el elemento ya la tiene.

y devuelve true si la clase se añadió y false si la clase se eliminó.

Esta función es ideal para interacciones de usuario tipo click para abrir/cerrar, expandir/contraer, activar/desactivar.

Establecer una clase según un estado booleano

La función setClass() permite añadir o quitar una clase según un booleano, garantizando que el elemento queda exactamente en el estado indicado. A diferencia de toggleClass(), no alterna: fuerza el estado.

function setClass(el, className, active) {
    el.classList.toggle(className, active);
}

Ejemplos:

setClass(menu, 'open', true);   // añade la clase
setClass(menu, 'open', false);  // la quita
setClass(input, 'error', !isValid(input.value)); // Estado de error en un formulario
tabs.forEach(tab => {
    setClass(tab, 'active', tab.id === selectedId); // Pestaña activa según ID
});

Esta función es perfecta para sincronizar la UI con estados lógicos (isOpen, hasError, isActive, etc.).

Mostrar u ocultar elementos del DOM

Una función que nos aporte una forma simple de hacer visible u ocultar cualquier elemento del DOM, por ejemplo las secciones de una página web de una única página (SPA) sería la siguiente:

function showEl(el, visible) {
    visible
        ? el.style.removeProperty("display")
        : el.style.display = "none";
}

La función showEl() requiere dos parámetros: elemento del DOM con el que vamos a trabajar y si va a estar visible (true) o invisible (false).

Digamos que en una SPA hemos completado un formulario, y ahora queremos mostrar los resultados. con esta función podríamos:

showEl($('#form'), false);
showEl($('#results'), true);

Partimos de la base de que el elemento con identificador results estaba oculto, y el elemento con identificador form visible. De esta forma el formulario se ocultaría y serían visibles los datos derivados de la gestión de formulario.

Comprobar si un elemento está visible

Esta función permite saber si un elemento está realmente visible en la página.

function isVisible(el) {
    return !!(el.offsetWidth ||
          el.offsetHeight ||
          el.getClientRects().length);
}

La función showEl() e isVisible() se complementan perfectamente porque la primera controla si un elemento se muestra u oculta, y la segunda detecta si un elemento está actualmente visible.

Veamos un ejemplo de uso conjunto:

if (!isVisible(panel)) {
    showEl(panel, true);   // lo muestra solo si está oculto
}

Activar o desactivar un botón

Es una buena práctica desactivar un botón cada vez que se dispare un evento asociado a este. Nada más fácil con la siguiente función:

function setInactiveBtn(button, inactive) {
    button.disabled = inactive;
    inactive
        ? button.setAttribute('aria-disabled', 'true')
        : button.removeAttribute('aria-disabled');
}

Con setInactiveBtn() cambiamos el estado disabled del botón que indiquemos pasándole los valores true o false. Un ejemplo:

function setInactiveBtn($('#submit'), true);

La función desactivará el botón con el identificador submit (disabled = true). Para volver a activarlo, será suficiente con usar la misma función con el status false.

Comprobar si un botón está activo

También podemos necesitar conocer el estado de un botón, si este está activo o inactivo.

function isInactiveBtn(button) {
    return button.disabled === true;
}

Un ejemplo de uso con setInactiveBtn():

setInactiveBtn(btn, !isInactiveBtn(btn));

Activa o desactiva el botón invirtiendo su estado actual (si está activo lo desactiva, y si está inactivo lo activa).

Decodificar entidades HTML con ayuda del DOM

Pasemos ahora a cosas más específicas a modo de bonus.

Aunque JavaScript incluye funciones como encodeURIComponent() y decodeURIComponent(), estas se utilizan exclusivamente para codificar y decodificar URLs, no entidades HTML. Por tanto, una función como esta resulta práctica cuando recibimos cadenas que contienen entidades como & o ", ya que el lenguaje no ofrece un método nativo para convertirlas en texto legible. Podemos apoyarnos en el motor del DOM para conseguirlo.

La siguiente función crea un nodo temporal, asigna su contenido usando innerHTML y obtiene el texto decodificado mediante textContent. Es un ejemplo interesante de cómo el DOM puede ayudarnos más allá de la manipulación visual de la página.

Cuando la función recibe la información codificada con entidades HTML, por ejemplo, a través de una API, y queremos reconducir esa información a, por ejemplo, un fichero de logs en texto plano, o tal vez enviarla a consola, la información no se muestra correctamente. Una forma de convertir a un string la información que incluye entidades HTML sería la siguiente:

function decodeHTMLEntities(html) {
    if (typeof html !== "string") return "";
    const div = document.createElement("div");
    div.innerHTML = html;
    return div.textContent || "";
}

La función recibe la cadena a «decodificar» y devuelve la cadena en texto simple. Para ello obliga al DOM a trabajar para nosotros creando un elemento div en el que se incluye el texto «codificado» y del que se lee luego el texto «decodificado» para devolverlo con return. Como se ve, el elemento div nunca llega a conectarse al árbol DOM.

Tomemos el siguiente ejemplo:

let texto = decodeHTMLEntities('Los%20ni%C3%B1os%20com%C3%ADan%20y%20daban%20migajas%20a%20la%20cig%C3%BCe%C3%B1a.');

El valor de texto resultante será: ‘Los niños comían y daban migajas a la cigüeña.’.

Iniciar si el DOM está cargado

Concluyo con una función primordial.

Con onReady(), si el DOM ya está cargado, se ejecutará la función de inicio que le pasemos inmediatamente. Si el DOM aún se está cargando, añade un listener a DOMContentLoaded.

function onReady(fn) {
    if (document.readyState !== "loading") {
        fn();
    } else {
        document.addEventListener("DOMContentLoaded", fn);
    }
}

Veamos un ejemplo de uso:

onReady(() => {
    const btn = $("#btnStart");
    setClass(btn, "ready", true);
});

La función onReady() permite escribir inicialización limpia sin preocuparte por dónde está ubicado el script o de qué forma se carga.

Tu propio kit

Espero que alguna de estas funciones te resulte útil, te hagan la vida más agradable y, sobre todo, que te animen a experimentar por tu cuenta.

El DOM ofrece muchísimas posibilidades, y a veces basta con probar una idea para descubrir una utilidad nueva que encaje contigo y ampliar de esta forma tu kit de herramientas. ¡Diviértete explorando!

Conocer el ancho y alto de una imagen con JavaScript antes de usarla en HTML

JavGuerra — Mon, 01 Aug 2022 00:00:00 GMT

Etiquetas: #código, #javascript, #node.js, #imágenes

Cuando una web está cargando, se producen cambios en el diseño conocidos como Flash Of Unestiled Content (FOUC) que son visualmente molestos para el usuario y le hacen perder su punto de referencia en la página. Las imágenes son uno de los principales causantes de estos cambios. Hasta que no son cargadas no se conoce su ancho y alto, por lo que es un buen criterio de diseño indicar el ancho y alto de la imagen en el HTML. Pero ¿qué ocurre cuando no conocemos las medidas de las imágenes que vamos a cargar? Pongamos como ejemplo una galería de fotos que tomamos mediante fetch. En esta entrada veremos como afrontarlo.

El código

Pongamos que tenemos un arreglo con un listado de URLs de fotos de adorables perritos que queremos mostrar en una galería de fotos. Este arreglo podemos definirlo u obtenerlo mediante fetch desde una API u otro lugar. Cada imagen tiene un tamaño distinto, osea, unas medidas para los valores width y height diferentes. Nuestro objetivo es conocer estos valores antes de mostrar las fotos en la galería, para asignarles su ancho y alto correctos y evitar de esa manera el FUOC. De otra forma, a medida que se carguen las imágenes en la galería, estas irán abriéndose hueco para ocupar su espacio «empujando» el diseño.

Con este código que seguramente encontré y adapté de StackOverflow o un sitio similar podemos hacerlo. Lo describo más abajo.

const galeria = document.getElementById('galeria');

const fotos = [
    'https://images.dog.ceo/breeds/dachshund/Stretched_Dachshund.jpg',
    'https://images.dog.ceo/breeds/cattledog-australian/IMG_1211.jpg',
    'https://images.dog.ceo/breeds/dachshund/dachshund-7.jpg'
];

function medidas(urlFoto) {
    return new Promise((resolve, reject) => {
        const img = new Image();
        img.onload  = () => {
            resolve({ ancho: img.width, alto: img.height });
        };
        img.onerror = () => {
            reject(new Error('Imagen no encontrada.'));
        };
        img.src = urlFoto;
    });
}

fotos.forEach((urlFoto, i) => {
    medidas(urlFoto)
        .then(mide => {
            galeria.innerHTML += `<img src="${urlFoto}" `
            + `width="${mide.ancho}" height="${mide.alto}" `
            + `alt="Foto ${i}" title="Foto ${i}" />`
        })
        .catch(err => console.error(err));
    }
)

Para usar este código, debemos tener algo como esto en el HTML:

<div id="galeria"></div>

Vamos con JavaScript. Primero defino las variables con las que voy a trabajar. La referencia al elemento del DOM y el arreglo de URLs de fotos de perritos:

const galeria = document.getElementById('galeria');

const fotos = [
    'https://images.dog.ceo/breeds/dachshund/Stretched_Dachshund.jpg',
    'https://images.dog.ceo/breeds/cattledog-australian/IMG_1211.jpg',
    'https://images.dog.ceo/breeds/dachshund/dachshund-7.jpg'
];

Obtener las medidas

Aquí es donde se produce la magia. Veamos como:

function medidas(urlFoto) {
    return new Promise((resolve, reject) => {
        const img = new Image();
        img.onload  = () => {
            resolve({ ancho: img.width, alto: img.height });
        };
        img.onerror = () => {
            reject(new Error('Imagen no encontrada.'));
        };
        img.src = urlFoto;
    });
}

Esta función recibe como parámetro la URL de la imagen a calcular y envuelve una promesa que resolverá un objeto con las medidas ancho y alto o bien un error.

Para hacerlo, instancio una nueva imagen con const img = new Image(); y declaro dos eventos asociados a img, un evento que se disparará cuando se cargue la imagen en img con img.src = urlFoto; (img.onload), y otro que se disparará si se produce un error al cargar la imagen (img.onerror).

Es decir, cuando cargo la imagen con img.src = urlFoto; pueden pasar dos cosas, que se lance el evento onload si todo fue bien, o el evento onerror si algo falló.

Si todo fue bien, la imagen estará «cargada» en img, y podemos obtener su ancho y alto. Mediante resolve({ ancho: img.width, alto: img.height }); devuelvo estos valores dentro de un objeto.

Si algo falló, devuelvo un error con reject(new Error('Imagen no encontrada.'));.

Poner las imágenes en la galería

Si tenemos la función medidas() a la que podemos pasarle una URL, podemos recorrer el arreglo fotos y poner en nuestro HTML cada foto con sus medidas exactas:

fotos.forEach((urlFoto, i) => {
    medidas(urlFoto)
        .then(mide => {
            galeria.innerHTML += `<img src="${urlFoto}" `
            + `width="${mide.ancho}" height="${mide.alto}" `
            + `alt="Foto ${i}" title="Foto ${i}" />`
        })
        .catch(err => console.error(err));
    }
)

Mediante un .forEach() recorro cada elemento del arreglo. De él obtengo dos valores, cada una de las URLs y el índice que ocupa en el arreglo cada URL.

Llamo a la función medidas() a la que le paso como parámetro la URL de una foto (urlFoto).

La función devuelve una promesa que debe ser resuelta. Así mediante .then() obtengo el objeto mide que contiene el ancho y el alto de la imagen que indiqué mediante la URL, que es el resultado del resolve de la promesa. De otra forma, con .catch() se captura el error resultante del reject de la promesa.

Si tenemos las medidas de ancho y alto de la imagen a mostrar, ya podemos conectarla al DOM con:

galeria.innerHTML += `<img src="${urlFoto}" `
+ `width="${mide.ancho}" height="${mide.alto}" `
+ `alt="Foto ${i}" title="Foto ${i}" />`

Esto insertará en el elemento del DOM identificado con #galeria una imagen (img) con el enlace a la foto (src), su ancho (width), alto (height) y una etiqueta alt que «describe» (vagamente) la foto. Con title podemos obtener la misma descripción al pasar con el ratón sobre la imagen.

Por supuesto a la imagen podemos aplicarle las clases CSS que deseemos para, por ejemplo, que aparezca correctamente si usamos flexbox o similar para mostrar la galería…

El módulo image-size

Si realizamos el test Page Speed de Google a nuestra página y no indicamos el ancho y alto de las imágenes, esto nos penalizará en la puntuación de viabilidad en el apartado Cumulative Layout Shift o CLS. El «movimiento inesperado de contenido» en español, mide la estabilidad visual cuantificando la frecuencia con la que los usuarios experimentan cambios de diseño inesperados. Así pues, cuanto más bajo sea el CLS, mejor.

Manz, de manz.dev, en su canal de Discord, cuenta lo siguiente:

El navegador nunca va a saber las dimensiones (ancho y alto) de la imagen hasta descargar la imagen. Si la imagen es pesada va a tardar un rato y no es posible “reservar” ese espacio en la web porque no lo conoce. La única forma de evitar el CLS es indicarle tú previamente el tamaño para que no haya “salto”.

Mediante la opción propuesta, podemos resolver este problema si somos nosotros los que desarrollamos todo el código, pero si estamos trabajando con frameworks, también hay soluciones disponibles. Manz sigue diciendo:

Hay una forma de evitarlo, si estás usando SSG (eleventy, astro, next, etc…) y es que en la fase de “compilación” le pases algún plugin que vaya mirando las imágenes y sacando sus dimensiones con node y añadiendo automáticamente el width y height. Yo, por ejemplo, uso este: image-size

Como indica Manz, image-size es una opción que permite obtener las dimensiones de una imagen y que podemos instalar con npm.

Un truco

Em Twitter Manz contaba:

Otras soluciones más simples e ingeniosas pueden ser establecer un alto máximo para el contenedor, de modo que no haga reflow de elementos inferiores, y los items del interior (galería) los vas haciendo aparecer a medida que se carguen con CSS/JS.

Esta, sin duda, es otra opción.

Resumen

En Twitter, Manz proponía también estas tres opciones para evitar el reflow que podemos tomar a modo de resumen:

Establecer siempre el width y height (tedioso)

Usar aspect-ratio de CSS (https://caniuse.com/mdn-css_properties_aspect-ratio)

Automatizar con alguna herramienta de preprocesado. Yo en 11ty uso image-size o soluciones parecidas

Enlaces

Ejemplo de uso de la solución propuesta: Galería de perritos.
Módulo image-size.
Page Speed de Google.
¿Qué es el Cumulative Layout Shift (CLS)?.
Twitter de @Manz: ¿Qué es «FUOC»?.
Web de @Manz: manz.dev.

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

Conexiones asíncronas a MySQL en Node.js

JavGuerra — Wed, 14 Sep 2022 00:00:00 GMT

Etiquetas: #código, #javascript, #node.js, #mysql, #bbdd

El módulo mysql de Node.js lleva a cabo conexiones a la BBDD empleando callback para obtener los datos de las consultas SQL y no permite, por defecto, el uso de async/await. Al abrir la conexión, el resultado de estas consultas permanecerá dentro de la función callback. En este artículo mostraré cómo convertir conexiones MySQL de Node.js en promesas que permitan el uso de async/await, pudiendo así extraer de la función el resultado de la consulta.

Nota: Esta entrada es un ejercicio sin un sentido práctico específico en el que se hace uso del módulo mysql de Node.js. Para producción se recomienda el uso de mysql2, que incluye soporte para promesas, o el uso de un ORM como Sequelize.

Poder obtener los datos de la consulta SQL, en el flujo de nuestro programa, nos facilita la tarea de observar buenas prácticas que permitan separar las rutas de los controladores y los servicios. Con un módulo de conexión podemos realizar las consultas desde los servicios, y estos a su vez devolver el resultado al controlador que fue llamado desde la ruta.

├── controllers
│   └── searchControllers.js
├── modules
│   ├── connection.js
│   └── utils.js
├── routes
│   └── searchRoutes.js
├── services
│   └── searchServices.js
├── index.js

Pongamos que llega una consulta a la ruta de nuestra API que es gestionada por searchRoutes.js, esta emplea una función del controlador que importa de searchControllers.js que procesa la consulta, y que a su vez llama a una función del servicio searchServices.js que se encarga de hacer la petición SQL a la BBDD.

Dado que todas las peticiones a la BBDD son análogas (abrir conexión, hacer petición, devolver resultado) he creado una función llamada getMysqlDbList() que he colocado en un módulo llamado utils.js que importo y uso en searchServices.js.

La función getMysqlDbList() se encargará de hacer la conexión a la base de datos, realizar la consulta y cerrar la conexión, apoyándose en el módulo connection.js.

Un ejemplo

Pongamos que tenemos un frontal desde el que queremos obtener todos los productos de la BBDD. Veamos ejemplos de cada uno de los ficheros mencionados sin tener mucho en cuenta en este caso las pertinentes comprobaciones de los datos recibidos para simplificar el código.

searchRoutes.js

const express = require('express');
const router = express.Router();
const getAllProducts = require('../controllers/searchControllers');

router.get('/', getAllProducts);

module.exports = router;

Por supuesto, este módulo será importado en index.js.

searchControllers.js

const searchServices = require('../services/searchServices');

const getAllProducts = async (req, res) => {
    const products = await searchServices.getAllProducts();
    res.json(products);
};

module.exports = getAllProducts;

searchServices.js

const { getMysqlDbList } = require('../modules/utils');

const getAllProducts = () => {
    const request = 'SELECT * FROM products';
    return getMysqlDbList(request);
}

module.exports = { getAllProducts };

La consulta

Para que esta línea return getMysqlDbList(request); en searchServices.js funcione, la función getMysqlDbList() en utils.js debe devolver el resultado de la consulta. El código debería ser algo como esto:

utils.js (no lo usaremos de esta forma)

const client = require('../modules/connection');

const getMysqlDbList = async (request) => {
    try {
        const list = await client.query(request);
        return list;
    } catch (err) {
        console.error(err);
    }
}

El problema es que la consultas a mysql en Node.js no soportan async/await. Una conexión mysql entonces tendría esta forma, empleando una función callback:

utils.js (no lo usaremos de esta forma)

const connection = require('../modules/connection');

const getMysqlDbList = async (request) => {
    connection.query(request, function (error, results, fields) {
        if (error) throw error;

        results.forEach(result => {
            console.log(result);
        });
    });
}

Como se aprecia, results está dentro de la función callback que obtiene los datos de la consulta y desde dentro de esta función no puedo hacer un return para devolver los productos como resultado de la función getMysqlDbList().

La conexión

Una conexión típica a la BBDD, cuyo código estaría en connection.js, podría ser:

connection.js (no lo usaremos de esta forma)

const mysql = require('mysql');
if (process.env.NODE_ENV !== 'production') require('dotenv').config();

const connection = mysql.createConnection({
    host : process.env.DB_HOST,
    database : process.env.DB_DATABASE,
    user : process.env.DB_USERNAME,
    password : process.env.DB_PASSWORD,
    port : process.env.DB_PORT
});

connection.connect(function(err) {
    if (err) {
        console.error('Error de conexión: ' + err.stack);
        return;
    }
    console.log('Conectado con el identificador ' + connection.threadId);
});

module.exports = connection;

A continuación mostraré los cambios que sufrirá este fichero.

Promisificación

Node.js tiene un módulo util con algunas funciones, entre ellas promisify() que permite la conversión de una función que acepta un callback a una función que devuelve una promesa. A este cambio se le conoce con el aparatoso y extraño nombre de Promisificación.

Con esta función podemos convertir nuestra consulta a la base de datos basada en callback a una promesa que puede usar async/await para devolver la info resultante de la consulta, pero esto no está exento de inconvenientes. Como necesito cerrar la conexión tras la consulta SQL, lo que haré es crear una función en connection.js que exportaré junto con los datos de conexión para ser usados por getMysqlDbList().

connection.js

const util = require('util');
const mysql = require('mysql');
if (process.env.NODE_ENV !== 'production') require('dotenv').config();

const config = {
    host: process.env.DB_HOST,
    database: process.env.DB_DATABASE,
    user: process.env.DB_USERNAME,
    password: process.env.DB_PASSWORD,
    port: process.env.DB_PORT
};

function makeDb(config) {
    const connection = mysql.createConnection(config);
    return {
        query(sql, args) {
            return util.promisify(connection.query)
                .call(connection, sql, args);
        },
        close() {
            return util.promisify(connection.end).call(connection);
        }
    };
}
module.exports = {config, makeDb};

Como se aprecia, importo el módulo util del que utilizaré su función promisify(). Nótese que este util no se refiere a mi módulo utils.js en la carpeta modules, sino al módulo por defecto de Node.js.

Defino los datos de configuración en un objeto, y creo una función makeDb() que recibe como parámetro la configuración para establecer la conexión (mysql.createConnection(config)) y que devuelve mediante return dos funciones en un objeto: query() y close(). Con .call() indico los parámetros de la función que va a ser convertida en promesa.

Con la exportación de config y makeDb() tengo lo necesario para realizar una consulta a la BBDD desde getMysqlDbList() en utils.js.

La función getMysqlDbList()

{: .box-warning} Advertencia: En líneas generales no es buena idea conectar y desconectar a la BBDD en cada request ya que se introduce esa latencia en cada solicitud, por tanto esta es una solución que puede y debe ser mejorada en el futuro.

El siguiente código muestra cómo ha quedado la función getMysqlDbList() dentro del fichero utils.js definitivo (Obviar los anteriores ejemplos de utils.js):

utils.js

const { config, makeDb } = require('./connection');

/**
 * Obtiene un listado de la BBDD MySQL mediante consulta SQL.
 * @param {String} request 
 * @returns Object
 */
const getMysqlDbList = async (request) => {
    let list = '';
    const db = makeDb(config);

    try {
        list = await db.query(request);
    } catch (err) {
        console.error(err);
    } finally {
        await db.close();
    }

    return list;
}

Importo config y makeDb() para poder establecer la conexión a la BBDD mediante: const db = makeDb(config);. Al llamar a makeDb() pasándole el parámetro config se inicia la conexión a la BBDD, y en db se guarda el objeto con las funciones query() y close() que uso a continuación.

Con list = await db.query(request); realizo la consulta a la BBDD. Por supuesto request es un parámetro que nos llega desde el servicio en searchServices.js.

Por último, con await db.close() cierro la conexión a la BBDD.

Ahora, con return list puedo devolver el resultado obtenido de la BBDD al servicio;

Resumiendo

Al hacer una petición a la ruta de nuestra API, esta llama a una función en el controlador encargada de procesar los datos recibidos en la petición que a su vez llama a una función en el servicio encargado de hacer la consulta a la BBDD.

La función del servicio llama a una función en el fichero utils.js que se ocupa de establecer la conexión, realizar la consulta a la BBDD y cerrar la conexión. Esta función se externaliza porque, generalmente, su funcionalidad es la misma para cada consulta a la BBDD en cada servicio, cambiando sólo la consulta SQL a realizar.

Para poder ejecutar esta función en el fichero utils.js se requiere del módulo de conexión que exporta tanto los datos de conexión como una función que permite realizar la conexión a la BBDD, la consulta y el cierre de la conexión, de tal forma que pueda usarse con async/await.

Enlaces

Página de la que he obtenido la pista para resolver esta cuestión Node.js, MySQL and async/await
La función util.promisify() en Node.js util.promisify()
Usando el método .call ¿Para qué sirven los métodos .call() y .apply() en JavaScript?
Libreria alternativa que incluye promesas (Aportada por borja) Node MySQL 2
ORM: Sequelize
Ejemplo de uso de pool de conexiones mysql, aportado por Jose, de «Desarrollo útil». Node.js Rest APIs with Express & MySQL example

Usando populate con paginate y filtrando los resultados

JavGuerra — Sat, 29 Oct 2022 00:00:00 GMT

Etiquetas: #código, #javascript, #node.js, #mongodb, #mongoose, #paginate

Si bien mongodb tiene formas de obtener resultados paginados (limit, skip), el módulo mongoose-paginate-v2 de mongoose nos ahorra tiempo y código a la hora de preparar y usar los datos paginados obtenidos de las búsquedas en nuestras bases de datos, devolviendo información complementaria muy cómoda, pero ¿cómo podemos usar la paginación cuando tenemos relaciones entre colecciones? En esta entrada explicaré cómo paginar resultados agregados entre colecciones como si usásemos aggregate en mongodb o populate en mongoose, y además cómo filtrar búsquedas agregadas y paginadas con este módulo.

El ejemplo

Imaginemos que tenemos dos colecciones en una BBDD mongodb, una de libros y otra de autores, y un dato en cada documento de la colección libros llamado autor que sirve para contener la información agregada del autor en la colección libros. En el schema, el dato autor podría tener esta forma:

    autor: { 
        ref: { type: Schema.Types.ObjectId, ref: 'Autor' },
        nombre: String
    }

La propiedad ref es la que «tenderá el puente» entre ambas colecciones, y contendrá el _id del documento a relacionar de la colección autores. La propiedad nombre contendrá, como se espera, el nombre del autor. Si bien este dato estará también en la colección autores, y puede ser redundante cuando agregamos los resultados, el dato tiene su utilidad, pues nos permite realizar el filtrado de libros por autor incluso sin realizar la agregación.

Una búsqueda haciendo uso de populate tendría esta forma:

Libro.find( filtro ).populate( 'autor.ref' ).exec();

donde filtro es un objeto que contendrá los criterios de búsqueda, y autor.ref es la necesaria referencia para poder llevar a cabo la agregación de datos de la colección autores en libros.

Si queremos emplear el módulo mongoose-paginate-v2 para paginar los resultados de la búsqueda, esta quedaría de la siguiente forma:

Libro.paginate(filtro, { page, limit });

donde page indica la página de resultados a obtener y limit el número de resultados por página.

Pero sólo nos devolverá los datos de la colección autores, sin agregar los datos de la colección libros. ¿Cómo se haría esto?

Agregando y paginando

Hemos visto que paginate acepta dos parámetros, los criterios de búsqueda (filtro) y las opciones (page, limit). Otra opción que podemos añadir a paginate es populate. Para hacer una búsqueda agregada como la del ejemplo, usaríamos:

Libro.paginate(filtro, { page, limit, populate: 'autor.ref' });

de esta forma podemos obtener un resultado con la información de ambas colecciones.

La opción populate permite también otras opciones. Imaginemos que en la agregación queremos obviar el dato nombre de la colección autores que ya tenemos en la colección libros. Podemos pasarle a populate un objeto de la siguiente forma:

Libro.paginate(filtro, { page, limit, populate: {path: 'autor.ref', select: '-nombre'}' });

donde select: '-nombre', que va con un signo menos (-) delante, indica que ese dato no será requerido. Véase también que, para incluir la referencia a la colección, dentro del objeto se usa path: 'autor.ref'.

Puedes obtener más información sobre las opciones de populate en el manual on-line.

Filtrando

Decía más arriba que nos puede interesar hacer un filtrado en la búsqueda sobre nuestra base de datos por el nombre del autor, que es un dato dentro de otro dato, pero antes recordaré cómo buscar por uno o varios datos de la colección.

const filtro = {};
if (titulo) filtro.titulo = { $regex: `.*${titulo}.*` };
if (precio) filtro.precio = { $lte: precio };

Este código creará un objeto filtro que permitirá que busquemos en la colección libros por título y precio, ya que, si estos datos de búsqueda existen, con filtro.titulo y filtro.precio añadimos ambas propiedades al objeto filtro que usaremos en la búsqueda de la forma en que hemos visto en todos los ejemplos anteriores. (Nota: entiéndase que podríamos tener libros con el mismo título y distinto precio según la editorial o la colección editorial).

Con { $regex: `.*${titulo}.*/` } buscamos por la expresión regular dada, en cambio con $lte: precio buscamos por un valor igual o menor al proporcionado. Ver más información sobre operadores de búsqueda en mongodb en el manual on-line.

Esto permitirá que:

Libro.paginate(filtro, { page, limit, populate: {path: 'autor.ref', select: '-nombre'}' });

devuelva aquellos documentos de la colección libros que tengan coincidencias con el filtro indicado, es decir, que contengan en el título el texto titulo indicado y cuyo precio sea igual o menor al precio indicado.

Consulta sobre datos anidados

Teniendo claro lo anterior, acceder al dato nombre dentro de autor no es complicado, pero para referenciar el dato tendremos que usar lo siguiente:

const filtro = {};
if (nombre) filtro["autor.nombre"] = { $regex: `.*${nombre}.*` };

Uso aquí los corchetes [] porque para poder usar el filtro en mongodb debo pasarle la propiedad al objeto filtro de esta forma: { "autor.nombre" : { $regex: `.*${nombre}.*` } } como se indica en la sección consulta sobre documentos incrustados/anidados del manual online.

Este filtro devolverá aquellos documentos de la colección libros que, dentro del dato autor, contengan el nombre dado dentro del dato anidado nombre.

Enlaces

Generar enlaces dinámicos de imágenes almacenadas en MongoDB

JavGuerra — Sun, 06 Nov 2022 00:00:00 GMT

Etiquetas: #código, #javascript, #node.js, #mongodb, #imágenes

Las bases de datos a menudo contienen referencias a recursos que no son almacenados en su misma estructura. Un claro ejemplo de ello son las fotografías o imágenes que acompañan a los productos de un catálogo. En tal caso, guardar la información es sencillo, es suficiente con almacenar la ruta completa al recurso en un campo de tipo String, pero, ¿que ocurre si, presumiblemente, nuestros datos van a cambiar de ubicación, o van a correr en distintas instancias o en diferentes hospedajes? En ese caso, lo recomendable es almacenar la información del nombre del recurso en la BBDD, y entonces tendremos dos alternativas para generar el enlace completo: modificar los datos de la BBDD mediante un script para que la url al recurso sea la adecuada cada vez que cambiamos de ubicación los datos, o bien generar la ruta al recurso de forma dinámica, al vuelo, cuando se realizan las consultas. Vamos a ver aquí la segunda.

El ejemplo

Partimos de la siguiente premisa. En las variables globales del sistema tenemos almacenadas la ruta y el puerto del servidor donde están ubicadas las imágenes, que es la información susceptible de cambiar de lugar. Tal vez estos datos estén disponibles mediante dotenv.

Tomemos como referencia el ejemplo de la entrada anterior. Dos colecciones relacionadas, libros y autores, y en las que queremos incluir un dato en cada documento de la colección libros con la foto de portada del libro, y un dato con la foto del autor en cada documento de la colección autores. Algo como:

libro: {
    portada: 'don-quijote.png',
}

autor: {
    foto: 'cervantes.jpg',
}

obviamente, tanto la colección libros como la conección autores tendrán otros datos, no sólo la portada o la foto.

La ruta

Para poder acceder a la portada del libro, necesitamos completar la ruta a la imagen. En este ejemplo usaremos el dominio lalibreria2022.com al que se accede por el porto 80. Esta información la tenemos almacenada en un fichero .env de nuestra aplicación de la siguiente forma:

HOST='https://lalibreria2022.com'
PORT=80

Y asumo que las portadas se almacenan en una carpeta llamada portadas, y las fotos en otra llamada fotos. De esta forma, para acceder a la imagen don-quijote.png debemos completar la siguiente ruta:

HOST + ':' + PORT + '/' + 'portadas' + '/' + 'don-quijote.png'

y obtendríamos:

https://lalibreria2022.com:80/portadas/don-quijote.png

Alterando los resultados

Cuando llevamos a cabo las búsquedas de información sobre la BBDD, esta nos devolverá, como ya sabemos, el nombre del recurso (‘don-quijote.png’), pero queremos que la BBDD devuelva dinámicamente la ruta antes mencionada. Para ello hay que recorrer el resultado obtenido y hacer cambios sobre los datos. Un forEach() es suficiente.

const insertarRutas = datos => {
    const url = process.env.HOST + ':' + process.env.PORT + '/';
    datos.forEach( elemento => elemento.portada = url + 'portadas/' + elemento.portada );
    return data;
}

Tras cada búsqueda, aplicando esta función al resultado, recorro todos los documentos de la colección (datos) y cambio el valor del dato portada en cada documento.

También con resultados agregados

Cuando llevamos a cabo consultas agregadas, el proceso es similar. En una consulta donde obtenemos los libros y las referencias a sus respectivos autores, debemos repetir el proceso también para el dato foto de la colección autores, pero hay que tener en cuenta lo siguiente:

{: .box-note} Nota: Cuando recorremos una colección agregada lo hacemos sobre una colección y sobre referencias a otra colección, es decir, si hay varios libros de un mismo autor, aunque los datos del autor se muestren en varios libros agregados, solo están almacenados una vez.

Esto tiene importancia porque, al realizar el cambio de la ruta de la foto del autor, estaríamos cambiándola tantas veces como libros existan, y generando entonces una url errónea con rutas repetidas. Si tenemos dos libros de Cervantes, la ruta a la foto podría verse así:

https://lalibreria2022.com:80/fotos/https://lalibreria2022.com:80/fotos/cervantes.jpg

Para evitar esto, debemos implementar el siguiente código, en el que se incluyen ambos casos, el de la portada del libro y el de la foto del autor:

const insertarRutas = datos => {
    const url = process.env.HOST + ':' + process.env.PORT + '/';
    datos.forEach(elemento => {
        elemento.portada = url + 'portadas/' + elemento.portada;
        if (!elemento.autor.ref.foto.includes(url)) 
             elemento.autor.ref.foto = url + 'fotos/' + elemento.autor.ref.foto;
    });
    return data;
}

Con el condicional (if) me aseguro de que la foto no contiene ya la ruta completa, y si no es así, la completa.

Enlaces

Usando populate con paginate y filtrando los resultados

El algoritmo de Karaca

JavGuerra — Thu, 15 Dec 2022 00:00:00 GMT

Etiquetas: #código, #javascript, #criptografía, #ciberseguridad

En este post resuelvo, en JavaScript el reto de programación consistente en desarrollar una función que es capaz de encriptar y desencriptar texto utilizando el algoritmo de encriptación de Karaca.

Descubrí esta semana, un poco tarde, los retos de programación semanales de Mouredev para 2022 y me atrajo el enunciado de este ejercicio.

Busqué información en Internet sobre el algoritmo, encontrando lo siguiente:

Make a function that encrypts a given input with these steps:
Input: “apple”
Step 1: Reverse the input: “elppa”
Step 2: Replace all vowels using the following chart:
a => 0, e => 1, i => 2, o => 3, u => 4 # “1lpp0”
Step 3: Add “aca” to the end of the word: “1lpp0aca”
Output: “1lpp0aca”
All inputs are strings, no uppercases and all output must be strings.

Y me tomé la libertad de corregir la relación entre vocales y números que, en la fuente original publicada por Furkan Karaca, en el portal de retos Edabit parece no ser correcta.

El algoritmo, sin una aparente utilidad práctica, es un buen ejercicio de programación que combina el uso de expresiones regulares, uso de arreglos y cadenas y lógica.

Entendiendo el problema

Lo que pide el ejercicio es que nuestra función debe poder codificar y decodificar un texto, en minúsculas, que le pasemos por parámetro. Este texto, lógicamente, no puede estar vacío.

Cualquier dato que le pasemos que no sea texto debe impedir la ejecución de la codificación/decodificación. La función puede devolver un error, o bien el dato original suministrado. Opto por esta segunda posibilidad.

La cadena de caracteres suministrada a la función puede tener espacios al inicio y/o al final, incluso puede contener sólo espacios, por lo que amerita limpiar la cadena, y que esta contenga algo más que sólo espacios.

La cadena no puede contener sólo números, esto equivaldría a suministrar un número entero a la función. De hecho, el algoritmo presenta un problema importante con esto. Si se le suministra un frase que contenga dígitos en el rango del mapeo de vocales (0-1-2-3-4) no realizará bien el cifrado, pues tomará estos dígitos como parte del descifrado, mostrando un galimatías. Ej. «100 horas» -> «s0r3h 001aca» -> «eaa horas».

Para saber si se puede decodificar una cadena proporcionada, es decir, para saber si está codificada con el algoritmo de Karaca, se debe cumplir que esta termine con un «aca», que contenga algún número entre el 0 y el 4, y que su longitud sea mayor que la de la cadena de control «aca». De no cumplirse esto, se entiende que la cadena que se proporciona a la función no está codificada, y entonces puede ser codificada.

Para realizar la conversión, se debe recorrer la cadena teniendo en cuenta el mapeo de vocales del enunciado (a => 0, e => 1, i => 2, o => 3, u => 4) y viceversa.

Resolución

El algoritmo de Karaca en JavaScript, atendiendo a las consideraciones anteriores, es el siguiente:

01. /**
02.  * Función en JavaScript que encripta y desencripta texto en minúsculas en 
03.  * inglés, sin números, utilizando el algoritmo de encriptación de Karaca.
04.  * @param {String} str
05.  * @returns String
06.  * @author Javier Guerra
07.  */
08. function karacaAlgorithm(str = "") {
09. 
10.    str = str ?? "";
11.
12.    if (typeof str === "string" && str.trim().length && str.match(/\D/g)) {
13.        
14.        str = str.trim().toLowerCase().split("").reverse().join("");
15.
16.        const vowels = "aeiou".split("");
17.        const control = "aca";
18.
19.        if (
20.            str.startsWith(control) &&
21.            str.match(/\d/g) &&
22.            str.length > control.length
23.        ) {
24.            // decode
25.            str = str.slice(control.length);
26.            vowels.forEach((chr, i) => {
27.                if (str.includes(i)) str = str.replaceAll(i, chr);
28.            });
29.        } else {
30.            // encode
31.            vowels.forEach((chr, i) => {
32.                if (str.includes(chr)) str = str.replaceAll(chr, i);
33.            });
34.            str += control;
35.        }
36.    }
37.
38.    return str.toString();
39. }

En la línea 8, con el valor por defecto "" del parámetro se evita el error si llamemos a la función sin ningún parámetro, devolviendo una cadena vacía.

en la línea 10 se comprueba que el parámetro recibido no está colando un valor null o undefined con el operador coalescente nulo (??).

En la línea 12 se comprueba que el dato recibido es una cadena, que tiene al menos un carácter, y cuenta con alguna consonante. De no ser así, se devuelve el parámetro recibido.

En la línea 14 se realizan varias conversiones al parámetro recibido: se limpian los espacios iniciales y/o finales, se pasa la cadena a minúsculas, y se invierte la cadena. Esto último se hace mediante la concatenación de varios métodos: split, para convertir la cadena en un arreglo, reverse para invertir el orden del contenido del arreglo y join para unir el contenido del arreglo en una cadena.

Las líneas 16 y 17 definen las variables que usaremos en el algoritmo.

En la comprobación de las líneas de la 19 a la 23 se decide si se va a decodificar la cadena recibida, es decir, si se cumple que la cadena termina en «aca», contiene algún dígito y su longitud es mayor que la longitud de «aca». Si es así, se lleva a cabo la codificación a partir de la línea 25. en caso contrario, se lleva a cabo la codificación a partir de la línea 31.

Para la decodificación, primero se elimina el control «aca» y luego se recorre el arreglo de vocales con forEach, de tal forma que si alguno de los elementos del arreglo es encontrado en la cadena a decodificar, este se sustituye por la vocal correspondiente.

Para la codificación se lleva a cabo el proceso contrario. Al recorrer el arreglo de vocales, se sustituye el dígito por la vocal correspondiente. Luego se añade la cadena de control «aca».

Por último, se devuelve el resultado de las operaciones sobre la cadena recibida convertida a cadena, por si el valor recibido fue un número, ya que la función debe devolver una cadena.

Prueba

El siguiente código de prueba debe poder codificar y decodificar la cadena original suministrada obteniendo la cadena original como resultado.

// Testing
const str = "Solving an equation produces, instantly, great euphoria.";
console.log(karacaAlgorithm(str));
console.log(karacaAlgorithm(karacaAlgorithm(str)));

El resultado esperado debe ser:

.02r3hp41 t01rg ,yltn0tsn2 ,s1c4d3rp n32t04q1 n0 gn2vl3saca
solving an equation produces, instantly, great euphoria.

La frase, en inglés, incluye las palabras equation y euphoria que cuentan con todas las vocales.

Enlaces

ConsoleInput kit

JavGuerra — Tue, 31 Jan 2023 00:00:00 GMT

Etiquetas: #java, #consola, #código

Cuando se emplea la clase Scanner en Java surgen multitud de inconvenientes a la hora de solicitar datos por consola. Algunos errores están asociados a la introducción de tipos de datos no solicitados, pero hay un problema especialmente incómodo, el de las pulsaciones de tecla Intro que quedan en el buffer del Scanner. En esta entrada muestro cómo solucionar esto con algunos métodos básicos de ejemplo.

Lo primero: abrir y cerrar

Voy a crear una clase de utilidad ConsoleInput que no permite ser instanciada.

Para poder leer por consola, necesitaré usar la clase Scanner dentro de mi clase ConsoleInput, y también crearé un método para poder cerrar el Scanner.

public final class ConsoleInput {

    ...

    private static Scanner IN = new Scanner(System.in);

    public static void closeScanner() {
        if (IN != null && !IN.isClosed()) {
            IN.close();
        }
    }

    private static void ensureScannerOpen() {
        if (IN == null || IN.isClosed()) {
            IN = new Scanner(System.in);
        }
    }

    public static void resetScanner() {
        closeScanner();
        IN = new Scanner(System.in);
    }

    ...
}

Como se aprecia, dentro de un paquete llamado utilities creo la clase ConsoleInput, el objeto IN de tipo Scanner que debe importarse de java.util.Scanner y creo un método que, cuando sea llamado, cerrará el Scanner IN con el método .close().

También he añadido dos métodos más relacionados con cerrar el scanner: ensureScannerOpen() para cerciorarme de que el scanner esté abierto y resetScanner() para cerrarlo y abrir uno nuevo si fuera necesario en nuestra aplicación.

El método ensureScannerOpen() se incluye en cada método que espera datos por consola para evitar problemas si el scanner no está abierto. Si no lo está, lo abre de forma transparente al usuario.

Introducir datos por consola

El problema: .next() vs. .nextLine()

Cuando queremos leer un dato por consola, podemos usar el método .next() o .nextLine(), siendo IN el objeto de la clase Scanner instanciado para leer por teclado.

System.out.println("Introduce una palabra");
String entrada1 = IN.next();
System.out.println(entrada1);

System.out.println("Introduce una frase");
String entrada2 = IN.nextLine();
System.out.println(entrada2);

En entrada1 se guardará el dato introducido hasta encontrar un espacio en blanco. En entrada2 se guardará el dato introducido hasta encontrar Intro, incluidos los espacios en blanco.

Pero hay un problema en este código. Tras escribir la palabra que se solicita y pulsar Intro, se guarda en entrada1 la palabra, pero en el buffer del Scanner queda almacenado el Intro, y este será leído por entrada2 y no nos permitirá escribir la frase solicitada.

No ocurre lo mismo si invertimos el orden, es decir, si primero pedimos la frase con .nexLine() y después la palabra con .next(), ya que .nextLine() lee específicamente el Intro tras introducir la frase y este no queda almacenado en el buffer, pudiendo entonces introducir la palabra solicitada tras la frase.

La solución pasa por poner siempre un .nextLine() tras un .next() para evitar problemas, de esta forma:

System.out.println("Introduce una palabra");
String entrada1 = IN.next();
IN.nextLine(); // Lee el intro del buffer
System.out.println(entrada1);

System.out.println("Introduce una frase");
String entrada2 = IN.nextLine();
System.out.println(entrada2);

Y ahora sí, la frase podrá ser introducida en entrada2 y luego mostrada.

Esta solución aplica también a .nextInt(), .nextLong(), .nextDouble() y otros métodos .next() de entrada de la clase Scanner.

Pulse Intro para continuar

La primera aplicación práctica de esto puede ser el método siguiente:

 public static void getEnter() {  
    ensureScannerOpen(); 
    IN.nextLine();  
}

El método .getEnter() es útil cuando queremos esperar que el usuario pulse la tecla Intro para continuar.

Obtener un número largo, entero, positivo

Ahora quiero leer un número por consola que sea entero, largo (long) y positivo. Emplearé el método .nextLong() para obtener el dato, y lo acompañaré de un .nextLine() como mostré antes.

num = IN.nextLong();  
IN.nextLine();

Como puede que el dato introducido no sea un número largo, envolveré estas sentencias con un try-catch:

try {  
    num = IN.nextLong();  
    IN.nextLine();
    ...  
} catch (InputMismatchException e) {  
    System.out.println("Tipo de dato no reconocido.");  
    IN.nextLine();  
}

La excepción InputMismatchException será la encargada de probar (try) si el tipo de dato introducido fue erróneo y de esta forma se llevarían a cabo las instrucciones del bloque catch.

En el bloque catch también se incluye IN.nextLine() ya que, cuando salta la excepción, la línea IN.nextLine(); debajo del IN.nextLong() no llega a ejecutarse.

Si no se incluye esta línea en el catch y estamos solicitando el dato por consola desde un bucle, como en el código que se ve a continuación, la aplicación entrará en un bucle infinito que mostrará el mensaje "Tipo de dato no reconocido.", ya que con cada nueva petición del dato, leería el Intro del buffer no pudiendo introducir el dato solicitado.

Aquí el código completo del método .getLongIntPos():

public static Long getLongIntPos(String message) {
    ensureScannerOpen(); 
    while(true) {
        System.out.print(message);
        try {
            long num = IN.nextLong();
            IN.nextLine();
            if (num >= 0) return num;
            System.out.println("Valor fuera de rango.");
        } catch (InputMismatchException e) {
            System.out.println("Tipo de dato no reconocido. Ingrese un número entero.");
            IN.nextLine();
        }
    }
}

El bucle while se asegura de que, hasta que no se introduzca un dato válido, se esté solicitando el dato por consola. La condición de salida es si num >= 0, momento en el que la función ejecutará el return con el dato num obtenido.

Por parámetro recibimos el mensaje que dará versatilidad a esta función, y que será mostrado por consola antes de requerir el dato. Esta función se podrá usar de esta forma desde otra parte de nuestra aplicación:

Long numero = getLongIntPos("Introduce un número entero: ");
System.out.println(numero);

Obtener un número largo, entero, positivo por rango

Dado el método anterior, es fácil hacer cambios para que el valor recibido se encuentre entre un rango determinado.

public static Long getLongIntPosByRange(String message, Long min, Long max) {
    ensureScannerOpen();   
    if (min > max) {
        Long temp = min;
        min = max;
        max = temp;
    }  
    while(true) {  
        System.out.print(message);  
        try {  
            long num = IN.nextLong();  
            IN.nextLine();
            if (num >= min && num <= max) return num;  
            System.out.println("Valor fuera de rango.");  
        } catch (InputMismatchException e) {  
            System.out.println("Tipo de dato no reconocido.");  
            IN.nextLine();  
        }  
    }  
}

El método .getLongIntPosByRange() solicita esta vez tres parámetros, el mensaje a mostrar (message), el valor del rango mínimo (min) y el máximo (max).

Para evitar errores y complicar el código, asumo que si el valor máximo es menor que el valor mínimo, es que deben cambiarse, pero esta no sería la mejor forma de hacerlo.

La otra diferencia con .getLongIntPos() es que la condición de salida ahora es que el número que recibimos por consola debe estar entre los valores mínimo y máximo indicados (num >= min && num <= max).

Obtener una palabra

El código del método .getWord() obtiene una palabra.

public static String getWord(String message) {  
    ensureScannerOpen(); 
    while(true) {  
        System.out.print(message);  
        try {  
            String str = IN.next();  
            IN.nextLine();  
            str = str.trim();  
            if (str.length() >= 3) return str;  
            System.out.println("Cadena no válida.");  
        } catch (InputMismatchException e) {  
            System.out.println("Tipo de dato no reconocido.");  
            IN.nextLine();  
        }  
    }  
}

La diferencia con los métodos anteriores es la condición de salida.

Si la palabra introducida no tiene al menos tres caracteres (str.length() >= 3), te la volverá a pedir. A la palabra introducida le limpio los posibles espacios al inicio y final con .trim().

Obtener una cadena de caracteres

En la línea de los casos anteriores, el código del método .getString() obtiene una cadena de caracteres (una frase) sería:

public static String getString(String message) {  
    ensureScannerOpen(); 
    while(true) {  
        System.out.print(message);  
        try {  
            String str = IN.nextLine();  
            str = str.trim();
            if (str.length() >= 3) return str;  
            System.out.println("Cadena no válida.");  
        } catch (InputMismatchException e) {  
            System.out.println("Tipo de dato no reconocido.");  
            IN.nextLine();  
        }  
    }  
}

Aquí no sería necesario poner el IN.nextLine() en el bloque try, y todo lo demás es muy similar. La diferencia es, una vez más, la condición de salida.

Si la cadena introducida no tiene al menos tres caracteres (str.length() >= 3), te la volverá a pedir. A la cadena introducida le limpio los posibles espacios al inicio y final con .trim().

Obtener un Sí o No

Con el método getYesNo() obtengo un true para ‘sí’ o un false para ‘no’. El código es el siguiente:

public static Boolean getYesNo(String message) {  
    ensureScannerOpen(); 
    while(true) {  
        System.out.print(message);  
        try {  
            char chr = IN.next(".").trim().charAt(0);  
            IN.nextLine();  
            if (chr == 'S' || chr == 's') return true;  
            if (chr == 'N' || chr == 'n') return false;  
            System.out.println("Carácter no válido.");  
        } catch (InputMismatchException e) {  
            System.out.println("Tipo de dato no reconocido.");  
            IN.nextLine();   
        }  
    }  
}

Lo destacable de este método es la línea:

chr = IN.next(".").trim().charAt(0);

Que permite que, de los datos introducidos, sólo se almacene un carácter.

En este método vuelve a ser necesario el uso de IN.nextLine().

En muy raras ocasiones, si un usuario presiona Ctrl+D (EOF) en lugar de escribir algo o si se produce corrupción del stream de entrada, se puede recibir un null en chr. Por si acaso, para hacer la clase más robusta, podemos hacer una comprobación para evitarlo:

    String input = IN.next(".");  // ← SEPARADO
    IN.nextLine();  
    
    if (input == null || input.trim().isEmpty()) {  // ← PROTECCIÓN
        System.out.println("Entrada vacía no válida.");
        continue;
    }
    
    char chr = input.trim().charAt(0);

Bonus: limpiar la consola

Buscando por Internet, encontré este sencillo código para limpiar la consola:

public static void clearConsole() {
    for (int i = 0; i < 50; i++) {
        System.out.println();
    }
}

Realmente clearConsole() no limpia la consola. Sólo empuja las líneas hacia arriba. Concretamente, 50 líneas hacia arriba. Esto permite que este simple método funcione en cualquier IDE o sistema operativo, y a efectos prácticos, despeja la consola, que es lo que se persigue.

La clase ConsoleInput completa

El código es el siguiente (cambia el «package» según te interese):

package utilities;  
  
import java.util.InputMismatchException;  
import java.util.Scanner;  
  
/**
 * Clase para leer datos por consola.
 * @author JavGuerra
 * @version 1.1 - 2026-02-13
 * @since 2023-01-31
 * @requires Java 5.0 (1.5) or higher
 * @see <a href="https://javguerra.github.io/blog/clase-scanner-java/">
 *         «ConsoleInput kit» Descripción en el blog del autor.
 *     </a>
 * @see <a href="https://youtu.be/HSq3rRfBmDg">
 *         Video: Entrada de datos en Java - Clase Scanner.
 *         Mega curso Java desde 0, Aula en la nube.
 *     </a>
 */
public final class ConsoleInput {

    /**
     * Constructor privado que evita la instanciación de la clase. 
     */
    private ConsoleInput() {
        throw new AssertionError("No se puede instanciar ConsoleInput");
    }
  
    /** 
     * Instancia de la clase Scanner.
     */
    private static Scanner IN = new Scanner(System.in);  

    /**
     * Cierra el Scanner.
     */
    public static void closeScanner() {
        if (IN != null && !IN.isClosed()) {
            IN.close();
        }
    }

    /**
     * Verifica que el Scanner esté abierto y funcionando.
     * Si está cerrado, lo reabre automáticamente.
     */
    private static void ensureScannerOpen() {
        if (IN == null || IN.isClosed()) {
            IN = new Scanner(System.in);
        }
    }

    /**
     * Reinicia el Scanner (cierra y abre uno nuevo).
     */
    public static void resetScanner() {
        closeScanner();
        IN = new Scanner(System.in);
    }

    /**
     * Espera la pulsación de la tecla Intro.
     */
    public static void getEnter() { 
        ensureScannerOpen(); 
        IN.nextLine();  
    }  
  
    /**
     * Solicita con un mensaje por consola, y comprueba que se introduzca,
     * un número largo, entero, positivo (>=0).
     * @param message String Pregunta del usuario.
     * @return Long Número introducido.
     */
    public static Long getLongIntPos(String message) {
        ensureScannerOpen();  
        while(true) {  
            System.out.print(message);  
            try {  
                long num = IN.nextLong();  
                IN.nextLine();  
                if (num >= 0) return num;  
                System.out.println("Valor fuera de rango.");  
            } catch (InputMismatchException e) {  
                System.out.println("Tipo de dato no reconocido.");  
                IN.nextLine();    
            }  
        }  
    }  
  
    /**
     * Solicita con un mensaje por consola, y comprueba que se introduzca,
     * un número largo, entero, positivo (>=0), cuyo rango esté entre
     * el valor mínimo y el valor máximo recibido, ambos inclusive.
     * @param message String Pregunta del usuario.
     * @param min Long Valor mínimo.
     * @param max Long Valor máximo.
     * @return Long Número introducido.
     */
    public static Long getLongIntPosByRange(String message, Long min, Long max) {
        ensureScannerOpen();  
        if (min > max) {
            Long temp = min;
            min = max;
            max = temp;
        } 
        while(true) {  
            System.out.print(message);  
            try {  
                long num = IN.nextLong();  
                IN.nextLine();  
                if (num >= min && num <= max) return num;  
                System.out.println("Valor fuera de rango.");  
            } catch (InputMismatchException e) {  
                System.out.println("Tipo de dato no reconocido.");  
                IN.nextLine();  
            }  
        }  
    }  

    /**
     * Solicita con un mensaje por consola, y comprueba que se introduzca,
     * una palabra de, al menos, 3 caracteres.
     * @param message String Pregunta del usuario.
     * @return String Palabra introducida.
     */
    public static String getWord(String message) { 
        ensureScannerOpen(); 
        while(true) {  
            System.out.print(message);  
            try {  
                String str = IN.next();  
                IN.nextLine();  
                str = str.trim();  
                if (str.length() >= 3) return str;  
                System.out.println("Cadena no válida."); 
            } catch (InputMismatchException e) {  
                System.out.println("Tipo de dato no reconocido.");  
                IN.nextLine();   
            }   
        }  
    }

    /**
     * Solicita con un mensaje por consola, y comprueba que se introduzca,
     * una cadena de texto de, al menos, 3 caracteres.
     * @param message String Pregunta del usuario.
     * @return String Cadena de texto introducida.
     */
    public static String getString(String message) {
        ensureScannerOpen();  
        while(true) {  
            System.out.print(message);  
            try {  
                String str = IN.nextLine();  
                str = str.trim();  
                if (str.length() >= 3) return str;  
                System.out.println("Cadena no válida.");  
            } catch (InputMismatchException e) {  
                System.out.println("Tipo de dato no reconocido.");  
                IN.nextLine();   
            }  
        }  
    }  
  
    /**
     * Solicita con un mensaje por consola, y comprueba que se introduzca,
     * un carácter para confirmar ('S', 's') o ('N', 'n').
     * @param message String Pregunta del usuario.
     * @return Boolean true/Sí o false/No.
     */
    public static Boolean getYesNo(String message) {
        ensureScannerOpen();  
        while(true) {  
            System.out.print(message);  
            try {  
                String input = IN.next(".");
                if (input == null || input.trim().isEmpty()) {
                    System.out.println("Entrada vacía no válida.");
                    continue;
                }
                IN.nextLine();  
                char chr = input.trim().charAt(0); 
                if (chr == 'S' || chr == 's') return true;  
                if (chr == 'N' || chr == 'n') return false;  
                System.out.println("Carácter no válido."); 
            } catch (InputMismatchException e) {  
                System.out.println("Tipo de dato no reconocido.");  
                IN.nextLine();   
            }   
        }  
    }  
  
    /**
     * Limpia la consola (desplaza el contenido hacia arriba).
     * Funciona en TODOS los sistemas e IDEs.
     */
    public static void clearConsole() {
        for (int i = 0; i < 50; i++) {
            System.out.println();
        }
    } 
  
}

Esta clase puede crecer con nuevos métodos para otros tipos numericos como int o double… que tú mismo puedes hacer.

Puntos fuertes de esta clase

No instanciable - Constructor privado + final class.
Auto-reparable - Scanner se reabre solo.
Robusta - Maneja entradas incorrectas sin caer.
Null-safe - getYesNo() protegido.
Consistente - Todos los métodos usan ensureScannerOpen().
Compatible - Funciona desde Java 1.5.
Documentada - JavaDoc completo.

Un ejemplo de uso

Para finalizar, veamos un caso práctico para la gestión de clientes.

    private static void selectOptions() {
        long totalOpts = 6L;
        String optMsg = "Seleccione una opción (0-6): ";
        String menuList = """
        -------------------
           CRUD Customer
        -------------------
        1. Listar clientes
        2. Mostrar un cliente
        3. Crear un nuevo cliente
        4. Actualizar un cliente
        5. Eliminar un cliente
        6. Eliminar los clientes
        0. Salir
        """;
        byte opt;

        while (true) {
            clearConsole();

            System.out.println(menuList);
            opt = getLongIntPosByRange(optMsg, 0L, totalOpts).byteValue();

            if (opt == 0) break;

            switch (opt) {
                case 1 -> controller.listCustomers();
                case 2 -> controller.listCustomerById();
                case 3 -> controller.newCustomer();
                case 4 -> controller.updateCustomerById();
                case 5 -> controller.deleteCustomerById();
                case 6 -> controller.deleteAllCustomers();
            }

            System.out.println("Pulse <Intro> para continuar.");
            getEnter();
        }

        closeScanner();
    }

Enlaces

Video: Entrada de datos en Java - Clase Scanner - Mega curso Java desde 0, Aula en la nube

Reto navideño

JavGuerra — Sun, 24 Dec 2023 00:00:00 GMT

Etiquetas: #código

Cinco ejercicios de programación navideños de dificultad progresiva que puedes realizar en el lenguaje de programación que desees y subir a tu repositorio.

Ejercicios

¿Cuánto queda para año nuevo? Imprime por consola el tiempo que queda hasta el día 1 de enero. Puedes mostrar el tiempo en meses, días, horas y minutos. ¿Y qué pasará si ya hemos sobrepasado la fecha? Piensa cómo resolverlo.
Arbolito. Dibuja por consola un árbol de navidad con caracteres ASCII de colores. El árbol puede ser tan completo como quieras, ser un triángulo o tener ramas de las que cuelguen objetos decorativos o generar el árbol aleatoriamente, pero siempre usando caracteres.
Calendario mensual. Pide por consola un número del 1 al 12 y genera, con tu propio código, el calendario de ese mes del nuevo año. Incluye el nombre del mes, y en la fila superior del calendario pon las iniciales de los días de la semana. Para complicarlo aún más, puedes colorear los domingos y festivos si lo deseas.
Amigo invisible. Crea un programa al que le puedes facilitar una lista de nombres. El programa deberá asignar aleatoriamente el amigo invisible, y guardar el resultado. La segunda parte del programa será para consultar. Escribiendo tu nombre recibirás por pantalla la persona a la que te ha tocado regalar.
To do. Crea un programa que guarde una lista de propósitos para año nuevo y te permita listar, añadir, editar, tachar y/o borrar cada uno de los items de la lista. Puedes incluso usar una base de datos como respaldo.

Recuerda compartir el enlace al código de cada ejercicio en tu repositorio para que otros vean el resultado y aprendan de tu solución.

Bonus

¡Inventa!. Cambia el enunciado de estos ejercicios a tu gusto o crea tus propios ejercicios en torno a esta temática festiva.

¡Felices programas!

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

Notificaciones con Thymeleaft

JavGuerra — Wed, 03 Jul 2024 00:00:00 GMT

Etiquetas: #código, #java, #spring boot, #bootstrap, #thymeleaft

Cuando una aplicación realiza operaciones potencialmente críticas como editar, guardar o borrar datos de una base de datos, es conveniente notificar al usuario el éxito o fracaso de las operaciones. Esta entrada presenta una solución básica de cómo mostrar notificaciones en la plantilla Thymeleaft.

Se asume que el lector tiene conocimientos generales de Spring Boot, Thymeleaft y Bootstrap para aplicar el contenido.

Planteamiento

La idea es destinar una área de la visualización en la aplicación para las notificaciones, y activar este área sólo cuando se deban mostrar, dando opción al usuario a cerrarlas una vez leídas. Este área puede crearse como un fragmento (th:fragment) e incluirse en las plantillas en las que se requiera, o en todas las plantillas asociadas a las vistas de la aplicación.

Será necesaria una variable que sirva de «llave» para mostrar estas notificaciones o no, y otra para indicar el tipo de mensaje (info, danger…). Como enviar el mensaje desde cada método de erutado de nuestros controladores es algo trabajoso, lo adecuado es usar un filtro de sesión http que me permitirá crear las variables donde guardaré el contenido del mensaje y el tipo de mensaje a mostrar.

Por último, gestionaré el borrado del contenido de la notificación para que esta deje de mostrarse al cambiar de página Para ello necesitaremos otra variable que indique si la notificación ya se ha mostrado.

Programando notificaciones

Para crear las notificaciones, necesitaremos:

Crear un fragmento que servirá para incluir el texto de la notificación en nuestras vistas.
Inicializar las variables de sesión que contendrán la notificación y el tipo de notificación.
Actualizar el valor de las variables de notificación para que estas se muestren.
Eliminar la notificación al cambiar de página.

El fragmento

He creado un fragmento de código llamado messageAlert.html que he incluido en mi carpeta fragments dentro de templates en resources. Este es un ejemplo que puede modificarse a voluntad para adaptar su diseño a la aplicación donde se usará.

<div th:fragment="messageAlert" th:if="${session.message != ''}" class="container">

    <div class="alert alert-dismissible fade show" role="alert"
        th:classappend="${session.messageType} == 'danger'? 'alert-danger' : 'alert-info'">

        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="24" height="24">
            <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0M3.124 7.5A8.969 8.969 0 0 1 5.292 3m13.416 0a8.969 8.969 0 0 1 2.168 4.5" />
        </svg>&nbsp;&nbsp;

        <span class="align-middle" th:text="${session.message}"></span>

        <button class="btn-close" data-bs-dismiss="alert" aria-label="Cerrar"></button>
    </div>
</div>

Con th:if="${session.message != ''}"determino si este fragmento se mostrará o no. Si el valor de la variable de sesión llamada message está vacío, es que no hay nada que mostrar, de otra forma, el fragmento se mostrará.

Con th:classappend="${session.messageType} == 'danger'? 'alert-danger' : 'alert-info'" determino qué tipo de alerta de Boostrap mostrar, si una destinada a informar (recuadro con fondo azul) o una destinada a alertar de un fallo (recuadro con fondo rojo). Esto lo consigo mediante la variable de sesión messageType.

Tras el icono SVG que se mostrará en el aviso, se incluye el mensaje de la notificación con th:text="${session.message}" dentro de la etiqueta span.

Con el button, ayudado por Bootstrap, el usuario puede cerrar la notificación.

Para incluir este fragmento en la vista donde deseo que se muestre la notificación, uso:

<div th:replace="~{fragments/messageAlert :: messageAlert}"></div>

Inicializando las variables message y messageType

Como he comentado, voy a usar variables de sesión http para guardar el contenido del mensaje y el tipo de mensaje. Para ello creo un filtro de sesión que compruebe, por cada petición http, si existe una sesión y si las variables de sesión están creadas.

He incluido el siguiente componente en /Utils/SessionFilter.java:

@Component
public class SessionFilter implements Filter {

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {}

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
            throws IOException, ServletException {

        HttpServletRequest httpRequest = (HttpServletRequest) request;
        HttpServletResponse httpResponse = (HttpServletResponse) response;

        HttpSession session = httpRequest.getSession(true);

        if (session!= null) {

            // Variables para las notificaciones

            if (session.getAttribute("message") == null)
                session.setAttribute("message", "");

            if (session.getAttribute("messageType") == null)
                session.setAttribute("messageType", ""); 
                // Valores: "danger" u otro cualquiera = "info".

        }

        chain.doFilter(request, response);
    }

    @Override
    public void destroy() {}
}

Con HttpSession session = httpRequest.getSession(true); Obtengo la sesión, y si no existe, se creará una nueva. Esto ocurre porque he incluido el valor true en .getSession(true).

Si existe la sesión (que, salvo error, ya debería existir), compruebo que las variables message y messageType estén inicializadas, y si no lo están las inicializo a "".

Tras esto, ya podremos usar session.getAttribute() y session.setAttribute() para leer y para actualizar el valor de las variables de sesión desde nuestros servicios o controladores, como veremos.

Usando mensajes

Pensemos en un servicio que guarde el contenido de un formulario para crear un cine. Sería algo similar a esto:

@Slf4j
@RequiredArgsConstructor
@Service
public class CinemaServiceImpl implements ICinemaService {

    private final CinemaRepository cinemaRepo;

    // Otras propiedades y métodos de la clase aquí

    @Override
    @Transactional
    public Cinema save(Cinema cinema) {
        log.info("save {}", cinema);

        try {
            return cinemaRepo.save(cinema);

        } catch (Exception e) {
            log.error("Error al guardar el cine: ", e);

            return null;
        }
    }
}

Como se ve, la clase CinemaServiceImpl implementa la interfaz ICinemaService, inyecta el repositorio CinemaRepository y tiene un método que guarda un cine. cinema es enviado al método save desde el controlador que lo usa, y el método devuelve el cine guardado o null si se produjo un error.

A continuación muestro cómo se verá el método al incluir los mensajes de éxito o error:

@Slf4j
@RequiredArgsConstructor
@Service
public class CinemaServiceImpl implements ICinemaService {

    private final HttpSession session;
    private final CinemaRepository cinemaRepo;

    // Otras propiedades y métodos de la clase aquí

    @Override
    @Transactional
    public Cinema save(Cinema cinema) {
        log.info("save {}", cinema);

        try {
            Cinema newCinema = cinemaRepo.save(cinema);

            String message = "Cine " + newCinema + " guardado.";

            session.setAttribute("message", message);
            session.setAttribute("messageType", "info");

            return newCinema;

        } catch (Exception e) {
            log.error("Error al guardar el cine: ", e);

            session.setAttribute("message", "El cine no ha podido guardarse.");
            session.setAttribute("messageType", "danger");

            return null;
        }
    }
}

Con session.setAttribute("message", message); se cambia el valor de la variable message, y con session.setAttribute("messageType", "info"); se hace lo propio con la variable messageType. Lo mismo ocurre en caso de error.

A tener en cuenta: en String message = "Cine " + newCinema + " guardado correctamente."; hay que estar seguro de que la entidad Cinema sobrescribe (@Override) el método toString() para poder usarlo como String.

El resultado es algo como lo que se muestra a continuación.

Lo que se ve es lo que hemos definido en el fragmento messageAlert.html que hemos incluido en la plantilla de la vista.

Mensajes encadenados

Si realizamos más de una gestión crítica desde un mismo controlador, como, por ejemplo, actualizar la información de un cine, y si este no está está operativo (p.ej. si ha cerrado temporalmente), entonces desactivar todas las salas de ese cine para que no se muestren en la aplicación, podemos encadenar los mensajes de ambos servicios. Para ello debemos leer el valor de la variable message en el segundo servicio, el que se ocupe de desactivar las salas, y añadir el aviso al nuevo mensaje, ya que sólo disponemos de un mensaje que puede ser mostrado a la vez:

String message = (String) session.getAttribute("message");
session.setAttribute("message", message + " Salas desactivadas correctamente.");

Cerrando la notificación al cambiar de página

Como sabemos, la notificación puede cerrarse haciendo clic en la X de cierre, o bien cerrarse cuando cambiamos de página. Al cambiar de página, el filtro SessionFilter se ejecutará, y para que ocurra lo que queremos es necesario incluir una nueva variable y mas comprobaciones, como se muestra a continuación:

@Component
public class SessionFilter implements Filter {

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {}

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
            throws IOException, ServletException {

        HttpServletRequest httpRequest = (HttpServletRequest) request;
        HttpServletResponse httpResponse = (HttpServletResponse) response;

        HttpSession session = httpRequest.getSession(true);

        if (session!= null) {

            // Variables para las notificaciones

            if (session.getAttribute("message") == null)
                session.setAttribute("message", "");

            if (session.getAttribute("messageType") == null)
                session.setAttribute("messageType", ""); 
                // Valores: "danger" u otro cualquiera = "info".

            // Cierre de notificaciones al cambiar de página

            if (session.getAttribute("messageActivated") == null)
                session.setAttribute("messageActivated", false);

            if ((boolean) session.getAttribute("messageActivated")) {
                session.setAttribute("message", "");
                session.setAttribute("messageActivated", false);
            }

            if (!Objects.equals((String) session.getAttribute("message"), ""))
                session.setAttribute("messageActivated", true);
            
        }

        chain.doFilter(request, response);
    }

    @Override
    public void destroy() {}
}

En estos tres nuevos bloques de sentencias if , primero compruebo que la variable de sesión messageActivated está inicializada, como hacía con las otras variables de sesión, y si no lo está, la inicializo a false.

Como cada vez que se muestra una página en la aplicación se lanza SessionFilter, en el siguiente bloque de sentencias compruebo si messageActivated está activado (true), y si lo está, la desactivo, y vacío message para que no vuelva a mostrarse la notificación. Recordemos que el fragment messageAlert.html sólo muestra la notificación si su contenido no es "".

En el último bloque, si message contiene texto y es la primera vez que se va a mostrar la notificación, el bloque anterior no la habrá borrado. Entonces activo messageActivated para que la notificación pueda ser eliminada la siguiente vez que se muestre una página.

Como se aprecia, messageActivated actúa como indicador de borrado, y en este proceso es determinante el orden en el que se hacen las comprobaciones.

Con esto, ya tenemos activo nuestro propio sistema de notificaciones para Thymeleaft.

Adaptando este método sería posible, por ejemplo, generar notificaciones que permitan consultar al usuario si quiere llevar a cabo o no una tarea determinada, como p.ej. "¿Desea borrar el cine? [Sí] [No]".

BONUS: Aviso de cookies

Es fácil realizar los cambios para, por ejemplo, notificar un aviso de cookies con un botón de aceptar que permanezca abierto hasta que el usuario lo cierre, o incluso poner un banner, o cualquier aviso temporal que requiera nuestra aplicación. Hagamos el proceso de ejemplo de un aviso de cookies.

El planteamiento cambia un poco. Si vamos a emplear ambos métodos, el de notificar lo que ocurre en la aplicación y el aviso de cookies, debemos usar una variable propia que actúe de «llave» para la cookie.

La notificación estará disponible en la vista actual y en todas aquellas vistas que tengan el fragmento de código de la cookie incluido en la plantilla hasta que se lo indiquemos. Como no podemos eliminar el contenido de la notificación desde Thymeleaft, y no sabemos el momento en el que el usuario eliminará la ventana de notificación, la variable de sesión que guarda la notificación se manejará desde el backend, mediante un controlador y una ruta que nos permita cambiar su valor.

El filtro

Comienzo añadiendo la nueva variable cookieWarning de sesión al filtro:

@Component
public class SessionFilter implements Filter {

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {}

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
            throws IOException, ServletException {

        HttpServletRequest httpRequest = (HttpServletRequest) request;
        HttpServletResponse httpResponse = (HttpServletResponse) response;

        HttpSession session = httpRequest.getSession(true);

        if (session!= null) {

            // Variables para las notificaciones

            if (session.getAttribute("message") == null)
                session.setAttribute("message", "");

            if (session.getAttribute("messageType") == null)
                session.setAttribute("messageType", ""); 
                // Valores: "danger" u otro cualquiera = "info".

            // Cierre de notificaciones al cambiar de página

            if (session.getAttribute("messageActivated") == null)
                session.setAttribute("messageActivated", false);

            if ((boolean) session.getAttribute("messageActivated")) {
                session.setAttribute("message", "");
                session.setAttribute("messageActivated", false);
            }

            if (!Objects.equals((String) session.getAttribute("message"), ""))
                session.setAttribute("messageActivated", true);

            // Gestión de la cookie

            if (session.getAttribute("cookieWarning") == null)
                session.setAttribute("cookieWarning", true);

        }

        chain.doFilter(request, response);
    }

    @Override
    public void destroy() {}
}

En este caso, la variable tendrá valor true por defecto, lo que indica que el fragmento de aviso de cookies debe mostrarse. Cuando la cerremos, este valor cambiará a false.

El fragmento

Podemos llamar al fragmento que mostrará la notificación cookieWarnig.html, e incluirlo en todas nuestras páginas mediante:

<div th:replace="~{fragments/cookieWarning :: cookieWarning}"></div>

Este es su código:

<div th:fragment="cookieWarning" th:if="${session.cookieWarning}" class="container mt-3 sticky-top">

    <form th:action="@{/cookie}" method="POST">

        <input type="hidden" th:name="returnUrl" th:value="${returnUrl}">

        <div class="alert alert-warning alert-dismissible fade show shadow d-flex justify-content-between" role="alert">

            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="24" height="24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M10.34 15.84c-.688-.06-1.386-.09-2.09-.09H7.5a4.5 4.5 0 1 1 0-9h.75c.704 0 1.402-.03 2.09-.09m0 9.18c.253.962.584 1.892.985 2.783.247.55.06 1.21-.463 1.511l-.657.38c-.551.318-1.26.117-1.527-.461a20.845 20.845 0 0 1-1.44-4.282m3.102.069a18.03 18.03 0 0 1-.59-4.59c0-1.586.205-3.124.59-4.59m0 9.18a23.848 23.848 0 0 1 8.835 2.535M10.34 6.66a23.847 23.847 0 0 0 8.835-2.535m0 0A23.74 23.74 0 0 0 18.795 3m.38 1.125a23.91 23.91 0 0 1 1.014 5.395m-1.014 8.855c-.118.38-.245.754-.38 1.125m.38-1.125a23.91 23.91 0 0 0 1.014-5.395m0-3.46c.495.413.811 1.035.811 1.73 0 .695-.316 1.317-.811 1.73m0-3.46a24.347 24.347 0 0 1 0 3.46" />
            </svg>&nbsp;&nbsp;
            
            <span class="align-middle"><strong>Atención:</strong> Este sitio usa cookies. Lea la Política de privacidad.</span>

            <button type="submit" class="btn btn-sm btn-outline-primary" data-bs-dismiss="alert" aria-label="Confirmar">OK</button>
        </div>
    </form>
</div>

Nuestra notificación de cookie se verá así:

La comprobación th:if="${session.cookieWarning}" hará que se muestre o no este fragmento, osea, que se muestre o no la notificación de cookies.

Como se aprecia, se incluye un formulario que actuará cuando el usuario cierre la notificación. Con el botón button type="submit", mediante el formulario, llamo al controlador que va a desactivar la notificación de cookie a través la ruta indicada en el formulario: <form th:action="@{/cookie}" method="POST">.

Con <input type="hidden" th:name="returnUrl" th:value="${returnUrl}"> indico, a través de la respuesta de formulario al controlador, a qué página debo dirigirme después de realizar la operación, pues, como dije, no sabemos en qué momento el usuario cerrará la notificación. Esto me permitirá volver a la página donde estaba una vez se procese el cambio del valor de la variable de sesión de la cookie.

Suelo usar de forma genérica returnUrl para indicar la ruta porque es útil para, por ejemplo, cuando llamo a un formulario y quiero saber dónde debo ir una vez enviado el contenido del formulario, como en este caso. Por ejemplo, si nuestra aplicación maneja cines, y añadimos, editamos o borramos un cine, mediante returnUrl puedo indicar al método @PostMapping qué vista mostrar tras realizar estas operaciones. Para poder hacerlo, cuando usé las vistas de crear, editar o borrar mencionadas, añado esta variable al modelo con:

model.addAttribute("returnUrl", "cinemas");

donde cinemas es la ruta a la que se debe llegar una vez el formulario de la ruta a la que vamos se procese. El método se vería así:

@GetMapping("/create")
public String createForm(Model model) {

    model.addAttribute("cinema", new Cinema());
    
    model.addAttribute("returnUrl", "cinemas");

    return "cinema/cinema-form";
}

En la carpeta controllers, creo el controlador CookieController siguiente:

@Controller
public class CookieController {

    @PostMapping("/cookie")
    public String closeCookiePolicy(HttpSession session,
        @RequestParam(value = "returnUrl", required = false) String returnUrl) {

        session.setAttribute("cookieWarning", false);

        if (!stringIsEmpty(returnUrl)) {
            return "redirect:" + returnUrl;
        } else {
            return "redirect:/";
        }
    }
}

Así, a través de la ruta /cookie puedo cambiar el valor de cookieWarning con: session.setAttribute("cookieWarning", false); y luego volver a la ruta deseada si hemos pasado el parámetro returnUrl. Ahora la notificación ya no se mostrará más.

Es importante que la ruta /cookie esté definida en nuestra configuración de seguridad. Si estamos usando Spring Security, en SecurityConfig.class debe haber algo como esto:

@Bean
public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
    http
        .authorizeHttpRequests(authRequest -> authRequest

            // otras configuraciones

            .requestMatchers(HttpMethod.POST, "/cookie").permitAll()

            // otras configuraciones

            .anyRequest().authenticated()
        )

        // otras configuraciones

        return http.build();
}

Con .requestMatchers(HttpMethod.POST, "/cookie").permitAll() la ruta /cookie es ahora visible y ya podemos usarla desde el fragmento para cerrar nuestra notificación.

Un ejemplo

Puedes ver el código que implementan estos métodos, tanto las notificaciones como los mensajes fijos de cookies, en el repositorio de la aplicación Cartelera DAW.

Repositorio de Cartelera DAW

Spinner loader en Thymeleaft

JavGuerra — Mon, 08 Jul 2024 00:00:00 GMT

Etiquetas: #código, #java, #spring boot, #thymeleaft

A veces, el tiempo de respuesta del servidor es alto, y el usuario puede sentir que la aplicación web no está funcionando bien. Aquí explico cómo usar un spinner loader o animación de carga propia, generada con CSS, que se active al cargar la página y permanezca activa hasta que se muestre completamente.

Esta entrada hace uso y adapta los contenidos ya explicados anteriormente en este blog en Spinner loader asíncrono, pero en este caso se simplifica el proceso al plantear una solución que no se basa en eventos asíncronos.

Manos a la obra

Lo que voy a hacer es mostrar el cargador cada vez que entramos en una página, y hasta que esta se carga completamente. Usaré JavaScript para activarlo y desactivarlo.

Necesitaré un espacio donde mostrar la animación de carga y el CSS que defina esta animación.

El fragmento

Para incluir el código necesario en nuestras vistas con Thymeleaft, creo un fragmento que llamo spinner.html como este:

<div th:fragment="spinner">
    <dialog id="zone">
        <div class="spinner" aria-label="Cargando..."></div>
    </dialog>

    <script>
        const zone = document.querySelector('#zone');

        // Activa la ventana modal
        let domContentLoadedCallback = function() {
            zone.showModal();
            document.removeEventListener('DOMContentLoaded', domContentLoadedCallback);
        };

        // Desactiva la ventana modal
        let loadCallback = function() {
            zone.close();
            window.removeEventListener('load', loadCallback);
        };

        document.addEventListener('DOMContentLoaded', domContentLoadedCallback);
        window.addEventListener('load', loadCallback);
    </script>
</div>

Puedo incluir este fragmento en cualquier parte de la plantilla Thymeleaft con:

<div th:replace="~{fragments/spinner :: spinner}"></div>

Realmente no importa en qué parte de la plantilla incluyamos el fragmento, pues va a hacer uso de dialog, una etiqueta HTML que define una ventana modal que se muestra en el centro exacto de la ventana del navegador.

<dialog id="zone"><div class="spinner" aria-label="Cargando..."></div></dialog>

Este simple código define una ventana modal identificada como zone y un div que servirá para mostrar el cargador definido a través de la clase spinner.

Mediante el código JavaScript posterior, selecciono la ventana modal zone sobre la que voy a actuar, y luego defino dos eventos, el primero hará que se muestre el cargador y el segundo que se desactive.

El primer evento se dispara cuando el HTML se ha cargado completamente (DOMContentLoaded), y el segundo cuando todos los contenidos referenciados en la página son cargados (load). Entre el primer y el segundo evento, el cargador es visible.

Con zone.showModal(); se activa la ventana modal, y con zone.close(); se desactiva. En realidad, el cargador está ahí en todo momento, pero no está visible en todo momento.

Dentro de cada función que gestiona el evento he incluido también el código para quitar el evento una vez usado.

El CSS

Con el siguiente código:

#zone {
  border: none;
  background: none;
}

#zone:focus {
  outline: none;
}

.spinner {
  margin: 0 auto;
  border: 5px solid moccasin;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border-left-color: DarkOrange;

  animation: spin 1s ease infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

No debemos olvidar incluir algo como:

<link rel="stylesheet" href="/css/estilo.css">

en el head de las plantillas donde vayamos a usar el cargador, cambiando estilo.css y su ruta según corresponda.

El modal identificado como #zone se verá sin fondo y sin borde, osea, totalmente transparente. En él es donde se muestra el cargador. #zone tendrá el tamaño del cargador, y aparecerá centrado tanto vertical como horizontalmente en la pantalla, manteniéndose centrado aún haciendo scroll.

Con .spinner describo el aspecto del spinner loader, e indico que debe animarse infinitamente girando 360 grados cada segundo.

Realmente se trata de colorear el borde a un div, poner un color distinto al borde de uno de sus lados, redondear sus esquinas para que el div parezca un círculo y luego hacerlo girar constantemente. Simple y efectivo.

Y no necesitamos nada más. Ahora, cada vez que se cargue una página, veremos el cargador durante el tiempo que tarda en cargarse completamente.

No se recomienda abusar del cargador, ya que este puede centrar la atención del usuario, por lo que usado con moderación, en las páginas que son susceptibles de retrasar su carga, añadimos un efecto interesante y útil a nuestra aplicación y damos información al usuario de lo que ocurre.

Uso en formularios

Cuando enviamos un formulario o hacemos una petición que el backend va a tardar en procesar, también podemos activar la visualización del cargador hasta que cambie la vista. Para ello podemos añadir un evento a nuestro formulario de la siguiente manera:

<form id="myForm" th:action="@{/setCity}" method="POST">
    
    ...

    <button id="send" type="submit">Guardar</button>
</form>

<script>
    document.getElementById('send').addEventListener('click', function(event) {
        event.preventDefault();
        zone.showModal();
        document.getElementById('myForm').submit();
    });
</script>

Una vez identificados el formulario myForm y el botón de enviar send, mediante JavaScript asocio un evento que permitirá que, al hacer click en el botón de guardar, se active la ventana modal.

Con event.preventDefault(); capturo el evento de envío del formulario para poder intercalar la activación de la ventana modal con zone.showModal(); antes de enviar el formulario definitivamente con document.getElementById('myForm').submit();.

Es necesario que el fragmento spinner.html se haya incluido en la página. De otra forma podemos incluir el código del cargador ya mencionado en cualquier parte de nuestra página:

<dialog id="zone"><div class="spinner" aria-label="Cargando..."></div></dialog>

Como ya sabemos que vamos a cambiar de vista al enviar el formulario, no es necesario desactivar el evento click del formulario, pero si estamos haciendo comprobaciones el en frontend, es posible que necesitemos hacerlo cunado mostremos errores, lo que implica código de comprobaciones adicional. Si estamos usando @Valid en nuestro backend, esto no será necesario.

Un ejemplo

Puedes ver el código que implementa esta solución en el repositorio de la aplicación Cartelera DAW.

Enlaces recomendados

Info sobre la etiqueta <dialog>.
Artículo «Cómo crear un spinner loader con CSS»

Logout personalizado con Spring Security

JavGuerra — Sat, 13 Jul 2024 00:00:00 GMT

Etiquetas: #código, #java, #spring boot, #spring security, #ciberseguridad

En un artículo anterior he usado variables de sesión para guardar información de la aplicación: mensajes para el usuario, aviso de cookies… Puede que, cuando el usuario salga de su sesión, queramos conservar estos datos que seguirán siendo útiles aunque no esté autenticado. En esta entrada muestro mi solución usando Spring Security.

Se asume que el lector tiene conocimientos generales de Spring Boot y Spring Security para aplicar el contenido.

El contexto de seguridad

El primer paso en el proceso de logout que lleva a cabo Spring Security es invalidar la sesión del usuario. Esto significa que Spring Security elimina cualquier información asociada con la sesión del usuario, como datos de estado de sesión almacenados en el servidor o en cookies (borra la información, pero no la cookie). Al invalidar la sesión, se asegura de que el usuario ya no pueda acceder a la aplicación como si estuviera autenticado.

Después de invalidar la sesión, Spring Security también limpia el contexto de seguridad actual. Esto incluye eliminar cualquier token de Authentication que represente al usuario autenticado, asegurando que el usuario ya no sea reconocido como autenticado en la aplicación.

Pero en este caso no interesa ese borrado completo, sino sólo la información de autenticación. Para ello debo codificar mi propio logout limpiando el contexto de seguridad pero sin invalidar la sesión.

Tomando el control de Logout

Como sabemos, para configurar Spring Security se usa la clase SecurityConfig.class, que generalmente incluye el componente SecurityFilterChain, fundamental para establecer filtros a las peticiones HTTP que se reciben en la aplicación. En este ejemplo me centraré en la parte de su configuración relativa al logout.

@Configuration
@EnableWebSecurity
public class  SecurityConfig {

    ...

    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http)  throws Exception {
        http.authorizeHttpRequests(authRequest -> authRequest

                ...

                .requestMatchers(HttpMethod.POST, "/logout").permitAll()

                .anyRequest().authenticated()
            )

            ...

            .logout(logout -> logout
                .logoutUrl("/logout")
                .permitAll()
            )

        return http.build();
    }
}

Con ... indico que el código puede ser más amplio y contener otras configuraciones.

En la línea .requestMatchers(HttpMethod.POST, "/logout").permitAll() estoy permitiendo el acceso a la ruta personalizada para llevar a cabo el logout. Realmente, esto no sería necesario al incluir .permitAll() después de logoutUrl("/logout"). Tampoco sería necesario porque la ruta /logout está disponible por defecto. No obstante, esto puede ser útil si decidimos usar otra ruta distinta a /logout en la aplicación.

Para la gestión del token del usuario, será necesario definir un controlador propio para la ruta logout. Algo similar a esto:

@Slf4j
@Controller
public class LogoutController {

    @RequestMapping("/logout")
    public String logout() {

        log.info("logout");

        SecurityContextHolder.getContext().setAuthentication(null);

        // cosas que hacer tras el cierre de sesión aquí

        return "logout";
    }
}

La información de sesión se guarda en una cookie llamada JSESSIONID, que contendrá las variables de sesión, incluido el token de autenticación.

Con SecurityContextHolder.getContext().setAuthentication(null); elimino el token de autenticación, pero sin borrar toda la información de la cookie, como las variables de sesión.

Después de esto, puedo realizar algunas acciones asociadas al cierre y redirigir al login, o como en este caso, mostrar la vista logout para mostrar un mensaje de despedida.

Refinando el logout

Al usar null elimino el token de autenticación del usuario, pero puede que, en la plantilla que devuelvo con return (logout en el caso anterior), sea necesario usar el contexto de seguridad, por ejemplo mostrando una información u otra en un fragmento de la plantilla si estamos autenticados o no. Con este método, ni sec:authorize="isAnonymous()" ni sec:authorize="isAuthenticated()" funcionarán en Thymeleaft, ya que ahora no existe el token que indique si el usuario es anónimo o está autenticado.

Esto ocurre sólo para la vista asociada al controlador que es llamada tras borrar el token, pero no ocurre así para las siguientes vistas, en las que parece que el token es regenerado como anónimo.

Entonces, si en la siguiente vista no vamos a usar la autenticación, será suficiente con usar null, pero si no es así, entonces hay que cambiar el token en vez de eliminarlo, pero Spring Boot no tiene un token por defecto que pueda usar, así que debo construir uno.

Primeramente añado el siguiente código en

@Bean
public AnonymousAuthenticationToken anonymousAuthenticationToken() {
    List<GrantedAuthority> authorities = Collections.singletonList(new SimpleGrantedAuthority("ROLE_ANONYMOUS"));
    return new AnonymousAuthenticationToken("ANONYMOUS_USER", "ANONYMOUS_USER", authorities);
}

Que me permitirá crear anonymousAuthenticationToken como un Bean. Este método es responsable de crear e inicializar el objeto AnonymousAuthenticationToken. Este token es utilizado por Spring Security para representar la autenticación de usuarios anónimos dentro de una aplicación.

El método realiza las siguientes acciones:

Inicialización de Autoridades: Primero, creo una lista (List<GrantedAuthority>) con un solo elemento, que es una instancia de SimpleGrantedAuthority con el rol "ROLE_ANONYMOUS". Las autoridades (o roles) determinan los privilegios que tiene un usuario dentro de la aplicación. En este caso, asigno al usuario anónimo el rol de ROLE_ANONYMOUS.
Creación del Token: Luego, utilizo esta lista de autoridades para construir un nuevo AnonymousAuthenticationToken, pasando también dos cadenas de texto ("ANONYMOUS_USER") como nombre y detalles del usuario. Estos valores pueden ser personalizados según sea necesario.

Ya puedo usar el token en el controlador, como se muestra:

@Slf4j
@RequiredArgsConstructor
@Controller
public class LogoutController {

    private final AnonymousAuthenticationToken anonymousAuthenticationToken;

    @RequestMapping("/logout")
    public String logout() {

        log.info("logout");

        SecurityContextHolder.getContext().setAuthentication(anonymousAuthenticationToken);

        // cosas que hacer tras el cierre de sesión aquí

        return "logout";
    }
}

Ahora sí, el usuario será anónimo, y cualquier comprobación en la plantilla Thymeleaft que incluya sec:authorize="isAnonymous()" permitirá que la etiqueta HTML que lo use sea mostrada.

Consideraciones

Tal vez podría crearse un servicio al que llamar desde el controlador para gestionar el logout, o un manejador propio CustomLogoutHandler que realice esta función de cierre de sesión sin la necesidad de crear un controlador, y que se use directamente desde SecurityConfig.class.

Se han de tener en cuenta las consideraciones de seguridad relacionadas con este método. Mantener información de la sesión de usuario una vez se lleva a cabo el logout no siempre es seguro, y se deben controlar las posibles fugas de información para evitar problemas.

Un ejemplo

Puedes ver el código que implementan esta funcionalidad en el repositorio de la aplicación Cartelera DAW.

Repositorio de Cartelera DAW

Mira también el artículo donde se usan las variables de sesión que quiero preservar:

Notificaciones con Thymeleaft

Accediendo a la API de Mastodon

JavGuerra — Wed, 18 Sep 2024 00:00:00 GMT

Etiquetas: #javascript, #código, #api, #servidor

En este artículo vamos a ver cómo se puede acceder a la API de Mastodon, un servicio que nos permite, entre otras cosas, obtener las últimas publicaciones de un usuario concreto.

Recientemente la he usado para mostrar, en el apartado social de esta página, las publicaciones que escribo en la red social, empleando JavaScript del lado del cliente en Astro, es decir, que en una página .astro he incluido un script que lee y muestra las publicaciones actualizadas de mi cuenta de Mastodon.

Me centraré en la parte de JavaScript y no tanto en la integración con Astro, ya que, de esta forma, será posible aprovechar la información para que pueda ser usada en otros frameworks o aplicaciones propias.

El lector debe conocer las funciones avanzadas de JavaScript como asincronía y llamadas a APIs para seguir correctamente esta entrada.

Nota: Este artículo ha sido publicado también en IfGeekThen, el blog de NTT Data, el 18 de marzo de 2026.

API de Mastodon

Realizaré la consulta a la API de Mastodon mediante la función fetch de JavaScript.

Las consultas a la API no requieren autenticación (aunque es posible), por lo que podemos acceder a ella sin ningún tipo de token, pero voy a necesitar:

La url de la instancia de Mastodon, es decir el servidor.
El id de la cuenta de usuario que quiero consultar.
El número que indique la cantidad de publicaciones que quiero obtener.

Cuando tengamos estos datos, podremos construir el endpoint o url de la API de Mastodon, que será la siguiente:

https://<server>/api/v1/accounts/<accountId>/statuses?limit=<limit>

Donde:

<server> es el nombre de dominio de la instancia de Mastodon, por ejemplo mastodon.social o la de tu propia instancia.
<accountId> es el id de la cuenta que queremos consultar, por ejemplo 1234567890. Este id se obtendría de la url de la cuenta, ej.: https://mastodon.social/@usuario, como se verá enseguida.
<limit> es el número de publicaciones que queremos consultar, por ejemplo 10.

Para obtener el id de la cuenta, debo usar la siguiente url:

https://<server>/api/v1/accounts/lookup?acct=<username>

Donde hay que sustituir <server> por el nombre de la instancia de Mastodon y <username> por el nombre de usuario de la cuenta que queremos consultar.

Obtengo un json con el id de la cuenta, entre otros datos, como por ejemplo:

{
  "id": "1234567890",
  "username": "usuario",

  ...

}

Si queremos consultar las 10 últimas publicaciones de la cuenta ficticia @usuario, que tiene el id ficticio: 1234567890, en la instancia de Mastodon mastodon.social, tendríamos que usar la siguiente url:

https://mastodon.social/api/v1/accounts/1234567890/statuses?limit=10

Fetch

Ya tenemos formado el endpoint de la API de Mastodon, y, para llevar a cabo la consulta, usaré la función fetch de JavaScript, que permite realizar peticiones HTTP, y obtener el resultado como un objeto json.

const server = 'https://mastodon.social';
const profileId = '1234567890';
const limit = 10;

const route = `${server}/api/v1/accounts/${profileId}/statuses?limit=${limit}`;

async function getLatestPosts(route) {
  try {
    const response = await fetch(route);
    if (!response.ok) throw new Error(response.statusText);
    return await response.json();
  } catch (error) {
    console.error(error);
    return [];
  }
}

Como se aprecia, se trata de una función asíncrona con una estructura de lo más común, que se ejecutará de manera independiente, y cuando se haya terminado de ejecutar, me permitirá seguir con la ejecución del código.

Para llamar a la función, uso:

const posts = await getLatestPosts(route);

Con await, se espera a que la función getLatestPosts termine de ejecutarse, y luego es posible usar el array posts para mostrar las publicaciones en nuestra página, siempre que no se haya producido ningún error.

Mostrando las publicaciones

Allí donde vamos a mostrar las publicaciones, voy a usar un elemento <div> con el id="posts" para definir una lista de publicaciones, un <ul>, y un elemento <li> para cada publicación.

Incluyo el siguiente código HTML en la página:

<div id="posts">
  Cargando...
</div>

Y luego, mediante el script de JavaScript, sustituiré el contenido del elemento <div> con las publicaciones obtenidas y formateadas:

function displayPosts(posts) {
  const postsElement = document.getElementById('posts');

  if (!posts || posts.length === 0) {
    postsElement.innerHTML = '<p>No se encontraron posts.</p>';
    return;
  }

  postsElement.innerHTML = `
    <h2>Últimas publicaciones</h2>
    <ul>
    ${posts.map(post => {
      const isReblog = post.reblog != null;
      const originalPost = isReblog ? post.reblog : post;
      const contentIsEmpty = !originalPost.content || originalPost.content.replace(/<[^>]*>/g, '').trim() === '';
      const hasMedia = originalPost.media_attachments && originalPost.media_attachments.length > 0;
      const multimediaLink = hasMedia ? `<small>Incluye contenido multimedia <a href="${originalPost.url}">👁️ Ver en origen →</a></small><br />` : '';

      return `
        <li class="post">
          ${isReblog 
            ? `${originalPost.content} <small>♻️ Republicado </small>`
            : contentIsEmpty && hasMedia
              ? multimediaLink
              : originalPost.content + multimediaLink}

          <a href="${originalPost.url}">
            <small>
              📢 ${new Date(originalPost.created_at).toLocaleString('es-ES', {dateStyle: 'medium', timeStyle: 'short'})}
            </small>
          </a>
        </li>
        `
      }).join('')}
    </ul>
  `;
}

Vamos por partes.

Primero obtengo el elemento <div> con el id posts del DOM, y lo guardo en una variable postsElement para poder referirme a él en el script.

const postsElement = document.getElementById('posts');

Compruebo que hay publicaciones y que el array posts no esté vacío. Si no es así, defino el contenido del elemento <div> con el siguiente código:

postsElement.innerHTML = '<p>No se encontraron posts.</p>';

Si hemos obtenidos publicaciones, hago uso de la siguiente estructura:

postsElement.innerHTML = `
    <h2>Últimas publicaciones</h2>
    <ul>
    ${posts.map(post => `

        // código para mostrar cada publicación

    `).join('')}
    </ul>
  `;

Con la función map puedo iterar sobre cada elemento del objeto posts y acceder a cada una de las publicaciones, y luego puedo juntar todos los elementos formateados en una cadena de texto mediante la función join. El resultado se incluirá en el elemento <div> con el id posts mediante el método innerHTML de postElement. Es decir, obtengo cada publicación, esta se formatea, y se concatena o añade a la cadena de texto que conforma el contenido del elemento <div>; las publicaciones.

Pintando…

Para formatear las publicaciones, voy a usar una estructura de elementos <li> por cada publicación, como dije, y un elemento <a> para enlazar a la publicación original. Lo que quiero conseguir se parece a esto:

<li class="post">
  Este es un ejemplo de una publicación en Mastodon.
  <a href="https://mastodon.social/@usuario/109292343224519197">
    <small>18 sep 2024, 1:23:45</small>
  </a>
</li>

De cada publicación obtengo el contenido de la publicación, y el enlace a la publicación. Con esta información defino una serie de variables:

const isReblog = post.reblog != null;
const originalPost = isReblog ? post.reblog : post;
const contentIsEmpty = !originalPost.content || originalPost.content.replace(/<[^>]*>/g, '').trim() === '';
const hasMedia = originalPost.media_attachments && originalPost.media_attachments.length > 0;
const multimediaLink = hasMedia ? `<small>Incluye contenido multimedia <a href="${originalPost.url}">👁️ Ver en origen →</a></small><br />` : '';

Como las publicaciones pueden ser republicaciones, es decir, publicaciones compartidas de otros usuarios o propias, compruebo si este es el caso.

Si es una republicación, obtengo su contenido, sino, obtengo el contenido de la publicación original.

Compruebo si el texto de la publicación está verdaderamente vacío, es decir, si no contiene, por ejemplo, alguna etiqueta HTML.

Compruebo también si la publicación tiene contenido multimedia.

Por último, si la publicación tiene contenido multimedia, preparo el enlace a la publicación original, y si no lo tiene, dejo el aviso vacío.

Seguidamente, formateo el texto de la publicación mediante el siguiente código:

  <li class="post">
    ${isReblog 
      ? `${originalPost.content} <small>♻️ Republicado </small>`
      : contentIsEmpty && hasMedia
        ? multimediaLink
        : originalPost.content + multimediaLink}

    <a href="${originalPost.url}">
      <small>
        📢 ${new Date(originalPost.created_at).toLocaleString('es-ES', {dateStyle: 'medium', timeStyle: 'short'})}
      </small>
    </a>
  </li>

¿Se trata de una republicación?, entonces publico el texto de la republicación con el aviso de ♻️ Republicado.

En caso contrario, compruebo si el texto de la publicación está vacío y si tiene contenido multimedia.

Si ambas condiciones se cumplen, entonces publico el aviso de ver 👁️ Ver en origen → con su enlace, ya que será una publicación sin texto pero con video o imagen…

Si no se cumple alguna o ambas condiciones, entonces publico el contenido de la publicación y el aviso de ver 👁️ Ver en origen → con su enlace, pues o bien la publicación tiene contenido, tiene texto y contenido multimedia o sólo texto.

Para mostrar la fecha, uso la función toLocaleString de JavaScript, que me permite obtener la fecha en formato local.

Es posible llamar a la función displayPosts mediante:

displayPosts(posts);

Siendo posts el objeto de publicaciones en json obtenido de la API de Mastodon.

Una advertencia

Si bien las instancias de Mastodon se encargan de limpiar las publicaciones de los usuarios ante potenciales peligros, no estaría de más implementar una función propia que se ocupe de limpiar el contenido de las publicaciones antes de hacer uso de originalPost.content para evitar sorpresas por la inclusión de etiquetas o atributos dañinos que pudieran llegar de publicaciones de instancias de Mastodon poco confiables.

El código completo

El código siguiente incluye el contenido mostrado hasta ahora en el artículo:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Publicaciones de Mastodon</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <h1>Mastodon</h1>

    <div id="posts">
        Cargando...
    </div>

<script>
    // Sustituye los valores siguientes para adaptarlo a tu propio uso
    const server = 'https://mastodon.social';
    const profileId = '1234567890';
    const limit = 10;

    const route = `${server}/api/v1/accounts/${profileId}/statuses?limit=${limit}`;

    async function getLatestPosts(route) {
        try {
            const response = await fetch(route);
            if (!response.ok) throw new Error(response.statusText);
            return await response.json();
        } catch (error) {
            console.error(error);
            return [];
        }
    }

    function displayPosts(posts) {
      const postsElement = document.getElementById('posts');

      if (!posts || posts.length === 0) {
        postsElement.innerHTML = '<p>No se encontraron posts.</p>';
        return;
      }

      postsElement.innerHTML = `
        <h2>Últimas publicaciones</h2>
        <ul>
        ${posts.map(post => {
          const isReblog = post.reblog != null;
          const originalPost = isReblog ? post.reblog : post;
          const contentIsEmpty = !originalPost.content || originalPost.content.replace(/<[^>]*>/g, '').trim() === '';
          const hasMedia = originalPost.media_attachments && originalPost.media_attachments.length > 0;
          const multimediaLink = hasMedia ? `<small>Incluye contenido multimedia <a href="${originalPost.url}">👁️ Ver en origen →</a></small><br />` : '';

          return `
            <li class="post">
              ${isReblog 
                ? `${originalPost.content} <small>♻️ Republicado </small>`
                : contentIsEmpty && hasMedia
                  ? multimediaLink
                  : originalPost.content + multimediaLink}

              <a href="${originalPost.url}">
                <small>
                  📢 ${new Date(originalPost.created_at).toLocaleString('es-ES', {dateStyle: 'medium', timeStyle: 'short'})}
                </small>
              </a>
            </li>
            `
          }).join('')}
        </ul>
      `;
    }

    document.addEventListener("DOMContentLoaded", async () => {
      const posts = await getLatestPosts(route);
      displayPosts(posts);
    });
</script>

</body>
</html>

No olvides sustituir los valores de server, profileId y limit con los que correspondan a tu propio perfil de Mastodon o el del perfil que desees consultar.

Cargando las publicaciones

Aquí confluye todo. Mediante el evento asociado a la carga de la página DOMContentLoaded, que se incluye al final del script, se inicia la petición asíncrona a la API de Mastodon con getLatestPosts(route) y se muestran las publicaciones con displayPosts(posts).

Estilos

Para que el contenido se vea correctamente, es recomendable definir algunos estilos en el archivo style.css. Un ejemplo:

.invisible {
  display: inline-block;
  font-size: 0;
  height: 0;
  line-height: 0;
  position: absolute;
  width: 0;
}
.invisible img,
.invisible svg {
  border: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 0 !important;
}
.ellipsis:after {
  content: "…";
}

Los estilos aquí mostrados son los que usa el propio Mastodon para presentar las publicaciones en su página.

La clase .invisible se aplica a los elementos que quiero que no se vean. Esto es necesario para evitar saltos de línea y espacios en blanco en el contenido de las publicaciones debido a su formateo original.

Se incluye también la clase .invisible para imágenes y vectores SVG. Si bien no se usa en este ejemplo, pueden ser de utilidad si decides mostrar el contenido multimedia de las publicaciones.

Por su parte, la clase .ellipsis se usa para mostrar puntos suspensivos … al final de los enlaces acortados.

A partir de estos estilos es posible aplicar estilos propios al contenido mostrado.

Experimenta por tu cuenta

Como has podido comprobar a lo largo de este artículo, acceder a la API de Mastodon es un proceso sencillo que nos permite integrar el contenido de una cuenta en nuestros propios proyectos mediante código JavaScript. Desde la construcción del endpoint y la gestión de la respuesta asíncrona con fetch, hasta el formateo final de los datos considerando casos como las republicaciones o el contenido multimedia, has visto los fundamentos para crear tu propio visor de publicaciones.

Te animo a que tomes el código completo, lo adaptes con tus propios datos y experimentes modificando la lógica de displayPosts y el css para personalizar aún más la presentación. Y si te surgen dudas o mejoras, no dudes en explorar la documentación oficial de la API, donde encontrarás muchas más posibilidades.

Saber más

Mastodon
Mastodon API
Ejemplo de uso: Social

Visor para banco de preguntas

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

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

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

El programa visor

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

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

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

| .

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

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

Estructura de los datos

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

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

La estructura de los datos es la siguiente:

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

  ...otras preguntas aquí...

]

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

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

Bancos de preguntas

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

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

ToDo

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

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

Consideración

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

Enlaces

De Thunder a Postman

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

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

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

¿Qué es Bruno?

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

Planteamiento

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

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

Puedes descargar el script desde el:

Dificultades de la conversión

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

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

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

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

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

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

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

El script paso a paso

1. Lee el archivo de entrada

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

2. Extrae todas las peticiones

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

3. Extrae la estructura de carpetas

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

4. Convierte cada petición individualmente

Para cada petición, traduce:

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

5. Construye la colección Postman

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

6. Guarda el resultado

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

7. Muestra estadísticas

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

El resultado: características principales destacadas

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

Ejemplo de uso

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

Salida esperada:

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

Limitaciones del script

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

Enlaces

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:

Traducciones de software

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

Etiquetas: #código, #software libre, #pro-bono

Cuando puedo, llevo a cabo traducciones del inglés al español del software libre que utilizo. En esta entrada llevaré un listado actualizado de ello.

Nota: Esta entrada se actualizará cuando se produzcan novedades.

Wekan Vía Transifex. Herramienta para gestión de metodología kan-ban al estilo Trello.
JSLogo Intérprete Logo - pr
Moonmoon Planeta RSS - pr
Manual en español de Owncloud. Se puede descargar, por ejemplo, de Nube OwnCloud - Manual de Usuario v0.8 Documentación libre. No es una traducción directa del manual, sino un manual elaborado para la administración y gestión del software.
Tema Beautifull Jekill Ejemplo. Traducción del tema para este git-blog.
JavaScript en 14 minutos En desarrollo.
Diseño web en 4 minutos
Provincias de España, que estaba en account.limesurvey.org/de/downloads/file/34-provinces-of-spain-provincias-de-espa%C3%B1a?tmpl=component. Un complemento en español para el software Limesurvey.
PHP Guestbook GBook y tema «Conectiva»
Structured SuperBasic Mensajes de error.

Apuntes TIC

JavGuerra — Thu, 12 Jan 2023 00:00:00 GMT

Etiquetas: #código, #php, #java, #bbdd

Incluyo en este repositorio mis apuntes sobre mis materias de estudio tanto de DAW como autodidactas. También incluyo materiales realizados para formaciones impartidas.

Nota: Esta entrada se actualizará cuando se produzcan novedades.

Apuntes

BBDD
- relacional
Infraestructura
- servidores (varios)
Programación
- JAVA
- PHP
- varios

Repositorio

Apuntes TIC

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

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/

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.