Uzun zamandır aklımdaki tasarım değişikliğini bugün uygulama fırsatı buldum. Site görsel olarak aynı yapıyı korusa da yeni WordPress sürümünden kaynaklanan değişiklikler bir hayli fazlaydı. Özellikle widget kavramını sağ bölümde uygularken birkaç yeni WordPress eklentisini inceleme fırsatını yakaladım. Tasarımdaki aşamalara gelin göz gezdirelim.

Çizim

Pek öyle kağıtlara tasarım yapan, renkleri, uyumu vs. kafasında bitiren bir insan değilimdir. Ama AçıkBilgi.com‘un yeni tasarımında orijinalden fazla uzaklaşmayacağıma karar vermiştim.

Renk seçimini genelde ColorSchemer gibi sitelerin dashboard widget’larından yaparım. Aynı renk seçeneklerine web sitesinden de ulaşabilirsiniz.

Vektörel çizimleri bu zamana kadar açık kaynak kodlu bir yazılım olan inkscape ile yapıyordum, ancak henüz inkscape’in native bir mac sürümü olmadığı ve X11 yardımıyla çalışabildiği için kullanılabilir değil. Bu yüzden Adobe Photoshop CS3‘ü vektörel çizim programı gibi kullandım. Özellikle katmanları verimli kullandığınız takdirde işiniz hayli kolaylaşmakta.

Buradaki tasarım içime sindikten sonra sıra geliyor böl-parçala aşamasına. Bölüp farklı kaydetmek istediğiniz resmi Görünen kısmı kopyalama (Copy Merged) ve Web için Kaydetme (Save for Web) kısayolları kullanarak hazırlıyoruz.

Sanırım kod bilginizle tasarım bilginizi sentezleyip akıllıca kullanacağınız nokta bu. Çünkü:

• Sayfayı hangi alanlara ayıracağınız,
• Bu alanların boyutları, konumları, arkaplan renk veya resimleri,
• Yazıların boyutu, satır yükseklikleri, paragraflar arasındaki boşluklar,
• Bağlantıların renkleri, üzerine geldiğinizde alacağı renk/durum,

vb. gibi tüm yapısal işleri kafanızda planlayıp stil dosyanızı yaratmalısınız. Bunun için CSSEdit ve Coda gibi ücretli yazılımlar mevcut. Ama açtığınız etiketi kendiniz kapatmak istiyorsanız eski dost her zaman Notepad yanınızda.

Tasarımı xhtml ve css standartlarına uygun kodlamanız ne yazık ki yeterli değil. Çünkü farklı tarayıcı ve platformlarda aynı görüntüyü almanız neredeyse imkansız. Şunlar aklıma gelen birkaç önemli nokta:

• Transparan png dosyalarına dikkat edin!
• Internet Explorer 5 ve 6 sürümleri için kodun aynı sonucu verdiğini doğrulayın.
• Farklı platformlarda (linux, mac), farklı tarayıcılarla, farklı çözünürlük ve renk derinliğinde test yapın.
• Tasarımınızın hiçbir stil kodu kullanılmadığında yine anlaşılabilir olduğundan emin olun.

WordPress, Widget’lar, Eklentiler

Güvenli ve hızlı olduğu için WordPress’in son sürümüne terfi etmeye, ayrıca temayı widget‘lara uygun hale getirmeye karar verdim. Bu aşamada tanıtmak istediğim birkaç WordPress eklentisi var:

• Random Posts: Bu widget sidebar’ınızda istediğiniz sayıda rastgele yazıyı listeleyebiliyor. Sitelerdeki “Okudunuz mu?” bölümlerini hazırlamak için düşünülmüş. Ayrıntılı bilgi eklenti sayfasında.
• Get Recent Comments: WordPress’le hazır gelen Recent Comments widget’ı kullanıcıya fazla müdahale imkanı sağlamıyor. Get Recent Comments ile son yorumların nasıl listeleneceğini, uzunluğunu, vb. özelliklerini kolayca ayarlayabiliyorsunuz.
• FeedBurner FeedSmith: Site feed’inizi otomatik olarak FeedBurner hesabınıza yönlendirmek, hem bandwidth tasarrufu yapmak hem de istatistiklere ulaşmak istiyorsanız FeedSmith çok yararlı bir eklenti.
• WP-Cache 2.0: Sitenizin daha hızlı görüntülenmesini sağlamak için son derece verimli çalışan WP-Cache eklentisi her WordPress kullanıcısına lazım. Ayrıca önemli ayarları admin bölümünden konfigüre edilebiliyor.

Tüm bu widget eklentilerini kullanarak, sidebar.php başta olmak üzere tema dosyalarında yaptığım değişikliklerle AçıkBilgi v2.0beta sürümünü hazırladım.

Google Reader kaynaklı takip listesi

Dikkat ettiyseniz sağ taraftaki Türkçe ve yabancı kaynaklardan Takip Ettiklerim bölümü dinamik olarak yaratılmakta. Geçen seneden beri sürekli ziyaret ettiğim siteleri Google Reader kullanarak takip ediyor ve güzel bulduğum yazıları işaretliyorum. İşte bu liste benim en son beğendiğim yazıları Google Reader clips özelliğini kullanarak otomatik olarak almakta.

Başta WordPress’in RSS widget‘ını kullanmak istedim, ancak Google Reader, RSS değil Atom feed sunduğundan yazılar ve linkler birbirine dolaştı. Çözüm olarak Text widget kullanıp içine Google Reader’ın verdiği script’i yapıştırmayı keşfettim. Aynı problemle karşılaşanlara duyurulur.

Öneriler, Eleştiriler

Tasarım henüz beta aşamasında, yani tasarımla ilgili fikirleriniz, eleştirileriniz, yorumlarınız varsa çekinmeden ekleyin. Beraber tartışalım.

Yorumlar - Başa Dön

Yorum Yazın

İsim (gerekli)

E-posta (gerekli)

Website URI

Yorum yapacaklar için bilgi:
Verdiğiniz mail adresi sitede asla görüntülenmeyecektir. Sonraki yorumlarınız için isim, e-posta gibi bilgiler cookie olarak bilgisayarınızda saklanacaktır.

Yorum:

Önizleme: