# Edición: guía de uso

Este libro es una guía para los editores de este sitio. Cuenta con ejemplos básicos de las funcionalidades y herramientas de la plataforma.

Además, mostramos de manera simple la organización del contenido dentro de los libros de la plataforma.

# Guía de uso

Bienvenida/o a las notas y talleres de Matemáticas del Departamento de Matemáticas del ITAM.

Este proyecto piloto tiene la intención de crear, de forma colaborativa, material de referencia para los estudiantes de los cursos --inicialmente los departamentales -- **de la División de Ciencias Exactas del ITAM.** Cualquier profesor/a está invitado/a a colocar sus recursos educacionales en esta plataforma para mejorar la accesibilidad de los estudiantes al material.

A continuación una guía muy breve sobre el uso de los herramientas disponibles en la plataforma.

---

### Matemáticas: LaTeX a través de MathJax

Para colocar ecuaciones y expresiones matemáticas en el texto <span style="text-decoration: underline;">**podemos usar código LaTeX de manera usual**</span> con una pequeña <span style="text-decoration: underline;">**modificación en los separadores**</span>:

- Las ecuaciones en línea se colocan usando: **\\(** para abrir y **\\)** para cerrar. <span style="color: rgb(186, 55, 42);">El símbolo **$** no es reconocido</span>.
- Para ecuaciones destacadas usamos: **\\\[** para abrir y **\\\]** para cerrar. <span style="color: rgb(186, 55, 42);">El símbolo **$$** no se reconoce.</span>

Por ejemplo, el código:

```latex
La función de densidad de la distribución normal \( f: \mathbb{R} \longrightarrow \mathbb{R} \) con
media \( \mu \) y desviación estándar \( \sigma > 0 \) está definida por la regla de correspondencia:
\[ f(x) = \frac{1}{\sqrt{2\pi\sigma^2}} e^{-\frac{(x-\mu)^2}{2\sigma^2}} \]
```

genera el párrafo:

<p class="callout info">La función de densidad de la distribución normal \\( f: \\mathbb{R} \\longrightarrow \\mathbb{R} \\) con media \\( \\mu \\) y desviación estándar \\( \\sigma &gt; 0 \\) está definida por la regla de correspondencia:   
\\\[ f(x) = \\frac{1}{\\sqrt{2\\pi\\sigma^2}} e^{-\\frac{(x-\\mu)^2}{2\\sigma^2}} \\\]</p>

---

### Estilos de texto y formatos

<table border="1" id="bkmrk-el-editor-de-texto-e" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 50%;"></col><col style="width: 50%;"></col></colgroup><tbody><tr><td>![image.png](https://book.cardamomo.org/uploads/images/gallery/2026-02/scaled-1680-/Tmzimage.png)</td><td>El editor de texto es muy fácil de usar, es de la categoría WYSIWYG ("What You See Is What You Get"). En la barra de arriba puedes encontrar los formatos clásicos de un editor de texto: **(B) negritas**, *(I) itálicas*, <span style="text-decoration: underline;">(U) subrayado</span>, **<span style="color: rgb(224, 62, 45);">color</span> <span style="color: rgb(35, 111, 161);">del</span> <span style="color: rgb(132, 63, 161);">texto</span>**, <span style="background-color: rgb(241, 196, 15);">destacado con marcatextos</span>, <s>tachado</s>, <sup>superíndice</sup>, <sub>subíndice</sub>, `<código en línea>`. El último botón es para remover el formato aplicado.

</td></tr></tbody></table>

Además de las opciones clásicas de alineación del texto, viñetas y numeración, el editor tiene estilos predefinidos para títulos de distintos niveles, el primer botón te permite seleccionar el estilo:

## Sección (Large Header)

### Subsección (Medium Header)

#### Subsubsección (Small Header)

##### Subsubsubsección (Tiny Header)

Párrafo (estilo de texto por defecto)

> Cita en bloque

**Cuadros destacados de colores:**

<p class="callout info">Información</p>

<p class="callout success">Éxito</p>

<p class="callout warning">Advertencia</p>

<p class="callout danger">Peligro</p>

---

### Enlaces, tablas y ambientes enriquecidos

<table border="1" id="bkmrk-en-la-pen%C3%BAltima-secc" style="border-collapse: collapse; width: 100%; border-width: 0px;"><colgroup><col style="width: 40.4167%;"></col><col style="width: 59.7025%;"></col></colgroup><tbody><tr><td style="border-width: 0px;">![image.png](https://book.cardamomo.org/uploads/images/gallery/2026-02/scaled-1680-/lJrimage.png)

</td><td style="border-width: 0px;">En la penúltima sección de la barra de herramientas, se encuentran estos botones, que nos permiten aprovechar el <span style="text-decoration: underline;">**enriquecimiento del contenido**</span> como si fuera una <span style="text-decoration: underline;">**página web**</span>.

Las herramientas en estas opciones nos permiten crear:

</td></tr></tbody></table>

![image.png](https://book.cardamomo.org/uploads/images/gallery/2026-02/scaled-1680-/Kogimage.png) Los **enlaces** son fáciles usar, sólo insertarlos y elegir tanto el texto como la dirección a la que enlaza, por ejemplo, aquí se incluye un enlace a la [página web del Departamento de Matemáticas del ITAM](https://departamentodematematicas.itam.mx/ "DepMAt ITAM"). El texto que aparece al colocar el mouse sobre el link es editable y también es importante decidir si queremos que el enlace se muestre <span style="text-decoration: underline;">en la misma pestaña del navegador o una nueva</span>.

<table border="1" id="bkmrk-el-bot%C3%B3n-con-la-tabl" style="border-collapse: collapse; width: 100%; border-width: 0px;"><colgroup><col style="width: 57.3215%;"></col><col style="width: 42.7977%;"></col></colgroup><tbody><tr><td style="border-width: 0px;">El botón con la **tabla** permite crear tablas del tamaño que se quiera, además de editarlas en todas las formas posibles.

Esto es una de las cosas que en web es difícil de resolver, pero aquí se nos ofrece en el esquema WYSIWYG ("What You See Is What You Get") bastante funcional y robusto.

![image.png](https://book.cardamomo.org/uploads/images/gallery/2026-02/scaled-1680-/zRuimage.png) El botón de insertar imagen, permite seleccionar imágenes que ya están disponibles en el archivo de imágenes de la página o subir una imagen nueva.

**También se puede solamente pegar una imagen directamente en el editor y esta quedará colocada y disponible para futuras inserciones.**

Toma en cuenta que las imágenes generan vínculos a la imagen por defecto, pero si la seleccionas, es muy simple remover este comportamiento.

</td><td style="border-width: 0px;">![image.png](https://book.cardamomo.org/uploads/images/gallery/2026-02/scaled-1680-/R6Rimage.png)

</td></tr></tbody></table>

![image.png](https://book.cardamomo.org/uploads/images/gallery/2026-02/scaled-1680-/dTLimage.png) También tenemos disponibles las **líneas horizontales** que puedes observar como separadores en esta página.

![image.png](https://book.cardamomo.org/uploads/images/gallery/2026-02/scaled-1680-/Cx5image.png) Los **ambientes de código** disponen de <span style="text-decoration: underline;">reconocimiento de sintaxis y embellecimiento de código</span> para diversos lenguajes: C++, **R, Python, LaTeX**, HTML, Javascript, entre muchos otros.

```python
def factorial(n):
    #Calcula el factorial de un número natural n
    if n == 0: # Caso base!
        return 1
    else: # Definición recursiva:
        return n * factorial(n - 1)
```

![image.png](https://book.cardamomo.org/uploads/images/gallery/2026-02/scaled-1680-/iTuimage.png) La plataforma cuenta con un editor de gráficos para crear diagramas de flujo y otras figuras simples.

<div drawio-diagram="33"><img src="https://book.cardamomo.org/uploads/images/drawio/2026-02/drawing-1-1771620510.png" alt=""/></div>

![image.png](https://book.cardamomo.org/uploads/images/gallery/2026-02/scaled-1680-/D5dimage.png) Bloques plegables, muy útiles para dejar ocultas notas, o, en nuestro caso, detalles alternativos o soluciones a problemas.

<details id="bkmrk-soluci%C3%B3n-al-problema"><summary>Solución al problema</summary>

La solución a un problema permanece oculta para permitir que el lector intente por su cuenta, por ejemplo.

</details>![image.png](https://book.cardamomo.org/uploads/images/gallery/2026-02/scaled-1680-/pIEimage.png) Podemos colocar cualquier contenido de internet que tenga un código para **embedding**, por ejemplo, videos y aplicaciones de Geogebra, Desmos, etc:

<iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen" frameborder="0" height="450" src="https://www.youtube-nocookie.com/embed/UOuxo6SA8Uc?si=AorF3T04vNbg3xTS" style="width: 800px; height: 450px;" title="YouTube video player" width="800"></iframe>

<iframe height="534px" scrolling="no" src="https://www.geogebra.org/material/iframe/id/rhfvs77r/width/1200/height/800/border/888888/sfsb/true/smb/false/stb/false/stbh/false/ai/false/asb/false/sri/false/rc/false/ld/false/sdz/true/ctl/false" style="border: 0px;" title="[GeoVec] Trigonometricas" width="800px"> </iframe>

---

### Organización del contenido

<table border="1" id="bkmrk-cuando-est%C3%A1s-editand" style="border-collapse: collapse; width: 100%; border-width: 0px;"><colgroup><col style="width: 7.98721%;"></col><col style="width: 92.0108%;"></col></colgroup><tbody><tr><td style="border-width: 0px;">![image.png](https://book.cardamomo.org/uploads/images/gallery/2026-02/scaled-1680-/PMwimage.png)

</td><td style="border-width: 0px;">Cuando estás editando, a la derecha del editor aparece esta barra, que te permite añadir:

- **Etiquetas** en el texto, a las que puedes hacer referencia en otros lugares del libro.
- **Archivos adjuntos**, como texto en PDF, cuadernos de Python o cualquier otro archivo que quieras colocar disponible para descarga como complemento al texto.
- Definir si la página que estás editando debe ser guardada como una **platilla** para facilitar el formato de futuras páginas.
- Y, finalmente, colocar **comentarios** para los otros editores.

</td></tr></tbody></table>

La plataforma está organizada con contenido en tres tipo: Libros, Capítulos y Páginas. Los libros pueden contener páginas y capítulos, los capítulos pueden contener páginas. Esto permite una organización flexible que se adapta a la extensión y el tipo de contenido que se quiere colocar.

<div drawio-diagram="24"><img src="https://book.cardamomo.org/uploads/images/drawio/2026-02/drawing-1-1771526702.png" alt=""/></div>

El contenido puede ser reorganizado en cualquier momento de forma libre: renombrando capítulos y páginas; y **moviendo las páginas** de lugar, entre capítulos o incluso entre libros. Aquí un ejemplo del menú de organización del contenido para este libro:

[![image.png](https://book.cardamomo.org/uploads/images/gallery/2026-02/scaled-1680-/lOaimage.png)](https://book.cardamomo.org/uploads/images/gallery/2026-02/lOaimage.png)

# Capítulo 1 (ejemplo)

# Introducción al capítulo



# Primera sección del capítulo 1