Merhaba,
bu dökümanda sizlere tema tasarımı hakkında bazı basit yönergeler sunacağım.

İçerik;
- Kodlama hataları ve öneriler
- Basite indirgenmiş kodlama
- Tasarım yönergeleri

Kodlama hataları ve öneriler
1- Öncelikle dikkat edilmesi gereken en önemli noktalardan biri XHTML hatalarıdır. Bu hataların doğrularını öğrenmek için XHTML Hataları ve Çözümleri isimli dökümana gözatabilirsiniz. Sitenizdeki XHTML hatalarını en yukarıdan çözmeye başlayın çünkü üstte kalan hatalar alttakileri tetikliyor olabilir . XHTML hatalarını Mozilla Firefox‘un HTML Validator eklentisi ile öğrenebilirsiniz. Bu hatalar bulunduğu sürece Simple Machines Tema Sitesine kesinlikle temalarınızı ekleyemezsiniz.
2- Gerektiği yerde gerekli kodları kullanmaktan kaçınmayın. table etiketi yerine div etiketini kullanmanın arama motorları tarafından daha iyi olduğu söylenir ancak yanlış bir bilgidir. Hangi kodların site düzenine uygun olduğunu seçerek kodlamaya başlayın. table etiketi ile düzenlenmesi gereken yerde div etiketleriyle uğraşmayın. Ayrıca arama motorlarına yardımcı olmak için dl, dt ve dd etiketlerinide kategorileri düzenlemek için kullanabilirsiniz. dl etiketi ile listeyi açıyoruz, dt etiketi ile kategori ismini (başlık) ekliyoruz ve dd etiketi ile de kategori açıklamamızı ekliyoruz. Bu şekilde düzenleme yapılan sitede bir nebzede olsa arama motorları için faydalı olacaktır. Bu konuda da hemen örnek olarak dl dt ve dd etiketlerini kullanalım.

<dl>
<dt>Genel Kategori</dt>
<dd>Genel Kategori içeriğini anlatan açıklamamız</dd>
<dt>Sıradan Kategori</dt>
<dd>Sıradan Kategori içeriğini anlatan açıklamamız</dd>
</dl>

Basite indirgenmiş kodlama
1- Bu konuyu örneklerle açıklarsam daha iyi olacaktır. Hemen basit bir kodlama yazalım.
Örnek 1:
Bir adet değişkenimiz olsun; $gelendeger

<?php
if(empty($gelendeger))
echo ‘Gelen deger bos’;
else
echo ‘Gelen deger bos degil’;
?>

<?php
empty($gelendeger) ? ‘Gelen deger bos’ : ‘Gelen deger bos degil’;
?>

Örnek 2:
İki adet değişkenimiz olsun; $gelendeger, $birsey

<?php
if(empty($gelendeger))
$birsey = 1;
else
$birsey = 2;
?>

<?php
empty($gelendeger) ? ($birsey = 1) : ($birsey = 2);
?>

Örnek 3:
Üç adet değişkenimiz olsun; $giris, $ziyaretci_adi, $kullanici_adi

<?php
if(empty($giris))
echo ‘Merhaba’ . $ziyaretci_adi;
else
echo ‘Merhaba’ . $kullanici_adi;
?>

<?php
empty($giris) ? ‘Merhaba’ . $ziyaretci_adi : ‘Merhaba’ . $kullanici_adi;
?>

---

Örneklerdeki kodun mantığını açıklayayım;
($koşul == 1) ? ‘1. deger‘ : ‘2. deger‘;

Eğer $koşul değişkeni 1′e eşit olursa 1. deger gösterilecek, aksi durumunda 2. deger gösterilecek

---

---

Bu tür kodlamalarda değişkenleride kullanmak isterseniz noktalara ve virgüllere dikkat etmelisiniz, hemen örnek veriyorum.

Yanlış: ($gelendeger == 1) ? ‘Gelen deger ‘, $gelendeger : ‘Gelen deger ‘,$gelendeger;
Doğrusu: ($gelendeger == 1) ? ‘Gelen deger ‘. $gelendeger : ‘Gelen deger ‘.$gelendeger;

Yanlış: echo ‘Sonuçlardan ‘ , ($gelendeger == 1) ? ‘Gelen deger ‘, $gelendeger : ‘Gelen deger ‘,$gelendeger , ‘ e eşitmiş’;
Doğrusu: echo ‘Sonuçlardan ‘ , ($gelendeger == 1) ? ‘Gelen deger ‘. $gelendeger : ‘Gelen deger ‘.$gelendeger , ‘ e eşitmiş’;

---

Sözlü olarakta kısaca şöyle anlatabilirim; bu tür kodlamayı kullanırken echo içinde yazdırmak için virgülle başlayıp virgülle kapatacaksınız. Eğer koşul için herhangi bir değişken kullanılacaksa bunlarıda nokta işareti ile yazmalısınız.

Parse error: syntax error, unexpected ‘,’ in C:\Documents and Settings\husmen73\Desktop\xampp-win32-1.6.3a\xampp\htdocs\test6.php on line 2

Tasarım Yönergeleri
1- Öncelikle yapmak istediğiniz temanın hedef kitlesini ve tasarımda kullanacağınız renk tonlarını belirleyin. Bunun için Color Schemer veya Colour Lovers adresini kullanabilirsiniz.

Örnek bir renk şablonu göstermek istiyorum;

3 tane ana renk ve tonlarını hazırladık. Renk paleti tasarımda çok yardımcı olacaktır.

2- Tasarımda kullanacağınız renkleride sınırlamayı unutmayın. Gereksiz fazla çeşit renkli tasarımlar göze hoş gelmez. Renk uyumuna bu nedenle dikkat etmeliyiz. Sıcaklık yelpazesine uymayı unutmayın. Ya tüm sıcak renkleri ya da tüm soğuk renkleri seçin. Sıcak renkler kırmızılar, turuncular, sarılar, kahverengiler vb. Soğuk renkler ise maviler ve morlardır. Eğer tüm renklerinizi bir sıcaklık aralığında seçerseniz, büyük ihtimalle uyumlu olacaklardır.

Şu örneğimizi inceleyelim;

Ne kadar kötü görünüyor değil mi? Sürekli bu resme bakarak gözlerimizi yorarız, haliylede tasarımımızda bir anlam kazanmaz. Bu nedenle şu tarzda renk tonlarında hazırlanmış uygulamalar yapın;

3- Tasarımda watermark tarzı arkaplanı şeffaf olan bir resim kullanmak istiyorsanız saydamlık değerlerini %10-15 arası yapabilirsiniz. Örneğimizi inceleyelim;

Arkaplan konsantrat değeri %15 olan bir resim

Arkaplan konsantrat değeri %100 olan bir resim

Aradaki farkı şimdi daha iyi anlamış olmalısınız. Yapacağımız tasarımlarda renk konsantratı çok önemlidir. Eğer, ziyaretçinin dikkatini tasarımınızdaki önemli bir alana çekmek istiyorsanız, bunu kontrastla başarabilirsiniz! Tüm tasarımı açık renkte tutabilir ve dikkat çekmek istediğiniz alanı karartabilirsiniz.

4- Şimdi objelerin büyüklüğünün nasıl derinlik katabileceğine bir bakalım. Bu ilk örnek çok basit, sadece bir sürü daire var. Burada bir şeyin boyutunu ayarlamak gibi basit bir işlemle nasıl derinlik katabileceğimizi görüyoruz.

Her birinin boyutu bir öncekinden daha küçük. Boyutlarındaki değişikliğin nasıl derinlik hissi verdiğini görün. Hangi daire size daha yakın görünüyor? Tabi ki en büyük olan daire.

5- Renkler bile derinlik katmamıza yardımcı olabilir. Bu genellikle büyük uzaklıklarda söz konusudur. Bir dış sahne için renk seçerken, önplandaki nesnelerin güçlü, enerjik renklere sahip olması gerekir. Daha uzaktaki nesnelerin ise daha az canlı renklere sahip olmalıdır. Örneğimizi inceleyelim;

Görüldüğü gibi yeşil ağaçlık alan daha uzak görünüyor ve bize yakın olan kayalıklar ve insanlar daha canlı renklere sahip.

6- Yazılarınızda ve resimlerdeki nesnelerinizde gölgelendirme efekti kullanın. Tasarımınızın daha profesyonel ve daha güzel görünmesini sağlayacaktır. Gölgelendirme kullanırken gölgeyi hafif saydam olarak yaparsanız daha iyi görüntü elde edebilirsiniz. Örneklerimizi inceleyelim;

%30′luk gölgelendirmek efekti kullanılmış bir yazı

%30′luk gölgelendirmek efekti kullanılmış bir yazı

Gölgelendirme kullanışmamış bir yazı

Aradaki farkı açıkça görebiliyoruz. Hafif gölgelendirme efekti kullanılmış nesne daha iyi görünmekte ve tasarıma derinlik vermektedir.

7- Yazı tiplerinizi sınırlayın ve daha iyi görünüm elde edin. Bir tasarımda çok fazla yazı tipi kullanmak en büyük hatalardan birisidir. Broşüründe 8 farklı yazı tipi kullanan birinden daha kötü görünen bir şey yoktur. Bu konuda bir sitede yayınlanmış olan birkaç resimi göstereceğim;

Gördüğünüz gibi, burada sadece iki adet yazı tipi kullanıldı. Süslü yazı tipi, üst kısım için ve basit yazı tipi de genel metin için kullandık. Temiz ve tutarlı görünüyor.

Burada da yazı tiplerinin kötü kullanımı söz konusu. Bu durumda, bir çok süslü yazı tipi kullandım ve sadece tasarımı tutarsız gösteriyor. Alt kısım, ana başlıkla uyuşmuyor bile.

Daha da kötüsü genel metinleriniz için çok süslü bir yazı tipi kullanmanızdır

Eğer süslü yazı tipiniz modern veya çağdaş görünüyorsa, o halde basit yazı tipiniz bir sans-serif yazı tipi olmalıdır. Eğer süslü yazı tipiniz eski moda görünüyorsa, o zaman ikincil yazı tipi olarak serif kullanın.