HTML Cambazlıkları

Dinamik HTML’e Hoşgeldiniz!

Dinamik HTML’e Hoşgeldiniz!

Gerçekte dinamik HTML diye bir şey olmadığını söylersek, Web tasarımcısı olarak hayalleriniz yıkılmaz, herhalde! Dinamik HTML başlığı altında ele alabileceğimiz herşeyi, yukarıda “Duragan HTML” unsurları arasında gördük bile: Script ve CSS.

Script, Browserların 100’e yakın kelime içeren HTML diline, yeni kelimeler kazandıran bir ek sözlük gibidir. Javascrip veya VBScript, programlama dili olarak, Browser ve onun vasıtasıyla Windows, Unix veya MacOS tarafından yorumlanarak anlam kazanırlar. “Yorumlanan” dil, işletim sistemine bir yorumlayıcı eklenmesini gerektirir. Mesela C dili ile yazdığınız bir programın yorumlanması gerekmez; çünkü bu program, işletim sisteminin istediği ve anladığı bütün komutları bilir. Oysa Javascript veya VBScript komutunun, Browser’a bir iş yaptırtabilmesi için önce tercüme edilmesi, yorumlanması gerekir. Bu zorunluk gerçi Script dili ile yazılmış “program” veya “programcığın” yavaşlamasına yol açar, ama Script dilleri genellikle türetildikleri programlama dilinden daha basittir ve daha kolay öğrenilir.

Web’de gerçekten usta bir tasarımcı olmaya niyet eden kişinin, HTML’den hemen sonra, belli başlı iki Browser’ın da ortak Script dili olan Javascript’i derhal öğrenmesi gerekir. VBScript öğrenmek, aktif ve ziyaretçi ile etkileşmeli yeni bir Server teknolojisi olan ASP (Active Server Pages) öğrenmeye ve uygulamaya kararlı kişiler için daha çok kazançlı olacaktır; ancak Netscape bugünkü haliyle VBScript komutlarını tanımamaktadır. Sitesini her iki Browser’ı da kullanan ziyaretçileri dikkate alarak tasarlayan bir Web ustasının, Browser için Javascript, Server için VBScript öğrenmekten başka çaresi yoktur.
“Öğrenmek” dediğimiz zaman, bundan, bilgisayar okullarında öğretildiği tarzda aylar süren bir formel eğitimle bir programlama dilini öğrenmeyi kastetmiyoruz. Çoğu zaman bu iki dilin de nerede ve nasıl kullanıldığını ve bu dilin komutlarının sentaksını (cümle kuruluşunu) öğrenmek yeterlidir. Internet’te istemediğiniz kadar çok bulacağınız Script’leri, kendi sitenize uyarlarken nelere dikkat edeceğinizi bilmeniz gerekir. Bir yerde unutulan bir tırnak, eşittir yerine iki nokta üstüste, ve benzeri mini-mini hatalar yüzünden, bir Script beklediğiniz sonucu vermeyebilir. Bir Web tasarımcısının Script dili öğrenirken amacı, o dili kullanarak, etkileşmeli oyun programı yazmaktan çok, sitesine dinamik unsurlar kazandırmak için yeterli düzeyde, en temel komutları ve bunların yazım tekniğini öğrenmekten ibarettir.

Dinamik HTML tekniğine dayanan Web sayfası ile yapılabilecek işlerin zirve noktalarından birini www.htmlguru.com adresinde görebilirsiniz. Sayfalardaki hemen her unsurun görsel olduğunu, buna karşılık metinle yapılabilecek hiç bir işlemin grafiğe yüklenmediği ve dolayısıyla sayfaların siteden ziyaretçinin bilgisayarına aktarılması için gerekli zamanı asgaride tutan, yine de ziyaretçinin ekranına yansıyacak herşeyi ziyaretçinin talebine bırakan bir dinamizme sahip bir sayfa on adımda elde edilebilir. Buna isterseniz, DHTML’in anayasası da diyebilirsiniz:

1. Kağıt üzerinde hazırlık: Fikrinizi önce kağıda dökün; reklam ajanslarının reklam filmi yaptığı gibi bir senaryo şeması çıkartın. Bu, birinci sayfadan sonuncuya kadar, sitenizdeki bütün sayfaların ekran görüntüsünü kağıt üzerinde resmetmek demektir.

2. Teknikleri belirleme: Hayalinizdeki sitenin oluşumu için kullanılacak teknikleri belirleyin; zayıf olduğunuz tekniklerde kimden yardım isteyeceğinizi düşünün. Günümüzün Web teknolojisi, grafikçinin programcı, metin yazarının grafikçi olmasını gerektiriyor ve kolaylaştırıyor. Hayatında bir suluboya resim yapmamış kişi bile bir grafik programı ve telif hakkından vazgeçilmiş bir kaç grafikle yola çıkabilir ve ortaya en görkemli Web sitelerinde kullanılabilecek kalitede grafikler çıkartabilir. Bu tür bir el yatkınlığını elde etmek için, bol bol alıştırmak yapmak gerekir. Alıştırmanın zamanı ise Web sitesinin çatısını çatmaya başlamadan öncedir.

3. Donanım ve yazılım denetimi: Hayalinizdeki sitenin oluşturulması için gerekli grafik programları, HTML editörü, site yönetim programı, kelime-işlem programı bilgisayarınızda yüklü mü? Bilgisayarınız bu programların hepsini aynı anda çalıştıracak (ve çökmeyecek) RAM, sanal bellek, sabit disk ve grafik kartı ve ekrana sahip mi?

4. Grafik hazırlama: Kullanacağınız grafik unsurları hazırlayın. Zemin grafiği, ziyaretçilerinizin sayfalarınız arasında gidip gelmesini sağlayacak Navigation (seyir) düğmeleri olarak kullanılacak grafikler, içeriğin gerektirdiği grafikler, başlıklar, süsleme unsuru olarak kullanılacak resimler, sabit diskte, belirli bir yerde toplanmış durumda mı? Bu iş söylendiği kadar kolay değildir. Birinci maddede çizdiğiniz sayfa görüntülerinin gerektirdiği bütün unsurları biraraya getirip, telif hakları ile ilgili sorunları halletmek zaman alır. Ayrıca bütün grafiklerinizde aynı tür isimlendirme tekniğini uygulayın: ya hepsinin adı büyük harfle, ya da hepsinin adı küçük harfle yazılsın. Günün birinde dinamik sayfanızda zemin grafiği yerine kırmızı çarpı işareti görmek istemiyorsanız, sitenizin duracağı Server’ın dosya adları konusunda büyük harf-küçük harf ayırt edip etmediğini şimdiden bilmeniz gerekir.

5. Stil belirleme: Sitenizde uygulanacak metin, başlık ve diğer biçimlendirme stillerini belirleyin: Başlıklarınız arasında kavram sıralaması yapın ve yukarıdan aşağı doğru, bütün unsurlarınıza nasıl şekil vereceğini tayin edin. Bunların gerektirdiği stilleri, bir CSS dosyası olarak yazın. CSS dosyası, düz yazı dosyasıdır ve herhangi bir düz yazı programı ile oluşturulabilir. CSS yöntemiyle, HTML’in temel etiketlerinin stillerini değiştirebileceğiniz gibi, kendi vereceğiniz adla kendi stillerinizi oluşturabilirsiniz.

Bir CSS Örneği:

Düz yazı dosyası ile oluşturabileceğiniz bir Cascading Style Sheets örneği:
/*
New CSS file
*/

#turkuaz{
BackGround : AquaMarine ! important;
Font : 100%;
}

.Koyumavi{
BackGround : Beige ! important;
Color : DarkBlue ! important;
Font : bold xx-large/1 Sans-Serif, Arial ! important;
}

.Mavi{
Color : #0000FF ! important;
Font : inherit inherit/inherit Sans-Serif ! important;
}

body, p{
Color : #008080 ! important;
Font : normal normal 100%/1 Sans-Serif, Arial ! important;
}

H1{
Color : #800080 ! important;
Font : oblique xx-large/1 Serif, ‘Times New Roman’ ! important;
Text-Align : center ! important;
Text-Decoration : underline ! important;
}

Web dilinde stili belirlenebilen etiketlere Selector denir. Bu CSS dosyasında, bir ID (kimlikli) türü, iki Class (sınıf) türü Selector tanımlanıyor; iki HTML Selector’ü, varsayılan değerleri yerine yeni biçimlere kavuşturuluyor.

ID türü Selector’ler, adlarının başındaki # işaretinden tanınırlar ve HTML belgesinde kendilerine kimlikleriyle atıfta bulunularak, herhangi bir etikete biçim vermekte kullanılırlar. Örneğin, buradaki “#turkuaz” adlı ID Selector’ünü bir katmanın içindeki yazıyı biçimlemek üzere kullanmak isterseniz, HTML kodunuz şöyle olacaktır:

<BODY>
<P>HTML programcılığının temel ilkesi:</P>
<SPAN ID=turkuaz”>Hiç yılmadan çalışmak ve öğrenmek; sonra herşeye yeniden başlamak</SPAN>
<P>Bu ilkeyi benimseyen, sadece başarılı HTML programcısı değil, her işte başarılı bir bir kişi olur</P>
Buradaki katman etiketi SPAN’ın içindeki metni biçimlendiren, “turkuaz” adlı Selector başka hiç bir şey yapmayıp sadece biçimlendirdiği unsura aquamarin arkaplan rengi verecektir.
“Class” sayılan Selector’leri, mevcut herhangi bir HTML biçim etiketi ile birlikte kullanılabilir: p.mavi, H2.koyumavi gibi. “Mavi” sınıfı Selector ile birleştirilen HTML Selector’ü, “mavi” sınıfının özelliklerini alır. Buradaki örnekte “.mavi” Selectörünün harf rengini mavi yapmaktan başka bir özelliği yok: diğer bütün stil özelliklerini “inherit” ediyor, yani bağlandığı ve değiştirdiği HTML Selectror’ünden miras alıyor. Burada gördüğünüz “! Important” ifadesi ise Browser’a, ziyaretçi kendi bilgisayarında Browser ayarlarını değiştirmiş bile olsa, bilgisayar sahibinin değil, bizim verdiğimiz değerlerin geçerli olması gerektiğini bildiriyor.
CSS yoluyla, HTML’in kendi stil belirleyebilen etiketlerini, veya teknik adıyla HTML Selector’lerini de yeniden biçimleyebiliriz. Normal olarak HTML’in H1 başlığı sağa yatık bir harfle görüntülenmez; ancak “stillerim.css” dosyasını bağladığınız her Web sayfasında H1 başlığı, italik, çok büyük ve Times Roman olacaktır.
Stil kağıdı, herhangi bir isimle kaydedilebilir; fakat dosya adının uzatması, tercihan “.css” olmalıdır. Bir CSS dosyası, HTML sayfasına HEAD etiketi içinde LINK etiketiyle bağlanır. Diyelim ki bu dosyayı “stillerim.css” adıyla kaydettiniz.Bu dosyayı HTML sayfasında şöyle bağlamanız gerekir:
<HTML>
<HEAD>
<TITLE>Stil kağıdı bağlama örneği</TITLE>
<SCRIPT LANGUAGE=”Javascript”>……</SRIPT>
<LINK REL=stylesheet TYPE=”text/css” REF=”stillerim.css”>
</HEAD>
…….
Bazen bir sitede birden fazla aslî stil belgesi olabilir. Bazı sayfalara “stillerim1.css” dosyasını, bazı sayfalara “stillerim2.css” dosyasını bağlayabilirsiniz.

6. Script dosyası oluşturmaya başlayın. Tıpkı CSS gibi, HTML sayfasının Script bölümü de dışardan dosya olarak HTML’e bağlanabilir. Başkalarının sitelerinde gördüğünüz Javascript programlarını çok hoşlandınız diye alıp, kullanamazsınız. “Kim görecek!” diye düşünmek en azından ahlakî bir tutum olmaz. Ayrıca buna ihtiyaç da yok. Bir kere başkalarının sayfalarındaki Javascript bölümleri, büyük bir ihtimalle açıklama ve yorum satırları içermediği için içinden çıkılması imkansız olabilir. Oysa Web tasarımcılarına, kullanılmaya hazır, hemen her fonksiyonu yorum satırları ile açıklanmış, telif hakkı sorunu olmayan Javascriptler sunan binlerce Internet sitesi bulabilirsiniz. Bu tür yerlerden edineceğiniz güvenli ve anlaşılır Javascript’leri, sabit diskinizde biriktirebilirsiniz. Ayrıca büyük bir ihtimalle Javascript öğrenmek için alacağınız kitabın da içi binlerce örnekle dolu bir CD-ROM’u olacaktır!

7. Microsoft Internet Explorer ve Netscape Navigator başta olmak üzere yaygın Web Browser programlarını özelliklerini, benzerliklerini ve farklılıklarını öğrenmeye başlayın. Dinamik HTML adı altında yer alan tekniklerin çoğu, IE veya Netscape’in Belge Nesneleri Modeli adı verilen ve bir açtıkları bir pencerede görüntüledikleri bir Web sayfasının özelliklerini nasıl tanıdıkları ve hangi komutlarla değiştirdikleri bilgisine dayanır.

Bir örnekle bu karmaşık kavramı açalım: HTML’de tablo oluşturmak için <TABLE></TABLE> etiketlerinin içini doldurmanız gerektiğini biliyorsunuz. Fakat IE için bir tablonun 22 adet belirlenebilir özelliği varken, Netscape bir tablonun sadece 9 özelliğinin belirlenebilmesine izin verir. Bu yüzden TABLE etiketinin içinde, mesela BORDERCOLORDARK=”koyu-renk” ve BORDERCOLORLIGHT=”açık-renk” unsurlarını kullanacak olursanız, IE’de tablonuzun dış çerçevesinin üst ve sol kenarı koyu-renk yerine yazdığınız renkle, alt ve sağ kenarı ise açık-renk yerine yazdığınız renkle görüntülenir; sitenizi Netscape’i kullanarak ziyaret edenler ise tablonun tüm çerçevesini tek renk olarak görürler. İki Browser arasındaki farklar, bu kadar “zararsız” olsa iyi! Örneğin, ziyaretçilerden bilgi derlemekte kullandığınız formların vazgeçilmez ögesi INPUT etikeketi, IE’de 21 adet belirlenebilir özelliğe sahip ve bunlardan birini kullanarak, formunuzdaki INPUT kutusunu bir veritabanından alınacak bilgi ile doldurtmak isteyebilirsiniz. Bu, özellikle dinamik bir sayfada, ziyaretçinizin size daha önce bildirdiği bazı bilgilere, bazı tercihlere dayanıyor olabilir. Oysa ziyaretçiniz, Netscape kullanıyor ise, sayfanız bu dinazmden yoksun kalacağı gibi, formdaki eksiklik, ziyaretçiye tasarımcı olarak sizin hatanız gibi görünebilir.

İyi bir Web tasarımcısı, bu sebeple her iki programı çok iyi tanımak ve farklarını bilmek zorundadır. Güvenli yol, iki Browser’ın asgarî ortak noktalarına hitap etmektir. Bu, bazen Web sayfanızın daha az dinamik, daha az hareketli, daha az marifetli olmasına yol açacaktır. Ama iyi bir Web tasarımcısı, ziyaretçilerine hangi Browser’ın daha iyi olduğuna dair ders vermez; sadece ve sadece sitesinin içeriğini her iki Browser’ın kullanıcılarına da ulaştırmaya çalışır. Sitenizi IE kullanarak görmeye gelen bir kişinin “Bu site Netscape için optimize edilmiştir,” Netscape kullanarak gelen bir ziyaretçinin de “Bu site en iyi IE ile görülür!” yaftasını görünce, ne hissettiğini sanıyorsunuz? Size düşen, ziyaretçinizi sinirlendirmek değil, tersine sunmak istediğiniz içeriği, ziyaretçinin Browser’ına uyumlu hale getirmek. Bunun için ziyaretçinin Browser’ının türünü ve sürümünü belirlemeniz gerekir. Eğer bunu yapmayacaksanız, asla Netscape’de yanlış görüntülenecek, sadece IE’e özgü özelliklere hitap etmeyin. IE’nin bazı özelliklerinden yararlanmak istiyorsanız, bu sağlayacak kodun Netscape’de “hiç bir şey yaptırmayan” kodlar olmasına dikkat edin.

Ziyaretçinin Browser’ını Koklayabilir Misiniz?

Internet Browser programlarının bir kokusu olduğunu düşünmüyorsunuz, herhalde! Ama muzip bir programcı, ziyaretçilerin sitenize bağlantı sağladıkları Browser’ın markası ve sürümünü belirleme işine “Browser’ı koklamak” adını takmakta sakınca görmemiş olmalı! O günden beri bu amaçla kullanılan Javascript ve VBScript programlarına “Browser Koklayıcı” deniyor.
Ziyaretçinizin Browser’ının türü ve sürümü iki yerde belirlenebilir: Ziyaretçinin bilgisayarında (Client-side) veya sitenize ev sahipliği yapan Web Server’da (Server-side). ASP gibi ileri bir Server teknolojisi kullanmıyorsanız, belirleme işini ziyaretçinin bilgisayarında yapmak uygun olur. HTML kodlarınızı iki Browser’ın ortak özelliklerine indirgemek işinize gelmiyorsa, sayfanın tümünü değilse bile bir bölümünü IE için ve diğerleri için farklı yapabilirsiniz. Bunu sağlamak için size gerekli bilgi, ziyaretçinin Browser’ı IE 4 ve üstü mü, 3 ve altı mı, yoksa diğerleri mi sorusunun cevabıdır. Bu soruyu, ziyaretçinin Browser’ına şu Javascript fonksiyonu ile sorabilirsiniz:

function msieversion()
{
var ua = window.navigator.userAgent
var msie = ua.indexOf ( “MSIE ” )
if ( msie > 0 )
return parseInt (ua.substring (msie+5, ua.indexOf (“.”, msie )))
else
return 0
}
Bu fonksiyon, hemen hemen bütün belli başlı Browser’larda işler ve size Microsoft IE’nin sürüm numarasını bildirir. Diyelim ki Web sayfanız gerçekten IE 4 ve daha sonrası sürümlerin bir özelliğine mutlaka hitabetmek zorunda. O zaman, HTML’in daha sonraki bir bölümünde, IE 4 ve sonrası için ayrı, IE 3 ve öncesi için ayrı, ve diğerleri için ayrı HTML veya Script kullanacağınız zaman, yukarıdaki fonksiyonun elde etmiş olduğu bilgiyi şöyle kullanabilirsiniz:
if ( msieversion() >= 4 ) {
[buraya IE 4 ve sonrası için yazacağınız kodlar girecek]
}
else if ( msieversion() <= 3 ) {
[buraya IE 3 ve öncesi için yazacağınız kodlar girecek]
}
else {
[buraya diğer Browser’lar için yazacağınız kodlar girecek]
}

Fakat bazen, birinci sayfanızı bile ziyaretçinin Browser’ına uyumlu olarak vermek isteyebilirsiniz. Bu durumda şu sayfa, ziyaretçinin Browser’ını koklayacak ve ona göre ana sayfa gönderecektir. (Netscape için sayfanızın adı “netscape.htm,” IE için “ie.htm” ve diğerleri için “diger.htm” olması, sayfa adları başka ise bu kodda değişiklik yapmanız gerekir):

<html>
<head>
<title>Browser’a göre ana sayfa!</title>
<script>
<!– Eski Browser’lardan gizle
var browser=navigator.appName + ” ” + navigator.appVersion;
var getkey=browser.substring(0, 12);
function hangiSayfa()
{
if (browser.substring(0, 8)==”Netscape”)
window.location=”netscape.htm”;
if (browser.substring(0, 9)==”Microsoft”)
window.location=”ie.htm”;
if ( (browser.substring(0, 8)!=”Netscape”) && (browser.substring(0, 9)!=”Microsoft”) )
window.location=”diger.htm”;
}
// –>
</script>
</head>
<body onload=hangiSayfa()>
</body>
</html>

Genellikle, ziyaretçinin Browser’ını soruşturduğunuz zaman aldığınız sonucu bir değişkene (variable) yazarak, bir kenarda tutmak isteyebilirsiniz. Bu değişken, ilerde başka Java fonksiyonlarında veya HTML içinde özellikle BODY etiketinde kullanılır. Bu amaçla biraz daha gelişmiş bir Browser belirleme fonksiyonu şöyle olabilir:

function Brw() {
var agent = navigator.userAgent.toLowerCase();
this.major = parseInt(navigator.appVersion);
this.minor = parseFloat(navigator.appVersion);
this.ns = ((agent.indexOf(‘mozilla’)!=-1) && ((agent.indexOf(‘spoofer’)==-1) &&
(agent.indexOf(‘compatible’) == -1)));
this.ns2 = (this.ns && (this.major == 2));
this.ns3 = (this.ns && (this.major == 3));
this.ns4 = (this.ns && (this.major >= 4));
this.ie = (agent.indexOf(“msie”) != -1);
this.ie3 = (this.ie && (this.major == 2));
this.ie4 = (this.ie && (this.major >= 4));
this.op3 = (agent.indexOf(“opera”) != -1);
}

var brw = new Brw()

Bu Javascript fonksiyonu, size biri doğru (true), altısı yanlış (false) yedi nesne (object) kazandırır. Diyelim ki, ziyaretçinin Browser’ı Netscape 4.0; o zaman brw.ns4 doğru olacaktır, mesela brw.ie4 yanlış! Sayfanıza ilerde, “Eğer brw.ns4 doğru ise şunu yap… eğer brw.ie4 doğru ise bunu yap” şeklinde rutinler ve fonksiyonlar koyabilirsiniz.

8. Javascript’lerinizi hazırlayın: Dinamik HTML’in iki ayağından biri CSS ise diğeri Javascript yoluyla, bu stilleri katmanlara uygulamaktır. Ziyaretçinin Browser’ına, “Şimdi, pencerende x koordinatı 120, y koordinatı 15 olan noktadan itibaren eni 100, yüksekliği 110 olan bir katman aç ve içine “Burayı tıklayınız!” yaz; bu yazının rengi sarı, zemini mavi olsun; Mouse işaretçisi bu katmanın üzerine geldiği zaman yazının rengi kırmızıya, zeminin rengi turuncuya dönsün!” demek sadece HTML kullanarak hemen hemen imkansız. Oysa, Javascript ile kullanılmaya hazır fonksiyonlar oluşturup (veya bulup), bunları HTML sayfasında kullanmak, işi olağanüstü kolaylaştırır. Javascript ile oluşturulacak fonksiyoonlar da, tıpkı CSS komutları gibi bir HTML dosyasına ya dışarıdan eklenir, ya da HTML’in içinde (ya baş tarafında, ya da kullanılacağı yerde) kullanılır.

Javascript ile oluşturacağınız fonksiyonları bir sitedeki bütün sayfalarda, hatta başka-başka sitelerin sayfalarında kullanmak haricî Javascript dosyasının HTML’e bağlanması ile mümkün olur. Javascript fonksiyonlarını içeren bir düzyazı dosyası, adının uzatması “.js” olan bir dosyada toplanır ve HTML’e LINK etiketi ile bağlanır. Tıpkı stil komutları gibi, sırası geldiğinde HTML’in içinde bu dosyadaki bir fonksiyonu işbaşına çağırırsınız. İyi bir tasarımcının çok zengin bir haricî Script belgesi koleksiyonu olur.

Böyle bir haricî JS dosyasında şu bölümler bulunur:

Browser Belirleme Fonksiyonu: DHTML uyumlu bir Browser, CSS ve katman teknolojisini destekler. Bununla birlikte bütün Browser’lar bütün Javascript fonksiyonlarını desteklemez. Burada kritik nokta, Netscape 4.0 ve daha üstü ile IE 4 ve daha üstünün Browser penceresindeki bir belgeye nasıl referansta bulunduğudur. Netscape, belge unsurlarına document.nesne şeklinde hitabedilmesini isterken, IE, document.all.nesne şeklindeki referans gerektirir. Ayrıca Netscape’te stil belgelerine document.stil_adı.nesne şeklinde atıfta bulunursunuz, IE’de ise bu document.all.stil_adı.style.nesne şeklinde yazılır. Javascript’inizde bu unsurlara, diyelim ki, sürekli belge ve stil diye atıfta bulunabilirsiniz, fakat baş tarafa, Browser belirlediğiniz yere “Eğer Netscape ise belge = document.stil_adı.nesne, eğer IE ise belge = document.all.nesne” anlamında bir rutin yazarsınız.
Grafikleri önceden yükleme: DHTML önemli ölçüde grafik unsurlara yer verme sanatıdır; ve grafikler bir sayfanın ziyaretçiye aktarılmasında en önemli yavaşlık sebebidir. Burada iki büyük düşünce ekolü var: “Sitemizdeki bütün grafikleri henüz birinci sayfa görüntülenmeden ziyaretçiye aktaralım ve sayfalarımız daha sonra çabuk görüntülensin” diyenler; ve “Birinci sayfa ne kadar çabuk görüntülenirse o kadar iyi, ziyaretçinin bir kere ilgisini çekmek şart!” diyenler. İster birinci grupta olun, ister ikinci grupta, hiç değilse birinci sayfanın grafiklerinin tümü, sayfa görüntülenmeye başlamadan önce ziyaretçiye aktarılmalıdır. Bunu, BODY etiketine gömeceğiniz onLoad komutuna bir Javascript önyükleme fonksiyonu bağlayarak yapabilirsiniz. Şu Javascript fonksiyonu, önyükleme işini yapacaktır:

Function onYukleme() {
resim1 = new Image();
resim1.scr = “dizin/resim1.gif”;
}

Kapanan kıvrık parantezle fonksiyonu bitirmeden önce, resim2, resim3, vd., sıralayabilirsiniz. Böylece önceden yüklettiğiniz grafikler, ziyaretçinin bilgisayarının belleğinde kalacak ve ihtiyaç anında sür’atle görüntülenecektir.

Javascript konusunda bir son tavsiyeye yer verelim: Gerçekten Javascript öğrenmeye zamanınız yoksa, o zaman sizin için Javascript yazacak bir programı, en ince ayrıntılarına kadar öğrenin. DHTML’in bütün unsurlarını HTML sayfalarınıza yazabilecek ve bu arada sizin için yüzlerce satır Javascript programı oluşturabilecek WYSIWYG tarzı HTML editörlerinin sayısı hızla artıyor. Macintosh dünyasında GoLive CyberStudio, Windows dünyasında Macromedia Dreamweaver bu tür programlar arasında sayılabilir.

9. Katmanlar: Denir ki, Internet, televizyon ile dergi arasında bir ortamdır. Doğru; Web sitelerinde bir gazetede olabileceğinden çok, ancak uzmanlık alanında yayın yapan bir dergide ya da kitapta bulunacak kadar bilgi, bir televizyon atraksiyonu ile ziyaretçiye sunulabilir. Web sayfalarınızda doğrudan video dosyaları da verebilirsiniz; fakat çok pahalı streaming video (akan video) teknolojisi kullanmıyorsanız, bir AVI dosyasının ziyaretçiye aktarılması için gerekli süre, ziyaretçiye bilgisayarını kapattırıp, televizyonunu açtırtabilir!

Fakat Web sayfalarınızda televizyon ve sinema teknolojisinin temeli olan grafiklerin (veya metinlerin) belirli bir sırayla görüntülenmesi, sırası gelenin “açılması,” sırası geçenin “kapanması” sağlanabilir. Bunu katman teknolojisi sağlar. Bir HTML sayfasında, ziyaretçinin Browser’ına ActiveX, Flash, Shock ve benzeri animasyonları gerçekleştirmesi için gerekli plug-in dosyalarının yüklenmesini zorunluk olmaktan çıkartan da katman teknolojisidir. DIV, LAYER, ILAYER ve SPAN etiketleri ile oluşturacağınız katmanlar, piksel düzeyinde bir hassasiyetle, ziyaretçinin ekranında, Browser penceresinde belirli bir yere oturtulabilir ve belirli bir sırayla görünür veya görünmez hale getirilebilir. DHTML’in dinamik tek unsuru da budur. (Bunlardan sık kullanacağınız DIV ile SPAN’dir ve aralarındaki tek fark, DIV, blok elemanıdır, yani kendisinden sonra yeni paragraf başlatır; buna karşılık SPAN satır elemanıdır, kendisinden sonra hiç bir şey yapmaz.)

“Piksel düzeyinde hassasiyet” ne demek? Bir Browser, klasik HTML belgesini aldığı zaman içindeki komutları yorumlayıp, sonucunu kendi penceresinde görüntülemeye, sıfır-sıfır noktasından başlar. Bir Browser penceresini, soldan sağa x, yukarıdan aşağı y koordinatları olarak düşünün.

Başarılı bir Web sitesi, 14 inçlik bir ekranı, 640×480 çözünürlükte bir grafik kartı bulunan tipik bir ziyaretçi dikkate alınarak kurulduğuna göre, Windows ve MacOS’in aldığı yerler, Browser’ın kendi penceresi, başlık ve menü çubukları, çerçeveler çıktıktan sonra, tasarımcı olarak size “temiz alan” olarak 600’e 350 piksel kalıyor. (Microsoft, ve Brittanica ansiklopedisi bu alana kendi sitelerini sığdırdığına göre, herhalde siz bir günlük gezete sitesi sığdırabilirsiniz!) Düz bir yazı içeren Web sayfası, nerede başlayıp, nerede biterse bitebilir; önemli değil. Ama, diyelim ki, ziyaretçi Mouse işaretçisini bir grafiğin belirli bir yerine getirdiği zaman, aynı grafiğin 155:220 koordinatında başlayan ve eni 35, yüksekliği 48 piksel olan bir bölüme farklı grafik görüntülenecek! Bu ölçüde hassas positioning (yerleştirme işlemi), ancak katmanlarınızı doğru tanımlamakla mümkündür. “Doğru tanımlamak” ise önce ziyaretçinin o andaki Browser boyutlarını bilmekle mümkündür. Kim olduğunu bile bilmediğiniz bir kişinin, ne olduğunu bile bilmediğiniz Browser’ının o anda enini boyunu nasıl bilebilirsiniz? Ve üstelik bunu, her ziyaretçi için yapacaksınız. Oysa işin kolayı, sayfanın bir kenarına, ziyaretçiye hakaret edercesine, “Ekran çözünürlüğünüz 800’den aşağı ise, yandınız!” diye bir uyarı koymak iken!

Bu işleme ziyaretçinin Browser penceresinin çözünürlüğünü belirleme denir, ve Netscape ile Internet Explorer, farklı sorular sormak şartıyla, sorarsanız, size o andaki boyutlarını verirler. Diyelim ki bir haricî JSavascript dosyasını HTML belgenizin baş tarafında:

<SCRIPT LANGUAGE=”JavaScript” SRC=”javascript.js”></SCRIPT>

şeklinde bir SCRIPT etiketi ile sayfanıza bağlamış bulunuyorsunuz ve bu JS dosyasının içinde daha önce ele aldığımız türden size “brw.ie4” veya “brw.ns4” nesnelerini veren bir fonksiyon var. Şimdi bu neslereni BODY etiketi içinde onLoad olayını kullanarak test edebilir ve ziyaretçinin Browser’ı Netscape ise Netscape için, IE ise IE için geçerli soruyu sorarak, ziyaretçimizin o anda Browser ekranının enini boyunu öğrenebiliriz. İşte size kullanabileceğiniz bir HTML-Javascript parçası:

<BODY onLoad=”
if(is.ns4) {
ekranEn =innerWidth;
ekranBoy=innerHeight;
preLoad();
} else if(is.ie4) {
ekranEn=document.body.clientWidth;
ekranBoy=document.body.clientHeight;
preLoad();
}”
onResize=”history.go(0)”>

Bir parantez açalım: buradaki “onResize=”history.go(0)” ifadesi, ziyaretçininin sitemize bağlandıktan sonra Browser’ının boyutlarını değiştirmesi ihtimaline karşı, sayfamızın ziyaretçinin sabit diskindeki Cache bellekten yeniden yüklenmesini sağlayan bir güvenlik önlemidir. Bir başka güvenlik önlemi Browser’ın sayfa görüntülendiği anda penceresinin sağına ve altına otomatik kaydırma çubuğu koymasını istemiyorsanız, BODY etiketine şu özellikleri de verebilirsiniz:

BACKGROUND=”images/horizon.jpg” MARGINWIDTH=”0″ MARGINHEIGHT=”0″ SCROLL=”NO”

Peki, şimdi elinizde iki ölçü oldu: ekranEn ve ekranBoy. Bu bilgileri nasıl kullanacaksınız? İşte bu bilgi, ziyaretçinize “Ekranını 800×600 piksel yap, öyle gel!” demekten sizi kurtaracak, söz gelimi bir grafiği 460:710 koordinatlarına denk gelmek yerine “ziyaretçinin ekranının sağ kenarından 200 piksel solda başlamasını sağlayacak olan bilgidir. Bunu yapabilmek için grafiğinizi bir katman nesnesinin (<LAYER>..</LAYER>, <SPAN>..</SPAN> veya <DIV>..</DIV> etiketlerinin içine koyarsınız; katman nesnesi, “çıplak” konulacak grafikten (<IMG>) farklı olarak, STYLE özelliğine (attribute) sahiptir ve dolayısıyla, posizyon, başka bir nesnenin altında veya üstünde olmak, görünür veya görünmez olmak gibi kontrollere sahiptir. Örneğin, içinde sayfalarınız arasında gidip gelmeyi sağlayan düğmelerden birincisini içeren katmanın şöyle oluşturulduğunu düşünün:

<DIV ID=”katman_dugme1” STYLE=”position: absolute left: ekranEn-200; top ekranBoy-200; width: 120; height: 120; z-index: 1; visibility: hidden;”>

Hangi IMG etiketi böylesine denetlenebilir? İşte bu dinamizmdir; ziyaretçi ile etkileşmektir. Ziyaretçi ile etkileşmek, her ziyaretçinin bilgisayarına bir çerez bırakmaktan ibaret değildir. Katmanlar nesne oldukları için, isimleriyle hitabedilebilirler; herhangi bir Mouse olayına göre attribute değiştirebilir, örneğin görünür hale gelebilirler; görünmez olabilirler. Dinamik bir katman yerleştirme işlemi gibi yönetimi de Javascript ile mümkündür.

10. Sitenizi sınayın: Çok kolay gibi görünmesine rağmen, Internet, farklı Browserlar, farklı modem hızları, farklı bilgisayarlar, farklı ekran kartları ve ekranlarla sınanmamış sitelerle dolu. Bir çok tasarımcı için sınama, en fazla bütün dosyaları sitenin üretildiği bilgisayardan başka bir bilgisayara aktararak, bağlantıları kontrol etme anlamına geliyor. Yani acaba herhangi bir LINK, mutlak bir dosyayı mı çağırıyor? IMAGE dizinine yerleştirilmemiş grafik kaldı mı? Hayır, hayır.. Sınama bu değil. Sınama, mesela siz Istanbul’da oturuyorsanız, Artvin’deki veya Van’taki hedef kitlenize mensup olduğuna inandığınız gerçek Internet kullanıcılarını bir 14.4’lük modem bağlantısı olan, 66 MHz’lük bir CPU’su ve 1 MB bellekli, 640×480 çözünürlükte ekran kartı bulunan ve 15 inç ekrana sahip bir bilgisayarın karşısına geçirip, yüzlerini incelemektir.

Ve bunu yaparsanız, sizden daha iyi Web Sihirbazlığı yapan olmayacağına inanabilirsiniz.