DHTML'e giriş
Dinamik Web SayfalarıWebde sunulan sitelerin çoğu (en azından profesyonel olanların yada olmaya çalışanların) kullanıcı isteklerine göre yeniden şekillenebilmektedir. Bu, amatör siteler ile profesyonel siteler arasındaki farklılığın en önemli nedenlerindendir. Bu tip uygulamalar dinamik web sitesi olarak adlandırılırlar. Aslında bu dinamikliği iki şekilde sağlayabilirsiniz.
Birincisi; sitenizin bir şablonu olması ve bu şablonun içeriğinin kullanıcı isteklerine göre yeniden düzenlenmesi ki bunu asp, php, coldfusion, jsp, cgi gibi sunucu tarafında çalışan teknolojiler ile yapabilirsiniz.
İkincisi; kullanıcının istekleri doğrultusunda, sayfanın yeniden yüklenmesine gerek kalmadan, içeriğinin değiştirilmesi ki bunu DHTML ile rahatça yapabilirsiniz.
DHTML(Dynamic HTML) Nedir?
Pek çoğumuz DHTML 'i ayrı bir “dilâ€� zanneder. Aslında DHTML, bir kaç web standardının birleşmesiyle oluşmuştur. Belki bu yüzden adlandırılmasında da karışıklıklar söz konusudur. Bazı sitelerde DHTML 'i DOM(Document Object Model) adı altında da görebilirsiniz. Hatta bazı sitelerde DHTML örnekleri javascript bölümü altında yer alır.
DHTML bir kaç web standardının birleşmesiyle oluşmuştur demiştik. Peki nedir bu standartlar? HTML,CSS,JavaScript(js) yada VisualBasicScript(vbs) ‘tir. İşte kastedilen dinamiklik js yada vbs yardımıyla gelir. (DHTML 'de büyük çoğunlukla JS kullanılır) İşin ilginç tarafı, DHTML bir standart değildir ama onu oluşturan teknolojiler bir standarttır. Ne demek şimdi bu?
DHTML W3C (World Wide Web Consortium) tarafından ortaya konmuş ve kabul edilmiş bir standart değildir. Netscape ve Microsoft firmaları tarafından, yeni nesil (4.x) tarayıcılarındaki yeni teknolojileri tanıtmak için kullanılmış bir terimdir. W3C ‘nin DHTML tanımı şöyledir : Dynamic HTML is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated. yani türkçesiyle, “Dinamik HTML, bazı şirketler tarafından HTML, CSS ve scriptler(js yada vbs) ile web sayfalarının daha dinamik(canlı) olmasını sağlayan kombinasyonu tanımlamak için kullanılan bir terimdir.â€� Sonuçta DHTML bir standart olmayabilir ancak kullandığı teknolojiler standart olduğu için ve bu standartlar W3C tarafından sürekli geliştirildiği için DHTML de sürekli gelişir. Biraz karışık bir durum. J
Avantajları nelerdir?
Bedavadır, W3C desteği vardır, hazırlanan kodların boyutu flash animasyonlarına yada java appletlerine oranla oldukça ufaktır, hızlıdır, yeni nesil tüm tarayıcılar ile uyumlu çalışabilir (ie4+, ns6+, opera5+, “ns4 ve opera4â€� kısmen), çalışmak için herhangi bir eklentiye ihtiyaç duymaz, az da olsa HTML, CSS ve js bilgisi olanlar kısa sürede DHTML öğrenebilir.
Dezavantajları nelerdir?
Eski sürüm tarayıcılar (ie4,ns4 ve opera5 'ten aşağısı) DHTML 'i tam olarak desteklemez, farklı tarayıcı modelleri ve sürümleri DHTML ‘i farklı şekilde yorumlar ve bu yüzden tarayıcıya ve modeline göre ayarlamalar yapmak gereklidir, hazırladığınız scriptler ziyaretçiler tarafından okunabilir,kaydedilebilir, basit animasyonlar için bile oldukça uzun kodlar yazmanız gerekebilir.
Peki neler yapabiliriz?
Açılır (microsoft) menüler, sürükle-bırak menüler, yarı şeffaf menüler, animasyonlar, introlar, kayan yazılar, fare ve klavyeye duyarlı uygulamalar, yüklenebilir fontlar, oyunlar ve aklınıza gelebilecek her türlü hareketlilik.
İyi güzel de bunları oturup yaptığımızda bir tarayıcıda çalışıp diğerinde çalışmazsa ne anlamı kalır?
Aslında bunun çözümünü DHTML 'in yapı taşlarından olan js ile çözmek mümkündür. JS ile sitenize gelen ziyaretçinin tarayıcısını kontrol edip ona göre scriptinizin çalışma prensiplerini ayarlayabilirsiniz. Bununla birlikte hazırlamak istediğiniz bazı uygulamaları maalesef ki js yardımıyla dahi diğer tarayıcılarda çalıştırma imkanınız olmaya bilir. (yüklenebilir fontlar gibi)
W3C' nin DHTML ‘i desteklemesinin ardından netscape,opera ve internet explorer ortak bir DOM(Doküman Obje Modeli) yapısını desteklemeye başlamıştır. Bu tarayıcılarla Cross-Browser(kesişen yada ortak alanlı tarayıcılar) denmektedir. Yinede hazırladığınız scriptleri bu üç tarayıcı ile mutlaka kontrol edin.
Bu kadar sözden sonra DHTML hakkında fikriniz olmuştur umarım. Birazda DHTML ‘in yapı taşlarından ve DHTML için neden gerekli olduğundan bahsedelim.
HTML: Sadece DHTML için değil dinamik yada statik, ufak yada büyük tüm web siteleri için kullanılan bir standart. Çok fazla söze gerek yok. Web tasarımının temeli. Web tasarımını ne ile yaparsanız yapın az da olsa HTML bilmek gereklidir. DHTML için HTML ‘e hakim olmak sizin avantajınıza olacaktır.
CSS: DHTML ‘in diğer bir parçası olan CSS, DHTML sayfalarımızdaki öğelerin görüntüsünü, yerini ve özelliklerini ayarlamamızı sağlıyor. Yani normalde yaptığı işin aynısını DHTML kodlarken kullanacağız. CSS kullanmanın bir diğer avantajı ise dizaynı içerikten ayırabilmemizi sağlıyor olması. Yani bir sayfadaki font büyüklüğünü her sayfaya uygulayabiliriz ve günün birinde bu büyüklüğü değiştirmek istediğimizde sadece CSS dosyamızı değiştirerek tüm sayfalardaki font büyüklüğünü ayarlamış oluruz.
JAVASCRIPT: DHTML ‘ e dinamikliği veren teknoloji aslında jsdir. Şimdi niye ille de javascript diyebilirsiniz. Cevabı çok basit. İnternet explorer için js ile yaptığınız işi vbs ile de yapıyor olabilirsiniz ama yaptığınız bu güzelliklerin diğer tarayıcılar tarafından desteklenmediğini söylersem. Zaten bizde örneklerimizi js kullanarak yapacağız.
Kabaca DHTML ‘in çalışma mantığından da bahsedeyim. Oldukça basit bir mantığı var bu işin. Öncelikle HTML kullanarak sayfamızı hazırlıyoruz sonra CSS ile istediğimiz kısımlara istediğimiz özellikleri veriyoruz daha sonra JAVASCRİPT yardımıyla gerekli tetiklemeleri yapıyoruz ve yine JAVASCRİPT yardımıyla tetiklenen işlemleri yerine getirtiyoruz. Örneğin bir linkin üzerine geldiğinizde hemen farenin yanında 100x50 piksel boyutlarında bir kutucuk açıp linkle ilgili bilgi vermek.
Son olarak, eğer HTML, CSS, JAVASCRİPT konularında zayıfsanız öncelikle bu teknolojileri öğrenmenizi tavsiye ederim. Zaten bunları bildikten sonra DHTML sizi çok uğraştırmayacaktır. Çok konuştuk az iş yaptık, artık yavaş yavaş adımlarımızı atmaya başlayalım.
Kaynak: Murat Kuzu
