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.
<!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.
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.
<link href="site.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 6]>
<link href="ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
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
<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ı
/* 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ı
/* 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.
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ış.
/**
* 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.
/** 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.
/** 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.
<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.
<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.
