Nombre de la obra y autores
Título de la obra:
TÍTULO
Autores:
AUTORES
Código JavaScript para el libro: Joel Espinosa Longi, IMATE, UNAM.
Recursos interactivos: DescartesJS
Fuentes: Lato y UbuntuMono
Fórmulas matemáticas: MathJax
Núcleo del libro interactivo: septiembre 2023
DATOS DE LA EDICIÓN
Esta obra está bajo una licencia Creative Commons 4.0 internacional: Reconocimiento-No Comercial-Compartir Igual.
Esta es una breve muestra que ilustra las capacidades básicas del núcleo de presentación de libros interactivos. Los libros se pueden adaptar según las preferencias del autor y también incorporar elementos adicionales para potenciar su presentación. Este ejemplo presenta el uso de la biblioteca MathJax para el uso de fórmulas matemáticas y mhchem.js para el desplegado de fórmulas químicas. Se recomienda evitar cambios en los archivos ubicados dentro del directorio book, ya que dichos archivos son los responsables del correcto funcionamiento del libro y cuando se realizan actualizaciones estos archivos son reemplazados.
Un archivo zip con el código fuente de este ejemplo está disponible para su descarga desde aquí. El código del núcleo del libro se encuentra alojado en el siguiente repositorio de GitHub: https://github.com/jlongi/libro_interactivo, cualquier corrección, sugerencia o cambio favor de reportarlo en el repositorio para su evaluación y posible incorporación.
Para obtener más información acerca del funcionamiento de este libro interactivo, es recomendable consultar el contenido del archivo index.html, donde se proporcionan algunos comentarios y explicaciones sobre diferentes aspectos del libro, por ejemplo cómo funciona la tabla de contenidos.
Para incluir una nota general en el texto se utiliza el siguiente código HTML:
Lo que muestra el siguiente texto:
Para agregar un nota al pie de página es necesario utilizar lo siguiente:
Lo que muestra el siguiente párrafo:
La herramienta para hacer los recursos interactivos se llama DescartesJShttps://descartes.matem.unam.mx.
Lo que se encuentra entre las etiquetas:
Las notas al pie de página se numeran automáticamente.
Para agregar un interactivo se hace de la siguiente manera:
Los valores de los parámetros width y height deben coincidir con el ancho y alto de la escena o tener la misma proporción, para que la escena interactiva se muestre con las proporciones correctas. El valor del parámetro src corresponde a la dirección del interactivo, puede ser absoluta o relativa a la ubicación del archivo index.html
Por omisión los interactivos se muestran con un ancho igual al 100% del ancho de la página. Si se desea que ocupen una área diferente, con el parámetro scale se puede cambiar el tamaño a un porcentaje del ancho de la página. Por ejemplo, el siguiente interactivo se muestra con un ancho del 75% del tamaño de la página:
Hay que mencionar que es posible utilizar porcentajes mayors al 100%, pero al hacerlo los interactivos se salen de los margenes de la página, por lo que no es aconsejable.
El botón 
(que se agrega en la esquina superior derecha de cada interactivo) tiene la funcionalidad de mostrar el interactivo en una nueva ventana o a pantalla completa. Esto depende del valor de la variable open_interactives_fullscreen que es parte de la configuración del libro (window.book_config = { }). Esta configuración se suele especificar después del elemento <title> y antes de cargar los archivos JavaScript del libro.
Si la variable no aparece en la configuración (o no se tiene el script con la configuración):
O si aparece, pero tiene el valor de false (falso):
Entonces al presionar el botón, el interactivo se abre en una nueva ventana con las dimensiones especificadas por los valores de los parámetros width y height. Si se quiere que el interactivo se muestre en una nueva ventana con las dimensiones de la ventana que muestra el libro, se utiliza el parámetro window-size="true".
Para que el interactivo se muestre a pantalla completa, es necesario asignar el valor de true (verdadero) al valor de la variable open_interactives_fullscreen, por ejemplo:
Este es el comportamiento en el presente ejemplo, por lo que al presionar el botón, el interactivo se muestra a pantalla completa.
Hay que mencionar que esto funciona solamente en los navegadores que implementan la funcionalidad de pantalla completa de los navegadores. Por fortuna la mayoría de los navegadores modernos ya incorporan esta funcionalidad.
En general se puede agregar cualquier tipo de recurso interactivo que funcione con HTML. Por ejemplo, aquí se agrega el editor de GeoGebra.
Solo hay que considerar que los recursos interactivos deben poder ajustar su tamaño para que se muestren correctamente dentro de las páginas del libro (o a pantalla completa).
Para agregar un video local, se utiliza el siguiente código HTML:
El valor del parámetro width permite controlar el ancho del video como un porcentaje del ancho de la página. Es aconsejable agregar una imagen que muestre el primer cuadro del video y colocar la dirección en el parámetro poster, para que se muestre mientras el navegador carga el vídeo.
Se recomienda que el valor del parámetro preload sea "none" para evitar que los videos se precarguen, ayudando así a que solo se carguen los elementos visibles para el lector.
También es posible agregar videos desde YouTube, pero en este caso, se utiliza el mismo mecanismo para agregar un interactivo. Ejemplo:
Para agregar un video desde YouTube, es necesaria la dirección del video que incluye embed en el código. Como regla general las direcciones de YouTube tienen la siguiente forma https://www.youtube.com/watch?v=podf-jQjxaM, solamente hay que sustituir watch?v= por embed/ en la dirección.
Hay que considerar que los creadores de contenido pueden bloquear el uso de sus video en sitios externos a youtube, por lo que no todos los vídeos pueden incluirse dentro del libro interactivo.
Para añadir una imagen con la función de mostrarse en una ventana nueva al dar clic sobre ella, se utiliza el siguiente código:
Con el valor del parámetro width se define el ancho de la imagen como un porcentaje del ancho de la página.
El código class="image_expand" onclick="openImage(this)" es lo que permite que la imagen se muestre en una nueva ventana, entonces, para tener una imagen que no se muestre en una ventana nueva al dar clic sobre ella, solo hay que omitir el código class="image_expand" onclick="openImage(this)", por ejemplo:
Hay que mencionar que el parámetro loading="lazy" es un nuevo atributo que los navegadores modernos han incorporado en las imágenes (y otros elementos), con la finalidad de controlar si la descarga de las imágenes se realiza de forma perezosa, es decir, que se descarguen hasta que la imagen se encuentre en el área visible del navegador.
Si no se utiliza, todos los elementos de tipo <img> dentro del documento intentan descargar su contenido, lo que puede hacer que la presentación de libro tarde mucho tiempo, dependiendo del número de imágenes que contenga. Por esto se recomienda que se incluya el atributo para mejorar la velocidad en la que se presenta el libro interactivo.
Algunos navegadores no soportan el parámetro loading="lazy" por lo que realizan la descarga inmediata de las imágenes. Aún así, incluir el parámetro no causa ningún problema en el libro y permite que los usuarios que utilicen navegadores modernos, aprovechen las ventajas que ofrece, la cual se vuelve evidente en libros con muchas páginas y muchas imágenes.
Otra cosa a mencionar es que el valor del parámetro open_interactives_fullscreen (mencionado en la sección de true), al igual que los interactivos, las imágenes se muestran a pantalla completa en lugar de abrir una nueva ventana.
Si queremos una imagen que al hacer clic sobre ella, muestre en una ventana emergente algún vínculo, por ejemplo, un recurso interactivo, debemos utilizar:
El código openInteractive('url', 'ancho', 'alto), es el que se encarga de abrir el vínculo en una nueva ventana emergente, de tal manera que url corresponde a la dirección (relativa o absoluta) del recurso a mostrar, ancho y alto determinan el tamaño de la ventana emergente. Y no hay que olvidar que src es la dirección de la imagen que se incluye en el libro.
Si se quiere incluir una imagen como una figura, es decir, con texto descriptivo debajo, se utiliza el siguiente código:
Las figuras (<figure>) además de contener imágenes, pueden incluir interactivos, tablas o cualquier código HTML. Y el elemento <figcaption> corresponde a el texto descriptivo debajo de la figura; el cual se recomienda que sea el último elemento que se incluye dentro de una figura.
Si a las figuras les incluimos el atributo id, con un valor único para cada figura, por ejemplo:
Podemos incluir una referencia a dicha figura, utilizando el siguiente código:
Por ejemplo el siguiente bloque de código:
Muestra lo siguiente:
Es importante mencionar que si la figura no contiene un elemento de tipo <figcaption> entonces hay un error al incluir la referencia y se muestra el texto undefined, esto debido a que solo se enumeran las figuras que contienen el texto descriptivo especificado por <figcaption>.
Para agregar una referencia a una figura cuyo contenido es diferente a una imagen, por ejemplo, una tabla, un interactivo o un video; es necesario tener un identificador en la figura y además agregar el atributo prefix="Tabla" (o el nombre que queremos que aparezca en la etiqueta, "Interactivo" o "Video") al elemento <figcaption>. Por ejemplo:
Muestra lo siguiente:
| Título 1 | Título 2 |
| Valor 1 | Valor2 |
Para agregar bloques de texto autoenumerados, por ejemplo para presentar definiciones, teoremas, lemas, ejercicios, ejemplos o cualquier elemento que se quiera enumerar a lo largo de la presentación del libro, se utiliza el siguiente código:
class="num_block" es la encargada de la presentación del bloque de texto, y el atributo prefix proporciona el nombre que se utiliza para presentar el texto, y para crear un contador que llevara la cuenta de cuantos elementos se han creado utilizando el mismo prefijo.
Por ejemplo para agregar una definición se escribiría lo siguiente:
Lo que muestra este texto:
Para incluir una siguiente definición:
Y se ve así:
El primer número de la numeración corresponde al número del capítulo en donde se encuentra el bloque de texto, mientras que el segundo número corresponde a la numeración asignada a los elementos que comparten el mismo prefijo prefix.
Por ejemplo para agregar un teorema se escribiría lo siguiente:
Lo que muestra este texto:
Para agregar un ejemplo podemos utilizar lo siguiente:
Lo que muestra este texto:
Como se puede observar las numeraciones de los elementos marcados con class="num_block" son independientes, ya que el prefijo determina el tipo de elemento que se quiere numerar y se crea un contador especifico para cada uno de ellos.
Para agregar una referencia a una definición, teorema o lema, se utiliza el mismo mecanismo para referenciar figuras, por lo que es necesario contar con un identificador en elemento que se quiere referenciar.
Por ejemplo el siguiente código:
Muestra el siguiente texto:
Para incluir un vínculo o referencia a una página dentro del mismo libro, podemos utilizar el elemento <pageref> y su atributo ref_id para especificar el identificador de algún elemento dentro de la página que queremos referenciar.
Por ejemplo para incluir una referencia al Prefacio, podemos realizar lo siguiente:
Lo que muestra lo siguiente:
Si queremos agregar un texto adicional al número de página, se puede asignar un valor al parámetro prefix del elemento <pageref>, por ejemplo:
Con lo que obtenemos lo siguiente:
Por último si queremos que el número de página no aparezca en la referencia y en lugar de eso se desea mostrar un texto específico, solamente hay que colocar el texto que deseamos mostrar como contenido del elemento <pageref>, por ejemplo:
Que muestra el siguiente texto:
Para agregar bibliografía, por lo general en un capítulo al final del libro, se deben agregar entradas bibliográficas de la siguiente manera:
<bibitem> es el elemento que permite identificar una entrada bibliográfica. El parámetro id es el que permite identificar el elemento de la bibliografía y se utiliza para realizar referencias dentro del texto del documento.
Para agregar una referencia a un elemento de la bibliografía se utiliza <bibref> con el atributo <ref_id> igual al valor del identificador del elemento a referenciar (id):
Por ejemplo el siguiente código:
Muestra el siguiente texto:
Para aprender más sobre Descartes se pueden consultar los libros: Descartes JS - Nivel - I (
Al dar clic en las referencias a la bibliografía incluidas en el libro, se puede observar en la parte superior del libro la información correspondiente.
También es posible utilizar la variable bibitem_ref_id en la configuración del libro, para especificar si se utilizan números para la presentación de las entradas bibliográficas (el valor por defecto bibitem_ref_id: false) o si se utiliza el valor del parámetro id de las entradas bibliográficas (bibitem_ref_id: true). Esto es útil para personalizar la presentación de la bibliografía.
Hay que mencionar que para evitar comportamientos extraños, los valores asignados al parámetro id en cualquier elemento del libro, debe corresponder a un valor único, es decir, hay que evitar repetir identificadores.
De igual forma hay que utilizar identificadores diferentes a los utilizados por el núcleo del libro para evitar que se corrompa su funcionamiento, estos valores son: book_loader_container, book_loader, book_container, pages_container, btn_back_page, btn_next_page, go_to_table_of_content, close_to_table_of_content, btn_config, config_options, dark_light_mode, btn_dark, btn_light, table_of_content y pages_container.
Para mostrar código dentro de una línea de texto, se utiliza lo siguiente:
Código en línea x=100.
Para mostrar código en un bloque, por ejemplo para describir un algoritmo, se utiliza:
x=4
y=10
r=x+y
Hay que considerar que la etiqueta <pre> respeta los espacios en blanco.
Para mostrar formulas matemáticas se utiliza la biblioteca MathJax, la cual permite utilizar notación de latex para la representación de formulas matemáticas dentro de código HTML.
Por ejemplo, la siguiente expresión:
$x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
genera lo siguiente:
$x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
Al utilizar un solo signo de pesos, se generan formulas matemáticas en línea, mientras que si se quieren mostrar formulas en una línea aparte y más grandes, se deben utilizar dos signos de pesos, por ejemplo:
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}$$
genera lo siguiente:
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}$$
Esto genera que para usar el signo de pesos dentro del texto del libro, se tenga que utilizar la entidad HTML,
2.1.1. Exponentes y subíndices: $$H_2O H^2 O^{2+}$$
2.1.2. Vectores: $$\vec{A} \space \widehat{r}$$
2.1.3. Derivación: $$\nabla \partial x dx \dot x \ddot y$$
2.1.4. Conjuntos: $$\forall x \subseteq A \cap B \cup \exists$$
2.1.5. Lógica: $$ p \land \bar{q} \to p\lor \lnot q$$
2.1.6. Raíces: $$\sqrt{2}\approx 1,4142 \\ \sqrt[n]{x}$$
2.1.7. Relaciones: $$\sim \simeq \cong \le \ge \equiv \equiv\not \approx$$
2.1.8. Geometría: $$\triangle \angle \perp \| 45^\circ$$
2.2.1. Sumatorio: $$\sum_{k=1}^N k^2$$
2.2.1. Integral: $$\int_{-a}^{b} e^x\, dx$$
2.2.2. Integral de línea: $$\oint_{C} x^3\, dx + 4y^2\,dy$$
2.2.3. Límite: $$\lim_{x \to{+}\infty}{f(x)}$$
2.2.4. Productorio: $$\prod_{i=1}^n p_i$$
2.2.5. Binomial: $$ \binom{n}{k}$$
2.3.1. Tipo 1: $$ \begin{matrix} x & y \\ z & v \end{matrix}$$
2.3.2. Tipo 2: $$ \begin{bmatrix} x & y \\ z & v \end{bmatrix}$$
2.3.3. Tipo 3: $$ \begin{Bmatrix} x & y \\ z & v \end{Bmatrix}$$
2.3.4. Tipo 4: $$ \begin{pmatrix} x & y \\ z & v \end{pmatrix}$$
2.3.5. Tipo 5: $$ \begin{vmatrix} x & y \\ z & v \end{vmatrix}$$
2.3.6. Tipo 6: $$ \begin{Vmatrix} x & y \\ z & v \end{Vmatrix}$$
2.3.7. Ecuaciones en varias líneas: $$\begin{matrix}f(n+1) & = & (n+1)^2 \\ \ & = & n^2 + 2n + 1 \end{matrix}$$
2.3.8. Funciones a intervalos: $$x = \begin{cases} a &\text{si } b \\ c &\text{si } d\end{cases} $$
2.4.1. Paréntesis tipo 1: $$ \left(\frac{1}{2} \right) $$
2.4.2. Paréntesis tipo 2: $$ \bigg(\frac{1}{2} \bigg) $$
2.4.3. Para integral: $$e^x\bigg|_a^b$$ $$I=F(x)\Big]_a^b$$
2.5.1. Tipo 1 (\quad): $$\bullet \quad \infty \quad \ell$$
2.5.2. Tipo 2 (\space): $$\bullet \space \infty \space \ell$$
2.5.3. Tipo 3 (\qquad): $$\bullet \qquad \infty \qquad \ell$$
2.5.4. Tipo 4 (\;): $$\bullet \; \infty \;\; \ell$$
\color{Red}{\cancel{\color{black}{Expresión}}} \quad \bcancel{Expresión} \quad \quad \xcancel{Expresión} \cancelto{Corregir} {Expresión}
$$\color{Red}{\cancel{\color{black}{Expresión}}} \quad \bcancel{Expresión} \quad \xcancel{Expresión} \cancelto{Corregir} {Expresión}$$
2.7.1 Una matriz de 5x5
$$ \mathbb{A} = \;
\begin{bmatrix}
a_{(1,1)} & a_{(1,2)} & a_{(1,3)} & a_{(1,4)} & a_{(1,5)} \\
a_{(2,1)} & a_{(2,2)} & a_{(2,3)} & a_{(2,4)} & a_{(2,5)} \\
a_{(3,1)} & a_{(3,2)} & a_{(3,3)} & a_{(3,4)} & a_{(3,5)} \\
a_{(4,1)} & a_{(4,2)} & a_{(4,3)} & a_{(4,4)} & a_{(4,5)} \\
a_{(5,1)} & a_{(5,2)} & a_{(5,3)} & a_{(5,4)} & a_{(5,5)}
\end{bmatrix}$$
2.7.2 Ecuaciones alineadas
$$\color{blue}\begin{aligned}
(a+b)^2 &= (a+b)(a+b)\\
&= a^2 + ab + ba + b^2 \\
&= a^2 + 2ab + b^2
\end{aligned}$$
$$\color{blue}{\begin{aligned}
(a+b)^2 &= (a+b)(a+b) \\
&= a^2 + ab + ba + b^2 \\
&= a^2 + 2ab + b^2
\end{aligned}}$$
2.7.3 Número de fórmula a la derecha
$$ y = \frac{x+1}{z^2-3} \tag{$3.5$} $$
$$y = \frac{x+1}{z^2-3} \tag{$3.5$}$$
Para ver más ejemplos de uso de $\TeX$ puede consultarse el siguiente enlace: https://es.wikipedia.org/wiki/Ayuda:Uso_de_TeX, sólo se debe probar la compatibilidad de algunas expresiones, pues no todas las expresiones de este enlace son soportadas por MathJax. Una lista de las funciones soportadas por MathJax se encuentra en la siguiente dirección http://docs.mathjax.org/en/latest/input/tex/index.html.
En la herramienta MathJax, se ha incorporado una extensión (mhchem.js), que facilita la escritura de expresiones químicas. A continuación, presentamos algunas de estas expresiones (para mayor información, véase https://mhchem.github.io/MathJax-mhchem/).
$$\ce{H2O} \qquad \ce{Sb2O3} \qquad \ce{H+} \qquad \ce{CrO4^2-}$$
$$\ce{H2O} \qquad \ce{Sb2O3} \qquad \qquad \ce{H+} \qquad \ce{CrO4^2-}$$
$$ \ce{CO2 + C -> 2 CO} $$
$$\ce{CO2 + C -> 2 CO}$$
$$\ce{CH4 + 2O2 -> CO2 + 2H2O} $$
$$\ce{CH4 + 2O2 -> CO2 + 2H2O}$$
$$C_p[\ce{H2O(l)}] = \pu{75.3 J // mol K}$$
$$C_p[\ce{H2O(l)}] = \pu{75.3 J // mol K}$$
La expresión \pu se usa como "unidad física" (physical unit).
$$ \ce{2H2O} \qquad \ce{1/2 H2O} \qquad \ce{(1/2) H2O} $$
$$ \ce{2H2O} \qquad \ce{1/2 H2O} \qquad \ce{(1/2) H2O} $$
$$$\ce{^227_90Th+} \qquad \ce{^0_-1n-} $$
$$\ce{^227_90Th+} \qquad \qquad \ce{^0_-1n-} $$
$$ \ce{A -> B} \qqad \ce{A <- B} $$
$$\ce{A -> B}$$
$$ A \longleftarrow B \\ A \rightleftharpoons B $$
$$ A \longleftarrow B \\ A \rightleftharpoons B$$
$$ \ce{A ->[H2O] B} \qquad \ce{C ->[{arriba}][{abajo}] D} \qquad C \xrightarrow[abajo]{arriba} D $$
$$\ce{A ->[H2O] B} \qquad \ce{C ->[{arriba}][{abajo}] D} \qquad C \xrightarrow[abajo]{arriba} D$$
$$ \ce{A <--> B} \qquad \ce{A <=> B} \qquad \ce{A <<=> B} \qquad \ce{A <=>> B}$$
$$\ce{A <--> B} \qquad \ce{A <=> B} \qquad \ce{A <<=> B} \qquad \ce{A <=>> B}$$
$$\ce{C6H5-CHO} \qquad \ce{A-B=C#D}$$
$$\ce{C6H5-CHO} \qquad \ce{A-B=C#D}$$
$$\ce{A\bond{1}B\bond{2}C\bond{3}D} \qquad \ce{A\bond{~}B\bond{~-}C}$$
$$\ce{A\bond{1}B\bond{2}C\bond{3}D} \qquad \ce{A\bond{~}B\bond{~-}C}$$
$$\ce{A\bond{...}B\bond{....}C}$$
$$\ce{A\bond{...}B\bond{....}C} $$
$$\ce{SO4^2- + Ba^2+ -> BaSO4 v}$$
$$\ce{SO4^2- + Ba^2+ -> BaSO4 v}$$
$$\ce{A v B (v) -> B ^ B (^)}$$
$$\ce{A v B (v) -> B ^ B (^)}$$
Un ejemplo complejo
$$\ce{Zn^2+ <=>[+ 2OH-][+ 2H+] $\underset{\text{hidróxido anfótero}}{\ce{Zn(OH)2 v}}$ <=>[+ 2OH-][+ 2H+] $\underset{\text{Hydroxozikat}}{\ce{[Zn(OH)4]^2-}}$}$$
$$\ce{Zn^2+ <=>[+ 2OH-][+ 2H+] $\underset{\text{hidróxido anfótero}}{\ce{Zn(OH)2 v}}$ <=>[+ 2OH-][+ 2H+] $\underset{\text{Hydroxozikat}}{\ce{[Zn(OH)4]^2-}}$}$$
$$\pu{123 kJ mol-1} \qquad \pu{123 kJ*mol-1} \qquad \pu{1.2E3 kJ} $$
$$\pu{123 kJ mol-1} \qquad \pu{123 kJ*mol-1} \qquad \pu{1.2E3 kJ}$$
$$\pu{1,2e3 kJ} \qquad \pu{123 kJ/mol} \qquad \pu{123 kJ//mol}$$
$$\pu{1,2e3 kJ} \qquad \pu{123 kJ/mol} \qquad \pu{123 kJ//mol}$$