Aumnertic/scene-ppt

Conception de PPT contextuelle

Cette compétence fournit deux éléments :

1. Références de modèles : les exemples finis dans styles/<branche>/exemplar/ et samples/.
2. Guide de conception : les explications dans guide/ sur « comment organiser, quelles formes utiliser ».

Principe fondamental : le style suit le scénario et les documents, il n'est pas figé. Les exemples servent à définir des standards de qualité et à montrer des techniques, pas à être copiés. Un nouveau deck doit être recomposé selon son propre contenu. Copier la mise en page des exemples ou faire ressembler chaque deck au précédent est précisément ce que cette compétence cherche à éviter : « l'effet IA ».

Configuration requise

• macOS, Google Chrome, uv. Le rendu utilise le Chrome local, pas besoin de télécharger un navigateur.
• Les polices sont celles du système macOS et ne peuvent pas être incluses dans la compétence. Les graisses des polices chinoises doivent être spécifiées par leur nom PostScript, par exemple STSongti-SC-Black, FZLTTHK--GBK1-0. Écrire uniquement le nom de famille avec font-weight entraînera un retour à la graisse normale.

Processus

00 Évaluation du scénario

Lisez d'abord les documents donnés par l'utilisateur. Ne posez pas de questions auxquelles les documents peuvent répondre. Posez uniquement des questions dont « la réponse changera une décision de conception », au maximum 3 à 4 à la fois. Utilisez l'outil de question si disponible.

Question	Détermine quoi
Dans quel contexte ? Par exemple compétition de pitch, rapport de cours ou académique, réunion de classe ou événement scolaire, rapport de travail, autre	Quelle branche choisir
Présenté sur écran en direct, ou envoyé comme fichier à lire seul ? Durée de la présentation ?	Densité d'information et nombre de diapositives. Sur écran : gros caractères, peu de texte, environ 1 minute par diapositive. Fichier : informations plus denses
Que voulez-vous que le public retienne ou ressente ? Par exemple crédible, réfléchi, chaleureux et amusant, passionné	Quel thème dans la branche
Y a-t-il des couleurs, logos ou modèles obligatoires ? Par exemple logo de l'école, couleur de la classe, exigences du concours	Variable de couleur principale

Scénario → Branche et thème

Scénario	Branche	Comment choisir le thème	Densité
Challenge Cup, Internet+, concours de startup, soutenance de projet	roadshow-cn	Un seul thème ; si le concours est commercial, tons dorés vifs, ajouter un vert technologique	Rempli (plus de 70 %)
Rapport de fin de cours, rapport de lecture, présentation de recherche en groupe	course-report	Sciences humaines : paper ; Sciences, design, données : swiss	Blanc possible, fort contraste de taille de police
Réunion de classe, bilan de mi/fin de semestre, journée sportive, club, remise de diplôme	school-event	Souvenirs, remerciements : handbook ; Compétition, motivation : pop	Blanc possible, chaque diapositive a un « objet tangible »
Pour mettre en valeur le design et le style personnel : portfolio, entretien d'embauche ou de master, partage de design, discours personnel	curve-minimal	Pour un style sobre, rationnel, pour fichier ou impression : pen (fond clair) ; Pour plus d'expressivité et de personnalité, diffusion sur écran : ribbon (fond foncé)	Très peu, beaucoup de blanc ; un seul point fort par diapositive
Aucun ne convient	Créer un nouveau thème ou une nouvelle branche, voir ci-dessous	—	—

S'il n'y a pas de branche adaptée, ne forcez pas la branche la plus proche. Dérivez un nouveau tokens.css selon l'ordre « caractère → polices → langage des formes → couleurs ». La distinction entre variables obligatoires et optionnelles est indiquée en tête de styles/roadshow-cn/tokens.css. Utilisez d'abord scripts/fontcheck.py pour vérifier que Chrome utilise bien les polices.

Les couleurs principales sont d'abord extraites des documents de l'utilisateur, comme les couleurs officielles de l'école, les couleurs de la classe, ou les couleurs liées au sujet.

01 Organisation du matériel

Listez les photos, chiffres clés, citations, fichiers de certificats dans les documents de l'utilisateur. Le nombre de photos influence directement la mise en page : moins de 3 photos, pas de mur de photos. Actuellement, cette étape se fait manuellement, sans script.

02 Plan

D'abord, définissez les chapitres, puis attribuez un rôle à chaque diapositive : couverture, chapitre, contenu, données, fin. Les types de diapositives typiques de chaque branche sont dans styles/<branche>/style.md.

03 Choix de la forme pour chaque diapositive

Pour chaque diapositive, identifiez d'abord sa relation d'information (hiérarchie, séquence, comparaison, classement, proportion, chiffre clé, parallélisme, photos d'événement...), puis allez dans guide/shapes.md pour trouver les formes candidates correspondantes et choisissez-en une selon les critères de sélection et la branche. Si vous ne pouvez pas expliquer « pourquoi cette forme », c'est que vous vous êtes trompé. La décoration vient en dernier, choisissez-la selon son rôle dans la composition (section 4 du même document).

04 Rendu

1. Référez-vous à la structure du fichier de styles/<branche>/exemplar/deck.html pour écrire, sans copier sa composition :
   • La première ligne de <head> doit contenir le script de thème <script>{const t=new URLSearchParams(location.search).get('theme');if(t)document.documentElement.dataset.theme=t}</script>. Si vous l'oubliez, render.py transmettra le nom du thème mais rendra en silence le thème par défaut ;
   • Ensuite, référencez tokens.css, lib/base.css, et le components.css de la branche. roadshow-cn est une branche à thème unique et n'utilise pas lib/base.css, suivez son propre modèle ;
   • À la fin de la page, référencez lib/shapes.js ;
   • Chaque diapositive est une `<section class=