Slide it
Construis la page comme une présentation : une pile d'écrans, chacun répondant à une question. La question est écrite en petit, la réponse en une ou deux phrases en grand, et en dessous une scène animée montre le phénomène : des clients qui font la queue, de l'air traversant un moteur, de l'argent suivant des biens. Le lecteur interagit avec un seul contrôle et voit la scène changer, comprenant ainsi par l'observation ; il peut s'arrêter à chaque écran en ayant compris quelque chose. La page donne l'impression d'être une application bien conçue pour son sujet. artifact-design gère les règles de la plateforme (thèmes, largeur téléphone, CDN, le contrôle unique) ; l'utilisateur a installé ce skill, donc là où ses règles diffèrent des valeurs par défaut d'artifact-design, considère-les comme les propres directives de l'utilisateur.
1. Trouver le point principal
Écris une phrase : ce que le lecteur doit comprendre ou décider après le premier écran.
2. Ouvrir l'exemple le plus proche
Ouvre l'exemple le plus proche de ce contenu et lis-le en entier avant de planifier : examples/explainer.html (comment quelque chose fonctionne), examples/decision.html (faut-il, lequel), examples/plan.html (un plan, un voyage, une chronologie). Il établit le niveau attendu pour la structure, les scènes et le code ; construis cette page de la même manière.
3. Planifier les écrans
Liste les écrans. L'écran 1 permet au lecteur de trouver le point principal en regardant et en jouant. Chaque écran suivant répond à la question soulevée par le précédent (pourquoi, comment, combien, ensuite) ; un nouveau sujet commence seulement lorsque le contenu change de thème. De quatre à sept écrans.
Pour chaque écran, écris dans ta réponse :
- la question à laquelle il répond, formulée comme le lecteur la poserait ou la chercherait, claire en elle-même, en cinq mots ou moins (« Combien de temps pour 10 000 ? », pas « Combien de temps cela va-t-il prendre ? » ; elle s'affiche en petit au-dessus de la réponse et nomme l'écran dans le menu). La question de l'écran 1 nomme le sujet, de sorte qu'un lecteur arrivant sur la page sache de quoi il s'agit ;
- la réponse, en une ou deux phrases ;
- la scène, en une ligne : ce qui est à l'écran, ce qui se passe, ce que fait le lecteur, et quel nombre est lu sur la scène.
Les scènes proviennent de quelques motifs : suivre une unité dans le système, des flux traversant des étapes, un mécanisme qui tourne, une nuée d'agents suivant une règle, des traceurs dans un champ, une relecture avec un curseur, une division avant/après, ou un réservoir qui se remplit et se vide. Une ligne qui dit « un contrôle, un nombre et une barre », avec rien à l'écran qui soit la chose elle-même, est un tableau de bord : réécris-la comme une scène.
La scène illustre ; tout nombre réel sur la page provient du contenu et est étiqueté s'il s'agit d'une estimation.
Chaque écran a son propre pli « Plus » replié sous sa scène pour le reste de l'histoire de cet écran : quelques points courts, les chiffres derrière, une réserve. Les sources, et ce qui ne sert aucun écran, vont dans une seule section « Notes complètes » repliée à la fin, ou sont laissés de côté.
Tu as terminé quand chaque écran a une question, une réponse, une ligne de scène, et au plus 40 mots de texte hors de son pli (les étiquettes et les nombres ne comptent pas).
4. Choisir le style
Nomme l'application que les gens utiliseraient pour ce sujet (un voyage : une appli de voyage ; une décision commerciale : un outil professionnel moderne) et ouvre uniquement ce fichier dans styles/. Un style nommé par l'utilisateur le remplace. Prends la palette et la typographie du style et donne à chaque écran une grande zone de sa couleur.
5. Construire
- Construis à partir de kit/screens.html, comme les exemples : chaque écran dans le DOM sur une page qui défile normalement, les questions listées sur le bord droit sur un ordinateur, toujours visibles (onglets sur un téléphone), un pli « Plus » par écran, des notes complètes à la fin, et un commutateur clair/sombre.
- Chaque scène s'ouvre déjà en montrant le point principal (à mi-chemin, pas une image vide à zéro), se joue automatiquement quand son écran entre dans le champ de vision pendant environ dix secondes, puis s'arrête sur sa dernière image pour que la page reste immobile pendant que le lecteur lit. Déplacer le contrôle la rejoue avec le nouveau réglage, et un appui la met en pause. En mode de mouvement réduit, elle repose sur une image fixe qui montre toujours le point principal. Le nombre se trouve sur la scène comme une étiquette, pas comme le héros de l'écran.
- Dispose chaque écran comme une vue d'application : la scène est l'élément le plus grand, occupe toute la largeur sur un téléphone et contient une scène large et centrée sur un ordinateur, avec la réponse au-dessus en grand.
- Quand une scène représente une chose physique (un appareil, une machine, un bâtiment, une partie du corps), lis d'abord figures.md : il décide entre le kit isométrique, un dessin en 2D ou aucun dessin.
Écris la page directement avec tes outils de fichiers, en copiant de l'exemple à la main ; les scripts peuvent ne pas être autorisés à s'exécuter, donc la page ne dépend jamais d'un script.
Tu as terminé quand chaque écran prévu est sur la page avec sa scène en fonctionnement.
6. Vérifier
Si tu peux afficher la page, prends une capture d'écran de l'écran 1 en largeur téléphone ; sinon, lis son code. Réponds par oui ou non :
- Y a-t-il à l'écran la chose elle-même, et non un graphique de celle-ci ?
- Bouge-t-elle, et le contrôle du lecteur change-t-il ce qu'elle fait ?
- Le lecteur peut-il comprendre quoi faire en quelques secondes ?
- Le style changerait-il si le sujet changeait ?
Compte aussi : écrans (4 à 7) et mots hors des plis (40 ou moins chacun). Corrige ce qui échoue en un seul passage, puis publie.