pillinetwork hesabınızla giriş yapın.

Web önyüzü nasıl olmalı?


\

Web önyüzü(frontend) temel olarak üç öğeden oluşur.


İşaretleme dili
HTML, XHTML, WML gibi işaretleme dilleri. Bunlar sayfanın ana iskeletini oluşturur

Stil dosyaları
CSS. Bunlar ise iskeletin üzerine giydirilen görsel öğeleri belirler.


Dinamik öğeler
JavaScript . JavaScript ise sayfalarda, istemci(client) tarafında dinamik istekler yapmamıza yardımcı olur.


Web önyüz kodlamada yapılan en büyük yanlışlardan birisi de bu üç öğenin birbiri içersinde gereğinden fazla yer almasıdır. Bu üç öğenin etkileşimi kaçınılmaz olsa da, bu etkileşimi en aza indirmek, hem daha güzel/anlaşılır kodlar üretmek, hem de daha hızlı ve kararlı web önyüzleri üretmemizde faydalı olur.

Bu yazıda, nasıl daha standart, anlaşılabilir, güzel, sade web önyüz kodları üretebileceğinizi anlatmaya çalışağım. Bir web önyüzü;


Standartlara uygun olmalı


Web sayfanızda muhakkak, hangi işaretleme dili kullandığınızı belirtin ve kodlarınızı belirtilen bu işaretleme dillerine uygun standartlarda yazmaya özen gösterin.



1
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


Bu örnekte, üretilen işaretleme dilinin, http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd adresinde belirlenen DTD(Document Type Definition/Belge Tipi Tanımlaması)'ye uygun olarak XHTML 1.0 Strict olması beklenir. Tarayıcılar bu bu tanımlamaya uymayan hataların bir çoğunu tolere etse de, bu tolere etme işlemi tarayıcıların ekstra işlem yapmasına, pek hissedilmeyen küçük performans kayıplarına sebep verir.


Dinamik içerikli (verilerin kullanıcıdan alındığı) sayfalarda, bu standartları korumak zor gibi görünebilir. Bu tip sorunlar için, kullanıcıdan gelen verinin HTML Tidy gibi araçlar veya düzenli ifadeler yardımıyla filtrelenmesi, standartları korumanıza yardımcı olur.


Sayfanızın, belirtilen tanımlamaya uygun olup olmadığını http://validator.w3.org/ adresinden denetleyebilirsiniz.




Yine aynı şekilde CSS kodlarını yazarken de W3'ün belirlediği standartlara uygun kodlar yazmalıyız.


"Ama ya Internet Explorer?" dediğinizi duyar gibi oluyorum :). Internet Explorer'ın (özellikle IE6) pazarda bu kadar büyük payının olmasının en büyük ceremesini, web önyüz kodlayıcıları çekiyor. Internet Explorer'ın CSS yorumlama farkları çok canımızı yakar. Ancak ben hâla, Internet Explorer 6 için bile, standartların dışına çıkmadan (veya çok az çıkarak) kodlar geliştirilebileceğinden yanayım.


 Yine de explorer için özel bir CSS yazacaksanız, bunları diğer CSS'lerden ayırın.



1
2
3
4
5
 
<link href="site.css" rel="stylesheet" type="text/css" />



<!--[if lte IE 6]> 

    <link href="ie6.css" rel="stylesheet" type="text/css" />

<![endif]-->


CSS'lerimizin standartlara uygunluğunu da http://jigsaw.w3.org/css-validator/ adresinden yapabiliriz.



XHTML ve CSS konusunda detaylı bilgiye bir çok Türkçe kaynaktan erişebilirsiniz.


Ayrıca, standartlara uygun olarak üretilen kodlar, yazılımcıda garip bir tatmin duygusu yaratır :)


 


Güncel tarayıcıların tümünde sorunsuz çalışmalı


Evet, yazdığımız kod İnternet Explorer 6 için bile sorunsuz olmalı :) Tarayıcılar, çoğu DOM elementini farkli yorumlayabiliyor. Kimi tarayıcıda <body>'nin öntanımlı davranışı {margin:2px; padding:2px;} iken kimi tarayıcılarda {margin:0; padding:0} olabiliyor.

Bunun gibi farkları en aza indirmek için ise reset.css kullanmak. Hazırlanan bu CSS dosyası ile yukarıda belirttiğim sorunların büyük bir kısmı hâllolsa da, tarayıcıların yorumlama farkları, siz standartlara uysanız da hâla devam etmekte. Bunun için ise, yazdığınız kodu güncel tarayıcılarda, ve hatta pazar payı hala yüksek olan antika tarayıcılarda (ie6 :] ) test etmelisiniz.


 

Geliştirme aşamasında anlaşılabilir olmalı


Yukarıda bahsettiğim gibi, üç ana öğeyi olabildiğince birbirinden ayırmanız gerekir. Aşağıdaki XHTML tanımlamasını uygun olarak yazıldığını varsaydığımız kod kötü bir web önyüz koduna örnek olarak incelenebilir



1
2
3
4
 
<div style="display:block; font-size:17px; color:red; _height:100px;"> 

<input type="button" value="Gönder" onclick="if( formDenetimiBasarili()) { birkacIsYap(); formuGonder(); }" style="border:1px solid black">

<!-- bu satırlar arasında 100 tane satır olduğunu düşünün -->

</div>


İlk satırdaki div içinde, div'in görünümünü belirten, yani CSS içinde tanımlı olması gereken kodlar, sadece sayfanın istkeleti olması gereken işaret dilinin içersinde yer alıyor. Üstelik div'in display özelliği zaten block iken tekrar tanımlanmış, üstelik standart olmayan bir _height özelliği kullanılmış.


İkinci satırda ise sayfada dinamik birkaç kontrol yapacak JavaScript kodları, yine işaretleme dilinin içersine konulmuş. Ayrıca yine görünüm tanımlaması vereceğimiz CSS kodları, işaretleme dilinin içersinde yer alıyor. Üstelik XHTML tanımlamalarına göre <input> etiketini kapatmak zorunludur


Üçüncü satırda ise bu satırların arasında 100 satırlık başka bir kod olduğunu hayal edin. Dördüncü satırdaki </div>'in hangi div'e ait olduğunu bulmanız büyük zaman alacaktır.


Aşağıdaki kodu üç ana parçaya bölecek olursak.


Css dosyası



1
2
3
4
5
6
7
8
9
10
11
 
/* Iletisim formunu kaplayan div */

.contactDiv {

   font-size:17px;

   color:red;

   height:100px;

}



/* iletisim formun icindeki dugme */

.contactDiv input {

   border:1px solid #000000; /* renklerin RGB kodlarının yazılması tavsiye edilir */

}


XHTML dosyası


1
2
3
4
5
6
7
 
/* iletisim formundaki dugmeye basilma durumunu takip et*/

$(".contactDiv input").click( function() {

   if( formDenetimiBasarili()) { 

      birkacIsYap();

      formuGonder();

   }

});


Gördüğünüz gibi, işaretleme dilini, stil dosyalarını ve JavaScriptleri ayrı dosyalar haline getirdik.


Kodu daha anlaşılabilir yapan en büyük etkenlerden birisi de yazdığımız yorum satırları oldu. Hem CSS, hem JavaScript hem de XHTML dosyamıza ilgili yorumları yazarak kodu daha anlaşılabilir yapma yolunda büyük bir adım attık.


Örneğin, XHTML dosyasında son satırdaki <!-- .contactDiv --> ise o div'in contactDiv class'lı bir divin sonu oldugunu belirtiyor.


 


Aynı şekilde CSS ve JavaScript dosyalarınızı da olabildiğince anlaşılabilir tutmaya çalışın; genel ve özel olarak ikiye ayırın.


Genel dosyalar, sitenin neredeyse tümünde kullanılan sayfalar için yazılan kodları, özel kodlar ise belli sayfalara özel kodları barındırsın. Örneğin, tüm sayfada <a> elementinin rengini kırmızı yapmak istiyorsunanız bunu "genel" bir dosyaya koyun, yine aynı şekilde sadece iletişim sayfasında çalışmasını istediğiniz bir JavaScript'iniz varsa bunu da "iletisimSayfasi.js" gibi bir isimle kaydedin.


CSS ve JavaScript dosyalarınızın boyutunun büyümesinden endişe ediyorsanız, aşağıda anlatıldığı gibi bunları sıkıştırıp optimize edebilirsiniz.




"Peki bu bize ne kazandırdı?"


1) Kodumuz daha okunabilir hale geldi,yapılan işler ayrıldı. XHTML bilmeyen(veya uğraşmak istemeyen) bir JavaScript programcısı, sadece JavaScript dosyalarını düzenleyebilir hale geldi. Ayrıca yine tasarımcı arkadaşlarımız sadece CSS dosyasına müdahele ederek, sayfamıza istedikleri görünümü verebilmiş oldular.


2) Kod kısaldı. Dinamik bir sayfa oldugunu varsayarsak, XHTML kodu her seferinde değişebilir. Ancak CSS ve JavaScript kodları sabit kalabilir. CSS ve JavaScript kodları tarayıcı tarafında cache'lenebilirken XHTML için bu pek mümkün olmayabilir. XHTML'in kısalması ise bant genişliği masraflarını azaltmaya yardımcı olacaktır.


3) Gururumuz okşandı :)

Gerçek ortamda az trafik harcamalı, hızlı olmalı


Geliştirme ortamında her şey günlük güneşliktir. Hazırladığınız sayfa 100 tane css içeriyor olabilir. 100 kişilik geliştirme ekibiniz olsa bile bu pek sorun teşkil etmeyecektir. Ancak, kodunuz gerçek ortamda çok farklı isteklerle karşılaşacak, anlık gelen 2000 istek sonrasında sistem yöneticileriniz "SUNUCUYA SALDIRI VAAAR" diye haykırabilirler.


Hazıradığınız sayfadaki, harici öğelerin (CSS, JavaScript, resimler vs) her biri için bir HTTP isteği yapılır. HTTP istekleri, sunucu tarafında maliyetli isteklerdir. Yukarıdaki gibi bir örnekte, sayfada hazıraldaığınız 100 css dosyası, sayfanın her ziyaretinde sunucuya 100 istek yapacaktır (korkunç :] ) .Bu istekleri en aza düşürmek için ise uygulamanız gereken birkaç yöntem var.


1) JavaScript ve CSS dosyalarını birleştirin


Elinizdeki CSS ve JavaScript dosyalarını uygun sıra ile birleştirip tek dosya haline getirin. Bunu basit olarak aşağıdaki komut ile yapabilirsiniz.



1
2
 
cat reset.css genel.css anaSayfa.css iletisim.css > tumu.css

cat jquery.js genel.js sayfalar.js > tumu.js


2) Dosyaları sıkıştırın ve optimize edin


Sunucudaki istekleri tek dosyaya indirdik. Artık istek sayımız azaldı. Ama bu tek dosya toplamda 100 kilobyte tutuyor olabilir. Ve bu 100 kilobyte'ın 50 kilobyte'ı yorum satırları veya boş satırlar olabilir. Aşağıdaki iki JavaScript kodu aslında aynı işlemi yapmaktadır.


Geliştirme ortamı kodu: Aşağıdaki kodda kurulan hiyerarşi, yorumlar vesaire pek anlaşılır bir şekilde, olması gerektiği gibi yazılmış.




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
/**

 * Bu kod sunu sunu yapiyor

 * Su event'lari dinleyip, su class'lari cagiriyor

 * Ayrica bu kod su lisansa sahip

 * WEB_GELISTIRICI_LISANSI_1.0

 * Bu lisans sunları sunları gerektirir

 * 

 * params String metin : Ekrana basilacak metni bildirir

 */

sayfalar.iletisim.hata.ekranaBas = function(metin) {

    // gelen metni ekrana basar

    alert(metin);

}





/**

 * baglantinin tiklama isleminde bir hata olusura ekrana bas

 */

$("a").click ( function() {

  //herhangi bir hata olustuysa ekrana hata bas

   if( hataVarMi() ){ 

      sayfalar.iletisim.hata.ekranaBas("Bir hata olustu");

   }

});



Ancak, aslında yukarıdaki kodun yaptığı işi, şu kod aynen yapıyor.
 
1
 
x=function(a){alert(a)};$("a").click(function(){hataVarMi()&&x("Bir hata olustu")});



Yazdığımız CSS ve JavaScript kodları, yorumlardan, gereksiz satırlardan arındırmak ve hatta aynı işi yapan daha kısa kodlar üretmek için çeşitli araçlar mevcut.


Bunlardan birisi Yahoo'nun geliştirdiği YUI Compressor. YUI compressor ile JavaScript ve CSS dosyalarınızı sıkıştırabilirsiniz. Ayrıca Google'ın Google Closure Compiler uygulaması da JavaScript sıkıştırma işleminde gayet başarılı. Ayrıca web üzerinden de kullanılabiliyor


CSS dosyalarınızı optimize etmek için de CSS Optimizer kullanabilirsiniz.


Bu uygulamalar ile, birleştirerek HTTP isteklerinden tasarruf sağladığınız kodlarınızı küçültüp, bant genişliğinden de kazanç sağlayabilirsiniz.


 


3 ) Mümkün olan resimleri birleştirin


Sayfada bulunan "harici" öğelerden birisi de resimlerdir. Sayfanızın tasarımı için kullandığınız her resim, sunucuya yine bir HTTP isteği yapacak, anlık 5000 ziyaret sonrası sistem yöneticileriniz yine çılgına dönecektir :)
Bu resimleri mümkün olduğunca birleştirerek istek saysını azaltabilirsiniz. Bunun için CSS Sprite tekniğini kullanabilirsiniz. Bu teknikle, örnek olarak sayfanızdaki resim olan menü öğelerini, tek bir resme koyup (istek sayısını bire indirip), CSS background-position özelliği ile resmin ilgili yerinin gösterilmesini sağlayabilirsiniz.


4 ) Resimleri optimize edin


Oluşturduğunuz resimleri optimize ederek daha düşük boyutda, neredeyse aynı kalitede resimler sunabilirsiniz.
Bunun için pngcrush veya jpegtan gibi uyuglamaları kullanabilirsiniz. Ayrıca Yahoo'nun SmushIt servisi ile, bu optimizasyonları Web üzerinden de yapabilirsiniz.


5) Mümkün olan her şeyi önbelleğe alın (cache)


   5.1 ) Expires, Cache-Control veya ETags  HTTP başlıkları kullanın


Sunucu tarafında, önbelleğe alınmasını istediğiniz dosyaları (.js, .css) Expires veya cache-control başlıkları ile gönderirseniz, tarayıcı bu dosyalara yapılan istekleri kendi önbelleğine alacak ve ikinci istekte sunucuya gitmeyecektir.
 

   5.2) Cevapları sıkıştırın


İsteklere gönderilen cevapları(response), sunucu tarafında gzip ile sıkıştırarak gönderererek bant genişliğinden tasarruf edebilirsiniz.


   5.3) AJAX isteklerini önbelleğe alın


Eğer sayfanızda, sıkça AJAX isteği yapıyorsanız, bunlar için bir "cache" mekanizması geliştirin. Aşağıdaki gibi bir kodunuz olduğunu düşün.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
/** kullanici verilerini getir */

function kullaniciVerileriniGetir() {

   veri = Ajax.senkronIstekYap("http://sayfa.com/veriGetir.php");

   return veri;

}



/** kullanici resimlerini getir **/

function resimleriGetir() { 

   kullaniciVerileri = kullaniciVerileriniGetir(); // ajax requesti yapacak

   //ancak bu veriyi onbellege alsaydaik bu requeste gerek kalmayacakti





   kullaniciId = kullaniciVerileri['id'];

   resimler = Ajax.senkronIstekYap("http://sayfa.com/resimleriGetir?id="+kullaniciId"); //ajax requesti yapacak

   return resimler;

}


Ama kullaniciVerileriniGetir() fonksiyonu icin bir cache mekanizmasi olusturulsaydi, resimleriGetir() icinde cagirilan kullaniciVerileriniGetir() icin istek yapilmayacakti.

Ornek olarak basitce soyle bir mekanizma gelistirilebilir.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
/** onbellek objesi **/

var cache={};



function kullaniciVerileriniGetir() {

   /** onbellekte varsa istek yapmadan cevabi don */

    if ( cache['kullaniciVerisi'] ) {



    }

    else {

        //onbellekte yoksa, istek yap, onbellege al

        cache['kullaniciVerisi'] = Ajax.senkronIstekYap("http://sayyfa.com/getir.php");

    }



    return cache['kullaniciVerisi'];

}



  5.4) DOM öğelerine yapılan istekleri önbelleğe alın


Sayfadaki DOM öğelerine yapılan istekler de istemci tarafını yorar.
Aşağıdaki gibi bir JavaScript kodunuz olduğunu düşünün.


1
 
$("div.hede span.hodo a[name='hebele']");


Bu jQuery kodu, DOM'daki tüm hede sınıflı div'leri, onun içindeki hodo sınıflı tüm span'ları onun içinde de name özniteliği hebele olan tüm a'ları alacak (Yazması bile ne kadar sürdü :]). Ve bunu sayfada birden fazla yerde kullandığınızı düşünürseniz DOM'da gereksiz yere birden çok kez gezineceksiniz.

Yukarıdaki sorgu sonunda bulunan öğeleri bir değişkene atayarak, işlemleri de bu değişken üzerinden yaparak, her seferinde DOM'da gezinmekten kurtulmuş olursunuz.

1
 
var hebeleA = $("div.hede span.hodo a[name='hebele']");


Kod "Anlamlı" olmalı


Üretilen kod "anlamlı" olmalı. Anlamlı olmalı ki arama motorları ne demek istediğimizi daha iyi anlasın. Örneğin, sayfadaki bir baglantıyı, <a> etiketi yerine istedigimiz herhangi bir elementin click event'ına bir kural belirleyerek de yapabiliriz. Ancak bir <div>'e tıklanınca başka bir sayfaya gitmesi pek anlamlı değildir. Aynı şekilde bir liste kullanacaksak bunları <ul>, <li> etiketleri içersine, bir veri listeleyeceksek de bunu <table> etiketi içersine koymalıyız. (table etiketini tasarım için kullanmaktan çoktan vazgeçtiğinizi varsayıyorum :] ).
Yine aynı şekilde bir haber başlığını <span> içinde vermektense <h1>  içinde vermek daha anlamlı olacaktır. Bu sayede arama motorları ile daha kolay "anlaşa"bileecğiz.

Mümkün olduğunca JavaScript bağımsız olmalı/olabilmeli


AJAX'ın giderek popülerleştiği günümüzde neredeyse her işimizi JavaScript ile yapar olduk. Ancak arama motorları JavaScript'i pek sevmiyor. Aşağıdaki gibi bir kodumuz oldugunu düşünün.


1
2
3
4
5
6
7
 
<a href="#" class="iletisimSayfasinaGit"> Iletisim </a>



------------------------------------



$("a.iletisimSayfasinaGit").click( function() {

    $("#icerikDivi").load("http://sayfa.com/getir.php?iletisim&sadeceIcerik=true") ;

}



Ama bu kod JavaScript desteklemeyen bir tarayıcı (tamam pek yok günümüzde ama) ve arama motorları için pek bir şey ifade etmiyor. Bu kod şu şekilde olsa daha bir anlamlı olur.


1
2
3
4
5
6
7
8
 
<a href="http://sayfa.com/getir.php?iletisim" class="iletisimSayfasinaGit">Iletisim</a>



-------------------------



$("a.iletisimSayfasinaGit").click( function(event) {

   event.preventDefault(); //burada normal sayfaya gitmesini engelledik

   $("#icerikDivi").load("http://sayfa.com/getir.php?iletisim&sadeceIcerik=true");

}


Bu şekilde, JavaScript destekli istemci kullanan kullanıcılar sayfayı AJAX ile çağırabilirken, JavaScript desteklemeyen bir istemciye sahip kullanıcılar ise http://sayfa.com/getir.php?iletisim adresini ziyaret etmiş olacaklar.



Sonuç olarak...


Bu tip birkaç kural ile daha "iyi" web önyüzleri hazırlaybilirsiniz. Yahoo'nun hazırladığı YSlow Firefox eklentisi ile hazırladığınız sayfaların yukarda anlattığım bazı kuralllara ne kadar uyduguğunu da kontrol edebilirsiniz.

Spacer
Spacer
/* Etiketler: , , , , , */
/* osmanyuksel yazdı. 30 Haziran 2010 11:51. 4 yorum var */

Yorumlar

süper bir yazı, kesinlike çok öenmli konulara değinilmiş. tuttum ;)

/* PayPal'dan Türk Bankalarına vize çıktı||Yeni html5 tag'leri ve kullanım şekilleri||jQuery öğrenmek için ideal kaynaklar||Flash kullanmadan sIFR yapımı || PSD'leri HTML'e çevirme rehberi || CSS Sprite'ların kullanılış alanları */
/* basarozcan | 02 Temmuz 2010 09:12 */

Çok iyi bir derleme olmuş elinize sağlık.

/* ftoptas */
/* ceyranci | 02 Temmuz 2010 22:24 */

Bir çok konuyu akıcı ve ayrıntılı bir şekilde ele almışsınız. Elinize sağlık.

/* ths | 03 Temmuz 2010 23:34 */

Çok güzel bir yazı olmuş. Önyüz geliştiricilerinin(frontend developers) başucu yazısı olmuş resmen.

Teşekkürler,

/* kozgun | 28 Temmuz 2010 03:19 */

üye olunpillinetwork sitelerine yorum ekleyebilmek ve daha fazlası için, üye olun ya da giriş yapın.

Bu yazıyı rapor et. Kural dışı içeriğe rastladığınızda editörlerimize rapor ederek müdahale edilmesini sağlayabilirsiniz. (Hangi durumlarda rapor edebilirim?)

Bu site

Nokta ve pilli ortak yapımı olan kodaman.org hep birlikte içerik üretip gelirini yazarları ile paylaştığımız kolektif bir kod yazarları blogudur. Siz de katılabilirsiniz.

pilliilan

Bu siteye ilan vermek 7ytl/gün'den başlayan fiyatlarla

son yorumlar

devamı »

arama

pillinetwork