Aprendiendo a escribir en QMD

Programación y manejo de datos con R (Slides 07-B)

4 de septiembre de 2023

¿Que haremos en esta sección?


  • Aprender a usar “el entorno R” para escribir, para generar documentos

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) (❗❗)

¿Qué tipos de documentos haremos?

  • Haremos distintos tipos de documentos: tutoriales, transparencias, páginas web, …

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

  • Para verlo puedes visitar la Quarto gallery

Algunos ejemplos:

Primeras ideas (sobre Quarto)


¿Qué es Quarto?

¿Cómo trabajaremos con Quarto?

¿Qué es Quarto?

  • No es un paquete, es un programa de ordenador
  • Es un sistema para escribir, para generar publicaciones científico-técnicas, dentro del ecosistema R.
  • Es la segunda generación de Rmarkdown


¿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

Primeros pasos con Quarto


Trabajaremos usando proyectos


Repito, vamos a trabajar con proyectos, concretamente con …


… Quarto projects o Qprojects

¿Qué es un Qproject?

  • Es simplemente una carpeta donde tendremos los “materiales” que necesitemos para uno de nuestros proyectos

  • Pero usarlos tiene ventajas. Puedes ver algunas en este post de Jenny Bryan

  • Para nosotros la principal ventaja consiste en que podremos usar rutas relativas


¿Cómo se crea un Qproject?

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

Tarea 2.3: Creación de un Qproject

  • Simplemente tienes que crear un Qproject que se llame “my_primer_qproject”

  • Mejor si creas el Qproject en el Escritorio

  • Mira cuantos archivos hay en la carpeta del proyecto



Dos cosillas sobre los Qprojects

  1. ¿Cómo abrirlos?
    • Siempre desde el fichero con icono azulito y extensión .Rproj

  1. ¿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.4: Abriendo y cerrando Qproject’s

  • Cierra RStudio

  • Vuelve a abrir el Qproject "my_primer_qproject"

  • Asegúrate de que realmente “estás” en "my_primer_qproject"


  • Borra todos los archivos del Qproject excepto el fichero .Rproj


Creación de documentos .qmd



Vamos ya a crear nuestro primer fichero .qmd

… eso sí, lo crearemos dentro de un Qproject

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 .qmd que acabamos de crear.

  • Al intentar procesarlo te pedirá un nombre. LLamalo index

  • ¿Qué ha pasado finalmente?





Vamos a jugar un rato con RStudio


Nos servirá para familiarizarnos con :

  • la interfaz de Rstudio

  • los conceptos de documento fuente (.qmd) y documento final (.html, .pdf, etc…)


… y empezar a entender la sintaxis de “Quarto Markdown”

Tarea 2.6a: Creamos un nuevo qmd: "prueba_01.qmd"

  • Vamos a crear un nuevo documento “.qmd”.

  • Procésalo. Esta vez llámalo prueba_01.qmd


Tarea 2.6b: Reusamos "prueba_01.qmd" para crear un pdf

  • Vamos a reusar el fichero fuente prueba_01.qmd para generar un pdf. Para ello:

    • En el encabezamiento has de cambiar   “format: html”   por   “format: pdf”

    • 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


Tarea 2.6c: Usamos "prueba_01.qmd" para generar unas slides

  • Reutiliza "prueba_01.qmd" para generar unas “revealjs” slides. Solo has de cambiar el formato de salida!!
  • Si avanzas aparecerá la solución. Inténtalo sin mirar la solución!!!!
  • La solución:
title: "prueba_01"
format: revealjs


Tarea 2.6d: Vamos a cambiar la apariencia visual de las slides

  • Vamos a cambiar el theme de las “revealjs” slides. Para ello:
title: "prueba_01"
format:
  revealjs:
    theme: night




Tarea 2.6e: Ahora vamos a cambiar el “theme” usado en el fichero index.qmd

  • El listado de “themes” lo tienes aquí

  • Piensa bien cómo has de dejar el “yaml”. Apóyate en lo que hemos hecho para las slides

  • La solución está más adelante, pero no la mires


  • Solución: has de dejar el “YAML” del qmd como:
title: "Mi documento"
author: "Nosotros"
date: today
format:
  html:
    theme: sandstone


Tarea 2.7: Vamos a usar nuestro Qproject para generar una página web

  • Modifica el archivo _quarto.yml para que su contenido sea:


project:
  type: website
 
website:
  navbar:
    right: 
      - prueba_01.qmd


  • Para generar la página web tienes que hacer un “Build > Render Project”



Tarea 2.8: Añade una nueva página a nuestra página web

  • Pista: puedes reutilizar el contenido del fichero index.qmd

Una solución a la Tarea 2.8

project:
  type: website
 
website:
  navbar:
    background: "#DF55CB"
    right: 
      - text: "Info"
        href: index.qmd
      - text: "Más Info"
        href: index.qmd
    left: 
      - icon: house-door
        href: index.qmd


Tarea 2.8b: Haz que se vean las slides en la web

  • Esta vez no hay solución


Lo que ya sabemos


  • Trabajamos con Qprojects

  • Documento fuente escrito en Qmd genera diferentes outputs

Para poder practicar lo que vayamos aprendiendo …



Tarea 3.0: Vamos a crear un nuevo Qproject

  • Cierra RStudio

  • Crea un nuevo Qproject llamado “my_qproject”

  • Inspecciona los documentos que hay dentro de “my_qproject”

  • Borra el archivo my_qproject.qmd

  • Crea un archivo .qmd llamado prueba_01.qmd


Qmarkdown: guía rápida (.qmd)

Los documentos .qmd tienen 3-4 partes

  1. Encabezamiento (yaml header)

  2. Trozos de código R (R chunks)

  3. Texto (escrito en Markdown) …

    … y todo lo demás: imágenes, links, ecuaciones, etc …


Un ejemplo

source code (escrito en QMD)

output



(I): YAML


  • Se utiliza para especificar metadatos (opciones) del documento final

(I) El encabezamiento o “yaml header”

  • Se (suele) poner al principio del documento, entre estas marcas: ---

  • En el yaml son MUY importantes los espacios y la indentación


Ejemplos de yaml
---
title: "Mi primer archivo qmd"
date: "2023-08-08"
format: html
---
---
title: "Mi primer archivo qmd"
date: "2023-08-08"
format:
  html:
    toc: true
    toc-location: left
---
---
title: "Mi primer archivo qmd"
date: "2023-08-08"
format:
  html:
    toc: true
    toc-location: left
theme: sketchy            #- hay 25 themes: https://quarto.org/docs/output-formats/html-themes.html
embed-resources: true     #- hace el documento auto-contenido
---

Tarea 3.1: Vamos a jugar con el yaml

  • Utiliza el archivo prueba_01.qmd para probar como quedaría prueba_01.html al usar los 3 anteriores yaml's


  • Una vez hayas probado a usar el tercer YAML, prueba algún otro theme de los 25 disponibles. Aquí tienes el listado, y aquí hay ejemplos para ver cómo quedan y decidir cual te gusta más.


(II): CHUNKS


  • En documentos .qmd podemos incorporar código

  • Código que puede ser ejecutado

  • Así se podrá mostrar en el documento final tanto el código como los resultados (de la evaluación del código)

  • Esto es lo que permite que los documentos sean reproducibles

  • La documentación oficial está aquí

(II) Code Blocks o chunks (código R)

  • Para que Quarto sepa qué partes del .qmd es código R, debe ir dentro de estas marcas:

  • Por ejemplo:

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



(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

Tarea 3.2: Vamos a incorporar un chunk a nuestro .qmd

  • Utiliza el archivo prueba_01.qmd para insertar un chunk de código R con las siguientes instrucciones:

    # install.packages(tidyverse)
library(ggplot2)
ggplot(iris, aes(Sepal.Length, Petal.Length)) + geom_point()

    Si no tuvieses el paquete tidyverse instalado, puedes usar este otro chunk:

    plot(iris$Petal.Length,iris$Petal.Width)

Ayudita con las marcas de los chunks

  • Para incorporar las marcas que delimitan los chunks de código, puedes usar este atajo del teclado: Alt-Ctrl-I


Tarea 3.2b: Vamos a jugar con la opciones de los chunks

  • Incorpora al chunk las siguientes opciones: echo y eval

  • ¿Cuales son las opciones por defecto para echo y eval?

  • Incorpora también al chunk las siguientes opciones: message y label


Tarea 3.2b: Una solución

#| eval: true
#| echo: true
#| message: false
#| label: my-primer-chunk

# install.packages(tidyverse)
library(ggplot2)
ggplot(iris, aes(Sepal.Length, Petal.Length)) + geom_point()


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


Tarea 3.3: opciones de los chunks en el YAML

  • Utiliza el archivo prueba_01.qmd para insertar las opciones de los chunks en el YAML del documento

  • Por ejemplo, indica en el YAML que   echo: true     pero     eval: false

Tarea 3.3: Solución

execute:
  echo: true
  eval: false


  • ¿Se puede poner la opción label: en el YAML?


Extensión: uso de la opción include

  • ¿Se puede poner la opción include: en el YAML?


(II) Chunks: otras opciones de Quarto para los chunks

Ahora, en Quarto, hay más opciones para los chunks. Documentación oficial aquí. Por ejemplo:


  • Hacer folding code con #| code-fold: true

    • Puedes combinarlo con #| code-summary: "Para ver el código, pincha"


  • Si el código es muy largo, puedes usar #| code-overflow: wrap (o scroll)


  • Puedes hacer que se muestren los números de linea con #| code-line-numbers: true

Todas estas opciones también pueden ir en el YAML.

Tarea 3.4: Nuevas opciones de los chunks

  • Utiliza el archivo prueba_01.qmd para probar algunas de las nuevas opciones de los chunks en el YAML

  • Por ejemplo:

format:
  html:
  code-fold: true
  code-summary: "Para ver el código, pincha"
  code-line-numbers: true


  • Pudes también probar a usar la opción code-tools: true y ver que ocurre.


La documentación oficial la tienes aquí y aquí


(II) Código: inline code

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


Por ejemplo

  • Si quiero describir un conjunto de datos puedo hacerlo escribiendo: “El data.frame iris tiene 150 filas y 5 variables”

  • Pero es mejor hacerlo con inline code. Para ello tienes que poner el código R dentro de estas marcas: `r `

  • Habría que escribirlo así:

    • El data.frame iris tiene `r nrow(iris)` filas y `r ncol(iris)` variables.


  • Documentación oficial de Quarto aquí. (No hay mucho más)

Tarea 3.5: Código inline

  • Utiliza el archivo prueba_01.qmd para incorporar un párrafo de texto que contenga código inline.

  • Por ejemplo, puedes incorporar este párrafo:

Este archivo que estoy escribiendo lo hice el 26 de junio de 2023.

pero lo que queremos es que la fecha se modifique cada vez que se procese el documento prueba_01.qmd


Pista: puedes probar a usar parte deel siguiente código R

Sys.Date()
format(Sys.Date(), "%d %B, %Y")


(III) Texto


  • Markdown es un lenguaje de marcado ligero con sintaxis sencilla que permite dar formato y estructura a un texto y convertirlo a .html


(III) Texto: ¿qué narices es esto de Markdown?

  • Es un lenguaje de marcas diseñado para escribir fácilmente para la web y que también sea fácilmente legible.
  • Markdown es un lenguaje estoico para escribir (para la web)

  • Markdown fue creado por John Grueber y Aaron Swartz en 2004. Para saber más sobre Aaron Swartz puedes ver este documental.

  • 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

    Markdown is a text-to-HTML conversion tool for web writers.

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

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.

(III) Texto: ideas básicas (otra vez)

  • En los documentos .qmd, “todo” lo que no es el yaml o un chunk, es texto.

  • En Quarto el texto se escribe en Markdown

  • Como Quarto se basa en pandoc, se usa “Pandoc`s markdown”, una versión revisada y extendida de la propuesta original de Grueber


  • Tienes una fantástica guía de Markdown aquí, y aquí una cheatsheet.

(III) Texto: Dando formato al texto

  • Sintaxis básica de markdown
Si escribes esto: Se verá esto: 
texto normal
 texto normal 
texto en **negrita**
 texto en negrita 
texto en *cursiva*
 texto en cursiva 
un superíndice^2^
 un superíndice2 
un subíndice~2~
 un subíndice2 
palabras ~~tachadas~~
 palabras tachadas 
`verbatim code`
 verbatim code 
> un blockquote

un blockquote



Tarea 3.7: texto en markdown

Para practicar a escribir con Markdown podemos:

  • 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

  • Alternativamente, podemos usar editores online como este o este


  • Aquí tienes un ejemplo:
Cuando quise darme cuenta la **clase había terminado** ....


(III) Texto: Dando formato al texto

  • Más posibilidades:
Si escribes esto: Se verá esto: 
[texto subrayado]{.underline}
 texto subrayado 
<mark>texto destacado</mark>
 texto destacado 
[En versalita]{.smallcaps}
 En versalita 
el emoji :joy:
 el emoji 😂 
> :warning: **Cuidado!!** no

⚠️ Cuidado!! no


(**) Los emojis mejor desde el editor visual o copiándolos, por ejemplo, desde aquí


(III) Texto: Notas al píe

Se usa la marca ^, y hay 2 sintaxis:


1.Con sintaxis inline:

Sintáxis (inline) para insertar una nota al píe^[Se llama inline 
porque el contenido de la nota al píe se entremezcla con el texto principal]. Suele ser
la sintáxis que yo uso.


  1. No-inline
Aquí voy a poner otra nota al píe [^1] , y otra más.[^b]

[^1]: Esta otra sintaxis me gusta menos. Pero igual es más clara

[^b]: No sufras por la numerácion. lo hará Pandoc!!


  • Documentación oficial aquí

(III) Texto: Títulos


Markdown: Se verá esto: 
# Header 1

Header 1

 
## Header 2

Header 2

 
### Header 3

Header 3

 
#### Header 4

Header 4

 
##### Header 5
Header 5
 
###### Header 6
Header 6


(III) Texto: Creando listas

  • En las listas es crucial la indentación (normalmente 2 espacios)


(III) Texto: Párrafos

  • Para crear un nuevo párrafo has de dejar una (o más) lineas en blanco
  • Para crear más espacio entre párrafos; es decir, añadir una linea en blanco extra, podemos usar uno o varios: <br> o <br><br>


Dentro de un párrafo

  • 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”

Extensión: más formas de crear “hard line breaks”

  • El “hard line break” también se puede hacer con <br>

  • El “hard line break” también se puede hacer con "\" seguido de nueva linea.

  • En una tabla, \ es la única forma de crear un salto de línea, ya que se ignoran los espacios finales en las celdas.

(III) Texto: Lineas, espacios, …

  • Si en una linea de texto hay 2 espacios o más, estos se reducen a un espacio.

Extensión: ¿cómo dejar más espacio entre palabras?

  • Por lo tanto, si quieres separar palabras con más de un espacio, tendrás que usar lo que en html se conoce como “entities”: &nbsp;(1 espacio) &ensp;(2 espacios) y &emsp;(4 espacios).

    • Otra forma sería con la etiqueta <pre>.


Extensión: un detalle que a veces es útil

  • Los espacios al principio de las lineas que empiezan con | se mantienen (🤓)

(IV) Más elementos


  • Además de YAML, chunks y texto, Markdown tiene más elementos para escribir
  • Por ejemplo: links, imágenes, vídeos, ecuaciones, tablas, bibliografía, etc ….

(IV) Más elementos: Imágenes

  • Documentación oficial aquí
![](imagenes/imagen_ababol.jpg){ fig-align="left" width="12%"}

![](./imagenes/imagen_ababol.jpg){ fig-align="right" width="20%"}

  • Puedes ver como hacer composiciones de imágenes en el blog, concretamente aquí, además de cuestiones como el tamaño y aspecto de las imágenes.

Tarea 3.8: Markdown, incorporar una imagen


  • Guarda esta otra imagen dentro de my_qproject, concretamente dentro de la carpeta imagenes

  • Incorpora esa imagen (guardada en tu ordenador) al archivo prueba_01.qmd


(IV) Más elementos: Imágenes generadas con código

  • Documentación para fijar el tamaño aquí
```{r}
#| label: fig-penguins-01
#| fig-cap: Gráfico con datos de pingüinos
#| fig-width: 7
#| fig-asp: 0.618
#| output-location: column-fragment
#| code-line-numbers: "2|3|4-5|6|7"
library(tidyverse)
library(palmerpenguins)
pp <- ggplot(penguins,aes(
    x = bill_length_mm, y = bill_depth_mm,
    color = species, shape = species)) +  
  geom_point() +
  theme_minimal() +
  labs(x = "Bill length (mm)", y = "Bill depth (mm)")

pp
```

Figura 1: Gráfico con datos de pingüinos


(IV) Más elementos: Tablas con Markdown

  • Documentación oficial para tablas aquí


Sintaxis Markdown para tablas
| Right | Left | Default | Center |
|------:|:-----|---------|:------:|
|   12  |  12  |    12   |    12  |
|  123  |  123 |   123   |   123  |
|    1  |    1 |     1   |     1  |

: Título de la tabla

Genera lo siguiente:

Título de la tabla
Default Left Right Center
12 12 12 12
123 123 123 123
1 1 1 1
  • Como ves no es fácil-fácil generar tablas con Mardown pero, puedes usar un generador de tablas, por ejemplo este o este. También se puede usar el editor visual de Rstudio

(IV) Más elementos: Tablas con R

  • 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 o esto
df <- rio::import("./datos/matriculados.xlsx")
gt::gt(df)
Nombre Nota Comentario
Eva Maria 10 very good!!
Pilar 8 awesome!!
Victor 6 keep going
Enric 7 great

(III) Más elementos: Ecuaciones

  • Markdown admite ecuaciones escritas en Latex:

    • si van entre un $ serán ecuaciones inline
    • $$ para ecuaciones independientes.
Markdown Syntax Output 
ecuación inline: $E = mc^{2}$
 ecuación inline: \(E=mc^{2}\) 
ecuación independiente:

$$E = mc^{2}$$
 ecuación independiente:
\[E = mc^{2}\]

  • Tienes editores online de ecuaciones en Latex aquí y aquí. Puedes ver algunos ejemplos de ecuaciones escritas en Latex aquí

  • Además, podemos reusar el código Latex de ecuaciones en la web (si se ha usado MathJax). Por ejemplo aquí

RStudio Visual editor


  • ¿Me acordaré de todas la marcas que hemos visto?


🤔, ya te digo yo que No

Editor Visual en RStudio

  • Desde 2020, concretamente desde la versión v.1.4, RStudio dispone de un editor visual

  • El editor visual facilita la inserción de los elementos que hemos ido viendo durante el curso. Documentación oficial aquí y aquí

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

Editor Visual: Modo de edición

Editor Visual: Barra de herramientas

La barra de herramientas del editor visual facilita el acceso a la mayoría de elementos que podemos insertar en nuestros documentos QMD:

Aún quedan más elementos!!


  • Pandoc fenced divs, Pandoc bracketed spans

  • Layout, CSS, ….

  • … pero lo dejamos para más adelante

Intro a Slides con Quarto


  1. Quarto puede hacer slides de varios tipos (ppt, slidy, beamer)

  2. Nos centraremos en el formato Revealjs

Presentaciones con Quarto (generico)

  • Las slides se escriben en QMD, así que ya sabemos

  • Hay algunas especificidades que vamos a ver

  • Veremos primero aspectos comunes a todos los formatos de slides

  • Documentación oficial

Creación de unas nuevas transparencias:

  1. Has de seguir la siguiente ruta de menús:
    File > New File > Quarto Presentation.
  2. 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.

En imágenes:


Creación de una nueva slide:

  • Los títulos de primer nivel crean una nueva slide (y tb una nueva sección)

  • Los títulos de segundo nivel crean una nueva slide.

  • También se puede crear una nueva slide usando 3 o mas guiones cortos: ---


Extensión: modificar la generación de nuevas slides

Hay que usar slide-level: en el YAML. Por ejemplo:

---
title: "Mis slides"
format: 
  revealjs:   
  slide-level: 3
---

Con este yaml, los títulos de tercer nivel (con ###) también crearían una nueva slide

---
title: "Mis slides"
format: revealjs 
---


Pausas en la presentación

  • Por defecto, los elementos de una slide se muestran todos de golpe


⚠️ Para crear pausas en la presentación has de usar las siguientes marcas: . . . 

    (es decir, tres puntos separados por espacios)


  • Por ejemplo:
## Una nueva slide

Contenido nº 1

. . . 

Contenido nº 2
(para ver el Contenido nº 2 habrá que dar al avance página)

Listas incrementales

  • Por defecto las listas se muestran de golpe
  • Si quieres que se muestren elemento a elemento, puedes controlarlo desde el YAML:
title: "My Presentation"
format:
  revealjs:
    incremental: true
  • Se puede ir intercalando listas incrementales, y no-incrementales, con los siguientes fenced div’s:

Lista incremental :


::: {.incremental}
- First we take Manhatan,
- then we take Berlin
:::

Lista no-incremental :


::: {.nonincremental}
- First we take Manhatan,
- then we take Berlin
:::

Columas multiples

  • Como puedes ver, se puede generar contenido en varias columnas. Para ello hay que usar un fenced div con clase columns.

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 de Quarto

  • Por ejemplo:
:::: {.columns}

::: {.column width="40%"}
Mi contenido en la primera columna
:::

::: {.column width="60%"}
Contenido en la segunda columna
:::

::::


Revealjs slides


  • reveal.js es un open source HTML presentation framework.

  • A mi me gustan: en mi opinión tienen unas cuantas ventajas

  • Documentación oficial aquí

  • Listado (extenso) de opciones aquí

Revealjs: primera slide

  • La primera slide se crea automáticamente si pones un título en el YAML

    • En ese caso, la 1ª slide contendrá los metadatos: title, subtitle, author, institute, date
  • La apariencia de la primera slide dependerá del tema elegido. Listado de themes aquí.

Revealjs: Content overflow

Si el contenido que queremos poner no se ajusta a la slide, tenemos varias posibilidades:


  1. Usar la .smaller class al crear la slide:

## Título de la slide {.smaller}


  1. Modificar el YAML para hacer las slides “scrollables”:
---
title: "My Presentation"
format:
  revealjs:
      scrollable: true
---

Revealjs: Slide background

En mi opinión las slides mejoran bastante estéticamente si en alguna de ellas cambiamos el fondo. La documentación está aquí

  • Puedes incorporar un fondo especifico a una slide. Se pueden usar los siguientes elementos: color, imagen, vídeo e iframe. Por ejemplo:
## Título de la slide {background-color="aquamarine"}
  • Opciones más complejas:
## Slide Title {background-video="video.mp4" background-video-loop="true" background-video-muted="true"}

## Slide Title {background-color="black" background-image="https://placekitten.com/100/100" background-size="100px" background-repeat="repeat"}

## Slide Title {background-iframe="https://www.uv.es"}

Slide Backgrounds: ejemplo 1 (color)

Para poner un color de fondo:


## Slide Backgrounds: ejemplo 1 (color) {background-color="aquamarine"}

Slide Backgrounds: ejemplo 2 (imagen)

Para poner una imagen de fondo:


## Slide Backgrounds: ejemplo 2 (imagen) {background-image="imagenes/perro_blanco.jpg" background-size="cover"}

Se pueden hacer cosas muy chulas como:

Inspiración, vamos, copiado de https://emilhvitfeldt.github.io/useR2022-textrecipes

Revealjs: Tabsets

  • Puedes crearlas con:
::: {.panel-tabset}
## Primer Tab

Contenido del primer Tab

## Segundo Tab

Contenido del segundo Tab
:::


  • El resultado es:

Contenido del primer Tab

Contenido del segundo Tab

Revealjs: Transiciones

  • Documentación oficial aquí
Transition Description
none No transition (switch instantly)
fade Cross fade
slide Slide horizontally
convex Slide at a convex angle
concave Slide at a concave angle
zoom Scale the incoming slide so it grows in from the center of the screen. 
---
title: "Presentation"
format:
  revealjs:
    transition: slide      #- transiciones de las slide: {none, fade, slide, convex, concave, or zoom}
    transition-speed: fast #- {default, fast, slow}
---

Revealjs: tunear con themes

  • Ya sabemos que podemos cambiar la apariencia de las slides usando los themes disponibles en Quarto. Listado de themes aquí.
  • Para ello tenemos que incluir en el YAML el theme que queremos:
---
title: "Presentation"
format:
  revealjs: 
    theme: dark
---


Ejemplos de presentaciones


Otros formatos

  • Beamer

  • Power Point

  • Slidy

Beamer slides

Beamer slides

  • Beamer es un formato de slides, basadas en Latex, muy popular en el mundo académico
  • Quarto puede hacer Beamer slides. Sólo hay que usar los menús o este yaml:
---
title: "My Presentation"
format: beamer
  • 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í y aquí tienes ayuda para elegir el theme y colortheme. Por ejemplo:
---
title: "Presentation"
format: 
  beamer: 
    aspectratio: 32
    navigation: horizontal
    theme: metropolis
    colortheme: lily
---

Beamer slides (documentación)

Web del curso: https://perezp44.github.io/intro-ds-23-24-web