Tema Geliştirirken...

Bir hafta önce yeni temaya geçtiğimde eksiklikleri olan bir tema ile karşınızdaydım. Temayı tam olarak bitirmeden yayına sokmamın en büyük nedeni artık sabırsızlanıyor oluşumdu. Diğer bir taraftan da bir tema ile gereğinden fazla uğraştığınız vakit beğenmemeye başlıyorsunuz, aramızda tema geliştirenler bir tema ile gereğinden fazla uğraşmanın insanda ters etki yarattığı gerçeğini paylaşacaklardır zaten.

Eski temamı bu yazımda paylaşmak istiyordum ama geçtiğimiz haftayı oldukça yoğun geçirdim. Bu yüzden de temayı herkesin kullanabileceği şekilde düzenleyemedim. Söz veriyorum bir önceki tema ile birlikte daha önce hazırlamış olduğum başka bir temayı da paylaşacağım ;)

Bu yazımda bana e-posta yolu ile sıklıkla sorulan sorulara ışık tutabileceğini düşündüğüm bazı konulara değinip, en sonunda White Freedom temasının hikayesini anlatacağım.

Şablon İle Tema Arasındaki Fark Nedir?

İlk olarak sürekli karıştırılan bu iki kelimenin ne ifade ettiğini anlatmak istiyorum. İngilizcede Layout şeklinde geçen şablon kelimesi kullanmış olduğunuz temanın iskeletini ifade eder. Tema ise bu iskeletin CSS ile giydirilmiş halidir. Aşağıda klasik bir şablon örneği görüyorsunuz.

Tema Nasıl Yapılır?

Bir tema geliştirebilmek için en azından CSS ve HTML kodlama bilgisi gereklidir. Bu işe başlarken eğer tasarımcı yanınız zayıfsa mecburen varolan temaları kendi kullandığınız sisteme çevirmeyle başlarsınız. Zaten piyasada bulunan bir çok Blogger temasının WordPress temasından çevrilme olduğu gerçeği bu durumu çok iyi izah ediyor. Çünkü üzerinde çok fazla düşünmeden, sadece gördüğünüz şeyi uygulamak çok daha kolay ve hızlıdır. Fakat bu kolaylık sizi aldatmasın, zira ışık, renk, tonlama vs. gibi bilgilere sahip olmadan nasıl portre çizemiyorsak; CSS ve HTML bilgisine sahip olmadan da gördüğümüz bir temayı kendi sisteminize çeviremezsiniz. Üstelik her iki durumda da deneyim oldukça ön plana çıkar. Tabi içerik sistemlerinin farklı olmasının getirdiği ekstra bir zorluk da vardır. Çünkü her ne kadar blog içerik sistemlerinin görüntüde yapı olarak bir farkı bulunmasa da kullandıkları dil çok farklı olabiliyor.

Varolan bir temayı çevirmeyi başarabilen kişiler kullandıkları içerik sisteminin yapısı ile az çok haşır neşir olmuştur. Başta ezbere yapılan şeyler zamanla anlaşılır ve daha çok merak duyulur. Zamanla kazanılan deneyim size çok daha hızlı tema çevirme becerisi kazandırır. Bir noktadan sonra ise kendinize ait bir tema oluşturma isteği baskın olmaya başlar, fakat bu durumda sizi frenleyecek en önemli eksiklik tasarımcı yönünüzün zayıf olmasıdır. Tasarım konusu da kendi içinde dallara ayrılabilir. Eğer hayal ettiğiniz tema Smashing Magazine'in kısa bir süre önce dağıttığı Notepad Chaos benzeri bir tema değilse sizi en çok zorlayacak nokta renk uyumu ve başlık (header) bölgesidir. Renk uyumu denildiğinde basit bir konu anlaşılmasın, zira temaları beğenme sebebinizin altında yatan en büyük nedenlerden biridir renk uyumu.

Eğer tasarım aşamasını da bir şekilde aşarsanız, sıra, çizdiğiniz temayı internet tarayıcılarının anlayabileceği şekilde HTML dili ile anlamlandırıp, üzerine CSS örtüsünü örtmeye gelmiştir. Bu aşamada, eğer kullanmış olduğunuz içerik sisteminin alt yapısına hakim değilseniz ve de HTML dili ile hala büyük sorunlar yaşıyorsanız CSS kodları ile temanızı canlandırmanın keyfine varmak oldukça zaman alabilir.

Tarayıcı Uyumsuzlukları

Temanızı oluşturduğunuzu ve artık geneli itibariyle istediğiniz şekle getirdiğinizi düşünüyorsanız yanılıyorsunuz. Çünkü sizden başka milyonlarca kişi bu temaya ulaşabilecek ve her birinin kullandığı internet tarayıcılarıları ve sürümleri farklılık gösterecektir. İnternet tarayıcılarının kullanmış oldukları yorumlama (render) motorları sizin HTML ve CSS ikilinizi bir araya getirip yorumlarlar. Fakat tarayıcıların kullanmış oldukları motorlar bazı standartların gerisinde kaldığı vakit farklı sonuçları görmek kaçınılmaz olur. Bu benim de başıma geldi. Dört farklı tarayıcının farklı sürümleri ile birlikte toplamda yedi tarayıcıda test sürüşü yaptığımı düşündükçe sinirlerim geriliyor :) Bu konu da zamanla deneyimleriniz doğrultusunda çok daha az zamanınızı alacaktır. Hatta zamanla her CSS dosyanızda kullanmak üzere saklayacağınız bir sıfırlama ve her tarayıcıya ait ekstra kod kümesi olacaktır :) Bu konu da zamanla kazandığınız deneyimler doğrultusunda daha az zamanınızı alsa da kafanıza ekstra bir beyaz şaç eklemeye yetebiliyor. Aslında en iyisi bazı standart dışı kalmış tarayıcıları boykot etmek.

Gelelim White Freedom Temasına

Yukarıda yazdığım tüm aşamaları zamanında ben de geçirdim, zaten kimse bu işi doğuştan bilmiyor :) Artık tamamiyle kendi istediğiniz temayı yapma vakti geldiğinde bir ışık, bir ilham arayışı içine giriyor insan. İşte ben de belki ilham verebilir düşüncesi ile onlarca WordPress ve Blogger teması inceledim. Fakat bir türlü beni heyecanladıran bir tasarım bulamadım. Aslında bundan önce kendime ait temalar yaptım, fakat bir türlü bundan önce kullandığım temadan vazgeçemedim. Tıpkı Attila İlhan'ın Sokaktaki Adam romanında dediği gibi, "ne istediğimi bilmiyor ama ne istemediğimi çok iyi biliyordum."

Arayışla geçen bir kaç günün ardından bir sahur yemeğinden sonra kafamı yastığa koyduğumda o aradığım ışık bir şimşek gibi çaktı ve kafamda siyah beyaz bir şekilde temayı çizmeye başladım. Zaten kim renkli düşünebiliyor ki :) Hatta kafamdaki çizdiğim şeyi unutmamak için yatağımdan fırlayıp not almaya başladım. Işık kaynağı tükenene kadar düşündükten sonra ise derin bir uykuya daldım.

Uyandıktan sonra beni 4-5 gün sürecek bir çalışmanın içine girdim :)

Notlar

• İsim logoyu MS Paint programında hazırladım. Zaten MS Paint'te Mona Lisa çizildiğini gördükten sonra saygım kat ve kat arttı :)
• CSS kodları için uzun süredir kullandığım Free CSS Box programını kullandım. Bu programı eburhan'ın yazısı ile kullanmaya başlamıştım.
• Yazı ikonlarını iconspedia sitesinden buldum. İkonların sahibi DryIcons imiş. Sonunda içime sinen bir ikon seti bulabildim.
• Temanın düzgün görüntülendiği tarayıcılar: Mozilla Firefox 1.5+, Internet Explorer 5.5+, Opera 9 (daha alt sürümleri test etmedim), Google Chrome.
• Temamdaki tüm id ve class gibi isimlendirmeleri özellikle İngilizce yaptım. İngilizce isimlendirme benim daha kolayıma geliyor ve daha akılda kalıcı oluyor, ayrıca yarın bugün dağıtımını yaparsam daha geniş kitlelere ulaşabilir düşüncesindeyim.

Yazıyı daha fazla uzatmadan temayı yayınladıktan sonra hiç bir art niyet olmadan düşüncelerini paylaşan ve önerilerde bulunan arkadaşlarıma teşekkür ederim.

İlgili Yazılar

• Yoksa Siz Hala Internet Explorer 6 mı Kullanıyorsunuz?