Web Tasarım TürkWeb Tasarımı, internet ve yazılım hakkında gönlümüzden geçenler

Bu konuda birden fazla css sıfırlama yöntemi var. Ben Css’in babasının ( Eric Meyer )  kullandığı yöntemi açıklayacağım.

Standart olarak margin ve padding özelliğini sıfırlamak yetiyor. Ancak bazen bu bile yetmiyebiliyor işte tam bu konuda gerçek css sıfırlama kodlarını kullanmakta yarar var.

Eric Meyer’in css sıfırlama kodları

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

/* remember to define focus styles! */
:focus {
outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

/* tables still need ‘cellspacing=”0″‘ in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}

Kullanımı

Yukarıda ki kodları css sayfanızın en üstüne yapıştırıyorsunuz. Bu şekilde tüm etiketler sıfırlanmış oluyor.

Planlama

İyi bir web sitesi önce iyi planlanmış olmalıdır. Her yönüyle planlanmalıdır. Sitenin hedef kitlesine göre rengi, biçimi gibi etmenler göz önünde bulundurularak sektör araştırması yapılmalı, hedef kitlesinin belirlenmesi gibi konular en ince ayrıntısına kadar planlanarak yapılmalıdır.

Tasarım

Ziyaretçinin web sitesinde vakit geçireceği süre sitenin tasarımı ile doğru orantıdadır. Yani bir ziyaretçi web sitesine girdiği anda önce tasarımına bakar daha sonra içeriği görüntüler. Tasarım konusunda web’te genelde yumuşak(soft) renkler kullanılır. Ziyaretçilerin içeriği hem kolay görüntüleyebileceği hem de navigasyonları sayesinde hızlı bir şekilde bilgi alabileceği türde olmalıdır. Kurumsal sitelerde, abartıya kaçılmamalı sade ve kullanılabilirlik göz önünde bulundurularak hazırlanmalıdır.

Yazılım

Web sitesi kullanıcıyla etkileşime geçmelidir. Sunucu kaynaklı veya bulunamayan sayfa sorunları kullanıcıyı olumsuz yönde etkiler. Kullancıyı doğru yönlendirecek navigasyonlar oluşturularak, hem kullanıcıyla etkileşime geçilmeli hem de kolaylık sağlanmalıdır. Öte yandan güvenlik konusunda en ufak taviz verilmemelidir. Yazılım güvenlik açığı bulundurmayacak şekilde hazırlanmalıdır.

Domain

İçerik ile ilgili bir alan adı(domain) seçilmelidir.  Alan adı çok uzun olmamalı ve akılda kalıcı olmalıdır.

Sunucu

Bulunduğunuz sunucu olabilecek saldırılara karşı temkinli olmalıdır. Hızlı olmalıdır.Periyodik aralıklarla sitenin yedekleri alınmalıdır.

Web Tasarımında hazır şablon kullanımı

Çevrede gözlemlediğim kadarıyla web tasarımı yapan ajansların bir bölümü hazır şablonlar kullanarak web sitelerini hazırlıyorlar. Bence bu tür ajanslar Türkiye’de internet ortamının gelişimize zarar veriyorlar. Muhtemelen mesleki etikten de bir haberdirler.

Ülkemizde web standartları yeterince önemsenmiyor. Her zaman için şu zihniyet var “Benim bir işime yaramıyor web standartları, müşteri ne anlar web standartlarından, ben siteyi yapar geçerim kareşim”. Bu zihniyetle hiç bir zaman profesyonel işler yapılamaz. Ancak belli seviyede işler çıkar.

Her iş kolunda olduğu gibi web tasarımda da belli standartlar var ve bu kurallara uymak zorundayız. Bir web sitesinin web standartlarına uygun olması, xHTML ve Css kod hiyerarşisinin düzgün yazılmış olduğunu bize gösterir.

Tasarımlar özgün olarak yapılmalı, proje planlamaları baştan sona ayrıntılı belirlenmeli. Hedef kitle analizi çıkartılmalıdır. Sitenin yazılım kısmında ise fonksiyonel olmalı ve güvenlik açığı olmamalıdır.

Bir sonraki yazıda iyi bir web sitesinin nasıl olması gerektiğini açıklamaya çalışacağız.

Div etiketleri

web tasarımın en önemli etiketlerinden biri.

Div etiketleri xHTML ile birlikte yaygın bir şekilde kullanılmaya başladı. Eski kitaplarda div’lerin asalak nesneler olduğu yazmakta. Buna tamamen katılıyorum. Div’lerin tek başına bir özelliği yoktur. Yani bir tanımlama yapmadıkça sayfa içerisinde bir şey ifade etmiyor.

Bu etiket, bizi gereksiz kod yığınından kurtarıyor. Günümüzde web standartlarına uygun siteler div etiketleri ile hazırlanır. Div etiketleri ile istenmeyen satır, sütunlarla uğraşmak yerine tam istediğiniz gibi bir arayüz hazırlayabiliyorsunuz.

Div etiketi yazılışı:
<div>Deneme</div>

Yukarıdaki örneği kod editörünüze yazıp, tarayıcı’da önizleme yaptığımızda sayfada sadece deneme yazdığını göreceğiz. Yani div’in başta da bahsettiğimiz gibi tek başına bir anlamı yok.

Örneğimizi id yapısı ile geliştirelim:

<html>
<head>
<style>
#deneme{background-color:red; height:250px;}
</style>
</head>

<body>
<div id=”deneme”>Deneme metin</div>
</body>
</html>

Yukarıda ki örneğimizi tarayıcı’da önizlediğimiz zaman arka planı kırmızı olan ve yüksekliği 250px değerinde olan bir div oluşturduğumuzu göreceğiz.

Merhaba,

Bugün, günümüzde de sık sık tartışması yapılan “tablolu tasarım” konusunu ele alacağız.

Tablolu tasarım sürecinden bahsetmek istiyorum;
Tablolu tasarım yıllaaa…r yılla…r önce html ile ilk web sayfaları yaparken kullanılıyordu. Bunun nedeni ise kullanımının çok basit olmasıydı.

Tablo’da istediğimiz zaman ek bir kod yazmadan sütun ve satır ekleme gibi işlemleri rahatça yapabiliyoruz. Dahası da var; tabloyu çekiştirerek boyutlarıyla oynayabiliyoruz, özellik panelinden dilediğimiz özellikleri kolayca atıyabiliyoruz vs.

Ancak işin bir de web standartlarına uygunluk boyutu var. Eğer kaliteli bir web sitesi istiyorsak bunu gözardı edemeyiz.

Web standartlarının temel mantığı “az kod çok iş” mantığıdır.

5 sütunlu 3 satırlı bir tablo çizdiğinizi düşünelim. Siz bir tablo oluşturduğunuzda beraberinde <tr>(satır), <td>(sütun) tablonuza eklenecek. Kaynak kodlarınıza baktığınızda ise sadece bu tablonuzun en az 20 satırlık bir kod bütününden oluştuğunu göreceksiniz. Bu bize neden tablolu arayüz geliştirmemiz gerektiğini açıklıyor aslında.

Neden tablolarla web sitesi yapılmaz sorusuna cevaplar:

1. Web Standartlarına uygun olmaz.
2. İleride sayfaya eklemeler yaptıkça, sayfa içerisinde ki nesnelerin kaydığınız göreceksiniz
3. Tarayıcı uyumsuzluğu yapar
4. Eğer google’dan ziyaretçi bekliyorsak, google tüm web sayfasını tablolu yaptığımız için sitemizi üst sıralarda çıkarmayacaktır. Nedeni ise kaynakta çok fazla kod olması.

Şimdi bu yazıdan “web sayfalarında tablolar kullanılmaz, gereksizdir” gibi bir şey anlamayın sakın ha!. Bu söz konusu bile olamaz. Tablolar tabii ki gerekli yoksa <table> etiketi neden varolsun öyle değil mi?.

Tablolar gerekli ancak tüm web sitesi tablolarla yapılmaz.

Tabloların çeşitli kullanım alanları var bu kullanım alanlarından biri de formlar. Sitelerde gördüğümüz iletişim formları veya benzer formlar tablo oluşturularak yapılmıştır.

Şimdi biz nasıl arayüz geliştireceğiz o zaman yani tablo kullanmadan nasıl yapacağız.

<div> etiketiyle yapacağız. Bir sonraki yazı’da div etiketinden bahsetmeye çalışacağım.

Meta etiketler <head> etiketleri arasında yazıldığından sayfa içerisinde var olan ancak ziyaretçi tarafından görüntülenmeyen içeriklerdir.

Bir web sayfasında olması gereken temelde 2 meta etiketi vardır.

1- Description(açıklama)metni

Google arama sonuçlarında sitenizin tanıtımını yapan bir kaç cümlelik bir yazı. Bu yazı sitenizi tanıtıcı şekilde olmalıdır. Altta ki resimde çizili olan metin sitenizin açıklama metnidir.  Başlığın hemen altında görünür.

Nasıl yazılır?

<html>
<head>
<meta name=”description” content=”Sitenizin tanıtınımı yapan bir kaç cümlelik yazı” />
</head>
<body>
</body>
</html>

2- Keywords(anahtar kelimeler)

İnternet siteniz belli bir amaca hizmet ediyor ve belli bir hedef kitlesi var. Bu hedef kitleniz ile ilgili gireceğiniz kelimeler sizin anahtar kelimelerinizdir.

Anahtar kelimeler nasıl seçilmeli?

Anahtar kelimeler sitenizin içeriğine göre spam yapmadan seçilmelidir.

Örnek ile açıklayalım;

Ev yemekleri içeriği barındıran bir siteniz var.

Bu sitenizin anahtar kelimeleri şöyle örnekleyebiliriz.

“ev yemekleri,yemek tarifleri,ev yemekleri sitesi, pratik yemek tarifleri”

Anahtar kelime etkiketi nasıl yazılır?

<html>
<head>
<meta name=”keywords” content=”anahtar kelimeleriniz.” />
</head>
<body>
</body>
</html>

Önemli!
Anahtar kelimeleriniz için yazacağınız meta etiketinde ki sözcüklerinizin arasında virgül olmalıdır. Aksi halde arama motorları sizi spam olarak algılayabilir.

İd nedir?

İd terimi Türkçesi ile kimlik:

Biz herhangi bir etikete tanımlama yapmak istediğimiz zaman ona bir kimlik atarız.  Aynı zamanda Bu kimliği css, javascript gibi dillerde çağırıp ona belli parametreler vererek hükmedebiliriz. İd yapısı xHTML ile birlikte hayatımıza girdi. HTML’de ise bunun yerine name yapıları kullanılıyordu ki günümüzde artık neredeyse hiç kullanılmıyor.

İd ve Class yapılarında tanımlama yaparken, parametrelerde Türkçe karakter, boşluk, üst karakterler tuşları vb özel karakterleri kullanmamız gerekiyor. Kimlikler çağırılırken “#” sharp ve yanına kimlik ismi ile çağırılıyor.

Örnek olarak bir div’e kimlik atayalım.

<div id=”deneme”>Deneme</div>

Bu şekilde herhangi bir etikete id veya class atıyabiliyoruz.

Kullanımı:

Kimlik veya Class tanımladığımız etiketlere başta da bahsettiğim gibi ulaşabiliyoruz nasıl ulaşacağız ondan bahsetmeye çalışalım.

<html>
<head>
<style>
#deneme{font-size:22px;}
</style>
</head>
<body>
<a id=”deneme”>Deneme</a>
<body>
</html>

Yukarıda gördüğünüz gibi HTML normalde <a> etiketinin varsayılan font boyutu olarak 12px’de çalıştıracaktı ancak ben o etikete kimlik atıyarak, css ile bir stil atadım.

Class yapısı

Class terimi Türkçe tabiri ile sınıf. Sınıfları kimliklere benzetebiliriz aralarında tek bazı farklar vardır. Sınıflar “.” nokta(dot) operatörü ile çağırılır.

İd ve Class arasındaki fark
Sayfa içerisinde yaptığımız tanımlamayı yalnızca bir kez kullanacaksak İd, sayfa içerisinde yaptığımız tanımlama birden çok yerde kullanılacaksa class ile tanımlama yapmalıyız.

Son olarak Class ile küçük bir örnek verelim.

<html>
<head>
<style
.baslik{color:#f09;}
</style>
</head>
<body>
<h1 class=”baslik”>Sayfa başlığım</h1>
<h1 class=”baslik”> İkinci sayfa başlığım</h1>
</body>
</html>

Yukarıda gördüğünüz gibi sınıfları bir kez tanımlayıp birden çok yerde kullandım.

Bir sonraki makalede görüşmek üzere…

HTML, statik programlamanın tabir-i caizse yapı taşıdır. xHTML ise HTML’in daha geliştirilmiş hali diyebiliriz. Yani burdan şunu çıkarabiliriz. xHTML’in temelinde HTML etiketleri vardır.

HTML ve xHTML arasında ki farklar neler?

HTML’in kullanımı xHTML’e göre daha basittir, HTML ufak tefek yazım yanlışları olsa da kod bütününü düzgün çalıştırır. Ancak xHMTL’de kodları anlamlı ve yanlışsız yazmanız gerekiyor.

1 – Etiket kapanışları

xHTML’de etiketleri kapatırken ” />” yani bu şekilde kapatıyoruz.

HTML’de ise direkt “>” işaretini kullanarak etiketleri kapatabiliyoruz.

Örnek verelim;

HTML
<img src=”resimyolu.resimuzantisi” width= height=>

xHTML’de
<img src=”resimyolu.resimuzantisi” width=”Genişlik değeri” height=”Yükseklik değeri” />

Yukarıda görebileceğimiz gibi ufak tefek yazım farklıkları var. HTML’de etiketlere girilen parametreleri tırnak içine almıyoruz. Ancak xHTML’de bu değerler tırnaklar içerisinde yazılır. Yine yukarıda yazdığımız üzere etiketler kapanırken ” />” kullanıyoruz.

2- Etiket ve parametreler küçük harfle başlamalı

Örnek;

HTML
<TABLE WIDTH=100 BORDER=1>
<TR><TD>Sütun içerisine yazı</TD></TR>
</TABLE>

xHTML
<table width=”100″ bordeR=”1″>
<tr>
<td>Sütun içerisine yazı</td>
</tr>
</table>

3- Düzgün bir yapı

xHTML’de hiyerarşik yapı düzgün yazılmalıdır.

Örnek;

HTML
<u><div>Yapı web standartlarına uygun değil!</u></div>

xHTML
<div><u>Yapı web standartlarına uygun</u></div>

4- Resimlere başlık girilmelidir.

xHTML’de resim etiketlerine başlık parametrelerini eklemek zorundayız.
Örnek;

HTML
<img src=”resimyolu.uzantisi”>

xHTML
<img src=”resimyolu.uzantisi” alt=”Resim üzerine gelince çıkacak tanıtım metni” />

Bir sonra ki yazımda İd ve Class yapılarından bahsetmeye çalışacağım.

Yorumlarınızı bekliyorum.

Her iş alanında olduğu gibi web ortamında da standartlar var. Peki ne için bu standartlar var? bunun cevabı “erişilebilirlik“.

Erişilebilirliği biraz daha kavrayalım;

1. Kullanıcı Etkileşimi: Web Siteleri kullanıcıyla etkileşime geçerken çeşitli navigasyonlar kullanırlar, bunlar bir menü, bir yönlendirme çubuğu, bir yazı, bir resim vs olabilir. Örneklendirmek gerekirse; kullanıcıya yol göstermesi açısından yazılarımıza link ekledik. Kullanıcı mouse ile link eklediğimiz alanın üzerine geldiğinde mouse iconumuz (varsayılan değerler değiştirilmediyse) el işaretine dönüşecek ve kullanıcı o alanın bir link olduğunu farkedecek.

Bu sayede kullanıcı site’de dolaşırken üzerine geldiğinde el işareti çıkan her alanda link olduğunu algılayabilecek. Biz burda kullanıcıya yol göstermiş oluyoruz yani bir anlamda etkileşime geçmiş oluyoruz.

2. Arama Motorlarına Bakış(Bulunulabilirlik): Mükemmel bir web sitesi yaptığınızı varsayalım, tasarım olarak kullanıcıyı etkilemesi için tamamen flash ile hazırladınız, hem de çok fonksiyonel ve kullanıcıyla en iyi şekilde etkileşime geçebiliyor. Ancak bir sorun var! Sitemiz flash tabanlı çalışıyor. Flash embed dediğimiz sıkıştırma teknolojisini kullandığı için arama motorları Flash sitelerin içeriğini indexleyemiyor(sonuç dizinine kayıt edemiyor). Kayıt edemediği için de dolayısıyla arama sonuçlarında gösteremiyor.

Örneklendirmek gerekirse; yemek tarifi ile ilgili bir sitemiz olduğunu varsayalım. Bu sitemizin içeriği ile ilgili olarak hedef kitlesi ev hanımları olacaktır. Bir ev hanımı ise arama motorlarında yemek tarifi bakacağı zaman arama çubuğuna “yemek tarifi” yazacaktır. Biz bu aramalarda ne kadar üst sıralarda çıkarsak, sitemiz arama motorlarında o kadar bulunulabilir anlamına gelir.

Eğer arama motorlarını önemsiyorsak onları dikkate alarak anlamı kod yazmalıyız.

3. Anlamlı Kod Yazmak: Bu konu için ayrı bir makale yazmayı düşünüyorum o yüzden yüzeysel olarak anlatacağım. Web Standartların’da kullanılan ana programlama dil’leri XHTML ve CSS’dir. Sitemizi yaparken en az kodu yazarak en fonksiyonel sistemleri üretmeliyiz. Ne kadar az ve anlamlı kod yazarsak sunucuya giden istemci de o kadar az olacaktır. Az kod çok iş mantığıyla sayfa geçiş hızlarını arttırmanız bile mümkün.

Örneklendirelim; Sayfamızda başlığımız olduğunu varsayalım ve bu başlık altında bir paragraf yazı, yazının altında da da devamını okumamız için bir link.
Verdiğim örnek çok farklı şekillerde yapılabilir ben iki şekilde açıklayacağım.

Anlamsız ve fazla kod kullanarak:
<h1>Sayfa başlığımız</h1><br /><br />
<a>Bir paragraf yazı</a><br/ ><br />
<a href=”#”>devamını okuyun</a>

Anlamlı ve en az kod kullanarak:
<h1>Sayfa Başlığımız</h1>
<p>Bir paragraf yazı</p>
<a href=”#”>devamını okuyun</a>

Yukarıda gördüğünüz gibi bir satır aşağı atlamak için br komutu kullanılabilir ancak xHTML’de bunun için zaten bir etiket var o da paragraf etiketi olan <p> etiketi. Satır atlatmak için artı kod yazmak yerine doğru etiketi yazarak  hem anlamlı bir kod bütünü yazmış oldum hem de boyuttan tasarruf ettim.
Görüşlerinizi bekliyoruz.
Teşekkürler

Merhabalar,

Web Tasarım Türk’ün blog sistemini aktifleştirdik. Blog’da web tasarımı, yazılım, css,internet, web standartları, web teknolojileri gibi konularda sizlere özgün bilgiler vereceğiz.

Öncelikle blog kavramından bahsetmek istiyorum: Blog sistemleri 2000′li yılların başından itibaren yaygınlaştı, blog teriminin anlamı bambaşka iken günümüzde değişime uğramış olup, günlük olarak adlandırılıyor.

Alt yapısına gelince; bu harika sistemin alt yapısı WordPress, tasarımı ise bize ait (temayı  düzenledik).  Sade ve kullanışlı bir arayüz hazırlamaya çalıştık, umarım beğenirsiniz.

Şimdilik bu kadar…