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
| # | Regla | Viene de |
|---|---|---|
| C1 | La primera línea de cada ayuda dice qué se logra y en cuánto tiempo | NN/g heurística 10 · Diátaxis |
| C2 | Un solo nivel de «Más detalle» por bloque; nunca anidado | NN/g e IxDF: revelado progresivo |
| C3 | Cada ayuda termina con un «qué sigue» que sube un peldaño de autonomía | Aprendizaje progresivo |
| C4 | Toda ayuda contextual se abre a pedido, nunca sola | NN/g: ayuda que se pide (pull) |
| C5 | Ningún significado depende solo del color | WCAG 1.4.1 |
| C6 | Párrafos de 3 líneas, frases de unas 20 palabras, palabras comunes con definición en línea | W3C inclusión · NN/g |
| C7 | Todo se usa con teclado, con foco visible y en orden lógico | WCAG 2.1.1, 2.4.7, 2.4.3 |
| C8 | Objetivos táctiles de 24 × 24 px como mínimo | WCAG 2.5.8 |
| C9 | Sin desplazamiento horizontal a 320 px y con texto al 200 % | WCAG 1.4.10, 1.4.4 |
| C10 | Respeta movimiento reducido, más contraste y colores forzados | WCAG 2.3.3, 1.4.11 |
Reglas
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
| Necesidad de las ayudas | Se resuelve con | Qué se agrega |
|---|---|---|
| Sello de modo | Badge (.sn-badge) | Componente nuevo |
| Sello de estado | Badge (.sn-badge) | Componente nuevo |
| Ficha v0.4 | Plantilla:Documentación de Casiopea (evolución) | Componente nuevo |
| Pasos | Lista ordenada nativa | Componente nuevo |
| Más detalle | Acordeón (.wiki-accordion--naked) | Solo una regla de uso |
| Definición en línea | Tooltip (.tooltip-box), como referencia visual | Componente nuevo |
| Puente de modo | Navegación (nav) | Componente nuevo |
| Aviso por perfil | Aviso (.cas-aviso--nota) | Solo una regla de uso |
| Tarjeta de ayuda | Tarjeta (.tarjeta) | Solo una regla de uso |
| Selector de perfil | Control segmentado (.sn-seg) | Solo una regla de uso |
| Índice de temas | Badge de categoría (.catlinks li) | Solo una regla de uso |
| Enlace a pendiente | Enlace + sello de estado | Componente nuevo |
| Página pendiente | Aviso (.cas-aviso--nota) | Solo una regla de uso |
| Bloque de conversión | Aviso (.cas-aviso--info) + Botón (.wiki-btn) | Solo una regla de uso |
| Catálogo de contenido incrustable | Tabla (.wikitable) de la skin | Solo una regla de uso |
1. Sello de modo
{{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
{{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
{{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
{{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}}
- Abre el formulario «Nueva Persona». Verás un formulario con tu nombre de usuario ya escrito.
- Completa tu nombre y tu carrera. Verás la vista previa de tu ficha.
- 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
{{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
Completa tu {{Definición|Persona|página de Persona}} con un {{Definición|Formulario|formulario}}.
Antes de crear tu página de Persona necesitas tener tu usuario activo. Después la completarás con un formulario, y sus datos se guardarán como propiedades.
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
<!-- 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
{{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
{{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.
}}
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
<!-- 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
<!-- 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
<!-- 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
{{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]]}}
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
{{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}}}}
Escríbenos y te contamos cómo. Mientras tanto, revisa Ser administrador de Casiopeapendiente.
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
{| 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ódigo | Má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ódigo | Má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
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>