Hola Quarto

compartir • colaborar • enseñar • reimaginar

Francisco Alfaro Medina
Valeska Canales Pozo

Motivación

¿Qué es Quarto ?

Quarto es un sistema abierto de
publicación científica y técnica

el objetivo es hacer que el proceso de creación
y colaboración sea drásticamente mejor

Un esquema que representa la versatilidad de Quarto para entrada multilenguaje (por ejemplo, Python, R, Observable, Julia) y salida multi-formato (por ejemplo, PDF, HTML, documentos Word y más).

¿Por qué Quarto?

Un cuadrante del logo de Quarto. Un solo documento, múltiples formatos: HTML, PDF, presentaciones o sitios web.

Dos cuadrantes del logo de Quarto. Materiales más accesibles y fáciles de usar, con soporte para la enseñanza y la inclusión.

Tres cuadrantes del logo de Quarto. Fácil de aprender: usa Markdown simple y cuenta con ayudas para empezar rápido.

Cuatro cuadrantes del logo de Quarto. Flexibilidad total: integra texto, imágenes y código en R, Python, Julia u otros lenguajes.

Ejemplos

Quarto organiza
cada paso del renderizado

Quarto facilita el cambio entre formatos

Document

lesson-1.qmd

title: "Lesson 1"
format: html

Presentation

lesson-1.qmd

title: "Lesson 1"
format: revealjs

Website

_quarto.yml

project:
  type: website

website: 
  navbar: 
    left:
      - lesson-1.qmd

Colaborar

Primeros Pasos con Quarto

Instalar y configurar Quarto

Overleaf

Descarga e instalación:
- Quarto.org (Windows, macOS y Linux)
Verificación:
- Ejecutar quarto check en la terminal
Editores recomendados:
- RStudio , VSCode + Quarto Extension

Instalar y configurar Quarto

Screenshot of RStudio IDE

Screenshot of VS Code IDE

🌐 Asegúrate de tener instalado R (RStudio) y/o Python (Jupyter)

Código: hello.qmd

---
title: "Hello, Quarto"
format: html
editor: visual
---

## Meet Quarto

Quarto enables you to weave together content and executable code into a finished document. To learn more about Quarto see <https://quarto.org>.

## Meet the penguins

![](https://raw.githubusercontent.com/quarto-dev/quarto-web/main/docs/get-started/hello/rstudio/lter_penguins.png){style="float:right;" fig-alt="Illustration of three species of Palmer Archipelago penguins: Chinstrap, Gentoo, and Adelie. Artwork by @allison_horst." width="401"}

The `penguins` data from the [**palmerpenguins**](https://allisonhorst.github.io/palmerpenguins "palmerpenguins R package") package contains size measurements for `{r} nrow(penguins)` penguins from three species observed on three islands in the Palmer Archipelago, Antarctica.

The plot below shows the relationship between flipper and bill lengths of these penguins.

HTML: hello.html

Código: example.qmd

---
title: "Habits"
author: "John Doe"
format:
  revealjs:
    transition: fade
    theme: black
    toc: true
    center: true
---

## Getting up

- Turn off alarm
- Get out of bed

---

## Going to sleep 
::: { .incremental }

- Get in bed
- Count sheep

:::

Slides: example.html

Enseñar

¿ Qué podemos hacer con Quarto?

Código con Estilo

Más de 20 temas para resaltar tu código
El tema por defecto está optimizado para accesibilidad

# Define a server for the Shiny app
function(input, output) {
  
  # Fill in the spot we created for a plot
  output$phonePlot <- renderPlot({
    # Render a barplot
  })
}

Código en Movimiento

Más de 20 estilos de resaltado listos para usar
Tema por defecto diseñado para máxima accesibilidad

# Define a server for the Shiny app
function(input, output) {
  
  # Fill in the spot we created for a plot
  output$phonePlot <- renderPlot({
    # Render a barplot
    barplot(WorldPhones[,input$region]*1000, 
            main=input$region,
            ylab="Number of Telephones",
            xlab="Year")
  })
}

Enfoque en Líneas

Señala las líneas clave para mayor claridad
Agrega resaltados paso a paso

import numpy as np
import matplotlib.pyplot as plt

r = np.arange(0, 2, 0.01)
theta = 2 * np.pi * r
fig, ax = plt.subplots(subplot_kw={'projection': 'polar'})
ax.plot(theta, r)
ax.set_rticks([0.5, 1, 1.5, 2])
ax.grid(True)
plt.show()

Código Ejecutable

import seaborn as sns
import matplotlib.pyplot as plt

mpg = sns.load_dataset("mpg")
sns.scatterplot(data=mpg, x="horsepower", y="mpg")
plt.show()

Ecuaciones en LaTeX

Renderizado de ecuaciones a HTML con MathJax.

\begin{gather*}
a_1=b_1+c_1\\
a_2=b_2+c_2-d_2+e_2
\end{gather*}

\begin{align}
a_{11}& =b_{11}&
  a_{12}& =b_{12}\\
a_{21}& =b_{21}&
  a_{22}& =b_{22}+c_{22}
\end{align}

\[\begin{gather*} a_1=b_1+c_1\\ a_2=b_2+c_2-d_2+e_2 \end{gather*}\] \[\begin{align} a_{11}& =b_{11}& a_{12}& =b_{12}\\ a_{21}& =b_{21}& a_{22}& =b_{22}+c_{22} \end{align}\]

Columnas Flexibles

Acomoda texto, imágenes o código en columnas de varios tamaños.

Motor Trend Car Road Tests

The data was extracted from the 1974 Motor Trend US magazine, and comprises fuel consumption and 10 aspects of automobile design and performance for 32 automobiles.

mpg	cyl	disp	hp	wt
18.000000	8	307.000000	130.000000	3504
15.000000	8	350.000000	165.000000	3693
18.000000	8	318.000000	150.000000	3436
16.000000	8	304.000000	150.000000	3433
17.000000	8	302.000000	140.000000	3449

Tabsets

Crea bloques con pestañas que permiten alternar entre distintos contenidos.

Plot
Data

	x	y
0	-2.000000	12.000000
1	-1.929293	11.510050
2	-1.858586	11.030099
3	-1.787879	10.560147
4	-1.717172	10.100194

Gráficos Interactivos

Reimaginar

El poder de las extensiones en Quarto

Extensiones de Quarto

Las extensiones de Quarto permiten añadir nuevas características y potenciar su uso.

🔧Necesitas más poder? Usa Extensions

Quarto Quiz

La extensión Quarto Quiz permite crear preguntas directamente en tus presentaciones.

📚 Más info: Quarto Quiz Extension

Ejemplo

¿Cómo te ha parecido la presentación hasta ahora?

Me encantó 😍
Más o menos 🤔
Tal vez podría mejorar 🙂
No me gustó mucho 😕

Quarto WebR + Pyodide

WebR: Ejecuta código R en el navegador, sin necesidad de instalación.

# To install WebR in your environment
remotes::install_github("attiyap/WebR")

Pyodide: Lo mismo, pero para Python.

# To install Pyodide
pip install pyodide

Ejemplo

Shiny

Shiny es un paquete de R que permite crear de manera sencilla aplicaciones interactivas usando R
(también disponible para Python).

📚 Más info: Shiny - Posit

Ejemplo

Quarto Shinylive

Despliega aplicaciones Shiny que se ejecutan 100% en el navegador — con Python y R.
Sin servidores. Sin configuraciones. Solo escribe código y ejecútalo.

Sigue en tu presentación.
No pierdas el ritmo 🎯

Ejemplo

#| '!! shinylive warning !!': |
#|   shinylive does not work in self-contained HTML documents.
#|   Please set `embed-resources: false` in your metadata.
#| standalone: true
#| viewerHeight: 800

from shiny import App, ui, render, reactive
import matplotlib.pyplot as plt
import io
import base64

# Function to generate the plot dynamically based on input values
def create_plot(yes_value, no_value):
    categories = ['Sí', 'No']
    values = [yes_value, no_value]

    fig, ax = plt.subplots(figsize=(14, 5))
    ax.bar(categories, values, color=['lightblue', 'salmon'])
    ax.set_title('¿Te ha gustado la presentación?')

    # Convert the image to base64 for display in Shiny
    buf = io.BytesIO()
    plt.savefig(buf, format="png")
    plt.close(fig)
    buf.seek(0)
    encoded_image = base64.b64encode(buf.getvalue()).decode()
    return f'<img src="data:image/png;base64,{encoded_image}" style="max-width:100%;">'

# UI definition
app_ui = ui.page_fluid(
    ui.h2("Encuesta Interactiva"),
    
    # Sliders to change values dynamically
    ui.input_slider("yes_value", "Respuestas 'Sí':", min=0, max=50, value=20),
    ui.input_slider("no_value", "Respuestas 'No'", min=0, max=50, value=10),
    
    # Output area for the plot
    ui.output_ui("plot_output")
)

# Server function
def server(input, output, session):
    @output
    @render.ui
    def plot_output():
        return ui.HTML(create_plot(input.yes_value(), input.no_value()))

# Create the Shiny app
app = App(app_ui, server)

¡Gracias!

Conclusiones

Compartir: Un mismo .qmd genera HTML, PDF, slides o sitios web, pasando de lo estático a lo interactivo.

Colaborar: Con un archivo sencillo ya se puede crear y publicar material reproducible, iniciando el trabajo en equipo.

Enseñar: Sus features integran texto, código y visualizaciones, mejorando la enseñanza con recursos dinámicos.

Reimaginar: Tecnologías como WebR, Pyodide o Shiny abren nuevas formas de aprender e innovar en educación.

Referencias y Recursos

Documentación oficial
🔗 quarto.org
Guías y ejemplos prácticos para comenzar de inmediato.

Aprendizaje en video
🔗 Crash Course en YouTube
Introducción práctica a Quarto y sus distintos usos.

Recursos de la comunidad
🔗 Mine Cetinkaya-Rundel
Cursos, libros y presentaciones en Quarto en GitHub.

Aplicaciones en educación
🔗 sethnut.com/resources
Olimpiada Matemática, Verano Matemático, EMMA y más!

🎉 ¡Gracias por Participar!

❓¿Preguntas?

👏 Responder encuesta

🥳 Disfrutar del Evento!

🔗 Nuestro Sitio Web: seth-nut.github.io/resources

Motivación

¿Qué es Quarto ?

Compartir

¿Por qué Quarto?

¿Por qué Quarto?

Ejemplos

Quarto organizacada paso del renderizado

Quarto facilita el cambio entre formatos

Colaborar

Primeros Pasos con Quarto

Instalar y configurar Quarto

Instalar y configurar Quarto

Enseñar

¿ Qué podemos hacer con Quarto?

Código con Estilo

Código en Movimiento

Enfoque en Líneas

Código Ejecutable

Ecuaciones en LaTeX

Columnas Flexibles

Motor Trend Car Road Tests

Tabsets

Gráficos Interactivos

Reimaginar

El poder de las extensiones en Quarto

Extensiones de Quarto

Quarto Quiz

Ejemplo

Quarto WebR + Pyodide

Ejemplo

Shiny

Ejemplo

Quarto Shinylive

Ejemplo

¡Gracias!

Conclusiones

Referencias y Recursos

🎉 ¡Gracias por Participar!

Quarto organiza
cada paso del renderizado