266 lines
11 KiB
HTML
266 lines
11 KiB
HTML
<!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>
|