Título
Libro interactivo

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.

Tabla de contenido

Prefacio

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.

Capítulo I

Elementos gráficos e interactivos

Notas generales y al pie de página

Para incluir una nota general en el texto se utiliza el siguiente código HTML:

<div class="note"> Esta es una nota </div>

Lo que muestra el siguiente texto:

Esta es una nota

Para agregar un nota al pie de página es necesario utilizar lo siguiente:

<p>La herramienta para hacer los recursos interactivos se llama DescartesJS<span class="footnote"> <a href="https://descartes.matem.unam.mx" target="_blank">https://descartes.matem.unam.mx</a> </span>.</p>

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:

<span class="footnote"> y </span> es el contenido de la nota al pie de página.

Las notas al pie de página se numeran automáticamente.

Interactivos

Para agregar un interactivo se hace de la siguiente manera:

<div class="interactive" width="819" height="588" src="https://proyectodescartes.org/canals/ materiales_didacticos/LO-JC-08-JS/index.html"></div>

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:

<div class="interactive" width="819" height="588" scale="75%" src="https://proyectodescartes.org/canals/ materiales_didacticos/LO-JC-08-JS/index.html"></div>

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):

<script> window.book_config = { } </script>

O si aparece, pero tiene el valor de false (falso):

<script> window.book_config = { open_interactives_fullscreen: false, } </script>

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

<div class="interactive" width="819" height="588" window-size="true" src="https://proyectodescartes.org/canals/ materiales_didacticos/LO-JC-08-JS/index.html"></div>

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:

<script> window.book_config = { open_interactives_fullscreen: true, } </script>

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.

<div class="interactive" width="819" height="588" src="https://www.geogebra.org/geometry"></div>

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

Vídeos

Para agregar un video local, se utiliza el siguiente código HTML:

<video preload="none" width="100%" controls="" poster="videos/poster/ejemplo.png"> <source src="videos/ejemplo.mp4" type="video/mp4"> </video>

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:

<div class="interactive" width="560" height="315" src="https://www.youtube.com/embed/podf-jQjxaM"></div>

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.

Imágenes

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:

<img loading="lazy" class="image_expand" onclick="openImage(this)" src="https://proyectodescartes .org/descartescms/images/logodescartes.gif" width="80%">

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:

<img loading="lazy" src="https://proyectodescartes.org/ descartescms/images/logodescartes.gif" width="40%">

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 interactivos) también modifica el comportamiento al pulsar sobre las imágenes, ya que al estar activado (valor 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:

<img loading="lazy" class="image_link" onclick="openInteractive('https://proyectodescartes.org/ Telesecundaria/materiales_didacticos/3m_b01_t01_s01-JS/ index.html', '790', '530')" src="https://proyectodescartes.org/Telesecundaria/ imagenes_descripcion_materiales/3m_b01_t01_s01.png" width="80%">

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:

<figure> <img loading="lazy" class="image_expand" onclick=" openImage(this)" src="https://proyectodescartes.org/descartescms/images/ logodescartes.gif" width="50%"> <figcaption>Banner del proyecto descartes.</figcaption> </figure>
Banner del proyecto descartes.

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:

<figure id="IDENTIFICADOR_DE_LA_FIGURA"></figure>

Podemos incluir una referencia a dicha figura, utilizando el siguiente código:

<ref ref_id="IDENTIFICADOR_DE_LA_FIGURA"></ref>

Por ejemplo el siguiente bloque de código:

<p>Observa la <ref ref_id="mi_figura"></ref>.</p> <figure id="mi_figura"> <img loading="lazy" src="https://proyectodescartes.org/ descartescms/images/logodescartes.gif" width="50%"> <figcaption>El título de la figura.</figcaption> </figure>

Muestra lo siguiente:

Observa la .

Información descriptiva de la figura.

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:

<p>Observa la <ref ref_id="mi_tabla"></ref>.</p> <figure id="mi_tabla"> <table> <tr><td>Título 1</td><td>Título 2</td></tr> <tr><td>Valor 1</td><td>Valor2</td></tr> </table> <figcaption prefix="Tabla">Información descriptiva de la tabla. </figcaption></figure>

Muestra lo siguiente:

Observa la .

Título 1Título 2
Valor 1Valor2
Información descriptiva de la tabla.

Bloques autonumerados

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:

<div class="num_block" prefix="PREFIJO_PARA_LA_AUTO_NUMERACIÓN"></div>

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:

<div class="num_block" prefix="Definición">Este es el texto de una definición.</div>

Lo que muestra este texto:

Este es el texto de una definición.

Para incluir una siguiente definición:

<div class="num_block" prefix="Definición">Este es el texto de una nueva definición, que también se numera. </div>

Y se ve así:

Este es el texto de una nueva definición, que también se numera.

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:

<div class="num_block" prefix="Teorema">Este es el texto de un teorema.</div>

Lo que muestra este texto:

Este es el texto de un teorema.

Para agregar un ejemplo podemos utilizar lo siguiente:

<div class="num_block" prefix="Ejemplo">Este es el texto de un ejemplo.</div>

Lo que muestra este texto:

Este es el texto de un ejemplo.

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.

<ref ref_id="ID_DE_LA_DEFINICIÓN_TEOREMA_O_LEMA"></ref>

Por ejemplo el siguiente código:

<div class="num_block" prefix="Lema" id="lema_supremo"> El lema supremo dice ...</div> <p>Como podemos observar en el <ref ref_id="lema_supremo"> </ref> todo es increíble.</p>

Muestra el siguiente texto:

El lema supremo dice ...

Como podemos observar en el todo es increíble.

Referencia a páginas

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:

<pageref ref_id="prefacio"></pageref>

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:

<pageref ref_id="prefacio" prefix="página"></pageref>

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:

<pageref ref_id="prefacio">como se puede ver en el Prefacio</pageref>

Que muestra el siguiente texto: como se puede ver en el Prefacio.

Referencia bibliográfica

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 id="RER119"> Juan Guillermo Rivera Berrío, Joel Espinosa Longi y Alejandro Radillo Díaz. <b>Descartes JS - Nivel - I </b>. Fondo Editorial Pascual Bravo. 2ª edición. 2019. </bibitem> <bibitem id="RER219"> Juan Guillermo Rivera Berrío, Joel Espinosa Longi y Alejandro Radillo Díaz. <b>Descartes JS - Nivel - II </b>. Fondo Editorial Pascual Bravo. 2ª edición. 2019. </bibitem>

<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):

<bibref ref_id="IDENTIFICADOR_DE_BIBLIOGRAFÍA"></bibref>

Por ejemplo el siguiente código:

Para aprender más sobre Descartes se pueden consultar los libros: Descartes JS - Nivel - I (<bibref ref_id="RER119"></bibref>) y Descartes JS - Nivel - II (<bibref ref_id="RER219"></bibref>).

Muestra el siguiente texto:

Para aprender más sobre Descartes se pueden consultar los libros: Descartes JS - Nivel - I () y Descartes JS - Nivel - II ().

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.

Código

Para mostrar código dentro de una línea de texto, se utiliza lo siguiente:

<code>x=100</code>

Código en línea x=100.

Para mostrar código en un bloque, por ejemplo para describir un algoritmo, se utiliza:

<pre> x=4 y=10 r=x+y </pre>
x=4
y=10
    r=x+y

Hay que considerar que la etiqueta <pre> respeta los espacios en blanco.

Capítulo II

Expresiones matemáticas con MathJax

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,

&#36; de lo contrario MathJax intentará parsear lo que sigue después del signo de pesos ($), como si fuera código latex.

Expresiones simples

2.1.1. Exponentes y subíndices: $$H_2O H^2 O^{2+}$$

$$H_2O\space\space H^2\space\space O^{2+}$$

2.1.2. Vectores: $$\vec{A} \space \widehat{r}$$

$$\vec{A} \space \widehat{r}$$

2.1.3. Derivación: $$\nabla \partial x dx \dot x \ddot y$$

$$\nabla \partial x dx \dot x \ddot y$$

2.1.4. Conjuntos: $$\forall x \subseteq A \cap B \cup \exists$$

$$\forall x \subseteq A \cap B \cup \exists$$

2.1.5. Lógica: $$ p \land \bar{q} \to p\lor \lnot q$$

$$p \land \bar{q} \to p\lor \lnot q$$

2.1.6. Raíces: $$\sqrt{2}\approx 1,4142 \\ \sqrt[n]{x}$$

$$\sqrt{2}\approx 1,4142 \\ \sqrt[n]{x}$$

2.1.7. Relaciones: $$\sim \simeq \cong \le \ge \equiv \equiv\not \approx$$

$$\sim \space \simeq \space\cong\space \le\space \ge\space \equiv\space \equiv\not\space \approx $$

2.1.8. Geometría: $$\triangle \angle \perp \| 45^\circ$$

$$\triangle \angle \perp \| 45^\circ$$

Expresiones complejas

2.2.1. Sumatorio: $$\sum_{k=1}^N k^2$$

$$\sum_{k=1}^N k^2$$

2.2.1. Integral: $$\int_{-a}^{b} e^x\, dx$$

$$\int_{-a}^{b} e^x\, dx$$

2.2.2. Integral de línea: $$\oint_{C} x^3\, dx + 4y^2\,dy$$

$$\oint_{C} x^3\, dx + 4y^2\,dy$$

2.2.3. Límite: $$\lim_{x \to{+}\infty}{f(x)}$$

$$\lim_{x \to{+}\infty}{f(x)}$$

2.2.4. Productorio: $$\prod_{i=1}^n p_i$$

$$\prod_{i=1}^n p_i$$

2.2.5. Binomial: $$ \binom{n}{k}$$

$$ \binom{n}{k}$$

Matrices

2.3.1. Tipo 1: $$ \begin{matrix} x & y \\ z & v \end{matrix}$$

$$\begin{matrix} x & y \\ z & v \end{matrix}$$

2.3.2. Tipo 2: $$ \begin{bmatrix} x & y \\ z & v \end{bmatrix}$$

$$\begin{bmatrix} x & y \\ z & v \end{bmatrix}$$

2.3.3. Tipo 3: $$ \begin{Bmatrix} x & y \\ z & v \end{Bmatrix}$$

$$\begin{Bmatrix} x & y \\ z & v \end{Bmatrix}$$

2.3.4. Tipo 4: $$ \begin{pmatrix} x & y \\ z & v \end{pmatrix}$$

$$\begin{pmatrix} x & y \\ z & v \end{pmatrix}$$

2.3.5. Tipo 5: $$ \begin{vmatrix} x & y \\ z & v \end{vmatrix}$$

$$\begin{vmatrix} x & y \\ z & v \end{vmatrix}$$

2.3.6. Tipo 6: $$ \begin{Vmatrix} x & y \\ z & v \end{Vmatrix}$$

$$\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}$$

$$\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} $$

$$x = \begin{cases} a &\text{si } b \\ c &\text{si } d\end{cases}$$

Delimitadores

2.4.1. Paréntesis tipo 1: $$ \left(\frac{1}{2} \right) $$

$$\left(\frac{1}{2} \right) $$

2.4.2. Paréntesis tipo 2: $$ \bigg(\frac{1}{2} \bigg) $$

$$\bigg(\frac{1}{2} \bigg) $$

2.4.3. Para integral: $$e^x\bigg|_a^b$$ $$I=F(x)\Big]_a^b$$

$$e^x\bigg|_a^b$$ $$I = F(x)\Big ]_a^b$$

Espaciado

2.5.1. Tipo 1 (\quad): $$\bullet \quad \infty \quad \ell$$

$$\bullet \quad \infty \quad \ell$$

2.5.2. Tipo 2 (\space): $$\bullet \space \infty \space \ell$$

$$\bullet \space \infty \space \ell$$

2.5.3. Tipo 3 (\qquad): $$\bullet \qquad \infty \qquad \ell$$

$$\bullet \qquad \infty \qquad \ell$$

2.5.4. Tipo 4 (\;): $$\bullet \; \infty \;\; \ell$$

$$\bullet \; \infty \;\;\ell$$

Tachar o cancelar

\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}$$

Otros

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

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

Capítulo III

Expresiones químicas con MathJax

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

Fórmulas químicas

$$\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-}$$

Ecuaciones químicas (ce)

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

Números estequiométricos

$$ \ce{2H2O} \qquad \ce{1/2 H2O} \qquad \ce{(1/2) H2O} $$ $$ \ce{2H2O} \qquad \ce{1/2 H2O} \qquad \ce{(1/2) H2O} $$

Isótopos

$$$\ce{^227_90Th+} \qquad \ce{^0_-1n-} $$ $$\ce{^227_90Th+} \qquad \qquad \ce{^0_-1n-} $$

Reacciones

$$ \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}$$

Enlaces

$$\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} $$

Precipitado

$$\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-}}$}$$

Unidades

$$\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}$$

Bibliografía de muestra

Juan Guillermo Rivera Berrío, Joel Espinosa Longi y Alejandro Radillo Díaz. Descartes JS - Nivel - I. Fondo Editorial Pascual Bravo. 2ª edición. 2019. Juan Guillermo Rivera Berrío, Joel Espinosa Longi y Alejandro Radillo Díaz. Descartes JS - Nivel - II. Fondo Editorial Pascual Bravo. 2ª edición. 2019.