Revista digital Matemática, Educación e Internet https://revistas.tec.ac.cr/index.php/matematica Vol nn1, No nn2, año $-$mes año

ISSN 1659 -0643 DOI: XXX

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

Resumen:  Este documento presenta una plantilla para convertir documentos LaTeX en páginas web interactivas utilizando herramientas como Make4ht y asistencia con IA. También se abordan temas como la configuración de Make4ht, la conversión de entornos complejos a imágenes SVG, 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 queremos algo bimodal: Queremos como salida un documento pdf y un documento html (para agregar contenido interactivo).

Para obtener un documento pdf, compilamos con PDFLaTeX y para traducir el documento 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.

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 y también a través de un framework como Bootstrap, [1].

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 con [14] y [13]). La parte interactiva requiere conocer JavaScript, en principio, en un nivel básico.

La IA puede generar código Latex, código de estilo (css) y scripts interactivos, 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 con modelos de código y en lenguaje técnico preciso. También debemos estar atentos a las repuestas de la IA, porque ocasionalmente nos da resuestas basadas en información desactualizada (cosas raras, comandos que no existen, etc.).

Si quiere conocer cómo se configuró la plantilla y eventualmente modificarla, entonces se debe leer la sección 7. También conviene leer [2].

¿Por qué traducir un documento pdf a html? 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.

2. Make4ht para impacientes

Bien, tenemos una plantilla doc.zip con figuras y varios archivos .tex y un archivo de configración config.cdf (entre otras cosas) que Make4ht traduce bien a html.

Podemos agregar paquetes y comandos personales, en el archivo ComandosdelUsuario.tex que está en la carpeta "Paquetes". Pero hay que observar que hay paquetes incompatibles con Make4ht y posiblemente también comandos. Siempre hay que estar compilando para ir probando como funcionann las cosas.

Make4ht es altamente configurable, por lo que el diseño del sitio web final lo podemos automatizar a través de un archivo de configuración que contiene código css, para aplicar ajustes específicos para el formato de salida html.

Sentido común. Hay que pensar en "modo pdf" si visualizamos el pdf de salida, y en "modo html" si visualizamos la página web de salida. Son mundos parecidos, pero hay cosas en pdf que no tiene equivalente en html y viceversa. Así que hay que estar valorando qué cosas tienen sentido en uno y en el otro ambiente. La buena noticia es que tenemos dos comandos para saltar de uno a otro modo en este documento doc.tex: Las cosas sofisticadas en Latex , buenas para pdf pero que podrían no compilar bien con Make4ht, las podemos simplicar y hacer una versión Latex más sencilla (pero equivalente) o inyectar código html de manera directa.

Cosas demasiado complicadas se puede recortar e incluir como una imagen svg. Este formato esta bien soportado por el html y permite renderizar texto, figuras y componente de scripts interactivos en alta calidad y permite escalar sin pérdidas.

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 con 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 [8]. Lo vemos en la sección 3.

2.

La carpeta js contiene los scripts JavaScript interactivos

3.

La carpeta css contiene archivos de estilo.css personalizados y el archivo doc.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 doc.css y doc.html (si la carpeta no está, entonces la crea).

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 este mismo documento, pero solo con cosas relevantes, para editar un documento propio. El archivo ejemplos.tex viene con código Latex que amplia los ejemplos del archivo principal.

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, con el comando

 make4ht -u -c config.cfg -u -f html5 -d SitioWeb doc.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 doc.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" 
 

2.11 Errores de compilación

Make4ht compila el archivo .tex con htlatex. Esta compilación Usa "motores" como PDFtex o Luatex, pero soporta solo paquetes básicos, en realidad, una cantidad suficiente de paquetes básicos. Así que la primera fuente de errores de compilación están en el código .tex. 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 se rompa) digamos por etiquetas que abren, pero no cierran como en <div><p>Contenido</div>. También el DOM se puede romper por paquetes incompatibles con Make4ht o entornos matemáticos complejos mal interpretados.

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

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

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 son exclusivas para PDFLaTex y hay algún equivalente para Make4ht y viceversa.

• Ejemplo: Incluir una figura pdf con PDFLatex e incluir la misma figura en formato .¨svg en html
  

  \pdfomk{% PDFLatex-> pdf 
  \bc 
  \includegraphics[scale=0.35]{images/sumaRiemann.pdf} 
  \captionof{figure}{Figura \tt{.pdf}} 
  \ec 
   }{% Mkae4ht -> html 
  \bc 
  \includegraphics{images/sumaRiemann.svg} 
  \captionof{figure}{Figura \tt{.svg}} 
  \ec 
   } 
   

2.3 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) se puede usar la opción, [width=0.x\textwidth]. Esta opción, en términos de \textwidth, es adecuada para pdf y html.

Estas figuras se inyectan en el html con algo como

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

Es decir, también podemos insertar figras png desde latex . Por ejemplo,

\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

\pdfomk{ 
% 
}{% Make4ht -> html 
\includegraphics{images/fig1.svg} 
}

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

En Linux se puede hacer en la terminal con rsvg-convert (también se puede instalar en Windows y Mac).

Por ejemplo si queremos escalar fig1.svg a un ancho 150pt, ejecutamos la instrucción

  cd images 
  % sudo apt install librsvg2-bin 
  rsvg-convert -f svg -w 150 fig1.svg -o sfig1.svg 
 

sfig1.svg es la figura escalada. Como el html toma las figuras de la carpeta images, podemos seguir ajustando al figura y recargando el html.

---

pdf. 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.

2.4 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).

Introducimos ambientes minipage en hmtl con el siguiente formato:

\linea 
\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

• Un ejemplo. Introducimos texto a la izquierda y una figura a la derecha, con \captionof{figure}. Agregamos un par de líneas horizontales con \linea (definida en el preámbulo, correcta para PDFLatex y Make4ht).
  

  \linea 
  \begin{minipage}{1.0\textwidth} 
          \begin{minipage}{0.6\textwidth} 
          \vspace{-2\baselineskip} 
          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} 
          \bc 
          \includegraphics{images/fig3.png}\captionof{figure}{Camino más corto} 
          \ec 
          \end{minipage} 
  \end{minipage} 
  \linea

  ---

  El espacio Euclidiano es ${ℝ}^2$, con la métrica

  $$d{s}^2=d{x}^2+d{y}^2$$

  En este modelo, la distancia más corta entre dos puntos es una línea recta

  

  ---

2.5 Ambiente tikzpicture

Make4ht traduce bien, en general, los ambientes tikzpicture. Con cosas muy complicadas todavía tenemos la opción de recoratr la figura, como se indica en la subsección 3.

$\bullet$

Ejemplo. Una 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}

---

$\bullet$

Ejemplo. Una figura generada con tikz

\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 "ejemplos.tex" 
 
\end{tikzpicture}

2.6 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 la subsección 3., o generar el equivalente html con IA, si se pudiera.

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

1.

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$

equation y 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 }\max <!--\; FUNCTION\; APPLICATION\; -->\{X_{i,t}\}=X^{\ast }\hfill \\ [x_{i,t}=\max <!--\; FUNCTION\; APPLICATION\; -->\{X_{i,t}\},r_{i,t}=0]\hfill & \text{if }\max <!--\; FUNCTION\; APPLICATION\; -->\{X_{i,t}\}\ne X^{\ast }\hfill \end{array}\hfill & \text{if }\sum _{i=1}^I{u}_{i,t-1}={𝜃}^{t-2}{X}^{\ast }\hfill \\ \{\begin{array}{cc}[x_{i,t}=1,r_{i,t}=1]\hfill & \text{if }\min <!--\; FUNCTION\; APPLICATION\; -->\{X_{i,t}\}=1\hfill \\ [x_{i,t}=\min <!--\; FUNCTION\; APPLICATION\; -->\{X_{i,t}\},r_{i,t}=0]\hfill & \text{if }\min <!--\; FUNCTION\; APPLICATION\; -->\{X_{i,t}\}\ne 1\hfill \end{array}\hfill & \text{otherwise}\hfill \end{array}$$

(2)

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

$\bullet$

equation y array

$$\underset{𝒃}{\underbrace{\left(\begin{array}{c}\hfill b_1\hfill \\ \hfill b_2\hfill \\ \hfill b_3\hfill \\ \hfill ⋮<!--\; FUNCTION\; APPLICATION\; -->\hfill \\ \hfill b_n\hfill \end{array}\right)}}=\underset{𝑺}{\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 \\ \hfill s_{n1}\hfill & \hfill \dots <!--\; FUNCTION\; APPLICATION\; -->\hfill & \hfill \dots <!--\; FUNCTION\; APPLICATION\; -->\hfill & \hfill \dots <!--\; FUNCTION\; APPLICATION\; -->\hfill & \hfill s_{\mathit{𝑛𝑛}}\hfill \end{array}\right)}}\cdot \underset{𝒂}{\underbrace{\left(\begin{array}{c}\hfill a_1\hfill \\ \hfill a_2\hfill \\ \hfill a_3\hfill \\ \hfill ⋮<!--\; FUNCTION\; APPLICATION\; -->\hfill \\ \hfill a_n\hfill \end{array}\right)}}$$

$\bullet$

pmatrix con block

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

2.7 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 esta situación en la traducción a html. En la Figura 1 usamos un código bimodal, porque usamos figuras .pdf para el pdf y el formato .svg para el html.

\pdfomk{% subfiguras para pdflatex..., con formato .pdf 
% 
}{% subfiguras para que compile make4ht, en formato .svg 
\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}% 
                ~ 
                \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.8 Tablas

Make4ht traduce correctamente a html, tanto tablas simples como otras más elaboradas, 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 la sección 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.

Tablas con \multicolumn (no usar \arrayrulecolor)

\begin{table}[h!!!] 
  % Make4ht -> html. No lo soporta \arrayrulecolor{black} 
  {\centering 
 \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{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.

Tablas con \multirow y \rowcolor

 
\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.

Tablas con color en las filas. Esta tabla se puede traducir como una tabla "fija" o se puede traducir con efecto hover sobre sus filas, como veremos en la sección 5..

\setlength{\arrayrulewidth}{0.5pt} 
\arrayrulecolor{headerblue!80} 
\begin{tabular}{cc||ccc||ccc||ccc||ccc} 
\toprule 
\rowcolor{headerblue!90} 
... 
\end{tabular}

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$

2.9 Listas de ejercicios

El documento doc.tex usa el paquete exsheets para listas de ejercicos. Definimos dos comandos en el preámbulo

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, usualmente se pone al final del documento

\pdfomk{ \section*{Respuestas} \printsolutions }{}

Si compila Make4ht, \ejersol{}{} se convierte en \hejersol{}{}.

% Ejercicio 1: 
\ejersol{Resuelve para $x$: $2x + 5 = 13$}{$x = 4$}\\ 
% 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 
\pdfomk{\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 
\pdfomk{}{ \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 final: \pdfomk{ \section*{Respuestas} \printsolutions }{}

2.10 Tabla de contenidos: Ver/Ocultar

Para generar una tabla de contenidos en el pdf solo agregamos \tableofcontents. Make4ht compila \tableofcontents y genera una tabla de contenidos adecuada para html.

Lo que queremos ahora es un botón minimalista que abre y cierra una ventanda con el contenido en doc.html. Se requiere un script +toc-toggle.js+ y un archivo toc-toggle.css para hacer eso. Estso archivos ya están incluidos en la plantilla. Para habilitarlos debemos agregar algunas cosas:

% Make4ht -> html 
% En el preámbulo se debe agregar la ruta del .css 
% \ifdefined\HCode\Configure{HEAD}{ 
% \HCode{<link rel="stylesheet" href="css/toc-toggle.css" />} 
% \HCode{<script src="js/toc-toggle.js"></script>} 
%  } 
%\fi 
% \begin{document} 
%  ... 
\pdfomk{%PDFLatex->pdf 
\tableofcontents 
}{ 
\ifdefined\HCode 
\ifvmode\IgnorePar\fi\EndP\par 
    \HCode{<link rel="stylesheet" href="css/toc-togogle.css">} 
    \HCode{<script src="js/toc-toogle.js"></script>} 
\HCode{<button class="toc-btn">Tabla de Contenidos</button>} 
\HCode{<div id="toc-container">} 
\ifvmode\IgnorePar\fi\EndP\par 
\fi 
 
\tableofcontents 
 
\ifdefined\HCode 
\ifvmode\IgnorePar\fi\EndP\par 
\HCode{</div>} 
\ifvmode\IgnorePar\fi\EndP\par 
\fi 
}

3. Convertir entornos "complicados" en imágenes svg

Make4ht no ofrece soporte para muchos 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.)

1.

Tablas o matrices 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 es bueno.

2.

Más generalmente, una opción es abrir el doc.pdf con Inkscape. Este programa (v. 1.4.1, 2025 [7]) abre todas las páginas y solo seleccionamos las que nos interesan (ver Figura 7).

Cargamos la página correspondiente del archivo doc.pdf con la o las figuras. Seleccionamos la figura (si hay que desagrupar usamos Crtl-U) y la pegamos en otro documento. Recortamos la figura seleccionada con file-Document Properties-Resize to Content y luego guardamos como .svg.
Recordemos que 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 muchas figuras, es el paquete ltximg [8]. Se ejecuta con un comando en la terminal: Busca los entornos marcados con %<*ltximg> %</ltximg> y los convierte en imágenes .svg

El entorno %<*ltximg> %</ltximg> es ingnorado por PDFLatex y por Make4ht. . Pero ltximg si lo interpreta como un identificador.

%<*ltximg> 
  Entorno... 
%</ltximg>

Preparamos un archivo conv.tex con los entornos y los paquetes y comandos que necesitan

% conv.tex 
\documentclass{article} 
\usepackage[utf8]{inputenc} 
% Preámbulos para cada entorno 
\usepackage{polynom} 
\usepackage{nicematrix,tikz} 
\usetikzlibrary{fit} 
\newcommand{\ff}{\mathtt{f}} 
 
\begin{document} 
% conv-fig-1.svg 
%<*ltximg> 
%<- polynom NO requiere entorno matemático 
\polylongdiv[style=D]{6x^3-2x^2+x+3}{x^2-x+1} 
%</ltximg> 
 
% conv-fig-2.svg 
%<*ltximg> 
\begin{NiceTabular}[hvlines]{ccc} 
\CodeBefore [create-cell-nodes] 
  \tikz \node [draw,fill=blue!15,rounded corners,fit = (2-1) (2-3)] {} ; 
\Body 
  a & b & c \\ 
  d & e & f 
\end{NiceTabular} 
%</ltximg> 
... 
\end{document}

Una vez que tenemos idenficados los entornos que vamos a convertir a imagen svg, tenemos que correr en terminal el comando que recorta y hace las conversiones.

% Ignoramos  entornos tikzpicture, podría habilitarlos si se necesita 
ltximg --skipenv ’tikzpicture’ --runs 2 --subenv --svg --imgdir images -o conv-out conv.tex 
 

Funciona así: Este comando recorre el documento conv.tex y localiza los entornos que están envueltos en el entorno %<*ltximg> %</ltximg>, luego genera y pega en la carpeta images, un archivo conv.tex con solamente los entornos y el preámbulo del documento, luego genera la imagen .pdf de cada entorno y las convierte a .svg.

Los nombres de las imágenes van numeradas por orden de aparición:

conv-fig-1.svg, conv-fig-2.svg, etc.

Para escalar las figuras svg usamos rsvg-convert o inkscape (o programas equivalentes), como se indicó en la sección 2.3.

Ejemplos.

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.

Entorno polynom (no requiere entonrno matemático).

\pdfomk{% PDFLatex -> pdf 
\bc 
        \polylongdiv[style=D]{6x^3-2x^2+x+3}{x^2-x+1} % Genera conv-fig-1.svg 
\captionof{figure}{División con el paquete \tt{polynom}} 
\ec 
}{ % Make4ht -> html recoge la imagen generada por "ltximg" 
\bc 
        \includegraphics[width=0.5\textwidth]{images/doc-fig-1.svg} 
        \captionof{figure}{División con el paquete \tt{polynom}} 
\ec 
}

2.

NiceMatrix

\pdfomk{% PDFLatex -> pdf %conv-fig-2.svg 
  %\newcommand{\ff}{\mathtt{f}} 
   \begin{equation*} 
    \boldsymbol{\mathcal{F}}^{i} = 
    \begin{bNiceMatrix}[margin,nullify-dots] 
     ... 
        \end{bNiceMatrix} 
    \end{equation*} 
}{ % Make4ht -> html 
 \includegraphics[width=0.5\textwidth]{images/conv-fig-2.svg} 
}

ltximg --skipenv ’tikzpicture’ --runs 2 --subenv --svg --imgdir images -o conv-out conv.tex 
 

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, lo mejor es indicarle primero que quiere el código siguiendo esos modelos.

Cosas de diseño de cada entorno, como bordes, color, color de fondo, etc. se puede modificar en WebPreambuloyEntornos.tex.

Para modificar el diseño de cada entorno, para la salida html, requiere modificar el \Css{...} del entorno en el archivo config.cfg. Por ejemplo, para el entorno definción se tiene

\Css{% No dejar renglones en blanco 
 .definicion { 
   background-color: rgb(251, 251, 250);      %/* gris magenta */ 
   border-left: 4pt solid rgb(255, 20, 147);  %/* magenta */ 
   margin: 20pt 0; 
   padding: 0pt 4pt 0 4pt; %/* padding-bottom reducido a 0 */ 
   overflow: auto; %/* Contiene floats */ 
   clear: both; %/* Evita solapamientos */ 
        } 
        %/* Título de la definición */ 
  .definicion-title { 
   color: rgb(255, 20, 147); 
   font-weight: bold; 
   margin-bottom: 0.5em; 
   display: block; 
}                                                                                                                                                                                                                               

1.

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

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é, en honor al gran matemático francés que lo descubrió

2.

Teoremas. El formato general es:

\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{𝐴𝐵𝐶}=\{\mathit{𝑡𝐴}+\mathit{𝑠𝐵}+\mathit{𝑤𝐶},\text{donde }t,s,w\ge 0,t+s+w=1\}$$

$\bullet$ Teorema con demostración. Tenemos un entorno caja. 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 $\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 }_a^b\sqrt{x^{\prime }{(t)}^2+y^{\prime }{(t)}^2}\mathit{𝑑𝑡}.$$

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.

Ejemplo ilustrativo y con solución

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

$\bullet$ Ejemplo: Vamos a usar un entorno minipage

\pdfomk{ % 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} 
 }{  % 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{𝐴𝐵𝐶}$ 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{𝐴𝐵𝐶}$.

$\bullet$ Ejemplo con 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{𝐴𝐵𝐶}$.

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

$$P=\mathit{𝑡𝐴}+\mathit{𝑠𝐵}+\mathit{𝑤𝐶},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{𝐴𝐵𝐶}$.

1.

Entornos:

(a)

\ObjetivoGeneral{...}

(b)

\ObjetivosEspecificos{...}

(c)

\resumen{...}

(d)

\palabrasclave{...}

(e)

\abstract{...}

(f)

\keywords{...}

(g)

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

(h)

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

(i)

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

(j)

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

(k)

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

(l)

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

(m)

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

(n)

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

(o)

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

(p)

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

(q)

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

(r)

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

(s)

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

(t)

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

5. Agregar actividades interactivas

Ahora que ya tenemos una manera fiable de 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).

5.1 JavaScript

Las actividades interactivas en JavaScript 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 que se 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.

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écnico.
  

• Despés de que la actividad interactiva funcione bien (a veces no funcionan a la primera), empezamos a pedir ajustes. Pueden ser 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 bajo .nombre-widget, con css y js encapsulados.
  
• Si en un script hay que arrastrar puntos, hay que pedir también que en .js se incluya el manejo de eventos táctiles para dispositivos moviles. En realidad puede ser incómodo ver estas cosas en el celular, pero lo dejamos preparado.

2.

Cuando todo funciona bien, pedimos o manualmente separamos el .css, el .js y lo que está en <body> ...<\body> es lo que insertamos. 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:

• Los <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, lo mejor es inyectar estos scripts del encabezado head al inicio del doc.tex. Por ejemplo, podría ser algo como
  

  \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 fuertemente encapsulado. Este archivo de estilo .css lo colocamos en la carpeta css
• El o los scripts .js. Estos archivos lso ponemos en la carpeta js
  

• El bloque de código html de la actividad interactiva.
  

  Introducimos este bloque en nuestro .tex para que Make4ht lo inyecte en el html de la página web principal
  

  Sería algo como,
  

   % 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

• 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, la petición en lenguaje naural podría ser:

"Crea 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, oo debe haber ninguna variable ni estilo que afecte afuera de ese contenedor."

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 tuvimos éxito: El resultado, después de varios ajustes (peticiones adicionales) es como se muestra ya activo 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ó los archivos .css, .js y .html, además de una petición espcial: que alistara el código \insertarhtml{...} para nuestro doc.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 DeepSeek, también Copilot y chatGPT), para asistir en la implementación de los scripts interactivos que aparecen más adelante.

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
• ...

• Haga click en los extremos del intervalo para cambiar de abierto a cerrado o viceversa
• Seleccione y arrastre un extremo de un intervalo

% 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> 
}