1. Introducción
Los gráficos e infografías son, cada vez más, una parte importante de la mayoría de textos escritos, ya sean estos un informe técnico, un artículo de periódico o un TFG. En el caso de la ciencia de datos, como puede verse abajo en la infografía, el análisis y la exploración de los datos es un proceso iterativo en el que la visualización y la generación de gráficos ocupa un lugar destacado.
R for Data Science (http://r4ds.had.co.nz/)
Uno de los instrumentos y tareas fundamentales de un científico de datos es la capacidad de realizar visualizaciones de datos apropiadas y convincentes. El análisis gráfico no solo ayuda en la exploración y comprensión de los datos, sino que es fundamental a la hora de mostrar las posibles relaciones entre variables, descubrir relaciones o patrones ocultos, y descartar o sugerir nuevas preguntas sobre los datos.
El entorno R tiene diversos sistemas para visualizar datos, los dos
más utilizados son el sistema gráfico de R-base y el ecosistema asociado
al paquete ggplot2. Por diversas razones, en el curso
usaremos el entorno ggplot2 para hacer nuestros gráficos;
de hecho, en la actualidad ggplot2, dada su rapidez en la
iteración entre gráficos, versatilidad y la cuidada estética que tienen
sus gráficos, se ha convertido, al menos por el momento, en el sistema
estándar para hacer gráficos en R. Por ejemplo, ¿cómo creéis que hace la BBC sus gráficos?,
evidentemente con R y ggplot2. Puedes ver uno de sus
repositorios aquí y su cookbook aquí.
Con ggplot2 es sencillo hacer gráficos con calidad para
ser publicados o mostrados, además de que, dada su sintaxis modular,
hace sencillo el reutilizar los gráficos durante el proceso de análisis.
El paquete ggplot2 fue inicialmente desarrollado por Hadley Wickham, pero
actualmente el ecosistema ggplot es el resultado de toda una comunidad
de usuarios que contribuye a enriquecer el sistema gráfico con sus
extensiones y paquetes auxiliares.
En palabras de Hadley en su libro sobre ggplot2:
ggplot2 is an R package for producing statistical, or data, graphics, but it is unlike most other graphics packages because it has a deep underlying grammar. This grammar, based on the Grammar of Graphics (Wilkinson 2005), is made up of a set of independent components that can be composed in many different ways. This makes ggplot2 very powerful because you are not limited to a set of pre-specified graphics, but you can create new graphics that are precisely tailored for your problem. This may sound overwhelming, but because there is a simple set of core principles and very few special cases, ggplot2 is also easy to learn (although it may take a little time to forget your preconceptions from other graphics tools).
Sí, con ggplot2 es “fácil” hacer rápidamente gráficos de
calidad, PERO dominar todos los detalles del paquete sí que es
complicado, pero no nos hace falta conocerlo todo. Además, hay que tener
en cuenta que ggplot2 es un paquete/entorno en constante
evolución. Actualmente está en la versión 3.2.1. Bueno, en marzo de 2020
apareció la versión 3.3.0.
Para entender esta idea de la constante evolución y el papel que
tiene la comunidad de usuarios en el desarrollo de R y sus paquetes
puedes leer este tweet y las respuestas a él. En el tweet sólo
se anuncia una pequeña mejora en como ggplot2 gestiona los
títulos de los gráficos pero genera reacciones en la comunidad de
usuarios.
La redes sociales pueden hacerse eco de la evolución de un paquete,
pero donde habitualmente se produce la discusión/colaboración entre
usuarios es en plataformas como Github. Por ejemplo, puedes ver como se gestó está
pequeña mejora aquí. Fue la issue 3252 de ggplot2.
Otro ejemplo, justo cuando estaba escribiendo este párrafo, leí este otro tweet anunciando otra mejora en
ggplot2.
La página web de ggplot2 puedes encontrarla aquí. En ella
puedes encontrar documentos de ayuda y la referencia oficial. Para darte cuenta de todo lo que
se puede hacer con el ecosistema ggplot visita esta
página donde podrás ver los 79 “paquetes auxiliares” o extensiones a
ggplot2.
Para hacer “buenos” gráficos con ggplot2no sólo es
necesario entender la sintaxis y los pormenores del paquete, sino que
quizás se necesite algo más. Por ejemplo, algo de experiencia y cierta
capacidad visual y estética; incluso hay quien dice que hacer buenos
gráficos es un arte. Para intentar mejorar vuestros gráficos o evitar
ciertos errores, aquí tenéis algunas reglas/consejos, y aquí un curso completo sobre visualización1 con bookdown
incluido.
Entenderás muy bien que hacer buenos gráficos exige conocimiento y mucho trabajo al ver el video de este post, donde se ven las versiones previas para que al final saliese esta preciosura de gŕafico:
@LeTour for this #TidyTuesday. I recreated and adapted the main plot from @ffranchi's great infographic: https://t.co/qLZgLS6jUo
— Georgios Karamanis (@geokaramanis) April 7, 2020
code and big image: https://t.co/ns6qngDdJX#dataviz #rstats pic.twitter.com/DKSYks4j1v
Otro ejemplo del making-of de un gráfico puedes verlo aquí.
Otros dos libros sobre visualización con el código de los ejemplos
hechos con ggplot2, aquí y aquí. Finalmente, algunos consejos de la BBC sobre
visualización.
Como también se aprende los errores, aquí tienes un articulo de The Economist donde muestran errores que ellos mismos han cometido haciendo gráficos. Además pueden descargarse los datos.
2. Ideas básicas sobre ggplot2
Ya se dijo que ggplot2 es un paquete R desarrollado por
Hadley Wickham, aunque actualmente es el resultado de la colaboración de
múltiples desarrolladores. ggplot2 implementa en R The Grammar of
Graphics de L. Wilkinson, un sistema coherente para describir y
construir gráficos. El énfasis de ggplot2 está en la exploración rápida
de datos, especialmente de datos de alta dimensionalidad. Con
ggplot2 es sencillo ir transformando el gráfico mientras se
van analizando los datos.
Para empezar a entender la “filosofía” de ggplot2, os
planteo una pregunta medio retórica: ¿qué vemos en el gráfico de
abajo?
Pues sí, es un gráfico de puntos y nos ayuda a ver las relaciones que
existen entre 3 variables. Estamos habituados a ello, pero vamos a
pensar en el gráfico desde la óptica de “The Grammar of Graphics”
implementada en el paquete ggplot2.
En nuestro gráfico se representan por medio de puntos, en el espacio
X-Y, y mediante los distintos colores de los puntos, las observaciones
de 3 variables. Bien, nada muy novedoso, todos los sistemas gráficos
hacen este tipo de gráficos. Los gráficos de ggplot2 se
realizan mediante la superposición de elementos/capas. Podemos pensar
que el gráfico que hemos visto es una capa. ¿Cómo creamos este gráfico o
capa en ggplot2?
Pues, una de las principales ideas para entender ggplot2
es que cada capa de un gráfico tiene 3 componentes o elementos
principales:
los datos que se van a representar (sencillo, para hacer un gráfico hacen falta datos). Para ello utilizaremos generalmente la función
ggplot()un conjunto de propiedades estéticas asociadas a alguna variable del conjunto de datos. Por ejemplo, la variable Sepal.Lenght está asociada al eje X, ala posición en el eje X. Por su parte, el color de los puntos (otra característica visual o estética) está asociado a los valores de la variable Species. Es decir, usando la terminología de
ggplot2, las distintas variables están asociadas o mapeadas a determinadas características estéticas. El mapeo de variables con estéticas se hará con la funciónaes()de aesthetics. (esto ya no es tan estándar, se explica en breve)el elemento geométrico que se va a representar. En nuestro caso el elemento geométrico que se utiliza para representar los valores de las variables son los puntos, pero podrían haber sido las lineas o las barras … Para especificar el elemento geométrico que vamos a usar en nuestro gráfico se utiliza la familia de funciones
geom_xx(); por ejemplogeom_point()si queremos puntos,geom_line()si queremos que las relaciones entre las variables se representen/visualicen como lineas.
Así en abstracto puede ser complicado entender del todo que quiere
decir todo esto. Vamos a verlo con ejemplos concretos. De momento, para
explicar las principales características de ggplot2
utilizaré un conjunto de datos famoso, pero odiado por algunos, por
haber sido utilizado en numerosos ejemplos y cursos: el iris
dataset.
El conjunto de datos iris contiene datos sobre 150
flores, en concreto sobre 150 lirios. iris tiene 5
variables, 4 de ellas miden la longitud y el ancho del pétalo y sépalo
de los 150 lirios. Estas 4 primeras variables son cuantitativas y
continuas; mientras que la quinta variable es categórica, indicando la
clase o variedad de los lirios, ya que en los datos hay 3 especies
distintas de lirios (setosa, versicolor y virginica). Con estos datos,
con 3 de sus variables, se ha creado el gráfico que ves más arriba.
PRIMER GRÁFICO: Para comenzar nuestras andanzas con
ggplot2 intentaremos replicar con código R el gráfico de
arriba; aunque al principio sólo utilizaremos 2 variables: haremos un
gráfico de puntos de la longitud del sépalo frente a la longitud del
pétalo.
Hacer un gráfico con ggplot2 requiere de varias
etapas,
la primera de ellas consiste en usar la función
ggplot()para inicializar el gráfico.en segundo lugar, tendremos que especificar que conjunto de datos usaremos en el gráfico.
en tercer lugar tendremos que especificar que variables irán asociadas a determinados elementos visuales o estéticos del gráfico
por último, en cuarto lugar, tendremos que especificar que tipo de gráfico o geometría usaremos para visualizar las observaciones.
Veámoslo más detenidamente.
En ggplot2, para hacer un gráfico se empieza
SIEMPRE llamando a la función ggplot(). Si
tecleamos ggplot() en la consola o en un script, parece que
no ocurre nada, pero tras la llamada a la función ggplot(),
R ha creado un objeto, un contenedor para nuestro futuro gráfico. Aún no
vemos el gráfico, faltan cosas, pero ya lo hemos inicializado. Si
quieres ver el objeto/contenedor que hemos creado con la llamada a
ggplot() tienes que asignarle un nombre, así podrás verlo
en la pestaña “Environment” de RStudio.
Para verlo tienes que hacer:
my_grafico <- ggplot()my_grafico, es un objeto R, concretamente una lista con
9 elementos, que tendremos que ir “llenando” para hacer nuestro
gráfico.
Generalmente, dentro de la función ggplot() se suele
especificar el conjunto de datos que vas a utilizar para hacer el
gráfico. A diferencia de los gráficos de R-base, ggplot2 no
permite graficar vectores: los datos que se suministran han de
ser SIEMPRE data.frames o similares.
ggplot(data = iris)
ggplot(iris)Ya está, con cualquiera de las 2 instrucciones de arriba, son equivalentes2, ya hemos inicializado el gráfico y le hemos dicho que datos vamos a usar.
Dijimos que para comenzar haríamos un gráfico de puntos de la
variable Sepal.Length frente a Petal.Length;
así que tenemos que decirle a ggplot2 que variables
de iris queremos visualizar y con que propiedades estéticas
queremos asociar cada variable. Para ello utilizaremos la
función aes() dentro de ggplot(). Lo hacemos
con la siguiente expresión:
ggplot(iris, aes(x = Sepal.Length, y = Petal.Length))Aún no vemos el gráfico, pero con aes() le hemos dicho a
R/ggplot2 que queremos asociar/mapear la variable Sepal.Length al eje x,
y la variable Petal.Length al eje y. Fíjate que, en la pestaña de
gráficos de RStudio, ya vemos los ejes del gráfico; además, fíjate que
ggplot2 ya ha calculado para nosotros el rango de las
variables para ajustar los ejes.
Al igual que antes, podemos omitir los nombres de las opciones de la
función aes(). Esta función puede tener muchos argumentos
(veremos algunos), pero los 2 primeros son siempre x (el eje x) y
después y (el eje y o vertical de mi gráfico); es decir podríamos hacer
lo siguiente que es más rápido de teclear.
ggplot(iris, aes(Sepal.Length, Petal.Length))Con esta instrucción le estamos diciendo a ggplot2 que
vamos a hacer un gráfico con los datos del data.frame iris
y que vamos a asociar/conectar/mapear la variable
Sepal.Length con el eje x, y la variable
Petal.Length con el eje y del gráfico. Perfecto, pero
entonces ¿por qué no vemos el gráfico? La razón estriba en que no le
hemos dicho a ggplot2 qué tipo de gráfico queremos (de
puntos, de lineas etc…). El tipo de gráfico se explicita con una familia
de funciones: geom_xx() o geometrías. Hay
muchas geometrías o tipos de gráficos que podemos usar. Ya lo veremos!!!
Nosotros queremos hacer un gráfico de puntos, así que, de la familia de
geometrías tenemos que usar geom_point().
Veámoslo.
ggplot(iris, aes(Sepal.Length, Petal.Length)) + geom_point()
Como vemos los puntos del gráfico se visualizan en color negro, con
un tamaño, una transparencia y una forma determinadas. Obviamente todo
esto se puede cambiar dentro de geom_point() con las
opciones adecuadas. Por ejemplo:
ggplot(iris, aes(Sepal.Length, Petal.Length)) + geom_point(color = "red", size = 2, alpha = 0.2)
Ya casi está. No es tan complicado. Ya hemos visto las ideas
fundamentales de la visualización con ggplot2:
Los gráficos se inician con la función
ggplot(). Generalmente aquí se especifican los datos (data.frame) que queremos utilizarLa función
aes()sirve para asociar/mappear variables con atributos/características estéticas del gráfico. De hecho el nombre del funciónaes()viene de aesthetics. Las aesthetics más importantes de un gráfico suelen ser los ejes x e y, por eso se ponen siempre al principio deaes(); es decir, son los 2 primeros argumentos deaes(). En nuestro ejemplo hemos asociado la variableSepal.Lengthcon el eje x, y la variablePetal.Lengthcon el eje y. Veremos más aesthetics, como por ejemplo el color o el tamaño (de los puntos … o de las lineas o …)Con
geom_**()elegimos el tipo o geometría de gráfico. Hay muchos tipos de gráficos, así que habrán muchos geoms. Por ejemplo: geom_point(), geom_line(), geom_ …
Estas 3 ideas son las principales para entender ggplot2. Después hay muchas más opciones y elementos que serán muy importantes para conseguir un buen gráfico, pero en cierta forma son secundarias; por ejemplo, los títulos, los ejes, las escalas, el tema etc… lo iremos viendo poco a poco.
Afiancemos las ideas principales de la visualización con
ggplot2. ¿Piensa que hará la siguiente linea de código?
ggplot(iris, aes(Sepal.Length, Petal.Length)) + geom_line()La primera parte de la instrucción es igual a la anterior: queremos un gráfico con el data.frame iris y queremos asociar la variable Sepal.Length con el eje x, con la propiedad aesthetic eje x y Petal.Length con el eje y; pero le hemos pedido un gráfico de lineas (geom_line()). En este caso hacer un gráfico de lineas no tiene mucho sentido, pero si se lo pedimos a R, este nos hace caso y nos lo muestra.
Ya dije que una de las características importantes de
ggplot2 es que funciona por capas que se van superponiendo;
para ir añadiendo capas a nuestro gráfico tenemos que usar el símbolo
+. Por ejemplo si quisiéramos ver los
puntos y las lineas ¿Cómo lo hacemos?
ggplot(iris, aes(Sepal.Length, Petal.Length)) + geom_point() + geom_line()
Tampoco son muy útiles la lineas en este gráfico.
Otra geometría o geom_() que se usa mucho es
geom_smooth(). Probémosla:
ggplot(iris, aes(Sepal.Length, Petal.Length)) + geom_point() + geom_smooth()
Del gráfico puede inferirse que hay una relación, no lineal, pero sí
directa o positiva entre la longitud del sépalo y del pétalo; pero
también se aprecia que hay al menos dos grupos distintos de lirios. Hay
un grupo de observaciones cuyo pétalo parece ser claramente menor que el
del resto de lirios. Veamos si esto se debe o esta asociado al tipo de
lirio, recuerda que hay 3 tipos de lirios, asociados a la variable
iris$Species. Para verlo en nuestro gráfico lo que vamos a
hacer es asociar/mapear la variable Species con la
aesthetics color:
ggplot(iris, aes(Sepal.Length, Petal.Length, color = Species)) + geom_point()
Pues parece que sí, que la especie de lirios “setosa” es más pequeña, al menos en longitud, del sépalo, pero sobre todo del pétalo.
La variable Species podríamos haberla asociado a la
estética tamaño (size), o a la estética forma (shape) pero no sería tan
útil ni quedaría tan bonito el gráfico. Fíjate que incluso R nos avisa
de que asociar la propiedad o aesthetic tamaño con una
variable categórica como Species no es muy recomendable.
ggplot(iris, aes(Sepal.Length, Petal.Length, size = Species)) + geom_point()
#> Warning: Using size for a discrete variable is not advised.
También podemos asociar la variable Species a la
estética “forma”(shape). Lo hacemos en la expresión de más abajo. Como
veis, ahora las diferencias entre especies de lirios no se aprecian tan
bien como cuando usábamos color = Species
ggplot(iris, aes(Sepal.Length, Petal.Length, shape = Species)) + geom_point() 
Os va a costar hacer gráficos, normal!!!, pero espero que la idea principal ya la tengáis. Lo que pasa es que no os he contado todo, en realidad es un poco más complejo y versátil. Lo medio explico en el siguiente apartado.
Más ideas sobre ggplot2
Ya tenéis las ideas principales para hacer gráficos con
ggplot2, pero no os lo he contado todo, tampoco lo voy a
hacer ahora, pero si contaré las cosas de una forma diferente para que
tengáis más flexibilidad/versatilidad a la hora de hacer gráficos. Si
queréis saber toda la verdad3 tendréis que ir al libro de Hadley,
concretamente aquí.
La forma que os he contado de hacer gráficos ggplot2 es
la que veréis habitualmente, yo también hago mis gráficos así, solo que
para entender mejor el funcionamiento, la sintaxis de
ggplot2, os lo tengo que contar otra vez de una forma un
poco diferente o ampliada.
Un gráfico de ggplot2 se inicia llamando a la función
ggplot() eso es cierto y también es verdad que generalmente
dentro de ggplot() se indica el data.frame que vas a
utilizar y con aes() que variables vas a usar y con que
elementos visuales o estéticos quieres asociar cada una de la variables
que vas a utilizar4. Correcto, pero …. en realidad un gráfico
ggplot2 se hace por capas, cada capa se especifica con una función de la
familia geom_xx(), así que en realidad los datos y las
aes() se “deberían” especificar dentro de la función
geom_xx()`.
Parece un poco de lío pero en cuanto lo entiendas es muy fácil y te puede dar más flexibilidad a la hora de hacer tus gráficos. Empecemos: ¿recuerdas que hacen las lineas/expresiones de abajo?
ggplot(iris, aes(Sepal.Length, Petal.Length)) + geom_point()
ggplot(iris, aes(Sepal.Length, Petal.Length)) + geom_point() + geom_line()Podemos pensar que las funciones que hacen la representación gráfica
realmente son las geom_xx(); es ahí donde deberíamos
especificar los datos y variables/estéticas que queremos usar, pero si
no las especificamos en la función geom(), entonces,
ggplot2 mirará a ver si existen, si están especificados, dentro de
ggplot().
Ahora que ya sabemos el funcionamiento básico de
ggplot2, veamos algunos detalles mediante algunos ejemplos.
Hasta ahora hemos especificado el data.frame que queremos graficar con
ggplot(data = my_df) o con ggplot(my_df) y las
variables que queremos ver, y a que propiedad estética queremos
asociarla, con la función aes() dentro de
ggplot(). Si lo hacemos así, todos los
geoms_xx() que utilicemos compartirán el conjunto de datos
y las variables/estéticas a mappear y mostrar; pero a veces, en gráficos
más complejos podemos querer hacer que cada geom_xx()
muestre datos y/o variables distintas.
Entender que cada geom_xx() puede estar asociado a
distintos data.frames y/o variables es importante para tener más
versatilidad con ggplot2.Por ejemplo, las siguientes tres
expresiones hacen el mismo gráfico. Se suele utilizar la primera
expresión, pero la segunda y tercera expresiones son “más flexibles”,
aunque es verdad que si sólo se utiliza un geom_xx() no
ganamos nada por usar la segunda o tercera expresión, pero no será el
caso si en nuestro gráfico necesitamos usar varios
geom_xx()
ggplot(iris, aes(Sepal.Length, Petal.Length)) + geom_point()
ggplot(iris) + geom_point(aes(Sepal.Length, Petal.Length))
ggplot() + geom_point(data = iris, aes(Sepal.Length, Petal.Length))Fíjate, como detalle, pero importante, que si utilizas la tercera
expresión; es decir, si especificas los datos dentro de la función
geom_xx(), es necesario poner el nombre del argumento ; es
decir, debes poner data = iris, no puedes poner solo
iris. Yo me olvido siempre de este detalle5.
En este caso (como el gráfico solo tiene una capa, como sólo usamos
un geom(_xx)) no ganamos nada por usar la segunda o tercera
expresión; PERO, cuando usemos varios geom_xx() esto nos
dará muchas posibilidades para nuestro gráfico.
Intenta descubrir las diferencias y funcionamiento de las 3 siguientes instrucciones. Recuerda que puedes correr las instrucciones en R para ver que hacen exactamente.
ggplot(iris, aes(Sepal.Length, Petal.Length, color = Species)) + geom_point() + geom_smooth()
ggplot(iris, aes(Sepal.Length, Petal.Length)) + geom_point(aes(color = Species)) + geom_smooth()
ggplot(iris, aes(Sepal.Length, Petal.Length)) + geom_point() + geom_smooth(aes(color = Species))Veámoslas una a una:
- Los datos y las 3 variables/estéticas dentro de ggplot()
ggplot(iris, aes(Sepal.Length, Petal.Length, color = Species)) + geom_point() + geom_smooth()
En este caso los 2 geoms comparten el conjunto de datos (iris) y las variables/estéticas a graficar
- Los datos y 2 variables/estéticas dentro de ggplot(), pero una
tercera variable (Species), asociada a la estética color, aparece
solamente en
geom_point()
ggplot(iris, aes(Sepal.Length, Petal.Length)) + geom_point(aes(color = Species)) + geom_smooth()
- Los datos y 2 variables/estéticas dentro de ggplot(), pero una
tercera variable (Species), asociada a la estética color, aparece
solamente en
geom_smooth()
ggplot(iris, aes(Sepal.Length, Petal.Length)) + geom_point() + geom_smooth(aes(color = Species))
Espero, seguro!!, que te has dado cuenta de que si especificas el
data.frame y las variables/estéticas dentro de ggplot()
esto afectará a todos los geoms del gráfico; pero lo que se especifique
dentro de un geom_xx() solo afecta a esa geometría.
Otro ejemplo para entenderlo, ¿por qué no funciona la siguiente expresión?
ggplot(iris) + geom_point(aes(Sepal.Length, Petal.Length)) + geom_smooth(aes(color = Species))Pues porque para poder representar la linea suavizada se utiliza
geom_smooth(), y geom_smooth() necesita como
mínimo tener variables asociadas a las estéticas x e y. Como veis,
dentro de geom_smooth() solo hemos especificado la estética
“color” y tampoco hemos especificado en la función ggplot()
que variables se asocian con x e y. Por lo tanto,
geom_smooth() no puede hacer su trabajo, le faltan los
“datos” de x e y para calcular/obtener la linea suavizada.
Vamos con otros ejemplos. La siguientes expresiones tampoco funcionarán6 si intentáis correrlas en vuestro ordenador. ¿Por qué?
ggplot() + geom_point(data = iris, aes(Sepal.Length, Petal.Length)) + geom_line(aes(Sepal.Length, Petal.Length))
ggplot(aes(Sepal.Length, Petal.Length)) + geom_point(data = iris) + geom_line()
ggplot() + geom_point(data = iris, aes(Sepal.Length, Petal.Length)) + geom_line()Otro ejemplo: hagamos algo más marciano/complicado. Supón que quieres hacer un gráfico diferenciando los puntos por color para las tres especies de lirios, pero quieres que solo se vea la linea suavizada para las dos especies más grandes (virginica y versicolor). Los lirios más pequeños son los de la clase setosa. Igual se puede hacer de otra forma pero la que me viene a la cabeza es hacer lo siguiente:
Primero, crear un dataset que sólo contenga a los lirios grandes, los de las especies virginica y versicolor.
iris2 <- iris %>% filter(Species != "setosa") #- me quedo con los lirios que no son de clase "setosa"Para después hacer el gráfico con cualquiera de las 2 expresiones siguientes. Prefiero la segunda porque hay que teclear/escribir menos, pero puede que sea más didáctica la primera.
ggplot() + geom_point(data = iris, aes(Sepal.Length, Petal.Length, color = Species)) + geom_smooth(data = iris2, aes(Sepal.Length, Petal.Length) )
ggplot(iris, aes(Sepal.Length, Petal.Length)) + geom_point(aes(color = Species)) + geom_smooth(data = iris2)Otro ejemplo más: ¿y si quisiéramos que las 2
especies grandes se representen con el mismo color? Hay varias
soluciones, una de las más marcianas es la que propongo abajo. Es una
solución rara, pero creo que os ayudará a entender
ggplot2
Primero voy a crear un nuevo data.frame sólo con las observaciones de los lirios pequeños, los de la clase setosa.
iris_setosa <- iris %>% filter(Species == "setosa") #- me quedo con los lirios pequeños, los de clase "setosa"ggplot(iris, aes(Sepal.Length, Petal.Length)) + geom_point() + geom_point(data = iris_setosa, aes(color = Species)) + geom_smooth(data = iris2,aes(Sepal.Length, Petal.Length) )
Otra solución, quizás más lógica, consiste en primero agrupar las 2 especies de lirios grandes (versicolor y virginica) en una sola clase.
iris_solo_2_clases <- iris %>% mutate(Species_2 = ifelse(Species %in% c("versicolor", "virginica"), "versi_virgi", "setosa"))Para después hacer el gráfico. Además el gráfico lo podemos hacer al menos de 2 maneras, la segunda mucho mejor, la primera expresión es un poco enrevesada:
ggplot(iris, aes(Sepal.Length, Petal.Length)) + geom_point() + geom_point(data = iris_setosa, aes(color = Species)) + geom_smooth(data = iris_solo_2_clases,aes(Sepal.Length, Petal.Length, color = Species_2) )
ggplot(iris_solo_2_clases, aes(Sepal.Length, Petal.Length, color = Species_2)) + geom_point() + geom_smooth()
Como veis, en ggplot2 hay varias maneras de hacer el
mismo gráfico. Esto al principio puede abrumar/molestar, pero muestra la
flexibilidad de la sintaxis.
Para ir acabando con la “filosofía”/sintaxis/gramática de
ggplot2 intenta imaginar que gráficos hacen las 6
expresiones de más abajo.
Si no puedes, recuerda que siempre puedes ejecutar las ordenes en el ordenador. Fíjate sobre todo en la tercera expresión
ggplot(iris, aes(Sepal.Length, Petal.Length)) + geom_point() + geom_smooth()
ggplot(iris, aes(Sepal.Length, Petal.Length, color = Species)) + geom_point() + geom_smooth()
ggplot(iris, aes(Sepal.Length, Petal.Length, color = Species)) + geom_point(color = "purple") + geom_smooth()
ggplot(iris, aes(Sepal.Length, Petal.Length, color = Species)) + geom_point() + geom_smooth(color = "brown")
ggplot(iris, aes(Sepal.Length, Petal.Length)) + geom_point() + geom_smooth(aes(color = Species))
ggplot(iris) + geom_point(aes(Sepal.Length, Petal.Length, color = Species) ) + geom_smooth(aes(Sepal.Length, Petal.Length, color = Species))
En la tercera expresión se especifica color = Species
dentro de aes() en ggplot(), así que, de
momento, todos los geoms del gráfico deberían diferenciar por especies
de lirios usando el color, PERO, después se vuelve a usar el argumento
color dentro de geom_point(), pero fíjate que
no va dentro de de aes(), va fuera. Concretamente hacemos
lo siguiente: geom_point(color = "purple"); es decir, para
la capa de puntos, y solo para la capa de puntos que se crea con
geom_point(), estamos asociando la estética color, no a una
variable, sino a un color fijo. Sin embargo, para la otra capa del
gráfico, la que resulta de usar geom_smooth() sigue siendo
valido que la estética color está asociada a la variable Species.
Un detalle: imagina que en un gráfico en el que has fijado 3
estéticas dentro de ggplot(aes()). En principio las 3
estéticas afectarán a todos los geom_xx() que utilices en
tu gráfico, pero si quisieras que, por ejemplo, la estética color no
afectase a un geom concreto, podrías hacer lo siguiente:
geom_xx(aes(color = NULL)).
Como puedes imaginar, aún tenemos que ver más elementos de
ggplot2. Como mínimo los títulos y leyendas, los ejes, el
tema, coordenadas, etc… vamos a ello!!
3. Elementos de un ggplot
Ya hemos presentado los principales elementos de los gráficos hechos
con ggplot2, los que tienen que ver con la representación
de las variables. Pero es evidente que un gráfico tiene muchos más
elementos, y lógicamente hay que conocerlos un poco para poder ajustar
los gráficos a nuestras necesidades y mejorar la calidad de nuestros
gráficos.
Ejemplos de otros elementos son: títulos del gráfico y de los ejes, “theme” del gráfico, small multiples o faceting, anotaciones etc…
En está sección iremos más rápido. Se presentarán solamente algunos
ejemplos, conceptos y/o aclaraciones. Si necesitas profundizar más en
estos elementos, puedes acudir a la referencia
oficial de ggplot2 o al bookdown de ggplot2.
Ya dijimos que los gráficos ggplot se componen de capas o layers. Para nosotros, hasta ahora, una capa estaba compuesta de 3 elementos:
un conjunto de datos
un conjunto de variables mapeadas con
aes()a propiedades estéticasuna geometría, con
geom_xx()
Es evidente que en todos los geoms no se pueden especificar todas las
características estéticas. Por ejemplo si usas geom_point
no podrás especificar la anchura o el tipo de las lineas, porque no
estás usando lineas sino puntos. Para ver que estéticas admite cada geom
tendrás que mirar la ayuda de cada geom. Al final de este
post tienen un gráfico interactivo con el que se puede ver
fácilmente que características estéticas admite cada geom. Por ejemplo
geom_bar(), que sirve para hacer gráficos de barras, no
admite mappear variables al eje Y, ya que en el eje Y se
visualizan/mapean las frecuencias absolutas o relativas de la variable
que se representa en el eje X.
Esto es lo básico que hay que saber, pero en realidad, una capa
necesita de dos elementos más: una stat (o
transformación estadística) y una posición. Estos dos
últimos elementos son necesarios pero la verdad es que podríamos seguir
haciendo gráficos con ggplot2 sin conocerlos. ¿Por qué?
Pues porque si en una capa no los especificamos, lo hace
ggplot2 por nosotros. Lo ha estado haciendo hasta ahora en
todos los gráficos que llevamos hechos. Pero claro, saber como utilizar
estos elementos nos dará más flexibilidad a la hora de hacer
ggplots.
Generalmente las capas se van añadiendo con la familia de funciones
geom_xx(), PERO también se pueden añadir
capas con otra familia de funciones stat_xx().
Aparte de estos cinco elementos (datos, aes(), geom, stat y posición) los gráficos ggplot pueden tener más elementos. Veámoslos uno a uno.
3.1 Títulos del gráfico
Es evidente que un gráfico para ser efectivo y mostrar su mensaje con
claridad debe tener un título y/o subtítulo ilustrativo y debe mostrar
información relevante sobre que variables se grafican los ejes X e Y.
Este tipo de elementos pueden modificarse de varias maneras, pero nos
centraremos en la función labs().
Fíjate que con la función labs(), de labels, podemos
cambiar los títulos del gráfico, de los ejes y también de las
leyendas.
En los títulos (tanto del gráfico, como de los ejes y leyendas)
también se pueden cambiar otras características; por ejemplo, cambiar el
tamaño, la fuente o el color, pero eso será tarea de otra función de
ggplot2: del grupo de funciones theme_(). Pero
el tema o theme de los gráficos lo veremos en el siguiente apartado.
Tomemos el siguiente gráfico como referencia y sobre él iremos añadiendo elementos:
p <- ggplot(iris, aes(Sepal.Length, Petal.Length, color = Species)) + geom_point()
p
Con la función labs() podemos añadirle un título,
subtitulo, pie de gráfico o caption. También podemos cambiar el
título de los ejes X e Y, así como también el titulo de la leyenda para
color, o para otras estéticas que utilicemos en el
gráfico.
Es suficiente con ver un ejemplo:
p + labs(title = "Gráfico 1: Longitud del sépalo frente al pétalo",
subtitle = "(diferenciando por especie de lirio)",
caption = "Datos provenientes del Iris dataset",
x = "Longitud del sépalo",
y = "Longitud del pétalo",
color = "Especie de lirio")
Si quisieras eliminar completamente los títulos del
eje X podrías hacerlo en el anterior chunk fijando x = NULL
dentro de la función labs().
En lugar de usar la función labs(), también podemos
utilizar las funciones auxiliares xlab() e
ylab()
p + labs(color = NULL, x = NULL) #- borra el título de la leyenda y del eje X
p + xlab(NULL) + ylab(NULL) #- elimina títulos de los ejes X e Y
3.2 Themes
Themes control the display of all non-data elements of the plot. You can override all settings with a complete theme like theme_bw(), or choose to tweak individual settings by using theme() and the element_ functions. Use theme_set() to modify the active theme, affecting all future plots.
Para cambiar detalles de la apariencia del gráfico como el tamaño,
fuentes y color de los títulos, pero también de los puntos, las lineas,
el fondo del gráfico, la apariencia de las grid-lines, el lugar para las
leyendas, etc… etc… contamos con las “funciones de tema”; todas ellas
comienzan con theme_()
En general con las funciones theme_() podemos
cambiar/ajustar cualquier elemento del gráfico, con la excepción de la
propia representación de los datos (ya sabemos que esto se hacen con las
funciones geom_()). Estos elementos afectan a la apariencia
y detalles del gráfico, pero no a la relación entre variables que se
muestra realmente en el gráfico.
Para empezar a entender que hacen las funciones relacionadas con el
theme, señalar que ggplot2 incorpora un conjunto de “temas”
que podemos utilizar para cambiar la apariencia del gráfico a nuestro
gusto. Puedes verlos todos aquí. El
tema que usa por defecto ggplot2 es
theme_gray(). Veamos a los themes en acción:
p + theme_gray() #- tema por defecto
p + theme_light()
p + theme_dark()
p + theme_classic()
p + theme_minimal()
p + theme_void()
El paquete de R ggthemes incorpora una amplia lista de temas adicionales, algunos de ellos tratan de replicar el estilo de corporaciones famosas como The Economist o Stata. En el tutorial no se ven bien los gráficos porque los he hecho pequeñitos, pero prueba a hacerlos tú mismo y verás que son good-looking. Veamos algunos:
library(ggthemes)
p + theme_economist()
p + theme_fivethirtyeight()
p + theme_stata()
p + theme_solarized()
También podemos definir un tema propio para que el gráfico se ajuste los más posible a nuestras preferencias.
# define custom theme
my_theme <- theme(axis.text.x =
element_text(colour = "grey20", size = 12, angle = 90, hjust = 0.5, vjust = 0.5) , axis.text.y = element_text(colour = "grey20", size = 12) ,
text = element_text(size = 16))
p + my_theme
Se puede fijar el tema/theme de los gráficos con la función
theme_set(). Por ejemplo:
theme_set(theme_minimal()) #- un tema concreto
theme_set(theme_minimal() +
theme(axis.text.x=element_blank(), axis.ticks.x=element_blank())) #- un tema modificando algunas opciones, que ele eje x no muestre ticks ni escalasSi quieres volver al theme por defecto:
theme_set(theme_gray())Ejemplos de algunos elementos cuya apariencia que se pueden cambiar
con theme()
p + theme(legend.position = "none") #- que no aparezca leyenda
p + theme(legend.position = "bottom") #- leyenda abajo
p + theme(legend.direction = "horizontal") #- leyenda horizontal!!
p + theme(legend.title = element_text(size = 22)) #- título de la leyenda a 22
p + theme(legend.key.size = unit(2.4, "cm")) #- tamaño de los cuadros de la leyenda
p + theme(text = element_text(size = 20, face = "bold")) #- cambiar el tamaño de todos los elementos de texto
p + theme(text = element_text(face = "bold")) #- pone en negrita todos los elementos de texto
p + theme(axis.text.x = element_text(colour = "pink", size = 12, angle = 90, hjust = 0.5, vjust = 0.5)) # apariencia de la escala del eje x
p + theme(axis.title.y = element_text(size=25, angle = 45)) #- tamaño y angulo del texto del eje Y
p + theme(plot.subtitle = element_text(hjust = 3)) #- posición horizontal del subtitulo (si lo tuviese)
p + theme(plot.caption = element_text(hjust = 3)) #- posición vertical del pie de gráfico (si lo tuviese)
p + theme(panel.background = element_rect(fill = "green", colour = "pink", linetype = "longdash", size = 3.5))
p + theme(panel.background = element_blank())
p + theme(panel.background = NULL)
p + theme(plot.background = element_rect(fill = "pink", colour = "purple", linetype = "dotted", size = 7))Si quieres ver todos las características que controla y que por tanto
puedes modificar con theme(), usa la ayuda de la función
theme() o ejecuta en R args(theme). Aunque
casi mejor verlas en esta
infografía de Henry Wang o en este
post de Isabella Benabaye con las opciones que suele cambiar
ella.
En general, si quieres cambiar algún elemento de un ggplot, has de
hacer theme(elemento = element_text()). Si quieres eliminar
por completo algún elemento del gráfico, por ejemplo las grid-lines del
gráfico, harías theme(panel.grid = element_blank()).
Evidentemente todo esto es imposible de aprender, sólo tienes que saber que cualquier elemento del gráfico se puede cambiar y tienes que saber buscar e interpretar la ayuda.
Colores
Se poco de colores, pero claro si quieres cambiar la apariencia de los gráficos, has de saber los colores de R, así que:
Aquí tienes una guía para elegir color. Si solo quieres ver la lista de nombres de los colores en R ejecuta:
aa <- as.data.frame(colours())Si sabes el nombre del color que quieres, aquí, podrás buscarlo y ver su color y su codificación en RGB y Hex.
También es interesante el paquete paleteer que agrupa un conjunto amplio de paletas de colores para usar en R.
XKCD theme
Por último, no sé si conocéis el webcomic XKCD. Pues en R también hay un paquete y un theme para hacer gráficos al estilo XKCD. Es el paquete xkcd cuyo autor es Emilio Torres-Manzanera de la Universidad de Oviedo. Aquí podéis ver algunos gráficos hechos con este estilo en R.
Intenté hacer un gráfico con su theme, pero desafortunadamente no me salió; pero justo al día siguiente vi este tweet7 que hace algo parecido con datos de los Simpsons y su código sí me ha funcionado, además simula/construye el estilo XKCD desde cero.
Además, después vi que Evangelyne Reinolds hizo esta maravilla. Lo haremos en clase?! En este post puedes encontrar el código para reproducir una de las historias o viñetas de XKCD.
3.3 Small multiples o Facetting
El sistema gráfico de ggplot2 incorpora una técnica
especial llamada “faceting” que permite dividir un gráfico en múltiples
gráficos. Cada uno de esos múltiples gráficos se realiza sólo para las
observaciones de una de los valores de una variable categórica (o
factor) incluido en el conjunto de datos. Es más fácil hacerlo que
explicarlo/escribirlo.
Por ejemplo, en iris tenemos la variable
Species, que es categórica. Lo que se hace con el
“facetting” es dividir el dataset en grupos y hacer el mismo gráfico
para cada uno de los grupos. Los grupos se van a definir en función de
los valores de la variable Species. Recuerda que hay tres tipos o
especies de lirios.
Para hacer un “facetting graph” podemos usar las funciones
facet_wrap() y facet_grid().
Por ejemplo, con la función facet_grid() puedes elegir
entre hacer los small multiples por filas o por columnas. Empecemos
haciendo un facetting por columnas. Además, con
facet_grid() se pueden usar varias sintaxis, pero la que
aparece en la cheatsheet actual
de ggplot2 y, por tanto, la recomendada es las que ves en la segunda
linea:
#p + facet_grid( . ~ Species) # old sintaxis
p + facet_grid(cols = vars(Species)) # gráficos x columnas, separando por valores de 'Species'
Ahora por filas:
p + facet_grid(rows = vars(Species)) # gráficos x filasERROR: The attempt to fetch "+e.responseURL+" failed with HTTP status "+e.status+" ("+e.statusText+"). Remember that you need to serve the presentation HTML from a HTTP server. Remember that you need to serve the presentation HTML from a HTTP server. # A s)
}}\nrevealjs-plugins: [lightbox, pointer]\n # - lightbox\n # - pointer # hay q apretar q\n#css: assets/styles_slides_intro.css\n #theme: [moon, custom.scss]\nembed-resources: true\n---\n\n\n# Intro {background-color=\"#b8c2aa\"}\n\n\n{{< var lineanaranja >}}\n\n\n\n
\n\n. . .\n\n- En el [I Congreso & XII Jornadas de Usuarios de R](http://r-es.org/12jr/) celebradas en Córdoba en noviembre de 2022 impartí el taller [Mi primer blog con Quarto](https://perezp44.github.io/taller.primer.blog/)\n\n. . .\n\n- Buena parte de estas slides provienen del taller, así que algunas se parecen un poco :wink:\n\n## Estructura del ... :wink: \"taller\" {.smaller}\n\n. . . \n\n
\n\n0. **Primeras ideas**, visionado de blogs\n\n. . .\n\n1. Creación de un blog básico: mi blog en 3 minutos\n\n2. **Tuneado básico** del blog.\n\n3. Convirtiendo el blog en una **web personal**\n\n
\n\n. . .\n\n4. Workflow: **creando posts**\n\n5. **Escribiendo** un post **con Quarto**\n\n. . .\n\n
\n\n6. Tuneado: **mejorando la web**\n\n. . .\n\n7. Gestión y **publicación** de la web/blog\n\n
\n\n## Objetivo(s) del taller\n\n
\n\n::: incremental\n- Aprender a **hacer websites/blogs con Quarto**\n\n
\n\n- **Aprender sobre Quarto** mientras vamos creando una web/blog\n\n
\n\n- Que salgáis todos con el bosquejo y la **intención de hacer** una web/blog!!\n\n
\n\n- ... y, si puede ser, **pasar un buen rato** :slightly_smiling_face: mientras aprendemos\n:::\n\n## Beneficios de tener un blog {.smaller}\n\n
\n\n- **Se aprende mucho!!**\n\n. . .\n\n- Es **fácil** (pocas barreras de entrada si ya usas Rmarkdown)\n\n- Es **divertido**\n\n. . .\n\n- Registrar análisis que haces que de otra forma olvidarías\n\n- Portafolio y contactos\n\n. . .\n\n- Productive procrastination (!!)\n\n. . .\n\n(Discursos más elaborados [aquí](https://www.rebeccabarter.com/blog/2020-02-03_blogger/) o [aquí](https://jozef.io/r914-one-year-r-blogging/) )\n\n. . .\n\n
\n\n### **Importante:**\n\n::: {.fragment}\n- El blog **no tiene que ser perfecto**. Mejor empezar con un blog sencillo\n:::\n\n::: {.fragment}\n- Los posts **tampoco tienen porqué estar perfectos** ... y [Jenny Bryan está de acuerdo conmigo](https://fosstodon.org/@jennybryan/110493030924022877)\n:::\n\n\n# Primeras ideas {background-color=\"#b8c2aa\"}\n\n\n{{< var lineanaranja >}}\n\n\n\n
\n\n- Vamos a usar Quarto para **hacer un blog**\n\n- En realidad un blog no es más que un tipo (especial) de web\n\n
\n\n## Estructura de una web {.unnumbered background-color=\"#b8c2aa\" title-align=\"center\"}\n\n::: {columns}\n::: {.column width=\"69%\"}\n\n:::\n\n::: {.column width=\"30%\"}\n**HEADER/Navbar**\n\n
\n\n**TITLE-block banner**\n\n
\n\n[**ARTICLE**]{.purple}\n\n
\n\n**Footer**\n:::\n:::\n\n## Ejemplos de blogs (hechos con Quarto) {.smaller}\n\n- [Mike Mahoney](https://www.mm218.dev/blog.html) (el repo [aqui](https://github.com/mikemahoney218/mm218.dev))\n\n- [Isabella Velásquez](https://ivelasq.rbind.io/about.html) (el repo [aqui](https://github.com/ivelasq/pipedream))\n\n- [Danielle Navarro](https://blog.djnavarro.net/) (el repo [aqui](https://github.com/djnavarro/quarto-blog))\n\n- [Jeff y Marc Dotson](https://occasionaldivergences.com/) (el repo [aqui](https://github.com/marcdotson/occasional-divergences))\n\n- [Layton R blog](https://graphdr.github.io/data-stories/) (el repo [aqui](https://github.com/graphdr/data-stories))\n\n- [R Lille](https://rlille.fr/) (el repo [aqui](https://github.com/RLille/rlille.fr))\n\n- [Drew Dimmery](https://ddimmery.com/)\n\n- [PA blog](https://www.paltmeyer.com/blog/) (el repo [aqui](https://github.com/pat-alt/pat-alt.github.io))\n\n- [Mario Angst](https://marioangst.com/en/)\n\n- [Matt Worthington](https://www.mrworthington.com/) (el repo [aqui](https://github.com/mrworthington/mrworthington.github.io))\n\n- [Ilya Kashnitsky](https://ikashnitsky.github.io/) (el repo [aquí](https://github.com/ikashnitsky/ikashnitsky.github.io))\n\n- [Rebecca Carter](https://www.rebeccabarter.com/) (el repo [aquí](https://github.com/rlbarter/personal-website-quarto))\n\n
\n\n#### Más opciones:\n\n- La [Gallery de Quarto](https://quarto.org/docs/gallery/#websites)\n\n## Ejemplos de webs (hechas con Quarto) {.smaller}\n\n- [Making shareable documents with Quarto](https://openscapes.github.io/quarto-website-tutorial/) y el [repo](https://github.com/openscapes/quarto-website-tutorial)\n\n- [Data in life](https://jhylin.github.io/Data_in_life_blog/) y el [repo](https://github.com/jhylin/Data_in_life_blog)\n\n- [Andrew Heiss](https://www.andrewheiss.com/) y el [repo](https://github.com/andrewheiss/ath-quarto)\n\n- [Program Evaluation for Public Service](https://evalsp23.classes.andrewheiss.com/) y el [repo](https://github.com/andrewheiss/evalsp23.classes.andrewheiss.com)\n\n- [Comparative Public Administration](https://compasp23.classes.andrewheiss.com/) y el [repo](https://github.com/andrewheiss/compasp23.classes.andrewheiss.com)\n\n- [Quantum Jitter](https://www.quantumjitter.com/) y el [repo](https://github.com/cgoo4/quantumjitter)\n\n- [Ella Kaye](https://ellakaye.co.uk/) y el [repo](https://github.com/EllaKaye/ellakaye.co.uk)\n\n- [Introduction to Regression and Data Science](https://sta-112-f22.github.io/website/) y el [repo](https://github.com/sta-112-f22/website)\n\n- [STA 199: Intro to Data Science](http://www2.stat.duke.edu/courses/Spring18/Sta199/) y el [repo]()\n\n- [ESPM 157: Data Science for Global Change Ecology](https://espm-157.carlboettiger.info/) y el [repo]()\n\n- [MAT555E-Statistical Data Analysis for Comp. Sciences](https://mat555e-fall22.github.io/) y el [repo](https://github.com/MAT555E-Fall22/MAT555E-Fall22.github.io)\n\n- [Antony Barja](https://ambarja.github.io/) y el [repo](https://github.com/ambarja/ambarja.github.io). Además tiene cursos sobre GIS\n\n- [The tidy trekker](https://thetidytrekker.com/about.html) y el [repo](https://github.com/Meghansaha/thetidytrekker-quarto)\n\n- [Real World Data Science](https://realworlddatascience.net/) y el [repo](https://github.com/realworlddatascience/realworlddatascience.github.io)\n\n- [Tidy Tales](https://tidytales.ca/) y el [repo](https://github.com/mccarthy-m-g/tidytales)\n\n
\n\n- Unas [plantillas](https://andreaczhang.github.io/qtwAcademic/index.html) para webs [personales](https://andreaczhang.github.io/qtwAcademic/articles/template_personal.html) y [académicas](https://andreaczhang.github.io/qtwAcademic/articles/template_course.html) (cursos y workshops)\n\n- Otras [plantillas](https://github.com/jonjoncardoso/quarto-template-for-university-courses) para webs académicas\n\n- Más [plantillas](https://github.com/juba/bookup-html), pero también para books, etc ...**Muy chulas**\n\n- Otras [plantillas](https://github.com/juba/bookup-html) para webs, pero también para books, etc ... (muy chulas)\n\n# 1. Creación de un blog básico con Quarto {background-color=\"#EEBF8B\"}\n\n(1ª parte del tutorial)\n\n::: {.callout-tip collapse=\"false\" appearance=\"default\" icon=\"false\"}\n## ¿Qué haremos en este tutorial?\n\n- Veremos de forma rápida el **proceso de creación** y la **estructura de ficheros** de un blog creado con Quarto. La documentación oficial está [aquí](https://quarto.org/docs/websites/website-blog.html).\n\n- Alojaremos el blog en [Quarto Pub](https://quartopub.com). \n\n- Será un **blog básico pero completamente operativo**. Ya tendremos tiempo de mejorarlo, o tunearlo, en las siguientes secciones del taller.\n:::\n\n\n\n------------------------------------------------------------------------\n\n::: {.callout-important icon=\"false\"}\n#### Tarea 1.1: Hemos de crear la carpeta que contendrá nuestro blog. \n\n**La carpeta la creará Quarto, pero tenemos 3 formas de hacerlo**:\n\n
\n\n###### A) Crear la carpeta (o Qproject) desde **RStudio**\n\n- En RStudio sigue la siguiente ruta de menús: \n\n `File > New Project > New Directory > Quarto Blog`\n \n- Mejor si llamas a la carpeta: `blog_prueba_00`\n\n\n\n
\n\n###### B) Crear la carpeta desde la **Terminal**\n\n\n- Has de ejecutar desde la Terminal:\n\n\n ::: {.cell}\n \n ```{.bash .cell-code code-line-numbers=\"false\"}\n quarto create-project blog_prueba_00 --type website --template blog \n ```\n :::\n\n
\n\n###### C) Usando un Qproject ya creado con **RStudio Cloud**\n\n- Tienes que ir [aquí](https://rstudio.cloud/content/4743159). Se abrirá Rstudio en el navegador con un Qproject llamado `blog_prueba_00`.\n\n- Has de tener cuenta en [RStudio Cloud](https://rstudio.cloud/). Haz una copia permanente y trabaja sobre ella\n\n
\n\nDe cualquiera de las 3 maneras **acabaremos teniendo una carpeta con todo o necesario para crear un blog**.\n:::\n\n\n\n\n------------------------------------------------------------------------\n\n## Contenido del Qproject\n\n::: { layout-ncol=1}\n{fig-align=\"center\" width=\"75%\"}\n\n:::\n\n\n\nLos **archivos importantes** ahora son 3:\n\n- `_quarto.yml`: especifica la estructura (y apariencia) de la web\n\n- `index.qmd` : generará (y dará formato) a la \"landing page\" o Home. Esta página será un listado de páginas (un blog)\n\n- `about.qmd` : una de la páginas del blog\n\n
\n\n------------------------------------------------------------------------\n\n::: {.callout-important icon=\"false\"}\n#### Tarea 1.2: Generación del blog\n\n- Ir al cuadrante superior-derecha de RStudio, pinchar en la pestaña `Build` y pinchar en `Render Website`.\n\n- De esta forma, se procesarán los archivos del Qproject y se creará el blog.\n\n- Podremos verlo en el cuadrante inferior-derecha de RStudio, concretamente en la pestaña `Viewer`.\n:::\n\n\n::: {.callout-warning collapse=\"true\" appearance=\"default\" icon=\"false\"}\n#### Extensiones: formas alternativas de generar el blog\n\n- También podríamos haber generado el blog usando la Consola o la **Terminal** desde RStudio. \n\n- En ambos casos hay que estar en el Qproject \"blog_prueba_00\"; es decir, \"blog_prueba_00\" es el working directory\n\n- Desde la **Terminal**\n\n ::: {.cell}\n \n ```{.bash .cell-code code-line-numbers=\"false\"}\n quarto render \n ```\n :::\n \n- desde la **Consola** de R\n\n\n ::: {.cell}\n \n ```{.r .cell-code code-fold=\"false\" code-line-numbers=\"false\"}\n install.packages(\"quarto\") \n quarto::quarto_render(\"index.qmd\") \n ```\n :::\n\n:::\n\n\n\n\n
\n\n------------------------------------------------------------------------\n\n## Contenido del Qproject (tras procesar el blog)\n\n::: {layout-ncol=\"1\"}\n{fig-align=\"center\"}\n:::\n\n\n\n- Se han creado 2 subcarpetas: `_site` y `_freeze`\n\n- `_site` es la carpeta que contiene el blog.\n\n
\n\n------------------------------------------------------------------------\n\n## Ver el blog en local\n\n- `_site` es la carpeta que contiene el blog. Veamos su contenido\n\n- La página principal (o Home) de nuestro blog es el archivo `index.html`.\n\n- El archivo `index.html` ha sido generado por el fichero `index.qmd`.\n\n::: {.callout-important icon=\"false\"}\n#### Tarea 1.3: Ver el blog\n\n- Enseguida publicaremos el blog en Quartopub, pero antes vamos a verlo en local.\n\n- Para ello solo tienes que pinchar en el archivo `./blog_prueba_00/_site/index.html`\n\n- Ese fichero es el que contiene la \"Landing Page\" o \"Home\" de nuestro blog.\n\n- Como ves el blog es muy sencillo, solo tiene 2 páginas: \n\n - la Home Page (que consiste en un listado de posts) \n \n - la página `About`\n\n:::\n\n\n\n
\n\n------------------------------------------------------------------------\n\n## Contenido de `index.qmd` {.smaller}\n\n- El archivo `index.qmd` genera `index.html`, la página principal (o Home) de nuestro blog\n\n::: {.callout-warning collapse=\"true\" appearance=\"default\" icon=\"false\" width=\"100%\"}\n#### Extensiones: ver el contenido del archivo `index.qmd`\n\nContenido del archivo `index.qmd` que genera a `index.html`:\n\n\n::: { layout-ncol=\"1\"}\n{fig-align=\"center\"}\n:::\n\n- Como vemos, el archivo `index.qmd` no tiene contenido, sólo contiene un `yaml` o encabezamiento\n\n- Ese encabezamiento genera una lista (`listing:`) con los contenidos (con los ficheros .qmd) que haya en la carpeta `posts`.\n\n- Sí, has imaginado bien, en la carpeta `posts` es donde estarán los ficheros .qmd que generarán los posts\n\n- El resto del yaml son opciones para nuestro blog. Por ejemplo, `sort: \"date desc\"` ordenará el listado de post de más reciente a más antiguo.\n\n- Lo iremos viendo\n:::\n\n\n\n
\n\n------------------------------------------------------------------------\n\n## Alojando el blog\n\n::: {.callout-important icon=\"false\"}\n#### Tarea 1.4: Alojar el blog en Quarto Pub\n\nPara publicar nuestro blog en Quartopub sólo hay que:\n\n- teclear en la **Terminal** de RStudio (panel inferior-izquierda) lo siguiente: \n\n ::: {.cell}\n \n ```{.bash .cell-code code-fold=\"false\" code-line-numbers=\"false\"}\n quarto publish quarto-pub\n ```\n :::\n\n- Tras ejecutar lo anterior, se te pedirá que autorices en la Terminal.\n\n- Después se abrirá el navegador, tendrás que logearte en `Quarto Pub` y volverás a autorizar. Además te preguntarán el nombre del blog.\n\n:::\n\n\n\n- Puedes ver [aquí](https://pjperez.quarto.pub/blog_prueba_00/), como quedaría el blog una vez alojado en Internet.\n\n
\n\n::: {.callout-warning collapse=\"true\" appearance=\"default\" icon=\"false\"}\n#### Extensiones: el fichero `_publish.yml`\n\nSi te fijas, tras haberse publicado el blog en \"Quarto Pub\", se habrá creado un **nuevo fichero** en nuestro Qproject: es el fichero `_publish.yml`. En él solamente están los metadatos necesarios para publicar y **actualizar nuestro blog**.\n\n::: {layout-ncol=1}\n{fig-align=\"center\"}\n\n:::\n\n:::\n\n\n\n
\n\n------------------------------------------------------------------------\n\n::: {.callout-note collapse=\"true\" appearance=\"default\" icon=\"false\"}\n#### Resumen (tutorial nº 1)\n\nEn este tutorial, la **segunda parte del taller**, hemos visto:\n\n- Como crear un Qproject con la estructura de carpetas y archivos necesaria para generar un blog básico\n\n- Hemos visto (de forma rápida) el contenido, los archivos, que hay en el Qproject. \n\n- El Qproject contiene 3 archivos que serán los importantes, los que trabajaremos en el próximo tutorial, concretamente: `_quarto_yml`, `index.qmd` y `about.qmd`\n\n- Hemos aprendido a generar el blog a través de RStudio, simplemente `Build > Render Website`\n\n- Hemos visto que el blog realmente se aloja en la carpeta `_site` y que la homepage es `index.html`\n\n- La homepage del blog es un listado de post (lógicamente, es un blog!!)\n\n- La homepage (`index.html`) es generada por el archivo `index.qmd`\n\n- El archivo `index.qmd` solo tiene `yaml`\n\n- Hemos publicado el blog en Quarto Pub\n\n:::\n\n\n\n\n
\n\n# 2. Tuneado básico del blog {background-color=\"#EEBF8B\"}\n\n(2ª parte del tutorial)\n\n::: {.callout-tip collapse=\"false\" appearance=\"default\" icon=\"false\"}\n## ¿Qué haremos en este tutorial?\n\n- En esta segunda parte del taller vamos a **mejorar/tunear un poco nuestro blog**. Nos servirá para afianzar nuestro conocimiento de la estructura de ficheros del blog\n\n- En este tutorial nº 2, para hacer un **tuneado básico** del blog, modificaremos 3 archivos, concretamente los archivos: `_quarto.yml`, `index.qmd` y `about.qmd`. Iremos archivo por archivo\n\n- Finalmente modificaremos (un poco) el archivo `styles.css`\n\n- En el tutorial nº 6 se profundiza en el tuneado del blog\n:::\n\n\n\n
\n\n------------------------------------------------------------------------\n\n## Archivo `_quarto.yml` {.smaller}\n\n::: {layout-ncol=2}\n{fig-align=\"center\"}\n\n{fig-align=\"center\"}\n:::\n\n\n\n\n------------------------------------------------------------------------\n\n## \n\n::: {.callout-important icon=\"false\"}\n#### Tarea 2.1: Modificar el contenido de `_quarto.yml`\n\n- Sustituye el contenido original del fichero `_quarto.yml` por el contenido del siguiente chunk.\n\n- Pon un título que te guste a tu blog (línea 5 `title: \"titulo-de-mi-blog\"`)\n\n- Pon tu usuario de Github y cuenta de Twitter (lineas 12 y 14: `href:`)\n\n- Pon tu email (línea 16: `href:`)\n\n\n\n````yaml\nproject:\n type: website\n\nwebsite:\n title: \"Mi blog (aún en pruebas)\"\n navbar:\n logo: \"profile.jpg\"\n right:\n - text: \"About me\"\n href: about.qmd\n - icon: github\n href: https://github.com/
\n\n------------------------------------------------------------------------\n\n::: {.callout-important icon=\"false\"}\n#### Tarea 2.5: Modificar el contenido de `index.qmd`\n\n- He cambiado la segunda linea (**title:**) para poner un nombre a la página con el listado de posts.\n\n- También podemos añadir una descripción (con **description:**).\n\n\n::: {.cell}\n\n```{.yaml .cell-code}\n---\ntitle: \"Mi listado de post\"\ndescription: |\n Estoy tratando de hacer mi blog\nlisting:\n contents: posts\n sort: \"date desc\"\n type: default\n categories: true\n sort-ui: false\n filter-ui: false\npage-layout: full\ntitle-block-banner: true\n---\n```\n:::\n\n:::\n\n\n\n\n\n
\n\n------------------------------------------------------------------------\n\n## Archivo `about.qmd` {.smaller}\n\n::: {layout-ncol=2}\n{fig-align=\"center\"}\n\n{fig-align=\"center\"}\n:::\n\n\n\n- Si en el `yaml` se activa la opción `about:` (linea 4), entonces puedes usar unas **plantillas** que Quarto tiene disponibles para **crear About's pages**.\n\n- Como puedes ver [aquí](https://quarto.org/docs/websites/website-about.html#templates) hay **5 plantillas**: jolla, trestles, solana, marquee y broadside.\n\n- [Aquí](https://quarto.org/docs/websites/website-about.html) tienes la documentación oficial sobre estas plantillas.\n\n
\n\n------------------------------------------------------------------------\n\n::: {.callout-important icon=\"false\"}\n#### Tarea 2.6: Modificar el contenido de `about.qmd`\n\n- Antes he dicho que solo modificaríamos la linea 5, pero mejor si lo complementamos con algunas acciones más, como el tamaño de la foto y su forma, por eso he añadido 2 lineas tras `template:trestles`.\n\n- Lógicamente estaría bien que sustituyeses la foto: se trata de cambiar `profile.jpg`, en la linea 3, por la ruta a tu foto.\n\n- Abajo tienes el código:\n\n::: {.cell}\n\n```{.r .cell-code}\n---\ntitle: Yo mismo\nimage: profile.jpg\nabout:\n template: trestles #- {jolla, solana, ...}\n image-width: 10em #- https://cybmeta.com/em-y-rem\n image-shape: round #- rectangle, round, rounded\n links:\n - icon: twitter\n text: Twitter\n href: https://twitter.com\n - icon: linkedin\n text: LinkedIn\n href: https://linkedin.com\n - icon: github\n text: Github\n href: https://github.com\n---\n \nHola, soy \"Yo mismo\". \n \nEstoy asistiendo al taller **Mi primer blog con Quarto** impartido en el [I Congreso & XII Jornadas de Usuarios de R](http://r-es.org/12jr/){target=\"_blank\"} celebradas en Córdoba (Spain), 23-25 de noviembre de 2022.\n \nEn un ratito ya piloto Quarto y genero my blog!!! 🙂\n```\n:::\n:::\n\n\n\n
\n\n------------------------------------------------------------------------\n\n## Archivo `styles.css`\n\n- Puedes cambiar la apariencia estética del blog usando los `themes` predefinidos en Quarto o puedes usar el archivo `styles.css`[^1]\n\n[^1]: Veremos en el tutorial nº 6 que también podremos usar archivos `.scss`\n\n::: {.callout-important icon=\"false\"}\n#### Tarea 2.7: Modificar `styles.css`\n\n- Simplemente sustituye el contenido original del fichero `styles.css` por el contenido del siguiente chunk:\n\n\n````css\n/* css styles */\n\n\n/* justificar el texto */ \np, ul, ol {\n text-align: justify; } \n````\n\n:::\n\n\n\n
\n\n------------------------------------------------------------------------\n\n::: {.callout-note collapse=\"true\" appearance=\"default\" icon=\"false\"}\n#### Resumen (tutorial nº 2)\n\n- En esta tercera parte del taller hemos aprendido a **mejorar/tunear un poco nuestro blog**.\n\n- Hemos modificado 3 archivos: \n\n 1. `_quarto.yml`: hemos modificado el título del blog y la estructura de la barra de navegación; concretamente hemos añadido una página nueva.\n\n 2. `index.qmd`: construye la Home Page de nuestra web. La opción `listing:` hace que nuestra web es en realidad un blog.\n \n 3. `about.qmd`: hemos utilizado las plantillas de Quarto para configurar nuestra About page.\n\n- Finalmente hemos modificado (mínimamente) el archivo `styles.css`.\n\n\n:::\n\n\n\n
\n\n- [Aquí](https://pjperez.quarto.pub/blog_pruebas_01/) puedes ver **como quedaría el blog** tras haber modificado `_quarto.yml`, `index.qmd`, `about.qmd` y `styles.css`.\n\n------------------------------------------------------------------------\n\n## Práctica (tutorial nº 2) {background-color=\"#D3F3E7\"}\n\nEn esta sección dedicaremos un tiempo a la **práctica libre para que adaptes el blog a tus necesidades y gustos**. Por ejemplo puedes probar:\n\n
\n\n1. Añadir una **nueva página a la web** (`_quarto.yml`). Os doy una posibilidad en la siguiente slide\n\n
\n\n2. Modificar la **apariencia del blog** (realmente del listado de posts) jugando con las opciones que nos proporciona Quarto (`index.qmd`). Gracias YAML inteligence!!\n\n
\n\n3. Modificar la apariencia de la **página About** (`about.qmd`)\n\n------------------------------------------------------------------------\n\n::: {.callout-tip collapse=\"true\" appearance=\"default\" icon=\"false\"}\n\n#### Práctica 2.1: añadir una página más a nuestra web (`_quarto.yml`)\n\nEvidentemente puedes probar a añadir la página que quieras, pero te ofrezco la siguiente posibilidad:\n\n- Con las lineas 12 y siguientes crear una página más en nuestro blog. La página se llamará \"Más cosas\". Además, esta página nueva tiene la particularidad de que cuando recreemos el blog se convertirá en un desplegable con acceso a varias páginas: \"Docencia 2\", \"Docencia 3\" y \"Docencia 4\".\n\n- Fíjate que he puesto la nueva página a la izquierda (`left: `)\n\n- Además, puedes probar distintas opciones de `theme` (linea 34) y de `highlighting` (linea 38)\n\n- También puedes cambiar el color del fondo de la barra de navegación (linea 8)\n\n\n```yaml\nproject:\n type: website\n\nwebsite:\n title: \"Mi blog (aún en pruebas)\"\n navbar:\n logo: \"profile.jpg\"\n #background: \"#CCCCFF\" #- {“primary”, “secondary”, “danger”, “warning”, “light”, “dark”, or hex color} (el backgroung de la navbar)\n left: \n - text: \"Docencia\"\n href: docencia.qmd\n - text: \"Más cosas\"\n menu:\n - text: \"Docencia 2\"\n href: docencia.qmd\n - text: \"Docencia 3\"\n href: docencia.qmd\n - text: \"---\"\n - text: \"Docencia 4\"\n href: docencia.qmd\n right:\n - about.qmd\n - icon: github\n href: https://github.com/
\n\n# 3. Convertir el blog en web personal {background-color=\"#EEBF8B\"}\n\n(3ª parte del tutorial)\n\n::: {.callout-tip appearance=\"default\" icon=\"false\"}\n## ¿Qué haremos en este tutorial?\n\n- Convertir nuestro blog en una web personal.\n\n- Haremos que la \"landing page\" o Home de nuestra web no sea una página con el listado de posts, sino que sea una página en la que se reciba a los futuros visitantes de nuestra web\n\n- Para ello solo tendremos que cambiar el nombre de dos ficheros y referenciar uno de ellos en `_quarto.yml`.\n\n:::\n\n\n\n
\n\n------------------------------------------------------------------------\n\n::: {.callout-important icon=\"false\"}\n#### Tarea 3.1: Renombrar el archivo index.qmd\n\n- Cambia el nombre del fichero `index.qmd` a `blog.qmd`\n\n- Ahora este archivo no está referenciado en `_quarto.yml`, por lo que no se mostraría si hacemos un rebuild^[Además, como nuestro Qproject ahora no tiene fichero `index.qmd` el rebuild no funcionaría].\n\n:::\n\n\n\n------------------------------------------------------------------------\n\n::: {.callout-important icon=\"false\"}\n#### Tarea 3.2: Incluir `blog.qmd` en la web\n\n- Para que `blog.qmd`, la página que contiene el listado de posts, se muestre en nuestra web hay que refrenciarlo/incluirlo en `_quarto.yml`\n\n\n\n- Simplemente, tendríamos que modificar las lineas 8 y 9 que ahora están referenciando al fichero `about.qmd`. Por ejemplo podríamos **dejar las lineas 8 y 9 como se ve abajo** (a la derecha):\n\n\n\n{fig-align=\"center\"}\n\n- Para hacerlo, es mejor copiar el código de abajo y pegarlo en `_quarto.yml`\n\n::: {.cell}\n\n```{.r .cell-code .code-overflow-wrap code-line-numbers=\"true\"}\nproject:\n type: website\n\nwebsite:\n title: \"Mi blog (aún en pruebas)\"\n navbar:\n logo: \"profile.jpg\"\n #background: \"#CCCCFF\" #- {“primary”, “secondary”, “danger”, “warning”, “light”, “dark”, or hex color} (el backgroung de la navbar)\n left: \n - text: \"Docencia\"\n href: docencia.qmd\n - text: \"Más cosas\"\n menu:\n - text: \"Docencia 2\"\n href: docencia.qmd\n - text: \"Docencia 3\"\n href: docencia.qmd\n - text: \"---\"\n - text: \"Docencia 4\"\n href: docencia.qmd\n right:\n - text: \"Mi blog\"\n href: blog.qmd\n - icon: github\n href: https://github.com/
\n\n:::\n\n- Aún no podemos refrescar la web porque ahora no tenemos archivo `index.qmd`. \n\n\n\n\n\n\n------------------------------------------------------------------------\n\n::: {.callout-important icon=\"false\"}\n#### Tarea 3.3: Renombrar el archivo about.qmd\n\n- Cambia el nombre del fichero `about.qmd` a `index.qmd`, con lo que pasará ser nuestra \"landing page\". \n\n- Como el antiguo fichero `about` contenía nuestra foto parece que es un buen candidato a ser nuestra \"Home\"\n:::\n\n\n\n------------------------------------------------------------------------\n\n::: {.callout-important icon=\"false\"}\n#### Tarea 3.4: Hacemos un rebuild de la web\n\n- Ahora ya tenemos fichero `index.qmd`, por lo que ya podemos hacer un rebuild de nuestra web y veremos la nueva estructura de nuestra web, con una foto nuestra en la \"landing page\".\n\n- Para ello: `Build > Render Website` en RStudio.\n:::\n\n\n\n# 4. Workflow: ¿cómo crear un post? {background-color=\"#EEBF8B\"}\n\n(4ª parte del tutorial)\n\n::: {.callout-tip collapse=\"false\" appearance=\"default\" icon=\"false\"}\n## ¿Qué haremos en este tutorial?\n\n- Ver como podemos iniciar un nuevo post\n\n- (podemos marcar post todavía no acabados con `draft: true` en el yaml del post)\n:::\n\n\n\n
\n\n------------------------------------------------------------------------\n\n## ¿Donde están los posts del blog?\n\n- Los ficheros `.qmd` que generan los posts están **en la carpeta `posts`** (de nuestro Qproject que genera el blog).\n\n- **Cada post** está en **una carpeta diferente**[^2]:\n\n[^2]: No es necesario que los posts estén cada uno en una carpeta, pero puede ser una buena práctica.\n\n::: {layout-ncol=1}\n\n{fig-align=\"center\"}\n:::\n\n\n\n- Veamos (en la siguiente slide) el contenido de `./posts/welcome/`\n\n------------------------------------------------------------------------\n\n## Contenido de cada subcarpeta de `./posts/`\n\n
\n\n- Por ejemplo de `./posts/welcome/`\n\n::: {layout-ncol=2}\n\n{fig-align=\"center\"}\n\n{fig-align=\"center\"}\n:::\n\n\n\n
\n\n------------------------------------------------------------------------\n\n::: {.callout-important icon=\"false\"}\n#### Tarea 4.1: Creando un nuevo post\n\n- Crea una nueva subcarpeta en `./posts/`\n\n- Ponle nombre, por ejemplo: \"my-primer-post\"\n\n- Copia en la carpeta que hemos creado el contenido de la carpeta de uno de los 2 posts. Por ejemplo copia los 2 archivos que hay en `./posts/welcome/` y pégalos en `./posts/my-primer-post/`; es decir, pegamos el archivo `index.qmd` y `tumbnail.jpg` en nuestra nueva carpeta.\n\n- Vuelve a regenerar el blog: `Build > Render Website` y verás que ahora nuestro blog ya tiene tres posts.\n:::\n\n\n\n\n-----------------------------\n\n::: {.callout-important icon=\"false\"}\n#### Tarea 4.2: Modificando el tercer post\n\n- Modifica el contenido de `/.posts/my-primer-post/index.qmd`. Por ejemplo, puedes dejarlo así:\n\n\n````markdown\n---\ntitle: \"Mi primer post con Quarto\"\nauthor: \"Pedro J. Pérez\"\ndate: \"2022-10-25\"\ncategories: [R, quarto]\nimage: \"thumbnail.jpg\"\n---\n\nEste es mi **primer post** con Quarto!!!!\n\n```{{r}}\nsqrt(2 + 2)\n```\n\nVoy a poner una imagen:\n\n\n\n\nAcabé con mi primer post. FIN\n \n````\n\n- Sustituye `thumbnail.jpg` por otro archivo\n\n- La opción de yaml (linea 6): `image: \"thumbnail.jpg\"` nos permite elegir la imagen que acompañara al post en la listing page. \n\n\n\n- Vuelve a regenerar el blog: `Build > Render Website`\n:::\n\n\n\n
\n\n------------------------------------------------------------------------\n\n::: {.callout-note collapse=\"true\" appearance=\"default\" icon=\"false\"}\n#### Resumen (tutorial nº 4)\n\n- En esta **cuarta parte del taller** hemos visto como podemos generar/escribir nuevos posts para nuestro blog: solo hay replicar una de las carpetas de anteriores posts y cambiarle el nombre.\n\n\n
\n\n- Hemos visto como cambiar la imagen que acompaña a los posts en la \"listing page\".\n- Recuerda que podemos marcar un post con `draft: true` en el yaml del post.\n\n\n
\n\n- En el **siguiente tutorial** veremos en profundidad las posibilidades que nos ofrece Quarto para escribir nuestros posts.\n\n:::\n\n\n\n
\n\n# 5. Escribiendo posts: practicando con Quarto {background-color=\"#EEBF8B\"}\n\n(5ª parte del tutorial)\n\n::: {.callout-tip appearance=\"default\" icon=\"false\"}\n## ¿Qué haremos en este tutorial?\n\n- Aprender a escribir nuestro posts con Quarto: con ficheros `.qmd`\n\n- Repasaremos las 3 partes de los documentos `.qmd`: yaml, texto, chunks\n\n- Además veremos: **layout**\n\n- Aprender a utilizar algunos truquillos de Quarto\n:::\n\n::: {.callout-warning appearance=\"default\" icon=\"true\"}\n\nVoy a **suponer que los asistentes al taller**, y posibles lectores de estos tutoriales, **conocen Rmarkdown** y han escrito algún documento `.Rmd`. En ese caso, el paso de `.Rmd` a `.qmd` es sencillo. \n\nEn cualquier caso, [aquí](https://quarto.org/docs/faq/rmarkdown.html) tienes unas FAQ's para usuarios de .Rmd que se preguntan si pasarse a Quarto, y [aquí](https://laderast.github.io/qmd_rmd/#/title-slide) unas slides sobre las diferencias entre `.qmd` y `.Rmd`.\n\nAquellos que no sepan qué es Rmarkdown pueden empezar por [aquí](https://perezp44.github.io/intro-ds-22-23-web/tutoriales/tt_07_Rmarkdown.html) o [aquí](https://perezp44.github.io/intro-ds-22-23-web/slides/slides_07_rmarkdown.html#1).\n\n:::\n\n\n\n
\n\n------------------------------------------------------------------------\n\n## Ficheros `.qmd`\n\n- Los ficheros `.qmd` tienen **3 partes**: YAML, texto y chunks de código.\n\n::: {layout-ncol=1}\n\n{fig-align=\"center\"}\n:::\n\n\n\n- Veámoslas una a una\n\n# 1. YAML {.unnumbered background-color=\"#b8c2aa\"}\n\n------------------------------------------------------------------------\n\n## YAML: ideas importantes\n\n
\n\n- El encabezamiento o **YAML** sirve para fijar **opciones y metadatos** de nuestro documento.\n\n
\n\n- El `YAML` será procesado varias veces durante el procesado del documento: es leído por Quarto, knitr y Pandoc e **influirá en el output final**.\n\n
\n\n- El hecho de estar trabajando dentro de un **Qproject** nos da **mucha versatilidad** a la hora de especificar el YAML de nuestros documentos `.qmd`. Documentación oficial [aquí](https://quarto.org/docs/projects/quarto-projects.html)\n\n## El `yaml` de un post se puede especificar en **3 niveles** {background-color=\"#f7f5d2\"}\n\n. . .\n\n1. **Nivel proyecto**: todo Qproject tiene archivo `_quarto.yml`. Todo documento que se procese dentro del proyecto, heredará los metadatos definidos en `_quarto.yml`.\n\n. . .\n\n2. **Nivel carpeta**: si en una carpeta existe un documento `_metadata.yml`, los documentos de esa carpeta heredan sus metadatos. La carpeta `./posts/` de un blog suele tener un archivo `_metadata.yml`.\n\n. . .\n\n3. **Nivel documento**: en el yaml del propio documento `.qmd`\n\n
\n\n. . .\n\n- Si hay conflictos **prevalecen las opciones del nivel documento**, luego nivel carpeta y finalmente nivel proyecto.\n\n- **Documentación oficial** de Quarto con las **principales opciones** que se pueden fijar en el YAML para documentos html: [aquí](https://quarto.org/docs/output-formats/html-basics.html) y [aquí](https://quarto.org/docs/reference/formats/html.html)\n\n------------------------------------------------------------------------\n\n## YAML: tal como lo tenemos ahora {.smaller}\n\n::: {.panel-tabset}\n\n\n#### 1. nivel proyecto (_quarto.yml)\n\nAbajo el contenido del fichero `_quarto.yml` tal y como lo tenemos ahora en nuestro blog. Solo he añadido 3 comentarios para diferenciar entre secciones:\n\n\n{fig-align=\"center\"}\n\n\n#### 2. nivel carpeta (_metadata.yml)\n\nAbajo el, contenido del fichero `./posts/_metadata.yml`. Afectará a todos los ficheros `.qmd` que haya en la carpeta `./posts/`\n\n{fig-align=\"center\"}\n\n#### 3. nivel documento (index.qmd)\n\n{fig-align=\"center\"}\n\n:::\n\n\n\n------------------------------------------------------------------------\n\n## YAML: NIVEL PROYECTO (opciones en `_quarto.yml`) {.smaller}\n\nEn `_quarto.yml` se suelen poner opciones referentes a 3 aspectos:\n\n::: panel-tabset\n#### 1. Sobre el propio Qproject\n\n::: {.cell}\n\n```{.r .cell-code .code-overflow-scroll code-line-numbers=\"true\"}\n# 1/ Opciones referentes al proyecto ----------------------------\nproject:\n type: website\n output-dir: docs #- podemos cambiar la carpeta donde se redirige el output (.html)\n # execute-dir: project #- cambiar el render directory: https://quarto.org/docs/projects/code-execution.html#working-dir\n```\n:::\n\n\n\n
\n\n- linea 4: podemos elegir la carpeta de destino de nuestro blog\n- linea 5: podemos cambiar el render directory de los `.qmd`\n\n
\n\nDocumentación oficial [aquí](https://quarto.org/docs/projects/quarto-projects.html).\n\n#### 2. Estructura de la página web\n\n::: {.cell}\n\n```{.r .cell-code .code-overflow-scroll code-line-numbers=\"true\"}\n#- 2/ Opciones referentes a la estructura de la web -----------------\nwebsite:\n title: \"Mi blog (aún en pruebas)\"\n favicon: profile.jpg\n #site-url: https://....\n #repo-url: https://....\n open-graph: true #-https://quarto.org/docs/websites/website-tools.html#twitter-cards\n twitter-card:\n creator: \"@tu-usuario-twitter\"\n card-style: summary_large_image\n navbar:\n logo: \"profile.jpg\"\n #background: primary #- pink\n right:\n - text: \"About me\"\n href: about.qmd\n - icon: github\n href: https://github.com/
\n\nComo ves, se añadirían elementos como:\n\n- lineas 28 a 37: se añade un pie de página al blog\n\n- lineas 24 y 25: Hemos añadido un elemento a la `navbar` concretamente el icono `Home`. La documentación oficial para elementos de navegación está [aquí](https://quarto.org/docs/websites/website-navigation.html)\n\n- linea 4: añadimos un favicon\n\n- lineas 5 y 6: el url de la web y del repo en Github\n\n- lineas 7-10: elementos de redes sociales. La documentación oficial para estos elementos esta [aquí](https://quarto.org/docs/websites/website-tools.html)\n\n
\n\n#### 3. Formato de salida de los documentos\n\n::: {.cell}\n\n```{.r .cell-code .code-overflow-scroll code-line-numbers=\"true\"}\n#- 3/ Opciones referentes al formato de salida ---------------------\nformat:\n html:\n theme: flatly \n css: styles.css\n toc: true\n highlight-style: a11y\n```\n:::\n\n\n\n
\n\nEn un blog/web el formato de salida es siempre `.html`; sin embargo podemos especificar otras opciones como por ejemplo sí los documentos (o páginas de la web, o post del blog) tienen un índice flotante, etc... Documentación oficial [aquí](https://quarto.org/docs/output-formats/html-basics.html) y [aquí](https://quarto.org/docs/reference/formats/html.html)\n:::\n\n------------------------------------------------------------------------\n\n## Un ejemplo \"completito\" de `_quarto.yml` {.smaller}\n\nSi quieres ver un documento `_quarto.yml` completito, ve [aquí](https://github.com/quarto-dev/quarto-web/blob/main/_quarto.yml). Pertenece a la [web de Quarto](https://quarto.org/docs/websites/).\n\n\n::: {.cell}\n\n:::\n\n\n
\n\n::: columns\n::: {.column width=\"48%\"}\n\n:::\n\n::: {.column width=\"48%\"}\n```yaml\nproject:\n type: website\n output-dir: _site\n resources:\n - \"/docs/download/_download.json\"\n - \"/docs/download/_prerelease.json\"\n - \"/_redirects\"\n\nwebsite:\n title: \"Quarto\"\n image: \"quarto.png\"\n favicon: \"favicon.png\"\n google-analytics: \"G-FV9Z7SDZ0M\"\n open-graph: true\n twitter-card: true\n site-url: https://quarto.org\n repo-url: https://github.com/quarto-dev/quarto-web\n repo-actions: [edit, issue]\n page-navigation: true\n search:\n algolia:\n index-name: prod_QUARTO\n application-id: ZPJB5I1QN7\n search-only-api-key: 41be6c1e0a7fea4a51b107810facf577\n analytics-events: true\n show-logo: true\n page-footer:\n left: |\n Proudly supported by\n [{fig-alt=\"RStudio\" width=65px}](https://www.rstudio.com)\n center:\n - text: \"About\"\n href: about.qmd\n - text: \"FAQ\"\n href: docs/faq/index.qmd\n - text: \"License\"\n href: license.qmd\n - text: \"Trademark\"\n href: trademark.qmd\n right:\n - icon: twitter\n href: https://twitter.com/quarto_pub\n aria-label: Quarto Twitter\n - icon: github\n href: https://github.com/quarto-dev/quarto-cli\n aria-label: Quarto GitHub\n navbar:\n background: light\n logo: quarto.png\n logo-alt: \"Quarto logo.\"\n title: false\n collapse-below: lg\n left:\n - text: \"Overview\"\n href: index.qmd\n - text: \"Get Started\"\n href: docs/get-started/index.qmd\n - text: \"Guide\"\n href: docs/guide/index.qmd\n - text: Extensions\n href: docs/extensions/index.qmd\n - text: \"Reference\"\n href: docs/reference/index.qmd\n - text: \"Gallery\"\n href: docs/gallery/index.qmd\n - text: \"Blog\"\n href: docs/blog/index.qmd\n - text: \"Help\"\n menu:\n - text: \"Report a Bug\"\n icon: \"bug\"\n href: \"https://github.com/quarto-dev/quarto-cli/issues\"\n - text: \"Ask a Question\"\n icon: \"chat-right-text\"\n href: \"https://github.com/quarto-dev/quarto-cli/discussions\"\n - text: \"FAQ\"\n icon: \"question-circle\"\n href: docs/faq/index.qmd\n right:\n - icon: twitter\n href: https://twitter.com/quarto_pub\n aria-label: Quarto Twitter\n - icon: github\n href: https://github.com/quarto-dev/quarto-cli\n aria-label: Quarto GitHub\n\n sidebar:\n - id: get-started\n title: \"Get Started\"\n style: \"floating\"\n collapse-level: 2\n align: left\n contents:\n - docs/get-started/index.qmd\n - text: \"Tutorial: Hello, Quarto\"\n href: docs/get-started/hello/\n - text: \"Tutorial: Computations\"\n href: docs/get-started/computations/\n - text: \"Tutorial: Authoring\"\n href: docs/get-started/authoring/\n\n - id: guide\n collapse-level: 1\n contents:\n - text: \"Guide\"\n href: docs/guide/index.qmd\n - section: \"Authoring\"\n contents:\n - docs/authoring/markdown-basics.qmd\n - docs/authoring/figures.qmd\n - docs/authoring/tables.qmd\n - docs/authoring/diagrams.qmd\n - docs/authoring/videos.qmd\n - docs/authoring/callouts.qmd\n - docs/authoring/article-layout.qmd\n - section: \"Scholarly Writing\"\n contents:\n - docs/authoring/title-blocks.qmd\n - docs/authoring/footnotes-and-citations.qmd\n - docs/authoring/cross-references.qmd\n - docs/authoring/create-citeable-articles.qmd\n - docs/authoring/appendices.qmd\n - section: \"Computations\"\n contents:\n - docs/computations/python.qmd\n - docs/computations/r.qmd\n - docs/computations/julia.qmd\n - docs/computations/ojs.qmd\n - docs/computations/execution-options.qmd\n - docs/computations/parameters.qmd\n - section: \"Tools\"\n contents:\n - docs/tools/jupyter-lab.qmd\n - docs/tools/rstudio.qmd\n - docs/tools/vscode.qmd\n - docs/tools/text-editors.qmd\n - section: \"Visual Editor\"\n contents:\n - text: Editor Basics\n href: docs/visual-editor/index.qmd\n - docs/visual-editor/technical.qmd\n - docs/visual-editor/content.qmd\n - docs/visual-editor/options.qmd\n - docs/visual-editor/markdown.qmd\n - section: \"Documents\"\n contents:\n - section: \"HTML\"\n contents:\n - docs/output-formats/html-basics.qmd\n - docs/output-formats/html-code.qmd\n - docs/output-formats/html-themes.qmd\n - docs/output-formats/html-publishing.qmd\n - section: \"PDF\"\n contents:\n - docs/output-formats/pdf-basics.qmd\n - docs/output-formats/pdf-engine.qmd\n - section: \"MS Word\"\n contents:\n - docs/output-formats/ms-word.qmd\n - docs/output-formats/ms-word-templates.qmd\n - section: \"Markdown\"\n contents:\n - docs/output-formats/gfm.qmd\n - docs/output-formats/hugo.qmd\n - docs/output-formats/docusaurus.qmd\n - docs/output-formats/all-formats.qmd\n - section: \"Presentations\"\n contents:\n - text: \"Overview\"\n href: docs/presentations/index.qmd\n - section: docs/presentations/revealjs/index.qmd\n contents:\n - text: \"Reveal Basics\"\n href: docs/presentations/revealjs/index.qmd\n - docs/presentations/revealjs/presenting.qmd\n - docs/presentations/revealjs/advanced.qmd\n - docs/presentations/revealjs/themes.qmd\n - docs/presentations/powerpoint.qmd\n - docs/presentations/beamer.qmd\n - section: \"Websites\"\n href: docs/websites/website-basics.qmd\n contents:\n - docs/websites/website-basics.qmd\n - docs/websites/website-navigation.qmd\n - docs/websites/website-blog.qmd\n - docs/websites/website-search.qmd\n - docs/websites/website-tools.qmd\n - docs/websites/website-about.qmd\n - section: \"Listing Pages\"\n href: docs/websites/website-listings.qmd\n contents:\n - docs/websites/website-listings.qmd\n - docs/websites/website-listings-custom.qmd\n - section: \"Books\"\n href: docs/books/book-basics.qmd\n contents:\n - docs/books/book-basics.qmd\n - docs/books/book-structure.qmd\n - docs/books/book-crossrefs.qmd\n - text: \"Customizing Output\"\n href: docs/books/book-output.qmd\n - section: \"Interactivity\"\n contents:\n - text: \"Overview\"\n href: docs/interactive/index.qmd\n - section: docs/interactive/ojs/index.qmd\n contents:\n - text: \"Introduction\"\n href: docs/interactive/ojs/index.qmd\n - docs/interactive/ojs/libraries.qmd\n - docs/interactive/ojs/data-sources.qmd\n - docs/interactive/ojs/ojs-cells.qmd\n - docs/interactive/ojs/shiny.qmd\n - docs/interactive/ojs/code-reuse.qmd\n - section: \"Examples\"\n contents:\n - docs/interactive/ojs/examples/penguins.qmd\n - docs/interactive/ojs/examples/sunburst.qmd\n - docs/interactive/ojs/examples/arquero.qmd\n - docs/interactive/ojs/examples/population.qmd\n - docs/interactive/ojs/examples/noaa-co2.qmd\n - docs/interactive/ojs/examples/github.qmd\n - docs/interactive/ojs/examples/layout.qmd\n - section: \"Shiny\"\n contents:\n - text: \"K-Means\"\n href: https://jjallaire.shinyapps.io/kmeans-shiny-ojs/\n - text: \"Binning\"\n href: https://jjallaire.shinyapps.io/binning-shiny-ojs/\n - text: \"Data Binding\"\n href: https://jjallaire.shinyapps.io/data-shiny-ojs/\n - text: \"Covid Map\"\n href: https://jjallaire.shinyapps.io/covid19-bicartogram/\n - section: docs/interactive/shiny/index.qmd\n contents:\n - text: \"Introduction\"\n href: docs/interactive/shiny/index.qmd\n - docs/interactive/shiny/running.qmd\n - docs/interactive/shiny/execution.qmd\n - docs/interactive/shiny/resources.qmd\n - section: \"Examples\"\n contents:\n - text: \"Old Faithful\"\n href: https://jjallaire.shinyapps.io/shiny-old-faithful/\n - text: \"K-Means\"\n href: https://jjallaire.shinyapps.io/shiny-k-means/\n - text: \"Diamonds\"\n href: https://jjallaire.shinyapps.io/shiny-diamonds/\n - section: \"Widgets\"\n contents:\n - docs/interactive/widgets/jupyter.qmd\n - docs/interactive/widgets/htmlwidgets.qmd\n - docs/interactive/layout.qmd\n - section: \"Publishing\"\n contents:\n - docs/publishing/index.qmd\n - docs/publishing/quarto-pub.qmd\n - docs/publishing/github-pages.qmd\n - docs/publishing/rstudio-connect.qmd\n - docs/publishing/netlify.qmd\n - docs/publishing/other.qmd\n - text: \"Publishing with CI\"\n href: docs/publishing/ci.qmd\n - section: \"Projects\"\n contents:\n - docs/projects/quarto-projects.qmd\n - docs/projects/code-execution.qmd\n - docs/projects/profiles.qmd\n - docs/projects/environment.qmd\n - docs/projects/scripts.qmd\n - docs/projects/virtual-environments.qmd\n - section: \"Advanced\"\n contents:\n - docs/authoring/includes.qmd\n - docs/authoring/variables.qmd\n - docs/output-formats/page-layout.qmd\n - docs/authoring/language.qmd\n - docs/authoring/conditional.qmd\n - docs/extensions/nbfilter.qmd\n - id: extensions\n title: \"Extensions\"\n contents:\n - \"---\"\n - section: docs/extensions/index.qmd\n contents: \n - text: \"Shortcodes & Filters\"\n href: docs/extensions/listing-filters.qmd\n - text: \"Journal Articles\"\n href: docs/extensions/listing-journals.qmd\n - text: \"Custom Formats\"\n href: docs/extensions/listing-formats.qmd\n - text: \"Revealjs Extensions\"\n href: docs/extensions/listing-revealjs.qmd\n - docs/extensions/managing.qmd\n - \"---\"\n - section: docs/extensions/creating.qmd\n contents:\n - text: \"Overview\"\n href: docs/extensions/creating.qmd\n - docs/extensions/lua.qmd\n - docs/extensions/lua-api.qmd\n - text: \"Distribution\"\n href: docs/extensions/distributing.qmd\n - \"---\"\n - text: \"Shortcodes\"\n href: docs/extensions/shortcodes.qmd\n - text: \"Filters\"\n href: docs/extensions/filters.qmd\n - section: \"Journal Articles\"\n href: docs/journals/formats.qmd\n contents:\n - docs/journals/formats.qmd\n - docs/journals/templates.qmd\n - docs/journals/authors.qmd\n - docs/extensions/formats.qmd\n - docs/extensions/revealjs.qmd\n - docs/extensions/project-types.qmd\n - docs/extensions/starter-templates.qmd\n\n - id: reference\n title: \"Reference\"\n contents:\n - text: \"Reference\"\n href: docs/reference/index.qmd\n - section: \"Formats\"\n contents:\n - text: \"HTML\"\n href: docs/reference/formats/html.qmd\n - text: \"PDF\"\n href: docs/reference/formats/pdf.qmd\n - text: \"MS Word\"\n href: docs/reference/formats/docx.qmd\n - text: \"OpenOffice\"\n href: docs/reference/formats/odt.qmd\n - text: \"ePub\"\n href: docs/reference/formats/epub.qmd\n - section: \"Presentations\"\n contents:\n - text: \"Revealjs\"\n href: docs/reference/formats/presentations/revealjs.qmd\n - text: \"PowerPoint\"\n href: docs/reference/formats/presentations/pptx.qmd\n - text: \"Beamer\"\n href: docs/reference/formats/presentations/beamer.qmd\n - section: \"Markdown\"\n contents:\n - text: \"GitHub\"\n href: docs/reference/formats/markdown/gfm.qmd\n - text: \"CommonMark\"\n href: docs/reference/formats/markdown/commonmark.qmd\n - text: \"Markua\"\n href: docs/reference/formats/markdown/markua.qmd\n - section: \"Wikis\"\n contents:\n - text: \"MediaWiki\"\n href: docs/reference/formats/wiki/mediawiki.qmd\n - text: \"DokuWiki\"\n href: docs/reference/formats/wiki/dokuwiki.qmd\n - text: \"ZimWiki\"\n href: docs/reference/formats/wiki/zimwiki.qmd\n - text: \"Jira Wiki\"\n href: docs/reference/formats/wiki/jira.qmd\n - text: \"XWiki\"\n href: docs/reference/formats/wiki/xwiki.qmd\n - section: \"More Formats\"\n contents:\n - text: \"JATS\"\n href: docs/reference/formats/jats.qmd\n - text: \"Jupyter\"\n href: docs/reference/formats/ipynb.qmd\n - text: \"ConTeXt\"\n href: docs/reference/formats/context.qmd\n - text: \"RTF\"\n href: docs/reference/formats/rtf.qmd\n - text: \"reST\"\n href: docs/reference/formats/rst.qmd\n - text: \"AsciiDoc\"\n href: docs/reference/formats/asciidoc.qmd\n - text: \"Org-Mode\"\n href: docs/reference/formats/org.qmd\n - text: \"Muse\"\n href: docs/reference/formats/muse.qmd\n - text: \"GNU TexInfo\"\n href: docs/reference/formats/texinfo.qmd\n - text: \"Groff Man Page\"\n href: docs/reference/formats/man.qmd\n - text: \"Groff Manuscript\"\n href: docs/reference/formats/ms.qmd\n - text: \"Haddock markup\"\n href: docs/reference/formats/haddock.qmd\n - text: \"OPML\"\n href: docs/reference/formats/opml.qmd\n - text: \"Textile\"\n href: docs/reference/formats/textile.qmd\n - text: \"DocBook\"\n href: docs/reference/formats/docbook.qmd\n - text: \"InDesign\"\n href: docs/reference/formats/icml.qmd\n - text: \"TEI Simple\"\n href: docs/reference/formats/tei.qmd\n - text: \"FictionBook\"\n href: docs/reference/formats/fb2.qmd\n - section: \"Code Cells\"\n contents:\n - text: \"Jupyter\"\n href: docs/reference/cells/cells-jupyter.qmd\n - text: \"Knitr\"\n href: docs/reference/cells/cells-knitr.qmd\n - text: \"Observable\"\n href: docs/reference/cells/cells-ojs.qmd\n - section: \"Projects\"\n contents:\n - text: \"Options\"\n href: docs/reference/projects/options.qmd\n - text: \"Websites\"\n href: docs/reference/projects/websites.qmd\n - text: \"Books\"\n href: docs/reference/projects/books.qmd\n - section: \"More\"\n contents:\n - text: \"Dates\"\n href: docs/reference/dates.qmd\n - text: \"Globs\"\n href: docs/reference/globs.qmd\n - text: \"Citations\"\n href: docs/reference/metadata/citation.qmd\n\nbibliography: references.bib\n\nformat:\n html:\n toc: true\n theme:\n light: [cosmo, theme.scss]\n code-copy: true\n code-overflow: wrap\n css: styles.css\n include-after-body: js.html\n\nfilters:\n - filters/tools-tabset.lua\n\n\nfreeze: true\n\neditor: visual\n\nprofile:\n group: \n - [rc, prerelease]\n```\n\n\n:::\n:::\n\n------------------------------------------------------------------------\n\n::: {.callout-important icon=\"false\"}\n#### Tarea 5.1: Modificar `_quarto.yml`\n\n- Tenemos que dejar el archivo `_quarto.yml` así:\n\n::: {.cell}\n\n```{.r .cell-code .code-overflow-scroll code-line-numbers=\"true\"}\n# 1/ Opciones referentes al proyecto ----------------------------\nproject:\n type: website\n output-dir: _site \n \n#- 2/ Opciones referentes a la estructura de la web -----------------\nwebsite:\n title: \"Mi blog (aún en pruebas)\"\n navbar:\n logo: \"profile.jpg\"\n #background: \"#CCCCFF\" #- {“primary”, “secondary”, “danger”, “warning”, “light”, “dark”, or hex color} (el backgroung de la navbar)\n right:\n - text: \"Mi blog\"\n href: blog.qmd\n - icon: github\n href: https://github.com/
\n\n::: {.callout-important icon=\"false\"}\n#### Tarea 5.2: Modificar `./posts/_metadata.yml` \n\n- Tenemos que dejar el archivo `./posts/_metadata.yml` así:\n\n\n::: {.cell}\n\n```{.r .cell-code .code-overflow-scroll code-line-numbers=\"true\"}\n# IMPORTANTE: options specified here will apply to all posts in this folder\n\n# freeze: controla la ejecución de los .qmd durante un global project render\n# https://quarto.org/docs/projects/code-execution.html#freeze)\nfreeze: auto #- {false, true, auto}\n\n#- Quarto incluye un title-block al principio de los artículos con elementos como: title, subtitle, authors, date, doi, and abstract.\n\n# title-block-banner: pone un banner en el title-block: pondrá el title, subtitle, description, y categories dentro del banner\n# https://quarto.org/docs/authoring/title-blocks.html#title-banners\ntitle-block-banner: true #- {true, false, \"#FFDDFF\", \"image.jpg\"}\n\n# title-block-style: modifica el estilo del title-block\n# https://quarto.org/docs/authoring/title-blocks.html\ntitle-block-style: default #- {default, plain, none}\n\n# tb se puede especificar el color del texto dentro del banner\ntitle-block-banner-color: red\n```\n:::\n\n **IMPORTANTE**: las opciones que especifiques en `_metadata.yml` afectarán a todos los .qmd de la carpeta.\n\n- `freeze (linea 5): {false, true, auto}` controla la ejecución de los .qmd durante el procesado completo del Qproject. Documentación [aquí](https://quarto.org/docs/projects/code-execution.html#freeze).\n\n- `title-block-banner (linea 11): {true, false, \"#FFDDFF\", \"image.jpg\"}` controla la presencia y apariencia de los \"banners\" para dar más importancia a los títulos de los posts. Puedes controlar el color, incluso poner una imagen. Documentación [aquí](https://quarto.org/docs/authoring/title-blocks.html#title-banners). \n\n- `title-block-style (linea 15): {default, plain, none}` modifica el estilo del title-block\n\n\n- `title-block-banner-color(linea 18): {black, \"#FFDDFF\"}` controla el color del título del post\n\n:::\n\n\n\n------------------------------------------------------------------------\n\n### YAML: nivel documento\n\n
\n\n::: {.callout-important icon=\"false\"}\n#### Tarea 5.3: Modificar encabezamiento de `./posts/my-primer-post/index.qmd` \n\n- Tenemos que dejar el archivo `./posts/my-primer-post/index.qmd` así:\n\n\n````markdown\n---\ntitle: \"Mi primer post con Quarto\"\ndescription: |\n Estoy aprendiendo Quarto\nauthor:\n - name: Pedro J. Pérez\n url: https://www.wikidata.org\n affiliation: Universitat de València\n affiliation-url: https://www.uv.es\n orcid: 0000-xxxx\ndate: \"2022-10-25\"\ncategories: [R, quarto]\n#title-block-banner: true #- {true, false }\ntitle-block-banner: thumbnail.jpg\ntitle-block-banner-color: green\n---\n\nEste es mi **primer post** con Quarto!!!!\n\n```{{r}}\nsqrt(2 + 2)\n```\n\nVoy a poner una imagen:\n\n\n\nAcabé con mi primer post. FIN\n \n````\n\n- Sustituye `thumbnail.jpg` por otro archivo\n\n\n- Vuelve a regenerar el blog: `Build > Render Website`\n:::\n\n\n\n# 2. TEXTO (o narrativas) {.unnumbered background-color=\"#b8c2aa\"}\n\n------------------------------------------------------------------------\n\n### Texto (o narrativas) {.smaller}\n\n- Se escribe (al igual que `.Rmd`) en **markdown**. [Aquí](https://quarto.org/docs/authoring/markdown-basics.html) la documentación oficial de Quarto.\n\n- Sintaxis básica de `markdown`\n\n::: { layout-ncol=1}\n\n{fig-align=\"center\" width=\"100%\"}\n\n:::\n\n\n\n
\n\n# 3. CHUNKS {.unnumbered background-color=\"#b8c2aa\"}\n\n------------------------------------------------------------------------\n\n### CHUNKS\n\n**Comportamiento similar** a los documentos `.Rmd`. La documentación oficial está [aquí](https://quarto.org/docs/computations/execution-options.html)\n\n
\n\n##### Principales diferencias con .Rmd\n\n- En ficheros `.qmd`, **las opciones de los chunks se pueden especificar globalmente en el YAML** y a nivel individual en cada uno de los chunks.\n\n- En los **chunks individuales** ahora se se utiliza la **sintaxis YAML** (`key: value`) en lineas dentro del chunk que empiezan con `#|`. Por ejemplo:\n\n\n{fig-align=\"center\"}\n\n\n\n\n------------------------------------------------------------------------\n\n### CHUNKS\n\n- Las principales opciones son: **echo**, **eval**, **warning**, **error**, **output** e **include**. [Aquí](https://quarto.org/docs/computations/execution-options.html#output-options) la documentación oficial.\n\n- `echo`: además de los típicos true y false, ahora **incorpora un nuevo valor `fenced`** que facilita mostrar las marcas de los chunks en el documento final. Documentación [aquí](https://quarto.org/docs/computations/execution-options.html#fenced-echo).\n\n- Además, si usamos `knitr` para ejecutar los chunks, entonces podemos usar todas las [opciones nativas de `knitr`](https://yihui.org/knitr/options/), como: collapse, fig.width, comment, etc ... Más información [aquí](https://quarto.org/docs/computations/execution-options.html#knitr-options). Un ejemplo:\n\n\n{fig-align=\"center\"}\n\n\n\n{fig-align=\"center\"}\n\n\n\n\n- Hay **más opciones para los chunks**. Por ejemplo:\n\n - hacer **folding code** con `#| code-fold: true`\n\n - si el código es muy largo, puedes usar `#| code-overflow: wrap` o scroll\n\n - puedes hacer que se muestren los **números de linea** con `#| code-line-numbers: true`\n\nLa documentación oficial la tienes [aquí](https://quarto.org/docs/output-formats/html-code.html).\n\n# 4. Elementos básicos para escribir {.unnumbered background-color=\"#b8c2aa\"}\n\n------------------------------------------------------------------------\n\n### Elementos básicos para escribir\n\n
\n\nPara escribir en Markdown, además de texto, tenemos los siguientes elementos básicos:\n\n\n\n- Links (documentación [aquí](https://quarto.org/docs/authoring/markdown-basics.html#links-images))\n\n- Listas (documentación [aquí](https://quarto.org/docs/authoring/markdown-basics.html#lists)) \n\n- Tablas (documentación [aquí](https://quarto.org/docs/authoring/markdown-basics.html#tables)) \n\n- Código (documentación [aquí](https://quarto.org/docs/authoring/markdown-basics.html#source-code)) \n\n- Ecuaciones (documentación [aquí](https://quarto.org/docs/authoring/markdown-basics.html#equations)). Editor de ecuaciones [aquí](https://www.latex4technics.com/) o [aquí](http://www.sciweavers.org/free-online-latex-equation-editor).\n\n\n- Imágenes (documentación [aquí](https://quarto.org/docs/authoring/figures.html)) y sus [opciones](https://quarto.org/docs/computations/execution-options.html#figure-options)\n\n\n
\n\nEl [editor visual](https://www.rstudio.com/blog/exploring-rstudio-visual-markdown-editor/) facilita la introducción de estos elementos en tus documentos. En [esta charla](https://www.youtube.com/watch?v=6p4vOKS6Xls) de Mine Çetinkaya-Rundel se aprecia fácilmente la **utilidad del editor visual**.\n\n\n\n# 5. Más elementos para \"escribir\" {.unnumbered background-color=\"#b8c2aa\"}\n\n------------------------------------------------------------------------\n\n### Más elementos para \"escribir\"\n\nAdemás de los elementos básicos de escritura que nos ofrece la sintaxis básica de `markdown`, **Quarto nos ofrece más posibilidades**. Por ejemplo:\n\n
\n\n\n\n- Layout (documentación [aquí](https://quarto.org/docs/authoring/article-layout.html))\n\n- Imágenes (documentación [aquí](https://quarto.org/docs/authoring/figures.html)) y sus [opciones](https://quarto.org/docs/computations/execution-options.html#figure-options)\n\n- Extensiones (documentación [aquí](https://quarto.org/docs/extensions/starter-templates.html)) . Listado de extensiones oficiales [aquí](https://quarto.org/docs/extensions/listing-filters.html)\n\n- Shortcodes (documentación [aquí](https://quarto.org/docs/extensions/shortcodes.html))\n\n- Callout blocks (documentación [aquí](https://quarto.org/docs/authoring/markdown-basics.html#callout-blocks)) \n\n- Divs & spans (documentación [aquí](https://quarto.org/docs/authoring/markdown-basics.html#divs-and-spans)) \n\n\n
\n\nVeamos algunos de estos elementos con un poco de detalle. Después lo recordaremos con una Práctica.\n\n\n\n\n\n# Veamos algunos de estos elementos con un poco de detalle. {.unnumbered background-color=\"#b8c2aa\"}\n\n
\n\n(Después lo recordaremos con una Práctica)\n\n------------------------------------------------------------------------\n\n\n\n#### Layouts {.unnumbered}\n\n\n- Además de yaml, texto y chunk, para escribir con Quarto **conviene conocer la estructura o layout de las páginas web** que generamos con Quarto. Documentación [aquí](https://quarto.org/docs/authoring/article-layout.html).\n\n. . . \n\n- Nuestra páginas web tienen [2 zonas si la miramos en horizontal]{.underline}: la **sidebar** y la zona reservada para **el artículo**. Puedes verlo [aquí](https://quarto.org/docs/output-formats/page-layout.html#html-page-layout)\n\n- A su vez, [la zona del artículo se divide en 2]{.underline}: **body** y **margin**.\n\n. . . \n\n- La versión 1.3 de Quarto, aún no disponible, permitirá controlar estos componentes del layout. Puedes verlo [aquí](https://quarto.org/docs/output-formats/page-layout.html#grid-customization)\n\n\n. . . \n\n- Además, el layout puede venir afectado por la opción `page-layout: full` que tiene 3 opciones: article, full y custom \n\n
\n\n> :warning: **Importante!!**\n\n- Usando **divs** se puede hacer que **alguna sección de nuestra página ocupe un espacio mayor al habitual**; es decir, mayor al espacio habitualmente reservado para el body.\n\n\n- Veamos las **posibilidades que tenemos de layout** con [este post](/blog/21_layouts.html){target=\"_blank\"} del blog del curso \n\n
\n\n\n---\n\n#### Imágenes {.unnumbered}\n\n- Conocemos ya la sintaxis básica para insertar imágenes `. \n\n- Para ver como **instalar y usar extensiones** vamos a ir, otra vez, a otro de los post del blog del curso: concretamente [aquí](/blog/23_extensiones.html){target=\"_blank\"} \n\n\n
\n\n\n\n---\n\n#### Shortcodes {.unnumbered}\n\n- Un shortcode es un código (una etiqueta, un elemento) que podemos **insertar** para añadir algún tipo de **contenido sin tener que escribirlo directamente**.\n\n- Son muy **útiles** para insertar **contenido que se repite**\n\n\n- Podemos verlo en [este post](https://perezp44.github.io/intro.to.quarto/blog/22_shortcodes.html) del blog del curso o en la [documentación oficial](https://quarto.org/docs/extensions/shortcodes.html)\n\n\n---\n\n\n#### Faltan 2 elementos {.unnumbered}\n\n\n
\n\n- **Callout blocks**: documentación [aquí](https://quarto.org/docs/authoring/callouts.html)\n\n
\n\n- **Divs** y **spans**: documentación [aquí](https://quarto.org/docs/authoring/markdown-basics.html#divs-and-spans)\n\n\n\n\n\n------------------------------------------------------------------------\n\n::: {.callout-note collapse=\"true\" appearance=\"default\" icon=\"false\"}\n#### Resumen (tutorial nº 5)\n\n- La **quinta parte del taller** se ocupa de la **escritura de posts** para el blog. \n\n- Los posts **se han de escribir en formato `.qmd`**; por lo tanto, se repasan los fundamentos \"teóricos\" necesarios para escribir este tipo de documentos.\n\n- Nos apoyamos en nuestro **conocimiento previo de la sintaxis Rmarkdown**.\n\n- Se repasan las posibilidades de configurar los documentos por medio de **los 3 niveles de YAML** que pueden afectar a un documento.\n\n- **Los 3 YAML's** son: Nivel proyecto (`_quarto.yml`), nivel carpeta (`_metadata.yml`) y nivel documento (en el propio encabezamiento del archivo)\n\n- El **texto** en ficheros `.qmd` es muy similar al de los documentos `.qmd`. Aparecen algunos elementos nuevos como los Call-outs.\n\n- El **código** sí presenta novedades: nueva sintaxis con `#|` y posibilidad de determinar opciones de los chunks en el YAML.\n\n- Para poder escribir en `.qmd` **hay que practicar**. Lo haremos con una tarea donde veremos, entre otras cosas:\n\n - Algunas de las opciones de **layout**.\n\n - Ver como instalar y usar **extensiones**.\n \n - Opciones avanzadas para **insertar imágenes**.\n\n\n:::\n\n\n\n
\n\n------------------------------------------------------------------------\n\n::: {.callout-tip collapse=\"true\" appearance=\"default\" icon=\"false\"}\n\n#### Práctica 5.1: Crear un post para tu blog con la siguiente plantilla.\n\nVamos a crear un nuevo post para practicar algunos de los elementos de escritura que hemos visto. Para ello:\n\n- Crea una nueva subcarpeta en la carpeta `./posts/`. Por ejemplo llámala: `./posts/my-segundo-post` y copia allí los documentos que haya en la carpeta de otro blog. Es decir, en la nueva subcarpeta que has creado debe haber un fichero `index.qmd` y una imagen `thumbnail.jpg`.\n\n- Sustituye el contenido del archivo `index.qmd` por el contenido del siguiente chunk y haz un render de `./posts/my-segundo-post/index.qmd` para ver como quedaría una vez procesado.\n\n\n###### Contenido para sustituir en `./posts/my-segundo-post/index.qmd`\n\n\n````markdown\n---\ntitle: \"Mi Segundo post con Quarto\"\nauthor: \"Nosotros\"\ndate: 2022-10-25\ncategories: [R, quarto, ejemplos]\nimage: \"thumbnail.jpg\"\n#subtitle: | \n# Practicando con Quarto\ndescription: |\n Estamos viendo algunos elementos para escribir con Quarto.\n---\n\nEste ya es mi segundo post con Quarto. En él voy a hacer lo siguiente:\n\n\n## Insertar 2 imágenes side-by-side\n\n\n## Inserta un tweet\n\n\n## Inserta un `tab-set`\n\n\n## Inserta un call-out\n\n\n## Inserta un gráfico en el margen\n\n\n
\n\nPrueba superada!!\n\n\nAcabé con mi segundo post. FIN\n \n````\n\n:::\n\n\n\n\nLas soluciones a la Práctica están [aquí](/blog/66_soluciones-practica-5-1.html){target=\"_blank\"}\n\n
\n\n# 6. Tuneado del blog {background-color=\"#EEBF8B\"}\n\n(6ª parte del tutorial)\n\n::: {.callout-tip appearance=\"default\" icon=\"false\"}\n## ¿Qué haremos en este tutorial?\n\n- Ver distintas opciones para adaptar el blog a nuestras necesidades\n\n\n- En concreto veremos 3 formas de hacerlo: a través de opciones de Quarto en el yaml, con CSS y con SASS\n\n:::\n\n\n\n
\n\n------------------------------------------------------------------------\n\n## Intro\n\n- Quarto utiliza el framework [Bootstrap 5](https://keepcoding.io/blog/que-es-bootstrap-5/) al generar sus documentos `.html`.\n\n- Además, incorpora 25 themes del [Bootswatch project](https://bootswatch.com/) que le dan a nuestro blog/web una apariencia profesional y cuidada.\n\n\n
\n\n. . . \n\n- Creo que es mejor **comenzar con un blog sencillo** usando las plantillas, o **themes**, que nos ofrece Quarto pero, si queremos modificar la apariencia de nuestro blog, podemos hacerlo de **3 formas**:\n\n. . . \n\n| 1. Utilizando las opciones disponibles en Quarto para el `yaml`\n\n| 2. Utilizando CSS\n\n| 3. Utilizando SASS\n\n# 1. Utilizando opciones del YAML {.unnumbered background-color=\"#b8c2aa\"}\n\n
\n\n- En el [tutorial nº 6](https://perezp44.github.io/taller.primer.blog/taller/06_taller_tuneado-del-blog.html){target=\"_blank\"} (del taller que impartí en Córdoba) repasamos las distintas opciones que tenemos disponibles para poder cambiar a través de opciones en los YAML's (recuerda los 3 niveles).\n\n- Aquí solo pondré la **documentación relevante** junta y **destacaré algunas de las opciones** disponibles.\n\n------------------------------------------------------------------------\n\n## Documentación oficial\n\n##### (sobre opciones disponibles en los YAML's)\n\n
\n\n- Referentes al **proyecto**: [aquí](https://quarto.org/docs/projects/quarto-projects.html#shared-metadata)\n\n- Referentes a la **estructura de la web**: [aquí](https://quarto.org/docs/websites/website-navigation.html) y [aquí](https://quarto.org/docs/websites/)\n\n- Referentes a la **estética**: [aquí](https://quarto.org/docs/output-formats/html-basics.html) y [aquí](https://quarto.org/docs/reference/formats/html.html)\n\n- Referentes a las **Listing Pages**: [aquí](https://quarto.org/docs/websites/website-listings.html)\n\n- Referentes a las **About Pages**: [aquí](https://quarto.org/docs/websites/website-about.html)\n\n# Algunas opciones de YAML {.unnumbered background-color=\"#b8c2aa\"}\n\n------------------------------------------------------------------------\n\n## Algunas opciones de YAML: **lang**\n\n- Si te has fijado, los metadatos de los documentos aparecen en inglés.\n\n- Por ejemplo, pone \"Author\" en lugar de \"Autor\" o \"Autora\".\n\n. . . \n\n
\n\n#### Hagamos algunos cambios\n\n- Si quisiéramos cambiar específicamente la opción de autor, tendríamos que poner en el YAML:\n\n\n::: {.cell}\n\n```{.r .cell-code}\nlanguage: \n title-block-author-single: \"Autora\"\n```\n:::\n\n\n- Podemos cambiar todas las opciones especificando en el YAML `lang: es`.\n\n- La documentación oficial está [aquí](https://quarto.org/docs/authoring/language.html) y [aquí](https://github.com/quarto-dev/quarto-cli/blob/main/src/resources/language/_language.yml) todos los elementos que se pueden modificar. Y [aquí](https://github.com/quarto-dev/quarto-cli/tree/main/src/resources/language) los ficheros específicos para diferentes idiomas. [Aquí](https://github.com/quarto-dev/quarto-cli/blob/main/src/resources/language/_language-es.yml) el documento para el castellano.\n\n
\n\n- Si quisieras usar tu propio documento tendrías que poner en el YAML: `language: custom.yml` (lógicamente el fichero `custom.yml` tendría que existir y estar en la ruta correcta).\n\n- ¿Probamos a hacerlo?\n\n------------------------------------------------------------------------\n\n## Otras opciones para tunear desde el YAML\n\n- **TOC**: es importante tenerlo a nuestro gusto. [Aquí](https://quarto.org/docs/reference/formats/html.html#table-of-contents) tienes las opciones que puedes ajustar con opciones en el yaml\n\n- **Chunks**: [aquí](https://quarto.org/docs/reference/formats/html.html#code) tienes las opciones que puedes ajustar desde el YAML\n\n- **Resizing de los thumbnails**. Un [gist](https://gist.github.com/perezp44/fc5a3853039fd29ff94c5b8488fea0a1#file-resize_thumbnails-r) para hacerlo.\n\n- **Algunas opciones de tuneado** que puedes implementar desde el YAML. Prueba a poner estas opciones en el archivo `_quarto.yml`. Nuestro blog **empeorará bastante**. Más opciones [aquí](https://quarto.org/docs/output-formats/html-themes.html#basic-options).\n\n\n::: {.cell}\n\n```{.r .cell-code}\nfontcolor: green #- color del texto\nlinkcolor: purple #- color de los enlaces\nmonobackgroundcolor: red #- color de los cuadros de resultados de evaluar código\nfontsize: 0.6em #- tamaño del texto (más pequeño de lo normal: 1)\nlinestretch: 2.3 #- tamaño entre las lineas (1.6 es lo \"normal\")\n```\n:::\n\n\n## 2. Utilizando CSS {.unnumbered background-color=\"#b8c2aa\"}\n\n
\n\n- La apariencia visual del blog puede cambiarse utilizando CSS.\n\n- Veamos un ejemplo con el siguiente [post](/blog/25_css.html){target=\"_blank\"}\n\n## 3. Utilizando SASS {.unnumbered background-color=\"#b8c2aa\"}\n\n
\n\n- La documentación oficial [aquí](https://quarto.org/docs/output-formats/html-themes.html#sass-variables)\n\n- [Aquí](https://quarto.org/docs/output-formats/html-themes-more.html) la documentación oficial de Quarto sobre los Bootswatch Sass Theme Files.\n\n- Bootstrap define unas 1.400 variables con las que controlar fuentes, colores, etc ... . Puedes verlas [aquí](https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss)\n\n- [Aquí](https://github.com/quarto-dev/quarto-cli/tree/main/src/resources/formats/html/bootstrap/themes) están los ficheros `.scss` de los 25 built-in Bootswatch themes.\n\n
\n\n- **Otras referencias**, por ejemplo: [Customizing Quarto Websites: Make your website stand out using SASS](https://ucsb-meds.github.io/customizing-quarto-websites/#/title-slide) o [este video](https://www.youtube.com/watch?v=ErRX8plZpQE)\n\n- Una pequeña práctica en el [tutorial nº6](https://perezp44.github.io/taller.primer.blog/taller/06_taller_tuneado-del-blog.html#sass){target=\"_blank\"} del taller \"Mi primer blog con Quarto\".\n\n# Publicando el blog {.unnumbered background-color=\"#b8c2aa\"}\n\n
\n\n- La [documentación oficial](https://quarto.org/docs/publishing/) de Quarto. \n\n. . . \n\n- Si lo publicamos en [Quarto Pub](https://quarto.org/docs/publishing/quarto-pub.html), ejecutar en la Terminal: `quarto publish quarto-pub`\n\n. . . \n\n- En [Github Pages](https://quarto.org/docs/publishing/github-pages.html)\n\n. . . \n\n- En la Universitat de València. \n\n. . .\n\n\n| - Un post que lo explica [aquí](){target=\"_blank\"}\n\n\n\n# Fin!! {.unnumbered .centered background-color=\"#562457\"}\n\n- Muchas gracias por la atención :slightly_smiling_face:\n\n- Espero que el taller haya salido OK :white_check_mark:\n\n- Si alguien motivado por el taller acaba haciéndose un blog, **please que me avise** (pedro.j.perez\\@uv.es) :mailbox:\n\n
\n\n- Big thanks to all the Posit/Quarto team !!!! 👏🏼👏🏼 🙌🏼\n\n
\n\n- Bye 👋🏼 👋🏼 , nos vemos en las próximas Jornadas en ...\n",
"supporting": [],
"filters": [
"rmarkdown/pagebreak.lua"
],
"includes": {
"include-after-body": [
"\n\n\n"
]
},
"engineDependencies": {},
"preserve": {},
"postProcess": true
}
} Fy![XFy![ @ : A e x e c u t e - r e s u l t s iz Fy![XFy![ @ 4[ < A f i g u r e - r e v e a l j s k Fy![XFy![ @ 4 > A l i b s V Fy![X)#[ @ / f ; f A h t m l . j s o n {
"hash": "3e467a7ca7b83bc3dbb3e9ece778c880",
"result": {
"engine": "knitr",
"markdown": "---\ntitle: \"Aprendiendo a escribir en QMD\"\n#date: 2023-09-04 #- ISO8601 YYYY-MM-DD format \nsubtitle: | \n {{< var my_subtitle2 >}}\ndate-format: long\nlang: es\nformat: \n revealjs:\n scrollable: true\n slide-level: 2\n height: 900\n width: 1600\n toc: false\n from: markdown+emoji #- usar emojis https://gist.github.com/rxaviers/7360908)\n center-title-slide: true\n title-slide-attributes: #- atributos para la slide de titulo\n data-background-color: \"#562457\" #- color de R-ladies\n #data-background-image: /imagenes/economia.gif\n #data-background-size: contain \n preview-links: auto #- true: abre un iframe en lugar de abrir ventana\n #multiplex: true #- para que puedas manejar las slides del publico\n link-external-newwindow: true\n transition: fade\n #height: 900\n #width: 1600\n fontcolor: \"#262d36\"\n highlight-style: a11y\n code-line-numbers: true\n number-sections: false\n slide-number: c/t # https://pandoc.org/MANUAL.html#structuring-the-slide-show\n incremental: false # https://quarto.org/docs/presentations/#incremental-lists\n#logo: imagenes/economia.gif\n#footer: |\n# {{< var webcurso >}}\nrevealjs-plugins: [pointer]\n # - lightbox\n # - pointer # hay q apretar q\n#css: assets/styles_slides_intro.css\n #theme: [moon, custom.scss]\nembed-resources: true\nlightbox: true\n---\n\n\n\n# ¿Que haremos en esta sección? {background-color=\"#b8c2aa\"}\n\n\n{{< var lineanaranja >}}\n\n\n\n
\n\n- Aprender a **usar \"el entorno R\" para escribir**, para generar documentos\n\n---\n\n## Forma de trabajar con el \"entorno R\" \n\n- Ya sabéis que **R es un entorno** (y un lenguaje de programación) **para hacer estadística**\n\n. . . \n\n\n- En esta sección del curso nos centraremos en la última etapa: la **presentación de los resultados**, la generación de documentos\n\n{fig-align=\"center\" width=\"55%\"}\n\n\n. . .\n\n- Los documentos que generemos serán **reproducibles**: generaremos directamente el documento final sin copiar ni pegar nada, sino **usando código**.\n\n- Para ello, hemos de aprender a escribir en **QMD** (Quarto Markdown) (❗❗)\n\n\n\n\n\n---\n\n\n## ¿Qué tipos de documentos haremos? {.color-header}\n\n- Haremos distintos tipos de documentos: **tutoriales**, **transparencias**, **páginas web**, **...**\n\n. . .\n\n\n - . . . aunque, con Quarto se pueden generar **documentos de muchos tipos** (artículos académicos, libros, tesis, cartas, cuadros de mando, etc ... etc ...) **y formatos** (html, pdf, epub, docx, beamer, pptx, etc ... etc ...). \n \n - Para verlo puedes visitar la [Quarto gallery](https://quarto.org/docs/gallery/){target=\"blank\"}\n\n. . .\n\n\n#### Algunos ejemplos:\n\n- **Tutoriales**: por ejemplo [este](https://quarto-dev.github.io/quarto-gallery/page-layout/tufte.html){target=\"blank\"} o [este](https://perezp44.github.io/web.Econometria.GADE/materiales/cuestionario_practicas.html){target=\"blank\"}\n\n- **Slides**: por ejemplo [estas](https://laderast.github.io/qmd_rmd/#/title-slide){target=\"blank\"} o [estas](https://apreshill.github.io/palmerpenguins-useR-2022/#/title-slide){target=\"blank\"}\n\n- **Páginas web**: por ejemplo [esta](https://nicar.r-journalism.com/), [esta](https://sta210-s22.github.io/website/){target=\"blank\"} o [esta](https://www.mm218.dev/){target=\"blank\"}\n\n- **Blogs**: por ejemplo [este](https://www.mrworthington.com/){target=\"blank\"} o [este](https://blog.djnavarro.net/){target=\"blank\"}\n\n\n\n\n\n\n# Primeras ideas (sobre Quarto){background-color=\"#b8c2aa\"}\n\n\n{{< var lineanaranja >}}\n\n\n\n
\n\n. . .\n\n¿Qué es Quarto?\n\n¿Cómo trabajaremos con Quarto?\n\n-----------------------------------------------------------------------\n\n## ¿Qué es **Quarto**?\n\n- No es un paquete, es **un programa de ordenador**\n\n\n. . .\n\n\n- Es un sistema para escribir, para generar **publicaciones científico-técnicas**, dentro del ecosistema R.\n\n. . . \n\n- Es la **segunda generación de Rmarkdown**\n\n\n
\n\n---\n\n## ¿Cómo interactuaremos con Quarto?\n\n
\n\n#### Visualmente\n\n\n{#fig-00 fig-align=\"center\" width=\"40%\"}\n\n---\n\n### Visualmente (pero más realista)\n\n
\n\n::: {columns}\n::: {.column width=\"42%\"}\n#### source code (escrito en QMD)\n\n\n::: {.cell layout-align=\"center\"}\n::: {.cell-output-display}\n{fig-align='center' width=100%}\n:::\n:::\n\n:::\n\n::: {.column width=\"13%\"}\n
\n\n\n::: {.cell layout-align=\"center\"}\n::: {.cell-output-display}\n{fig-align='center' width=70%}\n:::\n:::\n\n:::\n\n::: {.column width=\"42%\"}\n#### output\n\n\n::: {.cell layout-align=\"center\"}\n::: {.cell-output-display}\n{fig-align='center' width=100%}\n:::\n:::\n\n:::\n:::\n\n\n\n# Primeros pasos con Quarto {background-color=\"#b8c2aa\"}\n\n\n{{< var lineanaranja >}}\n\n\n\n
\n\n\n\n# Trabajaremos usando proyectos {background-color=\"#ebf5fb\"}\n\n\n{{< var lineanaranja >}}\n\n\n\n. . .\n\n
\n\nRepito, vamos a trabajar con proyectos, concretamente con ...\n\n
\n\n. . .\n\n... Quarto projects o **Qprojects**\n\n------------------------------------------------------------------------\n\n## ¿Qué es un **Q**project?\n\n- Es simplemente una **carpeta** donde tendremos los \"materiales\" que necesitemos para uno de nuestros proyectos\n\n. . .\n\n- Pero **usarlos tiene ventajas**. Puedes ver algunas en [este post de Jenny Bryan](https://www.tidyverse.org/blog/2017/12/workflow-vs-script/)\n\n- Para nosotros la principal ventaja consiste en que **podremos usar rutas relativas**\n\n
\n\n------------------------------------------------------------------------\n\n## ¿Cómo se crea un Qproject?\n\n- En RStudio has de seguir la siguiente ruta de menús: `File > New Project > New Directory > Quarto Project` , y ponerle un nombre a la carpeta del Qproject.\n\n. . .\n\n::: {.callout-important icon=\"false\"}\n#### Tarea 2.3: Creación de un **Q**project\n\n- Simplemente tienes que crear un Qproject que se llame \"my_primer_qproject\"\n\n- Mejor si creas el Qproject en el Escritorio\n\n- Mira cuantos archivos hay en la carpeta del proyecto \n\n:::\n\n\n\n\n\n
\n\n------------------------------------------------------------------------\n\n## Dos cosillas sobre los Qprojects\n\n::: {columns}\n::: {.column width=\"65%\"}\n1. ¿Cómo abrirlos?\n - Siempre desde el fichero con icono azulito y extensión `.Rproj`\n:::\n\n::: {.column width=\"25%\"}\n\n::: {.cell layout-align=\"center\"}\n::: {.cell-output-display}\n{fig-align='center' width=95%}\n:::\n:::\n\n:::\n:::\n\n. . .\n\n::: {columns}\n::: {.column width=\"65%\"}\n2. ¿Cómo saber si realmente estás dentro de un proyecto?\n - En la esquina superior-izquierda de tu RStudio verás el icono azulito junto al nombre de tu proyecto\n:::\n\n::: {.column width=\"25%\"}\n\n::: {.cell layout-align=\"center\"}\n::: {.cell-output-display}\n{fig-align='center' width=95%}\n:::\n:::\n\n:::\n:::\n\n------------------------------------------------------------------------\n\n::: {.callout-important icon=\"false\"}\n#### Tarea 2.4: Abriendo y cerrando **Q**project's\n\n- Cierra RStudio \n\n- Vuelve a abrir el Qproject `\"my_primer_qproject\"`\n\n- Asegúrate de que realmente \"estás\" en `\"my_primer_qproject\"`\n\n
\n\n- Borra todos los archivos del Qproject excepto el fichero `.Rproj`\n\n\n
\n\n:::\n\n\n\n# Creación de documentos `.qmd` {background-color=\"#b8c2aa\"}\n\n\n{{< var lineanaranja >}}\n\n\n\n
\n\n. . .\n\n
\n\nVamos ya a crear nuestro primer fichero `.qmd`\n\n... eso sí, lo crearemos **dentro de un Qproject**\n\n------------------------------------------------------------------------\n\n::: {.callout-important icon=\"false\"}\n#### Tarea 2.5: Crear un fichero `.qmd` (Un Quarto document)\n\n- En el Qproject `\"my_primer_qproject\"`, **crea un \"Quarto document\"**\n\n- Durante el proceso de creación te pedirá un \"Title\" y un \"Author\": pon lo que quieras\n\n::: {.fragment}\n- El fichero que acabamos de crear es nuestro **documento fuente**\n\n- Pégale un vistazo al documento fuente, antes de que Quarto lo procese, para intentar descubrir sus partes\n\n- De momento, es mejor que visualicemos el documento en formato \"Source\"\n\n::: {.cell layout-align=\"center\"}\n::: {.cell-output-display}\n{fig-align='center' width=32%}\n:::\n:::\n:::\n\n::: {.fragment}\n\n- Procesa (\"Render\") el documento `.qmd` que acabamos de crear. \n\n- Al intentar procesarlo te pedirá un nombre. **LLamalo `index`**\n\n- ¿Qué ha pasado finalmente?\n:::\n\n:::\n\n\n\n
\n\n##
Vamos a jugar un rato con RStudio {background-color=\"#ebf5fb\"}\n\n\n{{< var lineanaranja >}}\n\n\n\n. . .\n\n
\n\nNos servirá para familiarizarnos con :\n\n- la interfaz de Rstudio\n\n- los conceptos de **documento fuente** (.qmd) y **documento final** (.html, .pdf, etc...)\n\n
\n\n. . .\n\n... y empezar a entender la **sintaxis** de \"Quarto Markdown\"\n\n------------------------------------------------------------------------\n\n::: {.callout-important icon=\"false\"}\n#### Tarea 2.6a: Creamos un nuevo qmd: `\"prueba_01.qmd\"`\n\n- Vamos a crear un nuevo documento \".qmd\". \n\n- Procésalo. Esta vez llámalo `prueba_01.qmd`\n\n:::\n\n
\n\n\n\n::: {.fragment}\n\n::: {.callout-important icon=\"false\"}\n#### Tarea 2.6b: Reusamos `\"prueba_01.qmd\"` para crear un pdf\n\n- Vamos a reusar el fichero fuente `prueba_01.qmd` para generar un pdf. Para ello:\n\n - En el encabezamiento has de cambiar \"`format: html`\" por \"`format: pdf`\"\n \n - **PERO** si al intentar procesarlo te dice que instales \"tinytex\", entonces para, **no lo hagas!!**, ya lo haremos en el descanso. Para ello tendrás que ejecutar en la Terminal `quarto install tinytext`\n:::\n:::\n\n\n\n\n
\n\n------------------------------------------------------------------------\n\n\n\n::: {.callout-important icon=\"false\"}\n#### Tarea 2.6c: Usamos `\"prueba_01.qmd\"` para generar unas slides\n\n- Reutiliza `\"prueba_01.qmd\"` para generar unas \"revealjs\" slides. Solo has de cambiar el formato de salida!!\n\n\n::: {.fragment}\n- Si avanzas aparecerá la solución. Inténtalo sin mirar la solución!!!!\n:::\n\n::: {.fragment}\n\n- La solución: \n\n```yaml\ntitle: \"prueba_01\"\nformat: revealjs\n``` \n\n:::\n:::\n\n
\n\n::: {.fragment}\n\n::: {.callout-important icon=\"false\"}\n#### Tarea 2.6d: Vamos a cambiar la apariencia visual de las slides\n\n- Vamos a cambiar el **theme** de las \"revealjs\" slides. Para ello:\n\n```yaml\ntitle: \"prueba_01\"\nformat:\n revealjs:\n theme: night\n``` \n\n
\n\n::: {.fragment}\n- Puedes probar otros themes de [este listado](https://quarto.org/docs/presentations/revealjs/themes.html#using-themes)\n:::\n\n:::\n\n:::\n\n\n
\n\n\n\n\n\n
\n\n\n------------------------------------------------------------------------\n\n::: {.callout-important icon=\"false\"}\n#### Tarea 2.6e: Ahora vamos a cambiar el \"theme\" usado en el fichero `index.qmd`\n\n- El listado de \"themes\" lo tienes [aquí](https://quarto.org/docs/output-formats/html-themes.html)\n\n- Piensa bien cómo has de dejar el \"yaml\". Apóyate en lo que hemos hecho para las slides\n\n- La solución está más adelante, pero no la mires\n\n
\n\n::: {.fragment}\n- Solución: has de dejar el \"YAML\" del qmd como:\n\n```yaml\ntitle: \"Mi documento\"\nauthor: \"Nosotros\"\ndate: today\nformat:\n html:\n theme: sandstone\n``` \n:::\n \n:::\n \n\n\n\n
\n\n------------------------------------------------------------------------\n\n::: {.callout-important icon=\"false\"}\n#### Tarea 2.7: Vamos a usar nuestro Qproject para generar una página web\n\n- Modifica el archivo `_quarto.yml` para que su contenido sea:\n\n
\n\n```yaml\nproject:\n type: website\n \nwebsite:\n navbar:\n right: \n - prueba_01.qmd\n```\n\n
\n\n- Para generar la página web tienes que hacer un \"Build > Render Project\"\n\n
\n\n:::\n\n\n\n
\n\n------------------------------------------------------------------------\n\n::: {.callout-important icon=\"false\"}\n#### Tarea 2.8: Añade una nueva página a nuestra página web\n\n- Pista: puedes reutilizar el contenido del fichero `index.qmd`\n\n:::\n\n\n\n\n. . . \n\n::: {.callout-important icon=\"false\"}\n#### Una solución a la Tarea 2.8\n\n\n```yaml\nproject:\n type: website\n \nwebsite:\n navbar:\n background: \"#DF55CB\"\n right: \n - text: \"Info\"\n href: index.qmd\n - text: \"Más Info\"\n href: index.qmd\n left: \n - icon: house-door\n href: index.qmd \n```\n\n:::\n\n
\n\n::: {.fragment}\n::: {.callout-important icon=\"false\"}\n#### Tarea 2.8b: Haz que se vean las slides en la web\n\n- Esta vez no hay solución\n\n:::\n:::\n\n\n\n
\n\n\n\n\n# Lo que ya sabemos {background-color=\"#b8c2aa\"}\n\n\n{{< var lineanaranja >}}\n\n\n\n
\n\n. . .\n\n- Trabajamos con Qprojects\n\n- Documento fuente escrito en **Qmd** genera diferentes outputs\n\n------------------------------------------------------------------------\n\n## Para poder practicar lo que vayamos aprendiendo ... {background-color=\"#f7f8f5\"}\n\n
\n\n::: {.callout-important icon=\"false\"}\n#### Tarea 3.0: Vamos a crear un nuevo Qproject\n\n- Cierra RStudio \n\n- Crea un nuevo Qproject llamado \"my_qproject\"\n\n- Inspecciona los documentos que hay dentro de \"my_qproject\"\n\n- Borra el archivo `my_qproject.qmd`\n\n- Crea un archivo `.qmd` llamado `prueba_01.qmd`\n\n
\n\n:::\n\n\n\n# Qmarkdown: guía rápida (`.qmd`) {background-color=\"#b8c2aa\"}\n\n------------------------------------------------------------------------\n\n## Los documentos `.qmd` tienen 3-4 partes {.smaller}\n\n1. Encabezamiento (**yaml** header) \n\n2. Trozos de **código** R (R chunks) \n\n3. **Texto** (escrito en Markdown) ...\n\n ... y **todo lo demás**: imágenes, links, ecuaciones, etc ...\n\n
\n\n. . .\n\n#### Un ejemplo\n\n\n:::: {columns}\n::: {.column width=\"48%\"}\n#### source code (escrito en QMD)\n\n\n::: {.cell layout-align=\"center\"}\n::: {.cell-output-display}\n{fig-align='center' width=120%}\n:::\n:::\n\n\n:::\n\n::: {.column width=\"48%\"}\n#### output\n\n\n::: {.cell layout-align=\"center\"}\n::: {.cell-output-display}\n{fig-align='center' width=90%}\n:::\n:::\n\n:::\n::::\n\n\n\n
\n\n# (I): YAML {.unnumbered background-color=\"#ebf5fb\"}\n\n\n{{< var lineanaranja >}}\n\n\n\n
\n\n. . .\n\n- Se utiliza para especificar metadatos (opciones) del documento final\n\n\n------------------------------------------------------------------------\n\n### (I) El encabezamiento o \"yaml header\"\n\n- Se (suele) poner al principio del documento, entre estas marcas: **`---`**\n\n- En el yaml son MUY importantes los **espacios y la indentación**\n\n\n
\n\n##### Ejemplos de yaml\n\n::: panel-tabset\n#### ejemplo 1\n\n\n::: {.cell}\n\n```{.yaml .cell-code}\n---\ntitle: \"Mi primer archivo qmd\"\ndate: \"2023-08-08\"\nformat: html\n---\n```\n:::\n\n\n#### ejemplo 2\n\n\n::: {.cell}\n\n```{.yaml .cell-code}\n---\ntitle: \"Mi primer archivo qmd\"\ndate: \"2023-08-08\"\nformat:\n html:\n toc: true\n toc-location: left\n---\n```\n:::\n\n\n#### ejemplo 3\n\n\n::: {.cell}\n\n```{.yaml .cell-code}\n---\ntitle: \"Mi primer archivo qmd\"\ndate: \"2023-08-08\"\nformat:\n html:\n toc: true\n toc-location: left\ntheme: sketchy #- hay 25 themes: https://quarto.org/docs/output-formats/html-themes.html\nembed-resources: true #- hace el documento auto-contenido\n---\n```\n:::\n\n:::\n\n\n\n\n\n---\n\n::: {.callout-important icon=\"false\"}\n#### Tarea 3.1: Vamos a jugar con el `yaml`\n\n- Utiliza el archivo `prueba_01.qmd` para probar como quedaría `prueba_01.html` al usar los 3 anteriores `yaml's`\n\n
\n\n- Una vez hayas probado a usar el tercer YAML, prueba algún otro `theme` de los 25 disponibles. [Aquí](https://quarto.org/docs/output-formats/html-themes.html) tienes el listado, y [aquí](https://druedin.com/2023/03/07/quarto-html-themes-gallery/) hay ejemplos para ver cómo quedan y decidir cual te gusta más.\n\n
\n\n:::\n\n\n\n\n\n# (II): CHUNKS {.unnumbered background-color=\"#ebf5fb\"}\n\n\n{{< var lineanaranja >}}\n\n\n\n
\n\n. . .\n\n- En documentos `.qmd` **podemos incorporar código**\n\n- Código que puede ser **ejecutado** \n\n\n- Así se podrá **mostrar** en el documento final tanto el código como **los resultados** (de la evaluación del código)\n\n. . . \n\n- Esto es lo que permite que los documentos sean **reproducibles**\n\n\n- La documentación oficial está [aquí](https://quarto.org/docs/computations/execution-options.html)\n\n------------------------------------------------------------------------\n\n### (II) Code Blocks o chunks (código R)\n\n- Para que Quarto sepa qué partes del `.qmd` es **código R**, debe ir dentro de estas marcas:\n\n\n{fig-align=\"left\" width=\"15%\"}\n\n- Por ejemplo:\n\n{fig-align=\"left\" width=\"30%\"}\n\n- Cuando Quarto/`knitr` procesen el chunk, se interpretará como código R y **ejecutará las instrucciones**, de forma que, en el documento final, se **mostrará el output** generado por el chunk.\n\n{fig-align=\"left\" width=\"80%\"}\n\n
\n\n------------------------------------------------------------------------\n\n## (II) Chunks: los chunks pueden tener opciones.\n\n- Por ejemplo: \n
\n\n \n\n\n. . .\n\n- Las **principales opciones** son: \n\n| Opción | (valor por defecto) | ¿Que hace? |\n|----|-------|------------------|\n| `echo` | true | Incluye el código en el documento final |\n| `eval` | true | Evalúa el código |\n| `warning` | true | Incluye los avisos en el documento final |\n| `message` | true | Incluye los mensajes |\n\n\n\n\n---\n\n::: {.callout-important icon=\"false\"}\n#### Tarea 3.2: Vamos a incorporar un chunk a nuestro `.qmd`\n\n- Utiliza el archivo `prueba_01.qmd` para insertar un chunk de código R con las siguientes instrucciones:\n\n\n ```{{r}}\n # install.packages(tidyverse)\n library(ggplot2)\n ggplot(iris, aes(Sepal.Length, Petal.Length)) + geom_point()\n ```\n\n Si no tuvieses el paquete `tidyverse` instalado, puedes usar este otro chunk:\n\n\n ```{{r}}\n plot(iris$Petal.Length,iris$Petal.Width)\n ```\n\n\n::: {.fragment}\n\n::: {.callout-warning icon=\"false\"}\n#### Ayudita con las marcas de los chunks\n\n- Para incorporar las marcas que delimitan los chunks de código, puedes usar este atajo del teclado: {{< kbd Alt-Ctrl-I >}}\n\n:::\n\n:::\n\n
\n\n:::\n\n\n\n---\n\n::: {.callout-important icon=\"false\"}\n#### Tarea 3.2b: Vamos a jugar con la **opciones de los chunks**\n\n::: {.fragment}\n- Incorpora al chunk las siguientes opciones: `echo` y `eval`\n\n\n- ¿Cuales son las opciones por defecto para `echo` y `eval`?\n::: \n\n::: {.fragment}\n\n- Incorpora también al chunk las siguientes opciones: `message` y `label`\n\n:::\n\n
\n\n\n:::\n\n\n\n\n. . . \n\n::: {.callout-important icon=\"false\"}\n#### Tarea 3.2b: Una solución\n\n\n```{{r}}\n#| eval: true\n#| echo: true\n#| message: false\n#| label: my-primer-chunk\n\n# install.packages(tidyverse)\nlibrary(ggplot2)\nggplot(iris, aes(Sepal.Length, Petal.Length)) + geom_point()\n```\n\n
\n\n:::\n\n\n\n\n## (II) Chunks: opciones de los chunks en el YAML\n\n- En el YAML, podemos fijar los valores por defecto de las opciones de los chunks\n\n\n. . . \n\n- Se han de poner **anidadas dentro de** `execute: `\n\n. . . \n\n
\n\n###### Por ejemplo: \n\n\n::: {columns}\n::: {.column width=\"46%\"}\n###### .Qmd (chunk options en el chunk)\n\n{fig-align=\"left\" width=\"100%\"}\n\n:::\n\n::: {.column width=\"46%\"}\n##### .Qmd (chunk options en el yaml)\n\n{fig-align=\"left\" width=\"100%\"}\n::: \n:::\n\n
\n\n---\n\n::: {.callout-important icon=\"false\"}\n#### Tarea 3.3: **opciones de los chunks** en el YAML\n\n- Utiliza el archivo `prueba_01.qmd` para insertar las **opciones de los chunks en el YAML** del documento\n\n\n- Por ejemplo, indica en el YAML que `echo: true` pero `eval: false`\n\n::: {.fragment}\n::: {.callout-important icon=\"false\"}\n#### Tarea 3.3: Solución\n\n```yaml\nexecute:\n echo: true\n eval: false\n```\n:::\n:::\n\n
\n\n::: {.fragment}\n- ¿Se puede poner la opción `label: ` en el YAML?\n:::\n\n
\n\n::: {.fragment}\n\n::: {.callout-warning icon=\"false\"}\n#### Extensión: uso de la opción `include`\n\n- ¿Se puede poner la opción `include: ` en el YAML?\n:::\n:::\n\n
\n\n:::\n\n\n\n\n## (II) Chunks: otras opciones de Quarto para los chunks\n\n\nAhora, en Quarto, hay **más opciones para los chunks**. Documentación oficial [aquí](https://quarto.org/docs/output-formats/html-code.html). Por ejemplo:\n\n. . . \n\n
\n\n - Hacer **folding code** con `#| code-fold: true` \n \n - Puedes combinarlo con `#| code-summary: \"Para ver el código, pincha\"`\n \n
\n \n. . . \n \n - Si el código es muy largo, puedes usar `#| code-overflow: wrap` (o scroll)\n\n
\n\n. . . \n\n - Puedes hacer que se muestren los **números de linea** con `#| code-line-numbers: true`\n\n. . . \n\n\nTodas estas opciones **también pueden ir en el YAML**. \n\n\n\n---\n\n\n::: {.callout-important icon=\"false\"}\n#### Tarea 3.4: Nuevas **opciones de los chunks**\n\n- Utiliza el archivo `prueba_01.qmd` para probar algunas de las nuevas opciones de los chunks en el YAML\n\n- Por ejemplo:\n\n\n```yaml\nformat:\n html:\n code-fold: true\n code-summary: \"Para ver el código, pincha\"\n code-line-numbers: true\n```\n
\n\n- Pudes también probar a usar la opción `code-tools: true` y ver que ocurre.\n\n
\n\nLa documentación oficial la tienes [aquí](https://quarto.org/docs/output-formats/html-code.html) y [aquí](https://quarto.org/docs/reference/cells/cells-knitr.html#code-output)\n\n\n
\n\n:::\n\n\n\n\n\n## (II) Código: inline code\n\n\n- La mayoría del código suele ir en los chunks, pero a veces necesitamos inline code ; es decir, código R dentro de nuestro texto.\n\n. . . \n\n
\n\n##### Por ejemplo\n\n::: {.incremental}\n\n- Si quiero describir un conjunto de datos puedo hacerlo escribiendo: \"El data.frame iris tiene 150 filas y 5 variables\" \n\n\n- Pero es **mejor hacerlo con inline code**. Para ello tienes que poner el código R dentro de estas marcas: `r ` \n\n\n- Habría que escribirlo así: \n\n\n - El data.frame iris tiene `r nrow(iris)` filas y `r ncol(iris)` variables.\n \n\n
\n\n- Documentación oficial de Quarto [aquí](https://quarto.org/docs/computations/execution-options.html#inline-code). (No hay mucho más)\n\n:::\n\n------\n\n::: {.callout-important icon=\"false\"}\n#### Tarea 3.5: Código **inline**\n\n- Utiliza el archivo `prueba_01.qmd` para incorporar un párrafo de texto que contenga código inline.\n\n- Por ejemplo, puedes incorporar este párrafo:\n\n\n> Este archivo que estoy escribiendo lo hice el 26 de junio de 2023.\n\n \n pero lo que queremos es que la fecha se modifique cada vez que se procese el documento `prueba_01.qmd`\n\n\n
\n\n\n:::{.callout-warning icon=\"false\" }\n#### **Pista:** puedes probar a usar parte deel siguiente código R\n\n```r\nSys.Date()\nformat(Sys.Date(), \"%d %B, %Y\")\n```\n:::\n\n::: {.cell}\n\n:::\n\n
\n\n\n:::\n\n\n\n\n\n\n\n\n\n# (III) Texto {.unnumbered background-color=\"#ebf5fb\"}\n\n\n{{< var lineanaranja >}}\n\n\n\n
\n\n- El texto (o narrativa) **se escribe en Markdown** (concretamente en [Pandoc's Markdown](https://pandoc.org/MANUAL.html#pandocs-markdown))\n\n. . . \n\n- Markdown es un **lenguaje de marcado ligero** con sintaxis sencilla que permite dar formato y estructura a un texto y convertirlo a `.html`\n\n\n. . . \n\n\n- Documentación oficial de Quarto [aquí](https://quarto.org/docs/authoring/markdown-basics.html) y su [documento fuente](https://github.com/quarto-dev/quarto-web/blob/main/docs/authoring/markdown-basics.qmd)\n\n- Una **fantástica guía sobre Markdown** [aquí](https://www.markdownguide.org/getting-started/)\n\n\n
\n\n\n\n## (III) Texto: ¿qué narices es esto de Markdown?\n\n. . . \n\n- Es un **lenguaje de marcas** diseñado para escribir fácilmente **para la web** y que también sea fácilmente legible.\n\n. . . \n\n- Markdown es un lenguaje **estoico** para escribir (para la web)\n\n. . . \n\n- Markdown fue creado por [John Grueber](https://daringfireball.net/projects/markdown/) y [Aaron Swartz](https://es.wikipedia.org/wiki/Aaron_Swartz) en 2004. Para saber más sobre Aaron Swartz puedes ver [este documental](https://www.youtube.com/watch?v=7jhdj0vKbYo).\n\n- Se creó con el objetivo de crear un formato de texto fácil de escribir y leer y que se convirtiera fácilmente en `.html`\n\n > Markdown is a text-to-HTML conversion tool for web writers.\n \n\n. . . \n\n- La ventaja de escribir en Markdown es que es un lenguaje muy fácil de aprender y que, como está basado en un formato de texto plano, es y será compatible con la mayoría de plataformas.\n\n. . . \n\n- En este otro [tutorial de Markdown](https://www.markdowntutorial.com/), se puede leer lo siguiente:\n\n> Markdown is a way to write for the web. It’s written in what nerds like to call “plaintext”. Plaintext is just the regular alphabet, with a few familiar symbols. Unlike cumbersome word processing applications, text written in Markdown can be easily shared between computers, mobile phones, and people. It’s quickly becoming the writing standard for academics, scientists, writers, and many more. Websites like GitHub and reddit use Markdown to style their comments.\n\n\n\n------------------------------------------------------------------------\n\n## (III) Texto: ideas básicas (otra vez)\n\n- En los documentos `.qmd`, **\"todo\"** lo que no es el yaml o un chunk, es texto. \n\n- En Quarto el texto se escribe en [Markdown](https://es.wikipedia.org/wiki/Markdown)\n\n- Como Quarto se basa en **pandoc**, se usa [\"Pandoc`s markdown\"](https://pandoc.org/MANUAL.html#pandocs-markdown), una versión revisada y extendida de la propuesta original de Grueber\n\n
\n\n- Tienes una fantástica guía de Markdown [aquí](https://www.markdownguide.org/), y [aquí](https://www.markdownguide.org/cheat-sheet/) una cheatsheet.\n\n\n## (III) Texto: Dando formato al texto \n\n. . . \n\n- Sintaxis básica de `markdown`\n\n+-----------------------------------+------------------------------+\n| Si escribes esto: | Se verá esto: |\n+===================================+==============================+\n| texto normal | texto normal |\n+-----------------------------------+------------------------------+\n| texto en **negrita** | texto en **negrita** |\n+-----------------------------------+------------------------------+\n| texto en *cursiva* | texto en *cursiva* |\n+-----------------------------------+------------------------------+\n| un superíndice^2^ | un superíndice^2^ |\n+-----------------------------------+------------------------------+\n| un subíndice~2~ | un subíndice~2~ |\n+-----------------------------------+------------------------------+\n| palabras ~~tachadas~~ | palabras ~~tachadas~~ |\n+-----------------------------------+------------------------------+\n| `verbatim code` | `verbatim code` |\n+-----------------------------------+------------------------------+\n| > un blockquote | > un blockquote |\n+-----------------------------------+------------------------------+\n+-----------------------------------+------------------------------+\n\n\n
\n\n\n---\n\n::: {.callout-important icon=\"false\"}\n#### Tarea 3.7: texto en markdown\n\nPara practicar a escribir con Markdown podemos:\n\n - Hacerlo en RStudio, por ejemplo podemos utilizar el archivo `prueba_01.qmd` para incorporar un párrafo que contenga los elementos que hemos visto en la tabla anterior\n \n \n - Alternativamente, podemos usar editores online como [este](https://dillinger.io/) o [este](https://vuejs.org/examples/#markdown)\n\n\n
\n\n\n- Aquí tienes un ejemplo:\n\n```markdown\nCuando quise darme cuenta la **clase había terminado** ....\n```\n\n
\n\n:::\n\n\n\n\n## (III) Texto: Dando formato al texto {background-color=\"#DCDCDC\"}\n\n- Más posibilidades:\n\n+-----------------------------------+------------------------------+\n| Si escribes esto: | Se verá esto: |\n+===================================+==============================+\n| [texto subrayado]{.underline} | [texto subrayado]{.underline}|\n+-----------------------------------+------------------------------+\n| texto destacado | texto destacado |\n+-----------------------------------+------------------------------+\n| [En versalita]{.smallcaps} | [En versalita]{.smallcaps} |\n+-----------------------------------+------------------------------+\n| el emoji :joy: | el emoji :joy: |\n+-----------------------------------+------------------------------+\n| > :warning: **Cuidado!!** no | > :warning: **Cuidado!!** no |\n+-----------------------------------+------------------------------+\n+-----------------------------------+------------------------------+\n\n
\n\n(**) Los emojis mejor desde el editor visual o copiándolos, por ejemplo, desde [aquí](https://gist.github.com/rxaviers/7360908)\n\n\n\n
\n\n## (III) Texto: Notas al píe {background-color=\"#DCDCDC\"}\n\n\nSe usa la marca `^`, y hay 2 sintaxis:\n\n
\n\n. . . \n\n 1.Con sintaxis inline:\n\n\n ``` markdown\n Sintáxis (inline) para insertar una nota al píe^[Se llama inline \n porque el contenido de la nota al píe se entremezcla con el texto principal]. Suele ser\n la sintáxis que yo uso. \n ```\n\n
\n\n 2. **No-**inline\n\n\n ``` markdown\n Aquí voy a poner otra nota al píe [^1] , y otra más.[^b]\n \n [^1]: Esta otra sintaxis me gusta menos. Pero igual es más clara\n\n [^b]: No sufras por la numerácion. lo hará Pandoc!!\n ```\n\n
\n\n. . . \n\n- Documentación oficial [aquí](https://quarto.org/docs/authoring/footnotes-and-citations.html#footnotes)\n\n\n## (III) Texto: Títulos\n\n. . . \n\n
\n\n+---------------------+-----------------------------------+\n| Markdown: | Se verá esto: |\n+=====================+===================================+\n| # Header 1 | # Header 1 |\n+---------------------+-----------------------------------+\n| ## Header 2 | ## Header 2 |\n+---------------------+-----------------------------------+\n| ### Header 3 | ### Header 3 {.heading-output} |\n+---------------------+-----------------------------------+\n| #### Header 4 | #### Header 4 {.heading-output} |\n+---------------------+-----------------------------------+\n| ##### Header 5 | ##### Header 5 {.heading-output} |\n+---------------------+-----------------------------------+\n| ###### Header 6 | ###### Header 6 {.heading-output} |\n+---------------------+-----------------------------------+\n\n\n
\n\n## (III) Texto: Creando **listas**\n\n. . . \n\n- En las listas es **crucial la indentación** (normalmente **2** espacios)\n\n. . . \n\n
\n\n## (III) Texto: Párrafos\n\n. . . \n\n- Para crear un nuevo párrafo has de dejar una (o más) **lineas en blanco**\n\n. . . \n\n\n- Para crear más espacio entre párrafos; es decir, [añadir una linea en blanco extra]{.underline}, podemos usar uno o varios: `
` o `
`\n\n\n
\n\n. . . \n\n#### Dentro de un párrafo\n\n- Si dentro de un párrafo necesitas que **una frase empiece en otra linea** entonces, **has de dejar 2 (o más) espacios al final**; en inglés esto se conoce como un \"hard line break\" \n\n\n::: {.fragment}\n:::{.callout-warning icon=\"false\" }\n#### Extensión: más formas de crear \"hard line breaks\" \n\n- El \"hard line break\" [también se puede hacer]{.underline} con `
`\n \n\n- El \"hard line break\" también se puede hacer con `\"\\\"` seguido de nueva linea. \n \n- En una tabla, `\\` es la única forma de crear un salto de línea, ya que se ignoran los espacios finales en las celdas.\n:::\n:::\n\n## (III) Texto: Lineas, espacios, ...\n\n\n. . . \n\n- Si en una linea de texto hay **2 espacios o más**, estos se reducen a un espacio.\n\n. . . \n\n\n:::{.callout-warning icon=\"false\" }\n#### Extensión: ¿cómo dejar más espacio entre palabras?\n\n- Por lo tanto, [si quieres separar palabras con más de un espacio]{.underline}, tendrás que usar lo que en html se conoce como \"entities\": ` `(1 espacio) ` `(2 espacios) y ` `(4 espacios). \n\n - Otra forma sería con la etiqueta ``.\n:::\n\n. . . \n\n
\n\n\n:::{.callout-warning icon=\"false\" }\n#### Extensión: un detalle que a veces es útil\n\n- Los espacios al principio de las lineas que empiezan con `|` se mantienen (🤓)\n:::\n\n# (IV) Más elementos {.unnumbered background-color=\"#ebf5fb\"}\n\n\n{{< var lineanaranja >}}\n\n\n\n
\n\n- Además de YAML, chunks y texto, **Markdown tiene más elementos para escribir**\n\n. . . \n\n- Por ejemplo: links, imágenes, vídeos, ecuaciones, tablas, bibliografía, etc ....\n\n\n## (IV) Más elementos: hyper-**links**\n\n
\n\n\n+-----------------------------------------------------+------------------------------------+\n| Si escribes esto: | Al procesarse se verá esto: |\n+=====================================================+====================================+\n|
\n\n. . . \n\n\n::: {.callout-warning collapse=\"true\" appearance=\"default\" icon=\"false\"}\n#### Extensión: Cómo hacer que los links se abran en nueva página\n\n\nSi quieres que la página enlazada **se abra en otra pestaña** del navegador puedes:\n\n 1. Especificarlo en el YAML con `link-external-newwindow: true`\n\n \n 2. Añadir `{target=\"_blank\"}`, con lo que nuestros enlaces quedarían como:\n \n ```markdown\n [Web de Quarto](https://quarto.org){target=\"_blank\"}\n ```\n 3. La versión 1.3 de Quarto permitirá esto en los enlaces en el fichero `_quarto.yml`. Puedes leerlo [aquí](https://github.com/quarto-dev/quarto-cli/discussions/2283>)\n\n:::\n\n## (IV) Más elementos: **Imágenes**\n\n- Documentación oficial [aquí](https://quarto.org/docs/authoring/figures.html)\n\n\n```markdown\n{ fig-align=\"left\" width=\"12%\"}\n```\n\n{ fig-align=\"left\" width=\"12%\"}\n\n\n```markdown\n{ fig-align=\"right\" width=\"20%\"}\n```\n\n{ fig-align=\"right\" width=\"20%\"}\n\n\n- Puedes ver como hacer composiciones de imágenes en el blog, concretamente [aquí](https://perezp44.github.io/intro.to.quarto/blog/24_imagenes.html){target=\"_blank\"}, además de cuestiones como el tamaño y aspecto de las imágenes.\n\n\n\n---\n\n::: {.callout-important icon=\"false\"}\n#### Tarea 3.8: Markdown, incorporar una imagen\n\n- Incorpora [esta imagen](https://commons.wikimedia.org/wiki/File:Nacho_Vegas_-_Rock_%26_Clown_-_A_Estrada.jpg) al archivo `prueba_01.qmd` \n\n\n
\n\n::: {.fragment}\n- Guarda [esta otra imagen](https://upload.wikimedia.org/wikipedia/commons/thumb/5/57/Husky_sib%C3%A9rienne.JPG/640px-Husky_sib%C3%A9rienne.JPG) dentro de `my_qproject`, concretamente dentro de la carpeta `imagenes`\n\n\n- Incorpora esa imagen (guardada en tu ordenador) al archivo `prueba_01.qmd` \n:::\n\n
\n\n:::\n\n\n\n\n\n\n## (IV) Más elementos: Imágenes **generadas con código** {background-color=\"#DCDCDC\"}\n\n- Documentación para fijar el tamaño [aquí](https://quarto.org/docs/computations/execution-options.html#figure-options)\n\n\n\n::: {.cell output-location='column-fragment'}\n\n````{.cell-code code-line-numbers=\"2|3|4-5|6|7\"}\n```{{r}}\n#| label: fig-penguins-01\n#| fig-cap: Gráfico con datos de pingüinos\n#| fig-width: 7\n#| fig-asp: 0.618\n#| output-location: column-fragment\n#| code-line-numbers: \"2|3|4-5|6|7\"\nlibrary(tidyverse)\nlibrary(palmerpenguins)\npp <- ggplot(penguins,aes(\n x = bill_length_mm, y = bill_depth_mm,\n color = species, shape = species)) + \n geom_point() +\n theme_minimal() +\n labs(x = \"Bill length (mm)\", y = \"Bill depth (mm)\")\n\npp\n```\n````\n\n::: {.cell-output-display}\n{#fig-penguins-01 width=672}\n:::\n:::\n\n\n\n\n
\n\n## (IV) Más elementos: Tablas con Markdown {background-color=\"#DCDCDC\"}\n\n- Documentación oficial para tablas [aquí](https://quarto.org/docs/authoring/tables.html)\n\n
\n\n. . . \n\n:::: {.columns}\n::: {.column width=\"45%\"}\n\n##### Sintaxis Markdown para tablas\n\n | Right | Left | Default | Center |\n |------:|:-----|---------|:------:|\n | 12 | 12 | 12 | 12 |\n | 123 | 123 | 123 | 123 |\n | 1 | 1 | 1 | 1 |\n \n : Título de la tabla\n:::\n::: {.column width=\"30%\"}\n\n**Genera lo siguiente:**\n\n| Default | Left | Right | Center |\n|---------|:-----|------:|:------:|\n| 12 | 12 | 12 | 12 |\n| 123 | 123 | 123 | 123 |\n| 1 | 1 | 1 | 1 |\n\n: Título de la tabla\n:::\n::::\n\n. . . \n\n\n- Como ves no es fácil-fácil generar tablas con Mardown pero, **puedes usar un generador de tablas**, por ejemplo [este](https://www.tablesgenerator.com/markdown_tables) o [este](https://tableconvert.com/markdown-generator). También se puede usar el [editor visual de Rstudio](https://quarto.org/docs/visual-editor/content.html#editing-tables)\n\n\n## (IV) Más elementos: Tablas con R\n\n- R tiene muchos paquetes para hacer tablas. Por ejemplo: `knitr::kable(df)`, o `gt::gt(df)`, o `DT::datatable(df)` y más. Si te interesa el tema de las tablas puedes visitar [esto](https://perezp44.github.io/intro-ds-21-22-web/tutoriales/tt_08_tablas-Rmarkdown.html) o [esto](https://rfortherestofus.com/2019/11/how-to-make-beautiful-tables-in-r/)\n\n\n\n::: {.cell}\n\n```{.r .cell-code}\ndf <- rio::import(\"./datos/matriculados.xlsx\")\ngt::gt(df)\n```\n\n::: {.cell-output-display}\n\n```{=html}\n\n \n
\n\n \n \n \n Nombre \n Nota \n Comentario \n Eva Maria \n10 \nvery good!! Pilar \n8 \nawesome!! Victor \n6 \nkeep going Enric \n7 \ngreat
\n\n- ¿Me acordaré de todas la marcas que hemos visto?\n\n. . . \n\n
\n\n🤔, ya te digo yo que **No**\n\n---\n\n## Editor Visual en RStudio\n\n- Desde 2020, concretamente desde la [versión v.1.4](https://posit.co/blog/rstudio-v1-4-preview-visual-markdown-editing/), **RStudio dispone de un editor visual**\n\n- El editor visual **facilita la inserción** de los **elementos** que hemos ido viendo durante el curso. Documentación oficial [aquí](https://quarto.org/docs/visual-editor/) y [aquí](https://docs.posit.co/ide/user/ide/guide/documents/visual-editor.html)\n\n\n. . . \n\n::: {columns}\n::: {.column width=\"68%\"}\n- Hasta ahora hemos trabajado en nuestros QMD en formato \"Source\", pero **podemos cambiar el modo de edición a \"Visual\"**, solo hay que seleccionar la pestaña adecuada:\n:::\n::: {.column width=\"28%\"}\n\n:::\n:::\n\n## Editor Visual: **Modo de edición**\n\n\n::: panel-tabset\n#### Edición en modo Visual:\n\n\n#### En modo Source:\n\n:::\n\n\n## Editor Visual: **Barra de herramientas**\n\n\nLa barra de herramientas del editor visual facilita el acceso a la mayoría de elementos que podemos insertar en nuestros documentos QMD:\n\n\n\n::: {layout-ncol=3}\n\n\n\n\n\n\n:::\n\n\n- Esto facilita la entrada a los documentos QMD\n\n- En algunos casos como imágenes y ciertas tablas, solo hay que arrastrar (o copiar y pegar) el contenido y aparecerá en nuestro documento fuente con la sintaxis adecuada.\n\n- Algunas referencias: [Exploring RStudio’s Visual Markdown Editor](https://posit.co/blog/exploring-rstudio-visual-markdown-editor/), [RStudio: el Nuevo Editor Visual](http://destio.us.es/calvo/Qtutoriales/SobreRRStudio/RStudioEditorVisual.html)\n\n# Aún quedan más elementos!! {.unnumbered background-color=\"#ebf5fb\"}\n\n\n{{< var lineanaranja >}}\n\n\n\n
\n\n- Pandoc fenced divs, Pandoc bracketed spans\n\n- Layout, CSS, ....\n\n- ... pero **lo dejamos para más adelante**\n\n\n\n# Intro a Slides con Quarto {background-color=\"#b8c2aa\"}\n\n\n{{< var lineanaranja >}}\n\n\n\n
\n\n. . .\n\n\n1. Quarto puede hacer slides de varios tipos (ppt, slidy, beamer)\n\n2. Nos centraremos en el formato **Revealjs**\n\n\n\n\n# Presentaciones con Quarto (generico) {.unnumbered background-color=\"#ebf5fb\"}\n\n\n\n{{< var lineanaranja >}}\n\n\n\n\n- Las slides se escriben en **QMD**, así que ya sabemos\n\n. . . \n\n\n- Hay algunas especificidades que vamos a ver\n\n- Veremos primero aspectos comunes a todos los formatos de slides\n\n\n- [Documentación oficial](https://quarto.org/docs/presentations/)\n\n\n\n--- \n\n## Creación de unas nuevas transparencias: {.smaller}\n\n. . . \n\n1. Has de seguir la siguiente ruta de menús: \n `File > New File > Quarto Presentation`. \n2. Se abrirá una interfaz gráfica donde podrás elegir entre **3 formatos de slides** (Revealjs, Beamer y ppt). También podrás poner título y autor. \n\n. . . \n\nEn imágenes:\n\n::: {layout-ncol=2}\n{height=280}\n\n{height=280}\n:::\n\n
\n\n\n--- \n\n## Creación de una nueva slide:\n\n\n- Los títulos de **primer nivel** crean una nueva slide (y tb una nueva sección)\n\n- Los títulos de **segundo** nivel crean una nueva slide. \n\n. . . \n\n- También se puede crear una nueva slide usando **3** o mas **guiones cortos**: `---`\n\n
\n\n. . . \n\n::: {.callout-warning collapse=\"true\" appearance=\"default\" icon=\"false\"}\n#### Extensión: modificar la generación de nuevas slides\n\nHay que usar `slide-level:` en el YAML. Por ejemplo:\n \n \n\n:::: {columns}\n::: {.column width=\"48%\"}\n\n``` yaml\n---\ntitle: \"Mis slides\"\nformat: \n revealjs: \n slide-level: 3\n---\n```\nCon este yaml, los títulos de tercer nivel (con `###`) también crearían una nueva slide\n:::\n::: {.column width=\"48%\"}\n```yaml\n---\ntitle: \"Mis slides\"\nformat: revealjs \n---\n```\n:::\n::::\n:::\n\n\n
\n\n\n---\n\n## Pausas en la presentación\n\n- Por defecto, los elementos de una slide se muestran todos de golpe\n\n. . . \n\n
\n\n> :warning: Para crear pausas en la presentación has de usar las siguientes marcas: . . . \n\n (es decir, tres puntos separados por espacios)\n \n
\n\n. . .\n\n- Por ejemplo:\n\n```default\n## Una nueva slide\n\nContenido nº 1\n\n. . . \n\nContenido nº 2\n\n```\n\n (para ver el Contenido nº 2 habrá que dar al avance página)\n\n\n---\n\n## Listas incrementales\n\n\n- Por defecto las listas se muestran de golpe\n\n. . . \n\n- Si quieres que se muestren elemento a elemento, puedes controlarlo desde el YAML:\n\n\n```yaml\ntitle: \"My Presentation\"\nformat:\n revealjs:\n incremental: true \n```\n\n. . . \n\n- Se puede ir **intercalando** listas incrementales, y no-incrementales, con los siguientes **fenced div's**:\n\n:::: {.columns}\n::: {.column width=\"45%\" .fragment}\n\nLista **incremental** :\n\n
\n\n```markdown\n::: {.incremental}\n- First we take Manhatan,\n- then we take Berlin\n:::\n```\n:::\n::: {.column width=\"45%\" .fragment}\n\nLista **no-incremental** :\n\n
\n\n``` markdown\n::: {.nonincremental}\n- First we take Manhatan,\n- then we take Berlin\n:::\n```\n:::\n::::\n\n---\n\n## Columas multiples {.smaller}\n\n:::: {.columns}\n::: {.column width=\"35%\"}\n- Como puedes ver, se puede generar contenido en **varias columnas**. Para ello hay que usar un **fenced div** con clase `columns`. \n:::\n::: {.column width=\"60%\"}\n> To put material in side by side columns, you can use a native div container with class .columns, containing two or more div containers with class .column and a width attribute. -- [Documentacion oficial](https://quarto.org/docs/presentations/#multiple-columns) de Quarto\n:::\n::::\n\n. . . \n\n- Por ejemplo:\n\n\n```markdown\n:::: {.columns}\n\n::: {.column width=\"40%\"}\nMi contenido en la primera columna\n:::\n\n::: {.column width=\"60%\"}\nContenido en la segunda columna\n:::\n\n::::\n\n```\n\n\n
\n\n\n\n# Revealjs slides {.unnumbered background-color=\"#ebf5fb\"} \n\n\n{{< var lineanaranja >}}\n\n\n\n
\n\n- [reveal.js](https://revealjs.com/) es un open source HTML presentation framework.\n\n- A mi me gustan: en mi opinión tienen unas cuantas ventajas\n\n- Documentación oficial [aquí](https://quarto.org/docs/presentations/revealjs/)\n\n- Listado (extenso) de opciones [aquí](https://quarto.org/docs/reference/formats/presentations/revealjs.html)\n\n\n\n\n---\n\n## Revealjs: primera slide \n\n- La primera slide **se crea automáticamente** [si pones un título en el YAML]{.underline} \n\n - En ese caso, la 1ª slide contendrá los metadatos: title, subtitle, author, institute, date \n \n. . . \n\n- La apariencia de la primera slide dependerá del tema elegido. **Listado de themes** [aquí](https://quarto.org/docs/presentations/revealjs/themes.html#using-themes).\n\n\n---\n\n## Revealjs: Content overflow\n\nSi el contenido que queremos poner no se ajusta a la slide, tenemos varias posibilidades:\n\n
\n\n. . . \n\n1. Usar la `.smaller` class al crear la slide: \n \n```markdown\n\n## Título de la slide {.smaller}\n\n```\n \n
\n \n. . . \n \n2. Modificar el YAML para hacer las slides \"scrollables\":\n \n \n```yaml\n---\ntitle: \"My Presentation\"\nformat:\n revealjs:\n scrollable: true\n--- \n```\n\n---\n\n## Revealjs: Slide background\n\nEn mi opinión las slides mejoran bastante estéticamente si en alguna de ellas cambiamos el fondo. La documentación está [aquí](https://quarto.org/docs/presentations/revealjs/#slide-backgrounds)\n\n\n. . . \n\n- Puedes **incorporar un fondo especifico a una slide**. Se pueden usar los siguientes elementos: **color**, **imagen**, **vídeo** e **iframe**. Por ejemplo:\n\n```markdown\n## Título de la slide {background-color=\"aquamarine\"}\n```\n\n. . . \n\n- Opciones más complejas:\n\n\n```markdown\n## Slide Title {background-video=\"video.mp4\" background-video-loop=\"true\" background-video-muted=\"true\"}\n\n## Slide Title {background-color=\"black\" background-image=\"https://placekitten.com/100/100\" background-size=\"100px\" background-repeat=\"repeat\"}\n\n## Slide Title {background-iframe=\"https://www.uv.es\"}\n```\n\n\n## Slide Backgrounds: ejemplo 1 (color) {background-color=\"aquamarine\"}\n\nPara poner un color de fondo:\n\n```markdown\n\n## Slide Backgrounds: ejemplo 1 (color) {background-color=\"aquamarine\"}\n\n```\n\n\n## Slide Backgrounds: ejemplo 2 (imagen) {background-image=\"imagenes/perro_blanco.jpg\" background-size=\"cover\" background-opacity=\"0.7\"} \n\nPara poner una imagen de fondo:\n\n```markdown\n\n## Slide Backgrounds: ejemplo 2 (imagen) {background-image=\"imagenes/perro_blanco.jpg\" background-size=\"cover\"}\n\n```\n\n\n## {background-image=\"https://images.unsplash.com/photo-1495640388908-05fa85288e61?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80\" background-size=\"contain\" background-position=\"left\"}\n\n::: columns\n::: {.column width=\"40%\"}\n:::\n\n::: {.column width=\"60%\"}\n### Se pueden hacer cosas muy chulas como:\n\n::: incremental\n::: r-fit-text\n\n- [Slides Emil Hvitfeldt](https://emilhvitfeldt.github.io/useR2022-textrecipes)\n\n- Parallax background. Documentación [aquí](https://quarto.org/docs/presentations/revealjs/advanced.html#parallax-background)\n\n- [Quarto iFrame Examples](https://emilhvitfeldt.github.io/quarto-iframe-examples/). El [repo](https://github.com/EmilHvitfeldt/quarto-iframe-examples)\n\n:::\n:::\n:::\n:::\n\n::: footer\nInspiración, vamos, copiado de
\n\n- El resultado es:\n\n::: {.panel-tabset}\n## Primer Tab\n\nContenido del primer Tab\n\n## Segundo Tab\n\nContenido del segundo Tab\n:::\n\n\n---\n \n## Revealjs: Transiciones\n\n- Documentación oficial [aquí](https://quarto.org/docs/presentations/revealjs/advanced.html#slide-transitions)\n\n+-------------+------------------------------------------------------------------------+\n| Transition | Description |\n+=============+========================================================================+\n| `none` | No transition (switch instantly) |\n+-------------+------------------------------------------------------------------------+\n| `fade` | Cross fade |\n+-------------+------------------------------------------------------------------------+\n| `slide` | Slide horizontally |\n+-------------+------------------------------------------------------------------------+\n| `convex` | Slide at a convex angle |\n+-------------+------------------------------------------------------------------------+\n| `concave` | Slide at a concave angle |\n+-------------+------------------------------------------------------------------------+\n| `zoom` | Scale the incoming slide so it grows in from the center of the screen. |\n+-------------+------------------------------------------------------------------------+\n \n\n. . .\n\n``` yaml\n---\ntitle: \"Presentation\"\nformat:\n revealjs:\n transition: slide #- transiciones de las slide: {none, fade, slide, convex, concave, or zoom}\n transition-speed: fast #- {default, fast, slow}\n---\n``` \n\n\n\n\n## Revealjs: tunear con **themes**\n\n- Ya sabemos que podemos cambiar la apariencia de las slides usando los **themes** disponibles en Quarto. **Listado de themes** [aquí](https://quarto.org/docs/presentations/revealjs/themes.html#using-themes).\n\n. . . \n\n- Para ello tenemos que incluir en el YAML el theme que queremos:\n\n```markdown\n---\ntitle: \"Presentation\"\nformat:\n revealjs: \n theme: dark\n---\n```\n\n
\n\n. . . \n\n- Además disponemos de muchos otros themes en **extensiones** en [la web de Quarto](https://quarto.org/docs/extensions/listing-revealjs.html) y en [Awesome Quarto](https://github.com/mcanouil/awesome-quarto#presentations)\n\n\n- Por ejemplo: los themes [4 estaciones](https://github.com/EmilHvitfeldt/quarto-revealjs-seasons), [Inversa](https://github.com/EmilHvitfeldt/quarto-revealjs-inverse), [Insper](https://github.com/padsInsper/quarto-insper-theme), ...\n\n\n---\n\n## **Ejemplos** de presentaciones {.smaller}\n\n
\n\n. . . \n\n- [Some good practices for research with R](https://www.good-practices.etiennebacher.com/#/title-slide)de Etienne Bacher, el repo [aquí](https://github.com/etiennebacher/good-practices)\n\n\n- [Debugging](https://rstats-wtf.github.io/wtf-debugging-slides/#/title-slide) de Shannon Pileggi, el repo [aquí](https://github.com/rstats-wtf/wtf-debugging-slides)\n\n- [The Genesis of Experimentation](https://emitanaka.org/slides/Ihaka2022/#/title-slide) de Emi Tanaka, el repo [aquí](https://github.com/emitanaka/talks/tree/master/Ihaka2022)\n\n- [ggdensity: Improved density visualization in R](https://jamesotto852.github.io/JSM-2022/#/) de James Otto y David Kahle, el repo [aquí](https://github.com/jamesotto852/JSM-2022)\n\n- [Extending ggplot2 with custom Geoms and Stats](https://jamesotto852.github.io/extending-ggplot2/#/) de James Otto, el repo [aquí](https://github.com/jamesotto852/extending-ggplot2)\n\n- [Quarto/RMarkdown - What’s Different?](https://laderast.github.io/qmd_rmd/#/title-slide), de TED Laderas. [Vídeo](https://www.youtube.com/watch?v=xC6I5OVOnKI)\n\n- [An Antarctic Tour of the Tidyverse](https://slides.silviacanelon.com/tour-of-the-tidyverse-v2/#/title-slide) de Silvia Canelon, el repo [aquí]()\n\n- [Hello Quarto](https://mine.quarto.pub/hello-quarto/#/hello-quarto-title) de Mine Çetinkaya-Rundel y Julia Stewart Lowndes, el repo [aquí](https://github.com/mine-cetinkaya-rundel/hello-quarto), [más cosas](https://mine-cetinkaya-rundel.github.io/quarto-tip-a-day/posts/31-hello-quarto/)\n\n- [Reproducible authoring with Quarto](https://mine-cetinkaya-rundel.github.io/2022-repro-toronto/#/title-slide) de Mine Çetinkaya-Rundel, el repo [aquí](https://github.com/mine-cetinkaya-rundel/2022-repro-toronto)\n\n- [What can I do with Quarto?](https://nrennie.rbind.io/talks/2022-october-oxford-r-user-group/slides.html#/title-slide) de Nicola Rennie, su web [aquí](https://nrennie.rbind.io/)\n\n- [Reproducible Publications w/ Python and Quarto](https://thomasmock.quarto.pub/python/#/TitleSlide) de Thomas Mock\n\n- [Improvements in text preprocessing using textrecipes](https://emilhvitfeldt.github.io/useR2022-textrecipes/#/section) de Emil Hvitfeldt\n\n- [The Happiest Notebooks on Earth](https://apreshill.github.io/happiest-notebooks-on-earth/#/title-slide) de Allison Hill\n\n- [Quarto Presentations](https://quarto.org/docs/presentations/revealjs/demo/#/title-slide) by Quarto team, el repo [aquí](https://github.com/quarto-dev/quarto-web/blob/main/docs/presentations/revealjs/demo/index.qmd). Documentación oficial [aquí](https://quarto.org/docs/presentations/revealjs/)\n\n- [Intro to Quarto](https://ivelasq.quarto.pub/intro-to-quarto/#/section) de Isabella Velásquez, el repo [aquí](https://github.com/ivelasq/2022-10-27_intro-to-quarto)\n\n\n- [Un buen post sobre Revealjs slides](https://meghan.rbind.io/blog/quarto-slides/) de Meghan Hall\n\n- [Data Science Portfolio with Quarto](https://deepshamenghani.quarto.pub/portfolio-with-quarto-workshop/#/title-slide) de Deepsha Menghani, el repo [aquí](https://github.com/deepshamenghani/Portfolio_DeepshaM). Vídeo [aquí](https://www.youtube.com/watch?v=xtSFXtDf4cM)\n\n- [05 - Presentations Making Slides with Code](https://rstudio-conf-2022.github.io/get-started-quarto/materials/05-presentations.html#/presentations) y [02 - Authoring Quarto](https://jthomasmock.github.io/quarto-2hr-webinar/materials/02-authoring.html#/authoring-quarto) de Thomas Mock. Slides que pertenecen al siguiente taller [Get started with Quarto](https://rstudio-conf-2022.github.io/get-started-quarto/)\n\n\n\n\n# Otros formatos {.unnumbered background-color=\"#ebf5fb\"} \n\n\n{{< var lineanaranja >}}\n\n\n\n- Beamer\n\n- Power Point\n\n- Slidy\n\n\n\n# Beamer slides {.unnumbered background-color=\"#ebf5fb\"} \n\n\n{{< var lineanaranja >}}\n\n\n\n---\n\n## Beamer slides\n\n- Beamer es un formato de slides, basadas en Latex, **muy popular en el mundo académico**\n\n. . .\n\n- Quarto puede hacer Beamer slides. Sólo hay que usar los menús o este yaml:\n\n\n```yaml\n---\ntitle: \"My Presentation\"\nformat: beamer\n```\n\n. . . \n\n- La apariencia visual de las slides vendrá determinada por el `theme` y el `colortheme`. los valores que usa por defeco Quarto no son muy chulos, así que hay que cambiarlos. [Aquí](https://hartwork.org/beamer-theme-matrix/) y [aquí](https://deic.uab.cat/~iblanes/beamer_gallery/) tienes ayuda para elegir el theme y colortheme. Por ejemplo:\n\n\n```yaml\n---\ntitle: \"Presentation\"\nformat: \n beamer: \n aspectratio: 32\n navigation: horizontal\n theme: metropolis\n colortheme: lily\n---\n```\n\n---\n\n\n## Beamer slides (documentación)\n\n. . . \n\n\n- [User Guide](https://ctan.fisiquimicamente.com/macros/latex/contrib/beamer/doc/beameruserguide.pdf) oficial de Beamer\n\n\n- Documentación oficial Beamer de Quarto [aquí](https://quarto.org/docs/presentations/beamer.html#overview)\n\n- Opciones de YAMl de Beamer en Quarto [aquí](https://quarto.org/docs/presentations/beamer.html#beamer-options)\n\n\n- [Beamer en RMD](https://bookdown.org/yihui/rmarkdown/beamer-presentation.html#beamer-presentation)\n\n- [Beamer en StackOverflow](https://stackoverflow.com/questions/tagged/beamer). Por ejemplo:\n\n - [Numeración de las slides como en Revealjs](https://stackoverflow.com/questions/74300235/frame-number-in-quarto-beamer-presentation)\n \n - [Justificar texto](https://es.stackoverflow.com/questions/587772/es-posible-modificar-la-alineaci%C3%B3n-de-un-p%C3%A1rrafo-en-una-presentaci%C3%B3n-beamer-pdf)\n\n\n\n\n\n",
"supporting": [
"slides_07b_intro-a-Quarto_files"
],
"filters": [
"rmarkdown/pagebreak.lua"
],
"includes": {
"include-after-body": [
"\n\n\n"
]
},
"engineDependencies": {},
"preserve": {},
"postProcess": true
}
} E Fy![X)#[u @ = A f i g - p e n g u i n s - 0 1 A - 1 . p n g PNG
IHDR @ > T< pHYs e IDATxy|UItH&DAqFET
2!
<,Ǝ,:È
(# ^AB'd$ u~R~sNUH} 0 F X `x , < @ X `n |tet[tյBθCTWW4=TVV
!RRR8QYYY^TBpƁp2~ 8DEE~8@Lv9QVVx o𬬬L `x , < @ X `x , < @ X `x , < @ X `x , n fWUXJ 83 ȉL^ H*< 1u2< `x , rq < $l t6 C ! ԍ - X `x , < @ X `x ,mt죦&mqKH- eq@ ?N;t;!yg<55r%i@R{L8Y#_,x[6 ɩWѭ A
_uuٳg4h# NG2jrٳBq~ctCt@̙3Bl=ԯ_?-- |>_yy"333===IGa -qLnJMMMMM5-vSKF}k0ˌvӧԯ)fr\.;Ap3()))n'NqƁl5+U Bx , %еc GɊehH1t 2r 0>lMr\hX^BƓ a9~?'' @qqv 表ddd$]eeeYY"+++33 C,o 5u<)dQ!|#8Gw 9Dw< [aU'3xcUaI ,b < @ *XB u Y h HYTڬ; 0&iXhͨ:Q7P9@ԁwp!COx ;9OW "Qy%(--999F7In;77W=xҸyy< ,++Bdeeeff tpdxKY%>VUX`t'ӵq
B ! I
x ; 3%ƛIrth} "< 0
`;
};
}
if( animateLists === true ) {
renderer.listitem = text => `${code}