Qu'est-ce que ce JavaScript SlideMaker ?

• un script qui découpe visuellement un fichier HTML, sans le modifier
• un outil de création de slides, en vue d'une présentation

Les avantages du JavaScript SlideMaker

• ne crée/modifie pas de nouveaux fichiers : maintenance facilitée !
• la présentation tient donc sur 1 seul fichier (+ styles, + images bien sûr)
• pas de redondance des données
• portabilité, compatibilité

Comment intégrer le script à sa présentation

• insérer simplement un lien vers le fichier JavaScript

  <script type="text/javascript" src="ced_js_slidemaker/makeslide.js"></script>

• les autres fichiers (images des boutons, script, style CSS) doivent être dans un sous-dossier
• un lien "créer les slides" se crée automatiquement dans le fichier original

  

Comment fonctionne le script

• lit le titre du fichier HTML (élément title)
• lit le pied de page du fichier HTML (élément address)
• crée un nouveau slide à chaque grand-titre (élément h1)
• recopie le contenu placé entre les grand-titres
• crée les boutons de navigation (précédent/sommaire/style/suivant)
• crée la table des matières
• numérote les "pages"
• prévoit un affichage sur fond clair et un affichage sur fond sombre

Pour retrouver le fichier original, il suffit de cliquer sur "Recharger la page".

Scénario-type

1. écrire le fichier HTML avec son éditeur préféré (Amaya, Notepad, ...)
2. mettre le sous-dossier ced_js_slidemaker dans le dossier de ce fichier HTML
3. ajouter le lien vers le script dans le fichier HTML. Si l'éditeur HTML ne le permet pas, ceci peut être fait simplement en ouvrant le fichier HTML avec l'éditeur de texte, et en ajoutant la ligne à la fin du fichier.
   Ceci donne :

   <!-- (avant) -->
   <!-- [bla bla bla...] -->
   </body>
   </html>

   <!-- (après) -->
   <!-- [bla bla bla...] -->
   <script type="text/javascript" src="ced_js_slidemaker/makeslide.js"></script>
   </body>
   </html>

4. la prochaine lecture du fichier HTML laisse apparaître le lien "créer les slides". Il suffit de cliquer dessus.
5. enfin, ajustez la taille du texte pour qu'il occupe tout l'écran (Ctrl++ avec Mozilla)

Résultat

Avant : Le fichier HTML original (comme lors de l'édition)

Après : Le même fichier, transformé visuellement, et prêt à être projeté !

Historique

• ceci est une première version, qui marche avec Mozilla
• vos questions et commentaires sont bienvenus !
• auteur : Cédric Kiss, mailto:cedric2003@ckiss.net
• homepage du projet : http://ckiss.net/divers/2003/js_slidemaker

Cédric Kiss, septembre 2003.