Değişik çerçeve stilleri için kaynak kodlar
<FRAMESET COLS="100,*">
<FRAME SRC="1.htm" NAME="1">
<FRAME SRC="2.htm" NAME="2">
</FRAMESET>
---------------
<FRAMESET ROWS="100,*">
<FRAME SRC="1.htm" NAME="1">
<FRAME SRC="2.htm" NAME="2">
</FRAMESET>
--------------------------
<FRAMESET ROWS="100,*">
<FRAME SRC="1.htm" NAME="1">
<FRAMESET COLS="100,*">
<FRAME SRC="2.htm" NAME="2">
<FRAME SRC="3.htm" NAME="3">
</FRAMESET>
</FRAMESET>
---------------
<FRAMESET COLS="100,*">
<FRAME SRC="1.htm" NAME="1">
<FRAMESET ROWS="100,*">
<FRAME SRC="2.htm" NAME="2">
<FRAME SRC="3.htm" NAME="3">
</FRAMESET>
</FRAMESET>
-------------
<FRAMESET COLS="100,*">
<FRAME SRC="1.htm" NAME="1">
<FRAMESET ROWS="100,*">
<FRAME SRC="2.htm" NAME="2">
<FRAME SRC="3.htm" NAME="3">
<FRAME SRC="4.htm" NAME="3">
</FRAMESET>
</FRAMESET>
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>
MULTIMEDIA ÖGELERİ
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' >
WEB SAYFALARINDA GRAFİK KULLANIMI
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, megabytelar büyüklüğündeTIFF 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ı:
o Ç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.
o Profesyonel Web tasarımı büyük bir ekibin işidir. Editör, grafiker, yönetmen, animatör, programcı, webmaster 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.
o 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 yeralsı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.
o Bazen büyükçe bir sitenin içinde gezerken hala aynı sitenin içinre 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.
o 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.
o 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.
o Gezinti çubuğu simgeler ile daha kullanışlı olabilir veya dilden bağımsız
bir anlatım biçimine sahip olabilir. Ancak herkonuda anlamı herkesçe açık
simgeler yaratılamayabilir. Bu durumda zorlayarak simge olşturmak gereksizdir;
ayrıca yanlış anlamaya yolaçabilir.
İÇERİĞE UYGUN TASARIM
o İÇ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.
o Ö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 herzaman çarpıcıdır.
o 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.
o 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 uygulamadr. 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.
o 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.
o 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.
o 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İ?
o İŞTE size bir resmi GIF formatında mı yoksa JPG formatında mı kaydedeceğ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.
o 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.
o 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 gormüşsünüzdür: Gezinti çubuğunun yeraldığı 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 hemde
güncel bilgilerin yeralacağı 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? Bu konuda size pek de kimsenin bilmediği önemli bir ipucu veriyoruz ve "bedava" bir form değerlendirici bulabileceğiniz adresi sunuyoruz. http://www.nt-tools.com/mailform/ adresinden indirebileceğiniz MailForm isimli programı web sitenize yerleştirerek kendi formlarınızı başkalarının göndermesini sağlayabilirsiniz. |
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şturmak
için...
<HTML><title>Form Denemesi</title><body
bgcolor=' #c0c0c0' >
<h2>Tüm Form Öğelerinin Kullanımı</h2>
<FORM ACTION=' http://internet/form' METHOD=POST>
<P>İsim<BR><INPUT NAME=' CONTROL1' TYPE=TEXT
VALUE=' İsim Girecek' >
<P>Şifre<BR><INPUT TYPE=' PASSWORD' NAME='
CONTROL2' >
<P>Renk<BR><INPUT TYPE=' RADIO' NAME='
CONTROL3' VALUE=' 0' CHECKED>Kırmızı
<INPUT TYPE=' RADIO' NAME=' CONTROL3' VALUE=' 1'
>Yeşil
<INPUT TYPE=' RADIO' NAME=' CONTROL3' VALUE=' 2'
>Mavi
<P>Görüşleriniz<BR><INPUT TYPE=' TEXTAREA'
NAME=' CONTROL4' SIZE=' 20,5' MAXLENGTH=' 250' >
<P><INPUT NAME=' CONTROL5' TYPE=CHECKBOX CHECKED>Beni
Email Listenizene Kaydedin
<P><INPUT TYPE=' SUBMIT' VALUE=' Gönder'
><INPUT TYPE=' RESET' VALUE=' Temizle' >
</FORM></body></HTML>
ARAMA MOTORLARINA YARDIMCI OLUN
GECENİZİ gündüzünüze kattınız ve bir site hazırladınız. Şimdi insanların sitenizin varlığından haberdar olmasını istiyorsunuz. Ne yapacaksınız? Tabii ki sitenizi bilinen arama motorlarına kayıt edeceksiniz. İşte bu noktada bir püf noktasına ihtiyacınız var. Arama motorlarının kullandığı ' ajan' programlar sitenize geldiklerinde ilk baktıkları şey bir takım tanımlardır. Aşağıda bu tanımları oluşturmak için gereken satırları göreceksiniz. Bu satırları <HEAD>...</HEAD> ifadeleri arasına girerseniz hedef kullanıcıya ulaşmanız daha kolay olacaktır.<META name="description" content="Sitenizin amacı, kısa açıklaması, sloganı">
<META name="keywords" content="sitenizdeki bölümler, anahtar kelimeler" >
<META name="copyright" content="Telif sınırlamaları ve tanımları" >
ANİMASYONLU GIF OLUŞTURALIM
Web sayfalarının vazgeçilmez unsurlarından biri tabii ki animasyonlu GIF dosyaları. Bir seri GIF dosyasının üst üste getirilerek oynatılmasından oluşan animasyonlu GIF'ler web sayfasında aktif içeriği sağlamak için kullanılabilecek ilgi çekici ve basit bir teknik. Peki Animasyonlu GIF yapmak için neye ihtiyacınız var? Kullanabileceğiniz programlar neler?Animasyonlu GIF yapmak için önünüzde bir çok seçenek var. Animagic, GIF Constructor, Animator Pro, Microsoft GIF Animator gibi programlar bunlardan sadece birkaç tanesi. Şimdi bu programlardan www.microsoft.com/imagecomposer/gifanimator/gifanin.htm adresinden indirebileceğiniz Microsoft GIF animatorı tanıtacak ücretsiz ve kullanımı basit olan bu program ile bir animasyonu nasıl oluşturacağınızı anlatacağız…
Programı çalıştırdığınızda ve bir GIF dosyasını açtığınızda karşınıza her bir kareyi görebileceğiniz bir alan ile birlikte animasyonun akışını ve karakterini belirleyebileceğiniz üç adet sekme gelecektir. Programda bir menü bulunmuyor fakat üstteki tuş takımını kullanarak dosya açma, dosya kaydetme, kesme, kopyalama gibi işlemleri gerçekleştirebiliyorsunuz.
Options ve Animation sekmelerinin, resmin tümünü, Image sekmesinin sadece seçili olan kareyi etkilediğini belirttikten sonra dilerseniz her bir sekmenin ve alt seçeneklerinin ne işe yaradığını açıklayalım:
Options Sekmesi
Thumbnails Reflect Image Position: Karelerin
öngösterim penceresinde nasıl görüneceğini belirler. Bu seçeneği işaretlediğinizde
kareler animasyonda görüleceği şekilde öngösterim penceresinde tekrar
boyutlandırılır.
Main Dialog Window Always On Top: GIF
Animator'ın tüm pencerelerin üzerinde görülmesini sağlar.
Import Color Palette: GIF paletinin cinsini belirler. Optimal palette seçildiğinde
tüm karelerin paletleri birleştirilir ve 256 renge indirgenir. Browser Palette
ise tüm karelerin paletlerini web tarayıcısının 216 renklik paletine
çevirir.
Import Dither Method:
Solid: Karenin renklerine en yakın renkleri
seçer.
Pattern: Çok fazla renge sahip animasyonlar
için en optimal renkleri seçer
Random: Pattern'den daha iyi bir seçenektir
fakat daha yavaştır.
Error Diffusion: Karelerde hata düzeltmesi
yapar, parlama gibi yanlışlıkları törpüler.
Animation Sekmesi
Animation Width, Animation Height, Image Count:
Animasyonlu GIF dosyasının uzunluk ve genişliğini, kaç adet kareden oluştuğunu
gösterir.
Looping: Animasyonun kaç defa tekrarlanacağını
belirler. Repeat Forever seçeneği işaretlendiğinde metin kutusundaki değer
gözardı edilir ve animasyon sonsuza kadar devam eder.
Trailing Comment: Animasyon hakkında genel
bir açıklama yapmanıza olanak tanır.
Image sekmesi
Bu bölümde karenin yükseklik ve genişliğini veren Image Width ve Image
Height seçenekleri her zaman sabit kalır.
Left: GIF parçasının ana GIF dosyasının
solundan ne kadar uzağa yerleştirileceğini,
Top: parçacığın üstten ne kadar uzağa
yerleştirileceğini gösterir. Bu iki değer küçük parçacığın ana
parçacık üzerindeki koordinatını vermesi açısından önemlidir.
Bu sekmedeki "Duration" seçeneği karenin kaç milisaniye
(Saniyenin yüzde biri) ekrana duracağını belirler.
Undraw Method seçeneği küçük parçacığın işi bittikten sonra ne olacağını
belirler.
"Leave" alt seçeneği parçacığın işi bittikten sonra ekranda
kalmasını, "Restore Previus" parçacığın kullanılmadan önceki
halinin geri getirilmesini, "Restore Background" ise parçacığın
kullanıldığı alanın boşaltılmasını sağlar. Image sekmesindeki "Transparancy"
seçeneği karenin hangi renginin transparan renk olacağını belirler. Kullanılması
pek kolay olmayan bu seçenek iyi göz kararı istiyor çünkü transparan rengi
önizleme karesinden değil de renk paleti içerisinden seçmenizi istiyor. Son
olarak her kare için ayrı bir açıklama getirebileceğinizi belirtelim. Açıklamaları
yazmak için "Comment" kutusunu kullanabilirsiniz.
Animasyonu oluşturalım…
GIF Animator ile animasyon oluşturmak çok kolaydır. Animasyonunuzun parçalarını
bir grafik editörüyle oluşturduktan sonra ister teker teker kaydederek GIF
Animator'a sürükler isterseniz grafik editörünüzden panoya yapıştırarak
Animator penceresinde Shift+Insert tuşlarına basarsınız.
GIF Animator en iyi sonucu önceden kaydedilmiş resimlerin sürüklenip bırakılmasıyla
elde ediyor.
İstediğiniz kareleri Animator penceresinde oluşturup ok tuşlarıyla sıralarını
belirledikten sonra sıra animasyonun kaç kere tekrarlanacağına geliyor. Bu işlemi
de bitirdiğinizde artık Image sekmesine geçerek her bir karenin pozisyonunu
ayarlayabilir ve işi bittikten sonra ne olacağını belirleyebilirsiniz.
GIF Animatoru, daha doğrusu tüm animasyon programlarını kullanırken dikkat etmeniz gereken bir iki nokta var. Bunlardan birincisi resmin sadece değişen parçalarını almanız ve bunu animator penceresine yapıştırmanız, diğeri ise animasyonlarınızda fazla renk kullanmamanız. Eğer animasyonlarınızda tekrarlanmayan parçaları tekrar tekrar kullanırsanız dosyanın büyümesi, dolayisiyle yüklenmesinin zorlaşmasını sağlamış olursunuz.
DURUM ÇUBUĞUNDA YANIP SÖNEN YAZI
Aşağıdaki Javascript durum çubuğuna yanıp sönen bir yazı yerleştiriyor. Kullanıcı herhangi bir URL üzerine gittiğinde devreden çıkan yazı hiç bir kısayol üzerine gidilmediğinde yine yanıp sönmeye başlıyor.<SCRIPT language="JavaScript"><!---
var yazi = "Yanip sönen yazilarla dikkat cekebilirsiniz...";
var hiz = 150;
var control = 1;
function flash()
{if (control == 1)
{window.status=yazi; control=0;}
else
{window.status=""; control=1;}
setTimeout("flash();",hiz);}
// --></SCRIPT>
<BODY OnLoad="flash();">
WEB SİTENİZİ PARK EDİN!
"Web sayfalarımız her geçen gün büyüyor ve kontrolümüzden çıkıyor" diyorsanız size "Web Site Garage"ı önerelim. AtWeb firması tarafından hazırlanan bu servis web sitenizi kontrol ettiği gibi tasarım önerileri de sunuyor. Dilerseniz web sayfanızı arama motorlarına da kaydediyor.Web tabanlı bir hizmet olan Web Site Garage'a (http://www.websitegarage.com/) ana sayfanızın adresini verdiğinizde sistem sitenizdeki kırık kısayolları buluyor, sayfaların yüklenmesinin ortalama ne kadar tuttuğunu hesaplıyor, HTML ve yazım hatalarını buluyor. Servis dilerseniz ana sayfanıza link koyan siteleri araştırıyor.
Sitenizin araştırılması bittikten sonra servis, hataları düzeltmeniz için size değişik öneriler sunuyor. Servisin fiyatı sahip olduğu değişik özelliklere göre 100$ ile 1000$ arasında değişiyor, sadece ana sayfayı incelemek ise ücretsiz.
SAYFA KENDİSİNİ KAPATSIN
Öyle bir web sitesi oluşturdunuz ki bir sürü yardımcı pencere açıyor…. Öyle ki kullanıcılar artık açılan bu yeni pencerelerin içinde boğulduklarından şikayet ediyorlar. Endişelenmeyin tam sizin durumunuza göre bir püf noktası vereceğiz şimdi.Aşağıdaki 4 satırlık HTML kodunu sayfanıza eklediğinizde kodu eklediğiniz alanda bir düğme oluşacaktır. Artık kullanıcılarınız bu düğmeye basarak pencereyi rahatlıkla kapatabilir. Şimdi siz "İyi de güzelim kullanıcılarım pencerenin sağ tarafındaki çarpı tuşuna basmayı zaten akıl edebilirlerdi." diyeceksiniz. Bizce bu tuş aynı zamanda sayfanın izlendikten sonra işinin bittiğinin de bir göstergesi.
<FORM>
<INPUT TYPE="BUTTON" VALUE="Kapat"
NAME="lowerButton" onClick="self.close()">
</FORM>
İSTENİLEN BOYUTLARDA YENİ BİR PENCERE
Aşağıdaki kodları istediğiniz boyutlarda başlık çubuksuz, gezinme tuşları olmayan bir pencere açmak için kullanabilirsiniz. Yazdığımız Javascript PopIt adlı bir fonksiyon oluşturuyor ve sayfanın herhangi bir yerinden bu fonksiyonu çağırmamıza olanak tanıyor. Biz örneğimizde fonksiyonun bir tuşa basıldığında çağrılmasını sağladık.
Örneğin sayfa açılırken aynı anda başka bir pencere açılsın
istiyorsanız
<BODY onload="PopIt('deneme.htm', 160, 300)">
gibi bir ifade kullanabilirsiniz.
<HTML>
<title>İstenilen boyutlarda yeni bir pencere</title>
<SCRIPT LANGUAGE="JavaScript">
<!--
function PopIt(filename, h, w){
popup = window.open(filename,"popDialog","height="+h+",width="+w+",scrollbars=no")
if ( popup.document.close() ) {
popup.document.close()
}
}
// -->
</SCRIPT>
<BODY BGCOLOR="#FFFFFF">
<FORM>
<INPUT TYPE="BUTTON" VALUE="Penceremi aç!" onClick="PopIt('deneme.htm',
160, 300)">
</FORM>
</BODY>
</HTML>
WEB SİTENİZİ KONTROL EDİN
Bir çok bilgi içeren koskoca bir Web sitesi hazırladınız. Web sitenizde o kadar çok link ve resim bulunuyor ki siz bile artık sayısını bilmiyorsunuz. Böyle bir durum ile karşılaştıysanız bilgisayara yüklenen bir Web analiz programı kullanmanız ya da Web tabanlı analiz programlarından faydalanmanız akıllıca olacaktır.
Web sayfaları hakkında istatistikler sunan bu tip programlar aynı zamanda sitenizdeki kısayolların doğruluğunu, resimlerin ve sayfaların yüklenme zamanlarını söylerler. İncelediğimiz gelişmiş analiz programlarından bazıları sayfalardaki kodların doğruluğunu bile kontrol edip öneriler sunabiliyordu. Örneğin resimlerde HEIGHT, WIDTH gibi ifadeler kullanmadıysanız program sayfanın yüklenmesini hızlandıracak bu ifadeleri tag'lara eklemenizi öneriyor.
Hemen belirtelim, aşağıda bulacağınız Web tabanlı analiz programlarının dil kontrollerini kullanmak sayfanızı İngilizce olarak hazırlamadığınız takdirde pek bir işinize yaramayacaktır.
Web Site Garage
http://www.websitegarage.com/
Web Site Garage incelediğimiz Web tabanlı analiz programları içinde en
iyisiydi, uzun süredir hizmet vermekte olan site Web sitenizin sadece ana
sayfasını incelemek için hiç bir ücret almıyor. Servis ana sayfanızın değişik
Web tarayıcılar ile uyumluluğunu, yüklenme süresini, kodların doğruluğunu
test ediyor. Ana sayfanızda çıkan tek bir kırık link bile puanınızı anında
aşağı çekiveriyor. Küçük bir ücret karşılığında Web Site Garage
tüm Web sitenizi kontrol ederek etkileyici raporlar sunuyor.
Doctor HTML
http://www2.imagiware.com/RxHTML/
Düzgün bir arabirime sahip olan bu analiz sitesi bir çok özellik içeriyor.
Okunması kolay raporlar sunan ve incelenmesini istediğiniz özellikleri
seçebildiğiniz Doctor HTML tek bir sayfalık incelemeyi ücretsiz olarak yapıyor.
Sitenizin incelenmesini istediğinizde ise program sizden cüzi bir kayıt
ücreti talep ediyor.
Yine de tek bir sayfalık inceleme de size bir fikir verecektir, bu seçenek sayfada kullanılan resimlerin, tabloların ve linklerin doğruluğunu kontrol ediyor, dökümanın yapısı hakkında bilgi sunuyor. Doctor HTML'nin tek bir dezavantajı yavaş olması. Yüklü bir sayfa için tam bir rapor almanız 10 dakikaya yakın vaktinizi çalacaktır. Program Web Garage'ın aksine bir uyumluluk raporu sunmuyor.
SiteInspector
http://www.siteinspector.com/
LinkExchange açıldığından beri oldukça yol kat etti. 1 yıldan fazla
süredir hizmet veren Web servisinin banner'ları milyonlarca Web sayfasında
yerini aldı. Marketing dalında konusunda öncü olan firmanın şimdilerde başka
bir hizmeti konuşuluyor: SiteInspector. Ana sayfanızın adresini
SiteInspector'ın güvenli kollarına verdiğinizde kısa bir süre sonra
mükemmel bir rapor ile karşılaşıyorsunuz. HTML tasarımı, Web tarayıcı
ile uyumluluk, Kırık Linkler, Web arama servisi ile uyumluluk, popülerlik,
yüklenme zamanı kriterlerine göre puan veren servisin arabirimi ve hızı
sizi tatmin edecektir.
Weblint
http://www.cre.canon.co.uk/~neilb/weblint/
Profesyonel C programcılarından oluşan bir grup C kodlarını kontrol eden
çok güçlü bir yardımcı program yazdılar ve bunun ismini Lint olarak
koydular. Lint kendisine verilen C kodlarını inanılmaz hızlı olarak
inceliyor ve hata olan satırları ve yapıları sıralıyordu. Weblint'te aynı
mantıktan doğmuş ve Lint'in motoru üzerine inşa edilmiş. Analiz programı,
tahmin edebileceğiniz gibi HTML kodlarını oldukça ayrıntılı olarak
inceleyebiliyor, bunun dışında, ücretsiz olan servisin Web tarayıcı
uyumluluğunu araştırma, yükleme zamanını bulma ve kırık kısayolları ayıklama
gibi ekstra özellikleri de bulunuyor.
HTML Validation Service
http://validator.w3.org/
En iyi analiz servisini World Wide Web Concorcium'un vermesini beklerdik ama ne
yazık ki anlaşılması en zor servis W3C'un ki oldu. Öyle ki sitenizdeki bir
HTML sayfasını analiz servisinin kollarına bıraktığınızda diğer
servislerin vermediği kadar çok hata mesajı ile karşılaşıyorsunuz. Motor
tek bir satırı incelemeye aldığından her satırda ilgili tag'ın kapatılmadığı
yönünde gereksiz hatalar veriyor. Yine de bu servisi ücretsiz olarak
deneyebilirsiniz
ZAMANLAYICI
Öyle bir Web sayfanız var ki sayfaya bağlanan kullanıcılara o sayfayı izlemek için belirli bir süre vermek istiyorsunuz. Kalan süre bir şekilde kullanıcıya aktarılsın ve süre bittiğinde kullanıcıya bir mesaj kutusuyla haber verilerek başka bir sayfa yüklensin. Bir test sayfası hazırlıyorsanız ya da sayfaların belirli bir süre sonra zamanının dolmasını istiyorsanız aşağıdaki JavaScript tam size göre, kodlar kullanıcıya istediğiniz kadar zaman vermenize olanak tanıyor.
<HTML>
<TITLE>Zamanlayıcı</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function display()
{
rtime=etime-ctime;
if (rtime>60)
m=parseInt(rtime/60);
else
m=0;
s=parseInt(rtime-m*60);
if(s<10)
s="0"+s
window.status="Kalan Süre: "+m+":"+s
window.setTimeout("checktime()",1000)
}
function settimes()
{
alert("Bu testi tamamlamak için 5 dakikanız var.")
var time= new Date();
hours= time.getHours();
mins= time.getMinutes();
secs= time.getSeconds();
etime=hours*3600+mins*60+secs;
etime+=300;
checktime();
}
function checktime()
{
var time= new Date();
hours= time.getHours();
mins= time.getMinutes();
secs= time.getSeconds();
ctime=hours*3600+mins*60+secs
if(ctime>=etime)
expired();
else
display();
}
function expired()
{
alert("Süre Doldu");
location.href="Sonraki.htm";
}
// -->
</SCRIPT>
<BODY BGCOLOR="#FFFFFF" onLoad="settimes()">
<P><font size=+2 face=arial><b>Zamanlayıcı</font></b><p>
Bu Javascript kullanıcıya belirli bir miktar süre vererek verilen süre
bitince sayfanın otomatik olarak başka bir yönlenmesini sağlar.
<HR>
<FORM>
<INPUT TYPE="button" VALUE="tamamla" onClick="location.href='bitti.html'">
</FORM>
<hr>
Yukarıdaki 300 değerini dilediğiniz gibi değiştirerek verilen süreyi ayarlayabilirsiniz. 300 sayısı verilen saniyeyi belirtmektedir. Verilebilecek en fazla zaman ise 60 dakikadır.