---
title: "Quarto"
subtitle: "Una (pequeña) introducción"
author: "Marta R. Hidalgo"
institute: "Unidad de Bioinformatica y Bioestadística, CIPF"
format: 
  revealjs:
    logo: "logo_UBB_english_green_transparent.png"
    footer: "UBB meetings"
    # theme: solarized
editor: visual
# slide-number: true
chalkboard: true
preview-links: true
execute: 
  echo: true
incremental: true
---

## RStudio conference

-   [rstudio::conf(2022)](https://www.rstudio.com/conference/)
-   [Keynote sobre Quarto](https://www.rstudio.com/conference/2022/keynotes/collaborate-with-quarto/)

. . .

<br/>

Quarto es una **extensión de RMarkdown** creada por RStudio para independizarse de R.

Lanzado en **Julio 2022**, en pruebas desde Septiembre 2021

## Qué se puede hacer con Quarto

-   Todo lo que se podía hacer con RMarkdown...

-   con muchos de sus paquetes...

-   y algunas cosas más:

    -   Compatible con Jupiter Notebooks y Python

<br/>

. . .

La mayoría de cosas ya se podían hacer antes, pero Quarto las **unifica y simplifica**.

## Por ejemplo

-   Documentos HTML, PDF, Word.

-   Presentaciones (esta!)

-   Páginas web

-   Libros

-   Artículos científicos

## Por ejemplo

-   Documentos HTML, PDF, Word. ✅

-   Presentaciones (esta!) ✅

-   Páginas web ✅

-   Libros

-   Artículos científicos

. . .

::: callout-tip
## Es muy fácil de aprender!
:::

## Cómo funciona

Son documentos con encabezados YAML más ricos

```{r, `code-line-numbers`="1-16|2-5|6-9|11-15"}
#| echo: true
#| eval: false
---
title: "Quarto"
subtitle: "Una (pequeña) introducción"
author: "Marta R. Hidalgo"
institute: "Unidad de Bioinformatica y Bioestadística, CIPF"
format: 
  revealjs: 
    logo: "logo_UBB_english_green_transparent.png"
    footer: "UBB meetings"
editor: visual
incremental: false
chalkboard: true
preview-links: true
execute: 
  echo: true
---
```

# Documentos

## Documentos

-   [Múltiples formatos posibles](https://quarto.org/docs/output-formats/all-formats.html "formatos de documentos de Quarto")
    -   Podemos cambiar de uno a otro cambiando una palabra.
-   El editor de texto funciona bastante bien.
-   Sintaxis muy parecida a RMarkdown, pero [**más sencilla**]{style="color: darkorange"}.

## Tabs

```{r, `code-line-numbers`="1-13|1,13|2,5,8,11|3,6,9,12"}
#| echo: true
#| eval: false
::: panel-tabset
### Podemos
Podemos

### poner
Podemos poner

### tabs
Podemos poner tabs

### fácilmente
Podemos poner tabs fácilmente
:::
```

::: panel-tabset
### Podemos

Podemos

### poner

Podemos poner

### tabs

Podemos poner tabs

### fácilmente

Podemos poner tabs fácilmente
:::

## Columnas

```{r, `code-line-numbers`="1-11|1,11|2,5,7,10|3,4,8,9"}
#| echo: true
#| eval: false
::: columns
::: {.column width="50%"}
### Una columna
Poner columnas
:::

::: {.column width="50%"}
### y otra columna
también es muy fácil
:::
:::
```

<br/>

::: columns
::: {.column width="50%"}
### Una columna

Poner columnas
:::

::: {.column width="50%"}
### y otra columna

también es muy fácil
:::
:::

## Ejemplo de HTML y PDF

Documento [PDF](file:///home/mhidalgo/Documents/clases/2022_10%20Sesiones%20R/material%20propio/Ejercicios/E1_vectores/E1_vectores.pdf) y [HTML](file:///home/mhidalgo/Documents/clases/2022_10%20Sesiones%20R/material%20propio/Ejercicios/E1_vectores/E1_vectores.html) solo cambiando una palabra

<br/>

::: panel-tabset
## PDF

```{r, `code-line-numbers`="4"}
---
title: "Práctica 1: Vectores"
subtitle: "Introducción a R"
format: html
execute: 
  eval: false
  echo: true
author: [David Montaner, Francisco Garcia, Marta R. Hidalgo]
---
# Ejercicio 1 
# etc
```

## HTML

```{r, `code-line-numbers`="4"}
---
title: "Práctica 1: Vectores"
subtitle: "Introducción a R"
format: pdf
execute: 
  eval: false
  echo: true
author: [David Montaner, Francisco Garcia, Marta R. Hidalgo]
---
# Ejercicio 1 
# etc
```
:::

# Presentaciones

## Presentaciones

-   Todo lo que podemos hacer con documentos

-   Formatos:

    -   Revealjs

    -   PowerPoint

    -   Beamer

## Gráficos interactivos

```{r}
#| echo: false
#| eval: true
#| warning: false
#| fig-width: 10
#| fig-height: 4.5

# LOAD LIBRARIES
library(palmerpenguins)
library(ggplot2)
library(plotly)

g <- ggplot(data = penguins,
                         aes(x = bill_length_mm,
                             y = bill_depth_mm,
                             group = species)) +
  geom_point(aes(color = species, 
                 shape = species),
             size = 3,
             alpha = 0.8) +
  geom_smooth(method = "lm", se = FALSE, aes(color = species)) +
  scale_color_manual(values = c("darkorange","purple","cyan4")) +
  labs(title = "Penguin bill dimensions",
       subtitle = "Bill length and depth for Adelie, Chinstrap and Gentoo Penguins at Palmer Station LTER",
       x = "Bill length (mm)",
       y = "Bill depth (mm)",
       color = "Penguin species",
       shape = "Penguin species") +
  theme(legend.position = c(0.85, 0.15),
        plot.title.position = "plot",
        plot.caption = element_text(hjust = 0, face= "italic"),
        plot.caption.position = "plot")
ggplotly(p = g)
```

# Webs

## Webs

### Puntos a favor

-   Podemos [**crear webs muy fácilmente**]{style="color: darkorange"} juntando diferentes ficheros `QMD`.

-   Podemos juntar documentos creados con [**diferentes lenguajes en una misma web**]{style="color: darkorange"}.

-   Se pueden [**personalizar muy fácilmente**]{style="color: darkorange"} sin necesidad de saber `HTML`.

## Webs

### Puntos en contra

-   No he podido incluir widgets de `HTML` más allá de `tabs`

-   La integración con Shiny no me parece trivial.

## Cómo hacer una web

::: incremental
-   Nuevo proyecto \> Quarto website

-   Estructura:

    -   Diferentes ficheros `QMD` sin formato en el YAML

    -   Un único YAML para unirlos a todos
:::

. . .

![](images/anillo_unico.png){fig-align="center" width="149"}

## YAML

```{r, `code-line-numbers`="1-18|1-2|4-10|12-16"}
#| echo: true
#| eval: false
project:
  type: website

website:
  title: "web"
  navbar:
    left:
      - href: index.qmd
        text: Home
      - about.qmd

format:
  html:
    theme: cosmo
    css: styles.css
    toc: true

editor: visual
```

## Ejemplo real

::: incremental
-   Cómo convertir un [HTML infinito](file:///home/mhidalgo/UBB_projects/2022/2022_05%20Vicen%20P%C3%A9rez/scripts/report/00_report.html) en una [web preciosa](file:///home/mhidalgo/UBB_projects/2022/2022_05%20Vicen%20P%C3%A9rez/website/_site/index.html)

-   Automatización de HTML para la web de [Ana Blas](http://bioinfo.cipf.es/metafun-HFD/summary.html)

    -   script de R, que genera

    -   script de Quarto, que genera

    -   fichero HTML con sus imágenes correspondientes,

    -   que copio en la web
:::

# En resumen

## Después de un mes de uso {.smaller}

### Puntos positivos

-   Muy flexible
-   Fácil de usar
-   Super cute! 😍

. . .

### Puntos menos positivos

-   No todo es compatible con todo y a veces **no queda claro qué opciones** están disponibles en cada formato.
-   Aún tiene **camino para desarrollar**: me gustaría hacer muchas más cosas de las que se puede.
-   No todo funciona como esperaríamos (pero sí el 95%!)
