Notificación de dos columnas — Reglas y ejemplos

Una notificación de dos columnas coloca dos avisos cortos y etiquetados bajo un mismo tema compartido. Los avisos pueden contrastar acciones, explicar dos condiciones o distinguir estados relacionados, pero cada uno debe seguir siendo preciso y útil al leerse por sí solo.

Este elemento renderizado funciona porque «Página en borrador» y «Página publicada» son condiciones reales, no encabezados cosméticos. El título compartido define la decisión, cada aviso proporciona una instrucción completa, y ninguno pide al lector que infiera el significado a partir del color o la posición horizontal.

Por qué este elemento es importante

A menudo los lectores encuentran orientación mientras exploran en busca de la condición que aplica a su caso. Un párrafo largo que dice «los borradores pueden contener ejemplos etiquetados, mientras que las páginas publicadas requieren valores verificados» obliga al lector a retener una cláusula en la memoria mientras evalúa la otra. Dos avisos delimitados reducen ese trabajo. Las etiquetas exponen primero la rama, de modo que el lector puede identificar la condición relevante y luego leer su instrucción.

El beneficio psicológico es la atención selectiva. Las personas no siempre necesitan ambos mensajes por igual; necesitan la confianza de haber notado el correcto. Un título compartido establece la pregunta, mientras que etiquetas distintas hacen visibles los estados disponibles. La presentación lado a lado también hace evidente un contraste significativo sin exagerarlo como un ganador y un perdedor.

Ese beneficio desaparece cuando el autor fuerza una simetría falsa. La simetría falsa ocurre cuando la disposición visual implica que dos ideas tienen el mismo alcance, importancia o validez aunque el contenido no lo respalde. Un recordatorio de una frase junto a un procedimiento de seguridad de seis pasos no es un par. Tampoco lo es una restricción legal obligatoria junto a un consejo opcional de productividad. Columnas de igual ancho pueden hacer que mensajes desiguales parezcan intercambiables, que es precisamente la señal equivocada.

La extraíbilidad por máquina es la capacidad del software de aislar el contenido preservando las relaciones que lo hacen preciso. Una notificación tipificada de dos columnas expone un tema principal y dos avisos secundarios etiquetados. Los sistemas de búsqueda y los agentes de IA pueden recuperar «Para una página publicada, usa valores verificados con una fuente y fecha comprobada» sin adivinar qué encabezado gobierna cada frase. Las etiquetas explícitas, el orden de origen y los cuerpos autocontenidos sobreviven al apilamiento responsive y a la extracción solo de texto.

Sigue las reglas de escritura de elementos antes de elegir este componente. El propósito tiene prioridad sobre la apariencia. Un riesgo grave sigue siendo un cuadro de advertencia , una corrección comportamiento por comportamiento sigue siendo un bloque de qué hacer y qué no hacer , y dos hechos no se convierten en notificaciones simplemente porque un diseño pueda ponerlos en columnas.

Cuándo usarlo

Usa este elemento cuando un tema compartido tenga exactamente dos avisos cortos y ver ambos a la vez ayude al lector a clasificar, comparar o evitar confusiones. Las relaciones apropiadas incluyen:

• Dos condiciones: sesión iniciada versus sesión cerrada, borrador versus publicado, antes de la migración versus después de la migración.
• Dos audiencias: propietario de la cuenta versus usuario invitado, siempre que ambos reciban orientación sobre el mismo evento.
• Comportamiento recomendado y desaconsejado: solo cuando cada lado sea un aviso corto en lugar de una lista de comportamientos emparejados.
• Estados disponibles y no disponibles: cuando las etiquetas indiquen las condiciones que producen cada estado.
• Comportamiento actual y próximo: cuando las fechas o los límites de versión sean explícitos.

Todas estas pruebas deben pasar:

1. Un encabezado puede introducir con precisión ambos avisos.
2. Existen exactamente dos condiciones o mensajes; la fuente no está ocultando un tercer caso.
3. Cada aviso tiene una etiqueta específica y una consecuencia o acción completa.
4. El par puede entenderse en el orden de origen en una pantalla estrecha.
5. Ningún aviso requiere un procedimiento anidado, tabla, formulario o calificación extensa.

Los casi-aciertos revelan un mal uso. Usa prosa ordinaria cuando la segunda afirmación simplemente continúa la primera. Usa una tabla comparativa cuando los lectores deban evaluar varios criterios. Usa un árbol de decisión cuando más de dos condiciones se ramifiquen o cuando una respuesta lleve a otra pregunta. Usa una advertencia independiente cuando pasar por alto el mensaje pueda causar daño, pérdida de datos, exposición legal o una acción irreversible. Usa qué hacer y qué no hacer cuando varios comportamientos incorrectos necesiten cada uno una corrección correspondiente.

No inventes un contrapeso. Si la instrucción honesta es «Haz una copia de seguridad de la base de datos antes de la migración», añadir «Después de la migración: sigue trabajando» crea simetría pero ningún valor. Asimismo, no dividas un aviso en «Importante» y «También importante». Las etiquetas deben nombrar condiciones, estados, audiencias o posiciones reales.

Dónde colocarlo

Coloca el elemento inmediatamente después del párrafo que define la situación compartida. Los lectores deben saber qué decisión o estado califican los avisos antes de encontrar las ramas. Cuando el par precede a una acción, colócalo antes del primer paso que modifique datos o comprometa al lector con una elección.

Las reglas de posición exacta son:

• Coloca un par de dos condiciones después de los requisitos previos y antes de las instrucciones específicas de cada condición.
• Coloca un contraste previo a la acción antes del control, comando, descarga o paso que califica.
• Coloca un par de estado resultante después de que se haya definido el resultado y antes de los detalles de solución de problemas.
• Mantén la evidencia o la fuente dentro del aviso correspondiente cuando respalde solo a ese aviso; coloca la evidencia compartida inmediatamente después del par completo.
• En secciones repetidas de documentación, usa el mismo orden de origen para que los estados recurrentes no intercambien posiciones.

El elemento no puede situarse junto a otro componente de dos columnas, tabla comparativa, control de pestañas, cuadrícula de precios o llamada a la acción dividida. Las cuadrículas adyacentes hacen que los límites sean ambiguos y pueden implicar una elección de cuatro opciones. No puede separar una afirmación de su cita, un paso de su advertencia requerida, ni un control de formulario de su etiqueta. No lo coloques dentro de un paso numerado: las ramas anidadas pueden hacer que la secuencia y la responsabilidad no queden claras.

Nunca pongas una advertencia grave en una columna junto a un consejo rutinario en la otra. La geometría igual reduce el predominio de la advertencia y sugiere que los lectores pueden elegir entre ambas. Promueve el riesgo a una advertencia independiente antes de la acción correspondiente, y luego usa este elemento solo si dos condiciones seguras aún necesitan aclaración.

Anatomía

1. Encabezado compartido: nombra la única situación o decisión gobernada por ambos avisos.
2. Contenedor de aviso: agrupa el par como un elemento editorial sin implicar que sea una alerta única.
3. Etiqueta del aviso: nombra una condición, estado, audiencia o comportamiento en 2–6 palabras.
4. Cuerpo del aviso: indica el hecho relevante, la consecuencia y la siguiente acción en ese orden cuando los tres son necesarios.
5. Icono opcional: refuerza una etiqueta de texto visible; nunca transmite la distinción por sí solo.
6. Nota de fuente opcional: respalda una afirmación cambiante, regulada o definida externamente dentro del aviso que califica.
7. Orden de origen: determina el orden para lectores de pantalla, copia y móvil; el estilo visual no debe invertirlo.

El autor proporciona el encabezado compartido, dos etiquetas, dos cuerpos, el tono y las fuentes. El renderizador proporciona la cuadrícula responsive, el espaciado, el énfasis visual, el contenedor semántico y el tratamiento decorativo de los iconos.

Ejemplos de diseño

Estas son las variantes admitidas completas. Las variantes cambian las etiquetas y el énfasis, no el modelo de datos de dos avisos.

Acciones contrastantes

Úsalo para una acción recomendada y una desaconsejada cuando solo haya un mensaje en cada lado. Indica la acción y su motivo; no expandas esta variante en listas emparejadas.

Estados condicionales

Úsalo cuando la instrucción correcta dependa de una condición mutuamente excluyente como «Cuenta existente» y «Cuenta nueva». Nombra la condición en cada etiqueta y coloca primero el estado más común o requisito previo.

Aclaraciones emparejadas

Úsalo cuando dos hechos relacionados eviten malentendidos diferentes pero no sean opuestos. Aplica un estilo neutral a ambos para que el diseño no invente aprobación, gravedad o preferencia.

Par compacto de estado

Úsalo para consecuencias de estado breves después de que los estados ya se hayan explicado. Cada cuerpo es una oración. No elimines las etiquetas ni reduzcas los cuerpos a valores sin explicación.

Par apilado en móvil

Todas las variantes se apilan en anchos reducidos. Mantén el primer aviso inmediatamente antes del segundo y conserva el encabezado compartido. No crees una interacción de deslizamiento o pestañas, porque ocultar un aviso frustra el propósito del elemento.

Parámetros

«Fuente» identifica de dónde obtiene cada valor un adaptador. El mapeo del cuerpo almacena deliberadamente dos registros completos de aviso en lugar de dos columnas posicionadas visualmente.

El primer encabezado del cuerpo principal se asigna a title. Cada elemento anidado asigna su primer encabezado a label y todo lo posterior a content; los atributos del aviso contienen tone e icon. El renderizador debe rechazar elementos de aviso uno, tres o vacíos en lugar de llenar o descartar una columna silenciosamente.

Sintaxis y ejemplos de código

Todos los formatos preservan el mismo título, orden de avisos, etiquetas, cuerpos, tonos y fuentes. «Columna uno» y «columna dos» son términos de presentación, no nombres de campo.

Directiva portable de Markdown

:::notification-two-column{variant=conditional}
## Elige la instrucción según tu estado de publicación

::notice{tone=neutral icon="draft"}
### Página en borrador

Usa valores de ejemplo solo cuando estén visiblemente etiquetados como tales. Elimina o reemplaza cada ejemplo antes de la publicación.
::

::notice{tone=caution icon="publish"}
### Página publicada

Usa valores verificados con una fuente y fecha comprobada. Si la verificación está incompleta, retén la afirmación.
::
:::

Este elemento sobrescribe el nombre genérico de elemento anidado con notice porque los registros tienen un comportamiento de tono específico del aviso. El primer encabezado principal proporciona el título compartido; el primer encabezado de cada aviso proporciona su etiqueta.

Shortcode de Hugo

Ningún shortcode de producción actual implementa este contrato exacto de avisos emparejados. Hasta que exista un adaptador, usa HTML semántico como en el ejemplo renderizado. La notación prevista de Hugo se documenta como:

{{< notification-two-column variant="conditional" >}}
## Elige la instrucción según tu estado de publicación

{{< notification tone="neutral" icon="draft" >}}
### Página en borrador
Usa solo valores de ejemplo etiquetados y elimínalos antes de la publicación.
{{< /notification >}}

{{< notification tone="caution" icon="publish" >}}
### Página publicada
Usa valores verificados con una fuente y fecha comprobada.
{{< /notification >}}
{{< /notification-two-column >}}

La forma de comentario con barras evita que este ejemplo de especificación invoque un shortcode que no existe. Un adaptador futuro debe validar exactamente dos notificaciones hijas y renderizarlas en el orden de origen.

Bloque de WordPress

<!-- wp:amicited/notification-two-column {"variant":"conditional"} -->
<h2>Elige la instrucción según tu estado de publicación</h2>
<!-- wp:amicited/notification {"tone":"neutral","icon":"draft"} -->
<h3>Página en borrador</h3>
<p>Usa solo valores de ejemplo etiquetados y elimínalos antes de la publicación.</p>
<!-- /wp:amicited/notification -->
<!-- wp:amicited/notification {"tone":"caution","icon":"publish"} -->
<h3>Página publicada</h3>
<p>Usa valores verificados con una fuente y fecha comprobada.</p>
<!-- /wp:amicited/notification -->
<!-- /wp:amicited/notification-two-column -->

Un editor de WordPress debe presentar dos ranuras fijas de aviso, permitir reordenar y evitar la publicación cuando alguna etiqueta o cuerpo esté vacío. No debe permitir que los autores añadan un tercer aviso simplemente porque el bloque de cuadrícula admita más columnas.

Ejemplos

Correcto: dos condiciones reales con acciones completas

Antes de importar
Descarga los registros actuales y anota la hora de exportación. La copia te da un punto de recuperación si el mapeo de campos produce un resultado inesperado.

Después de importar
Compara el recuento de registros importados con el recuento de origen, luego inspecciona al menos un registro que contenga cada campo mapeado. Los recuentos detectan omisiones; el registro completo detecta valores desplazados.

Este par tiene un tema —verificación segura de importación— y un límite temporal real. Cada aviso nombra una acción y explica qué fallo detecta. El segundo es más largo porque contiene dos comprobaciones relacionadas, pero ambos lados tienen una responsabilidad comparable y siguen siendo comprensibles al apilarse.

Incorrecto: simetría falsa que degrada un riesgo

Consejo útil
Renombra la exportación para que sea más fácil de encontrar después.

Importante
Importar con «Reemplazar todo» elimina permanentemente los registros existentes y no se puede deshacer. Haz una copia de seguridad de la base de datos, confirma el destino, obtén aprobación y programa un tiempo de inactividad antes de continuar.

El primer aviso es un mantenimiento opcional; el segundo describe pérdida irreversible de datos y varios requisitos previos. Colocarlos en columnas iguales implica un peso equivalente y hace que el mensaje crítico parezca una de dos alternativas. Traslada el aviso de pérdida de datos a una advertencia independiente antes del control. Mantén la sugerencia del nombre de archivo como prosa de apoyo ordinaria.

Marcado schema y accesibilidad

Una notificación de dos columnas no tiene un tipo dedicado de Schema.org. Su contenido permanece dentro del Article, TechArticle o WebPage que la contiene. No emitas ItemList, HowToStep, Question o Answer simplemente porque existan dos registros delimitados. Si un aviso contiene contenido que califica de forma independiente para datos estructurados, las reglas de schema del tipo de publicación contenedora deciden el mapeo; este elemento no añade ninguno por sí mismo.

Usa un section etiquetado cuando el par pertenezca a la explicación principal, o un aside etiquetado cuando ambos avisos sean complementarios. Cada hijo puede ser un aside o section con un encabezado real en el nivel de documento correcto. No uses los roles ARIA alert o alertdialog: esos roles anuncian cambios dinámicos sensibles al tiempo y son inapropiados para orientación editorial estática.

El nombre accesible proviene del encabezado compartido visible a través de la estructura nativa de encabezados o de aria-labelledby. Cada etiqueta de aviso debe ser texto. El color, el estilo del borde, la posición y los iconos pueden reforzar el tono pero no pueden definirlo. Si un icono es decorativo, ocúltalo de la tecnología de asistencia; si comunica información no presente en la etiqueta, reescribe la etiqueta en lugar de depender del texto alternativo para reparar el diseño.

El orden del DOM controla el significado. Los lectores de pantalla y los diseños móviles deben encontrar primero el primer aviso y luego el segundo. No inviertas el orden visual con CSS. Al 200% de zoom de texto y en anchos reducidos, los avisos deben apilarse sin recortes ni desplazamiento horizontal de página. Los enlaces necesitan etiquetas descriptivas, y los enlaces múltiples no deben comprimirse en una fila de iconos sin etiquetar.

Reglas de escritura

Escribe la relación antes de escribir los avisos: «El lector necesita dos mensajes porque la orientación correcta cambia según ___». Si no se puede completar el espacio con una condición, estado, audiencia, tiempo o contraste de comportamiento concretos, usa prosa.

• Usa exactamente dos avisos bajo un título compartido.
• Mantén el título entre 3 y 12 palabras y cada etiqueta entre 2 y 6 palabras.
• Apunta a 25–80 palabras por cuerpo; 120 palabras es el máximo absoluto.
• Usa uno o dos párrafos cortos por aviso y no más de un enlace corto en línea.
• Pon el hecho o la condición primero, su consecuencia segundo, y la acción al final cuando todos estén presentes.
• Usa gramática paralela en las etiquetas: «Antes del lanzamiento / Después del lanzamiento», no «Antes del lanzamiento / Lo que los administradores deberían hacer después».
• Nombra las condiciones directamente. Nunca escribas «izquierda», «derecha», «la otra opción» o «el cuadro de arriba».
• Iguala el tono con la evidencia. Los hechos neutrales emparejados no deben heredar un tratamiento verde y rojo.
• Haz que las afirmaciones cambiantes lleven una fecha, versión, plan, jurisdicción o fuente según corresponda.

Peso comparable significa que ambos mensajes merecen el mismo momento en el flujo del lector. No requiere recuentos idénticos de oraciones o caracteres. No rellenes una verdad corta para igualar una más larga. Si un cuerpo supera al otro en más o menos dos a uno, evalúa si el aviso más grande necesita una sección aparte o si el aviso más pequeño es un contrapunto falso.

Nunca coloques un procedimiento de varios pasos, tabla, formulario, tarjeta de precios, testimonio, llamada a la acción promocional, cita larga, ejemplo de código, video o componente anidado dentro de un aviso. Nunca uses el par para suavizar orientación legal, médica, financiera, de privacidad, seguridad o de acciones destructivas. No impliques que dos condiciones son exhaustivas a menos que el propietario del contenido haya verificado que no existe un tercer estado.

Tipos de publicación que lo usan

El arreglo postTypes del frontmatter es la fuente de esta tabla. La inclusión significa que el elemento está disponible para un caso genuino de dos avisos, no que sea obligatorio en cada página de ese tipo.

Lista de verificación de QA

• Tema compartido: Un título preciso gobierna ambos avisos sin forzar el alcance.
• Exactamente dos avisos: La fuente contiene dos registros completos y ningún tercer estado implícito.
• Relación real: Las etiquetas nombran un contraste, condición, audiencia, estado o límite temporal significativo.
• Significado independiente: Cada aviso sigue siendo claro al extraerse con el título compartido.
• Sin simetría falsa: Ambos mensajes merecen un énfasis comparable; ninguno es relleno o una advertencia crítica degradada.
• Colocación correcta: El par sigue a su contexto y precede a la acción o detalle que califica.
• Vecinos seguros: No está adyacente a otro diseño dividido, tabla, control de pestañas o CTA de dos columnas.
• Etiquetas útiles: Las etiquetas usan gramática paralela y nunca dependen de la posición izquierda/derecha o del color.
• Control de extensión: Los cuerpos se mantienen en uno o dos párrafos y no más de 120 palabras cada uno.
• Restricción de contenido: No aparece ningún procedimiento anidado, tabla, formulario, medio, promoción o componente complejo en su interior.
• Orden responsive: El orden en móvil, teclado, lector de pantalla y texto copiado coincide con la secuencia del autor.
• Semántica accesible: Un encabezado visible etiqueta el elemento padre; las etiquetas hijo son encabezados; el contenido estático no usa roles de alerta.
• Integridad del tono: El estilo refleja el significado real y no convierte hechos neutrales en juicios bueno/malo.
• Paridad de notación: Markdown, Hugo y WordPress preservan el mismo título, etiquetas, cuerpos, atributos y orden.
• Restricción de schema: El elemento no crea datos estructurados no soportados.

Rechaza el elemento si fallan las comprobaciones de tema compartido, relación real o simetría falsa. Esos son defectos editoriales que un renderizador no puede corregir. Reescribe el contenido como prosa, secciones separadas, una advertencia independiente u otro elemento adaptado al propósito antes de ajustar la presentación.

Preguntas frecuentes

Las preguntas frecuentes estructuradas en el frontmatter cubren las decisiones de implementación que con mayor frecuencia se malinterpretan: los avisos no necesitan ser opuestos ni de la misma extensión, el orden en móvil sigue el orden de origen, los riesgos graves siguen siendo advertencias independientes y el elemento no crea marcado schema propio.