Códice | Entradas sobre «javascript»

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.

Bootcamp Beca Santander

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

Etiquetas: #formación, #javascript, #programación

El pasado 9 de marzo fui informado de que había sido seleccionado para cursar el Bootcamp de Desarrollo Web Full Stack que Becas Santander lleva a cabo en colaboración con Fundación Universia, Indra y The Bridge.

La beca, denominada Programa DIGITAL RESKILLING Desarrolo Web Full Stack para estudiantes con Discapacidad, me permite acceder al Bootcamp de formación impartido por The Bridge desde marzo a noviembre, y en él se verán los siguientes módulos:

Módulo 0: Ramp up
Módulo 1: JavaScript avanzado
Módulo 2: Back end development
Módulo 3: Front end con React
Módulo 4: DevOps
Módulo 5: Lanza tu carrera digital

Trabajos realizados en el Bootcamp

La info de la formación estaba en el enlace ya desaparecido: “www.thebridge.tech/curso/bootcamp-indra-fundacion-universia#solicitud-beca”.

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

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

Animación interactiva

JavGuerra — Sat, 14 May 2022 00:00:00 GMT

Etiquetas: #web, #html, #css, #javascript, #animación, #herramienta

Cree atractivos diseños interactivos basados en HTML5 y gráficos en movimiento que puedan ejecutarse en cualquier dispositivo.

Así se presenta Google Web Designer en su web. Se trata de una herramienta disponible para varios sistemas operativos que puede descargarse para crear animaciones y elementos interactivos en HTML5 y que se integra con otros productos de Google, como Google Drive, Display & Video 360 y Google Ads.

Veamos cómo funciona con un ejemplo:

Esta simple animación que preparé para la asignatura de Diseño de Interfaces Web de F.P.G.S. de Desarrollo de Aplicaciones Web, contiene la imagen de un cronómetro en formato SVG que creé con la herramienta Inkscape, y dos botones que nos permiten iniciar y parar la animación o reiniciar la animación. Al iniciar con el botón «START», las agujas del cronómetro comienzan a correr hasta llegar a 20 segundos, momento en el que suena una campanilla, y la animación vuelve a su punto de origen.

Google Web Designer se parece a otras herramientas de edición de animaciones como la extinta Adoble Flash.

Permite:

Crear eventos e interacción usando los que vienen con la herramienta o creando otros propios con JavaScript.
Arrastrar y soltar componentes en su proyecto para agregar instantáneamente funcionalidades como galerías de imágenes, reproductores de video, mapas y más. Además, cada componente informa automáticamente las métricas sin necesidad de codificación.
Crear varias páginas para incluir varias escenas dentro de un proyecto.
Crear reglas de medios en su bloque de anuncios para establecer el estilo y el diseño del diseño, de modo que un solo bloque de anuncios pueda adaptarse a cualquier tamaño de pantalla en el que aparezca.
Animar escenas simples en el modo Rápido o usando capas en una línea de tiempo en el modo Avanzado unsando rutas de movimiento y aceleración personalizada.
Crea y manipula contenido 3D usando CSS3. Permite girar objetos y diseños 2D a lo largo de cualquier eje, visualizando transformaciones y traslaciones 3D mientras editamos.
Admite una amplia gama de formatos de anuncios gráficos y de video en todas sus plataformas publicitarias.

Aunque no es muy conocida, es una herramienta potente, y finalmente, el resultado del trabajo con Google Web Designer es completamente compatible con los estándares web actuales, manejando con CSS y JavaScript toda la animación y gestión de eventos, y ofreciendo resultados adaptables al dispositivo donde se muestre la animación interactiva.

Descargar Google Web Designer

Brackets vuelve

JavGuerra — Sat, 14 May 2022 00:00:00 GMT

Etiquetas: #html, #css, #javascript, #herramienta

¿Acaso se había ido? Brackets es un editor de texto orientado al desarrollo web, implementado en JavaScript, fácilmente extensible mediante HTML/CSS/JS, y que está disponible para Windows, OS X y Linux bajo una licencia abierta.

Tras el éxito arrollador de Visual Studio Code, Adobe, la empresa detrás de su desarrollo, abandonó el proyecto por su baja cuota de uso, pero nuevas versiones han sido lanzadas desde entonces de la mano de la comunidad. ¡Brackets sigue vivo!

Brackets emplea como base el editor CodeMirror y retoma ideas y conceptos ya ensayados en otra herramienta discontinuada llamada Adobe Edge Code. Tiene alrededor una amplia comunidad de desarrolladores que están ampliando los horizontes de esta herramienta rápidamente, haciéndola versátil en otras áreas del trabajo y la edición de múltiples formatos de documentos.

De hecho, un nuevo proyecto derivado de Brackets ha visto la luz. Se trata de Phoenix, un editor web completamente on-line (aunque no funciona aún con Firefox…).

Extensiones

Con las extensiones de Brackets podemos gestionar el control de versiones (p.ej. Git), revisar el código escrito, añadir notas, hacer seguimiento de TODO’s, escribir código de forma automática con unas pocas pulsaciones de tecla mediante el uso de estructuras de código pre-guardadas…

La propia herramienta, una vez instalada, dispone de editor interno que permite modificar directamente, sin cambiar de documento, el código CSS asociado a una etiqueta HTML. Permite ver, con sólo pasar por encima, el color de una descripción CSS, y tiene previsualización en vivo de documentos a través de Chrome. Lo que modifiquemos en el código irá reflejándose en la página mostrada en Chrome en tiempo real.

Adobe proponía seguir estos pasos (en inglés) para iniciarse en el uso de Brackets.

Por mi parte, fue de gran ayuda la visualización de este tutorial en video de J&G Proyectos Web para aprender su correcto uso:

Cuando instalamos Brackets por primera vez, la interfaz parece algo desangelada, pero a medida que añadimos extensiones esto cambia. En el vídeo se explica muy bien cómo empezar a preparar tu entorno de trabajo.

El uso de distintos temas permite cambiar su aspecto acercándolo aún más a nuestras preferencias. Son innumerables los que están disponibles, pero de entrada te recomiendo el uso del tema Monokai para Brackets o alguno de los temas contenidos en el paquete Themes for Brackets. Estos están disponibles también vía el gestor de extensiones.

Una extensión que te ayudará a elegir qué instalar es Extensions Rating, que indica valoraciones de las extensiones disponibles en función del número de descargas y su popularidad.

Este es un listado de extensiones que no debes perderte:

Emmet
Brackets Snippets (by edc)
HTMLHint
Brackets Todo
Special Html Characters
Document outline
RightClickExtended
Brackets Tools
SFtpUpload
Bracket Git
Notes
CanIUse

Será fácil encontrarlas en el gestor de extensiones y conocer más sobre su uso y potencial.

Para terminar de redondear el trabajo con Brackets, te propongo el uso de la fuente de letra Inconsolata. Tan sólo debes añadir ‘Inconsolata’, (con comillas, seguido de una coma) al principio, en la casilla «Tipo de letra» en Preferencias de temas, opción a la que se accede vía «Ver > Temas…»

Si pese a todo lo dicho, Brackets no es lo que estás buscando, te recomiendo que repases esta completa comparativa de editores alternativos.

El cadáver exquisito

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

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

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

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

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

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

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

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

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

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

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

¿Como funciona?

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

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

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

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

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

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

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

Cronómetro en JavaScript

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

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

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

Enunciado

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

Añadiremos los botones:

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

Parar: Detiene el cronómetro.

Continuar: Vuelve a activar el cronómetro.

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

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

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

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

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

Resolución

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

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

Operativa de la aplicación:

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

Desde el punto de vista de la usabilidad:

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

Problemas resueltos:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Enlaces

Ver el código fuente

Referencias:

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.

Modo oscuro en Laravel

JavGuerra — Tue, 16 Aug 2022 00:00:00 GMT

Etiquetas: #laravel, #php, #tema, #css, #javascript, #alpine.js, #tailwind

Basándome en Laravel Jetstream con Livewire, que también incluye Alpine.js y TailwindCSS, en esta entrada muestro como implementar el modo oscuro en nuestras aplicaciones.

El modo oscuro

Cada vez es más frecuente que las aplicaciones se desarrollen pensando en implementar un modo oscuro (dark mode) que permita descasar la vista del usuario con colores más apagados. La posibilidad de implementar estos modos con los frameworks de CSS como Tailwindcss han ayudado a que esto sea así.

Básicamente, el modo oscuro de Tailwindcss consiste en implementar clases con el prefijo dark: delante. Ej.:

<div class="bg-white dark:bg-black">

Esto cambiará el fondo de nuestra página si el modo oscuro está activo.

Para activarlo, es suficiente con indicarlo añadiendo la clase dark en la etiqueta <html>:

<html class="dark">

Mediante JavaScript podemos añadir o quitar esta clase y conseguir así que nuestra aplicación cambie el fondo del ejemplo anterior:

document.documentElement.classList.add('dark');
document.documentElement.classList.remove('dark')

El document.documentElement hace referencia al elemento raíz del documento, en este caso, la etiqueta <html>.

Pasos

Para poder mostrar el modo correctamente y cambiar de modo de forma interactiva, debemos configurar Tailwind en Laravel, necesitaremos un interruptor (switch) en nuestra aplicación, y querremos también guardar nuestra opción del tema elegido para que se muestre correctamente la próxima vez que accedamos a la aplicación. para esto último me voy a servir de local.Storage. Esto implica lo siguiente:

Indicar a Tailwind que debe usar el cambio de modo oscuro manual.
Comprobar el modo correspondiente al inicio en local.Storage.
Guardar el tema la primera vez comprobando el modo del sistema al inicio.
Mostrar los botones para cambiar de modo.
Cambiar entre modo claro y modo oscuro y viceversa.

Indicar a Tailwind que debe usar el cambio de modo oscuro manual

Por defecto, Tailwindcss en Laravel está preparado para implementar el tema de las preferencias de modo en el sistema operativo. Si quiero cambiar de modo manualmente (switch) en lugar de depender de la preferencia del sistema, debo indicarlo en el fichero tailwind.config.js mediante darkMode: 'class':

module.exports = {
  darkMode: 'class',
  // ...
}

Ahora, en vez de escuchar las preferencias de prefers-color-scheme del CSS, Tailwind usará el modo oscuro sólo si este está indicado en ` sin tomar en cuenta las preferencias del sistema.

Comprobar el modo correspondiente al inicio en local.Storage

Cuando elegimos uno de los dos modos, ya sea el modo claro o el modo oscuro para nuestra aplicación, podemos guardarlo en local.Storage para así recuperarlo la siguiente vez que abramos nuestra aplicación. Podemos guardar true o 1 para indicar que el modo oscuro está activo o bien false o 0 para indicar lo contrario. En mi caso usaré 1 y 0.

En el siguiente código en javascript compruebo el valor de localStorage.dark, y en función de su contenido, añado o quito la clase darka la etiqueta <html>.

if (localStorage.dark == 1) {
    document.documentElement.classList.add('dark');
} else {
    document.documentElement.classList.remove('dark');
}

Tener este dato guardado nos permite, además de cambiar de modo, mostrar el icono correcto para intercambiar de modo. Pongamos que usamos un icono de media Luna para indicar el cambio al modo oscuro y un icono de Sol para indicar el cambio al modo claro. Si iniciamos la aplicación en modo oscuro, el icono a mostrar debe ser el Sol, y al contrario si iniciamos en el modo claro.

El lugar adecuado para este código es el fichero en la ruta /resources/js/app.js que es llamado desde el fichero en la ruta /resources/views/layouts/app.blade.phppero dejándolo en app.jsse produce un molesto efecto de pestañeo (flicker) que nos muestra primero la página en modo claro, y seguidamente hace el cambio al modo oscuro. Así pues, lo incluyo en el fichero app.blade.phpen el head debajo del title pero antes de los links, de la siguiente forma:

<script>
    if (localStorage.dark == 1) {
        document.documentElement.classList.add('dark');
    } else {
        document.documentElement.classList.remove('dark');
    }
</script>

Guardar el tema la primera vez comprobando el modo del sistema al inicio

La primera vez que abrimos nuestra aplicación no tenemos guardado ningún valor en local.Storage, así que conviene guardar el valor en función de algún criterio. Por defecto podría indicar que le modo oscuro está desactivado, pero ya que tengo la opción de conocer cuál es el tema del sistema operativo, ¿por qué no aprovecharlo? el siguiente código completa esta opción:

<script>
    if (localStorage.dark == 1 || (!('dark' in localStorage)
    && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
        localStorage.dark = 1;
        document.documentElement.classList.add('dark');
    } else {
        localStorage.dark = 0;
        document.documentElement.classList.remove('dark');
    }
</script>

Si existe el valor dark en local.Storage, o si no existe pero las preferencias del sistema prefers-color-scheme indican que tenemos activado el modo oscuro, entonces guardo en local.Storage el valor de dark = 1 y añado la clase dark a la etiqueta <html>. En caso contrario, guardo el valor dark = 0 en local.Storage y quito la clase dark de la etiqueta <html> ya que no tendremos activo el modo oscuro previamente, ni en local.Storage ni en el sistema operativo.

Mostrar los botones para cambiar de modo

En esta parte vamos a ver cómo usar Alpine.js para mostrar u ocultar un botón en vez de otro. el siguiente código debemos incluirlo en el fichero en la ruta /resources/views/navigation-menu-blade.php que contiene el menú en la parte superior del tema de la aplicación que trae por defecto Laravel Jetstream. Debemos incluirlo además dos veces, una para el modo responsive y otra para el modo normal.

<!-- Selector de tema oscuro -->
<div class="mr-2">
    <svg id="moon" class="setMode h-4 w-4 text-gray-400 hover:text-gray-500 cursor-pointer" fill="none" @click="toggle" :class="{'block': !show, 'hidden': show}" x-cloak xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
    </svg>
    <svg id="sun" class="setMode h-5 w-5 text-yellow-200 hover:text-yellow-300 cursor-pointer" fill="none" @click="toggle" :class="{'hidden': !show, 'block': show}" x-cloak xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
    </svg>
</div>

el <div> contiene dos SVG que corresponden a los iconos de la Luna y el Sol, pero incluyen algunas etiquetas de Alpine.js.

Con :class="{'block': !show, 'hidden': show} se mostrará u ocultará el SVG en función del valor de la variable show. Para definir su valor inicial, en la etiqueta <nav> de la línea 1, incluyo:

x-data="{ open: false, show: localStorage.dark == 1 ? true: false, toggle() { this.show = !this.show } }"

Con x-data inicializo variables. Lo hago pasando un objeto JavaScript con algunos valores. En este caso, el open: false del principio ya estaba ahí, pues laravel lo usa para desplegar o no el menú de usuario. Veamos el resto.

Con show: localStorage.dark == 1 ? true: false indico el valor de show en función de lo que indica local.Storage. Si local.Storage es 1 entonces show será true, y se mostrará el icono del Sol, según indica {'hidden': !show, 'block': show} del segundo SVG, ('hidden' false, 'block' true).

Para saber más sobre la directiva :class, consultar: x-bind en Tailwind.js.

Con la directiva @click="toggle" llamo a la función toggle() { this.show = !this.show } definida en el x-data cuando se hace clic sobre el icono. Esto sólo cambiará el icono haciendo que la variable show alterne su valor entre true y false.

Cambiar entre modo claro y modo oscuro y viceversa

Hemos visto cómo cambiar entre el icono para el modo claro y oscuro y viceversa, pero lo que queremos es que se cambie también el modo en toda la aplicación. Para ello debemos gestionar eventos asociados a los iconos de tal forma que al hacer clic en ellos no sólo cambien el icono sino que añadan o quiten la etiqueta dark del <html> y de esta forma hacer el cambio de modo efectivo. para conseguirlo, incluyo el siguiente código en el fichero en la ruta /resources/js/app.js:

document.querySelectorAll(".setMode").forEach(item =>
item.addEventListener("click", () => {
        if (localStorage.dark == 1) {
            localStorage.dark = 0;
            document.documentElement.classList.remove('dark');
        } else {
            localStorage.dark = 1;
            document.documentElement.classList.add('dark');
        }
    })
)

Con querySelectorAll(".setMode") busco todas las clases setMode en la página. De esta forma localizo a todos los SVG que están implicados con los iconos de cambio de modo (ver que cada SVG incluye class="setMode ...), y a cada uno de ellos le añado un evento click de tal forma que, al hacer clic sobre estos iconos, realice la siguiente comprobación: Si el valor de localStorage.dark == 1 guardar el valor 0 en local.Storage y quitar el modo oscuro con document.documentElement.classList.remove('dark'). en caso contrario, guardar el valor 1 en local.Storage y poner el modo oscuro con document.documentElement.classList.add('dark').

Guarda todo y no olvides ejecutar npm run dev desde el terminal para que los cambios funciones correctamente.

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

Ordenando resultados en React

JavGuerra — Wed, 23 Nov 2022 00:00:00 GMT

Etiquetas: #react, #javascript

Cuando mostramos un listado con muchos resultados en nuestra web sin un criterio de ordenación, el usuario debe encontrar la información que necesita, lo que requiere tiempo y esfuerzo por su parte. Para atajar este problema podemos incluir un campo de búsqueda, pero aún así, la información aparecerá desordenada. En esta entrada veremos como seleccionar la ordenación de listados de menor a mayor y viceversa, y cómo hacerlo por varios criterios de ordenación alternativamente en nuestra aplicación React.

El lector deberá conocer el funcionamiento básico de React y JavaScript para poder seguir adecuadamente esta entrada.

Esta entrada está basada en el proyecto «Tienda 8 bits», y puedes ver su funcionamiento en la página del proyecto.

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

El ejemplo

En nuestra web, queremos listar una serie de fichas de productos por tres criterios, modelo de producto, precio y año de fabricación, y queremos hacerlo alternativamente, es decir, por uno de entre esos tres criterios de ordenación cada vez.

La ordenación se hará de menor a mayor, osea, en orden ascendente, y de mayor a menor, en orden descendente. Tomaremos la información de las fichas desde, por ejemplo, una API que debe estar preparada para ello, es decir, que la API pueda devolver los datos solicitados según los parámetros de ordenación necesarios. Pero no me pararé a mostrarlo en esta entrada.

Los filtros, en la página, tendrán un aspecto parecido a lo que se ve en la imagen:

En este caso, el primer filtro de ordenación, el de modelo, es el que está seleccionado, y la ordenación la realiza en orden ascendente. Los otros dos filtros no están activos.

La aplicación

Para este ejercicio, en la página App.jsx o la que usemos para llamar a la ordenación, voy a definir dos useState, uno que contendrá los filtros de ordenación en un objeto y otro que contendrá el número de la página actual de los resultados paginados (grupos de resultados) que vamos a mostrar.

const [sortData, setSortData] = useState({ sortmodel: 1 });
const [currentPage, setCurrentPage] = useState(1);

En una aplicación completa deberemos incluir otros useState para, por ejemplo, guardar los datos obtenidos de la consulta a la API, o los criterios de búsqueda de datos… En este ejercicio me limito a incluir sólo los que son operativos para la explicación.

Dentro del objeto que tendremos en sortData iremos incluyendo, alternativamente, sortmodel para filtrar por el modelo, sortprice para filtrar por el precio, o sortyear para filtrar por el año. Sólo uno de ellos a la vez. Los valores posibles para cada una de estas propiedades de filtrado serán 1 y -1, siendo 1 el valor que indica ordenación ascendente, y -1 el valor que indica ordenación descendente, que son los valores que acepta nuestra API. Inicalizamos el useState sortData con { sortmodel: 1 }.

useEffect(() => {
    const { sortmodel, sortprice, sortyear } = sortData;

    // Preparar los datos para la consulta a la API
    // Realizar la consulta a la API y obtener (set) los resultados
    
}, [sortData, currentPage]);

Cuando el objeto almacenado en sortData cambie por la interacción del usuario, al seleccionar mediante un clic otro criterio de ordenación, entrará en juego la función setSortData, y el contenido dentro de useEffect se ejecutará, pasando los datos de filtrado sortData a la petición a la API mediante fetch, axios… Los datos deben ser preparados antes de hacer la consulta, y para ello, deberemos comprobar cual de los tres filtros (sortmodel, sortprice, sortyear) está seleccionado y cuales no (undefined), e incluir el filtro indicado en la consulta.

El componente que va a permitir seleccionar el tipo de ordenación se llama Sort, y esta sería la llamada para renderizarlo en la página:

return (
    <Sort
        sortData={sortData}
        setSortData={setSortData}
        setCurrentPage={setCurrentPage}
    />
);

Por props le hacemos llegar al componente Sort los datos de filtrado (sortData), la función que establece (set) el filtrado (setSortData) y la función que establece la página actual (setCurrentPage). setCurrentPage es necesario porque cada vez que cambie el filtrado deberemos establecer la página 1 como la página actual, de otra forma los datos obtenidos con el nuevo filtrado se mostrarían confusos para el usuario.

El componente Sort

El código del componente será el siguiente:

import SortIcon from "./SortIcon";

const Sort = ({sortData, setSortData, setCurrentPage}) => {

  const { sortmodel, sortprice, sortyear } = sortData;

  const handleIcon = (sortName, order) => {
    setSortData({ [sortName]: order ? -order : 1 });
    setCurrentPage(1);
  };

  return (
    <ul>
      <li onClick={() => handleIcon("sortmodel", sortmodel)}>
        Modelo <SortIcon order={sortmodel} />
      </li>

      <li onClick={() => handleIcon("sortprice", sortprice)}>
        Precio <SortIcon order={sortprice} />
      </li>

      <li onClick={() => handleIcon("sortyear", sortyear)}>
        Año <SortIcon order={sortyear} />
      </li>
    </ul>
  );
}

export default Sort;

Primeramente importo el componente SortIcon que luego veremos. Éste componente se encargará de mostrar los iconos de ordenación de cada uno de los tres criterios por los que vamos a ordenar el listado.

Como dije, el componente Sort recibe por props tres parámetros {sortData, setSortData, setCurrentPage} con el dato del tipo de ordenación elegido, la función para fijar la nueva ordenación y la función para fijar la página actual de la paginación de resultados.

Lo primero que hago es obtener los datos del objeto sortData recibido por props. Por supuesto, sólo uno de los tres datos va a llegar con un valor. Los otros dos, que no son el criterio de filtrado seleccionado, tendrán valor undefined.

La función handleIcon será la encargada de efectuar el cambio del filtro de ordenación. Y a cada sortIcon, en el renderizado, le paso el valor de order, que contiene el valor de ordenación del filtrado (1 ó -1) que le corresponde.

Al hacer click en cualquiera de los tres criterios de ordenación en la página, la función handleIcon dentro de onClick={() => handleIcon("nombre_del_filtro", variable_de_ordenación)} se ejecuta, con los parámetros "nombre_del_filtro" y variable_de_ordenación, lo que permite hacer el cambio en la ordenación, disparando el useEffect de nuestra aplicación que vimos antes, provocando que los productos listados se actualicen con la nueva ordenación mediante una nueva consulta a la API.

La función handleIcon

Aquí es donde se lleva a cabo el cambio de filtrado.

const handleIcon = (sortName, order) => {
    setSortData({ [sortName]: order ? -order : 1 });
    setCurrentPage(1);
};

La función recibe dos parámetros, sortName, con el nombre del filtro seleccionado en función del icono (SortIcon) en el que se haga clic, y order, con el valor de ordenación de ese filtro (1 ó -1).

Con la función setSortData, que recibí por props, voy a fijar el criterio de ordenación y su valor.

Con [sortName]: dentro del objeto que voy a pasar a setSortData para cambiar sortData indico que la propiedad se tiene que llamar como el nombre del filtro recibido en sortName (que puede ser uno de estos tres: “sortmodel”, “sortprice” o “sortyear”). Con los corchetes consigo que el texto recibido sea el nombre de la propiedad.

Con order ? -order : 1 determino el valor de la propiedad del objeto que voy a pasar a setSortData. Si el valor de order existe, es decir no es undefined, y por tanto es el criterio de ordenación actual, su valor ahora será el valor alternativo (positivo o negativo) al que ya tiene. Si el valor era 1, ahora será -1. Si era -1, pasará a ser 1. Y en caso de que el valor de order fuera undefined, es decir, que no fuese este el filtro por el que estábamos filtrando antes, se establece su valor a 1.

Como cada vez que empleo setSortData defino sólo un filtro de ordenación, el resto de filtros tendrá un valor undefined cuando se renderizen en el componente Sort.

Con setCurrentPage(1) fijo la página de la paginación de resultados a 1.

Con esta simple función puedo entonces, como dije, seleccionar el filtrado entre uno de los tres filtros posibles, y establecer el criterio de ordenación (ascendente o descendente) del filtro seleccionado.

El componente SortIcon

Este componente es el encargado de mostrar el icono de estado de cada uno de los tres criterios de ordenación en la página.

const SortIcon = ({order}) => {

  const d = !order
    ? "M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9"
    : order === 1
      ? "M3 4.5h14.25M3 9h9.75M3 13.5h5.25m5.25-.75L17.25 9m0 0L21 12.75M17.25 9v12"
      : "M3 4.5h14.25M3 9h9.75M3 13.5h9.75m4.5-4.5v12m0 0l-3.75-3.75M17.25 21L21 17.25";

  return (
    <svg xmlns="http://www.w3.org/2000/svg" className="icon" fill="none"
      viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
      <path strokeLinecap="round" strokeLinejoin="round" d={d} />
    </svg>
  );
}

export default SortIcon;

Por props, SortIcon recibe el parámetro order.

En el renderizado lo que hago es dibujar el icono SVG en función del valor de order, que puede ser: 1, -1 y undefined. Para elegir que icono mostrar, cambio el valor de la propiedad d de la imagen SVG que pinta el icono. La propiedad d es la única que cambia en los tres iconos elegidos, el de ordenación ascendente (1), descendente (-1) y no seleccionado (undefined), así que utilizo el mismo código SVG para los tres iconos, y cambio sólo el valor de d en función de su estatus (order).

Con el operador condicional ternario compruebo si order es undefined (!order) y si es así, asigno a d los datos para pintar el icono de “no seleccionado”. En caso contrario, hago otra comprobación con otro operador condicional ternario, esta vez para conocer si el icono a dibujar es el de ordenación ascendente o descendente, y asignar a d los datos correspondientes a cada icono.

Los iconos mostrados en la captura de este ejemplo corresponden a la librería Heroicons, descargados en su versión JSX.

En resumen

A partir de la interacción del usuario, y gracias al useEffect que se ejecuta cuando se detecta el cambio, se ha establecido un criterio de ordenación diferente, modificado el aspecto de los botones según este nuevo criterio y, como consecuencia, se ha obtenido un listado actualizado de productos ordenados a través de la API preparada para ello.

Para lograrlo, se han creado dos estados (sortData y currentPage) y un componente Sort que recibe sortData, setSortData y setCurrentPage. Este componente detecta los clics, cambia el estado de la ordenación en sortData mediante la función handleIcon (activando solo un filtro cada vez y alternando entre ascendente y descendente), luego vuelve a la página 1 con setCurrentPage(1) y muestra el icono apropiado para cada filtro usando el componente SortIcon.

Tomando todo esto como referencia, ya puedes hacer tus propios filtros de ordenación para tu nueva aplicación React.

Enlaces

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

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

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:

Conceptos Full Stack Web Developer

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

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

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

Conceptos FSWD

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

La página

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

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

14 características destacables de esta página web

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

Acceder a la página web

Buscaminas en JavaScript

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

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

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

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

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

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

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

¿Te apetece una partidita?

Ver el codigo fuente en Github.

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

Carousel con Bootstrap

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

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

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

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

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

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

Summer Quiz

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

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

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

El juego

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

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

Enunciado

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

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

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

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

Características destacables

Operativa de la aplicación

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

Usabilidad

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

Enlaces

Tienda 8 bits

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

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

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

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

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

Video

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

Descripción técnica

Back end

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

Características destacadas de la API:

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

Front end

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

Características destacadas de la App:

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

Fuentes

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

Licencias

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

Acceder a la aplicación

Enlaces

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

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.