2.10 xaringanExtra | Construcción de presentaciones con R

2.10 `xaringanExtra`

xaringanExtra es un compendio de mejoras y extensiones para los slides de xaringan.

install.packages("xaringanExtra")

o desde Github:

# install.packages("devtools")
devtools::install_github("gadenbuie/xaringanExtra")

Agregue una vista general de su presentación con vista de mosaico (tile view).
Haga que sus diapositivas sean editables (editable).
Comparte tus diapositivas con estilo con share again.
Transmita sus diapositivas en tiempo real a los espectadores con broadcast.
Haga garabatos en sus diapositivas durante su presentación con scribble.
Anuncie los cambios de diapositiva con un tono o sonido sutil (slide tone) .
Animar transiciones de diapositivas con animate.css.
Agregar paneles con pestañas a las diapositivas con panel set.
Agrega un logo a todas tus diapositivas con logo.
Agregue un cuadro de búsqueda para buscar en sus diapositivas con search.
Utilice el kit de herramientas de la utilidad CSS de Tachyons.
Agregue una transmisión de video en vivo de su cámara web con webcam.
Agregue copia de código con un clic con el portapapeles (clipboard).
Reproduzca los gifs siempre desde el principio con freezeframe.
Ajuste sus diapositivas para llenar la ventana del navegador con fit to screen.
Agregue estilos CSS adicionales con extra-styles.

2.10.1 tile view

tile view ofrece una alternativa para saltar rápidamente entre las diapositivas. Simplemente presione O (la letra O para overview) en cualquier punto de su presentación de diapositivas y aparecerá la vista de mosaico. Haga clic en una diapositiva para saltar a la diapositiva o presione O para salir de la vista de mosaico.

Para agregar una vista de mosaico a su presentación xaringan, agregue el siguiente fragmento de código al archivo R Markdown de sus diapositivas.

{r xaringan-tile-view, echo=FALSE}
xaringanExtra::use_tile_view()

2.10.2 editable

Editable brinda la posibilidad de escribir directamente dentro de los slides, actualizando su contenido en vivo. Haga que cualquier elemento de sus diapositivas sea editable usando la clase .can-edit[...].

Habilite esta opción en sus diapositivas con el siguiente fragmento de código.

{r xaringan-editable, echo=FALSE}
xaringanExtra::use_editable(expires = 1)

Luego, para hacer que un componente de sus diapositivas sea editable, use la clase .can-edit[].

## .can-edit[Usted puede editar este título desde la presentación]

Los campos editables que solo tienen la clase .can-edit se restablecen cada vez que las diapositivas se vuelven a cargar en su navegador. Si desea almacenar los valores editados y que persistan en las sesiones del navegador, asigne a cada campo editable una clase .key-<NAME>. Asegúrese de hacer que cada clave sea única y tenga en cuenta que el nombre de la clave debe ser una clase CSS válida, es decir, no puede contener espacios.

## .can-edit.key-firstSlideTitle[Edite este título y los cambios se guardaran así se recarge la presentación]

Por ejemplo, si quiere crear cuadros de listas par agregar elementos desde la diapositiva.

## A few of my favorite things

.can-edit.key-likes[
- thing one
- thing two
]

2.10.3 share again

Comparte tus diapositivas con share again. Este agrega una barra para compartir a sus diapositivas que solo aparece cuando están insertadas en otra página. La barra agrega una navegación de diapositivas fácil, acceso rápido a vistas de pantalla completa y un menú para compartir con un solo clic en sitios de redes sociales.

Agregue share again a sus diapositivas en tres sencillos pasos.

Agrega use_share_again() a tus diapositivas

{r share-again, echo=FALSE}
xaringanExtra::use_share_again()

Diseñe su barra de acciones y elija sitios de redes sociales

{r style-share-again, echo=FALSE}
xaringanExtra::style_share_again(
  share_buttons = c("twitter", "linkedin", "pocket")
)

Incruste sus diapositivas en sitios web blogdown o R Markdown

{r embed-xaringan, echo=FALSE}
xaringanExtra::embed_xaringan(url = "share-again.html", ratio = "4:3")

embed_xaringan() funciona con cualquier presentación xaringan. No se necesita tener share again.

Así es como se verán sus diapositivas en un documento HTML de R Markdown.

2.10.4 broadcast

Broadcast permite que otros sigan en vivo su presentación, construido con PeerJS, la transmisión le brinda una URL única para compartir con sus espectadores. Luego, cuando ellos carguen las diapositivas, estas lo seguirán automáticamente a medida que usted presenta.

Para equipar sus diapositivas con capacidades de transmisión, agregue el siguiente fragmento al archivo .Rmd de sus diapositivas.

{r broadcast, echo=FALSE}
xaringanExtra::use_broadcast()

Luego, aloje sus diapositivas en línea, ya sea en una página web personal o a través de Netlify, GitHub Pages, GitLab Pages u otro servicio.

Cuando desee presentar, abra la versión de sus diapositivas alojadas en línea en un navegador moderno. Luego presione P para ingresar a la vista de presentador. Haga clic en el botón Broadcast para comenzar a transmitir.

Después de un breve momento, si todo funciona, el botón de transmisión se convertirá en un enlace de transmisión. Comparta este enlace con su audiencia. Cuando abren el enlace, su navegador se conectará con el suyo y, a partir de ese momento, cada vez que avance o cambie de diapositiva, las diapositivas de su espectador se moverán a la diapositiva actual.

Tenga en cuenta que el enlace de transmisión es único y, como presentador, se recuerda durante 4 horas. Después de 4 horas de inactividad, se generará un nuevo enlace. En general, cree y comparta el enlace de transmisión justo antes o cuando comience su evento y, ciertamente, no más de una hora antes de la presentación.

2.10.5 scribble

Scribble te permite dibujar en tus diapositivas xaringan. Haga clic en el icono de lápiz o presione S para comenzar a dibujar. Al presionar S o al iniciar el modo de dibujo, se alterna la caja de herramientas de garabatos. Allí, encontrarás el botón de borrador, que te ayuda a eliminar líneas de tu dibujo. O haga clic en el botón de la papelera para borrar los dibujos de la diapositiva actual. (Ver demo)

{r xaringan-scribble, echo=FALSE}
xaringanExtra::use_scribble()

Sus dibujos permanecen en cada diapositiva así cambie de diapositiva. Tenga en cuenta que no podrá cambiar de diapositiva mientras esté en modo de dibujo. De hecho, puede usar las flechas hacia adelante y hacia atrás para deshacer o rehacer sus dibujos.

Recuerde que si usa la continuación de diapositivas para revelar parcialmente el contenido de la diapositiva (diapositivas incrementales), cada diapositiva parcial es técnicamente una diapositiva completamente nueva en lo que respecta a xaringan. Esto significa que cada diapositiva parcial tendrá su propia capa de dibujo y los dibujos de una diapositiva no se transferirán a la siguiente.

Para guardar una copia de la diapositiva con sus dibujos, su mejor opción es imprimir la presentación desde el navegador.

2.10.6 slide tone

El tono de diapositiva reproduce un sonido sutil cuando cambia de diapositiva. Permite a los usuarios escuchar una señal auditiva de su progreso a través de las diapositivas.

Los tonos aumentan de tono para cada deslizamiento desde una nota C baja a una C alta. El tono permanece igual para las diapositivas incrementales.

Visite las diapositivas de demostración de tono de diapositiva para experimentarlo usted mismo. O incluya el tono de la diapositiva en su próxima presentación xaringan agregando el siguiente fragmento de código al R Markdown de sus diapositivas.

{r xaringan-slide-tone, echo=FALSE}
xaringanExtra::use_slide_tone()

2.10.7 animate.css

Animate.css es una colección de animaciones CSS para implementar entre slides. Contiene

“un montón de animaciones geniales y divertidas para que las use en sus proyectos. Excelente para enfatizar, páginas de inicio, sliders y genialidad general”.

Utilice use_animate_css() para incluir las hojas de estilo animate.css en sus diapositivas. Esta función modifica automáticamente el selector de CSS que habilita la animación para que solo las diapositivas que están visibles estén animadas. Esto mejora drásticamente el rendimiento en plataformas de diapositivas grandes con muchas animaciones. Para usar en otros documentos HTML, configure xaringan = FALSE para cargar el archivo animate.css predeterminado sin este ajuste de rendimiento.

Para usar animate.css en sus diapositivas, agregue el siguiente fragmento de código al R Markdown de sus diapositivas.

{r xaringan-animate-css, echo=FALSE}
xaringanExtra::use_animate_css()

Luego agregue la clase animada y la clase de animación deseada a las diapositivas que desea animar. Las animaciones de salida solo se aplican a las diapositivas al salir.

---
class: animated slideInRight fadeOutLeft

## This slide...

- se desliza desde la derecha
- y se desvanece a la izquierda en la salida

Si desea utilizar las mismas transiciones de diapositivas para todas las diapositivas, puede utilizar use_animate_all(). Esta función establece una animación de entrada y salida predeterminada para todas las diapositivas. Las animaciones se pueden desactivar para diapositivas individuales agregando la clase no-animation a la diapositiva.

Nota: Debido a que use_animate_all() solo importa el CSS requerido para las animaciones de diapositivas hacia adentro y hacia afuera, también debe incluir use_animate_css() (ver arriba) si desea usar otras animaciones de animate.css en sus diapositivas.

Ver demo.

Ver animaciones disponibles.

2.10.8 panelset

Panelset agrega paneles con pestañas accesibles, al igual que los paneles .tabset de R Markdown, a sus diapositivas xaringan. Puede activar un panel haciendo clic en la pestaña, o puede usar el teclado. Cuando llegue a una diapositiva con un conjunto de paneles, las flechas izquierda y derecha atravesarán los paneles.

Para usar el conjunto de paneles, agregue el siguiente fragmento a sus diapositivas.

{r xaringan-panelset, echo=FALSE}
xaringanExtra::use_panelset()
![Panelset](Imagenes/panelset.gif)

Luego, cree un .panelset[...] que contenga .panel[]s. Cada .panel[] debe tener un .panel-name[] y un contenido.

.panel[
.panel-name[NAME]
...content...
]

Este es el ejemplo utilizado en las diapositivas de demostración.

.panelset[
  
.panel[
.panel-name[R Code]

{r panel-chunk, fig.show='hide'}
# ... r code ...
]

.panel[
.panel-name[Plot]

![](README_files/figure-gfm/panel-chunk-1.png)
]

]

2.10.8.1 Panelsets laterales

Como alternativa a la vista de “pestañas arriba del contenido”, también puede usar conjuntos de paneles laterales donde las pestañas aparecen junto al contenido.

Para elegir este efecto, agregue la clase .sideways a .panelset en sus diapositivas o texto de R Markdown.

.panelset.sideways[
  
.panel[
.panel-name[R Code]

{r panel-chunk, fig.show='hide'}
# ... r code ...
]

.panel[
.panel-name[Plot]

![](README_files/figure-gfm/panel-chunk-1.png)
]

]

De forma predeterminada, en el modo lateral, las pestañas aparecerán en el lado izquierdo. Puede elegir colocar las pestañas en el lado derecho al incluir tanto .sideways como .right con .panelset.

.panelset.sideways.right[
  
.panel[
.panel-name[R Code]

{r panel-chunk, fig.show='hide'}
# ... r code ...
]

.panel[
.panel-name[Plot]

![](README_files/figure-gfm/panel-chunk-1.png)
]

]

2.10.8.2 Personalizar la apariencia del panel

Para personalizar la apariencia de los paneles, puede usar style_panelset_tabs() llamado directamente en un fragmento R en sus diapositivas.

{r echo=FALSE}
style_panelset_tabs(foreground = "honeydew", background = "seagreen")

El conjunto de paneles usa opacidad para suavizar las pestañas inactivas y aumentar las posibilidades de que las pestañas funcionen con el tema de la diapositiva. Si decide cambiar los colores de las pestañas o utilizar pestañas de colores sólidos, es probable que desee establecer inactive_opacity = 1 en style_panelset() (o la variable CSS correspondiente panel-tab-inactive-opacity).

Detrás de escena, style_panelset_tabs() actualiza los valores de las propiedades CSS personalizadas que definen la apariencia del conjunto de paneles. Si prefiere trabajar con CSS, los valores predeterminados de estas propiedades se muestran en el código CSS a continuación. Puede copiar todo el bloque CSS en sus diapositivas y modificar los valores para personalizar el estilo para que se ajuste a su presentación.

{css echo=FALSE}
.panelset {
   --panel-tab-foreground: currentColor;
   --panel-tab-background: unset;
   --panel-tab-active-foreground: currentColor;
   --panel-tab-active-background: unset;
   --panel-tab-active-border-color: currentColor;
   --panel-tab-hover-foreground: currentColor;
   --panel-tab-hover-background: unset;
   --panel-tab-hover-border-color: currentColor;
   --panel-tab-inactive-opacity: 0.5;
   --panel-tabs-border-bottom: #ddd;
   --panel-tab-font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
}

2.10.9 logo

use_logo() agrega un logotipo a todas sus diapositivas. Puede convertir el logotipo en un enlace en el que se puede hacer clic y elegir en qué lugar de la diapositiva se coloca. También puede establecer qué tipos de diapositivas no recibirán el logotipo de forma predeterminada.

Para agregar un logotipo a su presentación xaringan, agregue el siguiente fragmento de código al archivo R Markdown de sus diapositivas.

{r xaringan-logo, echo=FALSE}
xaringanExtra::use_logo(
  image_url = "https://raw.githubusercontent.com/rstudio/hex-stickers/master/PNG/xaringan.png"
)

Consulte la documentación de ?use_logo() para obtener más opciones sobre el tamaño y el posicionamiento. También puede hacer que el logotipo sea un enlace usando link_url y puede ocultar el logotipo para una diapositiva en particular usando la clase de diapositiva hide_logo.

Ver demo.

2.10.10 search

2.10.11 Tachyons CSS

Tachyons es una colección de clases de CSS que funciona a la perfección con presentaciones xaringan y la sintaxis de clases de remarkjs.

Para usar Tachyons en sus diapositivas, agregue el siguiente fragmento de código al R Markdown de sus diapositivas.

{r xaringan-tachyons, echo=FALSE}
xaringanExtra::use_tachyons()

Tachyons proporciona clases de CSS pequeñas y de un solo propósito que se componen fácilmente para lograr una mayor funcionalidad y estilos. En la sintaxis de las clases de contenido de Remarkjs, puede componer clases encadenándolas. Por ejemplo, el siguiente markdown produce un cuadro con un fondo verde lavado (.bg-washed-green) y un borde verde oscuro (.b–dark-green) en todos los lados (.ba) con un ancho de línea 2 (.bw2 ) y radio de borde (.br3). El cuadro tiene una sombra (.shadow-5) y un relleno horizontal mediano-grande (.ph4) con un margen superior grande (.mt5).

.bg-washed-green.b--dark-green.ba.bw2.br3.shadow-5.ph4.mt5[
The only way to write good code is to write tons of bad code first. 
Feeling shame about bad code stops you from getting to good code

.tr[
— Hadley Wickham
]]

Tachyons proporciona cientos de clases de CSS abreviadas y concisas, por lo que se necesita algo de tiempo para aprender. Además de la documentación de Tachyons, la hoja de referencia de Tachyons es una ayuda excelente y fácil de usar.

2.10.12 webcam

Agregue un video en vivo de su cámara web en sus diapositivas (solo en su propio navegador). Útil cuando está presentando a través de una videoconferencia para incluir su video, o cuando está grabando una clase o conferencia.

Para agregar una cámara web a su presentación xaringan, agregue el siguiente fragmento de código al archivo R Markdown de sus diapositivas.

{r}
xaringanExtra::use_webcam()

Dentro de sus diapositivas, presione w para encender y apagar la cámara web, o presione ‘Mayús + W’ para mover el video a la siguiente esquina. También puede arrastrar y soltar el video dentro de la ventana del navegador.