primer commit

templates/manual.html

@@ -0,0 +1,265 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title data-meta-title>Manual de usuario de la aplicación</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="manual.css" />
+</head>
+<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">
+      <div class="cover-brand">
+        <div class="cover-logo" aria-label="Logo de Factor Pesca">Factor Pesca</div>
+      </div>
+
+      <div class="cover-title-block">
+        <p class="cover-eyebrow" data-meta-eyebrow>Manual de usuario</p>
+        <h1 class="cover-title" data-meta-title-display>Manual de la aplicación</h1>
+        <p class="cover-subtitle" data-meta-subtitle>Guía de procedimientos paso a paso para operadores.</p>
+      </div>
+    </div>
+  </section>
+
+  <!-- =========================================================
+       ÍNDICE
+       Generado automáticamente por manual.js.
+       ========================================================= -->
+  <section class="toc-page" id="toc">
+    <h1 class="toc-title">Índice</h1>
+    <ol class="toc-list" data-toc-output></ol>
+  </section>
+
+  <!-- =========================================================
+       RESUMEN EJECUTIVO
+       ========================================================= -->
+  <section class="summary-page">
+    <h1>Resumen ejecutivo</h1>
+
+    <article class="summary-block">
+      <h2>Objetivo</h2>
+      <p data-summary-objective>
+        Este manual describe los procedimientos operativos de la aplicación,
+        paso a paso, con capturas reales y anotaciones para que cualquier
+        operador pueda completar las tareas más frecuentes sin ambigüedad.
+      </p>
+    </article>
+
+    <article class="summary-block">
+      <h2>Audiencia</h2>
+      <p data-summary-audience>
+        Operadores de captura, supervisores de turno y administradores del sistema.
+        No se requieren conocimientos técnicos previos; sí se recomienda
+        familiaridad con la gestión de datos pesqueros.
+      </p>
+    </article>
+
+    <article class="summary-block">
+      <h2>Alcance</h2>
+      <p data-summary-scope>
+        Cubre los procesos de alta de capturas, consulta de histórico y
+        exportación de reportes. No cubre la configuración del servidor ni
+        los procedimientos de copia de seguridad.
+      </p>
+    </article>
+  </section>
+
+  <!-- =========================================================
+       REQUISITOS PREVIOS
+       ========================================================= -->
+  <section class="prereq-page">
+    <h1>Requisitos previos</h1>
+    <p>Asegúrese de cumplir con los siguientes requisitos antes de iniciar.</p>
+
+    <table class="data-table">
+      <thead>
+        <tr>
+          <th>Requisito</th>
+          <th>Detalle</th>
+        </tr>
+      </thead>
+      <tbody data-prereq-body>
+        <tr>
+          <td>Navegador</td>
+          <td>Chromium 120+, Firefox 121+ o Safari 17+.</td>
+        </tr>
+        <tr>
+          <td>Resolución</td>
+          <td>Mínimo 1280×800 px; recomendado 1440×900 px.</td>
+        </tr>
+        <tr>
+          <td>Cuenta</td>
+          <td>Usuario activo con rol de Operador o superior.</td>
+        </tr>
+        <tr>
+          <td>Conectividad</td>
+          <td>Acceso a la red corporativa o VPN configurada.</td>
+        </tr>
+      </tbody>
+    </table>
+  </section>
+
+  <!-- =========================================================
+       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 -->
+    <section data-chapter>
+      <h1 data-chapter-title>Nombre del proceso</h1>
+
+      <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
+          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>
+          <p data-step-text>
+            Vaya al menú principal y seleccione la opción «X». Aparecerá la
+            pantalla de inicio con el listado vacío.
+          </p>
+          <figure class="screenshot-frame">
+            <img src="artifacts/01-inicio.png" alt="Pantalla inicial del proceso" />
+            <ol class="annotations" data-annotations='[{"x":50,"y":24,"n":1,"label":"Menú principal"}]'></ol>
+            <figcaption>Pantalla inicial con el menú principal.</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>
+          </aside>
+        </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>Completar el formulario</h2>
+          <p data-step-text>
+            Rellene los campos obligatorios marcados con asterisco.
+            El botón «Guardar» permanecerá deshabilitado hasta que todos los
+            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>
+          </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>
+      </aside>
+    </section>
+    <!-- /Plantilla de capítulo -->
+  </main>
+
+  <!-- =========================================================
+       SOLUCIÓN DE PROBLEMAS
+       ========================================================= -->
+  <section class="troubleshooting-page" id="troubleshooting">
+    <h1>Solución de problemas</h1>
+    <p>
+      Si encuentra algún error durante los procedimientos descritos,
+      busque el síntoma en esta sección antes de contactar al soporte.
+    </p>
+
+    <article class="trouble">
+      <h3 class="trouble-symptom">El botón «Guardar» permanece deshabilitado</h3>
+      <p><strong>Causa probable:</strong> uno o más campos obligatorios están vacíos o tienen un formato no válido.</p>
+      <p><strong>Solución:</strong> revise los campos marcados en rojo y verifique que las fechas tengan el formato <code>DD/MM/AAAA</code>.</p>
+    </article>
+
+    <article class="trouble">
+      <h3 class="trouble-symptom">La aplicación muestra un error 500 al guardar</h3>
+      <p><strong>Causa probable:</strong> pérdida temporal de conectividad con el servicio de persistencia.</p>
+      <p><strong>Solución:</strong> espere treinta segundos y vuelva a intentarlo. Si el error persiste, contacte con soporte adjuntando la hora exacta del incidente.</p>
+    </article>
+
+    <article class="trouble">
+      <h3 class="trouble-symptom">No recibo notificaciones por correo</h3>
+      <p><strong>Causa probable:</strong> la dirección de notificación del usuario no está validada.</p>
+      <p><strong>Solución:</strong> acceda a «Mi perfil» y verifique la dirección de correo. Recibirá un mensaje de confirmación en menos de un minuto.</p>
+    </article>
+  </section>
+
+  <!-- =========================================================
+       GLOSARIO (opcional, eliminar si no aplica)
+       ========================================================= -->
+  <section class="glossary-page">
+    <h1>Glosario</h1>
+    <table class="data-table">
+      <thead>
+        <tr><th>Término</th><th>Definición</th></tr>
+      </thead>
+      <tbody>
+        <tr><td>Captura</td><td>Registro individual de pesca asociado a un lote y una fecha.</td></tr>
+        <tr><td>Lote</td><td>Conjunto de capturas agrupadas bajo un mismo identificador.</td></tr>
+        <tr><td>Operador</td><td>Usuario con permisos de lectura y escritura sobre capturas propias.</td></tr>
+        <tr><td>Supervisor</td><td>Usuario con permisos de lectura y escritura sobre todas las capturas del área.</td></tr>
+      </tbody>
+    </table>
+  </section>
+
+  <!-- =========================================================
+       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">
+      <div class="copyright-mark" aria-hidden="true">©</div>
+      <p class="copyright-company">
+        <strong>Factor Pesca S.A. de C.V.</strong><br />
+        Todos los derechos reservados.
+      </p>
+
+      <h2 class="copyright-title">Aviso de propiedad y confidencialidad</h2>
+
+      <p>
+        Este documento y la totalidad de su contenido —textos, gráficos,
+        logotipos, iconos, imágenes, capturas de pantalla, marcas,
+        diseño de composición y selección de los materiales— son
+        <strong>propiedad exclusiva de Factor Pesca S.A. de C.V.</strong>
+        y están protegidos por las leyes nacionales e internacionales
+        en materia de propiedad intelectual, derechos de autor y
+        secretos industriales.
+      </p>
+
+      <p>
+        Queda <strong>estrictamente prohibida</strong> la reproducción
+        total o parcial, distribución, comunicación pública,
+        transformación, traducción, adaptación, compilación,
+        desensamblado o cualquier otra forma de explotación de este
+        documento, por cualquier medio y para cualquier finalidad, sin
+        el consentimiento previo, expreso y por escrito de Factor Pesca
+        S.A. de C.V. El uso no autorizado será perseguido y
+        sancionado conforme a la legislación civil, penal y mercantil
+        aplicable.
+      </p>
+    </div>
+  </section>
+
+  <script src="manual.js"></script>
+</body>
+</html>