--- type: SOP asset_id: SOP-XX-Maestro-MiniSitioHubBuilder-v01 version: v01 status: Activo · norma canónica owner: Victor Heredia sherpa_owner: Jay fecha_creacion: 2026-07-24 intellbank: IB-XX-Maestro subbank: (raíz Maestro · estándares) proposito: > Norma canónica para crear y mantener mini-sitios (hubs + páginas conectadas) del ecosistema EmpowerLabs con un solo estándar de navegación, widget, headings, colores y modo claro/oscuro. Es la fuente de verdad que la skill /sk-hubbuilder ejecuta. referencia_canonica: - IB-XX-Maestro/EL-DashboardStandard-v01.js (el kit — implementación del estándar) - IB-XX-Maestro/SK-EL-DashboardHomogenize-v01.js (propaga el kit a todos los tableros) - IB-EL-EmpowerLabs/PB-EL-Project-Bank/PB-HiOrg-HyperintelligentOrg/BRD-EL-OI-Journey-Home-v01.html (implementación de referencia) - TP-EL-Brand-WebColorMigration-v01 (paleta de marca v03.2) tags: [sop, maestro, minisitio, hub, dashboard-kit, navegacion, headings, gobernanza] --- # SOP — Cómo se construye un mini-sitio (Hub Builder) ## 0 · Qué es y qué NO es Un **mini-sitio** es un conjunto de páginas HTML del vault que comparten un **home (hub)** y una **navegación propia** dentro del ecosistema. Ejemplos EmpowerLabs: Demand Gen, SOO, WORX OS, OI-Journey, OI-Stack, EmpowerScan, MacroLoopX, Brain Codes, Skill Factory, MatriX. La navegación, el widget, los colores y el modo claro/oscuro **NO se programan a mano en cada página**. Los provee el **kit** (`EL-DashboardStandard-v01.js`), que se incrusta en cada página con el homogeneizador. Editas el kit una vez y todo el ecosistema lo hereda. **Frontera de familia (regla dura).** Este SOP aplica solo a la familia **EmpowerLabs** (grupos `empowerlabs` y `loopx`). Los mini-sitios **independientes** — **Posta** (clientes) y **Rebelocity** — tienen colores y navegación propios y **no se tocan** con esta norma. Se distinguen por su `data-group` (`posta`, `rebelocity`) o por estar marcados como opt-out (`data-standalone="1"` / ``). --- ## 1 · Los atributos del `` (lo que enciende todo) Toda página de un mini-sitio lleva estos atributos en su tag ``: - `data-site=""` — **la clave del mini-sitio** (ej. `dg`, `soo`, `oi-journey`). Es lo que hace que el kit trate a la página como parte del mini-sitio: le da el 🏠 al home del hub, la salida 🏢 al ecosistema y (si no tiene menú propio) le inyecta el menú del mini-sitio. - `data-group=""` — la firma de color (`empowerlabs` azul, `loopx` índigo). Lo pone el homogeneizador según la ruta, pero confírmalo. - `data-updated`, `data-doc` — los sella el homogeneizador. **El error #1 más común:** una página conectada al hub **sin `data-site`**. Sin él, el kit la trata como página genérica de la familia → menú equivocado y el 🏠 manda a HOY en vez del hub. **Toda** página del mini-sitio (el home y todas las conectadas) debe llevar `data-site`. --- ## 2 · Registro en el kit (`SITES`) En `EL-DashboardStandard-v01.js`, el objeto `SITES` es el catálogo de mini-sitios. Cada entrada: ```js '':{ home:_RUTA+'BRD-...-Home-v01.html', label:'Nombre visible', sections:[ /* menú del mini-sitio, ver abajo */ ] } ``` - `home` — ruta relativa al vault del hub. Es a donde va el 🏠. - `sections` — el menú lateral que el kit inyecta **en las páginas conectadas que no tienen sidebar propio** (agrupado por bloques con `label` + `items:[{ic,t,p}]`). Si el hub y sus páginas ya tienen sidebar propio con `.navitem`, deja `sections:[]` (el kit no inyecta, solo da 🏠/🏢/widget). Además, agrega el mini-sitio al menú de HOY EmpowerLabs: una entrada en `MENU_COMPONENTES_EL` apuntando al `home` del hub. Tras cualquier edición del kit → **corre el homogeneizador** (`node SK-EL-DashboardHomogenize-v01.js`) para propagar la copia embebida a los 240+ tableros. --- ## 3 · Headings — título grande + subtítulo (norma HubBuilder) **Regla:** un **título corto y grande** + un **subtítulo descriptivo** debajo. Nunca un solo título largo tipo "El X — la categoría, el rol y…". El kit ya provee, acotado a páginas EmpowerLabs con `data-site`: - `.el-title` (el `

`) → tamaño grande automático `clamp(32px,4vw,44px)` con degradado de firma. - `.el-hero-sub` → clase estándar del subtítulo. **Cómo se escribe en el HTML:** ```html

El OI-Journey

la categoría, el rol y el ascenso a la Organización Hiperinteligente
``` Dos patrones de hub existentes: - **Patrón A** (título largo en un solo `

`): hay que **dividirlo** en `

` + `.el-hero-sub`. (dg, soo, oi-stack, oi-journey) - **Patrón B** ("Home de Componente": `h1.title` corto + `p.lead`): ya viene dividido; solo hereda el tamaño grande del kit. No se toca el markup. (worxos, empowerscan, macroloopx, braincodes, skillfactory) El tamaño vive en el kit, **no** en CSS por página. No repliques `font-size` a mano (rompe la consistencia y obliga a mantener 11 archivos en vez de 1). --- ## 4 · El widget y su navegación (el estándar) El kit monta, **arriba a la derecha**, la barra `#el-bar` con estos botones según contexto: - **☰** — abre/cierra el menú lateral. Solo aparece si el kit inyecta el menú (páginas sin sidebar propio). - **🏠** — va al **home del mini-sitio** (el hub). Se **oculta en el propio home** (sería redundante). - **🏢** — sale al **ecosistema: HOY EmpowerLabs**. Solo aparece en páginas de mini-sitio (`data-site`). - **☀️ / 🌙** — modo claro/oscuro (el kit es la única autoridad de tema). - **⟳** — pide a Jay actualizar el documento. Regla de navegación en una frase: **🏠 = dentro del mini-sitio (al hub) · 🏢 = fuera del mini-sitio (a HOY)**. En el home del hub, como el 🏠 no aplica, la salida es 🏢. Abajo a la derecha, `#el-stamp`: última actualización + fecha viva + familia + nombre del documento. --- ## 5 · Regla de oro anti-duplicados **Nunca** dejes en la página un topbar/sidebar propio que **duplique** lo que da el kit. En concreto: - **Prohibido** un ``/`