|
Katılma Tarihi: Şub 2006
Nereden: Bursa/es-es
Yaş: 23
Mesajlar: 1,780
|
"Ç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(****************) {
index = ****************.indexOf(cookie_name);
} else {index = -1;}
if (index == -1) {
****************=cookie_name+"=1; expires=Tuesday, 01-Apr-1999 08:00:00 GMT";
} else {
countbegin = (****************.indexOf("=", index) + 1);
countend = ****************.indexOf(";", index);
if (countend == -1) {countend = ****************.length;}
count = eval(****************.substring(countbegin, countend)) + 1;
****************=cookie_name+"="+count+"; expires=Tuesday, 01-Apr-1999 08:00:00 GMT";}}
function gettimes() {if(****************) {
index = ****************.indexOf(cookie_name);
if (index != -1) {
countbegin = (****************.indexOf("=", index) + 1);
countend = ****************.indexOf(";", index);
if (countend == -1) {
countend = ****************.length;}
count = ****************.substring(countbegin, countend);
if (count == 1) {
return (count+" kere");
} else {return (count+" kere");}}}
return ("0 kere");}
</script>
</head>
<body onLoad="doCookie()">
<center><script>
***************("<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)
***************("2000 yılına " + days + " gün kaldı!")
else if (days == 1)
***************("2000 yılına bir gün kaldı!")
else if (days == 0)
***************("2000 yılına bir günden az kaldı!")
else // days < 0
***************("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();
***************(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ş.
Alfa Romeo 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ı öneririzalıntıdır
|