Dinamik Web Sayfaları

Yazan: türker | Tarih 29 Eylül 2007 | Yorum  2 Yorum
BerbatKötüOrtaGüzelHarika 2 kez puan verildi, Ortalama: 4.5 (5 üzerinden)
Loading ... Loading ...

Sayfalar: 1 2

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 ile rahatça yapabilirsiniz.

(Dynamic HTML) Nedir?

Pek çoğumuz ‘i ayrı bir “dil” zanneder. Aslında , 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 ‘i (Document Object Model) adı altında da görebilirsiniz. Hatta bazı sitelerde örnekleri bölümü altında yer alır.

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. ( ‘de büyük çoğunlukla JS kullanılır) İşin ilginç tarafı, bir standart değildir ama onu oluşturan teknolojiler bir standarttır. Ne demek şimdi bu?

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 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 bir standart olmayabilir ancak kullandığı teknolojiler standart olduğu için ve bu standartlar W3C tarafından sürekli geliştirildiği için de sürekli gelişir. Biraz karışık bir durum. :)

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 JavaScript bilgisi olanlar kısa sürede öğrenebilir.

Dezavantajları nelerdir? Eski sürüm tarayıcılar (ie4,ns4 ve opera5 ‘ten aşağısı) ‘i tam olarak desteklemez, farklı tarayıcı modelleri ve sürümleri ‘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ü ‘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 ‘i desteklemesinin ardından netscape,opera ve internet explorer ortak bir (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 hakkında fikriniz olmuştur umarım. Birazda ‘in yapı taşlarından ve için neden gerekli olduğundan bahsedelim.

HTML: Sadece 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. için HTML ‘e hakim olmak sizin avantajınıza olacaktır.

CSS: ‘in diğer bir parçası olan CSS, 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ı 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.

: DHTLM ‘ e dinamikliği veren teknoloji aslında JavaScriptdir. Şimdi niye ille de 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 ‘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 yardımıyla gerekli tetiklemeleri yapıyoruz ve yine yardımıyla tetiklenen işlemleri yerine getirtiyoruz. Örneğin bir linkin üzerine geldiğinizde hemen farenin yanında 100×50 piksel boyutlarında bir kutucuk açıp linkle ilgili bilgi vermek.

Son olarak, eğer HTML, CSS, konularında zayıfsanız öncelikle bu teknolojileri öğrenmenizi tavsiye ederim. Zaten bunları bildikten sonra 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.

Sayfalar: 1 2

Yazdır Yazdır | 1,120 Görüntülenme | Kategori: HTML & Javascript & Ajax | Trackback  Geri İzleme
Etiketler  Etiketler: , , , , , ,

Benzer Yazılar


Yorum Yap


(gerekli)

(gerekli,yayınlanmaz)




XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>