shaunbent/govuk-proposal-pages

Páginas de propuesta GOV.UK

Propósito

Producir una página HTML única y autocontenida que argumente una dirección, explique una idea o presente un cambio, utilizando los estilos reales del Sistema de Diseño GOV.UK y una pequeña biblioteca de componentes reutilizables.

El principio rector: muestra el contenido, no lo narres. Una lista de cosas que un equipo posee se convierte en una cuadrícula de tarjetas. Un conjunto de pasos se convierte en un flujo. Una comparación se convierte en una tabla con las diferencias resaltadas. La prosa es el tejido conectivo entre los componentes, no la forma principal de transportar información.

Describe el contenido; esta habilidad se encarga de la apariencia.

El resultado es un archivo HTML

Las páginas creadas con esta habilidad se comparten como archivos, a menudo subidos a SharePoint o una biblioteca de documentos similar y enlazados desde allí. Por lo tanto:

• Todo vive en un solo archivo .html. CSS, fuentes e imágenes están incrustados (fuentes e imágenes como data URIs en base64). Sin hojas de estilo, scripts, fuentes o imágenes externas.
• La página debe leerse correctamente con JavaScript desactivado. Algunas bibliotecas de documentos eliminan o bloquean scripts en las vistas previas. Los componentes interactivos (como el selector de vista) son mejoras: el estado predeterminado que se muestra sin JavaScript debe tener sentido por sí solo.
• Sin paso de compilación para el lector. El archivo se abre directamente en un navegador.

Archivos

• page-starter.html es una página en blanco: el CSS de GOV.UK Frontend, las fuentes GDS Transport incrustadas como base64, el CSS completo del componente, un banner de estado, un héroe y un pie de página con un registro de cambios. Cada nueva página comienza como una copia de este archivo. GDS Transport tiene licencia solo para uso en GOV.UK; fuera de GOV.UK, cámbiala por otra tipografía (consulta NOTICE.md).
• docs/index.html es la página de documentación de esta habilidad, y fue construida con esta habilidad. Su sección "Componentes" es la referencia visual: cada componente, nombrado y etiquetado, con cuándo usarlo, cuándo evitarlo y un ejemplo en vivo. Copia el marcado de los componentes de los bloques gx-specimen__demo allí. No copies las clases gx-; solo estilizan la página de documentación. Utiliza el mismo CSS de componentes que el iniciador, por lo que el marcado copiado funciona sin cambios.

Estructura del documento

Determina el argumento antes de elegir los componentes. La mayoría de las propuestas siguen este orden; omite las secciones que el contenido no necesita.

Sección	Qué hace	Componentes que suelen encajar
Estado y héroe	Dice qué es el documento y lo único que hay que llevarse	Banner de estado, héroe
Qué es	Explica la idea, si es posible que la audiencia no la conozca	Categorías, abanico, capas, par de código
Qué nos aporta	Los beneficios, temprano, para cada grupo en la sala	Cuadrícula de beneficios, tarjeta ancha
Por qué ahora	El problema tal como está, con evidencia	Silos, estadísticas, tabla comparativa, muchos a uno, cita de investigación
Cómo funciona	El enfoque propuesto	Flujo, antes y después, centro y radios, embudo, ejemplo práctico
Quién es responsable de qué	Responsabilidades	Responsabilidades, panel
Dónde empezamos	Alcance y orden	Fases, cronograma
Riesgos	Lo que podría salir mal	Riesgo
Preguntas abiertas	Lo que necesitas de los lectores	Preguntas abiertas
Éxito	Cómo sabrás que funcionó	Medidas de éxito, resultado
Pie de página	Versión y registro de cambios	Registro de cambios

Pon "Por qué ahora" primero solo cuando los lectores ya entiendan el espacio de la solución (ver "Principios editoriales").

Catálogo de componentes

Cada componente tiene un nombre. Las personas que usan esta habilidad pueden solicitar componentes por nombre ("usa un embudo para mostrar de dónde vienen las aplicaciones"), y debes usar los mismos nombres al sugerirlos. La sección "Componentes" de docs/index.html muestra cada uno en vivo, con su clase, cuándo usarlo y cuándo evitarlo. Copia el marcado de allí.

Mobiliario de página

Nombre	Clase	Úsalo cuando
Banner de estado	pt-topbanner	Cada página. Muestra la versión y una línea sobre qué es el documento.
Héroe	pt-hero	Cada página. Una etiqueta de ceja, el título y la oración más contundente del documento.
Nota de apoyo	pt-note	Información meta debajo de un diagrama, tabla o conjunto de estadísticas: fuentes, advertencias, "ilustrativo".
Registro de cambios	pt-footer	El pie de página de cada página. Entrada más reciente primero.

Tarjetas

Nombre	Clase	Úsalo cuando
Cuadrícula de beneficios	pt-owns-grid	Tres o cuatro cosas entregadas, poseídas o ganadas.
Tarjeta ancha	pt-owns-card--wide	Un elemento que necesita más espacio que sus hermanos, o para evitar que una tarjeta quede sola en una fila.
Principios	pt-works-grid	Tres principios o formas de trabajar.
Categorías	pt-categories	Tipos de una cosa, cada uno con un pequeño visual que muestra la categoría.
Panel	pt-card	Un punto que necesita más espacio que una tarjeta de cuadrícula, con el mismo estilo que cualquier otra tarjeta.
Riesgo	govuk-inset-text pt-card pt-card--warning	Un riesgo contra el que protegerse, expresado claramente y desde la experiencia.
Resultado	pt-card pt-card--success	En qué se convierte esto si funciona.

Números

Nombre	Clase	Úsalo cuando
Estadísticas	pt-baseline-grid	Números destacados. Cada número tiene una etiqueta simple, y el conjunto suma un total declarado cuando es posible.

Diagramas

Nombre	Clase	Úsalo cuando
Abanico	pt-fanout	Una fuente que alimenta varias salidas.
Embudo	pt-fanin	Varias fuentes que se unen en una sola cosa: entradas a una decisión, datos que alimentan un registro, equipos que contribuyen a un servicio. Funciona mejor con tres a cinco entradas. El ejemplo dibuja cuatro curvas, comenzando en y 12.5, 37.5, 62.5 y 87.5; para un número diferente de entradas, comienza cada curva en el centro de su entrada (para tres: 16.7, 50 y 83.3).
Centro y radios	pt-hub	Una cosa central con hasta cuatro partes que se conectan a ella.
Silos	pt-silos	La misma cosa mantenida por separado en varios lugares, sin nada que los conecte. Señala la copia que difiere.
Muchos a uno	pt-many-to-one	Varios nombres o rutas que conducen a la misma cosa: duplicados, alias, trabajo superpuesto.
Antes y después	pt-before-after	La misma cosa hoy y como se propone, lado a lado.
Capas	pt-layers	Niveles que se construyen unos sobre otros, unidos por flechas etiquetadas. Las etiquetas de los conectores tienen peso normal.
Flujo	pt-flow	Un proceso con pasos numerados y un estado final. Marca los destinos no decididos como abiertos con una etiqueta "Enfoque por acordar".
Fases	pt-phases	Etapas del trabajo en un orden real. La etapa actual está rellena.
Cronograma	pt-timeline	Hitos fechados. Hitos pasados rellenos, futuros huecos.
Espectro	pt-spectrum	Dónde se sitúan las cosas en un rango entre dos extremos: madurez, esfuerzo, riesgo.
Equipos	pt-squads	Cómo se relacionan los equipos, especialmente en reestructuraciones. Marca un equipo que cambia de estado como discontinuo.

Tablas y listas

Nombre	Clase	Úsalo cuando
Tabla comparativa	pt-compare	Varias opciones o lugares lado a lado. Agrupa filas y resalta el valor impar en toda la celda.
Responsabilidades	pt-split	Quién es responsable de qué, dos grupos lado a lado.
Preguntas abiertas	pt-questions	Preguntas que deseas responder, cada una etiquetada con para quién es.
Medidas de éxito	pt-check-list	Cinco o seis resultados verificables.

Ejemplos y evidencia

Nombre	Clase	Úsalo cuando
Ejemplo práctico	pt-example	Un caso concreto: un visual, luego cómo lo maneja cada lugar hoy.
Cita de investigación	pt-quote	Lo que un usuario, colega o interesado realmente dijo, con quién lo dijo.
Par de código	pt-code-pair	Datos, código o configuración, solos o lado a lado. Etiqueta los fragmentos simplificados como "Ilustrativo".
Punto de color	pt-swatch	Un color o estado mostrado en línea, en una tabla o una oración. Siempre emparejado con una etiqueta de texto.

Interactivos

Nombre	Clase	Úsalo cuando
Selector de vista	pt-views	Cambiar un diagrama entre dos estados, como "Hoy" y "Propuesto". Opcional, necesita JavaScript.

Si el contenido no encaja en ninguno de estos, escribe un párrafo corto (está bien, con moderación) o agrega un componente (ver "Extender la biblioteca").

Principios editoriales

Estructura

• Un documento, un hilo conductor. Cada componente debe servir al argumento central. Si algo es interesante pero no carga peso, elimínalo.
• Explica la idea antes de defenderla cuando la audiencia pueda no conocer la idea. El problema primero funciona cuando las personas ya entienden el espacio de la solución. Cuando no lo hacen, una sección de problemas se lee como una lista de quejas sin salida. Ver "Estructura del documento" para el orden predeterminado.
• Pon los beneficios temprano. Los lectores deciden si les importa en la primera o dos pantallas.
• Muestra el alcance completo con el primer ejemplo. Si el primer ejemplo es limitado, los lectores asumen que toda la propuesta es limitada. Cuando la idea se aplica ampliamente, abre con un ejemplo que insinúe la amplitud, luego usa el caso limitado como evidencia.
• Elimina las secciones que no necesitan estar allí. Si una sección trata sobre una decisión para una conversación diferente, déjala fuera.

Lenguaje

• Introduce un término antes de usarlo. Esto incluye encabezados, etiquetas y grupos de tablas. Si el término aparece antes de explicarse, usa una descripción simple en su lugar.
• Dale a cada término un trabajo. Si dos palabras similares aparecen (por ejemplo "decisión" para una elección única y "enfoque" para todo el método), mantén cada una con su propio significado en todo el documento.
• Describe un enfoque como "una forma común", no "la forma", a menos que realmente sea la única forma. Es más preciso e invita a la discusión.
• Usa palabras que describan, no culpen. "Definido en algunos lugares, en otros no" describe una situación. "Vacíos" o "falta" implica que alguien falló.
• Cuando el autor proporciona la redacción, úsala tal como está escrita. Corrige solo la gramática y di lo que cambiaste.

Evidencia

• Usa datos reales de la fuente (el sistema, la hoja de cálculo, la exportación), no cifras recordadas o estimadas. Di de dónde provienen los números.
• Señala cualquier cosa leída de una captura de pantalla o resumen para que pueda verificarse antes de compartir la página.
• No exageres el estado. Si algo fue bien recibido pero no acordado formalmente, dilo con precisión o deja el estado fuera.
• Marca las elecciones no decididas como no decididas. Una etiqueta "Enfoque por acordar" en una opción es mejor que presentar una suposición como una decisión.

Tono con audiencias mixtas

• Sé imparcial. Al mostrar un problema que involucra a varios equipos o lugares, muestra la parte de cada uno. Una página que señala a un solo grupo se lee defensivamente por ese grupo.
• Enmarca los beneficios compartidos para cada grupo en la sala. Describe lo que cada grupo gana en sus propios términos. No menciones la fricción entre grupos en el documento, incluso si es la motivación real. Los beneficios pueden abordarla sin describirla.

Estilo de la casa

El estilo de la casa predeterminado, cámbialo para adaptarlo:

• Inglés del Reino Unido, encabezados en mayúscula de oración, coma Oxford
• Sin guiones largos; reestructura con coma, dos puntos, punto y coma o punto
• Sin construcciones "no es X, es Y"
• Sin metáforas militares o de combate
• "Gobierno" en minúsculas a menos que sea parte de un nombre
• Llano, directo, seguro; cada palabra gana su lugar, y las líneas introductorias no repiten las líneas principales

Reglas visuales

• Un tratamiento de tarjeta en todas partes. Las tarjetas son blancas, con un borde gris de 1px, un borde superior azul de 4px, un icono opcional, un encabezado pequeño (govuk-heading-s) y texto del cuerpo pequeño (govuk-body-s). No inventes estilos de tarjeta únicos; rediseña el contenido nuevo para que coincida.
• Sin huérfanos en las cuadrículas. Si una cuadrícula dejaría una tarjeta sola en una fila, haz que esa tarjeta sea ancha o cambia el número de columnas.
• Las muestras de color son círculos, que coinciden con las páginas de color del Sistema de Diseño GOV.UK.
• Las tablas comparativas resaltan toda la celda, no un fondo en línea detrás del texto, para que los valores permanezcan alineados en cada columna. Cada celda y encabezado de grupo comparten el mismo borde izquierdo.
• Las etiquetas de los conectores en los diagramas tienen peso normal. La negrita es para los encabezados y la cosa a la que se apunta.
• Notas de apoyo (pt-note): texto del cuerpo pequeño de 16px en el color de texto secundario (#505a5f). Úsalo para información meta debajo de un diagrama, tabla o conjunto de estadísticas: advertencias, fuentes, etiquetas "ilustrativo".
• Los bloques de código lado a lado tienen la misma altura.
• Los diagramas usan box-sizing: border-box (establecido en el CSS del componente) para que el relleno y los bordes nunca saquen un componente de su caja.
• La etiqueta del héroe permanece en una línea. Las etiquetas de GOV.UK tienen un ancho máximo de 160px por defecto; el CSS del componente lo elimina para el héroe y el banner.
• Las fuentes o imágenes personalizadas deben estar incrustadas, y solo si su licencia lo permite. Verifica la licencia primero. Las tipografías personalizadas a menudo necesitan centrado vertical manual: mide el texto renderizado y ajusta el relleno.
• Accesibilidad: proporciona a los diagramas una alternativa de texto (role="img" con un aria-label que indique qué muestra el diagrama), mantén los estados de enfoque visibles en los controles interactivos y no te bases solo en el color para mostrar una diferencia (las celdas resaltadas también están en negrita).

Componentes interactivos

El selector de vista (pt-views) permite al lector cambiar un diagrama entre estados, por ejemplo "hoy" y "propuesto", o "claro" y "oscuro". Es opcional:

• El estado predeterminado debe ser el que tenga sentido sin JavaScript.
• Usa elementos <button> reales con aria-pressed.
• Mantén el script en línea y pequeño; el iniciador incluye uno que puedes reutilizar.

Flujo de trabajo de compilación

1. Reúne el contenido primero: el argumento, la evidencia, para quién es y qué quieres que hagan. Elegir componentes antes de que el contenido esté claro produce una página pulida con sustancia delgada.
2. Planifica las secciones usando "Estructura del documento" y elige componentes por nombre del catálogo. Si la persona ha solicitado componentes específicos, úsalos.
3. Copia page-starter.html a un nuevo archivo. Completa el banner, el héroe y el pie de página.
4. Copia el marcado de cada componente de la sección "Componentes" de docs/index.html y reemplaza el contenido del marcador de posición. Nunca dejes texto de marcador de posición en la página.
5. Si la página usa un selector de vista, mantén el script al final del iniciador; de lo contrario, elimínalo.
6. Revisa la página en un navegador.