4 Nisan 2011 Pazartesi

JQuery ile Nesnenin Görünürlüğünü Bulma

JQuery ile bir nesnenin ekranda görünüp görünmediğini tesbit etmek için

 
var isVisible = $('#myDiv').is(':visible');
 kullanabiliriliz. Benzer şekilde görünmediği tesbit etmek istiyorsak
 
var isHidden = $('#myDiv').is(':hidden');

kullanabiliriz.

1 Nisan 2011 Cuma

Google 1 Nisan Şakası

Google 1 Nisanda yine boş geçmedi ve güzel bir 1 nisan şakası yaptı. Şaka sitenin İngilizce sürümünde yayınlanıyor. Öncelikle Google arama alanına arayacağınız kelimeyi yazmaya başlıyorsunuz. Ben test yazdım mesela. Google birkaç saniye içinde otomatik tamamlama penceresini çıkarıyor ve alternatif kelimeleri veriyor.

1 Nisan şakasıda burda başlıyor. Bu listenin sonunda We are hiring Autocompleters yazıyor. Türkçe anlamı Otomatik tamamlayıcılar -personel- işe alınacaktır demek oluyor. Bu linke (linkde burda) tıkladığınızda ciddi ciddi bir işin tanımı hakkında bilgiler geliyor. Sanki otomatik tamamlayıcı insanlar var eleman aranıyor tarzında bir yazı. Yazının sonunda başvuru durumunu görmek için ayrı bir link verilmiş (o linkde burda) tıkladığınızda google 1 nisan şakası olduğunu anlıyorsunuz.  Güzel olmuş. :)))

Mobil Web Uygulamalarında Adres Çubuğunu Gizlemek

Hem iOs, hem de Android işletim sistemi kullanılan cihazlar Webkit altyapısını kullanırlar. Webkit kullanmaları mobil ortamda bazı avantajlar sağlar,
  • Webkit sayfa üreteci hızlıdır
  • CSS tanımı geniştir
Bu avantajlar mobil ortamda web uygulamaların cihaz üzerinde çalışanlar (Native) gibi fonksiyonel olmasını sağlar.


Adres çubuğunu kapatmak zaten dar olan bir ekranda 60 piksel yükseklikten kazandıracaktır. Bunun için aşağıdaki kodu javascript dosyanıza (yada html üzeride script tag içinde) eklemelisiniz.

// When ready...
window.addEventListener("load",function() {
 // Set a timeout...
 setTimeout(function(){
  // Hide the address bar!
  window.scrollTo(0, 1);
 }, 0);
});
 
 
 
 

25 Mart 2011 Cuma

Wow6432Node


64 bitlik Windows 2003 yada 2008 sunucunuzda 32 bit derlediğiniz yazılımlarınızın register kayıtlarını okumada problem yaşayabilirsiniz. Bunun nedeni 64 bitlik sistem 32 bitlik erişim için Wow6432Node adında bir anahtar açar ve 32 bitlik yazılımlar verilen anahtara değil Wow6432Node altındaki anahtara erişirler.
Örneğin HKEY_CURRENT_USER\SOFTWARE\Classes anahtarını açtınız. Yazılımınız 32 bitlik ise SOFTWARE altında Wow6432 altındaki Classes bölümünü açmış olursunuz. Bunu engellemek gerçek olanını açabilmek için RegOpenKeyExdeki erişim parametresine WOW64_64Key (0x0100) eklemek gereklidir.
C++ için register erişimi alttaki gibi yapılmalıdır.


  LONG nRet = ::RegOpenKeyEx(HKEY_LOCAL_MACHINE,
            L"SOFTWARE\\Classes",
            0,
            KEY_READ | KEY_WOW64_64KEY, // For 32 bit exe running on 64 bit windows
            &hKey);
 Aynı işlemi Delphi dilinde gerçekleştirmek için.

var r:TRegistry;
begin
  r:=TRegistry.Create;
  try
    r.RootKey:=HKEY_LOCAL_MACHINE;
    r.Access:=r.Access + 256;  //64 bitlik windows erişimi için 256 ekleniyor
    r.OpenKey('SOFTWARE\Classes',True);
    result:=r.ReadString('TestKey');
    r.CloseKey;
  finally
  r.free;
  end;
end;
Aslında yazılım kendi bir takım register anahtarları açıp okuyor ise problem oluşmuyor. Ancak hem .NET yazılımınız hemde diğer 32bitlik yazılımınız. Register kayıtlarına erişmesi gerektiği durumlarda bu problem ortaya çıkıyor.

JQuery UI'de Yeni Tema: Aristo

JQuery UI kullanıyorsanız yeni bir tema. İsmi Aristo. Yukarıdaki resimde tema hakkında fikir edinebilirsiniz. Demosunu görmek ve indirmek için bu adresi kullanabilirsiniz.

26 Şubat 2011 Cumartesi

Python Kodu Derleme

Python projelerini derlemek (compile) için bir kaç yazılım var.

To “compile” a Python program into an executable, use a bundling tool, such as:

11 Şubat 2011 Cuma

Flex/Flash Tam Ekran (Full Screen) Görünüme Geçiş

Flex'de ekranı tam görünüm (full screen) yapmak için stage nesnesini kullanırız. Stage nesnesinin displayState propertysi StageDisplayState.FULL_SCREEN yapılarak ekran tam ekran moduna geçirilir. Normale çevirmek için aynı property'yi StageDisplayState.NORMAL durumuna almanız yeterlidir.

Deneme yapmak için Flash Builderdan yeni bir Flex Application Projesi oluşturun.
Ekrana iki tane button yerleştirin. Kod üzerinden click bölümlerini buttonlara ekleyin.


<mx:Button label ="FullScreen" click="stage.displayState = StageDisplayState.FULL_SCREEN;" />
<mx:Button label ="Normal" click="stage.displayState = StageDisplayState.NORMAL;" />

8 Şubat 2011 Salı

Hızlı Web Sunucusu Nginx



Hızlı web sunucusu kurmak istiyorsunuz. IIS kesmedi, Apache denediniz. Onun hızıda artık yeterli gelmiyor diyorsanız. Güçlü bir alternatifiniz daha var. Nginx. Bu web sunucusu halihazırda 0.9.4 sürümünü çıkarmış olmasına rağmen tüm web sunucular içinde %6 gibi bir orana sahip. Hiçde azımsanacak bir rakam değil. Özellikle çok kullanıcısı olan, sayfa gösterimleri çok yüksek olan sitelerin tercihi nginx. Igor Sysaev adlı rus yazılımcı tarafından açık kaynak olarak geliştirilen nginxi ücretsiz temin etmeniz mümkün.

Nginx Özellikleri kısaca şöyle
Temel HTTP özellikleri
Statik ve index dosyalarının sunumu, otomatik indeksleme; açık dosya açıklayıcı önbellek;
Önbellek ile hızlandırılmış reverse proxying; basit yük dengeleme ve hata toleransı;
Uzak FastCgi sunucularının önbelleklenmesi ile hızlandırılmış destek; basit yük dengeleme ve hata toleransı;
Modüler yapı. Gzip, byte aralıkları, yığın cevaplar (chunked responses), XSLT, SSI, imaj boyutlandırma gibi filtreler. FastCGI veya proksilenmiş sunucular ile tek bir sayfada çoklu SSI içermelerinin paralel işlenmesi.
SSL ve TLS SNI desteği.

Diğer HTTP özellikleri
Ad ve IP tabanlı sanal sunucular;
Keep-alive ve pipelined bağlantı desteği;
Esnek yapılandırma;
İstemci işlemlerinde kopma olmadan yeniden yapılandırma ve online güncelleme;
Erişim kayıt (log) formatları, tamponlanmış kayıt yazımı ve hızlı kayıt devri;
3xx-5xx hata kod yönlendirmeleri;
rewrite modülü;
İstemcinin IP adresine dayalı erişim kontrolü ve HTTP temel kimlik denetleme;
PUT, DELETE, MKCOL, COPY ve MOVE methodları;
FLV streaming;
Hız sınırlandırma;
Bir adresten gelen eşzamanlı bağlantı ve talepleri sınırlandırma.
Gömülü perl.

Mail proxy sunucu özellikleri
Harici bir HTTP kimlik denetleme sunucusunu kullanarak, kullanıcıyı IMAP/POP3 backend'ine yönlendirme;
Harici bir HTTP kimlik denetleme sunucusunu kullanarak, kullanıcıyı SMTP backend'ine yönlendirme ve kullanıcı kimlik denetlemesi;
Kimlik denetleme methodları:
POP3: USER/PASS, APOP, AUTH LOGIN/PLAIN/CRAM-MD5;
IMAP: LOGIN, AUTH LOGIN/PLAIN/CRAM-MD5;
SMTP: AUTH LOGIN/PLAIN/CRAM-MD5;
SSL desteği;
STARTTLS ve STLS desteği.

Yapı ve ölçeklenebilirlik
Bir ana işlem (main process) ve çok sayıda işçi işlemleri (workers). İşçiler, imtiyazsız kullanıcı olarak yürütülürler;
Uyarı methodları: kqueue (FreeBSD 4.1+), epoll (Linux 2.6+), rt signals (Linux 2.2.19+), /dev/poll (Solaris 7 11/99+), event ports (Solaris 10), select ve poll;
Çeşitli kqueue özellikleri desteği: EV_CLEAR, EV_DISABLE (event'i geçici olarak etkisizleştirir), NOTE_LOWAT, EV_EOF, olanaklı data sayısı, hata kodları;
sendfile (FreeBSD 3.1+, Linux 2.2+, Mac OS X 10.5), sendfile64 (Linux 2.4.21+), ve sendfilev (Solaris 8 7/01+) desteği;
File AIO (FreeBSD 4.3+, Linux 2.6.22+);
Accept-filters (FreeBSD 4.1+) ve TCP_DEFER_ACCEPT (Linux 2.4+) desteği;
10,000 inaktif HTTP keep-alive bağlantısı yaklaşık 2.5M hafıza kullanır;
Data kopyalama operasyonları minimum düzeydedir.

Test edilen işletim sistemleri ve platformlar
FreeBSD 3 — 8 / i386; FreeBSD 5 — 8 / amd64;
Linux 2.2 — 2.6 / i386; Linux 2.6 / amd64;
Solaris 9 / i386, sun4u; Solaris 10 / i386, amd64, sun4v;
MacOS X / ppc, i386;
Windows XP, Windows Server 2003.

nginx sitesine buradan ulaşabilirsiniz.

24 Ocak 2011 Pazartesi

Javascriptde Regular Expression

Çoğu zaman kullanıcının girdiği veriyi kontrol (validation) etmemiz belirli yazım kurallarına uygunluğunu denetlememiz gerekir. Ve kurallara uymayan veriyi iptal etmek yada kullanıcıya uyarı vermek suretiyle veri girişinin doğru yapılmasını sağlamaya çalışırız.

En basitinden sayı girilebilecek bir alana kişinin alfabetik bilgi girmesi ve bu şekilde kaydetmeye çalışması kod bölümünde hatalara neden olabilecektir. Olası hataları engellemek için sayı girilecek bir veri alanına kullanıcının sayı girip girmediğini kontrol etmemiz ve girilmediyse uyarı mesajı vererek kaydetme işlemini yapmamız gerekir.

Bu tip durumlarda kuralları kodlamaya kalkarsak onlarca belki yüzlerce if deyimi kullanmamız gerekecektir. Bu işlem için yardımımıza koşan bir yapı mevcut. Oda regular expressions. Türkçe karşılığı düzenli ifadeler oluyor ama bence türkçe karşılığı yapılan işe uygun değil. Bu nedenle ben ingilizce regular expression (kısacada regex) kullanacağım.

Regular Expression ne Yapar
Regexp kısaca herhangi bir karater dizisini (string) belirlediğiniz bir desene uygunluğunu test eder ve size verilen metin ifadeye uygundur veya değildir şeklinde sonuç döner. Regexp içinde iki önemli bölüm var 1. metin bilgi bu örneğin kullanıcının bir metin kutusu içine girdiği bilgi olarak düşünülebilir. 2. önemli bölüm ise desen. Regexp her zaman verdiğiniz desene göre hareket edecektir. Bu deseni hazırlamak bayağı uğraştıran bir şey ben sık kullanılanlarla ilgili aşağıda liste halinde desenleri vereceğim.

Web sayfasında regular expressions nasıl kullanabiliriz.
Öncelikle javascript regex kullanımı tanır ve destekler. Regular expressions için özel tanımlanmış RegExp sınıfı bulunmaktadır. RegExp sınıfından deseni vererek oluşturacağınız nesne üzerinden regexp sınıfı metodlarını kullanarak regular expression işlemlerini gerçekleştirebilrisiniz.
Bu işlemler exec,match,replace,split,compile,test,search işlemleridir ama ben burada sadece test üzerinde duracağım. Diğerleride çok faydalı işlemler ama şu an amacımızın sadece girilen verinin doğrulaması(validasyonu) olduğunu düşünürsek gerekli değiller.

test metodu kullanımı:
var regobj= new RegExp(desen);
if (regobj.test(girilendegerdegiskeni)) { uygun } else { uygun değil uyarı ver }
Örnek kodda da görüldüğü gibi regobj adlı bir nesne oluşturuyoruz. Sonra test metodunu kullanarak girilen verinin desene uygunluğuna bakıyoruz.
Gerçek örnek: Örneğin form1 isimli formumuzda txtSayi adli bir metin kutusu bulunsun ve burada sadece tamsayi olmasını test etmek istiyoruz. Kaydet butonumuzun onclick eventına(olayına) aşağıdaki kodu yazarak bu işlemi yapabiliriz.
var ro=new RegExp('\d');if(ro.test(document.form1.txtSayi.value)) {return true;} else {alert('hatalı giriş');return false;}
Yukarıdaki kod ile txtSayi alanı için sayı girilip girilmediğini kontrol ettirdiğimiz gibi button uyarı veriyor ve false döndüğü için submit işlemini yapmıyor. Yani veriler sayfaya post edilmiyor. Sadece uyarı mesajı geliyor.

Javascripte RegExp nesnesinin daha kısa yazımıda mevcuttur. Yukarıdaki RegExp sınıfından uzun uzun oluşturmak yerine var ro=/\b/; şeklindede regexp tanımlanabilir. Yani desenin bölü (slash) karakterleri içine alınarak yazılmasıda RegExp nesnesi oluşmasını sağlar.

Ve işte desenler...
Tamsayı^\d*$
Pozitif Tamsayı^\d+$
Negatif Tamsayı^\d-$
İşaretsiz(pozitif) Kesirli sayılar^\d*\.?\d*$
1 ile 5 arası sayılar^[1-5]$
email(\w+?@\w+?\x2E.+)
tarih(31.12.2010, 31-12-2010, 31/12/2010)^([0]?[1-9]|[1|2][0-9]|[3][0|1])[./-]([0]?[1-9]|[1][0-2])[./-]([0-9]{4}|[0-9]{2})$
tarih(31.12.2010)^([0]?[1-9]|[1|2][0-9]|[3][0|1])[.]([0]?[1-9]|[1][0-2])[.]([0-9]{4}|[0-9]{2})$
Saat^([0-1][0-9]|[2][0-3]):([0-5][0-9])$
IP\b(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\b

3 Ocak 2011 Pazartesi

HTML 5 Canvas (Grafik Çizim) I

HTML 5 de Canvas kullanımını basit örneklerle göstermeye çalışacağım. Bilindiği gibi HTML 5 yeni geliştirilen bir teknoloji her web tarayıcısı tam olarak desteklemese de özellikle Canvas gibi hemen hemen her tarayıcının desteklediği gelişmiş ve faydalı özelliklerde yok değil.
Öncelikle basitçe Canvas nedir dersek. Web sayfamızda belirlediğimiz bir çizim alanı(canvas) içine grafik çizimler ve hatta animasyonlar yapabilmemizi sağlayan HTML 5 teknolojisidir.

Yavaş yavaş canvas nasıl kullanırız bir göz atalım. Öncelikle ekranda çizim yapacağımız alanın belirlenmesi gerekmekte. Bunu canvas etiketi(tag) ile yaparız.
<canvas width="300" height="225"></canvas>
Yukarıda 300 piksel genişliğinde ve 225 piksel yüksekliğinde çizim alanı tanımlanmıştır. Canvası daha sonraki kullanımda belirleyebilmek için id değerini belirtmekte gerekecektir. Şöyleki;
<canvas id="cizim" width="300" height="225"></canvas>
Yukarıda cizim id'li bir canvas oluşturduk.
Şimdi javascript kodlarımız içinden bu canvası nasıl kullanacağız.
Bunun için şöyle bir koda ihtiyaç var
var cizimcanvas = document.getElementById("cizim");
Yukarıdaki kod sıkça kullandığımız bir DOM nesnesini kullandığımız koddur. cizim idli DOM nesnesi cizimcanvas isimli değişkenimize aktarılır. Bu satırdan sonraki satırlar cizimcanvas isimli değişkeni kullanarak canvas metotlarını çağırabilirler.
Canvas kullanırken öncelikle canvasın içeriğini belirlemeliyiz. Bir canvas 2 boyutlu ve 3 boyutlu içeriklere sahip olabilir. Bunu belirtmek için
var context = canvascizim.getContext("2d");
Yukarıdaki satırdan canvascizim nesnesinden 2 boyutlu (2d) cizim contextini context değişkenine aktardık. Şimdi context değişkenine 2 boyutlu context metotlarını geçebiliriz.
Örneğin bir dörtgen çizmek için;
context.fillRect(50, 25, 150, 100);
Örneğimizi görelim


Peki tarayıcı canvas metodunu destekliyormu nasıl anlayabiliriz? Eğer canvas nesnesinin getContext metodu varsa canvas destekleniyordur. O zaman kodumuzu şöyle genişletebiliriz.
if(canvascizim.getContext) {
var context = canvascizim.getContext("2d");
context.fillRect(50, 25, 150, 100);
} else
{
//Canvas yok uyar
alert('Canvas desteklenmiyor');
}
Dörtgenlerden devam edelim. Biraz önce içi dolu dörtgeni fillRect kullanarak çizmiştik peki içi boş dörtgen çizmek istersek! Bunuda strokeRect metodu ile yapabiliriz. Yukarıdaki örneğe göre;
context.strokeRect(50,50,50,50);
Dörtgen alanların parametreleri üst köşe nokta ve genişlik, yükseklik olarak girilmektedir. Yani yukarıdaki komut 50,50 noktasından 50 genişliğinde ve 50 yüksekliğinde bir kare çizecektir.

Bir dörtgen bölgeyi tamamen temizlemek için clearRect metodu kullanılabilir.
context.clearRect(45,45,75,50);



Kodun son hali
var canvascizim = document.getElementById("cizim2");
var context = canvascizim.getContext("2d");
context.fillRect(50, 25, 150, 100);
context.clearRect(45,45,75,50);
context.strokeRect(50,50,50,50);

Bu bölümde Canvasa giriş yaptık ve dörtgen fonksiyonlarına göz attık. Diğer çizim metotlarına ilerleyen makalelerde deyineceğim.

MySQL Veritabanının Yedeğini Almak

mysql/bin dizinindeki mysqldump programı veritabanımızı yedeklemek için ideal araçtır.
Kullanımı:

mysqldump -u root -p password vt_ismi > %date%.sql

Flash Player ve HTML 5 Karşılaştırması

Değişik tarayıcılar kullanılarak flash ve HTML5 teknolojileri hız açısından karşılaştırılıyorlar ve aşağıdaki grafikdeki sonuç ortaya çıkıyor. Alttaki videoda da partikül testlerinin yapılışı kaydedilmiş. Grafik saniyedeki frame sayısını gösterdiğinden yüksek olması avantaj. Flash teknolojisi açık ara önde görünüyor. Tabi HTML5'in yeni bir teknoloji olduğunu unutmamak da lazım.
Kaynak



Comparison of performance of Flash Player 10.1 and HTML 5 on Mobile Devices from michael chaize on Vimeo.

HTML 5 ve Tarayıcı Destekleri

Aşağıda HTML 5 ile gelen özellikler ve hangi tarayıcıların desteklediği güzel bir tablo oluşturulmuş. Türkçeleştirerek paylaşmak istedim. Orjinal siteye buradan ulaşabilirsiniz.

DemoSupportTechnology
dataset (data-* attributes)ie: nonefirefox: noneopera: nonesafari: nightlychrome: livedataset
Geçmiş API (pushState kullanılarak)ie: nonefirefox: nightlyopera: nonesafari: livechrome: livehistory
Dosyaları doğrudan tarayıcıya sürükleme   HTML5'in doğrudan bir parçası değilie: nonefirefox: liveopera: nonesafari: nonechrome: nightlyfile-api dnd
Basit chat istemcisiie: nonefirefox: nightlyopera: nightlysafari: livechrome: livewebsocket
İki video'nun senkron olarak çalıştırılmasıie: nightlyfirefox: liveopera: livesafari: livechrome: livevideo
Etkileşimli canvas gradyanları ie: nightlyfirefox: liveopera: livesafari: livechrome: livecanvas
Canvas & Videoie: nightlyfirefox: liveopera: livesafari: livechrome: livevideo canvas
Videoie: nightlyfirefox: liveopera: livesafari: livechrome: livevideo
Canvasie: nightlyfirefox: liveopera: livesafari: livechrome: livecanvas
Değiştirilebilir İçerikie: livefirefox: liveopera: livesafari: livechrome: livecontenteditable storage
Geolocation(Coğrafi Yer) Safari Mobilde de çalışırie: nonefirefox: liveopera: livesafari: livechrome: livegeolocation
postMessage aynı domaineie: livefirefox: liveopera: livesafari: livechrome: livepostMessage
postMessage çapraz domaineie: livefirefox: liveopera: livesafari: livechrome: livepostMessage
sürükle bırakie: livefirefox: liveopera: nonesafari: livechrome: livednd
herşeyi sürükleie: livefirefox: liveopera: nonesafari: livechrome: livednd
çevrimdışı durumunu tesbit edebilme   Safari Mobilde de çalışırie: nonefirefox: liveopera: livesafari: nonechrome: noneoffline events
navigator.onLine testleri Events kullanılmıyor sadece polls(havuzlar)ie: livefirefox: liveopera: livesafari: nonechrome: noneoffline
on/offline(çevrimiçi/dışı) event testleriie: nonefirefox: liveopera: livesafari: nonechrome: noneoffline events
Manifest kullanarak çevrimdışı uygulama FF 3.6 hala buglı - başlangıç yüklemesinden sonra manifest istemiyorie: nonefirefox: liveopera: livesafari: livechrome: liveoffline manifest
Disk Alanı (Storage)ie: livefirefox: liveopera: livesafari: livechrome: livestorage
Web SQL Veritabanı Alanıie: nonefirefox: noneopera: livesafari: livechrome: livesql-database
Web SQL Veritabanı- gerial testiie: nonefirefox: noneopera: livesafari: livechrome: livesql-database
Web Workers uyarı - çok fazla CPU ister!örnek tarayıcınızı kitleyebilirie: nonefirefox: liveopera: livesafari: livechrome: liveworkers
http://html5demos.com/ sitesinden alınmıştır.