Siempre que generes código, crees archivos, sugieras estructuras, diseñes interfaces o escribas scripts interactivos para este proyecto, debes seguir estrictamente estas reglas unificadas. Priorizamos la simplicidad extrema, la consistencia lingüística y la legibilidad a futuro sobre la sobreingeniería.
- El proyecto se ejecuta directamente en la raíz de la carpeta del servidor (
public_html/). - Archivos clave de la raíz:
index.php,.htaccessy.envviven juntos en el primer nivel. - Las carpetas privadas de la arquitectura se ubican directamente en la raíz:
public_html/ ├── controladores/ ├── modelos/ ├── vistas/ ├── configuracion/ ├── rutas/ └── vendor/
- Todo el código personalizado creado para este sistema DEBE escribirse en Español (nombres de clases PHP, métodos, funciones, variables, arreglos, objetos de configuración, nombres de archivos y comentarios).
- Las únicas palabras en inglés permitidas son las palabras reservadas nativas del lenguaje (PHP/JS), los métodos del núcleo de LeafPHP y las APIs de navegadores o librerías estándar. Evita estrictamente el "Spanglish".
- Excepción .env: Las claves dentro del archivo
.envdeben mantener los nombres estándar de la industria en inglés (ej:DB_HOST,DB_PASSWORD) para garantizar compatibilidad técnica.
- Backend (PHP - Estándar PSR-12):
- Clases: Usan
PascalCasecon la primera letra en mayúscula (ej:UsuarioControlador,ModeloCanal). - Métodos, Funciones y Variables: Usan estrictamente
camelCaseiniciando en minúscula (ej:obtenerPorId(),$listaUsuarios,$usuarioId). - Base de Datos: Los nombres de tablas y columnas en SQL se mantienen en
snake_case(ej:id_canal,nombre_canal).
- Clases: Usan
- Frontend (HTML y CSS):
- Clases e IDs de HTML/CSS: Usan estrictamente
kebab-caseen minúsculas y en español (ej:id="mi-panel",class="wa-boton-primario").
- Clases e IDs de HTML/CSS: Usan estrictamente
- Frontend (JavaScript):
- Variables, Funciones y Objetos: Usan estrictamente
camelCaseen español (ej:var datosLead = {},function iniciarFormulario()). - Se respetan en inglés únicamente las llamadas a APIs globales, eventos nativos o convenciones externas (ej:
window.dataLayer,localStorage,addEventListener,ScrollTrigger,URLSearchParams).
- Variables, Funciones y Objetos: Usan estrictamente
- Base de Datos (PDO Puro): Prohibido utilizar ORMs, Query Builders o la librería
leafs/db. Interacciones directas mediante PDO nativo con consultas preparadas (prepare,execute,bindValue). Los modelos heredan deModeloBasey acceden a la conexión usando$this->pdo(). - Manejo de Errores: Bloques de PDO envueltos en
try/catchcapturando\Exception $e. Registra errores conerror_log()detallando clase, método y mensaje. Retornanull,[]ofalseen caso de fallo. - Vistas: Usa exclusivamente HTML nativo combinado con PHP embebido (
<?php ?>). Prohibido instalar motores de plantillas como Blade. Centraliza partes comunes en/vistas/componentes/(cabecera.php,pie.php) e inclúyelos conrequire. - Filosofías YAGNI y DRY: No crees clases de servicios o repositorios innecesarios. Si una lógica de formateo de datos de BD se requiere, procésala mediante ciclos dentro del mismo modelo antes de retornar el arreglo.
Escribe todo el CSS en un único archivo unificado ordenado estrictamente de arriba a abajo (de lo Genérico a lo Específico):
- SETTINGS: Variables CSS (
:root) y@font-face. Sin estilos visuales directos aquí. - GENERIC: Resets universales (
box-sizing,margin: 0). Altamente aislado. - ELEMENTS: Estilos para etiquetas HTML puras (
body,h1,button,input). Maximiza la herencia nativa. No utilices clases aquí. - OBJECTS: Estructuras de diseño abstractas y reutilizables (ej:
.grid-separado). - COMPONENTS: Bloques semánticos planos en kebab-case. PROHIBIDO anidar selectores profundamente (Evita
.componente .hijo .nieto, usa clases directas como.wa-panel,.wa-panel-titulo). - EXCEPTIONS & ANIMATIONS: Estados dinámicos gestionados mediante JS o PHP usando exclusivamente data-attributes nativos (ej:
[data-state="hidden"],[data-state="visible"]). Queda prohibido encadenar o conmutar clases utilitarias para el manejo de estados visuales. - Media Queries: Escríbelas siempre dentro o inmediatamente debajo del selector al que afectan, ordenadas de menor a mayor punto de interrupción (
min-width).
- Organización de Código: No mezcles la configuración fija con los datos reactivos. Separa estrictamente el objeto de
configuracionestático del objeto deestadomutable. - Estructura Base Obligatoria por Archivo JS:
// 1. Configuración (Datos fijos, selectores de campos, IDs) var configuracion = { idFormulario: "formulario-lp", campos: { email: "correo" } }; // 2. Estado (Datos mutables en tiempo de ejecución) var estado = { utms: {}, eventoLead: {} }; // 3. Inicio (Garantizar la carga del DOM) jQuery(document).ready(function () { iniciarPagina(); }); // 4. Inicializadores function iniciarPagina() { iniciarUtms(); iniciarFormulario(); } function iniciarUtms() { /* ... */ } function iniciarFormulario() { /* ... */ } // 5. Acciones principales function enviarFormulario() { /* ... */ } // 6. Utilidades function obtenerFormulario() { return jQuery('#' + configuracion.idFormulario); }
- Abstracción de Selectores (DRY): Prohibido repetir selectores de jQuery largos a lo largo del código. Utiliza funciones utilitarias envolventes como
obtenerFormulario()uobtenerCampo(nombreCampo)para interactuar con los elementos del DOM. - Responsabilidad Única (Funciones Pequeñas): Cada función debe hacer una sola cosa bien (ej: una función exclusiva para limpiar caracteres no numéricos, otra para asignar atributos). Evita mega-funciones que validen, envíen, interactúen con el dataLayer y hagan redirecciones al mismo tiempo.
- Ámbito de Eventos: Limita los escuchadores de eventos (
on()) al contenedor del componente correspondiente (obtenerFormulario().on(...)). Evita delegar eventos globalmente ajQuery(document)a menos que sea estrictamente necesario debido a dependencias externas o plugins globales. - Validación de Librerías Externas: Antes de inicializar código dependiente de herramientas externas (como GSAP, ScrollTrigger o dataLayers de analítica), añade una cláusula de guarda verificando su existencia (
typeof gsap === "undefined") emitiendo unconsole.warn()en caso de ausencia.
Cuando se te pida generar código PHP, HTML, CSS o JavaScript para este proyecto:
- Sigue al pie de la letra las reglas de nomenclatura (PHP: camelCase, HTML/CSS: kebab-case, JS: camelCase, todo en estricto español).
- Proporciona vistas en HTML puro con PHP embebido e inyecciones dinámicas de JS basadas en
data-stateen lugar de clases cambiantes. - Asegúrate de que los bloques de código JavaScript adhieran a la segmentación estructurada de 6 secciones descrita en los lineamientos.