Aprendiendo a escribir en QMD
Programación y manejo de datos con R (Slides 07-B)
Forma de trabajar con el “entorno R”
- Ya sabéis que R es un entorno (y un lenguaje de programación) para hacer estadística
- En esta sección del curso nos centraremos en la última etapa: la presentación de los resultados, la generación de documentos
Los documentos que generemos serán reproducibles: generaremos directamente el documento final sin copiar ni pegar nada, sino usando código.
Para ello, hemos de aprender a escribir en QMD (Quarto Markdown) (❗❗)
¿Cómo interactuaremos con Quarto?
No “veremos” a Quarto.
Daremos ordenes a Quarto a través de RStudio
Visualmente
Visualmente (pero más realista)
source code (escrito en QMD)
output
Dos cosillas sobre los Qprojects
- ¿Cómo abrirlos?
- Siempre desde el fichero con icono azulito y extensión
.Rproj
- Siempre desde el fichero con icono azulito y extensión
- ¿Cómo saber si realmente estás dentro de un proyecto?
- En la esquina superior-izquierda de tu RStudio verás el icono azulito junto al nombre de tu proyecto
Tarea 2.5: Crear un fichero .qmd (Un Quarto document)
En el Qproject
"my_primer_qproject", crea un “Quarto document”Durante el proceso de creación te pedirá un “Title” y un “Author”: pon lo que quieras
El fichero que acabamos de crear es nuestro documento fuente
Pégale un vistazo al documento fuente, antes de que Quarto lo procese, para intentar descubrir sus partes
De momento, es mejor que visualicemos el documento en formato “Source”
Procesa (“Render”) el documento
.qmdque acabamos de crear.Al intentar procesarlo te pedirá un nombre. LLamalo
index¿Qué ha pasado finalmente?
Los documentos .qmd tienen 3-4 partes
Encabezamiento (yaml header)
Trozos de código R (R chunks)
Texto (escrito en Markdown) …
… y todo lo demás: imágenes, links, ecuaciones, etc …
Un ejemplo
source code (escrito en QMD)
output
(II) Code Blocks o chunks (código R)
- Para que Quarto sepa qué partes del
.qmdes código R, debe ir dentro de estas marcas:
- Por ejemplo:
- Cuando Quarto/
knitrprocesen el chunk, se interpretará como código R y ejecutará las instrucciones, de forma que, en el documento final, se mostrará el output generado por el chunk.
(II) Chunks: los chunks pueden tener opciones.
- Por ejemplo:
- Las principales opciones son:
| Opción | (valor por defecto) | ¿Que hace? |
|---|---|---|
echo |
true | Incluye el código en el documento final |
eval |
true | Evalúa el código |
warning |
true | Incluye los avisos en el documento final |
message |
true | Incluye los mensajes |
(II) Chunks: opciones de los chunks en el YAML
- En el YAML, podemos fijar los valores por defecto de las opciones de los chunks
- Se han de poner anidadas dentro de
execute:
Por ejemplo:
.Qmd (chunk options en el chunk)
.Qmd (chunk options en el yaml)
R Fy![X)#[ @ / f * f A h t m l . j s o n {
"hash": "3e467a7ca7b83bc3dbb3e9ece778c880",
"result": {
"engine": "knitr",
"markdown": "---\ntitle: \"Aprendiendo a escribir en QMD\"\n#date: 2023-09-04 #- ISO8601 YYYY-MM-DD format \nsubtitle: | \n {{< var my_subtitle2 >}}\ndate-format: long\nlang: es\nformat: \n revealjs:\n scrollable: true\n slide-level: 2\n height: 900\n width: 1600\n toc: false\n from: markdown+emoji #- usar emojis https://gist.github.com/rxaviers/7360908)\n center-title-slide: true\n title-slide-attributes: #- atributos para la slide de titulo\n data-background-color: \"#562457\" #- color de R-ladies\n #data-background-image: /imagenes/economia.gif\n #data-background-size: contain \n preview-links: auto #- true: abre un iframe en lugar de abrir ventana\n #multiplex: true #- para que puedas manejar las slides del publico\n link-external-newwindow: true\n transition: fade\n #height: 900\n #width: 1600\n fontcolor: \"#262d36\"\n highlight-style: a11y\n code-line-numbers: true\n number-sections: false\n slide-number: c/t # https://pandoc.org/MANUAL.html#structuring-the-slide-show\n incremental: false # https://quarto.org/docs/presentations/#incremental-lists\n#logo: imagenes/economia.gif\n#footer: |\n# {{< var webcurso >}}\nrevealjs-plugins: [pointer]\n # - lightbox\n # - pointer # hay q apretar q\n#css: assets/styles_slides_intro.css\n #theme: [moon, custom.scss]\nembed-resources: true\nlightbox: true\n---\n\n\n\n# ¿Que haremos en esta sección? {background-color=\"#b8c2aa\"}\n\n\n{{< var lineanaranja >}}\n\n\n\n
\n\n- Aprender a **usar \"el entorno R\" para escribir**, para generar documentos\n\n---\n\n## Forma de trabajar con el \"entorno R\" \n\n- Ya sabéis que **R es un entorno** (y un lenguaje de programación) **para hacer estadística**\n\n. . . \n\n\n- En esta sección del curso nos centraremos en la última etapa: la **presentación de los resultados**, la generación de documentos\n\n{fig-align=\"center\" width=\"55%\"}\n\n\n. . .\n\n- Los documentos que generemos serán **reproducibles**: generaremos directamente el documento final sin copiar ni pegar nada, sino **usando código**.\n\n- Para ello, hemos de aprender a escribir en **QMD** (Quarto Markdown) (❗❗)\n\n\n\n\n\n---\n\n\n## ¿Qué tipos de documentos haremos? {.color-header}\n\n- Haremos distintos tipos de documentos: **tutoriales**, **transparencias**, **páginas web**, **...**\n\n. . .\n\n\n - . . . aunque, con Quarto se pueden generar **documentos de muchos tipos** (artículos académicos, libros, tesis, cartas, cuadros de mando, etc ... etc ...) **y formatos** (html, pdf, epub, docx, beamer, pptx, etc ... etc ...). \n \n - Para verlo puedes visitar la [Quarto gallery](https://quarto.org/docs/gallery/){target=\"blank\"}\n\n. . .\n\n\n#### Algunos ejemplos:\n\n- **Tutoriales**: por ejemplo [este](https://quarto-dev.github.io/quarto-gallery/page-layout/tufte.html){target=\"blank\"} o [este](https://perezp44.github.io/web.Econometria.GADE/materiales/cuestionario_practicas.html){target=\"blank\"}\n\n- **Slides**: por ejemplo [estas](https://laderast.github.io/qmd_rmd/#/title-slide){target=\"blank\"} o [estas](https://apreshill.github.io/palmerpenguins-useR-2022/#/title-slide){target=\"blank\"}\n\n- **Páginas web**: por ejemplo [esta](https://nicar.r-journalism.com/), [esta](https://sta210-s22.github.io/website/){target=\"blank\"} o [esta](https://www.mm218.dev/){target=\"blank\"}\n\n- **Blogs**: por ejemplo [este](https://www.mrworthington.com/){target=\"blank\"} o [este](https://blog.djnavarro.net/){target=\"blank\"}\n\n\n\n\n\n\n# Primeras ideas (sobre Quarto){background-color=\"#b8c2aa\"}\n\n\n{{< var lineanaranja >}}\n\n\n\n
\n\n. . .\n\n¿Qué es Quarto?\n\n¿Cómo trabajaremos con Quarto?\n\n-----------------------------------------------------------------------\n\n## ¿Qué es **Quarto**?\n\n- No es un paquete, es **un programa de ordenador**\n\n\n. . .\n\n\n- Es un sistema para escribir, para generar **publicaciones científico-técnicas**, dentro del ecosistema R.\n\n. . . \n\n- Es la **segunda generación de Rmarkdown**\n\n\n
\n\n---\n\n## ¿Cómo interactuaremos con Quarto?\n\n\n\n- No \"veremos\" a Quarto.\n\n- Daremos ordenes a Quarto a través de RStudio\n\n\n\n. . .\n\n
\n\n#### Visualmente\n\n\n{#fig-00 fig-align=\"center\" width=\"40%\"}\n\n---\n\n### Visualmente (pero más realista)\n\n
\n\n::: {columns}\n::: {.column width=\"42%\"}\n#### source code (escrito en QMD)\n\n\n::: {.cell layout-align=\"center\"}\n::: {.cell-output-display}\n{fig-align='center' width=100%}\n:::\n:::\n\n:::\n\n::: {.column width=\"13%\"}\n
\n\n\n::: {.cell layout-align=\"center\"}\n::: {.cell-output-display}\n{fig-align='center' width=70%}\n:::\n:::\n\n:::\n\n::: {.column width=\"42%\"}\n#### output\n\n\n::: {.cell layout-align=\"center\"}\n::: {.cell-output-display}\n{fig-align='center' width=100%}\n:::\n:::\n\n:::\n:::\n\n\n\n# Primeros pasos con Quarto {background-color=\"#b8c2aa\"}\n\n\n{{< var lineanaranja >}}\n\n\n\n
\n\n\n\n# Trabajaremos usando proyectos {background-color=\"#ebf5fb\"}\n\n\n{{< var lineanaranja >}}\n\n\n\n. . .\n\n
\n\nRepito, vamos a trabajar con proyectos, concretamente con ...\n\n
\n\n. . .\n\n... Quarto projects o **Qprojects**\n\n------------------------------------------------------------------------\n\n## ¿Qué es un **Q**project?\n\n- Es simplemente una **carpeta** donde tendremos los \"materiales\" que necesitemos para uno de nuestros proyectos\n\n. . .\n\n- Pero **usarlos tiene ventajas**. Puedes ver algunas en [este post de Jenny Bryan](https://www.tidyverse.org/blog/2017/12/workflow-vs-script/)\n\n- Para nosotros la principal ventaja consiste en que **podremos usar rutas relativas**\n\n
\n\n------------------------------------------------------------------------\n\n## ¿Cómo se crea un Qproject?\n\n- En RStudio has de seguir la siguiente ruta de menús: `File > New Project > New Directory > Quarto Project` , y ponerle un nombre a la carpeta del Qproject.\n\n. . .\n\n::: {.callout-important icon=\"false\"}\n#### Tarea 2.3: Creación de un **Q**project\n\n- Simplemente tienes que crear un Qproject que se llame \"my_primer_qproject\"\n\n- Mejor si creas el Qproject en el Escritorio\n\n- Mira cuantos archivos hay en la carpeta del proyecto \n\n:::\n\n\n\n\n\n
\n\n------------------------------------------------------------------------\n\n## Dos cosillas sobre los Qprojects\n\n::: {columns}\n::: {.column width=\"65%\"}\n1. ¿Cómo abrirlos?\n - Siempre desde el fichero con icono azulito y extensión `.Rproj`\n:::\n\n::: {.column width=\"25%\"}\n\n::: {.cell layout-align=\"center\"}\n::: {.cell-output-display}\n{fig-align='center' width=95%}\n:::\n:::\n\n:::\n:::\n\n. . .\n\n::: {columns}\n::: {.column width=\"65%\"}\n2. ¿Cómo saber si realmente estás dentro de un proyecto?\n - En la esquina superior-izquierda de tu RStudio verás el icono azulito junto al nombre de tu proyecto\n:::\n\n::: {.column width=\"25%\"}\n\n::: {.cell layout-align=\"center\"}\n::: {.cell-output-display}\n{fig-align='center' width=95%}\n:::\n:::\n\n:::\n:::\n\n------------------------------------------------------------------------\n\n::: {.callout-important icon=\"false\"}\n#### Tarea 2.4: Abriendo y cerrando **Q**project's\n\n- Cierra RStudio \n\n- Vuelve a abrir el Qproject `\"my_primer_qproject\"`\n\n- Asegúrate de que realmente \"estás\" en `\"my_primer_qproject\"`\n\n
\n\n- Borra todos los archivos del Qproject excepto el fichero `.Rproj`\n\n\n
\n\n:::\n\n\n\n# Creación de documentos `.qmd` {background-color=\"#b8c2aa\"}\n\n\n{{< var lineanaranja >}}\n\n\n\n
\n\n. . .\n\n
\n\nVamos ya a crear nuestro primer fichero `.qmd`\n\n... eso sí, lo crearemos **dentro de un Qproject**\n\n------------------------------------------------------------------------\n\n::: {.callout-important icon=\"false\"}\n#### Tarea 2.5: Crear un fichero `.qmd` (Un Quarto document)\n\n- En el Qproject `\"my_primer_qproject\"`, **crea un \"Quarto document\"**\n\n- Durante el proceso de creación te pedirá un \"Title\" y un \"Author\": pon lo que quieras\n\n::: {.fragment}\n- El fichero que acabamos de crear es nuestro **documento fuente**\n\n- Pégale un vistazo al documento fuente, antes de que Quarto lo procese, para intentar descubrir sus partes\n\n- De momento, es mejor que visualicemos el documento en formato \"Source\"\n\n::: {.cell layout-align=\"center\"}\n::: {.cell-output-display}\n{fig-align='center' width=32%}\n:::\n:::\n:::\n\n::: {.fragment}\n\n- Procesa (\"Render\") el documento `.qmd` que acabamos de crear. \n\n- Al intentar procesarlo te pedirá un nombre. **LLamalo `index`**\n\n- ¿Qué ha pasado finalmente?\n:::\n\n:::\n\n\n\n
\n\n##
Vamos a jugar un rato con RStudio {background-color=\"#ebf5fb\"}\n\n\n{{< var lineanaranja >}}\n\n\n\n. . .\n\n
\n\nNos servirá para familiarizarnos con :\n\n- la interfaz de Rstudio\n\n- los conceptos de **documento fuente** (.qmd) y **documento final** (.html, .pdf, etc...)\n\n
\n\n. . .\n\n... y empezar a entender la **sintaxis** de \"Quarto Markdown\"\n\n------------------------------------------------------------------------\n\n::: {.callout-important icon=\"false\"}\n#### Tarea 2.6a: Creamos un nuevo qmd: `\"prueba_01.qmd\"`\n\n- Vamos a crear un nuevo documento \".qmd\". \n\n- Procésalo. Esta vez llámalo `prueba_01.qmd`\n\n:::\n\n
\n\n\n\n::: {.fragment}\n\n::: {.callout-important icon=\"false\"}\n#### Tarea 2.6b: Reusamos `\"prueba_01.qmd\"` para crear un pdf\n\n- Vamos a reusar el fichero fuente `prueba_01.qmd` para generar un pdf. Para ello:\n\n - En el encabezamiento has de cambiar \"`format: html`\" por \"`format: pdf`\"\n \n - **PERO** si al intentar procesarlo te dice que instales \"tinytex\", entonces para, **no lo hagas!!**, ya lo haremos en el descanso. Para ello tendrás que ejecutar en la Terminal `quarto install tinytext`\n:::\n:::\n\n\n\n\n
\n\n------------------------------------------------------------------------\n\n\n\n::: {.callout-important icon=\"false\"}\n#### Tarea 2.6c: Usamos `\"prueba_01.qmd\"` para generar unas slides\n\n- Reutiliza `\"prueba_01.qmd\"` para generar unas \"revealjs\" slides. Solo has de cambiar el formato de salida!!\n\n\n::: {.fragment}\n- Si avanzas aparecerá la solución. Inténtalo sin mirar la solución!!!!\n:::\n\n::: {.fragment}\n\n- La solución: \n\n```yaml\ntitle: \"prueba_01\"\nformat: revealjs\n``` \n\n:::\n:::\n\n
\n\n::: {.fragment}\n\n::: {.callout-important icon=\"false\"}\n#### Tarea 2.6d: Vamos a cambiar la apariencia visual de las slides\n\n- Vamos a cambiar el **theme** de las \"revealjs\" slides. Para ello:\n\n```yaml\ntitle: \"prueba_01\"\nformat:\n revealjs:\n theme: night\n``` \n\n
\n\n::: {.fragment}\n- Puedes probar otros themes de [este listado](https://quarto.org/docs/presentations/revealjs/themes.html#using-themes)\n:::\n\n:::\n\n:::\n\n\n
\n\n\n\n\n\n
\n\n\n------------------------------------------------------------------------\n\n::: {.callout-important icon=\"false\"}\n#### Tarea 2.6e: Ahora vamos a cambiar el \"theme\" usado en el fichero `index.qmd`\n\n- El listado de \"themes\" lo tienes [aquí](https://quarto.org/docs/output-formats/html-themes.html)\n\n- Piensa bien cómo has de dejar el \"yaml\". Apóyate en lo que hemos hecho para las slides\n\n- La solución está más adelante, pero no la mires\n\n
\n\n::: {.fragment}\n- Solución: has de dejar el \"YAML\" del qmd como:\n\n```yaml\ntitle: \"Mi documento\"\nauthor: \"Nosotros\"\ndate: today\nformat:\n html:\n theme: sandstone\n``` \n:::\n \n:::\n \n\n\n\n
\n\n------------------------------------------------------------------------\n\n::: {.callout-important icon=\"false\"}\n#### Tarea 2.7: Vamos a usar nuestro Qproject para generar una página web\n\n- Modifica el archivo `_quarto.yml` para que su contenido sea:\n\n
\n\n```yaml\nproject:\n type: website\n \nwebsite:\n navbar:\n right: \n - prueba_01.qmd\n```\n\n
\n\n- Para generar la página web tienes que hacer un \"Build > Render Project\"\n\n
\n\n:::\n\n\n\n
\n\n------------------------------------------------------------------------\n\n::: {.callout-important icon=\"false\"}\n#### Tarea 2.8: Añade una nueva página a nuestra página web\n\n- Pista: puedes reutilizar el contenido del fichero `index.qmd`\n\n:::\n\n\n\n\n. . . \n\n::: {.callout-important icon=\"false\"}\n#### Una solución a la Tarea 2.8\n\n\n```yaml\nproject:\n type: website\n \nwebsite:\n navbar:\n background: \"#DF55CB\"\n right: \n - text: \"Info\"\n href: index.qmd\n - text: \"Más Info\"\n href: index.qmd\n left: \n - icon: house-door\n href: index.qmd \n```\n\n:::\n\n
\n\n::: {.fragment}\n::: {.callout-important icon=\"false\"}\n#### Tarea 2.8b: Haz que se vean las slides en la web\n\n- Esta vez no hay solución\n\n:::\n:::\n\n\n\n
\n\n\n\n\n# Lo que ya sabemos {background-color=\"#b8c2aa\"}\n\n\n{{< var lineanaranja >}}\n\n\n\n
\n\n. . .\n\n- Trabajamos con Qprojects\n\n- Documento fuente escrito en **Qmd** genera diferentes outputs\n\n------------------------------------------------------------------------\n\n## Para poder practicar lo que vayamos aprendiendo ... {background-color=\"#f7f8f5\"}\n\n
\n\n::: {.callout-important icon=\"false\"}\n#### Tarea 3.0: Vamos a crear un nuevo Qproject\n\n- Cierra RStudio \n\n- Crea un nuevo Qproject llamado \"my_qproject\"\n\n- Inspecciona los documentos que hay dentro de \"my_qproject\"\n\n- Borra el archivo `my_qproject.qmd`\n\n- Crea un archivo `.qmd` llamado `prueba_01.qmd`\n\n
\n\n:::\n\n\n\n# Qmarkdown: guía rápida (`.qmd`) {background-color=\"#b8c2aa\"}\n\n------------------------------------------------------------------------\n\n## Los documentos `.qmd` tienen 3-4 partes {.smaller}\n\n1. Encabezamiento (**yaml** header) \n\n2. Trozos de **código** R (R chunks) \n\n3. **Texto** (escrito en Markdown) ...\n\n ... y **todo lo demás**: imágenes, links, ecuaciones, etc ...\n\n
\n\n. . .\n\n#### Un ejemplo\n\n\n:::: {columns}\n::: {.column width=\"48%\"}\n#### source code (escrito en QMD)\n\n\n::: {.cell layout-align=\"center\"}\n::: {.cell-output-display}\n{fig-align='center' width=120%}\n:::\n:::\n\n\n:::\n\n::: {.column width=\"48%\"}\n#### output\n\n\n::: {.cell layout-align=\"center\"}\n::: {.cell-output-display}\n{fig-align='center' width=90%}\n:::\n:::\n\n:::\n::::\n\n\n\n
\n\n# (I): YAML {.unnumbered background-color=\"#ebf5fb\"}\n\n\n{{< var lineanaranja >}}\n\n\n\n
\n\n. . .\n\n- Se utiliza para especificar metadatos (opciones) del documento final\n\n\n------------------------------------------------------------------------\n\n### (I) El encabezamiento o \"yaml header\"\n\n- Se (suele) poner al principio del documento, entre estas marcas: **`---`**\n\n- En el yaml son MUY importantes los **espacios y la indentación**\n\n\n
\n\n##### Ejemplos de yaml\n\n::: panel-tabset\n#### ejemplo 1\n\n\n::: {.cell}\n\n```{.yaml .cell-code}\n---\ntitle: \"Mi primer archivo qmd\"\ndate: \"2023-08-08\"\nformat: html\n---\n```\n:::\n\n\n#### ejemplo 2\n\n\n::: {.cell}\n\n```{.yaml .cell-code}\n---\ntitle: \"Mi primer archivo qmd\"\ndate: \"2023-08-08\"\nformat:\n html:\n toc: true\n toc-location: left\n---\n```\n:::\n\n\n#### ejemplo 3\n\n\n::: {.cell}\n\n```{.yaml .cell-code}\n---\ntitle: \"Mi primer archivo qmd\"\ndate: \"2023-08-08\"\nformat:\n html:\n toc: true\n toc-location: left\ntheme: sketchy #- hay 25 themes: https://quarto.org/docs/output-formats/html-themes.html\nembed-resources: true #- hace el documento auto-contenido\n---\n```\n:::\n\n:::\n\n\n\n\n\n---\n\n::: {.callout-important icon=\"false\"}\n#### Tarea 3.1: Vamos a jugar con el `yaml`\n\n- Utiliza el archivo `prueba_01.qmd` para probar como quedaría `prueba_01.html` al usar los 3 anteriores `yaml's`\n\n
\n\n- Una vez hayas probado a usar el tercer YAML, prueba algún otro `theme` de los 25 disponibles. [Aquí](https://quarto.org/docs/output-formats/html-themes.html) tienes el listado, y [aquí](https://druedin.com/2023/03/07/quarto-html-themes-gallery/) hay ejemplos para ver cómo quedan y decidir cual te gusta más.\n\n
\n\n:::\n\n\n\n\n\n# (II): CHUNKS {.unnumbered background-color=\"#ebf5fb\"}\n\n\n{{< var lineanaranja >}}\n\n\n\n
\n\n. . .\n\n- En documentos `.qmd` **podemos incorporar código**\n\n- Código que puede ser **ejecutado** \n\n\n- Así se podrá **mostrar** en el documento final tanto el código como **los resultados** (de la evaluación del código)\n\n. . . \n\n- Esto es lo que permite que los documentos sean **reproducibles**\n\n\n- La documentación oficial está [aquí](https://quarto.org/docs/computations/execution-options.html)\n\n------------------------------------------------------------------------\n\n### (II) Code Blocks o chunks (código R)\n\n- Para que Quarto sepa qué partes del `.qmd` es **código R**, debe ir dentro de estas marcas:\n\n\n{fig-align=\"left\" width=\"15%\"}\n\n- Por ejemplo:\n\n{fig-align=\"left\" width=\"30%\"}\n\n- Cuando Quarto/`knitr` procesen el chunk, se interpretará como código R y **ejecutará las instrucciones**, de forma que, en el documento final, se **mostrará el output** generado por el chunk.\n\n{fig-align=\"left\" width=\"80%\"}\n\n
\n\n------------------------------------------------------------------------\n\n## (II) Chunks: los chunks pueden tener opciones.\n\n- Por ejemplo: \n
\n\n \n\n\n. . .\n\n- Las **principales opciones** son: \n\n| Opción | (valor por defecto) | ¿Que hace? |\n|----|-------|------------------|\n| `echo` | true | Incluye el código en el documento final |\n| `eval` | true | Evalúa el código |\n| `warning` | true | Incluye los avisos en el documento final |\n| `message` | true | Incluye los mensajes |\n\n\n\n\n---\n\n::: {.callout-important icon=\"false\"}\n#### Tarea 3.2: Vamos a incorporar un chunk a nuestro `.qmd`\n\n- Utiliza el archivo `prueba_01.qmd` para insertar un chunk de código R con las siguientes instrucciones:\n\n\n ```{{r}}\n # install.packages(tidyverse)\n library(ggplot2)\n ggplot(iris, aes(Sepal.Length, Petal.Length)) + geom_point()\n ```\n\n Si no tuvieses el paquete `tidyverse` instalado, puedes usar este otro chunk:\n\n\n ```{{r}}\n plot(iris$Petal.Length,iris$Petal.Width)\n ```\n\n\n::: {.fragment}\n\n::: {.callout-warning icon=\"false\"}\n#### Ayudita con las marcas de los chunks\n\n- Para incorporar las marcas que delimitan los chunks de código, puedes usar este atajo del teclado: {{< kbd Alt-Ctrl-I >}}\n\n:::\n\n:::\n\n
\n\n:::\n\n\n\n---\n\n::: {.callout-important icon=\"false\"}\n#### Tarea 3.2b: Vamos a jugar con la **opciones de los chunks**\n\n::: {.fragment}\n- Incorpora al chunk las siguientes opciones: `echo` y `eval`\n\n\n- ¿Cuales son las opciones por defecto para `echo` y `eval`?\n::: \n\n::: {.fragment}\n\n- Incorpora también al chunk las siguientes opciones: `message` y `label`\n\n:::\n\n
\n\n\n:::\n\n\n\n\n. . . \n\n::: {.callout-important icon=\"false\"}\n#### Tarea 3.2b: Una solución\n\n\n```{{r}}\n#| eval: true\n#| echo: true\n#| message: false\n#| label: my-primer-chunk\n\n# install.packages(tidyverse)\nlibrary(ggplot2)\nggplot(iris, aes(Sepal.Length, Petal.Length)) + geom_point()\n```\n\n
\n\n:::\n\n\n\n\n## (II) Chunks: opciones de los chunks en el YAML\n\n- En el YAML, podemos fijar los valores por defecto de las opciones de los chunks\n\n\n. . . \n\n- Se han de poner **anidadas dentro de** `execute: `\n\n. . . \n\n
\n\n###### Por ejemplo: \n\n\n::: {columns}\n::: {.column width=\"46%\"}\n###### .Qmd (chunk options en el chunk)\n\n{fig-align=\"left\" width=\"100%\"}\n\n:::\n\n::: {.column width=\"46%\"}\n##### .Qmd (chunk options en el yaml)\n\n{fig-align=\"left\" width=\"100%\"}\n::: \n:::\n\n
\n\n---\n\n::: {.callout-important icon=\"false\"}\n#### Tarea 3.3: **opciones de los chunks** en el YAML\n\n- Utiliza el archivo `prueba_01.qmd` para insertar las **opciones de los chunks en el YAML** del documento\n\n\n- Por ejemplo, indica en el YAML que `echo: true` pero `eval: false`\n\n::: {.fragment}\n::: {.callout-important icon=\"false\"}\n#### Tarea 3.3: Solución\n\n```yaml\nexecute:\n echo: true\n eval: false\n```\n:::\n:::\n\n
\n\n::: {.fragment}\n- ¿Se puede poner la opción `label: ` en el YAML?\n:::\n\n
\n\n::: {.fragment}\n\n::: {.callout-warning icon=\"false\"}\n#### Extensión: uso de la opción `include`\n\n- ¿Se puede poner la opción `include: ` en el YAML?\n:::\n:::\n\n
\n\n:::\n\n\n\n\n## (II) Chunks: otras opciones de Quarto para los chunks\n\n\nAhora, en Quarto, hay **más opciones para los chunks**. Documentación oficial [aquí](https://quarto.org/docs/output-formats/html-code.html). Por ejemplo:\n\n. . . \n\n
\n\n - Hacer **folding code** con `#| code-fold: true` \n \n - Puedes combinarlo con `#| code-summary: \"Para ver el código, pincha\"`\n \n
\n \n. . . \n \n - Si el código es muy largo, puedes usar `#| code-overflow: wrap` (o scroll)\n\n
\n\n. . . \n\n - Puedes hacer que se muestren los **números de linea** con `#| code-line-numbers: true`\n\n. . . \n\n\nTodas estas opciones **también pueden ir en el YAML**. \n\n\n\n---\n\n\n::: {.callout-important icon=\"false\"}\n#### Tarea 3.4: Nuevas **opciones de los chunks**\n\n- Utiliza el archivo `prueba_01.qmd` para probar algunas de las nuevas opciones de los chunks en el YAML\n\n- Por ejemplo:\n\n\n```yaml\nformat:\n html:\n code-fold: true\n code-summary: \"Para ver el código, pincha\"\n code-line-numbers: true\n```\n
\n\n- Pudes también probar a usar la opción `code-tools: true` y ver que ocurre.\n\n
\n\nLa documentación oficial la tienes [aquí](https://quarto.org/docs/output-formats/html-code.html) y [aquí](https://quarto.org/docs/reference/cells/cells-knitr.html#code-output)\n\n\n
\n\n:::\n\n\n\n\n\n## (II) Código: inline code\n\n\n- La mayoría del código suele ir en los chunks, pero a veces necesitamos inline code ; es decir, código R dentro de nuestro texto.\n\n. . . \n\n
\n\n##### Por ejemplo\n\n::: {.incremental}\n\n- Si quiero describir un conjunto de datos puedo hacerlo escribiendo: \"El data.frame iris tiene 150 filas y 5 variables\" \n\n\n- Pero es **mejor hacerlo con inline code**. Para ello tienes que poner el código R dentro de estas marcas: `r ` \n\n\n- Habría que escribirlo así: \n\n\n - El data.frame iris tiene `r nrow(iris)` filas y `r ncol(iris)` variables.\n \n\n
\n\n- Documentación oficial de Quarto [aquí](https://quarto.org/docs/computations/execution-options.html#inline-code). (No hay mucho más)\n\n:::\n\n------\n\n::: {.callout-important icon=\"false\"}\n#### Tarea 3.5: Código **inline**\n\n- Utiliza el archivo `prueba_01.qmd` para incorporar un párrafo de texto que contenga código inline.\n\n- Por ejemplo, puedes incorporar este párrafo:\n\n\n> Este archivo que estoy escribiendo lo hice el 26 de junio de 2023.\n\n \n pero lo que queremos es que la fecha se modifique cada vez que se procese el documento `prueba_01.qmd`\n\n\n
\n\n\n:::{.callout-warning icon=\"false\" }\n#### **Pista:** puedes probar a usar parte deel siguiente código R\n\n```r\nSys.Date()\nformat(Sys.Date(), \"%d %B, %Y\")\n```\n:::\n\n::: {.cell}\n\n:::\n\n
\n\n\n:::\n\n\n\n\n\n\n\n\n\n# (III) Texto {.unnumbered background-color=\"#ebf5fb\"}\n\n\n{{< var lineanaranja >}}\n\n\n\n
\n\n- El texto (o narrativa) **se escribe en Markdown** (concretamente en [Pandoc's Markdown](https://pandoc.org/MANUAL.html#pandocs-markdown))\n\n. . . \n\n- Markdown es un **lenguaje de marcado ligero** con sintaxis sencilla que permite dar formato y estructura a un texto y convertirlo a `.html`\n\n\n. . . \n\n\n- Documentación oficial de Quarto [aquí](https://quarto.org/docs/authoring/markdown-basics.html) y su [documento fuente](https://github.com/quarto-dev/quarto-web/blob/main/docs/authoring/markdown-basics.qmd)\n\n- Una **fantástica guía sobre Markdown** [aquí](https://www.markdownguide.org/getting-started/)\n\n\n
\n\n\n\n## (III) Texto: ¿qué narices es esto de Markdown?\n\n. . . \n\n- Es un **lenguaje de marcas** diseñado para escribir fácilmente **para la web** y que también sea fácilmente legible.\n\n. . . \n\n- Markdown es un lenguaje **estoico** para escribir (para la web)\n\n. . . \n\n- Markdown fue creado por [John Grueber](https://daringfireball.net/projects/markdown/) y [Aaron Swartz](https://es.wikipedia.org/wiki/Aaron_Swartz) en 2004. Para saber más sobre Aaron Swartz puedes ver [este documental](https://www.youtube.com/watch?v=7jhdj0vKbYo).\n\n- Se creó con el objetivo de crear un formato de texto fácil de escribir y leer y que se convirtiera fácilmente en `.html`\n\n > Markdown is a text-to-HTML conversion tool for web writers.\n \n\n. . . \n\n- La ventaja de escribir en Markdown es que es un lenguaje muy fácil de aprender y que, como está basado en un formato de texto plano, es y será compatible con la mayoría de plataformas.\n\n. . . \n\n- En este otro [tutorial de Markdown](https://www.markdowntutorial.com/), se puede leer lo siguiente:\n\n> Markdown is a way to write for the web. It’s written in what nerds like to call “plaintext”. Plaintext is just the regular alphabet, with a few familiar symbols. Unlike cumbersome word processing applications, text written in Markdown can be easily shared between computers, mobile phones, and people. It’s quickly becoming the writing standard for academics, scientists, writers, and many more. Websites like GitHub and reddit use Markdown to style their comments.\n\n\n\n------------------------------------------------------------------------\n\n## (III) Texto: ideas básicas (otra vez)\n\n- En los documentos `.qmd`, **\"todo\"** lo que no es el yaml o un chunk, es texto. \n\n- En Quarto el texto se escribe en [Markdown](https://es.wikipedia.org/wiki/Markdown)\n\n- Como Quarto se basa en **pandoc**, se usa [\"Pandoc`s markdown\"](https://pandoc.org/MANUAL.html#pandocs-markdown), una versión revisada y extendida de la propuesta original de Grueber\n\n
\n\n- Tienes una fantástica guía de Markdown [aquí](https://www.markdownguide.org/), y [aquí](https://www.markdownguide.org/cheat-sheet/) una cheatsheet.\n\n\n## (III) Texto: Dando formato al texto \n\n. . . \n\n- Sintaxis básica de `markdown`\n\n+-----------------------------------+------------------------------+\n| Si escribes esto: | Se verá esto: |\n+===================================+==============================+\n| texto normal | texto normal |\n+-----------------------------------+------------------------------+\n| texto en **negrita** | texto en **negrita** |\n+-----------------------------------+------------------------------+\n| texto en *cursiva* | texto en *cursiva* |\n+-----------------------------------+------------------------------+\n| un superíndice^2^ | un superíndice^2^ |\n+-----------------------------------+------------------------------+\n| un subíndice~2~ | un subíndice~2~ |\n+-----------------------------------+------------------------------+\n| palabras ~~tachadas~~ | palabras ~~tachadas~~ |\n+-----------------------------------+------------------------------+\n| `verbatim code` | `verbatim code` |\n+-----------------------------------+------------------------------+\n| > un blockquote | > un blockquote |\n+-----------------------------------+------------------------------+\n+-----------------------------------+------------------------------+\n\n\n
\n\n\n---\n\n::: {.callout-important icon=\"false\"}\n#### Tarea 3.7: texto en markdown\n\nPara practicar a escribir con Markdown podemos:\n\n - Hacerlo en RStudio, por ejemplo podemos utilizar el archivo `prueba_01.qmd` para incorporar un párrafo que contenga los elementos que hemos visto en la tabla anterior\n \n \n - Alternativamente, podemos usar editores online como [este](https://dillinger.io/) o [este](https://vuejs.org/examples/#markdown)\n\n\n
\n\n\n- Aquí tienes un ejemplo:\n\n```markdown\nCuando quise darme cuenta la **clase había terminado** ....\n```\n\n
\n\n:::\n\n\n\n\n## (III) Texto: Dando formato al texto {background-color=\"#DCDCDC\"}\n\n- Más posibilidades:\n\n+-----------------------------------+------------------------------+\n| Si escribes esto: | Se verá esto: |\n+===================================+==============================+\n| [texto subrayado]{.underline} | [texto subrayado]{.underline}|\n+-----------------------------------+------------------------------+\n| texto destacado | texto destacado |\n+-----------------------------------+------------------------------+\n| [En versalita]{.smallcaps} | [En versalita]{.smallcaps} |\n+-----------------------------------+------------------------------+\n| el emoji :joy: | el emoji :joy: |\n+-----------------------------------+------------------------------+\n| > :warning: **Cuidado!!** no | > :warning: **Cuidado!!** no |\n+-----------------------------------+------------------------------+\n+-----------------------------------+------------------------------+\n\n
\n\n(**) Los emojis mejor desde el editor visual o copiándolos, por ejemplo, desde [aquí](https://gist.github.com/rxaviers/7360908)\n\n\n\n
\n\n## (III) Texto: Notas al píe {background-color=\"#DCDCDC\"}\n\n\nSe usa la marca `^`, y hay 2 sintaxis:\n\n
\n\n. . . \n\n 1.Con sintaxis inline:\n\n\n ``` markdown\n Sintáxis (inline) para insertar una nota al píe^[Se llama inline \n porque el contenido de la nota al píe se entremezcla con el texto principal]. Suele ser\n la sintáxis que yo uso. \n ```\n\n
\n\n 2. **No-**inline\n\n\n ``` markdown\n Aquí voy a poner otra nota al píe [^1] , y otra más.[^b]\n \n [^1]: Esta otra sintaxis me gusta menos. Pero igual es más clara\n\n [^b]: No sufras por la numerácion. lo hará Pandoc!!\n ```\n\n
\n\n. . . \n\n- Documentación oficial [aquí](https://quarto.org/docs/authoring/footnotes-and-citations.html#footnotes)\n\n\n## (III) Texto: Títulos\n\n. . . \n\n
\n\n+---------------------+-----------------------------------+\n| Markdown: | Se verá esto: |\n+=====================+===================================+\n| # Header 1 | # Header 1 |\n+---------------------+-----------------------------------+\n| ## Header 2 | ## Header 2 |\n+---------------------+-----------------------------------+\n| ### Header 3 | ### Header 3 {.heading-output} |\n+---------------------+-----------------------------------+\n| #### Header 4 | #### Header 4 {.heading-output} |\n+---------------------+-----------------------------------+\n| ##### Header 5 | ##### Header 5 {.heading-output} |\n+---------------------+-----------------------------------+\n| ###### Header 6 | ###### Header 6 {.heading-output} |\n+---------------------+-----------------------------------+\n\n\n
\n\n## (III) Texto: Creando **listas**\n\n. . . \n\n- En las listas es **crucial la indentación** (normalmente **2** espacios)\n\n. . . \n\n\n\n{fig-align=\"center\" width=\"65%\"}\n\n\n\n\n- Mas posibilidades [aquí](https://quarto.org/docs/authoring/markdown-basics.html#lists) y [aquí](https://quarto.org/docs/visual-editor/content.html#editing-lists)\n\n\n
\n\n## (III) Texto: Párrafos\n\n. . . \n\n- Para crear un nuevo párrafo has de dejar una (o más) **lineas en blanco**\n\n. . . \n\n\n- Para crear más espacio entre párrafos; es decir, [añadir una linea en blanco extra]{.underline}, podemos usar uno o varios: `
` o `
`\n\n\n
\n\n. . . \n\n#### Dentro de un párrafo\n\n- Si dentro de un párrafo necesitas que **una frase empiece en otra linea** entonces, **has de dejar 2 (o más) espacios al final**; en inglés esto se conoce como un \"hard line break\" \n\n\n::: {.fragment}\n:::{.callout-warning icon=\"false\" }\n#### Extensión: más formas de crear \"hard line breaks\" \n\n- El \"hard line break\" [también se puede hacer]{.underline} con `
`\n \n\n- El \"hard line break\" también se puede hacer con `\"\\\"` seguido de nueva linea. \n \n- En una tabla, `\\` es la única forma de crear un salto de línea, ya que se ignoran los espacios finales en las celdas.\n:::\n:::\n\n## (III) Texto: Lineas, espacios, ...\n\n\n. . . \n\n- Si en una linea de texto hay **2 espacios o más**, estos se reducen a un espacio.\n\n. . . \n\n\n:::{.callout-warning icon=\"false\" }\n#### Extensión: ¿cómo dejar más espacio entre palabras?\n\n- Por lo tanto, [si quieres separar palabras con más de un espacio]{.underline}, tendrás que usar lo que en html se conoce como \"entities\": ` `(1 espacio) ` `(2 espacios) y ` `(4 espacios). \n\n - Otra forma sería con la etiqueta ``.\n:::\n\n. . . \n\n
\n\n\n:::{.callout-warning icon=\"false\" }\n#### Extensión: un detalle que a veces es útil\n\n- Los espacios al principio de las lineas que empiezan con `|` se mantienen (🤓)\n:::\n\n# (IV) Más elementos {.unnumbered background-color=\"#ebf5fb\"}\n\n\n{{< var lineanaranja >}}\n\n\n\n
\n\n- Además de YAML, chunks y texto, **Markdown tiene más elementos para escribir**\n\n. . . \n\n- Por ejemplo: links, imágenes, vídeos, ecuaciones, tablas, bibliografía, etc ....\n\n\n## (IV) Más elementos: hyper-**links**\n\n
\n\n\n+-----------------------------------------------------+------------------------------------+\n| Si escribes esto: | Al procesarse se verá esto: |\n+=====================================================+====================================+\n|
\n\n. . . \n\n\n::: {.callout-warning collapse=\"true\" appearance=\"default\" icon=\"false\"}\n#### Extensión: Cómo hacer que los links se abran en nueva página\n\n\nSi quieres que la página enlazada **se abra en otra pestaña** del navegador puedes:\n\n 1. Especificarlo en el YAML con `link-external-newwindow: true`\n\n \n 2. Añadir `{target=\"_blank\"}`, con lo que nuestros enlaces quedarían como:\n \n ```markdown\n [Web de Quarto](https://quarto.org){target=\"_blank\"}\n ```\n 3. La versión 1.3 de Quarto permitirá esto en los enlaces en el fichero `_quarto.yml`. Puedes leerlo [aquí](https://github.com/quarto-dev/quarto-cli/discussions/2283>)\n\n:::\n\n## (IV) Más elementos: **Imágenes**\n\n- Documentación oficial [aquí](https://quarto.org/docs/authoring/figures.html)\n\n\n```markdown\n{ fig-align=\"left\" width=\"12%\"}\n```\n\n{ fig-align=\"left\" width=\"12%\"}\n\n\n```markdown\n{ fig-align=\"right\" width=\"20%\"}\n```\n\n{ fig-align=\"right\" width=\"20%\"}\n\n\n- Puedes ver como hacer composiciones de imágenes en el blog, concretamente [aquí](https://perezp44.github.io/intro.to.quarto/blog/24_imagenes.html){target=\"_blank\"}, además de cuestiones como el tamaño y aspecto de las imágenes.\n\n\n\n---\n\n::: {.callout-important icon=\"false\"}\n#### Tarea 3.8: Markdown, incorporar una imagen\n\n- Incorpora [esta imagen](https://commons.wikimedia.org/wiki/File:Nacho_Vegas_-_Rock_%26_Clown_-_A_Estrada.jpg) al archivo `prueba_01.qmd` \n\n\n
\n\n::: {.fragment}\n- Guarda [esta otra imagen](https://upload.wikimedia.org/wikipedia/commons/thumb/5/57/Husky_sib%C3%A9rienne.JPG/640px-Husky_sib%C3%A9rienne.JPG) dentro de `my_qproject`, concretamente dentro de la carpeta `imagenes`\n\n\n- Incorpora esa imagen (guardada en tu ordenador) al archivo `prueba_01.qmd` \n:::\n\n
\n\n:::\n\n\n\n\n\n\n## (IV) Más elementos: Imágenes **generadas con código** {background-color=\"#DCDCDC\"}\n\n- Documentación para fijar el tamaño [aquí](https://quarto.org/docs/computations/execution-options.html#figure-options)\n\n\n\n::: {.cell output-location='column-fragment'}\n\n````{.cell-code code-line-numbers=\"2|3|4-5|6|7\"}\n```{{r}}\n#| label: fig-penguins-01\n#| fig-cap: Gráfico con datos de pingüinos\n#| fig-width: 7\n#| fig-asp: 0.618\n#| output-location: column-fragment\n#| code-line-numbers: \"2|3|4-5|6|7\"\nlibrary(tidyverse)\nlibrary(palmerpenguins)\npp <- ggplot(penguins,aes(\n x = bill_length_mm, y = bill_depth_mm,\n color = species, shape = species)) + \n geom_point() +\n theme_minimal() +\n labs(x = \"Bill length (mm)\", y = \"Bill depth (mm)\")\n\npp\n```\n````\n\n::: {.cell-output-display}\n{#fig-penguins-01 width=672}\n:::\n:::\n\n\n\n\n
\n\n## (IV) Más elementos: Tablas con Markdown {background-color=\"#DCDCDC\"}\n\n- Documentación oficial para tablas [aquí](https://quarto.org/docs/authoring/tables.html)\n\n
\n\n. . . \n\n:::: {.columns}\n::: {.column width=\"45%\"}\n\n##### Sintaxis Markdown para tablas\n\n | Right | Left | Default | Center |\n |------:|:-----|---------|:------:|\n | 12 | 12 | 12 | 12 |\n | 123 | 123 | 123 | 123 |\n | 1 | 1 | 1 | 1 |\n \n : Título de la tabla\n:::\n::: {.column width=\"30%\"}\n\n**Genera lo siguiente:**\n\n| Default | Left | Right | Center |\n|---------|:-----|------:|:------:|\n| 12 | 12 | 12 | 12 |\n| 123 | 123 | 123 | 123 |\n| 1 | 1 | 1 | 1 |\n\n: Título de la tabla\n:::\n::::\n\n. . . \n\n\n- Como ves no es fácil-fácil generar tablas con Mardown pero, **puedes usar un generador de tablas**, por ejemplo [este](https://www.tablesgenerator.com/markdown_tables) o [este](https://tableconvert.com/markdown-generator). También se puede usar el [editor visual de Rstudio](https://quarto.org/docs/visual-editor/content.html#editing-tables)\n\n\n## (IV) Más elementos: Tablas con R\n\n- R tiene muchos paquetes para hacer tablas. Por ejemplo: `knitr::kable(df)`, o `gt::gt(df)`, o `DT::datatable(df)` y más. Si te interesa el tema de las tablas puedes visitar [esto](https://perezp44.github.io/intro-ds-21-22-web/tutoriales/tt_08_tablas-Rmarkdown.html) o [esto](https://rfortherestofus.com/2019/11/how-to-make-beautiful-tables-in-r/)\n\n\n\n::: {.cell}\n\n```{.r .cell-code}\ndf <- rio::import(\"./datos/matriculados.xlsx\")\ngt::gt(df)\n```\n\n::: {.cell-output-display}\n\n```{=html}\n\n\n\n```\n\n:::\n:::\n\n\n\n\n## (III) Más elementos: Ecuaciones\n\n- Markdown admite ecuaciones **escritas en Latex**:\n\n - si van entre un **`$`** serán ecuaciones inline \n - **`$$`** para ecuaciones independientes. \n\n. . . \n\n\n+-------------------------------------+-----------------------------+\n| Markdown Syntax | Output |\n+=====================================+=============================+\n| ecuación inline: $E = mc^{2}$ | ecuación inline: $E=mc^{2}$ |\n+-------------------------------------+-----------------------------+\n| ecuación independiente: | ecuación independiente: \\ |\n| | $$E = mc^{2}$$ |\n| $$E = mc^{2}$$ | |\n+-------------------------------------+-----------------------------+\n\n. . .\n\n- Tienes editores online de ecuaciones en Latex [aquí](https://www.latex4technics.com/) y [aquí](http://www.sciweavers.org/free-online-latex-equation-editor). Puedes ver algunos ejemplos de ecuaciones escritas en Latex [aquí](https://dereksonderegger.github.io/570L/16-rmarkdown-tricks.html) \n\n- Además, podemos reusar el código Latex de ecuaciones en la web (si se ha usado MathJax). Por ejemplo [aquí](https://perezp44.github.io/VAR-models-web/03-Slides.html)\n\n\n\n# RStudio **Visual editor** {.unnumbered background-color=\"#ebf5fb\"}\n\n\n{{< var lineanaranja >}}\n\n\n\n\n \n
\n\n \n \n \n Nombre \n Nota \n Comentario \n Eva Maria \n10 \nvery good!! Pilar \n8 \nawesome!! Victor \n6 \nkeep going Enric \n7 \ngreat
\n\n- ¿Me acordaré de todas la marcas que hemos visto?\n\n. . . \n\n
\n\n🤔, ya te digo yo que **No**\n\n---\n\n## Editor Visual en RStudio\n\n- Desde 2020, concretamente desde la [versión v.1.4](https://posit.co/blog/rstudio-v1-4-preview-visual-markdown-editing/), **RStudio dispone de un editor visual**\n\n- El editor visual **facilita la inserción** de los **elementos** que hemos ido viendo durante el curso. Documentación oficial [aquí](https://quarto.org/docs/visual-editor/) y [aquí](https://docs.posit.co/ide/user/ide/guide/documents/visual-editor.html)\n\n\n. . . \n\n::: {columns}\n::: {.column width=\"68%\"}\n- Hasta ahora hemos trabajado en nuestros QMD en formato \"Source\", pero **podemos cambiar el modo de edición a \"Visual\"**, solo hay que seleccionar la pestaña adecuada:\n:::\n::: {.column width=\"28%\"}\n\n:::\n:::\n\n## Editor Visual: **Modo de edición**\n\n\n::: panel-tabset\n#### Edición en modo Visual:\n\n\n#### En modo Source:\n\n:::\n\n\n## Editor Visual: **Barra de herramientas**\n\n\nLa barra de herramientas del editor visual facilita el acceso a la mayoría de elementos que podemos insertar en nuestros documentos QMD:\n\n\n\n::: {layout-ncol=3}\n\n\n\n\n\n\n:::\n\n\n- Esto facilita la entrada a los documentos QMD\n\n- En algunos casos como imágenes y ciertas tablas, solo hay que arrastrar (o copiar y pegar) el contenido y aparecerá en nuestro documento fuente con la sintaxis adecuada.\n\n- Algunas referencias: [Exploring RStudio’s Visual Markdown Editor](https://posit.co/blog/exploring-rstudio-visual-markdown-editor/), [RStudio: el Nuevo Editor Visual](http://destio.us.es/calvo/Qtutoriales/SobreRRStudio/RStudioEditorVisual.html)\n\n# Aún quedan más elementos!! {.unnumbered background-color=\"#ebf5fb\"}\n\n\n{{< var lineanaranja >}}\n\n\n\n
\n\n- Pandoc fenced divs, Pandoc bracketed spans\n\n- Layout, CSS, ....\n\n- ... pero **lo dejamos para más adelante**\n\n\n\n# Intro a Slides con Quarto {background-color=\"#b8c2aa\"}\n\n\n{{< var lineanaranja >}}\n\n\n\n
\n\n. . .\n\n\n1. Quarto puede hacer slides de varios tipos (ppt, slidy, beamer)\n\n2. Nos centraremos en el formato **Revealjs**\n\n\n\n\n# Presentaciones con Quarto (generico) {.unnumbered background-color=\"#ebf5fb\"}\n\n\n\n{{< var lineanaranja >}}\n\n\n\n\n- Las slides se escriben en **QMD**, así que ya sabemos\n\n. . . \n\n\n- Hay algunas especificidades que vamos a ver\n\n- Veremos primero aspectos comunes a todos los formatos de slides\n\n\n- [Documentación oficial](https://quarto.org/docs/presentations/)\n\n\n\n--- \n\n## Creación de unas nuevas transparencias: {.smaller}\n\n. . . \n\n1. Has de seguir la siguiente ruta de menús: \n `File > New File > Quarto Presentation`. \n2. Se abrirá una interfaz gráfica donde podrás elegir entre **3 formatos de slides** (Revealjs, Beamer y ppt). También podrás poner título y autor. \n\n. . . \n\nEn imágenes:\n\n::: {layout-ncol=2}\n{height=280}\n\n{height=280}\n:::\n\n
\n\n\n--- \n\n## Creación de una nueva slide:\n\n\n- Los títulos de **primer nivel** crean una nueva slide (y tb una nueva sección)\n\n- Los títulos de **segundo** nivel crean una nueva slide. \n\n. . . \n\n- También se puede crear una nueva slide usando **3** o mas **guiones cortos**: `---`\n\n
\n\n. . . \n\n::: {.callout-warning collapse=\"true\" appearance=\"default\" icon=\"false\"}\n#### Extensión: modificar la generación de nuevas slides\n\nHay que usar `slide-level:` en el YAML. Por ejemplo:\n \n \n\n:::: {columns}\n::: {.column width=\"48%\"}\n\n``` yaml\n---\ntitle: \"Mis slides\"\nformat: \n revealjs: \n slide-level: 3\n---\n```\nCon este yaml, los títulos de tercer nivel (con `###`) también crearían una nueva slide\n:::\n::: {.column width=\"48%\"}\n```yaml\n---\ntitle: \"Mis slides\"\nformat: revealjs \n---\n```\n:::\n::::\n:::\n\n\n
\n\n\n---\n\n## Pausas en la presentación\n\n- Por defecto, los elementos de una slide se muestran todos de golpe\n\n. . . \n\n
\n\n> :warning: Para crear pausas en la presentación has de usar las siguientes marcas: . . . \n\n (es decir, tres puntos separados por espacios)\n \n
\n\n. . .\n\n- Por ejemplo:\n\n```default\n## Una nueva slide\n\nContenido nº 1\n\n. . . \n\nContenido nº 2\n\n```\n\n (para ver el Contenido nº 2 habrá que dar al avance página)\n\n\n---\n\n## Listas incrementales\n\n\n- Por defecto las listas se muestran de golpe\n\n. . . \n\n- Si quieres que se muestren elemento a elemento, puedes controlarlo desde el YAML:\n\n\n```yaml\ntitle: \"My Presentation\"\nformat:\n revealjs:\n incremental: true \n```\n\n. . . \n\n- Se puede ir **intercalando** listas incrementales, y no-incrementales, con los siguientes **fenced div's**:\n\n:::: {.columns}\n::: {.column width=\"45%\" .fragment}\n\nLista **incremental** :\n\n
\n\n```markdown\n::: {.incremental}\n- First we take Manhatan,\n- then we take Berlin\n:::\n```\n:::\n::: {.column width=\"45%\" .fragment}\n\nLista **no-incremental** :\n\n
\n\n``` markdown\n::: {.nonincremental}\n- First we take Manhatan,\n- then we take Berlin\n:::\n```\n:::\n::::\n\n---\n\n## Columas multiples {.smaller}\n\n:::: {.columns}\n::: {.column width=\"35%\"}\n- Como puedes ver, se puede generar contenido en **varias columnas**. Para ello hay que usar un **fenced div** con clase `columns`. \n:::\n::: {.column width=\"60%\"}\n> To put material in side by side columns, you can use a native div container with class .columns, containing two or more div containers with class .column and a width attribute. -- [Documentacion oficial](https://quarto.org/docs/presentations/#multiple-columns) de Quarto\n:::\n::::\n\n. . . \n\n- Por ejemplo:\n\n\n```markdown\n:::: {.columns}\n\n::: {.column width=\"40%\"}\nMi contenido en la primera columna\n:::\n\n::: {.column width=\"60%\"}\nContenido en la segunda columna\n:::\n\n::::\n\n```\n\n\n
\n\n\n\n# Revealjs slides {.unnumbered background-color=\"#ebf5fb\"} \n\n\n{{< var lineanaranja >}}\n\n\n\n
\n\n- [reveal.js](https://revealjs.com/) es un open source HTML presentation framework.\n\n- A mi me gustan: en mi opinión tienen unas cuantas ventajas\n\n- Documentación oficial [aquí](https://quarto.org/docs/presentations/revealjs/)\n\n- Listado (extenso) de opciones [aquí](https://quarto.org/docs/reference/formats/presentations/revealjs.html)\n\n\n\n\n---\n\n## Revealjs: primera slide \n\n- La primera slide **se crea automáticamente** [si pones un título en el YAML]{.underline} \n\n - En ese caso, la 1ª slide contendrá los metadatos: title, subtitle, author, institute, date \n \n. . . \n\n- La apariencia de la primera slide dependerá del tema elegido. **Listado de themes** [aquí](https://quarto.org/docs/presentations/revealjs/themes.html#using-themes).\n\n\n---\n\n## Revealjs: Content overflow\n\nSi el contenido que queremos poner no se ajusta a la slide, tenemos varias posibilidades:\n\n
\n\n. . . \n\n1. Usar la `.smaller` class al crear la slide: \n \n```markdown\n\n## Título de la slide {.smaller}\n\n```\n \n
\n \n. . . \n \n2. Modificar el YAML para hacer las slides \"scrollables\":\n \n \n```yaml\n---\ntitle: \"My Presentation\"\nformat:\n revealjs:\n scrollable: true\n--- \n```\n\n---\n\n## Revealjs: Slide background\n\nEn mi opinión las slides mejoran bastante estéticamente si en alguna de ellas cambiamos el fondo. La documentación está [aquí](https://quarto.org/docs/presentations/revealjs/#slide-backgrounds)\n\n\n. . . \n\n- Puedes **incorporar un fondo especifico a una slide**. Se pueden usar los siguientes elementos: **color**, **imagen**, **vídeo** e **iframe**. Por ejemplo:\n\n```markdown\n## Título de la slide {background-color=\"aquamarine\"}\n```\n\n. . . \n\n- Opciones más complejas:\n\n\n```markdown\n## Slide Title {background-video=\"video.mp4\" background-video-loop=\"true\" background-video-muted=\"true\"}\n\n## Slide Title {background-color=\"black\" background-image=\"https://placekitten.com/100/100\" background-size=\"100px\" background-repeat=\"repeat\"}\n\n## Slide Title {background-iframe=\"https://www.uv.es\"}\n```\n\n\n## Slide Backgrounds: ejemplo 1 (color) {background-color=\"aquamarine\"}\n\nPara poner un color de fondo:\n\n```markdown\n\n## Slide Backgrounds: ejemplo 1 (color) {background-color=\"aquamarine\"}\n\n```\n\n\n## Slide Backgrounds: ejemplo 2 (imagen) {background-image=\"imagenes/perro_blanco.jpg\" background-size=\"cover\" background-opacity=\"0.7\"} \n\nPara poner una imagen de fondo:\n\n```markdown\n\n## Slide Backgrounds: ejemplo 2 (imagen) {background-image=\"imagenes/perro_blanco.jpg\" background-size=\"cover\"}\n\n```\n\n\n## {background-image=\"https://images.unsplash.com/photo-1495640388908-05fa85288e61?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80\" background-size=\"contain\" background-position=\"left\"}\n\n::: columns\n::: {.column width=\"40%\"}\n:::\n\n::: {.column width=\"60%\"}\n### Se pueden hacer cosas muy chulas como:\n\n::: incremental\n::: r-fit-text\n\n- [Slides Emil Hvitfeldt](https://emilhvitfeldt.github.io/useR2022-textrecipes)\n\n- Parallax background. Documentación [aquí](https://quarto.org/docs/presentations/revealjs/advanced.html#parallax-background)\n\n- [Quarto iFrame Examples](https://emilhvitfeldt.github.io/quarto-iframe-examples/). El [repo](https://github.com/EmilHvitfeldt/quarto-iframe-examples)\n\n:::\n:::\n:::\n:::\n\n::: footer\nInspiración, vamos, copiado de
\n\n- El resultado es:\n\n::: {.panel-tabset}\n## Primer Tab\n\nContenido del primer Tab\n\n## Segundo Tab\n\nContenido del segundo Tab\n:::\n\n\n---\n \n## Revealjs: Transiciones\n\n- Documentación oficial [aquí](https://quarto.org/docs/presentations/revealjs/advanced.html#slide-transitions)\n\n+-------------+------------------------------------------------------------------------+\n| Transition | Description |\n+=============+========================================================================+\n| `none` | No transition (switch instantly) |\n+-------------+------------------------------------------------------------------------+\n| `fade` | Cross fade |\n+-------------+------------------------------------------------------------------------+\n| `slide` | Slide horizontally |\n+-------------+------------------------------------------------------------------------+\n| `convex` | Slide at a convex angle |\n+-------------+------------------------------------------------------------------------+\n| `concave` | Slide at a concave angle |\n+-------------+------------------------------------------------------------------------+\n| `zoom` | Scale the incoming slide so it grows in from the center of the screen. |\n+-------------+------------------------------------------------------------------------+\n \n\n. . .\n\n``` yaml\n---\ntitle: \"Presentation\"\nformat:\n revealjs:\n transition: slide #- transiciones de las slide: {none, fade, slide, convex, concave, or zoom}\n transition-speed: fast #- {default, fast, slow}\n---\n``` \n\n\n\n\n## Revealjs: tunear con **themes**\n\n- Ya sabemos que podemos cambiar la apariencia de las slides usando los **themes** disponibles en Quarto. **Listado de themes** [aquí](https://quarto.org/docs/presentations/revealjs/themes.html#using-themes).\n\n. . . \n\n- Para ello tenemos que incluir en el YAML el theme que queremos:\n\n```markdown\n---\ntitle: \"Presentation\"\nformat:\n revealjs: \n theme: dark\n---\n```\n\n
\n\n. . . \n\n- Además disponemos de muchos otros themes en **extensiones** en [la web de Quarto](https://quarto.org/docs/extensions/listing-revealjs.html) y en [Awesome Quarto](https://github.com/mcanouil/awesome-quarto#presentations)\n\n\n- Por ejemplo: los themes [4 estaciones](https://github.com/EmilHvitfeldt/quarto-revealjs-seasons), [Inversa](https://github.com/EmilHvitfeldt/quarto-revealjs-inverse), [Insper](https://github.com/padsInsper/quarto-insper-theme), ...\n\n\n---\n\n## **Ejemplos** de presentaciones {.smaller}\n\n
\n\n. . . \n\n- [Some good practices for research with R](https://www.good-practices.etiennebacher.com/#/title-slide)de Etienne Bacher, el repo [aquí](https://github.com/etiennebacher/good-practices)\n\n\n- [Debugging](https://rstats-wtf.github.io/wtf-debugging-slides/#/title-slide) de Shannon Pileggi, el repo [aquí](https://github.com/rstats-wtf/wtf-debugging-slides)\n\n- [The Genesis of Experimentation](https://emitanaka.org/slides/Ihaka2022/#/title-slide) de Emi Tanaka, el repo [aquí](https://github.com/emitanaka/talks/tree/master/Ihaka2022)\n\n- [ggdensity: Improved density visualization in R](https://jamesotto852.github.io/JSM-2022/#/) de James Otto y David Kahle, el repo [aquí](https://github.com/jamesotto852/JSM-2022)\n\n- [Extending ggplot2 with custom Geoms and Stats](https://jamesotto852.github.io/extending-ggplot2/#/) de James Otto, el repo [aquí](https://github.com/jamesotto852/extending-ggplot2)\n\n- [Quarto/RMarkdown - What’s Different?](https://laderast.github.io/qmd_rmd/#/title-slide), de TED Laderas. [Vídeo](https://www.youtube.com/watch?v=xC6I5OVOnKI)\n\n- [An Antarctic Tour of the Tidyverse](https://slides.silviacanelon.com/tour-of-the-tidyverse-v2/#/title-slide) de Silvia Canelon, el repo [aquí]()\n\n- [Hello Quarto](https://mine.quarto.pub/hello-quarto/#/hello-quarto-title) de Mine Çetinkaya-Rundel y Julia Stewart Lowndes, el repo [aquí](https://github.com/mine-cetinkaya-rundel/hello-quarto), [más cosas](https://mine-cetinkaya-rundel.github.io/quarto-tip-a-day/posts/31-hello-quarto/)\n\n- [Reproducible authoring with Quarto](https://mine-cetinkaya-rundel.github.io/2022-repro-toronto/#/title-slide) de Mine Çetinkaya-Rundel, el repo [aquí](https://github.com/mine-cetinkaya-rundel/2022-repro-toronto)\n\n- [What can I do with Quarto?](https://nrennie.rbind.io/talks/2022-october-oxford-r-user-group/slides.html#/title-slide) de Nicola Rennie, su web [aquí](https://nrennie.rbind.io/)\n\n- [Reproducible Publications w/ Python and Quarto](https://thomasmock.quarto.pub/python/#/TitleSlide) de Thomas Mock\n\n- [Improvements in text preprocessing using textrecipes](https://emilhvitfeldt.github.io/useR2022-textrecipes/#/section) de Emil Hvitfeldt\n\n- [The Happiest Notebooks on Earth](https://apreshill.github.io/happiest-notebooks-on-earth/#/title-slide) de Allison Hill\n\n- [Quarto Presentations](https://quarto.org/docs/presentations/revealjs/demo/#/title-slide) by Quarto team, el repo [aquí](https://github.com/quarto-dev/quarto-web/blob/main/docs/presentations/revealjs/demo/index.qmd). Documentación oficial [aquí](https://quarto.org/docs/presentations/revealjs/)\n\n- [Intro to Quarto](https://ivelasq.quarto.pub/intro-to-quarto/#/section) de Isabella Velásquez, el repo [aquí](https://github.com/ivelasq/2022-10-27_intro-to-quarto)\n\n\n- [Un buen post sobre Revealjs slides](https://meghan.rbind.io/blog/quarto-slides/) de Meghan Hall\n\n- [Data Science Portfolio with Quarto](https://deepshamenghani.quarto.pub/portfolio-with-quarto-workshop/#/title-slide) de Deepsha Menghani, el repo [aquí](https://github.com/deepshamenghani/Portfolio_DeepshaM). Vídeo [aquí](https://www.youtube.com/watch?v=xtSFXtDf4cM)\n\n- [05 - Presentations Making Slides with Code](https://rstudio-conf-2022.github.io/get-started-quarto/materials/05-presentations.html#/presentations) y [02 - Authoring Quarto](https://jthomasmock.github.io/quarto-2hr-webinar/materials/02-authoring.html#/authoring-quarto) de Thomas Mock. Slides que pertenecen al siguiente taller [Get started with Quarto](https://rstudio-conf-2022.github.io/get-started-quarto/)\n\n\n\n\n# Otros formatos {.unnumbered background-color=\"#ebf5fb\"} \n\n\n{{< var lineanaranja >}}\n\n\n\n- Beamer\n\n- Power Point\n\n- Slidy\n\n\n\n# Beamer slides {.unnumbered background-color=\"#ebf5fb\"} \n\n\n{{< var lineanaranja >}}\n\n\n\n---\n\n## Beamer slides\n\n- Beamer es un formato de slides, basadas en Latex, **muy popular en el mundo académico**\n\n. . .\n\n- Quarto puede hacer Beamer slides. Sólo hay que usar los menús o este yaml:\n\n\n```yaml\n---\ntitle: \"My Presentation\"\nformat: beamer\n```\n\n. . . \n\n- La apariencia visual de las slides vendrá determinada por el `theme` y el `colortheme`. los valores que usa por defeco Quarto no son muy chulos, así que hay que cambiarlos. [Aquí](https://hartwork.org/beamer-theme-matrix/) y [aquí](https://deic.uab.cat/~iblanes/beamer_gallery/) tienes ayuda para elegir el theme y colortheme. Por ejemplo:\n\n\n```yaml\n---\ntitle: \"Presentation\"\nformat: \n beamer: \n aspectratio: 32\n navigation: horizontal\n theme: metropolis\n colortheme: lily\n---\n```\n\n---\n\n\n## Beamer slides (documentación)\n\n. . . \n\n\n- [User Guide](https://ctan.fisiquimicamente.com/macros/latex/contrib/beamer/doc/beameruserguide.pdf) oficial de Beamer\n\n\n- Documentación oficial Beamer de Quarto [aquí](https://quarto.org/docs/presentations/beamer.html#overview)\n\n- Opciones de YAMl de Beamer en Quarto [aquí](https://quarto.org/docs/presentations/beamer.html#beamer-options)\n\n\n- [Beamer en RMD](https://bookdown.org/yihui/rmarkdown/beamer-presentation.html#beamer-presentation)\n\n- [Beamer en StackOverflow](https://stackoverflow.com/questions/tagged/beamer). Por ejemplo:\n\n - [Numeración de las slides como en Revealjs](https://stackoverflow.com/questions/74300235/frame-number-in-quarto-beamer-presentation)\n \n - [Justificar texto](https://es.stackoverflow.com/questions/587772/es-posible-modificar-la-alineaci%C3%B3n-de-un-p%C3%A1rrafo-en-una-presentaci%C3%B3n-beamer-pdf)\n\n\n\n\n\n",
"supporting": [
"slides_07b_intro-a-Quarto_files"
],
"filters": [
"rmarkdown/pagebreak.lua"
],
"includes": {
"include-after-body": [
"\n\n\n"
]
},
"engineDependencies": {},
"preserve": {},
"postProcess": true
}
} c Fy![X)#[u @ , A f i g - p e n g u i n s - 0 1 A - 1 . p n g PNG
IHDR @ > T< pHYs e IDATxy|UItH&DAqFET
2!
<,Ǝ,:È
(# ^AB'd$ u~R~sNUH} 0 F X `x , < @ X `n |tet[tյBθCTWW4=TVV
!RRR8QYYY^TBpƁp2~ 8DEE~8@Lv9QVVx o𬬬L `x , < @ X `x , < @ X `x , < @ X `x , n fWUXJ 83 ȉL^ H*< 1u2< `x , rq < $l t6 C ! ԍ - X `x , < @ X `x ,mt죦&mqKH- eq@ ?N;t;!yg<55r%i@R{L8Y#_,x[6 ɩWѭ A
_uuٳg4h# NG2jrٳBq~ctCt@̙3Bl=ԯ_?-- |>_yy"333===IGa -qLnJMMMMM5-vSKF}k0ˌvӧԯ)fr\.;Ap3()))n'NqƁl5+U Bx , %еc GɊehH1t 2r 0>lMr\hX^BƓ a9~?'' @qqv 表ddd$]eeeYY"+++33 C,o 5u<)dQ!|#8Gw 9Dw< [aU'3xcUaI ,b < @ *XB u Y h HYTڬ; 0&iXhͨ:Q7P9@ԁwp!COx ;9OW "Qy%(--999F7In;77W=xҸyy< ,++Bdeeeff tpdxKY%>VUX`t'ӵq
B ! I
x ; 3%ƛIrth} "< 0