Actualizar templates/manual.html
This commit is contained in:
+41
-27
@@ -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
|
||||
inicial hasta la confirmación final.
|
||||
En este capítulo aprenderá a [verbo en infinitivo] [resultado esperado].
|
||||
</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
|
||||
pantalla de inicio con el listado vacío.
|
||||
Describa aquí la acción principal del paso. Sea concreto: indique
|
||||
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" />
|
||||
<ol class="annotations" data-annotations='[{"x":50,"y":24,"n":1,"label":"Menú principal"}]'></ol>
|
||||
<figcaption>Pantalla inicial con el menú principal.</figcaption>
|
||||
<img src="artifacts/01-ejemplo.png" alt="Descripción accesible de la captura" />
|
||||
<figcaption>Figura 1. Pie de figura descriptivo.</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.
|
||||
El botón «Guardar» permanecerá deshabilitado hasta que todos los
|
||||
campos sean válidos.
|
||||
Antes de cualquier acción irreversible, agregue un callout
|
||||
<em>Advertencia</em> explicando las consecuencias.
|
||||
</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">
|
||||
|
||||
Reference in New Issue
Block a user