Revista digital Matemática, Educación e Internet https://revistas.tec.ac.cr/index.php/matematica Vol 26, No 1. Agosto, 2025 - Febrero, 2026

ISSN 1659 -0643 DOI: XXX

Walter Mora-Flores
wmora2@gmail.com
Investigador independiente
Costa Rica

Resumen:  Este documento presenta una plantilla configurada para convertir documentos LaTeX en páginas web interactivas utilizando Make4ht. Se abordan temas como la configuración de Make4ht, la conversión de entornos complejos a imágenes SVG, y con la asistencia de la IA, la inclusión de actividades interactivas con HTML, JavaScript y CSS, y la integración de elementos multimedia como applets de GeoGebra y videos de YouTube. El enfoque bimodal permite generar tanto PDF como HTML, aprovechando las ventajas de cada formato: el PDF para impresión y citación formal, y el HTML para accesibilidad e interactividad en dispositivos digitales.

Palabras Clave: Palabras clave: Make4ht, LaTeX, HTML, interactividad, JavaScript, IA

Keywords: Make4ht, LaTeX, HTML, interactivity, JavaScript, AI

1. Introducción

Un documento .tex se puede compilar de varias maneras. En nuestro caso, necesitamos una salida bimodal: un documento PDF y un documento HTML (para añadir contenido interactivo).

El formato HTML ofrece accesibilidad, interactividad y un mayor alcance en el entorno digital actual. Generar el HTML desde un archivo LaTeX permite aplicar revisiones y/o modificaciones al archivo .tex sin necesidad de tener que volver a editar manualmente la salida HTML.

Mientras el formato PDF es ideal para impresión y citación formal, el HTML se adapta a cualquier dispositivo y permite integrar elementos dinámicos como visualizaciones, actividades interactivas y contenido multimedia. Este enfoque promueve la ciencia abierta y la educación digital al hacer el contenido más flexible y accesible.

Para obtener un documento PDF, compilamos con PDFLaTeX. Para traducir el documento .tex y obtener un sitio web, con su archivo de estilo .css, compilamos con Make4ht. El archivo .css se modifica y/o se amplia con un archivo personalizado config.cfg. En la Figura 1 se muestra el proceso de manera simplificada.

La plantilla .tex (en la que esta basada este documento) está implementado con código que ejecutan tanto PdfLaTeX como Make4ht. Pero hay partes en que solo nos interesa una salida HTML y otras en las que solo nos interesa la salida PDF, para esto, además del texto común, usamos comandos que PDFLaTeX ignora y que Make4ht sí compila y viceversa.

Make4ht se enfoca en la estructura del contenido y, si no hay errores de compilación fatales, entrega un archivo HTML correcto pero con un diseño simple. Este artículo es un ejemplo (y al mismo tiempo es una plantilla) de cómo agregar diseño web moderno y responsivo, de manera manual, a través de un archivo de configuración.

Este documento considera las tareas comunes en la implementación de material didáctico en matemáticas y agrega un archivo de configuración para la salida moderna y correcta en HTML. La manera de configurar Make4ht para lograr este objetivo se describe en la sección 7.

¿Qué nivel necesitamos? Para usar la plantilla, se requiere ser un usuario normal de LaTeX y posiblemente conocer cosas básicas de HTML y CSS (sino, podríamos empezar, por ejemplo, con [7] y [8]). La parte interactiva requiere un conocimiento básico de HTML, CSS y JavaScript.

Además, si queremos modificar la plantilla, necesitamos saber configurar Make4ht. Las lecturas recomendads son la sección 7. y la documentacion de Make4ht, [1].

La IA se puede usar como asistente para generar código LaTeX, código de estilo CSS y scripts interactivos en JavaScript, con peticiones en lenguaje natural. Pero en el estado actual de la IA, para tareas más complejas, hay un aumento significativo en la productividad si hacemos peticiones muy específicas con modelos de código y en lenguaje técnico preciso. También debemos estar atentos a las repuestas de la IA, porque además de algún error de lógica, ocasionalmente nos da respuestas basadas en información desactualizada (lo cual nos genera errores de compilación), o al no ser adecuadamente específicos, nos puede dar código fuera de contexto e innecesariamente complicado.

2. Una plantilla.tex configurada

Tenemos un comprimido plantilla.zip que viene con un archivo plantilla.tex, con figuras y un archivo de configración config.cdf (entre otras cosas) que PDFLaTeX compila bien y Make4ht traduce bien a HTML.

Asumimos que tenemos una instalación TeX completa y actualizada al 2025 (las más populares son TeXLive, MikeTeX y MacTeX). Esta actualización ya viene con Make4ht. Esto es necesario porque varias cosas funcionan bien con la última actualización, sino podríamos tener errores de compilación o comportamientos inesperados.

En el código 2.1 podemos ver el inicio de la plantilla.tex

\documentclass[fleqn,oneside]{article} % Puede usar también book, etc. 
  \input{Paquetes/WebPreambuloyEntornos.tex} 
  \input{Paquetes/ComandosdelUsuario.tex} 
  \title{El título} 
  \author{El autor} 
  \date{} 
  \ifdefined\HCode\Configure{HEAD}{% Insertar en el html<hedad></head> 
        \HCode{<link rel="stylesheet" href="css/toc-toggle.css" />} 
  }\fi 
% 
\begin{document} 
\maketitle 
\solopdf{% PDFLaTeX->pdf 
             \tableofcontents 
        } 
\solomk{ % Make4ht -> html 
             \webtableofcontents % Botón para el Contenido 
       } 
\section{Introducción} 
%... código LaTeX usual... 
\end{document}

Podemos agregar paquetes y comandos personales, en el archivo ComandosdelUsuario.tex que está en la carpeta "Paquetes". Make4ht soporta una lista amplia de paquetes esenciales: Incluye los paquetes que usualmente usamos. Mantenga los comandos personales "simples".

Hay varios paquetes como Nicematrix, Polynomial, hhline, etc. que no son soportados por Make4ht. Si tenemos código con paquetes no soportados, como veremos más abajo, usamos el comando \solopdf{...} para que Make4ht los ignore y, en el .html, se pueden incluir imágenes o podemos usar código equivalente (simplificado) en .tex, que sea soportado por Make4ht y usar el comando \solomk{...} (Make4ht lo compila pero PDFLaTeX lo ignora), o insertar directamente un equivalente en código HTML, con el comando \insertarhtml{...}. Use la IA como asistente, es buena idea.

La estructura de la carpeta de trabajo se muestra en la Figura 2.

1.

La carpeta images contiene figuras .png, .svg y .pdf. Para HTML son preferibles los formatos vectoriales como SVG (o sino PNG con buena resolución). Esto se puede personalizar un poco, por ejemplo usando Inkscape.

Algunas figuras generadas con código LaTeX las podemos convertir, de manera automática, con el paquete ltximg [6]. Lo vemos en el apéndice 3.

2.

La carpeta JS contiene los scripts JavaScript (interactivos)

3.

La carpeta CSS contiene archivos de estilo .css personalizados y el archivo plantilla.css que genera automáticamente Make4ht

4.

La carpeta Paquetes contiene el archivo WebPreambuloyEntornos.tex y el archivo
ComandosdelUsuario.tex

5.

La carpeta SitioWeb recibe, con la compilación Make4ht , los archivos plantilla.css y plantilla.html (si la carpeta no está, entonces la crea). También recibe algunas figuras necesarias que Make4ht genera.

6.

El archivo config.cfg es el archivo de configuración para este documento, mayormente habilita, deshabilita o modifica entornos creados por Make4ht e inserta código CSS para el diseño web de la salida HTML. Este archivo ya viene implementado para esta plantilla. Para comprender y/o modificar algo, es necesario leer la sección 7.

7.

El archivo plantilla.tex es una parte de este documento, solo con cosas relevantes, para editar un documento propio. El archivo iplantilla.tex viene con código de las actividades interactivas.

2.1 Compilar esta plantilla

Make4ht ofrece varias opciones de compilación a través de un archivo de configuración y/o con opciones entre comillas. En este documento mayormente compilamos en la terminal, la línea de compilación se muestra en la el código 2.2

 make4ht  --utf8 -c config.cfg  -f html5   -d SitioWeb  plantilla.tex "mathml,svg,Gin-dim" 
 % opción limpiar:  agregar -m clean (y quitar después) 
 % opción debug:    agregar -a debug 
 

1.

La opción -c config.cfg "inyecta" nuestro código, configuración de entornos y código de estilo CSS, en el archivo plantilla.css, de tal manera que prevalezca sobre el código CSS que genera Make4ht.

2.

La opción -d SitioWeb inserta en SitioWeb, en la carpeta de trabajo, los archivos .css y HTML (si no está la carpeta, la crea).

make4ht filename.tex "op1,op2,..,optn"

En el capítulo $6$ de [1, Tex4ht (2024)] hay una lista de opciones que se pueden aplicar. Algunas opciones son:

1.

Mathml. Usa MathML para las fórmulas.

2.

Mathjax. Renderiza fórmulas con MathJax. En nuestro caso, esta opción esta incluida en el archivo config.cfg con una configuración adicional.

3.

SVG. Convierte ecuaciones e imágenes a SVG. De acuerdo al sistema (Linux, Windows, macOS) y a las librerías instaladas, las figuras .pdf que se incluyen, se traducen automáticamente a .svg. Sino hay que hacerlo "manualmente".

4.

frames. Añade navegación (tabla de contenidos) con marcos. Por ejemplo, si incluimos secciones, compilamos con
make4ht -l archivo.tex "mathml,svg,frames,1"

5.

footnotes-in. "Footnotes" al final de cada sección. Por ejemplo,
make4ht archivo.tex "3,sec-filename,fn-in

6.

footnotes-at-end. "Footnotes" en una página final. Por ejemplo,
make4ht -f html5 archivo.tex "footnotes-at-end"

7.

split-level=1. Divide el HTML por capítulos. Por ejemplo,
make4ht -f html5 archivo.tex "split-level=1"

8.

section+. Fuerza división por secciones. Por ejemplo,
make4ht -f html5 archivo.tex "section+"

9.

url-enc. Se usa cuando hay url’s con caracteres especiales. Por ejemplo,
make4ht -f html5 archivo.tex "url-enc"

10.

charset=utf-8. Usa UTF-8 para codificación. Por ejemplo,
make4ht -f html5 archivo.tex "charset=utf-8" o make4ht -u -f html5 archivo.tex

11.

table. Mejora las tablas HTML. Por ejemplo,
"make4ht -f html5 archivo.tex "table,longtable"

12.

info. Agrega metadatos.

13.

tidy. Limpia y mejora el HTML final. Por ejemplo,
make4ht -f html5 archivo.tex "tidy"

14.

clean. Elimina archivos auxiliares tras la compilación. Por ejemplo,
make4ht -m clean -f html5 archivo.tex

15.

jats. Salida en XML JATS (para revistas científicas). Por ejemplo,
make4ht -f html5 archivo.tex "jats"

2.11 Errores de compilación

Make4ht compila el archivo .tex con htlatex. Esta compilación usa "motores" como PDFTeX o LuaTeX, y soporta una cantidad suficiente de paquetes básicos. La copilación genera un dvi y agrega etiquetas HTML. La primera fuente de errores de compilación están en el código .tex como es usual. Una vez superada esta etapa, podrían haber errores en la traducción a HTML. Hay que evitar que el HTML se "rompa" (evitar que el DOM quede mal formado). por ejemplo por etiquetas HTML que abren, pero no cierran o caracteres extraños que inyecttan otros paquetes o por fórmulas o tablas muy complejas.

En la compilación con Make4ht, una "advertencia" del tipo

[WARNING] domfilter: DOM parsing of plantilla.html failed:
[WARNING] domfilter: /home/.../ ... nbalanced Tag (/p) [char= ]

significa que la estructura del documento (DOM) se ha roto y la "advertencia" nos dice que una o varias cosas ya no van a salir bien. Lo normal es corregir el problema directamente o hacer modificaciones. Como en cualquier compilación normal, revisamos el .log y el .html, para tratar de aislar el problema y corregirlo.

El archivo de configuración en plantilla.zip ya incluye la configuración de los entornos que usamos, para evitar la mayoría de este tipo de problemas. Pero los errores puede aparecer si incluimos paquetes no soportados, comandos muy complejos o nuevos entornos que no siguen las reglas de configuración. Ver sección 7..

caption. Cuando una macro expansiva (como \caption) contiene comandos con expansión frágil, la pila de parámetros puede desbordarse y aparece el error

! TeX capacity exceeded, sorry ...

Para resolver el problema agregamos el comando \protect antes de los comandos problemáticos (comandos frágiles). Estos comandos puede ser cosas como \tfrac, \cosh o comandos personales (en los que no se ha usado \DeclareRobustCommand). Por ejemplo deberíamos poner (si tuvieramos problemas)

\caption{Texto $ \protect\cosh t $}
\caption{Texto $ \protect\micomando $}

tempa. Un error con algo como "! Undefined control sequence.l... \tempa" ocurre a veces porque hemos inyectado código HTML sin "escapar" caracteres, frecuentemente se refiere al caracter # en código \Css{} o \HCode{}. Por ejemplo

\Css{...background-color: #f8f8f8;font-size:83%...}

Debería ser: \Css{...background-color: \#f8f8f8;font-size:83\%...}

2.2 Comandos importantes.

Como estamos en un ambiente bimodal, algunas cosas se pueden usar tanto para PDFLaTeX como para Make4ht, pero hay otras cosas que son exclusivas para PDFLaTeX y que talvez hay algún equivalente para Make4ht y viceversa.

En esta plantilla tenemos algunos comandos personalizados (están en WebPreambuloyEntornos.tex):

Comandos adicionales para generar código HTML desde LaTeX se muestran en la sección 5.

Ejemplo. En el código 2.3 se muestra cómo incluir una figura .pdf con PDFLaTeX e incluir la misma figura en formato .svg en HTML (Make4ht puede hacer la conversión automática de .pdf a .svg, pero depende del sistema, las librerías instaladas y del tipo de archivo .pdf).

\solopdf{% PDFLaTeX-> pdf 
\begin{center} 
\includegraphics[scale=0.35]{images/sumaRiemann.pdf} 
\captionof{figure}{Figura \tt{.pdf}} 
\end{center} 
 } 
\solomk{% Mkae4ht -> html 
\begin{center} 
\includegraphics{images/sumaRiemann.svg} 
\captionof{figure}{Figura \tt{.svg}} 
\end{center} 
 } 
 

En este caso, la figura sumaRiemann.svg ha sido escala adecuadamente (con Inkscape) para la salida .html. Hay varios programas para escalar figuras.

2.3 Fuentes

En la plantilla.tex, para la compilación con PDFLaTeX usamos las fuentes Palatino, Tgpagella, Eucal, Beramono y Helvetica. Para la salida HTML, Make4ht carga en el archivo de configuración, la fuentes Google Lora, para el texto. Si no declaramos una fuente, el navegador usa una fuente genérica (depende del navegador), por ejemplo Times New Roman o Liberation Serif o Times o Georgia o Apple Garamond.

2.4 Figuras

En HTML, los formatos mejor soportados son PNG, JPG y SVG.

1.

PNG. Incluir una figura PNG no requiere hacer cambios, compila igual con PDFLaTeX y Make4ht.

\includegraphics[width=0.7\textwidth]{images/fig2.png}

Para escalar una figura PNG o JPG, usamos una opción más adecuada para la salida HTML: La opción, [width=0.x\textwidth] (funciona para PDFLaTeX también).

Podría pasar que Make4ht no logre escalar una figura PNG si el archivo viene con información que Make4ht no puede manejar (estos archivos no tiene código estándar). En ese caso, se incluye la imagen con medidas absolutas y, de ser necesario se escala manualmente con algún software.

Estas figuras se inyectan en el HTML con algo como (si hubo éxito escalando)

<img alt=’PIC’ class=’includegraphics’ src=’images/fig2.png’ width=’310’ />.

Es decir, también podemos insertar figras PNG desde el archivo .tex. Un ejemplo se muestra en el código 2.4

\insertarhtml{% Make4ht -> html 
   <img alt=’PIC’ class=’includegraphics’ src=’images/fig3.png’ 
         width=’150’ />}

2.

SVG. El formato SVG (Scalable Vector Graphics) se usa para mostrar gráficos vectoriales, escalables y nítidos, en la web.

Se puede incluir incluir una figura SVG con Make4ht, usando el código

\solomk{\includegraphics{images/fig1.svg}}\caption{...}\label{...}

En Linux (digamos Ubuntu 24) generalmente (si están instaladas la librerías rsvg-convert y pdf2svg), al compilar con Make4ht, las figuras fig.pdf se convierten automáticamente a fig-.svg y se insertan en el HTML. Aunque hay figuras PDF que por alguna configuración no se logran convertir. Estas librerías están disponibles también en Windows.

PDFLaTeX puede incluir figuras SVG con el paquete "svg", pero solo funciona para PDFLaTeX.

Make4ht inyecta la figura .svg en el HTML con algo como

<object class=’graphics’ data=’images/fig1.svg’ type=’image/svg+xml’></object>

(a)

<object>...,/object> es un elemento HTML que incrusta contenido externo (svg, pdf, html, etc.) como un "documento embebido".

(b)

Estas figuras SVG no se pueden escalar con la opción usual [width=0.x\textwidth]. El navegador web las inserta con un tamaño absoluto. Esto se debe a que una figura SVG se puede escalar si accedemos a su atributo viewBox (sistema de coordenadas), pero Make4ht no hace eso, solo inserta la figura.

(c)

Si fuera necesario escalar estas figuras SVG, se pueden usar programas externos.

(d)

Podemos escalar las figuras SVG visualmente (o con comandos en terminal) por ejemplo con con Inkscape ( u otro programa equivalente), como se muestra en la Figura 4

---

Los navegadores no renderizan los figuras PDF como imágenes (excepto con el elemento <object>). A veces Make4ht puede convertir estas figuras automáticamente (en la compilación) a PNG o SVG, mediante herramientas externas (como ghostscript o pdf2svg). Esto depende de si en el sistema están instaladas estas herramientas y depende también de la información que Make4ht pueda obtener de la figura (la codificación no es estándar).

2.5 Entorno minipage

La práctica usual de colocar un minipage al lado de otro minpage está configurado en el archivo config.cfg (porque necesitamos manejar de manera correcta las dimensiones de cada minipage).

Es conveniente, para que Make4ht traduzca bien, usar el formato que se muestra en la Figura 5 y en código 7.52

\begin{minipage}{1.0\textwidth} 
        \begin{minipage}{0.x\textwidth} 
                % Contenido 1... 
        \end{minipage}\hfill\begin{minipage}{0.y\textwidth} 
                % Contenido 2... 
        \end{minipage} 
\end{minipage}

\linea 
\begin{minipage}{1.0\textwidth} 
        \begin{minipage}{0.6\textwidth} 
        \vspace{-2\baselineskip} % solo aplica para pdf 
        El espacio Euclidiano es  $\R^2$, con  la métrica 
        \[ 
        ds^2=dx^2+dy^2 
        \] 
        En este modelo, la distancia más corta entre dos puntos 
        es una línea recta 
        \end{minipage}\hfill\begin{minipage}{0.35\textwidth} 
        \begin{center} 
        \includegraphics{images/fig3.png}\captionof{figure}{Camino más corto} 
        \end{center} 
        \end{minipage} 
\end{minipage} 
\linea

2.6 Ambiente tikzpicture

Make4ht traduce bien, en general, los ambientes tikzpicture. Con cosas muy complicadas todavía tenemos la opción de recortar la figura con Inkscape u otro software.

Ejemplo. El código 2.7 muestra un diagrama generado con tikz.

\begin{center} 
\begin{tikzpicture} 
 \matrix (m) [matrix of math nodes, row sep=3.5em, 
     column sep=3.5em, nodes={anchor=center}] {A & A[1] \\ 
    A’ & A’[1] \\}; 
    \path[-stealth] 
    (m-1-1) edge node [above] {$x$} (m-1-2) 
    (m-2-1) edge node [above] {$y$} (m-2-2) 
    (m-1-1) edge node [right] {$z$} (m-2-1) 
    (m-1-2) edge node [right] {$t$} (m-2-2); 
\end{tikzpicture} 
\end{center}

\begin{tikzpicture}[scale=0.7, x=(-15:1.2), y=(90:1.0), z=(-150:1.0), 
        line cap=round, line join=round, 
        axis/.style={black, thick,->}, 
        vector/.style={>=stealth,->}] 
 
        ...     % El código lo puede ver en el archivo "plantilla.tex" 
 
\end{tikzpicture}

2.7 Matrices, ecuaciones y arreglos

Make4ht traduce estos entornos sin problema. Entornos demasiado complejos, posiblemente sea mejor, insertarlos en el HTML como una imagen SVG, como se indica en el apéndice 3., o generar el equivalente HTML con IA, si se pudiera.

El código completo de algunos ejemplos, se puede ver en el archivo plantilla.tex

1.

El código 2.9 muestra un ejemplo del entorno equation con underbrace

\begin{equation} 
  \norm{f - L}_{\infty} = \overbrace{\abs{\frac{K_2}{2}}}^{\mathclap{\text{worst $f’’(x)$ }}}\underbrace{\left(\frac{h}{2}\right)^2}_{\mathclap{\text{worst (b - a)}}} 
\end{equation}

$$\parallel f-L{\parallel }_{\infty }=\stackrel{\text{worst }{f}^{″<!--\; FUNCTION\; APPLICATION\; -->}(x)}{\overbrace{|\frac{K_2}{2}|}}\underset{\text{worst (b - a)}}{\underbrace{{\left(\frac{h}{2}\right)}^2}}$$

(1)

$\bullet$

El código 2.10 muestra un ejemplo del entorno equation con cases

\begin{equation}\label{eq:cases} 
S_{i,t}= 
\begin{cases} 
 \begin{cases} 
  [x_{i,t}=X^*, r_{i,t}=1] & \text{if  $\max\{X_{i,t}\}=X^*$} \\ 
  [x_{i,t}=\max\{X_{i,t}\}, r_{i,t}=0] & \text{if $\max\{X_{i,t}\} \neq X^*$} 
 \end{cases} 
  &\text{if $\sum_{i=1}^I u_{i,t-1}= \theta^{t-2} X^*$}\\ 
 \begin{cases} 
  [x_{i,t}=1, r_{i,t}=1] & \hspace{\maxmin} \text{if $\min\{X_{i,t}\}=1$} \\ 
  [x_{i,t}=\min\{X_{i,t}\}, r_{i,t}=0] & \hspace{\maxmin} \text{if $\min\{X_{i,t}\} \neq 1$} 
 \end{cases} 
 &\text{otherwise} 
 \end{cases} 
\end{equation}

$$S_{i,t}=\{\begin{array}{cc}\{\begin{array}{cc}[x_{i,t}=X^{\ast },r_{i,t}=1]\hfill & \text{if }\text{max}<!--\; FUNCTION\; APPLICATION\; -->\{X_{i,t}\}=X^{\ast }\hfill \end{array}\hfill & \text{if }\sum _{i=1}^I{u}_{i,t-1}={𝜃}^{t-2}{X}^{\ast }\hfill \end{array}$$

(2)

Hacemos referencia a los entornos en la manera usual.

El código: En la ecuación \ref{eq:cases}, o el formato \eqref{eq:cases}, se tiene que ... produce: En la ecuación 2, o el formato (2), se tiene que ...

$\bullet$

Entorno equation con array

$$\underset{b}{\underbrace{\left(\begin{array}{c}\hfill b_1\hfill \\ \hfill b_2\hfill \\ \hfill b_3\hfill \\ \hfill ⋮<!--\; FUNCTION\; APPLICATION\; -->\hfill \end{array}\right)}}=\underset{S}{\underbrace{\left(\begin{array}{ccccc}\hfill s_{11}\hfill & \hfill s_{12}\hfill & \hfill s_{13}\hfill & \hfill \dots <!--\; FUNCTION\; APPLICATION\; -->\hfill & \hfill s_{1n}\hfill \\ \hfill s_{21}\hfill & \hfill s_{22}\hfill & \hfill s_{23}\hfill & \hfill \dots <!--\; FUNCTION\; APPLICATION\; -->\hfill & \hfill s_{2n}\hfill \\ \hfill s_{31}\hfill & \hfill s_{32}\hfill & \hfill s_{33}\hfill & \hfill \dots <!--\; FUNCTION\; APPLICATION\; -->\hfill & \hfill s_{3n}\hfill \\ \hfill ⋮<!--\; FUNCTION\; APPLICATION\; -->\hfill & \hfill ⋮<!--\; FUNCTION\; APPLICATION\; -->\hfill & \hfill ⋮<!--\; FUNCTION\; APPLICATION\; -->\hfill & \hfill \ddots \hfill & \hfill ⋮<!--\; FUNCTION\; APPLICATION\; -->\hfill \end{array}\right)}}\cdot \underset{a}{\underbrace{\left(\begin{array}{c}\hfill a_1\hfill \\ \hfill a_2\hfill \\ \hfill a_3\hfill \\ \hfill ⋮<!--\; FUNCTION\; APPLICATION\; -->\hfill \end{array}\right)}}$$

$\bullet$

Entorno pmatrix con block

$$\underset{T}{\underbrace{\left(\begin{array}{cc}\hfill 1\hfill & \hfill \underset{k}{\underbrace{1\cdots 1}}\hfill \\ \hfill \hfill & \hfill \hfill & \hfill 1\hfill & \hfill \underset{k}{\underbrace{1\cdots 1}}\hfill \\ \hfill \hfill & \hfill \hfill & \hfill \hfill & \hfill \hfill & \hfill \ddots \hfill \end{array}\right)}}$$

2.8 Paquete subfigure.

Usamos este paquete para colocar dos figuras, una al lado de la otra, con diferentes caption. El archivo de configuración tiene el código para manejar el entorno subfigure en la traducción a HTML. En la Figura 1, al inicio de este documento, usamos un código bimodal, porque usamos figuras .pdf para el PDF y el formato .svg para el HTML. El código 2.11 muestra parte de la edición al inicio de este documento.

\solomk{% Subfiguras con .svg. Make4ht -> html 
\begin{figure}[h] 
        \centering 
        \begin{minipage}{1.0\textwidth} 
                \centering 
                \begin{subfigure}{0.4\textwidth} 
                        \centering 
                        \includegraphics{images/fig0a.svg} 
                        \caption{PDFLaTeX} 
                        \label{fig:fig0a} 
                \end{subfigure}% 
                ~ % espacio 
                \begin{subfigure}{0.4\textwidth} 
                        \centering 
                        \includegraphics{images/fig0b.svg} 
                        \caption{Make4ht} 
                        \label{fig:fig0b} 
                \end{subfigure}% 
                % caption general 
                \centering\caption{Compilar con PDFLaTeX o con Make4ht} 
                \label{fig:fig0} 
        \end{minipage} 
\end{figure}}

2.9 Tablas

Make4ht traduce correctamente a HTML tablas simples como otras un pco más elaboradas, por ejmplo tablas que utilizan paquetes como multirow, color o booktabs. Sin embargo, cuando se trata de estructuras más complejas $-$como celdas combinadas de forma irregular, múltiples líneas horizontales o disposiciones no estándar$-$ es necesario recurrir a soluciones alternativas, como las que se ilustran en el apéndice 3.. Además, una vez generado el archivo HTML, es posible agregar interactividad directamente desde este mismo documento .tex. (sección 5.)

A continuación mostramos algunos ejemplos de tablas que Make4ht traduce bien a HTML.

1.

El código 2.12 muestra una tabla con \multicolumn. La salida es la Tabla 2

\begin{table}[h!!!] 
{ % grupo 
\arrayrulecolor{lightgray} 
\begin{center} 
 \begin{tabular}{ | l | c | c | c | c | c | c |}\hline\hline 
  Tipo de Instrucción & opcode &  &  & & & \\\hline 
  \multicolumn{1}{|r|}{\#bits} & 6 & 5 & 5 & 5 & 5 & 6\\\hline\hline 
  Tipo-R & op & rs & rt & rd & shamt & funct\\\hline 
  Tipo-I & op & rs & rt & \multicolumn{3}{c|}{dirección/inmediato}\\\hline 
  Tipo-J & op & \multicolumn{5}{l|}{dirección objetivo}  \\\hline 
 \end{tabular} 
\caption{\label{tab:4.1}Tipos de instrucciones de código máquina MIPS} 
\end{center} 
} 
\end{table}

Tipo de Instrucción	opcode
#bits	6	5	5	5	5	6
Tipo-R	op	rs	rt	rd	shamt	funct
Tipo-I	op	rs	rt	dirección/inmediato
Tipo-J	op	dirección objetivo

2.

El código 2.13 muestra una tabla con \multirow y con \rowcolor. La salida es la Tabla 3.

\begin{table}[h!!!] 
\centering 
\begin{tabular}{|l|l|l|l|} 
\hline 
\rowcolor{gray!30} 
\textbf{Categoría} & \textbf{Item} & \textbf{Cantidad} 
        & \textbf{Precio} \\ \hline 
        \multirow{2}{*}{Frutas} & Manzanas & 10 & \$5.00 \\ \cline{2-4} 
        & Naranjas & 20 & \$8.00 \\ \hline 
        \multirow{2}{*}{Vegetales} & Zanahorias & 15 & \$4.00 \\ \cline{2-4} 
        & Papas& 25 & \$6.00 \\ \hline 
\end{tabular} 
        \captionof{table}{Tabla sofisticada}\label{tab:4.2} 
\end{table} 
 

Categoría	Item	Cantidad	Precio
Frutas	Manzanas	10	$5.00
	Naranjas	20	$8.00
Vegetales	Zanahorias	15	$4.00
	Papas	25	$6.00

3.

El código 2.14 muestra parte del código de una tablas con color en las filas. Esta tabla se puede traducir como una tabla "fija" o se puede traducir con un efecto "hover" sobre sus filas, como veremos en la sección 5.. La salida es la Tabla 4.

Negación

Conjunción

Disyunción

Implicación

Equivalencia

$P$

$\neg <!--\; FUNCTION\; APPLICATION\; -->P$

$P$

$Q$

$P\wedge Q$

$P$

$Q$

$P\vee Q$

$P$

$Q$

$P\to Q$

$P$

$Q$

$P\leftrightarrow Q$

$V$

$F$

$V$

$V$

$V$

$V$

$V$

$V$

$V$

$V$

$V$

$V$

$V$

$V$

$V$

$F$

$V$

$F$

$F$

$V$

$F$

$V$

$V$

$F$

$F$

$V$

$F$

$F$

$F$

$V$

$F$

$V$

$F$

$F$

$V$

$V$

$F$

$V$

$V$

$F$

$V$

$F$

$F$

$V$

$F$

$F$

$F$

$F$

$F$

$F$

$F$

$F$

$V$

$F$

$F$

$V$

\begin{table}[h!!!] 
\centering 
{% grupo 
\footnotesize 
\renewcommand{\arraystretch}{1.5} 
\setlength{\arrayrulewidth}{0.5pt} 
\arrayrulecolor{headerblue!80} 
\rowcolors{3}{rowgray}{white}  % Empieza a rayar desde la 3ra fila 
\begin{tabular}{cc||ccc||ccc||ccc||ccc} 
\toprule 
\rowcolor{headerblue!90} 
... 
\end{tabular} 
} % grupo 
\caption{Tablas de verdad básicas} 
\end{table}

2.10 Listas de ejercicios

El documento plantilla.tex usa el paquete exsheets para manejar listas de ejercicos al compilar con PDFLaTeX. En el preámbulo podremos ver el código que muestra 2.15

\ifdefined\HCode % Paquete de ejercicios exsheets,no soportado por Make4ht 
\else % compila PDFLatex 
\usepackage[counter-format=se.qu,counter-within=section]{exsheets} 
\DeclareTranslation{english}{exsheets-exercise-name}{\textcolor{tverde}{Ejercicio}} 
\DeclareTranslation{english}{exsheets-question-name}{\textcolor{tverde}{Pregunta}} 
 \DeclareTranslation{english}{exsheets-solution-name}{\textcolor{tverde}{Solución}} 
\SetupExSheets{ 
        question/pre-body-hook = {\normalfont}, 
        solution/pre-hook = {\par\medskip}, 
} 
\fi

Cuando compilamos con Make4ht, usamos el mismo código que en PDFLaTeX, solo que en el preámbulo se han definido los comandos para que PDFLaTeX lo interprete de una forma y Make4ht de otra, de tal manera que tengamos listas de ejercicios en ambos ambientes usando el mismo código.

1.

\hejersol{}{}. Este comando lo ignora PDFLaTeX y Make4ht lo convierte en un enunciado con un botón Ver/Ocultar, para ver la respuesta en el renglón que sigue.

2.

\ejersol{}{}.

Este comando funciona para PDFLaTeX y Make4ht. PDFLaTeX lo convierte en un ejercicio normal y, para ver las soluciones, se pone al final del documento

\solopdf{ \section*{Respuestas} \printsolutions }{}

Si compilamos con Make4ht, \ejersol{}{} se convierte en \hejersol{}{}. La idea es que a veces, un mismo ejercicio tiene un enunciado en el PDF, digamos con una figura fija por ejemplo, mientras que el enunciado en HTML no necesita la figura porque viene con otra cosa, por ejemplo un script.

Ejemplo. En el código 2.16 se muestra una lista de ejercicios. La salida en PDF corresponde al formato del paquete exsheets, la salida en HTML es una lista de enunciados con un botón para ver/ocultar la respuesta. La plantilla.tex contiene el código para insertar el script que gobierna el botón y su acción.

% Ejercicio 1: 
\ejersol{Resuelve para $x$: $\frac{2}{3}x + 5 = 10$}{La solución es $x = \frac{15}{2}$}\\ 
% Ejercicio 2: 
\ejersol{Calcula el área de un cuadrado de lado 3 cm}{$9\ \text{cm}^2$}\\ 
% Ejercicio 3: 
\ejersol{Deriva $f(x) = 3x^2 + 2x - 1$}{$f’(x) = 6x + 2$}\\ 
% Ejercicio 4: 
\ejersol{Simplifica $\sin^2 \theta + \cos^2 \theta$}{$1$}\\ 
% Ejercicio 5:  Solo PDFLaTeX 
\solopdf{\ejersol{Calcula la velocidad final si $v_0=10\,m/s$, 
        $a=2\,m/s^2$ y $t=3\,s$}{$16\,m/s$} 
        }\\ 
% Ejercicio 6: Solo Make4ht 
\solomk{\ejersol{Encuentra la energía cinética de un objeto de 5 kg 
           moviéndose a 4 m/s}{$40\,J$} 
        }\\ 
% Ejercicio 7:  Solo Make4ht 
\hejersol{Halla la corriente si $V=12\,V$ y $R=4\,\Omega$}{$3\,A$}\\ 
 
% Al finaldel documento: \solopdf{ \section*{Respuestas} \printsolutions }{}

2.11 Tabla de contenidos: Ver/Ocultar

La tabla de contenidos en el PDF se obtiene con \tableofcontents. Make4ht compila \tableofcontents y genera una tabla de contenidos adecuada para el HTML.

La plantilla incluye un botón minimalista que abre y cierra una ventana con el "Contenido" en plantilla.html. Se requiere un script toc-toggle.js y un archivo toc-toggle.css que ya están en las carpetas CSS y JS. El código 2.17 muestra la manera de habilitar el botón. .

\begin{document} 
\maketitle 
\solopdf{\tableofcontents} 
\solomk{\webtableofcontents} 
...

Con un poco más de código (no incluido en la plantilla), se puede agregar una barra de navegación como se muestra en la Figura 7. En este caso, en vez de un solo .html, usamos las opciones para generar varios archivos .html con las secciones (y capítulos si aplica).

3. Convertir entornos en imágenes svg

Make4ht no ofrece soporte para algunos paquetes que se usan para implementar tablas o arreglos complejos, como las que se implementan con hhline, nicematrix, polynom etc. Podemos convertir estos entornos en imágnes SVG o también, si se presta, se podrían convertir en HTML interactivo (sección 5.). También podemos hacer lo mismo con entornos o fórmulas que por su complejidad, no se traducen bien.

1.

En el caso de tablas o matrices que no traducen bien, se puede entregar el código LaTeX a la IA para que genere un equivalente en HTML e insertarlo con \insertarhtml{}. A veces el resultado, después de varios ajustes, es adecuado.

2.

Más generalmente, una opción es abrir el PDF con Inkscape (o un programa equivalente). Inkscape (v. 1.4.1, 2025 [5]) abre todas las páginas del PDF y solo seleccionamos las que nos interesan (ver Figura 8).

Una vez que seleccionamos la página correspondiente, del archivo del PDF, seleccionamos la figura (si hay que desagrupar usamos Crtl-U y a veces hay que más bien "agrupar", con Crtl-G) y la pegamos en otro documento. Recortamos la figura seleccionada con file-Document Properties-Resize to Content y luego guardamos como .svg.
Inkscape es muy convienente para escalar y/o editar cosas adicionales con la extensión Textext (Extensions-Text-TexText)

3.

Otra opción, en presencia de muchos entornos que no traducen bien, es el paquete ltximg [6]. Se ejecuta con un comando en la terminal: Marcamos los entornos que queremos convertir a imágenes con %<*ltximg> %</ltximg> y la compilación PdfLaTeX convierte estos entornos en imágenes .svg. Ver el apéndice Apéndice A

Ejemplos: Convertir entornos en imágenes.

Vamos a recortar entornos con los paquetes nicematrix, polynomial y hhline. Recuerde que estos paquetes no son soportados por Make4ht, pero sí por PDFLaTeX.

El orden de aparición es importante, porque eso define el nombre de la imagen .svg

1.

El código 3.18 muestra cómo se genera una división de polinomios con el paquete polynom. En este caso abrimos el PDF con Inkscape y seleccionamos la división de polinomios (en este contexto, la división es una imagen), la escalamos y la guardamos con el nombre doc-fig-1.svg

% \usepackage{polynom} en ComandosdelUsuario.tex 
\solopdf{% PDFLaTeX -> pdf 
\begin{center} 
        \polylongdiv[style=D]{6x^3-2x^2+x+3}{x^2-x+1} 
\captionof{figure}{División con el paquete \tt{polynom}} 
\end{center} 
} 
% 
\solomk{ % Make4ht -> html 
\begin{center} 
        \includegraphics[width=0.5\textwidth]{images/doc-fig-1.svg} 
        \captionof{figure}{División con el paquete \tt{polynom}} 
\end{center} 
}

2.

El código 3.19 muestra cómo se genera una fórmula con el paquete nicematrix y otros paquetes. En este caso abrimos el PDF con Inkscape y seleccionamos la fórmula (en este contexto, la fórmula es una imagen), la escalamos y la guardamos con el nombre conv-fig-2.svg.

\solopdf{% PDFLaTeX -> pdf 
  % En ComandosdelUsuario.tex 
  %   \newcommand{\ff}{\mathtt{f}} 
  %   \usepackage{nicematrix} 
  %   \usetikzlibrary{decorations.pathreplacing} 
  %   \usepackage{makecell} 
   \begin{equation*} 
    \boldsymbol{\mathcal{F}}^{i} = 
    \begin{bNiceMatrix}[margin,nullify-dots] 
     ... 
        \end{bNiceMatrix} 
    \end{equation*} 
} 
% 
\solomk{ % Make4ht -> html 
 \includegraphics{images/conv-fig-2.svg} 
}

4. Entornos definición, teorema, ejemplo, etc.

La plantilla tiene varios entornos ya configurados para que compilen bien con Make4ht. Agregar nuevos entornos posiblemente requiera agregar nuevo código al archivo de configuración config.cfg (ver sección 7.). Lo recomendable es usar los modelos que ya están en este archivo. Si usa IA para configurar algún nuevo entorno, lo mejor es indicarle que genere código siguiendo esos modelos ya probados y avalados por la documentacion más reciente.

Para el PDF d ela plantilla, las cosas de diseño de cada entorno, como bordes, color, color de fondo, etc. se puede modificar en WebPreambuloyEntornos.tex.

Modificar el diseño de cada entorno, para la salida HTML, requiere modificar entre otras cosas, el \Css{...} del entorno en el archivo config.cfg. Por ejemplo, el código 4.20 muestra parte del diseño del entorno para las definiciones (además se debe controlar los cierres de etiquetas y los entornos minipage dentro de las definiciones).

% Archivo config.cfg 
\Css{% No dejar renglones en blanco y "escapar" \# y \% 
 .definicion { 
   background-color: rgb(251, 251, 250); 
   border-left: 4pt solid rgb(255, 20, 147); 
   margin: 20pt 0; 
   padding: 0pt 4pt 0 4pt; 
   overflow: auto; 
   clear: both; 
        } 
  .definicion-title { 
   color: rgb(255, 20, 147); 
   font-weight: bold; 
   margin-bottom: 0.5em; 
   display: block; 
}                                                                                                                                                                                                       

A continuación tenemos una lista de entornos con ejemplos.

1.

Definiciones. El código 4.21 muestra el formato general de una definición.

\label{def:defi1} 
\begin{definicion}[nombre-opcional] 
 Contenido... 
\end{definicion}

$\bullet$ Una definción con nombre.

Definición 1 (Envoltura Convexa).

Sea $S\subset {ℝ}^n$ un conjunto de puntos. La envoltura convexa de $S$, denotada por $\text{Conv}(S)$, es el conjunto convexo más pequeño que contiene a $S$. Formalmente:

$$\text{Conv}(S)=\left\{\sum _{i=1}^k{\lambda }_i{x}_i|x_i\in S,{\lambda }_i\ge 0,\sum _{i=1}^k{\lambda }_i=1,k\in \mathbb{N}\right\}$$

Es decir, $\text{Conv}(S)$ está formado por todas las combinaciones convexas finitas de puntos de $S$.

Bien, ahora podemos hacer referencia con usual con \ref: En la Definición 1...

Sean $A=(1,1)$, $B=(2,4)$, $C=(4,0)$. El punto $P=(3,1)$ está dentro del triángulo pues:

$$P=\frac{1}{4}A+\frac{1}{4}B+\frac{1}{2}C.$$

Como ${\lambda }_1=\frac{1}{4},{\lambda }_2=\frac{1}{4},{\lambda }_3=\frac{1}{2}$, y ${\lambda }_i\ge 0$, entonces se concluye que $P\in \text{Conv}\{A,B,C\}$.

---

$\bullet$ Una definición con minipage y una nota \footnote{...}

Definición 2 (Modelo para Geometría Hipérbolica).

Un modelo para la geometría hiperbólica es el semiplano superior

$$ℍ=\left\{(x,y)\in {ℝ}^2|y>0\right\}$$

equipado con la métrica

$$d{s}^2=\frac{d{x}^2+d{y}^2}{y^2}.\text{(C)}$$

Al conjunto $ℍ$ se le llama semiplano superior de Poincaré.^a

2.

Teoremas. El código 4.22 muestra el formato general de un teorema.

\label{teo:teo1} 
\begin{teorema}[nombre-opcional] 
                Contenido... 
\end{teorema}

$\bullet$ Teorema con nombre.

Teorema 1 (Parametrización de un triángulo).

Sean $A,B,C\in {ℝ}^2$ no colineales entonces existen $t,s,w$ únicos tales que

$$△\mathit{ABC}=\{\mathit{tA}+\mathit{sB}+\mathit{wC},\text{donde }t,s,w\ge 0,t+s+w=1\}$$

---

$\bullet$ El código 4.23 muestra un teorema con demostración. Usamos un entorno caja que ya está configurado. Es una caja simple, con fondo blanco pero tiene atributos bien definidos en la configuración para la traducción a HTML.

\label{teo:teo2} 
\begin{teorema}[La recta es el camino más corto] 
... 
\begin{caja}[Demostración.] 
... 
\end{caja} 
\end{teorema}

Teorema 2 (La recta es el camino más corto).

En el plano euclidiano ${ℝ}^2$ con la métrica usual, el camino más corto entre dos puntos $A$ y $B$ es el segmento de recta que los une.

Demostración. Sea $x$ un número real arbitrario. Sea $\gamma (t)=(x(t),y(t))$ una curva suave que une dos puntos $A$ y $B$ en el intervalo $[a,b]$. Su longitud es:

$$L[\gamma ]={\int \; <!--\; nolimits\; -->}_a^b\sqrt{x^{\prime }{(t)}^2+y^{\prime }{(t)}^2}\mathit{dt}.$$

Aplicamos la desigualdad de Cauchy–Schwarz:

$$L[\gamma ]\ge \sqrt{{(x(b)-x(a))}^2+{(y(b)-y(a))}^2},$$

con igualdad si y solo si ${\gamma }^{\prime }(t)$ es constante y paralelo al vector $B-A$, es decir, si $\gamma$ es una recta.

Por lo tanto, la longitud mínima se alcanza exactamente cuando $\gamma$ es el segmento de recta entre $A$ y $B$. □

---

3.

El código 4.24 muestra el formato general de un ejemplo ilustrativo.

\label{ej:ejemplo1} 
\begin{ejemplo}[nombre-opcional] 
 % Enunciado 
\end{ejemplo}

Ejemplo: El código, 4.25 muestra un ejemplo con un entorno minipage

\solopdf{ % PDFLaTeX -> pdf 
\label{ej:ejemplo1} 
\begin{ejemplo}[Punto dentro del triángulo] 
   \begin{minipage}{0.7\textwidth} 
          Sean \( A = (1,1) \), \( B = (2,4) \), \( C = (4,0) \). 
        ... 
   \end{minipage}\hfill\begin{minipage}{0.2\textwidth} 
       ... 
    \includegraphics[scale=0.7]{images/fig2.pdf} 
  \end{minipage} 
\end{ejemplo} 
 } 
 \solomk{  % Make4ht -> html 
\label{ej:ejemplo1} 
\begin{ejemplo}[Punto dentro del triángulo] 
   \begin{minipage}{0.7\textwidth} 
          Sean \( A = (1,1) \), \( B = (2,4) \), \( C = (4,0) \). 
        ... 
   \end{minipage}\hfill\begin{minipage}{0.2\textwidth} 
       ... 
   \includegraphics[scale=0.7]{images/fig2.svg} 
   \end{minipage} 
   \end{ejemplo} 
\end{ejemplo} 
} 
 

Ejemplo 1 (Punto dentro del triángulo).

Sean $A=(1,1)$, $B=(2,4)$, $C=(4,0)$. El punto $P=(3,1)$ está dentro del triángulo $△\mathit{ABC}$ pues, como este triágulo es un conjunto comvexo y

$$P=\frac{1}{4}A+\frac{1}{4}B+\frac{1}{2}C.$$

entonces se concluye que $P\in \text{Conv}\{A,B,C\}=△\mathit{ABC}$.

También podemos editar un ejemplo con solución, usando el entorno \begin{caja}[Solución].

Ejemplo 2 (Punto fuera del triángulo).

Sean $A=(1,1)$, $B=(2,4)$, $C=(4,0)$. Sea $P=(3,4)$. Verifique que $P$ está fuera del triángulo $△\mathit{ABC}$.

Solución. Resolviendo el sistema $3\times 3$

$$P=\mathit{tA}+\mathit{sB}+\mathit{wC},t+s+w=1,$$

obtenemos la única solución $t=-1,s=2,w=0$, y como uno de los coeficientes es negativo, $P\notin \text{Conv}\{A,B,C\}=△\mathit{ABC}$. □

1.

Entornos:

(a)

\ObjetivoGeneral{...}

(b)

\ObjetivosEspecificos{...}

(c)

\resumen{...}

(d)

\palabrasclave{...}

(e)

\abstract{...}

(f)

\keywords{...}

(g)

\begin{definicion}...\end{definicion}

(h)

\begin{teorema}...\end{teorema}

(i)

\begin{ejemplo}...\end{ejemplo}

(j)

\begin{corolario}...\end{corolario}

(k)

\begin{proposicion}...\end{proposicion}

(l)

\begin{lema}...\end{lema}

(m)

\begin{caja}...\end{caja}

(n)

\begin{axioma}...\end{axioma}

(o)

\begin{actividad}...\end{actividad}

(p)

\begin{notahistorica}...\end{notahistorica}

(q)

\begin{problema}...\end{problema}

(r)

\begin{ejercicio}...\end{ejercicio}

(s)

\begin{proyecto}...\end{proyecto}

(t)

\begin{aplicacion}...\end{aplicacion}

5. Agregar actividades interactivas

Ahora que ya tenemos una plantilla configurada para traducir LaTeX a HTML (para introducir contenido matemático), pasamos a introducir interactividad. En esta parte, usamos \insertarhtml{} para incrustar el bloque HTML para nuestras actividades interactivas (en el caso de que no queramos que estén en páginas independientes). Asumimos un conocimiento básico de HTML, CSS y JavaScript.

5.1 Scripts con JavaScript

Las actividades interactivas en JavaScript en este documento requieren separación modular. Cada actividad puede tener su propia lógica, estilo y comportamiento: Sus componentes de estilo CSS y el código JS, los separamos de las otras actividades. Esto hace que el código se pueda mantener mejor, evita conflictos de estilo entre módulos distintos y se puede reutilizar fácilmente un módulo en otra parte o en otro proyecto.

Usualmente los scripts se comunican con el el sitio web porque el sitio web les provee de campos de texto, botones, lienzos (canvas) para graficar, escribir, etc.

Cada actividad interactiva con JavaScript tiene una introducción teórica y/o práctica e instrucciones. Luego viene el bloque de código HTML de la página. Este códigose comunica con el script: Este código toma el estilo de una archivo .css en la carpeta CSS y el escript .js "vive" en la carpeta JS , como se muestra en al Figura 13.

El código .js y el estilo .css lo implementamos nosotros mismos o, por supuesto, pedimos asistencia de la IA. Podríamos solicitar traducir un program ya implementado en otro lenguaje a un programa equivalente .js o modificar un programa existente o indicar todos los detalles del programa que queremos en lenguaje natural.

Para proyectos complejos necesitamos sin duda una especificación con modelos de código y lenguaje técnico para pedir asistencia a la IA.

Si le pedimos a la IA ( Copilot, ChatGPT, DeepSeek, etc.) una aplicacion interactiva (no muy compleja), entonces en general, seguimos estos pasos:

1.

Pedimos el HTML completo de una página web con la actividad interactiva que solicitamos. Así nos aseguramos que todo funcione bien. También es útil si vamos a usar esta página web de manera independiente.

• Primero pedimos un diseño básico de lo que queremos, con los detalles pertinentes.

  Hay que tomar en cuenta que en JavaScript hay bibliotecas para graficar en 2D, 3D, derivar en una o varias variables, simplificar expresiones algebraicas, etc.

  Las bibliotecas 3D usuales son three.js y babylon.js, pero posiblemente queramos quedarnos en algo práctico y sencillo como plotly.js, algo fácil de manejar con lenguaje natural.

  Si no tenemos el resultado esperado, a veces es necesario en los ajustes, especificar fórmulas, algoritmos u otros detalles técnicos. Sí, en el estado actual de la IA, seguramente tendremos que pedir ajustes.

• Después de que la actividad interactiva funcione bien (a veces no funcionan a la primera), empezamos a hacer ajustes. Hacer ajustes o pedir ajustes de diseño, de algoritmos, de fórmulas, de eventos de ratón, etc. Hay que ser muy específico, en proyectos un poco más complejos, la IA a veces arregla una cosa y otras cosas desaprecen!
• Pedimos que el código de estilo este encapsulado, para no afectar otros estilos en el momento que incrustemos la actividad interactiva en el sitio web principal, si fuera el caso. No deben quedar varibales globales en el CSS . Si queremos más encapsulamiento, la petición usual es : Dame un "widget" encapsulado, algo como .nombre-widget, con CSS y JS encapsulados.
• Si en un script hay que arrastrar puntos, hay que pedir también que en el .js se incluya el manejo de eventos táctiles para dispositivos moviles. En realidad puede ser incómodo ver estas cosas en el celular sin un "lápiz", pero lo dejamos preparado.

2.

Cuando todo funciona bien, pedimos o manualmente separamos el .css, y el .js y luego insertamos en en nuestro archivo .tex lo que está en el <body> ...<\body> con el comando \insertarhtml{}. Adicionalmente hay que insertar en el preámbulo de nuestro archivo .tex las líneas que deben ir en el <head> </head> del HTML.

Con más detalle:

• Las etiquetas <meta ...>, \lstinline <script...>...+ y/o <link>... que tenemos que poner en <head>...<\head>.

  Para mantener el HTML de la actividad interactiva sin cambios, cuando modificamos el contenido .tex y complamos de nuevo, lo mejor es inyectar estas etiquetas del encabezado head al inicio de la plantilla.tex. El código 5.26 muestra como lo hacemos:

  \documentclass[fleqn,oneside]{article} 
    \input{Paquetes/WebPreambuloyEntornos.tex} 
    \input{Paquetes/ComandosdelUsuario.tex} 
    %-- Actividades interactivas 
    \ifdefined\HCode % Solo lo compila  Make4ht -> html 
    \Configure{HEAD} 
    { 
     \HCode{<link rel="stylesheet" href="css/tabla-hover-filas.css">} 
     \HCode{<link rel="stylesheet" href="css/riemann.css">} 
     %... 
    } 
  \fi

• El archivo de estilo debe quedar fuertemente encapsulado. Este archivo de estilo .css lo colocamos en la carpeta css
• El o los scripts .js: Estos archivos los ponemos en la carpeta js

• El bloque de código HTML de cada la actividad interactiva:

  Introducimos este bloque en nuestro .tex para que Make4ht lo inyecte en el HTML de la página web principal. Esto lo hacemos con el comando \insertarhtml, como muestra el código 5.27

   % Make4ht -> html 
   \insertarhtml{ 
   <div id="nombre-actividad"> 
   ... 
   </div> 
   ... 
   <script src="js/nombre-del-script.js"></script> 
   }

  Si este bloque de código, por alguna razón, lleva texto matemático, se debe incluir en código Mathml. No se debe usar Mathjax para escribir texto de manera interactiva, para no colapsar la página web.

• DeepSeek traduce código 2D de Wolfram Mathematica a JavaScript. El resultado es en general aceptable (si no es código muy complejo) y requiere ajustes adicionales.
• ChatGPT acepta imágenes de partida para generar un script JavaScript.
• Sin duda, si tenemos código en otros lenguajes, se podría ver, en el estado actual de la IA, qué cosas nos genera.

Luego debemos pensar en una petición. La IA "sabe" cómo calcular la intersección de dos intervalos, aún así, siempre hay que revisar casos especiales y la lógica general, previniendo errores. Por ejemplo, una primera petición en lenguaje natural podría ser:

"Crea un HTML completo con un script que muestre dos intervalos arrastrables (azul/verde) sobre una línea numérica, con discos rellenos/vacíos según sean cerrados/abiertos. Que calcule y muestre su intersección con un segmento (magenta) un poco más arribe, con líneas punteadas hacia abajo. Incluye doble click para cambiar apertura/cierre y redondeo cercano a enteros. Importante: El css debe estar encapsulado, o no debe haber ninguna variable ni estilo que afecte afuera de este contenedor."

En este caso, usando Copilot, obtenemos un HTML autocontenido que requiere todavía varios ajustes.

También está la opción de ser mucho más específicos:

Interfaz gráfica:

• Dos intervalos representados como segmentos (azul y verde) sobre una línea numérica (-2 a 6).
• Mostrar tres inputs de texto con la notación (ej: [1, 3]) para la intersección de los dos primeros y el resultado.
• Resultado de la intersección en magenta sobre la línea.

Discos en extremos:

• Rellenos si el intervalo es cerrado ([ o ]), vacíos si es abierto (] o [).
• Efecto blur al pasar el ratón (solo en los discos azul/verde).

Interacción:

• Arrastrar discos para modificar los extremos.
• Doble clic en discos para alternar entre abierto/cerrado.

Detalles visuales:

• Líneas punteadas magenta desde los extremos de la intersección hasta el segmento inferior.

Encapsulamiento: Dame un widget encapsulado bajo .intintervalos-widget, con CSS y JS encapsulados. No debe haber ninguna variable ni estilo que afecte afuera de ese contenedor.

En este caso, usando nuevamente Copilot, obtenemos un HTML autocontenido más completo.

Después de varios ajustes (peticiones adicionales) el script ya activo se muestra en la subsección 6.1

Luego, lo recomendable es revisar casos especiales y la lógica en el código del script.

En este caso la IA nos entregó una petición adicional: Los archivos .css, .js y .html, además de una petición especial: que alistara el código \insertarhtml{...} para nuestro plantilla.tex.

6. Ejemplos de actividades interactivas

En esta sección aparecen varios ejemplos, expuestos de manera suscinta, con aplicaciones interactivas. En todos estas aplicaciones se usó IA (mayormente Copilot, ChatGPT y DeepSeek), para asistir en la implementación de los scripts interactivos que aparecen más adelante.

No todos los scripts se obtuvieron con peticiones en lenguaje natural, más bien usando a la IA como asistente.

Este documento es acerca de cosas de implementación, por eso no se expone la parte complicada de diseñar la actividad interactiva.

6.1 Intersección de Intervalos

Recordemos que $A\cap B$ ($A$ intersección $B$) es el conjunto de elementos comunes al conjunto $A$ y al conjunto $B$.

Dado que los intervalos representan conjuntos, es posible hallar sus intersecciones y uniones. Las representaciones gráficas son útiles en este proceso.

Actividad Interactiva

¿Cómo hallar intersecciones y uniones de dos intervalos?

1.

Represente cada intervalo en una recta numérica.

2.

Para hallar la intersección de dos intervalos, podemos proceder así:

• En la misma recta numérica, represento ambos intervalos
• Toma la porción de la recta numérica que las dos representaciones tienen en común

3.

Haga click en los extremos del intervalo para cambiar de abierto a cerrado o viceversa

4.

Seleccione y arrastre un extremo de un intervalo

Para insertar el HTML en el sitio web se usó el código que se muestra en 6.28

% Make4ht -> html 
% En el preámbulo se debe agregar la ruta del .css 
% \ifdefined\HCode\Configure{HEAD}{ 
% \HCode{<link rel="stylesheet" href="css/Rinterseccionintervalos.css">} 
%    %... 
%  } 
%\fi 
% En la carpeta "css" agregar  interseccionintervalos.css 
% En la carpeta "js" agregar  interseccionintervalos.js 
\insertarhtml{ 
<div class="intervalos-container"> 
  <div class="intervalos-contenedor"> 
    <h2>Intersección de Intervalos</h2> 
    <div class="intervalos-resultado"> 
      <input type="text" id="intervalos-input1" readonly /> 
      <span class="intervalos-op">$\cap$</span> 
      <input type="text" id="intervalos-input2" readonly /> 
      <span class="intervalos-op">=</span> 
      <input type="text" id="intervalos-resultado" readonly /> 
    </div> 
    <div class="intervalos-canvas-container"> 
      <canvas id="intervalos-canvas"></canvas> 
    </div> 
  </div> 
</div> 
 <script src="js/Rinterseccionintervalos.js"></script> 
}

Script de ejercicios sobre intersección de intervalos.

Actividad Interactiva

En el script que sigue, el botón "Generar Intervalos", genera dos intervalos con extremos aleatorios. Su trabajo consiste en cálcular la intersección, si hubiera, y realizar la representación gráfica. Al final, puede ver la respuesta presionando el botón Respuesta.

Implementación: Esta basada en una petición detallada a la IA, especificando lo que contiene la primera fila y la zona gráfica.

El código 6.29 muestra como insertar el HTML

 % En el preámbulo agregar: 
 %\ifdefined\HCode\Configure{HEAD}{%... 
 % \HCode{<link rel="stylesheet" href="css/Rejerinterseccionintervalos.css">} 
%} 
%\fi 
% En la carpeta "css" agregar  Rejerinterseccionintervalos.css 
% En la carpeta "js" agregar  Rejerinterseccionintervalos.js 
\insertarhtml{% Make4ht -> html 
  <div class="interseccion-caja"> 
    <div class="titulo">Script interactivo: Genere dos intervalos y visualice su intersección.</div> 
    <div class="controls"> 
        <button id="btnGenerarIntersect">Generar Intervalos</button> 
        <input type="text" id="int1Intersect" readonly><span>\( \cap \)</span> 
        <input type="text" id="int2Intersect" readonly> 
        <button id="btnCalcularIntersect">Respuesta</button> 
    </div> 
    <div id="resultadoInterseccionIntersect" style="text-align:center; margin-bottom:5px; font-size:18px;"></div> 
    <canvas id="canvasIntersect" width="565" height="200"></canvas> 
  </div> 
<script src="js/Rejerinterseccionintervalos.js" defer></script> 
}