Tuesday, February 24, 2009

Cozunurluluk Ayari

Javascript kullanarak degisik cozunurlukteki ekranlar icin goruntuyu degistirmeniz gerekiyorsa, Javascript screen objesini kullanarak bunu yapabilirsiniz. Diyelim ki bir uygulamayi 1280x800 cozunurluluk icin yazdiniz, ama 1024x768 ekranda soldaki bosluk kismini sifira indirerek ekrandaki gorsel elementleri gorus alanina sigdirmak istiyorsunuz. O zaman once HTML kodunuzu alttaki gibi degistirin;
<html>
<head>
<script src="resolution.js"></script>
</head>
<body onload="styleSwitcher();">
...
</body>
</html>

body icinde yapilan Javascript cagrisi sayesinde bu sayfa her yuklendiginde styleSwitcher() fonksiyonu cagirilacaktir. Bu fonksiyonun kodu resolution.js dosyasi icinde.

Bu Javascript fonksiyonu, ustteki sayfa yuklendiginde screen objesi uzerinden hangi cozunurlukte oldugunu kontrol edecek. Eger daha 1024x768'te isek, o zaman gerekli CSS elementlerinin boyutlarini degistirerek konumlandirmalari degistirecek.

function styleSwitcher(){

var width = screen.availWidth;
if (width == 768 ){
var theDiv = document.getElementById('div1');
if (theDiv != null) theDiv.style.marginLeft = "0%";
...
}

Burada div1 kodundaki elementin margin-left boyutunu degistirdik ve sifira indirdik.

Fonksiyon icinde "her tarayiciya ozel" ayarlamalar da yapabilirsiniz. Tarayici ismine erismek icin navigator.appName cagrisi yeterli; Bu cagridan mesela IE icin geriye Microsoft Internet Explorer kelimesi geriye gelecek. Biz butun sitemizi standartlari takip eden Firefox'a gore yapiyoruz ve IE'nin uyumsuzluklarini yamamak icin ustteki gibi cagrilarla (ve daha once belirttigimiz CSS numarasi ile) gerekli ekleri yapiyoruz.

var browser=navigator.appName;

if (browser == "Microsoft Internet Explorer") {
var theDiv = document.getElementById('div2');
if (theDiv != null) theDiv.style.left = "440";
...
}

Monday, February 16, 2009

Tim Bray ile Roportaj

Sun Microsystems'den Jim Bray ile uzunca bir roportaj.. 2009 itibariyle Web programlama dunyasinin durumu, bu alandaki diller, yeni teknolojiler, cloud kavrami ve gidilen yonun tartisildigi guzel bir soylesi.

FB Connect Video

Video surada:

http://www.facebook.com/video/video.php?v=630563174283

Sunday, February 15, 2009

Amazon EC2 ile Barindirma

Amazon.com sirketi, kitap vb. seyler satmanin yaninda, bir suredir barindirma (hosting) servisi veriyor. Amazon.com Internet dunyasinin artik en eski e-ticaret sitelerinden, ve kendi e-ticaret islerini surdurebilmek icin satis yapan sitelerinin de devasa boyutlarda olmasi gerekliydi. Bu olcekte bir siteyi bu kadar uzun sure idare ederken, kendilerine sagladiklari servisi disaridaki son kullanilara da saglama gibi bir fikre erismis olmalilar.

Bu bizim gibi IT programcilari icin iyi haber. Amazon EC2 barindirma servisi, komut satirindan yazabileceginiz birkac satir sayesinde Amazon altyapisi icinde istediginiz sayida ve donanimda "sanal makinayi" yaratabilmenizi sagliyor. Bu makinalar bildigimiz araclar ssh ve scp kullanarak erisilebiliyor, ve bu makinalara giris yapinca yine alisageldigimiz Linux ya da Windows islemlerini yapabiliyoruz. Bu makinalara yeni programlar kurabiliyor, dosya kopyalayip, silebiliyor, program isletebiliyoruz. Makinalarin her birine root erisimimiz oluyor.

EC2 servisinde bir makinayi yaratmak icin oncelikle bir "imaj" gerekli. EC2 portfoyunde belli imajlar var, bu imajlar onceden baskalari tarafindan hazirlanmis (yazilim baglaminda) makina kurulum "tipleri". Mesela bir imaj Redhat Fedora Linux isletim sistemi uzerinde MySQL ve Apache programlarini iceren bir "paket" olabiliyor. Biz komut satirindan bir makinayi yaratirken her zaman bir imaj ismi veriyoruz, ve makina yaratilinca uzerinde imajin parcasi olan programlar hazir halde bizi bekliyor oluyor. Bir makinayi sifirdan alip (scp ile disaridan istedigimiz programlari aktararak kendi imajimizi kendimiz de yaratabiliriz, fakat bu uzun sureli bir islem olurdu tabii. Ayrica hazir bir imajdan baslayarak, kendi eklerimizi yaparak bize ozel bambaska bir imaji da yaratabiliyoruz. Bu imaji baskalari ile paylasmak ta mumkun, ve baskalari bu imaj uzerinden kendi sanal makinalari yarattiklarinda ayni programlari goruyor oluyorlar.

Tahmin edilebilecegi uzere, imajlar oldukca buyuk boyutlarda olacak, bu yuzden Amazon bu imajlari kendi dosyalama sistemi icinde muhafaza ediyor. Imajlari lokal bilgiyariniza indirmenize gerek kalmiyor. Amazon dosyalama servisinin ismi S3.

Odeme nasil yapiliyor? EC2 uzerinde yarattiginiz bilgisayarlar ne kadar sure kullanimda ise o sure karsiliginda bir "kira" oduyorsunuz. Mesela ufak boyutlarda bir sanal bilgisayar her saat icin $0.10. Ayrica bu makinadan gelen/giden veriye bakarak bir takim bedeller var. Su sayfadan tahmini kullanim verilerini girerek aylik odeyeceginiz bedeli hesaplayan bir araci bulabilirsiniz.

Amazon EC2'yi kullanmaya baslamak icin kredi kart bilginizi girmeniz gerekiyor; kullaniminizi baz alarak Amazon otomatik olarak bedeli kartinizdan kesiyor.

Bazi komutlar (komutlari nereden indirilip kullanmak icin cevre degiskenlerini nasil set etmeniz gerektigini suradan bulabilirsiniz):

Yarattiginiz makinalara bir anahtar cifti (key pair) yaratmaniz lazim; bu ec2-add-keypair [isim] ile. Buradan gelen verileri bir dosyaya kaydedin, ve artik bir makinayi yaratip, erisirken hep bu dosyayi referans edeceksiniz. Mesela bundan sonra id_rsa-gsg-keypair isimli dosyayi referans alalim.

Bir makinayi ami-4ea34727 imajini baz alarak yaratmak ve baslatmak icin

ec2-run-instances ami-4ea34727 -k id_rsa-gsg-keypair

Baslatmis oldugunuz tum makinalari gormek icin

ec2-describe-instances

Ustteki komuttan makinanizin host adresi ve instance kimligi gibi bilgileri alabilirsiniz. Instance bilgisi "i-" ile baslayan bir kimlik olacak. Bu kimligi bu makinaya referans etmek icin kullanabilirsiniz. Mesela makinayi durdurmak icin;

ec2-terminate-instances [kimlik]

Makinaniza ssh ile baglanmak icin ssh -i id_rsa-gsg-keypair root@[makina ismi]. Makina ismini yukarida bahsedilen listeden alin.

Dosya kopyalamak icin

scp -i id_rsa-gsg-keypair [dosya] root@[makina]

Ben su sekilde bir Unix alias yarattim; isleri rahatlastiriyor.

alias inst='ec2-describe-instances'
alias escp='scp -i id_rsa-gsg-keypair '
alias essh='ssh -i id_rsa-gsg-keypair '

Daha fazla bilgiyi baslangic (getting started) dokumanlarindan alabilirsiniz. Bu dokumandaki ilk ornegi harfi harfine takip edin. Iyi bir baslangic saglayacaktir.

Sunday, February 8, 2009

Alternatif Combobox

Standard HTML birimlerinden olan select..options birimlerinin ne yazik ki bazi problemleri var; Oncelikle IE 6 uzerinde bu select etiketlerini stillemek, yani CSS ile bazi goruntu ogelerini degistirmek mumkun degil. Bunlardan biri border degisimi mesela, siz CSS'e hangi komutu
koyarsaniz koyun, IE 6 uzerinde select o garip uc boyutumsu golgeli sInIrlI goruntuyu kaybedemiyor.


Bu sebeple klasik select..option yerine, CSS/DHTML/Javascript bazli alternatif bir Combobox kullanmak daha yerinde olacak. Bu alternatif kodlar <div> temelli olacak ve bu kodlar Javascript bazli event'leri kullanarak bir normal combobox isleyisini taklit edecekler. Bu birimler direk en temel DHTML ogeleri ile is yaptigi icin, onun herhangi bir gorsel ogesi ile oynamak serbest olabilecek.


Peki hangi paketi kullanmak en iyisi? Etrafta pek cok Javascript bazli combobox kodu var. Hem combobox hem de diger veri giris ogelerinin alternatifleri icin su sayfa faydali olabilir. Benim buldugum ayri bir paket dhtmlxcombo adinda bir pakettir. Bu paket, duz HTML temelli olan select'i alip onu combolastiriyor, ya da sadece bos bir <div> blogunu da alip combo haline getirebiliyor.


Bu kutuphaneyi kullanarak yazdigimiz ornek kodlari altta bulabilirsiniz. Onemli noktalardan biri combo'nun asagi gosteren ok imajini bulabilmesi icin <script> tagi icinde window.dhx_globalImgPath="/imaj/dizin/ismi"; ile ok imajinin yerini vermeniz. test.html icinde bunu gorebilirsiniz.

Dosyalar

dhtmlxcombo.js ve dhtmlxcommon.js ustteki kaynaklardan indirilebilir, ayrica bir blank.gif ve combo_select.gif lazim.

dhtmlxcombo.css

.dhx_combo_img{
    position:absolute;
    top:0px;
    right:0px;
    width:17px;
    height:20px;
}

.dhx_combo_option_img{
    position:relative;
    top:1px;
    margin-left:2px;
    left:0px;
    width:18px; height:18px;
}
.dhx_combo_input{
    color:#333333;
    font-family: Arial;
    font-size: 9pt;
    border:0px;
    padding:2px 2px 2px 2px;
    position:absolute;
    top:0px;
}
.dhx_combo_box{
    position:relative;
    text-align:left;
    border:1px solid #C3BBB6;
    height:20px;
    _height:22px;
    overflow:hidden;
    background-color: white;
}

.dhx_combo_list{
    position:absolute;
    z-index:230;
    overflow-y:auto;
    overflow-x:hidden;
    border:1px solid black;
    height:100px;
    font-family: Arial;
    font-size: 9pt;
    background-color: white;
}


.dhx_combo_list div{
    cursor:default;
    padding:2px 2px 2px 2px;
}
.dhx_selected_option{
    background-color:navy;
    color:white;
}


.dhx_combo_img_rtl{
    position:absolute;
    top:0px;
    left:1px;
    width:17px;
    height:20px;
}
.dhx_combo_option_img_rtl{
    float:right;
    margin-right :0px;
    width:18px; height:18px;
}

.dhx_combo_list_rtl{
    direction: rtl;
    unicode-bidi : bidi-override;
    position:absolute;
    z-index:230;
    overflow-y:auto;
    overflow-x:hidden;
    border:1px solid black;
    height:100px;
    font-family: Arial;
    font-size: 9pt;
    background-color: white;
}
.dhx_combo_list_rtl div{
    direction: rtl;
    unicode-bidi : bidi-override;
}
.dhx_combo_list_rtl div div{
    float :right !important;
    cursor:default;
    padding:2px 2px 2px 2px;
}
.dhx_combo_list_rtl div img{
    float :right !important;
}
.dhx_combo_list_rtl div input{
    float :right !important;
}

test.html

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script  src="dhtmlxcommon.js"></script>
    <script  src="dhtmlxcombo.js"></script>
    <link rel="STYLESHEET" type="text/css" href="dhtmlxcombo.css">
    <script>
      window.dhx_globalImgPath="/home/burak/";
    </script>
  </head>

  <body>

    <div id="combo_zone2" style="width:200px; height:30px;"></div>
    <script>
      var z=new dhtmlXCombo("combo_zone2","alfa3",200);
      z.addOption([[1,1111],[2,2222],[3,3333],[4,4444],[5,5555]]);
    </script>


  </body>


</html>