12 Kasım 2007 Pazartesi

Ölçeklendirilebilir textarea ve Anlık düzenleme

Merhabalar, Sonzamanlarda yazdığım tüm scriptleri bir framework olarak bir araya topluyorum, saha tamamlamadım ancak yapımı sırasında da çok hoşuma giden ve herkesin işine yarıyacağını düşündüğüm bazı scriptler de yazdım ve onları sizlerle paylaşmak istedim, tabi bu arada yazdığım framework'ün de beta versiyonunu görmüş olacaksınız. framework tamamen bittiği zaman onun için ayrıca bir yazı ve dökümanasyon da hazırlayacağım şimdilik sadece bazı fonksiyonlara bakalım.

Yeni framework birçok özellik içericek bunlar genelde bir website inşaa ederken ihtiyac duyabileceğiniz çeşit çeşit fonksiyonlardır, ben bunların arasından eylenceli olan iki tanesini seçtim. umarım işinize yarar. bunları kullanabilmek için Framework.js dosyasını yüklemeniz gerekmektedir.

Blogger javascriptle ilgili bir sorun yarattı için kod örneklerini farklı bir sayfaya taşımak zorunda kaldım.

Ölçeklendirilebilir Textarea
Ölçeklendirilebilir textarea yı yaparken Drupal'dan esinlendim, kod olarak değil ama prensip olarak aynısını yaptım diyebiliriz. Peki nedir bu? sitenizdeki textarea lara ortak bir class ismi verin ardından aşağıdaki örnek fonksiyonu o class ismiyle birlikde çağırın, artık kullanıcılarınız yazı alanlarını istedikleri gibi ölçeklendirebilecekler.

Örnek sayfası

Anlık Düzenleme
Anlık düzenleme bizim zaten JotForm üzerinde kullandığımız birşeydi daha sonra diğer sitelerde de çok popüler oldu bende bunu bir fonksiyon haline getirdim artık belirlediğiniz class ismine sahip bir div, span yada benzeri objeyi bu anlık düzenleme kutularına dönüştürebilirsiniz. Mantık aynı. Ayrıca bunlara işlem tamamlandığında çalıştırmak istediğiniz fonksiyonlarıda verebilirsiniz aynı benim öneğimde olduğu gibi yeni değeri alıp ekrana basmasını istiyorum, siz ajaxla database'de yollayabilirsiniz :)

Örnek sayfası

Bu arada örnekde kullandığım Debug.echo fonksiyonu da framework tarafından yaratıldı. resize, drag&drop gibi özellikleri framework'ü inceleyerek keşfedebilirsiniz.
Herzamanki gibi umarım işinize yarar.

20 Haziran 2007 Çarşamba

Browser information object

Merhaba,
Bu yazımda size kısa ve işe yarar bir koddan bahsedeceğim.
Hepimizin bildiği gibi JavaScript server tarafında değilde client yani kullanıcı tarafında çalışır. Bu durum bize bir çok avantaj sağlar, bu avantajlardan biride web sitemizin kullanıcı kitlesi hakkında bir çok bilgiye ulaşabilmemizdir. Mesela işletim sistemi, işlemcisi, ekran çözünürlüğü, kullanılan browser, sürümü hatta cookie'lerin çalışıp çalışmadığı gibi bilgiler.

Peki bu bilgiler ne işe yarar?
bu bilgileri kullanarak kullanıcı kitlenizi tespit edebilirsiniz ve web sitenizi buna göre ayarlayabilirsiniz mesela kullanıcılarınızın %80'i 800X600 çözünürlük kullanıyor, demekki sizinde sitenizde bu duruma göre bir ayarlama yapmanız gerekiyor yada kullanıcılarınızın %90'ı firefox kullanıyor o zaman IE bug'larıyla okadarda uğraşmanıza gerek yokmuş :) peki bu bilgileri nasıl toplayacağız.

Bunun için bir obje yazdım gayet derli toplu oldu.



// Define Browser
function Browser(){
this.name = navigator.appName;
this.codename = navigator.appCodeName;
this.version = navigator.appVersion.substring(0,4);
this.platform = navigator.platform;
this.javaEnabled = navigator.javaEnabled();
this.cookieEnabled = navigator.cookieEnabled;
this.userAgent = navigator.userAgent;
this.screenWidth = screen.width;
this.screenHeight = screen.height;
this.loc = window.location.href;
this.referrer = (document.referrer)? document.referrer : "Direct";
this.charSet = (document.characterSet)? document.characterSet : document.charset;
this.language = (navigator.language)? navigator.language : navigator.browserLanguage;

this.information = function(){
info = "\n== Client Descriptions ==\n";
info += "Application Name is: " + this.name + "\n";
info += "Application Code name is: " + this.codename + "\n";
info += "Application Version is: " + this.version + "\n";
info += "Location: " + this.loc + "\n";
info += "Referrer: " + this.referrer + "\n";
info += "User agent: " + this.userAgent + "\n";
info += "Platform is: " + this.platform + "\n";
info += "Is java Enabled?: " + this.javaEnabled + "\n";
info += "Is Cookie Enabled?:" + this.cookieEnabled + "\n";
info += "Language: " + this.language + "\n";
info += "Document Character Set: " + this.charSet + "\n";
info += "Client screenWidth: " + this.screenWidth + "\n";
info += "Client screenHeight: " + this.screenHeight + "\n";
return info;
}

this.alert = function(){
alert(this.information());
}
}


Bu kodu kullanmak oldukça kolay. ilk önce bu objeden bir instance yaratmalıyız


var info = new Browser();


Artık browser bilgilerine info.information(); method'unu kullanarak ulaşabilirsiniz bu method kullanıcıdan toplanan bilgileri okunabilir bir string haline çevirip geri döndürür.
aynı çekilde info.alert(); method'uda bu mesajı alert box içerisinde gösterir.
bir deneyelim info.alert()

Sonuç genelde şuna benzer birşey olmalıdır:

== Client Descriptions ==
Application Name is: Microsoft Internet Explorer
Application Code name is: Mozilla
Application Version is: 4.0
Location: http://www.jotform.com/results.php

User agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)

Platform is: Win32
Is java Enabled?: true
Client screenWidth: 1280
Client screenHeight: 1024


Bu yöntemle alınan bilgiyi biz jotform'un error report'ları için kullanıyoruz.

bir runtime error oluştuğunda jotform sessizce ajax yoluyla bu error'u ve kulanıcı bilgilerini bize yolluyor bizde biran önce bu erroru onarıyoruz.

Jotform'un yaptığı şu:


var iserrorsent = false; // Global to check error status (sent or not sent)
// Error Handling, Handle errors gracefuly
window.onerror = function(desc, file, line, chr){
// Ignore these errors
if(desc.match(/onBG|offBG|buttonOver|buttonOut|buttonDown/gim)){ return true; }
var info = new Browser();

// Create message
message = "\n== Error Descriptions ==\n";
message += "Error: "+ desc +"\n";
message += "Ocuured in: "+ file +"\n";
message += "Occured on line: "+ line +"\n";
message += info.information();
// Send message
if(!iserrorsent){ //Dont send more than one error in one session
reportError( message ,"Error occurred in Jotform: "+desc);
iserrorsent = true;
}
return true;
}

// Send errors by ajax
function reportError(desc,title){
var res = makeRequest("action=report_error" + "&title=" + encodeURIComponent(title) + "&desc=" + encodeURIComponent(desc));
}




Tabi burda karşımıza yeni bir şey daha çıktı window.onerror onerror event'i browserda runtime error oluştuğunda tetiklenen event'tir tam kullanımı şudur.


window.onerror = function(description, fileLocation, lineNumber){
message = "\n== Error Descriptions ==\n";
message += "Error: "+ description +"\n";
message += "Ocuured in: "+ fileLocation +"\n";
message += "Occured on line: "+ lineNumber +"\n";
alert(message);
}



Umarım bu bilgiler işinize yarar hepinize iyi çalışmalar.

1 Haziran 2007 Cuma

JavaScript Button Rollover

Merhaba,
Bu yazımda biraz daha dizayn ağırlıklı bir konudan bahsedicez.
Konumuz rollover button'lar. Bilmeyenler için bir hatırlatma yapalım, Rollover bir çok sitede gördüğünüz farenin bir butunun veya bir imajın üzerine gelmesiyle o nesnenin değiştirilmesi işlemine verilen isimdir.

Bu işlem çoğunlukla web sitelerdeki tuşları tanımlamak ve tıklanabilir olduklarını anlatmak için kullanılır.

Aslında birçok kişi bu konuya Dreamweaver'dan aşina. Dreamweaver sizin için otomatik olarak rollover imagelar yaratabiliyor. Ancak yarattığı kod o kadar çirkin ve kullanışsızki, her yeni rollover image eklediğinizde HTML'inize birsürü karışık kodlar ekleyip daha sonra içinden çıkamıyacağınız bir hale getiriyor.
Bu iş için çok basit bir CSS Çözümü var aslında ancak IE herzamanki gibi oyun bozanlık yapıp bunu kullanmamızı engelliyor. Yinede ben %90 lık IE kullanıcılarını umursamıyorum diyorsanız CSS yöntemini bi hatırlatalım



.rollover{
background:url(images/button.gif);
}

.rollover:hover{
background:url(images/button_over.gif);
}

.rollover:active{
background:url(images/button_down.gif);
}

Kodu biraz tanımlarsak. .rollover{ image'ın normal durumu .rollover:hower image'ın mouseover durumu ve .rollover:active ise image'ın mousedown durumudur. geri kalanı CSS sizin için halledicektir.
Gördüğünüz gibi oldukça basit, ancak iki kusuru var birincisi IE6 asla ne yapmaya çalıştığınızı anlamıyacak ve ikincisi her roll over image için ayrı ayrı bunları yazmanız gerekicek.

Durum böyle olunca bende kendi javascript fonksiyonumu yazmaya karar verdim. heryerde kullanılabilecek oldukça geliştirmeye açık ve anlaşılır olmasını istedim. Sonuçta JotForm üzerinde kullanıyoruz ve oldukça başarılı oldu.

İlk önce fonksiyonun nasıl çalıştığının bir örneğini görelim.



İlk tuş yukarda verdiğim CSS rollover örneğine ait. Alttaki iki tane ise benim javascript ile yaptığım örnekler
birisi normal imaj diğeri ise bir button, yazdığım fonksiyon ikisi arasındaki farkı anlayıp ona göre davranıyor. ayrıca fark ettiyseniz alttaki tuşda mousedown efekti yok buda fonksiyona gönderilen bir argumanla kapatılabiliyor.

evet şimdi fonksiyonu görelim.



function buttonOver(elem,noDown){
var realImage = ""; // Should be empty. veriable to keep original background.
var ext = ".gif"; // Define Extention .gif .png .jpg
var over_ext = "_over" + ext; // Define subfix of images. Such as: image1.gif, image1_over.gif, image1_down.gif
var down_ext = "_down" + ext; // Define subfix of images. Such as: image1.gif, image1_over.gif, image1_down.gif
var regEx = /\.\w+$|\.\w+\)$/; // Remove extention of the image
var preload_img = function(imgToLoad){
var img = new Image;
if(document.imageArray)
document.imageArray.push(img.src = imgToLoad);
else{
document.imageArray = new Array();
document.imageArray.push(img.src = imgToLoad);
}
}

if(elem.style.backgroundImage){ // if object has a background.
realImage = elem.style.backgroundImage.replace(regEx,""); //Take original background and replace with over image.
elem.style.backgroundImage = realImage + over_ext +")";
}else if(elem.src){ // if object has a src .
realImage = elem.src.replace(regEx,""); //Take original background and replace with over image.
elem.src = realImage + over_ext;
}
if(!noDown) preload_img((realImage + down_ext).replace(/^url\(/,"")); // Preload images
elem.onmouseout = function(){ buttonOut(elem); } // Define mouseout event.
elem.onmousedown = function(){ buttonDown(elem); } // Define mousedown event.
elem.onmouseup = function(){ buttonUp(elem); } // Define mouseup event.
var buttonOut = function(elem){ // on mouseOut revert back to original image.
if(elem.style.backgroundImage){
elem.style.backgroundImage = realImage + ext + ")";
}else if(elem.src){
elem.src = realImage + ext;
}
}
var buttonUp = function(elem){ // on mouseUp revert back to mouseover image.
if(elem.style.backgroundImage){
elem.style.backgroundImage = realImage + over_ext +")";
}else if(elem.src){
elem.src = realImage + over_ext;
}
}
var buttonDown = function(elem){ // on mouseDown replace with mouseDown image.
if(noDown) return true;
if(elem.style.backgroundImage){
elem.style.backgroundImage = realImage + down_ext +")";
}else if(elem.src){
elem.src = realImage + down_ext;
}
}
}



buttonOver fonksiyonunu kullanmanız için ilk önce yapmanız gerek bir kaç küçük ayar var.
mesela fonksiyonun ilk satırındaki değerleri ayarlamak gibi.


function buttonOver(elem,noDown){
var realImage = "";
var ext = ".gif";
var over_ext = "_over" + ext;
var down_ext = "_down" + ext;
[...]


Gayet açık kullanacağınız image'ların uzantısı ext, mouseover olduğunda gelicek resmin son eki over_ext, mousedown olduğunda gelicek olan resmin son eki down_ext
resimleriniz için genelde button.gif, button_over.gif, button_down.gif yada button.gif button2.gif button3.gif gibi isimler seçmeye özen gösterirseniz hem işinizde kolaylık sağlar hemde dosyaların yönetimi kolaylaşır.

Fonksiyon artık kullanıma hazır. fonksiyonu çalıştırmak için yapmamız grekende çok basit. Sadece mouseover event'inde buttonOver(this) yazarak çağırıcaz tek yapmamız gereken bu. Fonksiyon sizin verdiğiniz ayarlara göre davranarak diğer bütün eventleri ayarlayacaktır.
Ayrıca mousedown işleminde gelicek olan resim içinde küçük bir preload var.
eğer mousedown event'inin çalışmasını istemiyorsanız da buttonOver(this,true) diyerek çalışmasını engelleyebilirsiniz.

Fonksiyonla ilgili bir sorun yaşarsanız herzaman sorabilirsiniz.
İyi Çalışmalar.

28 Nisan 2007 Cumartesi

Ajax için kullanışlı fonksiyonlar

Merhabalar.
7 aydır uğraştığımız projemiz JotForm'u tamamlama peşinde olduğumdan uzun zamandır blog'a vakit ayıramıyordum neyse ki JotForm başarıyla tamamlandı da sonunda içim rahat bi şekilde yazabiliyorum.

Neyse eğer Jotform'a girip bir bakacak olursanız sitenin işlevlerinin çoğunun ajax yoluyla yapıldığını hemen farkedeceksiniz. Özellikle yeni form yaratırken ve payment özelliklerini ayarlarken kullandığımız Wizard'lar tamamen ajax yoluyla yükleniyorlar.

Çalışmakta olan kodun üzerine server'dan yeni kod getirip sonra da çalışan kod dan bu yeni kod da bulunan bir javascript fonksiyonunu çağırmak istediğinizde ya da bu yeni çağırdığınız sayfadaki bir HTML elementini yakalamak istediğinizde bazı "zamanlama" hataları oluşuyor. Mesela, ya fonksiyonunuz daha sayfa yüklenmeden çalışıyor yada daha yaratılmamış bir elementi yakalamaya çalışıyorsunuz bazen de daha yüklenmemiş fonksiyonlara çağrı yapıyorsunuz. Tabi bunlar kişilerin internet hızlarına göre de değişim gösteriyor. Bu tür sorunları aşmak bizim için gerçekten de çok önemliydi bizde şu fikirle yola çıktık, bir fonksiyonu veya elementi çağırmadan varlığından emin olmalıyız eğer yoksa da yaratılana kadar beklemeliyiz.

Bu mantıkla bazı fonksiyonlar yazdık ve gerçekden işe yaradı, ben de sizinde işinize yarayabileceğini düşündüğümden burada paylaşmak istedim.

işte fonksiyonlar.



function isExist(funcName){
try{
if(typeof eval(funcName) == 'function')
return true;
}catch(e){
return false;
}
}
}



isExist fonksiyonu isminden de anlaşıldığı gibi bir fonksiyonun varlığını kontrol ediyor. isExist("foo") ; şeklinde kullanmak gerek () kullanmadan sadece fonksiyonun ismini yollamanız yeterli size true yada false return edicektir.



function tryFunction(func,args,dur,trycount){
args = args.replace(/\"/g,"'");
trycount = (trycount)? trycount : 0;
dur = (dur)? dur : 15;
if(isExist(func)){
eval(func + args);
trycount=0;
}else if(trycount < dur){
trycount++;
setTimeout("tryFunction(\""+func+"\",\""+args+"\","+dur+","+trycount+")", 100);
}
}



tryFunction ise daha karmaşık, ayrıca isExist() fonkisyonunada bağımlı,şu şekilde çalışıyor, fonksiyon ismi ve argumanları verildiğinde bulana kadar deniyor bulursa da çalıştırıyor, bulamazsa hata vermeden çıkıyor.
iki şekilde kullanabilirsiniz,
ya tryFunction("funcName","(a,r,g,s)")
yada tryFunction("funcName","(a,r,g,s)",45)
sonuna eklediğiniz rakam fonksiyonu çalıştırmayı kaç kere deneyeceğini belirtiyor.
Buradaki 45, 4.5 saniye ye denk geliyor. hiç birşey vermezseniz de default olarak 15 alıyor.


function printInDiv(str,cnt){
cnt = (cnt)? cnt : 0;
if(document.getElementById('idDiv')){
document.getElementById('idDiv').innerHTML = str;
}else if(cnt < 45){
cnt++;
setTimeout("printInDiv('"+str+"',"+ cnt +")", 100);
}else
return false;
}


Bu bir fonksiyon değil bir yöntem,
burada varsayalım ki "printInDiv" diye bir fonksiyonumuz varmış ve biz bunu printInDiv("hello world") şeklinde kullanıyormuşuz. Ancak içine yazı koyulacak div, ajax'la geldiğinden ve hala yüklenmediğinden div element'inin orada olup olmadığını kontrol etmemiz gerek. fonksiyonu bu şekilde modifiye ettiğiniz zaman ya elementi bulup çalışıp durucak yada kendi kendisini 45 kere çağırıcak bulamayıncada hata verip durucak yine burda da 45, 4.5 saniye demek.

fonksiyonun eski hali şu şekildeydi



function printInDiv(str){
document.getElementById('idDiv').innerHTML = str;
}


Bu yöntemler benim gerçekten çok işime yaradı umarım sizde faydasını görürsünüz.
İyi çalışmalar.

26 Mart 2007 Pazartesi

İnternet Explorer için Alternatif PNG Desteği

Merhabalar,
Eminim Hepiniz IE'nin PNG desteği verememesi sorunuyla uğraşmışsınızdır.
Her nekadar IE7'nin yarım yamalak bir PNG desteği olsa bile IE6 hala bizim müdahelemize ihtiyaç duyuyor.
PNGleri çalıştırmak için bir sürü yöntem var bende size Javascript yardımıyla bu işi yaptırıcam umarım güzel olur başlayalım,
Fonkisoyunumuzun düzgün çalışması için bir dosyaya ihtiyacımız var BLANK.GIF
bu Dosyayı indirdip ulaşabileceğimiz bir yere koyduktan sonra.

şu fonksiyonu kullanıyoruz.



function pngImages(){
var img;
if(document.all){
for(x=0;x < arguments.length;x++){
elm = document.getElementById(arguments[x]);
img = (elm.src)? elm.src : (elm.background)? elm.background : (elm.backgroundImage)? elm.backgroundImage : "";
elm.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='" + img + "')";

if(elm.src)
elm.src = "images/blank.gif";
else if(elm.background)
elm.background = "images/blank.gif";
else(elm.backgroundImage)
elm.backgroundImage = "images/blank.gif";
}
}
}

Fonksiyon bütün ona yolladığımız elementlerin varsa SOURCE'una yada BACKGROUND'una blank.gif yerleştirip CSS sayesinde BACKGROUND-IMAGE'a da PNG resmini koyacak.

Fonksiyonu Sayfa tamamen yüklendikten sonra (onload) bu şekilde çağırmalısınız.


pngImages("logo","faq","forum","blog");

Bir deneyin bakalım birçok yöntemden daha hızlı ve sadece belirli nesneye yönelik olduğudan açılırken sadece ihtiyaç duyulan resimleri çevirerek hız kazanabilirsiniz.
bu avantajların yanında çevirmek istediğiniz her nesneye ID vermek zorunda olmanız ise DEZAVANTAJ.

İyi Çalışmalar..

25 Mart 2007 Pazar

İnceleme: Linkibol.com

Selamlar,
Geçtiğimiz günlerde yeni bir siteyle tanıştım, LinkiBol.com
Linkibol, Beni çok gururlandırdı çünki Türkiyenin ilklerinden.
Web 2.0 niteliklerini taşıyan. Yerli yerinde ve başarılı kullanılmış AJAX, İç açan tasarımı ve Sürekli genişleyen içeriği ile gerçekten göz dolduran başarılı bir site olmuş. Buradan sitenin yaratıcısı Volkan Özçelik'e tebriklerimi iletiyorum.


NEDİR BU LİNKİBOL??

Linkibol, Temel anlamda, internette birçok örneğini gördüğümüz ve oldukça yaygın olan Social Bookmarking (Bookmark,Link paylaşım) sitelerinden biri, Ancak kendine özgü özellikleri, yapısı ve tasarımı ile internetteki bu social bookmark kalabalığından sıyrılmasını bilmiş. Özellikle rakiplerinizin del.icio.us ve Digg gibi dev siteler olduğu bir ortamda "kendine özgü ve yenilikçi" olmak başarının tek anahtarı gibi gözüküyor ve Linkibolcular bunu çok iyi başarmış.

LİNKİBOL DA NELER YAPABİLİRİM?
Web de dolaşırken gördüğünüz, beğendiğiniz siteleri Browserınıza kaydeder gibi linkibola kaydedebilirsiniz ve bu linklere istediğiniz an istediğiniz yerden ulaşabilirsiniz. Ayrıca Tag'ler sayesinde diğer linkibolcuların ekledikleri linkler arasında kendi ilgi alanınıza uygun linklere direk ulaşabilirsiniz. Beğendiğiniz linklere oy verip onların listede daha üst sıralarda görüntülenmesini sağlayabilirsiniz. Web de gezinmenizi kolaylaştırır çünki, Bazı şeyleri burda bulmak çoğu zaman Google'dan bulmakdan bile daha kolay. Çünki diğer kullanıcılar tarafından adeta özenle seçilmiş ve tag'lenmiş sitelere ulaşıcaksınız. Bu tarz Social Bookmarking siteleri çoğu zaman hayatınız kolaylaştırır, bizim için Linkibol'un artısı tamamen türkçe içeriğe sahip olması. Böylece bir şekilde Google da yer alamayan Türkçe içerikli sitelere de gün doğmuş oluyor. Ayrıca linkibol sayesinde sadece bookmark yapmakla kalmaz kendi sitenizide kullanıcıların görüşüne sunabilirsiniz ve popüleritenizide artırabilirsiniz.

TEKNİK OLARAK?
Linkibol, bir programcı gözüyle bakıldığında çok güzel özeliklere sahip. öyleki saatlerdir siteyi inceliyor olmama rağmen halen "vay nekadar güzel yapmışlar" dediğim birşeylere rastlıyorum.
Linkibol'un server tarafında her nekadar destekçisi olmasamda başarılı olduğu aşikar olan ASP.NET çalışıyor.
Kullanıcı tarafında ise yine Volkan Özçeliğin kendisine ait ve gayet başarılı bulduğum Sardalya Dynamic Framework destekli JavaScript var. Site Halen beta aşamasında olmasına rağmen oldukça tutarlı ve düzgün çalışıyor. Test ettiğim süre içersinde sadece bir iki önemsiz bug ile karşılaştım bu bir beta için gayet başarılı.
Konu AJAX'a gelince işler güzelleşiyor çünki ajax'ı öyle güzel kullanmışlarki yabancı sitelerde dahil olmak üzere gördüklerimin en iyileri arasında diyebilirim. Mesela kullanıcı hesabı oluştururken ben daha kullanıcı adı yazar yazmaz linkibol benim enter'a ya da submit'e basmamı beklemeden server'a gidip kullanıcı adının kullanıma açık olup olmadığını kontrol etti. Benim için işleri kolaylaştırdı. Site içinde linklere bakarken bütün bilgiyi bir anda yüklemeyip siteyi hızlandırdı sadece görmek istiğim kısmı yükleyip (mesela comment'ler gibi) gereksiz bütün kalablığı ordatan kaldırdı. Bana AJAX böyle kullanılmalı dedirtti tebrikler.
Tabi birde, Linkkibol'un çok işe yarayan Screenshot özelliğinide Snap Preview üstlenmiş.

SONUÇ
Linkibol.com yerliyerinde ajax kullanımı, sade tasarımı ve Tag'ler gibi özellikleri ile Web 2.0'ı yakalamış, Türkiyenin öncü sitelerinden, içeriği ise cabası. Var olan bir iki kullanışlılık hatası, Arama bölümüdeki zorluklar gibi birkaç eksiğinde BETA sürecinde onarılacağından eminim çünki linkibol oldukça hızlı gelişiyor, inanın ben bu yazıyı yazarken bile bir update yapıldı :) şahit oldum.
Volkan Özçelik ve varsa Ekibi :)
Sizi tebrik ediyor ve başarılarınızın devamını diliyorum.

1 Mart 2007 Perşembe

Gerçek Zamanlı Web Sayfası Düzenleme.

Selam,
Işte size çok güzel bi kod örneği.
bu kod sayesinde istediğiniz websiteyi Düzenleyebilirsiniz yazıların resimlerin yerini değiştirebilirsiniz. zevkli bi oyuncak. işte kod.


javascript:document.body.contentEditable='true'; document.designMode='on'; void(0);


yapmanız gereken tek şey istediğiniz site açıkkenn bu kodu alıp Adres Çubuğuna yapıştırmak
enter'a bastığınızda artık o sayfayı düzenleyebilirsiniz demektir.

bu kodu birçok WYSIWYG HTML editörleri kullanır. ben sacede browserdanda çalışabilmesi için değişiklik yaptım
iyi eğleneler :)