Códice | Entradas sobre «css»

wysiwyg.css

JavGuerra — Wed, 27 Apr 2022 00:00:00 GMT

Etiquetas: #css, #html, #markdown, #herramienta

En ocasiones debemos presentar pequeñas páginas web a las que no merece la pena dedicarles tiempo de maquetación con CSS, como páginas para mostrar ejemplos, ejercicios, etc. pero a las que queremos darle una presentación básica que nos muestre el contenido algo más pulido que con los estilos por defecto del navegador.

wysiwyg.css de Jeremy Thomas es un fichero .css con una sola clase llamada «.wysiwyg» (What You See Is What You Get) que lo hace por nosotros. Su uso es sencillo, descargamos el fichero wysiwyg.css de la página del proyecto, lo enlazamos en el head de nuestra página, y por último creamos un div que envuelva todo aquel contenido de la página que queramos que se vea afectado por los cambios de estilo de la clase «.wysiwyg», o incluso toda la página, de principio a fin.

<body>
    <div class="wysiwyg">
        <!-- Mi HTML -->
    </div>
</body>

La clase .wysiwyg define estilos para cabeceras, párrafos, listas, tablas, bloques de código, enlaces… Al aplicarla, todo el contenido dentro del div se mostrará con los estilos definidos en ella. La página de este proyecto es un ejemplo de uso de esa clase.

el proyecto en Github también permite descargarnos un fichero .scss sobre el que realizar cambios en los valores por defecto de la clase .wysiwyg antes de transpilarlo a .css.

Algunas cosas que podemos cambiar en el .scss son:

Variables que guardan los colores por defecto
Espaciado
Tipografía
Otros (Todas las opciones de personalización están deshabilitadas inicialmente).

Ir a la página de wysiwyg.css para más información.

Un simple efecto Parallax

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

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

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

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

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

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

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

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

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

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

Mis páginas de ejemplo con este efecto Parallax:

- post

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

Accesibilidad Web

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

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

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

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

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

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

Comprensión del contexto

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Conclusiones

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

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

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

Enlaces de interés:

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

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.

Edición de video

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

Etiquetas: #html, #css, #edición, #video, #herramienta

Esta simple edición de video que preparé para la asignatura de Diseño de Interfaces Web de FPGS. de Desarrollo de Aplicaciones Web, no es, desde luego, una obra de arte, ya que incluye filtros de video sin demasiado sentido, tal como pedía el ejercicio, pero ejemplifica el trabajo realizado con una herramienta de edición de video no lineal como es OpenShot Video Editor.

Aquí el resultado:

El ejercicio muestra, no obstante, algunas cuestiones interesantes:

El vídeo hace uso de las etiquetas figure, video y figcaption de HTML5.
Emplea el reproductor de video implícito en el navegador.
Cuenta con subtítulos sincronizados con la reproducción de video en formato vtt.
La página y el vídeo son responsive, adaptándose al tamaño de la ventana del navegador.
El video incluye efectos de imagen, transiciones, música y títulos de crédito.

El video maltratado aquí, corresponde al corto «Big Buck Bunny» realizado con la herramienta 3D Blender. Ambos, el video y la herramienta, son de uso libre.

OpenShot Video Editor es una herramienta de edición libre que merece una entrada a parte más adelante.

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

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

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

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

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.