# 🎨 Proceso Optimizado: Actualizar Assets del Proyecto

## 📋 Resumen

Guía paso a paso para actualizar los assets (logos, favicons, skins) de un proyecto después de su creación, siguiendo las mejores prácticas de desarrollo.

---

## 🎯 Objetivo

Actualizar los assets del proyecto `cokecolombres` (o cualquier proyecto) de forma segura y organizada, manteniendo backups y siguiendo el flujo de trabajo de Git.

---

## 📦 Assets Requeridos

### Estructura de Archivos Necesarios

Los assets deben estar en una carpeta con estos archivos:

```
carpeta-con-assets/
├── logo.png                    (Logo principal)
├── logo-2.png                  (Logo alternativo/loader)
├── logo-alternative.png        (Logo para footer)
├── favicon.ico                 (Favicon ICO)
├── apple-touch-icon.png        (Icono para Apple)
├── favicon.svg                 (Favicon SVG)
├── web-app-manifest-192x192.png (Icono PWA 192x192)
├── web-app-manifest-512x512.png (Icono PWA 512x512)
└── skin-*.css                  (Opcional: skins CSS personalizados)
```

---

## 🚀 Proceso Paso a Paso

### Paso 1: Preparar Assets

1. **Organizar tus assets** en una carpeta temporal:
   ```bash
   # Ejemplo: crear carpeta temporal con assets
   mkdir -p ~/assets-cokecolombres
   # Copiar tus assets allí
   ```

2. **Verificar que tienes todos los archivos requeridos**:
   ```bash
   ls -la ~/assets-cokecolombres/
   # Debe mostrar los 8 archivos requeridos (mínimo)
   ```

### Paso 2: Navegar al Proyecto

```bash
cd /Applications/XAMPP/xamppfiles/htdocs/cokecolombres
```

### Paso 3: Copiar Assets a la Carpeta Temporal del Proyecto

```bash
# Crear carpeta temporal en el proyecto (si no existe)
mkdir -p public/cd-project/assets-temp

# Copiar tus assets a la carpeta temporal
cp ~/assets-cokecolombres/* public/cd-project/assets-temp/

# O si tus assets están en otra ubicación:
# cp /ruta/a/tus/assets/* public/cd-project/assets-temp/
```

**Alternativa**: Si prefieres, puedes copiar directamente a `public/cd-project/assets/` y luego ejecutar el comando.

### Paso 4: Verificar Assets Antes de Actualizar

```bash
# Verificar que los archivos están correctos
ls -la public/cd-project/assets-temp/

# Verificar nombres (deben coincidir exactamente):
# - logo.png
# - logo-2.png
# - logo-alternative.png
# - favicon.ico
# - apple-touch-icon.png
# - favicon.svg
# - web-app-manifest-192x192.png
# - web-app-manifest-512x512.png
```

### Paso 5: Crear Backup (Recomendado)

El comando puede crear backup automáticamente, pero también puedes hacerlo manualmente:

```bash
# Backup manual (opcional, el comando lo hace con --backup)
mkdir -p storage/app/backups/assets-manual
cp -r public/cd-project/img/logos storage/app/backups/assets-manual/ 2>/dev/null || true
cp -r public/cd-project/img/favicon storage/app/backups/assets-manual/ 2>/dev/null || true
```

### Paso 6: Ejecutar Actualización de Assets

```bash
# Desde el directorio del proyecto
cd /Applications/XAMPP/xamppfiles/htdocs/cokecolombres

# Ejecutar comando con backup
php artisan project:update-assets public/cd-project/assets-temp --backup --project="cokecolombres"
```

**O si copiaste directamente a `public/cd-project/assets/`:**

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

### Paso 7: Verificar Resultado

```bash
# Verificar que los logos se copiaron
ls -la public/cd-project/img/logos/
# Debe mostrar: logo.png, logo-2.png, logo-alternative.png

# Verificar que los favicons se copiaron
ls -la public/cd-project/img/favicon/
# Debe mostrar: favicon.ico, apple-touch-icon.png, favicon.svg, etc.

# Verificar backup (si se creó)
ls -la storage/app/backups/assets/
```

### Paso 8: Limpiar Carpeta Temporal (Opcional)

```bash
# Si usaste carpeta temporal, puedes eliminarla
rm -rf public/cd-project/assets-temp
```

### Paso 9: Commit de Cambios en Git

```bash
# Verificar cambios
git status

# Agregar assets actualizados
git add public/cd-project/img/logos/
git add public/cd-project/img/favicon/

# Commit
git commit -m "feat: Actualizar assets del proyecto (logos y favicons)

- Actualizar logos principales y alternativos
- Actualizar favicons y iconos PWA
- Backup creado en storage/app/backups/assets/"
```

### Paso 10: Verificar en el Navegador

```bash
# Iniciar servidor
php artisan serve

# Abrir en navegador: http://127.0.0.1:8000
# Verificar que:
# - Los logos se muestran correctamente
# - El favicon aparece en la pestaña
# - Los iconos PWA están actualizados
```

---

## 📋 Comando Completo (Resumen)

```bash
# 1. Navegar al proyecto
cd /Applications/XAMPP/xamppfiles/htdocs/cokecolombres

# 2. Copiar assets a carpeta temporal (o directamente a public/cd-project/assets/)
cp /ruta/a/tus/assets/* public/cd-project/assets-temp/

# 3. Ejecutar actualización con backup
php artisan project:update-assets public/cd-project/assets-temp --backup --project="cokecolombres"

# 4. Verificar
ls -la public/cd-project/img/logos/
ls -la public/cd-project/img/favicon/

# 5. Commit
git add public/cd-project/img/
git commit -m "feat: Actualizar assets del proyecto"

# 6. Limpiar temporal (opcional)
rm -rf public/cd-project/assets-temp
```

---

## ✅ Checklist de Verificación

- [ ] Assets preparados con nombres correctos
- [ ] Assets copiados a carpeta temporal o `public/cd-project/assets/`
- [ ] Backup creado (automático con `--backup`)
- [ ] Comando ejecutado exitosamente
- [ ] Logos copiados a `public/cd-project/img/logos/`
- [ ] Favicons copiados a `public/cd-project/img/favicon/`
- [ ] Skins CSS copiados (si se proporcionaron)
- [ ] Cambios commiteados en Git
- [ ] Verificado en navegador

---

## 🎨 Assets Opcionales: Skins CSS

Si tienes un skin CSS personalizado:

1. **Colocar el archivo** en la carpeta de assets:
   ```
   public/cd-project/assets-temp/
   └── skin-construction.css  (o el nombre de tu skin)
   ```

2. **El comando lo detectará automáticamente** y lo copiará a:
   ```
   public/template/css/skins/skin-construction.css
   ```

3. **Validará compatibilidad** con el demo actual

---

## 🔄 Flujo de Trabajo Recomendado

### Opción A: Carpeta Temporal (Recomendado)

```
1. Preparar assets en carpeta externa
   ↓
2. Copiar a public/cd-project/assets-temp/
   ↓
3. Ejecutar: php artisan project:update-assets public/cd-project/assets-temp --backup
   ↓
4. Verificar resultado
   ↓
5. Commit en Git
   ↓
6. Limpiar carpeta temporal
```

### Opción B: Directo a Assets

```
1. Preparar assets en carpeta externa
   ↓
2. Copiar directamente a public/cd-project/assets/
   ↓
3. Ejecutar: php artisan project:update-assets public/cd-project/assets --backup
   ↓
4. Verificar resultado
   ↓
5. Commit en Git
```

---

## 🆘 Solución de Problemas

### Error: "No se encontró: logo.png"

**Causa**: El archivo no existe o el nombre no coincide exactamente.

**Solución**:
```bash
# Verificar nombres (case-sensitive)
ls -la public/cd-project/assets-temp/ | grep -i logo

# Los nombres deben ser exactamente:
# - logo.png (no Logo.png ni LOGO.PNG)
# - logo-2.png
# - logo-alternative.png
```

### Error: "El directorio fuente no existe"

**Causa**: La ruta al directorio fuente es incorrecta.

**Solución**:
```bash
# Verificar que la carpeta existe
ls -la public/cd-project/assets-temp/

# Usar ruta absoluta si hay dudas
php artisan project:update-assets /ruta/absoluta/a/assets --backup
```

### Los assets no se actualizan

**Verificar**:
```bash
# 1. Que los archivos existen
ls -la public/cd-project/assets-temp/

# 2. Que tienen permisos de lectura
chmod 644 public/cd-project/assets-temp/*

# 3. Que el comando se ejecutó correctamente
php artisan project:update-assets public/cd-project/assets-temp --backup -v
```

---

## 📚 Referencias

- [Proceso de Actualización de Assets](../cd-project/asset-update-process.md)
- [Proceso Optimizado Completo](./proceso-optimizado-completo.md)

---

**Última actualización**: Proceso optimizado para actualizar assets después de crear proyecto