Hola Quarto

compartir • colaborar • enseñar • reimaginar

Francisco Alfaro Medina
Valeska Canales Pozo

https://sethnut.com/talks

Motivación

Compartir +
Colaborar

¿Qué es Quarto ?

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

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

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

Instalar y configurar Quarto

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

Instalar y configurar Quarto

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

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 +
Reimaginar

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

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

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

¿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

This is a live R example.

Why run it live?

Because people learn better when they see and try.
No setup, no install — just code and results.
That’s the power of WebR.

Quarto Shinylive

#| '!! 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: sethnut.com/talks