1 line
No EOL
8.7 KiB
Markdown
1 line
No EOL
8.7 KiB
Markdown
# HOWTO: Optimización del Poster Provisioning\n\nUna guía práctica paso a paso para optimizar el poster usando el sistema de build avanzado.\n\n## 🚀 Inicio Rápido (5 minutos)\n\n### Paso 1: Verificar Prerequisites\n\n```bash\n# Verificar Nushell\nnu --version\n# Debería mostrar: 0.105.2 o superior\n```\n\n### Paso 2: Setup Inicial\n\n```bash\n# Navegar al directorio del poster\ncd poster/\n\n# Verificar estructura\nls\n# Deberías ver: src/, scripts/, config/, docs/\n\n# Primera build de desarrollo\nnu scripts/dev.nu build\n```\n\n### Paso 3: Verificar que Funciona\n\n```bash\n# Iniciar servidor de desarrollo\nnu scripts/dev.nu --watch --port 3000\n\n# Abrir en navegador: http://localhost:3000\n# Deberías ver el poster funcionando\n```\n\n¡Listo! Ya tienes el sistema funcionando.\n\n---\n\n## 🛠️ Workflow Diario de Desarrollo\n\n### Iniciar Sesión de Trabajo\n\n```bash\n# Limpiar build anterior y empezar fresh\nnu scripts/dev.nu clean\n\n# Iniciar con file watching\nnu scripts/dev.nu --watch --verbose\n```\n\n### Editar Archivos\n\n1. **HTML**: Edita `src/index.html`\n2. **CSS**: Edita archivos en `src/assets/css/modules/`\n3. **SVG**: Edita archivos en `src/assets/svg/`\n\n### Ver Cambios en Tiempo Real\n\n- Guarda cualquier archivo\n- El sistema detecta cambios automáticamente\n- La página se reconstruye en ~1-2 segundos\n- Refresca el navegador para ver cambios\n\n### Validar tu Código\n\n```bash\n# Verificar que todo está bien\nnu scripts/dev.nu lint\n\n# Analizar tamaños de archivos\nnu scripts/dev.nu analyze\n```\n\n---\n\n## 📊 Medir las Optimizaciones\n\n### Comparar Antes vs Después\n\n#### Método 1: Análisis Automático\n\n```bash\n# Build con análisis detallado\nnu scripts/prod.nu full\n\n# El sistema mostrará:\n# - Tamaños originales vs optimizados\n# - Porcentaje de reducción\n# - Score de performance\n```\n\n#### Método 2: Comparación Manual\n\n```bash\n# Ver tamaño de archivos originales\nls -la src/assets/css/poster.css\nls -la src/index.html\n\n# Hacer build optimizado\nnu scripts/prod.nu\n\n# Ver archivos optimizados\nls -la dist/assets/css/main.min.css\nls -la dist/index.html\n```\n\n#### Método 3: Con Herramientas de Red\n\n1. Abrir DevTools (F12)\n2. Ir a Network tab\n3. Cargar página original vs optimizada\n4. Comparar Total size y Load time\n\n### Métricas Típicas Esperadas\n\n```plaintext\n📊 Optimización Exitosa:\nHTML: 40-60% reducción\nCSS: 30-50% reducción\nSVG: 40-60% reducción\nTotal: 40-55% reducción\n```\n\n---\n\n## 🎯 Casos de Uso Comunes\n\n### Caso 1: Añadir Nueva Animación CSS\n\n```bash\n# 1. Editar módulo de animaciones\nnu scripts/dev.nu --watch\n\n# 2. Editar src/assets/css/modules/animations.css\n# Añadir tu nueva animación:\n@keyframes mi-nueva-animacion {\n 0% { transform: scale(1); }\n 50% { transform: scale(1.1); }\n 100% { transform: scale(1); }\n}\n\n# 3. Usar en componente\n# Editar src/assets/css/modules/components.css\n.mi-elemento {\n animation: mi-nueva-animacion 2s infinite;\n}\n\n# 4. Verificar en navegador\n# Los cambios aparecen automáticamente\n```\n\n### Caso 2: Optimizar SVG Nuevo\n\n```bash\n# 1. Añadir SVG a src/assets/svg/\n# Guardar como: mi-nuevo-icono.svg\n\n# 2. Decidir estrategia:\n# - Si es <5KB y decorativo → sprite externo\n# - Si es animado → inline en HTML\n# - Si es icono simple → data URI en CSS\n\n# 3. Para data URI en CSS:\n# Editar src/assets/css/svg-data.css\n:root {\n --icon-mi-icono: url('data:image/svg+xml;utf8,<svg>...</svg>');\n}\n.icon-mi-icono {\n background-image: var(--icon-mi-icono);\n}\n\n# 4. Build para ver resultado\nnu scripts/dev.nu analyze\n```\n\n### Caso 3: Preparar para Producción\n\n```bash\n# 1. Build final con todas las optimizaciones\nnu scripts/prod.nu full\n\n# 2. Verificar que todo funciona\nnu scripts/dev.nu preview --port 8080\n\n# 3. Ver archivos generados\nls -la dist/\n# Deberías ver:\n# index.html (minificado)\n# assets/css/main.min.css (minificado)\n# assets/svg/sprites.svg (optimizado)\n# .htaccess (configuración servidor)\n# deploy.sh (script deploy)\n\n# 4. Comprimir para web\nnu scripts/prod.nu --compress\n# Genera archivos .gz adicionales\n```\n\n---\n\n## 🔧 Tips y Tricks\n\n### Desarrollo Más Rápido\n\n```bash\n# Build solo CSS (más rápido)\nnu scripts/dev.nu build --css-only\n\n# Skip análisis durante desarrollo\nnu scripts/dev.nu build --no-analyze\n\n# Puerto personalizado si 8080 está ocupado\nnu scripts/dev.nu --port 3000\n```\n\n### Optimización Avanzada\n\n```bash\n# Ajustar configuración\n# Editar config/build.config.nu\n\nexport const config = {\n # Más agresivo: inline más CSS\n inline_css_max_size: 15360, # 15KB en lugar de 10KB\n\n # Menos preciso SVG = archivos más pequeños\n svg_precision: 1, # En lugar de 2\n\n # Habilitar compresión automática\n enable_gzip: true\n}\n```\n\n### Debug de Problemas\n\n```bash\n# Verbose output para ver qué está pasando\nnu scripts/dev.nu --verbose\n\n# Validar archivos fuente\nnu scripts/dev.nu lint\n\n# Limpiar todo y empezar fresh\nnu scripts/dev.nu clean\nnu scripts/prod.nu --clean --verbose\n```\n\n### Medición de Performance Web\n\n```bash\n# Después del build\nnu scripts/prod.nu full\n\n# El sistema mostrará:\nPerformance Score: A+ (Excellent)\nTotal size: 67.2 KB\nEstimated gzipped: 18.1 KB\n\n# Para sitios reales, también usar:\n# - Google PageSpeed Insights\n# - GTmetrix\n# - WebPageTest\n```\n\n---\n\n## 🎨 Personalización\n\n### Cambiar Configuración de Build\n\n```bash\n# Editar config/build.config.nu\n# Cambiar thresholds según tus necesidades:\n\ncritical_css_modules: 3, # Más CSS crítico inline\ninline_css_max_size: 8192, # Menos CSS inline (8KB)\nsvg_precision: 3, # Más precisión SVG\ncss_minify: false, # Disable minificación en dev\n```\n\n### Añadir Nuevos Módulos CSS\n\n```bash\n# 1. Crear nuevo módulo\ntouch src/assets/css/modules/mi-modulo.css\n\n# 2. Añadir a configuración\n# Editar config/build.config.nu\ncss_modules: [\n "modules/base.css",\n "modules/components.css",\n "modules/animations.css",\n "modules/patterns.css",\n "modules/mi-modulo.css" # ← Nuevo módulo\n]\n\n# 3. Importar en main.css\n# Editar src/assets/css/main.css\n@import url("modules/mi-modulo.css");\n```\n\n### Personalizar SVG Strategy\n\n```bash\n# Editar scripts/optimize-svg.nu\n# Cambiar umbral de inlining:\n\nlet inline_threshold = 3072 # 3KB en lugar de 5KB\n```\n\n---\n\n## 📱 Testing en Diferentes Dispositivos\n\n### Testing Local\n\n```bash\n# Iniciar servidor accesible en red local\nnu scripts/dev.nu --port 8080 --host 0.0.0.0\n\n# Acceder desde móvil:\n# http://TU_IP_LOCAL:8080\n```\n\n### Testing de Performance\n\n```bash\n# Build optimizado\nnu scripts/prod.nu full\n\n# Server local\nnu scripts/dev.nu preview\n\n# Usar DevTools:\n# - Network tab → Simulate 3G\n# - Performance tab → Record load\n# - Lighthouse → Audit\n```\n\n---\n\n## 🎯 Checklist de Calidad\n\n### Antes de Producción\n\n```bash\n□ nu scripts/dev.nu lint # Sin errores\n□ nu scripts/prod.nu full # Build exitoso\n□ nu scripts/dev.nu preview # Funciona localmente\n□ Score: A o A+ # Performance buena\n□ Total < 100KB # Tamaño razonable\n□ Gzipped < 30KB # Comprimido óptimo\n□ Animaciones funcionan # UX correcto\n□ Responsive design # Mobile friendly\n```\n\n### Deploy Checklist\n\n```bash\n□ Archivos en dist/ # Build completo\n□ .htaccess presente # Configuración servidor\n□ deploy.sh configurado # Script deploy\n□ DNS configurado # Dominio apunta\n□ SSL certificado # HTTPS activo\n□ Backup anterior # Respaldo seguro\n```\n\n---\n\n## 🆘 Solución Rápida de Problemas\n\n### "Build falla"\n\n```bash\n# Verificar Nushell version\nnu --version\n\n# Limpiar y reintentar\nnu scripts/dev.nu clean\nnu scripts/dev.nu build --verbose\n```\n\n### "Servidor no inicia"\n\n```bash\n# Verificar puerto disponible\nnetstat -an | grep 8080\n\n# Usar puerto diferente\nnu scripts/dev.nu --port 3000\n```\n\n### "Archivos muy grandes"\n\n```bash\n# Ajustar configuración más agresiva\n# Editar config/build.config.nu:\nsvg_precision: 1\ninline_css_max_size: 5120\n```\n\n### "Animaciones no funcionan"\n\n```bash\n# Verificar que SVG está inline\n# Animaciones CSS/SVG necesitan estar embebidas\n# No funcionan en archivos externos\n```\n\n### "CSS roto después de minificación"\n\n```bash\n# Disable minificación temporalmente\n# Editar config/build.config.nu:\ncss_minify: false\n\n# Rebuild y verificar\nnu scripts/dev.nu build\n```\n\n---\n\n**💡 Tip Final**: Mantén este HOWTO abierto mientras trabajas y úsalo como referencia rápida para cualquier tarea común. |