Merhaba,
bu dökümanda sizlere tema tasarımı hakkında bazı basit yönergeler sunacağım ancak uzun yazıları okumaktan sıkılıyorsanız ve kısa olsun diyorsanız hemen şimdi
CTRL +
W tuşlarına aynı anda basınız.
! İstekler doğrultusunda daha fazla bilgi ekleyebiliriz.
İçerik; - Kodlama hataları ve öneriler
- Basite indirgenmiş kodlama
- Tasarım yönergeleri
Kodlama hataları ve öneriler1- Ö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 (http://www.simplemachines.org/community/index.php?topic=218122.msg1392216#msg1392216) 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 (http://www.mozilla.org)'un HTML Validator (https://addons.mozilla.org/en-US/firefox/addon/249) 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ş kodlama1- 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
echo 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);
?>
<?php
$birsey = empty($gelendeger) ? 1 : 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
echo 'Merhaba ', empty($giris) ? $ziyaretci_adi : $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
Sözlü olarak; | $koşul | soru işareti | $değişken1 | iki nokta üst üste | $değişken2 | noktalı virgül |
Basit örnek olarak; | ($kosul == 1) | ? | Koşul 1e eşit | : | Koşul 1e eşit değil | ; |
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.
Quote from: Bu kodlamada hata yaparsanız aşağıdaki iletiyi görürsünüzParse 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önergeleri1- Ö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 resimAradaki 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ırEğ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.
8- Taracıyıya ve içeriğe göre genişlik ve yüksekliğini otomatik ayarlayan tasarımlar hazırlayalım. Örnekle genel olarak açıklayayım;
Büyük boyutta bakmanızı öneririm: http://www.gulhin.com/cokluortam/resimler/741e35125a9c10d666b33e6bf5370cd2.png1,
3,
6 ve
8 numaralı köşelerin sabit genişlik ve yükseklikleri olmalıdır.
2 ve
7 numaralı resim
x ekseninde (yatay) tekrar eder.
4 ve
5 numaralı resim
y ekseninde (dikey) tekrar eder.
Bu taslağı kullanarak şöyle bir tablo oluşturabiliriz;
Büyük boyutta bakmanızı öneririm: http://www.gulhin.com/cokluortam/resimler/3592ea4bea1fa252e163c6ee6d75e74a.pngGörüldüğü gibi yazımızın uzunluğu arttıkça sayfa aşağı doğru kayıyor aynı zamanda da ekran çözünürlüğü arttıkça sayfada onun kadar genişliyor.
Kodlamaya geçelim;
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="ustsol">1</td>
<td class="ustorta">2</td>
<td class="ustsag">3</td>
</tr>
<tr>
<td class="ortasol">4</td>
<td class="ortaicerik">İÇERİK</td>
<td class="ortasag">5</td>
</tr>
<tr>
<td class="altsol">6</td>
<td class="altorta">7</td>
<td class="altsag">8</td>
</tr>
</table>
Kodlamada hangi resim hangi alana geleceğini yazdım.
Bu yazımız eğitim amaçlı olduğu için td etiketleri arasına rakamları yazdım, tasarıma uygularken bu rakamları yazmayın aksi takdirde tasarımda da bu rakamlar çıkacaktır. Rakamların yerine td etiketinin boş kalmaması için şu kodu ekleyebilirsiniz; kullanımına bir örnek vereyim;
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="altsol"> </td>
<td class="altorta"> </td>
<td class="altsag"> </td>
</tr>
</table>
Stil kodları için tekrar tanımlama yapmak istiyorum;
1 = ustsol
2 = ustorta
3 = ustsag
4 = ortasol
İÇERİK = ortaicerik
5 = ortasag
6 = altsol
7 = altorta
8 = altsag
Stil dosyası içinde şunları eklemeliyiz;
/* Üst Kısım için Stil Kodları */
.ustsol
{
background: url('ustsol.png') no-repeat;
width: 20px;
height: 20px;
}
.ustorta
{
background: url('ustorta.png') repeat-x;
height: 20px;
}
.ustsag
{
background: url('ustsag.png') no-repeat;
width: 20px;
height: 20px;
}
/* Orta Kısım için Stil Kodları */
.ortasol
{
background: url('ortasol.png') repeat-y;
width: 20px;
}
.ortaicerik
{
padding: 10px; /* İçeriğin kenarlardan 10 pixel uzaklaşmasını sağladık */
}
.ortasag
{
background: url('ortasag.png') repeat-y;
width: 20px;
}
/* Alt Kısım için Stil Kodları */
.altsol
{
background: url('altsol.png') no-repeat;
width: 20px;
height: 20px;
}
.altorta
{
background: url('altorta.png') repeat-x;
height: 20px;
}
.altsag
{
background: url('altsag.png') no-repeat;
width: 20px;
height: 20px;
}
repeat-x =
x eksininde tekrarlar.
repeat-y =
y eksininde tekrarlar.
no-repeat = tekrarlama yapmaz.
Genişlik (width),
yükseklik (height) ve
tekrarlama (repeat) ibarelerine dikkat etmeliyiz. Bu tür kodlamalarla tarayıcıya ve içeriğe göre genişlik ve yüksekliğini otomatik ayarlayan tasarımlar hazırlayabiliriz.
Kaynak:
Tema Tasarım Rehberi
Eline sağlık. Bu aralar Türkçe bölümüne renk geldi :)
Ellerine sağlık Hüsmen =) Aynen serseri daha neler olucak bakalım hep birlikte :)
Nereyi değiştirmek istediğiniz anlamadım. Resim ile anlatırsanız daha iyi olabilir.
faydalı bilgiler. teşekkürler hüsmen.
S e r s e r i, bu dökümanı biraz genel olarak yazdım. Yani normal web sitesi kodlamasında da işe yarayacaktır. SMF Temaları için table'nin uygun olduğu bir yer şuan aklıma gelmiyor. Tamamı div ile yazılabilir. Tamamı div ile yapılacaksa da bir sürü div kullanmayın, bunları mümkün olduğunca azaltarak yazın. Kodlamaya başlamadan önce taslak oluşturmak faydalı olacaktır. Daha sonradan kodlamanız eksik olabilir. Tekrar düzenleme yapmanız gerekebilir.
Teşekkürler harika bir rehber olmuş ellerinize sağlık.. !
Döküman harika olmuş yahu. Ellerinize sağlık.
tema yapımını videolu bir şekild çiziminden style eklemeye kadar kısaca sıfırdan bir tema yapım videolu su yapsanız daha güzel olur bence
teşekkürler. yararlı bir kaynak olmuş .