0f6387ab46
- renombrar openspec/ a _openspec/ (carpeta auxiliar) - mover specs de features a changes/ - crear specs base: arquitectura-limpia, estandares-codigo, nomenclatura - migrar _planificacion/ con design-system y roi-theme-template - agregar especificacion recaptcha anti-spam (proposal, tasks, spec) - corregir rutas y referencias en todas las specs Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
178 lines
4.8 KiB
Markdown
178 lines
4.8 KiB
Markdown
# ⚙️ ESPECIFICACIONES DEL SISTEMA
|
|
|
|
## Requerimientos Generales
|
|
|
|
- **Persistencia de Datos**: Archivos JSON (NO localStorage, NO base de datos)
|
|
- **Vista Previa**: TODAS las pestañas DEBEN tener vista previa en tiempo real
|
|
- **Panel Principal**: Existe un panel de administración que lista todas las pestañas disponibles
|
|
- **Arquitectura**: Componentes independientes pero con diseño consistente
|
|
- **Navegación**: Sistema de pestañas/tabs para alternar entre componentes
|
|
|
|
---
|
|
|
|
## Stack Tecnológico
|
|
|
|
### CDN y Librerías
|
|
|
|
```html
|
|
<!-- Bootstrap 5.3.2 -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/Css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
<!-- Bootstrap Icons 1.11.3 -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/Font/bootstrap-icons.min.css">
|
|
|
|
<!-- Google Fonts: Poppins -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
|
|
<!-- CSS del proyecto -->
|
|
<link rel="stylesheet" href="../../Css/style.css">
|
|
```
|
|
|
|
### JavaScript
|
|
|
|
```html
|
|
<!-- Bootstrap JS Bundle -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/Js/bootstrap.bundle.min.js"></script>
|
|
```
|
|
|
|
---
|
|
|
|
## Estructura de Archivos
|
|
|
|
**Arquitectura modular:** Cada componente tiene sus propios archivos separados (PHP, CSS, JS).
|
|
|
|
```
|
|
wp-content/themes/apus-theme/
|
|
└── admin-panel/
|
|
└── Admin/
|
|
├── Components/
|
|
│ ├── component-[name].php
|
|
│ ├── component-[name]-2.php
|
|
│ └── component-[name]-3.php
|
|
├── Assets/
|
|
│ ├── Css/
|
|
│ │ ├── component-[name].css
|
|
│ │ ├── component-[name]-2.css
|
|
│ │ └── component-[name]-3.css
|
|
│ └── Js/
|
|
│ ├── component-[name].js
|
|
│ ├── component-[name]-2.js
|
|
│ └── component-[name]-3.js
|
|
└── Config/
|
|
├── [name]-config.json
|
|
├── [name]-2-config.json
|
|
└── [name]-3-config.json
|
|
```
|
|
|
|
**Ejemplo con un componente específico:**
|
|
```
|
|
admin-panel/Admin/
|
|
├── Components/
|
|
│ └── component-notification-bar.php
|
|
├── Assets/
|
|
│ ├── Css/
|
|
│ │ └── component-notification-bar.css
|
|
│ └── Js/
|
|
│ └── component-notification-bar.js
|
|
└── Config/
|
|
└── notification-bar-config.json
|
|
```
|
|
|
|
---
|
|
|
|
## Convenciones de Nombrado
|
|
|
|
### Archivos PHP (Componentes)
|
|
|
|
- Patrón: `component-[nombre].php`
|
|
- Ubicación: `admin-panel/Admin/Components/`
|
|
- Ejemplo: `component-notification-bar.php`, `component-site-footer.php`
|
|
|
|
### Archivos CSS
|
|
|
|
- Patrón: `component-[nombre].css`
|
|
- Ubicación: `admin-panel/Admin/Assets/Css/`
|
|
- Mismo nombre base que el componente PHP correspondiente
|
|
|
|
### Archivos JavaScript
|
|
|
|
- Patrón: `component-[nombre].js`
|
|
- Ubicación: `admin-panel/Admin/Assets/Js/`
|
|
- Mismo nombre base que el componente PHP correspondiente
|
|
|
|
### Archivos de Configuración JSON
|
|
|
|
- Patrón: `[nombre]-config.json`
|
|
- Ubicación: `admin-panel/Admin/Config/`
|
|
- Ejemplo: `notification-bar-config.json`
|
|
|
|
---
|
|
|
|
## Dependencias del Proyecto
|
|
|
|
| Dependencia | Versión | Propósito |
|
|
|-------------|---------|-----------|
|
|
| Bootstrap | 5.3.2 | Framework CSS y componentes UI |
|
|
| Bootstrap Icons | 1.11.3 | Sistema de iconos |
|
|
| Poppins Font | Google Fonts | Tipografía principal |
|
|
| style.css | Custom | Estilos específicos del proyecto |
|
|
|
|
---
|
|
|
|
## Requerimientos del Navegador
|
|
|
|
- **Navegadores modernos**: Chrome, Firefox, Safari, Edge (últimas 2 versiones)
|
|
- **JavaScript**: Habilitado
|
|
- **CSS Grid**: Soporte requerido
|
|
- **Flexbox**: Soporte requerido
|
|
- **CSS Custom Properties**: Soporte requerido
|
|
|
|
---
|
|
|
|
## Estructura de un Componente
|
|
|
|
Cada componente debe tener:
|
|
|
|
1. ✅ **Archivo PHP** (`component-[name].php`)
|
|
- Formulario de configuración
|
|
- Vista previa en tiempo real
|
|
- Integración con WordPress
|
|
|
|
2. ✅ **Archivo CSS** (`component-[name].css`)
|
|
- Estilos específicos del componente admin
|
|
- Estilos para vista previa
|
|
|
|
3. ✅ **Archivo JavaScript** (`component-[name].js`)
|
|
- Funcionalidad del componente
|
|
- Event listeners
|
|
- Funciones de actualización de preview
|
|
- Persistencia de configuración
|
|
|
|
4. ✅ **Configuración JSON** (`[name]-config.json`)
|
|
- Valores por defecto
|
|
- Metadata del componente
|
|
- Timestamp de última modificación
|
|
|
|
---
|
|
|
|
## Reglas de Integración
|
|
|
|
### ❌ NO Permitido
|
|
|
|
- localStorage para persistencia (usar config.json)
|
|
- Base de datos directa
|
|
- Inline styles que sobreescriban CSS del front-end
|
|
- Modificar HTML del front-end desde admin
|
|
|
|
### ✅ Permitido
|
|
|
|
- Archivos JSON para configuración
|
|
- Inline styles SOLO en el admin panel (si no afecta preview)
|
|
- CSS con `!important` SOLO si es necesario para override de WordPress
|
|
|
|
---
|
|
|
|
## Volver al Índice
|
|
|
|
[← Volver al README](README.md)
|