# Cambio de Identidad Visual del Proyecto

## Descripción General

Este documento describe el proceso completo para cambiar la identidad visual de un proyecto, incluyendo logotipos, favicons y configuraciones relacionadas.

**El sistema incluye un comando automatizado que procesa los assets desde una carpeta centralizada.**

## Proceso Automatizado (Recomendado)

### Método Rápido: Usando el Comando Artisan

El sistema incluye un comando que automatiza el proceso de actualización de assets:

1. **Preparar los archivos en la carpeta de assets:**
   ```
   public/cd-project/assets/
   ```

2. **Ejecutar el comando:**
   ```bash
   php artisan project:update-assets public/cd-project/assets --backup
   ```

   O usando el script helper:
   ```bash
   ./scripts/update-project-assets.sh
   ```

3. **El comando procesa automáticamente:**
   - ✅ Logos (logo.png, logo-2.png, logo-alternative.png)
   - ✅ Favicons (favicon.ico, favicon.svg, apple-touch-icon.png, etc.)
   - ✅ Iconos PWA (web-app-manifest-192x192.png, web-app-manifest-512x512.png)
   - ✅ Manifest (site.webmanifest) - Corrige rutas automáticamente
   - ✅ Meta tags (og-image.png, twitter-image.png) - Opcionales
   - ✅ Skins CSS (skin-*.css) - Si están presentes

4. **Limpiar caché:**
   ```bash
   php artisan config:clear
   php artisan cache:clear
   php artisan view:clear
   ```

### Archivos que el Comando Procesa

**Archivos requeridos en `public/cd-project/assets/`:**
- `logo.png` - Logo principal
- `logo-2.png` - Logo para loader
- `logo-alternative.png` - Logo para footer
- `favicon.ico` - Favicon estándar
- `favicon.svg` - Favicon vectorial
- `apple-touch-icon.png` - Icono para iOS
- `web-app-manifest-192x192.png` - Icono PWA 192x192
- `web-app-manifest-512x512.png` - Icono PWA 512x512
- `site.webmanifest` - Manifest JSON (se procesa y corrige rutas automáticamente)

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

## Elementos de Identidad Visual

### 1. Favicons (Iconos del Navegador)

Los favicons se encuentran en: `public/cd-project/img/favicon/`

**Archivos requeridos:**
- `favicon.ico` - Icono estándar (16x16, 32x32, 48x48)
- `favicon.svg` - Icono vectorial (recomendado para navegadores modernos)
- `apple-touch-icon.png` - Icono para dispositivos Apple (180x180px recomendado)
- `web-app-manifest-192x192.png` - Icono para PWA (192x192px)
- `web-app-manifest-512x512.png` - Icono para PWA (512x512px)
- `site.webmanifest` - Archivo de configuración del manifest (JSON)

### 2. Logos

Los logos se encuentran en: `public/cd-project/img/logos/`

**Archivos requeridos:**
- `logo.png` - Logo principal (usado en header y lugares principales)
- `logo-2.png` - Logo alternativo (usado en loader/carga)
- `logo-alternative.png` - Logo para footer

**Recomendaciones de tamaño:**
- Logo principal: Ancho recomendado 200-300px, altura variable según diseño
- Logo loader: Similar al principal, optimizado para pantalla de carga
- Logo footer: Versión más pequeña o simplificada, ancho recomendado 150-200px

### 3. Imágenes para Meta Tags

**Ubicación:** `public/cd-project/img/meta-tags/`

**Archivos requeridos:**
- `og-image.png` - Imagen para Open Graph (1200x630px recomendado)
- `twitter-image.png` - Imagen para Twitter Card (1200x630px recomendado)

## Configuraciones a Modificar

### Archivo: `config/site.php`

#### 1. Configuración de Assets (Líneas 78-87)

```php
'assets' => [
    'favicon' => 'cd-project/img/favicon/favicon.ico',
    'apple_touch_icon' => 'cd-project/img/favicon/apple-touch-icon.png',
    'loader_logo' => 'cd-project/img/logos/logo-2.png',
    'main_logo' => 'cd-project/img/logos/logo.png',
    'main_logo_sticky' => 'cd-project/img/logos/logo.png',
    'footer_logo' => 'cd-project/img/logos/logo-alternative.png',
    'main_logo_alt' => 'Nombre del Proyecto - Descripción',
    'main_logo_height' => 60, // Altura en píxeles
],
```

**Campos a modificar:**
- `main_logo_alt`: Texto alternativo del logo (SEO y accesibilidad)
- `main_logo_height`: Altura del logo en píxeles (ajustar según diseño)

#### 2. Configuración SEO - Schema (Línea 34)

```php
'seo' => [
    'schema' => [
        'logo' => 'cd-project/img/logos/logo.png',
        // ... otros campos
    ],
],
```

#### 3. Configuración Open Graph (Líneas 57-61)

```php
'og' => [
    'image' => 'cd-project/img/meta-tags/og-image.png',
    'image_width' => 1200,
    'image_height' => 630,
    'image_type' => 'image/png',
    'image_alt' => 'Nombre del Proyecto - Descripción',
],
```

#### 4. Configuración Twitter Card (Líneas 73-74)

```php
'twitter' => [
    'image' => 'cd-project/img/meta-tags/twitter-image.png',
    'image_alt' => 'Nombre del Proyecto - Descripción',
],
```

### Archivo: `public/cd-project/img/favicon/site.webmanifest`

Este archivo JSON contiene la configuración del manifest para PWA:

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

**Campos a modificar:**
- `name`: Nombre completo del proyecto
- `short_name`: Nombre corto (máximo 12 caracteres recomendado)
- `theme_color`: Color principal del tema (hex)
- `background_color`: Color de fondo (hex)

## Configuraciones que Requieren Actualización Manual

**⚠️ IMPORTANTE:** El comando procesa los archivos de imagen, pero NO actualiza las configuraciones. Debes actualizar manualmente:

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

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

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

### 2. Archivo `site.webmanifest` en assets

Antes de ejecutar el comando, asegúrate de que el `site.webmanifest` en `public/cd-project/assets/` tenga:

```json
{
  "name": "Nombre Completo del Proyecto",
  "short_name": "Nombre Corto",
  "theme_color": "#COLOR_PRINCIPAL",
  "background_color": "#COLOR_FONDO",
  ...
}
```

El comando corregirá automáticamente las rutas de los iconos, pero los nombres y colores deben estar correctos en el archivo fuente.

## Proceso Paso a Paso (Manual)

Si prefieres hacer el proceso manualmente o necesitas entender cada paso:

1. **Favicons:**
   - Crear `favicon.ico` (múltiples tamaños: 16x16, 32x32, 48x48)
   - Crear `favicon.svg` (vectorial, escalable)
   - Crear `apple-touch-icon.png` (180x180px)
   - Crear `web-app-manifest-192x192.png` (192x192px)
   - Crear `web-app-manifest-512x512.png` (512x512px)

2. **Logos:**
   - Crear `logo.png` (logo principal)
   - Crear `logo-2.png` (logo para loader)
   - Crear `logo-alternative.png` (logo para footer)

3. **Meta Tags:**
   - Crear `og-image.png` (1200x630px)
   - Crear `twitter-image.png` (1200x630px)

### Paso 2: Reemplazar Archivos

1. Copiar todos los favicons a: `public/cd-project/img/favicon/`
2. Copiar todos los logos a: `public/cd-project/img/logos/`
3. Copiar imágenes de meta tags a: `public/cd-project/img/meta-tags/`

### Paso 3: Actualizar Configuraciones

1. **Editar `config/site.php`:**
   - Actualizar `assets.main_logo_alt` con el nombre y descripción del proyecto
   - Ajustar `assets.main_logo_height` según el diseño del logo
   - Verificar que todas las rutas de archivos sean correctas

2. **Editar `public/cd-project/img/favicon/site.webmanifest`:**
   - Actualizar `name` y `short_name`
   - Actualizar `theme_color` y `background_color` con los colores del proyecto

### Paso 4: Verificar Referencias en Vistas

Los logos se usan automáticamente desde la configuración en las siguientes ubicaciones:

- **Header:** `resources/views/layout/front/headers/` (varios archivos según el tema)
- **Footer:** `resources/views/layout/front/footers/` (varios archivos según el tema)
- **Loader:** `resources/views/layout/front/master.blade.php` (línea 160)
- **Auth/Login:** `resources/views/auth/layout.blade.php` (línea 237)

**Nota:** No es necesario modificar las vistas si se usan las configuraciones correctamente.

### Paso 5: Limpiar Caché

Después de realizar los cambios, limpiar la caché de Laravel:

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

### Paso 6: Verificación

1. **Verificar en el navegador:**
   - Abrir el sitio en modo incógnito
   - Verificar que el favicon aparece en la pestaña
   - Verificar que el logo aparece en el header
   - Verificar que el logo aparece en el footer
   - Verificar que el logo aparece en la pantalla de carga

2. **Verificar meta tags:**
   - Usar herramientas como [Facebook Sharing Debugger](https://developers.facebook.com/tools/debug/)
   - Usar [Twitter Card Validator](https://cards-dev.twitter.com/validator)
   - Verificar que las imágenes de Open Graph y Twitter se muestran correctamente

3. **Verificar en dispositivos móviles:**
   - Verificar el icono en la pantalla de inicio (iOS)
   - Verificar el icono en la pantalla de inicio (Android)

## Checklist de Cambio de Identidad

### Paso 1: Preparar Assets
- [ ] Logo.png creado
- [ ] Logo-2.png creado
- [ ] Logo-alternative.png creado
- [ ] Favicon.ico creado
- [ ] Favicon.svg creado
- [ ] Apple-touch-icon.png creado
- [ ] Web-app-manifest-192x192.png creado
- [ ] Web-app-manifest-512x512.png creado
- [ ] site.webmanifest preparado con nombre, colores correctos
- [ ] Og-image.png creado (opcional)
- [ ] Twitter-image.png creado (opcional)

### Paso 2: Colocar Assets en Carpeta
- [ ] Todos los archivos copiados a `public/cd-project/assets/`

### Paso 3: Ejecutar Comando
- [ ] Comando ejecutado: `php artisan project:update-assets public/cd-project/assets --backup`
- [ ] Verificar que todos los archivos se procesaron correctamente

### Paso 4: Actualizar Configuraciones Manuales
- [ ] `config/site.php` → `assets.main_logo_alt` actualizado
- [ ] `config/site.php` → `assets.main_logo_height` ajustado (si es necesario)
- [ ] Verificar que `site.webmanifest` tiene rutas correctas (el comando las corrige automáticamente)

### Paso 5: Limpiar Caché
- [ ] `php artisan config:clear` ejecutado
- [ ] `php artisan cache:clear` ejecutado
- [ ] `php artisan view:clear` ejecutado

### Paso 6: Verificación
- [ ] Favicon visible en navegador
- [ ] Logo visible en header
- [ ] Logo visible en footer
- [ ] Logo visible en loader
- [ ] Meta tags verificados (Facebook Debugger, Twitter Validator)
- [ ] Verificación en dispositivos móviles realizada

## Notas Importantes

1. **Formatos de imagen:**
   - Favicons: ICO, PNG, SVG
   - Logos: PNG (con transparencia) o SVG
   - Meta tags: PNG o JPG (1200x630px)

2. **Optimización:**
   - Comprimir todas las imágenes antes de subirlas
   - Usar herramientas como TinyPNG o ImageOptim
   - Mantener tamaños de archivo razonables

3. **Nombres de archivos:**
   - Mantener los nombres exactos como se especifica
   - No cambiar las rutas en la configuración a menos que sea necesario

4. **Backup:**
   - Siempre hacer backup de los archivos originales antes de reemplazarlos
   - Guardar una copia de `config/site.php` antes de modificarlo

5. **Testing:**
   - Probar en múltiples navegadores (Chrome, Firefox, Safari, Edge)
   - Probar en dispositivos móviles (iOS y Android)
   - Verificar que los logos se ven bien en diferentes tamaños de pantalla

## Ubicaciones de Archivos - Resumen

```
public/
└── cd-project/
    └── img/
        ├── favicon/
        │   ├── favicon.ico
        │   ├── favicon.svg
        │   ├── apple-touch-icon.png
        │   ├── web-app-manifest-192x192.png
        │   ├── web-app-manifest-512x512.png
        │   └── site.webmanifest
        ├── logos/
        │   ├── logo.png
        │   ├── logo-2.png
        │   └── logo-alternative.png
        └── meta-tags/
            ├── og-image.png
            └── twitter-image.png
```

## Referencias de Configuración

- **Favicon:** `config/site.php` → `assets.favicon`
- **Apple Touch Icon:** `config/site.php` → `assets.apple_touch_icon`
- **Loader Logo:** `config/site.php` → `assets.loader_logo`
- **Main Logo:** `config/site.php` → `assets.main_logo`
- **Footer Logo:** `config/site.php` → `assets.footer_logo`
- **SEO Schema Logo:** `config/site.php` → `seo.schema.logo`
- **OG Image:** `config/site.php` → `og.image`
- **Twitter Image:** `config/site.php` → `twitter.image`