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.
![prez avec captures](img/prez_avec_captures/prez_avec_captures_000.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_001.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_002.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_003.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_004.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_005.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_006.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_007.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_008.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_009.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_010.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_011.png)
3. Introduction
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
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.
![prez avec captures](img/prez_avec_captures/prez_avec_captures_000.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_001.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_002.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_003.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_004.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_005.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_006.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_007.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_008.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_009.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_010.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_011.png)
Démarrer Wink (peut être installé sur une clef).
![prez avec captures](img/prez_avec_captures/prez_avec_captures_012.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_013.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_014.png)
Nouvelle capture.
![prez avec captures](img/prez_avec_captures/prez_avec_captures_014.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_014.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_015.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_016.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_017.png)
Vérification de la fenêtre de capture.
![prez avec captures](img/prez_avec_captures/prez_avec_captures_017.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_017.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_018.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_019.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_020.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_021.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_022.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_023.png)
Capture pour chaque clic et clic-droit.
![prez avec captures](img/prez_avec_captures/prez_avec_captures_023.png)
Capture pour chaque appui sur une touche.
![prez avec captures](img/prez_avec_captures/prez_avec_captures_024.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_025.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_026.png)
Info importante : le raccourci Alt
+ Pause
.
![prez avec captures](img/prez_avec_captures/prez_avec_captures_027.png)
Puis on cache Wink.
![prez avec captures](img/prez_avec_captures/prez_avec_captures_028.png)
Et surtout, on démarre la capture automatique avec Alt
+ Pause
.
![prez avec captures](img/prez_avec_captures/prez_avec_captures_028.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_029.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_030.png)
Icône du Wink qui a capturé cette présentation.
![prez avec captures](img/prez_avec_captures/prez_avec_captures_032.png)
On remarque le k
pour keyboard et la flèche pour le pointeur.
![prez avec captures](img/prez_avec_captures/prez_avec_captures_031.png)
Icône du Wink manipulé dans cette présentation.
![prez avec captures](img/prez_avec_captures/prez_avec_captures_033.png)
Les évènements étant capturés en priorité par le premier Wink…
![prez avec captures](img/prez_avec_captures/prez_avec_captures_033_bis.png)
…j’effectue une capture manuelle…
![prez avec captures](img/prez_avec_captures/prez_avec_captures_034.png)
…avant de terminer la capture.
![prez avec captures](img/prez_avec_captures/prez_avec_captures_035.png)
C’est le moment de repasser en pleine résolution.
![prez avec captures](img/prez_avec_captures/prez_avec_captures_036.png)
Les diapos apparaissent dans la timeline.
![prez avec captures](img/prez_avec_captures/prez_avec_captures_037.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_038.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_039.png)
Le détail que fera la différence : la position du pointeur.
![prez avec captures](img/prez_avec_captures/prez_avec_captures_040.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_041.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_042.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_043.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_044.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_045.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_046.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_047.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_048.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_049.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_050.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_051.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_052.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_053.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_054.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_055.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_056.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_057.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_058.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_059.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_060.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_061.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_062.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_063.png)
Un « collage » insère la diapo avant la diapo sélectionnée.
![prez avec captures](img/prez_avec_captures/prez_avec_captures_064.png)
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.
![prez avec captures](img/prez_avec_captures/prez_avec_captures_065.png)
Nous déplaçons le pointeur de la diapo suivante.
![prez avec captures](img/prez_avec_captures/prez_avec_captures_067.png)
Soit 1) en modifiant ses coordonnées.
![prez avec captures](img/prez_avec_captures/prez_avec_captures_067.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_067.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_068.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_069.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_070.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_071.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_072.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_074.png)
Mais il est parfois difficile de connaître les coordonnées de la cible.
![prez avec captures](img/prez_avec_captures/prez_avec_captures_074.png)
Soit 2) en déplaçant le pointeur avec votre propre pointeur.
![prez avec captures](img/prez_avec_captures/prez_avec_captures_074.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_074.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_074_deplacement.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_092_2_diapos.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_074_deplacement.png)
Mais il est difficile de tomber sur la position d’une diapo voisine.
![prez avec captures](img/prez_avec_captures/prez_avec_captures_074_deplacement.png)
Soit 3) avec un clic-droit sur le pointeur pour « l’aligner ».
![prez avec captures](img/prez_avec_captures/prez_avec_captures_074.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_074_align_avant.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_074_align.png)
On peut aligner avec la diapo précédente…
![prez avec captures](img/prez_avec_captures/prez_avec_captures_074_align_prec.png)
… ou avec la suivante.
![prez avec captures](img/prez_avec_captures/prez_avec_captures_074_align_suiv.png)
Le soucis du détail : le type du pointeur.
![pointeurs vista aero](img/vista_aero_cursors.gif)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_095_pointeur_milieu.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_095.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_096.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_097.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_098.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_099.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_100.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_101.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_102.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_103.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_103.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_104.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_105.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_106.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_107.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_108.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_109.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_110.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_111.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_112.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_113.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_114.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_115.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_116.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_117.png)
Cliquer ici pour visualiser le rendu Flash.
![prez avec captures](img/prez_avec_captures/prez_avec_captures_117.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_118.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_119.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_120.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_121.png)
Une fois satisfait, c’est le moment d’exporter les images.
![prez avec captures](img/prez_avec_captures/prez_avec_captures_121.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_122.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_123.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_124.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_125.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_126.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_127.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_128.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_129.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_130.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_131.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_132.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_133.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_134.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_135.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_136.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_137.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_138.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_139.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_140.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_141.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_142.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_143.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_144.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_145.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_146.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_147.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_148.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_149.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_150.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_151.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_152.png)
![prez avec captures](img/prez_avec_captures/prez_avec_captures_153.png)
Reste la phase de l’assemblage…
![prez avec captures](img/prez_avec_captures/prez_avec_captures_153.png)
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 !
Christophe Gragnic, le 26/09/2014, 15h05'58".