Actualizar templates/manual.html

templates/manual.html

@@ -12,8 +12,6 @@
 <body>
   <!-- =========================================================
        PORTADA
-       La portada tiene clase "cover" y se imprime sin márgenes.
-       Sustituye los placeholders antes de generar el PDF.
        ========================================================= -->
   <section class="cover no-chrome" data-cover>
     <div class="cover-inner">
@@ -31,7 +29,6 @@
 
   <!-- =========================================================
        ÍNDICE
-       Generado automáticamente por manual.js.
        ========================================================= -->
   <section class="toc-page" id="toc">
     <h1 class="toc-title">Índice</h1>
@@ -109,8 +106,6 @@
 
   <!-- =========================================================
        CAPÍTULOS
-       Cada capítulo es una <section data-chapter> con su h1.
-       El número se asigna automáticamente por manual.js.
        ========================================================= -->
   <main data-chapters>
     <!-- Plantilla de capítulo: duplicar este bloque por cada proceso -->
@@ -120,27 +115,44 @@
       <aside class="callout callout-info">
         <div class="callout-title">Objetivo del capítulo</div>
         <p data-chapter-objective>
-          En este capítulo aprenderá a realizar la tarea X desde la pantalla
+          En este capítulo aprenderá a [verbo en infinitivo] [resultado esperado].
-          inicial hasta la confirmación final.
         </p>
       </aside>
 
       <article class="step-block" data-step>
         <div class="step-number" aria-hidden="true"></div>
         <div class="step-content">
-          <h2 class="step-title" data-step-title>Abrir la pantalla inicial</h2>
+          <h2 class="step-title" data-step-title>Primer paso del proceso</h2>
           <p data-step-text>
-            Vaya al menú principal y seleccione la opción «X». Aparecerá la
+            Describa aquí la acción principal del paso. Sea concreto: indique
-            pantalla de inicio con el listado vacío.
+            qué botón, campo o menú debe usar el operador.
           </p>
           <figure class="screenshot-frame">
-            <img src="artifacts/01-inicio.png" alt="Pantalla inicial del proceso" />
+            <img src="artifacts/01-ejemplo.png" alt="Descripción accesible de la captura" />
-            <ol class="annotations" data-annotations='[{"x":50,"y":24,"n":1,"label":"Menú principal"}]'></ol>
+            <figcaption>Figura 1. Pie de figura descriptivo.</figcaption>
-            <figcaption>Pantalla inicial con el menú principal.</figcaption>
+          </figure>
+        </div>
+      </article>
+
+      <article class="step-block" data-step>
+        <div class="step-number" aria-hidden="true"></div>
+        <div class="step-content">
+          <h2 class="step-title" data-step-title>Segundo paso del proceso</h2>
+          <p data-step-text>
+            Continúe la descripción con la siguiente acción. Si el paso tiene
+            un resultado visible, agregue un callout <em>Resultado esperado</em>
+            debajo de la figura.
+          </p>
+          <figure class="screenshot-frame">
+            <img src="artifacts/02-ejemplo.png" alt="Descripción accesible de la captura" />
+            <figcaption>Figura 2. Pie de figura descriptivo.</figcaption>
           </figure>
           <aside class="callout callout-info callout-result">
             <div class="callout-title">Resultado esperado</div>
-            <p>Verá la pantalla con el encabezado en color primario y el listado vacío debajo.</p>
+            <p>
+              Describa qué verá el operador en pantalla tras ejecutar la acción
+              correctamente.
+            </p>
           </aside>
         </div>
       </article>
@@ -148,27 +160,31 @@
       <article class="step-block" data-step>
         <div class="step-number" aria-hidden="true"></div>
         <div class="step-content">
-          <h2 class="step-title" data-step-title>Completar el formulario</h2>
+          <h2 class="step-title" data-step-title>Paso con acción irreversible</h2>
           <p data-step-text>
-            Rellene los campos obligatorios marcados con asterisco.
+            Antes de cualquier acción irreversible, agregue un callout
-            El botón «Guardar» permanecerá deshabilitado hasta que todos los
+            <em>Advertencia</em> explicando las consecuencias.
-            campos sean válidos.
           </p>
-          <figure class="screenshot-frame">
-            <img src="artifacts/02-formulario.png" alt="Formulario de alta" />
-            <ol class="annotations" data-annotations='[{"x":24,"y":18,"n":1,"label":"Campo nombre"},{"x":24,"y":46,"n":2,"label":"Campo fecha"}]'></ol>
-            <figcaption>Formulario con los campos obligatorios.</figcaption>
-          </figure>
           <aside class="callout callout-warning">
             <div class="callout-title">Advertencia</div>
-            <p>Si introduce una fecha futura, el sistema rechazará el guardado.</p>
+            <p>
+              Esta acción no se puede deshacer desde la interfaz. Describa
+              claramente las consecuencias y, si aplica, cómo solicitar la
+              reversión al administrador.
+            </p>
+          </aside>
+          <aside class="callout callout-info callout-result">
+            <div class="callout-title">Resultado esperado</div>
+            <p>
+              Describa el estado final tras la acción irreversible.
+            </p>
           </aside>
         </div>
       </article>
 
       <aside class="callout callout-tip callout-chapter-end">
         <div class="callout-title">Resultado final</div>
-        <p>El registro aparecerá al principio del listado y se enviará una notificación al supervisor.</p>
+        <p>Resumen en una frase del estado en que queda el sistema al terminar el proceso.</p>
       </aside>
     </section>
     <!-- /Plantilla de capítulo -->
@@ -223,8 +239,6 @@
 
   <!-- =========================================================
        AVISO DE PROPIEDAD Y CONFIDENCIALIDAD
-       Última página del manual. Sin cabecera ni pie.
-       Refuerza que el documento es propiedad privada de la empresa.
        ========================================================= -->
   <section class="copyright-page no-chrome" id="copyright">
     <div class="copyright-inner">
@@ -262,4 +276,4 @@
 
   <script src="manual.js"></script>
 </body>
-</html>
+</html>