rm-KSALDIS-DT/docs/NORMALIZACION.md

NORMALIZACIÓN — Plan de estructura del sitio de transición

Objetivo: Transformar www-ksaldis-dt/ en un sitio web con estructura profesional, mantenible y escalable, siguiendo estándares web actuales.

---

✅ Fase 0 — Base inicial (completada)

#	Tarea	Estado
0.1	Crear directorio www-ksaldis-dt/	✅
0.2	Copiar LIBRO_DE_ESTUDIO.html como index.html	✅
0.3	Extraer CSS inline → css/style.css	✅
0.4	Extraer JS inline → js/app.js	✅
0.5	Crear assets/ para recursos estáticos	✅
0.6	Symlinks a directorios de contenido (videos_offline/, secciones/, etc.)	✅ Hecho
0.7	Reemplazar symlinks de imagenes/, screenshots/, campus/, subpaginas/ por copias reales	✅ Hecho

---

📋 Fase 1 — Limpieza y organización de assets

#	Tarea	Prioridad
1.1	Favicon: Agregar ícono de sitio (favicon.ico o .svg)	🟡 Media
1.2	Meta tags: Agregar Open Graph, Twitter Cards, autor, keywords	🟢 Alta
1.3	Google Fonts local: Descargar Inter y servir desde assets/fonts/ (sin depender de CDN)	🟡 Media
1.4	Imágenes: Copiar archivos reales a imagenes/, screenshots/, campus/, subpaginas/ (reemplazar symlinks)	✅ Hecho
1.5	Eliminar dependencias externas: Revisar que no haya recursos cargando de terceros (CDNs, etc.)	🟡 Media

---

📋 Fase 2 — Estructura del contenido

#	Tarea	Prioridad
2.1	Dividir el HTML: Separar el contenido académico en páginas por módulo/sección (en lugar de un solo HTML gigante)	🟡 Media
2.2	Navegación SPA: Implementar navegación tipo Single Page Application (carga de contenido vía fetch + innerHTML)	🔴 Alta
2.3	Sidebar dinámico: Generar el menú desde un JSON de estructura en vez de hardcodearlo	🟢 Alta
2.4	Breadcrumbs: Agregar migas de pan para saber dónde estás en la navegación	🟢 Alta
2.5	Página 404: Crear página de error personalizada	🟡 Media

---

📋 Fase 3 — Mejoras visuales y UX

#	Tarea	Prioridad
3.1	Print stylesheet: css/print.css para impresión/PDF con formato limpio	🟢 Alta
3.2	Modo oscuro: Soporte de tema claro/oscuro con prefers-color-scheme	🟡 Media
3.3	Transiciones: Suavizar animaciones de sidebar,scroll y colapsos	🟢 Alta
3.4	Barra de progreso de lectura: Indicador visual de cuánto llevás leído	🟡 Media
3.5	Responsive: Mejorar la experiencia en tablets y celulares	🟢 Alta

---

📋 Fase 4 — Funcionalidad y comportamiento

#	Tarea	Prioridad
4.1	Reproductor de video personalizado: Skin propia sobre <video> (controles unificados, velocidad, pantalla completa)	🟡 Media
4.2	Marcar temas vistos: Guardar en localStorage qué temas/videos ya revisaste	🔴 Alta
4.3	Búsqueda local: Buscador de texto en el contenido del curso (sin servidor)	🟡 Media
4.4	Descarga de PDF: Botón para descargar cada sección como PDF	🟢 Alta
4.5	Lazy loading: Cargar videos y PDFs sólo cuando se despliega la sección (optimiza carga inicial)	🟢 Alta

---

📋 Fase 5 — Performance y accesibilidad

#	Tarea	Prioridad
5.1	Auditoría Lighthouse: Pasar auditoría y corregir problemas de accesibilidad, SEO y performance	🟡 Media
5.2	Atributos ARIA: Roles y etiquetas para lectores de pantalla en sidebar, botones, videos	🟢 Alta
5.3	Etiquetas lang: Verificar atributos de idioma en todo el contenido	🟢 Alta
5.4	Imágenes con alt: Asegurar que todas tengan texto alternativo descriptivo	🟢 Alta
5.5	Contraste de colores: Verificar contraste suficiente (WCAG AA como mínimo)	🟡 Media

---

📋 Fase 6 — Scripts de generación y deploy

#	Tarea	Prioridad
6.1	Actualizar generar_dashboard.mjs: Que genere directamente en la estructura www-ksaldis-dt/ en vez de inline	🔴 Alta
6.2	Actualizar deploy: El webhook debe desplegar www-ksaldis-dt/ en vez de archivos sueltos	🔴 Alta
6.3	Actualizar DSPLIEGUE.md: Reflejar la nueva estructura	🟢 Alta
6.4	Limpiar archivos obsoletos: Remover scripts temporales (fix_videos.mjs, fix_all.js, test_*.js, etc.)	🟡 Media

---

📋 Fase 7 — Pulido final

#	Tarea	Prioridad
7.1	Testing cross-browser: Probar en Chrome, Firefox, Edge, Safari	🟡 Media
7.2	Testing offline: Desconectar internet y verificar que todo funciona	🔴 Alta
7.3	Pasar a producción: Reemplazar el sitio en el hosting por www-ksaldis-dt/	🔴 Alta