El objetivo de esta sección es proporcionar una breve primera introducción a R y RStudio para personas que no han tenido contacto previo con estos programas y explicitar la forma que tendremos de interactuar con ellos; es decir, la forma de trabajar con ellos (workflow).
El curso es una introducción a la Ciencia de Datos: haremos diversos análisis con datos y para ello utilizaremos R. R será el programa que hará los cálculos, gráficos, informes, pero interactuaremos con R, le daremos las ordenes a R, a través de otro programa: RStudio. Así que tendremos que instalar los 2 programas. Por ello, en la web del curso tienes un fichero donde se explica como hacerlo: concretamente aquí.
Aquí tienes un articulo que explica, con mucho detalle, como empezar a trabajar con R: instalación, configuración, paquetes, etc…
Se puede trabajar con R/RStudio de varias formas. Nosotros
trabajaremos, casi siempre, con Rprojects. Enseguida
diremos qué son los Rprojects, pero de momento podemos pensar que son
carpetas donde se almacenan los ficheros necesarios para hacer un
análisis de datos.
Dentro de esas carpetas o Rprojects tendremos distintos
tipos de ficheros: ficheros de datos, imágenes etc… y unos ficheros,
llamados habitualmente scripts que contendrán las
instrucciones que queramos que sean ejecutadas por R/RStudio. Bien, pues
esos scripts o ficheros de ordenes pueden ser de varios tipos.
Concretamente, durante el curso utilizaremos 2 tipos de ficheros para
darle las ordenes a R:
ficheros .R, yficheros Rmarkdownoficheros .Rmd.
Lo normal es que nunca hayas oído hablar de todo esto, así que al principio te sonará complicado, pero en nada te parecerá lo más natural del mundo. Bird by bird!!!
1. R
Ya hemos hablado de R, pero …
¿Qué es R?
Ya lo habéis visto mientras hacíamos algún ejemplo, pero para los nuevos: R es un lenguaje de programación y un entorno para el análisis estadístico y gráfico. Se puede utilizar para muchas cosas ya que es un lenguaje de programación, pero principalmente se utiliza en el campo de la estadística y la ciencia de datos; de hecho, R fue inicialmente creado en 1993 por dos estadísticos de la Universidad de Auckland: R. Ihaka y R.Gentleman1. A partir de 1997 el desarrollo de R (o base-R) es gestionado por un grupo de programadores conocido como “The R-core team”; pero actualmente, el entorno o ecosistema R es el resultado de la colaboración de toda una comunidad de usuarios que extiende las utilidades de base-R mediante la creación de nuevos paquetes y funciones.
R forma parte del sistema GNU y se distribuye bajo la licencia GNU GPL por lo que los usuarios tenemos la libertad de usar, estudiar, compartir (copiar) y modificar el software; es decir, R es software libre. Además de software libre, R es gratuito y multiplataforma: está disponible para Windows, Macintosh y GNU/Linux.
La página web oficial de R se llama: The R Project for Statistical
Computing. Allí podrás encontrar toda la información y documentación
oficial acerca de R. Aunque si alguna vez la necesitas, se puede
consultar desde R con la función help.start() o, en un
formato visualmente más agradable, en este repositorio de Collin Fay
un destacado miembro de la actual comunidad R. Si quieres ver las
personas que forman parte del R core-team o que han contribuido al
desarrollo de R no tienes mas que teclear en R
contributors().
R proporciona un amplio abanico de herramientas estadísticas y gráficas (modelos lineales y no lineales, tests estadísticos, análisis de series temporales, algoritmos de clasificación y agrupamiento, etc.). Como R también es un lenguaje de programación, permite que los usuarios lo extiendan definiendo sus propias funciones y paquetes. De hecho, actualmente R se ha convertido de un proyecto colaborativo y abierto en el que sus usuarios pueden publicar paquetes que extienden su configuración básica. Para darte una idea de lo prolífica y colaborativa que es la comunidad R puedes visitar estos 2 proyectos: R-bloggers y R-Weekly. Precisamente estos 2 aspectos (abundancia de paquetes y comunidad de usuarios) son claves en el éxito de R
Ya hemos dicho que R (junto con sus paquetes) puede implementar una gran variedad de técnicas estadísticas y gráficas. Existe un repositorio oficial de paquetes: Comprehensive R Archive Network o CRAN. CRAN alcanzó los 10.000 paquetes en enero de 2017, y actualmente, julio de 2019, tiene 14.553 paquetes. Además, existen muchos más paquetes en repositorios como Bioconductor, Github y otros.
Instalación de R
Obviamente, para usar R y sus paquetes tenemos que instalarlo
primero. Para ello “solo” tienes que ir a CRAN y descargar la distribución
de R adecuada para tu sistema operativo. Obviamente mejor la última
versión. En el momento de re-escribir estas notas la última versión es
R-4.1.1 llamada “Kick Things” released on 2021/08/10.
No te va a a hacer falta pero por si acaso, aquí tienes un vídeo de 1:30 donde se explica de manera sencilla como instalar R.
2. RStudio
¿Qué es RStudio?
Pues es un programa que utilizaremos para interactuar con R. Las instrucciones que queramos dar a R para que las ejecute se las daremos a través de RStudio. La razón es que la interfaz de usuario (GUI, Graphical User Interface) de R no es muy amigable ni versátil, así que interactuaremos con R a través de RStudio.
RStudio es un programa que nos permitirá interactuar con R de forma más amigable, además de facilitar muchas de las tareas de programación y análisis de datos en R; es decir, RStudio es una GUI (Graphical User Interface). En realidad, RStudio es más que una GUI, es una IDE, un entorno de desarrollo integrado para R, en inglés ‘integrated development environment’ o IDE.
El actual científico jefe de RStudio es Hadley Wickham. Wickham es uno de los más prolíficos desarrollador de paquetes para R y creador de un nuevo estilo de programar y analizar datos en R conocido como ‘tidyverse’. Muchos de los packages que utilizaremos en el curso han sido desarrollados por él y el equipo de RStudio.
Instalación de RStudio
La versión de escritorio de RStudio también es libre y gratuita. Se puede descargar aquí. Tienes que descargarte el ‘installer’ adecuado para tu sistema operativo.
Se puede trabajar perfectamente con las opciones por defecto de RStudio, pero os recomiendo cambiar algunas opciones, así que vamos a configurar RStudio.
Configurando RStudio
Está sección no es obligatoria, solo que es recomendable configurar
las opciones de RStudio. ¿Cómo? En RStudio, sigue está ruta de menús:
Tools > Global OPtions...
Se abrirá una ventana (que puedes ver abajo) con las opciones de
configuración de RStudio. De momento vamos sólo a tocar la categoría que
ves en la imagen; es decir, R General. Tienes que hacer dos
cosas:
desmarcar todas las casillas (quitarles los ticks)
Es importante, poner
Neveren la casilla donde pone “Save workspace to .RData on exit”.
Al final, en mi ordenador, la ventana con las opciones de
R General queda como:
En tu ordenador debe quedar todo igual excepto la caja de texto. El texto de la caja le dice a RStudio donde se guardarán los archivos que vayamos generando; es decir, indica el directorio de trabajo por defecto. Como mi sistema operaivo es Linux y habitualmente trabajo en el escritorio de mi PC, en la imagen de abajo pone “~/Escritorio”, si mi sistema operativo fuese Windows pondría algo como “C:/Users/perezp/Desktop”. Te recomiendo trabajar sobre el escritorio o Desktop, pero puedes seleccionar la carpeta en la que más cómoda trabajes2.
Ya explicaré en clase porqué seleccionamos estas opciones en RStudio.
Aún más configuración de RStudio
- En RStudio sigue está ruta de menús:
Tools > Global OPtions...y seleccionaCode. Intenta dejar la opciones de la pestañaEditingcomo ves en la imagen de abajo. Concretamente lo que más me interesa es que esté marcada la opciónInsert spaces for tab
- En RStudio sigue está ruta de menús:
Tools > Global OPtions...y seleccionaCode. Ahora intenta dejar las opciones de la pestañaSavingcomo ves en la imagen de abajo. Lo más importante es que en la caja de textoDefault text encodingponga:UTF-8. Esto evitará que tengamos problemas con la codificación de loa caracteres, por ejemplo con la eñe o con las tildes.
Ya tenemos R y RStudio instalados y configurados, así que vamos a empezar a toquetear RStudio.
Conociendo la interfaz de RStudio
Durante el curso vamos a utilizar R para hacer análisis estadísticos pero lo vamos a hacer a través de RStudio, así que el primer paso es familiarizarnos un poco con la interfaz de RStudio. Para acostumbrase a R y RStudio lo mejor es la práctica, pero si os hiciese falta, aquí tenéis un fantástico libro para habituarse a trabajar con R y RStudio.
Al abrir RStudio verás que al principio tiene 3 paneles, aunque enseguida abriremos un cuarto panel. La consola es el panel de la izquierda. Cuando tengamos 4 paneles la consola será el panel situado izquierda-abajo. Podemos pensar que la consola es lo más parecido a R, ya que en la consola se pueden ejecutar instrucciones de R directamente.
Cuando abras RStudio veras lo siguiente:
Consola (izquierda)
Environment/History (arriba-derecha)
Files/Plots/Packages/Help (abajo-derecha)
Ya sabemos que el panel de la izquierda es la consola. En la consola
se ve un mensaje de bienvenida que nos dice que versión de R estamos
usando y alguna cosa más. Al final del texto aparece el símbolo
>. A este símbolo se le conoce como prompt y
simplemente nos indica que el intérprete de R, que R, está listo para
ejecutar nuestras instrucciones.
¿Cómo le damos las instrucciones u ordenes a R? La forma más
inmediata es escribiendo las ordenes en la consola, después del prompt
(>). Por ejemplo, si escribimos en la consola
2+2 y presionamos Enter, R ejecutará la
instrucción y nos devolverá el resultado.
A veces usaremos la consola para ejecutar alguna instrucción, pero en general ejecutaremos las instrucciones a través de un “script”. Una razón para no usar la consola es que trabajar en la consola es muy limitado ya que las instrucciones se han de introducir una a una. Otra razón es que queremos tener un registro con todas las instrucciones que ejecutemos para poder replicar nuestro análisis en otro momento; así que lo habitual es trabajar con scripts o ficheros de instrucciones.
Un script no es más que un fichero de texto con extensión
.R en el que escribiremos las instrucciones que queramos
que R ejecute.
Vamos a crear nuestro primer script. Para ello tienes que seguir esta
ruta de menús en RStudio: File > New File > R Script.
Visualmente:
Cuando pinches con el ratón en R Script se abrirá en
RStudio un nuevo panel, el cuarto, arriba a la izquierda.
Visualmente:
Este cuarto panel (arriba-izquierda) en realidad es un editor de texto. En él podemos escribir las instrucciones que queramos que ejecute R. Por ejemplo, fíjate en la siguiente imagen lo que he escrito en el panel arriba-izquierda:
He escrito estas cuatro lineas:
# mi primer script de R
2 + 2
5 * 6
400/2Escribe tú también (o copia y pega) estás cuatro lineas de texto en el editor (arriba-izquierda) de tu Rstudio.
R ejecutará, cuando se lo indiquemos, las lineas de instrucciones una a una.
Una vez hayas escrito o pegado esas 4 lineas en RStudio, verás que la
primera linea es diferente: lo más evidente es que está en color verde,
pero en realidad lo importante es que comienza con el símbolo
#. Este hecho, está marcando/diciendo a R que esa linea es
un comentario para los humanos, para nosotros, no es código R y por
tanto R no la ejecutará.
En un script sólo se pueden escribir 2 cosas:
comentarios (si la linea comienza con
#). R no las ejecutaráinstrucciones R (no comienzan con
#). R las ejecutará si están escritas en R; es decir, si siguen las reglas del lenguaje R. Si están mal escritas R nos devolverá un mensaje de error. Tenemos que aprender R ya!!!
Hemos escrito cuatro lineas en nuestro script y ahora queremos que R las ejecute. R ejecutará, cuando se lo indiquemos, las lineas de instrucciones una a una.
Para ejecutar una linea, situamos el cursor en ella y pulsamos Crtl + Enter.
Please, sitúa el cursor en la primera linea y pulsa Crtl +
Enter. Observa qué ha ocurrido. Le hemos dicho a R que
ejecute la primera linea, pero como esta primera linea comienza con
#, R la ha interpretado (correctamente) como un comentario
y, por supuesto, no la ha ejecutado, por lo que ha pasado a la segunda
linea, y esta vez sí que la ejecuta. Como la segunda linea no comienza
con #, R la interpreta como una instrucción de R y, sí la
entiende (si las has escrito correctamente siguiendo la sintaxis o
lenguaje de R), ejecutará la instrucción. R entiende que significa
2 + 2, así que ejecuta la instrucción y nos devuelve el
resultado en la consola.
En la imagen de abajo yo ya he ejecutado la instrucción
2 + 2. R nos muestra el resultado en la consola: primero
nos muestra, en azul, la instrucción que ha ejecutado; es decir
> 2 + 2 y luego nos nos muestra, en negro, el resultado
de la ejecución de la instrucción; es decir [1] 4. Ya
veremos que significa el [1] de la linea de resultados.
Es más fácil hacerlo que contarlo, aunque puede que te atasques en alguna cosa, normal!!. Por ejemplo, si en lugar de poner el cursor en la segunda linea, señalas o subrayas solo parte de la linea, entonces, seguramente R no te entenderá. Ahora te toca a ti: please, ejecuta la tercera linea de tu script.
¿Cómo le decimos a R que ejecute la tercera linea 5 * 6?
Cuando lo hacíamos en la consola simplemente había que pulsar
Enter, pero ahora estamos trabajando en un script: hay que
situar el cursor en la linea que queremos ejecutar y darle a
Crtl + Enter. R ejecutará la instrucción y nos
devolverá el resultado en la consola.
Enseguida aprenderemos más instrucciones o funciones de R, ahora solo estamos intentando familiarizándonos con el interfaz de RStudio. Ya sabemos como crear un fichero con instrucciones de R (ó script) y como ejecutar esas instrucciones.
Lo normal es que guardes tus scripts en un archivo por si tuvieses
que volver a correr las mismas instrucciones más adelante. Para guardar
tus instrucciones en un fichero sólo tienes que seguir esta ruta de
menús en RStudio: File > Save as ...
Tendrás que elegir un nombre para tu script y decidir en que carpeta
de tu ordenador guardarlo. Si decides que tu script se llame
my_script_01, se creará un fichero (donde tú hayas
decidido) llamado my_script_01.R. Fíjate que la extensión
del archivo es .R, está extensión
identifica los scripts o ficheros con instrucciones de R.
Esto vas a acabar entendiéndolo en poco tiempo, pero cuanto antes lo entiendas mejor: damos las ordenes/instrucciones a R por escrito, generalmente usamos “scripts”; es decir, escribimos las instrucciones en un fichero con extensión .R. Para ejecutar las ordenes que hemos escrito en nuestro fichero R hemos de, linea por linea, teclear: Crtl + Enter. Si la orden tiene sentido, es decir, si R entiende la orden, la ejecutará y te mostrará el resultado en la Consola.
Bien, ya sabemos hacer que R ejecute nuestras instrucciones: podemos ejecutar ordenes en la Consola (con Enter) o en un script (Crtl + Enter). Usaremos la consola a veces, muchas veces trabajaremos con scripts o ficheros .R pero, poco a poco, acabaremos trabajando de otra forma.
Como queremos que nuestros análisis sean reproducibles, habitualmente
trabajaremos con Rprojects y con
ficheros .Rmd. Sí!!, en lugar de con
ficheros .R (o scripts) trabajaremos con
ficheros **Rmarkdown** ó ficheros .Rmd. Ya lo
veremos, pero antes tendremos que familiarizarnos un poco más con el
lenguaje R. De momento seguimos con el interfaz de RStudio.
Los 4 paneles de RStudio
Vamos a mirar con un poco más de detalle los 4 paneles de RStudio. Como puedes ver en la imagen de abajo, generalmente, a la izquierda encontramos la consola y el editor de scripts. Ya sabemos que desde estos dos paneles podemos dar instrucciones a R para que las ejecute.
Veamos un poco los 2 paneles de la derecha. Podemos pensar que son
paneles auxiliares, nos ayudarán en determinadas tareas. Estos dos
paneles de la derecha tienen cada uno varias pestañas. Por ejemplo, el
panel que está en la posición arriba-derecha tiene cuatro pestañas:
Environment y 3 más3. Enseguida veremos que al interactuar con R
iremos creando objetos (por ejemplo un vector o una matriz o una tabla
de datos). Estos objetos estarán guardados en la memoria del ordenador
pero los “veremos”, aparecerán en la pestaña Environment.
En la pestaña History tendremos un listado con las
instrucciones de R que hayamos ejecutado previamente en nuestra actual
sesión de R (por ejemplo 2 + 2). Otro ejemplo: a veces en
nuestro análisis con R haremos un gráfico o varios, podremos ver el
gráfico en la pestaña Plots en el panel situado
abajo-derecha.
#[ @ / ] ] A h t m l . j s o n {)
}}\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# 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
}
} /r Fy![X)#[ @ {
A 5 4 5 b 5 a 3 c Fy![X)#[ @ O A b 6 e 0 b 9 c c ( Fy!["W)#[ @ - - A I N D E X ' Fy![:"W)#[ @ $3 A 8 2 0 2 e 1 4 7 {"headings":["que-haremos-en-esta-sección","forma-de-trabajar-con-el-entorno-r","qué-tipos-de-documentos-haremos","algunos-ejemplos","primeras-ideas-sobre-quarto","qué-es-quarto","cómo-interactuaremos-con-quarto","visualmente","visualmente-pero-más-realista","source-code-escrito-en-qmd","output","primeros-pasos-con-quarto","trabajaremos-usando-proyectos","qué-es-un-qproject","cómo-se-crea-un-qproject","dos-cosillas-sobre-los-qprojects","creación-de-documentos-.qmd","vamos-a-jugar-un-rato-con-rstudio","lo-que-ya-sabemos","para-poder-practicar-lo-que-vayamos-aprendiendo","qmarkdown-guía-rápida-.qmd","los-documentos-.qmd-tienen-3-4-partes","un-ejemplo","source-code-escrito-en-qmd-1","output-1","i-yaml","i-el-encabezamiento-o-yaml-header","ejemplos-de-yaml","ii-chunks","ii-code-blocks-o-chunks-código-r","ii-chunks-los-chunks-pueden-tener-opciones.","ii-chunks-opciones-de-los-chunks-en-el-yaml","por-ejemplo","qmd-chunk-options-en-el-chunk","qmd-chunk-options-en-el-yaml","ii-chunks-otras-opciones-de-quarto-para-los-chunks","ii-código-inline-code","por-ejemplo-1","iii-texto","iii-texto-qué-narices-es-esto-de-markdown","iii-texto-ideas-básicas-otra-vez","iii-texto-dando-formato-al-texto","iii-texto-dando-formato-al-texto-1","iii-texto-notas-al-píe","iii-texto-títulos","header-1","header-2","header-3","header-4","header-5","header-6","iii-texto-creando-listas","iii-texto-párrafos","dentro-de-un-párrafo","iii-texto-lineas-espacios","iv-más-elementos","iv-más-elementos-hyper-links","iv-más-elementos-imágenes","iv-más-elementos-imágenes-generadas-con-código","iv-más-elementos-tablas-con-markdown","sintaxis-markdown-para-tablas","iv-más-elementos-tablas-con-r","iii-más-elementos-ecuaciones","rstudio-visual-editor","editor-visual-en-rstudio","editor-visual-modo-de-edición","editor-visual-barra-de-herramientas","aún-quedan-más-elementos","intro-a-slides-con-quarto","presentaciones-con-quarto-generico","creación-de-unas-nuevas-transparencias","creación-de-una-nueva-slide","pausas-en-la-presentación","listas-incrementales","columas-multiples","revealjs-slides","revealjs-primera-slide","revealjs-content-overflow","revealjs-slide-background","slide-backgrounds-ejemplo-1-color","slide-backgrounds-ejemplo-2-imagen","section","se-pueden-hacer-cosas-muy-chulas-como","revealjs-tabsets","revealjs-transiciones","revealjs-tunear-con-themes","ejemplos-de-presentaciones","otros-formatos","beamer-slides","beamer-slides-1","beamer-slides-documentación"],"entries":[{"order":{"number":1,"section":[2,2,0,1,0,0,0]},"caption":"","key":"fig-00"},{"order":{"number":2,"section":[8,7,0,0,0,0,0]},"caption":"Gráfico con datos de pingüinos","key":"fig-penguins-01"}]} {"headings":["intro","estructura-del-taller","objetivos-del-taller","beneficios-de-tener-un-blog","importante","primeras-ideas","estructura-de-una-web","ejemplos-de-blogs-hechos-con-quarto","más-opciones","ejemplos-de-webs-hechas-con-quarto","creación-de-un-blog-básico-con-quarto","a-crear-la-carpeta-o-qproject-desde-rstudio","b-crear-la-carpeta-desde-la-terminal","c-usando-un-qproject-ya-creado-con-rstudio-cloud","contenido-del-qproject","contenido-del-qproject-tras-procesar-el-blog","ver-el-blog-en-local","contenido-de-index.qmd","alojando-el-blog","tuneado-básico-del-blog","archivo-_quarto.yml","section","archivo-index.qmd","archivo-about.qmd","archivo-styles.css","práctica-tutorial-nº-2","convertir-el-blog-en-web-personal","workflow-cómo-crear-un-post","donde-están-los-posts-del-blog","contenido-de-cada-subcarpeta-de-.posts","escribiendo-posts-practicando-con-quarto","ficheros-.qmd","yaml","yaml-ideas-importantes","el-yaml-de-un-post-se-puede-especificar-en-3-niveles","yaml-tal-como-lo-tenemos-ahora","yaml-nivel-proyecto-opciones-en-_quarto.yml","un-ejemplo-completito-de-_quarto.yml","yaml-nivel-carpeta","yaml-nivel-carpeta-1","yaml-nivel-documento","texto-o-narrativas","texto-o-narrativas-1","chunks","chunks-1","principales-diferencias-con-.rmd","chunks-2","elementos-básicos-para-escribir","elementos-básicos-para-escribir-1","más-elementos-para-escribir","más-elementos-para-escribir-1","veamos-algunos-de-estos-elementos-con-un-poco-de-detalle.","layouts","imágenes","extensiones","shortcodes","faltan-2-elementos","contenido-para-sustituir-en-.postsmy-segundo-postindex.qmd","tuneado-del-blog","intro-1","utilizando-opciones-del-yaml","documentación-oficial","sobre-opciones-disponibles-en-los-yamls","algunas-opciones-de-yaml","algunas-opciones-de-yaml-lang","hagamos-algunos-cambios","otras-opciones-para-tunear-desde-el-yaml","utilizando-css","utilizando-sass","publicando-el-blog","fin"],"entries":[]} {
"xaringan_slides/slides_07b_intro-a-Quarto.qmd": {
"slides_07b_intro-a-Quarto.html": "545b5a3c"
},
"xaringan_slides/05_primer_web.qmd": {
"05_primer_web.html": "8202e147"
},
"xaringan_slides/slides_07c_webs-con-quarto.qmd": {
"slides_07c_webs-con-quarto.html": "b6e0b9cc"
}
} {"headings":["intro","estructura-del-taller","objetivos-del-taller","beneficios-de-tener-un-blog","importante","primeras-ideas","estructura-de-una-web","ejemplos-de-blogs-hechos-con-quarto","más-opciones","ejemplos-de-webs-hechas-con-quarto","creación-de-un-blog-básico-con-quarto","a-crear-la-carpeta-o-qproject-desde-rstudio","b-crear-la-carpeta-desde-la-terminal","c-usando-un-qproject-ya-creado-con-rstudio-cloud","contenido-del-qproject","contenido-del-qproject-tras-procesar-el-blog","ver-el-blog-en-local","contenido-de-index.qmd","alojando-el-blog","tuneado-básico-del-blog","archivo-_quarto.yml","section","archivo-index.qmd","archivo-about.qmd","archivo-styles.css","práctica-tutorial-nº-2","convertir-el-blog-en-web-personal","workflow-cómo-crear-un-post","donde-están-los-posts-del-blog","contenido-de-cada-subcarpeta-de-.posts","escribiendo-posts-practicando-con-quarto","ficheros-.qmd","yaml","yaml-ideas-importantes","el-yaml-de-un-post-se-puede-especificar-en-3-niveles","yaml-tal-como-lo-tenemos-ahora","yaml-nivel-proyecto-opciones-en-_quarto.yml","un-ejemplo-completito-de-_quarto.yml","yaml-nivel-carpeta","yaml-nivel-carpeta-1","yaml-nivel-documento","texto-o-narrativas","texto-o-narrativas-1","chunks","chunks-1","principales-diferencias-con-.rmd","chunks-2","elementos-básicos-para-escribir","elementos-básicos-para-escribir-1","más-elementos-para-escribir","más-elementos-para-escribir-1","veamos-algunos-de-estos-elementos-con-un-poco-de-detalle.","layouts","imágenes","extensiones","shortcodes","faltan-2-elementos","contenido-para-sustituir-en-.postsmy-segundo-postindex.qmd","tuneado-del-blog","intro-1","utilizando-opciones-del-yaml","documentación-oficial","sobre-opciones-disponibles-en-los-yamls","algunas-opciones-de-yaml","algunas-opciones-de-yaml-lang","hagamos-algunos-cambios","otras-opciones-para-tunear-desde-el-yaml","utilizando-css","utilizando-sass","publicando-el-blog","fin"],"entries":[]} } Fy![y&WFy![/ @ ʆ A 8 B E 3 A 8 9 B T Fy![XfYFy![# @ / A 5 0 5 1 C 4 7 9 i Fy![R"WFy![| @ A s h a r e d E Fy![I$W)#[ @ ׯ A r m d - o u t p u t s Fy![I$W)#[ @ : A s a v e d _ s o u r c e _ m a A r k e r s 8 Fy![y&WFy![. @ A b i b l i o g r a p h y - i n A d e x Fy![y&WFy![/ @ 8 A c t x ׅ Fy![y&WFy![/ @ >Y A e x p l o r e r - c a c h e ^ Fy![y&WFy![/ @ 4 A j o b s Fy![y&WFy![C @ 4` A p c s \ Fy![y&WFy![/ @ cN A p r e s e n t a t i o n p Fy![y&WFy![/ @ e A p r o f i l e s - c a c h e Fy![y&WFy![C @ - A s o u r c e s Fy![y&WFy![/ @ A A t u t o r i a l } Fy![y&WFy![/ @ X A v i e w e r - c a c h e ~/Escritorio/BigData_23-24/intro-ds-23-24-slides/xaringan_slides/slides_07a_rmarkdown.html
~/Escritorio/BigData_23-24/intro-ds-23-24-slides/ss_06_ggplot2/slides_06_ggplot2_B.html
~/Escritorio/BigData_23-24/intro-ds-23-24-slides/ss_06_ggplot2/slides_06_ggplot2_C.html
~/Escritorio/BigData_23-24/intro-ds-23-24-slides/xaringan_slides/slides_04_cargar-datos.html
~/Escritorio/BigData_23-24/intro-ds-23-24-slides/xaringan_slides/slides_05_data-munging.html
{"active_set":"","sets":[]} Fy![I$W)#[ @ G A f i l e s - p a n e . p p e r !h Fy![I$W)#[ @ g A s o u r c e - p a n e . p p e A r ^ Fy![I$W)#[ @ A w i n d o w l a y o u t s t a A t e . p p e r Fy![I$W)#[ @ s 9 9 A w o r k b e n c h - p a n e . A p p e r {
"sortOrder": [
{
"columnIndex": 1,
"ascending": false
},
{
"columnIndex": 2,
"ascending": true
}
],
"path": "~/Escritorio/BigData_23-24/intro-ds-23-24-slides/xaringan_slides"
} {
"activeTab": -1
} {
"left": {
"splitterpos": 264,
"topwindowstate": "HIDE",
"panelheight": 623,
"windowheight": 661
},
"right": {
"splitterpos": 396,
"topwindowstate": "MINIMIZE",
"panelheight": 623,
"windowheight": 661
}
} {
"TabSet1": 0,
"TabSet2": 4,
"TabZoom": {}
} Fy![y&WFy![D @ 4 A p e r Nb Fy![y&WFy![D @ 5 A p r o p 6 Fy![y&WFy![D @ * A t W Fy![y&WFy![D @ * A u !p Fy![H$W)#[G @ | 6 6 A 0 6 B B 6 B F C Fy![H$W)#[5 @ E3 6 6 A 1 3 A F C 8 2 E Fy![H$W)#[, @ x 6 6 A 2 0 8 F F 0 B D ˵ Fy![H$W)#[
@ p0 6 6 A 2 E B C 6 C 4 6 H Fy![D$W)#[ @ ϟ m m A 6 0 2 7 2 C D 1 VM Fy![ I$W)#[ @ 6 6 A 7 A B F 1 B 6 3 HO Fy![H$W)#[4 @ A5 6 6 A 8 6 0 F A 9 2 1
^ Fy![PF$W)#[` @ 4; A A 9 6 0 9 1 9 B [ Fy![H$W)#[L @ 6 6 A B B B D 2 8 7 E Fy![XH$W)#[C @ q/ 6 6 A B E A 5 9 3 4 9 H Fy![QH$W)#[ @ a A E 2 F 9 E 2 9 D Fy![I$W)#[\ @ O 6 6 A F 7 C 7 9 D F A Fy![ I$W)#[v @ W W A I N D E X {
"source_window_id": "",
"Source": "Source"
} {
"source_window_id": "",
"Source": "Source"
} {
"source_window_id": "",
"Source": "Source"
} {
"source_window_id": "",
"Source": "Source"
} {
"source_window_id": "",
"Source": "Source",
"cursorPosition": "74,73",
"scrollLine": "70"
} {
"source_window_id": "",
"Source": "Source"
} {
"source_window_id": "",
"Source": "Source"
} {
"source_window_id": "",
"Source": "Source",
"docOutlineVisible": "1",
"docOutlineSize": "134",
"cursorPosition": "790,0",
"scrollLine": "790"
} {
"source_window_id": "",
"Source": "Source"
}