SUPER PROMPT — Calculadora de Texto Tipográfico

https://mario55666.github.io/Calculo_Tex/

SUPER PROMPT — Calculadora de Cálculo de Texto Tipográfico

## Aplicación Web Educativa · Diseño de Editorial

 🎯 OBJETIVO

Desarrollar una aplicación web de una sola página (HTML + CSS + JavaScript puro, sin frameworks) que funcione como una **calculadora interactiva profesional para cálculo de texto tipográfico** destinada a estudiantes de Diseño de Editorial. La herramienta debe permitir calcular la extensión de un texto compuesto (manuscrito → páginas impresas) usando la fórmula editorial clásica, con visualización interactiva en tiempo real.

## 🏗️ ARQUITECTURA Y ESTRUCTURA

### Orden de secciones (navegación fija superior):

1. **Inicio** — Selector de sistema tipográfico (Hero)

2. **Calculadora** — Formulario de datos + visualización canvas de página en tiempo real (side-by-side)

3. **Extensión** — Calculador de extensión editorial de la obra completa (preliminares, cuerpo, finales)

4. **Fórmula** — Narrativa paso a paso del cálculo (6 pasos con ecuaciones animadas)

5. **Interlineado** — Visor interactivo de interlineado con canvas animado (2 líneas de texto con guías)

6. **F.Puntaje** — Tablas de Factor Puntaje (general + específica) + calculador desde InDesign

7. **Enviar** — Formulario de envío por correo + impresión PDF

### Archivo único:

- Todo en un solo archivo `.html` autocontenido

- Sin dependencias locales (fuentes desde Google Fonts CDN)

- Responsive: funcional en desktop y móvil

- Imprimible como informe PDF profesional

---

## 🎨 SISTEMA DE DISEÑO (d3magindesign)

### Paleta de colores:

```

--navy: #0a1628 (fondo principal)

--navy-mid: #12203d (paneles)

--orange: #e8732a (acento primario, CTA)

--orange-glow: #ff8c42 (hover naranja)

--cream: #f5f0e8 (texto primario)

--teal: #2bb5a0 (acento secundario, resultados)

--red: #e74c3c (errores, campos obligatorios)

```

### Tipografía:

```

Display: 'Syne' (títulos, valores grandes) — weight 600-800

Body: 'DM Sans' (texto corrido, labels) — weight 300-700

Mono: 'JetBrains Mono' (valores numéricos, fórmulas, código) — weight 400-600

```

### Componentes UI:

- **Glass cards**: `background: rgba(255,255,255,0.04)`, `border: 1px solid rgba(255,255,255,0.08)`, `backdrop-filter: blur(12px)`

- **Section tags**: pastillas con punto animado pulsante, `font-family: mono`, uppercase

- **Botones ?**: círculos de 16px que abren diálogos emergentes con definiciones

- **Chips de resultado**: grid 2 columnas con label mono, valor grande display, unidad pequeña

- **Diálogos modales**: overlay oscuro + caja con borde naranja, cierre con ✕ y Escape

- **Tooltips fijos**: `position: fixed`, aparecen al hover sobre hotspots/labels, con tag/título/descripción/barra de color

### Efectos:

- Transiciones: `0.35s cubic-bezier(0.22, 1, 0.36, 1)`

- Scroll reveal: `IntersectionObserver` con `threshold: 0.01`

- Background: gradientes radiales sutiles fijos sobre el body

- Sin emojis en botones funcionales (usar SVG inline)

---

## 📐 SECCIÓN 1 — SELECTOR DE SISTEMA TIPOGRÁFICO

Dos tarjetas interactivas (grid 2 columnas) para elegir:

### Sistema Anglosajón (PostScript):

- **1 punto = 0.353 mm**

- 1 pica = 12 puntos

- 6 picas = 1 pulgada

- **Países**: EE.UU., Reino Unido, Canadá, Australia, Japón, Corea del Sur, India — estándar DTP digital

### Sistema Francés (Didot):

- **1 punto = 0.376 mm**

- 1 cícero = 12 puntos Didot

- 1 pt Didot ≈ 1.07 pt PostScript

- **Países**: Francia, Alemania, España, Italia, Portugal, Bélgica, Suiza, Austria, Países Bajos, América Latina

**Comportamiento**: Al seleccionar un sistema, TODAS las unidades, labels y conversiones de la aplicación se actualizan sincrónicamente (picas↔cíceros, factor de conversión mm, etc.).

---

## 🧮 SECCIÓN 2 — CALCULADORA (layout: formulario 380px | visualización flex)

### Panel izquierdo — Formulario "Registrar Datos del Texto":

Los campos deben seguir este orden exacto:

#### 1. Tipo de Letra *

- `<input type="text">` con `<datalist>` que permite escribir libremente O seleccionar de la lista

- Fuentes registradas (con Factor Puntaje específico): Baskerville (regular, italic, bold, bold italic), Bauhaus Light/Medium/Demi/Bold (ITC), Belwe Light/Light Italic/Medium/Bold, Bodoni Book/Book Italic/Regular/Italic/Bold

#### 2. Puntaje *

- `<select>` con valores normalizados: 6, 7, 8, 9, 10, 11, 12, 14, 18, 24 pts

- Opción adicional "Otro valor…" que muestra un `<input type="number">` para valor libre

- Botón **?** → diálogo explicando Factor Puntaje

#### 3. Interlineado (I.) *

- `<input type="number">` + unidad dinámica ("pts PostScript" o "pts Didot")

- Botón **?** → diálogo: distancia entre líneas base, notación "10/12", cómo configurar en InDesign (Alt+↑/↓)

- **Sincronización bidireccional**: al cambiar este valor, actualiza automáticamente el visor de interlineado interactivo (sección 5)

#### 4. Cantidad de Golpes (#G.m.) *

- `<input type="number">`

- Botón **?** → diálogo: definición de "golpe" (cada carácter = 1 golpe, incluidos espacios), cómo obtenerlo en Word (Revisar → Contar palabras → Caracteres con espacios)

#### 5. Ancho de Columnaje (Ø) *

- `<input type="text">` (NO type="number") para aceptar sufijos:

  - Escribir "24p" → selecciona sistema anglosajón automáticamente

  - Escribir "20c" → selecciona sistema francés automáticamente

  - Escribir solo "24" → usa el sistema activo

- Nota visible: "Sistema duodecimal: 1 pica = 12 puntos PostScript" (se actualiza con el sistema)

- Botón **?** → diálogo explicando que el ancho se mide en unidades tipográficas duodecimales (picas o cíceros), cómo medirlo en InDesign

#### 6. Factor Puntaje (F.p.)

- **Tres modos** seleccionables con botones toggle:

  1. **F.p. Específico** → se auto-completa al elegir fuente + puntaje (readonly, fondo sutil)

  2. **F.p. General** → se auto-completa al elegir puntaje (readonly), usando tabla simplificada:

     - 6-8pts → 3.3 | 9-10pts → 2.9 | 11-12pts → 2.5 | 13-14pts → 2.0

     - 15-16pts → 1.5 | 17-18pts → 1.0 | 20-21pts → 0.9 | 23-24pts → 0.8

  3. **Valor manual** → campo editable para ingresar F.p. calculado externamente

- Botón **?** → diálogo explicando los tres tipos de F.p.

#### 7. Unidad de medida tipográfica Punto (pt.)

- Campo `readonly` que muestra: "0.353 mm (PostScript)" o "0.376 mm (Didot)" según sistema

#### 8. Alto de Caja Tipográfica (A.C.T.)

- **NO es obligatorio** — el cálculo funciona sin él (pasos 1-5 se calculan; paso 6 muestra "Falta A.C.T.")

- Tres presets con botones: **Revista/Periódico** (~24 cm), **Libro estándar** (~19 cm), **Valor personalizado**

- Botón **?** → diálogo explicando cómo obtenerlo en InDesign: `A.C.T. = Altura de página − (margen sup. + margen inf.)`, con pasos detallados del menú

- Nota: "Altura de la mancha de impresión. Obtenida en InDesign: Archivo → Configuración del documento"

#### Botón "Calcular Extensión de Texto"

- Estilo: gradiente naranja, full-width, ícono de calculadora SVG

- Validación: marca campos vacíos con borde rojo (excepto A.C.T.)

- Al calcular: scroll suave hacia la visualización del canvas

### Panel derecho — Visualización en Tiempo Real:

#### Selector de formato de papel (arriba del canvas):

- `<select>` con formatos: A0-A5, Letter, Legal, Tabloid, Executive, B4-B6, 8K, 16K, 32K, Personalizado

- Campos Ancho/Alto en mm (editables solo en modo Personalizado)

- Al cambiar formato → redibuja el canvas

#### Canvas de página (estilo retícula editorial):

- **Fondo texturizado** tipo papel editorial (gradiente beige #c8c1b2→#d8d2c4 con noise SVG)

- **Página blanca** con marcas de corte (crop marks) en las esquinas

- **Zona de márgenes** en rosa/magenta semitransparente (rgba(212,46,107))

- **Área de texto** (mancha) en amarillo pálido, delimitada por borde punteado magenta

- **Rejilla de líneas base** en cyan (rgba(0,151,215,0.2)) — las líneas que dibuja InDesign

- **Números de línea** a la izquierda: intensidad variable (cada 5 y cada 10 más oscuros)

- **Labels**: Ø (ancho) en cyan arriba, A.T.C. (altura) en naranja al costado, dimensiones de página en gris

- **Hotspots interactivos**: al pasar cursor sobre márgenes/área de texto → tooltip flotante oscuro

- **Toggles de capas**: ✓ Márgenes · ✓ Área texto · ✓ Líneas base · ✓ N° líneas

#### Chips de resultado (debajo del canvas):

Grid de 2 columnas + 1 chip grande:

- Ancho (Ø) | F.p. | C.c.p.l. | Renglones (C.r.) | Interlineado | **Líneas/página** | **Extensión Total** (chip grande con texto "Cantidad de páginas: X páginas (Y completas + Z%)")

#### Factor de Error — Verificación con InDesign:

- **Lado izquierdo** (automático): páginas calculadas + caracteres del manuscrito

- **Lado derecho** (manual): campos para "Páginas reales InDesign" y "Caracteres reales InDesign"

- **Resultado**: Error páginas (%), Error caracteres (%), Precisión fórmula (%)

- Código de color: teal ≤3% (excelente), naranja 3-5% (aceptable), rojo >5% (recalcular F.p.)

- Explicación contextual del nivel de error

---

## 📚 SECCIÓN 3 — CALCULADOR DE EXTENSIÓN EDITORIAL

### Estructura por 3 secciones de la industria editorial:

#### 1. Preliminares (fondo teal sutil):

Cada elemento tiene: ícono + nombre con tooltip + input numérico + sugerencia de páginas

| Elemento | Tooltip | Sugerido |

|----------|---------|----------|

| Anteportada | Primera página, solo título, falsa portada | 1 |

| Portada | Título completo, autor, editorial, año | 1 |

| Legales | ISBN, copyright, depósito legal, reverso de portada | 1 |

| Dedicatoria | Dedicación breve en página impar | 1 |

| Tabla de contenido | Lista de capítulos con páginas, estilo anglosajón al inicio | 2 |

| Reconocimientos | Agradecimientos a personas e instituciones | 1 |

| Prólogo | Texto introductorio, puede tener varias páginas | 2 |

#### 2. Cuerpo Principal (fondo naranja sutil):

| Elemento | Tooltip | Sugerido |

|----------|---------|----------|

| Apertura de capítulo | Diseño especial: título, imagen, cita. Comienza en impar | 0 |

| Contenido (Cuerpo) | Texto principal. **Se auto-completa con el resultado del cálculo de texto** | 0 (auto) |

| Continuación | Subcapítulos con saltos de sección | 0 |

| Cierre de capítulo | Páginas finales. Si termina en impar → página en blanco | 0 |

#### 3. Páginas Finales (fondo neutro):

| Elemento | Tooltip | Sugerido |

|----------|---------|----------|

| Apéndice | Material complementario: tablas, glosarios, datos técnicos | 0 |

| Notas | Endnotes, referencias al final del libro | 0 |

| Índice temático | Lista alfabética de temas. Estimación: 2-5% del cuerpo | 0 |

| Bibliografía | Fuentes según norma APA/Chicago/ISO 690 | 0 |

| Colofón | Datos técnicos: tipografía, papel, imprenta, tiraje. Última página | 1 |

### Resumen dual:

- **Cálculo de Texto (Fórmula)**: páginas del contenido principal solamente

- **Componentes Accesorios**: total − contenido (preliminares + finales + aperturas/cierres)

- **Total de Páginas Estimadas**: suma total en tipografía grande

### Pliegos (múltiplos para encuadernación):

Tres columnas mostrando el múltiplo superior más cercano y cuántas páginas en blanco se necesitan:

- **Múltiplo de 4** (grapado)

- **Múltiplo de 8** (cuadernillos simples)

- **Múltiplo de 16** (cuadernillos offset)

### Consejos al pie:

- Capítulos en página impar → páginas en blanco

- Pliego editorial múltiplo de 4/8/16

- Índice temático: 2-5% del cuerpo

- Múltiplo de 4 para grapado, de 8 para cuadernillos, de 16 para offset

---

## 📊 SECCIÓN 4 — FÓRMULA PASO A PASO

Timeline vertical con 6 pasos, cada uno con:

- Número circular (naranja activo → teal completado)

- Tarjeta con encabezado (título + badge de fórmula)

- Descripción narrativa

- **Ecuación animada** con valores que se actualizan en vivo al calcular

### Los 6 pasos:

```

1. Ø × F.p. = C.c.p.l.     (Caracteres por Línea)

2. #G.m. ÷ C.c.p.l. = C.r.  (Cantidad de Renglones)

3. C.r. × I. = A.T.C.p.     (Altura Total Columna en Puntos)

4. A.T.C.p. × 0.353 = A.T.C.mm. (Conversión a milímetros)

5. A.T.C.mm. ÷ 10 = A.T.C.cm.  (Conversión a centímetros)

6. A.T.C.cm. ÷ A.C.T. = Extensión (Páginas)

```

El paso 4 usa el factor del sistema seleccionado (0.353 o 0.376).

---

## 🎵 SECCIÓN 5 — INTERLINEADO INTERACTIVO

### Controles:

- Tamaño de Cuerpo (pts) — sincronizado con el puntaje de la calculadora

- Slider de factor de interlineado (0.8x – 3.0x) con porcentaje en tiempo real

- Campos de texto editables para las dos líneas

### Canvas interactivo:

- Fondo negro (#050510) con dos líneas de texto en Times New Roman

- **Línea 1** (fija): con 4 guías coloreadas (ascendentes=rojo, altura x=amarillo, base=teal, descendentes=azul)

- **Línea 2** (móvil): se desplaza verticalmente según el interlineado

- **Indicador de entrelínea**: zona naranja semitransparente entre descendente de línea 1 y ascendente de línea 2

- Labels de medida en puntos sobre cada guía

### Leyenda de colores (horizontal)

### 5 tarjetas de medida:

Ascendentes (rojo) | Altura x (amarillo) | Línea base (teal, FIJA) | Descendentes (azul) | Entrelínea (naranja) — con valor en pts y conversión a mm

### Sincronización bidireccional:

- Calculadora → Visor: al cambiar puntaje/interlineado en la calculadora, el visor se actualiza

- Al presionar "Calcular" → sincroniza ambos valores

---

## 📋 SECCIÓN 6 — FACTOR PUNTAJE

### Explicación de cómo se obtiene:

- Fórmula: `(caracteres ÷ líneas) ÷ ancho en picas = F.p.`

- Nota sobre margen de error: ±3-5% en español, dependiente de distribución de caracteres anchos vs. estrechos

### Tabla General (cuadrícula de tarjetas clickeables):

8 rangos de puntaje con su F.p. promedio

### Tabla Específica (tabla HTML scrollable):

17 fuentes × 10 puntajes, con resaltado de celda activa al calcular

### Calculador de F.p. desde InDesign:

- **Diagrama visual de 4 pasos** con íconos:

  1. 📄 Componer texto con fuente y puntaje en una columna

  2. 🔢 Menú Ventana → Info: contar caracteres

  3. 📏 Contar líneas visibles en el marco

  4. ✅ F.p. = (caracteres ÷ líneas) ÷ ancho en picas

- 3 campos de entrada: Caracteres, Líneas, Ancho (picas)

- Resultado con botón "Usar en calculadora ↑"

---

## 📧 SECCIÓN 7 — ENVÍO

### Formulario:

- Nombres y Apellidos * | Correo * | Sección *

- Observaciones (textarea)

### Botones:

1. **Enviar por Correo**: `mailto:` al correo del estudiante con CC a `c12139@utp.edu.pe`, cuerpo con todos los datos y resultados del cálculo

2. **Imprimir PDF**: abre diálogo de impresión con estilos `@media print` optimizados

3. **Limpiar**: resetea todos los campos y resultados

---

## 🖨️ CONFIGURACIÓN DE IMPRESIÓN (@media print)

El PDF debe ser un **informe profesional** con:

- Encabezado: "INFORME DE CÁLCULO DE TEXTO TIPOGRÁFICO" + datos del curso

- **Elementos visibles**: formulario con datos, canvas, chips de resultados, factor de error, extensión editorial, fórmula paso a paso, tabla F.p. específica, formulario de envío con observaciones

- **Elementos ocultos**: navegación, botones interactivos, selector de sistema, sliders, diálogos, canvas de interlineado animado, tabla F.p. general, calculador de F.p.

- Saltos de página: Extensión en nueva página, Fórmula en nueva página, F.Puntaje en nueva página

- Formato A4, márgenes 1.2cm × 1.5cm, tipografía 9pt

---

## 📊 DATOS REQUERIDOS

### Tabla de Factor Puntaje Específico:

```

Fuente                  | 6    | 7    | 8    | 9    | 10   | 11   | 12   | 14   | 18   | 24

Baskerville             | 4.62 | 3.97 | 3.47 | 3.09 | 2.78 | 2.52 | 2.31 | 1.98 | 1.54 | 1.16

Baskerville italic      | 5.48 | 4.70 | 4.12 | 3.66 | 3.29 | 2.99 | 2.74 | 2.35 | 1.83 | 1.37

Baskerville Bold        | 4.31 | 3.69 | 3.23 | 2.87 | 2.59 | 2.35 | 2.16 | 1.85 | 1.44 | 1.00

Baskerville Bold Italic | 4.86 | 4.17 | 3.65 | 3.24 | 2.92 | 2.65 | 2.43 | 2.09 | 1.62 | 1.22

Bauhaus Light (ITC)     | 4.72 | 4.04 | 3.54 | 3.14 | 2.83 | 2.57 | 2.36 | 2.02 | 1.57 | 1.18

Bauhaus Medium (ITC)    | 4.52 | 3.86 | 3.39 | 3.00 | 2.70 | 2.46 | 2.26 | 1.93 | 1.50 | 1.13

Bauhaus Demi (ITC)      | 4.44 | 3.80 | 3.33 | 2.96 | 2.66 | 2.42 | 2.22 | 1.90 | 1.48 | 1.07

Bauhaus Bold (ITC)      | 4.28 | 3.66 | 3.20 | 2.85 | 2.56 | 2.33 | 2.14 | 1.83 | 1.43 | 1.16

Belwe Light             | 4.62 | 3.96 | 3.47 | 3.08 | 2.77 | 2.52 | 2.31 | 1.98 | 1.54 | 1.19

Belwe Light Italic      | 4.77 | 4.09 | 3.58 | 3.18 | 2.86 | 2.60 | 2.39 | 2.05 | 1.59 | 1.19

Belwe Medium            | 4.30 | 3.69 | 3.23 | 2.87 | 2.58 | 2.35 | 2.15 | 1.84 | 1.43 | 1.08

Belwe Bold              | 4.08 | 3.48 | 3.05 | 2.70 | 2.44 | 2.23 | 2.04 | 1.74 | 1.36 | 1.02

Bodoni Book             | 4.84 | 4.16 | 3.63 | 3.23 | 2.91 | 2.64 | 2.42 | 2.07 | 1.61 | 1.21

Bodoni Book Italic      | 4.84 | 4.16 | 3.63 | 3.23 | 2.91 | 2.64 | 2.42 | 2.07 | 1.61 | 1.21

Bodoni                  | 4.52 | 3.88 | 3.40 | 3.02 | 2.71 | 2.16 | 2.26 | 1.93 | 1.50 | 1.12

Bodoni Italic           | 4.52 | 3.88 | 3.40 | 3.02 | 2.71 | 2.16 | 2.26 | 1.93 | 1.50 | 1.12

Bodoni Bold             | 4.13 | 3.54 | 3.10 | 2.75 | 2.48 | 2.25 | 2.06 | 1.77 | 1.37 | 1.02

```

### Formatos de papel:

A0 (841×1189), A1 (594×841), A2 (420×594), A3 (297×420), A4 (210×297), A5 (148×210), Letter (216×279), Legal (216×356), Tabloid (279×432), Executive (184×267), B4 (257×364), B5 (182×257), B6 (128×182), 8K (270×390), 16K (195×270), 32K (130×185), Personalizado

---

## ⚡ COMPORTAMIENTOS TÉCNICOS CLAVE

### Validación:

- Campos obligatorios (*): Tipo de letra, Puntaje, Interlineado, Golpes, Ancho de columnaje

- A.C.T. NO es obligatorio — sin él se calculan pasos 1-5 pero no paso 6

- Borde rojo en campos inválidos, sin bloquear si A.C.T. está vacío

### Cálculo en tiempo real:

- Al presionar "Calcular": actualiza canvas, chips, ecuaciones, visor interlineado, extensión editorial

- Scroll automático al canvas tras calcular

- Los chips se animan secuencialmente (150ms delay cada uno)

### Sincronizaciones:

- Sistema tipográfico → todas las unidades y conversiones

- Fuente + Puntaje → F.p. específico (auto-fill)

- Puntaje + Interlineado → visor interactivo de interlineado

- Resultado de páginas → campo "Contenido" de extensión editorial

- Sufijo p/c en ancho → cambio de sistema tipográfico

### Canvas de página:

- `devicePixelRatio` para pantallas Retina

- Escala automática para ajustar al contenedor

- Redibujado en `resize` del window

- Tooltips por hotspot con `mousemove` sobre zonas definidas

### Diálogos (6 definidos):

- `ancho`: Explica Ø, sistema duodecimal, picas/cíceros

- `act`: Explica A.C.T., cómo obtenerlo en InDesign (5 pasos)

- `fp`: Explica los 3 tipos de Factor Puntaje

- `golpe`: Define "golpe", cómo contarlos en Word

- `inter`: Define interlineado, notación, configuración InDesign

- `cr`: Explica cantidad de renglones

### Tooltips de extensión editorial (16 términos):

Cada nombre de elemento editorial tiene `data-def` y `data-name` que se muestran en el tooltip global al hover.

---

## 🦶 FOOTER

```

d3magindesign

Docente: Mg. Mario Quiroz · Curso: Diseño de Información · 2026 · Semana 3

Universidad Tecnológica del Perú · Facultad de Ciencias de la Comunicación

```

---

## 📬 EMAIL (mailto)

- **TO**: correo del estudiante

- **CC**: c12139@utp.edu.pe

- **Subject**: "Cálculo de Texto - [Nombre] - Sección [Sección]"

- **Body**: texto plano con todos los datos de entrada + resultados de los 6 pasos + resultado final en páginas

---

## ✅ CHECKLIST DE CALIDAD

- [ ] JS sin errores de sintaxis (validar con `new Function(script)`)

- [ ] Todos los IDs referenciados en JS existen en el HTML

- [ ] No hay variables globales huérfanas (ej: `bh` fuera de su scope)

- [ ] `@media print` oculta elementos interactivos y muestra informe limpio

- [ ] Template literals (backticks) para strings multilínea en el email body

- [ ] Responsive: `grid-template-columns: 1fr` en ≤900px y ≤600px

- [ ] Canvas se redibuja en `window.resize`

- [ ] IntersectionObserver con fallback `setTimeout(3000)` para hacer todo visible

- [ ] Inputs `type="text"` donde se necesita parsear sufijos (ej: "24p")

- [ ] `readonly` en campos auto-calculados (F.p. específico, F.p. general, punto pt.)