# Michigan Forty Two Tasarım Sistemi ## Michigan Forty Two Tasarım Sistemi Arayüz Önizlemesi Rol ve araştırma filtrelerini birleştirin, boş sonuçlara ulaşın ve seçimi temizleyin. ## Michigan Forty Two Tasarım Sistemi Tasarım Referansı Michigan Engineering'in resmî web paleti, tipografi, eğitim ve yayınlama yönergeleri. Önizlemenin geometrisi ve çalışma zamanı açıkça özgündür. ### Resmî web paleti | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | Maize / Blue | #FFCB05 / #00274C | Birincil kimlik ikilisi; destekleyici renkler bunun yerini almaz. | | Base text / surface | #131516 / #FAFAFA | Puma Black ve Base White. | | February Grey | #E9E9E9 | Açık nötr ayırıcı veya destekleyici yüzey. | | Community Blue | #1E406B | Destekleyici mavi tonu. | | Research Blue | #2A5993 | Destekleyici mavi tonu. | | Hyperlink Blue | #1779BA | Adlandırılmış web bağlantısı tonu; bağlamı ve kontrastı yine de denetleyin. | | Web A2 Amethyst | #663289 | Web sistemi paletini kullanın; eski genel marka sayfasında farklı bir mor listeleniyor. | ### Tipografi ve dil | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | Interface/headline family | Roboto | Resmî web yazı tipi ailesi; kalınlık vurguyu belirtir. | | Paragraph family | Open Sans | Resmî yönergeler, bu yazı tipini özellikle web paragraflarında kullanır. | | Playfair Display | Print-oriented serif option | Her web başlığında kullanılması gerektiği sonucunu çıkarmayın. | | Page and section names | Sentence case | Bağlantı metinleri, tanıtım başlıkları ve açıklamalar için de geçerlidir. | | CTA punctuation | No punctuation | Belgelenmiş yazım kuralı; anlamlı ifadeleri koruyun. | ### Desteklenen platform ve desenler | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | Runtime | Institution-supported WordPress Forty-Two theme | C&M veya CAEN düzenlemesiyle sunulur; herkese açık bir npm SDK'sı olduğu doğrulanmamıştır. | | Composition | Blocks and patterns | Öğeler/bileşenler blok olarak görünür; daha büyük gruplar desen olabilir. | | People directory | Role and Research filters; Query Sort or Sidebar layouts | Resmî belgelerin envanteri; tam eklenti API burada herkese açık kaynaklardan doğrulanmamıştır. | | Deprecated component | Accordion Item | Kullanımdan kaldırıldığı listelenmiştir; yeni bir sayfa için önermeyin. | | Navigation maintenance | Appearance > Editor > Navigation | Sayfayı oluşturduktan sonra hedefi amaçlanan menüye ekleyin veya menüdeki sırasını değiştirin. | ### Açık önizleme tercihleri | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | Preview runtime | Original HTML/CSS/JS | Belgelenmiş konsepti gösterir; kısıtlı kurumsal temayı yüklemez. | | Preview typography | Arial; 17px body / 1.6 line-height | Resmî belirteç değil, bilinçli bir yedek tercih ve özgün boyut. | | Preview geometry | 1040px max; 220px filter sidebar; 32px gap | Özgün kompozisyon; yayımlanmış Forty-Two ızgara değerleri değildir. | | Preview compact breakpoint | 700px | Filtreleri sonuçların üstüne yerleştirir; bu bir uygulama tercihidir. | | Filter semantics | Role AND research area | Sonuç bulunamadığında kurtarma seçeneği sunan özgün, yerel kesişim. | ## Michigan Forty Two Tasarım Sistemi Eksiksiz Kılavuz Bu sistemi gerçek bir arayüz için seçmeye, uygulamaya ve gözden geçirmeye yönelik pratik bir kılavuz. Eksiksiz yönlendirme, uygulama için başlangıç noktası ve kaynak bağlantıları. ## 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 ### Rol ve alan kesişimi Belgelenen dizin kavramını somutlaştıran özgün yerel filtreleme kuralı. ``` // 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ı ### Eksiksiz kişi dizini yorumu İki filtre, sonuç duyurusu, sonuç bulunamadığında kurtarma ve sıfırlama içerir. ``` Research collaborators
INDEPENDENT RESEARCH DIRECTORY

Find a collaborator

Explore fictional profiles by role and research area.

3 people

Avery Chen

Faculty

Studies ways to make community energy systems easier to understand and maintain.

Energy

Jordan Ellis

Research staff

Supports experiments in human-centred robotics and field testing.

Robotics

Samira Patel

Faculty

Explores how durable materials can support repair and reuse.

Materials
``` Kod referansı ## Michigan Forty Two Tasarım Sistemi Agent kurulumu ### Uygulamaya Başlangıç Noktası Herkese açık paket kurulumu değil, kurumsal temanın benimsenmesidir. Bağımsız HTML örneği eksiksizdir ve yerel ortamda çalışır. Kaynaklar bölümündeki eksiksiz çalışan örnek ZIP dosyası, tam önizleme bağımlılıklarını ve belgenin tamamını da içerir. Dosyayı çıkarın, ilgili dizinde python3 -m http.server 8080 komutunu çalıştırın, ardından http://localhost:8080/michigan-forty-two.html adresini açın. Modül tabanlı örnekleri file:// üzerinden açmayın. ``` Supported institutional adoption: 1. Confirm the site is a Michigan Engineering department or unit project. 2. Arrange a Forty-Two WordPress site through Communications & Marketing or CAEN web publishing. 3. Use the Training site to select an existing block/pattern and create page stubs. 4. Build People content with the supported role/research-area structure and the current People pattern. 5. Connect the page to the intended navigation and filters in Appearance > Editor. 6. Preview real content, contrast and narrow layouts before publishing through the institution's process. Independent study: Open the complete HTML example below locally. It does not install or reproduce the institution's theme. ``` ### Projeniz İçin Bir İstem ``` Yetkili bir Michigan Engineering sitesi için desteklenen Forty-Two WordPress temasını ve güncel Kişiler kalıplarını kullanın. Rolleri ve araştırma alanlarını bakımı sürdürülen sınıflandırmalar olarak tutun; web'e özgü renk paletini ve belgelenmiş tipografiyi kullanın, yeni sayfaları gezinmeye bağlayın. Bağımsız bir prototipte özgün geometriyi ve çalışma zamanını belirtin, kurgusal kişiler kullanın ve kurumsal logolardan kaçının. Birleşik filtreleme ile boş durum kurtarmasını açıkça uygulayın. ``` ## Michigan Forty Two Tasarım Sistemi Kaynaklar ve kapsam Bağımsız OpenDesign yorumu. Desteklenen Forty-Two WordPress teması ve eklentilerin tam dahili bileşenleri pakete dahil değildir; tüm profiller kurgusaldır. - Sistem ve barındırma kapsamı WordPress blokları, kalıpları ve yetkili barındırma yolu. - Web renkleri Web'e özgü renk paleti ve karşıtlık gereklilikleri. - Tipografi Roboto, Open Sans ve editoryal hiyerarşi. - Eğitim envanteri Kişi filtreleri, kalıplar ve kullanımdan kaldırılmış bloklar. - Yeni sayfa iş akışı Somut gezinme ve editör adımları. - Karşıtlık yönergeleri Varsayılan tema ve özel renklerin sınırları. - Yazım kuralları Cümle düzeninde büyük harf kullanımı ve CTA kuralları. - Çalışan örneğin tamamını indirin Tam HTML, yerel CSS/JavaScript bağımlılıklarını, sağlanan lisansları ve başlatma talimatlarının tam hâlini içeren ZIP. Derleme adımı gerekmez. ## Michigan Forty Two Tasarım Sistemi İlgili kaynaklar ### Aksel Aksel v8’in gerçek ax belirteçlerini, yerel tablo yoğunluğunu ve anlamsal üstbilgi yapısını kullanın. Açık ve koyu temaları karşılaştırırken kurgusal takip kayıtlarını sıralayıp seçin. ### NHS tasarım sistemi Açık bir randevu tercihi akışı oluşturmak için NHS.UK tipografisini, duyarlı aralıkları, gruplandırılmış radyo seçeneklerini ve bağlama uygun ayrıntıları kullanın. ### NL tasarım sistemi Gerçek katkıcı bileşenleri ve açıkça belirtilmiş bir temayı kullanarak bir kamu hizmeti arayüzü oluşturun. Bu örnek, belirteç eşlemesini, veri listesi yapısını ve aynı düzenleme iş akışını kullanan iki özgün temayı göstermek için Utrecht CSS kullanıyor. - [Uygulama başvurusu](https://sites.google.com/a/umich.edu/engcom-wiki/web/42-design-system) - [Kaynak](https://cm.engin.umich.edu/our-brand/design-system-42/design-system-colors/) - [Kaynak](https://cm.engin.umich.edu/our-brand/typography/) - [Kaynak](https://sites.google.com/a/umich.edu/engcom-wiki/web/42-design-system) - [Kaynak](https://training.engin.umich.edu/) - [Destekleyici belirtimi okuyun](https://cm.engin.umich.edu/our-brand/design-system-42/) - [Destekleyici belirtimi okuyun](https://cm.engin.umich.edu/our-brand/design-system-42/design-system-colors/) - [Destekleyici belirtimi okuyun](https://cm.engin.umich.edu/our-brand/typography/) - [Kod referansı](https://sites.google.com/a/umich.edu/engcom-wiki/web/42-design-system) - [Destekleyici belirtimi okuyun](https://sites.google.com/a/umich.edu/engcom-wiki/web/42-design-system) - [Destekleyici belirtimi okuyun](https://training.engin.umich.edu/page-basics/new-page-checklist/) - [Destekleyici belirtimi okuyun](https://accessibility.engin.umich.edu/color-contrast/) - [Sistem ve barındırma kapsamı WordPress blokları, kalıpları ve yetkili barındırma yolu.](https://cm.engin.umich.edu/our-brand/design-system-42/) - [Web renkleri Web'e özgü renk paleti ve karşıtlık gereklilikleri.](https://cm.engin.umich.edu/our-brand/design-system-42/design-system-colors/) - [Tipografi Roboto, Open Sans ve editoryal hiyerarşi.](https://cm.engin.umich.edu/our-brand/typography/) - [Eğitim envanteri Kişi filtreleri, kalıplar ve kullanımdan kaldırılmış bloklar.](https://sites.google.com/a/umich.edu/engcom-wiki/web/42-design-system) - [Yeni sayfa iş akışı Somut gezinme ve editör adımları.](https://training.engin.umich.edu/page-basics/new-page-checklist/) - [Karşıtlık yönergeleri Varsayılan tema ve özel renklerin sınırları.](https://accessibility.engin.umich.edu/color-contrast/) - [Yazım kuralları Cümle düzeninde büyük harf kullanımı ve CTA kuralları.](https://sites.google.com/a/umich.edu/engcom-wiki/web/writing-best-practices/text-content)