Michigan Forty Two Tasarım Sistemi.

Michigan Forty Two Tasarım Sistemi Kurumsal uygulama

Desteklenen bir WordPress ekosistemi

Forty-Two, Michigan Engineering'in tasarım sistemi ve desteklenen bir WordPress temasıdır. Resmî genel bakışta, editörde bloklara ve desenlere eşlenen öğeler, bileşenler ve bileşen grupları açıklanır. Tema, Communications & Marketing veya CAEN barındırma düzenlemeleri aracılığıyla Engineering departmanlarına ve birimlerine sunulur. Herhangi bir projenin yükleyebileceği genel bir npm paketi olarak tanıtılmamalıdır.

Yerel örnek, belgelenmiş kişi dizini konseptinin şeffaf bir yorumudur. Yayımlanmış web paletini ve kurgusal profilleri kullanırken düzeni ve filtreleme kodu özgündür. Yetkili bir kurumsal site, bu gösterimi özel bir HTML bloğuna kopyalayıp eşdeğer olduğunu varsaymak yerine desteklenen temayı ve güncel desenlerini kullanmalıdır.

Destekleyici belirtimi okuyun

Michigan Forty Two Tasarım Sistemi Web paleti ve kontrast

Web'e özgü referansı kullanın

Maize ve Blue, birincil kimliği oluşturur. Web paletine Base Puma Black, Base White ve Hyperlink Blue dâhil adlandırılmış mavi tonları eklenir. İkincil tonlar birincil ikiliyi destekler; her akademik konuya birbiriyle ilgisiz, göz alıcı bir arka plan vermek için gerekçe oluşturmaz. Örnek, kimlik renklerini üst bilgide tutar ve sonuçların çevresinde ölçülü nötr tonlar kullanır.

Web sistemi paleti ile genel marka sayfasındaki bazı ikincil değerler, A2 Amethyst dâhil, farklıdır. Referans tablosunda web sistemine özgü kaynak kullanılır. Tema varsayılanlarından her sapma yine de kontrast denetimi gerektirir. Bir rengin resmî bir adı olması, onu her arka planda küçük metinler için otomatik olarak uygun hâle getirmez.

Destekleyici belirtimi okuyun

Michigan Forty Two Tasarım Sistemi Tipografi ve editoryal üslup

Uydurma yazı tipi belirteçleri olmadan hiyerarşi

Engineering tipografi kılavuzu, Roboto ve Open Sans'ı başlıca web yazı tipi aileleri olarak tanımlar ve paragraflarda Open Sans kullanılmasını önerir. Playfair Display baskı odaklı kullanım için açıklanır; bu nedenle web başlıklarında zorunlu bir serif yazı tipinin kanıtı değildir. Bu önizlemede açıkça Arial yedek yazı tipi kullanılır; 17px gövde metni ve başlık boyutları, uydurma Forty-Two tipografi belirteçleri değil, gösterim amaçlı tercihlerdir.

Yazım yönergeleri; sayfa başlıklarında, bölüm başlıklarında, bağlantı etiketlerinde, tanıtım başlıklarında ve açıklamalarda cümle düzeninde büyük harf kullanımını önerir. Bu yaklaşım, kişi dizini için uygundur: açık bir ad, görev ve araştırma açıklaması; tanıtım sloganından daha fazla bilgi verir. Gerçek sitelerde kurumsal adlandırmayı doğru kullanın ve profillere doğrulanmamış nitelikler eklemeyin.

Destekleyici belirtimi okuyun

Michigan Forty Two Tasarım Sistemi Kişiler ve sınıflandırma yapısı

Kişiyi filtre etiketinden ayrı tutun

Resmî eğitim dizininde People kurulumuna, rol veya araştırma alanı eklemeye ve iki filtre düzenine (Query Sort ve Sidebar) ilişkin içerikler bulunur. Bu içerikler, kişilerin ve sınıflandırmalarının her liste sayfasında elle çoğaltılan bloklar değil, yönetilen içerikler olduğunu gösterir. Güncel eklenti öznitelikleri herkese açık kaynaklardan doğrulanamadığından bu kılavuz kısa kod adları veya sorgu anahtarları uydurmaz.

Bağımsız örnekte her kişinin bir rolü ve bir alanı vardır. Her iki filtre de birlikte uygulanır. Bu bilinçli olarak küçük tutulan model, kesişimi görünür kılar: Öğretim üyeleri ve Robotik seçildiğinde sonuç çıkmazken Araştırma personeli ve Robotik seçildiğinde bir sonuç çıkar. Üretim ortamındaki sınıflandırma sistemi daha kapsamlı olabilir; ancak arayüzü oluşturmadan önce AND/OR davranışı açıkça belirlenmelidir.

// 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.

Kod referansı

Destekleyici belirtimi okuyun

Michigan Forty Two Tasarım Sistemi Filtreleme ve kurtarma

Mevcut seçimi anlaşılır kılın

Bir filtre değiştirildiğinde görünür profiller ve sonuç sayısını duyuran bir canlı bölge güncellenir. Odak seçim alanından başka yere taşınmaz; böylece klavye kullananlar denetim öğesine tekrar tekrar dönmeden seçenekleri karşılaştırabilir. Sonuç bulunamadığında gösterilen mesaj, bu birleşimin boş olduğunu açıklar ve alanlardan birini değiştirmeyi ya da ikisini de temizlemeyi önerir.

Filtreleri temizlemek varsayılan değerleri ve tüm profilleri geri yükler, ardından odağı ilk filtreye taşır. Profiller sıralarını korur. Böylece, her filtre değişikliğinde kişilerin listeden çıkarılmasının yanı sıra beklenmedik biçimde yeniden sıralandığı dizinlerdeki incelikli bir sorunun önüne geçilir. Buradaki adlar ve açıklamalar kurgusaldır; gerçek üniversite görevlendirmeleri ima edilmemektedir.

1. Araştırma personelini seçin ve dizinin tek profile daraldığını doğrulayın.
2. Öğretim üyeleri ve Robotik filtrelerini birlikte uygulayın, ardından boş durumdaki kurtarma mesajını inceleyin.
3. Her iki filtreyi de temizleyin ve üç profilin tümünün ilk sıralarıyla geri geldiğini doğrulayın.

Destekleyici belirtimi okuyun

Michigan Forty Two Tasarım Sistemi Bloklar, kalıplar ve bakım

Bakımı sürdürülen bir kalıp seçin

Eğitim envanterinde uzmanlar, etkinlikler, sorgu döngüleri, son gönderiler ve kişiler için kalıplar bulunur. Birbirine bağlı olmayan metin kutularından görsel olarak benzer bir ızgara oluşturmak yerine içerik modeline uygun kalıbı kullanın. Kişiler için bir kalıp, kişi kaydı ile bu kaydı görüntüleyen dizin arasındaki ilişkiyi koruyabilir.

Eski Accordion Item bileşeni açıkça kullanımdan kaldırılmış olarak listelenmiştir. Geçmiş eğitim materyallerinde bulunması, yeni bir uygulama için önerildiği anlamına gelmez. Mevcut sayfalarda eski bir blok kullanılıyorsa, bloğu değiştirmeden önce güncel eğitim sitesine ve desteklenen bakım sürecine başvurun; sunumu değiştirirken anlamlı içeriği ve mevcut hedefleri koruyun.

• Kişi kayıtları: adlar, roller, alanlar ve profil içeriği desteklenen içerik yapısına aittir.
• Kalıplar: listeleme veya tanıtım bölümü için güncel ve belgelenmiş bir bileşim kullanın.
• Gezinme: keşif bağlantılarını sayfa yayımlamanın yan ürünü olarak değil, bakımı sürdürülen içerik olarak ele alın.

Destekleyici belirtimi okuyun

Michigan Forty Two Tasarım Sistemi Uygulamalı editör iş akışı

Yeni bir sayfayı siteye bağlayın

Resmî yeni sayfa kontrol listesinde, bir sayfayı yayımlamanın onu otomatik olarak keşfedilebilir hâle getirmediği açıklanır. Sayfaya üst sayfasını atayın, ardından gerekli üst bilgiye, alt gezinmeye, rol/araştırma filtrelerine veya alt bilgiye bağlayın. Belgelenen editör akışında Görünüm, Düzenleyici ve Gezinme'yi açın; uygun menüyü seçin, sayfayı ekleyin ve liste görünümünde konumunu ayarlayın.

Yetkili bir Forty-Two projesinde bu editör iş akışı, somut entegrasyon yoludur. Bu kaynakta uydurma bir herkese açık SDK komutu yoktur. Kurulum bloğu desteklenen barındırma yolunu belirtir ve eğitim materyallerine bağlantı verir; eksiksiz yerel kod örneği ise bağımsız çalışma için ayrı olarak etiketlenmiştir.

Destekleyici belirtimi okuyun

Michigan Forty Two Tasarım Sistemi Erişilebilirlik ve kimlik sınırları

Varsayılan stiller içeriğin doğruluğunu garanti etmez

Mühendislik erişilebilirliği yönergelerine göre, varsayılan Forty-Two bileşenleri erişilebilir renk karşıtlığı sağlayacak şekilde tasarlanmıştır; ancak renkleri değiştirmek bu avantajı geçersiz kılabilir. Profil içeriğinde ayrıca anlamlı başlıklar, açıklayıcı bağlantı etiketleri, doğru görsel alternatifleri ve anlaşılır bir boş durum bulunmalıdır. Önizleme, duyarlı düzeni ve filtre davranışını kontrol eder; kurumsal uygunluk sertifikası sunmaz.

Orijinal önizlemede Block M, üniversite imzası veya gerçek personel verisi kullanılmamıştır. Kurumsal logolar kimlik doğrulamalı marka kanalları üzerinden dağıtılır ve bu eğitim renklerinden ayrı bir kimlik sistemine aittir. Gerçek bir Mühendislik sitesi, desteklenen marka ve yayınlama sürecini izlemelidir; bağımsız bir prototip ise niteliğini dürüstçe belirtmelidir.

Destekleyici belirtimi okuyun

Michigan Forty Two Tasarım Sistemi Bileşen örnekleri

// 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>