9 Faire un diaporama
Cette page complète la page du manuel consacrée à Beamer. Vous trouverez ci-dessous deux exemples complets avec Beamer (une classe LaTeX) et Remark.js (une page web avec du code javascript).
L’objectif d’utiliser Markdown pour produire des diapositives permet de travailler de manière1 :
- simple et rapide : aucune sophistication
- propre : pas de codes cachés
- ouverte : source lisible avec un simple éditeur
- durable : le fichier source est un fichier texte
- structurée : grâce à la simplicité de Markdown
- esthétique : grâce aux nombreuses possibilités offertes
Les deux exemples proposent le même contenu mais avec des technologies différentes. Avec Remark.js, il n’est pas nécessaire d’installer Pandoc, un simple éditeur de texte (pour éditer un fichier html) suffit.
9.1 Beamer
La création de documents avec Beamer va se faire comme avec les documents présentés dans les deux modèles précédents. Voici un exemple.
9.1.1 Modèle
Ci-dessous un modèle basique que vous pouvez copier-coller dans votre éditeur de texte pour débuter la création de diapositives. Dans ce modèle :
- on choisit la classe (output: beamer_presentation) ;
- on choisit un theme, ici Madrid et un colortheme, ici seahorse ;
- on précise le format, ici 16*9 pour correspondre aux écrans actuels ;
- on précise le logo qui apparaîtra sur la première diapositive (titlegraphic: logo.png) et celui qui servira de fonds d’écran sur toutes les diapositives (logo: fond.png).
Les métadonnées (title, subtitle, author et date), avec le thème choisi, apparaîtront sur la première diapositive et en pied de page pour toutes les diapositives (sauf subtitle)2.
---
title: Titre
subtitle: Sous-titre
author: Nom, Prénom
date: 2021 (cc-by)
output: beamer_presentation
theme: Madrid
colortheme: seahorse
fontsize: 10pt
aspectratio: 169
titlegraphic: logo.png
logo: fond.png
---
# Diapositive 1
Liste :
- un
- deux
- trois
# Diapositive 2
## Premier cadre
texte
## Deuxième cadre
texte
9.1.2 Les commandes spécifiques les plus utiles sont :
- “#” pour créer une nouvelle page avec un titre courant (qui suit le signe “#” dans la source)
- “---” (trois tirets) pour créer une nouvelle page sans titre
- “##” pour créer un bloc (avec cadre pour certains thèmes) dans une diapositive
- “. . .” (trois points séparés par une espace) pour créer une pause dans la présentation. Beamer va créer autant de pages qu’il y a de pauses (un “clic” pour afficher la suite de la page). C’est la seule animation possible).
Le texte est aligné à gauche.
Les images sont alignées à gauche et automatiquement redimensionnées si elles dépassent le cadre. S’il y a une légende (), l’image est alors centrée. Il est possible de réduire la taille des images avec la commande { width=50% }.
Les tableaux sont bien reproduits. Les formules également.
Pour produire le fichier pdf, on va utiliser la commande :
pandoc -t beamer votrefichier.md -o votrefichier.pdf
9.2 Remark.js
Avec Remark.js, la création de diaporamas est encore plus légère et simple. Basé sur le format Github flavor Markdown, le fichier est directement interprété par le navigateur. Voici un exemple (pressez CTRL-u pour voir le contenu du fichier).
9.2.1 Modèle
Il n’est pas obligatoirement destiné aux personnes connaissant les codes HTML et CSS. Il ne nécessite qu’un simple éditeur.
Vous pouvez copier le code ci-dessous dans un fichier texte et le sauver comme une page web (typiquement : diapo.html).
Attention à ne pas toucher au début, ni à la fin du code. Vous écrivez entre <textarea id=“source”> et <\textarea>. Vous pouvez néanmoins changer le nom de la “page” html (entre <title> et </title>).
On peut introduire des images (), des fond d’écran (background-image: url(image.jpg)), des liens, des listes ou des tableaux.
L’ensemble des commandes possibles est décrit sur le wiki du projet.
<!DOCTYPE html>
<html>
<head>
<title>Titre</title>
<meta charset="utf-8">
<style>
@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
@import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
@import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);
body { font-family: 'Droid Serif'; }
h1, h2, h3 {
font-family: 'Yanone Kaffeesatz';
font-weight: normal;
}
.remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
</style>
</head>
<body>
<textarea id="source">
class: center, middle
# Titre
## Sous-titre
date
---
# Diapositive 1
Liste :
- un
- deux
- trois
# Diapositive 2
## Premier sous-titre
texte
## Deuxième sous-titre
texte
</textarea>
<script src="https://remarkjs.com/downloads/remark-latest.min.js">
</script>
<script>
var slideshow = remark.create({ratio: '16:9'});
</script>
</body>
</html>
9.2.2 Utilisation
Une fois le fichier html créé, complété et sauvé, il est ouvert avec un navigateur web (Firefox ou autre).
Si on dispose d’un espace web, on peut l’y copier (attention à joindre les images utilisées).