# Elementos básicos para poder escribir en documentos QMD

Autor/a

Pedro J. Pérez

Fecha de publicación

4 de diciembre de 2024

# Intro

Quarto es un sistema diseñado para elaborar documentos con contenido científico-técnico

Un documento `.qmd` tiene 3 partes:

- Yaml: para los metadatos del documento

- Código: nosotros usaremos código R

- Narrativa: escrita en markdown

# 1. Yaml

Veremos muchas opciones cuando repasemos la plantilla para confeccionar vuestros trabajos

# 2. Código (R)

Podemos usar el código de 2 formas:

- Chunks: trozos de código R independientes del texto

- Código inline: código entremezclado con la narrativa, con el texto

## Chunks

## Código inline

- Puedes introducir código en el texto. Por ejemplo: El data.frame `iris` tiene 150 filas y 5 variables. La longitud media del sépalo es 5.8433333. Esto es útil!!!

- Puedes guardar el resultado de una operación en una variable y usarla en el texto. Por ejemplo, la media de la longitud del sépalo es 5.84. Esto es útil!!!

# 3. Texto (o narrativa)

Se escribe en Markdown. Es un lenguaje de marcado ligero que se convierte fácilmente en HTML.

Una excelente guía sobre Markdown la tenéis aquí

## 3.1 Elementos básicos

Los elementos básicos que tenéis para escribir en Markdown son:

### Títulos

- Se crean con `#` (h1), `##` (h2), `###` (h3), etc.

- Tened cuidado de dejar espacio entre las marcas `#` y el texto

- Tened cuidado de anidar correctamente los niveles de los títulos: `#`, `##`, `###`, etc.

### Formato básico el texto

Puedes usar los siguientes elementos para formatear el texto:

- Trozos o palabras en negrita

- Trozos o palabras en cursiva

- Superíndices: por ejemplo R2

- Subíndices: por ejemplo H2O

- Tachado: por ejemplo tachado

- Formatear texto cómo código (verbatim code): por ejemplo `print("Hola mundo")`

- Puedes poner citas: por ejemplo

> “La vida es aquello que te va sucediendo mientras te empeñas en hacer otros planes” (John Lennon)

### Más posibilidades para formatear el texto

- Puedes poner texto subrayado

- Puedes poner texto destacado

- Notas al pie: por ejemplo1

- Emojis, por ejemplo: 😂

- En realidad puedes usar cualquier símbolo Unicode en html, por ejemplo, el símbolo de derechos de autor: © … o el símbolo de la raíz cuadrada: √ o : ⬐ o …. ✅.
  Puedes encontrar un listado amplio de símbolos en esta página 🌏 o en esta otra. Por ejemplo: ∉ ♣

### Listas

Lista no-numerada:

- item nº 1

- item nº 2

Lista numerada:

1. item nº 1

2. item nº 2

Lista Anidada:

- item nº 1
  - subitem 1
  - subitem 2

Puedes ver listas más complejas aquí

## 3.2 Más elementos (de Markdown)

### Enlaces

- Por ejemplo: Quarto

- Si quieres que el enlace se abra en una nueva pestaña: Quarto

### Imágenes

- Puedes incluir imágenes en tu documento. Por ejemplo:

- Más opciones para incluir imágenes aquí

### Tablas

- Puedes incluir tablas en tu documento. Por ejemplo:

    iris %>% head() %>% DT::datatable()

- Una de las sesiones de la semana que viene la dedicaremos a las tablas

### Ecuaciones

- Se han de escribir en Latex.

- Puedes poner ecuaciones de dos formas:

  - Ecuaciones inline (se usa la marca `$`). Por ejemplo: \(y = \beta_0 + \beta_1 x + \epsilon\)

  - Ecuaciones independientes (se usa la marca `$$`). Por ejemplo:

\[y = \beta_0 + \beta_1 x + \epsilon\]

- Si no sabes Latex. Puedes ir aquí o aquí

- Muchas veces podemos reusar el código Latex de ecuaciones en la web (si se ha usado MathJax). Por ejemplo aquí

# 4. Editor Visual

- A vosotros seguro que os resulta útil el editor visual de Quarto. Podéis activarlo en la esquina superior derecha del editor.

- Una guía rápida aquí

# 5. Más elementos (de Quarto)

## 5.1 Slides

- Una introducción aquí

- Una introducción más completa aquí

## 5.2 Tabsets

Los tabsets son una forma de organizar el contenido en pestañas. Por ejemplo:

- El código
- El plot
- Todo junto

Aquí tenemos el código para hacer un plot

    plot(iris)

Vemos el plot

😀

    plot(iris)

## 5.3 Cuadritos

Sirven para resaltar contenido. Por ejemplo:

### Call-outs

Los call-outs son una forma de resaltar contenido. Por ejemplo:

El viernes tenéis que mandarme un mail con un breve resumen de lo que haréis en el trabajo y qué datos usaréis

Nota

Hay 5 tipos de call-outs: `note`, `tip`, `warning`, `caution`, and `important`.

La documentación oficial está aquí

Este call-out puedes expandirlo

Si te gusta el tema de los call-outs, puedes ver este video

### Alerts

Los alerts son otra forma de resaltar contenido. Por ejemplo:

Esto es un mensaje de información

Mensaje de warning

Alerta!!!!

## 5.4 Divs y Spans

- Son elementos que permiten tunear partes del documento. Documentación aquí

- Un ejemplo de uso de Div’s:

This content can be styled with a border

- Otro ejemplo:

This content can be styled with a border

- Un ejemplo de uso de Span’s:

  Un trocito de esta frase irá con un borde. ¿Te das cuenta?

- Otro ejemplo:

  Un trocito de esta frase irá con un borde. ¿Te das cuenta?

- Otros ejemplos:

  - Este texto es tiene una parte de color rojo

  - Este texto tiene una parte en fondo verdecito;

  - Este texto tiene una parte en rojo y fondo amarillo.

## 5.5 CSS(tuneando el documento)

- Podemos tunear el documento con CSS. Por ejemplo, podemos cambiar el color de fondo de los títulos:

    h5 {
      background-color: #f09999;
      font-size: 33px;
    }

- Otro ejemplo: definimos la clase “bigtext

    .big-text {
      font-size: 33px;
    }

Una vez definida la clase `.big-text`, podemos usarla en un `div` o en un `span`

Este texto se verá muy grande

En esta frase una palabra se verá muy grande

En esta frase algo se verá muy grande y en un cuadrito

### Usando mejor el CSS

- Los estilos CSS se suelen guardar en un archivo externo. Para usarlos has de llamar al archivo en el documento. Por ejemplo, has de incluir en el `YAML` lo siguiente:

    css: "ruta/al/archivo.css"

- Si quieres saber un poco más, puedes empezar por aquí

## 5.5 Más cosas

### Layout’s

Conocer el Layout sirve para organizar el contenido de tu documento. Documentación oficial aquí. Aquí un post

#### Ejemplo

- Por ejemplo, si queremos que algo vaya en el margen del documento. Documentación aquí

    plot (iris)

#### Ejemplo

- Por ejemplo, si queremos que una parte vaya en 2 columnas, podemos usar:

Esta columna ocupara el 70% de la página

Esta columna ocupara el 20% de la página

### Extensiones

Quarto tiene multitud de extensiones. Documentación oficial aquí. Aquí las extensioes oficiales. Aquí más extensiones. Aquí un lista awesome de Quarto, y aquí un post

## Notas

1. la marca `^` indica donde se situará la marca de la nota, y el texto de la nota va entre corchetes↩︎