Web tasarımı özellikle ülkemizde bazen biraz hafife alınmakta ve bu işin sadece bir iki program bilmekten ibaret olduğu yanılgısına düşülmektedir. Halbuki görüldüğü gibi gerçek anlamda Web tasarımı* bütün iletişim bilimlerinin buluştuğu en son nokta konumunda. Bu noktada pazarlama stratejileri* halkla ilişkiler* grafik altyapı* metin yazarlığı ve daha bir çok farklı etken aktif rol üstleniyor. Bunlardan yoksun bir tasarıma 'Web Tasarımı' demekten çok 'HTML Sayfası' demek daha doğru olur. Unutmayalım ki Word'de yazdığımız her yazı bir edebi eser olamayacağı gibi* Dreamweaver* Flash ya da Frontpage ile yapılan her sayfa da bir 'tasarım' olamaz.
Eğer "sanat için sanat" diyorsanız önünüzde hiçbir engel yok. Yok eğer başkalarının da sitenizi gezmesini* reklam alarak para kazanmayı* hele hele yaptığınız siteden satış yapıp kar etmeyi düşünüyorsanız maalesef pek özgür değilsiniz.
Bir tasarımcı olarak baktığımda geneldeiçler acısı sayfalarla karşılaştığımı söylemek isterim. Tabi kiharikulade tasarlanmış* içinde dolaştığımızda (görsel açıdan) zevk aldığımız siteler de yok değil. Ama bir kıyas yapıldığında kötülerin ezici bir üstünlüğü var. Bunda web üzerinde kullanılan HTML dilinin verdiği imkanlar (ya da imkansızlıklar) en önemli neden (bir de tasarıma önem vermeyen* hatta önem vermesi gerektiğini bile bilmeyen amatör bir kesim). HTML dilinin kullanıcıya sunduğu imkanlar alışık olduğumuz diğer tasarım programlarının sağladığı imkanlar kadar geniş değil. Birçok web sayfası bu imkansızlıkları başka türlü yollarla (HTML'e entegre olabilen JavaScript* PHP* Perl* CGI. animated gif* flash* vb.) aşmaya çalışıyor.
Bu noktada inşa ettiğiniz siteyi ne amaçla kullandığımız ön plana çıkıyor. Eğer "sanat için sanat" diyorsanız önünüzde hiçbir engel yok. İstediğiniz atraksiyonu* animasyonu* en azından sizin makinenizde browser tarafından görüntülenebilecek herşeyi kullanabilirsiniz. Böylece kendinize ve bilgisayar kurtlarına göre bir site yapmış olursunuz.
Yok eğer başkalarının da sitenizi gezmesini* reklam almayı* hele hele bu siteden satış yapıp kar etmeyi düşünüyorsanız maalesef pek özgür değilsiniz ve uymanız gereken bir takım kurallar var.
Herkes Bigisayar Kurdu Değil...
Bir kere sitenizi inşa etmeden önce şu konuda anlaşalım; herkes sizin kadar bilgisayar ve Internet bilgisine sahip değil. Birçok kullanıcı* bilgisayarlarını ilk aldıkları günlerde var ve makinesine yine o günlerde yüklenmiş olan browser'ları kullanıyorlar. Bu kullanıcıların yine büyük bir çoğunluğu bu yazılımları güncelleme yetisine sahip değil. Bilgisayarı yeterince tanımadıklarından* onlar için sık sık problem çıkaran bir makineye dönüşüyor. Bu yüzden varolan ve çalışan halini korumak esas. Tasarımcı olarak genel ve yaygın olarak kullanılan monitör büyüklüklerini* ekran çözünürlüklerini çok iyi bilmeli* web sayfalarımızı buna göre inşa etmeliyiz. Aynı şekilde web sayfalarımızın Internet Explorer* Netscape Navigator* Opera gibi farklı browserlarda nasıl görüntüleneceğini göz önünde bulundurmalıyız.
Öğütler...
Şimdi gelelim Internet gurularının "bir web sitesinin inşasında dikkat edilmesi gerekenler" konulu olmazsa olmazlarına...
Kural 1) İçerik kraldır: Çok güzel olsa da içerikten yoksun bir site ölmeye mahkümdur. Kullanıcılar sitenizin nasıl çalıştığıyla hiç* hem de hiç ilgilenmiyorlar. Sadece içeriğiniz için oradalar. İçeriği onlara basit ve hızlı bir şekilde verin.
Kural 2) Asıl çok olan azdır: Tasarımlarınızı olabildiğinca basit tutun. iyi bir tasarımın gücübasitliğinde saklıdır.
Formatın içerik karşısındaki çekiciliğinin sizi baştan çıkarmasına izin vermeyin. En sonunda ortaya çıkan tasarım* onun için harcadığınız emeğe kıyasla çok sade görünüyorsa* bu ipi göğüslediğinizin kanıtıdır.
Hız Çok Önemli...
Eğer web üzerinde satış yapmayı düşünüyorsanız hız sizin için her anlamda çok önemli. Artık "hız"ın esas alındığı günümüz dünyasında ve "hız"ın öneminin daha artacağı önümüzdeki yıllarda iki tür firma olacak: Hızlılar ve ölüler. Artık kararınızı verin; ya hızlı olacaksınız ya da ölü.
Web tasarımında estetiğin önünde duran en büyük engel sayfanın yüklenme hızıdır. Sayfa yavaş açılıyorsa yazı tahtasına (HTML editörü) geri dönmek gerekir.
Kullanıcıyı geri butonu kullanmamaya ikna etmek için sadece 3 saniyeniz var. 3 saniye. Bu* ekrana anında ilginç bir şey getirmeniz gerektiği anlamına geliyor.
Ekrana her şeyi yüklemek için ise 15 saniyeniz var (56 k modem için). Hatta bu tahmin çok liberal bir tahmin. Süre genelde 8 saniyedir. Elinizi çabuk tutun.
Yaptığınız tasarım her iki browser'da da (Internet Explorer ve Netscape Navigator) düzgün görünmelidir.
Frame kullanmaktan kaçının. (En azından anasayfada). Frame kullanırsanız sayfanız ziyaretçi tarafından işaretlenemez.
Aslında bu liste 100 tasarım hatası olarak genişletilebilir çünkü o kadar çok hata yapıyoruzki web sitelerimizde gerçekten hepsine değinmek imkansız. Burda en ölümcül hatalardan bahsedeceğim.
1. Siteyi planlamadan işe başlamak: Siteyi dizayn etmeye başlamadan önce oturup kalem kağıt ile yazıp çizmeli düşünmeli* eldeki materyallere göre sayfa yapısı sayfa sayısı ne olacak neleri içerecek kime hitap edecek baştan çok iyi hazırlanmalı.
2. Kontak bilgilerini sayfaya koymamak: Mutlaka her sitede "temasa geçin" butonu olmalı her sayfanın altına basitçe emailinizi koyun. Eğer e-ticaret yapıyorsanız kontak bilgisi olmayan bir site kesinlikle bu işten vaz geçmeli. Kimse sizinle temasa geçmese bile insanlar size ulaşabileceklerini bilince daha rahat edeceklerdir. (Tabi burada mail adresi toplayıcılarına da dikkat etmek gerekir.)
3. Kırık linkler: Sitenizi kendiniz test etmeyi unutmayın ziyaretçilerin sitenizde çalışmayan bozuk link görmesi iyi olmaz.
4. Eskimiş bilgi: Bu çoğu web sitesinin sorunudur* eskimiş bilgileri güncellemek çoğu zaman tembel webmasterlara ağır gelir. Bu yüzden kaybedeceğimiz imajımız ileride kaybedeceğimiz paramız demektir.
5. Çok fazla karışık yazı karakteri ve rengi: Sayfalarınızın tümünde aynı karakteri kullanmalısınız bir sayfada en çok 2 veya 3 ayrı karakter ve renk kullanın.
6. Artık sayfalar: Tüm sayfalarınıza bir "anasayfa" linki koyun. örneğin biri sizin sitenizi bir arkadaşına önerdi* siteye giren kişi girdiği sayfadan anasayfanıza gelemiyorsa işiniz bitti demektir.
7. Geri tuşunu iptal etmek: Bazı web siteleri* özellikle porno siteler* tarayıcınızdaki geri tuşunu iptal ederek veya tıkladığınızda başka reklam siteleri açarak gereksiz çabalar içine giriyorlar fakat bunun ziyaretçilerinizi kızdırmaktan başka bir şeye yaramayacağını bilin.
8. Yeni pencereler açmak: Bir zamanlar kullanıcı sitenizde bir linki tıkladığında içeriği yeni bir pencerede açmak modaydı fakat şu an bu sadece insanların canını sıkmak olur. Reklam açısından işe bakmak gerikirse sadece 1 tane reklam penceresi haklı görülebilir.
9. Uzun yükleme süresi: Eğer siteniz bedava hizmet verilen yerlerin birindeyse bu mazur görülebilir. Fakat siteniz profesyonel bir hizmet alıyorsa sitenizin yavaş olması affedilmez. Bir de sitenizi çok büyük resim yüklemeyin ki ziyaretçi beklerken sıkılmasın* tabi beklerse.
10. En son teknolojiyi kullanmak: Bazen insanı büyüler fakat bazen ziyaretçileri kaçıran bir sorundur* özellikle ziyaretçi sitenizi görüntülemek için bir program indirmek zorunda ise veya siteniz bir tarayıcıda görünüp diğerlerinde görünmüyorsa bu sizin için ölümcül olabilir.
İyİ Web Sayfalarinin 9 ÖzellİĞİ
permalink
1.İyi bir web sayfasına girdiğiniz zaman sayfa ekrana çabuk gelir (ziyaretçiyi ekranda fazla bekletmez).
2.Sayfanın içinde gereksiz resimlere* büyük fotoğraflara rastlamazsınız. Çok büyük boyutlu ve yüklenmesi uzun süren Animated gifler kullanılmamıştır.
3.Eğer sayfa iyi tasarlanmışsa ziyaretçi sayfa resimlerini kapatarak bağlansa bile sayfadaki bütün bilgilere kolayca ulaşabilir.
4.Eğer sayfada çerçeve kullanılmışsa*çerçeve hataları titizlikle ayıklanmıştır.
5.İyi bir Web sayfasına bağlandığınızda daha ilk sayfadan sayfanın editörü* sahibi vb...ile ilgili bilgilere kolayca ulaşabilirsiniz ve onlarla iletişim kurabilirsiniz.
6.İyi bir Web sayfasının içinde sadece internette her yerde gördüğümüz bilgiler bulunmaz* sayfayı tasarlayan Webmaster sayfaya kendisinden bir şeyler katmıştır.
7.Eğer sayfada linkler varsa* hiçbiri kırık değildir. Webmaster bu linkleri düzenli aralıklarla kontrol etmektedir.
8.Eğer bu siteden başka bir siteye sizi yollayan link varsa bu link mutlaka ayrı bir sayfa açılır. Böylece geldiğiniz yeri kaybetmezsiniz.
9.Sayfa mutlaka* ama mutlaka tablolar kullanarak tasarlanmıştır.
Web Tasariminda BaŞarinin Şartlari
permalink
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…
Eğer "sanat için sanat" diyorsanız önünüzde hiçbir engel yok. Yok eğer başkalarının da sitenizi gezmesini* reklam alarak para kazanmayı* hele hele yaptığınız siteden satış yapıp kar etmeyi düşünüyorsanız maalesef pek özgür değilsiniz.
Bir tasarımcı olarak baktığımda geneldeiçler acısı sayfalarla karşılaştığımı söylemek isterim. Tabi kiharikulade tasarlanmış* içinde dolaştığımızda (görsel açıdan) zevk aldığımız siteler de yok değil. Ama bir kıyas yapıldığında kötülerin ezici bir üstünlüğü var. Bunda web üzerinde kullanılan HTML dilinin verdiği imkanlar (ya da imkansızlıklar) en önemli neden (bir de tasarıma önem vermeyen* hatta önem vermesi gerektiğini bile bilmeyen amatör bir kesim). HTML dilinin kullanıcıya sunduğu imkanlar alışık olduğumuz diğer tasarım programlarının sağladığı imkanlar kadar geniş değil. Birçok web sayfası bu imkansızlıkları başka türlü yollarla (HTML'e entegre olabilen JavaScript* PHP* Perl* CGI. animated gif* flash* vb.) aşmaya çalışıyor.
Bu noktada inşa ettiğiniz siteyi ne amaçla kullandığımız ön plana çıkıyor. Eğer "sanat için sanat" diyorsanız önünüzde hiçbir engel yok. İstediğiniz atraksiyonu* animasyonu* en azından sizin makinenizde browser tarafından görüntülenebilecek herşeyi kullanabilirsiniz. Böylece kendinize ve bilgisayar kurtlarına göre bir site yapmış olursunuz.
Yok eğer başkalarının da sitenizi gezmesini* reklam almayı* hele hele bu siteden satış yapıp kar etmeyi düşünüyorsanız maalesef pek özgür değilsiniz ve uymanız gereken bir takım kurallar var.
Herkes Bigisayar Kurdu Değil...
Bir kere sitenizi inşa etmeden önce şu konuda anlaşalım; herkes sizin kadar bilgisayar ve Internet bilgisine sahip değil. Birçok kullanıcı* bilgisayarlarını ilk aldıkları günlerde var ve makinesine yine o günlerde yüklenmiş olan browser'ları kullanıyorlar. Bu kullanıcıların yine büyük bir çoğunluğu bu yazılımları güncelleme yetisine sahip değil. Bilgisayarı yeterince tanımadıklarından* onlar için sık sık problem çıkaran bir makineye dönüşüyor. Bu yüzden varolan ve çalışan halini korumak esas. Tasarımcı olarak genel ve yaygın olarak kullanılan monitör büyüklüklerini* ekran çözünürlüklerini çok iyi bilmeli* web sayfalarımızı buna göre inşa etmeliyiz. Aynı şekilde web sayfalarımızın Internet Explorer* Netscape Navigator* Opera gibi farklı browserlarda nasıl görüntüleneceğini göz önünde bulundurmalıyız.
Öğütler...
Şimdi gelelim Internet gurularının "bir web sitesinin inşasında dikkat edilmesi gerekenler" konulu olmazsa olmazlarına...
Kural 1) İçerik kraldır: Çok güzel olsa da içerikten yoksun bir site ölmeye mahkümdur. Kullanıcılar sitenizin nasıl çalıştığıyla hiç* hem de hiç ilgilenmiyorlar. Sadece içeriğiniz için oradalar. İçeriği onlara basit ve hızlı bir şekilde verin.
Kural 2) Asıl çok olan azdır: Tasarımlarınızı olabildiğinca basit tutun. iyi bir tasarımın gücübasitliğinde saklıdır.
Formatın içerik karşısındaki çekiciliğinin sizi baştan çıkarmasına izin vermeyin. En sonunda ortaya çıkan tasarım* onun için harcadığınız emeğe kıyasla çok sade görünüyorsa* bu ipi göğüslediğinizin kanıtıdır.
Hız Çok Önemli...
Eğer web üzerinde satış yapmayı düşünüyorsanız hız sizin için her anlamda çok önemli. Artık "hız"ın esas alındığı günümüz dünyasında ve "hız"ın öneminin daha artacağı önümüzdeki yıllarda iki tür firma olacak: Hızlılar ve ölüler. Artık kararınızı verin; ya hızlı olacaksınız ya da ölü.
Web tasarımında estetiğin önünde duran en büyük engel sayfanın yüklenme hızıdır. Sayfa yavaş açılıyorsa yazı tahtasına (HTML editörü) geri dönmek gerekir.
Kullanıcıyı geri butonu kullanmamaya ikna etmek için sadece 3 saniyeniz var. 3 saniye. Bu* ekrana anında ilginç bir şey getirmeniz gerektiği anlamına geliyor.
Ekrana her şeyi yüklemek için ise 15 saniyeniz var (56 k modem için). Hatta bu tahmin çok liberal bir tahmin. Süre genelde 8 saniyedir. Elinizi çabuk tutun.
Yaptığınız tasarım her iki browser'da da (Internet Explorer ve Netscape Navigator) düzgün görünmelidir.
Frame kullanmaktan kaçının. (En azından anasayfada). Frame kullanırsanız sayfanız ziyaretçi tarafından işaretlenemez.
Aslında bu liste 100 tasarım hatası olarak genişletilebilir çünkü o kadar çok hata yapıyoruzki web sitelerimizde gerçekten hepsine değinmek imkansız. Burda en ölümcül hatalardan bahsedeceğim.
1. Siteyi planlamadan işe başlamak: Siteyi dizayn etmeye başlamadan önce oturup kalem kağıt ile yazıp çizmeli düşünmeli* eldeki materyallere göre sayfa yapısı sayfa sayısı ne olacak neleri içerecek kime hitap edecek baştan çok iyi hazırlanmalı.
2. Kontak bilgilerini sayfaya koymamak: Mutlaka her sitede "temasa geçin" butonu olmalı her sayfanın altına basitçe emailinizi koyun. Eğer e-ticaret yapıyorsanız kontak bilgisi olmayan bir site kesinlikle bu işten vaz geçmeli. Kimse sizinle temasa geçmese bile insanlar size ulaşabileceklerini bilince daha rahat edeceklerdir. (Tabi burada mail adresi toplayıcılarına da dikkat etmek gerekir.)
3. Kırık linkler: Sitenizi kendiniz test etmeyi unutmayın ziyaretçilerin sitenizde çalışmayan bozuk link görmesi iyi olmaz.
4. Eskimiş bilgi: Bu çoğu web sitesinin sorunudur* eskimiş bilgileri güncellemek çoğu zaman tembel webmasterlara ağır gelir. Bu yüzden kaybedeceğimiz imajımız ileride kaybedeceğimiz paramız demektir.
5. Çok fazla karışık yazı karakteri ve rengi: Sayfalarınızın tümünde aynı karakteri kullanmalısınız bir sayfada en çok 2 veya 3 ayrı karakter ve renk kullanın.
6. Artık sayfalar: Tüm sayfalarınıza bir "anasayfa" linki koyun. örneğin biri sizin sitenizi bir arkadaşına önerdi* siteye giren kişi girdiği sayfadan anasayfanıza gelemiyorsa işiniz bitti demektir.
7. Geri tuşunu iptal etmek: Bazı web siteleri* özellikle porno siteler* tarayıcınızdaki geri tuşunu iptal ederek veya tıkladığınızda başka reklam siteleri açarak gereksiz çabalar içine giriyorlar fakat bunun ziyaretçilerinizi kızdırmaktan başka bir şeye yaramayacağını bilin.
8. Yeni pencereler açmak: Bir zamanlar kullanıcı sitenizde bir linki tıkladığında içeriği yeni bir pencerede açmak modaydı fakat şu an bu sadece insanların canını sıkmak olur. Reklam açısından işe bakmak gerikirse sadece 1 tane reklam penceresi haklı görülebilir.
9. Uzun yükleme süresi: Eğer siteniz bedava hizmet verilen yerlerin birindeyse bu mazur görülebilir. Fakat siteniz profesyonel bir hizmet alıyorsa sitenizin yavaş olması affedilmez. Bir de sitenizi çok büyük resim yüklemeyin ki ziyaretçi beklerken sıkılmasın* tabi beklerse.
10. En son teknolojiyi kullanmak: Bazen insanı büyüler fakat bazen ziyaretçileri kaçıran bir sorundur* özellikle ziyaretçi sitenizi görüntülemek için bir program indirmek zorunda ise veya siteniz bir tarayıcıda görünüp diğerlerinde görünmüyorsa bu sizin için ölümcül olabilir.
İyİ Web Sayfalarinin 9 ÖzellİĞİ
permalink
1.İyi bir web sayfasına girdiğiniz zaman sayfa ekrana çabuk gelir (ziyaretçiyi ekranda fazla bekletmez).
2.Sayfanın içinde gereksiz resimlere* büyük fotoğraflara rastlamazsınız. Çok büyük boyutlu ve yüklenmesi uzun süren Animated gifler kullanılmamıştır.
3.Eğer sayfa iyi tasarlanmışsa ziyaretçi sayfa resimlerini kapatarak bağlansa bile sayfadaki bütün bilgilere kolayca ulaşabilir.
4.Eğer sayfada çerçeve kullanılmışsa*çerçeve hataları titizlikle ayıklanmıştır.
5.İyi bir Web sayfasına bağlandığınızda daha ilk sayfadan sayfanın editörü* sahibi vb...ile ilgili bilgilere kolayca ulaşabilirsiniz ve onlarla iletişim kurabilirsiniz.
6.İyi bir Web sayfasının içinde sadece internette her yerde gördüğümüz bilgiler bulunmaz* sayfayı tasarlayan Webmaster sayfaya kendisinden bir şeyler katmıştır.
7.Eğer sayfada linkler varsa* hiçbiri kırık değildir. Webmaster bu linkleri düzenli aralıklarla kontrol etmektedir.
8.Eğer bu siteden başka bir siteye sizi yollayan link varsa bu link mutlaka ayrı bir sayfa açılır. Böylece geldiğiniz yeri kaybetmezsiniz.
9.Sayfa mutlaka* ama mutlaka tablolar kullanarak tasarlanmıştır.
Web Tasariminda BaŞarinin Şartlari
permalink
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…
