Web Tasarımında Başarının Şartları

1-) Kağıt Üzerinde Hazırlık: Fikrinizi önce kağıda dökmeye çalışın yada dökün ; reklam ajanslarının reklam filmi yaptığı gibi bir senaryo şeması çıkartır. Bu, bütün sayfaların ekran görüntüsünü kağıt üzerinde resmetmek anlamına gelmektedir. İlk önce projenizi kağıt üzerinde taslaklar hazırlayarak sınayın.

2-) Teknikleri Belirleme: Yunus diyor ki; Hayalinizdeki sitenin olu?umu için kullanılacak teknikleri belirleyin; zayıf olduğunuz tekniklerde kimden yardım isteyeceğinizi bir 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ınızda bir suluboya resim yapmamış kişi bile bir grafik programı ve telif hakkından vazgeçilmiş birkaç grafikle yola çıkılabilir 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ırma 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ı, elime-i?lem programı bilgisayarınızda yüklümü? Bilgisayarınız bu programların hepsini aynı anda çalı?tıracak Ram, Sanal bellek, Sabit disk ve grafik kartı ve ekrana sahip mi? Eğer saydığım bilgisayar donanımına sahip bir bilgisayarınız varsa işimiz kolaylaş mı? oluyor. Yaşasın bende webmaster oluyorum?
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, 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ı bir araya getirip, telif hakları ile ilgili sorunları halletmek zaman alır. Ayrıca bütün grafiklerinizle aynı tür isimlendirme tekniğini uygulayın: ya hepsinin adı büyük harflerle, yada 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 gayet hayrınıza olmaktadır. Herşey yavaş, yavaş ama altyapı mükemmel oluyor. Bu da kaliteyi meydana getirir. İyi bir ?ey yapmamız için teori ve sonra da bu teorileri uygulamamız gerekir.

5-) Stil Belirleme: Sitenizde uygulanacak metin, başlık ve diğer biçimlendirme metinleri 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.

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 ahlaki bir tutum olmaz. Ayrıca buna ihtiyaç da yok. Bir kere ba?kalarının sayfalarındaki Javasript bölümleri, büyük bir ihtimalle açıklama ve yorum satırları içermedi?i için kodların içinden çıkılması imkansıza yakındır. Oysa Web tasarımcılarına, kullanılmaya hazır, hemen her fonksiyonu yorum satırları ile açıklanmış telif hakkı sorumu 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 CD-Rom’u olacaktır!

7-) Tarayıcıları Öğrenin: Microsoft Internet Explorer ve Netscape Navigatior başta olmak üzere browser programlarını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?tirdikle bilgisine dayanmaktadır.
Bir örnekle bu karmaşık kavramı açıklayayım: HTML’de tablo oluşturmak için etiketlerinin içini doldurmanız gerektiğini biliyorsunuz. Fakat IE için bir tablonun sadece 22 özelliğinin belirlenebilmesine izin verir. Netscape ise 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-renkle, alt ve sağ kenarı ise açık renk yerine yazdığınız renkle görüntülenir. İki browser arasındaki farlar, bu kadar zararsız” olsa iyi. Yaptığınız formların değişik gözükmesi, formdaki eksiklik, ziyaretçiye tasarımcı olarak sizin hatanız gibi görünebilir. İyi bir web tasarımcısı, bu sebepledir ki bu iki browser’i içli dışlı bilmeleri yararlarına olacaktır. Tavsiye ettiğim yol ise iki browser’ı asgari ortak noktalarına hitap etmektir. Böylece yaptığınız siteler iki browser’dada gayet guzel gözükecektir. Bu da neyi meydana getirir düşünün bakalım (Yunusça kaliteyi meydana getirir ya sizin için neyi meydana getirir?)

JavaScript’lerinizi Hazırlayın: Dinamik HTML’in iki aya?ından biri CSS ise di?eri JavaScript yoluyla, bu stilleri katmanlara uygulamaktadı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ğinde zeminin rengi turuncuya dönü?sün bu olayı gerçekleştirmek HTML İle imkansız gibi bir şey anlamına gelir Peki ne yapacağız derseniz devreye JAVASCRIPT kodları girer bu da sitede dinamizmi meydana getirir. Çoğu internet sitelerinde bu kodları hazır bulabilirsiniz ama ben programcıyım diyorsanız siz kod yazmaya başlayın ben biraz kahvemi yudumlayım (Saat sabah 5.30) Evet yudumladıktan sonra size bir ?ey itiraf etmeliyim. Amerika’yı bir daha keşfetmenin ne anlamı var sözümden de anlayaca?ınız gibi yapılmı? bir şeyi bir daha yapmak birde hazırı varsa zaman kaybıdır ama öğrenmek istiyorsanız bu kodları da incelemenizi öneririm fakat bir site yapmaksa amacınız hazır kodlar bir çok sitede var sadece CTRL+C ve CTRL+V tu? kombinasyonu ile sitenize adapte edebilirsiniz.

9-) Katmanlar: Denir ki, Internet, televizyon ile dergi arasında bir ortamdır. Do?ru web sitelerinde bir gazetede olabileceğinizden çok, ancak uzmanlık alanında yayın yapan bir dergide yada kitapta bulunacak kadar bilgi, bir televizyon atraksiyonu ile ziyaretçiye sunulabilir. Web sayfalarınızda doğrudan bir video dosyaları da verebilirsiniz fakat çok pahalı streaming 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, televizyonu açtırabilir.
Fakat Web sayfalarınızda televizyon ve sinema teknolojisinin temeli olan grafikleri belirli bir sırayla görüntülenmesini, sırası gelenin açılmasını sırası gelenin ise kapanmasını sağlayabiliriz. Bunu katman teknolojisi sağlamaktadır. Sitenize dinamizmi getirmek ziyaretçi ile etkileşmektedir. Ziyaretçi ile etkileşmek ziyaretçinin bilgisayarına çerez yollamaktan ibaret değildir ve olmaması da gerekir. Katmanlar nesne oldukları için, isimleriyle hitap edilebilirler; 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?ildir. Sınama, mesela siz İstanbul’da oturuyorsanız, Artvin’deki veya Van’daki 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 133Mhz’lik Cpu’su, 1mb bellekli, 640*480 çözünürlükte ekrana sahip bir bilgisayarın kar?ısına geçirip, yüzlerini incelemektir. Ve bunu yaparsanız, sizden daha iyi bir Web sihirbazlı?ı yapan olmayaca?ına inanabilirsiniz. Bunları okudu?unuzu ve uygulamayı yaptı?ınızı varsayıyorum ve size meydan okuyorum siz artık gayet iyi yolda giden bir webmaster olmaya hazır ki?ilersiniz. Hayırlı Olsun?