Web Tasarımında Başarının Sartları [10 Sart] Web tasarimda Başarmak için ; 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?) 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…