Web Programc›l›¤›
<<
Sitenizi bu menüden
mahrum b›rakmay›n
Ziyaretçinizi en son b›rakt›¤› noktada karfl›layacak yetenekte bir menü sistemine ne dersiniz? Birazc›k
çabayla harikulade özellikleri olan bir menüye sahip olabilirsiniz.
S
itelerin ifllevsellik bak›m›ndan flüphesiz en can al›c› k›sm›, kul-
land›klar› navigasyon ve menü sistemleridir. ‹yi tasarlanm›fl
bir menü sistemi, sitenize görsellik ve ifllevsellik aç›s›ndan do-
ping etkisi yapar. Ayn› flekilde, kötü bir menünün sitenizden neler
götürdü¤ünü tahmin bile edemezsiniz. Bu ay sizlerle oldukça etkili
ve bir o kadar da kullan›fll› bir menü çal›flmas› yapaca¤›z.
Menümüzün en önemli özelli¤i ziyaretçiler üzerinde olumlu izle-
nim b›rakacak etkileflime sahip ve teknik olarak geliflime aç›k olma-
s›. Mesela menünüzdeki elemanlar› diledi¤inizce de¤ifltirebilir, bir
iki t›klamayla tamamen görsel özelliklerini ve stilini de¤ifltirebilirsi-
niz. Menü, ziyaretçinizin istedi¤i sayfaya ulaflabilmesine imkan ve-
rece¤i gibi sitede hangi konumda bulundu¤unu da belirtebilecek.
Bununla birlikte dilerseniz cookie’lerden (çerezlerden) faydalanarak
menünüze çok daha ileri seviyede bir ifllevsellik katabilirsiniz. Mese-
la bir sayfaya gelindi¤inde kendili¤inden menünün o sayfaya göre
hal almas› ve durumunu de¤ifltirmesi gibi. Ya da ziyaretçinizi tekrar
b›rakt›¤› yerden karfl›lamas› gibi.
Bunca zengin özelli¤e sahip olacak bir menü kullanman›n bir be-
deli olmal› elbette. Bu bak›mdan bu ayki atölyenin, script’leri haz›r
kullanmaya al›flm›fl webmaster’lardan çok iflin tekni¤ini ve temelini
merak eden gelifltiricilere hitap ediyor oldu¤unu söyleyebiliriz. Buna
karfl›n bir defas›nda baz› fleyleri kavrad›ktan sonra menünüzü ken-
dinize özgün olarak daha da gelifltirebilmeniz mümkün. Bu arada
yeri gelmiflken hemen hat›rlatal›m. Script’leri haz›r kullanmaya al›fl-
m›fl webmaster’lar ‹nternette y›¤›nla benzer menü script’i bulabilir-
ler. Samimi söylemek gerekirse, bu menülerin ço¤unun sitenize
adapte edilmesi daha kolay. Bu tip menülere örnek olacak kullan›fll›
bir menü sistemini CD’de Jenerik menü ad› alt›nda bulabilirsiniz. Bu
tip menüler birçok özelli¤ini de¤ifltirebilmenize olanak tan›salar da
bunun d›fl›nda basit de olsa ilave bir de¤iflikli¤e ihtiyac›n›z olursa ifli-
niz zor demektir. Zira karmafl›k kodlar içinde bunu yapabilmeniz için
uzmanl›k derecesinde JavaScript bilgisine ve baya¤› da bir zamana
ihtiyaç duyars›n›z. Bu ayki çal›flmam›z›n sahip olaca¤› özelliklere bu
tarz menülerin sahip olamayaca¤›n› bilmenizi isterim. Üstelik bu
menü teknik aç›dan de¤iflikli¤e daha aç›k oldu¤undan, kendiniz me-
nüyü daha da gelifltirebilirsiniz. Bu ön bilgiden sonra iflimize girifle-
biliriz.
Temel teknik: CSS display property’si
Menümüzün temelini oldukça kullan›fll› bir CSS özelli¤i, display
property’si oluflturuyor. Önce bu özellik üzerine biraz deneyim kaza-
nal›m.
Display property’si tan›mland›¤› sayfa elementinin sayfa üzerin-
de di¤er sayfa elementleri aras›nda yer al›p almamas›n› kontrol ed-
er. Bir bak›ma görünüp görünmemesini kontrol eder diyebiliriz ama
hemen uyaral›m bu property DHTML uygulamalar›nda s›kça kulla-
n›lan visibility (görünürlük) property’sinden farkl›d›r. fiöyle ki visibi-
lity property’si genellikle sayfa üzerine 3. boyut fleklinde konumlan-
d›r›lan katmanlar›n görünürlü¤ünü kont-
rol eder. Salt (absolute) pozisyonlama yön-
temiyle sayfaya konufllanm›fl bir katman›n
görünür olmas› ya da kaybolmas›n›n say-
fan›n geri kalan›n›n ve di¤er katmanlar›n
düzenlerinde bir etkisi olmaz. Bu özelli¤i
flimdiye kadar StudioWeb’te yer alan
DHTML uygulamalar›m›z›n bir ço¤unda
kullanm›flt›k. Bu sefer kullanaca¤›m›z disp-
lay property’si ise 2 boyut olarak düflün-
meniz gereken bir ortamda sayfan›n düze-
nini yeniden oluflturuyor. Birazdan incele-
yece¤imiz örnek ne demek iste¤imi daha
iyi aç›klayacak.
Property’mizin alabilece¤i üç muhte-
mel de¤er vard›r:
display property’sinin de¤erleri
block: Tan›mlanan elementi önüne ve ar-
kas›na birer sat›r ekleyerek ekran içeri¤i
içine katar.
152• CHIP Workshop >>
 >> Web Programc›l›¤›

inline: Tan›mlanan elementi ekran içeri¤i içine katar ama önüne Bu örne¤i çal›flt›rd›¤›n›zda 4 adet radyo dü¤mesinden oluflan küçük
ve arkas›na sat›r eklemez. bir form parças›yla karfl›laflacaks›n›z. Radyo dü¤melerinden sonun-
cusunun seçilmesi durumunda, ziyaretçinizin di¤er ödeme yönte-
none: Tan›mlanan elementi ekran içeri¤i içinden kald›r›r minin aç›klamas›n› girebilmesi için kendili¤inden bir bilgi girdi alan›
belirecek. Farkl› yöntem seçildi¤inde ise bu alan yok olacak. Dene-
Bu de¤erler sayfa kodunda belirtilebilece¤i gibi, bunlar›n script ile yin.
kontrol edilebilmesi de mümkündür. Burada dikkatinizi çekmek istedi¤im nokta girdi alan›n›n görü-
nüp kaybolmas›yla sayfan›n alt›nda kalan yaz›n›n nas›l sayfan›n üst
Form.html k›sm›na uygun ola-
rak yer de¤ifltirdi¤i.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0  Buradan sayfan›n
Transitional//EN"> içeri¤inin bizim is-
teklerimize göre ta-
<html> ray›c› taraf›ndan
<head> tekrar düzenlendi¤i
<title></title> sonucunu ç›karabi-
<meta http-equiv="Content-Type"  liriz. Bu çok önemli
content="text/html; charset=windows-1254"> elbette. Zira display
<meta http-equiv="Content-Type"  property’si ile sayfa-
content="text/html; charset=ISO-8859-9"> dan kaybolma olay›
<script language="JavaScript"> asl›nda yerleflim dü-
function kontrolEt() { zeni aç›s›ndan bu
for (i=0; i<document.formum.odeme.length; i++) { blo¤un sayfadan ç›-
if (document.formum.odeme[3].checked) kar›ld›¤› ve hiç yok-
document.getElementById('sekil').style.display='block'; mufl gibi davran›ld›-
else ¤› anlam›na gel-
document.getElementById('sekil').style.display='none'; mekte. Bu bak›m-
} dan hiç bir pozis-
} yonland›rma hesap-
</script> lamas› ya da ifllemi
yapmad›¤›m›z halde
</head> sayfan›n di¤er ele-
manlar› buna göre
tamamen taray›c›
<body bgcolor="#ffffff"> taraf›ndan tekrar-
dan düzenlenmekte.

<form name="formum"> function kontrolEt() {

<b>Ödeme flekli:</b><br>
<input type="radio" name="odeme" value="k" 
onclick="kontrolEt()"> Kredi kart›<br>
<input type="radio" name="odeme" value="p" 
onclick="kontrolEt()"> Peflin<br>
<input type="radio" name="odeme" value="h" 
onclick="kontrolEt()"> Havale<br>
<input type="radio" name="odeme" value="d" 
onclick="kontrolEt()"> Di¤er<br>
<span id="sekil" style="display:none">
Bu alana di¤er ödeme flekli aç›klamas›n› girebilirsiniz:
<input type="text" name="digerOdemeSekli">
</span>
<br><br>
Sayfan›z›n geri kalan bölümü
</form>
</body>
</html>
for (i=0; i<document.formum.odeme.length; i++) {
if (document.formum.odeme[3].checked)
document.getElementById('sekil').style.display='block';
else
document.getElementById('sekil').style.display='none';
}
}
Bu fonksiyonun yapt›¤› ifl son radyo dü¤mesi seçildi¤i anda flarta
ba¤l› olan blo¤u göstermek ya da kaybetmek. Fonksiyonumuzda en
önemli sat›rlar display property’sinin script’le kontrolünü sa¤layan
sat›rlar
document.getElementById('sekil').style.display='block';
Yukar›daki sat›r›n anlam›, sekil referans isimli sayfa elementini gös-
ter ya da
document.getElementById('sekil').style.display='none';
sekil referans isimli sayfa elementini kaybet. San›r›m sekil kimlikli
sayfa elementini de tan›mlam›fl olmam›z gerekti¤ini tahmin edebi-

<< CHIP Workshop • 153

 Web Programc›l›¤›
<<
lirsiniz. for (var i=0; i<ar.length; i++){
if (ar[i].className=="subaltmenu"){
<span id="sekil" style="display:none"> ar[i].style.display = "none"; // 
Bu alana di¤er ödeme flekli aç›klamas›n› girebilirsiniz: E¤er baflka bir alt dü¤üm aç›k ise ayn› seviyedeki tüm alt dü¤ümleri kapat
<input type="text" name="digerOdemeSekli"> }
</span> }
}
Gördü¤ümüz bu basit örnek, form gibi web sayfas› içeri¤inin ziya- //fiimdi elementi aç
retçi ile etkileflime girebilmesini istedi¤imiz durumlarda kullanabi- el.style.display = "block";
lece¤imiz önemli bir tekni¤i kaps›yor. Bu tekni¤i kullanarak form }
alanlar›n› flarta ba¤l› olarak tekrardan düzenleyebilir, gereksiz fazla- else{
l›klar› dinamik olarak an›nda yok edebilirsiniz. Mesela bu yöntemle el.style.display = "none";
ziyaretçinizin yaz›c›dan form ç›kt›s›n› ald›¤› anda sadece ilgili alan- }
lar› sayfada gösteren uygulamalar üretebilirsiniz. }
Gelelim menümüze. Öncelikle menümüzün kodlar›n› bir defada }
görelim ve nas›l çal›flt›¤›n› test edelim.
function acil(str){ // istenen elemente ulaflana kadar aç ve seçili hale getir
Sihirlimenu.html // id namaras›n› analiz et
var param1 = str.substring(0,1)
<html> var param2 = str.substring(1,2)
<head> var param3 = str.substring(3,4)
<title></title> var param4 = str.substring(5,6)
<meta http-equiv="Content-Type" content="text/html; 
charset=windows-1254"> tumAltKapat();
<meta http-equiv="Content-Type" content="text/html; 
charset=ISO-8859-9"> if (param4==0){
<link rel=stylesheet href="stil_1.css" type="text/css"> if (param3==0){ // 
E¤er 1. seviyede linkse (dü¤üm de¤ilse) sadece seçili hale getir
<script type="text/javascript"> aktiflestir(document.getElementById(str))
<!-- }
else { // E¤er 1. seviyede dü¤ümse ..
function tumAltKapat(){ // 1. seviyeye kadar tüm altlar› kapat katla("s" + param2 + "_" + 0 + "_" + 0); // 
var ar = document.getElementsByTagName("ul"); bir üstü aç ...
for (var i=0; i<ar.length; i++){ aktiflestir(document.getElementById(str))
ar[i].style.display = "none"; // ve seçili hale getir
} }
} }
else {// E¤er 2. seviyede dü¤ümse ..
var oncekiAktif; // bir önceki aktif objeyi kaydedecek katla("s" + param2 + "_" + 0 + "_" + 0); // iki üstünü aç 
var classOncekiAktif; // bir önceki aktif objenin ola¤an class ismini  ...
kaydedecek katla("x" + param2 + "_" + param3 + "_" + 0); // 
bir üstü aç ...
aktiflestir(document.getElementById(str)) // ve 
function katla(obj){ // navigasyon seçili hale getir
if(document.getElementById){ }
var el = document.getElementById(obj); // id numaras› verili nesne }
var ar = document.getElementsByTagName("ul"); // <ul> 
tak›l› tüm elementler function aktiflestir(obj){ // seçili hale getirir
if(el.style.display != "block"){ //  deaktiflestir();
e¤er element görünür durumda de¤ilse aç // bir önceki seçili olan› kaydet
//önce di¤erlerini kapat oncekiAktif = obj; // seçili hale getirilecek element
if (obj.indexOf("x")){ classOncekiAktif = obj.className; // 
for (var i=0; i<ar.length; i++){ seçili hale getirilecek elementin ola¤an class ismi
ar[i].style.display = "none"; // 
bir üst dü¤üm aç›k ise tüm alt ve üst dü¤ümleri kapat obj.className = "secili";
} }
}
else { function deaktiflestir(){ // seçili olan› resetle 

154• CHIP Workshop >>

 >> Web Programc›l›¤›

if (oncekiAktif) {oncekiAktif.className = classOncekiAktif;} id="_2_3_1">&nbsp;&nbsp;231</a></li>

} <li><a 
class="subaltlink" href="herhangi232.html" 
function degis(){tumAltKapat();} // ilk seviyeye kadar kapat  id="_2_3_2">&nbsp;&nbsp;232</a></li>
(Menüyü S›f›rla) <li><a 
class="subaltlink" href="herhangi233.html"
id="_2_3_3">&nbsp;&nbsp;233</a></li>
--> </ul>
</script> <li><a 
</head> class="altlink" href="#" onclick="katla('x2_4_0'); this.blur()">
&nbsp;240 &gt; </a></li>
<body leftmargin="0" topmargin="0"  <ul class=" 
marginheight="0" marginwidth="0"  subaltmenu" id="x2_4_0">
bgcolor="#ffffff"> <li><a 
class="subaltlink" href="herhangi241.html"
id="_2_4_1">&nbsp;&nbsp;241</a></li>
<li><a 
<!-- ÖNEML‹: id numaralar›nda en fazla 1 basamakl› bir de¤er kullan›n. class="subaltlink" href="herhangi242.html" 
10'dan fazla say›da eleman kullanacaksan›z _4_10_3 yerine _4_A_3 gibi id="_2_4_2">&nbsp;&nbsp;242</a></li>
de¤erler kullan›n. --> </ul>
<li><a 
class="altlink" href="herhangi250.html"
<a class="menuUst">Menu</a> id="_2_5_0">&nbsp;250</a></li>
<div id="menu" style="position:absolute; 
background-color:#EBEBEB; top:21; left:0; width:0;  </ul>
height:0; visibility:visible; z-index:0;">
<a class="analink" href="#"
<a id="_3_0_0" onclick="katla('s3_0_0'); this.blur()">300 &gt; </a>
class="analink" href="#" id="_1_0_0" onclick="  <ul class="altmenu"
katla('s1_0_0'); this.blur()">100 &gt; </a> id="s3_0_0">
<ul  <li><a 
class="altmenu" id="s1_0_0"> class="altlink" href="herhangi310.html"
id="_3_1_0">&nbsp;310</a></li>
<li><a  <li><a 
class="altlink" href="herhangi110.html" class="altlink" href="herhangi320.html"
id="_1_1_0">&nbsp;110</a></li> id="_3_2_0">&nbsp;320</a></li>
<li><a  <li><a
class="altlink" href="herhangi120.html"  class="altlink" href="#" onclick="katla('x3_3_0'); this.blur()">&nbsp;330
id="_1_2_0">&nbsp;120</a></li> &gt; </a></li>
</ul> <ul class="
subaltmenu" id="x3_3_0">
<a class="analink" href="#"  <li><a 
id="_2_0_0" onclick="katla('s2_0_0'); this.blur()">200 &gt; </a> class="subaltlink" href="herhangi331.html"
<ul class="altmenu"  id="_3_3_1">&nbsp;&nbsp;331</a></li>
id="s2_0_0"> <li><a 
<li><a  class="subaltlink" href="herhangi332.html"
class="altlink" href="herhangi210.html" id="_3_3_2">&nbsp;&nbsp;332</a></li>
id="_2_1_0">&nbsp;210</a></li> <li><a 
<li><a  class="subaltlink" href="herhangi333.html"
class="altlink" href="herhangi220.html" id="_3_3_3">&nbsp;&nbsp;333</a></li>
id="_2_2_0">&nbsp;220</a></li> </ul>
<li><a  </ul>
class="altlink" href="#" onclick="katla('x2_3_0'); this.blur()">&nbsp;230  <a class="analink" href=" 
&gt; </a></li> herhangi4.html" id="_4_0_0">400</a>
<ul class=" <a class="analink" href=" 
subaltmenu" id="x2_3_0"> herhangi5.html" id="_5_0_0">500</a>
<li><a  <a class="analink" href=" 
class="subaltlink" href="herhangi231.html"  herhangi6.html" id="_6_0_0">600</a>

<< CHIP Workshop • 155

 Web Programc›l›¤›
<<
border-left:1px solid #EAB8D2;
border-top:1px solid #EAB8D2;
</div> /*border-right:1px dotted #7F7F7F;*/
border-bottom:1px dotted #7F7F7F;
}
<!-- Bu bölümü sonradan silebilirsiniz -->
<div style="position:absolute; top:10; left:250; width:200;
height:0; visibility:visible; z-index:0;">
1. model:<br> a.menuUst
<a href="#" onclick="acil('_1_1_0')">aç›l  {
1_1_0</a><br> display: block;
width: 200px;
<a href="#" onclick="acil('_2_4_1')">aç›l  font: 11px/19px Verdana;
2_4_1</a><br> font-weight:bold;
<a href="#" onclick="acil('_4_0_0')">aç›l  text-decoration: none;
4_0_0</a><br> padding: 0 0 0 10px;
<a href="#" onclick="degis()">ilk seviyeye  color: #ffffff;
kadar katlan</a><br> background: #B2005D;
<a href="#" onclick="deaktiflestir()">seçili  border-left:1px solid #B2005D;
olan› reset et</a><br> border-top:1px solid #B2005D;
<br> /*border-right:1px dotted #7F7F7F;*/
</div> border-bottom:1px solid #B2005D;
<!-- / Bu bölümü sonradan silebilirsiniz --> }

</body> a.analink
</html> {
display: block;
Bu kodlar› oturup yazman›z› beklemiyorum elbette. CD’deki ör- width: 200px;
nekten kopyalayabilirsiniz. Ayn› klasörde menümüzün kullanaca¤› font: 11px/18px Verdana;
stili bar›nd›ran CSS dosyas›n› da bulundurmay› unutmay›n. text-decoration: none;
padding: 0 0 0 10px;
Stil_1.css
color: #333333;
.secili background: #EBEBEB;
{ border-left:1px solid #EBEBEB;
display: block; border-top:1px solid #EBEBEB;
width: 200px; /*border-right:1px dotted #7F7F7F;*/
font: 11px/18px Verdana; border-bottom:1px dotted #7F7F7F;
text-decoration: none; }
padding: 0 0 0 10px;
a.analink:hover
color: #333333; {
background: #EAB8D2; display: block;
border-left:1px solid #EAB8D2; width: 200px;
border-top:1px solid #EAB8D2; font: 11px/18px Verdana;
/*border-right:1px dotted #7F7F7F;*/ text-decoration: none;
border-bottom:1px dotted #7F7F7F; padding: 0 0 0 10px;
}
.secili:hover color: #333333;
{ background: #DFDFDF;
display: block; border-left:1px solid #DFDFDF;
width: 200px; border-top:1px solid #DFDFDF;
font: 11px/18px Verdana; /*border-right:1px dotted #7F7F7F;*/
text-decoration: none; border-bottom:1px dotted #7F7F7F;
padding: 0 0 0 10px; }

color: #333333; a.altlink

background: #EAB8D2; {

156 • CHIP Workshop >>

 >> Web Programc›l›¤›
display: block;
width: 200px;
font: 11px/18px Verdana;
text-decoration: none;
padding: 0 0 0 10px;
color: #333333;
background: #E2D5E6;
border-left:1px solid #E2D5E6;
border-top:1px solid #E2D5E6;
/*border-right:1px dotted #7F7F7F;*/
border-bottom:1px dotted #7F7F7F;
} HTML sayfan›zda
a.altlink:hover
{
display: block;
width: 200px;
font: 11px/18px Verdana;
text-decoration: none;
padding: 0 0 0 10px;
color: #333333;
background: #DECFE3;
border-left:1px solid #DECFE3;
border-top:1px solid #DECFE3;
/*border-right:1px dotted #7F7F7F;*/
border-bottom:1px dotted #7F7F7F;
} menüdeki her bir eleman›n bir id numaras› oldu¤u ve bu numaran›n
a.subaltlink
{
display: block;
width: 200px;
font: 11px/18px Verdana;
text-decoration: none;
padding: 0 0 0 10px;
color: #333333;
background: #FFFFFF;
border-left:1px solid #FFFFFF;
border-top:1px solid #FFFFFF;
/*border-right:1px dotted #7F7F7F;*/
border-bottom:1px dotted #7F7F7F;
}
a.subaltlink:hover
{ dan görece¤imiz ekstra özellikleri için kesin gerekli.
display: block;
width: 200px;
font: 11px/18px Verdana;
text-decoration: none;
padding: 0 0 0 10px;
color: #333333;
background: #FBFBFB;
border-left:1px solid #F2F2F4;
border-top:1px solid #F2F2F4;
<< CHIP Workshop • 157
/*border-right:1px dotted #7F7F7F;*/
border-bottom:1px dotted #7F7F7F;
}
.altmenu{display: none; margin: 0px; padding: 0px;}
.subaltmenu{display: none; margin: 0px; padding: 0px;}
CSS stil dosyas›nda ne gibi de¤ifliklikleri yaparak ne gibi etki-
ler elde edebilece¤inize girmek istemiyorum. Onun yerine
size CD’de kullan›ma haz›r 4 farkl› stil dosyas›n› sunuyorum.
<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¤ifltirdi¤iniz anda tamamen farkl› görsellikte me-
nülere an›nda sahip olabilirsiniz. Dilerseniz de¤erlerde oynama ya-
parak ne gibi sonuçlar alabilece¤inizi deneyebilirsiniz.
Hemen menünüzü nas›l kullanaca¤›n›za gelmek istiyorum. Ön-
celikle menünüzün tepkilerini iyice test edin. Menü her harekete na-
s›l tepki veriyor inceleyin.
Menünüzde teknik aç›dan bir de¤ifliklik yapmayacaksan›z sizi il-
gilendiren bölüm <body> tak›lar› içinde kalan bölüm olacakt›r. Bu
bölüm menümüzün iskeletini ve hiyerarflik yap›s›n› oluflturan bölü-
mün ta kendisi. Dilerseniz bu k›sm› sunucu-tarafl› bir uygulamayla
dinamik olarak da yazd›rabilirsiniz. Dikkat etmeniz gereken tek fley
gelifligüzel olmay›p bizzat menünün yap›s›n› belirleyen bir düzene
Noktal› stil
sahip olmas› gerekti¤i. Peki bu gerekli miydi? diye sorarsan›z, menü-
müzün basit hareketleri için de¤il ama geliflime aç›k olmas› ve biraz-
Menünün yap›s›n› ve nas›l çal›flt›¤›n› daha iyi gözlemleyebilme-
niz için içerikler, sahip olduklar› id numaralar›na göre yaz›l›. Bilme-
niz gerek ilk fley menüdeki elemanlar›n iki farkl› çeflitte oldu¤u: Me-
nüde yer alan bir eleman 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.
Dü¤üm olan elemanlar› sa¤›nda yer alan > ok iflaretinden ay›rt ede-
bilirsiniz. Gördü¤ünüz üzere seviye 1’deki ilk üç eleman dü¤üm iken
son üç eleman birer link.
Menümüzde en üst seviyede (buna seviye 1 diyelim) bulunan ilk

Klasik
3 boyutlu butonlar
Modern
eleman›n id ismi _1_0_0 format›nda olmal›. Ayn› seviyedeki di¤er
elemanlar s›ras›yla _2_0_0, _3_0_0,... diye isimlendirilmeli.
Seviye 1’deki bir eleman (mesela _1_0_0 isimli ilk eleman) bir
dü¤ümse alt›nda bar›nd›raca¤› seviyenin ad› s1_0_0 fleklinde olma-
l›. Bu ismin bafl›nda bulunan s harfi script’imize bu bölümün bir alt-
seviye (yani seviye 2) oldu¤unu belirtiyor. Seviye 2’de bulunan ele-
manlar link ise bunlar _1_1_0 fleklinde isimlendirilmeli. ‹smine ba-
karak _1_2_0 id numaral› bir eleman›n, menüde ilk s›rada bulunan
eleman›n ikinci linki oldu¤unu söyleyebilmemiz gerekir. Bunu biz
nas›l söyleyebiliyorsak script’imiz de ayn› flekilde bu id isimlerine ba-
karak hangi eleman›n menünün neresinde bulunan eleman oldu¤u-
Web Programc›l›¤›
<<
nu anlayacak. E¤er
bir alt seviye (sevi-
ye 3) daha ekle-
mek isterseniz se-
viye 2’deki elema-
n›n dü¤üm olmas›
gerekecek. Bu du-
rumda ayn› man-
t›ktan hareketle 2.
seviyede yer alacak
dü¤ümünüzü
x2_3_0 fleklinde
isimlendirmelisi-
niz. Bu ismin ba-
fl›nda bulunan x
harfi de script’imi-
ze bu bölümün bir
altseviye (yani seviye 3) oldu¤unu belirtiyor. Ayn› flekilde seviye 3’te
bulunan elemanlar da link ise bunlar› _2_3_1 fleklinde isimlendir-
mek gerekir. Yine ismine bakarak _2_3_1 id numaral› bir eleman›n,
menüde ikinci s›rada bulunan eleman›n üçüncü s›radaki dü¤ümü-
nün ilk linki oldu¤unu söyleyebilmemiz gerekir. Aç›klamas› kar›fl›k
gibi görünse de, mant›ksal olarak gayet düz bir yap›da oldu¤unu
fark edeceksiniz.
Bir uyar›:
E¤er ayn› eleman›n alt seviyesinde 10’dan fazla eleman yer alacaksa
id format›n› korumal›s›n›z. id numaralar›nda en fazla 1 basamakl›
bir de¤erler kullan›n. ‹ki basamakl› de¤erler için harflerden faydala-
nabilirsiniz. Mesela _4_10_3 yerine _4_A_3 gibi, 4_11_3 yerine
_4_B_3 gibi bir de¤er kullan›n.
Dü¤ümlere t›kland›¤›nda alt seviyenin aç›l›p kapanmas›n› sa¤la-
yan bir fonksiyonun tetiklenmesi gerekir.
onclick="katla('x3_3_0');"
Mesela bu sat›r 331, 332, 333 no’lu elemanlardan oluflan alt me-
nüyü katl› vaziyetteyse açacak, de¤ilse katlayacakt›r. Linklerde ise
bas›l›nca ilgili sayfaya gidilece¤inden fonksiyonu ça¤›rman›za gerek
olmayacakt›r. Bu durumda sadece ilgili sayfay› link olarak yazman›z
yeterli.
. . . href="herhangi331.html" id="_3_3_1">&nbsp;&nbsp;331</a></li>
Bu noktaya kadar görünümü ve hareketleri hofl, di¤er menüler-
den çok da fazla özelli¤i olmayan ama sayfaya eklemesi zahmetli bir
menüymüfl gibi görünebilir. Ama flimdi gelelim menümüzün daha
fazla neler yapabilece¤ine. Menümüzü linklerin üzerine t›klamadan
scriptsel olarak da kontrol edebilirsiniz! Bunun nas›l yap›laca¤›n›
gösteren baz› kontrol linklerini ilave ettim. Görebilece¤iniz üzere,
hiç de zor de¤il.
<!-- Bu bölümü sonradan silebilirsiniz -->
<div style="position:absolute; top:10; left:250; width:200; height:0;
visibility:visible; z-index:0;">
<a href="#" onclick="acil('_1_1_0')">aç›l 1_1_0</a><br>
<a href="#" onclick="acil('_2_4_1')">aç›l 2_4_1</a><br>
<a href="#" onclick="acil('_4_0_0')">aç›l 4_0_0</a><br>
<a href="#" onclick="degis()">ilk seviyeye kadar katlan</a><br>
158 • CHIP Workshop >>
 >> Web Programc›l›¤›
<a href="#" onclick="deaktiflestir()">seçili olan› reset et</a><br>
<br>
</div>
<!-- / Bu bölümü sonradan silebilirsiniz -->
Menümüz scriptsel olarak diledi¤iniz elemana kadar aç›l›p, o di-
ledi¤iniz eleman› seçili hale getirebilecek yetene¤e sahip. Bu du-
rumda menünüz ekmek k›r›nt›s› diye tabir edilen ve sitede hangi
noktada bulundu¤unuzu belirten bir ifllevi de üstleniyor. Yine script-
sel olarak diledi¤iniz anda seçili eleman resetlenebiliyor ya da sade-
ce ilk seviye aç›k olacak flekilde en kapal› hale gelebiliyor. Harika de-
¤il mi? Böylece bu katmanda kullan›m› gösterilen flekilde menünüze
diledi¤iniz ifllemi yapt›rabilirsiniz. Mesela bir linke t›kland›¤› anda il-
gili sayfaya gidilecekse ve menünüz için frameset kullanm›yorsan›z,
t›klanan sayfan›n id ismini parametreyle bir sonraki sayfaya aktar›p
sayfa yüklenir yüklenmez menünüzün ilgili eleman› gösterir hale
gelmesini sa¤layabilirsiniz. Tamamen sizin yarat›c›l›¤›n›za ve prog-
ramc›l›k becerinize kalm›fl. Size bir fikir vermesi aç›s›ndan önümüz-
deki ay atölyemizde bu menümüze cookie’leri adapte edece¤iz. Bu
flekilde ziyaretçi en son hangi linke t›klam›flsa menü tekrardan o po-
zisyonunda aç›lacak.
Fark etti¤inizi sand›¤›m üzere menüdeki her bir eleman›n kendi-
ne özgü ünik bir id numaras› olmal› ve bu numara, eleman›n menü-
nün hangi noktas›nda oldu¤u bilgisini de tafl›mal› ki menüde script
yard›m›yla istedi¤imiz eleman› seçili hale getirip, menünün o ele-
mana kadar aç›lmas›n› sa¤layabilelim. Bu da neden <body> tak›s›
içinde ayr›nt›l› bir çal›flmayla menümüzü kurmam›z gerekti¤inin ya-
n›t› oluyor.
Gelelim menümüzün nas›l çal›flt›¤›na. Asl›nda script kodlar›n›n
yan›nda yard›mc› olacak küçük
Script’imizde en kapsaml› ifli yapan bölüm katla() fonksiyonu.
Fonksiyonumuzun yapt›¤› ifl bir dü¤üme t›kland›¤›nda alt›nda yer
alan alt seviyeyi göstermek, ikinci defa t›kland›¤›nda ise aç›k vazi-
yette olan alt seviyeyi kapatmak. Ayr›ca bir dü¤üme ait bir alt seviye
aç›kken baflka bir dü¤üme t›kland›¤›nda aç›k olan alt seviyeyi kapa-
t›p t›klanan dü¤ümünkini açmak. Fonksiyonumuz bu ifllemleri bir di-
<< CHIP Workshop • 159
zi flart ifadesi ve script’imizin temelini oluflturan CSS display pro-
perty’si ile gerçeklefltiriyor. Kolayl›k olsun diye menümüzü <ul>
HTML tak›s›yla oluflturduk. Bu fonksiyonun <ul> tak›l› sayfa ele-
mentlerinin display property’lerine nas›l hükmetti¤ine dikkat edin.
Script’imizde ikinci önemli fonksiyon da acil(). Bu fonksiyon ise
menü üzerine hiç t›klamadan, diledi¤iniz belirli bir eleman için me-
nünün aç›lmas›n› sa¤l›yor. Diyelim ki scriptsel olarak 241 nolu ele-
mana kadar menünüzün aç›l›p bu eleman› seçili hale getirmesini is-
tiyorsunuz. Bu durumda ça¤›rman›z gereken fonksiyon flu flekilde ol-
mal›: acil('_2_4_1')
Ça¤r›lan fonksiyon öncelikle parametre de¤eri olan id numaras›-
n› analiz ediyor.
param1= “_”;
param2= “2”;
param3= “4”;
param4= “1”;
fiart ifadeleri sayesinde bu de¤erlerden script’imiz 3. seviyede bir
eleman için aç›lmas› gerekti¤ini anl›yor.
if (param4==0){
...
...
}
else {// E¤er 2. seviyede dü¤ümse ..
Yani 3. seviyede bir link için aç›lacak
katla("s" + param2 + "_" + 0 + "_" + 0);
// iki üstünü aç (s2_0_0 için aç›l) .....
katla("x" + param2 + "_" + param3 + "_" + 0);
// bir üstü aç (x2_4_0 için aç›l)...
aktiflestir(document.getElementById(str))
// ve (s2_4_1’i) seçili hale getir
}
aktiflestir() fonksiyonu belirtilen eleman›n rengini, dilenirse stili-
ni farkl› k›lmak için elemana ayr› bir CSS class’› at›yor. Bir eleman›n
seçili halinin yok edilmesi için deaktiflestir() fonksiyonu kullan›l›yor.
Bu ise seçili nesneye eskiden sahip oldu¤u ola¤an class ismini ata-
makla mümkün oluyor. Elbette eski ismin ne oldu¤unun bir yerde
kay›tl› olmas› gerekir o da
classOncekiAktif = obj.className;
sat›r›nda bir de¤iflkene kaydedilmifl durumda. Script’imizin nas›l
çal›flt›¤›n› daha detayl› incelemek için script kodlar›nda de¤ifliklik ya-
p›n ve hangi sat›r›n script’in çal›flmas›na ne tür etkisi oldu¤unu in-
celeyin.
Not:
Bu ayki atölyemizde yer alan örneklerin kaynak kodlar›n› CD’deki
StudioWeb+ bölümünde bulabilirsiniz.
Önümüzdeki ay menümüze cookie’leri adapte edece¤iz.
Kaç›rmay›n.
Numan Pekgöz
numanpekgoz@chip.com.tr

Her ofise ayr› bir Office
Bu yaz›m›zda, Linux ortam›nda kullan›labilecek belli bafll› ofis yaz›l›mlar›n› inceleyece¤iz.
B
u yaz›m›z, dizimizdeki di¤er yaz›lar›-
m›zdan farkl› olacak. Ofis paketleri-
nin kullan›m alanlar› çok genifl ve sa-
y›lar› da fazlaca oldu¤u için, k›s›tl› yerimizin
el verdi¤ince bu paketleri iflleyecek ve içer-
dikleri yaz›l›mlar›n karfl›laflt›rmalar›n› yapa-
ca¤›z. Linux için belli bafll› ofis uygulamala-
r›na göz atarsak:
1 OpenOffice.org: fiu anda aç›k ve ka-
pal› sistemler için en verimli ofis platformu
olarak gösterilebilen ofis paketi. Aktif ola-
rak birçok iflletme halihaz›rda OpenOffice'e
geçmifl durumda. Tam ismi OpenOffice.org
olan bu yaz›l›mdan, yaz›m›z boyunca k›saca
OpenOffice diye bahsedece¤iz.
2 KOffice: KDE masaüstü ortam›na ta-
mamen entegre olacak flekilde gelifltirilmifl
ofis platformu. Oldukça geliflmifl bir modü-
ler yap›ya sahip (KDE yaz›l›mlar›n›n içine
gömülebiliyor), ayr›ca bir çok uygulamay›
da içeriyor.
3 GNOMEOffice: Belli bafll› GNOME ma-
saüstü ortam› yaz›l›mlar›n›n, fazla entegre
olarak çal›flmamalar›na ra¤men ayn› çat› al-
t›nda de¤erlendirilerek ortaya konulmufl
ofis platformu. Bir paket halinde de¤il, ayr›
ayr› yaz›l›mlar halinde sunulmakta.
OpenOffice
L‹lk olarak OpenOffice yaz›l›m›na de¤ine-
lim. OpenOffice, bir çok dil gibi Türkçeyi de
desteklemektedir. Bu yaz›l›m›n yaz›ld›¤› s›-
rada en güncel sürümü 1.1.3 idi. Türkçe
OpenOffice'i (75.6 MB) indirebilece¤iniz ad-
res http://tr.openoffice.org/
Günümüz flartlar›nda, bir ofis paketin-
den beklenen en büyük özellik, tart›flmas›z
en yayg›n ofis paketi olan Microsoft Office
ailesinin dosya formatlar›n› tan›yarak bun-
lar› açabilmesi. Aç›k kaynak kodlu yaz›l›mla-
r›n bu konuda genelde zorlanmalar›n›n ne-
deni, Microsoft'un kendi formatlar›n›n yap›-
s›n› gizli tutmas›d›r. Aç›k kaynak kodlu yaz›-
l›mc›lar, bu formatlar› inceleyerek tersten
mühendislik (reverse engineering) denilen
yöntemle yap›lar›n› çözmeye çal›flmaktad›r-
lar. fiunu söyleyebiliriz ki, OpenOffice gerek
bu formatlar› açmakta, gerekse bu format-
larda kaydetmekte oldukça baflar›l› olmak-
tad›r. Geçen yaz›m›zda, komut sat›r›n› kul-
lanarak yaz›l›m derlemeyi ve yüklemeyi ö¤-
renmifltik. OpenOffice'i de benzer bir flekil-
de yükleyece¤iz. Bu sefer farkl› olarak, çok
komplike bir yaz›l›m olmas› sebebiyle kay-
nak kodundan derlemeyece¤iz (tabii yine
de istiyorsan›z sitesinden çekip derleyebilir-
siniz, ne de olsa özgür yaz›l›m), haz›r derlen-
✂
mifl haldeki paketinden yükleyece¤iz. Ope-
nOffice'in iki çeflit kurulumu vard›r. 'root'
kullan›c›s› ile kurdu¤umuzda sistemdeki
tüm kullan›c›lar için geçerli bir kurulum ya-
p›lmaktad›r. Bu say›daki örne¤imizde kulla-
n›c› bazl› (tek kullan›c› için) kurulum yapa-
ca¤›z. ‹lk ad›m olarak dosyay› çekti¤imiz di-
zine girelim (Bu örnekte bu dizinin /ho-
me/tango/dl/office oldu¤unu varsay›yo-
ruz.):
cd /home/tango/dl/office
Elimizde (e¤er Türkçe OpenOffice 1.1.3
çektiysek) Ooo_1.1.3_tr_TR_LinuxIn-
tel_install.tar.gz dosyas› olmal›. Öncelikle
bu dosyay› açal›m. (Dosya ve dizin isimleri,
çekti¤imiz dosyaya ve sürüme göre de¤ifle-
bilir. Buna dikkat edersek sorunsuz bir kuru-
lum yaflar›z. OpenOffice'in tek kullan›c› için
kurulumu çok basittir.)
tar zxvf
Ooo_1.1.3_tr_TR_LinuxIntel_install.tar.gz
cd Ooo_1.1.3_tr_TR_LinuxIntel_install
./setup
komutlar›n› verdi¤imizde, bir grafik ekran
aç›larak bize kurulumda yard›mc› olacakt›r.
(Komut sat›r› ile u¤raflmak istemiyorsan›z,
geçen say›da verdi¤imiz örnekleri kullana-
rak çekti¤iniz arfliv dosyas›n› grafik ortamda
açabilir, yine ayn› flekilde setup dosyas›n›n
üzerine t›klayarak kurulumu bafllatabilirsi-
niz. Böylece konsoldan komut girmenize ge-
rek kalmayacakt›r.) Lisans anlaflmalar›n› ka-
bul ettikten sonra önümüze gelecek ilk ek-
ran, kurulum türünü belirmemizi isteyecek.
(E¤er sistemimizde daha önce OpenOffice
kurulu ise, güncelleme ekran› gelecektir. Bu
seçenek, bize ihtiyac›m›z olmayan bileflen-
leri yüklemeyerek sabit disk alan›ndan ta-
sarruf etme imkan› sa¤lar. Standart, kulla-
n›c› tan›ml› ve mini olmak üzere üç çeflit ku-
rulum yapabiliriz:
1 Standart kurulum: Gerekli tüm Ope-
nOffice bileflenleri kurulur.
2 Kullan›c› tan›ml› kurulumu: Yüklen-
mesini istedi¤imiz bileflenleri seçerek kuru-
lumu kiflilefltirebilece¤imiz bir seçenektir.
3 Mini kurulum: Sabit diskte yer darl›¤›
çekildi¤i durumlarda, OpenOffice ortam›n›n
kurulumu için gereken en az yeri kullanarak
kurulum yapar. Tabii ki bu flekilde yap›lan
bir kurulum ile OpenOffice'in tüm özellikle-
rinden yararlanmak mümkün olmayacakt›r.
Yaz›l›m kurarken al›fl›k oldu¤umuz gibi
‹leri tuflunu kullanarak devam etti¤imizde
ise, bize kurulum dizini sorulacak. Kurulum
dizini sistemde, kullan›c›m›z›n erifliminin
Linux
<<
bulundu¤u herhangi bir dizin olabilir. Kuru-
lumdan önceki son ad›m ise, sistemimizde-
ki Java ortam›n›n (Çal›flma ortam› JRE ya da
gelifltirme kiti JDK) OpenOffice'e tan›t›lmas›
(Resim 3). OpenOffice, kurulmak için Ja-
va'ya ihtiyaç duymasa da, uygulamalarda
Java ve JavaScript kullan›m›, JDBC ile veri ta-
ban› ba¤lant›s› gibi baz› yararl› özellikleri
kullanmak için Java ortam›m›z› OpenOffi-
ce'e tan›tmal›y›z. Yüksek bir ihtimalle (ve
sistemimizde Java ortam› kurulumu mev-
cut ise) OpenOffice gerekli dizinleri bulacak
ve listeleyecektir. Buradan istedi¤imiz Java
sürümünü seçebilir ya da Java ve JavaScript
desteklenmiyor seçene¤ini seçerek Java or-
tam› olmadan kuruluma devam edebiliriz.
OpenOffice, e¤er kullan›c› bazl› kurulum ya-
p›ld›ysa (bizim örne¤imizdeki gibi) masaüs-
tü ortamlar›n›n (KDE, Gnome vb.) menüleri-
ne kendi simgesini ekleyecektir. Böylece bu
menüleri kullanarak, da¤›t›m›m›zla gelen
di¤er yaz›l›mlar gibi, OpenOffice yaz›l›mla-
r›na da kolayca eriflebilmemiz mümkün ola-
cakt›r.Öncelikle OpenOffice ile beraber ge-
len yaz›l›mlara bir göz atal›m. Asl›nda Ope-
nOffice entegrasyon konusunda gayet ba-
flar›l› oldu¤undan bu uygulamalar› tek bir
çat› alt›nda çal›flan farkl› arayüzler olarak
düflünmemiz yanl›fl olmayacakt›r.
1 Wretir: OpenOffice paketinin kelime
ifllemci ve web tasarlay›c› görevini yürüt-
mektedir. Microsoft Word gibi yayg›n keli-
me ifllemci formatlar›yla uyumludur. Bu for-
matlar› açabilir ve bu formatlarda dosya
kaydedebilir. (Resim 4)
2 Math: ‹fllem tablosu/hesap çizelgesi
(spreadsheet) yaz›l›m›d›r. Microsoft Excel,
Lotus 1-2-3 gibi yaz›l›m formatlar›n› destek-
lemektedir. Özellikle son sürümlerde geli-
flen Excel makrolar›n› da çal›flt›rma özelli¤i
ile dikkat çekmektedir. (Resim 5)
3 Impress: Sunum haz›rlamak için kulla-
n›lan yaz›l›md›r. Microsoft PowerPoint for-
mat›n› okuyabilir ve bu formatta kay›t ya-
pabilir. Di¤er programlarla güçlü entegras-
Resim 3
29• CHIP Workshop >>
 >> Linux
Resim 4
yonu sayesinde haz›rlad›¤›n›z dokümanlar›
(mesela Math'de haz›rlad›¤›n›z bir durum
grafi¤ini) sunumlar›n›zda kullanman›z
mümkündür. (Resim 6)
4 Draw: Hem vektörel hem de düzlemsel
çizimler için kullanabilece¤imiz yaz›l›md›r.
AutoCAD DXF format› baflta olmak üzere bir
çok çizim format›n› açabilir ve bu formatta
kay›t yapabilir. (Resim 7)
5 Wditer/Web: Writer'›n bir parças› gibi
düflünülebilecek bu yaz›l›m da web tasar›-
m›nda kullanmak için gelifltirilmifltir.
Toparlamak gerekirse, OpenOffice'in en
güçlü yanlar› ücretsiz, özgür, kararl› (stabil),
entegre ve bir çok platformu (Linux ve Win-
dows baflta olmak üzere) destekliyor olma-
s›d›r. Eksi yan›na gelecek olursak, art›k ofis
paketi denince akla gelen Microsoft'un Offi-
ce paketini standart olarak kabul edersek (ki
dosya format› aç›s›ndan asla standart kabul
etmememiz gereklidir), karfl›laflt›r›ld›¤› za-
man tam anlam›yla efl de¤er yaz›l›mlar ba-
r›nd›rmamas›d›r (Veritaban› olarak Access
ve e-posta yaz›l›m› olarak Outlook). Bu ek-
sikleri OpenOffice, hali haz›rda Linux üze-
rinde çal›flan bir çok veri taban›ndan veri
al›m (import) ve bu verileri iflleyifl yetenek-
leriyle kapatmaya bafllam›fl, daha ileride ç›-
kacak sürümlerinde de tam entegrasyonu
hedeflemektedir. E-Posta aç›s›ndan bakt›¤›-
m›zda -her ne kadar konumuzun biraz d›fl›-
na ç›ksa da- ofis kullan›m› için bir çok özelli-
¤iyle (Exchange ba¤lant› özelli¤i gibi) en uy-
gun pozisyona yerleflmifl Evolution ve Kolab
(Aç›k kaynak kodlu bir Exchange ikamesi)
entegrasyonuna sahip KMail gibi yaz›l›mlar
varken tekerle¤i tekrar icat etmek aç›kças›
Resim 5
<< CHIP Workshop • 30
Resim 6
mant›kl› gözükmemektedir. OpenOffice ko-
nusunda elinizin alt›nda bulunmas›n› iste-
di¤iniz, kapsaml›, güvenilir ve Türkçe bir
kayna¤a ihtiyac›n›z var ise, “Gelecek Linux
Yay›nlar›” taraf›ndan yay›nlanan çok uygun
fiyata temin edebilece¤iniz kelime ifllemci,
hesap tablosu, sunum, çizim, web düzenle-
me ve formül iflleme gibi alt bafll›klar› içinde
bar›nd›ran OpenOffice.org kitab›n› tavsiye
ederim.
KOffice
OpenOffice kadar yayg›n kullan›lmasa da,
KDE ortam›na entegre olmufl güçlü bir ofis
paketidir. Genel KDE kurulumu ile gelme-
yen sistemlerde:
http://koffice.kde.org/
Resim 7
adresinden ücretsiz olarak indirilebilir. KOf-
fice, KDE'nin çal›flt›¤› tüm ortamlarda çal›-
flabilmekte ve dolay›s›yla Türkçe'yi de des-
teklemektedir. KOffice çok genifl bir yaz›l›m
yelpazesine sahiptir (Resim 8). Kelime ifl-
lemci KWord, ifllem tablosu/hesap çizelgesi
yaz›l›m› KSpread, sunum program› KPresen-
ter ilk akla gelenlerdir. Bunlar›n yan›nda
vektör grafikler için Karbon14, çizim için
Krita, raporlama için Kugar ve veritaban›
olarak Kexi (flu anda KOffice paketi ile birlik-
te da¤›t›lmasa da bir sonraki KOffice sürü-
müne dahil edilecektir) öne ç›kmaktad›r.
KOffice'in avantajl› özelliklerine k›saca
göz atal›m:
• KDE'nin KParts teknolojisini destekledi¤i
için, tüm KDE yaz›l›mlar›n›n içinden ça¤›r›-
labilir ve bu yaz›l›mlar KOffice özelliklerini
kendi içlerinden kullanabilir.
• Benzerlerinden çok daha performansl›d›r.
• Ürün yelpazesi KDE'nin KParts teknolojisi
Resim 8
sayesinde kolayca geniflletilebilir, hatta kul-
lan›c› taraf›ndan yeni yaz›l›mlar dahi yaz›la-
bilir.Eksi yanlar›na bakt›¤›m›zda gördükleri-
miz:
• KOffice, kullan›c› havuzu çok fazla olmad›-
¤›ndan fazla test edilememektedir. Bunun
getirdi¤i baz› hatalar bulunsa da, kullan›c›-
n›n bizzat rapor etmesi halinde çabucak
(genellikle ayn› gün) düzeltilmektedir.
• Kendi format› haricindeki di¤er formatlar›
tan›ma özelli¤ine sahip olmas›na ra¤men
bu özelli¤i çok geliflmifl de¤ildir. Bu, basit
dokümanlarda sorun ç›karmasa da, komp-
leks olanlarda ç›karmaktad›r. E¤er baflka ya-
z›l›mlar›n (Microsoft Office gibi) formatla-
r›yla çok fazla çal›flmayacaksan›z, bu bir
problem teflkil etmeyecektir.
GNOME Office
GNOME Office, paket halinde sunulma-
sa da GNOME masaüstü ortam›nda çal›flan
ofis yaz›l›mlar›n›n ayn› çat› alt›nda toplan-
d›¤›nda ald›¤› isimdir. Tam bir ofis paketi
olarak nitelendirilemeyece¤i için k›saca de-
¤inece¤iz.
• Kelime ifllemci olarak AbiWord içerir. Abi-
Word “Herkes için kelime ifllem” slogan›yla
yola ç›km›fl ve bu konuda da baflar›l› olmufl
bir özgür yaz›l›md›r. Henüz OpenOffice ka-
dar özelli¤e kavuflamasa da oldukça yayg›n
kullan›lmaktad›r.
• ‹fllem tablosu/hesap çizelgesi yaz›l›m› ola-
rak Gnumeric yaz›l›m›n› içerir. Gnumeric
gerçekten çok fonksiyonlu ve geliflmifl bir
yaz›l›m olup, Microsoft Excel gibi yayg›n
formatlar› da desteklemektedir. (Resim 10)
• Ayr›ca GNOME-DB ad› alt›nda gelifltirilen
veri taban› eriflim kütüphanesi sayesinde
bu yaz›l›mlar çeflitli veri tabanlar›na eriflip
içindeki verileri iflleme yetene¤ine sahiptir-
ler. Linux alt›nda kullan›lan ofis yaz›l›mlar›-
na, yerimiz el verdi¤ince de¤inmeye çal›flt›k.
Bir sonraki yaz›m›zda ise Linux alt›nda e¤-
lence ve sohbet servislerinden (ICQ, MSN
vb.) faydalanmak için mevcut yaz›l›mlar
üzerinde duraca¤›z. Bu yaz› dizimizle özgür
yaz›l›mlar üzerine ilginizi çekmeye bafllad›-
¤›m›z› umuyor, ilginize teflekkür ediyoruz.
Bol Linux'lu günler dileklerimizle.
Do¤aç fienol
dsenol@masterz.com

3ds Max’te Poly
Modelleme örnekleri
Bu ayki makalemizde, 3B modelleme araçlar›n› ve “Poly modelleme “ yöntemini kullanarak gerçekçi bir
köpek bal›¤› yarataca¤›z.
H
emen hemen tüm 3 boyutlu ani-
masyon ve modelleme yaz›l›mlar›
çeflitli modelleme yöntemlerini des-
teklerler. Animasyonlar›m›z ve 3 boyutlu
uygulamalar›m›z için oluflturaca¤›m›z mo-
delleri farkl› yöntemlerle olufltururuz ve bu
yöntemlere her geçen gün yenileri eklen-
mektedir. Tabii ki her modelleme tekni¤inin
bizlere sundu¤u avantajlar ve dezavantajlar
vard›r, üstelik her modeli istedi¤imiz tek-
nikle de oluflturamayabiliriz. Çünkü kulla-
naca¤›m›z teknik bize ve oluflturaca¤›m›z
3B objeye ba¤l› olarak de¤iflebilir. Örnek
olarak, yatay ve pürüzsüz yüzeylere sahip
olan objeleri modellerken kulland›¤›m›z
teknikleri, sert hatlara ve k›vr›mlara sahip
modellerde kullanamayabiliriz. Herkes ken-
dine uygun olan bir tekni¤i seçebilir ve ba-
zen karmafl›k teknikler bir arada da kullan›-
labilir. Bazen sonuç ayn› olsa bile iki farkl›
modelleyici birbirinden farkl› teknikleri se-
çebilir. Modelleme çok genifl bir kavramd›r
ve her geçen gün daha da genifllemektedir.
Farkl› 3B yaz›l›mlar› farkl› ve birbirine ben-
zer teknikleri bizlere sunarlar ve her birinin
kendilerine has avantajlar› vard›r. Bazen
modelleme yaparken iki 3B yaz›l›m aras›nda
bile geçifller yapabiliriz. Örnek olarak 3ds
max’te oluflturdu¤umuz bir modelin ayr›n-
t›lar›n› “Zbrush” gibi bir modelleme yaz›l›-
m›yla tamamlayabiliriz ya da modelleme ifl-
lemini ayr›, animasyon ifllemini daha farkl›
bir yaz›l›mla tamamlayabiliriz.
Bilmemiz gereken di¤er önemli bir nok-
ta: Modelleme, animasyon kadar ayr› ve ge-
nifl bir konudur ve iyi bir modelleme yap-
mak için ayn› zamanda iyi bir çizim ve görüfl
yetene¤ine sahip olmam›z gerekir. Modelle-
me, çeflitli aç›lardan bak›ld›¤›nda heykelt›-
rafll›¤a, illüstratörlü¤e, ressaml›¤a ve tasa-
r›mc›l›¤a benzer.
3ds max’te de çeflitli modelleme yön-
temleri vard›r (mesh, patch, nurbs, spline,
poly) ve biz bu ay en çok kullan›lan modelle-
me yöntemlerinden birisi olan “poly” mo-
✂
delleme tekni¤ine de¤inece¤iz. Poly model-
lemenin di¤er tekniklere göre birçok avan-
taj› vard›r ve ö¤renilmesi di¤er yöntemler-
den daha kolayd›r. Poly modelleme ile orga-
nik ve karmafl›k yüzeyleri h›zl› ve daha opti-
mize olarak oluflturabiliriz. Poly modelleme
3dsmax in 4.0 sürümünden bu yana vard›r
ve içeri¤i her 3dsmax sürümünde geniflle-
mektedir. Asl›nda “Poly” modelleme tekni¤i
“Mesh” yönteminin geniflletilmifl halidir ve
“mesh” yöntemine oranla daha optimize ve
h›zl›d›r. Poly modelleme daha çok “organik
modelleme” olarak tabir edilen karmafl›k
objelerin ve yüzeylerin oluflturulmas›nda
kullan›l›r. Ç›kt› birimi olarak poligonlar› kul-
land›¤›ndan daha h›zl› render sonuçlar› al›-
r›z ve objemizin her ayr› bölümünde farkl›
ayr›nt› seviyeleri oluflturabiliriz, bu da gerek
tasar›m panellerinde gerekse modelleme
sürecinde bize zaman ve h›z kazand›r›r. Poly
modellemenin “patch” ve “nurbs” gibi di¤er
yöntemlerden en belirgin fark›; modelleme-
ye bir objeyle (örne¤in bir kutu) bafllama-
m›zd›r. Nurbs ve Patch yöntemlerinde ise
bundan farkl› olarak modelleme ifllemine
e¤riler kullan›larak bafllan›r. Bu ay poly tek-
ni¤i ile bir köpekbal›¤› modeli oluflturaca¤›z
ve poly modellemenin birçok özelli¤ini kul-
lanaca¤›z.
Hemen hemen tüm 3 boyutlu animas-
yon ve modelleme yaz›l›mlar› çeflitli model-
leme yöntemlerini desteklerler. Animas-
yonlar›m›z ve 3 boyutlu uygulamalar›m›z
için oluflturaca¤›m›z modelleri farkl› yön-
temlerle olufltururuz ve bu yöntemlere her
geçen gün yenileri eklenmektedir. Tabii ki
her modelleme tekni¤inin bizlere sundu¤u
avantajlar ve dezavantajlar vard›r, üstelik
her modeli istedi¤imiz teknikle de olufltura-
mayabiliriz. Çünkü kullanaca¤›m›z teknik
bize ve oluflturaca¤›m›z 3B objeye ba¤l› ola-
rak de¤iflebilir. Örnek olarak, yatay ve pü-
rüzsüz yüzeylere sahip olan objeleri model-
lerken kulland›¤›m›z teknikleri, sert hatlara
ve k›vr›mlara sahip modellerde kullanama-
3D
<<
yabiliriz. Herkes kendine uygun olan bir tek-
ni¤i seçebilir ve bazen karmafl›k teknikler
bir arada da kullan›labilir. Bazen sonuç ayn›
olsa bile iki farkl› modelleyici birbirinden
farkl› teknikleri seçebilir. Modelleme çok ge-
nifl bir kavramd›r ve her geçen gün daha da
genifllemektedir. Farkl› 3B yaz›l›mlar› farkl›
ve birbirine benzer teknikleri bizlere sunar-
lar ve her birinin kendilerine has avantajlar›
vard›r. Bazen modelleme yaparken iki 3B
yaz›l›m aras›nda bile geçifller yapabiliriz. Ör-
nek olarak 3ds max’te oluflturdu¤umuz bir
modelin ayr›nt›lar›n› “Zbrush” gibi bir mo-
delleme yaz›l›m›yla tamamlayabiliriz ya da
modelleme ifllemini ayr›, animasyon ifllemi-
ni daha farkl› bir yaz›l›mla tamamlayabiliriz.
Bilmemiz gereken di¤er önemli bir nok-
ta: Modelleme, animasyon kadar ayr› ve ge-
nifl bir konudur ve iyi bir modelleme yap-
mak için ayn› zamanda iyi bir çizim ve görüfl
yetene¤ine sahip olmam›z gerekir. Modelle-
me, çeflitli aç›lardan bak›ld›¤›nda heykelt›-
rafll›¤a, illüstratörlü¤e, ressaml›¤a ve tasa-
r›mc›l›¤a benzer.
3ds max’te de çeflitli modelleme yön-
temleri vard›r (mesh, patch, nurbs, spline,
poly) ve biz bu ay en çok kullan›lan modelle-
me yöntemlerinden birisi olan “poly” mo-
delleme tekni¤ine de¤inece¤iz. Poly model-
lemenin di¤er tekniklere göre birçok avan-
taj› vard›r ve ö¤renilmesi di¤er yöntemler-
den daha kolayd›r. Poly modelleme ile orga-
nik ve karmafl›k yüzeyleri h›zl› ve daha opti-
mize olarak oluflturabiliriz. Poly modelleme
3dsmax in 4.0 sürümünden bu yana vard›r
ve içeri¤i her 3dsmax sürümünde geniflle-
mektedir. Asl›nda “Poly” modelleme tekni¤i
“Mesh” yönteminin geniflletilmifl halidir ve
“mesh” yöntemine oranla daha optimize ve
h›zl›d›r. Poly modelleme daha çok “organik
modelleme” olarak tabir edilen karmafl›k
objelerin ve yüzeylerin oluflturulmas›nda
kullan›l›r. Ç›kt› birimi olarak polygonlar› kul-
land›¤›ndan daha h›zl› render sonuçlar› al›-
r›z ve objemizin her ayr› bölümünde farkl›
13• CHIP Workshop >>
 >> 3D

ayr›nt› seviyeleri oluflturabiliriz, bu da gerek

tasar›m panellerinde gerekse modelleme
sürecinde bize zaman ve h›z kazand›r›r. Poly
modellemenin “patch” ve “nurbs” gibi di¤er
yöntemlerden en belirgin fark›; modelleme-
ye bir objeyle (örne¤in bir kutu) bafllama-
m›zd›r. Nurbs ve Patch yöntemlerinde ise
bundan farkl› olarak modelleme ifllemine
e¤riler kullan›larak bafllan›r. Bu ay poly tek-
ni¤i ile bir köpekbal›¤› modeli oluflturaca¤›z
ve poly modellemenin birçok özelli¤ini kul-
lanaca¤›z.
1 Öncelikle sahnemizin ortas›nda bir adet
box objesi olufltural›m ve box’›m›z› sahne-
mizin tam ortas›na alal›m. x:0 y:0 z:0. Kutu-
muzun boyutlar›n› length:41, width:48 he-
ight:41 olarak ayarlayal›m ve segment
ayarlar›n› da Length segs:4, width segs:2,
height segs:2 olarak de¤ifltirelim. fiimdi ku-
tumuzu oluflturaca¤›m›z model için ayarla-
m›fl olduk. Bu ayarlar tamam›yla de¤iflken-
dir ve oluflturmak istedi¤imiz modele göre
2 4
kutumuzun üzerinde yapaca¤›m›z bütün
de¤ifliklikler di¤er tarafa da otomatik olarak
uygulanacak. Bu bizim için büyük bir kolay-
l›k, çünkü simetrik nesnelerin her iki taraf›
da ayn›d›r. fiimdi modelimizin sadece sol
k›sm›yla ilgilenece¤iz ve sa¤ k›s›m, sol k›-
s›mdan referans al›narak oluflacak. Bu yön-
temi simetrik olan her modele uygulayabiliriz.
4 fiimdi kutumuzu tekrar seçelim. E¤er
herhangi bir sub-object modunda de¤ifliklik
yaparsak bunun di¤er tarafa da yans›t›ld›¤›-
n› görebilirsiniz.
tek seçerek flekil-6’daki gibi de¤ifltirelim.
Seçti¤imiz her noktay› Move arac› ile içeri ve
afla¤›ya do¤ru dikkatlice tafl›yal›m. Köpek-
bal›¤›n›n bafl ve burun k›sm› yavafl yavafl
belirmifl olmal›. fiimdi ad›m 1’deki segment
ayarlar›n›n modelimizi de¤ifltirirken ne ka-
dar belirleyici bir etken oldu¤unu görürüz.
8 Köpekbal›¤›n›n a¤›z k›sm›n› olufltural›m.
Edge moduna geçerek cut arac›n› seçelim.

5 Kutumuzu vertex seviyesine girerek,

1
de¤ifliklik gösterir. E¤er baflka bir model
oluflturmak isteseydik ayarlar›m›z tama-
men de¤iflebilirdi. Bu ad›mdan sonra tasa-
r›m pencerelerinde show grid onay›n› kald›-
ral›m ve perspektif penceresinde [F4]e ba-
sarak kutumuzun “edge”lerini görünür k›la-
l›m (fiekil- 1)
“left” görüfl penceresindeki gibi de¤ifltire-
lim. Noktalar› seçerken faremizi sürükleye-
rek seçmemiz gerekir, çünkü böylece arkada
bulunan noktalar› da seçmifl oluruz. Kutu
art›k basit bir silindire benzedi (fiekil- 4).
5
6 Orta bulunan tüm noktalar› seçerek (sü-
rükleme yöntemi ile) flekil-5’teki gibi de¤ifl- Cut arac›na modify panelini biraz afla¤›ya
tirelim. kayd›rarak ulaflabiliriz. Cut’a t›klad›ktan
sonra modelimizi flekil-7’deki gibi keselim.
7 Art›k “perspektif” penceresine geçelim Köpekbal›¤›n›n a¤z› olufltu.
ve kutumuzu vertex modunda noktalar› tek
9 Sub object modundan ç›karak modelimi-
zin di¤er yar›s›n› silelim, çünkü modelimizin
gövde k›sm›n› oluflturmaya bafllayaca¤›z.
Aksi takdirde extrude uygularken içeride is-

2 fiimdi kutumuza sa¤ t›klay›p poly’e çevi-

relim. Kutumuz art›k ifllenmeye haz›r ve
modify panelinde editable poly olarak gö-
rünmeli. Modify panelinde kutumuzun ver-
tex moduna geçerek top penceresinde üst-
teki 6 noktay› da faremizi sürükleyerek se-
çelim. Böylece alttaki noktalar› da seçmifl
olduk. Delete ile bu noktalar› silelim (fiekil-2)

3 Kutumuzun yar›s›n› silmifl olduk. fiimdi

vertex modundan ç›karak kutumuz seçili
durumdayken mirror butonuna t›klayal›m.
3 6
Ayarlar› flekil-3 teki gibi de¤ifltirelim. fiimdi

<< CHIP Workshop • 14


7 9
temedi¤imiz yüzeyler oluflabilir. Silme iflle-
minden sonra modelimize symmetry modi-
fier’ini uygulayal›m. Ayarlar› modelimizin
di¤er yar›s› do¤ru biçimde gözükecek flekil-
de de¤ifltirelim ve modelimize tekrar sa¤
t›klayarak editable poly’e çevirelim. Art›k
modelimiz tek parça ve extrude ifllemi için
uygun.
Polygon modunda modelimizin arkas›n-
daki tüm yüzeyleri seçelim ve flekil-8 deki
gibi extrude ifllemi uygulayal›m, extrude ifl-
leminden sonra seçili yüzeyleri scale arac›y-
la biraz küçültelim, çünkü köpekbal›¤›n›n
gövdesi kuyru¤una do¤ru gittikçe incelme-
ye bafllar.
Extrude ifllemini kuyru¤un bafllama ye-
rine kadar belirli ölçeklerde yüzeyleri scale
ile küçülterek tekrar edelim (flekil-9). fiekil-
9’da extrude iflleminin tekrarlanma s›kl›¤›-
n› da görebiliriz.
Tekrar vertex moduna geçerek modelin
di¤er k›sm›n› tekrar silelim ve baflta yapt›¤›-
m›z gibi “mirror” uygulayal›m. Bu sefer
ayarlar› hiç de¤ifltirmeyelim. Seçimi kald›r›p
önceki parçam›z› tekrar seçelim. Perspektif
görüfl penceresinde modelin ortadaki nok-
talar›n› afla¤›ya do¤ru tafl›yal›m. Ayn› ifllemi
üst taraftaki di¤er noktalar içinde tekrarla-
yal›m. Kademeli olarak gitmeye dikkat et-
8 14
✂
meliyiz çünkü modelleme ifllemindeki her
de¤ifliklik sonuca do¤rudan yans›yacakt›r
(fiekil-10) .
fiimdi köpekbal›¤›n›n yüzgeçlerini yap-
mam›z için flekil-11’deki gibi edge modunda
cut ile kesme ifllemi uygulayal›m. Böylece
yeni oluflan yüzeylerden polygon moduna
geçip extrude ile yüzgeçleri ç›kartabiliriz. ‹s-
terseniz ayn› ifllemi kuyru¤a do¤ru tekrarla-
10
y›p modelimize baflka yüzgeçlerde ekleyebi-
liriz.
Top görüfl penceresinde yüzgeçleri flekil-
lendirelim (fiekil-12) .
Edge moduna geçip, cut ile gözleri olufl-
tural›m, daha sonra polygon moduna geçip
3D
<<
içeri yönde extrude ile göz çukurlar›n› olufl-
tural›m (flekil-13).
Sub object modundan ç›karak modeli-
mizin di¤er yar›s›n› seçip silelim ve tekrar
symmetry modifier’ini uygulay›p editable
poly’e çevirelim. Tekrar tek parçadan oluflan
bir modelimiz oldu. fiimdi a¤›z k›sm›ndaki
yüzeyleri seçip içeriye do¤ru extrude uygu-
layal›m. Gerekli düzenlemeleri de yapt›ktan
sonra modelimiz flekil-14’teki modele ben-
zemifl olmal›. Extrude ifllemleri bittikten
sonra içeride kalan poligonlar› silebiliriz.
Modelimizin yüzgeçlerinin hizas›ndan
üst k›s›mda ayn› yüzgeçlerde yapt›¤›m›z gi-
bi kesme ifllemi yap›p üst yüzgeci olufltura-
l›m. Vertex moduna geçip yüzgece flekil ve-
relim (flekil15).
15• CHIP Workshop >>
 >> 3D
Modelimizin kuyru¤u için en sondaki po-
ligonlar› seçip extrude uygulayal›m. Her ext-
rude iflleminden sonra scale ile “z” eksenin-
de poligonlar› büyütelim. Bu ifllemi birkaç
kez tekrarlayal›m çünkü her extrude kuyru-
¤un ayr›nt›lar› için bize yeni noktalar olufltu-
racak. Extrude ifllemlerinden sonra vertex
modunda kuyru¤u flekillendirelim. Bozuk
18
<< CHIP Workshop • 16
flekillenmeler olufltu¤unda edge moduna
geçip slice plane ile kuyruk bölümüne des-
tekleyici edge’ler oluflturabiliriz (flekil-16).
Tüm flekillendirmeler bittikten sonra
modelimize “meshsmooth” modifieri uygu-
lay›p yumuflatabiliriz.
Poly modelleme tekni¤ini hemen hemen
19
ço¤u organik modelleme iflleminde kullana-
biliriz. Sizlerde de¤iflik objeleri seçip temel
primitiflerle modellemeye bafllayabilirsiniz.
Herkese iyi çal›flmalar.
Nebi YIKARO⁄LU
nykaroglu@chip.com.tr