Sistema de diseño Michigan Forty Two.

Michigan Forty Two Implementación institucional del sistema de diseño

Un ecosistema compatible con WordPress

Forty-Two es el sistema de diseño de Michigan Engineering y un tema de WordPress compatible. La descripción general oficial presenta elementos, componentes y grupos de componentes, vinculados a bloques y patrones del editor. El tema se ofrece a los departamentos y unidades de Engineering mediante Communications & Marketing o los servicios de alojamiento de CAEN. No debe presentarse como un paquete genérico de npm que cualquier proyecto pueda instalar.

Este ejemplo local es una interpretación transparente del concepto documentado de directorio de personas. Utiliza la paleta web publicada y perfiles ficticios, mientras que su diseño y código de filtrado son originales. Un sitio institucional autorizado debería usar el tema compatible y sus patrones actuales, en vez de copiar esta demostración en un bloque personalizado HTML y dar por hecho que es equivalente.

Consulta la especificación complementaria

Michigan Forty Two Paleta web y contraste del sistema de diseño

Usa la referencia específica para la web

Maize y Blue conforman la identidad principal. La paleta web incorpora Base Puma Black, Base White y tonos de azul con nombre, como Hyperlink Blue. Los tonos secundarios complementan la pareja principal; no justifican asignar un fondo llamativo y distinto a cada tema académico. El ejemplo reserva los colores de identidad para el encabezado y utiliza tonos neutros y discretos alrededor de los resultados.

La paleta del sistema web y la página general de marca difieren en algunos valores secundarios, incluido A2 Amethyst. La tabla de referencia utiliza la fuente específica del sistema web. Cualquier desviación de los valores predeterminados del tema requiere comprobar el contraste. Que un color tenga un nombre oficial no significa que sea siempre adecuado para texto pequeño sobre cualquier fondo.

Consulta la especificación complementaria

Michigan Forty Two Tipografía y voz editorial del sistema de diseño

Jerarquía sin inventar tokens tipográficos

La guía de tipografía de Engineering identifica Roboto y Open Sans como sus principales familias tipográficas para la web, y especifica Open Sans para los párrafos. Playfair Display se describe para usos orientados a la impresión, por lo que no es prueba de que los encabezados web deban usar serifas. Esta vista previa utiliza explícitamente Arial como alternativa; el cuerpo de 17px y los tamaños de los encabezados son decisiones de demostración, no tokens tipográficos inventados de Forty-Two.

Las pautas de redacción recomiendan usar mayúscula inicial solo en la primera palabra de los títulos de página, encabezados de sección, etiquetas de anclaje, títulos promocionales y pies de foto. Esto encaja con un directorio de personas: un nombre, un cargo y una descripción de investigación claros aportan más información que un eslogan promocional. En sitios reales, mantén la denominación institucional precisa y no añadas credenciales no verificadas a los perfiles.

Consulta la especificación complementaria

Michigan Forty Two Estructura de personas y taxonomía del sistema de diseño

Separa a la persona de la etiqueta del filtro

El índice oficial de formación incluye la configuración de People, la adición de un cargo o área de investigación y dos diseños de filtro: Query Sort y Sidebar. Estas secciones establecen que las personas y sus clasificaciones son contenido gestionado, no bloques duplicados manualmente en cada página del directorio. No se pudieron recuperar públicamente los atributos actuales exactos del plugin, así que esta guía no inventa nombres de códigos cortos ni claves de consulta.

En el ejemplo independiente, cada persona tiene un cargo y un área. Ambos filtros se aplican conjuntamente. Este modelo deliberadamente pequeño hace visible la intersección: Faculty más Robotics no devuelve resultados, mientras que Research staff más Robotics devuelve uno. Una taxonomía de producción puede ser más compleja, pero su comportamiento AND/OR debe definirse antes de construir la interfaz.

// Original local filter composition; not a Forty-Two plugin API.
const matches = (person, role, area) =>
  (role === 'all' || person.role === role) &&
  (area === 'all' || person.area === area);
// Apply both conditions; clearing one filter must preserve the other.
// Announce the result count and offer recovery when the intersection is empty.

Referencia de código

Consulta la especificación complementaria

Michigan Forty Two Filtrado y recuperación del sistema de diseño

Mantén clara la selección actual

Al cambiar un filtro, se actualizan los perfiles visibles y una región activa anuncia el recuento de resultados. El foco permanece en el menú desplegable, de modo que quienes usan el teclado pueden comparar opciones sin tener que volver al control una y otra vez. El mensaje de que no hay resultados explica que la combinación no devuelve ninguno e indica que se puede cambiar cualquiera de los campos o borrar ambos filtros.

Al borrar los filtros, se restablecen los valores predeterminados y vuelven a mostrarse todos los perfiles; después, el foco regresa al primer filtro. Los perfiles mantienen un orden estable. Así se evita un problema sutil de los directorios: que al cambiar un filtro no solo se eliminen personas, sino que también se reordenen inesperadamente. Los nombres y las descripciones de este ejemplo son ficticios y no implican cargos reales en ninguna universidad.

1. Selecciona Research staff y confirma que el directorio se reduce a un perfil.
2. Combina Faculty con Robotics y revisa el mensaje de recuperación del estado sin resultados.
3. Borra ambos filtros y confirma que vuelven a aparecer los tres perfiles en el orden original.

Consulta la especificación complementaria

Michigan Forty Two Bloques, patrones y mantenimiento del sistema de diseño

Elige un patrón mantenido

El inventario de formación incluye patrones para expertos, eventos, bucles de consulta, publicaciones recientes y personas. Usa el patrón que corresponda al modelo de contenido, en lugar de ensamblar una cuadrícula de apariencia similar con cuadros de texto sin conexión entre sí. Un patrón de personas puede conservar la relación entre el registro de una persona y el directorio que lo muestra.

Accordion Item figura explícitamente como obsoleto. Que aparezca en materiales de formación antiguos no significa que se recomiende para nuevas implementaciones. Si las páginas existentes usan un bloque antiguo, consulta el sitio de formación actualizado y el proceso de mantenimiento compatible antes de reemplazarlo; conserva el contenido significativo y los destinos existentes al cambiar la presentación.

• Registros de personas: los nombres, cargos, áreas y contenido de perfil pertenecen a la estructura de contenido compatible.
• Patrones: utiliza una composición documentada y actual para el listado o la sección promocional.
• Navegación: considera los enlaces de descubrimiento contenido que debe mantenerse, no un efecto secundario de publicar una página.

Consulta la especificación complementaria

Michigan Forty Two Flujo de trabajo práctico en el editor del sistema de diseño

Vincula una página nueva al sitio

La lista oficial para crear páginas explica que publicar una página no hace que se pueda encontrar automáticamente. Asígnale una página superior y, después, conéctala con el encabezado, la navegación secundaria, los filtros de rol/investigación o el pie de página correspondientes. En el flujo documentado del editor, abre Apariencia, Editor y Navegación, selecciona el menú adecuado, añade la página y ajusta su posición en la vista de lista.

En un proyecto autorizado de Forty-Two, este flujo del editor es la vía concreta de integración. Este recurso no inventa ningún comando de SDK público. El bloque de configuración indica la modalidad de alojamiento admitida y enlaza al material de formación; el ejemplo de código local completo está etiquetado por separado para su estudio independiente.

Consulta la especificación complementaria

Sistema de diseño Michigan Forty Two: accesibilidad y límites de identidad

Los estilos predeterminados no validan el contenido

La guía de accesibilidad de Engineering indica que los componentes predeterminados de Forty-Two están diseñados para ofrecer un contraste accesible, pero cambiar los colores puede invalidar esa ventaja. El contenido de los perfiles también necesita encabezados significativos, etiquetas de enlace útiles, textos alternativos precisos para las imágenes y un estado vacío comprensible. La vista previa comprueba el diseño adaptable y el comportamiento de los filtros, pero no certifica el cumplimiento institucional.

La vista previa original no usa Block M, la firma de la universidad ni datos reales del personal. Los logotipos institucionales se distribuyen mediante canales de marca autenticados y pertenecen a un sistema de identidad distinto de estos colores didácticos. Un sitio real de Engineering debe seguir el proceso de marca y publicación admitido; un prototipo independiente debe identificarse con honestidad.

Consulta la especificación complementaria

Sistema de diseño Michigan Forty Two: ejemplos de componentes

// Original local filter composition; not a Forty-Two plugin API.
const matches = (person, role, area) =>
  (role === 'all' || person.role === role) &&
  (area === 'all' || person.area === area);
// Apply both conditions; clearing one filter must preserve the other.
// Announce the result count and offer recovery when the intersection is empty.

<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Research collaborators</title><style>*{box-sizing:border-box}body{margin:0;color:#131516;background:#fafafa;font:17px/1.6 Arial,sans-serif}header{background:#00274c;color:#fafafa;border-top:8px solid #ffcb05;padding:32px}h1{font-size:36px;line-height:1.15;margin:8px 0 16px}h2{font-size:23px;line-height:1.25;margin:0 0 8px}main,header>div{max-width:1040px;margin:auto}.layout{display:grid;grid-template-columns:220px 1fr;gap:32px;padding:32px}label{display:block;font-weight:bold;margin:0 0 8px}select,button{font:inherit;padding:10px;width:100%;border:1px solid #00274c;margin-bottom:24px;background:white;color:#00274c}button{cursor:pointer;font-weight:bold}button:focus-visible,select:focus-visible{outline:3px solid #00274c;outline-offset:3px}article{padding:24px 0;border-top:1px solid #e9e9e9}article p{margin:8px 0}.role{color:#1e406b;font-weight:bold}.topic{display:inline-block;background:#e9e9e9;padding:4px 10px;font-size:14px}#empty{border-left:6px solid #ffcb05;padding:16px;background:white}footer{font-size:14px;padding:24px 32px;border-top:1px solid #e9e9e9}[hidden]{display:none!important}@media(max-width:700px){.layout{grid-template-columns:1fr;padding:24px;gap:8px}header{padding:24px}h1{font-size:30px}.filters{display:grid;grid-template-columns:1fr 1fr;gap:12px}.filters button{grid-column:1/-1;margin-bottom:8px}select{margin-bottom:8px}}</style><header><div><small>INDEPENDENT RESEARCH DIRECTORY</small><h1>Find a collaborator</h1><p>Explore fictional profiles by role and research area.</p></div></header><main><div class="layout"><aside class="filters" aria-label="Filter people"><div><label for="role">Role</label><select id="role"><option value="all">All roles</option><option value="faculty">Faculty</option><option value="staff">Research staff</option></select></div><div><label for="area">Research area</label><select id="area"><option value="all">All areas</option><option value="energy">Energy</option><option value="robotics">Robotics</option><option value="materials">Materials</option></select></div><button id="reset">Clear filters</button></aside><section aria-label="Matching people"><p id="count" role="status">3 people</p><article data-role="faculty" data-area="energy"><h2>Avery Chen</h2><p class="role">Faculty</p><p>Studies ways to make community energy systems easier to understand and maintain.</p><span class="topic">Energy</span></article><article data-role="staff" data-area="robotics"><h2>Jordan Ellis</h2><p class="role">Research staff</p><p>Supports experiments in human-centred robotics and field testing.</p><span class="topic">Robotics</span></article><article data-role="faculty" data-area="materials"><h2>Samira Patel</h2><p class="role">Faculty</p><p>Explores how durable materials can support repair and reuse.</p><span class="topic">Materials</span></article><div id="empty" hidden><h2>No matching people</h2><p>Try another role or research area, or clear both filters.</p></div></section></div><footer>OpenDesign interpretation of Forty-Two’s documented people-directory concept and web palette. Fictional profiles; Arial fallback, original layout and filtering. Not the university’s WordPress theme or an official directory.</footer></main><script>const role=document.querySelector('#role'),area=document.querySelector('#area');function filter(){let n=0;document.querySelectorAll('article').forEach(a=>{a.hidden=!((role.value==='all'||role.value===a.dataset.role)&&(area.value==='all'||area.value===a.dataset.area));if(!a.hidden)n++});document.querySelector('#count').textContent=n+' '+(n===1?'person':'people');document.querySelector('#empty').hidden=n!==0}role.onchange=area.onchange=filter;document.querySelector('#reset').onclick=()=>{role.value=area.value='all';filter();role.focus()};</script></html>