html animasyon
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.
Hangi tarayıcı?
Kullanıcınızın sitenize hangi web tarayıcısıyla bağlandığını ve hangi siteden geldiğini göstermek istiyorsanız aşağıdaki kodları kullanabilirsiniz.
Internet üzerindeki herhangi bir siteden sayfanıza gelen kullanıcı bu kodlar sayesinde geldiği adresi, Web tarayıcısının tipini ve sürümünü öğrenecektir. Kullanıcının geldiği adresi öğrenmesi için muhakkak bir web sunucusundan bağlanması gerekmektedir.
Sayfanıza lokal bir web sayfasından tıklayarak gelen kullanıcılar 1. Satırı boş göreceklerdir. Verdiğimiz örnek kodları değiştirerek sayfanıza bağlanan kullanıcının geldiği siteye geri dönmesi için bir tuş koyabilir, web tarayıcısının cinsine göre değişik içeriklere ulaşmasını sağlayabilirsiniz.
<HTML>
<HEAD><TITLE>Hangi Tarayıcı?</TITLE></HEAD>
<FONT SIZE=+1 FACE=ARIAL>
<SCRIPT LANGUAGE="JavaScript">
var where = document.referrer
var name = navigator.appName
var vers = navigator.appVersion
document.write("Sizi buraya yollayan adres: "+where+" <P>Kullandığınız tarayıcı: "+name+" <BR>"+vers+" ")
</SCRIPT>
</CENTER>
</HTML>
Alt çizgisiz ve aktif kısayollar
Bu günlerde alt çizgisiz ve klasik mavi renge sahip olmayan Internet kısayolları kullanmak çok moda oldu. Herkes gerekli olsun olmasın bu tip kısayolları kullanıyor. Eğer siz de bu tip link'lerin sayfanızın genel görünümünü güzelleştireceğine inanıyor ve bunları kullanmak istiyorsanız size bu işi nasıl becerebileceğinizi anlatalım.
Alt çizgisiz bir kısayol oluşturmak için <A HREF… takısının içinde bir stil tanımı kullanmanız yeterli. Bu stil takısını kullandığınızda hem kısayol alt çizgisiz olacak hem de ziyaret edildikten sonra rengi değişecek.
<p>Alt çizgisiz kısayol:<br>
<A HREF="http://www.pcmagazine.com.tr" STYLE="text-decoration: none">PC Magazine Online</a><p>
Dilerseniz bir adım daha ileri giderek altı çizili olmasına rağmen üzerine gidince rengi değişen bir link oluşturalım. Bunu yapmak için uzun kodlar kullanmaya gerek yok sadece onmouseover özelliğini kullanmak yeterli.
<p>Aktif ve normal kısayol:<br>
<A HREF="http://www.pcmagazine.com.tr" onmouseover="this.style.color='#CC0000'" onmouseout="this.style.color='blue'">PC Magazine Online</a>
Şimdide hem altçizgisiz hem de üzerine gelince renklenen bir link kullanalım. Tahmin edebileceğiniz gibi hem onmouseover hem de STYLE özelliklerini kullanacağız.
<p>Aktif ve alt çizgisiz kısayol:<br>
<A HREF="http://www.pcmagazine.com.tr" STYLE="text-decoration: none" onmouseover="this.style.color='#CC0000'" onmouseout="this.style.color='blue'">
PC Magazine Online</a>
Channel Desteği
Internet Explorer 4.0 bir çok yeni özellik ve değişiklikle karşımıza geldi. Aktif HTML ve kanallar bu özelliklerden belki de en can alıcı olanları. Eğer üzerinde çalıştığınız web projesini sık sık güncellemeyi düşünüyorsanız ve Internet Explorer 4.0 kullanıcılarını bu güncellemelerden en iyi şekilde faydalanmasını istiyorsanız IE4 ile gelen Channel özelliğini sitenize uygulamak isteyebilirsiniz.
Öncelikle belirtelim ki sitenizin içeriği statik ise ve değişmeyen bilgileri kullanıcılara sunmak istiyorsanız Channel özelliğini kullanmanıza gerek yok. Çünkü Channel mantığı sitedeki değişikliklerden kullanıcıyı haberdar etmek ve değişiklik yapılan iç sayfalara kolay erişim sağlamak. Siteniz güncellenmiyorsa kullanıcıların size "Sık Kullanılanlar " menüsünden ulaşması daha doğru olacaktır.
Aslında sitenizin Aktif Kanal'ını oluşturmak sandığınız kadar zor değil, 3-5 gerekli öğeyi biraraya getirdikten sonra kanalınızı kurmak çok az zamanınızı alacaktır. Aktif Kanal seçeneğinin sadece bir web sunucusu üzerinde çalışacağını ve lokal olarak hazırladığınız dosyaları denemek için bir web sunucusu kullanmanız gerektiğini belirttikten sonra kanal oluşturmak için gerekli olan "malzemeleri" sayalım:
194x32, 32x32, 80x32 piksel boyutlarında üç adet GIF dosyası:
En büyük olan GIF dosyası, kullanıcı kanalınıza üye olduğunda Internet Explorer'ın Kanallar çubuğuna belirecek. 80x32 ebatlarında olan diğer bir GIF dosyamız ise masaüstünüzdeki kanallar bölümüne yerleşecek. 32x32 boyutlarındaki GIF ise bir simge niteliğinde.
Alt bölümlerin planı ve ikonları:
Kullanıcı sitenize ait kanala abone olduğunda kanal çubuğunda kanalınızı simgeleyen grafiği görür. Kullanıcı size ait olan öğeye çift tıklayarak önemli gördüğünüz, her zaman güncellenen bölümlere ulaşabilmelidir. CDF dosyasını hazırlamadan önce bu bölümleri kafanızda tasarlamalı her biri için 32x32 boyutlarında simgeler oluşturmalısınız.
Önizleme sayfası
Kanalınıza abone olan kullanıcı kanal çubuğundaki simgenize her tıkladığınızda önizleme sayfanızla karşılaşacaktır. Önizleme sayfası kanalınızın çekiciliğini arttırmak için alt seçenekler dışında elinizdeki yegane kozdur. Bu sayfayı elinizden geldiği kadar çok güncellemeli, sitenizdeki tüm yenilikleri bu sayfaya anında yansıtmalısınız.
Püf Noktası: Kanal önizleme sayfasının genişliği 460 pikseli geçmemelidir. Sayfa bu genişliği geçerse sitenizi 640x480 çözünürlükte izleyen kullanıcılar kanal çubuğu karşılarına geldiğinde önizleme sayfası sağ tarafa kayacağından sayfanın tümünü görmekte zorlanacak, alttaki kaydırma çubuğunu kullanmak zorunda kalacaklardır.
CDF dosyası
Geldik can alıcı noktaya. Kullanıcının kanalınıza abone olabilmesi için kanalınızı karşı tarafın sistemine tanıtacak bir dosya oluşturmaya ihtiyacınız var. Bu dosya CDF (Channel Definition File/Kanal Tanım Dosyası) uzantısını taşıyor. Tüm CDF dosyaları birkaç ufak değişiklik tışında aynı tag'ları taşır ve oluşturması çok kolaydır. Dosyayı hazırlarken dikkat etmeniz gerekenler Türkçe karakter kullanılmamak ve girilediğiniz tüm URL'leri kontrol etmek. Internet Explorer URL yanlışlığı veya Türkçe karaktere rastladığında dosyanın geçersiz olduğunu söyleyecektir. İşte örnek CDF dosyanız:
<?XML VERSION="1.0" ENCODING="UTF-8"?>
<!DOCTYPE Channel SYSTEM "http://www.w3c.org/channel.dtd">
<CHANNEL HREF="http://www.projem.com.tr/channel/index.htm" SELF=" http://www.projem.com.tr/channel/proje.cdf">
<TITLE>Kanal Basligi</TITLE>
<ABSTRACT>Site slogani/Aciklamasi</ABSTRACT>
<LOGO HREF="http://www.projem.com.tr/channel/32x32.ico" STYLE="ICON"/>
<LOGO HREF="http://www.projem.com.tr/channel/80x32.gif" STYLE="IMAGE"/>
<LOGO HREF="http://www.projem.com.tr/channel/194x32.gif" STYLE="IMAGE-WIDE"/>
<ITEM HREF=" http://www.projem.com.tr/deneme.htm"
LASTMOD="1997.07.08T09:43+0200" PRECACHE="YES">
<TITLE>DENEMEDIR</TITLE>
<LOGO HREF="http://www.projem.com.tr/channel/ornek.ico" STYLE="ICON"/>
<ABSTRACT>DENEMEDIR</ABSTRACT>
</ITEM>
……
[Bu alana diğer alt seçenekler girecek]
……
</CHANNEL>
KULLANICI NASIL ÜYE OLACAK?
Yukarıda istediğimiz tüm öğeleri bir klasörde biraraya getirdiniz ve uygun CDFdosyasını hazırladınız. Şimdi kullanıcılarınızın, hazırldığınız bu nadide kanala abone olabilmeleri için gerekli olan kodları ana sayfanıza girmelisiniz.
<a href="javascript:window.external.addChannel('http: //www.projem.com.tr/channel/proje.cdf')">
<img src="abone.gif" border=0><br>Kanalıma Abone Olun!</a>
...şeklindeki kodları sayfanıza girdiğinizde artık sizi ziyaret eden bir şahıs kolaylıkla sitenize abone olabilir, değişiklikleri öğrenebilir. İşte bu kadar basit!
Yönlendirme
Web tarayıcısının tipine göre kullanıcıyı ilgili sayfaya yönlendirmeyi gösteriyoruz. Özellikle Internet Explorer'da çekici görüldüğünü düşündüğünüz bir sayfa varsa fakat sayfanın normal halinin diğer kullanıcılar tarafından izlenebilmesini istiyorsanız bu yola başvurabilirsiniz. Aşağıdaki kodlar Internet Explorer 4.0 web tarayıcısını gördüğünde hemen ilgili sayfaya gidecek aksi durumlarda ise sayfanın içeriğini gösterecektir.
<HTML>
<HEAD><TITLE>DENEME</TITLE></HEAD>
<BODY BGCOLOR="#FFFFFF">
<!-- Web tarayıcısının tipini ve sürümünü öğreniyoruz -->
<script language="JavaScript">
browser = navigator.appName;
version = parseInt(navigator.appVersion);
if (browser == "Microsoft Internet Explorer" && version >= 4) type = "e4";
else type = "e1";
</script>
<!-- Explorer 4.0 ise aynı dizindeki IE.HTM dosyasına yönlendiriyoruz -->
<script language="JavaScript">
if (type == "e4") { location = "IE.HTM " }
</script>
Netscape ve Internet Explorer'ın önceki sürümleri için hazırladığınız sayfa.
</BODY>
</HTML>
Her girişte farklı bir resim!
"Aman sitemde her türlü script'i kullanayım, geri kalmayayım" diyorsanız işte size harika bir script veriyoruz. Kodlarımızı kullanarak web sayfanız yüklenirken sunucunuzun RESIM klasöründe bulunan RESIM1… RESIM2 gibi GIF dosyalarından herhangi bir tanesinin rastgele olarak seçilmesini ve gösterilmesini sağlayabilirsiniz. Bu programcık ayrıca resmin üzerine tıklandığında resimle aynı adı taşıyan fakat HTM (RESIM1.HTM) uzantılı dosyanın da ayrı bir pencerede açılmasını sağlıyor.
<script language="JavaScript">
<!--
var now=new Date(); var status=(now.getSeconds())%3;
document.write('<a target="_blank" href="/resim/resim'+status+'.htm"><img src="/resim/resim'+status+'.gif"></a>');
//-->
</script>
Not: Kodları kullanırken kullanıcıya her defasında bir tanesini görmesi için verdiğin tüm resimleri görebileceğini söylememize gerek yoktur herhalde. Bunu yapabilmesi için sadece HTML kodlarınıza bir gözatması yeterli olacak.
"ÇEREZLER" İLE ZİYARET SAYISINI ÖĞRENMEK
Genellikle büyük yabancı firmaların web sitelerinden yolanan ve bilgisayarımıza yerleşen cookie'ler (Microsoft Türkçesi ile "çerezler") bilgisayarınızın veya sizin hakkınızdaki basit bilgileri sabit diskinizde belirli bir klasörde tutmak için kullanılır. Web sitesini tekrar ziyaret ettiğinizde bu bilgiler sunucu tarafından okunur ve sunucu sizin hakkınızdaki bilgileri bu yolla edinir. Windows'unuzu tekrar kurduğunuzda bazı web sitelerinde oluşturduğunuz kişisel sayfaların karşınıza gelmemesinin sebebi budur. Web sunucu, cookies klasöründeki bilgilerinizi bulamadığı için sizin kim olduğunuzu anlayamaz…
Sayfanızı ziyaret eden kullanıcının sabit diskinde bilgi tutmak çok kolaydır. Aşağıdaki Javascript, kullanıcının ziyaret sayısını yine kullanıcının sabit diskinde tutar ve kullanıcının her yeni ziyaretinde sayıyı bir arttırır. Çerezler hakkında daha çok bilgiyi ilerki sayılarımızda bulacaksınız, yine de merakınızı gidermek istiyorsanız http://www.netscape.com/newsref/std/cookie_spec.html adresini ziyaret edebilirsiniz.
<html><head>
<script>
cookie_name = "Counter_Cookie";
function doCookie() {
if(document.cookie) {
index = document.cookie.indexOf(cookie_name);
} else {index = -1;}
if (index == -1) {
document.cookie=cookie_name+"=1; expires=Tuesday, 01-Apr-1999 08:00:00 GMT";
} else {
countbegin = (document.cookie.indexOf("=", index) + 1);
countend = document.cookie.indexOf(";", index);
if (countend == -1) {countend = document.cookie.length;}
count = eval(document.cookie.substring(countbegin, countend)) + 1;
document.cookie=cookie_name+"="+count+"; expires=Tuesday, 01-Apr-1999 08:00:00 GMT";}}
function gettimes() {if(document.cookie) {
index = document.cookie.indexOf(cookie_name);
if (index != -1) {
countbegin = (document.cookie.indexOf("=", index) + 1);
countend = document.cookie.indexOf(";", index);
if (countend == -1) {
countend = document.cookie.length;}
count = document.cookie.substring(countbegin, countend);
if (count == 1) {
return (count+" kere");
} else {return (count+" kere");}}}
return ("0 kere");}
</script>
</head>
<body onLoad="doCookie()">
<center><script>
document.write("<b>Merhaba! Bu sayfaya daha önce "+gettimes()+" uğradınız.</b>");
</script></center>
2000 YILI SORUNU
Aşağıdaki Javascript'i sayfanıza girdiğinizde, akıllı kodlar 2000 yılına kaç gün kaldığını sayfaya yazacaktır. Çok basit olan kod ayrıca 2000 yılına bir gün kaldığında ve 2000 yılına bir günden az kaldığında da sizi uyarır. Dileyenler bilgisayarlarının saatini değiştirerek script'i deneyebilir, script'i sitelerine ekleyip ilginç bir görüntü oluşturabilir.
<SCRIPT LANGUAGE="JavaScript">
<!--
var now = new Date();
var then = new Date("January 1, 2000");
var left = then.getTime() - now.getTime();
var days = Math.floor(left / (1000 * 60 * 60 * 24));
// var hours = Math.floor(left / (1000 * 60 * 60));
// var minutes = Math.floor(left / (1000 * 60));
// var seconds = Math.floor(left / 1000);
if (days > 1)
document.write("2000 yılına " + days + " gün kaldı!")
else if (days == 1)
document.write("2000 yılına bir gün kaldı!")
else if (days == 0)
document.write("2000 yılına bir günden az kaldı!")
else // days < 0
document.write("2000 yılındayız! ");
// -->
</SCRIPT>
DURUM ÇUBUĞUNDA YANIP SÖNEN YAZI
Geçen ay, sayfa yüklendiğinde durum çubuğuna yerleşen ve çubukta sabit kalan bir yazı oluşturmak için gerekli Javascript kodunu vermiştik. Aşağıdaki Javascript bir adım ileri giderek 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();">
İŞLETİM SİSTEMİNİ BULMA
Sunucunuza bağlanan bir Internet kullanıcısının Web tarayıcısının tipini bulmak, geldiği adresi öğrenmek gibi püf noktalarını daha önce bu sayfalarda vermiştik. Şimdi ise sayfalarınızı izleyen kullanıcıların işletim sistemini bulmanız için gerekli JavaScript'i veriyoruz. Sayfa herhangi bir bilgisayardan yüklendiğinde, yüklenen bilgisayarın işletim sistemi izleyicinin ekranında anında belirecektir. Daha önce verdiğimiz püf noktalarını kullanarak çıkan sonuca göre kullanıcıları yönlendirmeyi siz de başarabilirsiniz.
<HTML>
<SCRIPT LANGUAGE="JavaScript">
<!--
function checkOS() {
if(navigator.userAgent.indexOf('IRIX') != -1)
{ var OpSys = "Irix"; }
else if((navigator.userAgent.indexOf('Win') != -1) &&
(navigator.userAgent.indexOf('95') != -1))
{ var OpSys = "Windows 95"; }
else if(navigator.userAgent.indexOf('Win') != -1)
{ var OpSys = "Windows3.1 veya NT"; }
else if(navigator.userAgent.indexOf('Mac') != -1)
{ var OpSys = "Macintosh"; }
else { var OpSys = "diğer…"; }
return OpSys;
}
// -->
</SCRIPT>
<BODY BGCOLOR="#FFFFFF">
İşletim sisteminiz: <b>
<SCRIPT LANGUAGE="JavaScript">
<!--
var OpSys = checkOS();
document.write(OpSys);
// -->
</SCRIPT>
KARŞILAMA VE UĞURLAMA
İşte sayfanıza gelen kullanıcıları karşılayan ve sayfayı terkederken uğurlayan bir JavaScript. <BODY… tag'ı ile kullanılan bu script kullanıcı Web tarayıcısının penceresini kapatsa bile sayfanın terkedildiğini anlıyor ve bir mesaj kutusu çıkararak uğurlama mesajını gösteriyor.
<HTML>
<BODY BGCOLOR="#FFFFFF" onLoad="alert('Sayfama Hoşgeldiniz!');"
onUnload="alert('Tekrar Bekleriz...');">
</BODY>
</HTML>
İDDİALAR VE DOĞRULUK DERECELERİ
İddia: Sayfanızda bir kelimeyi ne kadar fazla tekrarlarsanız arama
servislerinde o kadar üstlerde yeralırsınız.
Doğrusu: Uzun süredir Internet erişimizin varsa mutlaka içerisinde yan yana ve blok halinde defalarca tekrarlanan kelimeler olan web sitelerine rastlamışsınızdır. (Özellikle bu site parayla veya insanların ilgisini çeken başka bir konu ile ilgiliyse) Genel kanının aksine bir kelimenin sayfa içerisinde bir çok defa tekrarlanmasının hiç bir yararı yoktur. Web arama motorları sayfayı bir defa indeksler ve içerisindeki kelime ve kelime katarlarını sadece 1 defa kaydeder. Kelime tekrarlanmışsa bunu gözardı eder. Arama motorlarına kendi sitenizi en iyi biçimde tanıtmak kullanıcıların sizi kolayca bulmasını sağlamak istiyorsanız META tag'larını kullanmalısınız.
İddia: Bazı HTML tag'larını kapatmamanın zararı yoktur,
en azından sayfanın genel görünümünü etkilemezler.
Doğrusu: Bazen zaman kazanmak için bazen de unutkanlıktan HTML tag'larını kapatmıyor olabilirsiniz. Sayfanın kendi web tarayıcınızda doğru görülmesi her web tarayıcıda doğru görüleceğini göstermez. Explorer'da bir tablo'yu </TABLE> takısıyla kapatmasanız bile içeriği görülür, Netscape ise tablo hiç yokmuş gibi tepki verir. Popüler web tarayıcılar HTML kodlarını düzeltir, yine de tarayıcınız bu işi gerçekleştirmek için zaman çalar. Söz konusu tag, <LI> gibi liste oluşturmak için kullanılan bir tag olsa bile bunu </LI> gibi bir ifadeyle kapatmalısınız.
İddia: Resim görüntülemek için kullanılan <IMG… tag'I ile birlikte
HEIGHT ve WIDTH takılarını kullanmanın hiç bir önemi yoktur.
Doğrusu: Bu takıları kullanmamanın hiç bir zararı yoktur ama HEIGHT ve WIDTH'in yararının olmadığını söylemek de yanlış olur. Sayfanın yüklenmesini hızlandıran bu iki takı resimler yüklenirken sayfada izlenen yeniden boyutlandırmaları da önler. Netscape Navigator ve Internet Explorer kullanıcılarına bu tag'ları kullanmadıklarında sayfadaki tüm resimler yüklenmeden tablonun içeriğinin görülmeyeceğini de belirtelim. Halbuki herhangi bir tablo içerisindeki tüm resimler için HEIGHT ve WIDTH takıları kullanıldığında, resimler henüz yüklenmemiş olsa bile tablo yüklenecek metinler belirecektir...
RESİM DEĞİŞTİRMEK
Web sayfalarında üzerine gidince değişen resimlere sık sık rastlıyorsunuzdur. Java Applet, ActiveX kontrolü gibi derlenmiş bir öğe kullanmadan bu işi siz de kolayca gerçekleştirebilirsiniz. Örneğimizi uygulamadan önce grafik editörünüz ile 100*20 ebatlarında RESIM1-1.GIF, RESIM1-2.GIF, RESIM2-1.GIF, RESIM 2-2.GIF adlarında 4 adet grafik dosyasını hazırlayın. "-1" uzantısı ile biten dosyalar resmin ilk halini "-2" uzantısı ile bitenler ise resmin fare imleci üzerine gittiği hali oluşturacaktır.
Script'imizde her bir resim için bilgi "aOn.src", "bOn.src" gibi değişkenlerde tanımlanmış. Bu değişkenleri uzatarak dilediğiniz sayıda kısayol kullanabilirsiniz. Resimleri oluşturduktan sonra örnek HTML dosyamızı oluşturun ve resimleri HTML sayfanızla aynı klasöre taşıyın. Resim ebatlarını değiştirmek için ise tek yapacağınız newImage(100, 20); ifadesi ile oynamak olacaktır.
<HTML>
<script language="javaScript">
if ((navigator.appName == "Netscape" && parseInt(navigator.appVersion) >= 3)
|| (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) >= 4)) {
rollOvers = 1;} else {rollOvers = 0;}
var dirLevel = 1;
var levelMod = "";
levelMod = "";
for (i = 0;i < dirLevel;i++) {}
if (rollOvers) {
aOn = new Image(100, 20);
aOn.src = "resim1-1.gif";
aOff = new Image(100, 20);
aOff.src = "resim1-2.gif";
bOn = new Image(100, 20);
bOn.src = "resim2-1.gif";
bOff = new Image(100, 20);
bOff.src = "resim2-2.gif";
}
function switchOn(imgName) {
if (rollOvers){
imgOn = eval(imgName + "On.src");
document [imgName].src = imgOn;}}
function switchOff(imgName) {
if (rollOvers){
imgOff = eval(imgName + "Off.src");
document [imgName].src = imgOff;
}}</script>
<a href="http://www.pcmagazine.com.tr/haberler" onMouseover="switchOn('a')" onMouseout="switchOff('a')">
<IMG SRC="resim1-2.gif" border=0 name="a"></a>
<p>
<a href="http://www.pcmagazine.com.tr/share" onMouseover="switchOn('b')" onMouseout="switchOff('b')">
<IMG SRC="resim2-2.gif" border=0 name="b"></a>
</BODY>
</HTML>
TÜM İŞ ARKAPLANDA
PC Magazine Online'ın sayfalarını hazırlarken sol tarafı şeritli sayfaları oldukça sık kullanıyoruz. Hem göze güzel gelen hem de konu başlıklarının kolayca yerleştirebileceğiniz bu sayfa tipini uygulamak çok kolaydır. Bu tip bir sayfayı oluşturmak için tek gerekli olan şey uygun bir arkaplan ve sayfayı bu arkaplana göre ayıracak iki hücreli bir tablodur.
Şeritli bir arkaplan oluşturmak için sadece 1 piksel yüksekliğinde ve 1024 piksel uzunluğunda bir grafik oluşturun. Grafiğin ana sayfayı oluşturacak kısmını dilediğiniz renkte boyadıktan sonra şerit için uygun bir renk seçin ve sol taraftan dilediğiniz kadar pikseli bu renkle boyayın. Şeridin 100 piksel olduğunu varsayan kodlar aşağıdakine benzer olmalıdır:
<HTML>
<BODY BACKGROUND="ARKA.GIF">
<TABLE BORDER=0 WIDTH=590><TR><TD WIDTH=100>
Şerit üstündeki yazılar
</TD><TD WIDTH=490>
Ana sayfadaki yazılar…
</TD></TR></TABLE>
ÜSTE NASIL ŞERİT KOYACAĞIZ?
Sol tarafında şerit olan arka planı anlattıktan sonra, üst tarafında şerit olan arka planı oluşturmayı
tahmin etmek pek de zor olmayacaktır. Sayfanızın uzunluğu kadar uzun fakat 1 piksel genişliğinde bir grafik dosyası oluşturduktan sonra bu grafiğin üstten dilediğiniz kadar pikselini boyayın ve aşağıdaki kodları yazın. İşte size üstünden şerit geçen bir HTML sayfası. Hayal gücünüzü zorlayarak "uçuk" sayfa tasarımlarını web tarayıcılarının arka plan döşeme sistemlerinden de yararlanarak uygulayabilirsiniz.
<HTML>
<BODY BACKGROUND="ARKA.GIF">
<TABLE BORDER=0 WIDTH=590><TR><TD HEIGHT=100>
Şerit üstündeki yazılar
</TD></TR><TR><TD>
Ana sayfadaki yazılar…
</TD></TR></TABLE>
PÜF NOKTASI: Sayfanızın arka planına döşediğiniz grafiğin sabit kalmasını yazıları kaydırdığınızda grafiğin kaymamasını istiyorsanız <BODY BACKGROUND="ARKA.GIF" BGPROPERTIES=FIXED> gibi bir ifade kullanmalısınız.
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ısa yolları 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.
BU TASARIM NASIL YAPILDI?
Internet'te gezinirken Türkiye'deki AlfaRomeo'nun web sitesi gözümüze çarptı ve bu sayfalarda kullanılan güzel tasarım oldukça hoşumuza gitti. Özellikle modellerden birinin özelliklerini tanıtmak için oluşturulan ve şekilde gördüğünüz sayfada oldukça güzel bir teknik kullanılmıştı. Tekniği uygulamak çok zor olmasa bile amacı çok iyi gerçekleştiriyordu.
Sayfayı biraz incelediğinizde tasarımın üstte iki altta ise bir hücreden oluşan çerçeveli bir sayfadan ibaret olduğunu görüyorsunuz. Sol üst sayfada bir tablo oluşturularak buraya başlıklar, sağ üst çerçevedeki tabloya ise özellikler yerleştirilmiş. Sağ çerçevedeki özellikler tablosu sağa doğru uzayıp gidiyor, kullanıcı aşağıdaki kaydırma çubuğunu kullanarak tabloyu sağa sola kaydırabiliyor. Soldaki hücre sabit kaldığından her bir başlığın yanında özelliğin görülmesi kaidesi bozulmuyor.
Sol üst çerçevede bir tablo oluşturularak buraya başlıklar,
sağ üst çerçevedeki tabloya ise özellikler yerleştirilmiş.
http://www.alfaromeo.com.tr adresinden ulaşabileceğiniz bu sitedeki ilgili tasarımı inceleyerek siz de sitenizde kullanabilirsiniz. Tabloları marjinlerle birleştirmek, çerçevede kaydırma çubuğu kullanmamak gibi küçük kodları buradan öğrenebilirsiniz.
DURUM ÇUBUĞUNDA SABİT YAZI
Internet kullanıcısı web sayfası üzerinde herhangi bir kısayol üzerine gittiğinde durum çubuğunda gidilecek sayfanın URL'si belirir. Sayfa yüklendikten sonra ve fare imleci herhangi bir kısayolun üzerinde değilken ise durum çubuğu boşalır ve burada hiç bir bilgi sunulmaz. Durum çubuğu meşgul olmadığı zamanlarda kısa bir sloganın veya sitenizin başlığının buraya yerleşmesini istiyorsanız küçük JavaScript'imizi kullanabilirsiniz.
<body onLoad="window.defaultStatus='PC Magazine Online'">
Yukarıdaki satır sizin de anladığınız gibi sayfanızın BODY ifadesine yerleştirilecek. Sloganınız durum çubuğuna bir defa yerleştiğinde artık silinmeyecek, sadece bir URL üzerine gidildiğinde geçici olarak devre dışı kalacaktır.
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. Bence 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>
BİR MENÜDE SİTE HARİTASI!
Internet'te rastladığımız bir çok sitede kullanıcının istediği sayfaya kolayca erişebilmesi veya ana sayfaya bir klikleme ile ulaşabilmesi için navigasyon çubukları kullanılır. Kullanıcıyı sürekli olarak web tarayıcısının geri tuşuna basmaktan kurtaran bu özelliği şimdi vereceğimiz kodları sayfanıza ekleyerek uygulayabilirsiniz.
Aşağıdaki örnek HTML sayfası, içerisinde bir Javascript barındırıyor. Javascript'i kendinize göre özelleştirerek dilediğiniz tipte bir navigasyon menüsüne sahip olabilirsiniz. Dilediğiniz sayfaya gitmek için tek yapmanız gereken ilgili bölümü seçmek ve Git tuşuna basmak.
<html><head><script language="JavaScript">
<!--
function buildArray() {
var a = buildArray.arguments;
for (i=0; i<a.length; i++) {
this[i] = a[i];
}
this.length = a.length;
}
var urls1 = new buildArray("",
"http://www.pcmagazine.com.tr/",
"http://www.pcmagazine.com.tr/haberler/",
"http://www.pcmagazine.com.tr/rehber/",
"http://www.pcmagazine.com.tr/games/",
"http://www.pcmagazine.com.tr/share/");
function go(which, num, win) {
n = which.selectedIndex;
if (n != 0) {
var url = eval("urls" + num + "[n]")
if (win) {
openWindow(url);
} else {
location.href = url;
}
}
}
// -->
</script></head>
<body>
<form name="form1">
<select name="menu1">
<option>Seçiminizi Yapın
<option>Ana Sayfa
<option>Haberler
<option>Internet Rehberi
<option>PC Games
<option>Shareware
</select>
<input type="button" name="goButton" value="Git!" onClick="go(this.form.menu1, 1, false)">
</form></body></html>
Bu anlatıklarımızdan sonra "ama ben navigasyon menümden kim nereye gitmiş kim hangi bölümü kaç kere gezmiş öğrenmek isterim, bilmek isterim" derseniz yine Internet üzerinden bulabileceğiniz bir CGI veya Perl Script'ten faydalanmanızı öneririz
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.
Hangi tarayıcı?
Kullanıcınızın sitenize hangi web tarayıcısıyla bağlandığını ve hangi siteden geldiğini göstermek istiyorsanız aşağıdaki kodları kullanabilirsiniz.
Internet üzerindeki herhangi bir siteden sayfanıza gelen kullanıcı bu kodlar sayesinde geldiği adresi, Web tarayıcısının tipini ve sürümünü öğrenecektir. Kullanıcının geldiği adresi öğrenmesi için muhakkak bir web sunucusundan bağlanması gerekmektedir.
Sayfanıza lokal bir web sayfasından tıklayarak gelen kullanıcılar 1. Satırı boş göreceklerdir. Verdiğimiz örnek kodları değiştirerek sayfanıza bağlanan kullanıcının geldiği siteye geri dönmesi için bir tuş koyabilir, web tarayıcısının cinsine göre değişik içeriklere ulaşmasını sağlayabilirsiniz.
<HTML>
<HEAD><TITLE>Hangi Tarayıcı?</TITLE></HEAD>
<FONT SIZE=+1 FACE=ARIAL>
<SCRIPT LANGUAGE="JavaScript">
var where = document.referrer
var name = navigator.appName
var vers = navigator.appVersion
document.write("Sizi buraya yollayan adres: "+where+" <P>Kullandığınız tarayıcı: "+name+" <BR>"+vers+" ")
</SCRIPT>
</CENTER>
</HTML>
Alt çizgisiz ve aktif kısayollar
Bu günlerde alt çizgisiz ve klasik mavi renge sahip olmayan Internet kısayolları kullanmak çok moda oldu. Herkes gerekli olsun olmasın bu tip kısayolları kullanıyor. Eğer siz de bu tip link'lerin sayfanızın genel görünümünü güzelleştireceğine inanıyor ve bunları kullanmak istiyorsanız size bu işi nasıl becerebileceğinizi anlatalım.
Alt çizgisiz bir kısayol oluşturmak için <A HREF… takısının içinde bir stil tanımı kullanmanız yeterli. Bu stil takısını kullandığınızda hem kısayol alt çizgisiz olacak hem de ziyaret edildikten sonra rengi değişecek.
<p>Alt çizgisiz kısayol:<br>
<A HREF="http://www.pcmagazine.com.tr" STYLE="text-decoration: none">PC Magazine Online</a><p>
Dilerseniz bir adım daha ileri giderek altı çizili olmasına rağmen üzerine gidince rengi değişen bir link oluşturalım. Bunu yapmak için uzun kodlar kullanmaya gerek yok sadece onmouseover özelliğini kullanmak yeterli.
<p>Aktif ve normal kısayol:<br>
<A HREF="http://www.pcmagazine.com.tr" onmouseover="this.style.color='#CC0000'" onmouseout="this.style.color='blue'">PC Magazine Online</a>
Şimdide hem altçizgisiz hem de üzerine gelince renklenen bir link kullanalım. Tahmin edebileceğiniz gibi hem onmouseover hem de STYLE özelliklerini kullanacağız.
<p>Aktif ve alt çizgisiz kısayol:<br>
<A HREF="http://www.pcmagazine.com.tr" STYLE="text-decoration: none" onmouseover="this.style.color='#CC0000'" onmouseout="this.style.color='blue'">
PC Magazine Online</a>
Channel Desteği
Internet Explorer 4.0 bir çok yeni özellik ve değişiklikle karşımıza geldi. Aktif HTML ve kanallar bu özelliklerden belki de en can alıcı olanları. Eğer üzerinde çalıştığınız web projesini sık sık güncellemeyi düşünüyorsanız ve Internet Explorer 4.0 kullanıcılarını bu güncellemelerden en iyi şekilde faydalanmasını istiyorsanız IE4 ile gelen Channel özelliğini sitenize uygulamak isteyebilirsiniz.
Öncelikle belirtelim ki sitenizin içeriği statik ise ve değişmeyen bilgileri kullanıcılara sunmak istiyorsanız Channel özelliğini kullanmanıza gerek yok. Çünkü Channel mantığı sitedeki değişikliklerden kullanıcıyı haberdar etmek ve değişiklik yapılan iç sayfalara kolay erişim sağlamak. Siteniz güncellenmiyorsa kullanıcıların size "Sık Kullanılanlar " menüsünden ulaşması daha doğru olacaktır.
Aslında sitenizin Aktif Kanal'ını oluşturmak sandığınız kadar zor değil, 3-5 gerekli öğeyi biraraya getirdikten sonra kanalınızı kurmak çok az zamanınızı alacaktır. Aktif Kanal seçeneğinin sadece bir web sunucusu üzerinde çalışacağını ve lokal olarak hazırladığınız dosyaları denemek için bir web sunucusu kullanmanız gerektiğini belirttikten sonra kanal oluşturmak için gerekli olan "malzemeleri" sayalım:
194x32, 32x32, 80x32 piksel boyutlarında üç adet GIF dosyası:
En büyük olan GIF dosyası, kullanıcı kanalınıza üye olduğunda Internet Explorer'ın Kanallar çubuğuna belirecek. 80x32 ebatlarında olan diğer bir GIF dosyamız ise masaüstünüzdeki kanallar bölümüne yerleşecek. 32x32 boyutlarındaki GIF ise bir simge niteliğinde.
Alt bölümlerin planı ve ikonları:
Kullanıcı sitenize ait kanala abone olduğunda kanal çubuğunda kanalınızı simgeleyen grafiği görür. Kullanıcı size ait olan öğeye çift tıklayarak önemli gördüğünüz, her zaman güncellenen bölümlere ulaşabilmelidir. CDF dosyasını hazırlamadan önce bu bölümleri kafanızda tasarlamalı her biri için 32x32 boyutlarında simgeler oluşturmalısınız.
Önizleme sayfası
Kanalınıza abone olan kullanıcı kanal çubuğundaki simgenize her tıkladığınızda önizleme sayfanızla karşılaşacaktır. Önizleme sayfası kanalınızın çekiciliğini arttırmak için alt seçenekler dışında elinizdeki yegane kozdur. Bu sayfayı elinizden geldiği kadar çok güncellemeli, sitenizdeki tüm yenilikleri bu sayfaya anında yansıtmalısınız.
Püf Noktası: Kanal önizleme sayfasının genişliği 460 pikseli geçmemelidir. Sayfa bu genişliği geçerse sitenizi 640x480 çözünürlükte izleyen kullanıcılar kanal çubuğu karşılarına geldiğinde önizleme sayfası sağ tarafa kayacağından sayfanın tümünü görmekte zorlanacak, alttaki kaydırma çubuğunu kullanmak zorunda kalacaklardır.
CDF dosyası
Geldik can alıcı noktaya. Kullanıcının kanalınıza abone olabilmesi için kanalınızı karşı tarafın sistemine tanıtacak bir dosya oluşturmaya ihtiyacınız var. Bu dosya CDF (Channel Definition File/Kanal Tanım Dosyası) uzantısını taşıyor. Tüm CDF dosyaları birkaç ufak değişiklik tışında aynı tag'ları taşır ve oluşturması çok kolaydır. Dosyayı hazırlarken dikkat etmeniz gerekenler Türkçe karakter kullanılmamak ve girilediğiniz tüm URL'leri kontrol etmek. Internet Explorer URL yanlışlığı veya Türkçe karaktere rastladığında dosyanın geçersiz olduğunu söyleyecektir. İşte örnek CDF dosyanız:
<?XML VERSION="1.0" ENCODING="UTF-8"?>
<!DOCTYPE Channel SYSTEM "http://www.w3c.org/channel.dtd">
<CHANNEL HREF="http://www.projem.com.tr/channel/index.htm" SELF=" http://www.projem.com.tr/channel/proje.cdf">
<TITLE>Kanal Basligi</TITLE>
<ABSTRACT>Site slogani/Aciklamasi</ABSTRACT>
<LOGO HREF="http://www.projem.com.tr/channel/32x32.ico" STYLE="ICON"/>
<LOGO HREF="http://www.projem.com.tr/channel/80x32.gif" STYLE="IMAGE"/>
<LOGO HREF="http://www.projem.com.tr/channel/194x32.gif" STYLE="IMAGE-WIDE"/>
<ITEM HREF=" http://www.projem.com.tr/deneme.htm"
LASTMOD="1997.07.08T09:43+0200" PRECACHE="YES">
<TITLE>DENEMEDIR</TITLE>
<LOGO HREF="http://www.projem.com.tr/channel/ornek.ico" STYLE="ICON"/>
<ABSTRACT>DENEMEDIR</ABSTRACT>
</ITEM>
……
[Bu alana diğer alt seçenekler girecek]
……
</CHANNEL>
KULLANICI NASIL ÜYE OLACAK?
Yukarıda istediğimiz tüm öğeleri bir klasörde biraraya getirdiniz ve uygun CDFdosyasını hazırladınız. Şimdi kullanıcılarınızın, hazırldığınız bu nadide kanala abone olabilmeleri için gerekli olan kodları ana sayfanıza girmelisiniz.
<a href="javascript:window.external.addChannel('http: //www.projem.com.tr/channel/proje.cdf')">
<img src="abone.gif" border=0><br>Kanalıma Abone Olun!</a>
...şeklindeki kodları sayfanıza girdiğinizde artık sizi ziyaret eden bir şahıs kolaylıkla sitenize abone olabilir, değişiklikleri öğrenebilir. İşte bu kadar basit!
Yönlendirme
Web tarayıcısının tipine göre kullanıcıyı ilgili sayfaya yönlendirmeyi gösteriyoruz. Özellikle Internet Explorer'da çekici görüldüğünü düşündüğünüz bir sayfa varsa fakat sayfanın normal halinin diğer kullanıcılar tarafından izlenebilmesini istiyorsanız bu yola başvurabilirsiniz. Aşağıdaki kodlar Internet Explorer 4.0 web tarayıcısını gördüğünde hemen ilgili sayfaya gidecek aksi durumlarda ise sayfanın içeriğini gösterecektir.
<HTML>
<HEAD><TITLE>DENEME</TITLE></HEAD>
<BODY BGCOLOR="#FFFFFF">
<!-- Web tarayıcısının tipini ve sürümünü öğreniyoruz -->
<script language="JavaScript">
browser = navigator.appName;
version = parseInt(navigator.appVersion);
if (browser == "Microsoft Internet Explorer" && version >= 4) type = "e4";
else type = "e1";
</script>
<!-- Explorer 4.0 ise aynı dizindeki IE.HTM dosyasına yönlendiriyoruz -->
<script language="JavaScript">
if (type == "e4") { location = "IE.HTM " }
</script>
Netscape ve Internet Explorer'ın önceki sürümleri için hazırladığınız sayfa.
</BODY>
</HTML>
Her girişte farklı bir resim!
"Aman sitemde her türlü script'i kullanayım, geri kalmayayım" diyorsanız işte size harika bir script veriyoruz. Kodlarımızı kullanarak web sayfanız yüklenirken sunucunuzun RESIM klasöründe bulunan RESIM1… RESIM2 gibi GIF dosyalarından herhangi bir tanesinin rastgele olarak seçilmesini ve gösterilmesini sağlayabilirsiniz. Bu programcık ayrıca resmin üzerine tıklandığında resimle aynı adı taşıyan fakat HTM (RESIM1.HTM) uzantılı dosyanın da ayrı bir pencerede açılmasını sağlıyor.
<script language="JavaScript">
<!--
var now=new Date(); var status=(now.getSeconds())%3;
document.write('<a target="_blank" href="/resim/resim'+status+'.htm"><img src="/resim/resim'+status+'.gif"></a>');
//-->
</script>
Not: Kodları kullanırken kullanıcıya her defasında bir tanesini görmesi için verdiğin tüm resimleri görebileceğini söylememize gerek yoktur herhalde. Bunu yapabilmesi için sadece HTML kodlarınıza bir gözatması yeterli olacak.
"ÇEREZLER" İLE ZİYARET SAYISINI ÖĞRENMEK
Genellikle büyük yabancı firmaların web sitelerinden yolanan ve bilgisayarımıza yerleşen cookie'ler (Microsoft Türkçesi ile "çerezler") bilgisayarınızın veya sizin hakkınızdaki basit bilgileri sabit diskinizde belirli bir klasörde tutmak için kullanılır. Web sitesini tekrar ziyaret ettiğinizde bu bilgiler sunucu tarafından okunur ve sunucu sizin hakkınızdaki bilgileri bu yolla edinir. Windows'unuzu tekrar kurduğunuzda bazı web sitelerinde oluşturduğunuz kişisel sayfaların karşınıza gelmemesinin sebebi budur. Web sunucu, cookies klasöründeki bilgilerinizi bulamadığı için sizin kim olduğunuzu anlayamaz…
Sayfanızı ziyaret eden kullanıcının sabit diskinde bilgi tutmak çok kolaydır. Aşağıdaki Javascript, kullanıcının ziyaret sayısını yine kullanıcının sabit diskinde tutar ve kullanıcının her yeni ziyaretinde sayıyı bir arttırır. Çerezler hakkında daha çok bilgiyi ilerki sayılarımızda bulacaksınız, yine de merakınızı gidermek istiyorsanız http://www.netscape.com/newsref/std/cookie_spec.html adresini ziyaret edebilirsiniz.
<html><head>
<script>
cookie_name = "Counter_Cookie";
function doCookie() {
if(document.cookie) {
index = document.cookie.indexOf(cookie_name);
} else {index = -1;}
if (index == -1) {
document.cookie=cookie_name+"=1; expires=Tuesday, 01-Apr-1999 08:00:00 GMT";
} else {
countbegin = (document.cookie.indexOf("=", index) + 1);
countend = document.cookie.indexOf(";", index);
if (countend == -1) {countend = document.cookie.length;}
count = eval(document.cookie.substring(countbegin, countend)) + 1;
document.cookie=cookie_name+"="+count+"; expires=Tuesday, 01-Apr-1999 08:00:00 GMT";}}
function gettimes() {if(document.cookie) {
index = document.cookie.indexOf(cookie_name);
if (index != -1) {
countbegin = (document.cookie.indexOf("=", index) + 1);
countend = document.cookie.indexOf(";", index);
if (countend == -1) {
countend = document.cookie.length;}
count = document.cookie.substring(countbegin, countend);
if (count == 1) {
return (count+" kere");
} else {return (count+" kere");}}}
return ("0 kere");}
</script>
</head>
<body onLoad="doCookie()">
<center><script>
document.write("<b>Merhaba! Bu sayfaya daha önce "+gettimes()+" uğradınız.</b>");
</script></center>
2000 YILI SORUNU
Aşağıdaki Javascript'i sayfanıza girdiğinizde, akıllı kodlar 2000 yılına kaç gün kaldığını sayfaya yazacaktır. Çok basit olan kod ayrıca 2000 yılına bir gün kaldığında ve 2000 yılına bir günden az kaldığında da sizi uyarır. Dileyenler bilgisayarlarının saatini değiştirerek script'i deneyebilir, script'i sitelerine ekleyip ilginç bir görüntü oluşturabilir.
<SCRIPT LANGUAGE="JavaScript">
<!--
var now = new Date();
var then = new Date("January 1, 2000");
var left = then.getTime() - now.getTime();
var days = Math.floor(left / (1000 * 60 * 60 * 24));
// var hours = Math.floor(left / (1000 * 60 * 60));
// var minutes = Math.floor(left / (1000 * 60));
// var seconds = Math.floor(left / 1000);
if (days > 1)
document.write("2000 yılına " + days + " gün kaldı!")
else if (days == 1)
document.write("2000 yılına bir gün kaldı!")
else if (days == 0)
document.write("2000 yılına bir günden az kaldı!")
else // days < 0
document.write("2000 yılındayız! ");
// -->
</SCRIPT>
DURUM ÇUBUĞUNDA YANIP SÖNEN YAZI
Geçen ay, sayfa yüklendiğinde durum çubuğuna yerleşen ve çubukta sabit kalan bir yazı oluşturmak için gerekli Javascript kodunu vermiştik. Aşağıdaki Javascript bir adım ileri giderek 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();">
İŞLETİM SİSTEMİNİ BULMA
Sunucunuza bağlanan bir Internet kullanıcısının Web tarayıcısının tipini bulmak, geldiği adresi öğrenmek gibi püf noktalarını daha önce bu sayfalarda vermiştik. Şimdi ise sayfalarınızı izleyen kullanıcıların işletim sistemini bulmanız için gerekli JavaScript'i veriyoruz. Sayfa herhangi bir bilgisayardan yüklendiğinde, yüklenen bilgisayarın işletim sistemi izleyicinin ekranında anında belirecektir. Daha önce verdiğimiz püf noktalarını kullanarak çıkan sonuca göre kullanıcıları yönlendirmeyi siz de başarabilirsiniz.
<HTML>
<SCRIPT LANGUAGE="JavaScript">
<!--
function checkOS() {
if(navigator.userAgent.indexOf('IRIX') != -1)
{ var OpSys = "Irix"; }
else if((navigator.userAgent.indexOf('Win') != -1) &&
(navigator.userAgent.indexOf('95') != -1))
{ var OpSys = "Windows 95"; }
else if(navigator.userAgent.indexOf('Win') != -1)
{ var OpSys = "Windows3.1 veya NT"; }
else if(navigator.userAgent.indexOf('Mac') != -1)
{ var OpSys = "Macintosh"; }
else { var OpSys = "diğer…"; }
return OpSys;
}
// -->
</SCRIPT>
<BODY BGCOLOR="#FFFFFF">
İşletim sisteminiz: <b>
<SCRIPT LANGUAGE="JavaScript">
<!--
var OpSys = checkOS();
document.write(OpSys);
// -->
</SCRIPT>
KARŞILAMA VE UĞURLAMA
İşte sayfanıza gelen kullanıcıları karşılayan ve sayfayı terkederken uğurlayan bir JavaScript. <BODY… tag'ı ile kullanılan bu script kullanıcı Web tarayıcısının penceresini kapatsa bile sayfanın terkedildiğini anlıyor ve bir mesaj kutusu çıkararak uğurlama mesajını gösteriyor.
<HTML>
<BODY BGCOLOR="#FFFFFF" onLoad="alert('Sayfama Hoşgeldiniz!');"
onUnload="alert('Tekrar Bekleriz...');">
</BODY>
</HTML>
İDDİALAR VE DOĞRULUK DERECELERİ
İddia: Sayfanızda bir kelimeyi ne kadar fazla tekrarlarsanız arama
servislerinde o kadar üstlerde yeralırsınız.
Doğrusu: Uzun süredir Internet erişimizin varsa mutlaka içerisinde yan yana ve blok halinde defalarca tekrarlanan kelimeler olan web sitelerine rastlamışsınızdır. (Özellikle bu site parayla veya insanların ilgisini çeken başka bir konu ile ilgiliyse) Genel kanının aksine bir kelimenin sayfa içerisinde bir çok defa tekrarlanmasının hiç bir yararı yoktur. Web arama motorları sayfayı bir defa indeksler ve içerisindeki kelime ve kelime katarlarını sadece 1 defa kaydeder. Kelime tekrarlanmışsa bunu gözardı eder. Arama motorlarına kendi sitenizi en iyi biçimde tanıtmak kullanıcıların sizi kolayca bulmasını sağlamak istiyorsanız META tag'larını kullanmalısınız.
İddia: Bazı HTML tag'larını kapatmamanın zararı yoktur,
en azından sayfanın genel görünümünü etkilemezler.
Doğrusu: Bazen zaman kazanmak için bazen de unutkanlıktan HTML tag'larını kapatmıyor olabilirsiniz. Sayfanın kendi web tarayıcınızda doğru görülmesi her web tarayıcıda doğru görüleceğini göstermez. Explorer'da bir tablo'yu </TABLE> takısıyla kapatmasanız bile içeriği görülür, Netscape ise tablo hiç yokmuş gibi tepki verir. Popüler web tarayıcılar HTML kodlarını düzeltir, yine de tarayıcınız bu işi gerçekleştirmek için zaman çalar. Söz konusu tag, <LI> gibi liste oluşturmak için kullanılan bir tag olsa bile bunu </LI> gibi bir ifadeyle kapatmalısınız.
İddia: Resim görüntülemek için kullanılan <IMG… tag'I ile birlikte
HEIGHT ve WIDTH takılarını kullanmanın hiç bir önemi yoktur.
Doğrusu: Bu takıları kullanmamanın hiç bir zararı yoktur ama HEIGHT ve WIDTH'in yararının olmadığını söylemek de yanlış olur. Sayfanın yüklenmesini hızlandıran bu iki takı resimler yüklenirken sayfada izlenen yeniden boyutlandırmaları da önler. Netscape Navigator ve Internet Explorer kullanıcılarına bu tag'ları kullanmadıklarında sayfadaki tüm resimler yüklenmeden tablonun içeriğinin görülmeyeceğini de belirtelim. Halbuki herhangi bir tablo içerisindeki tüm resimler için HEIGHT ve WIDTH takıları kullanıldığında, resimler henüz yüklenmemiş olsa bile tablo yüklenecek metinler belirecektir...
RESİM DEĞİŞTİRMEK
Web sayfalarında üzerine gidince değişen resimlere sık sık rastlıyorsunuzdur. Java Applet, ActiveX kontrolü gibi derlenmiş bir öğe kullanmadan bu işi siz de kolayca gerçekleştirebilirsiniz. Örneğimizi uygulamadan önce grafik editörünüz ile 100*20 ebatlarında RESIM1-1.GIF, RESIM1-2.GIF, RESIM2-1.GIF, RESIM 2-2.GIF adlarında 4 adet grafik dosyasını hazırlayın. "-1" uzantısı ile biten dosyalar resmin ilk halini "-2" uzantısı ile bitenler ise resmin fare imleci üzerine gittiği hali oluşturacaktır.
Script'imizde her bir resim için bilgi "aOn.src", "bOn.src" gibi değişkenlerde tanımlanmış. Bu değişkenleri uzatarak dilediğiniz sayıda kısayol kullanabilirsiniz. Resimleri oluşturduktan sonra örnek HTML dosyamızı oluşturun ve resimleri HTML sayfanızla aynı klasöre taşıyın. Resim ebatlarını değiştirmek için ise tek yapacağınız newImage(100, 20); ifadesi ile oynamak olacaktır.
<HTML>
<script language="javaScript">
if ((navigator.appName == "Netscape" && parseInt(navigator.appVersion) >= 3)
|| (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) >= 4)) {
rollOvers = 1;} else {rollOvers = 0;}
var dirLevel = 1;
var levelMod = "";
levelMod = "";
for (i = 0;i < dirLevel;i++) {}
if (rollOvers) {
aOn = new Image(100, 20);
aOn.src = "resim1-1.gif";
aOff = new Image(100, 20);
aOff.src = "resim1-2.gif";
bOn = new Image(100, 20);
bOn.src = "resim2-1.gif";
bOff = new Image(100, 20);
bOff.src = "resim2-2.gif";
}
function switchOn(imgName) {
if (rollOvers){
imgOn = eval(imgName + "On.src");
document [imgName].src = imgOn;}}
function switchOff(imgName) {
if (rollOvers){
imgOff = eval(imgName + "Off.src");
document [imgName].src = imgOff;
}}</script>
<a href="http://www.pcmagazine.com.tr/haberler" onMouseover="switchOn('a')" onMouseout="switchOff('a')">
<IMG SRC="resim1-2.gif" border=0 name="a"></a>
<p>
<a href="http://www.pcmagazine.com.tr/share" onMouseover="switchOn('b')" onMouseout="switchOff('b')">
<IMG SRC="resim2-2.gif" border=0 name="b"></a>
</BODY>
</HTML>
TÜM İŞ ARKAPLANDA
PC Magazine Online'ın sayfalarını hazırlarken sol tarafı şeritli sayfaları oldukça sık kullanıyoruz. Hem göze güzel gelen hem de konu başlıklarının kolayca yerleştirebileceğiniz bu sayfa tipini uygulamak çok kolaydır. Bu tip bir sayfayı oluşturmak için tek gerekli olan şey uygun bir arkaplan ve sayfayı bu arkaplana göre ayıracak iki hücreli bir tablodur.
Şeritli bir arkaplan oluşturmak için sadece 1 piksel yüksekliğinde ve 1024 piksel uzunluğunda bir grafik oluşturun. Grafiğin ana sayfayı oluşturacak kısmını dilediğiniz renkte boyadıktan sonra şerit için uygun bir renk seçin ve sol taraftan dilediğiniz kadar pikseli bu renkle boyayın. Şeridin 100 piksel olduğunu varsayan kodlar aşağıdakine benzer olmalıdır:
<HTML>
<BODY BACKGROUND="ARKA.GIF">
<TABLE BORDER=0 WIDTH=590><TR><TD WIDTH=100>
Şerit üstündeki yazılar
</TD><TD WIDTH=490>
Ana sayfadaki yazılar…
</TD></TR></TABLE>
ÜSTE NASIL ŞERİT KOYACAĞIZ?
Sol tarafında şerit olan arka planı anlattıktan sonra, üst tarafında şerit olan arka planı oluşturmayı
tahmin etmek pek de zor olmayacaktır. Sayfanızın uzunluğu kadar uzun fakat 1 piksel genişliğinde bir grafik dosyası oluşturduktan sonra bu grafiğin üstten dilediğiniz kadar pikselini boyayın ve aşağıdaki kodları yazın. İşte size üstünden şerit geçen bir HTML sayfası. Hayal gücünüzü zorlayarak "uçuk" sayfa tasarımlarını web tarayıcılarının arka plan döşeme sistemlerinden de yararlanarak uygulayabilirsiniz.
<HTML>
<BODY BACKGROUND="ARKA.GIF">
<TABLE BORDER=0 WIDTH=590><TR><TD HEIGHT=100>
Şerit üstündeki yazılar
</TD></TR><TR><TD>
Ana sayfadaki yazılar…
</TD></TR></TABLE>
PÜF NOKTASI: Sayfanızın arka planına döşediğiniz grafiğin sabit kalmasını yazıları kaydırdığınızda grafiğin kaymamasını istiyorsanız <BODY BACKGROUND="ARKA.GIF" BGPROPERTIES=FIXED> gibi bir ifade kullanmalısınız.
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ısa yolları 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.
BU TASARIM NASIL YAPILDI?
Internet'te gezinirken Türkiye'deki AlfaRomeo'nun web sitesi gözümüze çarptı ve bu sayfalarda kullanılan güzel tasarım oldukça hoşumuza gitti. Özellikle modellerden birinin özelliklerini tanıtmak için oluşturulan ve şekilde gördüğünüz sayfada oldukça güzel bir teknik kullanılmıştı. Tekniği uygulamak çok zor olmasa bile amacı çok iyi gerçekleştiriyordu.
Sayfayı biraz incelediğinizde tasarımın üstte iki altta ise bir hücreden oluşan çerçeveli bir sayfadan ibaret olduğunu görüyorsunuz. Sol üst sayfada bir tablo oluşturularak buraya başlıklar, sağ üst çerçevedeki tabloya ise özellikler yerleştirilmiş. Sağ çerçevedeki özellikler tablosu sağa doğru uzayıp gidiyor, kullanıcı aşağıdaki kaydırma çubuğunu kullanarak tabloyu sağa sola kaydırabiliyor. Soldaki hücre sabit kaldığından her bir başlığın yanında özelliğin görülmesi kaidesi bozulmuyor.
Sol üst çerçevede bir tablo oluşturularak buraya başlıklar,
sağ üst çerçevedeki tabloya ise özellikler yerleştirilmiş.
http://www.alfaromeo.com.tr adresinden ulaşabileceğiniz bu sitedeki ilgili tasarımı inceleyerek siz de sitenizde kullanabilirsiniz. Tabloları marjinlerle birleştirmek, çerçevede kaydırma çubuğu kullanmamak gibi küçük kodları buradan öğrenebilirsiniz.
DURUM ÇUBUĞUNDA SABİT YAZI
Internet kullanıcısı web sayfası üzerinde herhangi bir kısayol üzerine gittiğinde durum çubuğunda gidilecek sayfanın URL'si belirir. Sayfa yüklendikten sonra ve fare imleci herhangi bir kısayolun üzerinde değilken ise durum çubuğu boşalır ve burada hiç bir bilgi sunulmaz. Durum çubuğu meşgul olmadığı zamanlarda kısa bir sloganın veya sitenizin başlığının buraya yerleşmesini istiyorsanız küçük JavaScript'imizi kullanabilirsiniz.
<body onLoad="window.defaultStatus='PC Magazine Online'">
Yukarıdaki satır sizin de anladığınız gibi sayfanızın BODY ifadesine yerleştirilecek. Sloganınız durum çubuğuna bir defa yerleştiğinde artık silinmeyecek, sadece bir URL üzerine gidildiğinde geçici olarak devre dışı kalacaktır.
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. Bence 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>
BİR MENÜDE SİTE HARİTASI!
Internet'te rastladığımız bir çok sitede kullanıcının istediği sayfaya kolayca erişebilmesi veya ana sayfaya bir klikleme ile ulaşabilmesi için navigasyon çubukları kullanılır. Kullanıcıyı sürekli olarak web tarayıcısının geri tuşuna basmaktan kurtaran bu özelliği şimdi vereceğimiz kodları sayfanıza ekleyerek uygulayabilirsiniz.
Aşağıdaki örnek HTML sayfası, içerisinde bir Javascript barındırıyor. Javascript'i kendinize göre özelleştirerek dilediğiniz tipte bir navigasyon menüsüne sahip olabilirsiniz. Dilediğiniz sayfaya gitmek için tek yapmanız gereken ilgili bölümü seçmek ve Git tuşuna basmak.
<html><head><script language="JavaScript">
<!--
function buildArray() {
var a = buildArray.arguments;
for (i=0; i<a.length; i++) {
this[i] = a[i];
}
this.length = a.length;
}
var urls1 = new buildArray("",
"http://www.pcmagazine.com.tr/",
"http://www.pcmagazine.com.tr/haberler/",
"http://www.pcmagazine.com.tr/rehber/",
"http://www.pcmagazine.com.tr/games/",
"http://www.pcmagazine.com.tr/share/");
function go(which, num, win) {
n = which.selectedIndex;
if (n != 0) {
var url = eval("urls" + num + "[n]")
if (win) {
openWindow(url);
} else {
location.href = url;
}
}
}
// -->
</script></head>
<body>
<form name="form1">
<select name="menu1">
<option>Seçiminizi Yapın
<option>Ana Sayfa
<option>Haberler
<option>Internet Rehberi
<option>PC Games
<option>Shareware
</select>
<input type="button" name="goButton" value="Git!" onClick="go(this.form.menu1, 1, false)">
</form></body></html>
Bu anlatıklarımızdan sonra "ama ben navigasyon menümden kim nereye gitmiş kim hangi bölümü kaç kere gezmiş öğrenmek isterim, bilmek isterim" derseniz yine Internet üzerinden bulabileceğiniz bir CGI veya Perl Script'ten faydalanmanızı öneririz