1 line
8.7 KiB
Markdown
1 line
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.
|