Uzun yıllardır hem internetle hem de web tasarımı – kodlaması ile uğraştığım ve birçok hazır sistemle haşir neşir olduğum halde forum sistemlerine oldum olası uzak kaldım. Fakat bu durum forumlarda aktif olarak bulunmamı da engellemedi. İşin hem tasarım hem de kodlama yönü ile alakadar olduğumuz için, takip ettiğim forumlarda yazı içlerine eklenen resimlerin metinden bağımsız olması dikkatimi çekti. Resimlere eklenecek ufak bir hizalama kodunun bu sorunu çözeceğini bildiğim halde neden pek kullanılmadığını da merak ettim açıkçası.

Yaptığım ufak bir araştırma sonucunda http://www.vbulletin.org/forum/showthread.php?t=175097 adresine ulaştım. Adreste metne eklenen resimlerin metinden bağımsız olarak durmaması yani metnin sağında veya solunda durması için yapılması gerekenler anlatılmış.

Tabi vBulletin’in de altyapısının güçlülüğü bu örnekle bir kere daha ortaya çıkıyor. Nitekim vBulletin Yönetim Paneli’nden yapacağınız ufak bir düzenleme ile metin editörünüze eklenecek bir – iki düğmeyi kullanarak metninize ekleyeceğiniz resimlerin sağa veya sola yaslı olmasını sağlayabiliyorsunuz.

Gelelim bu işlemlerin nasıl yapılacağına;

vBulletin Admin Kontrol Paneli’nden Özel BB Kodları (Custom BB Code) başlığının altındaki Yeni BB Kodu Ekle (Add New BB Code) menüsüne tıklıyoruz. Yeni BB Kodu Ekleme panelinde bulunan alanları aşağıdaki resimde (Resim 1) görüldüğü gibi dolduruyoruz.

Başlık (Title): BBCode ile resim hizalama

Etike (Tag): imgalign

Örnek (Example):

[imgalign=left]https://tercan.net/wp-content/uploads/mavi-gul.jpg[/imgalign]

Değiştirme (Replacement):

<img src="{param}" align="{option}" border="0" alt="" style="padding:6px;" />

{option} kullanımı (Use {option}): Evet (Yes)

Düğme Resmi (opsiyonel) [Button Image (Optional)]: images/editor/imagealign.gif

Resim 1. vBulletin’de metin içine resim eklemek

Gerekli alanları yukarıdaki gibi doldurduktan sonra Kayıt et düğmesi ile işlemimizi kaydediyoruz. Son olarak görsel metin editörüne eklenecek olan düğme resmini de images/editor/ dizininin altına yükledikten sonra yeni bir konu açmak veya herhangi bir konuya cevap yazmak istediğinizde görsel metin editörüne bir düğmenin daha eklenmiş olduğunu göreceksiniz. (Resim 2)

Kullanmak için düğmeye bastığınızda açılacak olan küçük pencereye resmin hizalanmasını istediğiniz tarafı (sola hizalamak için left, sağa hizalamak için right) yazmanız gerekiyor. Ardından görsel metin editörüne eklenecek olan [IMGALIGN=”left”][/IMGALIGN] etiketinin arasına resminizin adresini yazmanız / yapıştırmanız yeterli olacaktır.

Resim 2. vBulletin’de metin içine resim eklemek

Sonucu merak edenler için işte bir ekran görüntüsü:

Resim 3. vBulletin’de metin içine resim eklemek

Hayli zaman önce yazdığım şu yazıda ücretsiz elektronik posta hizmetlerinden Windows Live Mail ile Yahoo Mail’in betasını karşılaştırmıştım. Bu iki hizmetin de uygulama olarak birbirlerine benzemeleri yeni nesil eposta hizmetlerinin ne şekilde olacağı veya olması gerektiği hakkında bize ufak da olsa bilgiler verdi denebilir. Bu hizmetlerde öne çıkan en belirgin birkaç özellik; uygulamaların Outlook yapısında olmaları ve her seferinde sayfaların yeniden yüklenmesi yerine lüzum görülen yerlerin yüklenmesi mantığı ile geliştirilen AJAX uygulamaları içermesi.

Başına gelen hack olayını bile görmezden gelen, sunduğu hizmetlerin hep taklit olması ile eleştirilen Türkiye’nin en büyük portallarından Mynet de verdiği eposta hizmetini Windows Live Mail ve Yahoo Mail’in hayli zaman önce geçtikleri yukarıda bahsettiğim kalıba sokmaya karar vermiş. Kısa zaman önce görsel olarak değişikliğe giden Mynet Email, bu değişikliğin pek de yeterli ve doyurucu olmadığına (ki gerçekten de gereksizdi) karar vermiş olmalı ki bu tür bir yola başvurdu.

Görünüm olarak mavi tonları tercih eden Mynet’in beta aşamasındaki yeni eposta hizmeti Mynet Email Beta da özellik olarak Yahoo’nun yeni nesil posta hizmetine daha çok benziyor. Mynet Email Beta incelendiğinde, özelleştirilmiş sağ tuş işlevleri ve eskiye nazaran daha göze hitap eden görünümü ile rakipleriyle yarışta geri kalmama düşüncesinin ön plana çıktığı gözlemleniyor.

Son zamanlarda dağıtmaya başladığı ücretsiz blog (günlük) hizmetinde WordPress altyapısını kullandığını belirtmediği için (daha sonra düzenleme yaptı) eleştiri oklarının hedefi haline gelen, yıllar önce haber sitelerinin bile vermeye başladığı video hizmetine yine kısa bir zaman önce el atan Mynet’in öngörü anlamında pek de iyi bir yetiye sahip olmadığı açıkça görülüyor.

Umarım büyük para ve umutlarla kurulan bu dev Türk bilişim şirketi daha akılcı ve akıllı yönetim mantalitesiyle kopya çekmekten fikir üretecek, kendi standartlarını, kriterlerini oluşturacak düzeye gelir de biz de eleştirmek yerine milletimiz adına kendileriyle göğsümüzü gere gere övünürüz.

Web 2.0 kavramı sanal hayatımıza girdiğinden beri tasarımlara farklı gözlerle baktığımız bir gerçek. Her ne kadar ne ifade ettiği veya hangi akımı temsil ettiği tam olarak açıklanamasa da belli başlı parametrelerini görebiliyoruz. Bunların en başında da tasarımda kullanılan menüler ve userbarlar geliyor. Farklı renk tonu geçişleriyle oluşturulan, kenarları yuvarlatılmış buton ve menüler Web 2.0 kavramını en çok açıklayabilecek özelliklerin başında geliyor olsa gerek.

E durum böyle olunca da birçok webmaster arkadaşımız bu tür buton ve menü yapımı için resim işleme programlarında dakikalarını hatta saatlerini harcamak durumunda kalıyorlar. Renk tonlarını tutturmadan geçişler arası mesafeye varana kadar birçok noktanın ince bir işçilikle yapılması gerekir ki ortaya çıkan ürün veya sonuç herkesi tatmin etsin.

Hal böyle olunca yani işin zahmet boyutu artınca teknoloji ve teknolojiyi seven hayırseverler devreye giriyor ve net alemine bağışladıkları ürünler ile bir anda birçok şeyi kolaylaştırıyorlar. Buna en güzel örnek de şu adresteki web 2.0 menü ve buton oluşturma işini kolaylaştıracak bir Photoshop eklentisi olur sanırım.

Resimde de görebileceğiniz üzere birçok farklı şekilde buton ve menü oluşturabileceğiniz bu ufak eklentiyi web20layerstylesve01.zip‘e tıklayarak bilgisayarınıza kaydettikten sonra sıkıştırılmış dosyayı açıyorsunuz ve içinden çıkan web20layerstylesv1.asl dosyasını bilgisayarınızda Photoshop’un kurulu olduğu dizinde \Presets\Styles klasörüne atıyorsunuz. Ardından da Edit -> Preset Manager’a gelerek Preset Type bölümünden Styles’i seçiyorsunuz. Load’a tıkladığınızda açılan seçim penceresinden \Presets\Styles dizininin içine biraz önce attığınız web20layerstylesv1.asl dosyasını seçip Load diyorsunuz. Done diyerek işlemi tamamlamış oluyorsunuz.

Artık sizin de web 2.0 tarzı buton ve menüler yapmak için hazır bir kaynağınız oldu. Bundan sonrası size kalmış.