oxedyne/daimond/www/guide/fr/interface.html
36.2 KiB, 51 runs
created by r2519314175:1207, which is this file's identity for as long as the history lasts, whatever it is later renamed to
download · who wrote it · its history
| 1 | <!DOCTYPE html> |
| 2 | <html lang="fr" data-guide-locale="fr" data-guide-locales="en de es fr ja ko pt-BR zh-Hans"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> |
| 6 | <title>L’interface — Guide Daimond</title> |
| 7 | <link rel="icon" type="image/svg+xml" href="../../assets/daimond_mark.svg"> |
| 8 | <link rel="stylesheet" href="../../css/variables.css"> |
| 9 | <link rel="stylesheet" href="../../css/guide.css"> |
| 10 | <style> |
| 11 | /* The region map. On a phone the whole schematic scaled to the column width put |
| 12 | its labels at five pixels, which is a diagram that says nothing to the reader |
| 13 | who most needs it. It keeps a floor on its width and scrolls sideways inside |
| 14 | its own box instead: the page still never scrolls sideways, and the words can |
| 15 | still be read. The same treatment the widget map on social.html has, and the |
| 16 | floor is set from the same measurement -- 720px puts this map's smallest label |
| 17 | at the eleven rendered pixels that one's smallest label already gets, because |
| 18 | this map's smallest type is 9 units against that one's 10. */ |
| 19 | .diagram.scrolls { overflow-x: auto; } |
| 20 | .diagram.scrolls svg { min-width: 720px; } |
| 21 | </style> |
| 22 | <script src="../frame.js"></script> |
| 23 | <script src="search-index.js"></script> |
| 24 | <script src="../search.js"></script> |
| 25 | </head> |
| 26 | <body> |
| 27 | |
| 28 | <header class="site-head"> |
| 29 | <div class="site-head-inner"> |
| 30 | <a class="brand" href="index.html" aria-label="Guide Daimond, accueil"> |
| 31 | <img class="wordmark wm-dark" src="../../assets/daimond_word.svg" alt="Daimond" translate="no"> |
| 32 | <img class="wordmark wm-light" src="../../assets/daimond_word_dark.svg" alt="Daimond" translate="no"> |
| 33 | <span class="brand-sub">Guide</span> |
| 34 | </a> |
| 35 | <nav class="site-nav" aria-label="Pages du guide"> |
| 36 | <a href="index.html">Premiers pas</a> |
| 37 | <a href="interface.html" aria-current="page">L’interface</a> |
| 38 | <a href="models.html">Modèles & crédits</a> |
| 39 | <a href="chats-and-diamonds.html">Chats & Diamonds</a> |
| 40 | <a href="../capps.html">Capps</a> |
| 41 | <a href="email-web-files.html">E-mail, Web & fichiers</a> |
| 42 | <a href="accounts.html">Comptes</a> |
| 43 | <a href="sync.html">Synchronisation entre appareils</a> |
| 44 | <a href="spending.html">Dépenses</a> |
| 45 | <a href="../machine-operations.html">Commandes sur la machine</a> |
| 46 | <a href="social.html">Social</a> |
| 47 | </nav> |
| 48 | </div> |
| 49 | </header> |
| 50 | |
| 51 | <main> |
| 52 | <h1>L’interface</h1> |
| 53 | <p class="lede">Une visite de l’écran : trois zones, et ce que fait chaque partie. Une fois les zones connues, tout dans Daimond a sa place.</p> |
| 54 | |
| 55 | <figure class="diagram scrolls"> |
| 56 | <svg class="regionmap" viewBox="0 0 760 470" role="img" aria-labelledby="rm-title rm-desc" preserveAspectRatio="xMidYMid meet"> |
| 57 | <title id="rm-title">Les régions nommées de la fenêtre Daimond</title> |
| 58 | <desc id="rm-desc">A schematic of the window. Across the top is the top bar. Below it, three zones side by side: the rail on the left (what you work on above a divider, the admin panel below it), the stage in the centre, holding the conversation and, beside it, from one to three more panels according to how wide the stage is, and the dock on the right (Email, Workspace and Agents).</desc> |
| 59 | <style> |
| 60 | .regionmap text { font-family: var(--font); } |
| 61 | .rm-win { fill: var(--bg-primary); stroke: var(--border-2); stroke-width: 1; } |
| 62 | .rm-bar { fill: var(--bg-tertiary); stroke: var(--border); stroke-width: 1; } |
| 63 | .rm-pan { fill: var(--bg-secondary); stroke: var(--border); stroke-width: 1; } |
| 64 | .rm-cell { fill: var(--bg-tertiary); stroke: var(--border); stroke-width: 1; } |
| 65 | .rm-name { fill: var(--accent); font-weight: 700; } |
| 66 | .rm-title{ fill: var(--text-secondary); font-weight: 600; } |
| 67 | .rm-sub { fill: var(--text-muted); } |
| 68 | .rm-fill { fill: var(--accent); } |
| 69 | .rm-soft { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1; } |
| 70 | .rm-rule { stroke: var(--accent); stroke-width: 2; } |
| 71 | .rm-div { stroke: var(--border-2); stroke-width: 1.5; } |
| 72 | .rm-divf { fill: var(--border-2); } |
| 73 | .rm-skel { fill: var(--text-muted); opacity: .30; } |
| 74 | </style> |
| 75 | |
| 76 | <!-- window + top bar --> |
| 77 | <rect class="rm-win" x="10" y="10" width="740" height="450" rx="16"/> |
| 78 | <path class="rm-bar" d="M10,26 a16,16 0 0 1 16,-16 h708 a16,16 0 0 1 16,16 v30 h-740 z"/> |
| 79 | <!-- top-bar furniture: brand, name pill, panel chips, appearance menu --> |
| 80 | <rect class="rm-fill" x="30" y="27" width="12" height="12" rx="2" transform="rotate(45 36 33)"/> |
| 81 | <rect class="rm-skel" x="52" y="29" width="46" height="7" rx="3.5"/> |
| 82 | <rect class="rm-soft" x="118" y="22" width="98" height="22" rx="11"/> |
| 83 | <text class="rm-name" x="167" y="37" text-anchor="middle" font-size="12">La barre du haut</text> |
| 84 | <rect class="rm-cell" x="430" y="25" width="40" height="16" rx="8"/> |
| 85 | <rect class="rm-cell" x="478" y="25" width="34" height="16" rx="8"/> |
| 86 | <circle cx="716" cy="33" r="9" fill="none" stroke="var(--border-2)"/> |
| 87 | <path class="rm-fill" d="M716,24 a9,9 0 0 1 0,18 z" opacity=".5"/> |
| 88 | |
| 89 | <!-- ── rail ───────────────────────────────────────────── --> |
| 90 | <rect class="rm-pan" x="22" y="66" width="196" height="382" rx="10"/> |
| 91 | <text class="rm-name" x="36" y="93" font-size="15">La barre latérale</text> |
| 92 | <text class="rm-sub" x="112" y="93" font-size="11">à gauche</text> |
| 93 | <line class="rm-rule" x1="36" y1="100" x2="70" y2="100"/> |
| 94 | <text class="rm-title" x="36" y="120" font-size="10.5">Ce sur quoi vous travaillez</text> |
| 95 | <!-- Diamonds --> |
| 96 | <text class="rm-sub" x="36" y="137" font-size="9" letter-spacing="1">DIAMONDS</text> |
| 97 | <text class="rm-sub" x="204" y="137" text-anchor="end" font-size="12">+</text> |
| 98 | <rect class="rm-cell" x="36" y="142" width="170" height="26" rx="6"/> |
| 99 | <rect class="rm-skel" x="44" y="149" width="70" height="6" rx="3"/> |
| 100 | <rect class="rm-soft" x="150" y="148" width="20" height="9" rx="4.5"/> |
| 101 | <rect class="rm-soft" x="174" y="148" width="28" height="9" rx="4.5"/> |
| 102 | <rect class="rm-cell" x="36" y="172" width="170" height="26" rx="6"/> |
| 103 | <rect class="rm-skel" x="44" y="179" width="58" height="6" rx="3"/> |
| 104 | <rect class="rm-soft" x="150" y="178" width="24" height="9" rx="4.5"/> |
| 105 | <!-- Chats --> |
| 106 | <text class="rm-sub" x="36" y="219" font-size="9" letter-spacing="1">CHATS</text> |
| 107 | <rect class="rm-cell" x="36" y="224" width="170" height="18" rx="6"/> |
| 108 | <rect class="rm-skel" x="44" y="230" width="96" height="6" rx="3"/> |
| 109 | <!-- divider between the two halves of the rail --> |
| 110 | <line class="rm-div" x1="30" y1="258" x2="198" y2="258"/> |
| 111 | <rect class="rm-divf" x="106" y="255.5" width="16" height="5" rx="2.5"/> |
| 112 | <text class="rm-sub" x="36" y="274" font-size="9.5">séparateur — glissez-le</text> |
| 113 | <!-- Admin panel --> |
| 114 | <text class="rm-title" x="36" y="294" font-size="10.5">Panneau d’administration</text> |
| 115 | <g> |
| 116 | <rect class="rm-cell" x="36" y="300" width="170" height="15" rx="4"/> |
| 117 | <circle class="rm-fill" cx="46" cy="307.5" r="3" opacity=".55"/> |
| 118 | <rect class="rm-skel" x="56" y="304.5" width="66" height="6" rx="3"/> |
| 119 | <rect class="rm-skel" x="176" y="304.5" width="26" height="6" rx="3"/> |
| 120 | <rect class="rm-cell" x="36" y="320" width="170" height="15" rx="4"/> |
| 121 | <circle class="rm-fill" cx="46" cy="327.5" r="3" opacity=".55"/> |
| 122 | <rect class="rm-skel" x="56" y="324.5" width="54" height="6" rx="3"/> |
| 123 | <rect class="rm-skel" x="176" y="324.5" width="26" height="6" rx="3"/> |
| 124 | <rect class="rm-cell" x="36" y="340" width="170" height="15" rx="4"/> |
| 125 | <circle class="rm-fill" cx="46" cy="347.5" r="3" opacity=".55"/> |
| 126 | <rect class="rm-skel" x="56" y="344.5" width="72" height="6" rx="3"/> |
| 127 | <rect class="rm-skel" x="176" y="344.5" width="26" height="6" rx="3"/> |
| 128 | <rect class="rm-cell" x="36" y="360" width="170" height="15" rx="4"/> |
| 129 | <circle class="rm-fill" cx="46" cy="367.5" r="3" opacity=".55"/> |
| 130 | <rect class="rm-skel" x="56" y="364.5" width="60" height="6" rx="3"/> |
| 131 | <rect class="rm-skel" x="176" y="364.5" width="26" height="6" rx="3"/> |
| 132 | </g> |
| 133 | |
| 134 | <!-- ── stage ──────────────────────────────────────────── --> |
| 135 | <rect class="rm-pan" x="228" y="66" width="300" height="382" rx="10"/> |
| 136 | <text class="rm-name" x="244" y="93" font-size="15">La scène</text> |
| 137 | <text class="rm-sub" x="330" y="93" font-size="11">au centre</text> |
| 138 | <line class="rm-rule" x1="244" y1="100" x2="290" y2="100"/> |
| 139 | <text class="rm-title" x="244" y="119" font-size="10.5">Le chat — votre conversation</text> |
| 140 | <text class="rm-sub" x="244" y="133" font-size="9.5">two to four seats, by width</text> |
| 141 | <rect class="rm-cell" x="244" y="146" width="196" height="30" rx="8"/> |
| 142 | <rect class="rm-skel" x="254" y="153" width="176" height="6" rx="3"/> |
| 143 | <rect class="rm-skel" x="254" y="164" width="120" height="6" rx="3"/> |
| 144 | <rect class="rm-soft" x="344" y="184" width="168" height="26" rx="8"/> |
| 145 | <rect class="rm-skel" x="354" y="194" width="148" height="6" rx="3"/> |
| 146 | <rect class="rm-cell" x="244" y="218" width="212" height="30" rx="8"/> |
| 147 | <rect class="rm-skel" x="254" y="225" width="192" height="6" rx="3"/> |
| 148 | <rect class="rm-skel" x="254" y="236" width="150" height="6" rx="3"/> |
| 149 | <!-- composer --> |
| 150 | <rect class="rm-cell" x="244" y="410" width="268" height="28" rx="8"/> |
| 151 | <rect class="rm-skel" x="256" y="421" width="150" height="6" rx="3"/> |
| 152 | <circle class="rm-fill" cx="498" cy="424" r="9"/> |
| 153 | |
| 154 | <!-- ── dock ───────────────────────────────────────────── --> |
| 155 | <rect class="rm-pan" x="538" y="66" width="200" height="382" rx="10"/> |
| 156 | <text class="rm-name" x="552" y="93" font-size="15">Le dock</text> |
| 157 | <text class="rm-sub" x="642" y="93" font-size="11">à droite</text> |
| 158 | <line class="rm-rule" x1="552" y1="100" x2="596" y2="100"/> |
| 159 | <!-- Email --> |
| 160 | <rect class="rm-cell" x="552" y="112" width="172" height="90" rx="8"/> |
| 161 | <text class="rm-title" x="564" y="131" font-size="11">E-mail</text> |
| 162 | <rect class="rm-skel" x="564" y="142" width="148" height="6" rx="3"/> |
| 163 | <rect class="rm-skel" x="564" y="156" width="120" height="6" rx="3"/> |
| 164 | <rect class="rm-skel" x="564" y="170" width="134" height="6" rx="3"/> |
| 165 | <rect class="rm-skel" x="564" y="184" width="96" height="6" rx="3"/> |
| 166 | <!-- Workspace --> |
| 167 | <rect class="rm-cell" x="552" y="210" width="172" height="90" rx="8"/> |
| 168 | <text class="rm-title" x="564" y="229" font-size="11">Espace</text> |
| 169 | <rect class="rm-skel" x="564" y="240" width="110" height="6" rx="3"/> |
| 170 | <rect class="rm-skel" x="576" y="254" width="120" height="6" rx="3"/> |
| 171 | <rect class="rm-skel" x="576" y="268" width="98" height="6" rx="3"/> |
| 172 | <rect class="rm-skel" x="564" y="282" width="88" height="6" rx="3"/> |
| 173 | <!-- Agents, with a mini tile that shows the chips --> |
| 174 | <rect class="rm-cell" x="552" y="308" width="172" height="132" rx="8"/> |
| 175 | <text class="rm-title" x="564" y="327" font-size="11">Agents</text> |
| 176 | <rect class="rm-pan" x="562" y="336" width="152" height="96" rx="6"/> |
| 177 | <rect class="rm-skel" x="570" y="346" width="66" height="7" rx="3.5"/> |
| 178 | <circle class="rm-fill" cx="704" cy="350" r="4"/> |
| 179 | <rect class="rm-soft" x="570" y="362" width="50" height="12" rx="6"/> |
| 180 | <text class="rm-name" x="577" y="371" font-size="8">↳</text> |
| 181 | <rect class="rm-cell" x="626" y="362" width="26" height="12" rx="6"/> |
| 182 | <rect class="rm-cell" x="658" y="362" width="36" height="12" rx="6"/> |
| 183 | <rect class="rm-skel" x="570" y="384" width="128" height="6" rx="3"/> |
| 184 | <rect class="rm-skel" x="570" y="396" width="96" height="6" rx="3"/> |
| 185 | <rect class="rm-cell" x="570" y="410" width="52" height="13" rx="6"/> |
| 186 | <rect class="rm-cell" x="628" y="410" width="40" height="13" rx="6"/> |
| 187 | </svg> |
| 188 | <figcaption>Les régions nommées. La <strong>barre du haut</strong> court en haut ; en dessous, trois zones : la <strong>barre latérale</strong> (à gauche) — ce sur quoi vous travaillez, au-dessus d’un séparateur, avec le panneau d’administration en dessous — la <strong>scène</strong> (centre) for the conversation and whatever you have opened beside it, two seats on a laptop and up to four on a wide screen; and the <strong>dock</strong> (à droite) qui tient E-mail, Espace et Agents.</figcaption> |
| 189 | </figure> |
| 190 | |
| 191 | <h2 id="s1">La barre latérale — à gauche</h2> |
| 192 | <p>La barre latérale est coupée par un séparateur que vous pouvez glisser mais pas retirer. Au-dessus se trouve ce sur quoi vous travaillez ; en dessous, le panneau d’administration.</p> |
| 193 | |
| 194 | <p>Une ligne nommée <span class="ui">Tout</span> se tient au-dessus de l’ensemble et retient chaque Diamond, chaque chat, chaque ouvrier, chaque boîte mail et chaque page récupérée d’une seule pression. Son voyant est la racine de tous les autres dans l’application : vert tant que tout ce qui peut dépenser tourne, rouge quand rien ne tourne, ambre entre les deux. Le bouton de fermeture de la barre latérale elle-même est sur cette ligne, le seul qui parle pour toute la barre.</p> |
| 195 | |
| 196 | <div class="cards"> |
| 197 | <div class="card"> |
| 198 | <h3 id="s2">Diamonds</h3> |
| 199 | <p>Les travaux que vous gardez. Un Diamond retient ce qu’un chat vous a appris sur un travail, pour que la portion suivante démarre de ce que vous savez. Ajoutez-en un avec le <strong>+</strong> à côté de <strong>Diamonds</strong> ; le bouton voisin les dessine en <strong>graphe</strong>. Étiquetez-les à mesure qu’ils s’accumulent, et la ligne <span class="ui">Filtrer par étiquette</span> resserre la liste.</p> |
| 200 | </div> |
| 201 | <div class="card"> |
| 202 | <h3 id="s3">Chats</h3> |
| 203 | <p>Vos conversations, la plus récente d’abord. Démarrez-en une avec le <strong>+</strong> à côté de <strong>Chats</strong> ; cliquez un chat pour le ramener au centre. Le <span class="ui">⋯</span> à côté du <strong>+</strong> contient <span class="ui">Supprimer tous les chats</span>, qui concerne chaque chat plutôt qu’un seul et ne se tient donc pas sur une tuile de chat.</p> |
| 204 | </div> |
| 205 | </div> |
| 206 | <p>Un second séparateur se trouve entre les deux listes. Les Diamonds s’accumulent, et sans lui une longue liste poussait les tuiles de chat hors du bas ; glissez-le pour donner de la place à l’une ou à l’autre, ou double-cliquez-le pour un partage égal. Aucune ne peut être écrasée entièrement, et le partage est retenu par appareil avec le reste de votre disposition.</p> |
| 207 | |
| 208 | <p>Les Diamonds sont au-dessus des chats, comme le terrain est fait : vous creusez dans la conversation en dessous, et ce que vous remontez est taillé et poli au-dessus. Un chat est brut, un Diamond est travaillé, et l’ordre dit dans quel sens le travail voyage sans un mot d’explication. Le mot <strong>chat</strong> a été laissé tel quel pour la même raison. Un Diamond est une chose d’un genre nouveau et mérite un nom nouveau ; une conversation est ordinaire et garde son mot ordinaire.</p> |
| 209 | |
| 210 | <p>Les deux sont traités en détail dans <a href="chats-and-diamonds.html">Chats & Diamonds</a>.</p> |
| 211 | |
| 212 | <h3 id="s4">Le panneau d’administration</h3> |
| 213 | <p>Sous le séparateur, le panneau d’administration est l’état de la machine d’un coup d’œil. Les réglages vivent ici et non dans une fenêtre surgissante : un chat reste donc vivant à côté, et vous pouvez demander à Daimond ce qu’est un mot de passe d’application pendant que la zone qui en réclame un est encore à l’écran. Chaque ligne sur laquelle on peut agir est un bouton qui ouvre ce qu’elle nomme :</p> |
| 214 | <ul> |
| 215 | <li>Une <strong>ligne d’identité</strong> (qui vous êtes sur cet appareil)avec une roue dentée de réglages à côté.</li> |
| 216 | <li><span class="ui">Modèles</span>, qui compte les fournisseurs que vous avez connectés et ouvre le formulaire Modèles.</li> |
| 217 | <li><span class="ui">Crédits</span>, qui montre votre solde et ouvre la vue Crédits.</li> |
| 218 | <li><span class="ui">Outils · N sur M</span>, combien d’outils sont disponibles, qui ouvre le panneau Outils.</li> |
| 219 | <li><span class="ui">Version</span>, qui nomme la version que vous utilisez et depuis combien de temps, et ouvre l’historique des versions plus bas.</li> |
| 220 | <li><strong>Des lignes de stockage de l’espace de travail</strong>, la place que vos fichiers occupent à chaque endroit où un espace de travail peut vivre.</li> |
| 221 | </ul> |
| 222 | |
| 223 | <h3 id="s5">Quelle version vous utilisez</h3> |
| 224 | <p>La ligne <span class="ui">Version</span> se lit comme un nom et un âge (<span class="ui">Version · Albany · aujourd’hui</span>), et non comme un numéro de build. Les versions portent des noms de lieux d’Australie-Occidentale par ordre alphabétique : la suite est donc lisible sans rien aller chercher. Un nom marque un <strong>jalon</strong> : Daimond publie plusieurs builds par jour, et un nom pour chacun serait du bruit. Survolez la ligne pour l’identifiant du build et sa date de publication.</p> |
| 225 | <p>Un clic sur la ligne ouvre, dans le panneau d’administration, un <strong>historique des versions</strong>, qui se lit de haut en bas :</p> |
| 226 | <ul> |
| 227 | <li><strong>Ce qui est prévu</strong>, en premier, dans un contour pointillé.</li> |
| 228 | <li><strong>Le build que vous utilisez</strong>, marqué <span class="ui">vous êtes ici</span>.</li> |
| 229 | <li><strong>Tous les builds antérieurs</strong>, le plus récent d’abord, chacun avec sa date, une ligne disant ce qui a changé, son identifiant de build et sa place dans le registre scellé.</li> |
| 230 | </ul> |
| 231 | <p>Ce n’est pas un journal des modifications tenu à côté de l’application. C’est le registre publié que lit le contrôle de livraison de Daimond lui-même : tous les builds jamais servis, dans l’ordre, en une chaîne qui ne peut être réécrite sans casser. Les notes d’une ligne ont été ajoutées sans déranger cette chaîne : vous lisez donc une histoire annotée et non un récit qu’on en refait.</p> |
| 232 | <div class="note"><strong>L’entrée prévue a l’air différente parce qu’elle l’est.</strong> Elle ne porte ni identifiant de build ni numéro de sceau, et dit en toutes lettres qu’elle n’est pas encore construite et qu’aucune date n’est promise. Tout ce qui se trouve en dessous est scellé et vérifiable ; une déclaration d’intention n’est ni l’un ni l’autre, et ne devrait pas emprunter l’autorité d’un registre.</div> |
| 233 | <p>Il n’y a pas de retour vers un build plus ancien. Un build épinglé se heurte au refus de la passerelle elle-même de parler à un client trop vieux ; il peut porter une faille de sécurité depuis corrigée, dans une application qui tient vos clés de fournisseur, votre identité et vos clés d’accès ; et face à des données locales plus récentes, il risque de les lire de travers. Le déplaisir devant un changement se répond au changement, en disant clairement ce qui a changé — c’est à cela que servent ces notes.</p> |
| 234 | |
| 235 | <h3 id="s6">Comment arrivent les mises à jour</h3> |
| 236 | <p>Daimond se met à jour tout seul. Il n’y a rien à télécharger : l’onglet en cours remarque un build plus récent et se recharge dessus, et le rechargement ne perd rien, car chaque démarrage récupère votre travail depuis le journal de durabilité.</p> |
| 237 | <p>La seule question est <em>quand</em>. Une mise à jour normale attend un moment calme — l’onglet en arrière-plan, ou laissé intact une dizaine de minutes — et ne se recharge jamais par-dessus un tour en cours ou un message à moitié tapé. La puce à côté des boutons du haut indique quand une mise à jour est prête ; cliquez dessus pour la prendre tout de suite.</p> |
| 238 | <p>Certaines mises à jour ne peuvent pas attendre. Quand un changement fait qu’un onglet périmé ne peut plus travailler avec le serveur, le serveur le refuse, et l’onglet se recharge de lui-même sur la version courante. Même là, il ne coupe pas un tour en cours, et il attend un instant après votre dernière frappe au lieu de recharger au milieu d’une phrase. Il n’y a pas moyen de refuser une version : l’application que vous garderiez est la même application, des mêmes personnes, et un navigateur ne peut pas faire tourner le build d’hier contre le serveur d’aujourd’hui.</p> |
| 239 | |
| 240 | <h2 id="s7">La scène — au centre</h2> |
| 241 | <p>The stage is the middle zone. Its occupants sit side by side and never dock at the right, so you never leave the conversation to do a thing: read the message, watch the page, read the document beside the pages it was typeset into, with the daimon still there to be asked about any of it.</p> |
| 242 | |
| 243 | <p>How many seats there are is decided by <strong>how wide the stage is</strong>, not by a fixed number: two at the narrowest, four at the widest, and one more for roughly every 380 pixels, which is where a line of prose still holds about 45 characters. Four of them want around 1550 pixels of stage, so they are for a large monitor; a laptop usually gets two or three. Two is the floor whatever the width, because the whole point of the stage is that whatever you are attending to opens <em>à côté de</em> the conversation rather than over it.</p> |
| 244 | |
| 245 | <p>Narrow the window and the rightmost seat closes, the one you opened most recently first. The conversation is never the one to go. Widening again does not bring the panel back: a panel that reappeared because a window grew would be one you never asked for, with no way to tell it not to, and getting it back is one click on its chip. Ask for a panel when every seat is taken and the guest that has been on the stage longest leaves instead, because you have just said which one you want.</p> |
| 246 | |
| 247 | <div class="cards"> |
| 248 | <div class="card"> |
| 249 | <h3 id="s8">IA — le chat</h3> |
| 250 | <p>Là où vous parlez au daimon. C’est l’occupant par défaut, et il revient dès que la scène serait autrement vide. Vos messages, les réponses et les éventuelles étapes d’outils apparaissent ici.</p> |
| 251 | </div> |
| 252 | <div class="card"> |
| 253 | <h3 id="s9">Web</h3> |
| 254 | <p>Une page web, affichée ou pilotée. Ouverte depuis l’en-tête ou quand Daimond suit un lien.</p> |
| 255 | </div> |
| 256 | <div class="card"> |
| 257 | <h3 id="s10">Doc</h3> |
| 258 | <p>A file as its characters, given room to read it and to edit it. Its header carries the paperclip that attaches what you are reading to what you are working on.</p> |
| 259 | </div> |
| 260 | <div class="card"> |
| 261 | <h3 id="s11">Preview</h3> |
| 262 | <p>What a file looks like, as against what it says: a compiled PDF, a picture, or the typeset pages of a document as you write it. It is a panel of its own so that a source and its pages can be on screen at once, which is why the stage grew past two seats.</p> |
| 263 | </div> |
| 264 | <div class="card"> |
| 265 | <h3 id="s12">Message</h3> |
| 266 | <p>Un seul message, ouvert depuis E-mail, lu à côté du chat.</p> |
| 267 | </div> |
| 268 | <div class="card"> |
| 269 | <h3 id="s13">Outils</h3> |
| 270 | <p>Ce que Daimond sait faire, et ce que coûterait le reste. Ouvert depuis la ligne <span class="ui">Outils</span> du panneau d’administration.</p> |
| 271 | </div> |
| 272 | <div class="card"> |
| 273 | <h3 id="s14">Rédiger</h3> |
| 274 | <p>Écrire un message. Rien ici ne part de soi-même : seul le bouton <span class="ui">Envoyer</span> met du courrier sur le fil, et vous seul pouvez l’appuyer.</p> |
| 275 | </div> |
| 276 | <div class="card"> |
| 277 | <h3 id="s15">Graphe</h3> |
| 278 | <p>Vos Diamonds et les liens entre eux, dessinés. Ouvert depuis le bouton graphe en tête des Diamonds, où vous pouvez aussi les replacer ou tracer un nouveau lien.</p> |
| 279 | </div> |
| 280 | <div class="card"> |
| 281 | <h3 id="s16">Terminal</h3> |
| 282 | <p>Un vrai terminal sur votre propre machine, dans le même compartiment où tourne une commande. Voir <a href="../machine-operations.html">Commandes sur la machine</a>.</p> |
| 283 | </div> |
| 284 | </div> |
| 285 | |
| 286 | <p>Chaque invité de la scène a un en-tête avec un bouton de fermeture. Un panneau fermé ne disparaît pas : sa puce reste dans la barre du haut, non remplie, et cliquer dessus le ramène.</p> |
| 287 | |
| 288 | <h2 id="s17">Le dock — à droite</h2> |
| 289 | <p>Le dock tient les sources où vous puisez. En fermer un laisse sa puce dans la barre du haut ; cliquer la puce l’amarre de nouveau. La façon dont le dock se pave, et donc combien de panneaux il tient à la fois, c’est à vous de la régler sous <strong>Grille du dock</strong> dans le menu Apparence, décrit plus bas.</p> |
| 290 | |
| 291 | <div class="cards"> |
| 292 | <div class="card"> |
| 293 | <h3 id="s18">E-mail</h3> |
| 294 | <p>Vos boîtes mail et ce qu’elles contiennent. Ajoutez une boîte mail, synchronisez, et ouvrez un message sur la scène.</p> |
| 295 | </div> |
| 296 | <div class="card"> |
| 297 | <h3 id="s19">Espace</h3> |
| 298 | <p>Vos fichiers, comme une arborescence ordinaire. Les outils de fichiers de l’agent lisent et écrivent ici.</p> |
| 299 | </div> |
| 300 | <div class="card"> |
| 301 | <h3 id="s20">Agents</h3> |
| 302 | <p>Les exécutions d’agents en direct, à mesure qu’elles se produisent, avec le compte de celles qui travaillent.</p> |
| 303 | </div> |
| 304 | <div class="card"> |
| 305 | <h3 id="s21">Dépenses</h3> |
| 306 | <p>Ce que vous avez dépensé, et en quoi. Traité en détail dans <a href="spending.html">Dépenses</a>.</p> |
| 307 | </div> |
| 308 | <div class="card"> |
| 309 | <h3 id="s22">En attente</h3> |
| 310 | <p>Ce qu’un daimon a demandé et sur quoi il attend. Chaque ligne se trie par priorité ou par ancienneté, et on y répond par <span class="ui">Faites-le</span>, <span class="ui">En discuter d’abord</span> ou <span class="ui">Abandonner</span>.</p> |
| 311 | </div> |
| 312 | <div class="card"> |
| 313 | <h3 id="s23">Corbeille</h3> |
| 314 | <p>Les chats et Diamonds supprimés, gardés trente jours et restaurables sur n’importe lequel de vos appareils. Voir <a href="chats-and-diamonds.html">Chats & Diamonds</a>.</p> |
| 315 | </div> |
| 316 | </div> |
| 317 | |
| 318 | <h2 id="s24">La barre du haut</h2> |
| 319 | <p>En haut se trouvent la marque, une rangée de <strong>puces de panneau</strong>, et, tout à droite, un bouton pour <strong>associer un autre appareil</strong>, un dialogue <strong>À propos</strong> ainsi que ce <strong>guide</strong>, et le menu <strong>apparence et disposition</strong> — une puce apparaît à côté d’eux quand un nouveau build est sorti.</p> |
| 320 | |
| 321 | <h3 id="s25">Les puces</h3> |
| 322 | <p>Chaque panneau a une puce, ouvert comme fermé, et cliquer dessus bascule ce panneau. La puce d’un panneau ouvert est remplie : la rangée se lit donc comme une carte de ce qui est à l’écran. Si seuls les panneaux fermés en avaient une, la rangée serait la plus longue quand l’application est la plus vide, et chaque puce se déplacerait de côté à chaque usage ; une puce qui ne bouge pas est une puce dont vous pouvez apprendre la place. (Agents fait exception à <em>chaque</em> : il se tient à l’écart jusqu’au premier agent lancé.)</p> |
| 323 | <p>Les puces sont groupées par zone — barre latérale, puis scène, puis dock — avec un fin séparateur entre les groupes, dans l’ordre où les zones se tiennent à l’écran. Une puce est donc du côté où apparaîtra le panneau qu’elle ouvre. Deux marques portent un sens :</p> |
| 324 | <ul> |
| 325 | <li>Une puce de scène fermée dont le panneau <strong>displace a guest already on the stage</strong> is drawn with a dashed outline. It appears only when every seat is taken, which depends on the width, so the same chip is plain on a wide screen and dashed on a narrow one. The chat keeps its seat and the guest that has been there longest leaves. It warns without refusing, and it is an outline and not an added mark so the chip keeps its width and its neighbours stay put.</li> |
| 326 | <li>Une puce de dock fermée est <strong>grisée quand le dock est plein</strong>. Son infobulle indique le remède : une grille plus grande dans le menu d’apparence, ou fermer un panneau du dock.</li> |
| 327 | </ul> |
| 328 | |
| 329 | <h3 id="s26">Panneaux épinglés, et la galerie</h3> |
| 330 | <p>C’est vous qui décidez quelles puces sont dans la barre du haut. N’importe quel panneau peut être <strong>épinglé</strong> ou détaché ; les détachés vivent derrière une puce <span class="ui">⋯</span> en bout de rangée, avec le compte de ceux qui s’y trouvent. Cliquer dessus ouvre la <strong>galerie</strong> : tous les panneaux qui existent, cherchables par nom, groupés par zone, chaque ligne portant un contrôle d’épinglage et disant si ce panneau est ouvert. Cliquer sur une ligne ouvre ou ferme le panneau comme le ferait une puce.</p> |
| 331 | <p>La rangée ne peut être incomplète que parce que la galerie ne l’est pas. Rien n’est classé non plus selon la fréquence d’usage : une rangée qui se réordonnerait détruirait la mémoire du geste que les places fixes existent pour bâtir.</p> |
| 332 | |
| 333 | <h3 id="s27">La palette</h3> |
| 334 | <p><kbd>Ctrl</kbd> <kbd>K</kbd>, <kbd>Cmd</kbd> <kbd>K</kbd> sur un Mac — ouvre une zone de recherche qui atteint n’importe quel panneau ou réglage en tapant. Les flèches parcourent les résultats, <span class="ui">Entrée</span> lance celui qui est en surbrillance, <span class="ui">Échap</span> la ferme. Elle liste les panneaux, les palettes, les quatre tailles de texte, les grilles du dock, les langues, les devises et les modes d’autorisation. Elle n’est jamais le chemin le plus rapide vers un panneau dont vous voyez la puce ; c’est le chemin qui reste complet quel que soit le nombre de panneaux.</p> |
| 335 | |
| 336 | <h3 id="s28">Au clavier, et à l’oreille</h3> |
| 337 | <p>Daimond se pilote sans souris. <span class="ui">Tab</span> parcourt les contrôles dans l’ordre où ils sont dessinés, <span class="ui">Entrée</span> ou <span class="ui">Espace</span> actionne celui où vous êtes, et <span class="ui">Échap</span> ferme ce qui est ouvert. Chaque dialogue, menu et panneau coulissant porte aussi une croix dans son coin, un seul contrôle bâti d’une seule façon, dimensionné pour un pouce sur un téléphone.</p> |
| 338 | <p>L’endroit où vous êtes est dessiné <em>en dehors</em> du contrôle, comme un anneau détaché de son bord. Dessiné comme une modification de la bordure du contrôle lui-même, comme autrefois, l’anneau n’est lisible que tant que la bordure au repos est presque invisible — rendre les bordures visibles aurait donc retiré l’anneau de focus sur toutes les palettes à la fois. Contre la surface derrière lui, l’anneau survit à toute la gamme : mesuré sur les onze palettes, l’anneau le plus faible vaut encore quatre fois et demie le contraste que la norme demande.</p> |
| 339 | <p>Deux endroits en particulier :</p> |
| 340 | <ul> |
| 341 | <li><strong>L’e-mail est entièrement utilisable au clavier.</strong> Les boîtes mail, les dossiers, les brouillons et les messages sont des contrôles que vous pouvez atteindre et actionner, pas des lignes qui ne répondent qu’au clic. La boîte où vous êtes et le dossier que vous lisez sont annoncés comme les courants, si bien qu’un lecteur d’écran dit où vous êtes et pas seulement ce qui est là.</li> |
| 342 | <li><strong>Un dialogue garde le focus en lui-même</strong> tant qu’il est ouvert, et le rend à ce qui l’a ouvert. La tabulation ne s’égare pas derrière une fenêtre qui couvre l’écran, et en fermer un ne vous dépose pas en haut de la page.</li> |
| 343 | </ul> |
| 344 | <p>Avec un lecteur d’écran, une réponse est annoncée <strong>une fois, quand elle est arrivée</strong> (« Daimond a répondu, 120 mots »)et non à mesure qu’elle s’écrit. Une région live est lue à chaque changement : une réponse en flux vous serait donc récitée par fragments aussi longtemps que le modèle continue de taper. Les gens coupent cela, et une application dont les annonces ont été coupées a l’air utilisable et ne l’est pas. Une phrase par tour, c’est moins, et c’est utilisable.</p> |
| 345 | <p>La fenêtre a des régions nommées et de vrais titres de bout en bout, si bien que la liste des repères d’un lecteur d’écran est une table des matières qui marche pour l’application. Ce que vous ne pouvez pas atteindre ou pas entendre est un défaut, pas une limite ; dites-le.</p> |
| 346 | |
| 347 | <h3 id="s29">Apparence et disposition</h3> |
| 348 | <p>Le bouton en haut à droite ouvre un seul menu qui tient les choix sur l’allure et la tenue de Daimond, par opposition à ce qu’il fait :</p> |
| 349 | <ul> |
| 350 | <li><strong>Affichage</strong>: <span class="ui">Simple</span> ou <span class="ui">Max</span>. Simple donne à chaque chose son nom et son état de marche, tout le reste étant à une pression ; Max met le modèle, le coût et le contexte à côté, de sorte que deux se comparent sans en ouvrir aucun. Il fixe du même coup la forme de l’interface, car une forme aérée à densité maximale est une combinaison dont personne ne veut. Le rouage propre à une tuile l’emporte toujours pour cette tuile.</li> |
| 351 | <li><strong>Thème</strong>, onze palettes en trois bandes : <span class="ui">Clair</span>, <span class="ui">Intermédiaire</span> et <span class="ui">Sombre</span>. La bande sert à en trouver une ; à l’intérieur, le choix est affaire de goût, sauf <span class="ui">Ambre</span>, qui tient le bleu à l’écart de tout ce qu’elle dessine, pour lire tard le soir. Ce guide porte la palette que porte l’application lorsqu’il est affiché dans Daimond.</li> |
| 352 | <li><strong>Taille du texte</strong>: quatre paliers, <span class="ui">Petit</span>, <span class="ui">Normal</span>, <span class="ui">Grand</span> et <span class="ui">Très grand</span>. Seule la typographie répond : le cadre, les marges intérieures et les largeurs de panneau ne bougent pas, car c’est un contrôle de lecture et non un zoom. Pour une interface plus grande, utilisez le zoom du navigateur. L’échantillon du menu est composé dans la taille choisie : le contrôle montre le changement au lieu de le nommer.</li> |
| 353 | <li><strong>Grille du dock</strong>: <span class="ui">Auto</span>, <span class="ui">1</span> colonne, <span class="ui">2×2</span>, <span class="ui">2×3</span> ou <span class="ui">3×2</span>, chacune dessinée comme la grille qu’elle choisit. La grille décide aussi <em>combien de panneaux le dock peut tenir</em>, ses colonnes multipliées par ses rangées : quatre en une colonne, quatre en 2×2, six en 2×3 comme en 3×2. <span class="ui">Auto</span> laisse la fenêtre décider, en prenant une seconde colonne dès qu’il y a la place. Une grille plus petite ferme les panneaux qui ne tiennent plus, le plus récemment ouvert d’abord, et chacun redevient une puce que vous voyez et pouvez cliquer.</li> |
| 354 | <li><strong>Langue</strong> et <strong>Devise</strong>: ce que Daimond dit, et ce en quoi les chiffres sont affichés. Une langue sans table reste en anglais ; la facturation est toujours en dollars américains, quels que soient les chiffres affichés.</li> |
| 355 | </ul> |
| 356 | |
| 357 | <h3 id="s30">Garder une disposition avec un Diamond</h3> |
| 358 | <p>Avec un Diamond sélectionné, le menu d’apparence propose de garder avec lui la disposition actuelle des panneaux, et de mettre à jour ou d’oublier celle déjà enregistrée. Rouvrir ce Diamond la remet en place : revenir à un travail n’est donc pas réassembler ses panneaux à la main. Elle n’est enregistrée que si vous le demandez, jamais déduite et jamais en arrière-plan, car une bascule qui fermerait des panneaux en silence se lirait comme du travail perdu.</p> |
| 359 | |
| 360 | <h2 id="s31">Sur un écran étroit</h2> |
| 361 | <p>En dessous de la largeur d'un téléphone, les puces et la galerie cèdent la place à la coque téléphone, qui répond à la même question avec moins de place : le chat est le sol, un panneau s'élève au-dessus de lui comme une feuille que vous pouvez tirer, et le rail devient un tiroir qu'ouvre le bouton en haut à gauche. La rangée du bas est la même rangée de puces, défilée latéralement. Chaque panneau y a une puce, dans l'ordre où les zones se suivent sur un écran plus large ; celle qui est remplie est ce que vous regardez, et non tout ce qui est ouvert, car sur un téléphone une seule chose l'est ; et une puce vous y emmène au lieu de basculer, puisque ce qu'elle fermerait serait l'écran entier. Le panneau d'administration se trouve au bas du tiroir. Rien n'est perdu ; ce sont les mêmes panneaux, montrés un à la fois.</p> |
| 362 | <p>Installé sur l’écran d’accueil, Daimond tourne dans sa propre fenêtre sans mobilier de navigateur, et se tient à l’écart de l’encoche et de l’indicateur d’accueil. C’est la même page et le même travail enregistré : rien n’a à y être déplacé.</p> |
| 363 | |
| 364 | <div class="next"> |
| 365 | <a href="index.html">← Premiers pas</a> |
| 366 | <a href="models.html">Suivant : Modèles & crédits →</a> |
| 367 | </div> |
| 368 | </main> |
| 369 | |
| 370 | <footer class="site-foot"> |
| 371 | <span>Daimond fonctionne dans votre navigateur. Rien de ce qui s’y trouve ne nous est envoyé.</span> |
| 372 | <nav aria-label="Pages du guide"> |
| 373 | <a href="index.html">Premiers pas</a> |
| 374 | <a href="interface.html">Interface</a> |
| 375 | <a href="models.html">Modèles</a> |
| 376 | <a href="chats-and-diamonds.html">Chats & Diamonds</a> |
| 377 | <a href="../capps.html">Capps</a> |
| 378 | <a href="email-web-files.html">E-mail, Web & fichiers</a> |
| 379 | <a href="accounts.html">Comptes</a> |
| 380 | <a href="sync.html">Synchronisation entre appareils</a> |
| 381 | <a href="spending.html">Dépenses</a> |
| 382 | <a href="../machine-operations.html">Commandes sur la machine</a> |
| 383 | <a href="social.html">Social</a> |
| 384 | </nav> |
| 385 | </footer> |
| 386 | </body> |
| 387 | </html> |