Web'de Sayfa Düzeni Nasıll Olmalı ?

Web'de Sayfa Düzeni Nasıll Olmalı ? Sayfa Düzeni HAkkında



Web’de Sayfa Düzeni

Mevcut Web sayfası tasarım programları, Quark Express, Corel Ventura veya Adobe PageMaker gibi sayfa tasarım programlarından çok daha az denetim imkanı getirmektedir. Bunun başlıca nedeni, kullanıcının bilgisayarı ile Web Server programının bulunduğu bilgisayar arasındaki iletişim protokolüne (HTTP) uygun bir iletişim sağlamak zorunda olan HTML dilinin karşı karşıya olduğu teknik zorluklardır. Ama bu zorluklar, bir taraftan HTTP protokolünde, diğer taraftan browser programlarının HTML’i yorumlayışlarındaki sürekli gelişme sayesinde, yavaş da olsa, giderek azalmaktadır. Şimdilik bazı zorluklar var diye, HTML sayfaların palyaço makyajı gibi olması da gerekmez. HTML ile yapılabilecek muhteşem tasarımlar vardır. Hele, HTML 4.0 sürümü ile sağlanan ve sayfalarda görsel birlik bağlamakta kullanılması gereken yerel STYLE kodu veya Cascading Style Sheet (CCS) adı verilen stil komutları dosyası oluşturma imkanı, görsel açıdan etkili HTML sayfalar yapmayı mümkün kılmaktadır.

Aşağıda, görsel açıdan arzu edilen etkiyi sağlamakta kullanılabilecek bazı HTML tasarım kolaylıkları sıralanmaktadır:

Renk




Bir Web alanının çeşitli sayfaları arasında görsel birliği, belki de diğer grafik unsurlardan daha fazla, renk birliği sağlar. Daima Macintosh sisteminin daha zengin renk skalası yerine Windows’un daha kısıtlı temel renklerini kullanınız. Windows 95 ile PC dünyasına da 256 renk içeren paletler gelmiş olmakla birlikte, Windows sistemi gerçekte 216 renk üretebilir. güvenli bir renk skalası, en az üç en fazla beş renk içermelidir. Bu renklerin Windows’ın sistem renkleri olmasına dikkat ediniz. Sistem skalasında yer almayan bir renk seçtiğiniz zaman, bu rengin hangi tür bilgisayar ekranında nasıl gösterildiğini mutlaka sınayınız. Sizin ekranınızda hafif bir sarı, bir başka bilgisayarın ekranında neon sarısı olabilir. İzleyicinin bizim arzu ettiğimiz rengi, arzu ettiğimiz tonda görmesini sağlamak için, sayfanın geri planına renklendirlmiş boş kutudan oluşan grafik yerleştirmek, sadece sayfanın aktarılmasını geciktirmeye yarar. Renk tonundan fedakarlık ederek, sayfalarımızın hızlı aktarılabilir olmasını sağlamalıyız. Netscape’in renkleri Hexadecimal sayılarla tanıdığı, buna karşılık Explorer’ın renkleri isimleriyle tanıyabildiğini unutmamak gerekir. Explorer da hexadecimal değerleri tanıyabildiğine göre, güvenli bir uygulama daima renklerini sayıyla ifade etmektir.

Ölçüler




Sayfanın kodlanması sırasında işi şansa bırakarak, ölçüleri yüzde olarak vermeyiniz; daima pixel olarak veriniz. Yatay olarak bütün unsurlarınızın genişliği, sayfanın izleyici tarafından kağıda basılacağını tahmin ediyorsanız 539 pixel’i, sadece ekranda seyredileceğini düşünüyorsanız 350'yi geçmemelidir. Bununla birlikte sayfada yatay veya dikey kaydırma çubuğunun çıkmasına neden olmayacak bir tasarımda, ölçülerin yüzde olarak verilmesi, büyük ekranı olan izleyicilerin teknik imkanlarından kendi lehimize yararlanmamızı sağlar.

Sütun




HTML, sayfayı sütunlara bölemez. Bu bakımdan sütunlu sayfa düzeni ya tablo ile, ya da grafik unsurların mutlak koordinatları verilerek yapılabilir. Mutlak koordinat yöntemi sadece browser programlarının 4.0'ncü sürümüyle uygulanabilir olduğuna göre, eski sürüm browser sahipleri, bizim sütunlar halinde görüleceğini sandığımız unsurları, alt alta dizilmiş olarak görebilirler. Tabloların kutularına arka plan rengi ve görüntüsü verebiliriz. Bu imkandan yararlanırken, sayfanın aktarılması hızını ne ölçüde yavaşlattığımızı hesaba katmalıyız. Tablonun her bir kutusunu, bağımsız bir HTML sayfası gibi ele alabilir ve içine metin ve grafikleri yerleştirebilirsiniz. Yeni sürüm browserlar, tablo kutusu içine yeni bir tablo bile kabul edebilirler. Tablo, etkili bir sayfa tasarımında güçlü bir araç olarak kullanılabilir.

Çerçeve




HTML’e sütun görüntüsü veren bir diğer imkan çerçeve (frame) komutlarıdır. Ne var ki, bilgisayar kullanıcılarının sahip olduğu browserların eski sürümleri, çerçeve komutlarını yorumlayamazlar. Çerçeveli sayfaların yavaş yüklendiği gerçeği de bir çok kullanıcıda çerçeveye karşı olumsuz bir önyargı oluşturmuş bulunuyor. Bununla birlikte çerçeve, sayfanın bir köşesini sabit hale getirerek, tasarımcıya değişmeyen bir seyir denetim alanı verir ve bağlantılar buraya yerleştirilebilir; ama tasarımı önce hiç çerçeve kullanmadan yapmanın yollarını aramalıyız. Seyir (navgation) bağlantılarımızı, her sayfada tekrarlamak veya bağlantı komutlarını içeren basit grafiği her sayfada tekrar ederek, çerçeveye başvurmaktan kurtulmak mümkündür. Çerçeve kullanmaktan başka çare yoksa, çerçeve genişliklerinin toplamının, tayin ettiğiniz sayfa genişliğini aşmamasına özen gösteriniz. Bir sayfanın ortasında beliren kaydırma çubuğu kadar kötü görsel etki oluşturulan başka bir uygulama olamaz! Kaydırmak çubuğundan kurtulmak için çerçevelerin kaydırılamaz olmasını (scrolling=none) sağlamak ise, doludan kaçarken yağmura tutulmak olur. Çerçevenin içeriği çerçeveye kalan alanı aşmıyorsa, kaydırma çubuğu ekrana gelmeyecektir. Kaydırma tümüyle önlenir ama içerik ekranın sağından dışarı taşarsa, izleyicinin içine düşeceği öfkeyi düşünün ve kaydırma komutunu otomatik’te tutun (scrolling=auto). Her sayfanın bir de çerçevesiz türünü yapıp, her ikisini birbirine bağlantılandırmak, izleyeciye saygılı bir tasarımcının başlıca ilkelerinden biri olmalıdır. Bu arada IFRAME komutu ile ilgili ufak bir hatırlatma yapmakta yarar var: Frameset komutu kullanmadan, bir HTML sayfasının içine yüzen bir başka çerçeve yerleştirmeye imkan veren bu komut, şu anda sadece Explorer tarafından tanınmaktadır. Etkili bir görsel unsur oluşturulan ve Frameset gibi bilgisayardan bilgisayara aktarılması zaman almayan bu yararlı komutu kullanabilmek için en azından Nestcape 5.0'e kadar beklemek gerekiyor.

Grafiklere konulacak bağlantı komutları (map’ler)




Daima client side map kullanmaya özen gösteriniz. Server side map komutları, izleyicinin bilgisayarı ile Web Server bilgisayarı arasında iletişimi iki kez arttırmaktan başka bir işe yaramayan eski bir teknolojidir.

Metin Biçimlerdirme




HTML’de yazıları şekillendirme, henüz yeni başlıyor. Quark’ın imkanlarının HTML’e gelmesi için daha çok zaman geçmesi gerekiyor! Ama durum o kadar da umutsuz değil. Explorer’da 3.0'den beri olan HTML dosyası dışı stil dosyası (cascading style sheet, CCS) tanıma imkanı, Netscape 4.0'e de bir ara sürümle gelmiş bulunuyor. Ama browser’ları en son sürümle güncelleştirilmiş kaç kişi var? (Kendi sorumuzun cevabını verirsek, bir araştırma Türkiye’deki tüm browser’ların sadece yüzde 12'sinin her iki programın 4'ncü sürümü olduğunu gösteriyor.) Fakat her iki programın 3'ncü sürümlerinden bu yana ortak tarafı, HTML’in içine yerleştirilmiş STYLE komutunu tanımalarıdır. Bu imkanısayfalarınızı zenginleştiren bir şekilde kullanmak mümkündür. SPAN komutunu, STYLE ile birlikte kullanarak, H1-H6'ya bağlı kalmadan etkili sayfalar yapılabilir. Paragrafların sayfanın sağına, soluna veya ortasına bloke edilmesini sağlayan “text-align:” komutu, bir başka güçlü tasarım unsuru olarak kullanılabilir. Her bir paragrafa, bir diğerinden bağımsız sağ ve sol boşluklar (margin) vermek mümkündür. Biçimlendirme komutlarınızı sayfanın başında tanımlarsanız, aşağıda istediğiniz gibi yararlanabileceğiniz tag’ler elde etmiş olursunuz.

Form




Bir gazete veya dergi sayfasının ya da televizyonun yapamayacağı fakat HTML’in yapabileceği bir şey varsa, o da FORM komutunun kullanılması olmalı. Form, kullanıcının Web server ile ile etkileşmesinde doğrudan kullanabileceğimiz bir işleve sahiptir. Form ile ziyaretçi bize bilgi verebilir, bilgi isteyebilir; hatta form komutu ile izleyiciye bizim bilgisayarımızı kullanma, izin verdiğimiz programları işletme imkanı bile verebiliriz. Form sayfanın kendisinden beklenen etkileşmeyi sağlayabilmek için teknikten önce uygun bir görsel etkiye sahip olması gerekir. Bu nedenle formlar, Web sayfasının teknik yönetmeni tarafından komutlandırılmadan önce, grafik tasarımcısı tarafından çizilmelidir. Form sayfalarında izleyicinin kutudan kutuya gitmesinin mantıksal bir çizgi izlemesi gerekir. Örneğin, izleyicinin adresini yazarken, sokak adı ve bina numarasından önce kenti yazmasını istemeyiniz. Herkes, yıllarca resmi ya da resmi olmayan formlar doldurarak, adeta belirli bir form beklentisine sahiptir. Bu beklentiyi bozmak izleyiciyi şaşırtabilir. Formlarda istenen bilgilerden radyo düğmesi veya işaretleme kutusunun seçilmesi suretiyle verilecek olanların değişkenleri aynı ismi taşımalıdır. Aksi taktirde, örneğin bu formla elde edilecek bilgi bir veri tabanına işlenecekse, ortaya kullanışlı olmayan bir sütun çıkartmış olursunuz. Formlarda, mutlaka doldurulması gereken kutular, belirgin bir renkte ve açık ifadelerle işaretlenmiş olmalıdır. Formların bağlı olduğu CGI programları, formu dolduran kişiye o anda ekran başında ve daha sonra elektronik posta ile formunun alındığını bildirmelidir. Kısa bir teşekkür mesajı içerek bu bildirim ekranında, mutlaka formdan bir önceki sayfaya geri dönme imkanı olmalıdır. Formun yanlış doldurulduğu kullanıcıya ayrıntılı olarak bildirilmeli, hangi kutuda, hangi bilgide hata olduğu veya hangi kutunun mutlaka doldurulması gerektiği açıkça kaydedilmelidir. Hata bildiren ekrandan geriye dönüşte, formun boş şekli ne değil, hatalı da olsa doldurulmuş şekline dönme sağlanmalıdır. Formda kredi kartı numarası, adres, ya da kişinin özel yaşamıyla ilgili izinsiz açıklanması mümkün olmayan bilgiler isteniyorsa, formun belirgin bir yerinde bu bilgilerin gizli tutulacağı güvencesi yer almalı ve bu gizliliğin sağlanması için CGI tarafında gereken önlemler alınmalıdır. Elektronik ticaretle ilgili formlarda, bize güvenliği veren firmanın, sistemin veya bankanın güvenlikle ilgili logosu belirgin şekilde kullanılmalıdır.

ALT




Grafikleri bilgisayarına aktaramayan bir izleyici, sizin koyduğunuz grafik yerine çirkin bir kopuk bağlantı simgesi görür. Oysa bunun yerine, yüklenemeyen grafiği anlatan bir kaç kelime, kullanıcıyı meraktan kurtarır.

META ETİKETLER




Web alanımızın izleyene bir şey kazandırmasını sağlamak, ziyaretçiye yeniden gelmesi için çıkartılmış en etkili davetiyedir. Yeniden ziyareti sağlamak kadar, sayfalarımızın varlığını bile bilmeyen, özellikle belirli bir koruda arama yapan kişilerin karşısına kolayca çıkabilmemiz gerekir. Belirli arama sistemlerini işleten kurum ve kuruluşlar, Internet’teki sayfaların tümünü inceleyerek içindekileri indekslemek yerine, HTML sayfalarının başındaki META tag’lerini kaydetmekte ve indekslerini burada yer alan bilgilerle yapmaktadırlar. Bu nedenle, bütün HTML dosyalarımızın başında, örneğin:





şeklinde tanıtma satırları bulunmalıdır. Ayrıca SubmitIt.com firmasının sağladığı, sayfalarımızı ilgili alanlara ulaştırarak, bağlantı verilmesi imkanından yararlanma yollarını aramalıyız. Başkalarının bağlantı verdiği sayfaların HTTP adresini değiştirmemeye özen göstermeliyiz. Adresimizi değiştirmek zorunda kalırsak, en az altı ay süreyle eski adresi koruyup, buradan yeni adrese otomatik ve elle kullanılabilen bağlantılar vermek, mevcut ziyaretçi kitlesini kaybetmemek açısından önem taşır.

Bağlantıları Kontrol Edin




Sitenizi Server'a gönderdikten sonra, ziyaretçi gibi sitenize girin ve bütün bağlantıları tıklayın. Bazı HTML editörleri, metin veya resim unsurlarına veya diğer sayfalara bağlantı (link) kurduğunuz zaman, HREF etiketinin karşısına bağlantının hedefini yazarken, bu unsurun bulunduğu sabit diskin ve dizinin adını da yazarlar: gibi. Böyle bir bağlantıyı içeren sayfayı sitenize koyduğunuz zaman, Server'ın bulunduğu bilgisayarda sayfanız gerçekten C: diskinde ve Web dizininde ise, bazen mesele olmayabilir. Çoğunlukta ziyaretçiniz bir hata mesajı alacaktır. Sitenin durduğu dizin, Server açısından o sitenin kök dizinidir ve bütün diğer dizinler kök dizine göre göreli (relatif) olarak gösterilmelidir. Sayfanız, sitenizin içinde Web dizininde ise bu bağlantının doğru şekilde gösterilmesi şöyle sağlanır: . Dikkat ederseniz, ters bölü işaretinin yerine düz bölü işareti kullanıyoruz.

Yükünüzü Azaltın




Sayfanızda gerçekten bir anlamı olmayan, bir maksada hizmet etmeyen ne varsa atın. Hele, "Siz bilmen ne zamandan beri bilmem kaçıncı ziyaretçisiniz!" diyen sayaçların ziyaretçiye ne faydası var? Coğrafî olarak binlerce kilometre uzakta ve Internet'te omurgaya 30 etap ötede bulunan bir ziyaretçi, sitenizi kaçıncı ziyareççi olarak ziyaret ettiğini bilse ne olur? Oysa bu sayacın bağlı olduğu CGI programının çalışması ve sonucu bildirmesi, ziyaretçi için fazladan zaman kaybıdır.

Yazıyla belirtebileceğiniz bir unsuru, grafikle belirtmekten vazgeçin. Browser'ının kuruluş özelliklerinde grafikleri istemediğini belirtmiş ziyaretçileri düşünerek, her grafik bağlantı unsurunun bir de metin bağlantı unsuru olmasını sağlayın.

Özellikle grafik olarak sunulan metinlerde kısaltma yapmayın; kısa bir kelime bulun.

Türkçe.. Türkçe.. Türkçe..




Bu bölümü kapatırken, buraya kadar söylenenler ölçüsünde--hatta onlardan çok daha fazla-- önemli şu uyarıyı asla unutmayın:

Sayfalarınızda Türkçe dil bilgisi ve yazım hatası yapmayınız. İyi bir İmla Klavuzu, ve metinlerin (özellikle grafik halinde sunulan yazıların) daktilo ve Türkçe hatası içermemesi gerekir. Bu, söylemesi kolay ama yerine getirmesi oldukça güç kurala riayet, ziyaretçilerinize ve ortak kültürümüze ne denli saygılı olduğunuzun en büyük göstergesi olacaktır.