Exportar un trozo de HTML a una imagen se basa en la facultad de albergar un SVG (Scalable Vector Graphics) en un elemento imagen (IMG). Se usa la API Image(), que es un constructor del elemento imagen, conjuntamente con un Canvas para convertir el SVG en un formato de imagen, como PNG, JPG y otros. Un SVG no es otra cosa que un XML. Y yo empecé a estudiar HTML aprendido primero XHTML que debe ser escrito como XML. Es necesario respetar las reglas XHTML en el trozo de HTML que queremos convertir en imagen, pero no es nada complicado. La imagen adjunta es un archivo PNG que se extrae de un trozo de HTML, como veremos en un ejemplo interactivo en ese tama.

En este tema intentaré explicar cómo se hace, pues de paso recordaremos cosas que se relacionan como SVG, XML, XHTML, HTML-5, Base64, Canvas e Image. Y otras cosas relacionadas con la serialización de bytes, manejando Base64 con el uso de los métodos encodeURIComponent(), btoa() y atob(). O bien con TextEncoder y TextDecoder, donde se usa el array tipado (Typed Array) Uint8Array, que junto a Blob y objetos URL veremos también para la descarga de archivos, algo que explicaremos en el último apartado.

En este tema veremos las clases del módulo Math que nos permiten escribir HTML y CSS suficiente para presentar visualmente una fórmula matemática. Y, adicionalmente, poder extraerla como una expresión en lenguaje natural válida para usarla en aplicaciones como Wolfram Alpha.

En la imagen puede ver como presentamos la raíz cuadrada usando el símbolo UNICODE "√". El estilo en forma de clases con un guion bajo inicial y dos letras aplicarán lo necesario para incluir la línea superior que abarca la raíz, algo que el simple caracter "√" no incluye. En lenguaje natural la extraemos como sqrt(n), expresión que podemos usar en Wolfram Alpha y otras aplicaciones. Empecemos por listar las clases disponibles con la versión actual.

Desde hace tiempo he necesitado presentar fórmulas matemáticas en estas páginas web. Aunque existe la extensión MathML, de la que luego hablaremos, HTML ofrece pocas cosas para hacerlo directamente. He venido usando algunos recursos como los elementos SUB y SUP. Por ejemplo x²+1, con el código <var>x<sup>2</sup>+1</var>. El elemento VAR tiene fuente Georgia y estilo itálica para intentar lograr una apariencia de fórmula matemática. Sin embargo, escribir fracciones, raíces o cosas más complejas con solo estos recursos y con una presentación aceptable no es fácil.

Ahora, con la serie de temas que exponen la Combinatoria con recursivos, he implementado los módulos JavaScript Math y CopyMath. En la imagen puede ver una fórmula matemática escrita en HTML directamente en esta página, con estilo CSS. Antes de entrar a explicar estos módulos veamos que otros recursos existen y sus ventajas o inconvenientes.

Los posicionamientos CSS que conocemos hace tiempo son static, relative, absolute y fixed. Ahora se introduce el nuevo posicionamiento sticky. El documento oficial W3C Sticky positioning está en fase de borrador (Working Draft) con fecha 01/09/2022. A la fecha en la que edito esta página (diciembre 2022) ya es soportado por todos los navegadores.

Una aplicación práctica para sticky es fijar las filas o columnas cabeceras de una tabla. En la Figura vemos una tabla cuyo ancho y alto es mayor que el contenedor donde se ubica y donde hemos fijado la primera fila y la primera columna. Actuando sobre las barras de desplazamiento (scroll) del contenedor exterior veremos que la primera fila permanece fija respecto al scroll vertical. Y que la primera columna permanece fija respecto al scroll horizontal.

Un componente web es la programación de una utilidad para insertar en una página y reutilizar en otras páginas. Cabe la posibilidad de que se inserten múltiples instancias del mismo componente en una página. Pueden programarse usando POO (Programación Orientada a Objetos). Pero usando la capacidad de encapsulamiento de los closures en JavaScript podemos montar módulos que consigan los mismos objetivos que los originados con POO.

Supongamos que hemos de realizar un componente como el de la imagen. Se trata de insertar en una página web una o más instancias de una interfaz de usuario que lleven a cabo operaciones usando los valores que el usuario introduce en los elementos de control. Usaremos este ejemplo muy simple para exponer los detalles de implementación de módulos de múltiples instancias sin usar POO.

Publiqué el componente tabla de datos en agosto 2019. Se trataba de un módulo JavaScript para crear una tabla de datos para uso general, especialmente como componente de una interfaz de usuario cuando tenemos que presentar o recibir datos tabulados. Al crear una tabla de datos podíamos pasar el argumento lang con los valores "en" para idioma inglés o "es" para español. Este último es el valor por defecto en caso de que no se especifique idioma. El idioma se aplica al panel de acciones y a la barra de navegación inferior en caso de que se muestre. Y también a los tool tip text o textos alternativos de los botones.

La mejora que presentamos ahora es poder incorporar más idiomas en el momento de crear la tabla. En la imagen puede ver una captura de un ejemplo que se expone en el tema, observándose que hemos agregado francés (FR) y alemán (DE). Además podemos traducir también los títulos de las columnas y el título de la tabla.

El módulo JavaScript data-table.js es un componente para crear una tabla de datos para uso general, especialmente como componente de una interfaz de usuario cuando tenemos que presentar o recibir datos tabulados. Partiendo de los datos en un Array, se crea una tabla HTML con los datos en campos de texto <input> y con selectores de filas y columnas. Estos son botones que abren un panel con acciones para modificar los datos. Una última fila con el botón "✱" está presente para insertar una nueva fila. Inicialmente puede configurarse la tabla para permitir ediciones o bien que sea sólo de lectura.

Se agregan accesores de datos (getter y setter) para que sea posible adjudicar un Array u obtenerlo directamente de la tabla usando su propiedad value, igual que como haríamos con un <input>. Otras ventajas son la posibilidad de aplicar estilo CSS a la tabla o a las columnas, validar los datos de entrada y dotar de un atributo onchange que ejecute algo cuando se produzca un cambio en los valores. Si se incluye la tabla dentro de un <form>, se enviarán sus valores al servidor como campos de formulario.

Desde hace algunos meses los navegadores vienen advirtiendo al usuario que una página no es segura si no está bajo el protocolo HTTPS. Por ahora se limita a páginas como las que recopilan contraseñas. Pero más adelante marcaran como no seguras todas las páginas que no usen HTTPS. Por otro lado el proveedor donde tengo alojado este sitio ya está ofreciendo HTTPS incluido en el coste del paquete. Así que no hay excusa para no llevarlo a cabo.

En este tema comento los pasos mínimos necesarios para implementar esta y otras mejoras. Una importante tiene que ver con la reducción del tamaño de los documentos HTML y JS, con el objetivo de reducir el tiempo extra en la carga que supone la conexión HTTPS.

Otra utilidad es ofrecer al usuario la posibilidad de configurar aspectos visuales, como maximizar el ancho de pantalla y agrandar el tamaño del texto. La configuración se almacena en una cookie, con lo que conseguimos aplicarla a todas las peticiones de páginas mientras el navegador esté abierto.

Los SVG (Scalable Vector Graphics) son los Gráficos vectoriales escalables. Se estructuran en un documento XML para representar formas gráficas en dos dimensiones. Tienen un uso muy diverso y especialmente me interesa incorporarlos a este sitio como iconos.

Anteriormente venía utilizando los Sprites CSS para este cometido. Pero los SVG tienen algunas ventajas adicionales, especialmente que se incorporan al DOM como un elemento más. Así es posible darles estilo CSS adicional, respondiendo al tamaño de la fuente de texto o al color de primer plano, por ejemplo. Los Sprites, sin embargo, no dejan de ser imágenes, por lo que no hay muchas formas de interaccionar con ellas. Al incrementar su tamaño perderán resolución. Y no es posible cambiarles el color.

JavaScript es débilmente tipado. Esto puede ser una desventaja cuando ejecutamos una función, pues no podemos asegurar que los tipos de los valores que se reciban sean los esperados. Se soluciona incorporando controles con typeof para ver si el argumento es del tipo esperado. No deja de ser un trabajo y código adicional que tenemos que incorporar en cada función y para cada paramétro que queramos verificar. Es una pena que JavaScript no tenga algo como si tiene TypeScript, donde la declaración function fun(a: number, b: string) obliga a que los argumentos tengan que ser de esos tipos.

Pero con ES6 y los parámetros por defecto o predeterminados podemos construirnos una función verificadora que lleve a cabo esa comprobación de forma automática. Para ello usaremos el código de la función obtenido con fun.toString(), parseando una cabecera como fun(a="", b=0) para deducir que los parámetros son de tipos string y number respectivamente, lo que se deduce de los tipos de los valores predeterminados. Con ello construiremos un objeto de tipos como el de la imagen, que nos servirá para verificar los tipos de los argumentos.