Oregami
Repositories/oxedyne/daimond

oxedyne/daimond/www/guide/es/interface.html

35.1 KiB, 51 runs

created by r2519314175:1187, 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="es" data-guide-locale="es" 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>La interfaz — Guía de 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="Guía de Daimond, inicio">
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">Guía</span>
34 </a>
35 <nav class="site-nav" aria-label="Páginas de la guía">
36 <a href="index.html">Primeros pasos</a>
37 <a href="interface.html" aria-current="page">La interfaz</a>
38 <a href="models.html">Modelos y créditos</a>
39 <a href="chats-and-diamonds.html">Chats y Diamonds</a>
40 <a href="../capps.html">Capps</a>
41 <a href="email-web-files.html">Correo, Web y archivos</a>
42 <a href="accounts.html">Cuentas</a>
43 <a href="sync.html">Sincronización entre dispositivos</a>
44 <a href="spending.html">Gastos</a>
45 <a href="../machine-operations.html">Comandos en el equipo</a>
46 <a href="social.html">Social</a>
47 </nav>
48 </div>
49</header>
50
51<main>
52 <h1>La interfaz</h1>
53 <p class="lede">Un recorrido por la pantalla: tres zonas, y qué hace cada parte. Una vez que conoces las zonas, todo en Daimond tiene su sitio.</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">Las regiones con nombre de la ventana de 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 barra superior</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 barra lateral</text>
92 <text class="rm-sub" x="112" y="93" font-size="11">izquierda</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">En lo que trabajas</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">divisor — arrástralo</text>
113 <!-- Admin panel -->
114 <text class="rm-title" x="36" y="294" font-size="10.5">Panel de administración</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">El escenario</text>
137 <text class="rm-sub" x="330" y="93" font-size="11">centro</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">El chat — tu conversación</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">El dock</text>
157 <text class="rm-sub" x="642" y="93" font-size="11">derecha</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">Correo</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">Espacio</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">Agentes</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>Las regiones con nombre. La <strong>barra superior</strong> recorre la parte de arriba; debajo, tres zonas: la <strong>barra lateral</strong> (izquierda), aquello en lo que trabajas, encima de un divisor, con el panel de administración debajo; el <strong>escenario</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> (derecha), que alberga Correo, Espacio y Agentes.</figcaption>
189 </figure>
190
191 <h2 id="s1">La barra lateral — izquierda</h2>
192 <p>La barra lateral está partida por un divisor que puedes arrastrar pero no quitar. Encima del divisor está aquello en lo que trabajas; debajo, el panel de administración.</p>
193
194 <p>Una fila llamada <span class="ui">Todo</span> se sitúa por encima de todo y retiene de una sola pulsación cada Diamond, cada chat, cada trabajador, cada buzón y cada página que se esté trayendo. Su luz es la raíz de todas las demás de la aplicación: verde mientras corre todo lo que podría gastar, roja cuando no corre nada, ámbar entre medias. El cierre de la propia barra lateral está en esa fila, la única que habla por toda la barra.</p>
195
196 <div class="cards">
197 <div class="card">
198 <h3 id="s2">Diamonds</h3>
199 <p>Los empeños que conservas. Un Diamond guarda lo que un chat te enseñó sobre un trabajo, para que el siguiente tramo arranque de lo que sabes. Añade uno con el <strong>+</strong> junto a <strong>Diamonds</strong>; el botón de al lado los dibuja como un <strong>grafo</strong>. Etiquétalos según se acumulan y la fila <span class="ui">Filtrar por etiqueta</span> acota la lista.</p>
200 </div>
201 <div class="card">
202 <h3 id="s3">Chats</h3>
203 <p>Tus conversaciones, de la más nueva a la más vieja. Empieza una con el <strong>+</strong> junto a <strong>Chats</strong>; pulsa cualquier chat para traerlo de vuelta al centro. El <span class="ui">⋯</span> que está junto al <strong>+</strong> contiene <span class="ui">Borrar todos los chats</span>, que trata de todos los chats y no de uno, y por eso no está en el mosaico de un chat.</p>
204 </div>
205 </div>
206 <p>Entre las dos listas hay un segundo divisor. Los Diamonds se acumulan, y sin él una lista larga empujaba los mosaicos de chat fuera por abajo; arrástralo para dar sitio a una lista o a la otra, o haz doble clic para repartir a partes iguales. Ninguna se puede aplastar del todo, y el reparto se recuerda por dispositivo junto con el resto de tu disposición.</p>
207
208 <p>Los Diamonds están encima de los chats, que es como está el terreno: minas en la conversación de abajo, y lo que subes se talla y se pule arriba. Un chat es materia bruta, un Diamond está trabajado, y el orden dice hacia dónde viaja el trabajo sin una palabra de explicación. La palabra <strong>chat</strong> se dejó en paz por la misma razón. Un Diamond es una cosa de otra clase y se gana un nombre nuevo; una conversación es corriente y conserva su palabra corriente.</p>
209
210 <p>Los dos se tratan por entero en <a href="chats-and-diamonds.html">Chats y Diamonds</a>.</p>
211
212 <h3 id="s4">El panel de administración</h3>
213 <p>Debajo del divisor, el panel de administración es el estado de la máquina de un vistazo. Los ajustes viven aquí y no en una ventana emergente, así que un chat sigue vivo al lado: puedes preguntarle a Daimond qué es una contraseña de aplicación mientras la caja que te pide una sigue en pantalla. Cada fila sobre la que se puede actuar es un botón que abre lo que nombra:</p>
214 <ul>
215 <li>Una <strong>fila de identidad</strong> (quién eres en este dispositivo)con una rueda dentada al lado.</li>
216 <li><span class="ui">Modelos</span>, que cuenta los proveedores que has conectado y abre el formulario de Modelos.</li>
217 <li><span class="ui">Créditos</span>, que muestra tu saldo y abre la vista de Créditos.</li>
218 <li><span class="ui">Herramientas · N de M</span>, cuántas herramientas hay disponibles, y abre el panel Herramientas.</li>
219 <li><span class="ui">Versión</span>, que nombra la versión que estás usando y cuánto llevas en ella, y abre debajo el historial de versiones.</li>
220 <li><strong>Almacenamiento del espacio de trabajo</strong>, cuánto espacio usan tus archivos en cada sitio en el que puede vivir un espacio de trabajo.</li>
221 </ul>
222
223 <h3 id="s5">Qué versión estás usando</h3>
224 <p>La fila <span class="ui">Versión</span> se lee como un nombre y una edad (<span class="ui">Versión · Albany · hoy</span>), y no como un número de compilación. Las versiones llevan nombres de lugares de Australia Occidental en orden alfabético, así que la secuencia se lee sin consultar nada. Un nombre marca un <strong>hito</strong>: Daimond publica varias compilaciones al día, y un nombre para cada una sería ruido. Pasa el ratón por la fila para ver el id de la compilación y su fecha de publicación.</p>
225 <p>Al pulsar la fila se abre el <strong>historial de versiones</strong>, que se lee de arriba abajo:</p>
226 <ul>
227 <li><strong>Lo que está previsto</strong>, primero, con un contorno de trazos.</li>
228 <li><strong>La compilación que estás usando</strong>, marcada <span class="ui">estás aquí</span>.</li>
229 <li><strong>Cada compilación anterior</strong>, de la más nueva a la más vieja, cada una con su fecha, una línea que dice qué cambió, su id de compilación y su lugar en el registro sellado.</li>
230 </ul>
231 <p>Esto no es un registro de cambios guardado junto a la aplicación. Es el registro publicado que lee la propia comprobación de entrega de Daimond: todas las compilaciones que se han servido, en orden, en una cadena que no se puede reescribir sin romperla. Las notas de una línea se añadieron sin tocar esa cadena, así que lees historia anotada y no una versión contada de ella.</p>
232 <div class="note"><strong>La entrada prevista se ve distinta porque es distinta.</strong> No lleva id de compilación ni número de sello, y dice con palabras que aún no está construida y que no se promete para ninguna fecha. Todo lo que hay debajo está sellado y es comprobable; una declaración de intenciones no es ninguna de las dos cosas, y no debería tomar prestada la autoridad de un registro.</div>
233 <p>No hay vuelta atrás a una compilación más vieja. Una fijada se topa con la propia negativa de la pasarela a hablar con un cliente demasiado viejo; puede llevar un fallo de seguridad ya corregido, en una aplicación que guarda tus claves de proveedor, tu identidad y tus passkeys; y al encontrarse con datos locales más nuevos corre el riesgo de leerlos mal. El disgusto por un cambio se responde en el cambio, diciendo con claridad qué cambió, que es para lo que están estas notas.</p>
234
235 <h3 id="s6">Cómo llegan las actualizaciones</h3>
236 <p>Daimond se actualiza solo. No hay nada que descargar: la pestaña en marcha nota una compilación más nueva y se recarga sobre ella, y la recarga no pierde nada, porque cada arranque recupera tu trabajo del diario de durabilidad.</p>
237 <p>La única pregunta es <em>cuándo</em>. Una actualización normal espera un momento tranquilo — la pestaña en segundo plano, o sin tocar unos diez minutos — y nunca se recarga sobre un turno en marcha ni un mensaje a medio escribir. El chip junto a los botones de arriba dice cuándo hay una lista; púlsalo para tomar la actualización al momento.</p>
238 <p>Algunas actualizaciones no pueden esperar. Cuando un cambio significa que una pestaña anticuada ya no puede trabajar con el servidor, el servidor la rechaza, y la pestaña se recarga sola sobre la versión actual. Aun así no corta un turno en marcha, y espera un momento tras tu última tecla en vez de recargar a mitad de una frase. No hay forma de rechazar una versión: la aplicación que conservarías es la misma aplicación de la misma gente, y un navegador no puede correr la compilación de ayer contra el servidor de hoy.</p>
239
240 <h2 id="s7">El escenario — centro</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>junto a</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 — el chat</h3>
250 <p>Donde hablas con el daimon. Es el ocupante por defecto y vuelve siempre que el escenario quedaría vacío. Tus mensajes, las respuestas y cualquier paso de herramienta aparecen aquí.</p>
251 </div>
252 <div class="card">
253 <h3 id="s9">Web</h3>
254 <p>Una página web, mostrada o conducida. Se abre desde la cabecera o cuando Daimond sigue un enlace.</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">Mensaje</h3>
266 <p>Un solo mensaje de correo, abierto desde Correo, leído junto al chat.</p>
267 </div>
268 <div class="card">
269 <h3 id="s13">Herramientas</h3>
270 <p>Lo que Daimond sabe hacer, y lo que costaría el resto. Se abre desde la fila <span class="ui">Herramientas</span> del panel de administración.</p>
271 </div>
272 <div class="card">
273 <h3 id="s14">Redactar</h3>
274 <p>Escribir un mensaje de correo. Aquí no se envía nada solo: solo el botón <span class="ui">Enviar</span> pone correo en el cable, y solo tú puedes pulsarlo.</p>
275 </div>
276 <div class="card">
277 <h3 id="s15">Grafo</h3>
278 <p>Tus Diamonds y los enlaces entre ellos, dibujados. Se abre desde el botón de grafo de la cabecera de Diamonds, donde también puedes recolocarlos o trazar un enlace nuevo.</p>
279 </div>
280 <div class="card">
281 <h3 id="s16">Terminal</h3>
282 <p>Un terminal de verdad en tu propia máquina, en el mismo compartimento en el que corre un comando. Consulta <a href="../machine-operations.html">Comandos en el equipo</a>.</p>
283 </div>
284 </div>
285
286 <p>Cada invitado del escenario tiene una cabecera con un botón de cerrar. Un panel cerrado no desaparece: su ficha sigue en la barra superior, sin rellenar, y al pulsarla vuelve.</p>
287
288 <h2 id="s17">El dock — derecha</h2>
289 <p>El dock contiene las fuentes de las que tiras. Al cerrar una, su ficha se queda en la barra superior; al pulsar la ficha vuelve a acoplarse. Cómo se cuadricula el dock, y por tanto cuántos paneles sostiene a la vez, lo decides tú en <strong>Cuadrícula del dock</strong> del menú de apariencia, que se describe abajo.</p>
290
291 <div class="cards">
292 <div class="card">
293 <h3 id="s18">Correo</h3>
294 <p>Tus buzones y lo que hay en ellos. Añade un buzón, sincroniza y abre un mensaje en el escenario.</p>
295 </div>
296 <div class="card">
297 <h3 id="s19">Espacio</h3>
298 <p>Tus archivos, como un árbol corriente. Las herramientas de archivo del agente leen y escriben aquí.</p>
299 </div>
300 <div class="card">
301 <h3 id="s20">Agentes</h3>
302 <p>Ejecuciones de agentes en vivo, según ocurren, con una cuenta de cuántos están trabajando.</p>
303 </div>
304 <div class="card">
305 <h3 id="s21">Gastos</h3>
306 <p>Lo que has gastado, y en qué. Se trata por entero en <a href="spending.html">Gastos</a>.</p>
307 </div>
308 <div class="card">
309 <h3 id="s22">Pendiente</h3>
310 <p>Lo que un daimon ha pedido y está esperando. Cada fila se puede ordenar por prioridad o por antigüedad, y responder con <span class="ui">Hazlo</span>, <span class="ui">Hablarlo primero</span> o <span class="ui">Descartar</span>.</p>
311 </div>
312 <div class="card">
313 <h3 id="s23">Papelera</h3>
314 <p>Chats y Diamonds borrados, que se guardan treinta días y se pueden restaurar en cualquiera de tus dispositivos. Consulta <a href="chats-and-diamonds.html">Chats y Diamonds</a>.</p>
315 </div>
316 </div>
317
318 <h2 id="s24">La barra superior</h2>
319 <p>A lo largo de la parte de arriba están el logotipo, una fila de <strong>fichas de panel</strong>, y, a la derecha del todo, un botón para <strong>vincular otro dispositivo</strong>, un diálogo <strong>Acerca de</strong> y esta <strong>guía</strong>, y el menú <strong>de apariencia y disposición</strong> — y junto a ellos aparece una ficha cuando sale una compilación nueva.</p>
320
321 <h3 id="s25">Las fichas</h3>
322 <p>Cada panel tiene una ficha, esté abierto o cerrado, y al pulsar una se abre o se cierra ese panel. La ficha de un panel abierto está rellena, así que la fila se lee como un mapa de lo que hay en pantalla. Si solo la tuvieran los paneles cerrados, la fila sería más larga cuanto más vacía estuviera la aplicación y cada ficha se desplazaría de lado cada vez que se usara una; una ficha que no se mueve es una cuya posición puedes aprender. (Agentes es la excepción a <em>todos</em>: se mantiene apartado hasta que corre el primer agente.)</p>
323 <p>Las fichas se agrupan por zona — barra lateral, luego escenario, luego dock — con un divisor fino entre los grupos, en el orden en que las zonas están en pantalla. Así que una ficha está del lado en el que aparecerá el panel que abre. Dos marcas llevan significado:</p>
324 <ul>
325 <li>Una ficha de escenario cerrada cuyo panel <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>Una ficha de dock cerrada está <strong>en gris cuando el dock está lleno</strong>. Su información emergente señala la solución: una cuadrícula mayor en el menú de apariencia, o cerrar un panel del dock.</li>
327 </ul>
328
329 <h3 id="s26">Paneles fijados, y la galería</h3>
330 <p>Tú decides qué fichas están en la barra superior. Cualquier panel se puede <strong>fijar</strong> o soltar; los sueltos viven detrás de una ficha <span class="ui">⋯</span> al final de la fila, con una cuenta de cuántos hay ahí detrás. Al pulsarla se abre la <strong>galería</strong>: todos los paneles que hay, buscables por nombre, agrupados por zona, cada fila con un control para fijar y diciendo si ese panel está abierto. Pulsar una fila abre o cierra el panel igual que haría una ficha.</p>
331 <p>La fila puede estar incompleta solo porque la galería no lo está. Tampoco se ordena nada por lo mucho que lo uses: una fila que se reordenara sola destruiría la memoria muscular que las posiciones fijas existen para construir.</p>
332
333 <h3 id="s27">La paleta</h3>
334 <p><kbd>Ctrl</kbd> <kbd>K</kbd>, <kbd>Cmd</kbd> <kbd>K</kbd> en un Mac — abre una caja de búsqueda que llega a cualquier panel o ajuste escribiendo. Las flechas recorren los resultados, <span class="ui">Enter</span> ejecuta el resaltado, <span class="ui">Esc</span> la cierra. Enumera los paneles, las paletas, los cuatro tamaños de texto, las cuadrículas del dock, los idiomas, las monedas y los modos de permisos. Nunca es la ruta más rápida a un panel cuya ficha ves; es la ruta que sigue completa por muchos paneles que haya.</p>
335
336 <h3 id="s28">Con el teclado, y de oído</h3>
337 <p>Daimond se puede manejar sin ratón. <span class="ui">Tab</span> recorre los controles en el orden en que están dibujados, <span class="ui">Enter</span> o <span class="ui">Espacio</span> acciona aquel en el que estás, y <span class="ui">Esc</span> cierra lo que esté abierto. Cada diálogo, menú y hoja lleva además un aspa en su esquina, un solo control hecho de una sola manera, del tamaño de un pulgar en un teléfono.</p>
338 <p>Dónde estás se dibuja <em>fuera</em> del control, como un anillo separado de su borde. Dibujado como un cambio en el propio borde del control, como fue en su día, el anillo solo se lee mientras el borde en reposo es casi invisible — así que hacer visibles los bordes habría quitado el anillo de foco en todas las paletas a la vez. Contra la superficie de detrás, el anillo sobrevive a todo el rango: medido en las once paletas, el anillo más tenue sigue teniendo cuatro veces y media el contraste que pide la norma.</p>
339 <p>Dos sitios en particular:</p>
340 <ul>
341 <li><strong>Correo se maneja por completo desde el teclado.</strong> Los buzones, las carpetas, los borradores y los mensajes son controles a los que puedes llegar y que puedes pulsar, no filas que solo responden a un clic. El buzón en el que estás y la carpeta que lees se anuncian como los actuales, así que un lector de pantalla dice dónde estás y no solo qué hay.</li>
342 <li><strong>Un diálogo mantiene el foco dentro de sí</strong> mientras está abierto, y lo devuelve a lo que lo abrió. El tabulador no se va a pasear por detrás de una ventana que cubre la pantalla, y cerrar uno no te deja caer al principio de la página.</li>
343 </ul>
344 <p>Con un lector de pantalla, una respuesta se anuncia <strong>una vez, cuando ha llegado</strong> («Daimond ha respondido, 120 palabras»)y no según se va escribiendo. Una región viva se lee en voz alta en cada cambio, así que una respuesta en streaming se te recitaría a trozos mientras el modelo siguiera escribiendo. La gente eso lo apaga, y una aplicación cuyos anuncios se han apagado parece accesible y no lo es. Una frase por turno es menos, y se puede usar.</p>
345 <p>La ventana tiene regiones con nombre y encabezados de verdad por todas partes, así que la propia lista de puntos de referencia de un lector de pantalla es un índice que funciona para la aplicación. Cualquier cosa a la que no puedas llegar o que no puedas oír es un fallo, no un límite; dilo.</p>
346
347 <h3 id="s29">Apariencia y disposición</h3>
348 <p>El botón de arriba a la derecha abre un único menú con las decisiones sobre cómo se ve y se sienta Daimond, frente a lo que hace:</p>
349 <ul>
350 <li><strong>Vista</strong>: <span class="ui">Simple</span> o <span class="ui">Máx</span>. Simple da a cada cosa su nombre y si está en marcha, con todo lo demás a una pulsación; Máx pone al lado el modelo, el coste y el contexto, para comparar dos sin abrir ninguno. Fija con ello la forma de la interfaz, porque una forma aireada a densidad máxima es una combinación que nadie quiere. La rueda dentada de un mosaico sigue mandando sobre ese mosaico.</li>
351 <li><strong>Tema</strong>, once paletas en tres bandas: <span class="ui">Claro</span>, <span class="ui">Intermedio</span> y <span class="ui">Oscuro</span>. La banda es cómo encuentras una; dentro de ella la elección es cuestión de gusto, salvo <span class="ui">Ámbar</span>, que mantiene el azul fuera de todo lo que dibuja, para leer de noche. Esta guía lleva la paleta que lleve la app cuando se muestra dentro de Daimond.</li>
352 <li><strong>Tamaño del texto</strong>: cuatro pasos, <span class="ui">Pequeño</span>, <span class="ui">Normal</span>, <span class="ui">Grande</span> y <span class="ui">Muy grande</span>. Solo responde la letra: el marco, los márgenes y los anchos de panel no se mueven, porque este es un control para leer y no un zoom. Para una interfaz más grande, usa el zoom del propio navegador. La muestra del menú está compuesta en el tamaño que se elige, así que el control enseña el cambio en vez de nombrarlo.</li>
353 <li><strong>Cuadrícula del dock</strong>: <span class="ui">Auto</span>, <span class="ui">1</span> columna, <span class="ui">2×2</span>, <span class="ui">2×3</span> o <span class="ui">3×2</span>, cada una dibujada como la cuadrícula que selecciona. La cuadrícula decide también <em>cuántos paneles puede sostener el dock</em>, sus columnas por sus filas: cuatro en una columna, cuatro a 2×2, seis a 2×3 o a 3×2. <span class="ui">Auto</span> deja decidir a la ventana, y toma una segunda columna en cuanto hay sitio para ella. Una cuadrícula menor cierra los paneles que ya no caben, empezando por los abiertos más recientemente, y cada uno vuelve a ser una ficha que puedes ver y pulsar.</li>
354 <li><strong>Idioma</strong> y <strong>Moneda</strong>: en qué habla Daimond y en qué se muestran las cifras. Un idioma que aún no tiene tabla se queda en inglés; el cobro es siempre en dólares estadounidenses, se muestren las cifras como se muestren.</li>
355 </ul>
356
357 <h3 id="s30">Guardar una disposición con un Diamond</h3>
358 <p>Con un Diamond seleccionado, el menú de apariencia ofrece guardar con él la disposición actual de paneles, y actualizar u olvidar una ya guardada. Volver a abrir ese Diamond la repone, así que volver a un trabajo no es rearmar sus paneles a mano. Solo se guarda cuando lo pides, nunca se deduce ni se hace en segundo plano, porque un cambio que cerrara paneles en silencio se leería como trabajo perdido.</p>
359
360 <h2 id="s31">En una pantalla estrecha</h2>
361 <p>Por debajo del ancho de un teléfono, los chips y la galería dan paso a la carcasa de teléfono, que responde a la misma pregunta con menos espacio: el chat es el suelo, un panel se eleva sobre él como una hoja que puede arrastrar, y el raíl se convierte en un cajón que abre el botón de arriba a la izquierda. La fila inferior es la misma fila de chips, desplazada de lado. Cada panel tiene allí un chip, en el orden en que las zonas se disponen en una pantalla mayor; el relleno es aquel que está mirando, y no todo lo que está abierto, porque en un teléfono sólo hay una cosa a la vez; y un chip le lleva allí en lugar de alternar, ya que lo que cerraría sería la pantalla entera. Al panel de administración se llega al final del cajón. No se pierde nada; son los mismos paneles, mostrados de uno en uno.</p>
362 <p>Instalado en la pantalla de inicio, Daimond corre en su propia ventana sin el mobiliario del navegador, y se mantiene apartado del notch y del indicador de inicio. Es la misma página y el mismo trabajo guardado, así que no hay que mover nada dentro.</p>
363
364 <div class="next">
365 <a href="index.html">&larr; Primeros pasos</a>
366 <a href="models.html">Siguiente: Modelos y créditos &rarr;</a>
367 </div>
368</main>
369
370<footer class="site-foot">
371 <span>Daimond funciona en tu navegador. Nada de esto se nos envía.</span>
372 <nav aria-label="Páginas de la guía">
373 <a href="index.html">Primeros pasos</a>
374 <a href="interface.html">Interfaz</a>
375 <a href="models.html">Modelos</a>
376 <a href="chats-and-diamonds.html">Chats y Diamonds</a>
377 <a href="../capps.html">Capps</a>
378 <a href="email-web-files.html">Correo, Web y archivos</a>
379 <a href="accounts.html">Cuentas</a>
380 <a href="sync.html">Sincronización entre dispositivos</a>
381 <a href="spending.html">Gastos</a>
382 <a href="../machine-operations.html">Comandos en el equipo</a>
383 <a href="social.html">Social</a>
384 </nav>
385</footer>
386</body>
387</html>