Documentación técnica del sitio

§1Resumen

Modo Confiabilidad es un sitio estático: 59 páginas HTML generadas a partir de Markdown, de las cuales 57 son indexables. Las demás llevan noindex: la página de error, esta documentación y, si la suscripción está activa, la confirmación de suscripción. Tiene 16 guías técnicas, 13 calculadoras, 6 módulos de laboratorio, un tablero de mantenimiento con su kit para Power BI, 44 757 palabras de contenido y un buscador con 335 entradas. Las calculadoras y los modelos del laboratorio se verifican con 104 pruebas numéricas que se ejecutan en cada compilación: si una falla, el sitio no se genera.

§2Arquitectura

Principios

• Sitio estático. Todo el HTML se genera en la compilación. No hay servidor de aplicación, base de datos ni cuentas de usuario, de modo que se aloja en cualquier servicio de archivos estáticos y no tiene superficie de ataque del lado del servidor.
• Sin framework. El generador es un script de Node.js con dos dependencias de producción, marked (Markdown) y katex (fórmulas), y usa esbuild para empaquetar el JavaScript. Cada página carga solo el script que necesita, como script clásico: el sitio funciona igual publicado que abierto desde el disco, sin servidor ni conexión.
• Cálculo en el navegador. Las calculadoras, el laboratorio y el tablero no envían datos a ningún lado. Lo que se carga en una calculadora queda guardado en el propio navegador.
• Fórmulas resueltas en la compilación. KaTeX convierte cada fórmula en HTML y MathML durante la compilación; el navegador solo descarga la hoja de estilos de KaTeX en las páginas que tienen fórmulas.
• Sin terceros por defecto. Las tipografías están alojadas en el propio sitio, y no hay cookies, publicidad ni recursos de otros dominios. Las únicas excepciones son opcionales, las estadísticas de visitas y la suscripción por correo, y se activan por configuración. La política de seguridad de contenidos autoriza solo los dominios de lo que esté activo.
• La verificación es requisito de publicación. La compilación ejecuta las pruebas numéricas y controla la estructura de cada guía y el contraste de cada color antes de escribir una sola página.

Proceso de compilación

node build.mjs ejecuta, en este orden:

1. Borra dist/, copia los estilos y static/, y empaqueta el JavaScript con esbuild: un script común, uno por calculadora, módulo o página que lo necesite, y uno por widget.
2. Prepara las dependencias de presentación: la hoja de estilos de KaTeX con sus fuentes WOFF2, las tipografías del sitio con su @font-face (subconjuntos por unicode-range) y el favicon SVG, que se dibuja con el mismo código que el logotipo.
3. Ejecuta tests/models.test.mjs. Si alguna prueba falla, la compilación se detiene con la lista de fallas.
4. Genera las 16 guías: Markdown con front matter, secciones numeradas, índice lateral, herramientas y guías relacionadas. Si una guía no tiene las ocho secciones del pliego en orden, la compilación se detiene.
5. Genera las calculadoras y los módulos del laboratorio: el marco de la página con su documentación, y la tabla de verificación con los resultados de las pruebas de esta misma compilación.
6. Genera el blog. Con BLOG_HASTA publica solo los artículos con fecha hasta ese día.
7. Genera las páginas en Markdown (sobre, cursos, casos, recursos, comunidad, contacto y esta documentación).
8. Arma el kit de Power BI: seis CSV, consultas de Power Query, medidas DAX, tema, instrucciones y el ZIP.
9. Compone las páginas que combinan datos: inicio, biblioteca, glosario, normas, calculadoras, laboratorio, tablero, blog y 404.
10. Escribe el índice del buscador.
11. Mide el peso de las páginas tipo, el volumen de contenidos y el contraste de los colores, y los inserta en esta documentación.
12. Escribe robots.txt, site.webmanifest, _headers y, si se definió el dominio, sitemap.xml.
13. Crea dist-artifact/, una variante de vista previa en la que la página de inicio no lleva el esqueleto HTML.

La compilación sin pruebas tarda menos de un segundo. Las pruebas agregan unos nueve segundos, la mayor parte en las simulaciones con varias semillas que verifican propiedades estadísticas.

Estructura del código

confiabilidad/
  build.mjs               generador: pruebas, compilación, controles y dist/
  package.json            marked y katex; esbuild, tipografías, html-validate y axe-core
  src/
    site.mjs              registro: guías, calculadoras, módulos, navegación, editor
    md.mjs                Markdown -> HTML: fórmulas, llamadas, directivas,
                          anclas explícitas y ortotipografía de cifras
    layout.mjs            plantilla de página, encabezado, pie, rótulo, tarjetas,
                          rutas relativas e imagen para redes
    pages.mjs             páginas compuestas: inicio, índices, glosario, normas,
                          tablero, contacto y esta documentación
    diagrams.mjs          17 diagramas técnicos en SVG
    data.mjs              glosario, mapa de normas y bibliografía
    kit.mjs               kit de Power BI: CSV, Power Query, DAX, tema y ZIP
  content/
    guias/                16 guías (Markdown con front matter)
    herramientas/         documentación de las 13 calculadoras
    lab/                  documentación de los 6 módulos del laboratorio
    blog/                 artículos: NN-slug.md
    paginas/              sobre, cursos, casos, recursos, comunidad, contacto, docs
  assets/
    css/main.css          sistema de diseño completo, sin preprocesador
    js/core.js            tema, navegación, buscador, índice, widgets, desplazamiento
    js/lib/               modelos puros (stats, models, lab, fleet) y marco de
                          interfaz (ui, charts)
    js/calc/              una interfaz por calculadora
    js/lab/               una interfaz por módulo del laboratorio
    js/widgets/           componentes incrustados en el texto de las guías
    js/dashboard.js       tablero de mantenimiento
    js/contacto.js        redacción de consultas
  static/                 se copia a la raíz: plantillas XLSX e imágenes para redes
  scripts/
    plantillas.py         genera las cinco plantillas de Excel con fórmulas
    og.py                 genera las imágenes para redes (1200 x 630)
  tests/
    models.test.mjs       pruebas numéricas (se ejecutan en cada compilación)
    links.py              enlaces internos, anclas y recursos
    smoke.py              prueba de humo de calculadoras y laboratorio
    dash_smoke.py         prueba de humo del tablero
    superposiciones.py    textos que se pisan o quedan cortados, en seis anchos
    shots.py              capturas de pantalla y errores de consola

Comandos y variables

Ejemplo: SITE_URL=https://www.ejemplo.org BLOG_HASTA=2026-10-20 node build.mjs.

Despliegue

El contenido de dist/ se sube a la raíz de cualquier servicio estático: Netlify, Cloudflare Pages, GitHub Pages, un bucket S3 con CloudFront o un servidor Nginx. Todos los enlaces internos son relativos, así que el sitio también funciona dentro de una subcarpeta.

También funciona sin servidor. Con doble clic en index.html se navega completo y funcionan las calculadoras, el laboratorio, el tablero y el buscador, sin conexión a internet, así que la carpeta dist/ sirve también como caja de herramientas sin conexión. En ese modo no se aplican las cabeceras de seguridad, porque las pone el alojamiento.

Netlify y Cloudflare Pages leen el archivo _headers tal como está. En otros servicios hay que replicar sus cabeceras en la configuración propia (en Nginx, con add_header). La política de seguridad de contenidos que se genera es esta:

default-src 'self';
script-src 'self' 'sha256-vf+SCwUohUAI/UwUA0ovqdzZqHoY1qIXkGpfZmPUGzQ=' https://static.cloudflareinsights.com;
style-src 'self' 'unsafe-inline';
img-src 'self';
font-src 'self';
connect-src 'self' https://cloudflareinsights.com;
object-src 'none';
base-uri 'self';
form-action 'self';
frame-ancestors 'self';
upgrade-insecure-requests

Sin servicios opcionales, todo se sirve desde el propio dominio. Con las estadísticas activas, la política suma el script de Cloudflare y el destino de sus datos; con la suscripción, la dirección del formulario del proveedor. El único script en línea, que aplica el tema claro u oscuro antes de pintar la página para evitar un destello, se autoriza por su hash SHA-256; si se modifica ese script, la compilación recalcula el hash. style-src admite estilos en línea porque los usan las fórmulas de KaTeX y los gráficos, que fijan colores y posiciones en cada elemento. El resto de las cabeceras desactiva el rastreo del tipo MIME, limita la información de origen que se envía a otros sitios, bloquea el uso del sitio dentro de marcos ajenos y desactiva cámara, micrófono, geolocalización, pagos y USB.

Estadísticas y suscripción por correo

Las dos funciones son opcionales y quedan apagadas hasta que se configuran. El sitio no necesita servidor propio para ninguna de las dos.

Estadísticas de visitas con Cloudflare Web Analytics. Es gratuito, no usa cookies y funciona con cualquier alojamiento:

1. Crear una cuenta en Cloudflare y, en Web Analytics, agregar el sitio con su dominio.
2. Copiar el token que aparece en el fragmento de código que muestra Cloudflare.
3. Compilar con CF_ANALYTICS_TOKEN=token.

Si el sitio se aloja en Cloudflare Pages o pasa por el proxy de Cloudflare con la inserción automática activada, se compila con CF_ANALYTICS_TOKEN=auto: Cloudflare inserta el script y la política de seguridad lo autoriza.

Suscripción por correo con Kit. El formulario envía el correo directamente al proveedor, sin scripts de terceros:

1. Crear una cuenta en Kit y un formulario.
2. En el código de inserción HTML del formulario, copiar la dirección del atributo action: https://app.kit.com/forms/NÚMERO/subscriptions.
3. En la configuración del formulario, activar la doble confirmación y elegir como destino después de suscribirse la página suscripcion.html del sitio.
4. Compilar con NEWSLETTER_URL=dirección.

Otro proveedor con formulario HTML, como Buttondown o Brevo, se configura igual, indicando además el nombre del campo con NEWSLETTER_CAMPO.

La página de privacidad se arma sola con lo que esté activo: describe el servicio de estadísticas y el proveedor de correo solo cuando están configurados.

Antes de publicar conviene seguir esta secuencia:

1. Actualizar la fecha de revisión en src/site.mjs.
2. Compilar con SITE_URL definido, sin --sin-pruebas.
3. Correr python3 tests/links.py dist hasta que no informe problemas.
4. Si cambiaron títulos, regenerar las imágenes con python3 scripts/og.py y volver a compilar.

§3Mapa del sitio

La navegación principal tiene cinco entradas: Biblioteca, Herramientas, Reliability Lab, Aprender y Comunidad. Las cuatro primeras abren un menú agrupado por tema. Cada página interna tiene una ruta de navegación, y el pie repite los accesos a la biblioteca, las herramientas, el laboratorio y las páginas del proyecto. Este árbol se genera desde el mismo registro que produce las páginas, así que no puede quedar desactualizado:

§4Trazabilidad con el pliego

§5Wireframes

Esquemas de las cinco plantillas principales. Las proporciones son las del escritorio a 1240 píxeles de ancho de contenido, salvo el último, que muestra el comportamiento en un celular de 360 píxeles.

Inicio

+--------------------------------------------------------------------------+
| [MC²]  MODO CONFIABILIDAD   Biblioteca v  Herramientas v  Lab v          |
|                             Aprender v  Comunidad   [Buscar Ctrl K] [tema]|
+-------------------------------------------+------------------------------+
| HERO                                      | INSTRUMENTO INTERACTIVO      |
| Antetítulo y revisión                     | h(t) Weibull, eta = 1000 h   |
| H1 + bajada (2 líneas)                    | beta [-----o----] 2,50       |
| [Explorar la biblioteca] [Calculadoras]   | [ gráfico de tasa de falla ] |
| 16 guías · 13 calculadoras · 6 módulos    | Régimen | B10 | MTTF         |
| + pruebas numéricas superadas             | Veredicto en una frase       |
+--------------------------------------------------------------------------+
| ORGANIZADO POR DECISIÓN: 4 tarjetas con 3 enlaces cada una               |
| (qué equipos importan · qué hacer con cada modo · cuándo intervenir ·    |
|  cómo saber si funciona)                                                 |
+--------------------------------------------------------------------------+
| MAPA DEL CONOCIMIENTO: SVG de 4 carriles x 5 nodos con enlaces           |
+--------------------------------------------------------------------------+
| CALCULADORAS: grilla de 13 tarjetas (símbolo, título, descripción)       |
+-------------------------------------------+------------------------------+
| RELIABILITY LAB: 6 tarjetas               | PRINCIPIOS EDITORIALES 01-04 |
+--------------------------------------------------------------------------+
| DESDE LA BIBLIOTECA: 3 guías  ·  BLOG: 3 últimos artículos               |
+--------------------------------------------------------------------------+
| NORMAS: franja de chips  ·  [Mapa de normas]                             |
+--------------------------------------------------------------------------+
| PIE: marca + 4 columnas de enlaces · aviso · revisión                    |
+--------------------------------------------------------------------------+

Guía técnica

+--------------------------------------------------------------------------+
| Encabezado fijo (igual en todas las páginas)                             |
+--------------------------------------------------------------------------+
| Inicio / Biblioteca / RCM          <- ruta de navegación                 |
| BIBLIOTECA TÉCNICA · METODOLOGÍAS  <- antetítulo                         |
| H1 Título de la guía                                                     |
| Bajada (descripción, 2-3 líneas)                                         |
| +-----------+------------+---------+--------------------------+          |
| | Documento | Revisión   | Lectura | Normas de referencia     |          |
| | CF-GU-01  | 1 · fecha  | 14 min  | SAE JA1011 · IEC 60300   |          |
| +-----------+------------+---------+--------------------------+          |
+---------------------------------------------+----------------------------+
| §1 Fundamentos                              | EN ESTA GUÍA (fija)        |
| §2 Metodología                              | 01 Fundamentos  <- activo  |
| §3 Fórmulas  (KaTeX: HTML + MathML)         | 02 Metodología             |
| §4 Ejemplo industrial                       | ...                        |
| §5 Casos documentados                       |                            |
| §6 Buenas prácticas                         | HERRAMIENTAS               |
| §7 Errores comunes                          | · Selector de estrategia   |
| §8 Referencias                              | · FMEA                     |
|                                             |                            |
| Figuras numeradas, llamadas [NOTA],         | GUÍAS RELACIONADAS         |
| [ATENCIÓN], [IDEA CLAVE], [EJEMPLO],        | · FMEA · Weibull ...       |
| tablas, tarjetas de herramientas            |                            |
+--------------------------------------------------------------------------+
| Pie                                                                      |
+--------------------------------------------------------------------------+

Calculadora y módulo del laboratorio

+--------------------------------------------------------------------------+
| Encabezado · ruta · H1 · bajada · rótulo (herramienta, método,           |
| normas, guía)                                                            |
+-----------------------------+--------------------------------------------+
| DATOS DE ENTRADA (fijo)     | RESULTADOS (aria-live)                     |
| [Guardado en el navegador]  | +--------+--------+--------+               |
|                             | | Indic. | Indic. | Indic. |               |
| Grupo de campos             | | princ. +--------+--------+               |
|   Campo [valor ] [unidad v] | |        | Indic. | Indic. |               |
|   ayuda / error en línea    | +--------+--------+--------+               |
| Tabla editable (pega Excel) | Notas: lectura / atención                  |
|   [+ Agregar fila]          | Sección: gráfico + tabla de datos          |
|                             | Sección: tabla de resultados               |
| [Cargar ejemplo] [Vaciar]   |                                            |
| Ejemplo [lista v] [Cargar]  | [Copiar] [CSV] [Imprimir o PDF]            |
+--------------------------------------------------------------------------+
| DOCUMENTACIÓN: cómo usarla · método · fórmulas · supuestos ·             |
| verificación (tabla de pruebas de esta compilación) · referencias        |
+--------------------------------------------------------------------------+

Tablero de mantenimiento

+--------------------------------------------------------------------------+
| Encabezado · H1 · rótulo (datos, historial, modelo, kit)                 |
+--------------------------------------------------------------------------+
| FILTROS: Ventana v Área v Clase v Criticidad v Equipo v [Restablecer]    |
| (el estado se guarda en la dirección: #area=...&crit=...)                |
+--------------------------------------------------------------------------+
| Disponib. | MTBF | MTTR | Cumplimiento | Backlog | Trabajo reactivo      |
|   valor + variación interanual + minigráfico de 24 meses                 |
+--------------------------------------------------------------------------+
| LECTURA: 3 columnas de texto generado con los filtros activos            |
+------------------------------------------------+-------------------------+
| Disponibilidad mensual                         | MTBF y MTTR             |
| (banda de ventana, meta)                       | 12 meses móviles        |
+------------------------+------------------------+------------------------+
| Cumplimiento           | Horas-hombre por tipo  | Backlog (semanas)      |
+------------------------+------------------------+------------------------+
| Pareto de modos        | Malos actores          | Dispersión log-log     |
| [Cantidad|Horas]       | (cuadrante)            | (jack-knife)           |
+--------------------------------------------------------------------------+
| TABLA DE EQUIPOS ordenable · [Descargar CSV]                             |
+--------------------------------------------------------------------------+
| MODELO DE DATOS Y KIT: diagrama estrella · [Descargar ZIP] ·             |
| archivos · verificación tablero = DAX                                    |
+--------------------------------------------------------------------------+

Celular

+--------------------------------------+
| [MC²] MODO /     [Buscar][tema][=]   |
|       CONFIABILIDAD                  |
+--------------------------------------+
| Inicio / Biblioteca / RCM            |
| H1 en 2-3 líneas                     |
| Bajada                               |
| Rótulo en 2 columnas                 |
+--------------------------------------+
| GUÍAS RELACIONADAS (antes del        |
| texto; el índice se oculta)          |
+--------------------------------------+
| §1 Fundamentos ...                   |
| Tablas: desplazamiento lateral       |
| Fórmulas: desplazamiento lateral     |
| Figuras: ancho mínimo + desplaz.     |
+--------------------------------------+
| CALCULADORA: datos arriba,           |
| resultados abajo, 1 columna;         |
| indicadores en 2 columnas            |
+--------------------------------------+
| DASHBOARD: indicadores 2x3,          |
| gráficos a ancho completo            |
+--------------------------------------+

§6Sistema de diseño

El concepto es una hoja de ingeniería sobre la mesa gris de una sala de control. La interfaz es gris por defecto y el color aparece solo donde hay información o un estado, como en la filosofía de pantallas de proceso de ISA-101. Cada página empieza con un rótulo documental, como el de un plano. Los códigos y los encabezados de tabla van en monoespaciada y el texto de lectura, con serifa.

Tipografía

Las tres familias tienen licencia SIL Open Font License y se sirven desde el propio sitio: 15 archivos WOFF2 que suman 246 kB. Cada navegador descarga solo los subconjuntos y pesos que usa la página, y las dos variantes que aparecen en todas las páginas se precargan. El cuerpo de lectura usa 18 píxeles con interlineado de 1,68 y líneas de hasta 70 caracteres.

Color

Los colores de estado se usan solo para estados, siempre acompañados de un texto («OK», «Atención», «Crítico»), nunca como decoración. El tema oscuro no invierte los colores: cada token tiene un valor propio, elegido para conservar el contraste y la jerarquía. El tema sigue la preferencia del sistema operativo hasta que se elige uno con el botón del encabezado.

La compilación calcula el contraste de cada par de uso con la fórmula de WCAG 2.2 a partir de main.css, y se detiene si un par de texto queda por debajo de 4,5:1 o un elemento gráfico por debajo de 3:1:

Espaciado y retícula

Escala de espaciado de 4, 8, 12, 16, 24, 32, 48 y 72 píxeles (--sp1 a --sp8), radio de borde de 3 píxeles, ancho máximo de contenido de 1240 píxeles y margen lateral de 16 a 32 píxeles según el ancho de la pantalla. Las guías usan dos columnas, texto e índice lateral. Las calculadoras también usan dos: datos fijos a la izquierda y resultados a la derecha.

Cifras y unidades

Las cifras siguen la ortotipografía de la RAE y del Sistema Internacional, tanto en el texto como en las calculadoras y los gráficos:

• Coma decimal: 0,632.
• Espacio fino de no separación (U+202F) para los miles a partir de cinco cifras: 12 500 h. Los números de cuatro cifras no se separan: 8760 h.
• Signo menos tipográfico (U+2212), no el guion.
• Espacio de no separación entre el número y la unidad, también en el porcentaje: 85 %. El número nunca queda en una línea y su unidad en la siguiente.
• Fechas en español: «13 oct. 2026» en listas y «13 de octubre de 2026» en el rótulo de un artículo.
• Comillas angulares «» para las citas y los términos.

Gráficos

Trazos finos, grilla tenue y un solo eje vertical: nunca doble eje. La leyenda aparece solo con dos series o más, y el texto usa los tokens de tinta, no el color de la serie. Cada gráfico tiene un cuadro de información que se abre con el puntero o con el teclado, y una tabla con sus datos debajo, en un desplegable.

§7Componentes

§8Modelos de cálculo y verificación

Los modelos son funciones puras, separadas de la interfaz, en assets/js/lib/: funciones especiales y estadística en stats.js, calculadoras en models.js, laboratorio en lab.js y la flota del tablero en fleet.js. Son los mismos archivos que ejecuta el navegador y los que importan las pruebas en Node.js, así que lo que se verifica es exactamente lo que calcula el sitio.

Las 104 pruebas de tests/models.test.mjs cubren:

• Funciones especiales contra tablas: Γ, χ², distribución normal y rangos de mediana exactos.
• Weibull contra los ejemplos resueltos de la referencia de análisis de vida de ReliaSoft (regresión de rangos y máxima verosimilitud, con y sin suspensiones), contra búsquedas exhaustivas independientes de la verosimilitud, y contra Weibayes, las vidas B e ISO 281.
• MTBF, MTTR y disponibilidad con límites χ², ajuste lognormal y balances de horas.
• OEE, RAM y economía: ejemplos de referencia, bloques k de n, VAN, costo anual equivalente y TIR.
• Válvulas de control contra los ejemplos de IEC 60534-2-1 para líquido y gas.
• Estrategia y laboratorio: edad óptima de reemplazo e intervalos de inspección contra búsquedas exhaustivas, intervalo de búsqueda de fallas, Monte Carlo contra soluciones analíticas, sesgo de máxima verosimilitud con pocas fallas, calibración del intervalo de vida remanente del gemelo digital y propiedades de la regresión logística, incluido el efecto de las etiquetas erróneas sobre el AUC.
• Tablero y kit: determinismo del generador, paradas sin superposición, igualdad entre cada indicador del tablero y la medida DAX aplicada a los CSV, consistencia del Pareto, límites del diagrama de dispersión de Knights e integridad del ZIP.

Los generadores aleatorios usan una semilla fija (algoritmo mulberry32), de modo que dos personas con los mismos parámetros obtienen el mismo resultado y las pruebas son reproducibles. Las plantillas de Excel replican con fórmulas los criterios de las calculadoras, y se verificaron con los mismos casos.

§9Modelo de contenidos

Cada tipo de contenido es un archivo Markdown con un encabezado de datos (front matter):

El Markdown admite, además de la sintaxis habitual de tablas y listas:

• fórmulas en línea \(…\) y en bloque \[…\];
• llamadas > [!NOTA], > [!ATENCION], > [!CLAVE] y > [!EJEMPLO];
• directivas en una línea propia: [[diagrama:nombre|pie]], [[herramienta:id]], [[herramientas:a,b]], [[lab:id]], [[widget:nombre]], [[guias:a,b]] y [[verificacion:clave]];
• anclas fijas en los títulos, ## Título {#ancla}, para que un enlace externo no se rompa si cambia el texto;
• alineación numérica de columnas con --:.

La ortotipografía de cifras se aplica sola: el generador inserta los espacios de no separación entre número y unidad y entre grupos de miles.

Para agregar contenido:

• Una guía nueva se registra en GUIDES (src/site.mjs) con su código y su grupo, y se escribe content/guias/slug.md con las ocho secciones.
• Un artículo es un archivo content/blog/NN-slug.md; el número solo ordena los archivos y no aparece en la dirección.
• Una calculadora necesita su entrada en TOOLS, la interfaz assets/js/calc/id.js, su documentación y sus casos de prueba.

Las reglas editoriales son:

• Español técnico de Argentina: falla, falla funcional, confiabilidad.
• Cada fórmula con su fuente.
• Los datos ilustrativos se rotulan como tales y los casos reales remiten a su informe oficial.
• Ninguna marca comercial se recomienda.

§10SEO técnico y semántico

Cada página tiene:

• título propio con la marca al final, salvo que el conjunto supere los 70 caracteres, y descripción tomada del contenido;
• idioma es;
• metadatos Open Graph y de Twitter;
• con el dominio definido, URL canónica e imagen para redes de 1200 × 630 con el título de la página, generada por scripts/og.py.

La documentación, la página 404 y la confirmación de suscripción llevan noindex. No se bloquean en robots.txt: un buscador que no puede leer una página tampoco ve su indicación noindex.

Datos estructurados (JSON-LD). Cada tipo de página declara el que le corresponde:

HTML semántico. Las páginas usan:

• regiones header, nav, main, article, aside y footer;
• un único h1 por página, con secciones numeradas en h2;
• figuras con figcaption;
• tablas con thead;
• fechas con time datetime;
• rótulos con listas de definición.

El texto, las fórmulas (que llevan también MathML) y las tablas de verificación están en el HTML servido, no se generan con JavaScript, de modo que cualquier buscador los indexa sin ejecutar scripts.

Enlazado interno. Las piezas se enlazan entre sí:

• cada guía enlaza sus calculadoras y sus guías relacionadas;
• cada calculadora enlaza su guía;
• cada artículo enlaza guías y herramientas para profundizar;
• el glosario y el mapa de normas enlazan la guía donde se aplica cada término o norma.

Vocabulario. Los títulos usan los términos con que se busca en español (falla, confiabilidad, mantenimiento basado en condición) y el glosario conserva el término en inglés como nombre alternativo, para captar búsquedas mixtas.

§11Rendimiento

Peso de las páginas tipo, medido en esta compilación sobre los archivos generados. Incluye el HTML, la hoja de estilos (y la de KaTeX donde hay fórmulas) y los scripts que la página carga al abrirse. No incluye las tipografías, que se descargan una vez y quedan en caché, ni los scripts que se cargan solo al usarse: el índice del buscador y los widgets.

Qué lo mantiene liviano:

• Sin framework: el marco de calculadoras, los gráficos y el tablero son código propio sin dependencias.
• Cada página carga solo su script, empaquetado y minificado con esbuild: una guía no descarga el código de las calculadoras.
• El índice del buscador se descarga al abrir el buscador por primera vez, y los widgets cuando aparecen en la página.
• KaTeX no se ejecuta en el navegador. Su hoja de estilos se carga solo en las páginas con fórmulas.
• Tipografías WOFF2 con subconjuntos por unicode-range y font-display: swap: el texto se muestra de inmediato aunque la tipografía no haya llegado.
• Los gráficos se dibujan en SVG y se vuelven a dibujar solo cuando cambia el ancho del contenedor, con una espera de 80 ms.
• La compresión gzip o brotli la aplica el servicio de alojamiento; la columna de la derecha muestra el peso que viaja con gzip.

§12Accesibilidad

El objetivo es WCAG 2.2 nivel AA.

Navegación y estructura

• Enlace para saltar al contenido.
• Contorno de foco visible de 2 píxeles en el color de señal.
• Regiones con nombre, idioma declarado y jerarquía de títulos sin saltos.

Controles nativos

• Los menús son <details> y el buscador es un <dialog>, de modo que el foco y la tecla Esc funcionan como el navegador espera.
• El buscador sigue el patrón de lista de opciones con aria-activedescendant.

Formularios

• Cada campo tiene su label, y la ayuda y el error se asocian con aria-describedby.
• Los errores marcan el campo con aria-invalid y se anuncian en una región aria-live.
• Los resultados de las calculadoras también se anuncian al recalcular.
• Los campos numéricos piden el teclado decimal en el celular y aceptan coma o punto.

Gráficos y figuras

• Cada gráfico tiene nombre accesible y se recorre con el teclado (flechas en los gráficos de líneas, tabulación en los de barras), que muestra el mismo cuadro de información que el puntero.
• Cada gráfico tiene debajo su tabla de datos equivalente. Los minigráficos de los indicadores acompañan un valor que ya está escrito.
• Los diagramas SVG llevan título y descripción.
• El color nunca es el único portador de información: los estados llevan texto y las series, leyenda.

Contenedores con desplazamiento

• Las tablas, fórmulas, figuras y bloques de texto que no entran en el ancho disponible se vuelven navegables con el teclado y se anuncian como regiones con nombre.
• Esto pasa solo cuando desbordan, para no agregar paradas de tabulación innecesarias.

Movimiento, ampliación e impresión

• La animación de entrada se desactiva con la preferencia de movimiento reducido.
• El diseño se reacomoda en una columna hasta el 400 % de ampliación sin desplazamiento horizontal de la página.
• La hoja de impresión deja solo el contenido, para guardar informes de calculadoras como PDF.

Contraste. Se verifica en la compilación con la tabla del sistema de diseño.

§13Diseño adaptable

El diseño se construye con grillas fluidas (minmax(0, 1fr)) y cortes en los anchos donde el contenido lo pide, no en tamaños de dispositivos:

En pantallas angostas se aplican además estos criterios:

• Las tablas anchas, las fórmulas largas y los diagramas se desplazan dentro de su propio contenedor; la página nunca se desplaza en horizontal.
• Los diagramas conservan un ancho mínimo legible en lugar de achicar el texto.
• Los gráficos se vuelven a dibujar con el ancho real y recalculan sus marcas de escala, no se escalan como una imagen.
• Los controles miden al menos 32 píxeles de alto, por encima del mínimo de 24 de WCAG 2.2.
• El área segura de las pantallas con muesca se respeta con viewport-fit=cover.

§14Benchmark

Las referencias del pliego se agruparon por tipo. La tabla describe lo que cada tipo de referencia hace bien y qué se tomó de eso; no evalúa a cada sitio en particular.

En conjunto, Modo Confiabilidad ocupa un lugar que ninguna de estas referencias cubre sola:

• contenido técnico en español, con la profundidad de una norma;
• cálculo verificado y abierto;
• modelos que muestran la incertidumbre, no solo el valor medio.

§15Auditoría

La revisión final se hizo desde los cinco roles que define el pliego, con las herramientas automáticas como evidencia. Cada observación se corrigió en el código antes de publicar.

Observaciones y correcciones

Verificación automática

Lo que falta verificar en producción

La auditoría automática no reemplaza tres controles que conviene hacer después de publicar:

• Lector de pantalla. Recorrer una guía, una calculadora y el tablero con NVDA y VoiceOver.
• Dispositivos reales. Probar en un teléfono Android de gama media y en un iPhone.
• Rendimiento con el alojamiento definitivo. Medir con Lighthouse o WebPageTest, con la compresión y la red de distribución del servicio elegido.