my-slides.qmd

---
execute:
  echo: true
format:
  revealjs:
    output-file: "slides-template-quarto"
    width: 1245
    height: 700
    embed-resources: false
    preview-links: false
    toc: false
    menu: false
    controls: true
    slide-number: false
    transition: fade
    theme:
        - simple
        - style/style_background.scss
    auto-stretch: false
    center: true
filters: 
  - pyodide
---

## Use the arrows to navigate the presentation.

--- 

## { .custom-title }

This shows the .custom-title class defined on style/style_background.scss.
Any personalization should be applied directly there.

---

## { .custom-title }
::: {style="position: absolute; left: 700px; top: 550px; width:2000px; background-color: #ffffff; padding: 10px; border-radius: 5px;"}
[Some title]{style="font-size: 20px; margin: 0px;"} <br>
[Some author]{style="font-size: 25px;"}
:::

::: {.notes}
This are the speaker notes. They are not shown. Press "S" to activate them.
:::

---

## Requirements for conference slides

1. Slide theme & transitions
2. Slide creation
3. Text customization (color, size, fragments)
4. Control on text alignment
5. Images & videos
6. Columns
7. Export to pdf and html
8. Displaying and executing code
9. Speaker notes
10. Background customization

---

On quarto there are two important chars:

- Backtick (`) - Allow to define chars and blocks of markdown/code.
- Dots (`:`) - Allow to define blocks and pass them attributes.

---

## 1. Slide theme & transitions

Easy! Right on the YAML header:

```yaml
revealjs:
  ...
  transition: fade
  theme: simple
  ...
```

Transition options: fade, slide, convex, concave, zoom  

Theme options: simple, black, beige, blood, dark, default, league, moon, night, serif, simple, sky, solarized

---

## 2. Slide creation

Easy! Slides are separated by `---`.  

Titles are created with `#` and section titles with `##`, and so on.

```markdown
## A section without content

---

## Another slide with content

This is a very important content...
```

---

## 3. Text customization: color, size, etc.

Use markdown and standard html/css properties to customize text.

```markdown
[Text]{style="color: red"} can be [personalized]{style="font-size: 50px;"} 
with standard html/css properties
```

[Text]{style="color: red"} can be [personalized]{style="font-size: 50px;"} 
with standard html/css properties

---


## 3. Text customization: color, size, etc.

Use `incremental` and `fragment` to control the text flow.

::: {.incremental}
* Items
* Shown
* Incrementally
:::

You can [use]{.fragment} [fragments]{.fragment} [within]{.fragment} [incrementals]{.fragment}.

---

* First
* Second
* [Third]{.fragment}
* [Fourth]{.fragment}

(partially, and a slide without a title)

---

* [Fourth]{.fragment fragment-index=4}
* [Second]{.fragment fragment-index=2}
* [Third]{.fragment fragment-index=3}
* [First]{.fragment fragment-index=1}

(user defined order)

---

## 4. Control on text alignment: horizontal

Use text-align to control the text horizontal alignment: left, center, right.

::: {style="text-align: left"}
This is a left-aligned text.
:::

::: {style="text-align: center"}
This is a centered text.
:::

::: {style="text-align: right"}
This is a right-aligned text.
:::

---

## 4. Control on text alignment: vertical

<br><br><br><br><br>
I have not found a better way than just inserting a lot of line breaks: `<br>`

---

## 5. Images & videos

Use markdown to insert images and videos.

---

## 6. Columns

You can have multiple columns in a single slide, with different widths. 

::: columns
::: {.column width="60%"}
Some content:  

- markdown
- image
- video
- etc.
:::
::: {.column width="40%"}
Some content:  

- markdown
- image
- video
- etc.
:::
:::

---

## 7. Export to pdf and html

- The html is generated by default when rendering the slides. Make sure to define to include/not include the resources to make it self-contained.
- The pdf can be generated by opening the html file and pressing "E" to enable the print screen. Then, print the page and export as a pdf.

---

## 8. Displaying and executing code

You have 3 options:

- `python`
- `{python}`
- `pyodide-python`

## `python`

Just a regular block of markdown, highlighted with python syntax.  
The code must be wrapped between **&#96;&#96;&#96;python** and **&#96;&#96;&#96;**

```python
def fib(a,b):
  return a+b

x = fib(2,2)
print(x)
```

It is not executed. It might contain errors!

---

## `{python}`

Executes the code when rendering on a python environment, and shows the results.  
The code must be wrapped between **&#96;&#96;&#96;{python}** and **&#96;&#96;&#96;**

```{python}
def fib(a,b):
  return a+b

x = fib(2,2)
print(x)
```

It's not interactive, but it's 100% python!  
It will be run before rendering the slides - if there are errors, there will be consequences...

---

## `{pyodide-python}`

It's interactive using pyscript (javascript port).  
Setting up non-standard libraries can be tricky.  
It must be wrapped between **&#96;&#96;&#96;{pyodide-python}** and **&#96;&#96;&#96;**

```{pyodide-python}
def fib(a,b):
  return a+b

x = fib(2,2)
print(x)
```

It will be executed when rendering the slides.

---


## pyodide considerations

Must add 2 lines to the yaml header:

```yaml
filters: 
  - pyodide
```

And must install with quarto:

```bash
quarto add coatless-quarto/pyodide
```

It's great to demo a library or function, and change some parameters while presenting.  

It'st not a programming environment: large blocks or codes or complex libraries might break.

---

## 9. Speaker notes

To open the speaker notes, press "S" on the slides.

---

## 10. Background customization

You can customize the background of the slides, using regular html/css.

Example:

```html
<style>
.slide-background-content {
    background-image: none !important;
    background-color: #AA0000 !important;
    color: white !important;   
    }
</style>
```

---

## 10. Background customization

This can be conveniently done in a css file, loaded into the yaml header, used when needed on a particular slide.

```yaml
    theme:
        - simple
        - style/style_background.scss
```