S5: Simple Standards-Based Slide Show System (diaporama)

J’étais déjà tombé il y a quelques temps sur le projet S5. Cette fois-ci je m’y suis plongé sérieusement car je dois réaliser une présentation dans le cadre de mon travail au Centre NTE. Normalement, quand on veut effectuer une présentation, on ouvre une application “à la Powerpoint” (j’utilise personnellement “Presentation” de OpenOffice.org). Ces logiciels ont depuis longtemps apporté leurs preuves mais nécessitent une prise en main plus ou moins longue. S5 permet de réaliser une présentation très facilement pour peu que l’on connaisse un minimum de HTML.

Mais laissons Eric Meyer, le créateur de S5 présenter ce projet:

S5 is a slide show format based entirely on XHTML, CSS, and JavaScript. With one file, you can run a complete slide show and have a printer-friendly version as well. The markup used for the slides is very simple, highly semantic, and completely accessible. Anyone with even a smidgen of familiarity with HTML or XHTML can look at the markup and figure out how to adapt it to their particular needs. Anyone familiar with CSS can create their own slide show theme. It’s totally simple, and it’s totally standards-driven.

Serge K. Keller a trouvé le projet S5 tellement génial qu’il a choisi de le traduire en français. Voici ce qu’il en pense:

Il s’agit d’un système de présentation “à la PowerPoint” utilisant un seul fichier XHTML pour son contenu et quelques feuilles de style CSS pour la présentation. Le résultat? Une présentation professionnelle, avec une version imprimable à distribuer à vos auditeurs et une projection vidéo tout en un. Et aucun besoin de logiciels supplémentaires pour utiliser S5! Votre navigateur habituel effectuera tout le travail…

Donc si l’on résume, une présentation réalisée avec S5 consiste en un fichier XHTML et un ensemble de feuille de style CSS.

Le fichier XHTML commence par appeler les feuilles de style:

<head>
<title>[slide show title here]</title>
<meta name="version" content="S5 1.0" />
<link rel="stylesheet" href="ui/slides.css" type="text/css" media="projection" id="slideProj" />
<link rel="stylesheet" href="ui/opera.css" type="text/css" media="projection" id="operaFix" />
<link rel="stylesheet" href="ui/print.css" type="text/css" media="print" id="slidePrint" />
<script src="ui/slides.js" type="text/javascript"></script>
</head>

Puis la structure est ultra simple:

<div class="layout">

<div id="currentSlide"></div>
<div id="header"></div>
<div id="footer">
<h1>[location/date of presentation]</h1>
<h2>[slide show title here]</h2>
<div id="controls"></div>
</div>

</div>

<div class="presentation">

<div class="slide">
<h1>[slide show title here]</h1>
<h3>[name of presenter]</h3>
<h4>[affiliation of presenter]</h4>
</div>

<div class="slide">
<h1>[slide title number 1]</h1>
<ul>
<li>[point one]</li>
<li>[point two]</li>
<li>[point three]</li>
<li>[point four]</li>
<li>[point five]</li>
</ul>
<div class="handout">
[any material that should appear in print but not on the slide]
</div>
</div>

</div>

Il suffira ensuite de copier-coller le bloc “slide” suivant le nombre de slides que contiendra notre présentation. Simple et propre non?

Pour aller plus loin, voici quelques ressources :

Tags: , , , ,