Lancer le diaporama

1. Présentation des présentations

---

2. Introduction

• Ce site contient des diaporamas, appelés ici « présentations ».
• Certaines ont de jolies captures d’écrans…
• …qui simulent des vidéos.
• Un exemple :

---

Passer la résolution en 800×600.

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

3. Introduction

• Voici donc une présentation de leur mode de fabrication, utilisant elle-même…
• …de jolies captures d’écran.
• Un jour peut-être, une présentation expliquant cette présentation…
• Pour encore plus de meta, voir How to make a video about how to make a video… de Vi Hart.

---

4. Les étapes

• Capture
  • copies d’écran
  • en automatique
• Montage
  • nettoyage
  • réorganisation des captures
• Assemblage
  • insertion des captures dans le fichier .html

---

5. Prérequis

De quoi a-t-on besoin ?

• Wink (de DebugMode)
  • pour capturer et monter
  • ni ouvert, ni libre
  • seule la version 2 est utilisable (sous Windows seulement)
  • capture automatique et capture du pointeur
  • en recherche d’alternative…

---

6. Prérequis

De quoi a-t-on besoin ?

Wink

• Un bon explorateur de fichiers comme DoubleCommander
  • pour renommer les captures
  • inutile si on est un ninja du shell

---

7. Prérequis

De quoi a-t-on besoin ?

Wink
Un bon explorateur

• Un très bon éditeur de texte, ou Python
  • pour insérer les diapos dans le fichier .html
  • soit on édite, soit on génère
    • « un bon codeur tape du bon code…
    • …un très bon codeur génère du bon code. »

---

8. Prérequis

De quoi a-t-on besoin ?

Wink
Un bon explorateur
Un bon éditeur de texte ou Python

• Un moteur de diaporamas : QuickSlides ou Reveal
  • les systèmes de diaporama html/css/js utilisés ici
  • il y en a beaucoup d’autres, mais ceux-ci acceptent le Markdown
• D’assez bonnes connaissances en html/css/js/md, voir cette activité.

---

9. Prérequis

De quoi a-t-on besoin ?

Wink
Un bon explorateur
Un bon éditeur de texte ou Python
Un moteur de diaporamas

---

Passer la résolution en 800×600.

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

Démarrer Wink (peut être installé sur une clef).

---

 

---

 

---

Nouvelle capture.

---

 

---

 

---

 

---

 

---

Vérification de la fenêtre de capture.

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

Capture pour chaque clic et clic-droit.

---

Capture pour chaque appui sur une touche.

---

 

---

 

---

Info importante : le raccourci Alt + Pause.

---

Puis on cache Wink.

---

Et surtout, on démarre la capture automatique avec Alt + Pause.

---

 

---

 

---

Icône du Wink qui a capturé cette présentation.

---

On remarque le k pour keyboard et la flèche pour le pointeur.

---

Icône du Wink manipulé dans cette présentation.

---

Les évènements étant capturés en priorité par le premier Wink…

---

…j’effectue une capture manuelle…

---

…avant de terminer la capture.

---

C’est le moment de repasser en pleine résolution.

---

Les diapos apparaissent dans la timeline.

---

 

---

 

---

Le détail que fera la différence : la position du pointeur.

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

Un « collage » insère la diapo avant la diapo sélectionnée.

---

10. Le pointeur

• Travailler la position du pointeur pour guider le lecteur :
  • arrivée du pointeur avant l’action sur les boutons
  • mais surtout : continuité entre diapos
• Pour y parvenir :
  • Lors de la capture, forcer certaines captures :
    • cliquer sur les zones à exhiber
    • appuyer sur le bouton Pause avant et après les actions (liens, boutons…)
  • Lors du montage (ou lors de l’assemblage) :
    • ne pas hésiter à ajouter et supprimer des diapos
    • en supprimer si trop de texte est tapé (une diapo par mot suffit) ou dans les phases intermédiaires des animations (checkbox…)
    • bidouiller la position et le type du pointeur
• Vérifier la continuité en naviguant dans la timeline avec le curseur.

---

Par exemple pour simuler un clic sur IE.

---

Nous déplaçons le pointeur de la diapo suivante.

---

Soit 1) en modifiant ses coordonnées.

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

Mais il est parfois difficile de connaître les coordonnées de la cible.

---

Soit 2) en déplaçant le pointeur avec votre propre pointeur.

---

 

---

 

---

 

---

 

---

Mais il est difficile de tomber sur la position d’une diapo voisine.

---

Soit 3) avec un clic-droit sur le pointeur pour « l’aligner ».

---

 

---

 

---

On peut aligner avec la diapo précédente…

---

… ou avec la suivante.

---

Le soucis du détail : le type du pointeur.

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

Cliquer ici pour visualiser le rendu Flash.

---

 

---

 

---

 

---

 

---

Une fois satisfait, c’est le moment d’exporter les images.

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

 

---

Reste la phase de l’assemblage…

---

11. Assemblage

• Renommer les images (facultatif, mais conseillé) :
  • test0.png devient prefixe_000.png
  • test1.png devient prefixe_001.png
  • test10.png devient prefixe_010.png

---

12. Assemblage

• Renommer les images (facultatif, mais conseillé). Fait.
• Créer les diapositives :
• On part du squelette `presentation.html` fourni par QuickSlides.
• On ajoute le code Markdown à la fin de ce fichier grâce à :

  import sys
  md = """
  ---
  
   
  
  \!\[alt](chemin\_vers\_img/prefixe_%s.png)
  """
  fichier_cible = sys.argv[1]
  nb_diapos = sys.argv[2]
  f = open(fichier_cible, "a")
  for i in range(int(nb_diapos) + 1):
      f.write(md % str(i).rjust(3, '0'))

  Si vous ne savez pas ce qu’est `sys.argv`, tapez-y vos valeurs.

---

13. Assemblage

• Renommer les images (facultatif, mais conseillé). Fait.
• Créer les diapositives :
• On part du squelette `presentation.html` fourni par QuickSlides.
• On ajoute le code Markdown à la fin de ce fichier. Fait.
• On réordonne ce fichier correctement (le *footer* à la fin).

---

14. Assemblage

• Renommer les images (facultatif, mais conseillé). Fait.
• Créer les diapositives. Fait.
• Retoucher le montage et ajouter le texte au-dessus des diapos (à la place des ` `).
• Ne pas détourner l’attention du lecteur des mouvements du pointeur.
• Ajouter des diapos en réutilisant une même capture si besoin.

---

15. Quelques infos

• Pour cette présentation :
  • 329 captures brutes
  • 153 finalement montées
  • 139 finalement utilisées
  • pour un total de 4,24 Mo
  • soit environ 15 secondes de video à résolution équivalente
• Fichier .wnk :
  • assez lourd (8,3 Mo pour cette présentation)
  • contient les images
  • mais aussi les autres infos :
    • les positions du pointeur
    • détails de montage pour l’animation Flash

---

16. Quelques infos

Quelques avis subjectifs :

• En cas d’erreur ou d’oubli, un re-export est casse-pieds,
  • les retouches d’images aussi,
  • pas plus qu’un re-export de vidéo,
• Les déplacements dans la présentation sont plus faciles à gérer que dans une vidéo.

---

17. À vous de jouer !

• Si avez déjà utilisé Wink,
  • pour générer une animation Flash,
  • ou pour obtenir ce genre de diaporama,
  • montrez-nous votre travail !
• Sinon, vous avez maintenant un avis sur ce genre de diaporamas à copies d’écrans.

---

18. À vous de jouer !

Dans tous les cas, rendez-vous sur les commentaires de l’article annonçant cette présentation !

Tweeter Suivre @profgraorg