# Proceso de Actualización de Assets - Guía Completa

## Resumen Ejecutivo

El sistema CD-System incluye un comando automatizado (`project:update-assets`) que procesa los assets de identidad visual desde una carpeta centralizada (`public/cd-project/assets/`) y los distribuye a las ubicaciones correctas del proyecto.

## Flujo de Trabajo

```
1. Preparar archivos → 2. Colocar en assets/ → 3. Ejecutar comando → 4. Actualizar configs → 5. Limpiar caché → 6. Verificar
```

## Paso 1: Preparar los Archivos

### Archivos Requeridos

Coloca todos estos archivos en `public/cd-project/assets/`:

**Logos:**
- `logo.png` - Logo principal (header)
- `logo-2.png` - Logo para loader/pantalla de carga
- `logo-alternative.png` - Logo para footer

**Favicons:**
- `favicon.ico` - Favicon estándar (16x16, 32x32, 48x48)
- `favicon.svg` - Favicon vectorial (recomendado)
- `apple-touch-icon.png` - Icono para iOS (180x180px)
- `web-app-manifest-192x192.png` - Icono PWA 192x192
- `web-app-manifest-512x512.png` - Icono PWA 512x512

**Manifest:**
- `site.webmanifest` - Archivo JSON con configuración PWA

**Opcionales:**
- `og-image.png` - Imagen Open Graph (1200x630px)
- `twitter-image.png` - Imagen Twitter Card (1200x630px)
- `skin-*.css` - Archivos de skin CSS personalizados

### Preparar site.webmanifest

El archivo `site.webmanifest` debe tener esta estructura:

```json
{
  "name": "Nombre Completo del Proyecto",
  "short_name": "Nombre Corto",
  "icons": [
    {
      "src": "/web-app-manifest-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "/web-app-manifest-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "theme_color": "#COLOR_PRINCIPAL",
  "background_color": "#COLOR_FONDO",
  "display": "standalone"
}
```

**Nota:** El comando corregirá automáticamente las rutas de los iconos para incluir el prefijo `/cd-project/img/favicon/`, pero asegúrate de que `name`, `short_name`, `theme_color` y `background_color` sean correctos.

## Paso 2: Ejecutar el Comando

### Opción A: Comando Artisan Directo

```bash
php artisan project:update-assets public/cd-project/assets --backup
```

**Parámetros:**
- `public/cd-project/assets` - Directorio fuente con los assets
- `--backup` - Crea un backup antes de actualizar (recomendado)
- `--project="nombre"` - Nombre del proyecto (opcional, para logging)

### Opción B: Script Helper

```bash
./scripts/update-project-assets.sh
```

O especificando la ruta:
```bash
./scripts/update-project-assets.sh public/cd-project/assets
```

## Paso 3: Lo que el Comando Hace Automáticamente

### ✅ Distribución de Archivos

El comando copia los archivos desde `public/cd-project/assets/` a:

- Logos → `public/cd-project/img/logos/`
- Favicons → `public/cd-project/img/favicon/`
- Meta tags → `public/cd-project/img/meta-tags/`
- Skins → `public/template/css/skins/`

### ✅ Procesamiento del Manifest

El comando:
1. Lee el `site.webmanifest` desde assets
2. Corrige automáticamente las rutas de los iconos para incluir el prefijo completo
3. Guarda el manifest procesado en `public/cd-project/img/favicon/site.webmanifest`

**Ejemplo de corrección automática:**
```json
// Antes (en assets)
"src": "/web-app-manifest-192x192.png"

// Después (procesado)
"src": "/cd-project/img/favicon/web-app-manifest-192x192.png"
```

### ✅ Backup Automático

Si usas `--backup`, el comando crea un backup en:
```
storage/app/backups/assets/YYYY-MM-DD_HHMMSS/
```

### ✅ Validación de Skins

Si hay archivos `skin-*.css`, el comando:
- Los copia a `public/template/css/skins/`
- Valida compatibilidad con el demo actual
- Muestra información útil sobre gestión de skins

## Paso 4: Actualizaciones Manuales Requeridas

**⚠️ IMPORTANTE:** El comando NO actualiza las configuraciones. Debes hacerlo manualmente:

### 1. Actualizar `config/site.php`

**Línea ~86 - `assets.main_logo_alt`:**
```php
'main_logo_alt' => 'Nombre del Proyecto - Descripción',
```

**Línea ~87 - `assets.main_logo_height` (si es necesario):**
```php
'main_logo_height' => 60, // Ajustar según el diseño del logo
```

### 2. Verificar `site.webmanifest`

Aunque el comando corrige las rutas, verifica que:
- `name` y `short_name` sean correctos
- `theme_color` y `background_color` coincidan con el proyecto

## Paso 5: Limpiar Caché

Después de actualizar assets y configuraciones:

```bash
php artisan config:clear
php artisan cache:clear
php artisan view:clear
```

## Paso 6: Verificación

### Verificar en Navegador

1. Abrir el sitio en modo incógnito
2. Verificar favicon en la pestaña
3. Verificar logo en header
4. Verificar logo en footer
5. Verificar logo en loader/pantalla de carga

### Verificar Meta Tags

- **Facebook:** [Sharing Debugger](https://developers.facebook.com/tools/debug/)
- **Twitter:** [Card Validator](https://cards-dev.twitter.com/validator)

### Verificar en Dispositivos Móviles

- iOS: Verificar icono en pantalla de inicio
- Android: Verificar icono en pantalla de inicio

## Ejemplo Completo

```bash
# 1. Preparar archivos en public/cd-project/assets/
# (logo.png, favicon.ico, etc.)

# 2. Ejecutar comando
php artisan project:update-assets public/cd-project/assets --backup

# 3. Actualizar config/site.php manualmente
# (main_logo_alt, main_logo_height)

# 4. Limpiar caché
php artisan config:clear
php artisan cache:clear
php artisan view:clear

# 5. Verificar en navegador
php artisan serve
```

## Troubleshooting

### El comando no encuentra los archivos

**Problema:** `❌ El directorio fuente no existe`

**Solución:**
- Verifica que la ruta sea correcta
- Usa ruta absoluta si es necesario: `/ruta/completa/a/assets`
- O ruta relativa desde el root: `public/cd-project/assets`

### El manifest tiene rutas incorrectas

**Problema:** Las rutas en el manifest no funcionan

**Solución:**
- El comando corrige las rutas automáticamente
- Si aún hay problemas, verifica que el manifest en assets tenga el formato correcto
- Las rutas deben empezar con `/` o ser relativas

### Los logos no se ven después de actualizar

**Problema:** Los logos no aparecen en el sitio

**Solución:**
1. Limpiar caché del navegador (Ctrl+Shift+R o Cmd+Shift+R)
2. Verificar que los archivos se copiaron correctamente
3. Verificar permisos de archivos
4. Limpiar caché de Laravel

### El manifest no se actualiza

**Problema:** El manifest no se procesa

**Solución:**
- Verifica que `site.webmanifest` existe en `public/cd-project/assets/`
- Verifica que el JSON es válido
- Revisa los logs del comando para ver errores

## Archivos Procesados - Resumen

| Archivo | Origen | Destino | Procesamiento |
|---------|--------|---------|---------------|
| logo.png | assets/ | img/logos/ | Copia directa |
| logo-2.png | assets/ | img/logos/ | Copia directa |
| logo-alternative.png | assets/ | img/logos/ | Copia directa |
| favicon.ico | assets/ | img/favicon/ | Copia directa |
| favicon.svg | assets/ | img/favicon/ | Copia directa |
| apple-touch-icon.png | assets/ | img/favicon/ | Copia directa |
| web-app-manifest-192x192.png | assets/ | img/favicon/ | Copia directa |
| web-app-manifest-512x512.png | assets/ | img/favicon/ | Copia directa |
| site.webmanifest | assets/ | img/favicon/ | **Procesado** (corrige rutas) |
| og-image.png | assets/ | img/meta-tags/ | Copia directa (opcional) |
| twitter-image.png | assets/ | img/meta-tags/ | Copia directa (opcional) |
| skin-*.css | assets/ | template/css/skins/ | Copia directa + validación |

## Referencias

- Documentación completa: `docs/bewpro/core/CAMBIO-IDENTIDAD-VISUAL.md`
- Comando: `app/Console/Commands/UpdateProjectAssets.php`
- Script helper: `scripts/update-project-assets.sh`