Web Programc›l›¤›

<<

Sihirli menü ve cookie adaptasyonu
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.
eçen say›da hat›rlayacaks›n›z oldukça etkileyici özelliklere sahip 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 kodlar›ndan kontrol edilebilen, bir t›klama ile görsel stilini an›nda de¤ifltirebilece¤iniz, istedi¤iniz eleman› seçili olarak gösterebilen, hem navigasyon 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 bir ad›m daha ileri gidece¤iz ve menümüzün zaten script’sel olarak kontrol edilebilmesinin avantaj›n› kullanarak durum bilgisi kayd›n› tutmak için cookie’leri adapte edece¤iz.

G

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 üzerindeki 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. Kullanaca¤›m›z display property’si 2 boyut olarak düflünmeniz gereken bir ortamda sayfan›n düzenini deyim yerindeyse yeniden oluflturur. Bu bak›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 elementlerin 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 ilgilendiren 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 menünün yap›s›n› belirleyen bir düzene sahip olmas› gereklili¤ini, menü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österecek hiç bir alt seviyeye sahip de¤ilse t›klan›nca ilgili sayfaya gidilecek bir link oldu¤unu, ayn› eleman›n alt seviyesinde 10’dan fazla eleman›n yer almas› gerekti¤i durumlarda id numaralar›nda en fazla 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 daha hat›rlatt›ktan sonra gelelim bu ayki çal›flmam›za: Sihirli menümüzde ziyaretçimizin hedefi istedi¤i altbafll›¤a ulaflana kadar menüyü kullanmak ve bir linke t›klad›¤› anda ilgili sayfaya 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 olarak isimlendirdim) gidildi¤inde menünün 241 nolu eleman› göstermesi gerekir. Ancak bu sayede ziyaretçi sitede nere oldu¤unu anlayabilir. 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 gidilecek olan sayfada menünün hangi eleman›n aç›k olaca¤›n› bildirmeniz 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 yerlefltirmek (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 stilini tan›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

Noktal› stil

Klasik

<!-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){

3 boyutlu butonlar

Modern

160• CHIP Workshop > >

>>
<ul> tak›l› tüm elementler (obj.indexOf("x")){

Web Programc›l›¤›

var el = document.getElementById(obj); // id numaras› verili nesne var ar = document.getElementsByTagName("ul"); // if(el.style.display != "block"){ // e¤er element görünür durumda de¤ilse aç //önce di¤erlerini kapat if } for (var i=0; i<ar.length; i++){ 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) var param2 = str.substring(1,2) var param3 = str.substring(3,4) 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ç ... aktiflestir(document.getElementById(str)) ve seçili hale getir } } function aktiflestir(obj){ // seçili hale getirir deaktiflestir(); // bir önceki seçili olan› kaydet // </head> { for (var i=0; i<ar.length; i++){ }

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öntemlerden 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"> <link rel=stylesheet href="stil_1.css" type="text/css"> <script type="text/javascript" src="sihirlimenu.js"></script> <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 &gt; </a> <ul class="altmenu" id="s1_0_0"> <li><a class="altlink" href="herhangi110.html" id="_1_1_0">&nbsp;110</a></li> <li><a class="altlink" href="herhangi120.html" id="_1_2_0">&nbsp;120</a></li> </ul> <a class="analink" href="#" id="_2_0_0" onclick="katla('s2_0_0'); this.blur()">200 &gt; </a> <ul class="altmenu" id="s2_0_0"> <li><a class="altlink"

< CHIP Workshop • 161 <

Web Programc›l›¤›

<<

href="herhangi210.html" id="_2_1_0">&nbsp;210</a></li> <li><a class="altlink" href="herhangi220.html" id="_2_2_0">&nbsp;220</a></li> <li><a class="altlink" href="#" onclick="katla('x2_3_0'); this.blur()">&nbsp;230 &gt; </a></li> <ul class="subaltmenu" id="x2_3_0">

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>

<li><a class="subaltlink" href="herhangi231.html" id="_2_3_1">&nbsp;&nbsp;231</a></li> <li><a class="subaltlink" href="herhangi232.html" id="_2_3_2">&nbsp;&nbsp;232</a></li> <li><a class="subaltlink" href="herhangi233.html" id="_2_3_3">&nbsp;&nbsp;233</a></li> </ul> <li><a class="altlink" href="#" onclick="katla('x2_4_0'); this.blur()">&nbsp;240 &gt; </a></li> <ul class="subaltmenu" id="x2_4_0"> <li><a class="subaltlink" href="herhangi241.html" id="_2_4_1">&nbsp;&nbsp;241</a></li> <li><a class="subaltlink" href="herhangi242.html" id="_2_4_2">&nbsp;&nbsp;242</a></li> </ul> <li><a class="altlink" href="herhangi250.html" id="_2_5_0">&nbsp;250</a></li> </ul> <a class="analink" href="#" id="_3_0_0" onclick="katla('s3_0_0'); this.blur()">300 &gt; </a> <ul class="altmenu" id="s3_0_0"> <li><a class="altlink" href="herhangi310.html" id="_3_1_0">&nbsp;310</a></li> <li><a class="altlink" href="herhangi320.html" id="_3_2_0">&nbsp;320</a></li> <li><a class="altlink" href="#" onclick="katla('x3_3_0'); this.blur()">&nbsp;330 &gt; </a></li> <ul class="subaltmenu" id="x3_3_0">

Bu sayfaya gelindi¤inde menünün 241 nolu eleman için aç›k ve seçili 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› parametre olarak yazman›z gerekir. Dikkat ederseniz bu sayfada biri menü di¤eri sayfan›n içeri¤i olarak 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" %>

<li><a class="subaltlink" href="herhangi331.html" id="_3_3_1">&nbsp;&nbsp;331</a></li> <li><a class="subaltlink" href="herhangi332.html" id="_3_3_2">&nbsp;&nbsp;332</a></li> <li><a class="subaltlink" href="herhangi333.html" id="_3_3_3">&nbsp;&nbsp;333</a></li> </ul> </ul> <a class="analink" href="herhangi400.html" id="_4_0_0">400</a> <a class="analink" href="herhangi500.html" id="_5_0_0">500</a> <a class="analink" href="herhangi600.html" id="_6_0_0">600</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

162• CHIP Workshop > >

>>
PHP için gibi.

Web Programc›l›¤›

} } var oncekiAktif; // bir önceki aktif objeyi kaydedecek <? include('menu.html') ?> 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")){ for (var i=0; i<ar.length; i++){ ar[i].style.display = "none"; // bir üst dü¤üm aç›k ise tüm alt ve üst dü¤ümleri kapat } } else { for (var i=0; i<ar.length; i++){ 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) var param2 = str.substring(1,2) var param3 = str.substring(3,4) 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ç ... aktiflestir(document.getElementById(str)) ve seçili hale getir } // 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"); for (var i=0; i<ar.length; i++){ ar[i].style.display = "none"; if (document.cookie != "") { 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() { stat = cookieGetir("stat"); } function cookieGetir(cookieIsmi) {

Ancak bu teknolojilerden hangisini tercih edece¤inizi bilemeyece¤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özlemlemelisiniz.

Cookie’li yöntem
Sayfalar›n dinamik olarak oluflturuldu¤u baz› durumlarda her bir sayfaya ça¤›rma ifllemini yapacak id numaras›n› eklemek zor olabilir. Bu gibi durumlarda 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 != "") {

< CHIP Workshop • 163 <

Web Programc›l›¤›

<<

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

onclick="cookieYaz(this.id)">&nbsp;210</a></li> <li><a class="altlink" href="herhangi220.html" id="_2_2_0" onclick="cookieYaz(this.id)">&nbsp;220</a></li> <li><a class="altlink" href="#" onclick="katla('x2_3_0'); this.blur()">&nbsp;230 &gt; </a></li> <ul class="subaltmenu" id="x2_3_0"> <li><a class="subaltlink" href="herhangi231.html " id="_2_3_1" onclick="cookieYaz(this.id)">&nbsp;&nbsp;231</a></li> <li><a class="subaltlink" href="herhangi232.html" id="_2_3_2" onclick="cookieYaz(this.id)">&nbsp;&nbsp;232</a></li> <li><a class="subaltlink" href="herhangi233.html" id="_2_3_3" onclick="cookieYaz(this.id)">&nbsp;&nbsp;233</a></li> </ul> <li><a class="altlink" href="#" onclick="katla('x2_4_0'); this.blur()">&nbsp;240 &gt; </a></li> <ul class="subaltmenu" id="x2_4_0"> <li><a class="subaltlink" href="herhangi241 . html" id="_2_4_1" onclick="cookieYaz(this.id)">&nbsp;&nbsp;241</a></li> <li><a class="subaltlink" href="herhangi242.html" <title></title> <meta http-equiv="Content-Type" content="text/html; id="_2_4_2" onclick="cookieYaz(this.id)">&nbsp;&nbsp;242</a></li> </ul> <li><a class="altlink" href="herhangi250.html" id="_2_5_0" onclick="cookieYaz(this.id)">&nbsp;250</a></li> </ul> <a class="analink" href="#" id="_3_0_0" onclick=" atla('s3_0_0'); this.blur()">300 &gt; </a> <ul class="altmenu" id="s3_0_0"> <li><a class="altlink" href="herhangi310.html" id="_3_1_0" onclick="cookieYaz(this.id)">&nbsp;310</a></li> <li><a class="altlink" href="herhangi320.html" id="_3_2_0" onclick="cookieYaz(this.id)">&nbsp;320</a></li> <li><a class="altlink" href="#" <td width="230" valign="top"> <a class="menuUst" href="#" onclick="katla('x3_3_0'); this.blur()">&nbsp;330 &gt; </a></li> <ul class="subaltmenu" id="x3_3_0"> <li><a class="subaltlink" href="herhangi331.html" id="_3_3_1" onclick="cookieYaz(this.id)">&nbsp;&nbsp;331</a></li> <li><a class="subaltlink" href="herhangi332.html" id="_3_3_2" onclick="cookieYaz(this.id)">&nbsp;&nbsp;332</a></li> <a <li><a class="subaltlink" href="herhangi333.html" id="_3_3_3" onclick="cookieYaz(this.id)">&nbsp;&nbsp;333</a></li> </ul> <ul </ul> <a class="analink" href="herhangi400.html" <li><a id="_4_0_0" onclick="cookieYaz(this.id)">400</a> <a class="analink" href="herhangi500.html" id="_5_0_0" onclick="cookieYaz(this.id)">500</a> <a class="analink" href="herhangi600.html" id="_6_0_0" onclick="cookieYaz(this.id)">600</a> </div> </ul> <a </td> <td width="500" valign="top"> <br> <h2>Sayfa 241</h2> <ul <b>Bo¤az ve Anadolu yakas› felç olabilir</b> <br><br> Istanbul Valili¤i Afet Yönetim Merkezi, bu akflam saatlerinde bafllamas› ve <li><a

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>

charset=windows-1254"> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-9"> <link rel=stylesheet href="stil_2.css" type="text/css"> <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>

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;"> class="analink" href="#" id="_1_0_0" onclick="katla('s1_0_0'); this.blur()">100 &gt; </a> class="altmenu" id="s1_0_0"> class="altlink" href="herhangi110.html" id="_1_1_0" onclick="cookieYaz(this.id)">&nbsp;110</a></li> class="altlink" href="herhangi120.html" id="_1_2_0" onclick="cookieYaz(this.id)">&nbsp;120</a></li>

class="analink" href="#" id="_2_0_0" onclick="katla('s2_0_0'); this.blur()">200 &gt; </a> class="altmenu" id="s2_0_0"> <li><a class="altlink" href="herhangi210.html" id="_2_1_0"

164 • CHIP Workshop > >

>>
</td> </tr> </table> </body> </html>

Web Programc›l›¤›

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>

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 sefer linke t›kland›¤›nda ayn› zamanda cookieYaz fonksiyonu ilgili id parametresiyle birlikte ça¤r›l›yor. Bu durumda en son t›klanan sayfan›n id numaras› cookie’de kay›tl› oluyor.
<a class="subaltlink" href="herhangi241.html" id="_2_4_1" onclick="cookieYaz(this.id)">&nbsp;&nbsp;241</a>

cookiemiz = document.cookie.split("; ") for (i=0; i<cookiemiz.length; i++) { if (cookieIsmi == cookiemiz[i].split("=")[0]) { return cookiemiz[i].split("=")[1] } } return 0 }

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)

Fonksiyonumuz ayn› cookie dosyas› içinde birden fazla de¤iflken kay›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 geri gönderiyor. Cookie’mizi silmek için kulland›¤›m›z fonksiyon ise benzer bir ifllevle 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 durumda oturumun sona ermesiyle cookie’ler silinmifl oluyor.
function cookieSil() { if (document.cookie != "") { 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’mizi yazd›ran fonksiyon cookieYaz()’da cookie’mizin de¤eri ile birlikte geçerlili¤ini yitirece¤i süreyi de bildiriyoruz. Bunu yapmazsan›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 kaydedilece¤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.
if (document.cookie != "") { stat = cookieGetir("stat"); }

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’deki StudioWeb+ bölümünde bulabilirsiniz.

Kay›tl› cookie de¤erini ziyaretçi bilgisayar›ndan okuyan fonksiyon
function cookieGetir(cookieIsmi) {

Numan Pekgöz numanpekgoz@chip.com.tr

< CHIP Workshop • 165 <

Java Serisi

<<

JAVA ile Programlama Bölüm 8
Bir 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.
Soyut s›n›flar
Soyut s›n›f kavram› asl›nda tamamen türetme ile iliflkilidir. Bu nedenle soyut s›n›flar›n anlaml› kullan›lmas› asl›nda bir türetme iflleminin yap›lmas›n› gerektirir. Türetme iflleminde hat›rlayaca¤›m›z gibi; bir s›n›f baflka bir s›n›f›n›n de¤iflken ve metotlar›n› alabilmektedir. Böylece önceden yaz›lm›fl birtak›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¤iflkenleri yazmam›z yeterli olacakt›r. Bir s›n›f içerisinde daha önce görmüfl oldu¤umuz metot tan›mlamalar›ndan farkl› olarak “soyut metot” denilen bir metot tan›mlamas› daha vard›r. Bir metot soyut olarak 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 de hiçbir fley yaz›lmaz. Örne¤in: ... public abstract String ismiVer(); ... Yukar›daki örnekte bir soyut metot bildirimi yap›lm›fl ve içerisi yaz›lmadan noktal› virgül ile bildirim tamamlanm›flt›r. ‹kinci kural olarak da içerisinde soyut metot 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. yaz›l›r. O halde içerisinde soyut metotlar bar›nd›ran bir s›n›ftan türetme yap›ld›¤›nda, 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›flar›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 metotlar› 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 metotlar›n birbirinden ba¤›ms›z kiflilerin tasarlayaca¤› 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 inceledi¤imizi düflünüyorum. fiimdi yukar›da okuduklar›m›z› pekifltiren oldukça klasik bir örnek yapal›m. Bu örnekte soyut metot kullan›m›n› içerdi¤i gibi asl›nda türetme iflleminin de güzel bir kullan›m›n› göstermektedir. Örne¤imizde temel olarak “Sekil” ad›nda bir s›n›f yer almakta. Bu s›n›f tüm ge47 • CHIP Workshop > >

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 soyut metodu kendi içerisinde tamamen yazmak zorundad›r. 3) ‹çerisinde soyut metot bar›nd›ran s›n›flara soyut s›n›f denilir ve böyle bir s›n›f›n bildiriminin bafl›na "class" anahtar sözcü¤ünden ö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›ftan türetilen s›n›flar içerisinde yaz›lmaktad›r. Temel s›n›f içerisinde bu metotlar›n nas›l iflleyeceklerinden ziyade geri dönüfl de¤erlerinin ve parametrelerinin ne olduklar›

>>

Java Serisi

Sekil.java S›n›f›

Ucgen.java S›n›f›

< CHIP Workshop • 48 <

Java Serisi

<<

Dikdortgen.java S›n›f›

ometrik flekillerin temelini teflkil etti¤inden, içerisinde yer alacak olan "alanHesapla", "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 metotlar›n› soyut olarak tasarlay›p gerekli olan geometrik flekle iliflkin bir s›n›f› da bu s›n›ftan türetirsek, soyut olan bu metotlar› ilgili fleklin özelliklerine göre yeniden yazabiliriz. Bu düflünceyle de örne¤imizde “Sekil” s›n›f›ndan türeyen “Dikdortgen” ve “Ucgen” s›n›flar›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›lm›fl olan herhangi bir soyut metodun "Dikdortgen.java" ya da "Ucgen.java" içerisindeki davran›fl biçimi farkl› olacakt›r. Fakat her ikisinin de bu soyut metotlar› içerece¤i garanti edilmifltir.

Tüm metotlar› soyut olarak yaz›lm›fl s›n›fa arayüz (interface) denilmektedir. Mesela afla¤›daki örnekte verilen "Personel" isimli s›n›f›n içerisinde yer alan tüm metotlar soyut oldu¤undan bu s›n›f bildiriminin bafl›na "abstract" anahtar sözcü¤ü yerine "interface" anahtar sözcü¤ü yaz›lm›flt›r. Ayr›ca arayüzlerin bildiriminde "class" anahtar sözcü¤ü kullan›lmaz:
public interface Personel {

Arayüzler
Arayüzler asl›nda soyut s›n›flardan farkl› de¤ildir. Yukar›da da anlatt›¤›m›z gibi, içerisinde 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.

public abstract String personelAdiniVer(); public abstract String personel DerecesiniVer(); public abstract void personelBolumunuDegistir(int bolum); public abstract int personelBolumunuVer();

49• CHIP Workshop > >

>>

Java Serisi

SekilGenel.java S›n›f›

}

(Exceptions) [1]
Yukar›da da bahsetti¤im gibi Java'da program›n çal›flmas› s›ras›nda "exception" olarak isimlendirilen bir tak›m hatalar meydana gelebilir. Bu hatalar›n ele al›nmas› ve program ak›fl›n›n buna göre düzgün bir yere yönlendirilmesi gerekmektedir. Java'da bu ifllemlerin yap›lmas›n› sa¤layan bir mekanizma mevcuttur. Asl›nda çal›flma zaman› s›ras›nda meydana gelen her "exception", "Throwable" olarak isimlendirilen bir nesne türünden örnekler olarak yarat›lmaktad›r. Bu nesnelerin baz›lar›n› örneklerimizde ele alaca¤›z. Öncelikle böyle bir nesnenin Java'da nas›l yarat›ld›¤›n› ve nas›l gönderildi¤ini inceleyelim. Afla¤›daki örnekte verilen programda asl›nda bir yaz›m hatas› yoktur. Program baflar›l› bir flekilde derlenecek ancak s›f›ra bölme ifllemi yüzünden çal›flma zaman› s›ras›nda bir "exception" yarat›lacakt›r. Buradaki örnekte yarat›lan "exception" nesnesnin türü "ArithmeticException" d›r:
class ExceptionDeneme { public static void main(String arg[]) { int n = 4 / 0; System.out.println("Tamam"); } }

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"); } }

E¤er bir s›n›f bir arayüzden türetilerek elde ediliyorsa, bu s›n›f bildiriminde "extends" anahtar sözcü¤ü yerine "implements" anahtar sözcü¤ü yaz›lmaktad›r. Mesela "Personel" s›n›f›ndan bir türetme yap›larak "Müdür" isimli bir s›n›f yaz›lacaksa, bu s›n›f›n bildirimi afla¤›daki flekilde olmal›d›r:
public class Mudur implements Personel { ... }

Bunun d›fl›nda, arayüzler ile soyut s›n›flar›n kullan›m› tamamen ayn› prensibe sahip oldu¤undan daha fazla detaya inmeyece¤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 pratik kazanmak ve konuyu tam anlam›yla kavramak, ancak bol bol program yazmakla mümkün olacakt›r. Bu bafll›klara iliflkin konu anlat›mlar›n› sonland›rmakla beraber yine de bol örnek ve uygulama üzerinde detayl› 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›flma 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›
< CHIP Workshop • 50 <

Bu örne¤i ExceptionDeneme.java dosyas› ad›yla kaydedip önce javac ile derledikten sonra java ile çal›flt›rmak istedi¤imizde ArtihmeticException yarat›lacakt›r. Afla¤›daki örnekte ise biz kendi elimizle

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 exception yarat›lacak ve bu yarat›lan nesne de "throw" anahtar sözcü¤ü ile gönderilecektir. Bunun neticesinde bu program yine javac ile derlenebilecek ancak java komutu ile çal›flt›r›lmak istendi¤inde "IllegalArgumentException" üretecektir. Bu durumda program son sat›ra gelmeden sonlanacak ve dolay›s› ile ekranda "Program Bitiyor" yaz›s› ç›kmayacakt›r. Peki o halde gerek bizim iste¤imizle gerek kontrolsüz olarak üretilen bu "exception" nesneleri ne flekilde ele al›nabilir ve program ak›fl› ne flekilde kontrol alt›nda tutulabilir bunu inceleyelim..

Java Serisi

<<

ExceptionDeneme3.java S›n›f›

Hatan›n Ele Al›nmas› (Exception Handling)
Az önceki örneklerde oldu¤u gibi meydana 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 "ExceptionDeneme2" isimli s›n›fta hatay› düzgün br flekilde yakalayacak mekanizma ile tekrar yazal›m. Bu yeni s›n›f›n ad›na da "ExceptionDeneme3" 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›ktan sonra program ak›fl› önceki örneklerde oldu¤u gibi sonlanmayacakt›r. Bu program›n çal›flmas› neticesinde ekrana: Yakalanan hata:java.lang.IllegalArgumentException 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. Buna iliflkin detayl› bir incelemeyi daha sonra yapaca¤›z. fiimdilik sadece hata yakalama mekanizmas›na yo¤unlaflmak yeterli olacakt›r. Hata yakalama mekanizmas›nda son bahsedece¤imiz fley de hatalar›n yukar›daki ö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 { } ...

da temel özellikleriyle ö¤renmifl bulunmaktay›z. Bizim bu flekilde kulland›¤›m›z mekanizmay› ilerleyen örneklerimizde bazen zorunlu 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›flar›n› kullan›rken, bu s›n›flar›n içerisindeki bir tak›m metotlar›n exception üretiyor olmalar›ndan dolay›, kodun ilgili k›s›mlar›n› try bloklar› içerisinde yazmak ve daha sonra da catch bloklar› ile üretilmesi muhtemel exception nesnelerini yakalayacak halde program yazmak zorunda kalacaks›n›z. Yeri geldikçe zaten bu kullan›mlara de¤inece¤iz.

Java'da Dosya ‹fllemlerine Girifl
Programc›l›¤›n vazgeçilmez ifllerinden birisi de disk üzerindeki dosyalarla çal›flmakt›r. Buraya kadar konular› ö¤renmek amac›yla kullanm›fl oldu¤umuz örneklerde asl›nda veriler sadece o anda çal›flan program içerisinde ele al›nabiliyordu. Profesyonel anlamda yaz›lan programlar›n ço¤u kullan›c›n›n ihtiyaç duyaca¤› verileri dosyalar üzerinde saklamakta ve gerekti¤inde bu dosyalardan verileri okuyarak ya da yeni verileri dosyalara yazarak iflleyifllerini sürdürmektedir. Bu nedenle programc›l›kta amaç ne olursa olsun dosyalar üzerinde ifllem yapma ihtiyac› mutlaka karfl›n›za ç›kacakt›r. Bu dersimizde sadece girifl yapaca¤›m›z
41 • CHIP Workshop > >

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›

>>

Java Serisi

Dosyalar.java Örne¤i

Dosyalar.java program ç›kt›s›

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 bafllayal›m. B› s›n›f disk üzerinde yer alan bir dosyay› program içerisinde de bir nesne haline getirerek programc›n›n dosya üzerinde ifllem yapabilmesini sa¤lamaktad›r. S›n›f›n bafllang›ç fonksiyonu temel olarak bir dosyan›n yol (path) bilgisini alarak File nesnesini 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, “File” s›n›f›n›n bafllang›ç fonksiyonuna parametre olarak verilen bu yollar›n diskte de düzgün bir flekilde mevcut olmas› gerekmektedir. Yani bulundu¤umuz dizinde Dos< CHIP Workshop • 52 <

ya.txt ya da “c:\ornekler\” dizini alt›nda bir “dosya.txt” ya da “/home/erman/” dizini içerisinde bir “Dosyam.tx”t dosyas› bulunmal›d›r. Aksi takdirde “dosya1”, “dosya2” ya da “dosya3” ismi ile temsil edilen “File” nesneleri düzgün bir flekilde yarat›lamayacakt›r. Not: Java'da dosya ifllemlerinin yap›labilmesi için io.* kütüphanelerinin program›n en üst sat›r›nda “import” anahtar sözcü¤ü ile programa dahil edilmesi gerekmektedir. 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 yaratarak asl›nda diskte yer alan bir dosya bilgilerinin 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 kadar›yla s›n›rl› de¤ildir. Konuya iliflkin çok daha detayl› ve e¤lenceli örnekleri bir sonraki 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ç ermana@bilgi.edu.tr

Photoshop Serisi

Herkes için Photoshop
Günefl Tutulmas›
Öncelikle istedi¤iniz boyutta yeni bir belge oluflturun. fiimdi [D] tufluna basarak ön ve arka plan renklerini siyah ve beyaz olacak flekilde s›f›rlay›n. Arka plan rengini siyah ile boyad›ktan sonra çal›flma alan›n›z›n tam ortas›na Filter / Render / Lens Flare seçene¤i yard›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. fiimdi ayn› efektleri yukardan ve afla¤›dan da uygulayabilmemiz için resmi döndürmemiz gerekiyor. Bunun için Image / Rotate Canvas / Rotate 90 CW seçene¤i kullan›n. Biraz önceki rüzgar efektini 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 uygulay›n. Son olarak resmi aynen bir kez daha döndürün.

<<

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 farkl› kategoride örnekler yer alacak.

1

2

3

1

2

3

Termal Kamera
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 foto¤raf›n›z› aç›n. ‹fllemi Gradient mapping kullanarak 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 siyah beyaz skalan›n hemen sa¤›ndaki küçük oka t›klay›n. Aç›lan menüden en alt s›radaki ilk gökkufla¤› 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 benzeri di¤er efektleri uygularsan›z da sa¤daki en son foto¤rafta gördü¤ünüz gibi farkl› etkiler de yakalayabilirsiniz.

1

2

3

4

5

6

Resimden Vektöre Dönüflüm
Bu ifllem asl›nda san›ld›¤› kadar zor de¤ildir. Bunun için foto¤raf›n›z› açt›ktan sonra tek yapman›z gereken Filter / Artistics menüsü alt›nda yer alan Cutout seçene¤ini kullanmak. Cutout penceresi 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 oynaman›z gerekebilir.

9

7

8
39 • CHIP Workshop > >

>>

Photoshop Serisi

Gerçekçi Damga
‹lk olarak damga olarak kullanmak istedi¤iniz metni oluflturun. Ard›ndan bunun hemen çevresine 5 piksellik bir dikdörtgen çizin. [Ctrl]+[E] ile katmanlar› birlefltirebilirsiniz. Hemen ard›ndan Filter / Sketch / Torn Edges filtresini sa¤daki resimdeki ayarlar› kullanarak uygulay›n. Son olarak da damgaya gerçekçi silik görüntüsünü vermek için %60 opacity de¤erinde ve 9 piksel kal›nl›¤›nda bir silgi kullanarak rastgele silin.

1

3

2

Piksel sanat›: Gecekondu
Hat›rlarsan›z daha önce küçük bir duvar örne¤i ile piksel sanat›n›n nas›l bir fley oldu¤unu temel anlamda görmüfltük. fiimdi biraz daha ilerletip basit bir bina yapmaya çal›flaca¤›z. ‹lk olarak 300x300 boyutunda 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 boyutunu da 1 piksel olarak ayarlay›n.

1

2

3

fiimdi yeni bir katman (layer) oluflturun. Art›k piksel binam›z› yapmaya bafllayabiliriz. Burada unutmaman›z gereken çizgi çizerken ayn› perspektifi korumak olmal›d›r. Yukar› do¤ru 1, yana do¤ru 2 piksel ve köflelerde de 3 piksel kullanmam›z gerekir. Böylece en do¤ru görünen çizgiyi yaratabilirsiniz. Resimde de görebilece¤iniz gibi küçük bir bina yapaca¤›m›z için taban›n› da küçük çizdik. fiimdi [Ctrl]+[J] tufluna bas›n.

4

5

6

Bu flekilde taban›n kopyas›n› ç›karm›fl olduk. Binam›za yükseklik katmak için yeni katman› bir miktar yukar› almak yeterli olacakt›r. Art›k dik duvarlar› çizebilirsiniz. E¤er sol duvarda çal›fl›yorsan›z tüm dik çizgileri sol taraftaki pikselden afla¤› do¤ru çizmeye özen gösterin. Sa¤ taraf için de tabii ki bu durumun tam tersi geçerli olacakt›r. Bu flekilde perspektifi koruyabilirsiniz. Art›k renklendirme ifllemine bafllayabiliriz.

8

9

7

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. Kutudan çok eve benzemesi için kap› ve pencereleri de eklemeyi unutmay›n. Gölgelendirme için ise hep ortaya bakan taraf› kullan›n ve seçti¤iniz renkten daha aç›k bir ton seçin. En sa¤daki resmi örnek alabilirsiniz.

10

11

12

< CHIP Workshop • 40 <