Günümüzde, web geliştiricilerin standartlara uygun, erişilebilir ve kullanıcı dostu web uygulamaları geliştirme isteği, web’in doğduğu günden bugüne kadar hiç bu denli kuvvetli olmamıştı. Bu kuvvetli isteği pratikte uygulamanın yolu, web yüzünün, yani kullanıcı tarafının 3 katmana ayrılmasından geçmektedir.

Nedir Bu Katmanlar?

Eskiden beri kod geliştiricileri için söylenegelen bir şey vardır. Bir uygulamaya ait, farklı işlevleri olan kod bloklarını mümkün olduğunca ayırmak gerektiği tavsiye edilir. Günümüz web uygulamalarında bu, kabul gören bir yaklaşımdır. Biz kullanıcı arabirim geliştiricilerin için ise doğru olan, bir web uygulamasına ait içerik (XHTML), sunum(CSS) ve davranışların(Javascript) fiziksel olarak birbirinden tamamen bağımsız 3 katmana ayırmaktır.

Bu katmanlardan ilki, uygulamaya ait içeriği saklayan XHTML katmanıdır. XHTML katmanı üzerine CSS katmanı geçirilerek ortaya içeriğin sunumla birleşmiş hali çıkar. Sonrasında bu iki katman üzerine Javascript (kullanıcı taraflı script dili) katmanı geçirilerek, içeriğe davranışlar eklenir.

Klasik web uygulamaları geliştirme süreçlerine göre içerik, sunum ve davranışların ayrı katmanlarda tanımlanması kullanıcı erişilebilirliğini en üst noktaya taşır. Örneklemek gerekirse, herhangi bir kullanıcı hangi platform ile bu web servisine bağlanıyor olursa olsun, CSS ve Javascript desteğinden yoksun olsa dahi, XHTML katmanına ulaşabilecek ve içeriğe erişebilmesi mümkün olacaktır.

Örnekleyelim

Bu söylediklerimizi ete kemiğe büründürmek adına basit bir uygulama yapalım. Önce ilk katmanımızı, yani XHTML ile içeriğimizi oluşturalım.

<p>Bir Satırlık Paragraf Buraya Gelecek</p>

Şimdi ikinci katmanda içeriğimizi CSS ile sunalım;

p {color:red;}

Dikkat ettiyseniz XHTML içerisinde aşağıdaki gibi satır içi bir tanımlama yapmadık, sunumu XHTML’den ayrı tanımladık.

<p style="color:red;">Bir Satırlık Paragraf Buraya Gelecek</p>

Son olarak da 3. katmanda bu paragraf için bir davranış belirleyelim. Diyelim ki kullanıcı fare ile üzerinde tıklandığında bu paragraf içerisindeki yazı değişsin. Bunu önce klasik satır içi yöntemle yapalım.

<p onclick="this.innerHTML='Paragrafa Tıklandı...';">Bir Satırlık Paragraf Buraya Gelecek</p>

Şimdi bu davranışı 3. katman olarak, fiziksel olarak tamamen ayırarak yapalım.

<script language="javascript" type="text/javascript">
window.onload =function() {
	var paragraflar = document.getElementsByTagName("p");
	for (var i=0; i < paragraflar.length; i++){
			paragraflar[i].onclick = pclicked;
		} 	

	function pclicked () {
		this.innerHTML ="Paragrafa Tıklandı...";
	}
}
</script>

Sonuç

İlk örneğe göre javascriptin bu yaklaşımla çalıştırılması daha zor gibi görünse de, erişilebilirlik ve geliştiricinin kod üzerindeki yönetim kabiliyeti göz önüne alındığında, bu yaklaşımın daha sağlıklı olduğu görülür.

Ek olarak günümüzde yaygın olarak kullanılan Javascript kütüphaneleri yardımıyla bu tarz javascript kodlarının yazılması daha da kolaylaşmıştır.

Bu çerçevede içerik, sunum ve davranışların birbirinden tamamen ayrıldığı web uygulamalarının değişik platform ve koşullar altında kararlı çalışması, erişilebilir olması ve yönetilebilir olması sağlanır.

Örnek sayfaya buradan ulaşabilirsiniz.

Fırından yeni çıkmış yazılardan haberdar olmak için RSS yayınıma abone olabilir ya da beni Twitter'dan takip edebilirsiniz.