Elementos útiles para crear un documento html quarto

Documento en el que iré recopilando elementos de quarto que facilitan la creación de páginas html especialmente y que pueden utilizarse en la construcción de mi página web. Se puede usar como una recopilación de Snippets.
R Markdown
Quarto
Quarto-html
Autor

Pedro L. Luque

Fecha de Publicación

9 septiembre 2022

Primeras referencias:

Crear paneles o tabset

Obtenido de: Github: quarto-web


::: panel-tabset
### jolla

![](https://quarto.org/docs/websites/images/about-jolla.png){.border fig-alt="Screenshot of About page with jolla template. Photo is a centered circle above a heading with the author's name. There is a centered paragraph below the header, a separator line, and then buttons for twitter and github centered at the bottom."}

### trestles

![](https://quarto.org/docs/websites/images/about-trestles.png){.border fig-alt="Screenshot of ..."}

### solana

![](https://quarto.org/docs/websites/images/about-solana.png){.border fig-alt="Screenshot of About page ..."}

### marquee

![](https://quarto.org/docs/websites/images/about-marquee.png){.border fig-alt="Screenshot of About page with marquee template..."}

### broadside

![](https://quarto.org/docs/websites/images/about-broadside.png){.border fig-alt="Screenshot of About page with broadside template..."}

:::

Texto que sigue a los elementos colocados en los paneles.

El resultado es el siguiente:

Screenshot of About page with jolla template. Photo is a centered circle above a heading with the author's name. There is a centered paragraph below the header, a separator line, and then buttons for twitter and github centered at the bottom.

Screenshot of ...

Screenshot of About page ...

Screenshot of About page with marquee template...

Screenshot of About page with broadside template...

Texto que sigue a los elementos colocados en los paneles.

A tener en cuenta

  • Con ### titulo se inicia un nuevo panel o pestaña.

  • Se inicia con: ::: panel-tabset y finaliza al encontrarse los primeros :::. En lugar de 3 veces : se puede aumentar el número en las dos posiciones: :::: (4 o más).

Cómo centrar elementos

<center>

Texto centrado.

</center>

El resultado es el siguiente:

Texto centrado.

Hacer referencias entre elementos del documento

Cómo crear notas llamativas o callouts. Uso de css personalizado y bootstrap


:::{.callout-note} 
Note that there are five types of callouts, including: 
`note`, `tip`, `warning`, `caution`, and `important`. 
:::

El resultado es el siguiente:

Nota

Note that there are five types of callouts, including: note, tip, warning, caution, and important.

Otras variantes:


:::{.callout-note}
Note that there are five types of callouts, including:
`note`, `warning`, `important`, `tip`, and `caution`.
:::

:::{.callout-tip}
## Tip With Caption

This is an example of a callout with a caption.
:::

:::{.callout-caution collapse="true"}
## Expand To Learn About Collapse

This is an example of a 'folded' caution callout that can be expanded by the user. You can use `collapse="true"` to collapse it by default or `collapse="false"` to make a collapsible callout that is expanded by default.
:::

Cuya salida es:

Nota

Note that there are five types of callouts, including: note, warning, important, tip, and caution.

Tip With Caption

This is an example of a callout with a caption.

This is an example of a ‘folded’ caution callout that can be expanded by the user. You can use collapse="true" to collapse it by default or collapse="false" to make a collapsible callout that is expanded by default.

Se pueden utilizar para añadir ejercicios y la solución oculta inicialmente.


## Ejercicio 1 

El enunciado te pregunta varios apartados:

a. Calcula con R la siguiente expresión matemática:

   $$
   3\times 13^2+\frac{29}{32} + \left(\sqrt{23}\right)^{\ln(72)}
   $$


b. Calcula la suma de los cubos de los 10 primeros números.


:::{.callout-note collapse="true" icon="false" appearance="simple" }
## Ver las soluciones

a. Con R sería:

   ```{r}
   3 *  13^2 + (29/32) + (sqrt(23))^(log(72))
   ```

b. Con R sería

   ```{r}
   sum((1:10)^3)
   ```


:::

Se muestra lo siguiente:

Ejercicio 1

El enunciado te pregunta varios apartados:

  1. Calcula con R la siguiente expresión matemática:

    \[ 3\times 13^2+\frac{29}{32} + \left(\sqrt{23}\right)^{\ln(72)} \]

  2. Calcula la suma de los cubos de los 10 primeros números.

  1. Con R sería:

    3 *  13^2 + (29/32) + (sqrt(23))^(log(72))
    [1] 1324.165

  2. Con R sería

    sum((1:10)^3)
    [1] 3025

Otro ejemplo que redefine los tamaños de fuente:


```{css, echo=FALSE}
.fuenteunem2x {
  font-size: 2em !important;
}
```


::: {.callout-note collapse="true" icon="false"}
## Ver solución

::::: {style="font-size: 1.5em"}
Con R sería:
:::::

```{r}
#| code-fold: true
#| attr-source: .fuenteunem2x
#| attr-output: .fuenteunem2x
3 *  13^2 + (29/32) + (sqrt(23))^(log(72))
```


:::

Que produce lo siguiente:

Con R sería:

Código 
3 *  13^2 + (29/32) + (sqrt(23))^(log(72))
[1] 1324.165

Más cosas, usando clases css definidas en el fichero: “libs/bootstrap/bootstrap.min.css” (llevan un “.” delante de sus definiciones).


Esto cambia [prueba]{.font-monospace .fw-bold .fs-2 .bg-success .bg-opacity-50 .rounded-3 .p-sm-2} mucho cuando sigues [escribiendo]{.text-danger}.

color de fondo:
bg-success, bg-warning, bg-danger, .bg-primary, .bg-secondary
bg-opacity-10, bg-opacity-25, bg-opacity-50, bg-opacity-75
rounded-1, rounded-5
padding:
p-sm-1, p-sm-2, p-sm-3
tamaño fuentes (mayor a menor):
fs-1, fs-2, ..., fs-5
fst-normal, fst-italic, fw-light, fw-lighter, fw-normal, fw-bold, fw-bolder
font-monospace
texto:
text-danger, text-warning
margin bottom: mb-1, mb-3
margin top: my-1, my-3
margin rigth: mr-1
margin left: ml-1
botones: 
btn-links, btn btn-primary, btn-outline-primary (sin fondo)


::: {.btn-links .mb-3}
<a class="btn btn-primary my-1 mr-1" href="./extraerfotos_codigoR.zip" target="_blank" rel="noopener">
Descargar codigo fuente </a>
:::

<a class="btn btn-primary my-1 mr-1" href="./extraerfotos_codigoR.zip" target="_blank" rel="noopener">
Descargar codigo fuente </a>
<a class="btn btn-secondary my-1 mr-1" href="./extraerfotos_codigoR.zip" target="_blank" rel="noopener">
Descargar codigo fuente </a>

Se produce:

Esto cambia prueba mucho cuando sigues escribiendo.

Descargar codigo fuente

Descargar codigo fuente Descargar codigo fuente

Incluir otros ficheros quarto en uno principal o padre

Con ayuda del shortcode: {{< include _hijo.qmd >}}, el cual incluiría en el lugar en el que se encuentra este “shortcode” el fichero quarto llamado: “_hijo.qmd” (no es obligatorio el “_” inicial).

Se puede mostrar “markdown” que contenga “shortcode” del siguiente modo:


```{.markdown shortcodes="false"}
page 1

{{< pagebreak >}}

page 2
```

Nota: se define el shortcode “pagebreak” para insertar de forma genérica (para cualquier tipo de salida) y salto de página.

Se puede utilizar para añadir ejercicios-enunciados-soluciones que se encuentran en ficheros externos con enunciado+solución o enunciado y solución por serparado.


# Incluir fichero con enunciado y solución





# Incluir fichero con enunciado y luego incluir un fichero con solución





<!-- {{< include solucion_00a.qmd >}} -->
  • Nota: leer la siguiente url en el que se explica cómo hacer ejercicios, ejemplos, definiciones, … y hacer referencias a ellos: url stackoverflow

El siguiente código de ejemplo explica cómo se puede hacer:



The first example is @exm-1.

::: {#exm-1}
This should be Example 1.1.
:::

It is followed by the first exercise, [Exercise @exm-2]

::: {#exm-2 .custom}
This should be Exercise 1.2.
:::


:::: {.callout-note}

::: {#exm-3}
This should be Example 1.3
:::

::::

:::: {.callout-tip}

::: {#exm-4 .custom}
This should be Exercise 1.4
:::

::::

Please refer to the @exm-3

Please refer to the [Exercise @exm-4]

Lo que produce el siguiente resultado:

The first example is Ejemplo 1.

Ejemplo 1 This should be Example 1.1.

It is followed by the first exercise, Exercise 2

Ejemplo 2 This should be Exercise 1.2.

Nota

Ejemplo 3 This should be Example 1.3

Tip

Ejemplo 4 This should be Exercise 1.4

Please refer to the Ejemplo 3

Please refer to the Exercise 4

Nota: añadiendo las siguientes dos líneas en el fichero “_quarto.yaml”:

_quarto.yaml
callout-appearance: simple
callout-icon: false

Cómo activar el uso de emoticonos en los documentos

Insertar en la cabecera yaml del documento la siguiente línea:

from: markdown+emoji

Y se podrán utilizar:

:arrow_down:, :wave:, :clock9:, :heavy_check_mark:, :clipboard:

Que produce:

⬇️, 👋, 🕘, ✔️, 📋

En la siguiente página se pueden consultar todos los valores disponibles: chuleta web

Utilizando estilos personalizados

Para resaltar el código se pueden utilizar diferentes temas. Se activa en la cabecera yaml del siguiente modo:

highlight-style: solarized

Los temas disponibles son: arrow, pygments, tango, espresso, zenburn, kate, monochrome, breezedark, haddock, atom-one, ayu, breeze, dracula, github, gruvbox, monokai, nord, oblivion, printing, radical, solarized, y vim.

El siguiente código:


1 [2 3 4 5 6]{style="opacity:0.25"}


::: {style="text-align: center"}
R is an open-source ([**free**]{style="color:#cc0000"}!) scripting language for working with data
:::


::: {style="font-size: 0.75em"}
```{r}
#| echo: false
knitr::kable(mtcars |> head(6))
```
:::


[Tools > Global Options]{style="color:#cc0000; border-style: solid; border-color: blue; border-width: 3px; border-radius: 10px; background-color: lightblue; padding: 5px;"}



```{=html}
<style>
details > summary {
  padding: 4px;
  width: 200px;
  background-color: #eeeeee;
  border: none;
  box-shadow: 1px 1px 2px #bbbbbb;
  cursor: pointer;
}

details > p {
  background-color: #eeeeee;
  padding: 4px;
  margin: 0;
  box-shadow: 1px 1px 2px #bbbbbb;
}
</style>
```

<br>
<br>

<details>
  <summary>Epcot Center</summary>
  <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>


```{=html}
<style>
.cajakbd {
  color:#cc0000; 
  border-style: solid; 
  border-color: blue; 
  border-width: 3px; 
  border-radius: 10px; 
  background-color: 
  lightblue; padding: 5px;
}
</style>
```

Algunas de las más [habituales son]{.cajakbd}.


::: {.callout-important}
Usar "style" dentro de un chunk de código ".r" que no se evalúa.
```{.r style="font-size: 2em"}
    sqrt,abs,
    sin,cos,tan,asin,acos,atan,atan2,
    log,log10,log(x,base), exp,
    round(x, n), ceiling(), floor(), trunc()
```    
:::

Produce lo siguiente:

1 2 3 4 5 6

R is an open-source (free!) scripting language for working with data

mpg cyl disp hp drat wt qsec vs am gear carb
Mazda RX4 21.0 6 160 110 3.90 2.620 16.46 0 1 4 4
Mazda RX4 Wag 21.0 6 160 110 3.90 2.875 17.02 0 1 4 4
Datsun 710 22.8 4 108 93 3.85 2.320 18.61 1 1 4 1
Hornet 4 Drive 21.4 6 258 110 3.08 3.215 19.44 1 0 3 1
Hornet Sportabout 18.7 8 360 175 3.15 3.440 17.02 0 0 3 2
Valiant 18.1 6 225 105 2.76 3.460 20.22 1 0 3 1

Tools > Global Options



Epcot Center

Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.

Algunas de las más habituales son.

Importante

Usar “style” dentro de un chunk de código “.r” que no se evalúa.

    sqrt,abs,
    sin,cos,tan,asin,acos,atan,atan2,
    log,log10,log(x,base), exp,
    round(x, n), ceiling(), floor(), trunc()
Importante

Definir en el fichero styles.css

En la cabecera yaml se incluye:

  revealjs:
    css: styles.css

y el fichero “styles.css” contiene por ejemplo:


/* css styles */

.cajakbd {
  color:#cc0000; 
  border-style: solid; 
  border-color: blue; 
  border-width: 3px; 
  border-radius: 10px; 
  background-color: 
  lightblue; padding: 5px;
}

/* usa: [hola]{.cajakbd} */

Sobre iconos: academicons

Esta extensión te permite usar academicons en tus documentos Quarto HTML. Permite usar el siguiente shortcode: {{< ai >}}:

  • Obligatorio <icon-name>:

{{< ai <icon-name> >}}
  • Opcional <size=...>:

{{< ai <icon-name> <size=...> >}}

Por ejemplo:

Shortcode Icon
{{< ai arxiv >}}

{{< ai google-scholar >}}

{{< ai open-access >}}

{{< ai open-access size=5x >}}

Obtenido con el código:


| Shortcode | Icon |
|------------------------------------|--------------------------------|
| `{{< ai arxiv >}}` |  |
| `{{< ai google-scholar >}}` |  |
| `{{< ai open-access >}}` |  |
| `{{< ai open-access size=5x >}}` |  |

Sobre iconos fontawesome

{{< fa envelope >}}
{{< fa circle-info >}}
{{< fa brands github >}}
{{< fa battery-half size=2xl >}}

Produce lo siguiente:

, , ,

Nota: Para mostrar como se escriben los shortcodes, colocarlos con triples llaves en un chunk de código markdown.

Esta extensión permite usar fuentes de iconos: “font-awesome icons” en documentos Quarto HTML y PDF. Escribiendo un shortcode: {{< fa >}}

  • Obligatorio <icon-name>:

    {{< fa <icon-name> >}}

  • Opcional <group>, <size=...>, and <title=...>:

    {{< fa <group> <icon-name> <size=...> <title=...> >}}

Por ejemplo:

Shortcode Icono
{{< fa thumbs-up >}}

{{< fa folder >}}

{{< fa chess-pawn >}}

{{< fa brands bluetooth >}}

{{< fa brands twitter size=2xl >}} (HTML only)

{{< fa brands github size=5x >}} (HTML only)

{{< fa battery-half size=Huge >}}

{{< fa envelope title="An envelope" >}}

Específico para transparencias “Revealjs”

Más información en:

---
title: "Título"
author: "Pedro L. Luque"
format: revealjs
---

## Slide 1

- Paso 1
- Paso 2

## Slide 2

1. Hola

---

Continua en otra slide sin título

Cómo añadir las flechas para controlar la navegación

controls: true

Cómo conseguir que se vean en dispositivos móviles

Obligar a que se incluyan todos los recursos en el fichero html (incompatible con la opción: chalkboard: true actualmente):

embed-resources: true

Nota: sin embargo, si la página web usa “https://”, no es necesario utilizar “embed-resources: true” y sí se puede usar “chalkboard”.

Cómo hacerlo incremental o pausa con los elementos de una lista


::: {.incremental}
- Eat spaghetti
- Drink wine
:::


::: {.nonincremental}
- Eat spaghetti
- Drink wine
:::


## Slide with a pause

content before the pause

. . .

content after the pause

Hacer elementos más pequeños o scrolables


## Slide Title {.smaller}

## Slide Title {.scrollable}

O también en cabecera yaml:

---
format:
  revealjs:
    smaller: true
    scrollable: true
---

Añadir notas para el presentador

Se activan al pulsar la letra “s”.


## Slide with speaker notes

Slide content

::: {.notes}
Speaker notes go here.
:::

Añadir notas en la transparencia (dos modos)

## Slide Title

- Green ^[A footnote]
- Brown
- Purple

::: aside
Some additional commentary of more peripheral interest.
:::

También se pueden llevar todas al final de las transparencias (aunque al pasar el cursor por footnote se mostrarán encima):

---
format:
  revealjs:
    reference-location: document
---

Cómo añadir los números de transparencia

Ver más: https://quarto.org/docs/presentations/revealjs/presenting.html#slide-numbers

slide-number: true     # c/t, c, h/v, h.v
show-slide-number: all # all, print, speaker

Presentar código y resultados paso a paso


```{r}
#| echo: true
#| output-location: column-fragment  # fragment, column, column-fragment, slide
library(ggplot2)
ggplot(airquality, aes(Temp, Ozone)) + 
  geom_point() + 
  geom_smooth(method = "loess")
```

Teclas para navegar en las transparencias

Las combinaciones de teclas básicas para navegar son las siguientes:

Acción Teclas
Next slide → SPACE N
Previous slide ← P
Navigate without fragments Alt → Alt ←
Jump to first/last slide Shift → Shift ←

Para entrar en modo pantalla completa pulsar la tecla: F.

Nota: Se ha usado aquí <kbd>P</kbd>, pero esto no funciona en documentos: “revealjs” (parece).

Más información

Cómo mostrar las opciones del chunk utilizados al mostrar código

Nota: para que se muestre el chunk de código de un lenguaje utilizar la siguiente secuencia: `r''```{r} o poner r entre dobles llaves: {r} (si es necesario también argumentos del chunk: {r echo=TRUE}).


```{r}
#| echo: true
#| output-location: column-fragment  # fragment, column, column-fragment, slide
library(ggplot2)
ggplot(airquality, aes(Temp, Ozone)) + 
  geom_point() + 
  geom_smooth(method = "loess")
```

Cómo resaltar algunas líneas de código


```{.python code-line-numbers="1,4|6-8"}
import numpy as np
import matplotlib.pyplot as plt

r = np.arange(0, 2, 0.01)
theta = 2 * np.pi * r
fig, ax = plt.subplots(subplot_kw={'projection': 'polar'})
ax.plot(theta, r)
ax.set_rticks([0.5, 1, 1.5, 2])
ax.grid(True)
plt.show()
```

Cómo resaltar el estilo del código en la cabecera yaml

Más información

Cómo cambiar el color de fondo de una transparencia (webs, videos, …)


## Slide Title {background-color="aquamarine"}

Ver más en: https://quarto.org/docs/presentations/revealjs/#slide-backgrounds

  • Poner un imagen como fondo

## Slide Title {background-color="black" background-image="https://placekitten.com/100/100" background-size="100px" background-repeat="repeat"}

This slide's background image will be sized to 100px and repeated.
  • Poner un iframe (página web por ejemplo) como fondo

## Slide Title {background-iframe="https://example.com"}

Por ejemplo, el siguiente código:


## Slide Title {background-iframe="http://destio.us.es/calvo" background-opacity=0.3}

[Cuando escribes cosas en rojo se ven más]{style="color: green;" .absolute top="50%" left="40%"}

Produjo la siguiente transparencia (página web de fondo con una opacidad de 0.3, donde 0 es transparente)

Nota importante: Usar en la cabecera yaml del formato: “revealjs” la siguiente línea: preload-iframes: false, ya que de no usarlo al activar la presentación se abre automáticamente la página web utilizada en una pestaña nueva.

  • Poner un vídeo como fondo

## Slide Title {background-video="video.mp4" background-video-loop="true" background-video-muted="true"}

This slides's background video will play in a loop with audio muted.
  • Sin título

## {background-color="aquamarine"}

(A slide with no title)

## {background-color="black" background-image="https://placekitten.com/100/100" background-size="100px" background-repeat="repeat"}

(Another slide with no title)

Ver los enlaces a páginas web en modo vista previa (en transparencia)


[Preview](http://destio.us.es/calvo){preview-link="true"}

[NoPreview](https://example.com){preview-link="false"}

O activar para todos los enlaces en la cabecera yaml:

format:
  revealjs:
    preview-links: true # auto, false

Jugando con la posición absoluta de gráficos


![](image1.png){.absolute top=200 left=0 width="350" height="300"}

![](image2.png){.absolute top=50 right=50 width="450" height="250"}

![](image3.png){.absolute bottom=0 right=50 width="300" height="300"}

Más información en: url

Añadiendo videos (revealjs y html) con la extension videos


{{< video "https://youtu.be/wo9vZccmqwc" width="400" height="300" >}}

---

<center>

{{< video "http://destio.us.es/calvo/Qtutoriales/SobreRRStudio/VideosSobreUsoRRStudio/CreacionProyectoRStudio-hevcmp4.mp4" width="400" height="300" >}}

</center>


## {background-video="http://destio.us.es/calvo/Qtutoriales/SobreRRStudio/VideosSobreUsoRRStudio/CreacionProyectoRStudio-hevcmp4.mp4" background-video-loop="true" background-video-muted="true"}

Hacer zoom en una parte de una transparencia

Se puede pulsar: “Option + click” sobre una parte de la transparencia y se producirá un zoom sobre esa parte. Vuelve a pulsar: “Option + click” para volver al zoom original.

Mostrar u ocultar contenido de forma condicionada


::: {.content-visible when-format="html"}

Solo aparecerá en HTML.

:::

:::::: {.content-hidden when-format="html:js"}

Solo se ocultará en "html*" y revealjs.

::::::

Se puede usar: when-format o unless-format.

Alias Formats
latex latex, pdf
pdf latex, pdf
epub epub*
html html, epub, revealjs
html:js html*, revealjs
markdown markdown, commonmark, gfm, markua

Transparencias que pasan automáticamente (modo kiosco)

auto-slide: 5000
oop: true

Es posible exigir que una transparencia pase después de un tiempo establecido:


## Slide Title {autoslide=2000}

Uso de la pizarra y poder pintar en transparencias

Ver más: https://quarto.org/docs/presentations/revealjs/presenting.html#chalkboard, donde podrá verse cómo borrar lo dibujado, y más cosas.

chalkboard: true

Transiciones

Ver más en opciones avanzadas de “Revealjs”: https://quarto.org/docs/presentations/revealjs/advanced.html

transition: concave  # fade, slide, concave, zoom y mas
background-transition: fade  # fade, slide, concave, zoom

Se puede utilizar también para transparencias concretas:


## Slide Title {transition="fade" transition-speed="fast"}

## Slide Title {transition="fade-in slide-out"}

Ocultar transparencias


## Slide Title {visibility="hidden"}

Posición absoluta de gráficos


![](image1.png){.absolute top=200 left=0 width="350" height="300"}

![](image2.png){.absolute top=50 right=50 width="450" height="250"}

![](image3.png){.absolute bottom=0 right=50 width="300" height="300"}

Más sobre posicionar elementos en transparencias


::: {.absolute top="10%" left="0" width="1031" height="529"}
::: {style="text-align: center"}
![](montajePlantillaTFEv13.png)
:::
:::

::: {.absolute top="66%" left="55%"}
::: {style="color: #cc0000"}
project files are here
:::
:::

Produciría (se vería en slides revealjs)

project files are here

Ver más

Mostrar elementos o gráficos unos encima de otros


::: {.r-stack}
![](image1.png){.fragment width="450" height="300"}

![](image2.png){.fragment width="300" height="450"}

![](image3.png){.fragment width="400" height="400"}
:::

Ajustar el texto para rellenar la transparencia automáticamente

::: {.r-fit-text}
Big Text
:::

Nota: no parece funcionar si ponemos una lista.

Ajustar al tamaño necesario para que entre en una transparencia


## Slide Title

Here is an image:

![](image.png){.r-stretch}

Some text after the image.

Animar texto y código


## {auto-animate="true"}

```r
# Fill in the spot we created for a plot
output$phonePlot <- renderPlot({
  # Render a barplot
})
```

## {auto-animate=true}

```r
# Fill in the spot we created for a plot
output$phonePlot <- renderPlot({
  # Render a barplot
  barplot(WorldPhones[,input$region]*1000, 
          main=input$region,
          ylab="Number of Telephones",
          xlab="Year")
})
```

Fragmentos (para ir mostrando elementos en distinto orden y posición)

Ver más sobre fragmentos


::: {.fragment}
Fade in
:::

::: {.fragment .fade-out}
Fade out
:::

::: {.fragment .highlight-red}
Highlight red
:::

::: {.fragment .fade-in-then-out}
Fade in, then out
:::

::: {.fragment .fade-up}
Slide up while fading in
:::

Controlar el orden:


::: {.fragment fragment-index=3}
Appears last
:::

::: {.fragment fragment-index=1}
Appears first
:::

::: {.fragment fragment-index=2}
Appears second
:::

Efecto Parallax-background

parallax-background-image: montajePlantillaTFEv13.png
parallax-background-size: "2100px 900px"
parallax-background-horizontal: 200
parallax-background-vertical: 50
resources: 
- "montajePlantillaTFEv13.png"

Hay que añadir el “resources”.

Sobre temas

Ver más

theme: dark

Opciones disponibles:

  • beige
  • blood
  • dark
  • default
  • league
  • moon
  • night
  • serif
  • simple
  • sky
  • solarized

Varios

Modo lectura

En el fichero “_quarto.qmd” insertar:


---
website:
  reader-mode: true

---

De: https://quarto.org/docs/websites/website-navigation.html#reader-mode

Insertar un botón al inicio de una página para descargar o enlazar con algo

En el fichero “*.qmd” insertar:


::: {.btn-links .mb-3}
<a class="btn btn-outline-primary my-1 mr-1" href="./extraerfotos_codigoR.zip" target="_blank" rel="noopener">
Descargar codigo fuente </a>
:::

El resultado que se mostraría sería el siguiente:

Descargar codigo fuente

Cómo añadir una fecha al fichero “qmd” con hora incluida

Se puede añadir una “hora:minutos” a continuación de la fecha, que va en formato: “AAAA/MM/DD”:

---
date: 2022/09/12 09:33
---

O también:

---
date: 2022-09-12 09:33
---

Cómo mejorar el trabajo con el código en Quarto

A continuación pueden verse algunas de las opciones disponibles para presentar código en Quarto:

format:
  html:
    code-overflow: wrap
    code-line-numbers: true
    code-fold: true
    #code-summary: 
    code-tools: true
    # code-tools:
    #   source: true
    #   toggle: true
    #   caption: "Código Asociado"

O también:

code-overflow: wrap
code-line-numbers: true
code-fold: true
#code-summary: 
code-tools: true

Cómo poner un fondo coloreado al título de un post o tutorial

Utilizar en la cabecera yaml del post o tutorial las siguientes definiciones:

title-block-banner: "#EEF3F9"  # para el color de fondo: #EEF3F9, #0000BB
title-block-banner-color: "#000000"  # para el texto  #000000 #FFFFFF

Ver un ejemplo en: Post: “Actualización de Plantilla TFE versión 1.3, donde se ha puesto un fondo de color azul y un color de letra blanco.

Cómo colocar elementos en una página en varias columnas

Método 1: “.columns”


:::::::::::::: {.columns}

::: {.column width="10%"}
:::

::: {.column width="80%"}

<center>
[**NOVEDADES: Actualización de la Plantilla TFE a la versión 1.3 (actualizada el 19-09-2022)**](/Qpost/2022-09-19_actualizacion-plantilla-tfe-version-1-3/)
</center>

:::


::: {.column width="10%"}
:::

::::::::::::::

Produce la siguiente salida:

NOVEDADES: Actualización de la Plantilla TFE a la versión 1.3 (actualizada el 19-09-2022)

Método 2: “layout-ncol”

Información obtenida de: https://quarto.org/docs/authoring/cross-references.html#figures


:::: {#fig-elephants layout-ncol=2}

![Surus](https://quarto.org/docs/websites/images/about-jolla.png){#fig-surus}

::: {.bloque}
Se pueden escribir cosas diferentes también en texto, aunque hay que tener cuidado de que
no haya separación de una línea en blanco o que esté sin saltos de línea (wrap). O usar un bloque con 3 dobles puntos usando un estilo `:::{.bloque}`, aunque layout-ncol debería tener 4 dobles puntos.

![Hanno](https://quarto.org/docs/websites/images/about-solana.png){#fig-hanno}

Aquí se verían dos párrafos.
:::

Tipos de presentaciones
::::

See @fig-elephants for examples. In particular, @fig-hanno.

Produce la siguiente salida:

(a) Surus

Se pueden escribir cosas diferentes también en texto, aunque hay que tener cuidado de que no haya separación de una línea en blanco o que esté sin saltos de línea (wrap). O usar un bloque con 3 dobles puntos usando un estilo :::{.bloque}, aunque layout-ncol debería tener 4 dobles puntos.

(b) Hanno

Aquí se verían dos párrafos.

Figura 1: Tipos de presentaciones

See Figura 1 for examples. In particular, Figura 1 (b).

Nota: se pueden utilizar valores mayores que 2, como por ejemplo: “layout-ncol=3”

Cómo colocar elementos en distintas posiciones de una página (margin, screen, body, …)

Redirecciones o uso de “aliases”

Se crea la dirección normal, pero con los alias se crean ficheros en las localizaciones indicadas (si se “/”) ficheros que provocan la redirección a la dirección normal.

Ejemplos de uso, suponiendo que el fichero en el que se incluye es “renamed-page.qmd”, ese fichero apuntará a “page.html”:

---
title: "Renamed Page"
aliases:
  - page.html
---

Se pueden poner varias direcciones:

title: "Renamed Page"
aliases: 
  - /slide21.html
  - slide22.html

También en jerarquías de ficheros:

---
title: "Learning More"
aliases:
  - overview.html#learning-more
---

Más sobre cambiar estilos de código fuente y código salida

Obtenido de: https://issuehint.com/issue/quarto-dev/quarto-cli/1581 y algunas pruebas mías.


---
title: "Untitled"
format: html
keep-md: true
highlight-style: solarized   # espresso
---

```{css, echo = FALSE}
pre.out {
  background-color: lightgreen;
  font-size: 2em;
}
pre.sourceCode.src {
  background-color: lightblue;
  font-size: 3em;
}

.cajakbd {
  color: blue; 
  border-style: solid; 
  border-color: #aaaaaa; 
  border-width: 1px; 
  border-radius: 8px; 
  background-color: #eeeeee; 
  padding: 2px;
}

/* usa: [hola]{.cajakbd} */


.fuenteunem {
  font-size: 4.5em !important;
}

.fuenteunem2 {
  font-size: 2.5em !important;
}


```


# Head 

```{r, class.output = "out", class.source = "src"}
1 + 1
```


```{r}
#| class-output: out
#| class-source: src
2 + 2
```



```{r}
#| attr-output: .fuenteunem
#| attr-source: .fuenteunem2
3+3
```


Esto último era algo así:

````` markdown
```{r}
#| attr-output: #some-id .my-class
#| attr-source: .foo attr="value"
1+1
```

`````

Y el documento html resultante es el siguiente:

Más referencias


:::{.callout-note} 
Note that there are five types of callouts, including: 
`note`, `tip`, `warning`, `caution`, and `important`. 
:::
  • Nota 1: Los ficheros que su nombre empieza por un guión bajo no se renderizan. Por ejemplo: _index.md, _index.qmd, _ejemplo1.qmd.
  • Nota 2: Se pueden añadir carpetas a la estructura del proyecto (aunque no estén referenciadas en el fichero: “index.qmd” del proyecto) y se renderizarán todos los ficheros con extensión: “.qmd”, “.Rmd”, “.md” y se copiarán al “_site”. Además se copiarán todos los ficheros que se refieran dentro de los ficheros renderizados.
  • Nota 3: en el siguiente ejemplo “descargas/ejemplo2.qmd” se indica que se suba el fichero “quarto-1.1.189-macos.pkg” a la carpeta “descargas” y además subirá el fichero “R-4.0.3.pkg” (ambos ficheros están en la carpeta en la que se encuentra: “ejemplo2.qmd”). También sube el fichero “../ficheros/rAMPL_instalado_macM1_rosetta_r411.zip” y lo coloca el fichero zip en la carpeta “ficheros” (si no existía la crea) en “_site”
    • Ver también para buscar en carpetas diferentes ficheros: “resource-path”.
---
resources:
  - "quarto-1.1.189-macos.pkg"
  - "../ficheros/rAMPL_instalado_macM1_rosetta_r411.zip"
---

Hola amigo cómo te encuentras


Descarga el siguiente fichero si quieres instalar R para Mac: [descarga](./R-4.0.3.pkg).