CurcunaForum.Org - Tekil Mesaj gösterimi

NameLeSS® · 12-21-2007

DERS 27
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">

<script language="JavaScript">
browser = navigator.appName;
version = parseInt(navigator.appVersion);
if (browser == "Microsoft Internet Explorer" && version >= 4) type = "e4";
else type = "e1";
</script>

<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>

_-_-_-_-_-_-_-_-_-_-_-_-__-_-_-_-_-_-_-_-_-_-_-_-__-_-_-_-_-_-_-_-_-_-_-_-_

DERS 28

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">

</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.

_-_-_-_-_-_-_-_-_-_-_-_-__-_-_-_-_-_-_-_-_-_-_-_-__-_-_-_-_-_-_-_-_-_-_-_-_

DERS 29

"Ç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.

<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>

_-_-_-_-_-_-_-_-_-_-_-_-__-_-_-_-_-_-_-_-_-_-_-_-__-_-_-_-_-_-_-_-_-_-_-_-_

DERS 30

2008 YILINA NE KADAR KALDI?

Aşağıdaki Javascript'i sayfanıza girdiğinizde, akıllı kodlar 2007 yılına kaç gün kaldığını sayfaya yazacaktır. Çok basit olan kod ayrıca 2007 yılına bir gün kaldığında ve 2007 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.

Kod:
<SCRIPT LANGUAGE="JavaScript">  </SCRIPT>

_-_-_-_-_-_-_-_-_-_-_-_-__-_-_-_-_-_-_-_-_-_-_-_-__-_-_-_-_-_-_-_-_-_-_-_-_

Ders 31

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.

Kod:
<SCRIPT language="JavaScript"></SCRIPT> <BODY OnLoad="flash();">

_-_-_-_-_-_-_-_-_-_-_-_-__-_-_-_-_-_-_-_-_-_-_-_-__-_-_-_-_-_-_-_-_-_-_-_-_

Ders 32

İŞ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.

Kod:
<HTML> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <BODY BGCOLOR="#FFFFFF"> İşletim sisteminiz: <b> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT>

_-_-_-_-_-_-_-_-_-_-_-_-__-_-_-_-_-_-_-_-_-_-_-_-__-_-_-_-_-_-_-_-_-_-_-_-_

Ders 33

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.

Kod:
<HTML> <BODY BGCOLOR="#FFFFFF" onLoad="alert('Sayfama Hoşgeldiniz!');" onUnload="alert('Tekrar Bekleriz...');"> </BODY> </HTML>

_-_-_-_-_-_-_-_-_-_-_-_-__-_-_-_-_-_-_-_-_-_-_-_-__-_-_-_-_-_-_-_-_-_-_-_-_

Ders 34

İ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...

_-_-_-_-_-_-_-_-_-_-_-_-__-_-_-_-_-_-_-_-_-_-_-_-__-_-_-_-_-_-_-_-_-_-_-_-_

Ders 35

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

Kod:
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://forumta.com onMouseover="switchOn('a')" onMouseout="switchOff('a')"> <IMG SRC="resim1-2.gif" border=0 name="a"></a> <p> <a href=http://forumta.com onMouseover="switchOn('b')" onMouseout="switchOff('b')"> <IMG SRC="resim2-2.gif" border=0 name="b"></a> </BODY> </HTML>

_-_-_-_-_-_-_-_-_-_-_-_-__-_-_-_-_-_-_-_-_-_-_-_-__-_-_-_-_-_-_-_-_-_-_-_-_

Ders 36

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:

Kod:
<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 arkaplanı anlattıktan sonra, üst tarafında şerit olan arkaplanı 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 arkaplan döşeme sistemlerinden de yararlanarak uygulayabilirsiniz.

Kod:
<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 arkaplanı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

_-_-_-_-_-_-_-_-_-_-_-_-__-_-_-_-_-_-_-_-_-_-_-_-__-_-_-_-_-_-_-_-_-_-_-_-_

Ders 38

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