dtic-DIIAA/docs/ambito/dtic-NOTAS/A08.P001_Sistema-Web-Notas.md

# Plan: Sistema Web para Generación de Notas

> **Ámbito:** A08 — dtic-NOTAS

**Código:** A08.P001  
**Fecha:** 07 de abril de 2026  
**Autor:** Sistema ADN  
**Versión:** 1.0  
**Estado:** ✅ WEB CREADA (pendiente: numeración automática, exportación PDF)  
**Dependencia:** Ninguna

## 📋 Resumen Ejecutivo

Desarrollar un sistema web simple que permita generar notas e informes formales separando el **contenido** (archivos de texto/markdown) de la **presentación** (plantilla HTML institucional).

**Ventajas:**
- Redacción en formato simple (markdown/txt)
- Membrete institucional automático
- Numeración consecutiva
- Archivo organizado
- Fácil mantenimiento

## 🎯 Objetivo

Crear una herramienta web que:
1. Permita seleccionar una plantilla de nota
2. Cargue el contenido desde un archivo `.md` o `.txt`
3. Renderice el documento con membrete institucional
4. Permita exportar a PDF o imprimir directamente

## 📅 Fases de Implementación

### ✅ **FASE 1: Diseño de la Arquitectura** - COMPLETADA

#### Componentes del Sistema

```
dtic-NOTAs/
├── app/                    # Aplicación web
│   ├── index.html         # Interfaz principal
│   ├── styles.css         # Estilos institucionales
│   └── app.js             # Lógica de renderizado
├── plantillas/            # Modelos de notas
│   ├── nota-simple.md
│   ├── informe-tecnico.md
│   └── memorando.md
├── contenido/             # Archivos con redacción
│   └── 2026/
│       └── nota-26XX.md
└── output/                # Documentos generados
    └── 2026/
        └── Nota-26XX.pdf
```

#### Estructura de Plantilla Markdown

```markdown
---
tipo: nota-simple
numero: 26XX
fecha: 2026-XX-XX
destinatario: [Nombre/Cargo]
remitente: DTIC - UTN FRLR
asunto: [Descripción breve]
---

[Cuerpo de la nota en formato markdown]

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

---
**Firma:** _________________________
**Nombre:** [Nombre del Responsable]
**Cargo:** [Cargo]
```

### ✅ **FASE 2: Implementación de la Web** - COMPLETADA

#### Componentes desarrollados

1. **index.html** ✅ - Interfaz principal
   - Selector de plantillas
   - Carga de archivos .md
   - Formulario de datos de nota
   - Botones de acción

2. **styles.css** ✅ - Estilos institucionales
   - Membrete UTN-FRLR
   - Tipografía formal
   - Márgenes para impresión A4
   - CSS @media print configurado

3. **app.js** ✅ - Lógica
   - Carga de plantillas embebidas
   - Renderizado markdown→HTML (marked.js)
   - Impresión/PDF via window.print()
   - Extracción de metadatos frontmatter

**Archivos creados en `docs/ambito/dtic-NOTAS/app/`:**
- `index.html` - Interfaz
- `styles.css` - Estilos
- `app.js` - Lógica

**Archivos de ejemplo:**
- `plantillas/nota-simple.md` - Plantilla base
- `contenido/2026/ejemplo-nota.md` - Nota DKIM de ejemplo

### ✅ **FASE 3: Integración con Archivo Histórico** - COMPLETADA

- [x] Directorio `dtic-NOTAs` migrado a `docs/ambito/dtic-NOTAS/dtic-NOTAs/`
- [x] Histórico preservado en `.Hist/` con notas de 2024
- [x] Convención de nombres documentada: `Nota-<AÑO><NUMERO>_<Asunto>.<ext>`

### ⏳ **FASE 4: Testing y Documentación**

- Probar con notas reales del histórico
- Validar formato de impresión
- Documentar uso para el equipo

## 🎯 Criterios de Éxito

| Criterio | Verificación |
| :--- | :--- |
| **Web funcional** | Carga plantillas y renderiza contenido |
| **Membrete correcto** | Logo UTN-FRLR, datos institucionales |
| **Exportación PDF** | Documento imprimible formato A4 |
| **Archivo organizado** | Notas guardadas en `.Hist/<AÑO>/` |
| **Numeración automática** | Consecutivo sin repetir |

## 📝 Notas Técnicas

### Stack Tecnológico Sugerido

**Mínimo viable (sin dependencias complejas):**
- HTML5 + CSS3 + JavaScript vanilla
- Markdown parser: `marked.js` (CDN)
- PDF: `window.print()` con CSS `@media print`

**Opcional (más robusto):**
- Node.js + Express para backend
- Puppeteer para generación PDF
- SQLite para registro de numeración

### Migración del Histórico - COMPLETADA

El directorio `dtic-NOTAs/` fue migrado exitosamente:
1. ✅ Movido a `docs/ambito/dtic-NOTAS/dtic-NOTAs/`
2. Histórico 2024 preservado en `.Hist/`
3. El nuevo sistema convive con el histórico

### Convención de Nombres

```
Nota-<AÑO><NUMERO>_<AsuntoCorto>.<ext>

Ejemplos:
- Nota-2601_Nota_Horas_ServDASU_RRHH.docx
- Nota-2412_GuardiasPasivas_0.docx
- Nota-2409_GATICASolicitaDiasPorCapacitación_1.1.pdf
```

## 🔄 Armonía Integral

| Documento | Estado | Notas |
| :--- | :--- | :--- |
| `A08_dtic-NOTAS.md` | ✅ Creado | Manifiesto del ámbito |
| `A08.P001_Sistema-Web-Notas.md` | ✅ Web implementada | Sistema funcional (Fases 1-3 completas) |
| `dtic-NOTAs/` | ✅ Migrado | Archivo histórico en `docs/ambito/dtic-NOTAS/dtic-NOTAs/` |

---

## Referencias

- **Archivo histórico**: `dtic-NOTAs/.Hist/`
- **Bitácoras**: `./adn/tools/run db evento:listar --ambito dtic-NOTAS`