Tema Tasarım Rehberi

Started by husmen73 (Gulhin), August 16, 2008, 10:45:23 AM

Previous topic - Next topic

husmen73 (Gulhin)

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 ö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
Code (Uzun yazılımı) Select
<?php
if(empty($gelendeger))
echo 'Gelen deger bos';
else
echo 'Gelen deger bos degil';
?>


Code (Önerilen basit kısa yazılımı) Select

<?php
echo empty($gelendeger) ? 'Gelen deger bos' 'Gelen deger bos degil';
?>




Örnek 2:
İki adet değişkenimiz olsun; $gelendeger, $birsey
Code (Uzun yazılımı) Select
<?php
if(empty($gelendeger))
$birsey 1;
else
$birsey 2;
?>


Code (Önerilen basit kısa yazılımı) Select

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

Code (SiNaN tarafından önerilen basit kısa yazılımı) Select

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



Örnek 3:
Üç adet değişkenimiz olsun; $giris, $ziyaretci_adi, $kullanici_adi
Code (Uzun yazılımı) Select
<?php
if(empty($giris))
echo 'Merhaba' $ziyaretci_adi;
else
echo 'Merhaba' $kullanici_adi;
?>


Code (SiNaN tarafından önerilen basit kısa yazılımı) Select

<?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şulsoru işareti$değişken1iki nokta üst üste$değişken2noktalı 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ö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.


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.png

1, 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.png

Gö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; &nbsp;
&nbsp; kullanımına bir örnek vereyim;

<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="altsol">&nbsp;</td>
<td class="altorta">&nbsp;</td>
<td class="altsag">&nbsp;</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
-Kurumsal Kimlik Web Tasarım Hizmeti.
Gülhin Portal Sistemi hakkında yorumlarınızı bekliyorum.
SMF
Referanslar --> http://www.gulhin.com/referanslar-portfoy/
-Web Tasarımı ve Tema Tasarımı Sitesi www.gulhin.com
-TOPLU MAİL GÖNDERİMİ --> http://www.toplumailsms.com
E-Ticaret Sistemi yaptırmak mı istiyorsunuz?

MadBlazer

husmen73 mükemmel bir konu, Tema tasarım öğrenmek isteyenler için (benim gibi :P) çok faydalı olucak.  :)

#Serseri

#2
Eline sağlık. Bu aralar Türkçe bölümüne renk geldi :)

Alpay

Ellerine sağlık Hüsmen =) Aynen serseri daha neler olucak bakalım hep birlikte :)

BuЯЯЯЯaK

Vay Hüsmen'imede böyle bi döküman yakışırdı :)

Eline sağlık .

[SiNaN]

Örnek 1:
Bir adet değişkenimiz olsun; $gelendeger
Code (Uzun yazılımı) Select
<?php
if(empty($gelendeger))
echo 'Gelen deger bos';
else
echo 'Gelen deger bos degil';
?>


Code (Önerilen basit kısa yazılımı) Select

<?php
empty($gelendeger) ? 'Gelen deger bos' 'Gelen deger bos degil';
?>

Üssteki haliyle bir çıktı alamazsınız.
Code (SiNaN tarafından önerilen basit kısa yazılımı) Select

<?php
echo empty($gelendeger) ? 'Gelen deger bos' 'Gelen deger bos degil';
?>


Örnek 2:
İki adet değişkenimiz olsun; $gelendeger, $birsey
Code (Uzun yazılımı) Select
<?php
if(empty($gelendeger))
$birsey 1;
else
$birsey 2;
?>


Code (Önerilen basit kısa yazılımı) Select

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

Code (SiNaN tarafından önerilen basit kısa yazılımı) Select

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


Örnek 3:
Üç adet değişkenimiz olsun; $giris, $ziyaretci_adi, $kullanici_adi
Code (Uzun yazılımı) Select
<?php
if(empty($giris))
echo 'Merhaba' $ziyaretci_adi;
else
echo 'Merhaba' $kullanici_adi;
?>


Code (Önerilen basit kısa yazılımı) Select

<?php
empty($giris) ?  'Merhaba' $ziyaretci_adi 'Merhaba' $kullanici_adi;
?>

Üsttekinde herhangi bir çıktı alınmaz.
Code (SiNaN tarafından önerilen basit kısa yazılımı) Select

<?php
echo 'Merhaba ', empty($giris) ? $ziyaretci_adi $kullanici_adi;
?>


Bunlar dışında harika olmuş Aslanbac, özellikle renklerle alakalı kısmın kendi adıma çok faydalı olduğunu söylemeliyim.
Former SMF Core Developer | My Mods | SimplePortal

husmen73 (Gulhin)

Seninkileride ekleyeyim Sinan, yazdıkların daha iyi :)
-Kurumsal Kimlik Web Tasarım Hizmeti.
Gülhin Portal Sistemi hakkında yorumlarınızı bekliyorum.
SMF
Referanslar --> http://www.gulhin.com/referanslar-portfoy/
-Web Tasarımı ve Tema Tasarımı Sitesi www.gulhin.com
-TOPLU MAİL GÖNDERİMİ --> http://www.toplumailsms.com
E-Ticaret Sistemi yaptırmak mı istiyorsunuz?

jOkErGuEsT

#7
Çok faydalı olmuş, teşekkürler :D
Hatta gaza gelip temayapmaya başlayabilirim :P

Temada dil butonları yerine poll'lar içinde linkleri nasıl yapabiliriz?

husmen73 (Gulhin)

Nereyi değiştirmek istediğiniz anlamadım. Resim ile anlatırsanız daha iyi olabilir.
-Kurumsal Kimlik Web Tasarım Hizmeti.
Gülhin Portal Sistemi hakkında yorumlarınızı bekliyorum.
SMF
Referanslar --> http://www.gulhin.com/referanslar-portfoy/
-Web Tasarımı ve Tema Tasarımı Sitesi www.gulhin.com
-TOPLU MAİL GÖNDERİMİ --> http://www.toplumailsms.com
E-Ticaret Sistemi yaptırmak mı istiyorsunuz?

jOkErGuEsT

Şöyle açıklayayım:
tema/images/english gibi klasörlerdeki resimler yerine butonları link olarak nasıl atarız?

husmen73 (Gulhin)

index.template.php dosyanızı açın,

$settings['use_buttons'] = true;

Bulun ve true değerini false yapın.

$settings['use_buttons'] = false;

eğer temanız bunu destekliyorsa tüm butonlar normal yazı şeklini alacaktır. Desteklemiyorsa tüm butonları ilgili sayfalarına göre düzenlemeniz gerekecek.
-Kurumsal Kimlik Web Tasarım Hizmeti.
Gülhin Portal Sistemi hakkında yorumlarınızı bekliyorum.
SMF
Referanslar --> http://www.gulhin.com/referanslar-portfoy/
-Web Tasarımı ve Tema Tasarımı Sitesi www.gulhin.com
-TOPLU MAİL GÖNDERİMİ --> http://www.toplumailsms.com
E-Ticaret Sistemi yaptırmak mı istiyorsunuz?

jOkErGuEsT

Quote from: husmen73 (Gulhin) on August 22, 2008, 09:16:40 AM
index.template.php dosyanızı açın,

$settings['use_buttons'] = true;

Bulun ve true değerini false yapın.

$settings['use_buttons'] = false;

eğer temanız bunu destekliyorsa tüm butonlar normal yazı şeklini alacaktır. Desteklemiyorsa tüm butonları ilgili sayfalarına göre düzenlemeniz gerekecek.

Çok teşekkürler :)

Peki tema yaparken, bunu direkt kullanırsak sorun çıkar mı? ???

husmen73 (Gulhin)

-Kurumsal Kimlik Web Tasarım Hizmeti.
Gülhin Portal Sistemi hakkında yorumlarınızı bekliyorum.
SMF
Referanslar --> http://www.gulhin.com/referanslar-portfoy/
-Web Tasarımı ve Tema Tasarımı Sitesi www.gulhin.com
-TOPLU MAİL GÖNDERİMİ --> http://www.toplumailsms.com
E-Ticaret Sistemi yaptırmak mı istiyorsunuz?

deejayss

hey gidi günler hey.

Mert Öz

çok iyi bir konu tebrikler emeğine sağlık
Home of Mert Öz
TR Modlar:

XBox Live Gamer Tag | SMF File Manager | SMF Quiz | Casino Mod | Bakers Dozen Pages | Caps Lock Detection on Login Mod | SMF Staff Mod | Guest Attachment Preview | Image on Board | 6 Custom Buttons
My Mods: Takım modu

AkceO

ett gzl bı dokuman olmus elıne saglık

VaTaN84

faydalı bilgiler. teşekkürler hüsmen.

#Serseri

#17
Quote from: husmen73 (Gulhin) on August 16, 2008, 10:45:23 AM2- 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.

Ne gibi durumlarda Table veya Div kullanmalıyız?

husmen73 (Gulhin)

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.
-Kurumsal Kimlik Web Tasarım Hizmeti.
Gülhin Portal Sistemi hakkında yorumlarınızı bekliyorum.
SMF
Referanslar --> http://www.gulhin.com/referanslar-portfoy/
-Web Tasarımı ve Tema Tasarımı Sitesi www.gulhin.com
-TOPLU MAİL GÖNDERİMİ --> http://www.toplumailsms.com
E-Ticaret Sistemi yaptırmak mı istiyorsunuz?

Paragaya

Geri Döndüm :D...... :)

Tp.Net Turkish Moderator... ;)

Advertisement: