Códice | Entradas sobre «usabilidad»

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

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.