Présentations HTML
Référence : la présentation du séminaire du 24 septembre 2026, « Prendre de la hauteur » (en ligne sur events.adalan.fr/20260924/). Point de départ : assets/modeles/presentation.html.
Deux écarts avec cette présentation, décidés pour la charte :
- Les polices passent d'Outfit et DM Mono à Mona Sans et Monaspace Neon, comme sur le site.
- Les pilules et les cercles (étiquette d'orateur, pastilles numérotées) passent à la forme en diagonale.
La scène
- Scène fixe de 1920 × 1080 px, mise à l'échelle de la fenêtre par
transform: scale(). Toutes les tailles s'écrivent en px de scène. - Zone utile : 92 px en haut, 120 px sur les côtés, 124 px en bas. Rien ne déborde de cette zone, sauf les photos et les motifs de fond.
- Pied de slide à 40 px du bas : logo, signature « AI Driven Insight », nom de la partie, pagination
03 / 12en Monaspace. Pas de pied sur la couverture ni sur la clôture. Sur une slide photo, le pied ne garde que le logo et la pagination.
Les types de slides
| Type | Fond | Usage |
|---|---|---|
| Couverture | Photo plein cadre, voile encre à gauche | Logo blanc en haut à gauche, sur-titre avec la date, titre de 168 px avec un mot en pêche, sous-titre de 36 px en graisse 340 |
| Claire | Papier, halo lavande en haut à droite, courbes de niveau à 8 % | Le cas courant : sur-titre, titre, sous-titre, contenu |
| Encre | Encre, halos violets, courbes de niveau lavande | Ouverture de partie, message fort, synthèse |
| Photo | Photo plein cadre, voile encre (à gauche ou plein) | Ouverture de partie, pause, clôture |
| Partagée | Texte sur encre à gauche, photo de 720 px à droite | Un message en deux ou trois phrases, illustré |
Ouverture de partie : numéro géant de 400 px (01, 02…) en dégradé pêche qui s'efface vers le bas, trait pêche de 96 × 8 px en diagonale, titre de 104 px en blanc avec un mot en pêche.
Clôture : « Merci » de 220 px sur photo, point final en pêche, contact en dessous.
Typographie de scène
| Rôle | Taille | Graisse | Chasse |
|---|---|---|---|
| Titre de couverture | 168 px | 800 | 112 % |
| Numéro de partie | 400 px | 820 | 112 % |
| Titre de partie | 104 px | 780 | 112 % |
| Titre de slide | 66 px (54 px si long) | 760 | 110 % |
| Chiffre clé | 86 px, unité à 50 % | 780 | 108 % |
| Chapeau (lead) | 30 px | 440 | 100 % |
| Sous-titre | 27 px | 420 | 100 % |
| Titre de carte | 31 px | 680 | 106 % |
| Texte de carte | 22 px | 420 | 100 % |
| Sur-titre | 20 px Monaspace, capitales, espacement 0,24 em | 500 | |
| Libellés, pagination | 16 à 17 px Monaspace | 400 | |
| Crédit photo | 13 px Monaspace | 400 |
Le texte reste lisible au fond d'une salle : jamais moins de 20 px pour du texte courant.
Composer une slide
- Une idée par slide, dite dans le titre en une phrase. Le sous-titre précise, le contenu prouve.
- Un sur-titre situe la slide (« Les chiffres », « Méthode ») ; il ne répète pas le titre.
- Trois cartes au plus par rangée. Au-delà, découper en deux slides.
- Un encadré (
.note) porte la phrase à retenir : encre sur slide claire, pêche claire pour une nuance. - Chaque partie s'ouvre sur une slide encre ou photo. Le reste est clair.
- Une pause ou une transition peut être une photo plein cadre avec un seul mot.
Chiffres et graphiques
- Barres en dégradé encre (ink-500 vers encre) avec de fines hachures ; la valeur mise en avant, en général la dernière, en dégradé pêche.
- Valeur au-dessus de la barre en Mona Sans 780, unité réduite de moitié ; libellé en Monaspace capitales text-3 ; période en Monaspace peach-700.
- Coin haut-gauche arrondi (26 px), coin haut-droit vif : la diagonale s'applique aussi aux barres.
- Un chiffre vient d'une source. Des données d'exemple portent l'étiquette « données fictives ».
- Les chiffres d'affaires et de croissance d'adalan sont internes : ils ne sortent jamais dans un support externe.
Mouvement
- Changement de slide : la nouvelle monte de 80 px en 0,8 s, l'ancienne s'efface vers le haut (vers le bas quand on recule).
- Les éléments d'une slide montent de 46 px, décalés de 85 ms (
data-aet--idans le modèle). - Photo : léger zoom arrière de 1,16 à 1,02 sur 9 s (effet Ken Burns).
- Les barres poussent depuis leur base en 1,3 s.
?staticdans l'adresse fige tout (captures, relecture).prefers-reduced-motionréduit les animations à un fondu.
Commandes du modèle
Flèches, Espace, Entrée, Page suivante et précédente pour naviguer ; Début et Fin ; F pour le plein écran ; #5 dans l'adresse ouvre la slide 5 ; balayage sur écran tactile. L'impression (ou « Enregistrer en PDF ») sort une slide par page au format 1920 × 1080.