# Diaporama
Les diaporamas sont construits avec la technologie open source [Reveal.js](https://revealjs.com/)
## Exemple de diaporamas
::::{grid}
:gutter: 3
:::{grid-item-card} Possibilités d'un carnet
+++
([carnet source](../notebooks/possibilites.ipynb))
:::
:::{grid-item-card} Équations Lotka-Volterra
+++
([carnet source](../notebooks/lokta_volterra_plotly.ipynb))
:::
:::{grid-item-card} Analyse de la COVID-19
+++
([carnet source](../notebooks/covid_19.ipynb))
:::
::::
::::{grid}
:gutter: 3
:::{grid-item-card} Archive ouverte HAL
+++
([carnet source](../notebooks/archive_hal.ipynb))
:::
:::{grid-item-card} Diagrammes Mermaid
+++
([carnet source](../notebooks/mermaid.ipynb))
:::
:::{grid-item-card} Intégration Matlab
+++
([carnet source](../notebooks/matlab.ipynb))
:::
::::
::::{grid}
:gutter: 3
:::{grid-item-card} Enseigner avec Jupyter
+++
([carnet source](../notebooks/enseignement.ipynb))
:::
:::{grid-item-card}
+++
([carnet source](../notebooks/labyrinthe.ipynb))
:::
:::{grid-item-card} Présentation (mai 2024)
+++
([carnet source](../notebooks/presentation_2024_05.ipynb))
:::
::::
## Concepts d'un diaporama Reveal.js
Le diaporama est un fichier au format `html`, on le visualise en utilisant un navigateur web. Il est organisé en diapositives qui sont regroupées en série. Pour passer d'une série à une autre, le présentateur ou présentatrice utilise les touches → et ← du clavier, et pour passer d'une diapositive à l'autre dans une même série, les touches ↑ et ↓ sont utilisés. L'animation ci-dessous, illustre ce principe.
```{figure} /assets/img/reveal.js-vertical-slides.gif
:align: center
:width: 80%
```
Le diaporama intègre une vue pour le présentateur ou présentatrice. Cette vue s'affiche dans une autre fenêtre du navigateur web en appuyant sur la touche s.
```{figure} /assets/img/slide_speaker_view.png
---
align: center
width: 80%
---
Exemple d'une vue pour le présentateur ou présentatrice d'un diaporama.
```
## Préparation d'un carnet Jupyter avant la génération du diaporama
Pour générer un diaporama à partir d'un carnet Jupyter, il faut associer une étiquette (*tag*) à chaque cellule du carnet pour lui attribuer un comportement dans le diaporama. Le nom des tags et le comportement de la cellule associée sont décrits dans le tableau ci-dessous.
| Tag | Comportement de la cellule dans le diaporama |
|:-------------:|----------------------------------------------|
| **-** | La cellule prend place dans la diapositive en cours, à la suite des cellules qui y sont déjà présentes |
| **Slide** | La cellule débute une nouvelle série de diapositives |
| **Sub-Slide** | La cellule débute une nouvelle diapositive dans la série en cours |
| **Fragment** | La cellule prend place à la suite de la diapositive en cours, à la suite des cellules qui y sont déjà présentes et elles n'apparaissent qu'après une action du présentateur |
| **Skip** | La cellule n'apparait pas dans le diaporama |
| **Note** | La cellule sert de note pour l'orateur, elle pourra apparaitre sur une fenêtre du navigateur web, différente de celle des diapositives à destination de l'auditoire |
```{figure} /assets/img/slide_jupyterlab_select_raw.png
:align: center
:width: 80%
```
## Génération d'un diaporama statique
La génération du diaporama HTML statique se fait
- soit à partir de JupyterLab, en allant dans le menu
```
file -> Save and Export Notebook As... -> Reveal.js Slides
```
- soit à partir d'une interface de commande avec nbconvert
```
jupyter nbconvert --to slides lokta_volterra_plotly.ipynb
```
- soit à partir d'une interface de commande avec déjàvu
```
jupyter dejavu .\lokta_volterra_plotly.ipynb
```
## Génération d'un diaporama dynamique
RISE est une extension qui permet de transformer instantanément un carnets Jupyter en un diaporama HTML dynamique en lien avec un noyau d'exécution. La construction du diaporama est toujours basée sur la technologie open source [Reveal.js](https://revealjs.com/), d'où l'acronyme RISE de l'extension pour **R**eveal **I**Python **S**lideshow **E**xtension. Le diaporama est obtenu depuis un onglet JupyterLab et il permet d'éditer et d'exécuter le code en direct.
```{figure} /assets/img/jupyter_lab_render_reveal.png
:align: center
:width: 80%
```