|
|
HF-Premium v1-rgxadmn: Tema Tamamlandı!
Merhaba,
HobiForum açılalı 2 ay oldu, temayı tamamlamam ise neredeyse 1 ay sürdü. Ufak tefek dokunuşlar ve son rötuşlar dışında benim bu temaya yapacaklarım geçtiğimiz ay bitti. Aslında bu konuyu geçen ay açacaktım ancak bir türlü bunları yazacak fırsatı ve motivasyonu bulamamıştım. Normalde bana kalsa hiç konu da açmayacaktım ancak @ eQuaL, tamamen kendi emeğim olan bir tema olduğu için konu açıp duyurmamı bilhassa istediğinden oluşturuyorum bu konuyu.
Öncelikle; görüldüğü üzere bu standart bir vBulletin 3.8 teması değil. Nedir? Normalde vBulletin 3.8 forumlarda CSS üzerinden renkler ayarlanır, buna göre de tutarlı bir header, navbar, footer ve postbit hazırlanır. Bu temada bundan çok daha fazlası var.
Ben normalde bir UI/UX tasarımcı değilim. Dijitalde uzmanlığım başta Siber Güvenlik, SEO ve PHP yazılım geliştirme üzerine. Elbette HTML, CSS ve JavaScript biliyorum. Ancak bir Front-End Developer'dan ziyade Back-End Developer'ım. 21 yıldır vBulletin üzerine çalışan ve sistemin A'dan Z'ye her şeyine ezbere hakim olmuş seviyede bir geliştirici olarak belki de ilk defa bir temayı bu kadar kapsamlı uğraşarak yaptım. E arkadaş hatrı için çiğ tavuk bile yenir demişler. @ eQuaL dostum için bir söz verdik madem; değer. Yapmışken en iyisi olsun dedim.
Dediğim gibi bizim kurduğumuz ve geliştirdiğimiz vBulletin 3.8 forumlarda genelde temayı Cry (Serkan) kardeşimle birlikte yaparız ya da zaten forumun var olan temalarını geliştiririm. Şu anda global platform diyebileceğim ve teknik yöneticiliğini yaptığım iki genel forumun temalarını ben yapmadım mesela. Birine gece modu ekleyip hatalarını fixledim ve bazı geliştirmelerde bulundum, diğerinde de daha geçenlerde header/navbar/footer vb. düzenlemesi yaptım. Dolayısıyla temanın görsel olarak mükemmel olduğunu iddia etmiyorum. Ancak bilhassa vBulletin 3.8 altyapılı forumlar için gerçekten çok fazla emek verildi; çok fazla şey sıfırdan yazıldı; günümüz standartlarına uygun hale getirildi. Yani bu temada çok dokunuş var, bu şekle gelene dek ciddi bir zaman harcandı.
Temadan bu konu altında ekran görselleri paylaşmayacağım. Tema zaten gördüğünüz şekilde. Sadece biraz öne çıkan özelliklerinden bahsedeceğim;
- Yukarıda da belirttiğim gibi default temanın yalnızca renkleri değiştirilmedi.
Orijinal vBulletin 3.8.11 default style ile karşılaştırıldığında yüzü aşkın şablonda doğrudan değişiklik bulunuyor. Bu sayıyı çok şablon değiştirdim demek için yazmıyorum. Sadece yapılan işin birkaç renk kodu, logo ve arka plan değiştirmekten ibaret olmadığını anlatmak için belirtiyorum.
Header, navbar, footer, forum ana sayfası, bölüm görünümü, konu listeleri, konu içeriği, postbit, editör, özel mesajlar, kullanıcı profilleri, arama sayfaları, takvim, anketler, ek dosyalar, moderasyon alanları ve daha birçok bölüm ayrı ayrı elden geçirildi.
- vBulletin'in eski grafik sistemi büyük ölçüde yenilendi.
vBulletin 3.8'in kendi dönemine göre normal olan ancak bugün artık fazlasıyla eski görünen GIF ve PNG tabanlı ikonlarının büyük bölümü kaldırıldı. Bunların yerine Font Awesome 6 tabanlı, ekran çözünürlüğünden etkilenmeyen ve temayla renk uyumu sağlayan ikonlar kullanıldı.
Bu değişiklik, çoğu temadan alışkın olduğunuz şekilde yalnızca ana sayfadaki birkaç simgeden ya da postbitten ibaret değil. Editör butonlarından özel mesaj durumlarına, ek dosyalardan moderasyon araçlarına, rep grafiklerinden kullanıcı profillerine kadar sistemin neredeyse tamamı CSS + Font Awesome ikonları kullanılarak baştan kodlandı. Yeni mesaj, okunmuş mesaj, sıcak konu, kilitli konu, taşınmış konu, sabit konu, ek dosya, abonelik, duyuru, moderasyon bekleyen içerik vb. artık daha anlaşılır ayrımda.
- Karanlık mod eklendi.
Header üzerinden tek tuşla açık ve karanlık görünüm arasında geçiş yapılabiliyor. Seçiminiz tarayıcıda saklandığı için her sayfada yeniden karanlık moda geçmeniz gerekmiyor.
Karanlık mod yalnızca arka planı siyaha çevirmiyor. Bağlantılar, tablolar, formlar, kutular, açılır menüler, editör ve diğer bileşenler için ayrı renk uyumlulukları bulunuyor. (Karanlık modda birkaç problem olduğunu bildirmişti @eQuaL, onlara bir ara bakıp fixleyeceğim.)
- Mobil görünüm düzenlendi. (tam responsive olmasa da varsayılan vB 3.8'e göre iyi)
vBulletin 3.8, tamamen tablo tabanlı ve 2000'li yılların masaüstü çözünürlüklerine göre hazırlanmış bir sistem. Dolayısıyla altyapıyı baştan yazmadan kusursuz bir mobil tema oluşturmak mümkün olsa da kolay değil. Buna rağmen telefon ve tabletlerde sayfanın ekran dışına taşmaması, görsellerin alanı bozmaması, form kutularının ekrana sığması, postbit ve konu listelerinin gerektiğinde kontrollü biçimde kaydırılabilmesi için çok sayıda mobil düzenleme yapıldı. Header menüsü, footer bağlantıları, forum tabloları, konu listeleri, mesaj alanları, editör ve butonlar küçük ekranlara göre ayrıca düzenlendi. Özellikle mobilde temanın sağa sola dağılmaması için eski vBulletin tablolarına mümkün olan ölçüde müdahale edildi. Yine de tam responsive değil, kusursuz değil. Tüm tablo yapısını div'e çevirecek kadar uğraşamadım.
- Header, navbar ve footer yeniden hazırlandı.
Üst bölüm yalnızca bir logo ve altına eklenmiş bağlantılardan oluşmuyor. Logo alanı, ana navigasyon, kullanıcı araçları, karanlık mod butonu ve forumun diğer özel sistemleri birbiriyle uyumlu olacak şekilde yeniden tasarlandı ve düzenlendi. Navbar alanından klasik vBulletin görselleri kaldırıldı; geri dönme, ana sayfa, bildirimler, kullanıcı paneli, topluluk, üye listesi, sosyal gruplar, yeni mesajlar, arama, hızlı bağlantılar ve çıkış gibi seçenekler modern ikonlarla desteklendi. Footer ise tamamen yeniden hazırlandı. Forum bağlantıları, yasal bilgilendirmeler, tema ve sistem emeği bilgileri daha derli toplu bir alana taşındı. Sayfa aşağı kaydırıldığında görünen yukarı çıkma butonu da footer yapısıyla uyumlu biçimde eklendi.
- Forum ve konu durum simgeleri baştan ele alındı.
Forumların okunmuş veya okunmamış olması, konuların yeni, sıcak, kilitli ya da taşınmış olması artık eski grafik dosyaları yerine CSS ve Font Awesome üzerinden gösteriliyor. Konu listelerinde ayrıca ek dosya, sabit konu, abonelik, silinmiş içerik, moderasyon bekleyen içerik, çözüldü durumu, süreli konu ve duyuru gibi bilgiler küçük durum simgeleriyle gösteriliyor. Böylece konu başlığının yanına yığılan ve çoğu birbirine benzeyen eski görseller yerine; daha sade ama ne anlattığı belli olan bir sistem kazanılmış olundu. Bölümleri ve çeşitli forum kutularını açıp kapatan eski artı-eksi görselleri de kaldırılarak bütün tema genelinde ortak çalışan yeni bir açılır-kapanır alan sistemi hazırlandı.
- Postbit tamamen yeniden düzenlendi.
Bunu zaten çoğu temadan biliyorsunuz, çoğu temada öncelik tanınır ve postbit_legacy şablonu ilk tasarlanan alanlardandır. Bu temaya özgü bir postbit tasarlamış olsam da bu yüzden bunu çok anlatmayacağım. Anlatmaya gerek yok, görüyorsunuz.
- Mesaj editörü modernleştirildi.
Postbit'e alıştınız dedim ama her ne kadar postbit'teki ve konu görünümündeki butonlar CSS olsa da editör butonlarını daha önce CSS'e çeviren görmedim. vBulletin'in eski editör araç çubuğundaki küçük GIF butonlar kaldırıldı. Kalın, italik, altı çizili, hizalama, liste, bağlantı, resim, alıntı, kod, PHP, HTML, geri alma, yineleme vb. yeni tip ikonlarla değiştirildi.
Butonların üzerine gelme ve klavyeyle odaklanma durumları düzenlendi. Araç grupları arasına yeni ayraçlar eklendi ve editörün genel görünümü temaya uygun hale getirildi.
- Butonlar, formlar ve içerik kutuları ortak bir sisteme bağlandı.
Standart vBulletin temasında aynı işi yapan butonların farklı bölümlerde farklı göründüğü çok sayıda alan bulunuyor. Tema genelindeki gönder, kaydet, düzenle, cevapla, yeni konu aç vb. butonlar mümkün olduğunca ortak bir tasarım altında toplandı. Metin kutuları, seçim alanları ve açılır listeler de aynı kenarlık, arka plan ve odak yapısını kullanacak şekilde düzenlendi. Tablolara ve içerik kutularına hafif gölgeler, yuvarlatılmış köşeler, satır geçişleri ve tutarlı boşluklar eklendi. Burada amacım her yeri efektle doldurmak değil, aynı forum içinde birbirinden kopuk görünen alanları tek bir tasarım dilinde birleştirmek.
- Anket, konu puanı, itibar ve ek dosya göstergeleri yenilendi.
Anketlerde kullanılan eski parça parça grafik çubuklar kaldırıldı. Oy oranları artık farklı renklerde ve CSS üzerinden oluşturulan sonuç çubuklarıyla gösteriliyor. Konu puanlama alanındaki eski yıldız görselleri de CSS tabanlı yıldız sistemine dönüştürüldü. Üye itibar göstergeleri pozitif, negatif ve dengeli durumlara göre yeniden renklendirildi. Ek dosyalarda ise dosyanın türünü ve yükleme durumunu daha anlaşılır gösteren yeni simgeler kullanıldı.
Özel mesajların yeni, okunmuş, yanıtlanmış ve iletilmiş durumları da aynı şekilde yenilendi.
- Erişilebilirlik tarafında düzenlemeler yapıldı.
Dekoratif ikonlara ekran okuyucular için gerekli işaretlemeler eklendi. Yalnızca görsel bir simgeyle anlatılan bağlantıların bir bölümüne görünmeyen açıklama metinleri yerleştirildi. Bu da görme engelli kullanıcılar ve ziyaretçiler için forumun daha erişilebilir olması anlamına geliyor. Aynı şekilde; header, navigasyon ve footer gibi ana sayfa bölümlerinde semantik HTML etiketleri kullanıldı. Klavyeyle gezinirken hangi bağlantı veya form alanında bulunulduğunun anlaşılması için odak çizgileri eklendi. Elbette XHTML döneminden kalan vBulletin 3.8'i bir kalemde tamamen güncel erişilebilirlik standartlarına taşımak mümkün değil. Ancak default temaya kıyasla bu konuda da ciddi bir adım atıldı.
- vBulletin'in mevcut işleyişi mümkün olduğunca korundu.
Temayı hazırlarken yalnızca güzel görünmesine değil, vBulletin'in kendi koşul bloklarının, kullanıcı izinlerinin, eklenti kancalarının ve JavaScript işlevlerinin bozulmamasına da dikkat ettim. Yani bazı yerleri sıfırdan yazılmış olsa da sistemin çekirdeğiyle kavga eden, her eklentide ayrı sorun çıkaran bir yapı kurulmadı. Forumda kullandığımız özel eklentiler de tema içinde mümkün olduğunca doğal görünecek şekilde uyarlandı (örneğin bugünün en çok konu açanları ve mesaj yazanları eklentisindeki grafikler de yeni yapıyla tutarlı olacak şekilde düzenlendi). Yine kendi yazdığım Font Awesome tabanlı ruh hâli sistemi, bildirimler, resim yükleme, konu durumları, kullanıcıya özel alanlar ve diğer forum sistemleri temaya ayrıca entegre edildi ve temayla uyumluluğu sağlandı.
Kısacası HF-Premium; vBulletin 3.8'in temel işleyişini bozmadan, ona mümkün olduğunca güncel bir arayüz dili kazandırmak amacıyla HobiForum'a özel olarak hazırlandı. Mükemmel mi? Elbette değil. Zaten böyle bir iddiam da yok. Ancak vBulletin 3.8'in standart temasından, nereden nereye gelindiği ortada.
---
Tema bu haliyle tamamlandı. Bundan sonra göze takılan ufak tefek yerlerde rötuş yapabilir ya da kullanım sırasında fark edilen bir hata varsa düzelteceğim. Ancak ana yapı ve benim bu tema için planladığım çalışmalar bitti.
Yunus'a dediğim gibi, belki abartılı olacak ama biri bana gelip 100.000 TL teklif etse böyle bir temayı yapmakla uğraşmazdım. İşin mutfağında olanlar ne demek istediğimi anlamıştır. Günümüzde çoğu güncel forum scriptinde zaten bunların çoğu dahili olarak yapılmış geliyor. Yani bu aslında bir vBulletin 3.8 teması yapmaktan ziyade kısmi bir arayüzü baştan yazmak gibi bir süreçti. (Evet, süreç.) - Bkz: Süreç
---
HobiForum kullanıcılarının temayı severek kullanmasını, keyifli bir forum deneyimi yaşamalarını dilerim. ^^
__________________
- When injustice becomes law, resistance becomes duty.
|
sen fazlasıyla yaptın herşeyi.. Teşekkürler tekrar.
5Beğeniler
