html kayan yazılar
KAYAN YAZILAR
KAYAN, yuvarlanan, ters parende atarak ekrandan kaybolan yazılar insanların ilgisini daha çok çeker. Microsoft bunu düşünerek, benim vatandaşlarım da kayan yazılardan faydalanabilsin demiş ve <MARQUEE> tag'ını web tarayıcısının yorumlayıcısına eklemiş... Netscape ise Explorer 2.0'dan beri var olan bu tag'ı web tarayıcısına koymayı düşünmüyor. Yine de tag'ı kullandığınızda içerisinde var olan yazıların Netscape kullanıcıları tarafından 'normal yazı' olarak görüneceğini belirtelim.
<MARQUEE BEHAVIOR=tip BGCOLOR=renk DIRECTION=yön HEIGHT=n HSPACE=n LOOP=n SCROLLAMOUNT=n SCROLLDELAY=n VSPACE=n WIDTH=n>
BEHAVIOR=tip: Metnin ekranda nasıl hareket edeceğini belirten bu ek SCROLL, SLIDE, ALTERNATE değerlerinden birini alabilir. Ek kullanılmadığında SCROLL değeri varsayılan olarak kabul edilir ve yazı, sınırın bir köşesinden belirerek diğer köşeden kayarak kaybolur. SLIDE eki ise yazının bir köşeden başlayarak diğer köşede donmasını sağlar. Metnin iki köşe arasında gidip gelmesi ise ALTERNATE ekiyle gerçekleştirilebilir.
BGCOLOR=renk: Kayan yazının arkasındaki rengi belirler. ' renk' değeri 16'lık sayı düzeninde bir değer olabileceği gibi ' red' ,' blue' gibi renk isimlerinden biri de olabilir.
DIRECTION=yön: Yazının kayma yönünü belirler. DIRECTION eki, LEFT veya RIGHT değerlerinden birini almalıdır. LEFT değeri yazının soldan sağa doğru kaymasını, RIGHT ise bunun tersini sağlar.
HEIGHT=n: Kayan yazının sınırlarından ' yüksekliği' sağlar. N değeri sabit bir piksel sayısı olduğu gibi aynı zamanda bir pencere oranı olabilir. Oran değeri % işareti ile belirtilmelidir.
HSPACE=n: Kayan yazının sınırlara ne oranda yaklaşacağını belirler. Bu ek özellikle arka plana bir renk verildiğinde daha da belirginleşir.
LOOP=n: Yazıya verilen hareketin sınırlar içerisinde kaç kere tekrarlanacağını belirler. N değerine ' -1' veya ' INFINITE' verildiğinde hareket sınırsız olarak tekrarlanır. Tip olarak ' SLIDE' kullanıldığında bu işlem tek bir kez gerçekleşeceğinden LOOP ekini kullanmaya gerek yoktur.
SCROLLAMOUNT, Kayan yazının bir defada kaç piksel hareket edeceğini, SCROLLDELAY ise yazının her bir hareketi arasında kaç milisaniye bekleyeceğini belirler. Yazının üst ve alt sınırdan ne kadar uzakta kalacağını VSPACE ile, yazının kayacağı toplam uzunluğu ise WIDTH ile ayarlayabilirsiniz. WIDTH değeri HEIGHT gibi bir yüzde alabilir.
Örnek Kullanım:
<MARQUEE DIRECTION=RIGHT BEHAVIOR=SCROLL SCROLLAMOUNT=10 SCROLLDELAY=200>Bu kayan bir yazıdır... </MARQUEE>
Örneğin Görünümü:
Bu kayan bir yazıdır...
Multimedia Öğeleri
HTML etkileşimli ve çarpıcı dokümanlar oluşturmak için mükemmel bir ortamdır. Ses ve video görüntülerinin HTML sayfalarında kullanılabilmesi bu ortamı daha da çekici bir konuma getirir.
Bu öğeleri kullanmak sadece 2-3 tane kilit komut bağlı. İşte bunları veriyoruz;
Seçiminize göre geri planda WAV, .AU veya MIDI ses dosyalarından birini çalmak için Internet Explorer'da BGSOUND tag'ını kullanabilirsiniz.
<BGSOUND SRC=' deneme.mid' LOOP=5>
komutunu kullandığınızda ' deneme.mid' adlı MIDI dosyası sayfa yüklendiğinde 5 defa tekrarlanacak ve sonra duracaktır. Bir AVI veya MOV dosyasını oynatmak için ise yine sadece Explorer'da işe yarayacak DYNSRC komutunu kullanmalısınız.
Deneme.Avi adlı bir video görüntüsünü ekrana yerleştirmek için aşağıdaki gibi bir komut kullanmalısınız. Deneme.Gif dosyası görüntü yüklenene kadar sayfada yer kaplayacaktır.
<IMG DYNSRC=' deneme.avi' SRC=' deneme.gif' LOOP=INFINITE >
Daha önce de belirttiğimiz gibi yukarıdaki komutlar sadece Explorer'da işe yarıyor. Peki çokluortam dosyaları
Netscape'de nasıl gösterilir? Onunda yolu var fakat görsel açıdan Explorer'daki kadar başarılı olmuyor.
EMBED komutuyla Netscape penceresine ' gömülen' dosyalar beraberinde çerçeve kaydırma çubuğunu da birlikte getiriyor. Yine de öğrenmek isteyenler için komutumuz şöyle:
<EMBED SRC=' deneme.avi' >
İlkel Bir 'Client Pull'
POINTCAST'i hepiniz bilirsiniz. Kullanıcı bu servisin sağladığı arabirimde bir takım seçenekleri işaretler ve bu seçenekler doğrultusunda masaüstüne bilgiler gelir. <META> tag'ının yaptığı iş de bundan pek farklı değildir. Kullanıcıya ulaşan web sayfası bu tag sayesinde kendini belirli aralıklarla tekrar yükler veya kullanıcıyı başka bir web sayfasına ışınlar. ' Sayfayı isteme' işi kullanıcı tarafından sunucuya yollandığından bu komut ' client pull' işlemini başarıyor diyebiliriz. Bu tag ile birlikte aşağıdaki ekler kullanılmaktadır.
HTTP-EQUIV=' REFRESH' : Saniyelerle belirlenen aralıklarla dokümanın kullanıcıya tekrar ulaşmasını sağlar.
CONTENT=' n; URL=url' : Web tarayıcıya sayfanın ne aralıklarla tekrar yükleneceğini belirler. CONTENT eki içinde ayrıca URL ifadesi kullanılmışsa belirtilen zaman aralığından sonra hangi sayfanın yükleneceği de belirtilebilir.
Aşağıda, mutlaka <HEAD> - </HEAD> aralığında kullanılması gereken <META> tag'ının iki örneğini veriyoruz. 1. örnek, bulunulan sayfayı her iki saniyede bir tekrar yükleyecek, 2. örnek ise açıldıktan 5 saniye sonra www.pcmagazine. com.tr adresli PC Magazine Online'ın web sitesine bağlanacaktır.
ÖRNEK - 1
<HTML>
<HEAD>
<META HTTP-EQUIV=' REFRESH' CONTENT=2>
<TITLE>Tekrar Yükleme</TITLE>
</HEAD>
<P>Bu sayfa 2 saniyede bir tekrar yüklenecektir.
</HTML>
--------------------------------------------------------------------------------
ÖRNEK - 2
<HTML>
<HEAD>
<META HTTP-EQUIV=' REFRESH' CONTENT=' 5; URL=http://www.pcmagazine.com.tr' >
<TITLE>İkinci Dokümanı Yükle...</TITLE>
</HEAD>
<BODY>
<P>Bu sayfa 5 saniye sonra PC Magazine Online'ın web sitesine bağlanacaktır.
</BODY>
</HTML>
--------------------------------------------------------------------------------
RASTGELE İŞLEMLER
WEB dersanesi sayfalarımızda zaman zaman faydalı Java Script kodları bulabilirsiniz. İşte bunlardan bir tanesi; kodlarımız bulunulan saniyeyi okuyarak her saniyede değişik bir Murphy kuralını ekrana getiriyor. ' AR' değişkeniyle kaç adet kural olduğu tanımlandıktan sonra, kural Getmessge fonksiyonuna atanıyor ve fonksiyon <BODY...> tag'ının içerisinden çağrılıyor. Kendi vecizelerinizi bu script'e eklemek için öncelikle ' Array(3)' değerini daha sonra ' ar[sec % 4])' değerini yükselmeli ve vecizeyi yeni bir ' ar[x] =' satırına eklemelisiniz.
<HTML>
<HEAD>
<TITLE>Rastgele Vecizeler</TITLE>
<SCRIPT LANGUAGE=' JavaScript' >
<!--
function getMessage() {
var ar = new Array(3)
ar[0] = ' Hiç bir iş göründüğü kadar kolay değildir.'
ar[1] = ' Her iş tahmin ettiğinizden çok vakit alır.'
ar[2] = ' Yanlış gitme olasılığı olan her iş yanlış gider.'
ar[3] = ' Bir takım işlerin yanlış gitme olasılığı varsa size en çok zarar verecek olanı yanlış gider.'
var now = new Date()
var sec = now.getSeconds()
alert(' Murphy Kanunu:r' + ar[sec % 4])
}
//-->
</SCRIPT>
</HEAD>
<BODY onLoad=' getMessage()' >
</BODY>
</HTML>
TRANSPARAN GİF’ LER
Internet üzerinde gezinirken, resimlerin arka plan ve arka renkler ile uyum içinde olduğunu, resmin kare olmasına rağmen arka planın resmin boşluklarından görünebildiğine şahit olursunuz. Eğer web sayfanızda bir resim kullanıyor ve resmin boş taraflarından arkaplanın görünmemesinden ve resmin sayfa üzerinde yama gibi görünmesinden yakınıyorsanız bu bölümü dikkatle okuyun.
Bu bölümde resmi transparan hale getirirken en çok kullanılan shareware grafik editörlerinden biri olan Paint Shop Pro'nun 3.12 sürümünü kullanacağız. PSP 4.0 sahipleri de yaptıklarımızı aynen kendi programlarında uygulayabilirler. Öncelikle Paint Shop'u açın ve transparan yapmak istediğiniz GIF dosyasını yükleyin, unutmayın transparan dosyalar sadece GIF formatında ve 256 renkte olabilirler.
"Select" araç kutusundan aşağıdaki resimde de seçili olan "Color Picker"ı seçin ve resim üzerinde transparan yapmak istediğiniz, yani yaprak ve dünyanın dışında kalan alanın üzerine götürün. Fareyi bu bölgeden ayırmadan durum çubuğunun sağ bölmesinde I: değerinin yanındaki değeri aklınızın bir kenarına kaydedin.
"File" menüsünden "Save As..." komutunu çalıştırın ve format olarak GIF89a - Interlaced'i seçin. Diyalog kutusunun sağ tarafında bulunan Options butonuna bastığınızda GIF Transparency Options Diyalog kutusu karşınıza gelecektir. Bu kutucukta "Set Transparency Value to:" seçeneğini işaretleyip karşısındaki metin kutusuna "I:"nın karşısında okuduğunuz değeri (yani yalnız bu resim için 215'i) yazarsanız GIF dosyasının
renk seçici ile seçtiğiniz rengi transparan olacak böylece arkaplanlar bu bölgeden görülebilecektir. Resimler her zaman başarılı olarak transparan yapılamazlar, bunun sebebi bazen resmin istemediğiniz alanlarında transparan yaptığınız renge ait parçacıkların kalmasıdır. Bunu önlemek için resmi yüksek renge getirdikten sonra resim ile alakası olmayan bir renk seçip transparan yapmak istediğiniz alanı bu renk ile boyamalı ve resmi tekrar 256 renge getirerek bu rengin indeksini okuyup transparan hale getirmelisiniz. Bir transparan GIF'in hikayesi kısaca böyle, "Benim işim gücüm var, bu kadar işle uğraşamam" diyorsanız, Internet üzerinde yüzlerce GIF dönüştürme seti bulabilirsiniz, hızlı olmalarına rağmen insan elinin yerini tutmaz ama olsun.
JPEG Mİ GIF Mİ?
Web sayfalarında resim kullanırken en çok sorulan sorulardan biri şudur:
' Madem JPEG dosyaları aynı ölçülerdeki GIF'lerden daha az yer tutuyor neden GIF dosyalarını kullanayım?'
Bu sorunun cevabı çok basit, GIF dosyaları sayfa üzerinde JPEG dosyalarından daha keskin ve canlı görünürler, bunun sebebi JPEG formatının ' kayıplı' bir grafik formatı olmasıdır. JPEG dosyalarının kullanılması ayrıca, sade beyaz alanlarda yüksek renk çözünürlüğünde görülmeyen fakat 256 renkte göze batan küçük noktacıkların oluşmasına neden olur. JPEG formatı, daha çok büyük ve az bir beyaz alana sahip grafik dosyaları üzerine uygulanmalıdır.
Bu konu hakkında daha çok bilgi için Soner Demircilerin hazırladığı "Web Sayfalarında Grafik Kullanımı" adlı yazıyı okuyabilirsiniz.
Web Sayfalarında Grafik Kullanımı
Başarılı bir Web sitesine sahip olmak için sayfa tasarımını iyi bilmeniz, kısacası sanatsal görüş açısına sahip olmanız gerekir. İşte bu işin püf noktaları...
PEK çok şirket ve kurum Internet'te yeralmak için yarışıyor. Rakiplerinin Web sitelerinin olması kaygısı, modaya uymak gibi nedenlerle kendi Web sitelerini hazırlıyorlar veya hazırlatıyorlar. Şundan emin olun ki, bir süre sonra şöyle diyecekler: ' İyi, güzel bir Web sitemiz var ama bunun bize getirisi ne oldu? Pek uğrayan yok. bir Web adresi edinmek için ödediğimiz paraya değiyor mu?
Yoksa sadece kartvizitlerimize bir Web adresi eklemek için mi yaptık tüm bunları?' Bu sorular neden sorulur? Çünkü Web üzerine bir stratejiniz yoktur, amaçlar belirlenmemeştir, siteniz pek kimsenin ilgisini çekmeyen kuru bilgiyle doludur, sektördeki gelişmeler yansıtılmıyordur, grafik ara yüzey değiştirilmiyordur, web teknolojisindeki gelişmeler izlenmiyordur. Bu tür pek çok neden sayabiliriz.
Kısacası, kullanıcının bir daha buraya uğramaması için herşey yapılmıştır. Web tasarımı şu anda teknik bir konu. Çoğunlukla servis sağlayıcıların kendi içlerinde kurdukları birimler aracılığıyla yürütülüyor ve genel olarak HTML bilgisi, biraz da Photoshop yeterli görünüyor. Kendi Web sayfalarını tasarlayan amatör kullanıcılar ise her ay yayınladığımız Web Okulu sayfalarından ve diğer kaynaklardan edindikleri, HTML ve grafik programları konusundaki bilgileri çerçevesinde uyguluyorlar. Bu ay bunun dışına çıkalım ve başarılı bir Web site si hazırlamak için profesyonellere yönelik püf noktaları verelim istedik.
KAĞIT ÜZERİNDE HERŞEY BİTMİŞ OLSUN
WEB sitesi tasarımı klasik sayfa tasarımından oldukça farklıdır. Artık A4 sayfa, santimetre, mega bytelar büyüklüğünde TIFF dosyaları, CMYK modu yoktur. Bunların yerini yüklenme zamanı, bant genişliği, transparan GIF, piksel, Java gibi kavramlar almıştır. Ölçütler ve öncelikler değişmiştir. Bu ortamı anlayabilmek için çok fazla site gezmek gerekir. Ancak belli bir doygunluğa ve deneyime erişince iyi bir site tasarlanabilir. İşte size profesyonel bir Web sitesi tasarımına yönelik ipuçları:
• Çok iyi bulduğunuz siteleri ayrıntılı olarak gezin, neden başarılı olduğunu anlamaya çalışın. Aynı biçimde çok kötü hazırlanmış siteleri de dolaşarak buralardan nelerden kaçınmak gerektiği görülebilir.
• Profesyonel Web tasarımı büyük bir ekibin işidir. Editör, grafiker, yönetmen, animatör, programcı, web master gibi farklı niteliklere sahip insanların ortak çalışmasıyla iyi bir site hazırlanabilir. Yalnızca uyum yetmez, bunun ötesinde bu kişilerin tek tek diğer alanlarda da bir miktar bilgiye sahip olmaları gerekir. Programcının resim formatları üzerine ya da içeriğin zenginleştirilmesi üzerine bilgisi ekip çalışmasını daha verimli kılar. Aynı biçimde editörün de yeni teknolojiler konusundaki bilgisi, içeriğin sunumu konusunda daha zengin seçenekler sunar.
• Ekipte hangi durumda olursanız olun diğer konularda yeterli bilgiye sahip olmaya çalışın. Bir Web sitesi kurmaya girişmeden önce ayrıntılı bir haritasını çıkarın. Hangi sayfada hangi bilgilerin yeralacağı burada görülsün. Yine grafik olarak da hangi bölümün nasıl olacağı burada yer alsın. Her sayfa için bir ' storyboard' hazırlayın, bu size ya da operatöre ne yapacağını açık olarak anlatsın. Bundan sonrası sizin grafik programlardaki becerinize kalmıştır.
• Bazen büyükçe bir sitenin içinde gezerken hala aynı sitenin içinde olup olmadığımızı bilemeyiz, kendi içinde bütünlüğü yoktur. Alt bölümlerde her biri ayrı ellerden çıkmış gibidir. Sürekliliği sağlamak için her sayfada tekrarlanan standart bir gezinti çubuğu (' navigasyon bar' ) ya da standart bir zemin resmini kullanmak kısmi bir çözümdür. Renk, font ve resim kullanımı bu konuda yardımcı olabilir. Bu öğelerin başarılı bir biçimde uygulanması hem sürekliliği sağlarken, hem de değişik tasarımlar yapmanıza olanak verir.
• Tüm sayfaların aynı biçime sahip olması oldukça sıkıcı bir durumdur. Sitenin ruhunu koruyarak her sayfada kullanıcıyı şaşırtacak, ilgisini çekecek değişiklikler yapmak gerekir.
• Kullanıcıların büyük bölümü AltaVista, Yahoo gibi arama makinaları yardımıyla sitenize gelmektedir, ve büyük olasılıkla ön sayfadada değil, aradıkları bilginin olduğu alt sayfalardan birindedirler. Burada sorun nerede olduğunu ve site içerisinde nerelere gidebileceğini açık bir biçimde göstermektir. Bunun için en basit yöntem bir gezinti çubuğunu her alt sayfaya koymaktır. Çeşitli Web sitelerinde sık sık gördüğümüz, sayfada yatay ya da dikey olarak kullanılan alt bölümlerin yeraldığı bu çubuklar, sitenin içeriği hakkında genel bir fikir vermektedir. Yine bu çubuklar üzerinde, içinde bulunan alt bölüm grafiksel olarak diğerlerinden farklı kılınırsa kullanıcı hangi alt bölümde olduğunu anlayabilecektir.
• Gezinti çubuğu simgeler ile daha kullanışlı olabilir veya dilden bağımsız bir anlatım biçimine sahip olabilir. Ancak her konuda anlamı herkesçe açık simgeler yaratılamayabilir. Bu durumda zorlayarak simge oluşturmak gereksizdir; ayrıca yanlış anlamaya yol açabilir.
İÇERİĞE UYGUN TASARIM
• İÇERİK çok sık güncellenecekse buna uygun tasarım yapın. Yeni bir alt bölümü, resmi, metni, ' link'i ekleyip çıkarması son derece kolay olsun. Ön sayfanın tek bir görüntüden (imagemap) ibaret olduğu bir tasarım çok kullanışsızdır böyle bir durumda. Benzer biçimde statik bir atmosfer yaratan derin gölgeler atılmış düğmeler ya da resimler kullanmak da böyle bir içerikle bağdaşmaz. Yoğun olarak metin kullanmak gerekebilir, bu durumda metin renkleriyle oynayın, sayfayı sütunlara ayırın.
• Ön sayfada eğer tek bir nesne resmi, figür ya da portre kullanıyorsanız bunu büyük kullanın. Büyük kullanılmış bir resim her zaman çarpıcıdır.
• Fontlarla deneme yapın, içeriğe en uygun düşecek fontu bulmaya çalışın. Ve gerekmedikçe çok farklı fontlar kullanmayın, çoğu durumda tek bir font ailesi yeterlidir. Gerek grafiklerle gerekse HTML uygulamasını kullanarak birbirleri ile ilişkilerini gözden kaçırmadan yazı büyüklükleriyle oynayın. Canlılık sağlamak ve okunurluğu arttırmak için bold, italik yazı kullanın.
• Aşağıya doğru çok fazla sarkan sayfalardan kaçının. Çok uzun sayfalar hem yüklenme zamanı hem de okunulabilirlik açısından kötü bir uygulamadır. Bunun yerine içeriği fazla sayıda alt sayfalara dağıtın. Böylelikle kullanıcı görmek istemediği sayfa için beklemek zorunda kalmayacaktır.
• Kullanıcıların büyük bölümü 14 inch monitörde 256 renk görebilmektedir. Çalıştığınız bilgisayar ne olursa olsun kullanıcının göreceği koşullarda test edin sayfalarınızı. Farklı işletim sistemlerinde resimler farklı görünmektedir. Bazı durumlarda , özellikle de hareketli GIF görüntülerde, büyük kayıplar görülür. Eğer Macintosh'ta çalışıyorsanız son aşamada grafiklerinizin parlaklığını biraz arttırın. Ayni grafik PC'de, Mac'de olduğundan daha koyu görünmektedir.
• Sayfalarınızı ayrı ayrı tarayıcılarla test edin. Bu hem kullanılan renk paletleri hem de desteklediği HTML özellikleri açısından önemlidir. En yaygın iki tarayıcının da desteklediği özellikleri kullanmaya çalışın.
• Sitenizi ortalama kullanıcıyla test edin. Aranılan bir bilgiye ne kadar zamanda ulaşıldığı önemli bir sorundur. Sonuca göre sitenizin hiyerarşisinde değişikliklere gidin. Aranılan bilgi sezgisel olarak ulaşılabilir olsun. En alt bölümlerden bile diğer bir bölüme ulaşmanın kolay ve hızlı olmasına dikkat edin. PC Magazine Online uzunca bir deneme süresinden ve kullanıcı testlerinden sonra hizmete açılmıştır.
JPG Mİ GIF Mİ?
• DAHA sonra ayrıntılı değineceğiz ama, işte size bir resmi GIF formatında mı yoksa JPG formatında mı kaydedeciğiniz konusunda basit bir çözüm: Resmi hem GIF hem de JPG olarak ayrı ayrı kaydedin. Sonra büyüklüklerine bakın, daha küçük hangisi ise onu kullanın. Bu her zaman olmasa da çoğu zaman hangi formatın kullanılması gerektiği konusunda doğru sonuç verir. Resmi grafik programda değil tarayıcıya yükleyerek görüntü kalitesine bakın. Photoshop ile Internet Explorer ya da Netscape
Navigator'da resimler farklı görünmektedir.
• Siyah ve beyazın Web'de önemli bir avantajı vardır: Tüm işletim sistemlerinde ve bilgisayarlarda siyah ve beyaz bizim istediğimiz biçimdedir. Yani renkte sistem farklılığı ve ayarlardan kaynaklanan kaymalar yoktur, siyah siyahtır beyaz da beyaz. Bu iki rengi sonra nasıl görüneceği endişesine kapılmadan sık sık kullanabilirsiniz. Ayrıca zemin rengi olarak kullanmak etkileyici sonuçlar verebilir.
• Son olarak aslolan içeriktir! Tam bir kuru bilgi yığınına dönüşen Internet'te sitenizi bir konu üzerinde odaklayın ve sık sık güncelleyin. CNN'in başarısı yalnızca güncelleme için 160 kişinin çalışmasında olsa gerek.
KİMLİK SAYFASI
Pek çok sitede görmüşsünüzdür: Gezinti çubuğunun yer aldığı indeks sayfasından önce, kimliğin vurgulandığı bir ana sayfa vardır (' splash page' ). Buraya tıklayarak ya da doğrudan indeks sayfasına geçersiniz (' navigation page' ). Bu iki açıdan önemlidir: Birincisi kimliğe, prestije yönelik bir vurgu yapabilirsiniz; ikincisi de çokça kullanılacak indeks sayfasının yükünü azaltabilirsiniz. Ama şu da açık ki, çok fazla hit alan bir site için uygun bir çözüm değildir. Bu uygulama ile indeks sayfasında daha rahat davranma şansınız olur. Hem gezinti çubuğunun hem logonun hem de güncel bilgilerin yer alacağı bir sayfa yerine, yalnızca güncel uygulamalara yönelik bir sayfa tasarlayabilirsiniz. Diğer yandan verdiğimiz iki örnekte de siyah zeminin kullanılmış olması dikkatinizi çekmiştir. Daha önce belirttiğimiz gibi siyah ve beyazın doğru kullanımı gerçekten etkileyici sonuçlar vermektedir.
WEB SAYFALARINDA FORM KULLANIMI
FORMLAR, Web sayfası tasarlayan kişi veya şirketlerle Internet kullanıcıları arasındaki veri alışverişini sağlamak için ideal bir araçtır. HTML 2.0 standartlarının konmasıyla tanıştığımız formlar bir çok sitede kullanıcıların da bilgi göndermesine olanak tanıyarak etkileşimli bir ortam oluşturmaktadır.
Formlar iki yönlü olarak çalışır; Web tarayıcı tarafından ekranda oluşturulan görüntü, kullanıcı tarafından doldurulduktan sonra gönderilir ve Web tarayıcı bu bilgileri alarak sunucuda çalıştırılan bir programa iletir. Program bilgileri değerlendirdikten sonra gerekli işlemleri yapar.
FORM NASIL DEĞERLENDİRİLECEK?
WEB üzerinden herhangi bir formu göndermek için sunucunuzun tipine göre bir ek programa ihtiyaç duyacaksınız. Peki bu programı nereden bulacaksınız? İşte pc magazine Türkiye size daha önce hiç bir gazetenin sunmadığı bir fırsat sunuyor ve " beleş" bir form değerlendirici bulabileceğiniz adresi size veriyor. http://www.nt-tools.com/mailform/ adresinden indirebileceğiniz Mail Form isimli programı web sitenize yerleştirerek kendi formlarınızı başkalarının göndermesini sağlayabilirsiniz.
Bir form oluşturmak için <FORM></FORM> tag"ları arasına istenilen kontroller INPUT tag"ı sayesinde belirtilir. Kontrollerden toplanan bilgilerin nasıl değerlendirileceği FORM tag"ının içinde gösterilir. FORM ve INPUT tag"larının kullanımını inceledikten sonra örnek olarak verdiğimiz kodlara bakarak bu kodların nasıl bir görüntü oluşturduğunu görebilirsiniz.
FORM TAG'I
Genel kullanım: <FORM ACTION=url METHOD=get-post TARGET=pencere>
ACTION=url
Formun gönderildiğinde hangi program tarafından değerlendirileceğini belirtir.
METHOD=get-post
Bilgilerin sunucuya hangi yolla gönderileceğini belirtir. GET değeri verildiğinde kontrollere girilen içerik o anda bulunulan adrese eklenip değerlendiriciye gönderilir. POST değeri ise form içeriğini direkt olarak derleyici programa yönlendirir.
TARGET=window
Netscape tarafından getirilen bu tag form değerlendirici tarafından kullanıcıya geri gönderilen yanıtın hangi pencerede belireceğini gösterir. Pencere isimleri FRAME konumuzu işlerken gösterdiğimiz " _blank" , " _top" gibi değerlerden biri olabilir.
INPUT TAG'I
Genel kullanım: <INPUT ALIGN=tip [CHECKED|] MAXLENGTH=uzunluk
NAME=isim SIZE=boyut SRC=adres TYPE=tip VALUE=değer>
ALIGN=tip
TYPE değeri bir resim olarak atandığında bir sonraki satırın resme göre nasıl yerleştirileceğini belirtir. TOP, MIDDLE veya BOTTOM değerlerinden birini alabilir.
CHECKED
Kontrol olarak bir işaretleme veya seçim kutusu kullanıldığında CHECKED değeri bu kutuların işaretlenmiş olarak karşımıza gelmesini sağlar.
MAXLENGTH=uzunluk
Metin kutusuna kullanıcının maksimum kaç karakter girebileceğini belirler.
NAME=isim
Kontrole bir isim verir
SIZE=boyut
Kontrolün boyutlarını karakter cinsinden belirlemenizi sağlar. TEXTAREA kontrolü kullanıldığında ' en,boy' gibi bir ifade kullanılarak kontrolün hem eni hem de yüksekliği belirtilebilir.
SRC=adres
Kontrol olarak resim seçildiğinde resmin bulunduğu adresi taşır.
TYPE=tip
Kontrolün cinsini belirler ve şu değerlerden biri olabilir:
CHECKBOX: Bir işaretleme kutusu görüntüler ve sadece doğru veya yanlış değerlerini alabilir.
HIDDEN: Web tarayıcısının penceresinde görünmez fakat içerdiği değer gönderilen form ile web sunucusuna ulaşır.
IMAGE Bir resmi ifade eder ve üzerine tıklandığında form değerlerini sunucuya yollar. Genellikle bu amaçla kullanılsa da istenilirse kullanıcının resmin hangi x ve y noktalarına dokunduğu öğrenilebilir. Bu tag SRC ile birlikte kullanılır ve SRC komutu resmin bulunduğu URL'yi göstermelidir.
PASSWORD TEXT kontrolü ile aynı özellikleri taşır fakat kullanıcının girdiği karakterler bu kontrolde yıldız olarak görülür.
RADIO Kullanıcının bir çok seçenek içerisinden bir tanesini seçebilmesine olanak tanır. Grup içindeki RADIO kontolleri her zaman aynı ismi taşımalı kontrollerin değerleri VALUE değerine atanmalıdır.
RESET Tıklandığında form içeriğini temizler. Kullanıcının form'u tekrar doldurmasını sağlar.
SUBMIT Form içeriğini sunucuya yollar. VALUE değeri kullanılarak üzerindeki yazı değiştirilebilir.
TEXT Kullanıcıdan tek satırlık veri alınmasına olanak tanır. SIZE ve MAXLENGTH takıları, bu kontrolle birlikte kullanılabilir
KAYAN, yuvarlanan, ters parende atarak ekrandan kaybolan yazılar insanların ilgisini daha çok çeker. Microsoft bunu düşünerek, benim vatandaşlarım da kayan yazılardan faydalanabilsin demiş ve <MARQUEE> tag'ını web tarayıcısının yorumlayıcısına eklemiş... Netscape ise Explorer 2.0'dan beri var olan bu tag'ı web tarayıcısına koymayı düşünmüyor. Yine de tag'ı kullandığınızda içerisinde var olan yazıların Netscape kullanıcıları tarafından 'normal yazı' olarak görüneceğini belirtelim.
<MARQUEE BEHAVIOR=tip BGCOLOR=renk DIRECTION=yön HEIGHT=n HSPACE=n LOOP=n SCROLLAMOUNT=n SCROLLDELAY=n VSPACE=n WIDTH=n>
BEHAVIOR=tip: Metnin ekranda nasıl hareket edeceğini belirten bu ek SCROLL, SLIDE, ALTERNATE değerlerinden birini alabilir. Ek kullanılmadığında SCROLL değeri varsayılan olarak kabul edilir ve yazı, sınırın bir köşesinden belirerek diğer köşeden kayarak kaybolur. SLIDE eki ise yazının bir köşeden başlayarak diğer köşede donmasını sağlar. Metnin iki köşe arasında gidip gelmesi ise ALTERNATE ekiyle gerçekleştirilebilir.
BGCOLOR=renk: Kayan yazının arkasındaki rengi belirler. ' renk' değeri 16'lık sayı düzeninde bir değer olabileceği gibi ' red' ,' blue' gibi renk isimlerinden biri de olabilir.
DIRECTION=yön: Yazının kayma yönünü belirler. DIRECTION eki, LEFT veya RIGHT değerlerinden birini almalıdır. LEFT değeri yazının soldan sağa doğru kaymasını, RIGHT ise bunun tersini sağlar.
HEIGHT=n: Kayan yazının sınırlarından ' yüksekliği' sağlar. N değeri sabit bir piksel sayısı olduğu gibi aynı zamanda bir pencere oranı olabilir. Oran değeri % işareti ile belirtilmelidir.
HSPACE=n: Kayan yazının sınırlara ne oranda yaklaşacağını belirler. Bu ek özellikle arka plana bir renk verildiğinde daha da belirginleşir.
LOOP=n: Yazıya verilen hareketin sınırlar içerisinde kaç kere tekrarlanacağını belirler. N değerine ' -1' veya ' INFINITE' verildiğinde hareket sınırsız olarak tekrarlanır. Tip olarak ' SLIDE' kullanıldığında bu işlem tek bir kez gerçekleşeceğinden LOOP ekini kullanmaya gerek yoktur.
SCROLLAMOUNT, Kayan yazının bir defada kaç piksel hareket edeceğini, SCROLLDELAY ise yazının her bir hareketi arasında kaç milisaniye bekleyeceğini belirler. Yazının üst ve alt sınırdan ne kadar uzakta kalacağını VSPACE ile, yazının kayacağı toplam uzunluğu ise WIDTH ile ayarlayabilirsiniz. WIDTH değeri HEIGHT gibi bir yüzde alabilir.
Örnek Kullanım:
<MARQUEE DIRECTION=RIGHT BEHAVIOR=SCROLL SCROLLAMOUNT=10 SCROLLDELAY=200>Bu kayan bir yazıdır... </MARQUEE>
Örneğin Görünümü:
Bu kayan bir yazıdır...
Multimedia Öğeleri
HTML etkileşimli ve çarpıcı dokümanlar oluşturmak için mükemmel bir ortamdır. Ses ve video görüntülerinin HTML sayfalarında kullanılabilmesi bu ortamı daha da çekici bir konuma getirir.
Bu öğeleri kullanmak sadece 2-3 tane kilit komut bağlı. İşte bunları veriyoruz;
Seçiminize göre geri planda WAV, .AU veya MIDI ses dosyalarından birini çalmak için Internet Explorer'da BGSOUND tag'ını kullanabilirsiniz.
<BGSOUND SRC=' deneme.mid' LOOP=5>
komutunu kullandığınızda ' deneme.mid' adlı MIDI dosyası sayfa yüklendiğinde 5 defa tekrarlanacak ve sonra duracaktır. Bir AVI veya MOV dosyasını oynatmak için ise yine sadece Explorer'da işe yarayacak DYNSRC komutunu kullanmalısınız.
Deneme.Avi adlı bir video görüntüsünü ekrana yerleştirmek için aşağıdaki gibi bir komut kullanmalısınız. Deneme.Gif dosyası görüntü yüklenene kadar sayfada yer kaplayacaktır.
<IMG DYNSRC=' deneme.avi' SRC=' deneme.gif' LOOP=INFINITE >
Daha önce de belirttiğimiz gibi yukarıdaki komutlar sadece Explorer'da işe yarıyor. Peki çokluortam dosyaları
Netscape'de nasıl gösterilir? Onunda yolu var fakat görsel açıdan Explorer'daki kadar başarılı olmuyor.
EMBED komutuyla Netscape penceresine ' gömülen' dosyalar beraberinde çerçeve kaydırma çubuğunu da birlikte getiriyor. Yine de öğrenmek isteyenler için komutumuz şöyle:
<EMBED SRC=' deneme.avi' >
İlkel Bir 'Client Pull'
POINTCAST'i hepiniz bilirsiniz. Kullanıcı bu servisin sağladığı arabirimde bir takım seçenekleri işaretler ve bu seçenekler doğrultusunda masaüstüne bilgiler gelir. <META> tag'ının yaptığı iş de bundan pek farklı değildir. Kullanıcıya ulaşan web sayfası bu tag sayesinde kendini belirli aralıklarla tekrar yükler veya kullanıcıyı başka bir web sayfasına ışınlar. ' Sayfayı isteme' işi kullanıcı tarafından sunucuya yollandığından bu komut ' client pull' işlemini başarıyor diyebiliriz. Bu tag ile birlikte aşağıdaki ekler kullanılmaktadır.
HTTP-EQUIV=' REFRESH' : Saniyelerle belirlenen aralıklarla dokümanın kullanıcıya tekrar ulaşmasını sağlar.
CONTENT=' n; URL=url' : Web tarayıcıya sayfanın ne aralıklarla tekrar yükleneceğini belirler. CONTENT eki içinde ayrıca URL ifadesi kullanılmışsa belirtilen zaman aralığından sonra hangi sayfanın yükleneceği de belirtilebilir.
Aşağıda, mutlaka <HEAD> - </HEAD> aralığında kullanılması gereken <META> tag'ının iki örneğini veriyoruz. 1. örnek, bulunulan sayfayı her iki saniyede bir tekrar yükleyecek, 2. örnek ise açıldıktan 5 saniye sonra www.pcmagazine. com.tr adresli PC Magazine Online'ın web sitesine bağlanacaktır.
ÖRNEK - 1
<HTML>
<HEAD>
<META HTTP-EQUIV=' REFRESH' CONTENT=2>
<TITLE>Tekrar Yükleme</TITLE>
</HEAD>
<P>Bu sayfa 2 saniyede bir tekrar yüklenecektir.
</HTML>
--------------------------------------------------------------------------------
ÖRNEK - 2
<HTML>
<HEAD>
<META HTTP-EQUIV=' REFRESH' CONTENT=' 5; URL=http://www.pcmagazine.com.tr' >
<TITLE>İkinci Dokümanı Yükle...</TITLE>
</HEAD>
<BODY>
<P>Bu sayfa 5 saniye sonra PC Magazine Online'ın web sitesine bağlanacaktır.
</BODY>
</HTML>
--------------------------------------------------------------------------------
RASTGELE İŞLEMLER
WEB dersanesi sayfalarımızda zaman zaman faydalı Java Script kodları bulabilirsiniz. İşte bunlardan bir tanesi; kodlarımız bulunulan saniyeyi okuyarak her saniyede değişik bir Murphy kuralını ekrana getiriyor. ' AR' değişkeniyle kaç adet kural olduğu tanımlandıktan sonra, kural Getmessge fonksiyonuna atanıyor ve fonksiyon <BODY...> tag'ının içerisinden çağrılıyor. Kendi vecizelerinizi bu script'e eklemek için öncelikle ' Array(3)' değerini daha sonra ' ar[sec % 4])' değerini yükselmeli ve vecizeyi yeni bir ' ar[x] =' satırına eklemelisiniz.
<HTML>
<HEAD>
<TITLE>Rastgele Vecizeler</TITLE>
<SCRIPT LANGUAGE=' JavaScript' >
<!--
function getMessage() {
var ar = new Array(3)
ar[0] = ' Hiç bir iş göründüğü kadar kolay değildir.'
ar[1] = ' Her iş tahmin ettiğinizden çok vakit alır.'
ar[2] = ' Yanlış gitme olasılığı olan her iş yanlış gider.'
ar[3] = ' Bir takım işlerin yanlış gitme olasılığı varsa size en çok zarar verecek olanı yanlış gider.'
var now = new Date()
var sec = now.getSeconds()
alert(' Murphy Kanunu:r' + ar[sec % 4])
}
//-->
</SCRIPT>
</HEAD>
<BODY onLoad=' getMessage()' >
</BODY>
</HTML>
TRANSPARAN GİF’ LER
Internet üzerinde gezinirken, resimlerin arka plan ve arka renkler ile uyum içinde olduğunu, resmin kare olmasına rağmen arka planın resmin boşluklarından görünebildiğine şahit olursunuz. Eğer web sayfanızda bir resim kullanıyor ve resmin boş taraflarından arkaplanın görünmemesinden ve resmin sayfa üzerinde yama gibi görünmesinden yakınıyorsanız bu bölümü dikkatle okuyun.
Bu bölümde resmi transparan hale getirirken en çok kullanılan shareware grafik editörlerinden biri olan Paint Shop Pro'nun 3.12 sürümünü kullanacağız. PSP 4.0 sahipleri de yaptıklarımızı aynen kendi programlarında uygulayabilirler. Öncelikle Paint Shop'u açın ve transparan yapmak istediğiniz GIF dosyasını yükleyin, unutmayın transparan dosyalar sadece GIF formatında ve 256 renkte olabilirler.
"Select" araç kutusundan aşağıdaki resimde de seçili olan "Color Picker"ı seçin ve resim üzerinde transparan yapmak istediğiniz, yani yaprak ve dünyanın dışında kalan alanın üzerine götürün. Fareyi bu bölgeden ayırmadan durum çubuğunun sağ bölmesinde I: değerinin yanındaki değeri aklınızın bir kenarına kaydedin.
"File" menüsünden "Save As..." komutunu çalıştırın ve format olarak GIF89a - Interlaced'i seçin. Diyalog kutusunun sağ tarafında bulunan Options butonuna bastığınızda GIF Transparency Options Diyalog kutusu karşınıza gelecektir. Bu kutucukta "Set Transparency Value to:" seçeneğini işaretleyip karşısındaki metin kutusuna "I:"nın karşısında okuduğunuz değeri (yani yalnız bu resim için 215'i) yazarsanız GIF dosyasının
renk seçici ile seçtiğiniz rengi transparan olacak böylece arkaplanlar bu bölgeden görülebilecektir. Resimler her zaman başarılı olarak transparan yapılamazlar, bunun sebebi bazen resmin istemediğiniz alanlarında transparan yaptığınız renge ait parçacıkların kalmasıdır. Bunu önlemek için resmi yüksek renge getirdikten sonra resim ile alakası olmayan bir renk seçip transparan yapmak istediğiniz alanı bu renk ile boyamalı ve resmi tekrar 256 renge getirerek bu rengin indeksini okuyup transparan hale getirmelisiniz. Bir transparan GIF'in hikayesi kısaca böyle, "Benim işim gücüm var, bu kadar işle uğraşamam" diyorsanız, Internet üzerinde yüzlerce GIF dönüştürme seti bulabilirsiniz, hızlı olmalarına rağmen insan elinin yerini tutmaz ama olsun.
JPEG Mİ GIF Mİ?
Web sayfalarında resim kullanırken en çok sorulan sorulardan biri şudur:
' Madem JPEG dosyaları aynı ölçülerdeki GIF'lerden daha az yer tutuyor neden GIF dosyalarını kullanayım?'
Bu sorunun cevabı çok basit, GIF dosyaları sayfa üzerinde JPEG dosyalarından daha keskin ve canlı görünürler, bunun sebebi JPEG formatının ' kayıplı' bir grafik formatı olmasıdır. JPEG dosyalarının kullanılması ayrıca, sade beyaz alanlarda yüksek renk çözünürlüğünde görülmeyen fakat 256 renkte göze batan küçük noktacıkların oluşmasına neden olur. JPEG formatı, daha çok büyük ve az bir beyaz alana sahip grafik dosyaları üzerine uygulanmalıdır.
Bu konu hakkında daha çok bilgi için Soner Demircilerin hazırladığı "Web Sayfalarında Grafik Kullanımı" adlı yazıyı okuyabilirsiniz.
Web Sayfalarında Grafik Kullanımı
Başarılı bir Web sitesine sahip olmak için sayfa tasarımını iyi bilmeniz, kısacası sanatsal görüş açısına sahip olmanız gerekir. İşte bu işin püf noktaları...
PEK çok şirket ve kurum Internet'te yeralmak için yarışıyor. Rakiplerinin Web sitelerinin olması kaygısı, modaya uymak gibi nedenlerle kendi Web sitelerini hazırlıyorlar veya hazırlatıyorlar. Şundan emin olun ki, bir süre sonra şöyle diyecekler: ' İyi, güzel bir Web sitemiz var ama bunun bize getirisi ne oldu? Pek uğrayan yok. bir Web adresi edinmek için ödediğimiz paraya değiyor mu?
Yoksa sadece kartvizitlerimize bir Web adresi eklemek için mi yaptık tüm bunları?' Bu sorular neden sorulur? Çünkü Web üzerine bir stratejiniz yoktur, amaçlar belirlenmemeştir, siteniz pek kimsenin ilgisini çekmeyen kuru bilgiyle doludur, sektördeki gelişmeler yansıtılmıyordur, grafik ara yüzey değiştirilmiyordur, web teknolojisindeki gelişmeler izlenmiyordur. Bu tür pek çok neden sayabiliriz.
Kısacası, kullanıcının bir daha buraya uğramaması için herşey yapılmıştır. Web tasarımı şu anda teknik bir konu. Çoğunlukla servis sağlayıcıların kendi içlerinde kurdukları birimler aracılığıyla yürütülüyor ve genel olarak HTML bilgisi, biraz da Photoshop yeterli görünüyor. Kendi Web sayfalarını tasarlayan amatör kullanıcılar ise her ay yayınladığımız Web Okulu sayfalarından ve diğer kaynaklardan edindikleri, HTML ve grafik programları konusundaki bilgileri çerçevesinde uyguluyorlar. Bu ay bunun dışına çıkalım ve başarılı bir Web site si hazırlamak için profesyonellere yönelik püf noktaları verelim istedik.
KAĞIT ÜZERİNDE HERŞEY BİTMİŞ OLSUN
WEB sitesi tasarımı klasik sayfa tasarımından oldukça farklıdır. Artık A4 sayfa, santimetre, mega bytelar büyüklüğünde TIFF dosyaları, CMYK modu yoktur. Bunların yerini yüklenme zamanı, bant genişliği, transparan GIF, piksel, Java gibi kavramlar almıştır. Ölçütler ve öncelikler değişmiştir. Bu ortamı anlayabilmek için çok fazla site gezmek gerekir. Ancak belli bir doygunluğa ve deneyime erişince iyi bir site tasarlanabilir. İşte size profesyonel bir Web sitesi tasarımına yönelik ipuçları:
• Çok iyi bulduğunuz siteleri ayrıntılı olarak gezin, neden başarılı olduğunu anlamaya çalışın. Aynı biçimde çok kötü hazırlanmış siteleri de dolaşarak buralardan nelerden kaçınmak gerektiği görülebilir.
• Profesyonel Web tasarımı büyük bir ekibin işidir. Editör, grafiker, yönetmen, animatör, programcı, web master gibi farklı niteliklere sahip insanların ortak çalışmasıyla iyi bir site hazırlanabilir. Yalnızca uyum yetmez, bunun ötesinde bu kişilerin tek tek diğer alanlarda da bir miktar bilgiye sahip olmaları gerekir. Programcının resim formatları üzerine ya da içeriğin zenginleştirilmesi üzerine bilgisi ekip çalışmasını daha verimli kılar. Aynı biçimde editörün de yeni teknolojiler konusundaki bilgisi, içeriğin sunumu konusunda daha zengin seçenekler sunar.
• Ekipte hangi durumda olursanız olun diğer konularda yeterli bilgiye sahip olmaya çalışın. Bir Web sitesi kurmaya girişmeden önce ayrıntılı bir haritasını çıkarın. Hangi sayfada hangi bilgilerin yeralacağı burada görülsün. Yine grafik olarak da hangi bölümün nasıl olacağı burada yer alsın. Her sayfa için bir ' storyboard' hazırlayın, bu size ya da operatöre ne yapacağını açık olarak anlatsın. Bundan sonrası sizin grafik programlardaki becerinize kalmıştır.
• Bazen büyükçe bir sitenin içinde gezerken hala aynı sitenin içinde olup olmadığımızı bilemeyiz, kendi içinde bütünlüğü yoktur. Alt bölümlerde her biri ayrı ellerden çıkmış gibidir. Sürekliliği sağlamak için her sayfada tekrarlanan standart bir gezinti çubuğu (' navigasyon bar' ) ya da standart bir zemin resmini kullanmak kısmi bir çözümdür. Renk, font ve resim kullanımı bu konuda yardımcı olabilir. Bu öğelerin başarılı bir biçimde uygulanması hem sürekliliği sağlarken, hem de değişik tasarımlar yapmanıza olanak verir.
• Tüm sayfaların aynı biçime sahip olması oldukça sıkıcı bir durumdur. Sitenin ruhunu koruyarak her sayfada kullanıcıyı şaşırtacak, ilgisini çekecek değişiklikler yapmak gerekir.
• Kullanıcıların büyük bölümü AltaVista, Yahoo gibi arama makinaları yardımıyla sitenize gelmektedir, ve büyük olasılıkla ön sayfadada değil, aradıkları bilginin olduğu alt sayfalardan birindedirler. Burada sorun nerede olduğunu ve site içerisinde nerelere gidebileceğini açık bir biçimde göstermektir. Bunun için en basit yöntem bir gezinti çubuğunu her alt sayfaya koymaktır. Çeşitli Web sitelerinde sık sık gördüğümüz, sayfada yatay ya da dikey olarak kullanılan alt bölümlerin yeraldığı bu çubuklar, sitenin içeriği hakkında genel bir fikir vermektedir. Yine bu çubuklar üzerinde, içinde bulunan alt bölüm grafiksel olarak diğerlerinden farklı kılınırsa kullanıcı hangi alt bölümde olduğunu anlayabilecektir.
• Gezinti çubuğu simgeler ile daha kullanışlı olabilir veya dilden bağımsız bir anlatım biçimine sahip olabilir. Ancak her konuda anlamı herkesçe açık simgeler yaratılamayabilir. Bu durumda zorlayarak simge oluşturmak gereksizdir; ayrıca yanlış anlamaya yol açabilir.
İÇERİĞE UYGUN TASARIM
• İÇERİK çok sık güncellenecekse buna uygun tasarım yapın. Yeni bir alt bölümü, resmi, metni, ' link'i ekleyip çıkarması son derece kolay olsun. Ön sayfanın tek bir görüntüden (imagemap) ibaret olduğu bir tasarım çok kullanışsızdır böyle bir durumda. Benzer biçimde statik bir atmosfer yaratan derin gölgeler atılmış düğmeler ya da resimler kullanmak da böyle bir içerikle bağdaşmaz. Yoğun olarak metin kullanmak gerekebilir, bu durumda metin renkleriyle oynayın, sayfayı sütunlara ayırın.
• Ön sayfada eğer tek bir nesne resmi, figür ya da portre kullanıyorsanız bunu büyük kullanın. Büyük kullanılmış bir resim her zaman çarpıcıdır.
• Fontlarla deneme yapın, içeriğe en uygun düşecek fontu bulmaya çalışın. Ve gerekmedikçe çok farklı fontlar kullanmayın, çoğu durumda tek bir font ailesi yeterlidir. Gerek grafiklerle gerekse HTML uygulamasını kullanarak birbirleri ile ilişkilerini gözden kaçırmadan yazı büyüklükleriyle oynayın. Canlılık sağlamak ve okunurluğu arttırmak için bold, italik yazı kullanın.
• Aşağıya doğru çok fazla sarkan sayfalardan kaçının. Çok uzun sayfalar hem yüklenme zamanı hem de okunulabilirlik açısından kötü bir uygulamadır. Bunun yerine içeriği fazla sayıda alt sayfalara dağıtın. Böylelikle kullanıcı görmek istemediği sayfa için beklemek zorunda kalmayacaktır.
• Kullanıcıların büyük bölümü 14 inch monitörde 256 renk görebilmektedir. Çalıştığınız bilgisayar ne olursa olsun kullanıcının göreceği koşullarda test edin sayfalarınızı. Farklı işletim sistemlerinde resimler farklı görünmektedir. Bazı durumlarda , özellikle de hareketli GIF görüntülerde, büyük kayıplar görülür. Eğer Macintosh'ta çalışıyorsanız son aşamada grafiklerinizin parlaklığını biraz arttırın. Ayni grafik PC'de, Mac'de olduğundan daha koyu görünmektedir.
• Sayfalarınızı ayrı ayrı tarayıcılarla test edin. Bu hem kullanılan renk paletleri hem de desteklediği HTML özellikleri açısından önemlidir. En yaygın iki tarayıcının da desteklediği özellikleri kullanmaya çalışın.
• Sitenizi ortalama kullanıcıyla test edin. Aranılan bir bilgiye ne kadar zamanda ulaşıldığı önemli bir sorundur. Sonuca göre sitenizin hiyerarşisinde değişikliklere gidin. Aranılan bilgi sezgisel olarak ulaşılabilir olsun. En alt bölümlerden bile diğer bir bölüme ulaşmanın kolay ve hızlı olmasına dikkat edin. PC Magazine Online uzunca bir deneme süresinden ve kullanıcı testlerinden sonra hizmete açılmıştır.
JPG Mİ GIF Mİ?
• DAHA sonra ayrıntılı değineceğiz ama, işte size bir resmi GIF formatında mı yoksa JPG formatında mı kaydedeciğiniz konusunda basit bir çözüm: Resmi hem GIF hem de JPG olarak ayrı ayrı kaydedin. Sonra büyüklüklerine bakın, daha küçük hangisi ise onu kullanın. Bu her zaman olmasa da çoğu zaman hangi formatın kullanılması gerektiği konusunda doğru sonuç verir. Resmi grafik programda değil tarayıcıya yükleyerek görüntü kalitesine bakın. Photoshop ile Internet Explorer ya da Netscape
Navigator'da resimler farklı görünmektedir.
• Siyah ve beyazın Web'de önemli bir avantajı vardır: Tüm işletim sistemlerinde ve bilgisayarlarda siyah ve beyaz bizim istediğimiz biçimdedir. Yani renkte sistem farklılığı ve ayarlardan kaynaklanan kaymalar yoktur, siyah siyahtır beyaz da beyaz. Bu iki rengi sonra nasıl görüneceği endişesine kapılmadan sık sık kullanabilirsiniz. Ayrıca zemin rengi olarak kullanmak etkileyici sonuçlar verebilir.
• Son olarak aslolan içeriktir! Tam bir kuru bilgi yığınına dönüşen Internet'te sitenizi bir konu üzerinde odaklayın ve sık sık güncelleyin. CNN'in başarısı yalnızca güncelleme için 160 kişinin çalışmasında olsa gerek.
KİMLİK SAYFASI
Pek çok sitede görmüşsünüzdür: Gezinti çubuğunun yer aldığı indeks sayfasından önce, kimliğin vurgulandığı bir ana sayfa vardır (' splash page' ). Buraya tıklayarak ya da doğrudan indeks sayfasına geçersiniz (' navigation page' ). Bu iki açıdan önemlidir: Birincisi kimliğe, prestije yönelik bir vurgu yapabilirsiniz; ikincisi de çokça kullanılacak indeks sayfasının yükünü azaltabilirsiniz. Ama şu da açık ki, çok fazla hit alan bir site için uygun bir çözüm değildir. Bu uygulama ile indeks sayfasında daha rahat davranma şansınız olur. Hem gezinti çubuğunun hem logonun hem de güncel bilgilerin yer alacağı bir sayfa yerine, yalnızca güncel uygulamalara yönelik bir sayfa tasarlayabilirsiniz. Diğer yandan verdiğimiz iki örnekte de siyah zeminin kullanılmış olması dikkatinizi çekmiştir. Daha önce belirttiğimiz gibi siyah ve beyazın doğru kullanımı gerçekten etkileyici sonuçlar vermektedir.
WEB SAYFALARINDA FORM KULLANIMI
FORMLAR, Web sayfası tasarlayan kişi veya şirketlerle Internet kullanıcıları arasındaki veri alışverişini sağlamak için ideal bir araçtır. HTML 2.0 standartlarının konmasıyla tanıştığımız formlar bir çok sitede kullanıcıların da bilgi göndermesine olanak tanıyarak etkileşimli bir ortam oluşturmaktadır.
Formlar iki yönlü olarak çalışır; Web tarayıcı tarafından ekranda oluşturulan görüntü, kullanıcı tarafından doldurulduktan sonra gönderilir ve Web tarayıcı bu bilgileri alarak sunucuda çalıştırılan bir programa iletir. Program bilgileri değerlendirdikten sonra gerekli işlemleri yapar.
FORM NASIL DEĞERLENDİRİLECEK?
WEB üzerinden herhangi bir formu göndermek için sunucunuzun tipine göre bir ek programa ihtiyaç duyacaksınız. Peki bu programı nereden bulacaksınız? İşte pc magazine Türkiye size daha önce hiç bir gazetenin sunmadığı bir fırsat sunuyor ve " beleş" bir form değerlendirici bulabileceğiniz adresi size veriyor. http://www.nt-tools.com/mailform/ adresinden indirebileceğiniz Mail Form isimli programı web sitenize yerleştirerek kendi formlarınızı başkalarının göndermesini sağlayabilirsiniz.
Bir form oluşturmak için <FORM></FORM> tag"ları arasına istenilen kontroller INPUT tag"ı sayesinde belirtilir. Kontrollerden toplanan bilgilerin nasıl değerlendirileceği FORM tag"ının içinde gösterilir. FORM ve INPUT tag"larının kullanımını inceledikten sonra örnek olarak verdiğimiz kodlara bakarak bu kodların nasıl bir görüntü oluşturduğunu görebilirsiniz.
FORM TAG'I
Genel kullanım: <FORM ACTION=url METHOD=get-post TARGET=pencere>
ACTION=url
Formun gönderildiğinde hangi program tarafından değerlendirileceğini belirtir.
METHOD=get-post
Bilgilerin sunucuya hangi yolla gönderileceğini belirtir. GET değeri verildiğinde kontrollere girilen içerik o anda bulunulan adrese eklenip değerlendiriciye gönderilir. POST değeri ise form içeriğini direkt olarak derleyici programa yönlendirir.
TARGET=window
Netscape tarafından getirilen bu tag form değerlendirici tarafından kullanıcıya geri gönderilen yanıtın hangi pencerede belireceğini gösterir. Pencere isimleri FRAME konumuzu işlerken gösterdiğimiz " _blank" , " _top" gibi değerlerden biri olabilir.
INPUT TAG'I
Genel kullanım: <INPUT ALIGN=tip [CHECKED|] MAXLENGTH=uzunluk
NAME=isim SIZE=boyut SRC=adres TYPE=tip VALUE=değer>
ALIGN=tip
TYPE değeri bir resim olarak atandığında bir sonraki satırın resme göre nasıl yerleştirileceğini belirtir. TOP, MIDDLE veya BOTTOM değerlerinden birini alabilir.
CHECKED
Kontrol olarak bir işaretleme veya seçim kutusu kullanıldığında CHECKED değeri bu kutuların işaretlenmiş olarak karşımıza gelmesini sağlar.
MAXLENGTH=uzunluk
Metin kutusuna kullanıcının maksimum kaç karakter girebileceğini belirler.
NAME=isim
Kontrole bir isim verir
SIZE=boyut
Kontrolün boyutlarını karakter cinsinden belirlemenizi sağlar. TEXTAREA kontrolü kullanıldığında ' en,boy' gibi bir ifade kullanılarak kontrolün hem eni hem de yüksekliği belirtilebilir.
SRC=adres
Kontrol olarak resim seçildiğinde resmin bulunduğu adresi taşır.
TYPE=tip
Kontrolün cinsini belirler ve şu değerlerden biri olabilir:
CHECKBOX: Bir işaretleme kutusu görüntüler ve sadece doğru veya yanlış değerlerini alabilir.
HIDDEN: Web tarayıcısının penceresinde görünmez fakat içerdiği değer gönderilen form ile web sunucusuna ulaşır.
IMAGE Bir resmi ifade eder ve üzerine tıklandığında form değerlerini sunucuya yollar. Genellikle bu amaçla kullanılsa da istenilirse kullanıcının resmin hangi x ve y noktalarına dokunduğu öğrenilebilir. Bu tag SRC ile birlikte kullanılır ve SRC komutu resmin bulunduğu URL'yi göstermelidir.
PASSWORD TEXT kontrolü ile aynı özellikleri taşır fakat kullanıcının girdiği karakterler bu kontrolde yıldız olarak görülür.
RADIO Kullanıcının bir çok seçenek içerisinden bir tanesini seçebilmesine olanak tanır. Grup içindeki RADIO kontolleri her zaman aynı ismi taşımalı kontrollerin değerleri VALUE değerine atanmalıdır.
RESET Tıklandığında form içeriğini temizler. Kullanıcının form'u tekrar doldurmasını sağlar.
SUBMIT Form içeriğini sunucuya yollar. VALUE değeri kullanılarak üzerindeki yazı değiştirilebilir.
TEXT Kullanıcıdan tek satırlık veri alınmasına olanak tanır. SIZE ve MAXLENGTH takıları, bu kontrolle birlikte kullanılabilir

![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
|||||||||||||||
AnaSayfa |
TVRadyo |
KlipDünyasi |
Online Gazete |
HazirSMS |
Dizi-Sinema | FlashOyun |
Türkiye | Yemek günlügüm |
Trafik Kameralari |
Online MSN | Dini Sayfalar | Ziyaretci Defteri | Sohbet odasi | Komedi Merkezi | |||||||||||||||