30 - Nisan 2005

Web Programc›l›¤›
<<
Kayan yaz›lar
Sitenizin en de¤erli alan› için düflündü¤ünüz içerik fazla m› uzun? Dar alanlara uzun ama önemli
içeriklerinizi kayan yaz›lar olarak s›¤d›r›n ve çarp›c› flekilde sunun.
<style type="text/css">
#konteyner {
position: absolute;
top:10px;
left:200px;
width:250px;
clip:rect(0,250,200,0);
}
#metin {
position: absolute;
top:0px;
left:0px;
width:250px;
color:#1DFF2D;
font-family: Arial;
font-size:12px;
S
itelerin ana sayfalar›nda logoya yak›n olan bölümler genelde }
ziyaretçiler taraf›ndan ilk bak›lan ve görülen alanlard›r. Bu ba- </style>
k›mdan buralardaki her bir piksellik alan siteleriniz için paha <script language="JavaScript">
biçilmez olup iyi de¤erlendirilmesi gerekir. Sitenizin sundu¤u
önemli içerikleri buralara yerlefltirmeyi düflünebilirsiniz, ama bazen var baslangicX=0;
içerikler onlar için ay›rd›¤›n›z alana göre fazla gelebilir. Bu durumda var baslangicY=0;
farkl› içerik bilgileri ayn› alan› zamana ba¤l› olarak paylaflmak duru- var kademe=0;
mundad›rlar. ‹çerikleri üst üste katmanlar halinde zamana ya da et- var saatDurumu=0;
kileflime ba¤l› olarak dizmek ya da bir konteyner içinde kayan flekil-
de sunmak s›kça baflvurulan iki yöntemdir. Bu ay sayfalar›m›zda ka- function git(katman,x,y) {
yan yaz›lar ya da içerikler oluflturmay› görece¤iz.
Kayan yaz›lar› yaparken DHTML metodunu kullanmak di¤er al- if (document.all) {
ternatiflere göre daha kolayd›r. Üstelik haz›r bir script’i kullanma document.all[katman].style.pixelLeft = x;
flans›n›z her zaman vard›r. DHTML script’leri daha çabuk yüklenir, document.all[katman].style.pixelTop = y;
daha güvenilir çal›fl›r ve çal›flabilmek için eklenti (plug-in) dosyalar›- }
na ihtiyaçlar› yoktur. En önemlisi ise güncellenmesi ve dolay›s› ile else if (document.layers) {
sunucu-taraf› uygulamalar› yard›m›yla oluflturulan dinamik içerik document.layers.konteyner.document.
ile beraber kullan›lmalar› çok daha kolayd›r. layers[katman].moveTo(x,y);
Kayan yaz›lar› olufltururken göz önünde bulundurmam›z gere- }
ken iki önemli unsur vard›r: Bunlardan birincisi yaz›lar›m›z›n içinde else {
bulunaca¤› ve sadece s›n›rlar› içinde görünece¤i pencere ki bunu document.getElementById(katman).style.left =
“konteyner ” diye isimlendirebiliriz; ikincisi ise kayan yaz›lar›m›zda- x +"px";
ki metin ya da içeri¤in sonu geldi¤inde kendili¤inden durmas›. Bu document.getElementById
unsurlardan ilki olan konteyner’i kayan yaz›lar›m›z› içerisine alan (katman).style.top = y +"px";
yeni bir katman olarak tan›mlarken, ikinci unsurumuz olan yaz› içe- }
ri¤imizin uzunlu¤unu ölçmek için özel bir fonksiyondan faydalana-
ca¤›z. Önce script’imizi görelim dilerseniz: }
ky.html function kay(hiz){

baslangicY=baslangicY+kademe;
<html> git('metin',baslangicX,baslangicY)
<head> }
<title>Kayanyaz_lar</title>
✂
172• CHIP Workshop >>

>> Web Programc›l›¤›
function basla(hiz){ height="150" border="0" alt=""><br>

<a href="javascript:basla(-3)" onmouseover="basla(-2)"
if (baslangicY>0){ onmouseout="dur()"><img src="images/ok_down_gri.gif"
dur(); alt="" width="13" height="13" border="0"></a><br>
baslangicY=0;// baslangic <img src="images/transparent.gif" width="1"
} height="4" border="0" alt=""><br>
if (baslangicY<-katmanYuksekligi('metin')+180){ <a href="javascript:basaDon()"><img
dur(); src="images/ok_top_gri.gif" alt="" width="13"
baslangicY=-katmanYuksekligi('metin')+180; height="13" border="0"></a><br>
} </div>
else{
kademe=hiz; <div id="konteyner">
saat = setTimeout("basla(kademe)", 20); <div id="metin">
saatDurumu=1; <b>‹stanbul en pahal› kentler
kay(); aras›nda</b>
}
} DÜNYA genelinde sat›n alma gücünün karfl›laflt›rmal› olarak incelendi¤i bir
function dur() { araflt›rmada, ‹sviçre'nin en pahal› ülke oldu¤u ortaya ç›karken, ‹stanbul da
if (saatDurumu==1){ hayat pahal›l›¤›nda Madrid, Los Angeles, Barcelona ve Miami gibi büyük
clearTimeout(saat) kentleri geride b›rakt›.
} <br><br>
} ‹sviçre bankas› Union Banques Suisse (UBS) taraf›ndan, 5 k›taya
da¤›lm›fl 71 kentte yap›lan araflt›rman›n sonucunda haz›rlanan listede, en
function basaDon() { pahal› 10 kent s›ralamas›nda ‹sviçre'den 4 flehir yer ald›. Listede ilk s›ray›
baslangicY=0; Oslo (Norveç) al›rken, Kopenhag (Danimarka) 2'nci, Tokyo (Japonya) 3'üncü
git('metin',0,0); oldu. Bu kentleri s›ras›yla Zürih (‹sviçre), Londra (‹ngiltere), Stockholm
} (‹sveç), Basel (‹sviçre), Paris (Fransa), Cenevre (‹sviçre) ve Lugano (‹sviçre)
izledi. <br><br>
var yukseklik; Ev kiras› hariç, 115 de¤iflik mal ve hizmet bedelinden oluflan temel
function katmanYuksekligi(katman){ yaflam giderleri göz önüne al›narak haz›rlanan bu listede ‹stanbul 71 ülke
aras›nda 28'inci s›rada yer ald›. Ayn› listede Madrid 29'uncu, Los Angeles
if (document.all) { 30'uncu, Barcelona 35'inci, Miami 37'nci, Moskova ise 42'nci s›ralara
yukseklik=document.all[katman].offsetHeight; yerleflerek ‹stanbul'un gerisinde kald›. <br><br>
} ‹STANBUL'DA 1 K‹LO P‹R‹NÇ ‹Ç‹N 32 DAK‹KA ‹fi Araflt›rman›n ilginç
else if (document.layers) { bulgular›ndan biri de 71 kentte belirli g›da ürünleri için kaç dakika
yukseklik=document.layers.konteyner. çal›fl›lmas› gerekti¤ini gösteren s›ralamayd›. 13 meslek dal› temel al›narak
layers[katman].document.height; yap›lan hesaplamaya göre dünya genelinde art›k insanlar pirinç ve ekmek
} gibi temel g›dalar için, 2003 y›l›na oranla 1-2 dakika daha az çal›flmak
else if (document.getElementById) { zorunda. Yeni araflt›rmada, dünya genelinde 1 kilogram ekmek sat›n
yukseklik=document.getElementById(katman).offsetHeight; alabilmek için 24 dakika çal›fl›lmas› gerekti¤i anlafl›ld›. ‹stanbul halk›n›n ise
} 1 kilogram ekmek için 18, 1 kilogram pirinç içinse 32 dakika çal›flmas›
return yukseklik; gerekiyor. S›ralamaya göre, bu ürünleri sat›n almak için en az Lugonalular
} ( 1 kg ekmek için 7, pirinç için 5 dakika) çal›fl›yor. <br><br>
</script> En yüksek brüt maafl ödenen ülke ve flehirler s›ralamas›nda ‹sviçre ile
<meta http-equiv="Content-Type" ‹skandinav ülkeleri ilk s›raya yerleflti. Kopenhag bu listede birinci olurken,
content="text/html; charset=windows-1254"> Zürih ve Basel de onu takip etti. ‹stanbul ise ayn› listede 37'nci s›rada
<meta http-equiv="Content-Type" content="text/html; kendisine yer buldu. `Fiyatlar ve Kazançlar' bafll›¤› alt›nda sunulan ve 2003
charset=ISO-8859-9"> y›l› verilerinin güncellefltirilmifl hali niteli¤inde olan anketin sonuçlar›na
</head> göre, en yüksek sat›n alma gücü de s›ras›yla Zürih, Basel ve Lüksemburg'da
bulunuyor. ‹stanbul ise bu listede 45'inci s›raya oturdu. <br><br>
<body bgcolor="Black">
<div align="center">__</div>
<div style="position:absolute; top:20; left:480; width:0; </div>
height:0; visibility:visible; z-index:0;"> </div>
<a href="javascript:basla(3)" onmouseover="basla(2)"
onmouseout="dur()"><img src="images/ok_up_gri.gif" alt="" </body>
width="13" height="13" border="0"></a><br>
<img src="images/transparent.gif" width="1" </html>
<< CHIP Workshop • 173

<<
olmas› san›r›m sizler için de mant›kl› olsa gerek.
function git(katman,x,y) {
if (document.all) {
document.all[katman].style.pixelLeft = x;
document.all[katman].style.pixelTop = y;
}
else if (document.layers) {
document.layers.konteyner.document.
layers[katman].moveTo(x,y);
}
else {
document.getElementById(katman).style.
left = x +"px";
document.getElementById
(katman).style.top = y +"px";
Önce konteyner meselesinden bafllayal›m. Konteyner kullanma- }
m›z›n sebebi, script’imize estetik katmak amac›yla kayacak olan ya-
z›m›z›n sadece bu konteyner penceresi içerisinde görünmesini sa¤- }
lamak. Konteyneri oluflturan nesnemiz ise kayan yaz›m›z›n üzerinde
bulundu¤u katman› içine alan yeni bir katman. Yani konteyner diye Git fonksiyonumuz sayfa içinde bir elementin yer de¤ifltirmesini
ifade etti¤imiz fley asl›nda bir katman (kodumuzda da ismi kontey- sa¤lamakta kulland›¤›m›z global bir fonksiyon olup farkl› taray›c›
ner olarak geçmekte) ve kayan yaz›m›z›n üzerinde bulundu¤u metin modellerinde çal›flabilecek flekilde haz›rlanm›flt›r. Bunu farkl› DOM
katman›m›z bu konteyner katman›m›z›n içerisinde yer almakta. Ya- yap›lar›n› kullanan flart ifadelerinde görebilirsiniz. ‹lk DOM yap›s› In-
z›m›z›n sayfam›zda görünece¤i koordinatlar› ve içinde görünece¤i ternet Explorer için iken ikincisi Netscape 4 taray›c›lar için. Sonuncu
penceremizin boyutlar›n› sayfam›z›n en bafl›nda konteyner katma- yap›n›n getElementById() özelli¤inden W3C DOM yap›s›n› kulland›-
n›n›n stil tan›m›nda belirliyoruz. ¤›n› tahmin edebilirsiniz. Bu da script’imizin tüm modern ve stan-
dart taray›c›larda sorunsuz çal›flmas›n› sa¤l›yor. Fonkisyonumuzda
#konteyner { katman parametresi yer de¤iflecek elementin referans ad›n›, x para-
position: absolute; metresi yatay olarak yer de¤ifltirme miktar›n›, y parametresi de di-
top:10px; key olarak yer de¤ifltirme miktar›n› belirlememize yar›yor.
left:200px; Script’imizde önemli unsurlardan birinin kayan yaz›n›n sonuna
width:250px; geldi¤inde kayma iflleminin kendili¤inden sona ermesi olay› oldu-
clip:rect(0,250,200,0); ¤unu belirtmifltik. Bunu yapabilmemiz için kayacak olan metnin ek-
} randaki uzunlu¤unu ölçebilmemiz gerekir. Bunu sayfan›z› ekranda
açarak yaz›n›n ekranda kaplad›¤› yerin uzunlu¤unu ölçerek ya da
tahmini bir de¤er vererek yapmay› akl›n›zdan bile geçirmeyin. Çün-
Dilerseniz bu noktada konteyner katman›n›n arka plan rengine kü bu de¤er yaz›n›z›n içeri¤ine, kulland›¤›n›z font büyüklü¤üne ve
bir renk atayarak konteynerin tamam›n›, nerede bafllay›p nerede daha önemlisi ayn› font büyüklüklerinin bile farkl› taray›c›larda
bitti¤ini rahatl›kla gözlemleyebilirsiniz. farkl› gözükmesinden dolay› ziyaretçinizin kulland›¤› taray›c›ya göre
Bundan sonraki ifl ise bu katman›n içerisinde yer alacak olan me- de¤iflkenlik gösterir. Bu durumda script’in çal›flt›r›ld›¤› taray›c›da
tin katman›m›z›n CSS yard›m›yla pozisyonunu tan›mlamak. metnin uzunlu¤unu ölçebilecek sihirli ve bir o kadar da güvenilir bir
fonksiyona ihtiyac›m›z olacak. ‹flte bu da kütüphanemizde de yer
#metin { alan ancak kendini di¤er fonksiyonlardan ay›ran pek de özelli¤i yok
position: absolute; gibi gözüken katmanYuksekligi() fonksiyonumuz.
top:0px;
left:0px; function katmanYuksekligi(katman){
width:250px;
color:#1DFF2D; if (document.all) {
font-family: Arial; yukseklik=document.all[katman].offsetHeight;
font-size:12px; }
} else if (document.layers) {
yukseklik=document.layers.konteyner.layers[katman].
Burada dikkat etmeniz gereken bir nokta metin katman›n›n sol üst document.height;
köflesine verilen (0,0) koordinat›n›n sayfa üzerindeki (0,0) noktas›n› }
de¤il de konteyner katman›n›n içindeki (0,0) noktas›n› ifade ediyor else if (document.getElementById) {
olmas›. Zira metin katman›m›z sayfam›z›n de¤il konteyner katma- yukseklik=document.getElementById(katman).offsetHeight;
n›m›z› içerisinde. Her iki katman›n da geniflliklilerinin ayn› (250px) }
✂

return yukseklik; hb.html

}
Bu fonksiyon yard›m›yla elde etmifl oldu¤umuz yukseklik de¤ifl- <html>

keninin de¤erini (ki bu de¤er ço¤u taray›c› için farkl› ç›kacakt›r. Bunu <head>
deneyebilirsiniz) ayn› zamanda kayd›rma ifllemini tetikleyen basla() <title>Kayanyazilar</title>
fonksiyonumuzda kullan›yoruz. <style type="text/css">
#konteyner {
function basla(hiz){ position: absolute;
top:10px;
if (baslangicY>0){ left:200px;
dur(); width:250px;
baslangicY=0;// baslangic clip:rect(0,250,200,0);
} }
if (baslangicY<-katmanYuksekligi('metin')+180){ #metin {
dur(); position: absolute;
baslangicY=-katmanYuksekligi('metin')+180; top:0px;
} left:0px;
else{ width:250px;
kademe=hiz; color:#1DFF2D;
saat = setTimeout("basla(kademe)", 20); font-family: Arial;
saatDurumu=1; font-size:12px;
kay(); }
} a{
} color:#1DFF2D;
font-family:Verdana, Arial;
Kayd›rma iflleminin bafllamas› için basla() fonksiyonunu uygun text-decoration:none;
h›z› belirten bir parametre ile ça¤›rman›z yeterli olacakt›r. Mesela }
basla(2) ya da basla(-3) gibi. hiz parametresinin eksi (–) de¤erleri a:hover {
kayma iflleminin yukar›ya do¤ru gerçekleflmesini sa¤layacakt›r. Size color:#1DFF2D;
bir ipucu daha: Sayfan›zda yer alan ve üzerine fare ile gelince kayma font-family:Verdana, Arial;
ifllemini bafllatan linklerin üzerini t›klarsan›z kayma iflleminin daha text-decoration:underline;
h›zl› gerçekleflti¤ini gözlemlersiniz. }
</style>
<a href="javascript:basla(-3)" onmouseover="basla(-2)" <script language="JavaScript">
onmouseout="dur()"> . . . </a>
var baslangicX=0;
Baz› durumlarda metnimizin çok uzun olabilece¤ini göz önünde var baslangicY=0;
bulundurarak, ziyaretçilerimizin tekrardan sayfa bafl›na dönebilme- var kademe=0;
lerini sa¤layabilece¤i ek bir iflleve de yer verdim. var periyot=600;//tekrarlar icin
function basaDon() { function git(katman,x,y) {

baslangicY=0;
git('metin',0,0); if (document.all) {
} document.all[katman].style.pixelLeft = x;
document.all[katman].style.pixelTop = y;
basaDon() fonksiyonu ça¤›r›ld›¤›nda metninizin tekrardan bafllang›ç }
pozisyonuna geldi¤ini göreceksiniz. else if (document.layers) {
document.layers.konteyner.document.
Sayfalar›n›zda kayan haber bafll›klar› layers[katman].moveTo(x,y);
Yukar›daki script’imizde çok az de¤ifliklik yaparak çok daha farkl› ifl- }
leve sahip olacak ve sitelerinizde kullanabilece¤iniz harika bir baflka else {
script’e sahip olmaya ne dersiniz? document.getElementById(katman).style.
Bu script sayesinde sitenizde güncel haber bafll›klar›n› oldukça left = x +"px";
çarp›c› bir biçimde ziyaretçilerinizin ilgisine sunabileceksiniz. Ziya- document.getElementById
retçinizin ilgili haberi okuyabilmesi için haber linkinin üzerine gelip (katman).style.top = y +"px";
t›klamas› yetecektir. ‹flte haberler scripti! }

<<
} "dur()" onmouseout="basla(-1)">
Ankara ile AB aras›nda yeni anlaflma</a><br>
function kay(hiz){ <a href="haberlinki.html"
baslangicY=baslangicY+kademe; onmouseover="dur()" onmouseout="basla(-1)">
git('metin',baslangicX,baslangicY) Yeni ö¤renci aff›na veto</a><br>
} <a href="haberlinki.html"
onmouseover="dur()" onmouseout="basla(-1)">
function basla(hiz){ Türkiye kupas› finali bu akflam</a><br>
kademe=hiz; <a href="haberlinki.html"
saat = setTimeout("basla(kademe)", 40); onmouseover="dur()" onmouseout="basla(-1)">
kay(); 2005'in en yeni otomobilleri</a><br>
if(baslangicY<-periyot){ <a href="haberlinki.html"
basaDon(); onmouseover="dur()" onmouseout="basla(-1)">Irak'ta fliddet</a><br>
} onmouseover="dur()" onmouseout="basla(-1)">Bush Paris'te</a><br>
<a href="haberlinki.html"
function basaDon() { onmouseover="dur()" onmouseout="basla(-1)">Dolar: 1,44 YTL</a><br>
baslangicY=0; <a href="haberlinki.html"
git('metin',0,0); onmouseover="dur()" onmouseout="basla(-1)">Euro: 1,76 YTL</a><br>
function dur(){ onmouseover="dur()" onmouseout="basla(-1)">Alt›n: 17,86 YTL</a><br>
clearTimeout(saat); <a href="haberlinki.html"
} onmouseover="dur()" onmouseout="basla(-1)">
</script> Ankara ile AB aras›nda yeni anlaflma</a><br>
<meta http-equiv="Content-Type" content="text/html; <a href="haberlinki.html"
charset=windows-1254"> onmouseover="dur()" onmouseout="basla(-1)">
<meta http-equiv="Content-Type" content="text/html; Yeni ö¤renci aff›na veto</a><br>
charset=ISO-8859-9"> <a href="haberlinki.html"
</head> onmouseover="dur()" onmouseout="basla(-1)">
Türkiye kupas› finali bu akflam</a><br>
<body bgcolor="#000000" onload="basla(-1)"> <a href="haberlinki.html"
<div id="konteyner"> 2005'in en yeni otomobilleri</a><br>
<div id="metin"> <a href="haberlinki.html"
<br><br><br><br><br><br><br><br><br><br><br><br><br><br> onmouseover="dur()" onmouseout="basla(-1)">Irak'ta fliddet</a><br>
<a href="haberlinki.html" <a href="haberlinki.html"
onmouseover="dur()" onmouseout="basla(-1)"> onmouseover="dur()" onmouseout="basla(-1)">Bush Paris'te</a><br>
Ankara ile AB aras›nda yeni anlaflma</a><br> <a href="haberlinki.html"
<a href="haberlinki.html" onmouseover="dur()" onmouseout="basla(-1)">Dolar: 1,44 YTL</a><br>
onmouseover="dur()" onmouseout="basla(-1)"> <a href="haberlinki.html"
Yeni ö¤renci aff›na veto</a><br> onmouseover="dur()" onmouseout="basla(-1)">Euro: 1,76 YTL</a><br>
<a href="haberlinki.html" <a href="haberlinki.html"
onmouseover="dur()" onmouseout="basla(-1)"> onmouseover="dur()" onmouseout="basla(-1)">Alt›n: 17,86 YTL</a><br>
Türkiye kupas› finali bu akflam</a><br>
<a href="haberlinki.html" <br><br><br><br><br>
onmouseover="dur()" onmouseout="basla(-1)"> </div>
2005'in en yeni otomobilleri</a><br> </div>
onmouseover="dur()" onmouseout="basla(-1)">Irak'ta fliddet</a><br> </body>
onmouseover="dur()" onmouseout="basla(-1)">Bush Paris'te</a><br> </html>
onmouseover="dur()" onmouseout="basla(-1)">Dolar: 1,44 YTL</a><br> Tamamen fakl› görünmesine karfl›n kodlar›na bakt›¤›m›z zaman
<a href="haberlinki.html" bu script’imizin bir öncekinden fark›n›n çok az oldu¤unu görürüz.
onmouseover="dur()" onmouseout="basla(-1)">Euro: 1,76 YTL</a><br> Haberler script’inin farklar›na bir göz atarsak:
<a href="haberlinki.html" Birincisi, script’imiz bu sefer kendili¤inden kaymaya bafll›yor. Bunu
Alt›n: 17,86 YTL</a><br><a href="haberlinki.html" onmouseover= <body bgcolor="#000000" onload="basla(-1)">
180 • CHIP Workshop >>

Web sitenizin bir köflesine yerlefltirebilece¤iniz bir script. Güncel Bu harika etkiyi nas›l elde etti¤imi sorarsan›z sayfan›z›n arka plan
haber bafll›klar›n›z› ziyaretçilerinize dikkat çekici bir flekilde sunun. rengini beyaz hale getirmek sorular›n›za en iyi cevap olacakt›r.
sat›r› sa¤l›yor. ‹kincisi ziyaretçinin bir haber ilgisini çekince ilk akl›-
na gelen bir haber bafll›¤›n› t›klamak olaca¤›ndan herhangi bir ha-
ber bafll›¤› üzerine gelinince kayma iflleminin durmas› gerekir ki zi-
yaretçi rahatça diledi¤i linke basabilsin. Bunu ise
<a href="haberlinki.html" onmouseover="dur()" onmouseout="

basla(-1)">Ankara ile AB aras›nda yeni anlaflma</a><br>
kodundaki eventhandler’lar sa¤l›yor. Ziyaretçi linkten ayr›ld›¤› an-

da kayma ifllemi kald›¤› yerden devam edecektir. Bir di¤er de¤ifliklik
ise haber bafll›klar›m›z pencereden geçerek bir tur yapt›ktan sonra
tekrardan alttan gözükmeye bafllayacaklard›r. Yani sayfa aç›k kald›-
¤› sürece haber bafll›klar›n›n durmadan turlamalar› gerekmektedir.
Bunu ise
function basla(hiz){
kademe=hiz;
saat = setTimeout("basla(kademe)", 40); <div style="position:absolute; top:0; left:190; width:0; height:0;
kay(); visibility:visible; z-index:0;">
if(baslangicY<-periyot){ <img src="images/cinemadown.gif"
basaDon(); alt="" width="351" height="48" border="0"><br>
} <img src="images/transparent.gif" width="1"
} height="120" border="0" alt=""><br>
<img src="images/cinema.gif" alt=
sat›rlar›yla haber bafll›klar›m›z turunu tamamlad›ktan sonra kayan "" width="351" height="48" border="0"><br>
katman›m›z›n pozisyonunu tekrardan afla¤›dan gelecek flekilde </div>
ayarlamakla yap›yoruz. Burada kullan›lan periyot de¤iflkeninin 300
olan de¤erinde kullanaca¤›n›z haber bafll›klar›n›n say›s› ve font bü-
yüklü¤üne göre ayarlama yapman›z gerekebilir. NOT:
Önümüzdeki say›larda ayn› alana farkl› içerikleri yükleyip kayd›rabil-
Script’inize görsel yönden zenginlik kat›n meyi ve alan›m›z›n yan›na özgün kayd›rma çubuklar› koymay› göre-
Bu atölyede amaç size sitelerinizi zenginlefltirmek için ihtiyac›n›z ce¤iz.
olan teknik yetene¤i kazand›rmak. Bu yetenekleri ilginç görsel özel- Bu ayki atölyemizde yer alan örneklerin kaynak kodlar›n› CD’deki
liklerle süsleyip, daha da etkileyici sonuçlar elde edebilirsiniz. Ben StudioWeb+ bölümünde bulabilirsiniz. Önümüzdeki ay tekrar gö-
buna örnek olarak haberler script’imize basit iki fleffaf GIF resmi ek- rüflmek dile¤iyle.
ledim. Script’i deneyin ve sonucuna siz karar verin. Yapt›¤›m tek fley
script’in sonuna afla¤›daki blo¤u eklemek. Numan Pekgöz, numanpekgoz@chip.com.tr

Java Serisi
<<
Java ile Programlama Bölüm 8

Geçen ders ayr›nt›l› biçimde ele almaya bafllad›¤›m›z “Dosyalar”konusuna bu ay devam ediyor ve
stream ile okuyup yazmay› görüyoruz.
erhabalar. Geçen dersimizde ha- Programc›l›k aç›s›ndan dosya ifllemlerini okunma ve yaz›lma aflamas›nda stream
M t›rlarsan›z dosyalar konusuna k›sa

bir girifl yapm›flt›k. Bu dersimizde
konuyu daha detayl› ele alaca¤›z.
anlaman›n en iyi yolu Stream kavram›n› bil-
mekle bafllar. Stream denilen nesne, asl›n-
da bir fleyin okunmas› ya da yaz›lmas› için
üzerinde ortak bir bilgi ak›fl› sa¤lanacakt›r.
Bu ifadeyi kulland›¤›m›z örneklerle daha iyi
pekifltirece¤imizi düflünüyorum.
Geçen derste detayl› olarak aç›klad›¤›- bir soyutlamad›r. Bu soyutlama gereklidir Stream kullan›m› ile bilgi ne olursa ol-
m›z ilk örne¤imiz afla¤›da yer alan “Dosya- çünkü okunacak ya da yaz›lacak bilginin ti- sun okuma ya da yazma flekli hep ayn›d›r:
lar.java” örne¤iydi. pi her zaman de¤iflebilir. Yani okunan ya da
Bu örnekte yol (path) bilgisi kullan›c›dan yaz›lan bilgi bir uygulamada manyetik kart- stream aç
al›nan bir dosyan›n baz› bilgileri inceleni- tan yap›labilece¤i gibi baflka bir uygulama- daha fazla bilgi oldukça
bilgi oku (yaz)
yordu. Bunun için de tabi ki ele al›nan bu da da diskten yap›labilir.
stream kapat
yol bilgisi “File” isimli s›n›f yard›m›yla dosya Burada Stream asl›nda kelime anlam›
nesnesine dönüfltürülüyor ve bu nesnenin olarak ak›fl anlam›na gelir ve programc›l›k
metotlar› yard›m›yla bilgiler elde edilebili- anlam›nda “bilgi ak›fl›n›” ifade eder. Bu Standart girifl ve ç›k›fl
yordu. yaklafl›ma göre okunacak bilgi stream’den Java'da yukar›da bahsetti¤imiz bu stream
okunur ve yaz›lacak bilgi de stream’e yaz›- kavram› ile standart girifl ve standart ç›k›fla
Stream kavram›: l›r. Böylece bilginin tipi ne olursa olsun yazma ve okuma yapmak mümkün olacak-
t›r. Asl›nda standart girifl-ç›k›fl› komut sat›r›
ortam› olarak düflünebilirsiniz.
Fazla detaya inmeden söylemek gerekir-
se standart ç›k›fla yazma yapma ifllemi as-
l›nda daha önceden bildi¤imiz
Sytem.out.print(“yazi”) metodu ile yap›l-
maktad›r. Arka planda asl›nda “System”
isimli s›n›f›n içerisinde tan›ml› “PrintStre-
am” türünden yarat›lm›fl ve ad› “out” olan
static bir de¤iflkeni kullanmaktay›z.
Ayn› flekilde standart giriflten program
içerisine okuma yapmak da mümkündür.
Afla¤›daki örne¤i inceleyelim:
Örne¤imizde 7. sat›rda BufferedReader
Dosyalar2 nesnesi yarat›lm›flt›r. Bu nesnenin bafllan-

✂
>> Java Serisi
Dosyalar2_2
g›ç fonksiyonuna parametre olarak bir “In- s›na uygun yazma ifllemi yap›labilmesi için
putStream” nesnesi hemen orada yarat›l- “PrintWriter” stream nesnesi yarat›lmakta- Dosyalar3_2
makta ve gönderilmektedir. “InputStream” d›r. Bu nesne de yarat›l›rken bafllang›ç fonk-
nesnesi okuma yapmak amac›yla kullan›l›r. siyonunda bir “BufferedWriter” nesnesi türlerini de belirtmek zorunday›z. Daha
Bu nesnenin de bafllang›ç fonksiyonuna, al›r. Bu nesne de yazma ak›fl›n› bir dosyaya sonra da bu de¤iflkenlere verilen de¤erleri
okuman›n yap›laca¤› yer olan standart girifl yönlendirebilmek için bafllang›ç fonksiyo- de ayn› türden vermek zorunday›z.
parametre olarak verildi¤inden bu stream nunda “FileWriter” nesnesi almaktad›r. 12. ‹flte veri dosyalar›nda saklanan bilgiler
standart girifle yönlendirilmifl, yani stan- sat›rda yaz›lm›fl olan bu komut özet olarak de bu flekilde tür bilgisi ile birlikte saklan-
dart giriflten okuma yapacak flekilde haz›r- bir dosya içerisine yazabilecek bir stream maktad›r. Yani metin dosyalar›nda oldu¤u
lanm›flt›r. yaratm›fl olur. 13. ve 14. sat›rlarda bu ak›fl›n gibi verilerin tamam› string fleklinde sak-
Program çal›flt›r›l›rken afla¤›daki resim- “print” isimli metodu yard›m›yla dosyaya lanmaz. Bu nedenle de veri dosyalar›n› bir
de görüldü¤ü gibi komut sat›r› ortam›nda yazma ifllemi gerçekleflir. Yaz›lan dosya ise metin editörü ile aç›p okumaya kalkt›¤›n›z-
bizden bir fleyler girmemizi isteyecek ve bu “FileWriter” nesnesi yarat›l›rken verilmifl da bilgilerin anlafl›l›r olmad›¤›n› görürüz.
bilgileri daha sonra ekrana yazacakt›r. Bilgi- olan “CikisDosyasi.txt” isimli dosyad›r. Bu Afla¤›daki örnekte bir veri dosyas›na birta-
nin standart giriflten al›nmas›n› sa¤layan dosya o anda çal›flmakta oldu¤unuz dizin k›m bilgiler yaz›lmakta ve daha sonra da
komut da 14. sat›rda görülmektedir. Asl›n- içerisinde yarat›lm›flt›r. ayn› dosyadan bu bilgiler okunmaktad›r.
da bu komut soyutlanm›fl “BufferedRe- 18. sat›rda ise bu sefer dosyadan okuma Afla¤›dakidaki örne¤imizde bu sefer veri
ader” nesnesinin “readLine” metodudur ve yapabilecek bir stream yarat›lmaktad›r. Bu yazma ifllemi yapmaktay›z. Bu nedenle
bu nesne yukar›da da anlatm›fl oldu¤um gi- sak›fl›n “readLine” metodu, ak›fl›n yönlen- stream nesnemizi 9. sat›rda oldu¤u gibi ve-
bi standart girifle yönlendirilmifltir. dirildi¤i yerden (bu örnek için, dosyadan) ri yazabilecek ve 16. sat›rda oldu¤u gibi veri
okuma yapar ve e¤er okunacak bilgi kal- okuyabilecek flekilde haz›rlamaktay›z. 12.
Program standart girifli okumaktad›r. mazsa “null” de¤erini geri döndürür. Bu ne- ve 13. sat›rlarda s›rayla yaz›lan double ve
Metin dosyalar›n›n okunmas› ve yaz›lmas›: denle 19. sat›rdaki while döngüsü sayesin- int veriler okunurken de yaz›ld›klar› s›ra ile
Yukar›da bahsetti¤imiz stream kavram› sa- de stream içerisindeki tüm bilgiler okunur okunurlar. Veri yazma ifllemini program
yesinde standart giriflten yap›lan okuma ve “result” isimli string de¤iflkenin içerisine içerisindeki bir de¤iflkenin haf›zada de¤il de
ayn› flekilde bir metin (text) dosyas›na yön- at›l›r. Daha sonra afla¤›daki resimde görül- dosyada saklanmas› gibi düflünebiliriz.
lendirilirse, o zaman dosyadan okuma yap- dü¤ü gibi bu bilgiler mesaj panosuna at›l›r Çünkü bazen verileri bu flekilde tür bilgile-
mak da mümkün olacakt›r. Ayn› flekilde ve kullan›c›ya gönderilir. riyle saklamak ve daha sonra da ele almak
standart ç›k›fla gönderilen bir bilgi metin gerekmektedir. Bu ifllemi bir metin dosya-
dosyas›na yönlendirilmifl bir stream’e gön- Dosyadan okunan bilgiler s›yla yapmaya kalkarsak verilerin sadece
derilirse o zaman da metin dosyas›na yaz- ekrana gönderiliyor. görüntülerini saklam›fl oluruz. Bu durumda
ma ifllemi yapm›fl oluruz. ‹flte burada da Veri dosyalar›n›m okunmas› ve yaz›lmas›: verilerin daha sonra tekrar okunmas› s›ra-
stream soyutlamas›n›n kolayl›¤›n› görmek- Veri dosyalar› önceki örnekte kullanm›fl ol- s›nda tür bilgileri kaybolaca¤›ndan örne¤i-
teyiz. Afla¤›daki örnekte, bahsetti¤imiz bu du¤umuz metin dosyalar›ndan biraz daha mizdeki 19. ve 20. sat›rdakilere benzer ata-
dosyadan okuma ifllemini görmekteyiz. farkl›d›r. Bildi¤imiz gibi program yazarken malar mümkün olmayacakt›r.
Bu örne¤imizde de ilk önce metin dosya- de¤iflkenlerin yarat›lmas› s›ras›nda onlar›n Ayr›ca dikkat edersek bu örne¤imizde
“try” ve “catch” bloklar›n› kullanmak yerine
üretilecek “Exception” bilgisini daha farkl›
ele ald›k. E¤er bir metodun içerisinde “Ex-
ception” üretilme ihtimali varsa örne¤imiz-
de oldu¤u gibi metodun prototipine
“throws” anahtar sözcü¤ünden sonra üre-
tilecek Exception yaz›l›rsa, metot içerisinde
bu Exception'› üretebilecek sat›rlar› “try”
bloklar›nda ele almaya gerek kalmaz. Buna
iliflkin detayl› bilgileri bir önceki dersimizde
bulabilirsiniz.
Dersimizin buraya kadar olan k›sm›nda
stream yaratarak dosyalara yazma ve oku-
ma ifllemlerini gördük. Ancak bu yazma-
okuma ifllemlerini hep s›rayla yapt›k. Yani
Dosyalar3 bir veriyi okumadan, ondan daha sonra ge-

Java Serisi
<<
Dosyalar4
len veriyi okumak mümkün de¤ildi. Yine ay- bilir: kullan›c›n›n istedi¤i pozisyondan 1 ç›karta-
n› flekilde ilk veriyi yazmadan ikinci veriyi r: Dosya sadece okuma için aç›l›r. Her- rak seek() metoduna gönderiyoruz. Böylece
yazmak yukar›da gösterdi¤imiz stream’ler hangi bir yazma ifllemi kullan›c› gerçekten istedi¤i say›y› elde ede-
ile olanaks›zd›. Böyle bir ifllem yapmak için yap›l›rsa IOException üretilir. biliyor.
daha farkl› bir stream kullanmam›z gerek- rw: Dosya yazma-okuma için aç›l›r. E¤er
mektedir. Dosyalara bu flekilde eriflim iste- dosya hali haz›rda mevcut de¤ilse yeni bir File S›n›f›n›n ‹ncelenmesi:
¤ine teknik olarak “rastgele eriflim” denilir. tane yarat›l›r. Java'da dosya ifllemlerini ele alabilece¤imiz
fiimdi bunu inceleyelim. Afla¤›daki örnekte bir dosya içerisine ve- “File” isimli bir s›n›f nesnesi daha vard›r. Bu
riler yaz›ld›ktan sonra rastgele eriflilerek nesne yard›m›yla asl›nda yine bir soyutla-
Dosyalara rastgele eriflim ifllemi okunmaktad›r. Burada okuma ifllemi s›rayla ma yap›lmakta ve böylece disk üzerindeki
Bir dosyaya rastgele eriflim yap›labilmesi yap›lmamaktad›r. dosya ya da dizinler platform ba¤›ms›z ola-
için öncelikle “RandomAccessFile” s›n›f› tü- Örne¤imizde 8. sat›rda okuma-yazma rak kullan›labilmektedir.
ründen bir de¤iflken yaratmak gerekir. Bu modunda aç›lan dosyam›za baz› double de- Önceki örneklerimizde dosyalar› hep bi-
de¤iflken yarat›l›rken 1. parametre olarak ¤erler ekliyoruz. Bu ekleme ifllemini bir rer String ile ifade etmifltik. Burada bir dos-
eriflimin yap›laca¤› dosya ve ikinci paramet- döngü ile yap›yoruz. Kullan›c› 13. sat›rdaki yan›n “File” nesnesi haline getirildikten
re olarak da eriflim hangi modda yap›laca¤› sorgu gere¤i “-1” girmedi¤i sürece girilen sonra da baz› metotlar yard›m›yla nas›l kul-
bilgisi verilmelidir. bilgiler önce double türüne dönüfltürülüyor lan›labilece¤ine dair bir örnek yapaca¤›z.
Örne¤in “CikisDosyasi.dat” dosyam›za ve daha sonra da dosyaya yaz›l›yor. Bu dö- Örne¤imizi incelemeden önce bir File nes-
okunabilir ve yaz›labilir modda eriflmek isti- nüfltürmenin nedeninin, girilen bilginin nesine ait baz› metotlar› inceleyelim:
yorsak nesneyi flu flekilde yaratmam›z gere- hep string olmas›ndan dolay› oldu¤unu ön- boolean canRead(): Nesnenin ifade etti¤i
kir: ceden hat›rlay›n›z. dosyan›n okunabilirli¤ini kontrol eder.
RandomAccessFile myFile = new Daha sonra 21. sat›rda kullan›lan “se- boolean canWrite(): Nesnenin ifade etti¤i
RandomAccessFile(“CikisDosyasi.dat”, ek()” metodu sayesinde dosya içerisinde dosyan›n yaz›labilirli¤ini kontrol eder.
"rw"); rastgele bir pozisyona gidiyoruz. Bu pozis- boolean createNewFile(): Nesneye verilen
Dosyaya rasgele eriflim için kullan›labi- yon, seek metoduna as›l pozisyon * 8 olarak path içerisinde bofl bir dosya yarat›r. Ancak
lecek en genel modlar flu flekilde özetlene- gönderiliyor. ‹lk pozisyon “0” oldu¤u için bu dosyan›n mevcut dizin içerisinde önce-

>> Java Serisi
Dosyalar5
den yarat›lmam›fl olmas› gerekir. Tabi ki asl›nda “File” nesnesi yukar›da rilen dizin içerisindeki dosyalar String dizisi
boolean delete(): Nesnenin iflaret etti¤i özetlenenden daha fazla haz›r metoda sa- halinde elde edilir.
path içerisindeki dosyay› siler. hiptir. Ancak burada genel bilgi vermek Bu noktaya kadar dosya ifllemlerini içe-
boolean exists(): Verilen path içerisinde yer amac›yla bu kadar›ndan bahsetmeyi yeterli ren bafll›klar›n ço¤unu basit ve anlafl›l›r ör-
alan dosya ya da dizinin var olup olmad›¤›- görüyorum. Daha önce de söyledi¤im gibi neklerle incelemifl olduk. Bunu ötesinde da-
na bakar. herhangi bir java s›n›f›n›n içerdi¤i de¤iflken ha büyük uygulamalarda bu küçük parçalar
String getAbsolutePath(): Nesnenin ifade ya da metotlar› bulabilece¤iniz doküman- kullan›larak konu daha iyi pekifltirilecektir.
etti¤i dosya ya da dizinin tam yol bilgisini tasyon sayfas›na (1.4.2 için) Dersimizin bundan sonraki k›sm›nda Ja-
string olarak verir. http://java.sun.com/j2se/1.4.2/docs/a va programlama dilinin en güçlü yanlar›n-
String [] list(): Nesnenin iflaret etti¤i dizin pi/index.html adresinden eriflebilirsiniz. dan birisi olan grafik arayüz gelifltirmeyi
içerisindeki dosya ya da dizinlerin bir liste- fiimdi File s›n›f›n› kullanarak yazaca¤›m›z ö¤renece¤iz. Bugün sadece kavramsal ola-
sini verir. Bu liste de String türünden bir di- bir örnekle konuyu daha iyi pekifltirelim: rak girifl yapmak yeterli olacakt›r.
zi olarak oluflturulur. Örne¤imizde kullan›c›dan 10. sat›rda
boolean mkdir(): Verilen path içerisinde ye- al›nan bir dizin bilgisi “File” nesnesi halinde Java ile grafik arayüz gelifltirme:
ni bir dizin yarat›r. yarat›lmaktad›r. Böylece program içerisin- Grafik arayüz denilen fley asl›nda arka plan-
boolean renameTo(File hedef): Nesnenin de File s›n›f›n›n sunaca¤› haz›r metotlardan da çal›flan programlar›n daha anlafl›l›r ola-
iflaret etti¤i dizin ya da dosyan›n ismini pa- yararlan›labilir. Zaten 11. sat›rda bu metot- bilmesi amac›yla, ön tarafta kullan›c›ya su-
rametre ile verilen yeni isme dönüfltürür. lardan birisi olan list metodu yard›m›yla ve- nulan ortamd›r. Asl›nda bu tür ortamlarla

Java Serisi
<<
Dosyalar6
zaten günlük bilgisayar kullan›m›nda s›kl›k- leflim ortam›n›n sunulmas› gerekir. Bu ne- avantajlar›ndan birisi olarak karfl›m›za ç›k-
la karfl›lafl›rs›n›z. Örne¤in internette gezi- denle, yaz›lan programlar en son aflamada maktad›r. Afla¤›daki örnekte çok basit bir
nebilmek amac›yla kulland›¤›m›z Netscape bir grafik arayüzü ile desteklenir ve böylece JFrame nesnesi ile grafik uygulamalar›na
ya da Mozilla gibi web taray›c›lar birer gra- daha kullan›fll› hale gelir. bafllayabiliriz.
fik arayüzdür. Gerçekte bilgisayar›m›z web Java'da grafik arayüz gelifltirmek önce-
siteleriyle, arka tarafta çeflitli protokoller ve den yaz›lm›fl birtak›m s›n›flar›n kullan›lma- Basit bir Jframe görüntüsü
özel komutlar yard›m›yla iletiflim kurar ve s› ile sa¤lan›r. Bu s›n›flar en genel anlamda Yukar›daki örnekte oldukça basit bir GUI
sayfalar› al›r ya da gönderir. Ancak ön plan- javax.swing ve java.awt paketleri içerisinde uygulamas› görmekteyiz. Daha önce de
da çeflitli metin alanlar›, dü¤meler ve me- toplanm›flt›r. söyledi¤imiz gibi bu uygulama önceden ha-
nüler yard›m›yla bu ifllemleri daha anlafl›l›r Öncelikli olarak bilinmesi gereken birta- z›r olan JFrame s›n›f›n›n türetilmesi ile elde
flekilde yapabiliriz. k›m temel kavramlar incelendikten sonra edilmektedir. fiimdi bu uygulamay› detayl›
Art›k masaüstü kullan›lan iflletim sis- say›s›z grafik arayüz nesnesine iliflkin ör- olarak ele alal›m ve örnek üzerinde temel
temlerinin tamam› grafik arayüzleri ile do- nekler görece¤iz. Bu örneklerin tamam›nda kavramlara de¤inelim.
nat›lm›flt›r. Bir program›n girifl ç›k›fl bilgile- temel kavramlar› kullanaca¤›z. Türetilen s›n›f›m›z›n bafllang›ç fonksiyo-
rine iliflkin teknik detaylar›n kullan›c›dan nu içerisinde kulland›¤›m›z “super” metodu
soyutlanmas› ve ona daha anlafl›l›r bir etki- JFrame kavram›: önceden hat›rlayaca¤›m›z gibi temel s›n›f›n
Gelifltirece¤imiz tüm grafik arayüz uygula- bafllang›ç metodunu ça¤›rmaktad›r. Bu me-
malar› (GUI) asl›nda JFrame s›n›f›ndan türe- tot kendisine gönderilen bir string ifadeyi
tilmifl uygulamalar olacakt›r. JFrame s›n›f› ekranda çal›flan frame’in bafll›¤› haline ge-
asl›nda iflletim sisteminden en temel pen- tirmektedir.
cere fonksiyonlar›n› alacak flekilde olufltu-
rulmufltur. Kulland›¤›n›z iflletim sistemine JFrame Metodlar›:
göre bu fonksiyonlar ve bunlar›n ekrana ge- JFrame nesnesinden türeyen bir s›n›f JFra-
tirilmesi ifllemleri farkl›l›k gösterece¤inden me'e ait olan haz›r metotlar› kullanabilir.
siz sadece JFrame s›n›f›n› türeterek kendini- Yine uygulamam›z›n bafllang›ç metodunda
zi bu farkl›l›ktan soyutlars›n›z. Zaten ilk kulland›¤›m›z “setSize”, “setResizable” ve
derslerimizde de bahsetti¤imiz bu teknik “show” metotlar› bu tür metotlardand›r.
JavaGui_2
nesne yönelimli program gelifltirmenin “setSize” metodu ekrana gelecek olan ara-

>> Java Serisi
JavaGui
yüzün sat›r ve sütün uzunlu¤unu oluflturur. olarak takip edilmesini sa¤lar. Böylece ara- lor isimli metoda gönderilen bir “Color”
Bu bilgiler piksel olarak metoda verilmekte- yüzümüz ekrana geldikten sonra pencere nesnesi ile belirlenir. Hemen o anda yaratt›-
dir. “setResizable” metodu ekrana gelen üzerindeki çarp› iflaretine bas›lmas› prog- ¤›m›z Color nesnesinin bafllang›ç metodun-
arayüzün fare yard›m›yla geniflletilip genifl- ram taraf›ndan yakalanacak ve otomatik da da 3 tane tamsay› girilmektedir. Bu say›-
letilemeyece¤ini belirlemek için kullan›l›r. olarak 13. sat›rdaki “windowClosing” me- lar s›ras›yla k›rm›z› yeflil ve mavi bileflenleri-
Parametre olarak verilen “false” de¤eri ara- todu ça¤r›lacakt›r. Bu metodun içerisine de ni temsil eder. Her bileflen 0-255 aras›nda
yüzün s›n›rlar›n› sabit hale getirmektedir. “System.exit(0)” komutu yazd›¤›m›za göre, bir de¤er al›r ve isted,¤imiz renk bu 3 bile-
En son sat›rda kullan›lan “show” metodu arayüzümüz ekrandayken penceresi üze- flenin kar›fl›m›ndan elde edilir. 27. sat›rdaki
arayüzümüzün çal›flt›ktan sonra ekranda rindeki çarp› tufluna bas›lmas› program›n “drawString” metodu ile uygulamam›z
görünür olmas›n› sa¤lar. sonlanmas› anlam›na gelecektir. Program üzerine istenilen bir yaz›y› yazabiliriz.
32 sat›rda uygulamam›z türünden bir üzerindeki bu tür hareketleri inceleyen nes- drawString metoduna verilen di¤er 2 para-
nesne yaratt›¤›m›zda bafllang›ç fonksiyonu nelere “Listener” denir. Bu kavram daha metre ise bu yaz›n›n hangi piksellerden
otomatik olarak ça¤r›lacak ve gerekli boyut, sonra detayl› olarak ele al›nacakt›r. bafllayarak yaz›laca¤›n› belirler.
listener ve di¤er ayarlar yap›ld›ktan sonra 24. sat›rda tan›t›lm›fl olan paint metodu H›zl› bir flekilde girifl yapt›¤›m›z grafik
show metodu sayesinde çerçevemiz ekran- çerçevemiz oluflturulurken otomatik olarak uygulamas› ile bugünkü dersimizi sonlan-
da görünür halde olacakt›r. ça¤r›lan bir metottur. Bu metot her zaman d›r›yoruz. Bundan sonraki dersimizde bah-
bir “Graphics” nesnesini parametre olarak sedilen bu genel kavramlar› derinlemesine
Listener Kavram›: al›r. Graphics nesnesine ait olan metotlar inceleyecek ve java ile grafik arayüz gelifltir-
11. sat›rda kullan›lan “addWindowListe- sayesinde uygulamam›z üzerine birtak›m me yolunda ilerleyece¤iz. Bir sonraki derste
ner” komutu daha sonra detayl› olarak in- çizimler ve yaz›lar yerlefltirebiliriz. 26. sat›r- görüflene dek esenlikle kal›n›z.
celeyece¤imiz bir komuttur. Ancak genel daki metot sayesinde çizilecek ya da yaz›la-
olarak söylemek gerekirse bu komut uygu- cak bilgilerin hangi renkte olaca¤› belirle- Sevgi ve sayg›lar›mla,
lamam›z›n pencere hareketlerinin sürekli nir. Bu renk belirleme ifllemi asl›nda setCo- Erman Aykaç, ermana@bilgi.edu.tr

Photoshop Serisi
<<
Herkes ‹çin Photoshop
Photoshop’un farkl› alanlardaki kullan›m flekillerini daha iyi anlayabilmek için bu sayfalarda
yer alan Photoshop derslerinde her ay; foto¤raf düzenleme, çizim ve efektler fleklinde 3 ayr›
bölüm alt›nda çeflitli örnekler yer alacak.
Gerçekçi kaya dokusu

‹lk olarak File menüsü alt›ndan New seçene¤i ile is-
tedi¤iniz boyutta beyaz arka planl› yeni bir belge
oluflturun. Ard›ndan Filter menüsü alt›ndan Ren-
der/Clouds seçene¤ini kullan›n. Bu filtreyi kullan›rken
ön ve arka plan renginin siyah ve beyaz olarak ayarl› ol-
du¤undan da emin olun. fiimdi yine Filter menüsü alt›n-
dan bu sefer de Sketch/Bas Relief seçene¤ini Detail: 15,
Smoothness: 1, Light: Bottom Right ayarlar›n› kullana-
rak uygulay›n.
Yavafl yavafl ortaya ç›kan tafl dokumuzu renklen-

dirmek için CTRL-U klavye k›sayolunu kullanarak
ulaflabilece¤iniz Hue/Saturation arac›n› kullanabilirsi-
niz. Biz burada örnek olarak Colorize: iflaretli, Hue: 25,
Saturation: 25, Lightness: 0 de¤erlerini kulland›k. Tafl
dokumuza son fleklini vermek için ise yeni bir katman
daha oluflturup Filter/Render/Clouds bir kez daha uygu-
lad›ktan sonra blending modunu Overlay olarak de¤ifl-
tirmek yeterli.
Günbatımı manzarası
Adobe Photoshop CS’nin yeni özellikleri ile bunu

gerçeklefltirebilmek oldukça kolay. Önce istedi¤iniz
bir manzara foto¤raf›n› aç›n. Ard›ndan Ctrl-J k›sayollar›
ile 3 kere ço¤alt›n. Ortadaki katman› seçin ve Image/Ad-
justment/Photo Filter seçene¤ini Warming Filter:85 ve
Density: 100% ayarlar› ile uygulay›n. Yine bu katmanda
iken Image/Adjustment/Brightness/Contrast seçene¤ini
Brightness: -25 ve Contrast: 50 ayarlar› ile uygulay›n.
En üstteki iki katman› gizleyin. En alttaki katman›

seçin ve Image/Adjustment/Match Color seçene¤ini
uygulay›n. Luminance ve Color Intensitiy de¤erini 100 se-
çin. Source: dosya ismi, Layer: Layer 1 olarak ayarlad›ktan
sonra Neutralize’›n yan›ndaki iflareti kald›r›n ve Fade de-
¤erini foto¤raftaki koyu detaylar ancak görünecek par-
lakl›¤a gelecek flekilde ayarlay›n. Ortadaki katman› seçin
ve Layer/Add Layer Mask/Reveal All seçene¤ini kullan›n.
Layer mask (katman maskesi) seçili iken seçime

degrade uygulay›n. Bunun için "Reflected Gradient"i
seçin, manzaradaki ufuk çizgisi üzerine t›klay›n ve Shift
tufluna bas›l› iken foto¤raf›n alt›na do¤ru sürükleyip b›-
rak›n ve bu katman›n blending modunu Screen olarak
de¤ifltirin. En üst katman› tekrar görünür yap›n. Opacity
de¤erini düflürerek efekti azaltabilirsiniz. Image/Adjust-
ment/Brightness/Contrast seçene¤ini tekrar kullanarak
etkiyi art›rabilirsiniz.
✂

>> Photoshop Serisi
Parazitli televizyon
‹lk olarak üzerine parazit eklemek iste-
di¤iniz görüntünüzü aç›n. Filter menü-
sü alt›nda yer alan Texture/Grain seçene¤ini
Intensity: 55, Contrasts: 40 ve Grain Type:
Stippled ayarlar› ile kullan›n. Yeni bir layer
daha oluflturup siyah renk ile doldurun. Bu
yeni katmandayken Filter menüsü alt›ndan
Noise/Add Noise seçene¤ini Amount: 80%,
Distribution: Uniform ve Monochromatic
iflaretli olarak uygulay›p blending modunu
da Screen olarak de¤ifltirin.
fiimdi yeni bir Hue/Saturation ayar kat-

man› eklemek için Layer/New Adjust-
ment Layer/Hue/Saturation seçene¤ini kul-
lan›n. OK tufluna t›klay›n ve ikinci pencerede
ayarlar› Colorize: iflaretli, Hue: 200, Satura-
tion: 10 ve Lightness: 50 olacak flekilde
ayarlay›n. ‹lk açt›¤›n›z katman› seçin ve Fil-
ter/Distort/Shear seçene¤ini seçin. fiekildeki
gibi ekleyece¤iniz 10-20 yeni noktay› sa¤a
sola do¤ru çekip ifllemi tamamlayabilirsiniz.
Labirent görüntüler
Resmi Ctrl-Shift-U k›sayolu ile siyah

beyaz hale dönüfltürün. fiimdi Filter
menüsü alt›ndan Sharpen/Sharpen More se-
çene¤ini birkaç kez tekrar etmeniz gereke-
cek. Bunun için Ctrl-F k›sayolunu tekrar kul-
lanabilirsiniz. Uzaktan siyah/beyaz bir fo-
to¤raf› and›ran görüntü yak›ndan bir labi-
rent gibi görünecektir.
Sualtı resimleri
Öncelikle renklerini düzeltmek istedi-

¤iniz foto¤raf› Photoshop içinde aç›n.
Ctrl-J klavye k›sayolu ile katman›n bir kop-
yas›n› ç›kart›n. Ard›ndan Filter menüsü al-
t›ndan Blur/Average seçene¤ini uygulay›n
ve Ctrl-I klavye k›sayolunu kullanarak resmi
negatif hale dönüfltürün ve bu katman›n
blending modunu Overlay olarak de¤ifltirin.
fiimdi Layer menüsü alt›ndan New Ad-

justment Layer/Photo Filter seçene¤ini
seçin. Filter seçene¤ini Warming Filter (85)
olacak flekilde, Density de¤erini ise %25,
%75 aras› bir de¤ere getirin. Preserve Lumi-
nosity seçene¤ini iflaretleyin ve OK tufluna
t›klay›n. Resim katman›n› seçin, Image me-
nüsü alt›ndan Adjustments/Shadow/High-
light seçene¤ini kullan›n ve Highlights de-
¤erini istedi¤iniz sonucu alana kadar art›r›n.

30 - Nisan 2005

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

30 - Nisan 2005

Uploaded by

Copyright:

Available Formats

Web Programc›l›¤›

ky.html function kay(hiz){

172• CHIP Workshop >>

function basla(hiz){ height="150" border="0" alt=""><br>

<< CHIP Workshop • 173

174• CHIP Workshop >>

return yukseklik; hb.html

Bu fonksiyon yard›m›yla elde etmiﬂ oldu¤umuz yukseklik de¤iﬂ- <html>

function basaDon() { function git(katman,x,y) {

<< CHIP Workshop • 175

180 • CHIP Workshop >>

<a href="haberlinki.html" onmouseover="dur()" onmouseout="

kodundaki eventhandler’lar sa¤l›yor. Ziyaretçi linkten ayr›ld›¤› an-

<< CHIP Workshop • 181

Java ile Programlama Bölüm 8

M t›rlarsan›z dosyalar konusuna k›sa

53 • CHIP Workshop >>

<< CHIP Workshop • 54

55• CHIP Workshop >>

<< CHIP Workshop • 56

57 • CHIP Workshop >>

<< CHIP Workshop • 58

Gerçekçi kaya dokusu

Yavafl yavafl ortaya ç›kan tafl dokumuzu renklen-

Adobe Photoshop CS’nin yeni özellikleri ile bunu

En üstteki iki katman› gizleyin. En alttaki katman›

Layer mask (katman maskesi) seçili iken seçime

41• CHIP Workshop >>

ﬁimdi yeni bir Hue/Saturation ayar kat-

Resmi Ctrl-Shift-U k›sayolu ile siyah

Öncelikle renklerini düzeltmek istedi-

ﬁimdi Layer menüsü alt›ndan New Ad-

<< CHIP Workshop • 42

You might also like