Saltar al contenido
Ayudas Casiopea proyecto · Stella Nova v0.9.0
Tema
Tamaño de letra
Familia
Ver prototipo

Proyecto / Espécimen

Espécimen de las ayudas

Los elementos de interfaz que se crean para las ayudas, construidos sobre Stella Nova. Todo está en evaluación: cada sección dice qué es nuevo, en qué se basa, cómo se usa, por qué existe y qué falta decidir. No incluye las herramientas del prototipo (comentarios, revisión, recorrido, aviso de salida), que se describen en la especificación de la fase 2.

Criterios

Todo lo nuevo se escribe y se diseña con estas reglas. Vienen de W3C (accesibilidad, usabilidad e inclusión), NN/g, la Interaction Design Foundation y los criterios propios del proyecto. Detalle en la especificación de la fase 2.

#ReglaViene de
C1La primera línea de cada ayuda dice qué se logra y en cuánto tiempoNN/g heurística 10 · Diátaxis
C2Un solo nivel de «Más detalle» por bloque; nunca anidadoNN/g e IxDF: revelado progresivo
C3Cada ayuda termina con un «qué sigue» que sube un peldaño de autonomíaAprendizaje progresivo
C4Toda ayuda contextual se abre a pedido, nunca solaNN/g: ayuda que se pide (pull)
C5Ningún significado depende solo del colorWCAG 1.4.1
C6Párrafos de 3 líneas, frases de unas 20 palabras, palabras comunes con definición en líneaW3C inclusión · NN/g
C7Todo se usa con teclado, con foco visible y en orden lógicoWCAG 2.1.1, 2.4.7, 2.4.3
C8Objetivos táctiles de 24 × 24 px como mínimoWCAG 2.5.8
C9Sin desplazamiento horizontal a 320 px y con texto al 200 %WCAG 1.4.10, 1.4.4
C10Respeta movimiento reducido, más contraste y colores forzadosWCAG 2.3.3, 1.4.11

Reglas

Las de la skin (docs/DISENO.md), aplicadas a las ayudas.

1. La skin manda. Los componentes consumen tokens semánticos --sn-*, nunca primitivas. Los tokens nuevos solo se proponen (ver «Propuesta para la skin»).

2. Nova reservado. --sn-nova queda para foco, isotipo, títulos y menús activos. Ningún componente nuevo lo usa; solo lo conservan los componentes de la skin que ya lo traen (Acordeón, Aviso info).

3. Reutilizar antes de crear. Badge, control segmentado, Aviso, Tarjeta, Acordeón y Botón cubren 8 de las 15 necesidades. Lo nuevo se apoya en ellos.

4. Nunca solo color. Modo y estado se leen por forma y palabra.

5. Ritmo. Vertical con --sn-baseline, -half, -2 y -3; horizontal con --sn-s-*. Radios --sn-radius-s, --sn-radius, --sn-radius-l; --sn-radius-pill solo en contadores numéricos.

6. Portables. Todo cabe en Plantilla:X/style.css: var() sin respaldo, sin :focus-within, sin var() en transition.

7. Contraste AA y foco. Texto secundario en --sn-ink-soft. El foco usa el anillo de la skin (--sn-focus-border).

Mapa de reutilización

7 componentes nuevos y 8 usos nuevos de componentes de la skin.

Necesidad de las ayudasSe resuelve conQué se agrega
Sello de modoBadge (.sn-badge)Componente nuevo
Sello de estadoBadge (.sn-badge)Componente nuevo
Ficha v0.4Plantilla:Documentación de Casiopea (evolución)Componente nuevo
PasosLista ordenada nativaComponente nuevo
Más detalleAcordeón (.wiki-accordion--naked)Solo una regla de uso
Definición en líneaTooltip (.tooltip-box), como referencia visualComponente nuevo
Puente de modoNavegación (nav)Componente nuevo
Aviso por perfilAviso (.cas-aviso--nota)Solo una regla de uso
Tarjeta de ayudaTarjeta (.tarjeta)Solo una regla de uso
Selector de perfilControl segmentado (.sn-seg)Solo una regla de uso
Índice de temasBadge de categoría (.catlinks li)Solo una regla de uso
Enlace a pendienteEnlace + sello de estadoComponente nuevo
Página pendienteAviso (.cas-aviso--nota)Solo una regla de uso
Bloque de conversiónAviso (.cas-aviso--info) + Botón (.wiki-btn)Solo una regla de uso
Catálogo de contenido incrustableTabla (.wikitable) de la skinSolo una regla de uso

1. Sello de modo

Componente nuevoEn evaluación

Base: Badge (.sn-badge). Clases: .sn-badge + .mx-modo + .mx-modo--{aprender|resolver|consultar|entender}. Tokens: --sn-sunk (fondo de la base), --sn-ink (texto), --sn-icon (forma).

{{Sello|modo=aprender}}
{{Sello|modo=resolver}}
{{Sello|modo=consultar}}
{{Sello|modo=entender}}

Aprender Resolver Consultar Entender

Uso. En la ficha, en las tarjetas, en el pie de navegación y en las listas de ayudas. Siempre con la palabra del modo; nunca la forma sola.

Justificación. Diátaxis pide que el lector sepa qué tipo de texto tiene delante antes de leer. La versión anterior asignaba un color por modo y usaba primitivas (--sn-azul-300, --sn-malva-400) y --sn-nova, reservado al skin. Ahora la base es el badge neutro del skin y el modo se distingue por forma (círculo, triángulo, cuadrado, rombo) y etiqueta. No agrega colores.

Para evaluar. ¿Las cuatro formas se distinguen a tamaño de lectura? ¿Conviene que el skin acepte .mx-modo como variante oficial del badge?

2. Sello de estado

Componente nuevoEn evaluación

Base: Badge (.sn-badge). Clases: .sn-badge + .mx-badge-fantasma (pendiente) · .sn-badge + .mx-badge-borde (puerta, administrador). Tokens: --sn-hairline (borde), --sn-ink-soft y --sn-ink (texto).

{{Sello|estado=pendiente}}
{{Sello|estado=puerta}}
{{Sello|estado=administrador}}

Pendiente Página puerta Requiere ser administrador

Uso. Pendiente: en tarjetas y enlaces a ayudas que aún no existen. Página puerta y Requiere ser administrador: en las páginas que explican funciones de SMW sin enseñar a usarlas.

Justificación. El skin ya resuelve un caso igual: las categorías sin página se muestran con menos énfasis. Se sigue esa idea con un borde discontinuo en lugar de un color nuevo. El texto usa --sn-ink-soft y no --sn-ink-faint porque este último no alcanza contraste AA.

Para evaluar. ¿El borde discontinuo se lee como «todavía no existe»? ¿Hace falta un tercer estado (en revisión)?

3. Ficha v0.4

Componente nuevoEn evaluación

Base: Plantilla:Documentación de Casiopea (evolución). Clases: .mx-ficha, .mx-ficha__capa, .mx-ficha__fila, .mx-ficha__etq, .mx-ficha__resultado. Tokens: --sn-paper-edge (fondo, igual que Aviso), --sn-hair, --sn-hairline-soft, --sn-ink, --sn-ink-soft, --sn-baseline-half.

{{Documentación de Casiopea
|Modo=Resolver
|Perfil=Alumno, Profesor
|Nivel=Inicial
|Tiempo=5 min
|Para qué sirve=Subir una imagen y mostrarla en tu página.
|Prerequisitos=Ayuda:Editar una página
|Siguiente=Ayuda:Galerías de imágenes
|Puentes=Entender: Ayuda:Cómo se guardan los archivos
}}

Uso. Arriba de cada ayuda, una sola vez. Variante completa para ayudas escritas y variante pendiente (sin capa de ruta). La capa «Sobre este documento» va plegada.

Justificación. La ficha actual mezcla datos de mantenimiento con orientación. Se separa en tres capas para que el lector vea primero lo que le sirve (revelado progresivo). Usa el mismo fondo y borde que el Aviso del skin para no inventar una superficie nueva.

Para evaluar. ¿Las tres capas son demasiadas para una guía corta? ¿Se aceptan los parámetros nuevos Tiempo, Siguiente y Puentes en la plantilla real?

4. Pasos

Componente nuevoEn evaluación

Base: Lista ordenada nativa. Clases: ol.mx-pasos. Tokens: --sn-radius-pill (el número es un contador), --sn-font-mono, --sn-sunk, --sn-baseline-half.

{{Pasos inicio}}
# '''Abre el formulario «Nueva Persona».''' Verás tu nombre de usuario ya escrito.
# '''Completa tu nombre y tu carrera.''' Verás la vista previa.
# '''Guarda la página.''' Verás tu página publicada.
{{Pasos fin}}
  1. Abre el formulario «Nueva Persona». Verás un formulario con tu nombre de usuario ya escrito.
  2. Completa tu nombre y tu carrera. Verás la vista previa de tu ficha.
  3. Guarda la página. Verás tu página de Persona publicada.

Uso. Solo en tutoriales (Aprender) y guías (Resolver). Un solo camino, sin alternativas dentro de los pasos.

Justificación. Stella Nova permite --sn-radius-pill solo para contadores numéricos en mono: el número de paso es exactamente eso. El número sigue siendo el de la lista nativa, así que los lectores de pantalla lo anuncian bien.

Para evaluar. ¿El número en cápsula compite con los títulos? ¿Se prefiere sin fondo?

5. Más detalle

Uso nuevo de un componente del skinEn evaluación

Base: Acordeón (.wiki-accordion--naked) (ver en el espécimen de Stella Nova). Clases: .wiki-accordion.wiki-accordion--naked + details.wiki-accordion__item. Tokens: Los del Acordeón del skin; solo se agrega el estado [open] del elemento nativo.

{{Acordeón|naked=sí|contenido=
{{Acordeón/Ítem|título=Más detalle: si tu imagen no aparece|contenido=
Revisa que el nombre del archivo coincida exactamente.
}}
}}
Más detalle: si tu imagen no aparece

Revisa que el nombre del archivo coincida exactamente, incluidas mayúsculas y extensión.

Uso. Un nivel: nunca un «Más detalle» dentro de otro. El título empieza con «Más detalle:» y dice qué hay dentro.

Justificación. No hace falta un componente nuevo: el Acordeón en su variante naked ya existe. Solo se documenta un uso nuevo (revelado progresivo dentro de una ayuda). El micrositio lo arma con details/summary para que funcione sin JavaScript.

Para evaluar. ¿El color nova de la cabecera del Acordeón es demasiado fuerte para un detalle secundario?

6. Definición en línea

Componente nuevoEn evaluación

Base: Tooltip (.tooltip-box), como referencia visual. Clases: a.mx-def + ventana .mx-pop. Tokens: --sn-ink-soft (subrayado punteado), --sn-link-hover, --sn-paper, --sn-hairline, --sn-radius-l, --sn-lift (los mismos del Tooltip).

Completa tu {{Definición|Persona|página de Persona}} con un {{Definición|Formulario|formulario}}.

Antes de crear tu necesitas tener tu activo. Después la completarás con un , y sus datos se guardarán como .

Uso. Solo la primera vez que aparece un término en la página. Se abre al tocarlo o con Enter, no al pasar el mouse, y se cierra con Escape.

Justificación. El Tooltip del skin explica con un ícono aparte; aquí la palabra misma es el enlace, para no sumar íconos al texto. Se copian sus tokens de superficie (papel, filete, radio grande, sombra) para que se vea de la misma familia. Sin JavaScript, el término lleva a su entrada del glosario.

Para evaluar. ¿Conviene más extender Plantilla:Tooltip con un parámetro glosario que crear Plantilla:Definición?

7. Puente de modo

Componente nuevoEn evaluación

Base: Navegación (nav). Clases: nav.mx-ruta. Tokens: --sn-paper-edge, --sn-radius, --sn-baseline-3 (aire antes del pie), --sn-ink-soft.

<!-- Lo genera Plantilla:Documentación de Casiopea a partir de Prerequisitos, Siguiente y Puentes -->

Uso. Al final de cada ayuda escrita. No va en las páginas pendientes.

Justificación. Diátaxis separa los modos, pero el lector necesita saltar entre ellos. El pie se separa del cuerpo por aire y una superficie suave, sin filete, siguiendo la doctrina del skin para el pie de categorías.

Para evaluar. ¿Tres columnas son claras en móvil, donde se apilan?

8. Aviso por perfil

Uso nuevo de un componente del skinEn evaluación

Base: Aviso (.cas-aviso--nota) (ver en el espécimen de Stella Nova). Clases: .cas-aviso.cas-aviso--nota + .cas-aviso-titulo + .cas-aviso-cuerpo. Tokens: Los del Aviso del skin, sin cambios.

{{Aviso|tipo=nota|título=Si eres profesor|texto=Puedes mostrar en tu curso la lista de tareas de tus estudiantes con una consulta.}}

Uso. Como máximo uno por sección. Si un perfil necesita más, es otra página. El título siempre empieza con «Si eres».

Justificación. La variante nota del Aviso ya comunica «observación que conviene tener presente». Se reutiliza tal cual; lo nuevo es la regla de escritura (título «Si eres…», uno por sección).

Para evaluar. ¿Hace falta un parámetro perfil para que se pueda filtrar o contar?

9. Tarjeta de ayuda

Uso nuevo de un componente del skinEn evaluación

Base: Tarjeta (.tarjeta) (ver en el espécimen de Stella Nova). Clases: .tarjeta + .mx-tarjeta (alineación y ritmo) · .mx-tarjeta--pendiente · .mx-tarjeta--modo. Tokens: Los de la Tarjeta del skin; la pendiente usa --sn-hairline discontinuo y quita la sombra.

{{Tarjeta
|enlace=Ayuda:Crear tu página de Persona
|título=Crear tu página de Persona
|descripción=Crea tu página con el formulario y aparece en la wiki.
}}
Aprender

Primeros pasos en Casiopea

Tendrás tu cuenta lista y sabrás moverte por la wiki.

Consultar

Sintaxis de wikitexto

Encontrarás la sintaxis exacta de cada elemento de texto.

Pendiente Aprender

Documenta una travesía

Uso. En grilla cols-auto. Título con verbo. La variante de modo (portada) lista enlaces y no es clicable entera.

Justificación. La Tarjeta del skin ya tiene sombra, hover y enlace que cubre la tarjeta. Se le agregan los sellos y se alinea a la izquierda para listas largas. Se eliminó el borde nova al pasar el mouse de la versión anterior.

Para evaluar. ¿Se aceptan tarjetas sin imagen? ¿La pendiente debe seguir siendo clicable?

10. Selector de perfil

Uso nuevo de un componente del skinEn evaluación

Base: Control segmentado (.sn-seg) (ver en el espécimen de Stella Nova). Clases: .sn-seg.mx-perfiles + .mx-recorrido. Tokens: Los de .sn-seg; el recorrido usa --sn-font-mono para el número.

<!-- En la wiki: pestañas o anclas a secciones; el control segmentado es del micrositio -->

Uso. Solo en la portada de ayudas. Es una pista: el catálogo completo sigue visible abajo.

Justificación. El skin ya trae un control segmentado (tema, tamaño, familia). Se reutiliza en lugar de las píldoras de la versión anterior, que usaban --sn-radius-pill fuera de su uso permitido.

Para evaluar. ¿«Interfaz» es un perfil o un tema? (ligado a la decisión D-09 sobre audiencias).

11. Índice de temas

Uso nuevo de un componente del skinEn evaluación

Base: Badge de categoría (.catlinks li) (ver en el espécimen de Stella Nova). Clases: ul.mx-temas > li > a.sn-badge. Tokens: --sn-field (fondo) y --sn-link (texto), igual que las categorías del pie.

<!-- Se genera desde la lista de temas (objetos) -->

Uso. En la portada de ayudas («¿Sobre qué?»), para saltar a las ayudas de cada tema.

Justificación. Las categorías del pie ya son badges con fondo de campo y texto de enlace. Se usa el mismo aspecto para que «tema» y «categoría» se lean como lo mismo.

Para evaluar. ¿Puede confundirse con las categorías reales del pie?

12. Enlace a pendiente

Componente nuevoEn evaluación

Base: Enlace + sello de estado. Clases: .mx-pend > a.mx-link-pendiente + .sn-badge.mx-badge-fantasma. Tokens: Los del sello de estado.

<!-- La plantilla lo agrega si la página destino tiene Estado=Pendiente -->

Si vas a documentar una salida de la Escuela, mira Documenta una travesíapendiente; si es una entrega, Documenta tu primera tarea.

Uso. Automático en cualquier enlace a una ayuda pendiente.

Justificación. En MediaWiki un enlace rojo significa «la página no existe»; aquí la página existe pero está vacía. Se necesita una señal distinta del rojo, y se usa el mismo sello fantasma que en las tarjetas.

Para evaluar. ¿El sello al lado del enlace interrumpe la lectura de frases largas?

13. Página pendiente

Uso nuevo de un componente del skinEn evaluación

Base: Aviso (.cas-aviso--nota) (ver en el espécimen de Stella Nova). Clases: .cas-aviso.cas-aviso--nota. Tokens: Los del Aviso del skin.

{{Aviso|tipo=nota|título=Esta ayuda todavía no está escrita|texto=Mientras tanto: [[Ayuda:Documentar una Travesía]] · [[Ayuda:Crear una página]]}}
Esta ayuda todavía no está escrita

Uso. En toda ayuda pendiente, debajo de la ficha. Con la capa de revisión encendida se muestra además su especificación.

Justificación. Se reutiliza el Aviso nota. Lo nuevo es la regla: siempre con «Mientras tanto» y al menos un enlace útil.

Para evaluar. ¿Basta con el Aviso o conviene una plantilla propia que lea los enlaces desde la especificación?

14. Bloque de conversión

Uso nuevo de un componente del skinEn evaluación

Base: Aviso (.cas-aviso--info) + Botón (.wiki-btn) (ver en el espécimen de Stella Nova). Clases: .cas-aviso.cas-aviso--info + a.wiki-btn. Tokens: Los del Aviso info y del Botón del skin.

{{Aviso|tipo=info|título=¿Quieres ser administrador de Casiopea?|texto=Escríbenos y te contamos cómo.
{{Botón|texto=Ir a Casiopea:Solicitudes|enlace=Casiopea:Solicitudes}}}}
¿Quieres ser administrador de Casiopea?

Escríbenos y te contamos cómo. Mientras tanto, revisa Ser administrador de Casiopeapendiente.

Ir a Casiopea:Solicitudes

Uso. Una vez, al final de cada página puerta (plantillas, formularios, propiedades).

Justificación. Las páginas puerta muestran qué permite una función de SMW y derivan a la documentación oficial. El cierre convierte el interés en una acción concreta. Aviso info y Botón ya existen.

Para evaluar. ¿El destino correcto es Casiopea:Solicitudes o una página nueva (F17)?

15. Catálogo de contenido incrustable

Uso nuevo de un componente del skinEn evaluación

Base: Tabla (.wikitable) de la skin (ver en el espécimen de Stella Nova). Clases: table.wikitable.mx-incrustables · code.mx-codigo · .sn-badge (Widget, Extensión, No está en la guía actual). Tokens: Los de la tabla de la skin; en móvil cada fila pasa a ser una ficha apilada.

{| class="wikitable"
! Qué !! Para qué !! Código !! Más información
|-
| YouTube || Video que se ajusta al ancho || <code><nowiki>{{#widget:YouTube|id=ID}}</nowiki></code> || [[Widget:YouTube]]
|}

Video

QuéPara quéCódigoMás información
YouTube
Widget
Video de YouTube que se ajusta al ancho de la página; acepta lista de reproducción y punto de inicio.{{#widget:YouTube|id=ID_DEL_VIDEO}}Widget:YouTube

3D

QuéPara quéCódigoMás información
Sketchfab
Widget
Modelo 3D publicado en Sketchfab, explorable en la página.{{#widget:Sketchfab|id=ID_DEL_MODELO}}Widget:Sketchfab

Uso. En las guías 12, 13 y 42 (un grupo por tabla) y completo en la referencia 23. Lo que no aparece en la guía actual de la wiki lleva el sello «No está en la guía actual».

Justificación. Las guías de incrustar necesitan comparar opciones de un vistazo (NN/g: contenido que se escanea). La tabla de la skin ya existe; lo nuevo es la estructura fija de columnas y el apilado en móvil para que el código no obligue a desplazarse hacia el lado (WCAG 1.4.10).

Para evaluar. ¿Conviene una plantilla (por ejemplo, Plantilla:Incrustable) que genere cada fila desde las páginas Widget:?

Propuesta para la skin

Un elemento de las ayudas que podría servir en toda la wiki y se propone para que Stella Nova lo adopte. Vive en una capa limitada a .mx-propuesta: no redefine ningún token ni cambia ningún componente de la skin. Se muestra junto a lo que hay hoy.

Marca de modo como variante oficial del badge

El sello de modo de las ayudas (forma + palabra) puede servir en cualquier página que se clasifique como tutorial, guía, referencia o explicación. Se propone .sn-badge-modo con dos tokens: --sn-mode-mark (color de la forma; por defecto --sn-icon) y --sn-mode-mark-size (tamaño de la forma). No hay un color por modo.

Hoy (clase de las ayudas)

Aprender Resolver Consultar Entender

Con la propuesta

Aprender Resolver Consultar Entender

<span class="sn-badge sn-badge-modo" data-modo="aprender">Aprender</span>