alternatif radio button

artık radio button kullanmaktan vazgeçtim.
jquery-ui ye iyice alıştım ve artık radio button yerine şu örnekteki seçilebilir şeyleri kullanmaya karar verdim.
hem tasarımı katletmiş olmam hem de kodlaması eğlenceli olur.

artık php, css ve js optimizesi olmazsa olmaz

Compress PHP, CSS, JavaScript(JS) & Optimize website performance.

curl için alternatif?

curl için daha minimal ve sunucuya kurulması gerekmeyen bir paket armaktayım. pek bir fikrim yok.
(evet pear paketindeki http_request sınıfını da kullanmak istemiyorum :) )

bazı küçük amaçlar için alternatif kodlar yazılmış sadece:

• HTTP POST from PHP, without cURL 
• CURL Insight and a PHP Alternative Example
• ....
  

javascript googledan reset.css css-reset.com'dan

daha evvel bazı avascript kütüphanelerini google'dan yükleyerek hız ve pratiklik kazandığıma değinmiştim.
Aynı şekilde jquery, mootools gibi kütüphaneler için de googl ajax library api'den faydalandığımı yazmıştım.

çokca kullandığım bir dosya da reset.css dosyası.

bunu sürekli oluşturmak yerine css-reset.com'dan istediğim birini seçip sayfaya dahil ediyorum. bu şekilde daha fazla CDN kullanarak havaya girmiş oluyorum.

http://www.css-reset.com/

temelde hem reset.css dosyasını ordan oraya taşımamış oluyorum, ve üstelik hızlı bir sunucudan yüklüyorum, sayfama hız katabileceğini düşünerek.



---


We currently host:

• Eric Meyer's Reset
• Yahoo User Interface Reset
• Ed Eliot's Reset
• Everything Reset * { margin:0; padding:0; }

- 648 bytes

- 483 Bytes

-380 bytes

- 23 bytes

css3 dışlamamak gerek...

tüm javascript paketlerim google'dan

sadece jquery ve jquery ui için google ajax api'yi kullanırdım.

ama şimdi gördüm ki
http://code.google.com/p/js-methods/downloads/list
adresinden ihtiyacım labilecek tüm fonksiyonlar/paketler sunulmakta.
artık tüm javasctipt paketlerimi google'dan yüklicem.

bazıları şunlar:

	char-0.9.min.js	Char extensions convert between characters and decimal Numeric Character References. (Minified)
	codecs-0.9.min.js	Codecs extensions. (Minified)
	md5-0.9.min.js	A JavaScript implementation of the MD5 Message Digest Algorithm. (Minified)
	string-0.9.min.js	String prototype extensions. (Minified)
	array-0.9.pack.js	Array prototype extensions. (Packed)
	char-0.9.pack.js	Char extensions convert between characters and decimal Numeric Character References. (Packed)
	codecs-0.9.pack.js	Codecs extensions. (Packed)
	md5-0.9.pack.js	A JavaScript implementation of the MD5 Message Digest Algorithm. (Packed)
	string-0.9.pack.js	String prototype extensions. (Packed)
	array-0.9.js	Array prototype extensions.   Featured
	char-0.9.js	Char extensions convert between characters and decimal Numeric Character References.   Featured
	codecs-0.9.js	Codecs extensions.   Featured
	md5-0.9.js	A JavaScript implementation of the MD5 Message Digest Algorithm.   Featured
	string-0.9.js	String prototype extensions.   Featured

jquery 1.3 hız meselesi

http://nettuts.com/tutorials/javascript-ajax/everything-you-need-to-know-about-jquery-13/


hangi framework'ün kullanılması gerektiği konusunda son derece yeterli bi grafik bence.

Ajax Library Api

jquery hergün kendini daha fazla sevdirirken ben de iyice ısındım ona. aramıza bi bağ oldu.
bu bağı kuvvetlendirecek bir metot da jquery kütüphanesini uzak bir sunucudan çağırmak. bu sayede jquery kütüphane dosyasını ordan oraya taşımak zorunda kalmıyorum. hizmeti veren de google olunca hız konusu da sorun olmuyor.

ajax library api - google code sayfası

kullanabilmek için

<script src="http://www.google.com/jsapi"></script>

Diye sayfaya yüklemek gerekiyor. Hepsi bukadar.

(ajax api library ile tanışalı oldu baya ama yeni kullanmaya başladım.)

1. örneğin jquery yüklemek için:

google.load("jquery", "1.3.1"); // ikinci parametre versiyon

farklı şekillerde de yükleyebiliriz (sıkıştırılmış, paketlenmiş gibi). google code sayfasında detaylar mevcut.

google.load("jquery", "1.3.1", {uncompressed:true});

2. jqueryui yüklemek için dahi kullanıyorum :

google.load("jqueryui", "1.5.3");

3. diğer bazı kütüphaneler bile var (mootools, dojo gibi ...) .

google.load("mootools", "1.2.1");

google.load("dojo", "1.2.3"); 

google.load("yui", "2.6.0");

benim en çok kullandığım bir diğer kütüphane de swfobject kütüphanesi... bu da bu hizmet ile yüklenebilmekte!

google.load("swfobject", "2.1");

bu dosyaları "google.load" yerine doğrudan adresleri ile de yükleyebilirsiniz tabi. Hepsi google tarafından barıdırılmakta. Hız sorunu yok yani.

google code sayfasındaki dökümantasyonunda hepsinin adresiler de mevcut! 

ülkeler listesi dizisi

hep lazım olur.
php dizi formatından türkçe ülkeler dizisi .

http://snippets.dzone.com/posts/show/4915

yazılım geliştirirken profesyonel metotları kullanma

geçenlerde wikipedi de dolaşırken çeşitli program geliştrime metotlarına rasladım. en ilgimi çeken de "moscow method" . şöyle ki:

• M - MUST have this.
• S - SHOULD have this if at all possible.
• C - COULD have this if it does not affect anything else.
• W - WON'T have this time but WOULD like in the future.

link - > http://en.wikipedia.org/wiki/MoSCoW_Method tabiki başka metotlarda var link. fakat dediğim gibi bu en sade ve gerçekci olanı. Bu metotdu ve benzerlerini biraz irdelemek gerek. Performasnı ve verimliliği kesinlikle artıcaktır.

moscow ile alaklı daha detaylı bir bağlantı buldum :  http://www.coleyconsulting.co.uk/moscow.htm

smarty dizi elemanlarını bir section'a çıkartırken

şunun gibi "0" dan başlayan bir dizi oluşturmuştum,yazarak.

$dizi2 = array("0" => "zmf","1" => "kdf","2" =>"fpm"); // biraz uzunca aslında
$sistemim->assign('array2',$dizi2); // array2 kullancam

sonra bunu evvela {foreach} ile sötereyim  göstereyim dedim ve öyle yazdım. ardından vazgeçtim ve bir tabloya şöylesine atıverdim

<table>
{section name=rows loop=$array2}
<tr bgcolor="{cycle values="#152569,#502569"}"> <td>
{$array2[rows]}
</td></tr>
{/section}
</table>

bir de ne göreyim son elemanım görünmüyor.
foreach ile tüm listeyi saydırabilirken bu şekilde olmadı.
elemanları "1", "2"... gibi 1 den başlayarak isimlendirdiğimde ise sorunum düzeldi.

diğer framework leri bırakıp smarty ye başlamam  çok olmadı (iki hafta gibi), ama ilk hatamı yaptım (ve hala nedenini anlamadım) , demek biraz daha incememem gerekmiş.

adobe spry xmldataset vs ie6 uyuşmazlığı

xml parse işini spry daha iyi yapar heralde diye ona devretmiştim görevi ki; gördüm ki ie6 (internet explorer 6) ile spry xmldataset hata verdi.

çözüm: spry eski sürümün kullanmaktaymışım. güncel sürümünü yükleyince sorun kalmadı. fakat hala spry le xmldataset konusunda tereddütlerim var. ısınamadım.

T_PAAMAYIM_NEKUDOTAYIM

php ile bişeyler bişeyler yazıyodum. orda "double colon" kullandım "::" yanlış kullandığıı hatadan sonra anladım ama hatayı anlamadım :

Parse error: syntax error, unexpected T_PAAMAYIM_NEKUDOTAYIM, expecting ',' or ';' in ....\test.php on line 3

sonra gördüm ki php.net de sahiden gerçek bir hata kodu.

bu listede kendisi de yer almakta : bknz: http://www.php.net/manual/en/tokens.php 

biraz da wiki den arayınca anladım ki ibranice :: demekmiş. bu bir çeviri unutması da olabilir isteyerekte bırakılmış bir ibare olabilir. böyle olmasının temel nededi ana geliştiricinin israil asıllı olması denmekte:  bknz: http://en.wikipedia.org/wiki/PHP

başta biraz komik gelince yanlız olmadığımı gördüm :

http://john.w3ic.org/t_paamayim_nekudotayim/ 

http://www.gurkanoluc.com/ilginc-php-hatasi

disabled option seçeneği ve i.e. karmaşası

aşağıdaki kodu hemen hemen çoğu çalışmamda kullanmışımdır. yani bir seçeneği etkisizleştirilmiş combobox denebilir.

<select> <option>abcde</option> <option disabled="'disabled'">abcde2</option> <option>abcde3</option></select>


genelde çalışamalarımı farklı browserlarda denerim hele ki i.e. de mutlaka denerim.
bi hata gariplik yapacağından emin olduğum için.

ama bu kadar bi garip olay olamaz. option için disabled özelliği i.e. de hiç çalışmıyomuş meğer.

şoku atlattıktan sonra birinin şu çözümünü gördüm (aynı konuya değinen siteler google link )

<!--[if lte IE 7]>
<script>
function ativaOptionsDisabled(){
var sels = document.getElementsByTagName('select');
for(var i=0; i < sels.length; i++){
sels[i].onchange= function(){ //pra se mudar pro desabilitado
if(this.options[this.selectedIndex].disabled){
if(this.options.length<=1){
this.selectedIndex = -1;
}else if(this.selectedIndex < this.options.length - 1){
this.selectedIndex++;
}else{
this.selectedIndex--;
}
}
}
if(sels[i].options[sels[i].selectedIndex].disabled){
//se o selecionado atual é desabilitado chamo o onchange
sels[i].onchange();
}
for(var j=0; j < sels[i].options.length; j++){ //colocando o estilo
if(sels[i].options[j].disabled){
sels[i].options[j].style.color = '#CCC';
}
}
}
}
window.attachEvent("onload", ativaOptionsDisabled)
</script>
<![endif]-->



(tabi fonksiyonu window.attachEvent yerine body içinde onload içinde yazabilirsiniz)

spry ile ikili koşul sağlama

xml verileriyle uğraşırken spry kullanmak aklıma geldi.
genelde o accordion şeysi için kullanırdım ama şimdi daha dinamik bi şekilde kullanayım dedim. (Dreamweaver ile çok daha kolay kullanılıyo, görsel bi şeysi sayesinde)
gerçekten çok işe yaradı.
1. bir adet spry dataset oluşturdum (gayet pratik)
2. ardıdan verileri şöyşe listeledim (sadece şuna sevindim iki kere ard arda spry:if kullanarak bi çeşit AND bağlacı yaptım.. ama OR yapması daha uzun olmakta bu mantıkla ... spry ile if için OR ya da AND bağlaçları için daha iyi bir yol varsa da bilmiyorum. üşendim aranmadım fazla. spry:if dökümanları içinde yoktu.)

<div spry:region="ds1" class="bildiri_liste">
<ul spry:repeatchildren="ds1">
<li>
<span spry:if="'{title}'.toUpperCase().indexOf(filtre.toUpperCase())!=-1">
<a href="#" spry:if="'{author}'.toUpperCase().indexOf(filtre2.toUpperCase())!=-1" onClick="updateTab('{file}');">
{title}
</a>

</span> </li>
</ul>
</div>

lightbox clones incelemesi

piayasada bir çok lightbox benzeri script mevcut. bunları bi kısmı yui, bi kısmı prototype ve daha başka kütüphaneler kullanmakta.
seçim yapmak zor oluyosa :) benim çok sevdiğim bir inceleme sayfası var.

http://planetozh.com/projects/lightbox-clones
bu sayfada çeşitli filtrelemelerle aradığınız lightbox türünü bulabilirsiniz.

yenilenen sayfa istemiyoruz

"küçük boyutlu içeriklerde yenilenen sayfalar istemiyoruz" desturuyla hareket etmek gerek.
bence (heleki içerik statikse) içeriği tek sayfa içinde bi elemana (div, span ya da iframe olabilir) yüklemek gerek. mutlaka gerek. her defasında tarayıcıyı yormaya gerek yok. yorulan sadece tarayıcı değil, sayfa yenilenmesi ile ekranda meydana gelen kıpırtı ile ziyaretçinin gözleri de yorulur ve hatta bu katarakta kadar gider (önemsiz bi not).
burda div elemanına yükledim.
linklerin onclik eylemine get_text fonksiyonumu koymak çok mantıklı gelmişti bana.
linklerin onclik eylemine get_text fonksiyonumu koymak çok mantıklı gelmişti bana.
.... href="#" onclick="get_text(15)".... gibi

function get_text(url){
var xmlHttp = null;
if (window.XMLHttpRequest){xmlHttp = new XMLHttpRequest();}

else if (window.ActiveXObject){xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }
else { }

xmlHttp.open('GET', url, false);
xmlHttp.send(null);
return xmlHttp.responseText;
}


function icerik(id){
var page=id+".php"; // bu dinamik olarak da oluşturulabilir
// mesela ->
// var page="get.php?content="+id;
var htm_icerik=get_text(page);
document.getElementById("divvvv").innerHTML =htm_icerik;
// document.getElementById("iframe1").src =page;
// eğer var olan sayfaları yüklemek isteseydim de bunu yapardım
}

yalınlık, fakat basitlik değil -1

bu bir yazı serisi olacak.

alt: yalın navigasyon istemiyoruz

Evet sitelerin bilhassa teperlinde çeşitli kategori ya da içeriğie yönlendirici ana bağlantılar vardır. navigasyon kısmı...
bu bağlantıların yalın halleriyle bırkıldığı siteler bazı durumlarda beni biraz soğutmuştur.
esasen temel üşengeçlik şu olsa gerek;
tepeye konacak (genelde bir "li" tagı içinde sırlanmış) menü elemanlarına şu stilin uygulanması:

#navigation{
height:2.2em;
line-height:2.2em;
width:758px;
margin:0 1px;
background:#578bb8;
color:#ffffff;
}

#navigation li{
float:left;
list-style-type:none;
border-right:1px solid #ffffff;
white-space:nowrap;
}

#navigation li a{
display:block;
padding:0 10px;
font-size:0.8em;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #ffffff;
}

böylesi daha iyi olurdu. hem daha belirgin hem abartı değil. tabi duruma göre değişir. sadece yalınlığı tercih eden webmaster kişilerine ufacık bi öneri olarak yeni nesil css mantığı üzerinde (aslında yeni değil) biraz çalışmaları yada zaten biliyorlarsa sevmeleri. Bilhassa yoğun program yazan kişiler bu konuya özen göstermeli sunacakları program ne kadar iyi olursa olsun karşıdaki insan şeysi sunum anında tasarımsal gözlemlerini ağırlıklı olarak tutuar.

checkbox kullanmak istemediğimde

checkbox kullanmak istemediğim bi zaman yazmıştım. çok pratik geldi gözüme.
aşağıda yapmak isteiğim anlaşılıyo aslında. fakat biraz eksik yazdım.
önemli bir nokta : burdaki li ögelerini block görünümlü ve hover eyleminde de değişken özellikle yaparsanız daha güzel olur.

<ul>
<li><a href="#" onclick="select_PG(this); return false;" id="PG_1">Attachments, Adhesives, Sealants and Fixings </a></li>

<li><a href="#" onclick="select_PG(this); return false;" id="PG_2">Bogies, Suspension, Wheels and Axles </a></li>

<li><a href="#" onclick="select_PG(this); return false;" id="PG_3">Brakes, Couplers and Draw Gear </a></li>

<li><a href="#" onclick="select_PG(this); return false;" id="PG_4">Cables, Hoses and Connectors </a></li>

<li><a href="#" onclick="select_PG(this); return false;" id="PG_5">Computer Hardware and Software, Control and Monitoring Systems </a></li>

<li><a href="#" onclick="select_PG(this); return false;" id="PG_6">Controls, Electromechanical Equipment and Drives </a> </li>
</ul>




function select_PG(_element){
document.getElementById("productGroups_div").innerHTML+= _element.innerHTML+ " <br> ";
document.forms["mainForm"].productGroups.value+= _element.innerHTML+ " <br> ";

// _element.style.background="#CCCCCC";
_element.className ="PG_active"; //bu stil dosyamda veya satılarımda belirttiğim bi stil

}

function clear_PG(){
var i;
var _i="";
for(i=1;i<49;i++){
_i="PG_"+i;
document.getElementById(_i).className="";
}

document.getElementById("productGroups_div").innerHTML=" ";
document.forms["mainForm"].productGroups.value=" ";
}

parolayı tekrarla işleminde hızlı kontrol

parolayi tekrarla işleminde hızlıca kullandığım bir çözüm:

"password" türünde iki ayrı input yerleştirilir (adları password ve password2 olsun) ve altına bi de "span" veya "div" tagı açılarak id değeri olarak "uyariParola" gibi bişey verilir.

ardından "body" tagından hemen sonra şu script yazilir:

function parolaKontrol(_pass2){
_pass= document.forms["mainForm"].password;
if(_pass2.value != _pass.value){
document.getElementById("uyariParola").innerHTML="Your must enter the same password";
}
else if(_pass2.value == _pass.value){
document.getElementById("uyariParola").innerHTML="OK";

}

}

ardından ikinci input içinde şu yazılır

<input type...... onkeyup="parolaKontrol(this);"/>

bazıları ajax şeysi diyebilir fakat bence ufacık bi javascript zamazingosu, bi çeşit "hayat kurtarır", " az ama öz" denen şeylerden yada kendini gerçekleyememiş programcıların deyimiyle "saklanılası ve günü gelip işe yarayacağı vakit açılıp bakılası script"

artık ikinci alana bir üsttekinin aynı değerini girmezsem uyari alanında uyari mesaji çıkacak. doğru girdiğim an ise "OK" gibi güzel bi mesaj çıkacak.
biraz daha dusunursek genel bir degisken ile (passAyni=false; gibi) formun post olmasını da bu islemin dogruluna bağımlı hale getirebiliriz elbet.