104 lines
5.4 KiB
Markdown
104 lines
5.4 KiB
Markdown
# 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 |
|
|
| 0.8 | Jubilar `imagenes/` y `screenshots/` (reemplazados por `assets/images/`) | ✅ 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 | **Imágenes del campus**: Descargar ~40 imágenes referenciadas en `secciones/` a `assets/images/` (contenido de estudio) | ✅ Hecho |
|
|
| 1.6 | **Rutas locales**: Actualizar `secciones/*/pagina.html` para que apunten a `assets/images/` en vez del campus online | ✅ Hecho |
|
|
| 1.7 | **PDFs offline**: Identificar y descargar PDFs referenciados externamente | 🟡 Media |
|
|
| 1.8 | **Eliminar dependencias externas**: Revisar que no haya recursos cargando de terceros (CDNs, Google Fonts, 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 |
|