class: center, middle, inverse, title-slide # Presentación Guía - Xaringan ## ⚔<br/> ### Diego Sandoval Skinner ### Universidad Nacional de Colombia ### (actualizado: 01 Oktober 2021) --- class: inverse, center, middle # Iniciando --- class: center, middle # Atajos de teclado (Oprima `h` o `?` para desplegar la lista de atajos) --- # Atajos de teclado ## Desplazamiento - Diapositiva anterior: `Up` - `Left` - `PageUp` - `k`. - Diapositiva siguiente: `Right` - `Down` - `PageDown` - `Space` - `j`. - Primera diapositiva: `Home` - `Inicio`. - Última diapositiva: `End` - `Fin`. - Ir a una diapositiva en específico: Nùmero de la página y luego `Return` (o `Enter`) --- layout: true # Atajos de teclado ## Visualización --- - Modo oscuro: `b`. --- - Modo reflejo: `m`. --- - Clonar diapositivas: `c`. --- - Modo presentador: `p`. --- layout: false class: center, middle #Configuración inicial --- layout: true #Configuración inicial ##Elementos de presentación: `title` - `subtitle` - `author` - `institute` - `date`. Ejemplos: --- 1. ```yaml --- title: "Presentación Guía - Xaringan" author: Nombre autor date: "dd/mm/aa" institute: Nombre Institución output: xaringan::moon_reader: lib_dir: libs --- ``` --- #IMAGEN EJEMPLO --- 2. ```yaml --- title: "Presentación Guía - Xaringan" subtitle: "⚔<br/>" author: - Nombre primer autor - Nombre segundo autor date: "(Última actualización: `r format(Sys.time(), '%d %B %Y')`)" institute: Nombre Institución output: xaringan::moon_reader: lib_dir: libs --- ``` --- #IMAGEN EJEMPLO --- layout: false #Configuración inicial En la sección de **`output`** se configura el **formato de salida**. Más adelante se abordará cada una de sus posibles opciones de configuración. Si desea ver una descripción general de estas puede dirigirse a la página de ayuda de `moon_reader` en R ejecutando el comando ```r ?xaringan::moon_reader() ``` --- class: inverse, center, middle #Diapositivas Para definir una nueva diapositiva inserte en el documento una nueva línea con tres guiones consecutivos seguidos por un salto de línea. --- #Diapositivas Ejemplo: ```markdown # Diapositiva 1 Esta es la diapositiva 1 --- # Diapositiva 2 Esta es la diapositiva 2 ``` --- # Diapositiva 1 Esta es la diapositiva 1 --- # Diapositiva 2 Esta es la diapositiva 2 --- class: inverse, center, middle #Propiedades A cada diapositiva se le pueden asignar algunas propiedades. Estas se definen al inicio de la diapositiva. Las opciones disponibles son: --- #Propiedades --- #Nombre: `name` La propiedad de `name` permite asignar un nombre para identificar la diapositiva actual. ```md --- name: DiapositivaUno # Diapositiva Uno ``` --- #Propiedades --- ## Clase: `class` La propiedad `class` le permite asignar clases de estilo CSS a una diapositiva: ```md --- class: middle, center # Texto centrado vertical y horizontalmente ``` --- class: middle, center # Texto centrado vertical y horizontalmente --- #Propiedades --- ## Clase: `class` Las clases CSS definidas por defecto permiten alinear el texto de la diapositiva. Para alinear el texto verticalmente son: - `top` (Opción por defecto) - `middle` - `bottom` Para alinear el texto horizontalmente son: - `left` (Opción por defecto) - `center` - `right` --- class: top, right # Texto arriba y a la derecha ```md --- class: top, right # Texto arriba y a la derecha ``` --- class: bottom, center # Texto abajo y en el centro ```md --- class: bottom, center # Texto abajo y en el centro ``` --- #Propiedades --- ##Imagen de fondo: `background-image` La propiedad `background-image` le permite establecer la propiedad CSS de imagen de fondo para la diapositiva. La imagen puede ser un archivo local o una imagen en línea. La ruta debe colocarse dentro de url (), que es la sintaxis CSS. También puede establecer el tamaño y la posición de la imagen de fondo: ```md --- background-image: url("imagenes/fondo-pintura-acuarela-rosa-vibrante_53876-58930.jpg") background-position: center background-size: 700px 500px class: middle, center # Texto centrado vertical y horizontalmente con imagen de fondo ``` --- background-image: url("imagenes/fondo-pintura-acuarela-rosa-vibrante_53876-58930.jpg") background-position: center background-size: 700px 500px class: middle, center # Texto centrado vertical y horizontalmente con imagen de fondo --- #Propiedades --- ##Imagen de fondo: `background-image` La imagen de fondo estará por defecto centrada tanto horizontal como verticalmente en la diapositiva, y se reducirá para ajustarse si es más grande que la diapositiva. Las posibles opciones para `background-size` son: - `auto`: La imagen de fondo se muestra en su tamaño original. - `cover`: Cambia el tamaño de la imagen de fondo para cubrir todo el contenedor. - `contain`: Cambie el tamaño de la imagen de fondo para asegurarse de que la imagen sea completamente visible. - *`length`* : Establece el ancho y el alto de la imagen de fondo. El primer valor establece el ancho, el segundo valor establece la altura. Si solo se proporciona un valor, el segundo se establece en `auto`. --- #Propiedades --- ##Imagen de fondo: `background-image` background-size: **auto** ```md --- background-image: url("imagenes/fondo-pintura-acuarela-rosa-vibrante_53876-58930.jpg") background-position: center background-size: auto #Propiedades ##Imagen de fondo: `background-image` ``` --- background-image: url("imagenes/fondo-pintura-acuarela-rosa-vibrante_53876-58930.jpg") background-position: center background-size: auto #Propiedades --- ##Imagen de fondo: `background-image` background-size: **auto** --- #Propiedades --- ##Imagen de fondo: `background-image` background-size: **cover** ```md --- background-image: url("imagenes/fondo-pintura-acuarela-rosa-vibrante_53876-58930.jpg") background-position: center background-size: cover #Propiedades ##Imagen de fondo: `background-image` ``` --- background-image: url("imagenes/fondo-pintura-acuarela-rosa-vibrante_53876-58930.jpg") background-position: center background-size: cover #Propiedades --- ##Imagen de fondo: `background-image` background-size: **cover** --- #Propiedades --- ##Imagen de fondo: `background-image` background-size: **contain** ```md --- background-image: url("imagenes/fondo-pintura-acuarela-rosa-vibrante_53876-58930.jpg") background-position: center background-size: contain #Propiedades ##Imagen de fondo: `background-image` ``` --- background-image: url("imagenes/fondo-pintura-acuarela-rosa-vibrante_53876-58930.jpg") background-position: center background-size: contain #Propiedades --- ##Imagen de fondo: `background-image` background-size: **contain** --- #Propiedades --- ##Imagen de fondo: `background-image` background-size: **600px 700px** ```md --- background-image: url("imagenes/fondo-pintura-acuarela-rosa-vibrante_53876-58930.jpg") background-position: center background-size: 600px 700px #Propiedades ##Imagen de fondo: `background-image` ``` --- background-image: url("imagenes/fondo-pintura-acuarela-rosa-vibrante_53876-58930.jpg") background-position: center background-size: 600px 700px #Propiedades --- ##Imagen de fondo: `background-image` background-size: **600px 700px** --- #Propiedades --- ##Imagen de fondo: `background-image` background-size: **30% 100%** ```md --- background-image: url("imagenes/fondo-pintura-acuarela-rosa-vibrante_53876-58930.jpg") background-position: center background-size: 30% 100% #Propiedades ##Imagen de fondo: `background-image` ``` --- background-image: url("imagenes/fondo-pintura-acuarela-rosa-vibrante_53876-58930.jpg") background-position: center background-size: 30% 100% #Propiedades --- ##Imagen de fondo: `background-image` background-size: **30% 100%** --- #Propiedades --- ##Conteo: `count` La propiedad `count` permite que diapositivas específicas no se incluyan en el recuento de diapositivas, este conteo se muestra de forma predeterminada en la esquina inferior derecha de la presentación de diapositivas. ```md --- count: false Esta diapositiva no será contabilizada. ``` --- count: false #Esta diapositiva no será contabilizada. --- #Propiedades --- ##Plantilla: `template` La propiedad `template` nombra otra diapositiva que se utilizará como plantilla para la diapositiva actual: ```md class: middle, center background-image: url("imagenes/fondo-pintura-acuarela-rosa-vibrante_53876-58930.jpg") background-position: center background-size: cover name: diapositiva-uno #Primer contenido. --- template: diapositiva-uno #Contenido agregado al contenido de diapositiva-uno ``` --- class: middle, center background-image: url("imagenes/fondo-pintura-acuarela-rosa-vibrante_53876-58930.jpg") background-position: center background-size: cover name: diapositiva-uno #Primer contenido. --- template: diapositiva-uno #Contenido agregado al contenido de diapositiva-uno --- #Propiedades --- ##Plantilla: `template` Tanto el contenido como las propiedades de la diapositiva de la plantilla se anteponen a la diapositiva actual, con las siguientes excepciones: - Las propiedades de `name` y `layout` no se heredan. - Las propiedades de `class` se fusionan, conservando el orden de clase. La propiedad de `Template` puede usarse para (aparentemente) agregar contenido a una diapositiva de forma incremental. --- #Propiedades --- ## Diseño: `layout` La propiedad `layout` convierte la diapositiva actual en una diapositiva de diseño, que se omite de la presentación de diapositivas y sirve como la plantilla predeterminada utilizada para todas las diapositivas consecutivas siguientes: Una vez se establece en falso, deja de usarse como plantilla predeterminada. Se pueden definir varias diapositivas `layout` a lo largo de la presentación para definir una plantilla común para una serie seguida de diapositivas. --- #Propiedades ## Diseño: `layout` Ejemplo: ```markdown class: middle, right background-image: url("imagenes/fondo-pintura-acuarela-rosa-vibrante_53876-58930.jpg") layout: true #Secciones --- #Sección 1 Contenido 1 - usando estilo definido --- #Sección 2 Contenido 2 - usando estilo definido --- layout: false #Otro tema Contenido con el diseño por defecto de nuevo. ``` --- class: middle, right background-image: url("imagenes/fondo-pintura-acuarela-rosa-vibrante_53876-58930.jpg") layout: true #Secciones --- #Sección 1 Contenido 1 - usando estilo definido. --- #Sección 2 Contenido 2 - usando estilo definido. --- layout: false #Otro tema Contenido con el diseño por defecto de nuevo. --- #Propiedades --- ## Excluir: `exclude` La propiedad de `exclude`, cuando se establece en `true`, oculta una diapositiva. Es una forma de filtrar esa diapositiva para que no se utilice en absoluto al momento del renderizado. ```md exclude: true #Esta diapositiva no se va a leer. ``` --- exclude: true #Esta diapositiva no se va a leer. --- class: inverse, center, middle # Clases para bloques de contenido También puede asignar clases a cualquier elemento de una diapositiva. La sintaxis es `.className[content]`. --- #Clases para bloques de contenido --- Hay algunas clases de contenido integradas, `.left[]`, `.center[]` y `.right[]`, para alinear elementos horizontalmente en una diapositiva. Por ejemplo, para centrar una imagen: ```markdown .center[] ``` .center[] --- #Clases para bloques de contenido --- El contenido dentro de `[]` puede ser cualquier cosa, como varios párrafos o listas. El tema predeterminado de **xaringan** proporciona cuatro clases de contenido adicionales: - `.pull-left[]` y `.pull-right[]` proporcionan un diseño de dos columnas, y las dos columnas tienen el mismo ancho. ```markdown .pull-left[  Contenido a la izquierda - Un item. - otro item. ] .pull-right[  Contenido a la derecha - Un item. - otro item. ] ``` --- .pull-left[  Contenido a la izquierda - Un item. - otro item. ] .pull-right[  Contenido a la derecha - Un item. - otro item. ] --- #Clases para bloques de contenido --- - `.left-column []` y `.right-column []` proporcionan un diseño de barra lateral. La barra lateral izquierda es estrecha (20% del ancho de la diapositiva) y la columna de la derecha es la columna principal (75% del ancho de la diapositiva). Si tiene varios títulos de nivel 2 (`##`) o de nivel 3 (`###`) en la columna de la izquierda, el último título se resaltará y los títulos anteriores aparecerán atenuados. ```markdown .left-column[ ##Sección 1 ###Subsección 1 ###Subsecciòn 2 ###Subsección 3 ] .right-column[ .center[###Subsección 3 ] Contenido a la derecha - Un item. - otro item. ] ``` --- .left-column[ ##Sección 1 ###Subsección 1 ###Subsección 2 ###Subsección 3 ] .right-column[ .center[###Subsección 3 ] Contenido a la derecha - Un item. - otro item. ] --- #Clases para bloques de contenido Puede diseñar sus propias clases de contenido con código CSS, por ejemplo, si desea que el texto sea rojo a través de .red [], puede definir esto en CSS mediante: ```css .red{ color: red; } ``` Más adelante se abordarán las opciones de diseño de estilos con CSS. --- class: inverse, center, middle #Diapositivas incrementales --- #Diapositivas incrementales Para evitar tener que duplicar el contenido si una diapositiva se va a agregar a la anterior, puede usar solo dos guiones para separar las diapositivas y esto hará que una diapositiva herede el contenido de la anterior: ```markdown background-image: url("imagenes/fondo-pintura-acuarela-rosa-vibrante_53876-58930.jpg") background-size: cover #Título - elemento 1 -- - elemento 2 .center[] -- - elemento 3 ``` --- background-image: url("imagenes/fondo-pintura-acuarela-rosa-vibrante_53876-58930.jpg") background-size: cover #Título - elemento 1 -- - elemento 2 .center[] -- - elemento 3 --- class: inverse, center, middle #Diapositiva de presentación La diapositiva de título, se genera automáticamente a partir de los metadatos YAML de su documento Rmd. Contiene el título, subtítulo, autor y fecha (todos son opcionales). Esta diapositiva tiene las clases `inverse`, `center`, `middle` y `title-slide` por defecto. --- #Diapositiva de presentación Si no le gusta el estilo predeterminado, puede personalizar la clase `.title-slide` o proporcionar un vector personalizado de clases a través de la opción `titleSlideClass` debajo de la opción `nature`, por ejemplo, ```yaml --- output: xaringan::moon_reader: nature: titleSlideClass: ["right", "top", "my-title"] --- ``` --- #Diapositiva de presentación #IMAGEN EJEMPLO --- #Diapositiva de presentación También puede deshabilitar la diapositiva de título automática a través de la opción seal y crear una manualmente usted mismo: ```markdown --- output: xaringan::moon_reader: seal: false --- # Mi propio titulo ### Autor Resto de contenido en la portada. ``` --- #Diapositiva de presentación #IMAGEN EJEMPLO --- class: inverse, center, middle #Contenido Formato del texto, expresiones matemáticas, enlaces, imágenes, videos, notas y comentarios. --- layout: true #Contenido: Formato del texto El formato del texto funciona con la misma convención que en Markdown. --- - **Formatos** ```markdown *cursiva 1* _cursiva 2_ **negrita 1** __negrita 2__ `code` superíndice<sup>2</sup> subíndice<sub>2</sub> ``` --- - **Formatos** *cursiva 1* _cursiva 2_ **negrita 1** __negrita 2__ `code` superíndice² subíndice₂ --- - **Títulos** ```markdown # Título 1er nivel ## Título 2do nivel ### Título 3er nivel #### Título 4to nivel ##### Título 5to nivel ... y así ``` --- - **Títulos** # Título 1er nivel ## Título 2do nivel ### Título 3er nivel #### Título 4to nivel ##### Título 5to nivel ... y así --- - **Listas** Para listas **no enumeradas** puede usar `*`, `-` o `+`: ```md `* un elemento` Contenido indentado - un elemento Contenido indentado + otro elemento Contenido indentado ``` --- - **Listas** Para listas **no enumeradas** puede usar `*`, `-` o `+`: * un elemento Contenido indentado - un elemento Contenido indentado + otro elemento Contenido indentado --- - **Listas** Para listas **enumeradas** se usa un número seguido por un punto: `1.` ```markdown 1. Primer elemento Contenido indentado número 1 2. Segundo elemento Contenido indentado número 2 ``` --- - **Listas** Para listas **enumeradas** se usa un número seguido por un punto: `1.` 1. Primer elemento Contenido indentado número 1 2. Segundo elemento Contenido indentado número 2 --- - **Listas** Para crear **sub-listas**, indente la siguiente lista uniformemente por cuatro espacios ```markdown 1. primer elemento * un elemento - un elemento + otro elemento 2. segundo elemento * un elemento - un elemento + otro elemento ``` --- - **Listas** Para crear **sub-listas**, indente la siguiente lista uniformemente por cuatro espacios 1. primer elemento * un elemento - un elemento + otro elemento 2. segundo elemento * un elemento - un elemento + otro elemento --- layout: false #Contenido: Expresiones matemáticas Puede generar expresiones matemáticas siguiendo el lenguaje estándar de LaTex. Para esto, debe escribir el código fuente **en medio de un par de signos de peso**, por ejemplo, ```rmd $a \lambda - \sum_{i=1}^n{x_i^2 + y_i^3} = \frac{24 \theta}{5}$ ``` Produce: `\(a \lambda - \sum_{i=1}^n{x_i^2 + y_i^3} = \frac{24 \theta}{5}\)` --- #Contenido: Expresiones matemáticas O bien utilizar el **modo de visualización** con signos de peso **dobles**: ``` $$a \lambda - \sum_{i=1}^n{x_i^2 + y_i^3} = \frac{24 \theta}{5}$$ ``` Produce: `$$a \lambda - \sum_{i=1}^n{x_i^2 + y_i^3} = \frac{24 \theta}{5}$$` --- #Contenido: Expresiones matemáticas **Observaciones**: - **No debe haber espacios en blanco** luego del signo `$` (o `$$`) de apertura, ni tampoco antes del signo `$` (o `$$`) de cierre. - Si se trata de código LaTex ubicado en medio de **signos de peso sencillos** (`$ $`), dicho código debe estar escrito en **una única línea**. - Si se usan signos de peso **dobles** (`$$` `$$`), las expresiones pueden estar en **varias líneas**, sin embargo, los signos de apertura deben estar justo al **comienzo** de una línea y los signos de cierre justo **al final** de otra línea. - Dicho formato **no funciona en la diapositiva de título o portada**, a menos que desactive la diapositiva de título automática (`seal = FALSE`) y escriba su propia diapositiva de título. --- # Contenido: Enlaces Para insertar un **enlace** la sintaxis es `[Enlace uno](link)`, por ejemplo: ```markdown - [Enlace UNAL](https://unal.edu.co/) ``` - [Enlace UNAL](https://unal.edu.co/) --- # Contenido: Imágenes web Para insertar un archivo de **imagen** desde la **web** la sintaxis es, `` Por ejemplo: ```markdown  ``` También es posible insertar, por ejemplo, archivos **GIF**: ```markdown  ``` --- # Contenido: Imágenes web  --- # Contenido: Imágenes web  --- # Contenido: Imágenes locales Si se desea insertar una **imagen** desde un archivo **local**, simplemente se cambia el link por la ruta de ubicación de la imagen: `` Por ejemplo: ```markdown  ``` --- # Contenido: Imágenes locales  --- # Contenido: Imágenes HTML Para especificar más propiedades de una imagen se hace uso de etiquetas HTML: ```html <div align="center"> <figure> <img src="imagenes/fauna-en-jardin-botanico-de-la-sede-caribe.jpg" alt="Imagen con otras dimensiones" width="500" height="300"> <figcaption> Descripción de la imagen. </figcaption> </figure> </div> ``` --- # Contenido: Imágenes HTML Para especificar más propiedades de una imagen se hace uso de etiquetas HTML: <div align="center"> <figure> <img src="imagenes/fauna-en-jardin-botanico-de-la-sede-caribe.jpg" alt="Imagen con otras dimensiones" width="500" height="300"> <figcaption> Descripción de la imagen. </figcaption> </figure> </div> --- # Contenido: Imágenes R O hacer uso del paquete `knitr` dentro de un `R code chunk`: ````markdown ```{r, out.width='80%', fig.align='center', fig.cap='Descripción de la imagen.'} knitr::include_graphics('imagenes/fauna-en-jardin-botanico-de-la-sede-caribe.jpg') ``` ```` --- # Contenido: Imágenes R ```r knitr::include_graphics('imagenes/fauna-en-jardin-botanico-de-la-sede-caribe.jpg') ``` <div class="figure" style="text-align: center"> <img src="imagenes/fauna-en-jardin-botanico-de-la-sede-caribe.jpg" alt="Descripción de la imagen." width="80%" /> <p class="caption">Descripción de la imagen.</p> </div> --- # Contenido: Videos Puede incrustar videos fácilmente en una presentación xaringan. Como ejemplo, aquí están los pasos para implementar videos de YouTube: 1. En una computadora, vaya al video de YouTube que desea añadir. 2. Debajo del video, de clic en **Compartir**. 3. Haga clic en **Incorporar**. 4. En el cuadro que aparece, copie el código HTML. 5. Pega el código en tu documento xaringan ```html <iframe width="560" height="315" src="https://www.youtube.com/embed/0ytps3018nc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> ``` --- # Contenido: Videos <div align="center"> <iframe width="560" height="315" src="https://www.youtube.com/embed/0ytps3018nc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> --- # Contenido: Videos O manualmente insertar la url como: ```html <div align="center"> <iframe width="560" height="315" src="https://www.youtube.com/embed/0ytps3018nc" frameborder="0" allow="encrypted-media" allowfullscreen></iframe> </div> ``` --- # Contenido: Videos <div align="center"> <iframe width="560" height="315" src="https://www.youtube.com/embed/0ytps3018nc" frameborder="0" allow="encrypted-media" allowfullscreen></iframe> </div> --- # Contenido: Videos Si se desea ingresar desde un archivo local: ```html <div align="center"> <video width="560" height="420" controls> <source src="{{ site.baseurl }}/carpeta/video_name.mp4" type="video/mp4"> </video> </div> ``` Utilice la función `autoplay` dentro de la etiqueta de video para habilitar la reproducción automática. `<video width="560" height="420" controls autoplay>` --- # Contenido: Videos <div align="center"> <video width="560" height="420" controls> <source src="{{ site.baseurl }}/carpeta/video_name.mp4" type="video/mp4"> </video> </div> --- # Contenido: Notas para el presentador Puede escribir notas para que las lea en el modo de presentador (presione la tecla p). Estas notas están escritas justo debajo de tres signos de interrogación `???` después de una diapositiva. Ejemplo: ```markdown # Contenido: Notas para el presentador # Texto Contenido. Entrar en modo presentador (clic en la tecla `p`) para ver las notas. ??? Estas son las notas del presentador. ``` La sintaxis también es Markdown, lo que significa que puede escribir cualquier elemento compatible con Markdown, como párrafos, listas, imágenes, etc. ??? Aquí se ven las notas. --- # Contenido: Notas para el presentador # Texto Contenido. Entrar en modo presentador (clic en la tecla `p`) para ver las notas. ??? Estas son las notas del presentador. --- # Contenido: Notas para el presentador Con diapositivas incrementales, las notas van después de cada incremento. ```markdown # Contenido: Notas para el presentador # Texto Contenido. Entrar en modo presentador (clic en la tecla `p`) para ver las notas. ??? Notas contenido -- Contenido añadido ??? Notas contenido añadido ``` --- # Contenido: Notas para el presentador # Texto Contenido. Entrar en modo presentador (clic en la tecla `p`) para ver las notas. ??? Notas contenido -- Contenido añadido ??? Notas contenido añadido --- # Contenido: Notas para el presentador Las teclas `c` y `p` son muy útiles cuando **pretende presentar su propia computadora conectada a una segunda pantalla** (como un proyector). En la segunda pantalla, puede mostrar las diapositivas normales, luego, con la tecla `c` clona las diapositivas en la pantalla de su propia computadora y allí usa el modo de presentador (tecla `p`). De esta manera, solo usted puede ver el modo de presentador, lo que significa que solo usted puede ver las notas del presentador y la hora, y obtener una vista previa de la siguiente diapositiva. Puede presionar `t` para reiniciar el temporizador en cualquier momento. --- # Contenido: Comentarios Si desea dejar comentarios en el documento de R Markdown puede hacerlo utilizando cualquiera de las siguientes dos notaciones. a. HTML ```markdown <!-- comentario. --> ``` Para convertir un trozo de texto automaticamente en formato de comentario HTML puede seleccionarlo y oprimir las teclas `CTRL/CMD + Shift + C`. b. Link vacío ```markdown [//]: # (comentario) ``` El comentario de estilo HTML estará disponible en la fuente de la página en el navegador, mientras que el enlace vacío no lo estará. --- class: inverse, center, middle #Código R Chunks, resaltar código, añadir gráficas, incluir tablas. --- #Código R: R code chunks Los chunk son fragmentos de código R que puede implementar dentro de sus diapositivas para, por ejemplo, producir resultados de texto, tablas o gráficos. Puede insertar rápidamente fragmentos como estos en su archivo con * El atajo de teclado `Ctrl + Alt + I` (OS X: Cmd + Opción + I) * El comando 'Insertar chunk' en la barra de herramientas del editor o escribiendo los delimitadores de fragmentos: ````markdown ```{r} ``` ```` Cuando renderice su archivo .Rmd, R Markdown ejecutará cada fragmento de código e incrustará los resultados debajo del fragmento de código en su presentación final. --- #Código R: R code chunks La salida de los chunk se puede personalizar con las opciones de `knitr`, argumentos establecidos en el `{}` del encabezado. Algunos argumentos posibles son: `{r, include = , echo = , message = , warning = , ...}` * `include = FALSE` evita que el código y los resultados aparezcan en la presentación. R Markdown aún ejecuta el código en el chunk y los resultados pueden ser utilizados por otros chunks. * `echo = FALSE` evita que el código, pero no los resultados, aparezcan en el archivo terminado. Este argumento es útil para incrustar figuras. * `message = FALSE` evita que los mensajes generados por el código aparezcan en la presentación. * `warning = FALSE` evita que las advertencias generadas por el código aparezcan en la presentación. * `fig.cap` = "..." agrega una descripción a los resultados gráficos. Para ver más información [RStudio](https://rmarkdown.rstudio.com/lesson-3.html). --- #Código R: Resaltar código La opción `highlightLines: true` of `nature` resaltará las líneas de código que están envueltas en `{{}}`. ```yaml output: xaringan::moon_reader: nature: highlightLines: true ``` Ejemplo: .pull-left[ ````markdown ```{r} x <- c(1, 1.5, 3, 2, 2.3, 2,8) y <- rnorm(7, 5) {{z <- x + y - rnorm(7)}} ``` ```` ] .pull-right[ ```r x <- c(1, 1.5, 3, 2, 2.3, 2,8) y <- rnorm(7, 5) *z <- x + y - rnorm(7) ``` ] --- #Código R: Gráficas Puede implementar el código R para generar gráficos y ajustar el tamaño de la figura con fig.height y fig.width en las opciones del chunk: ````markdown ```{r, fig.height=4, fig.width=5, fig.align='center'} library(ggplot2) ggplot(cars, aes(speed, dist)) + geom_point() + theme_bw() ``` ```` --- #Código R: Gráficas ```r library(ggplot2) ggplot(cars, aes(speed, dist)) + geom_point() + theme_bw() ``` <img src="index_files/figure-html/unnamed-chunk-35-1.png" style="display: block; margin: auto;" /> --- #Código R: Tablas Si desea generar una tabla, asegúrese de que esté en formato HTML (en lugar de Markdown u otros formatos), por ejemplo, ```markdown knitr::kable(head(iris), format = 'html') ``` --- #Código R: Tablas ```r knitr::kable(head(iris), format = 'html') ``` <table> <thead> <tr> <th style="text-align:right;"> Sepal.Length </th> <th style="text-align:right;"> Sepal.Width </th> <th style="text-align:right;"> Petal.Length </th> <th style="text-align:right;"> Petal.Width </th> <th style="text-align:left;"> Species </th> </tr> </thead> <tbody> <tr> <td style="text-align:right;"> 5.1 </td> <td style="text-align:right;"> 3.5 </td> <td style="text-align:right;"> 1.4 </td> <td style="text-align:right;"> 0.2 </td> <td style="text-align:left;"> setosa </td> </tr> <tr> <td style="text-align:right;"> 4.9 </td> <td style="text-align:right;"> 3.0 </td> <td style="text-align:right;"> 1.4 </td> <td style="text-align:right;"> 0.2 </td> <td style="text-align:left;"> setosa </td> </tr> <tr> <td style="text-align:right;"> 4.7 </td> <td style="text-align:right;"> 3.2 </td> <td style="text-align:right;"> 1.3 </td> <td style="text-align:right;"> 0.2 </td> <td style="text-align:left;"> setosa </td> </tr> <tr> <td style="text-align:right;"> 4.6 </td> <td style="text-align:right;"> 3.1 </td> <td style="text-align:right;"> 1.5 </td> <td style="text-align:right;"> 0.2 </td> <td style="text-align:left;"> setosa </td> </tr> <tr> <td style="text-align:right;"> 5.0 </td> <td style="text-align:right;"> 3.6 </td> <td style="text-align:right;"> 1.4 </td> <td style="text-align:right;"> 0.2 </td> <td style="text-align:left;"> setosa </td> </tr> <tr> <td style="text-align:right;"> 5.4 </td> <td style="text-align:right;"> 3.9 </td> <td style="text-align:right;"> 1.7 </td> <td style="text-align:right;"> 0.4 </td> <td style="text-align:left;"> setosa </td> </tr> </tbody> </table> --- class: inverse, center, middle #Opciones de salida: ## `output` css, `self contained`, `seal`, `chakra`, `nature`. --- #Opciones de salida Las opciones de salida o `output` son un conjunto de argumentos y configuraciones que podemos definir para modificar el formato de salida o de visualización del documento. Estas opciones permiten personalizar completamente: - El diseño de las diapositivas - Las fuentes del texto - La diapositiva de titulo Entre otras opciones más, como la reproducción automatica de la presentación. --- #Opciones de salida: `output` Esta parametrización se define en la sección de YAML, ubicada al inicio del documento y justo después de la sentencia `ouput:` : ``` yaml title: "Presentación" subtitle: "⚔<br/> con xaringan" author: - Diego Sandoval - Author Two institute: "Universidad Nacional de Colombia" date: "(actualizado: 01 Oktober 2021)" output: xaringan::moon_reader: lib_dir: libs css: [default, default-fonts] nature: highlightStyle: github highlightLines: true countIncrementalSlides: false ``` --- #Opciones de salida: Estilos CSS `css = c("default", "default-fonts", "estilos/textorojo.css")` Este argumento recibe un conjunto de rutas de archivos CSS que se usarán para darle estilo a la presentación. Si el vector de caracteres CSS contiene un valor que no termina con `.css`, se supone que hace referencia a alguno de los archivos de estilo CSS que vienen incluidos en Xaringan. Para conocer todos los estilos CSS disponibles por defecto, utilice: ```r names(xaringan:::list_css()) ``` --- #Opciones de salida: Estilos CSS ```r names(xaringan:::list_css()) ``` ``` ## [1] "chocolate-fonts" "chocolate" "default-fonts" ## [4] "default" "duke-blue" "fc-fonts" ## [7] "fc" "glasgow_template" "hygge-duke" ## [10] "hygge" "ki-fonts" "ki" ## [13] "kunoichi" "lucy-fonts" "lucy" ## [16] "metropolis-fonts" "metropolis" "middlebury-fonts" ## [19] "middlebury" "nhsr-fonts" "nhsr" ## [22] "ninjutsu" "rladies-fonts" "rladies" ## [25] "robot-fonts" "robot" "rutgers-fonts" ## [28] "rutgers" "shinobi" "tamu-fonts" ## [31] "tamu" "uio-fonts" "uio" ## [34] "uo-fonts" "uo" "uol-fonts" ## [37] "uol" "useR-fonts" "useR" ## [40] "uwm-fonts" "uwm" ``` --- #Opciones de salida: Estilos CSS ## Ejemplos - `css = c("metropolis", "metropolis-fonts")` -- - `css = c("rladies-fonts", "rladies")` -- - `css = c("uio-fonts", "uio")` --- # Opciones de salida: `seal` `seal = TRUE` Como vimos en la sección de diapositiva de titulo, este argumento nos permite decidir si generar una diapositiva de título automáticamente usando los metadatos YAML del documento R Markdown o, si es FALSE, nosotros mismos escribir la diapositiva de título. --- # Opciones de salida: `chakra` `chakra = "https://remarkjs.com/downloads/remark-latest.min.js"` Este argumento recibe una ruta a la libreria de remark.js (puede ser local o remota). Tenga en cuenta que si utiliza la última versión remota predeterminada de remark.js, sus diapositivas no funcionarán cuando no tenga acceso a internet. También puede dejar de funcionar después de que se publique una versión más reciente de remark.js. Si estos problemas le preocupan, debe descargar remark.js localmente (por ejemplo, a través de `summon_remark()`) y usar la versión local en su lugar. --- # Opciones de salida: `nature` `nature = list(ratio = '16:9', navigation = list(scroll = TRUE), ...)` Este conjunto de opciones permite definir y/o modificar una amplia gama de propiedades de la presentación. -- - **`ratio`** Establece la proporción de la dimensión de la pantalla para presentar las diapositivas. Opciones: `'16:9'`, `'4:3'`, ... . --- # Opciones de salida: `nature` `nature = list(ratio = '16:9', navigation = list(scroll = TRUE), ...)` Este conjunto de opciones permite definir y/o modificar una amplia gama de propiedades de la presentación. - **`navigation = list(...)`** Definir opciones de navegación: - `scroll = TRUE` : Habilita o deshabilita la navegación usando scroll. - `touch = TRUE` : Habilita o deshabilita la navegación usando el toque. (touch) - `click = FALSE` : Habilita o deshabilita la navegación usando el clic. --- # Opciones de salida: `nature` `nature = list(ratio = '16:9', navigation = list(scroll = TRUE), ...)` Este conjunto de opciones permite definir y/o modificar una amplia gama de propiedades de la presentación. - **`timer = list(...)`** Definir opciones de temporizador: - `startOnChange = TRUE` : Iniciar temporizador cuando ocurra el primer cambio. - `resetable = TRUE` : Habilita o deshabilita la opción de reiniciar el temporizador. - `enabled = TRUE` : Habilita o deshabilita el temporizador. --- # Opciones de salida: `nature` `nature = list(ratio = '16:9', navigation = list(scroll = TRUE), ...)` Este conjunto de opciones permite definir y/o modificar una amplia gama de propiedades de la presentación. - **`slideNumberFormat = 'Slide %current% of %total%'`** Personalizar la etiqueta del número de la diapositiva. Por defecto, remark.js ofrece dos elementos clave `%current%` y `%total%`. --- # Opciones de salida: `nature` `nature = list(ratio = '16:9', navigation = list(scroll = TRUE), ...)` Este conjunto de opciones permite definir y/o modificar una amplia gama de propiedades de la presentación. - **`slideNumberFormat = 'Slide %current% of %total%'`** ```yaml output: xaringan::moon_reader: lib_dir: libs nature: # Ejemplos slideNumberFormat: "%current%" # 12 slideNumberFormat: "Slide %current% of %total%" # Slide 12 of 42 slideNumberFormat: "%current%/%total%" # 12/42 slideNumberFormat: "Diapositiva %current% de %total%" # Diapositiva 12 de 42 --- ``` --- # Opciones de salida: `nature` `nature = list(ratio = '16:9', navigation = list(scroll = TRUE), ...)` Este conjunto de opciones permite definir y/o modificar una amplia gama de propiedades de la presentación. - **`countIncrementalSlides = TRUE`** Habilita o deshabilita el recuento de diapositivas incrementales en el conteo de las diapositivas - **`includePresenterNotes = TRUE`** El valor indica si las notas del presentador deben estar visibles o no. --- # Opciones de salida: `nature` `nature = list(ratio = '16:9', navigation = list(scroll = TRUE), ...)` Este conjunto de opciones permite definir y/o modificar una amplia gama de propiedades de la presentación. - **`highlightLanguage`** Establecer el idioma predeterminado para el resaltado de sintaxis del código. - Predeterminado: `no-highlight` - Alternativas: `'javascript'` , `'ruby'` , `'python'` , ... . - Para deshabilitar el resaltado automático, use `no-highlight` --- # Opciones de salida: `nature` `nature = list(ratio = '16:9', navigation = list(scroll = TRUE), ...)` Este conjunto de opciones permite definir y/o modificar una amplia gama de propiedades de la presentación. - **`highlightStyle`** Establecer estilo de resaltado. - Predeterminado: default. - Alternativas: arta, ascetic, dark, default, far, github, googlecode, idea, ir-black, magula, monokai, rainbow, solarized-dark, solarized-light, sunburst, tomorrow, tomorrow-night-blue, tomorrow-night-bright, tomorrow-night, tomorrow-night-eighties, vs, zenburn. --- # Opciones de salida: `nature` `nature = list(ratio = '16:9', navigation = list(scroll = TRUE), ...)` Este conjunto de opciones permite definir y/o modificar una amplia gama de propiedades de la presentación. - **`highlightLines = FALSE`** Resalte el fondo de las líneas de código con el prefijo `*`. --- # Opciones de salida: `nature` `nature = list(ratio = '16:9', navigation = list(scroll = TRUE), ...)` Este conjunto de opciones permite definir y/o modificar una amplia gama de propiedades de la presentación. - **`autoplay = list(interval = N, loop = TRUE)`** Puede establecer `autoplay` en un número `N` de milisegundos para que las diapositivas se reproduzcan automáticamente cada `N` milisegundos; alternativamente, la reproducción automática puede ser una lista de la forma `list(interval = N, loop = TRUE)`, por lo que las diapositivas irán a la página siguiente cada `N` milisegundos y, opcionalmente, volverán a la primera página para reiniciar la reproducción cuando `loop = TRUE`. --- # Opciones de salida: `nature` `nature = list(ratio = '16:9', navigation = list(scroll = TRUE), ...)` Este conjunto de opciones permite definir y/o modificar una amplia gama de propiedades de la presentación. - **`countdown`** También puede establecer `countdown` en un número (el número de milisegundos) para incluir un temporizador de cuenta regresiva en cada diapositiva. Si usa `autoplay`, puede configurar opcionalmente `countdown = TRUE` para sincronizar la cuenta regresiva con el tiempo de reproducción automática. --- # Opciones de salida: `nature` `nature = list(ratio = '16:9', navigation = list(scroll = TRUE), ...)` Este conjunto de opciones permite definir y/o modificar una amplia gama de propiedades de la presentación. - **`titleSlideClass`** Para modificar el conjunto de clases aplicadas a la diapositiva de título, puede establecer opcionalmente `titleSlideClass` como un vector de clases; el valor predeterminado es `c("center", "middle", "inverse")`. --- class: center, middle Slides created via the R package [**xaringan**](https://github.com/yihui/xaringan). The chakra comes from [remark.js](https://remarkjs.com), [**knitr**](https://yihui.org/knitr/), and [R Markdown](https://rmarkdown.rstudio.com).