# {.step data-x=-5000 data-y=-3000 data-rotate=-60 data-scale=6}

##  ![](data/pampi-help/pampi_icon.png) PAMPI

Présentations Avec Markdown, Pandoc, Impress.










# {.step data-x=-3000 data-y=-4000 data-scale=0.5}

## Fonctionnement

* **les présentations sont écrites dans des fichiers textes**
    * et sont donc facilement modifiables
    * la syntaxe des fichiers (Markdown) est assez simple
* **elles sont converties en pages web**
    * on les affiche dans son navigateur
    * on peut les mettre en ligne, les emporter sur une clé usb, etc








# {.step data-x=-3000 data-y=-3500 data-scale=0.5}

## Les outils

* **[Markdown](http://daringfireball.net/projects/markdown)** : permet d'écrire le contenu des présentations avec une syntaxe simple
* **[Pandoc](http://www.pandoc.org)** : transforme le fichier Markdown en fichier html
* **[impress.js](https://github.com/impress/impress.js)** : programme javascript permettant à la présentation de fonctionner dans le navigateur (affichage des étapes, transitions, gestion du clavier et de la souris, ...)





# {.step data-x=-3000 data-y=-3000 data-scale=0.5}

## L'interface

Le fichier Markdown est affiché à gauche et on peut visualiser le résultat à droite

![](data/pampi-help/pampi-help-01.jpeg)

















# {.step data-x=0 data-y=-3000}

## Les étapes

Chaque étape (step) d'une présentation est positionnée \
où l'on veut dans un espace en 3D

* on indique ses coordonnées
* on peut aussi lui donner un facteur de zoom
* et faire des rotations











# {.step data-x=1000 data-y=-3000}

## Exemples

Cette étape est placée aux coordonnées (1000, -3000, 0). \
La ligne qui la déclare est donc :

#### `# {.step data-x=1000 data-y=-3000}`

* `# {.step}` indique que c'est une étape
* `data-x=2000` et `data-y=-3000` donnent les coordonnées
* pas besoin d'indiquer `data-z` puisqu'il vaut 0










# {.step data-x=1000 data-y=-3000 data-z=-1500}

Ici on a ajouté `data-z=-1500`







# {.step data-x=0 data-y=-2000 data-scale=6}

### `data-scale=6`






# {.step data-x=0 data-y=-2500 data-scale=0.2}

### `data-scale=0.2`





# {.step data-x=1700 data-y=-3000 data-rotate=90}

### `data-rotate=90`





# {.step data-x=2000 data-y=-3000 data-rotate=360}

### `data-rotate=360`





# {.step data-x=2000 data-y=-3300 data-rotate=360 data-rotate-x=60}

### `data-rotate-x=60`





# {.step data-x=2500 data-y=-3300 data-rotate=360 data-rotate-x=60 data-rotate-y=60}

### `data-rotate-y=60`










# {.step .text-right data-x=3000 data-y=-3000}

### Alignement

Par défaut, les étapes sont centrées sur l'écran.

Ici on a ajouté `.text-right` \
(avec un point au début).

L'étape est ainsi alignée à droite.









# {.step .slide data-x=4000 data-y=-3000}

L'attribut `.slide` crée un effet de diapositive (fond blanc).

# {.step data-x=5000 data-y=-3000}

### Liste des directives 

* **coordonnées** : data-x, data-y, data-z
* **zoom** : data-scale
* **rotations** : data-rotate, data-rotate-x, data-rotate-y
* **alignement** : .text-left, .text-right
* **effet diapositive** : .slide

# {.step data-x=-3000 data-scale=4}

## MARKDOWN

Quelques exemples

# {.step data-x=-5000 data-y=2000}

## Titre de niveau 2
### Titre de niveau 3
#### Titre de niveau 4
##### Titre de niveau 5
###### Titre de niveau 6

----

texte normal

en **gras**, en *italique* ou ~~barré~~

# {.step data-x=-3500 data-y=2000}

* une liste à puces
* la suite
    * une entrée inférieure
    * suite
* on revient au premier niveau

# {.step data-x=-2000 data-y=2000}

1. une liste numérotée
#. la suite
    i. une entrée inférieure
    #. suite
#. on revient au premier niveau

# {.step data-x=-500 data-y=2000}

## On peut écrire des maths

#### en utilisant [KaTeX](https://khan.github.io/KaTeX)

$a^2 + b^2 = c^2$

$v(t) = v_0 + \frac{1}{2}at^2$

$\int_{0}^{1} x dx = \left[ \frac{1}{2}x^2 \right]_{0}^{1} = \frac{1}{2}$

$e^x = \sum_{n=0}^\infty \frac{x^n}{n!} = \lim_{n\rightarrow\infty} (1+x/n)^n$

# {.step data-x=1000 data-y=2000}

### Des liens

* un lien vers un site : [Wikipédia](https://fr.wikipedia.org)
* un lien vers un fichier
    * [un fichier PDF](data/pampi-help/tableau_conversion_volumes.pdf)
    * [un fichier GeoGebra](data/pampi-help/n4a.ggb)

#### Remarque

les fichiers sont placés dans un sous-dossier de **data**  
(le plus simple est de faire un dossier par présentation).

# {.step data-x=2500 data-y=2000}

## Une image

![](data/pampi-help/splash.png)

# {.step data-x=4000 data-y=2000}

## Une vidéo

# {.step data-x=5000 data-y=2000}

#### Ouvrez le fichier **pampi-help** 
#### pour comparer son contenu 
#### avec cette présentation.

# {#overview .step data-x=0 data-y=0 data-scale=14}
