Stella Nova
Stella Nova
| Autor | Herbert Spencer |
|---|---|
| Coautores | Fauve Bellenger |
| Ronda | Taller de Investigaciones Gráficas |
| Período | 2026- |
| Palabras Clave | skin, accesibilidad, diseño web, mediawiki, software libre |
| Oficios | Diseño |
| Materialidad | Digital |
| URL | https://github.com/eadpucv/stella-nova |
Stella Nova es el sistema visual de Casiopea: un skin[1] para MediaWiki escrito desde cero para esta wiki, con su propia paleta, su propia tipografía y su propio framework de maquetación. Estas páginas documentan lo que pone a disposición de quien publica aquí.
Documentación
Ejemplo, Grilla y estilos y Tokens son para quien escribe y maqueta; Plantillas y Páginas del skin, para quien administra.
Usa el repertorio completo como lo usaría una página real. Para mirar el sistema funcionando y copiar de su wikitexto.
El framework gráfico: columnas, bandas de fondo, imágenes a sangre, avisos, botones, clases tipográficas y palabras mágicas. Todo lo que se escribe directamente en el wikitexto.
Las variables del sistema: de dónde viene la idea, cómo se organiza en tres capas y cuál es la paleta completa. Lectura previa a escribir CSS.
Cómo dar estilo a una plantilla con TemplateStyles conservando el tema oscuro, y qué rechaza el sanitizador de MediaWiki.
El espacio de nombres Stella-Nova:, con el aviso editorial y el pie institucional, editables desde la wiki.
La lectura contigua
El skin resuelve cómo se ve una ficha; el modelo semántico decide qué es. Quien diseñe una plantilla necesita las dos cosas.
Ontología de Casiopea reúne las 22 clases semánticas de la wiki con sus plantillas, formularios y atributos, y la estrategia de indexación de cada objeto para buscadores, metabuscadores y gestores bibliográficos. Antes de inventar un campo o una ficha, mirar ahí si la clase ya existe.
Fuera de este árbol
- Casiopea:Configuración del servidor — los ajustes de
LocalSettings.phpque requieren extensiones como Mermaid, WikiSEO y 3DAlloy. Administración del servidor. - Casiopea:Administradores/Tareas — el registro del paso desde el skin anterior, consolidado en el registro cronológico de tareas de administración.
La metáfora
El sistema entero se deriva de una imagen: una hoja de papel cálida sobre el espacio gris del taller, con un único punto de luz carmín, la nova, como acento.
De ahí salen las reglas:
- El fondo es crema (
#fcfbf7) y la tinta, negro cálido (#221f1a). El blanco químico y el negro absoluto pertenecen a la pantalla; el papel tiene temperatura. - El carmín marca el foco de un control, el isotipo, el título de la página y los enlaces. Si aparece dos veces en la misma pantalla, sobra una.
- Todo el ritmo vertical cae en una retícula. Cabeceras, párrafos, listas, citas y tablas se apoyan en múltiplos enteros de una misma unidad, calculada desde la interlínea del cuerpo. Es una grilla de base que alinea las columnas y hace calzar las líneas, cualesquiera sean los títulos que se intercalen. Un valor en
reminventado la rompe.
La hoja se asienta sobre el campo, con radio de esquina mínimo y una sombra muy leve.
Del nombre
El 11 de noviembre de 1572 el astrónomo danés Tycho Brahe observó una estrella nueva y brillante en la constelación de Casiopea. La llamó stella nova y documentó sus mediciones en De nova stella (1573), el tratado que dio al mundo la palabra «nova».
Esa estrella estaba muriendo: hoy se conoce como SN 1572, la supernova de Tycho. Llegó a brillar como Venus y fue visible a plena luz del día durante semanas. Su consecuencia mayor fue filosófica, porque demostró que los cielos, que la tradición aristotélica tenía por inmutables, cambian.[2]
Principios técnicos
- CSS propio. Custom properties, Grid, Flexbox,
:has(),color-mix()ylight-dark(), sin Bootstrap ni Tailwind. De ahí que el framework de maquetación de Casiopea seagrid/grillay que el conjunto de clases se mantenga chico. SkinMustache. Extiende el contrato moderno de MediaWiki, que separa datos (PHP) de presentación (Mustache y CSS), y declara todo enskin.json. Una sola clase PHP.- Absorción. El skin reviste el CSS de 22 extensiones (Semantic MediaWiki, Semantic Result Formats, PageForms, OOUI, Maps, Mermaid, Echo y otras) desde sus propias hojas
skinStyles/, sin tocar el código de ninguna. Cuando una extensión se actualiza, no hay parches que rehacer. - Mejora progresiva. La página es legible y usable sin JavaScript. El JS agrega comodidad, y el tema claro u oscuro se resuelve antes del primer pintado, de modo que no hay parpadeo.
De ahí se sigue el layout: hoja centrada sobre campo, cabecera despejada con isotipo, pestañas de página, buscador y herramientas de usuario, y un pie compuesto que hace de mapa del sitio. El lector elige entre tres temas: claro por defecto, oscuro explícito, o «auto» siguiendo al sistema operativo. La tipografía es variable y autoalojada, con alternador sans/serif para el cuerpo. Las tablas llevan solo filetes horizontales finos.
El repositorio y la sincronización
El código del skin vive en un repositorio Git y llega al servidor por sincronización automática.
El servidor de producción tiene el repositorio clonado dentro de su carpeta de skins, y un proceso programado hace git pull una vez al día. Lo que está en la rama principal es, con a lo más un día de retraso, lo que se ve en la wiki.
Por eso MediaWiki:Common.css y MediaWiki:Common.js quedan reservados a lo que es propio de esta instalación: el CSS y el JavaScript del skin se editan en el repositorio. Y por eso una errata en el repositorio llega sola a producción, así que el repositorio se trata con el mismo cuidado que una página protegida.
| Repositorio institucional | github.com/eadpucv/stella-nova, la fuente que sincroniza el servidor. |
|---|---|
| Repositorio de desarrollo | github.com/hspencer/stella-nova, donde ocurre el trabajo diario antes de llegar al institucional. |
| Versión en producción | 0.7.2. El detalle de cada cambio se lleva en el CHANGELOG del repositorio.
|
| Licencia | GPL-2.0-or-later. |
El espécimen gráfico
El espécimen es un mini-sitio estático que se genera desde los archivos reales del skin: al cambiar los tokens o los componentes se corre un script que lo recompone leyendo tokens.css y stella-nova.css. Muestra siempre el estado vigente del sistema.
eadpucv.github.io/stella-nova/specimen/
Tiene tres páginas: fundamentos (paleta completa, escala tipográfica, sombras, radios), componentes (botones, campos, barras de herramientas, avisos, tabla de contenidos) y layout (una página simulada completa). Las tres cargan el CSS real del skin.
Sirve para mirar la paleta entera de una vez, comparar los pesos tipográficos y revisar un componente en claro y en oscuro. También sirve para proponer, porque cada página expone al inicio un bloque <style id="overrides"> donde se redefinen variables en vivo.
:root {
--sn-nova: #c33;
--sn-fs-display: 2.4rem;
}
Se recarga y el cambio se propaga a todo el documento. Así el taller de diseño propone ajustes al sistema sin tocar la wiki ni el servidor: se anota en el espécimen y quien mantiene el skin traslada lo aceptado a los archivos fuente.
Cómo probarlo
- Ver cualquier página con el skin: agregar
?useskin=stellanovaal final de su URL, o elegirlo en Especial:Preferencias, pestaña «Apariencia». - Ver los cambios al instante: agregar
?debug=true. MediaWiki cachea el CSS y el JS con saña, y sin esto se puede pasar media hora depurando un cambio que ya estaba bien. - Probar el tema oscuro: con el skin activo, cambiarlo desde el menú de usuario. Toda página nueva debería revisarse en ambos temas antes de darla por terminada.
Notas
- ↑ Estas páginas conservan en inglés y en cursiva las palabras que nombran conceptos venidos del código: skin, token, framework, layout, viewport, grid. Traducirlas separa la documentación de lo que el lector tiene delante, porque la interfaz de MediaWiki, la consola del navegador y el manual oficial las nombran así. En 2015 intenté lo contrario con Pyxis, un framework escrito enteramente en castellano, y resultó insostenible de mantener: los estándares están escritos en inglés, y cada actualización obligaba a rehacer la correspondencia entre dos vocabularios. Por ahora cada cosa se nombra como la nombra su fuente. Las palabras que sí tienen equivalente asentado en castellano se escriben en castellano.
- ↑ El acento carmín del skin se llama
--sn-novapor esta estrella, y por la misma razón se usa con recato: una nova es un acontecimiento.