Editar Nueva Obra: Stella Nova

Texto libre:

{{P5:StellaNova}} __NOTOC__ '''Stella Nova''' es el sistema visual de Casiopea: un ''[https://www.mediawiki.org/wiki/Manual:Skins skin]''<ref name="anglicismos">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.</ref> 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. <div class="grid cols-2 gap-l"> <div> '''[[Stella Nova/Ejemplo|Ejemplo]]''' <div class="sm left"> Usa el repertorio completo como lo usaría una página real. Para mirar el sistema funcionando y copiar de su wikitexto. </div> </div> <div> '''[[Stella Nova/Grilla|Grilla y estilos]]''' <div class="sm left"> 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. </div> </div> <div> '''[[Stella Nova/Tokens|Tokens]]''' <div class="sm left"> 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. </div> </div> <div> '''[[Stella Nova/Plantillas|Plantillas]]''' <div class="sm left"> Cómo dar estilo a una plantilla con TemplateStyles conservando el tema oscuro, y qué rechaza el sanitizador de MediaWiki. </div> </div> <div> '''[[Stella Nova/Páginas del skin|Páginas del ''skin'']]''' <div class="sm left"> El espacio de nombres <code>Stella-Nova:</code>, con el aviso editorial y el pie institucional, editables desde la wiki. </div> </div> </div> === 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 === <div class="sm left"> * [[Casiopea:Configuración del servidor]] — los ajustes de <code>LocalSettings.php</code> que 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. </div> == 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''' (<code>#fcfbf7</code>) '''y la tinta, negro cálido''' (<code>#221f1a</code>). 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 <code>rem</code> inventado 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 [https://en.wikipedia.org/wiki/SN_1572 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'''.<ref>El acento carmín del ''skin'' se llama <code>--sn-nova</code> por esta estrella, y por la misma razón se usa con recato: una nova es un acontecimiento.</ref> == Principios técnicos == * '''CSS propio.''' ''Custom properties'', ''Grid'', ''Flexbox'', <code>:has()</code>, <code>color-mix()</code> y <code>light-dark()</code>, sin Bootstrap ni Tailwind. De ahí que el ''framework'' de maquetación de Casiopea sea [[Stella Nova/Grilla|<code>grid</code> / <code>grilla</code>]] y que el conjunto de clases se mantenga chico. * '''<code>SkinMustache</code>.''' Extiende el contrato moderno de MediaWiki, que separa datos (PHP) de presentación (Mustache y CSS), y declara todo en <code>skin.json</code>. 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 <code>skinStyles/</code>, 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. <div class="grid cols2-1 align-center gap-l"> <div> {{#mermaid: graph LR A["Repositorio<br>eadpucv/stella-nova"] -->|"git pull diario"| B["Servidor<br>skins/StellaNova/"] A -->|"build-specimen.py"| C["Espécimen<br>eadpucv.github.io"] B --> D["Casiopea<br>wiki.ead.pucv.cl"] }} </div> <div> El servidor de producción tiene el repositorio '''clonado''' dentro de su carpeta de ''skins'', y un proceso programado hace <code>git pull</code> 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. </div> </div> 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. {| class="wikitable plantilla" ! Repositorio institucional | [https://github.com/eadpucv/stella-nova github.com/eadpucv/stella-nova], la fuente que sincroniza el servidor. |- ! Repositorio de desarrollo | [https://github.com/hspencer/stella-nova github.com/hspencer/stella-nova], donde ocurre el trabajo diario antes de llegar al institucional. |- ! Versión en producción | <code>0.7.2</code>. El detalle de cada cambio se lleva en el [https://github.com/eadpucv/stella-nova/blob/main/CHANGELOG.md 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 <code>tokens.css</code> y <code>stella-nova.css</code>. Muestra siempre el estado vigente del sistema. '''[https://eadpucv.github.io/stella-nova/specimen/ 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 <code>&lt;style id="overrides"&gt;</code> donde se redefinen variables en vivo. <pre> :root { --sn-nova: #c33; --sn-fs-display: 2.4rem; } </pre> 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 <code>?useskin=stellanova</code> al final de su URL, o elegirlo en [[Especial:Preferencias]], pestaña «Apariencia». * '''Ver los cambios al instante:''' agregar <code>?debug=true</code>. 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 == <references /> [[Categoría:Casiopea]] [[Categoría:Stella Nova]]

Guardar la página Mostrar previsualización Mostrar los cambios Cancelar