Web Tasarımında Başarınn Yolu

1-) Kagı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: 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?)

8-) 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..