Les films de démonstration

Le studio, en trois phrases

Six films — deux par thème — se posent tout en haut de chaque boutique, dans la section « Regardez-le fonctionner ». Le premier montre à la créatrice ce que voit sa cliente ; le second lui montre son côté à elle : la barre d’administration, l’inspecteur, une modification en direct, la publication.

Ils ne sont pas filmés à la main. Un script ouvre un vrai navigateur sur la vraie boutique, joue le scénario, et enregistre. Un curseur est dessiné par-dessus (sans quoi on verrait des panneaux s’ouvrir sans savoir ce qui a été touché) et une légende raconte chaque plan — il n’y a pas de son.

Conséquence utile : le jour où le panier ou l’éditeur change, on ne refait rien à la main. On relance deux commandes, et les six films sont refaits en cinq minutes.

Ce que racontent les films

Deux films par thème. Le premier se met à la place d’une cliente, le second à la place de la créatrice.

Démo téléphone 1 min 10	La boutique, les produits, le panier qui s’ouvre, les quantités, la caisse, la commande prise — puis les avis, avec le vote par étoiles. Aucun outil n’apparaît : personne n’est connecté.
Démo ordinateur 1 min 50	La barre d’administration, l’inspecteur, la case qui décide où passent les commandes (chez elle, ou renvoyées vers Etsy avec le lien de chaque fiche), l’écriture en direct, les avis à relire, l’onglet « Réglages » (le menu du haut, le logo, les six vérifications de branchement), « Publier », et pour finir l’écran « veuillez souscrire à l’offre AGENE » que voit toute boutique sans abonnement.

Démo téléphone
1 min 10

La boutique, les produits, le panier qui s’ouvre, les quantités, la caisse, la commande prise — puis les avis, avec le vote par étoiles. Aucun outil n’apparaît : personne n’est connecté.

Démo ordinateur
1 min 50

La barre d’administration, l’inspecteur, la case qui décide où passent les commandes (chez elle, ou renvoyées vers Etsy avec le lien de chaque fiche), l’écriture en direct, les avis à relire, l’onglet « Réglages » (le menu du haut, le logo, les six vérifications de branchement), « Publier », et pour finir l’écran « veuillez souscrire à l’offre AGENE » que voit toute boutique sans abonnement.

Refaire les six films

Dans le Terminal, sur le Mac. Trois commandes, dans cet ordre. La première ouvre un petit serveur et reste ouverte : laissez-la tourner dans sa fenêtre et ouvrez-en une seconde pour la suite.

Servir le site en local le tournage filme la boutique depuis votre Mac, pas depuis internet : on voit tout de suite ce qu’on vient de changer. Pas python3 -m http.server : celui-là ne répond qu’à un seul à la fois et le tournage reste bloqué
cd ~/agene/agene.fr/plateforme/studio && python3 servir.py
Tourner environ douze minutes pour les six — les films durent maintenant une minute dix et près de deux minutes. L’écran ne bouge pas : tout se passe dans un navigateur caché
cd ~/agene/agene.fr/plateforme/studio && node tourner.js tout
Monter et mettre en place convertit, compresse, coupe le début, et pose les fichiers dans les trois thèmes
cd ~/agene/agene.fr/plateforme/studio && ./monter.sh
Publier les films partent en ligne avec le reste du site
cd ~/agene/agene.fr/plateforme && ./publier.sh

Un seul film, quand une seule chose a changé — c’est plus rapide et ça ne touche pas aux autres :

node tourner.js atelier ordinateur && ./monter.sh atelier

Le premier mot est le thème — boutique, atelier ou galerie. Le second est le film — telephone ou ordinateur.

Les six films, en ligne

Mesuré à l’instant sur agene.fr. Un film absent ou d’un autre type que video/mp4 veut dire que la mise en place n’est pas allée au bout.

lecture…

Modifier un film sans tout refaire

Changer une phrase à l’écran	`studio/tourner.js` — chaque plan commence par `await dire(page, '…')`. On change le texte, on retourne ce film-là.
Changer l’ordre ou ajouter un plan	`studio/tourner.js`, fonctions `filmTelephone` et `filmOrdinateur`. Un plan = une légende, un geste (`clic`, `vers`, `descendre`), une pause.
Changer le rythme	Les `dodo(1800)` sont des pauses en millisecondes. Plus long = on a le temps de lire.
Changer l’allure du curseur ou des légendes	`studio/studio.js` — c’est du CSS, en haut du fichier.
Changer le poids des fichiers	`studio/monter.sh`, le `-crf 30`. Plus petit = plus net et plus lourd.
Comprendre ce que chaque plan doit prouver	`studio/scenario.md` — les vingt-huit plans, un par un, avec le bouton dont chacun dépend.

Quand le tournage s’arrête

C’est voulu. Si un bouton a changé de nom, le script s’arrête et dit lequel plutôt que de filmer un écran vide :

ÉCHEC : plan cassé : « #pn-commander » n’existe plus

Il suffit alors de corriger ce plan-là dans tourner.js. La liste complète des boutons dont les films dépendent est dans studio/LISEZ-MOI.md.