28_subat 2005

8/14/2019 28_Subat 2005

http://slidepdf.com/reader/full/28subat-2005 1/15

8/14/2019 28_Subat 2005


Web Programc›l›¤›

160• CHIP Workshop >>

G eçen say›da hat›rlayacaks›n›z oldukça etkileyici özelliklere sa-

hip bir menü için atölye çal›flmalar›m›zdan ilkini yapm›flt›k.

Menümüzün en son hali üzerine t›kland›kça hiyerarflik olarak

aç›l›p katlanabilen, 3 seviyeli, gerekti¤inde script ile bizzat sayfa kod-

lar›ndan kontrol edilebilen, bir t›klama ile görsel stilini an›nda de¤iflti-

rebilece¤iniz, istedi¤iniz eleman› seçili olarak gösterebilen, hem navi-

gasyon hem de bulunulan yerin yol adresini gösterme ifllevini haiz bir

menü fleklindeydi. Çal›flmam›z›n bu ayki ikinci bölümünde ise birad›m daha ileri gidece¤iz ve menümüzün zaten script’sel olarak kont-

rol edilebilmesinin avantaj›n› kullanarak durum bilgisi kayd›n› tut-

mak için cookie’leri adapte edece¤iz.

Geçen say›m›zda bizimle beraber olamayan okurlar için yü-zeysel olarak bir tekrar yapal›m:UMenümüzü üzerinde yap›land›rd›¤›m›z en önemli teknik özellik CSS

display property’si. Bu property, tan›mland›¤› elementlerin sayfa üze-

rindeki içerikte yer al›p almamas›n› kontrol eder ama bir di¤er benzer

özellik olan visibility (görünürlük) property’sinden farkl›d›r. Kullana-

ca¤›m›z display property’si 2 boyut olarak düflünmeniz gereken bir or-

tamda sayfan›n düzenini deyim yerindeyse yeniden oluflturur. Bu ba-

k›mdan bu özellikten faydalanarak form alanlar›n› flarta ba¤l› olarak

tekrardan düzenlenebilmesi mümkündür. Menümüzde bu teknikten

faydalanmam›z›n temel nedeni ise bu teknik ile çal›flaca¤›m›z ele-

mentlerin sayfa üzerindeki pozisyonlar› hakk›nda hiçbir hesaplama

yapmam›za gerek olmay›fl›. Geçen sefer yapm›fl oldu¤umuz basit

form örne¤inin bir kopyas›n› bu ay da CD’de bulabilirsiniz. Geçen say›-

da bizimle olamayanlar bu örne¤i inceleyebilirler.

<link rel=stylesheet href="stil_1.css" type="text/css">

sat›r›nda CSS dosya ismini stil_2.css veya stil_3.css veya stil_4.css

diye de¤ifltirerek menünüzün stilini tamamen de¤ifltirebilece¤inizi,

hatta bunu script’le kontrol edilebilir hale getirmeyi düflünmenizi

belirtmek isterim.

Menünüzde teknik aç›dan bir de¤ifliklik yapmayacaksan›z sizi il-

gilendiren en önemli bölümün <body> tak›lar› içinde kalan bölüm

oldu¤unu, bu bölümün menümüzün iskeletini ve hiyerarflik yap›s›n›

oluflturan temel blok oldu¤unu, menüdeki her bir eleman›n bir id

numaras› oldu¤u ve bu numaran›n gelifligüzel olmay›p bizzat me-

nünün yap›s›n› belirleyen bir düzene sahip olmas› gereklili¤ini, me-nüdeki elemanlar›n iki farkl› çeflitte, ya üzerine t›kland›¤›nda sahip

oldu¤u alt seviyeleri gösteren veya katlayan bir dü¤üm ya da göste-

recek hiç bir alt seviyeye sahip de¤ilse t›klan›nca ilgili sayfaya gidile-

cek bir link oldu¤unu, ayn› eleman›n alt seviyesinde 10’dan fazla

eleman›n yer almas› gerekti¤i durumlarda id numaralar›nda en faz-

la 1 basamakl› bir de¤erler kullan›lmas› gerekti¤ini (mesela

_4_10_3 yerine _4_A_3 gibi, 4_11_3 yerine _4_B_3 gibi) bir kez da-

ha hat›rlatt›ktan sonra gelelim bu ayki çal›flmam›za:

Sihirli menümüzde ziyaretçimizin hedefi istedi¤i altbafll›¤a ula-

flana kadar menüyü kullanmak ve bir linke t›klad›¤› anda ilgili sayfa-

ya gitmek. Diyelim ki 241 numaral› linke t›kland›. Bu linke karfl›l›k

gelen sayfaya (ki ben kar›fl›kl›k olmas›n diye herhangi241.html ola-

rak isimlendirdim) gidildi¤inde menünün 241 nolu eleman› göster-

mesi gerekir. Ancak bu sayede ziyaretçi sitede nere oldu¤unu anla-

yabilir. E¤er menünüz framset ile baflka bir frame’de ise sorun yok.

Menü oldu¤u gibi kalacakt›r. Ama frameset kullanm›yorsan›z gidile-

cek olan sayfada menünün hangi eleman›n aç›k olaca¤›n› bildirme-

niz gerekir.

Bunu yapman›n iki yolu var. Ya sitedeki her bir sayfan›n bafl›na

kendine ait olan eleman›n aç›k olaca¤›n› bildiren bir ifade yerlefltir-

mek (buna ça¤›rma yöntemi diyelim) ya da cookie yard›m›yla en son

t›klanan linki kaydetmek.

Bu iki yöntemi de ayr› ayr› incelemeden önce geçti¤imiz ay tek

bir sayfadan oluflan uygulamam›z› daha kullan›fll› ve gerçe¤e yak›n

uyarlanm›fl k›lmak için farkl› dosyalara bölelim. Menümüzün stilinitan›mlayan CSS dosya(lar›)m›z zaten harici idiler. Öncelikle madem

ki script kodlar›m›z her sayfa için ayn› olacak o zaman script kodlar›-

n› harici JavaScript dosyas› olarak kaydedelim.

sihirlimenu.js

<!--

function tumAltKapat(){ // 1. seviyeye kadar tüm altlar› kapat

var ar = document.getElementsByTagName("ul");

for (var i=0; i<ar.length; i++){

ar[i].style.display = "none";

}}

var oncekiAktif; // bir önceki aktif objeyi kaydedecek

var classOncekiAktif; //

bir önceki aktif objenin ola¤an class ismini kaydedecek

function katla(obj){ // navigasyon

if(document.getElementById){

<<<<

Sihirli menünüze ziyaretçinizi en son b›rakt›¤› noktada karfl›lama yetene¤i kazand›rmak için cookie’leri

adapte etmeyi düflünebilirsiniz.

✂

Sihirli menü ve cookie

adaptasyonu

Noktal› stil Klasik

3 boyutlu butonlar Modern

8/14/2019 28_Subat 2005


var el = document.getElementById(obj); // id numaras› verili nesne

var ar = document.getElementsByTagName("ul"); //

<ul> tak›l› tüm elementler

if(el.style.display != "block"){ //

e¤er element görünür durumda de¤ilse aç

//önce di¤erlerini kapat

if

(obj.indexOf("x")){


ar[i].style.display = "none"; //

bir üst dü¤üm aç›k ise tüm alt ve üst dü¤ümleri kapat

}

}

else {


if (ar[i].className=="subaltmenu"){

ar[i].style.display = "none"; //E¤er baflka bir alt dü¤üm aç›k ise ayn› seviyedeki tüm alt dü¤ümleri kapat

}

}

}

//flimdi elementi aç

el.style.display = "block";

}

else{

el.style.display = "none";

}

}

}

function acil(str){ // istenen elemente ulaflana kadar aç ve seçili hale getir

// id namaras›n› analiz et

var param1 = str.substring(0,1)




tumAltKapat();

if (param4==0){

if (param3==0){ //

E¤er 1. seviyede linkse (dü¤üm deilse) sadece seçili hale getir

aktiflestir(document.getElementById(str))

}

else { // E¤er 1. seviyede dü¤ümse ..katla("s" + param2 + "_" + 0 + "_" + 0);

// bir üstü aç ...

aktiflestir(document.getElementById(str)) //

ve seçili hale getir

}

}

else {// E¤er 2. seviyede dü¤ümse ..

katla("s" + param2 + "_" + 0 + "_" + 0); //

iki üstünü aç ...

katla("x" + param2 + "_" + param3 + "_" + 0);

// bir üstü aç ...



}

}

function aktiflestir(obj){ // seçili hale getirir

deaktiflestir();

// bir önceki seçili olan› kaydet

oncekiAktif = obj; // seçili hale getirilecek element

classOncekiAktif = obj.className; //

seçili hale getirilecek elementin ola¤an class ismi

obj.className = "secili";

}

function deaktiflestir(){ // seçili olan› resetle

if (oncekiAktif) {oncekiAktif.className = classOncekiAktif;}

}

function degis(){tumAltKapat();} //

ilk seviyeye kadar kapat (Menüyü S›f›rla)

-->

Menümüzü kullanacak her bir sayfadan JavaScript dosyas›na bir link

vermeyi unutmay›n.

<script type="text/javascript" src="sihirlimenu.js"></script>

Ça¤›rma yöntemi

Bulunulan sayfa için menüyü açmak amac›yla kullanaca¤›m›z yön-temlerden ilki cookie’li versiyona göre çok daha basit ve kolay olan›.

Önce sitemizde içerik sayfalar› olarak bir kaç model sayfa yapal›m.

Ben 110, 241 ve 400 numaral› linkler için birer sayfa haz›rlad›m. 241

numaral› link için herhangi241.html adl› sayfa afla¤›daki gibi olufltu.

herhangi241.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title></title>

<meta http-equiv="Content-Type"

content="text/html; charset=windows-1254">

<meta http-equiv="Content-Type" content="text/html;

charset=ISO-8859-9">


<script type="text/javascript" src="sihirlimenu.js"></script>

</head>

<body onload="acil('_2_4_1')" leftmargin="0"

topmargin="0" marginheight="0" marginwidth="0" bgcolor="#ffffff">

<table border="0" cellpadding="0" cellspacing="0">

<tr>

<td width="230" valign="top">

<a class="menuUst">Menu</a>

<div id="menu" style="position:

absolute; background-color:#EBEBEB; top:21; left:0;

width:0; height:0; visibility:visible; z-index:0;">

<a class="analink" href="#"

id="_1_0_0" onclick="katla('s1_0_0'); this.blur()">100 > </a>

<ul

class="altmenu" id="s1_0_0">

<li><a

class="altlink" href="herhangi110.html"

id="_1_1_0"> 110</a></li>

<li><a class="altlink"

href="herhangi120.html" id="_1_2_0"> 120</a></li>

</ul><a

class="analink" href="#" id="_2_0_0"

onclick="katla('s2_0_0'); this.blur()">200 > </a>

<ul




>>>>

<< CHIP Workshop • 161

8/14/2019 28_Subat 2005




<<<<

✂




<li><a class="altlink" href="#"

onclick="katla('x2_3_0'); this.blur()"> 230 > </a></li>

<ul class="subaltmenu" id="x2_3_0">

<li><a class="subaltlink"






</ul>


href="#" onclick="katla('x2_4_0'); this.blur()"> 240 > </a></li>

<ul class="subaltmenu"

id="x2_4_0"><li><a class="subaltlink"




</ul>

<li><a

class="altlink"


</ul>

<a class="analink" href="#"

id="_3_0_0" onclick="katla('s3_0_0'); this.blur()">300 > </a>

<ul class="altmenu" id="s3_0_0">

<li><a

class="altlink"


<li><a


id="_3_2_0"> 320</a></li>







href="herhangi332.html" id="_3_3_2">  332</a></li><li><a class="subaltlink"


</ul>

</ul>

<a

class="analink" href="herhangi400.html" id="_4_0_0">400</a>

<a


<a


</div>

</td><td width="500" valign="top">

<br>

<h2>Sayfa 241</h2>

<b>Bo¤az ve Anadolu yakas› felç olabilir</b>

<br><br>

Istanbul Valili¤i Afet Yönetim Merkezi, bu akflam saatlerinde bafllamas› ve

yar›n da artarak etkisini sürdürmesi beklenen kar ya¤›fl›na karfl› tedbirli

olunmas› uyar›s›nda bulundu.

.... vs Sayfan›n içeri¤i ....

<br><br>

</td>

</tr>

</table>

</body>

</html>

Bu sayfaya gelindi¤inde menünün 241 nolu eleman için aç›k ve seçi-

li görünmesini sa¤lamak amac›yla <body> tak›s› içine

onload="acil('_2_4_1')"

ifadesini yerlefltirdik. Her bir sayfa için kendi id numaras›n› para-

metre olarak yazman›z gerekir.Dikkat ederseniz bu sayfada biri menü di¤eri sayfan›n içeri¤i ola-

rak iki bölüm var. Tüm sayfalardaki menülerin ayn› olaca¤›n› düflü-

nürsek her bir sayfaya ayn› blo¤u tekrar tekrar yazmaya gerek yok.

Bunu yapmak için bu blo¤u harici JavaScript dosyas›nda flu flekilde

de¤iflken olarak kaydedebilir

var blokmenu = “”;

blokmenu += “<div id=’menu’ style=’position:absolute; . . . ”;

blokmenu += “<a class=’analink’ href=’#’ id=’_1_0_0’ . . . ”;

. . .

. . .

ve her bir sayfaya

document.write(blokmenu);

sat›r›yla yazd›rabilirsiniz. Ya da sunucu tarafl› bir uygulama kullan›-

yorsan›z ifliniz daha kolay. Tüm blo¤u bir dosya olarak kaydedip bu

dosyay› sayfalara ekleyebilirsiniz.

Mesela JSP için

<%@ include file="menu.html" %>

8/14/2019 28_Subat 2005

http://slidepdf.com/reader/full/28subat-2005 5/15<< CHIP Workshop • 163

PHP için

<? include('menu.html') ?>

gibi.

Ancak bu teknolojilerden hangisini tercih edece¤inizi bilemeye-

ce¤im için ve bu haliyle sizler için daha okunakl› ve anlafl›labilir oldu-

¤undan ben HTML olarak b›rak›yorum.

Uygulamam›z bu haliyle test etmeye haz›r. Her bir içerik sayfas›-

na geldi¤inizde menüde o sayfaya ait linkin seçili oldu¤unu gözlem-

lemelisiniz.

Cookie’li yöntemSayfalar›n dinamik olarak oluflturuldu¤u baz› durumlarda her bir sayfaya

ça¤›rma ifllemini yapacak id numaras›n› eklemek zor olabilir. Bu gibidurumlarda menünüze cookie’leri adapte etmeyi de düflünebilirsiniz.

Öncelikle JavaScript kodlar›m›zda baz› de¤ifliklikler yapmam›z gerek.

Afla¤›daki kodlarda script’imize cookie fonksiyonlar›n›n ilave edilmifl halini

görebilirsiniz.

sihirlimenu_cookie.js

<!--

//Cookie fonksiyonlar›------------

tarih = new Date

tarih.setMonth(tarih.getMonth()+1)

function cookieYaz(stat) {

document.cookie = "stat="+stat+";expires=" + tarih.toGMT

String();

}

stat = "";

if (document.cookie != "") {

stat = cookieGetir("stat");

}

function cookieGetir(cookieIsmi) {

cookiemiz = document.cookie.split("; ")

for (i=0; i<cookiemiz.length; i++) {

if (cookieIsmi == cookiemiz[i].split("=")[0]) {

return cookiemiz[i].split("=")[1]

}

}

return 0}

function cookieSil() {


tarih = new Date

tarih.setDate(tarih.getDate()-1)

birSonrakiCookie = document.cookie.split("; ")

for (x=0; x<birSonrakiCookie.length; x++) {

cookieName = birSonrakiCookie[x].split("=")[0]

document.cookie = cookieName + "=;expires=" +

tarih.toGMTString()

}

}}

//----------------------------

function tumAltKapat(){ // 1. seviyeye kadar tüm altlar› kapat

var ar = document.getElementsByTagName("ul");


ar[i].style.display = "none";

}

}

var oncekiAktif; // bir önceki aktif objeyi kaydedecek

var classOncekiAktif; // bir önceki aktif objenin ola¤an class ismini

kaydedecek

function katla(obj){ // navigasyon

if(document.getElementById){

var el = document.getElementById(obj); // id numaras› verili nesne

var ar = document.getElementsByTagName("ul"); //

<ul> tak›l› tüm elementler

if(el.style.display != "block"){ //

e¤er element görünür durumda de¤ilse aç

//önce di¤erlerini kapat

if

(obj.indexOf("x")){


ar[i].style.display = "none"; //bir üst dü¤üm aç›k ise tüm alt ve üst dü¤ümleri kapat

}

}

else {


if (ar[i].className=="subaltmenu"){

ar[i].style.display = "none"; //

E¤er baflka bir alt dü¤üm aç›k ise ayn› seviyedeki tüm alt dü¤ümleri kapat

}

}

}

//flimdi elementi aç

el.style.display = "block";

}

else{

el.style.display = "none";

}

}

}

function acil(str){ // istenen elemente ulaflana kadar aç ve seçili hale getir

// id namaras›n› analiz et




var param4 = str.substring(5,6)tumAltKapat();

if (param4==0){

if (param3==0){ //

E¤er 1. seviyede linkse (dü¤üm deilse) sadece seçili hale getir

aktiflestir(document.getElementById(str))

}

else { // E¤er 1. seviyede dü¤ümse ..

katla("s" + param2 + "_" + 0 + "_" + 0); //

bir üstü aç ...

aktiflestir(document.getElementById(str)) // ve seçili hale getir

}

}else {// E¤er 2. seviyede dü¤ümse ..

katla("s" + param2 + "_" + 0 + "_" + 0); // iki üstünü aç ...

katla("x" + param2 + "_" + param3 + "_" + 0); // bir üstü aç ...



}


>>>>

8/14/2019 28_Subat 2005


}

function aktiflestir(obj){ // seçili hale getirir

deaktiflestir();

// bir önceki seçili olan› kaydet

oncekiAktif = obj; // seçili hale getirilecek element

classOncekiAktif = obj.className; //

seçili hale getirilecek elementin ola¤an class ismi

obj.className = "secili";

}

function deaktiflestir(){ // seçili olan› resetle

if (oncekiAktif) {oncekiAktif.className = classOncekiAktif;}

}

function degis(){ tumAltKapat();} //

ilk seviyeye kadar kapat (Menüyü S›f›rla)

-->

Yine sitemizde içerik sayfalar› olarak bir kaç model sayfa yapal›m.241 nolu link için herhangi241.html adl› sayfa afla¤›daki gibi olufltu.

herhangi241.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title></title>


charset=windows-1254">


charset=ISO-8859-9">


<script type="text/javascript"

src="sihirlimenu_cookie.js"></script>

</head>

<body onload="if(stat){acil(stat)}" leftmargin="0" topmargin="0"

marginheight="0" marginwidth="0" bgcolor="#ffffff">

<table border="0" cellpadding="0" cellspacing="0">

<tr>

<td width="230" valign="top">

<a class="menuUst" href="#"

onclick="this.blur()">Menu</a>

<div id="menu" style="position:absolute;

background-color:#EBEBEB; top:21; left:0; width:0; height:0;

visibility:visible; z-index:0;"><a



<ul


<li><a


id="_1_1_0" onclick="cookieYaz(this.id)"> 110</a></li>

<li><a



</ul><a



<ul


<li><a class="altlink" href="herhangi210.html" id="_2_1_0"

onclick="cookieYaz(this.id)"> 210</a></li>


href="herhangi220.html"





<li><a class="subaltlink" href="herhangi231.html "








</ul>

<li><a class="altlink" href="#" onclick="katla('x2_4_0'); this.blur()"> 240 > </a></li>


<li><a class="subaltlink" href="herhangi241 .

html" id="_2_4_1"


<li><a class="subaltlink" href="herhangi242.html"


</ul>



</ul>

<a class="analink" href="#" id="_3_0_0" onclick="

atla('s3_0_0'); this.blur()">300 > </a>

<ul class="altmenu" id="s3_0_0">



<li><a class="altlink" href="herhangi320.html"








id="_3_3_2" onclick="cookieYaz(this.id)">  332</a></li><li><a class="subaltlink" href="herhangi333.html"


</ul>

</ul>

<a class="analink" href="herhangi400.html"

id="_4_0_0" onclick="cookieYaz(this.id)">400</a>





</div>

</td><td width="500" valign="top">

<br>

<h2>Sayfa 241</h2>

<b>Bo¤az ve Anadolu yakas› felç olabilir</b>

<br><br>

Istanbul Valili¤i Afet Yönetim Merkezi, bu akflam saatlerinde bafllamas› ve


<<<<

164 • CHIP Workshop >>

8/14/2019 28_Subat 2005

http://slidepdf.com/reader/full/28subat-2005 7/15<< CHIP Workshop • 165


>>>>

yar›n da artarak etkisini sürdürmesi beklenen kar ya¤›fl›na karfl› tedbirli

olunmas› uyar›s›nda bulundu. Istanbul'da akflam saatlerinden itibaren

bafllamas› beklenen karla kar›fl›k ya¤mur ve kar ya¤›fl›n›n, yar›n ö¤le

saatlerinde etkisini art›raca¤› tahmin ediliyor.

. . . vs .. .

<br><br>

</td>

</tr>

</table>

</body>

</html>

Sayfam›zda bir önceki yönteme göre en önemli de¤ifliklik menüdeki

linklerin t›kland›¤›nda farkl› bir fonksiyonu ça¤›r›yor olmalar›. Bu se-

fer linke t›kland›¤›nda ayn› zamanda cookieYaz fonksiyonu ilgili id

parametresiyle birlikte ça¤r›l›yor. Bu durumda en son t›klanan say-

fan›n id numaras› cookie’de kay›tl› oluyor.

<a class="subaltlink" href="herhangi241.html"

id="_2_4_1" onclick="cookieYaz(this.id)"> 241</a>

Herhangi bir içerik sayfas›na gitti¤inizde ise hangi sayfada bulundu-

¤unuz fark etmeksizin script önce cookie’de kay›tl› bir de¤erin olup

olmad›¤›n› kontrol ediyor, varsa bu de¤er göre menüyü aç›p ilgili

eleman› seçili hale getiriyor.

<body onload="if(stat){acil(stat)}"

Cookie fonksiyonlar›n›n nas›l çal›flt›¤›na gelelim. Cookie’lerimiz 1 ay

süre ile ziyaretçi bilgisayar›nda korunacaklar.

tarih = new Date

tarih.setMonth(tarih.getMonth()+1)

Cookie’mizi yazd›ran fonksiyon cookieYaz()’da cookie’mizin de¤eri

ile birlikte geçerlili¤ini yitirece¤i süreyi de bildiriyoruz. Bunu yap-

mazsan›z ziyaretçiniz taray›c› ekran›n› kapad›¤› anda cookie de yok

olur.

function cookieYaz(stat) {

document.cookie =

"stat="+stat+";expires=" + tarih.toGMTString();}

Cookie’mizde bizim için önemli bilgi olan id numaras›n›n kaydedile-

ce¤i de¤iflkenin ad› stat. ‹lk olarak de¤eri bofl.

stat = "";

E¤er sayfam›zla iliflkilendirilmifl daha önceden kay›tl› bir cookie de-

¤eri varsa hemen bunu de¤iflkenimize atayabiliriz.


stat = cookieGetir("stat");}

Kay›tl› cookie de¤erini ziyaretçi bilgisayar›ndan okuyan fonksiyon

function cookieGetir(cookieIsmi) {

cookiemiz = document.cookie.split("; ")

for (i=0; i<cookiemiz.length; i++) {

if (cookieIsmi == cookiemiz[i].split("=")[0]) {return cookiemiz[i].split("=")[1]

}

}

return 0

}

Fonksiyonumuz ayn› cookie dosyas› içinde birden fazla de¤iflken ka-

y›tl› olabilece¤i için bu de¤erleri önce ay›rarak analiz ediyor. Daha

sonra ismi parametre de¤eri olarak ça¤r›lan de¤iflkenin de¤erini ge-

ri gönderiyor.

Cookie’mizi silmek için kulland›¤›m›z fonksiyon ise benzer bir ifl-

levle ayn› dosya içinde bulunmas› muhtemel tüm de¤iflkenler için

geçerliliklerini yitirece¤i süre olarak geçmifl bir tarihi at›yor. Bu du-

rumda oturumun sona ermesiyle cookie’ler silinmifl oluyor.

function cookieSil() {


tarih = new Date

tarih.setDate(tarih.getDate()-1)

birSonrakiCookie = document.cookie.split("; ")

for (x=0; x<birSonrakiCookie.length; x++) {

cookieName = birSonrakiCookie[x].split("=")[0]

document.cookie = cookieName + "=;expires=" + tarih.toGMTString()}

}

}

Cookie’li versiyonumuzda ziyaretçi sitenize gelir gelmez menü en

son ziyaret etti¤i sayfay› gösterecektir. Dilerseniz ziyaretçinizi en

son bulundu¤u sayfaya yönlendirecek bir ifllevi script’inize eklemeyi

düflünebilirsiniz.

NOT:

Bu ayki atölyemizde yer alan örneklerin kaynak kodlar›n› CD’dekiStudioWeb+ bölümünde bulabilirsiniz.

Numan Pekgöz

[email protected]

8/14/2019 28_Subat 2005


Soyut s›n›flarSoyut s›n›f kavram› asl›nda tamamen tü-

retme ile iliflkilidir. Bu nedenle soyut s›n›fla-

r›n anlaml› kullan›lmas› asl›nda bir türetme

iflleminin yap›lmas›n› gerektirir. Türetme ifl-

leminde hat›rlayaca¤›m›z gibi; bir s›n›f baflka

bir s›n›f›n›n de¤iflken ve metotlar›n› alabil-

mektedir. Böylece önceden yaz›lm›fl birta-

k›m metod ve de¤iflkenlerin yer ald›¤› bir s›-

n›f varsa ve biz de bu metot ve de¤iflkenlere

ihtiyaç duyuyor ve ayn› zamanda yeni metot

ya da de¤iflkenler de eklemek istiyorsak,

mevcut s›n›ftan bir türetme yaparak sadece

yeni eklemek istedi¤imiz metot ve de¤iflken-

leri yazmam›z yeterli olacakt›r.

Bir s›n›f içerisinde daha önce görmüfl ol-

du¤umuz metot tan›mlamalar›ndan farkl›

olarak “soyut metot” denilen bir metot ta-

n›mlamas› daha vard›r. Bir metot soyut ola-

rak yaz›lacaksa, metot prototipinde "public",

"private" ya da "protected" anahtar sözcü-

¤ünden sonra “abstract” anahtar sözcü¤ü

yaz›lmad›r. Ayr›ca s›n›f içerisinde bu flekilde

prototipi yaz›lan soyut metodun içerisine dehiçbir fley yaz›lmaz. Örne¤in:

...public abstract String ismiVer();...

Yukar›daki örnekte bir soyut metot bildi-

rimi yap›lm›fl ve içerisi yaz›lmadan noktal›

virgül ile bildirim tamamlanm›flt›r.

‹kinci kural olarak da içerisinde soyut me-

tot bar›nd›ran bir s›n›ftan türetilen yeni bir

s›n›f, bu soyut metodun içerisini kendi içinde

yazmak zorundad›r. Aksi takdirde türetme

ifllemi hatal› say›l›r.

Sonuç olarak:1) Soyut bir metodun temel s›n›f içerisinde

sadece prototipi yaz›l›r.

2) Bu temel s›n›ftan türeyen bir s›n›f, temel

s›n›fta sadece prototipi yaz›lm›fl olan bu so-

yut metodu kendi içerisinde tamamen yaz-

mak zorundad›r.

3) ‹çerisinde soyut metot bar›nd›ran s›n›fla-

ra soyut s›n›f denilir ve böyle bir s›n›f›n bil-

diriminin bafl›na "class" anahtar sözcü¤ün-

den önce “abstract” yaz›lmak zorundad›r.

Peki ama soyut metotlar›n bu kullan›m› ne

ifle yarar?

S›n›f bildirimi içerisinde yaz›lm›fl olan

soyut metotlar›n nas›l çal›flaca¤›, bu s›n›f-tan türetilen s›n›flar içerisinde yaz›lmakta-

d›r.

Temel s›n›f içerisinde bu metotlar›n na-

s›l iflleyeceklerinden ziyade geri dönüfl de-

¤erlerinin ve parametrelerinin ne olduklar›

yaz›l›r. O halde içerisinde soyut metotlar

bar›nd›ran bir s›n›ftan türetme yap›ld›¤›n-

da, ondan türeyen her s›n›f içerisinde bu

metodun yeniden yaz›lmas› gerekecek ve

dolay›s›yla bu s›n›ftan türeyen tüm s›n›fla-

r›n böyle bir metot bar›nd›raca¤› garanti

edilmifl olacakt›r.

Böylece birçok kiflinin görev ald›¤› büyük

bir projede, yaz›lmas› kesinlikle gerekli

olan, ancak sadece iflleyifli de¤iflebilen me-

totlar› temel bir s›n›f içerisinde soyut olarak

tan›mlarsak ve yaz›lacak tüm yeni s›n›flar›n

da bu temel s›n›ftan türetilerek yaz›lmas›n›

flart koflarsak, herhangi bir kontrole gerek

kalmaks›z›n, yaz›lmas› zorunlu olan bu me-

totlar›n birbirinden ba¤›ms›z kiflilerin ta-

sarlayaca¤› tüm s›n›flarda kesinlikle yer

alaca¤›ndan emin olabiliriz. Bu durum afla-

¤›daki flekilde de özetlenmifltir:

Böylece kavramsal olarak soyut metot

ve soyut s›n›f›n ne oldu¤unu yeterince ince-

ledi¤imizi düflünüyorum. fiimdi yukar›da

okuduklar›m›z› pekifltiren oldukça klasik bir

örnek yapal›m. Bu örnekte soyut metot kul-lan›m›n› içerdi¤i gibi asl›nda türetme iflle-

minin de güzel bir kullan›m›n› göstermek-

tedir.

Örne¤imizde temel olarak “Sekil” ad›n-

da bir s›n›f yer almakta. Bu s›n›f tüm ge-

✂

JAVA ile ProgramlamaBir Java dersimizde daha birlikteyiz. Geçen dersimizde ö¤renmifl oldu¤umuz s›n›flar›n türetilmesi

konusunu takiben bu dersimizde de yine nesne yönelimli programlama içerisinde yer alan

arayüzleri ve soyut s›n›flar› inceleyece¤iz.


<<<< Java Serisi

Bölüm 8

8/14/2019 28_Subat 2005


Java Serisi

>>>>


Ucgen.java S›n›f›

Sekil.java S›n›f›

8/14/2019 28_Subat 2005


Java Serisi


ometrik flekillerin temelini teflkil etti¤in-

den, içerisinde yer alacak olan "alanHesap-

la", "cevreHesapla", "kenarSayisiVer" gibi

metotlar›n yaz›lmas› anlams›zd›r. Ancak bir

geometrik flekil bu metotlara sahip olmal›-

d›r. O halde biz “Sekil” s›n›f›n›n bu metotla-

r›n› soyut olarak tasarlay›p gerekli olan ge-

ometrik flekle iliflkin bir s›n›f› da bu s›n›ftan

türetirsek, soyut olan bu metotlar› ilgili flek-

lin özelliklerine göre yeniden yazabiliriz. Bu

düflünceyle de örne¤imizde “Sekil” s›n›f›n-

dan türeyen “Dikdortgen” ve “Ucgen” s›n›f-

lar›n› da yazmaktay›z:Bu örnekte yaz›lan tüm s›n›flar en son

olarak "SekilGenel.java" s›n›f› içerisinde

test edilmektedir. Örnekte yaz›lm›fl olan

"Dikdortgen.java" ve "Ucgen.java" s›n›flar›

"Sekil.java" s›n›f›ndan türetilerek elde edil-

mifltir. "Sekil.java" s›n›f› da içerisinde baz›

soyut metotlar içerdi¤inden, türetmenin

yap›ld›¤› her iki s›n›f içerisinde bu soyut

metotlar› içi k›s›mlar› da yaz›lm›flt›r. Ancak

tabi ki "Sekil.java" içerisinde prototipi yaz›l-

m›fl olan herhangi bir soyut metodun "Dik-

dortgen.java" ya da "Ucgen.java" içerisinde-

ki davran›fl biçimi farkl› olacakt›r. Fakat her

ikisinin de bu soyut metotlar› içerece¤i ga-

ranti edilmifltir.

Arayüzler

Arayüzler asl›nda soyut s›n›flardan farkl›de¤ildir. Yukar›da da anlatt›¤›m›z gibi, içeri-

sinde tek bir tane bile soyut metot içeren

bir s›n›f soyut bir s›n›f say›l›r. Ancak tabi ki

böyle bir s›n›f›n soyut olmayan metotlar› da

yaz›labilir.

Tüm metotlar› soyut olarak yaz›lm›fl s›-

n›fa arayüz (interface) denilmektedir. Me-

sela afla¤›daki örnekte verilen "Personel"

isimli s›n›f›n içerisinde yer alan tüm metot-

lar soyut oldu¤undan bu s›n›f bildiriminin

bafl›na "abstract" anahtar sözcü¤ü yerine

"interface" anahtar sözcü¤ü yaz›lm›flt›r. Ay-

r›ca arayüzlerin bildiriminde "class" anah-

tar sözcü¤ü kullan›lmaz:

public interface Personel {

public abstract String personelAdiniVer();

public abstract String personelDerecesiniVer();

public abstract void personelBolumunuDegistir(int bolum);

public abstract int personelBolumunuVer();

<<<<

Dikdortgen.java S›n›f›

8/14/2019 28_Subat 2005


Java Serisi

>>>>


}

E¤er bir s›n›f bir arayüzden türetilerek el-

de ediliyorsa, bu s›n›f bildiriminde "extends"

anahtar sözcü¤ü yerine "implements" anah-

tar sözcü¤ü yaz›lmaktad›r. Mesela "Perso-nel" s›n›f›ndan bir türetme yap›larak "Mü-

dür" isimli bir s›n›f yaz›lacaksa, bu s›n›f›n bil-

dirimi afla¤›daki flekilde olmal›d›r:

public class Mudur implements Personel {...

}

Bunun d›fl›nda, arayüzler ile soyut s›n›f-

lar›n kullan›m› tamamen ayn› prensibe sa-

hip oldu¤undan daha fazla detaya inmeye-

ce¤iz. Geldi¤imiz bu noktada art›k s›n›flar›n

yarat›lmas›, türetilmesi ve kullan›lmas› gibi

bafll›klar› incelemifl bulunmaktay›z.

Bugüne kadar anlat›lan ifllemlerde pra-

tik kazanmak ve konuyu tam anlam›yla

kavramak, ancak bol bol program yazmakla

mümkün olacakt›r. Bu bafll›klara iliflkin ko-

nu anlat›mlar›n› sonland›rmakla beraber

yine de bol örnek ve uygulama üzerinde de-

tayl› aç›klamalar yaparak konuyu zaman

içerisinde daha iyi kavraman›z› sa¤lamak

düflüncesindeyim. Bu nedenle verdi¤imiz

örnekleri mutlaka en bafltan ve dikkatle

yazman›z› tekrar hat›rlat›r›m.fiimdi java programlar› içerisinde çal›fl-

ma zaman› s›ras›nda (run-time) meydana

gelen hatalar›n nas›l ele al›nd›¤›na iliflkin

bir inceleme yapal›m.

Java'da Hata Mekanizmas›

(Exceptions) [1]Yukar›da da bahsetti¤im gibi Java'da

program›n çal›flmas› s›ras›nda "exception"

olarak isimlendirilen bir tak›m hatalar mey-

dana gelebilir. Bu hatalar›n ele al›nmas› ve

program ak›fl›n›n buna göre düzgün bir ye-re yönlendirilmesi gerekmektedir. Java'da

bu ifllemlerin yap›lmas›n› sa¤layan bir me-

kanizma mevcuttur.

Asl›nda çal›flma zaman› s›ras›nda mey-

dana gelen her "exception", "Throwable"

olarak isimlendirilen bir nesne türünden

örnekler olarak yarat›lmaktad›r. Bu nesne-

lerin baz›lar›n› örneklerimizde ele alaca¤›z.

Öncelikle böyle bir nesnenin Java'da na-

s›l yarat›ld›¤›n› ve nas›l gönderildi¤ini ince-

leyelim. Afla¤›daki örnekte verilen prog-

ramda asl›nda bir yaz›m hatas› yoktur.

Program baflar›l› bir flekilde derlenecek an-

cak s›f›ra bölme ifllemi yüzünden çal›flma

zaman› s›ras›nda bir "exception" yarat›la-

cakt›r. Buradaki örnekte yarat›lan "excepti-

on" nesnesnin türü "ArithmeticException"

d›r:

class ExceptionDeneme {public static void main(String arg[]) {

int n = 4 / 0;System.out.println("Tamam");}

}

Bu örne¤i ExceptionDeneme.java dosya-

s› ad›yla kaydedip önce javac ile derledik-

ten sonra java ile çal›flt›rmak istedi¤imizde

ArtihmeticException yarat›lacakt›r.

Afla¤›daki örnekte ise biz kendi elimizle

bir exception yaratmaktay›z:

class ExceptionDeneme2 {public static double

karekok(double n) {if(n < 0)

throw new IllegalArgumentException();

return Math.sqrt(n);}

public static void main(String arg[]) {System.out.println

("Sonuc: "+ karekok(-25));System.out.println

("Program Bitiyor");}

}

ExceptionDeneme2.java örne¤imizde

karekok isimli metoda parametre olarak s›-

f›rdan küçük bir say› verildi¤inde, "karekok"

metodu içerisinde tan›mland›¤› gibi "new

IllegalArgumentException" ile yeni bir ex-

ception yarat›lacak ve bu yarat›lan nesne

de "throw" anahtar sözcü¤ü ile gönderile-

cektir. Bunun neticesinde bu program yine

javac ile derlenebilecek ancak java komutu

ile çal›flt›r›lmak istendi¤inde "IllegalArgu-

mentException" üretecektir. Bu durumda

program son sat›ra gelmeden sonlanacak

ve dolay›s› ile ekranda "Program Bitiyor" ya-

z›s› ç›kmayacakt›r.Peki o halde gerek bizim iste¤imizle ge-

rek kontrolsüz olarak üretilen bu "excepti-

on" nesneleri ne flekilde ele al›nabilir ve

program ak›fl› ne flekilde kontrol alt›nda tu-

tulabilir bunu inceleyelim..

SekilGenel.java S›n›f›

8/14/2019 28_Subat 2005


Java Serisi


Hatan›n Ele Al›nmas›(Exception Handling)

Az önceki örneklerde oldu¤u gibi mey-dana gelen bu hatalar "try" ve "catch" ile

kontrollü bir flekilde ele al›narak program

ak›fl›n›n düzgün bir flekilde yönlendirilmesi

mümkün hale getirilebilir.

O halde az önce yazm›fl oldu¤umuz "Ex-

ceptionDeneme2" isimli s›n›fta hatay› düz-

gün br flekilde yakalayacak mekanizma ile

tekrar yazal›m. Bu yeni s›n›f›n ad›na da "Ex-

ceptionDeneme3" diyelim:

ExceptionDeneme3 örne¤inde kullan›-

lan try blo¤u, hatan›n ç›kma ihtimali olan

sat›rlar› içermektedir. Daha sonra aç›lm›fl

olan "catch" blo¤unda da, meydana gelen

hatan›n ele al›nd›¤› k›s›mlar yaz›lmaktad›r.

Hata nas›l ele al›nmak istenirse catch blo-

¤unun içi o flekilde doldurulabilir. catch blo-

¤una gelen hata nesnesi catch parantezleri

içerisinde türü "Exception" olan ve ad› da

"hata" olan de¤iflkene atanm›flt›r. Netice

itibariyle hata baflar›l› bir flekilde yakaland›-

¤›ndan , "catch" blo¤u içerisinde ele al›nd›k-

tan sonra program ak›fl› önceki örneklerde

oldu¤u gibi sonlanmayacakt›r. Bu progra-

m›n çal›flmas› neticesinde ekrana:

Yakalanan hata:java.lang.IllegalArgu-mentException

Hata yakalandi..

Program devam ediyor..

yazacakt›r.

Burada dikkat edilirse asl›nda "IllegalAr-

gumentException" türünden üretilen hata

"Exception" türündeki nesneye atanm›flt›r.

Yani bir tür dönüflümü söz konusudur. Bu-na iliflkin detayl› bir incelemeyi daha sonra

yapaca¤›z. fiimdilik sadece hata yakalama

mekanizmas›na yo¤unlaflmak yeterli ola-

cakt›r.

Hata yakalama mekanizmas›nda son

bahsedece¤imiz fley de hatalar›n yukar›da-

ki örnekte oldu¤u gibi genel bir "catch" blo-

¤u içerisinde de¤il de hatan›n türüne iliflkin

bir blok içerisinde ele al›nmal›d›r. Bu ifllem

için try ve catch bloklar› afla¤›daki flekilde

kullan›lmaktad›r:

...try {

...}catch (ExceptionTuru e) {

...}catch(ExceptionTuru2 e) {

...}finally {

}...

Bu yap›ya göre her catch blo¤u farkl›

türde bir hatay› ele alacakt›r. Bütün catch

bloklar› geçildikten sonra da program ak›fl›

finally blo¤unun içerisine yönelecektir.

Böylece hata yakalama mekanizmas›n›

da temel özellikleriyle ö¤renmifl bulunmak-

tay›z. Bizim bu flekilde kulland›¤›m›z meka-

nizmay› ilerleyen örneklerimizde bazen zo-runlu olarak göz önünde bulundurmam›z

gerekti¤ini göreceksiniz. Öyle ki daha önce

de kulland›¤›m›z gibi baz› haz›r Java s›n›fla-

r›n› kullan›rken, bu s›n›flar›n içerisindeki bir

tak›m metotlar›n exception üretiyor olma-

lar›ndan dolay›, kodun ilgili k›s›mlar›n› try

bloklar› içerisinde yazmak ve daha sonra da

catch bloklar› ile üretilmesi muhtemel ex-

ception nesnelerini yakalayacak halde

program yazmak zorunda kalacaks›n›z. Yeri

geldikçe zaten bu kullan›mlara de¤inece-

¤iz.

Java'da Dosya ‹fllemlerine GiriflProgramc›l›¤›n vazgeçilmez ifllerinden

birisi de disk üzerindeki dosyalarla çal›fl-

makt›r. Buraya kadar konular› ö¤renmek

amac›yla kullanm›fl oldu¤umuz örneklerde

asl›nda veriler sadece o anda çal›flan prog-

ram içerisinde ele al›nabiliyordu.

Profesyonel anlamda yaz›lan program-

lar›n ço¤u kullan›c›n›n ihtiyaç duyaca¤› ve-

rileri dosyalar üzerinde saklamakta ve ge-

rekti¤inde bu dosyalardan verileri okuyarak

ya da yeni verileri dosyalara yazarak iflleyifl-lerini sürdürmektedir. Bu nedenle prog-

ramc›l›kta amaç ne olursa olsun dosyalar

üzerinde ifllem yapma ihtiyac› mutlaka kar-

fl›n›za ç›kacakt›r.

Bu dersimizde sadece girifl yapaca¤›m›z

<<<<

ExceptionDeneme3.java S›n›f›

8/14/2019 28_Subat 2005


Java Serisi

>>>>


dosya ifllemleri ile ilgili birçok örne¤i devam

eden derslerimizde de yapaca¤›z. Java'da

dosya ifllemlerine iliflkin ilk olarak “File”

isimli s›n›f›n kullan›m›n› inceleyerek baflla-

yal›m. B› s›n›f disk üzerinde yer alan bir dos-

yay› program içerisinde de bir nesne haline

getirerek programc›n›n dosya üzerinde ifl-

lem yapabilmesini sa¤lamaktad›r. S›n›f›n

bafllang›ç fonksiyonu temel olarak bir dos-

yan›n yol (path) bilgisini alarak File nesnesi-

ni yarat›r. Örne¤in:

...File dosya1 = new File(“Dosya.txt”);File dosya2 = new File(“c:\ornekler\dosya.txt”);File dosya3 = new

File(“/home/erman/Dosyam.txt”)...

Tabi yukar›da verilen bu örneklerde, “Fi-

le” s›n›f›n›n bafllang›ç fonksiyonuna para-

metre olarak verilen bu yollar›n diskte de

düzgün bir flekilde mevcut olmas› gerek-

mektedir. Yani bulundu¤umuz dizinde Dos-

ya.txt ya da “c:\ornekler\” dizini alt›nda bir

“dosya.txt” ya da “/home/erman/” dizini

içerisinde bir “Dosyam.tx”t dosyas› bulun-

mal›d›r. Aksi takdirde “dosya1”, “dosya2”

ya da “dosya3” ismi ile temsil edilen “File”

nesneleri düzgün bir flekilde yarat›lamaya-

cakt›r.

Not: Java'da dosya ifllemlerinin yap›la-

bilmesi için io.* kütüphanelerinin progra-

m›n en üst sat›r›nda “import” anahtar söz-

cü¤ü ile programa dahil edilmesi gerek-

mektedir.

Afla¤›daki örnekte temel olarak “File” s›-

n›f› ile dosya ifllemlerinin ele al›nmas›na

iliflkin bir program yaz›lmaktad›r.

Örne¤imizde temel bir File nesnesi yara-

tarak asl›nda diskte yer alan bir dosya bilgi-

lerinin nas›l ele al›nd›¤›n› görmekteyiz. Bu

örnekte benim girmifl oldu¤um “/tmp/dosya.txt” yolu asl›nda kendi sistemimdeki bir

dosyan›n yerini temsil etti¤inden siz kendi

örne¤inizi yazarken kendi diskinizdeki yolu

yazmaya dikkat ediniz. Program çal›flt›r›ld›-

¤›nda “InputDialog” nesnesi ile afla¤›daki

resimde gösterildi¤i gibi sizden bir dosya

yolu istenecektir:

Girdi¤iniz bu yol bilgisi program›m›z›n 8.

sat›r›nda yaz›ld›¤› flekilde “dosyaYolu” de-

¤iflkenine aktar›lmakta ve daha sonra da

11. sat›rda oldu¤u gibi bu de¤iflken yard›m›

ile nesne yarat›lmaktad›r. Bu nesne yard›-

m›yla kullan›labilecek birkaç metodu 14, 15

ve 16. sat›rlarda görmekteyiz.

Sadece konuya girifl yapmak amac›yla

ele ald›¤›m›z dosya ifllemleri tabi ki bu ka-

dar›yla s›n›rl› de¤ildir. Konuya iliflkin çok

daha detayl› ve e¤lenceli örnekleri bir son-

raki dersimizde görece¤iz.

Derslerimizde kulland›¤›m›z program

kodlar›n› http://cs.bilgi.edu.tr/~erman/

adresine eriflerek elde edebilece¤iniz bir

kez daha hat›rlatmak isterim. Bir sonraki

dersimizde görüflene dek esenlikle kal›n.

Sevgi ve Sayg›lar›mla,

Erman Aykaç

[email protected]

Dosyalar.java Örne¤i

Dosyalar.java program ç›kt›s›

8/14/2019 28_Subat 2005

http://slidepdf.com/reader/full/28subat-2005 14/15 ✂

Herkes için PhotoshopPhotoshop’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 farkl› kategoride örnek-

ler yer alacak.


<<<<Photoshop Serisi

Öncelikle istedi¤iniz boyutta yeni bir belge olufltu-

run. fiimdi [D] tufluna basarak ön ve arka plan renk-

lerini siyah ve beyaz olacak flekilde s›f›rlay›n. Arka

plan rengini siyah ile boyad›ktan sonra çal›flma ala-

n›n›z›n tam ortas›na Filter / Render / Lens Flare seçene¤i yar-

d›m›yla bir Lens Flare uygulay›n. Brightness %100, Lens

Type:50-300mm olabilir. Daha sonra da hem soldan hem de

sa¤dan Filter / Stylize / Wind ile rüzgar efekti uygulay›n.

Günefl Tutulmas›

fiimdi ayn› efektleri yukardan ve afla¤›dan da uy-gulayabilmemiz için resmi döndürmemiz gereki-

yor. Bunun için Image / Rotate Canvas / Rotate 90

CW seçene¤i kullan›n. Biraz önceki rüzgar efekti-

ni soldan ve sa¤dan Filter / Stylize / Wind seçene¤i yard›-

m›yla tekrar uygulay›n. Ard›ndan da Filter / Distort / Polar

Coordinates seçene¤ini sa¤daki resimdeki ayarlarla uy-

gulay›n. Son olarak resmi aynen bir kez daha döndürün.

Foto¤raflar›n›z› özel birimlerin kulland›¤› termal

kameralar ile çekilmifl gibi bir hale dönüfltürmek

ister misiniz? ‹flte size kolay bir yöntem. Önce fo-

to¤raf›n›z› aç›n. ‹fllemi Gradient mapping kulla-

narak yapaca¤›z. Bu flekilde var olan renkler gradient

üzerindeki farkl› bir renk ile de¤ifltirilecektir. Gradient

map kullanabilmek için Image / Adjustments / Gradient

Map seçene¤inden yararlanabilirsiniz.

Karfl›n›za gradient map ayarlar› geldi¤i zaman si-

yah beyaz skalan›n hemen sa¤›ndaki küçük oka

t›klay›n. Aç›lan menüden en alt s›radaki ilk gök-

kufla¤› renkli skalay› seçin ve OK tufluna bas›n.

Foto¤raf›n›z tam istedi¤iniz flekilde de¤iflecektir. E¤er bu

katman›n bir kopyas›n› ç›kar›r ve motion blur ya da ben-

zeri di¤er efektleri uygularsan›z da sa¤daki en son foto¤-

rafta gördü¤ünüz gibi farkl› etkiler de yakalayabilirsiniz.

Bu ifllem asl›nda san›ld›¤› kadar zor de¤ildir. Bu-

nun için foto¤raf›n›z› açt›ktan sonra tek yapma-

n›z gereken Filter / Artistics menüsü alt›nda yer

alan Cutout seçene¤ini kullanmak. Cutout pen-ceresi karfl›n›za geldi¤i zaman Number of Levels de¤erini

“8”, Edge Simplicity de¤erini “4” ve Edge Fidelity de¤erini

de “2” olarak ayarlay›p OK tufluna t›klay›n. ‹flte hepsi bu

kadar. Resmin detaylar›na göre ayarlar üzerinde oyna-

man›z gerekebilir.

Termal Kamera

Resimden Vektöre Dönüflüm

1

1

1

2

2

2

3

3

3

4

7 8

9

5 6

8/14/2019 28_Subat 2005


Photoshop Serisi

>>>>

‹lk olarak damga olarak kullanmak istedi¤iniz

metni oluflturun. Ard›ndan bunun hemen çevresi-

ne 5 piksellik bir dikdörtgen çizin. [Ctrl]+[E] ile kat-

manlar› birlefltirebilirsiniz. Hemen ard›ndan Filter /

Sketch / Torn Edges filtresini sa¤daki resimdeki ayarlar›

kullanarak uygulay›n. Son olarak da damgaya gerçekçi si-

lik görüntüsünü vermek için %60 opacity de¤erinde ve 9

piksel kal›nl›¤›nda bir silgi kullanarak rastgele silin.

Hat›rlarsan›z daha önce küçük bir duvar örne¤i ile

piksel sanat›n›n nas›l bir fley oldu¤unu temel an-lamda görmüfltük. fiimdi biraz daha ilerletip basit

bir bina yapmaya çal›flaca¤›z. ‹lk olarak 300x300 boyu-

tunda bir belge oluflturup arka plan›n› da parlak yeflil bir

renk ile boyay›n. Ard›ndan zum ölçe¤ini %1.600’e getirin

ve pencil arac›n› seçin. Ön plan rengini siyah, f›rça boyu-

tunu da 1 piksel olarak ayarlay›n.

fiimdi yeni bir katman (layer) oluflturun. Art›k pik-

sel binam›z› yapmaya bafllayabiliriz. Burada unut-

maman›z gereken çizgi çizerken ayn› perspektifi

korumak olmal›d›r. Yukar› do¤ru 1, yana do¤ru 2 pikselve köflelerde de 3 piksel kullanmam›z gerekir. Böylece en

do¤ru görünen çizgiyi yaratabilirsiniz. Resimde de göre-

bilece¤iniz gibi küçük bir bina yapaca¤›m›z için taban›n›

da küçük çizdik. fiimdi [Ctrl]+[J] tufluna bas›n.

Bu flekilde taban›n kopyas›n› ç›karm›fl olduk. Bina-

m›za yükseklik katmak için yeni katman› bir mik-

tar yukar› almak yeterli olacakt›r. Art›k dik duvar-

lar› çizebilirsiniz. E¤er sol duvarda çal›fl›yorsan›z

tüm dik çizgileri sol taraftaki pikselden afla¤› do¤ru çiz-

meye özen gösterin. Sa¤ taraf için de tabii ki bu durumun

tam tersi geçerli olacakt›r. Bu flekilde perspektifi koruya-

bilirsiniz. Art›k renklendirme ifllemine bafllayabiliriz.

Daha önce de bahsetti¤imiz gibi doldurma ifllemi

s›ras›nda her zaman seçti¤imiz 3 renk tonundan

en aç›k olan› sol tarafa, en koyu olan› sa¤ tarafa ve

orta rengi de üst taraf için kullanmaya dikkat edin. Kutu-

dan çok eve benzemesi için kap› ve pencereleri de ekle-

meyi unutmay›n. Gölgelendirme için ise hep ortaya ba-

kan taraf› kullan›n ve seçti¤iniz renkten daha aç›k bir ton

seçin. En sa¤daki resmi örnek alabilirsiniz.

Gerçekçi Damga

Piksel sanat›: Gecekondu

1

1

4

7

8 9

5 6

2

2

3

3

10 11 12

28_subat 2005

Documents