Comunicando sus resultados: Creando presentaciones con Quarto

Dagoberto Salgado Horta

Universidad del Tolima 2022 | Octubre 2022

Diapositivas: tutorial Quarto

Dagoberto Salgado Horta

  • Contato

    • dsalgadoh@ut.edu.co

  • Sobre mi

    • Docente asociado de planta Universidad del Tolima

Tareas iniciales

Si no, cree una cuenta en los servicios:

Sugerencia: puede crear una cuenta vinculada a Gmail o GitHub.

Objetivos de aprendizaje

Responde las siguientes preguntas….

  • ¿Qué es Quarto?

  • ¿Cómo escribir un documento simple?

  • ¿Cómo crear una presentación?

  • ¿Cómo hacer que la presentación esté disponible en línea?

  • ¿Cómo cambiar el estilo de presentación?

Acerca de este tutorial….

¡Haremos mucha práctica!

Arte por Allison Horst

¡A menudo surgen noticias!

Arte por Allison Horst

¿Qué es Quarto?

Sería la Habitación…

Qué es Quarto?

  • Quarto es un sistema de escritura científica y técnica de código abierto.Un sistema que representa la versatilidad de la entrada en varios idiomas (p. ej., Python, R, Julia) y la salida en varios formatos (p. ej., PDF, html, documentos de Word y más)

Arte por Allison Horst.

¿Por qué existe Quarto?

  • !Quarto es la nueva generación de R Markdown!

  • Rmarkdown es un paquete de R. Para usarlo, debe tener R instalado (incluso si su archivo no tiene contenido R)..

  • RMarkdown es una herramienta muy buena para la escritura científica y técnica reproducible, lo que permite crear muchos tipos de documentos. Sin embargo, su uso termina limitándose a las personas que usan R.

  • !Quarto es un software nuevo, ¡no depende de R!

Por ejemplo: puede usar VSCode como IDE, escribir un documento con código Python y generar el documento final. Todo ello sin necesidad de tener instalado R y/o RStudio.

¿Cuáles son las similitudes?

  • ¡La estructura de archivos es muy similar! Para muchos archivos hay compatibilidad (basta con cambiar la extensión de .Rmd para .qmd).

  • Podemos agregar código en R, Python, Julia, etc, etc.

  • Podemos crear diferentes tipos de archivos, tales como: páginas web (archivos .html), PDF, .docx, presentaciones, documentos interactivos, libros y más :)

Cómo empezar a usar quarto

Instalar Quarto:


{style=“width: 80%; !importante” fig-alt=““Print screen de la página de instalación de Quarto” fig-align=“center”}

¿Cómo crear un documento simple?

Vamos usar Quarto en RStudio Cloud!

Engines

  • A la hora de crear un nuevo archivo con Quarto, podemos elegir entre dos engines: knitr o jupyter.

Con knitr

Si no tiene instalado el paquete rmarkdown, ejecútelo en la consola:

install.packages("rmarkdown")


Con jupyter

Si no tiene jupyter instalado, ejecute en la terminal:

python3 -m pip install jupyter

Crear nuevo archivo: Nuevo archivo

Print screen da IDE RStudio

Renderizar el archivo: Render file

Print screen da IDE RStudio Cloud

Editor Visual

  • Las versiones más nuevas de RStudio le permiten usar el Editor visual.

Lectura indicada:

Fonte: RStudio

¡Vamos a praticar!

¿Cómo crear una presentación?

Cambiar el encabezado del archivo

---
title: "Título"
format: html
editor: visual
---

Cambiar el encabezado del archivo

---
title: "Título"
format: revealjs
editor: visual
---

  • Las diapositivas se separan considerando títulos y subtítulos: # y ##.

  • Use # para crear una nueva sección.

  • Use ## para crear una nueva diapositiva.

¡Vamos a praticar!

¿Cómo compartir la presentación?

Algumas formas…

  • GitHub Pages

  • Netlify

  • QuartoPub

Primeros pasos usando Quarto en comando de linea

  • Quarto en una CLI: Interfaz de línea de comandos.

  • Podemos usar Quarto en la terminal.

/cloud/project$ quarto help
  Usage:   quarto 
  Version: 1.1.251
                  
  Description:
    Quarto CLI
  Options:
    -h, --help     - Show this help.                            
    -V, --version  - Show the version number for this program.  
  Commands:
    render          [input] [args...]   - Render input file(s) to various document types.            
    preview         [file] [args...]    - Render and preview a document or website project.          
    serve           [input]             - Serve a Shiny interactive document.                        
    create-project  [dir]               - Create a project for rendering multiple documents          
    convert         <input>             - Convert documents to alternate representations.            
    pandoc          [args...]           - Run the version of Pandoc embedded within Quarto.          
    run             [script] [args...]  - Run a TypeScript, R, Python, or Lua script.                
    install         <type> [target]     - Installs an extension or global dependency.                
    publish         [provider] [path]   - Publish a document or project. Available providers include:
    check           [target]            - Verify correct functioning of Quarto installation.         
    help            [command]           - Show this help or the help of a sub-command.

QuartoPub

  • Pondremos nuestra presentación disponible en QuartoPub: https://quartopub.com/

  • En la terminal, usa el comando quarto publish quarto-pub nome-do-arquivo.qmd y sigue los pasos (en la siguiente diapositiva tenemos un ejemplo).

/cloud/project$ quarto publish quarto-pub index.qmd
? Provider: › Quarto Pub
? Authorize (Y/n) › Yes
Please authorize by opening this url: https://quartopub.com/authorize?id=......
? Document name: › Use another name...
? Publish with name: › nome-da-apresentacao
[✓] Creating quarto-pub document
[✓] Preparing to publish document
[✓] Uploading files (complete)
[✓] Deploying published document
[✓] Published document: https://quartopub.com/sites/nome-usuario/nome-da-apresentacao
[✓] Account site updated: https://nome-usuario.quarto.pub

¡Vamos a praticar!

¿Cómo cambiar el estilo de presentación?

Usando temas

  • Existen algunos temas disponibles para usar:
---
format: revealjs
---

Usando temas

  • Existen algunos temas disponibles para usar:
---
format:
  revealjs: 
    theme: moon
---

Temas disponibles

  • beige

  • blood

  • dark

  • league

  • moon

  • night

  • serif

  • simple

  • sky

  • solarized

Tema predeterminado: default

Fuente: Documentación de Quarto

¡Vamos a praticar!

Personalizar el estilo

---
format:
  revealjs: 
    theme: moon
---

Personalizar el estilo

---
format:
  revealjs: 
    theme: [default, custom.scss]
---

Cree un archivo custom.scss para agregar allí nuevas reglas de estilo .

  • En este archivo tendremos dos secciones:

    • /*-- scss:defaults --*/ - SASS variables

    • /*-- scss:rules --*/ - reglas em CSS

Copie el código que se muestra a continuación:

/*-- scss:defaults --*/
// importing fonts
@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Lato&display=swap');
// fonts
$font-family-sans-serif: 'Lato', Tahoma, sans-serif !default;
// headings
$presentation-heading-font: 'Montserrat',  Tahoma, sans-serif  !default;
$presentation-heading-color: #4c83b6 !default;
$body-bg: #191919;
$body-color: #fff;
$link-color: #42affa;
/*-- scss:rules --*/
.slide-logo {
  display: block !important;
  position: fixed !important;
  top: 0 !important;
  right: 10px !important;
  max-height: 15% !important;
  height: 100% !important;
  width: auto !important;
  color: $body-color !important;
}
.slide-number, .reveal.has-logo .slide-number {
  bottom: 10px !important;
  right: 10px !important;
  top: unset !important;
  color: $body-color !important;
}

¡Vamos a praticar!

¿Qué más quieres hacer en las diapositivas?

Diapositiva de exemplo y documentación

Dónde aprender más…

Diapositivas de Dagoberto Salgado Horta, hechas con Quarto.