Communication S4 - Séance 5 | TP Réaliser une présentation avec Reveal.js

Conception d'interface numérique et valorisation de projets

Apprendre à utiliser Reveal.js

0. Résumé de la séance

Lors de cette séance, il s'agira de créer une présentation avec un framework HTML/JS nommé Reveal.js.

Cette présentation sera intégrée plus tard dans la fiche de description du projet.

Vous présenterez le projet que vous avez choisi de mettre en avant parmi tous les projets que vous avez réalisé.

Dans un premier temps, nous verrons comment utiliser Reveal pour ensuite créer une présentation qui répondra à plusieurs contraintes.

1. Installer Reveal.js

Reveal.js est un framework qui permet de réaliser des présentation en HTML5/JS.

L'outil permet donc de créer des présentations qui peuvent être directement mises en ligne.

Télécharger le framework : cliquer ici.

Consulter la documentation : cliquer ici.

Exemple en ligne : cliquer ici.

2. Utiliser Reveal.js

Une fois le dossier téléchargé, il faut ouvrir le fichier index.html avec un éditeur de code pour y ajouter son propre texte.

Vous obtenez le code suivant :

<!doctype html>
ml lang="en">

<head>
	<meta charset="utf-8">

	<title>reveal.js - The HTML Presentation Framework</title>

	<meta name="description" content="A framework for easily creating beautiful presentations using HTML">
	<meta name="author" content="Hakim El Hattab">

	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

	<link rel="stylesheet" href="css/reveal.min.css">
	<link rel="stylesheet" href="css/theme/default.css" id="theme">

	<!-- For syntax highlighting -->
	<link rel="stylesheet" href="lib/css/zenburn.css">

	<!-- If the query includes 'print-pdf', use the PDF print sheet -->
	<script>
		document.write( '<link rel="stylesheet" href="css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
	</script>

	<!--[if lt IE 9]>
	<script src="lib/js/html5shiv.js"></script>
	<![endif]-->
</head>
					...

3. Une section, un slide

Chaque section correspond à un slide, il est possible d'ajouter autant de slides que vous le souhaitez.

On remarque ainsi la partie suivante :

					<body>

<div class="reveal">

	<!-- Any section element inside of this container is displayed as a slide -->
	<div class="slides">
		<section>
			<h1>Reveal.js</h1>
			<h3>HTML Presentations Made Easy</h3>
			<p>
				<small>Created by <a href="http://hakim.se">Hakim El Hattab</a> / <a href="http://twitter.com/hakimel">@hakimel</a></small>
			</p>
		</section>

		<section>
			<h2>Heads Up</h2>
			<p>
				reveal.js is a framework for easily creating beautiful presentations using HTML. You'll need a browser with
				support for CSS 3D transforms to see it in its full glory.
			</p>

			<aside class="notes">
				Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
			</aside>
		</section>
		...
	</body>

4. Exercice

Pour commencer, ajouter une section qui précède les autres et créer votre propre slide de titre.

Effacer ensuite toutes les autres sections. A chaque fois que vous désirez rajouter une diapo, créer une nouvelle section.

Ajouter une image dans le slide.

Présentation

Présenter son projet

Lors de cette séance, vous allez réaliser une présentation de votre projet avec Reveal.js.

La présentation sera assez brève, composée d'une dizaine de slides assez courts.

Exemple (non exempt de défauts)

Consigne

La présentation se composera des parties suivantes (dont l'ordre peut être remanié):

  • Un slide de titre avec au moins : nom du projet, sous-titre, auteur, date (logo?).
  • Contexte du projet : état d'avancement du projet+ d'où vient le projet? (cours?...)
  • Description générale du projet: en quelques mots, de quoi parle le projet
  • Description de l'architecture technique du projet
  • Focus sur un élément du projet
  • Remerciements+ contact

Les slides doivent être les plus synthétiques possible, les phrases ne doivent pas être complétement rédigées.

La présentation s'adresse à des utilisateurs qui veulent en savoir plus rapidement sur le projet depuis leur ordinateur.

La présentation doit pouvoir facilement supporter un discours sur le projet (vous parlez à un employeur potentiel, vous lui expliquer le projet en vous aidant de votre présentation).

Ne pas hésiter à ponctuer d'illustrations.

Avez-vous dit l'essentiel concernant votre projet?

Tout dire, dans le bon ordre, de manière cohérente

Vous prendrez bien soin de penser les transitions logiques entre slides et n'hésiterez pas à revoir l'organisation de votre présentation pour lui assurer la plus grande cohérence (demandez-vous entre chaque slide quel est le lien avec le précédent, s'il n'y en a aucun vous devez revoir votre présentation).

Aler plus loin avec Reveal.js

Des slides verticaux

Avec Reveal, vous pouvez créer imbriquer des sections dans des sections, ce qui vous permet de créer des slides verticaux. Il vous suffit alors de descendre pour consulter les diapos associées.

Attention, il n'est pas toujours naturel pour les utilisateurs de naviguer verticalement dans une présentation.

Changer le thème

Plusieurs thèmes existent déjà. Ils sont accessibles depuis le dossier css/theme de Reveal.

Pour passer d'un thème à un autre, il suffit de changer le lien dans le header.

link rel="stylesheet" href="css/theme/default.css" id="theme"

Changer le background

Ajouter le code suivant à une section :

section data-background="#007777"

Il suffit de remplacer la couleur par celle que vous préférez.

Il est également possible de rajouter des images de fond :

section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"

Voir l'exemple : cliquer ici

Changer les effets de transition

Comme pour les fond d'écran, il suffit de rajouter une propriété à une section pour que la transition change.

data-transition="zoom"

Les transitions suivantes sont intégrées:

  • cube
  • page
  • concave
  • zoom
  • linear
  • fade
  • none
  • default

Et plus encore

  • Appuyez sur esc.
  • Appuyez sur b.
  • Supporte Markdown.
  • De nombreuses autres transitions, possibilités et effets...
  • Voir la démonstration

Exercice

Mettez en forme votre présentation grâce à ces nouvelles fonctionnalités.