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.
İ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.
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.
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.
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 :)
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.
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.
Aslında grafik kullanmakta kendini biraz kısıtlamışsın gibi.
YanıtlaSilBunun dışında IE6 konusuna değinmen,diğer bir çok şeyden bahsetmek çok iyi olmuş.
Kolay gelsin.
Tema ie8 ile uyumlumu?
YanıtlaSilBenim temada ie8de bazı sorunlar çıktı.Bide şu 32*32 resimlerderin şeffaflığı çalışmadı.İe8 final sürümü çıktığında inşallah sorunsuz görüntüleniyor yoksa bide ie8 uyumlu tema bul.Hemde Blogger..
Tema geliştiricilerin en çok hata aldığı browserın ie olduğu kesin burda erburhanın sunduğu ietester programı var eminim işinizi görecektir.Ayrıca yeni tema sade ve güzel olmuş
YanıtlaSilseninde dediğin gibi html ve css den anlamak gerek öğrenmesi kolay ama şu üşengeçlik yokmu hazır yemek :D o yüzden pek işimede gelmiyor ben stilistim yaratıcılık varda bilgi yok bilgi olsa SİTELİST de olurdum :D
YanıtlaSilGerçekten de yazının başında anlattığına tümden katılıyorum. Gerçi ben henüz sıfırdan kendi temamı yapamadım hazır temadan yola çıkarak ha bire orasını burasını değiştirerek ortaya birşey çıkarmaya çalışıyorum (nerdeyse komple değiştirmiş oluyorum). Çünkü bugün beğendiğimi yarın beğenmiyebiliyorum ve üzerinde sürekli değişiklik yada eklemeler yapıyorum. Vakit bulur bulmaz en kısa zamanda sıfırdan kendime ait bir tema geliştirmem lazım artık diye düşünüyorum.
YanıtlaSilAslında kullandığın hazır şablonu komple değiştirmek (örneğin tek sidebar'lı ise 3-4 sidebarlı yapmak..vs) sıfırdan yapmak gibi değil mi? :)
Kafamı yastığa koyduğumda sitemin neresinde neyi yaparken uyuyakalıyorum ya da kalkıyorum pc'yi açıp uyguluyorum...hastalık bu gerçekten.. :)
Yazınız daki bilgiler için teşekkürler. Yine bana epeyce fikirler verdiniz sağolun.
İlk yorumu bu sefer ben yakaladım sanırım!
@rss_ems,
YanıtlaSilSenin blogu görünce neden grafik azlığına değindiğini anladım, o ne cıvıl cıvı temadır öyle. Bundan sonra takibindeyim ;)
@gokhans,
Temam IE 8 Beta ile 99% uyumlu ;)
@merwick,
Zaten bu işe ufak ufak değişiklikler ile başlanıyor. Eğer sen de yaterince uğraşırsan bir gün istediğin temayı yapabilirsin. Yalnız ilk 5 kişi içinden sonuncu yorum senin :)
Bence peşinden eklemek istediğin resim ile ilk resmi bir resim işleme programında birleştirip tek seferde çağır :)
YanıtlaSilPeş peşe sıralı bir biçimde arka plana resim nasıl çağrılıyor bilmiyorum. Şimdiye kadar da hiç ihtiyacım olmamıştı. Sen Google amcaya bir sor bakalım ;)
@Altuğ,
YanıtlaSilBen temanın header arka planındaki resmi uygularken baştan sona olması için body içinde çağırmıştım. Sen arka plana başka bir resim koymak istediğini söyleseydin sana daha açıklayıcı bir cevap verirdim. Meğer sen header resmi yüzünden arka plana istediğin resmi koyamıyordun :) Baştan deseydin ya :)
Bu arada arka plan resmini mümkünse daha da ufalt.
Mrb. hocam ben Blog'umu özelleştirmeye çalışıyorum birçok kısmını deşiştirdim ama bir noktada kitlendim kaldım. konu sonlarındaki ''Sonraki Kayıt Ana Sayfa Önceki Kayıt ''seçeneklerinin yerine ikon koymaya çalışıyorum. Bunun için ikonlarımı resim sitesine yükledim ve adresleri resimli link koduna yerleştirdim ama şablonun neresine ekleyeceğimi bilmiyorum. Birçok deneme yaptım ama olmadı. Bu konuda yardımcı olabilirsen cok sevınırım. Teşekkürler.
YanıtlaSil@kolonto,
YanıtlaSilMerhaba, aşağıdaki yazı ve yorumlarını okuduğunda bir çok soruna cevap bulacaksınız.
Blogger Şablonunu Düzenleme (Güncellendi)