şte Web sihirbazlarının özlemini duyduğu süper kaynak!

Hem de Netscape 6, Internet Explorer 6 ve Opera 5 te dahil olmak üzere tüm standart web tarayıcıları için !

DHTML konusunda en son gelişmeleri de ele alan ilk Türkçe kaynak kitap kitapçılarda. DHTML & CSS kitabı konuya ilgisi olan herkesin anlayabileceği bir dilde ve sadelikte ancak detaylardan da ödün vermeden hazırlandı. Sihirli web sayfaları yapabilmek için DHTML ve CSS konusunda öğrenmeyi dileyebileceğiniz herşeyi bu kitapta bulabileceksiniz. Üstelik birbirinden harika 80'e yakın çalışmaya hazır örnek ve uygulamalarla.

Makine Koduyla Sanat

# Arcade tipi oyun programlama
# Menüler, Kayan yazılar, Kayan haber başlıkları
# DHTML ile tüm sayfa elemanlarınızı kontrol edin (Görün-kaybol, kaydırma)
# Plug in gerektirmeyen etkileyici Animasyonlar ve Efektler
# İntrolar ve Dia gösterileri
# Değişken aktif(tıklanabilir) bannerlar
# Scriptlerinize Klavye Kontrolü ekleyin
# Sürükle-bırak teknikleri ve sürüklenebilir özgün Pop-up pencereleri
# Fare imlecini takip eden uygulamalar
# Görsel Filtreler ve Sinematik Tranzisyonlar (sayfa geçiş efektleri)
#
Sayfalarınızda dilediğiniz font tipini kullanin. Dilediğiniz! DHTML yüklenebilir fontlarıyla

Kitabın temel amacı

Bu kitapta hali hazırda çoğu web meraklısı için kapalı bir kutu gibi görünen DHTML konusunda deneyimli ya da deneyimsiz, konuya ilgisi olan tüm web tasarımcı ve geliştiricilere temel bilgi ve becerileri kazandırmak, DHTML konusunda kendi scriptlerini ve tasarımlarını gerçekleştirecek düzeye getirmek hedeflenmiştir. Bu kitabı bitirdiğinizde DHTML ile geleneksel statik HTML sayfalarının sınrılamalarından kurtulup web sayfalarınızda size daha önce imkansız gibi görünen etkileri yaratmayı öğreneceksiniz. Kısacası artık web’te size yeni ufuklar keşfetmenize olanak tanıyacak hayal etme cesaretini kazanacaksınız.

Bu kitabın hazırlanışında başlıca üç hususa dikkat edildi. Bunlardan birincisi kitabın içeriğinin deneyimli bir web geliştirici olmanıza gerek olmayacak derecede, konuya ilgisi olan herkes için sade ve anlaşılır olması; ikincisi okuyucunun işlenen konuları gözünde daha iyi canlandırabilmesi amacıyla mümkün mertebe görsel ve pratik yollara başvurulmuş olması; üçüncüsü ise kitapta geçen uygulamaların tamamına yakınının belirli bir tarayıcı modeli ya da versiyonu için değil de tüm DHTML tarayıcılarında aynı şekilde çalışabilecek uygulamalardan meydana gelmiş olmasıdır.

DHTML ve CSS Kitabı Önsözü
İnternet ile ilgili artık hemen her kitabın girişinde okuyabileceğiniz, İnternet’in hayatımızda nasıl bu kadar kısa zamanda bu kadar önemli yer edinebildiğini uzun uzadıya anlatmaya gerek yok sanırım. O artık kalıcı olmak üzere aramızda! Ama herşey gibi İnternet ve dolayısı ile web te değişiyor. Daha birkaç yıl öncesine kadar sadece biraz HTML ve biraz da grafik programlarda bilgisi olan ve bu işe hobi olarak bakanlara bile farklı iş ortamlarında ihtiyaç duyulduğu günlerden bu yana işin rengi çok değişti. Artık hobilerin yerini büyüklüklerini sitelerdeki ‘tıklama sayıları’ ve ‘reytingler’in belirlediği değerleri inanılmaz rakamalarla telafuz edilen uygulamalar aldı. Amatörlerin yerini profesyoneller, hobicilerin yerini spesyalistler alır oldu. Sayıları bir çığ gibi büyüyen web teknolojilerinin her birine yetişemez olduk. Bu piyasada yer edinebilmek için birkaç parça HTML bilmenin yeterli olduğu günler artık geride kaldı.

Web sayfalarımız artık ziyaretçilerimizin istek ve hareketlerine kendi kendine cevap verebilecek kadar ‘akıllı’ ve ‘dinamik’ olmak zorundalar. Dinamizm bugün web’te iyiyi kötüden, amatörü profesyonelden ayırabilmenin en kolay ve en önde gelen kriteridir. Peki web’te “Dinamizm” nedir? Kesinlikle kendi kendine hareket edip duran animasyonlar değildir. Daha da fazla etkileşimliliktir. Bugün web’te dinamizm’i başlıca iki sınıfa indirgeyebiliriz. Bunlardan birincisi her ulaşılmak istenen web sayfasının temel bir şablona (template) sahip olması ve içeriğinin ziyaretçilerin tercih ve isteklerine uygun olarak oluşturulması ikincisi ise ziyaretçinin bulunduğu sayfadan başka bir sayfaya gitmeden ya da sayfanın tekrardan yüklenmesine gerek kalmadan içeriğini ziyaretçinin isteklerine uygun olarak değiştirebilir nitelikte olması olayıdır. İlk sınıfa giren uygulamalar genelde bir veritabanına bağlı sunucu tarafı uygulamalarıdır. CGI, JSP, ColdFusion, PHP ve ASP gibi teknolojiler bu tarz uygulamaları geliştirmekte kullanılırlar. İkinci sınıfa giren uygulamalar ise kitabımızın da konusunu oluşturan ve artık bir web standardı olan Dinamik HTML ya da kısaca DHTML diye isimlendirilen yeni sayılabilecek web teknolojisi altında toplanmıştır.

Kişisel olarak yakın ilgi duyduğum bu konudaki birikimlerimi bir kitap vasıtası ile okuyucuyla paylaşma düşüncem aslında Webmaster için JavaScript kitabından da öncesine dayanıyor. Ancak başlıca iki önemli sebepten dolayı bunu bu güne ertelemek zorunda kaldım. Bunlardan birincisi DHTML’den bir önceki adımı teşkil eden JavaScript konusunda yeterli Türkçe kaynak bulunmaması ve siz okuyuculara DHTML’den önce bu konuda bir kaynak sunabilmenin gerekliliği, ikincisi ise Netscape 6 ve Opera 5 gibi gelecek için iddiaları olan yeni jenerasyon web tarayıcılarının tamamen farklı ve yeni bir element yapısı (DOM) kullanıyor olmasından dolayı bu yeni yapının olgunlaşmasını beklemekti. Bu yeni element yapısı ileride geliştirilecek tüm tarayıcılar tarafından desteklenmesi beklenen “standart” yapı olacağından aklımdaki DHTML kitabının ve siz okurlarının öğreneceği ve yazacağı DHTML uygulamalarının tabii ki bu yeni yapıyı da desteklemesi gerekirdi. Zira hali hazırda çoğu kitap ve internet uygulamaları bu yeni web standartından dolayı geçerliliklerini yitirmiş ve oldukça kapsamlı bir revizyon içinde bulunmaktadırlar. Bugün web’te daha önceden geliştirilmiş DHTML uygulamalarının bir çoğu Netscape 6 gibi yeni tarayıcı modellerinde çalışmamaktadır. Kısacası şu anda elinizde tutmuş olduğunuz kitap Netscape 6 ve Opera 5 konuları da dahil olmak üzere DHTML’deki en son ve en yeni gelişmeleri içinde barındıran kaynaklardan biridir.

Kitapta Neler Var?

Kitabın Genel İçeriği
# Giriş
# Bölüm 1: DHTML'i Tanıyalım
# Bölüm 2: DHTML'e Hazırlık
# Bölüm 3: CSS Temelleri
# Bölüm 4: CSS Çalışmaları ve Uygulamaları
# Bölüm 5: JavaScript
# Bölüm 6: DOM (Document Object Model)
# Bölüm 7: Temel DHTML Uygulamaları
#
Bölüm 8: DHTML Püf Noktası
# Bölüm 9: DHTML-API Kütüphanesi (Tüm fonksiyonlar bir arada)
# Bölüm 10: DHTML Menüleri ve Kayan Yazılar
# Bölüm 11: Fare İmlecine duyarlı DHTML Uygulamaları
# Bölüm 12: DHTML ile adım adım Oyun Programlama
# Bölüm 13: Tarayıcı Modellerine özgü DHTML
# DHTML Referans ve Linkleri
# CSS Acil Başvuru Tablosu
# JavaScript Acil Başvuru Tablosu
#
Terminoloji
#
CD-ROM'da Neler Var

Bölüm 1: DHTML'i Tanıyalım
# DHTML mi? Dinamik HTML mi?
# DHTML nedir? Ne değildir?
# DHTML’in temel taşları

* HTML ve DHTML
* CSS ve DHTML
* JavaScript ve DHTML

# Bir DHTML sayfasını nasıl ayırt edebiliriz?
# DHTML ile neler yapabiliriz?
# Farklı DHTML uyarlamaları
# DHTML’in olanakları ve avantajları
# DHTML’in sınırlamaları ve dezavantajları

Bölüm 2: DHTML'e Hazırlık
# DHTML öğrenebilmek için neler gerekli?

* Yazılım
* Tekst Editörü
* Tarayıcılar
* DHTML’in kullandığı temel (taşları) Teknolojiler hakkında bilgi
* A-Temel HTML Bilgisi
* B-Temel CSS Bilgisi
* C-Temel JavaScript Bilgisi
* Uygun bir çalışma ortamı

# HTML konusuna kısa bir bakış (HTML konusunda dikkat edilmesi gereken hususlar)

* Bir HTML dosyasında olması gereken elementler
* Standart olmaya özen gösterin

#
HTML stil rehberi

Bölüm 3: CSS Temelleri
# Stil (Style) nedir?
# CSS nedir? Neden öğrenmemiz gereklidir?

* Style Sheets kullanmanın getirdiği avantajlar

# Temel CSS terimleri

* Selektörler
* HTML selektörü
* Sınıf selektörü
* ID selektörü

* Sınıf
* Property’ler
* Değerler

# Bir CSS stilini nasıl tanımlarız?

* HTML selektörü için stil tanımı
* Sınıf selektörü için stil tanımı
* ID selektörü için stil tanımı

# Bir CSS stilini web sayfamıza nasıl ekleriz?

* yerinde (inline) ekleme metodu
* ilişik (embedded) ekleme metodu
*
linkli (linked) ekleme metodu: websitenizin tamamının stilini kontrolünüz altında tutun

# CSS koduna nasıl not düşeriz?
# Cascading: Stilllerde öncelik hakkı kimin?
#
CSS’te dikkat edilmesi gerekenler

Bölüm 4: CSS Çalışmaları ve Uygulamaları
# Tekstlerle ve Fontlarla çalışmak

* CSS ile yazılara stil vermek
* CSS ile sayfalarınızda daha çarpıcı başlıklar
* CSS ile yazılarınızdaki harflerin arasındaki uzaklığı kontrol
* Satırların arasındaki uzaklığı kontrol
* Text-align property’si ile yazılarınızın yerleşimini kontrol edin
* CSS ile büyükharf/küçüharf çevirimi
*
Altı çizgisiz linkler ve hover efektleri

# Renklerle ve Resimlerle çalışmak

* Tekstlere ve tekst fonuna renk vermek
* Tekstlerinizin arkasına sayfanızın fon resminden farklı bir fon resmi yerleştirebilirsiniz
*
Sabit fon üzerinde kaydırılabilir sayfa içeriği !

# Marjinler ve Sınırlar

* Sayfa nesneleriniz için stilli çerçeveler

# Katmanlar ve CSS Pozisyonel özellikleri

* Katmanlar
* Katmanların görünürlüğünü kontrol
* Katmanlarınıza pozisyon verin
* z-index ile istifleme sıralaması
* Etkileyici görsellikler
* CSS ile gölgeli yazılar
*
Kırpma (clip)

#
CSS referans ve linkleri

Bölüm 5: JavaScript
# JavaScript’in DHTML açısından önemi
# JavaScript nedir?
# JavaScript ile neler yapabiliriz?
# Tetikleme ve olaygüdümlü işlem
# Temel JavaScript yapıları

* Fonksiyonlar
* If .. else karar/kontrol yapısı
* For döngüsü

# Objeler, Property’ler ve Metodlar
# Bir JavaScript uygulaması: Rollover efekti
# JavaScript konusunda dikkat edilecek hususlar
#
JavaScript konusunda nasıl daha fazla bilgi edinebiliriz: JavaScript referans ve linkleri

Bölüm 6: DOM (Document Object Model)

* DOM Tablosu

# Farklı tarayıcı versiyonları için farklı DOM yapıları

* Internet Explorer 4,5,6
* Netscape Navigator 4.x
*
W3C tarayıcıları (Netscape 5,6, Opera 5)

#
Cross-Browser DOM: Farklı tarayıcı versiyonları için ortak DOM yapısı

Bölüm 7: Temel DHTML Uygulamaları
# İlk DHTML scriptimiz: görün-kaybol
# Bir DHTML scripti kurgusunun anatomisi
# İlk DHTML menümüz: Görün-Kaybol ile basit bir menü yapalım
# Nesnelerin istiflenme sıralamasını dinamik olarak değiştirin
# HTML sayfasında bir objenin yerini değiştirelim
#
Yerini değiştirdiğimiz objenin yeni koordinatlarını okutalım
# Bir objeyi yatay kaydırma
# Bir objeyi dikey kaydırma
# Bir objeyi çapraz kaydırma
# Bir objeyi belli bir rotada hareket ettirme

* Matematiksel bir fonksiyondan oluşan bir rota
* Koordinatlar dizisinden oluşan bir rota

# Bukalemun: Arkaplan rengini yavaş yavaş değiştirelim

Bölüm 8: DHTML Püf Noktası
# Tarayıcı Filtresi
# Ziyaretçinizin bilgisayarını analiz edin
# Ziyaretçinizin tarayıcı penceresini kontrolünüz altında bulundurun
# Netscape 4 katmanların arka plan rengi
# Netscape 4 yeniden boyutlandırma problemini nasıl çözeriz?
# İç içe yuvalanmış katman objeleri
# Katmanların üzerinde Rollover efekti!
# İki ayrı DHTML scriptini aynı sayfada kullanma
# Sayfanız yüklenirken ziyaretçiniz ekranda “Yükleniyor..Bekleyin” mesajı görsün
# DHTML sayfalarımızda elementlere pozisyon verirken
# Frame’ler
# Form elemanlarına dikkat!
# Scriptlerinizi klavye tuşları ile kontrol etmeye ne dersiniz?

Bölüm 9: DHTML-API Kütüphanesi (Tüm fonksiyonlar bir arada)
# DHTML Kütüphanesi nedir?
# Bir DHTML Kütüphanesi yapalım
# Kütüphaneyi nasıl kullanacağız (Test uygulaması)

Bölüm 10: DHTML Menüleri ve Kayan Yazılar

#
Microsoft menü
# Bir başka görün-kaybol menüsü
# Soldan kayan çekmece tipi menü
# Üstten kayan çekmece tipi menü
# Kayan yazılar
# Sayfalarınızda kayan haber başlıkları
# Farklı sayfa metinleri ile kayan yazılar
# Yazılarla animasyon
# Resimlerle animasyon: Bulutların arasında dolaşan uçak
# Gölgeli başlıklar
# DHTML ile değişken-aktif bannerlar
# Web sitemizin girişine bir intro yapalım
#
Animasyonlu dia gösterisi

Bölüm 11: Fare İmlecine duyarlı DHTML Uygulamaları
# Fare imlecinin koordinatlarını belirleyin
# İmleç takipçisi: Fare imlecini takip eden yazı ya da resim
# Sürükle-bırak teknikleri
#
Özgün pop-up pencerecikleri

Bölüm 12: DHTML ile adım adım Oyun Programlama
# DHTML ile bir Arcade oyunu: Ufo Savaşları
# Temel script yapımızı oluşturalım
# Yeni elementler
# Klavye kontrolü
# Puanlama sistemi ve göstegeler
# Patlama efektleri
# Kullanıcı arayüzü ve grafikler
# Son rötuşlar
#
Ve karşınızda: Ufo Savaşları !
# Bölüm 13: Tarayıcı Modellerine özgü DHTML Netscape Layer nesnesi
# <iframe> ve <layer> ile bir HTML sayfası içinde bir diğer HTML sayfasını gösterebilirsiniz!
# Internet Explorer Filtreleri ve Tranzisyonları
# DHTML ile yarı-şeffaf grafik uygulaması
# Bir sayfadan diğerine geçerken tranzisyonlar ile sinematik etki yaratın
#
‘Yüklenebilir fontlar’ ile ziyaretçileriniz sayfalarınızı sizin dilediğiniz fontta görsün
Kaynak Kodları

Kitapta mümkün olduğunca her konuda, okurların işlenen konuyu gözünde daha kolay canlandırabilmesi için çalışmaya hazır 80’e yakın örneğe yer verilmiştir. Bu örneklerin tümü Windows 2000 ve Windows NT 4.0 platformunda Internet Explorer 5.0, 6.0, Netscape Navigator 4.7 ve Netscape 6 tarayıcı sürümleriyle denenmiştir. Kitapta geçen uygulama ve örneklerin kaynak kodlarıyla ihtiyacınız olabilecek (resim vs.) tüm ek dosyaların, okurlar için kolaylık olması ve yazım hatalarından kaynaklanabilecek zaman kayıplarını önlemek bakımından kitaba eşlik eden CD-ROM ile okuyucuya sunulması uygun görülmüştür. Bununla beraber kitabımızla ilgili konular ve son değişiklerle, defalarca kez kontrol edilmesine karşın kitapta karşılaşılabilecek muhtemel hatalarla ilgili düzeltmeleri de bu websitesinde bulabileceksiniz.

DHTML-API Fonksiyonlar Kütüphanesi

Kitapta programcı adaylarının en kolay yoldan bağımsız olarak script yazabilmelerini kolaylaştıracak ve kendi kendilerine yetebilmelerini sağlayacak, "özel olarak bu kitap için" biraraya getirilmiş ve bağımsız olarak ta faydalanabileceğiniz birbirinden kullanışlı onlarca Cross-Browser komponentinden oluşan bir kütüphane bulunmaktadır. DHTML & CSS kitabında yeralan scriptlerin hemen hepsi sadece bu kitap için hazırlanmış olup, okuyucu komponentleri belli kombinasyonlarda bir araya getirerek kendi scriptini oluşturabilecektir. Yani kitapta yeralan her bir script kendine özgün olmayıp, aynı komponentleri paylaşan farklı komninasyonlardan meydana gelemektedir. Böylece okuyucu için scriptleri anlamak, oluşturmak, ‘edit’ etmek ve güncellemek daha da kolay bir hal almaktadır.


Kitaba ait kütüphanede yeralan onlarca Ortak-Platform DHTML fonksiyonlarından sadece bir kaçı:

Bir websayfası nesnesini…

… görünmez yapan fonksiyon
… sayfa üzerinde dilenen noktaya pozisyonlandıran fonksiyon
… bir diğer nesnenin üstüne yerleştirebilen fonksiyon
… sayfa üzerinde dilenen miktarda kaydırabilen fonksiyon
… ziyaretçinin tarayıcı ve bilgisayarını analiz edebilen
(çözünürlük, renk derinliği, ekran ve pencere büyüklüğü,
yüklü durumdaki plug-in’ler, vs.) fonksiyonlar
… layer üzerinde rollover fonksiyoları
… Tarayıcı filtresi

ve daha niceleri.
Hepsi kitapta ve kitabın CD-ROM'unda.

Kitabın Yazarı Numan Pekgöz Hakkında

DHTML & CSS kitabı üçüncü yayını olan Numan Pekgöz 1970 İstanbul doğumlu. Maçka Teknik Lisesi Elektronik, Boğaziçi Üniversitesi Kimya, Amsterdam Computerij Enstitüsü Web Mühendisliği bölümlerinden mezun oldu. Yurt içinde ve yurt dışında çesitli kurum ve branşlarda çalıştı. Yaratıcılığı analitik düşünce ile birleştirebilen en uygun ortam olan internet'i kendisine meslek edindi. Sayısız web sitesinde ve programda imzası bulunan yazarımız Amsterdam'da yaşamakta olup, halen Hollanda'nın önde gelen internet firmalarından Clockwork'te yazılım mühendisi olarak görev yapıyor ve işini çok seviyor.

DHTML Hakkında Kısa Bilgi ve Filtre Örnekleri

Tüm anlatımlarda “sayfa” web sayfası(dokümanı) manasında, “eleman” web sayfasındaki bir nesne(textbox,table vs.) manasında, “nitelik” elemanın özelliği(attribute) manasında kullanılmıştır. Ayrıca aksi belirtilmedikçe tüm örnekler Cross-Browserlar ile çalışır biçimde anlatılacaktır.

Tarayıcılara Özgü Standartlar:

CSS-P Özellikleri: Öncelikle elemanın pozisyon niteliği belirtilmelidir. (absolute yada relative)

• left – elemanın sol pozisyonu
• top – elemanın üst pozisyonu
• visibility – eleman görünür mi görünmez mi
• z-index – elemanın istif sırası
• clip – elemanı belli yerlerinden kesme
• overflow – içerik taşmaları kontrolü

Filtreler: Filtreler ile yazılarınıza ve resimlerinize çeşitli efektler verebilirsiniz. Bu özelliği kullanmak istediğiniz elemanın genişliğini(width) mutlaka belirtin. Bazı filtreler background-color özelliği transparent olarak ayarlanmadıkça çalışmayacaktır.

DOM(Doküman Obje Modeli): Sayfadaki her elemana erişebilmemizi sağlar. Cross-Browserlar için ortak bir DOM modeli kullanılmaktadır. (NS 4.x ve IE 4.x için farklı yöntemlerle sayfa elemanlarına erişilebiliriz. Yeri geldiğinde bunlardan bahsedeceğim.) İstediğimiz elemana erişebilmek için o elemana bir “id” belirtmeliyiz tabi ki birde bu elemana erişmek için kullanılacak bir script dili ki biz javascript kullanacağız. Ufak bir örnek vereyim:

HTML 4.0 Event-Handlerları (Event Handlar = Olay tutucusu yada yöneticisi)

Aşağıda belirtilen olaylar yardımıyla sayfadaki elemanlar denetlenebilir yada istediğimiz olay(tetikleme) gerçekleştiğinde bunu kontrol edebiliriz. Bu eventler tüm cross-browserlar tarafından desteklenir.

DHTML nedir? DHTML ne değildir? DHTML nedir?

• Belirli teknolojilerin birbirleriyle dayanışma içinde kullanıldığı bir yöntem'dir.
• Geleneksel HTML sayfalarına görsel ve işlevsel açıdan zenginlik katan bir metoddur.
• Bizzat normal HTML sayfalarına eklenirler.
• Kullanıcı-tarafı teknolojilerini (HTML, CSS ve JavaScript) kullanır.
• Tarayıcı-özgün çalışır.
• Henüz yeni web standartı olmuş bir teknolojidir.
• Bedavadır.

DHTML ne değildir?

• Kendine özgü bütünlüğü ve kuralları olan bir kodlama ya da program dili değildir.
• HTML'in bir alternatifi değildir.
• Sunucu-tarafı teknolojisi değildir.
• Eski model web tarayıcılarının da halen kullanıldığını düşünürsek her tarayıcıda aynı şekilde çalışan bağımsız bir uygulama değildir.
• Geliştirme ve çalıştırma için ekstra bir yazılıma ihtiyaç yoktur. Hiç ir firmanın tekelinde değildir.

DHTML iki büyük tarayıcı üreticisi olan Microsoft ve Netscape'in versiyon 4 tarayıcıları ile bizleri tanıştırdıkları ve daha sonraki sürümlerinde de destekledikleri ve World Wide Web Konsorsiyumu (W3C) tarafından artık bir web standartı olarak kabul gören teknolojiye verilen isimdir.

Çoğu kişinin ismine bakarak HTML'in bir alternatifi olduğunu sanmasının aksine DHTML aslında soyut bir kavramdan başka bir şey değildir! Yani kendi içinde bütünlüğü ve kuralları olan HTML gibi bir kodlama (mark-up) dili ya da JavaScript gibi bir program dili değildir. Tamamen farklı kullanıcı-tarafı teknolojileri olan HTML, CSS ve JavaScript'in belirli bir anlamda ve birbirleriyle dayanışma içerisinde kullanıldığı bir 'yöntem'den başka bir şey değildir. Dolayısı ile DHTML teknolojisi diye hitap edilen sanal kavram aslında DHTML metodunun kullandığı HTML, CSS ve JavaScript teknolojilerinin bütününe verilen addır. Bu teknolojilerin her biri farklı bir amaç doğrultusunda geliştirilmiş ve birbirinden farklı konularda güçleri olan web standartlarıdırlar. DHTML ile yapmaya çalıştığımız iş ise bu teknolojilerin her birini özgün bir şekilde birbirleriyle etkileşim içerisinde kullanarak, web sayfaları üzerinde, bu teknolojilerin sahip oldukları güçlerin bileşkesinden dahi daha büyük bir kontrol gücü oluşturmaktır.
Dinamik Web Sayfaları

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.

JAVASCRİPT: DHTLM ‘ 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.