Divers

DIAPORAMA EN HTML

Écrit par David

Mercredi 19 septembre 2018

Mis à jour le mercredi 19 septembre 2018

Diaporama en HTML

Vous souhaitez réaliser vos diaporamas en HTML et oublier un peu le classique PowerPoint ?
Je vous présente Reveal.js et deck.js, deux librairies qui permettent de faire des diaporamas en HTML en toute simplicité !

Reveal.js

Le premier, c'est Reveal.js. Pour savoir ce que l'on peut faire avec, je vous conseille d'aller voir leur site de démo : https://revealjs.com
Comme expliqué sur leurs diaporama, il s'avère très simple à l'utiliser ! Il suffit d'utiliser cette structure dans votre page HTML :

<html>
	<head>
		<link rel="stylesheet" href="css/reveal.css">
		<link rel="stylesheet" href="css/theme/white.css">
	</head>
	<body>
		<div class="reveal">
			<div class="slides">
				<section>Diapositive 1</section>
				<section>Diapositive 2</section>
				<section>Diapositive 3</section>
				<section>Diapositive ...</section>
			</div>
		</div>
		<script src="js/reveal.js"></script>
		<script>
			Reveal.initialize();
		</script>
	</body>
</html>

A l'intérieur de chaque diapositive, libre à vous d'écrire votre HTML comme sur une vraie page HTML.

Et si vous n'y connaissez rien, il y a un outil pour éditer vos diapositives en ligne : https://slides.com/ (je n'ai pas essayé l'éditeur mais si vous l'avez testé, n'hésitez pas à laisser un commentaire à ce propos)

Son dépôt Github est ici : https://github.com/hakimel/reveal.js

Si vous souhaitez l'essayer sur une de vos pages sans incorporer la librairies dans votre site, n'oubliez pas son CDN : https://cdnjs.com/libraries/reveal.js/3.6.0

Deck.js

Le second, c'est Deck.js. Même topo, pour visualiser ce que l'on peut faire avec, je vous conseille d'aller voir leur site de démo : http://imakewebthings.com/deck.js/

Et voilà, avec ces deux librairies, vous pourrez faire des "diapo stylé" et attirer l'attention de vos lecteurs.
Libre à votre imagination pour réaliser de jolies diapo.

Reveal.js
Deck.js