Sitemin sürekli takipçileri bilirler ki bu günce üzerinde sadece tasarım ve web konulu yazılara ağırlık veriyorum. Böyle bir konudan burada bahsetmek ne kadar doğrudur bilemem ama ilk ve son olacağı kesindir.

Konunun özü şudur ki; son günlerde birçok e-posta almaya başladım. Bu e-postalar sitelerin karşılıklı link değişimleriyle ilgili. İlgili kişiler sitem ile link değişiminde bulunmak istediklerini belirtiyorlar. Hepsine ayrı ayrı teşekkür ediyorum. Bu durum t-infection.com’un kendini aşmadan belli bir noktada olduğunu gösterir. Tüm gelen e-postalara cevaben bu gönderiyi yazmayı uygun buldum. Lütfen ilgili arkadaşlarım bu yazıyı okusunlar.

İnternet’te gözüme çarpan, yararlı işler yaptığını düşündüğüm, sevdiğim sitelere bağlantı veriyorum. Bununla birlikte Türk İnternet’ine yararlı olacak siteleri de yeri geldiğinde tanıtıyorum. Karşılıklı bağlantı değişimi hususunda şu anda inanın hiçbirinize yardımcı olamayacağım. Çünkü Bağlantılar alanım ziyadesiyle uzun. Sitemin yeni versiyonunda bu alanı elimden geldiğince optimize ediyorum. (Bağlantı alanı rastgele 10 veya 20 siteyle sınırlı kalacak sanırım) Bağlantı isteklerinizi t-infection.com’un v4 versiyonuna kadar askıya alabilirseniz hepinize minnettar kalırım. Yeni versiyonda bana gelen e-postalardaki onca güzel siteyi tavsiye bir Dizin altında zaten yayınlayacağım. Genişçe bir kaynak olması için uğraşıyorum. Bu yüzden sizlerden tekrar tekrar özür diliyorum. Hali hazırda t-infection.com’un v4 geçişine çok az bir zaman kaldı. Bağlantı değişimi isteyen arkadaşlarıma teşekkür eder, ilgilerinden ötürü şükranlarımı sunarım.

Wordpress’in en yeni ve güncel sürümü olan “Dexter” yayınlandı. Bu yeni sürümle birlikte artık etiketleme sistemine farklı bir bakış getiriliyor. Her ne kadar bunun için biraz uğraşmak gerekse de bu yeni özellik adından sıkça söz ettirecek gibi. Bununla birlikte yeni sürümün bir diğer dikkat çeken tarafı ise güncelleme sistemi. Mevcut sürümünüzde bulunan Wordpress Eklentileri güncellendiği zaman size bu araç sayesinde haber veriyor. Bana kalırsa çok ama çok iyi bir araç olduğu kesin. Bir başka ilgi çeken özellik ise Zengin Metin editöründe yapılan değişiklik. Bu değişiklik sayesinde yazılarınıza birçok alanda müdahale edip zenginleştirebiliyorsunuz. Wordpress Türkiye ekibi ise yeni sürümün Türkçe halini yakın bir zamana kadar tamamlayacağını bildirdi. Yeni Wordpress Sürümü hakkında daha detaylı bir bilgilendirmeye ulaşmak için lütfen buraya tıklayınız. Yeni sürümün tüm Wordpress kullanıcılarına hayırlı olması dileğiyle…

GÜNCELLEME: Wordpress Türkiye tarafından son sürümün Türkçe hali yayınlandı. İlgililer buradan takip edebilirler.

Web tasarımı yaparken en büyük yardımcımız olan Photoshop’ta çokça fırça ve dolgu (brush, pattern) kullanırız. Bu dolgu ve fırçalar özellikle yaratıcı web sitelerinde oldukça karşımıza çıkarlar. Kaldı ki artık Web 2.0 tasarım konseptinin iyice yaygınlaştığı günümüz anlayışında birçok sitede bu tarz dolgu ve fırça işlemlerini görebiliriz. Bu yazımızda sizlere kısaca kendi dolgu ve fırçalarınızı nasıl yapacağımızı anlatacağız ve küçük uygulamalar ile örnekler çıkaracağız.

Bahsettiğimiz işlemleri yapmak için Photoshop versiyonunuz çok önemli değil, 6, 7, CS veya CS2 versiyon olabilir. Ben uygulamalarımı 7 ve CS sürümlerinde yapıyorum. Bu kısa ön bilgilendirmeden sonra hemen uygulamalarımıza geçelim.

KENDİ FIRÇALARIMIZI OLUŞTURALIM
Yazımızın giriş bölümünde belirttiğimiz gibi Fırçalar (Brushes) Photoshop uygulamalarında ve özellikte web tasarımında çokça kullandığımız araçlardır. Bizlerde kendi yapmış olduğumuz şekilleri ve simgeleri fırça haline getirerek sonraki uygulamalarımızda kullanabiliriz. Öncelikle kendi istediğiniz boyutta bir Photoshop dokümanı açın ve sevdiğiniz bir şekli yeni bir layer (katman) üzerinde çizin. Ben aşağıda örnek olması bakımından şu şekli çizdim.

Şimdi çizmiş olduğumuz bu şekli en küçük boyuta getirin. Çiziminizi bir kareye sığabilecek şekilde kesin. Bu iş için Crop aracını kullanabilirsiniz. Çiziminizi kestikten sonra yukarı menüden Edit >> Define Brush bölümünü seçiyoruz. Burada karşımıza gelen küçük pencerede fırça numaramız yazıyor ve bu alanda fırçamıza kendi ismini verebiliyoruz. Bu şekilde kayıt yaptıktan sonra boş bir doküman üzerinde yeni katman oluşturup B tuşuna basarak fırçalara girip kendi oluşturduğumuz fırçayı seçebiliriz. Gördüğünüz üzere kendi fırçalarımızı yapmak gayet kolay. Tek yapmamız gereken şey kendimize özgü ve nerede kullanılacağını bileceğimiz fırçalar yaparak işlerimizi daha da kolaylaştırmak.

ŞİMDİ DE KENDİ DOLGUMUZU OLUŞTURALIM
Photoshop’ta sıkça dolgu aracını kullanıyoruz. Kullandığımız dolguların karakterleri Web 2.0 ile büyük bir değişiklik geçirdi. Eskiden dolgulara verilen önem daha azken şimdi kullanılan değişik dolgu birimleriyle bu konuda da büyük bir adım atıldığını görüyoruz. Web 2.0 konseptli tasarımlara bakarsanız farklı dolgu modellerinin farklı alanlarda kullanıldığını görebilirsiniz. Yazımızın bu bölümünde ise kısaca kendi dolgularımızı nasıl yapacağımızı göreceğiz. Bu iş için bir dolgu modeli belirleyelim ve onu uygulamaya geçelim.

Photoshop’ta birçok dolgu yöntemi vardır. Aslına bakılırsa böyle bir ayrıma gitmek tasarım ufku açısından yanlıştır ancak konuyu daha iyi anlatabilmek ve daha iyi kavrayabilmek için böyle bir ayrıma gitmede bir sakınca görmüyorum.

Dolgu yaparken ilk örneğimizde küçük bir doküman açarak “renk bazlı” bir dolgu yöntemi uygulayacağız. Photoshop’ta 12*12px boyutlarında beyaz arkaplana sahip bir doküman açın. Bu dokümanı en yüksek oranda büyütün. (%1600) Şimdi bu alanda Shift+B tuşuna basarak Pencil Brush aracını seçin. Bu araca 2px değer verin ve renk alanında A8A8A8 rengini ayarlayın. 12 piksellik dokümanımızın ilk 2 pixelini bu dolgu ile doldurun. Daha sonra renk alanında C0C0C0 renk dolgusunu seçin ve kaldığınız noktadan başlayarak yeniden alanı doldurun. Bu şekilde sıralı bir biçimde doküman sonuna kadar ilerleyin. İşleminiz bittikten sonra yine fırçalarda olduğu gibi Edit menüsünden Edit >> Define Pattern alanına gelin. Burada dolgunuza isim vererek dolguyu kullanabilirsiniz. İsterseniz dolgunuzun vermiş olduğu efekti vermek için 400*400px bir boş doküman açın ister yeni bir katman oluşturarak ister oluşturmadan G tuşuna basın. Dolgu aracından Pattern dolguları seçerek kendi yapmış olduğunuz dolguyla çalışmanızı doldurun. Dolgunuzun nasıl göründüğü ortada. Bu işlem gayet kolay ve yapması da fazla çaba gerektirmeyen bir uygulamadır.

Şimdi bir başka dolgu modeline geçelim. Bu dolgu modelinde daha çok resimlerle uğraşacağız. Resim kullanırak yapılan dolgularda dikkat edilmesi gereken nokta ise; dolgunun uygulandığı yüzeyde sürekli tekrarlayacağı için kullanılan ögelerin doğru yerleşimine özen göstermemiz gerektiği. Ancak bu durum her zaman geçerli değil, çünkü sadece tekrarlı çalışmalar yapmayacağız. Dilerseniz kısaca bu yöntemden de bahsedelim.

Şimdi Photoshop’ta 100*100px ve beyaz arkaplana sahip bir doküman açalım. Bu doküman üzerinde bir dolgu oluşturmak için ben Shape alanından bir şekli tercih ettim. Siz de kendi belirlediğiniz küçük bir şekil veya resmi doküman üzerinde kullanabilirsiniz. Resim ögemizi seçtikten sonra bu ögeyi sayfa üzerine belli aralıklarla diziyoruz. Burada sizi yönlendirmek istemiyorum çünkü bu sizin dolgunuz olacak. Ben aşağıda gördüğünüz şekilde dolgumu yaptım ve bunu Edit >> Define Pattern alanından MyPattern adını vererek kaydettim. Dolgumu yaparken dolgunun kendini tekrarlayacağını düşünerek yerleşimi dokümanın ortasına göre yaptım ve daha sonra bunu dolgu olarak başka bir alanda deneyerek sonucu gördüm.

Sadece bu yöntemle sizlerde kendinize farklı dolgu örnekleri hazırlayabilirsiniz. Yukarıda az çok belirtmeye çalıştığım gibi resim bazlı ve farklı dolgu modelleri sayfamızın görünümüne daha fazla renk katacaktır. Özellikle kararlı ve tasarımın gidişini olumlu yönde etkileyecek dolgular Web 2.0 konseptine çok uygun tasarım klişeleri arasında sayılmaktadır.

Umarım bu kısa makale sizlere kendi dolgu ve fırçalarızı hazırlamak için yararlı olur.

Tasarladığımız web sayfaları ve sitelerinde çoğunlukla resim değişim efektleri (image rollover) kullanırız. Bu efekti gerek Javascript yardımıyla gerekse de Xhtml ve Css bileşimiyle rahatlıkla web sayfalarımızda uygulayabiliriz. Bahsettiğimiz özellikte fare ile resmimizin üzerine gelindiğinde yine aynı boyutta başka bir resim ile resmimizin yer değiştirdiğini görürürüz. Bu yazımızda sizlere kısaca bu işi Adobe Dreamweaver ile nasıl yapacağımızı anlatacağız. Böylelikle çok kolay ve zahmetsiz bir biçimde sayfalarımıza image rollover efekti ekleyebileceğiz. Ayrıca bu teknik ile yapmış olduğumuz işlemde geçerli (valid) bir kod elde etmiş olacağız.

Bu işe başlamadan önce aynı boyutta 2 adet farklı resminiz olması gerekiyor. Ben küçük boyutlarda 2 adet resmi bu iş için tasarladım ve jpg formatında kaydettim. Bu resimleri bir klasöre attıktan sonra Adobe (daha doğrusu hala bizdeki formatıyla Macromedia) Dreamweaver’ı açıyoruz. Yeni bir HTML dosya açtıktan sonra yapacağımız işlem gayet kolay. Dreamweaver’ın yukarıda yer alan ana menüsünden Common bölümünde Image alanına geliyoruz, bu alanda yer alan Rollover Image bölümüne tıklıyoruz. Açılan pencerede bizden iki adet resim belirlememiz istenecektir. Bu alanda hemen birinci (üst) alana önce görünecek olan resmimizi belirtiyoruz. Ben iki resmimi klasör içine koydum ve resim1.jpg ve resim2.jpg olarak isimler verdim. Dolayısıyla hemen resim1.jpg dosyamı seçiyorum. Aşağıda yer alan bölümde ise resim2.jpg dosyamı seçereki açılan pencereye OK diyerek kapatıyorum. Artık rollover image efektim hazır. Hemen çalışmamızı kaydederek sonucu görebilir veya kısayol F12′ye basarak bir tarayıcı penceresinde sonucu görebiliriz.

Kaydettiğiniz sayfada rollover efektinin gayet güzel işlediğini göreceksiniz. Bu işlemi yapan bir dizi Js kodunu Dreamweaver sitenizin kaynak kodlarına (HEAD alanına) ekliyor. Daha sonra BODY etiketinde eklemiş olduğunuz resimler onload parametresi yardımıyla öncelikli olarak yükleniyor. Resim değişim özelliğinin görünmesi içinse a etiketinin onmouseover ve onmouseout parametreleri kullanılarak Javascript kodlarına atıfta bulunuluyor ve resim değişim efektimiz gösteriliyor. Bu özellikte resmin hem link olarak bağlanması hem de istenilen yerde kullanılabilmesi büyük bir avantaj. Böylelikle biraz Photoshop ve biraz da Dreamweaver bilgisi ile kendi istediğimiz tarzda Navigasyon menüler yapabilir ve bunları sitemizde kullanabiliriz. Ancak yazımızın başlarında belirttiğim gibi resimlerin aynı boyutta olması gerekli. Bununla birlikte yaptığımız çalışmanın geçerli bir uygulama olması için img etiketine alt=”" kodunun kesinlikle eklenmesi gerekiyor. Dreamweaver’da yeni bir HTML doküman açarken dosya tipininde Xhtml olmasına dikkat ediniz. Bu sayede programın ürettiği kodlar Xhtml ile uyumlu kodlar olacaktır.

Örnek çalışmam için lütfen buraya tıklayınız…

Uzun süredir bu güncede Xoops ile ilgili haberlere yer vermiyordum. Belkide bir nebze olsun bu kategoriyi dolduracak bir haber vermek istiyorum. Xoops geliştiricileri tarafından sistemin 2.0.17 versiyon numaralı son kararlı sürümü duyuruldu. Sürümü indirmek için buraya ilgili haber ve yorumlar içinse buraya tıklayabilirsiniz.

Şu sıralar siteye gereken ilgiyi göstermediğimin farkındayım. Bu yüzden tüm ziyaretçilerimden ve arkadaşlarımdan özür diliyorum. Bildiğiniz üzere t-infection.com uzun süredir 3. versiyon numarasıyla sizlerin huzurunda. Ancak siteye koyduğum reklamların fazlalığı ve daha fazla içerik birikmesi nedeniyle bu temanın artık yeterince hizmet veremediğini düşünüyorum. Önümüzdeki günlerde sistemin kullanacağı yeni bir temayı sizlerle paylaşmayı ve fikirlerinizi almayı düşünüyorum. Sırf bu yüzden siteye yazmayı istediğim bir iki konudan da feragat etmiş durumdayım. Wordpress Codex’e girmek için çok uygun bir zamandı, Sitelerimizde kullandığımız bağlantıların özelleştirmesi konusunda yazmış olduğum bir makale ise hala beklemede. Tüm bunlarla birlikte Css ve Xhtml bileşenleriyle süslenmiş olan güzel bir menü galeri derlemesi oluşturuyordum. F klavye konusunda belki serisinin en düşündürücü ve vurucu yazısı olabilecek olan Okullarımızdaki F Klavye eğitimi başlıklı yazım içinde haldır haldır araştırma yapıyorum. Bahsettiğim konuların üst üste gelmesi ve v4 hazırlıkları nedeniyle siteye kısa bir zaman daha yazamayacağım. Gönül istiyor ki sizlere daha detaylı ve gerçekten “tasarım oyuncaklarından ve webin değişen teknolojilerinden” haber veren bir günce sunabileyim. Bu amacımı gerçekleştirebilmek için geceleri sabaha kadar çalışıyorum ancak zaman kısıtlılığı ve özel işler nedeniyle hep yarım kalıyor. Tekrar sizlerin hoşgörüsüne sığınıyor ve bir sonraki makalemde görüşmek üzere diyorum. (Biraz özeleştiri niteliğinde bir yazı oldu farkındayım)