Çıktığından itibaren kullanmaya başladığım ve son 3 yıldır tüm web geliştirme işlerimi PHPStorm IDEsini kullanıyorum.

Java tabanlı NetBeans'i modifiye ederek bir IDE (Integrated Development Environment) yani Entegre Geliştirme Ortamı oluşturdular.

PHP'de en büyük problem entegre bir geliştirme ortamı olmaması. Yani derleyiciyle iyi konuşan, iyi bir hata yakalama, test ortamı veya kod ve yazım zekası na sahip bir editör bulmak çok kolay değil. Bunları, kullandığınız işletim sistemine uygun ayrı ayrı araçlarla sağlayabiliyorsunuz tabii ki, fakat entegre şekilde çalışmalarını sağlamak çok da kolay değil.

PHPStorm ilk çıktığında minimal bir konfigürasyon sunarak kod yazım zekası ile bazı temel yazılım geliştirme araçlarını sunuyordu fakat çok hızlı bir şekilde birçok modern web geliştirme dilini (less, sass, haml) ve birçok uygulama geliştirme çatısını destekler hale geldi. Minimal ayarlarla gelişmiş bir editörden ek farkı yok fakat aşağıda kısaca sıraladığım entegre araçları aktif hale getirildiğinde gerçekten çok güçlü bir geliştirme ortamına dönüştürebiliyorsunuz. İşte benim çok sık kullandığım ve sizin de yüksek ihtimalle işinize yarayacak bazı özellikler ve araçlar.

Gelişmiş kod yazım zekası sadece php'de değil php tabanlı bir web projesinde kullanabileceğiniz olası tüm kodları (html, javascript, css, xml) geliştirmek için kullanabilirsiniz. Ek olarak bu altyapılardaki tüm popüler uygulama çatılarını (framework) kod yazım zekasında kullanılabilir şekilde bulabilirsiniz.

Eş zamanlı hata yakalama, xdebug ile çalışan web uygulamanızı editörünüzle entegre ederek eş zamanlı uygulama analizi yapıp hata yakalayabilirsiniz.

Versiyon kontrol sistemi entegrasyonu ile kodunuzu subversion, git gibi depolardan indirip yönetebilirsiniz.

Veritabanı bağlantılarınızı sadece editörünüzden veritabanınıza erişmek için değil kodunuzda yazdığınız SQL'leri kodu yazarken çalıştırıp test edebilir, SQL geliştirirken kod yazım zekası kullanabilirsiniz.

Bunların dışında otomatik yayınlama (deployment), otomatik ftp yüklemesi, zen coding, kod template'leri vs vs gibi bir ton diğer özelliği var.
3 yılda 6 ana sürüm çıkartarak çok kararlı ve güçlü bir php geliştirme ortamı sunuyor jetbrains. Malesef paralı olan ide diğer profesyonel idelere göre çok ucuz, ilk aldığınızda 100 dolar sonasında her yıl ana sürüm güncellemelerini almak için 50 dolar ödemek zorundasınız fakat yaptığınız yatırımı kesinlikle karşılıyor.

Jetbrains PHPStorm'daki birçok aracı Ruby, Python için geliştirdikleri IDE'ler için de sunuyor. Eğer Python veya Ruby yazıyorsanız kesinlikle PyCharm ve RubyMine'a göz atmanızı tavsiye ederim.

PHPStorm'un sayfası için:http://www.jetbrains.com/phpstorm/
11 Temmuz Çarşamba ´12   —   2 Yorum
Uzun bir süre bütün arayüzlerimi hiç bir framework veya arayüz kütüphanesi kullanmadan kendim yazdım. Özellikle mobil cihazların kullanımının yaygınlaşmasından dolayı, aynı html içeriğini farklı ekran çözünürlüklerine uygun arayüzlerde gösterme ihtiyacı çoğaldı. Hala mfyz.com'daki arayüzü tamamen sıfırdan yazılmış bir css ile çizdiriyorum. Evet herşeyi sıfırdan yapmanın avantajları var fakat avantajları kadar belki daha fazla dezavantajları ve daha derin bilgi birikimi gerektirmesi gibi yanları da var.

Her kodu tamamen elde hazırlamanın en büyük dezavantajı, kararlılıgını korumak ve çok popüler olan, bilinen hataları gidermek için zaman harcamak zorunda olmanızdır. Yani çok basit bir IE hatasını düzeltmek için gereksiz zaman kaybeder daha da tehlikelisi bu küçük şeyler için ayırdığınız zaman sizin genel motivasyonunuzu kırması gibi tehlikeleri göze almış olursunuz. Özellikle tek geliştiricinin bulunduğu projelerde (ki bir freelancer'in elinin altında her zaman tek başına yürürttüğü proje olur) büyük bir motivasyon bozukluğuna neden olabilir. Dolayısıyla hazır yapılar, kütüphaneler sadece zaman kazanmak şeklinde görülmekten çok, birçok geliştiricinin katkıda bulunduğu ve aslında birçok hammallık işini yapmak zorunda kalmamanız olarak algılanmalıdır. CSS veya başka bir dil farketmeksizin bu geçerli diyebiliriz.

Şimdi gelelim arayüz dillerindeki çatılara. Birkaç yıl öncesine kadar CSS için çok yaygın kullanılan veya birçok geliştiricinin ürettiği bir arayüz çatısı yoktu. Nedeni ise hem css3'den önceki versiyonlarda bir çatı gerektirecek genel ihtiyaçlar yoktu bir diğer nedeni de farklı çözünürlüklerdeki ekranlar bu kadar farklı varyasyonlara sahip değildi.

Bir CSS çatısına ihtiyaç duymanızı gerektirecek en büyük bir başka neden ise özellikle standartlara kabul edilmemiş css3 özelliklerinin (animasyonlar vs) hala tarayıcı spesifik on ekler istemesi olabilir. Örneğin, standartlara kabul edilmesi çok eskilere dayanmayan border-radius özelliğini kullanmak ve bütün tarayıcılarda çalışmasını sağlamak için aynı satırı -moz -webkit -o ve -ms gibi on eklerde kullanmak zorunda kalıyorduk. border-radius çok basit bir özellik ve tek parametre gerektirdiği için bunu örneklemem, bu problemin gözünüzde çok canlanmasını sağlamayabilir ama başka bir örnek olarak, bir elemanınızın arka plan rengini doğrusal geçiş (linear gradient) ile şekillendirmek isterseniz uzun bir satır yazmanız ve bunu 4-5 tekrarda css dosyanızın içine koymanız gerekecektir.
background-image: linear-gradient(top, rgba(0, 0, 0, 1.00), rgba(0, 0, 0, 0.00));
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1.00)), to(rgba(0, 0, 0, 0.00)));
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 1.00), rgba(0, 0, 0, 0.00));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 1.00), rgba(0, 0, 0, 0.00));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 1.00), rgba(0, 0, 0, 0.00));
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 1.00), rgba(0, 0, 0, 0.00));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#000000', EndColorStr='#000000');
Malesef, bu özellik, standartlara geçene kadar bu şekilde kullanılmak zorunda. Yukarıdaki kodda aslında standartlara başvurulan model ilk satırdaki linear-gradient ile başlayan modelidir. Ancak daha standartlara kabul edilmediği için tarayıcılar kendi on eklerini diretmektedir. Çok basit bir geçiş için bu kodları ezberlemek veya tekrar tekrar kodlamak çok anlamsız. Aynı durum birkaç css3 özelliği için de söz konusu.

Peki bir css çatısı kullanmak bunu önleyecek mi? Eğer bir yorumlanan özel bir dil değilse hayır önlemeyecek ama muhtemelen buna benzer hazır geçişleri veya on tanımlı bazı kolay yollar sunacaktır. Eğer yorumlanan bir yapı kullanıyorsanız evet kesinlikle bu kodu çok kısaltmanın yolu var. Bunun için LESS veya SASS'i inceleyebilirsiniz.

Bir çatı kullanmadaki bir diğer fayda da on tanımlı bir çok uygulama eklentisi sunmasıdır. Yani bir web uygulamasında muhtemel olarak kullanacağınız her element için düzgün bir kozmetik hazırlık bulabilirsiniz. Size bunu bir css çatısı önererek anlatmaya çalışacağım.

Twitter bootstrap

Twitter deyince hemen bunun arayüzle ne ilgisi var diyebilirsiniz. Twitter ekibi, twitter'da kullandıkları arayüz kozmetiği ve bazı jquery eklentilerini paketleyerek açık kaynak kodlu bir çatıya dönüştürmüşler. Su an 2+ sürümüne sahip twitter bootstrap aslında bir web uygulaması için başlangıç arayüzleri oluşturmak için tasarlanmış. Yani ufak bir web uygulamanız var ise bunu twitter bootstrap kullanarak çok kolay şekilde şekillendirebilir, eklentilerini kullanarak zenginleştirebilir ve html yapınızı biraz oynayarak arayüzünüzü farklı cihazlarda ve ekran çözünürlüklerinde düzgün görüntülenebilir bir şekle getirebiliyorsunuz.

Örnegin bir RSS kaynağından aldığınız müzik dosyalarını işleyerek bir web arayüzü hazırlamak istiyorsunuz. Sunucu tarafını php ile yazdığınızı düşünürsek, php ile yazacağınız şeyleri yazdıktan sonra, sunucu tarafına ayırdığınızdan belki katlarca daha fazla zamanı arayüzü kodlamakla harcama ihtimaliniz var. Twitter bootstrap kullanarak formlarınızı, butonlarınızı, gridlerinizi, tab veya fare imlecine göre görünüp kaybolan ipuclari ile uygulamanızı zenginleştirebilirsiniz. Farklı tarayıcı uyumlulukları, farklı çözünürlükler gibi şeylere kafa yormanıza genel konular dahilinde gerek kalmıyor.

İstediğiniz özel stilleri, varolan stillere eklemeler yapacağınız gibi varolan stilleri de değiştirebiliyorsunuz. Hatta kaynak koda girip tüm yapıyı da oynama seçemediğiniz var. Ancak twitter bootstrap size sadece önceden kodlanmış bir arayüz sunuyor, yaptığınız eklentilerde veya değişikliklerde yine css3'un hammal yanını göreceksiniz.


CSS Çatıları (framework) tek seçenek mi?


Hayır, çatılar birçok işinizi kolaylaştırsa da temeldeki css dilinin getirdiği yapıyı değiştiremeyeceği için tekrar eden kodlardan kurtulamayacaksınız ayrıca matematiksel çarpanlı yani mimari arayüzler hazırlamanızda size daha önce tanımlı olduklari değerler kadar esneklik sağlayacaktır.

CSS'i dil olarak daha öteye taşıyan ve birbirine benzeyen birkaç yapıdan bir tanesini kısaca anlatarak bahsedeceğim.

Ben, kişisel olarak projelerimde LESS kullanıyorum. Less, css dökümanlarınızda iç içe tanımlamalar yapabilmenizi, fonksiyonlar tanımlayıp fonksiyonları kullanarak renk değişimleri, matematiksel işlemler yapabilmeyi ve benzer programatik şeyler yapabilmenizi sağlıyor, yabnı kısaca css'e bazı programsal özellikler ekliyor. Birkaç farklı method ile kullanılabiliyor. En yaygın kullanımı bir javascript dosyası ile css'inizi tarayıcıda derleyebiliyorsunuz. En pratik kullanımı bu. Fakat tarayıcıdaki ön bellek, geliştirme esnasında baş ağrısı yapabildiği için kodunuzu yazdığınız gibi css dosyalarına derleyerek kullanmanızı tavsiye ediyorum. LESS hakkında biraz daha detaylı yazdığım su yazıyı inceleyebilirsiniz:http://mfyz.com/less-ile-hiyerarsik-ve-fonksiyonel-css-yazmak

Benzer şeyleri yapan ve çok derinlerine inmediğim SASS'i da deneyebilirisiniz.http://sass-lang.com/

Neden sadece twitter bootstrap ve less'den bahsettim?

Çünkü twitter bootstrap kaynak kodlarında less ile yazılmış. Yani kaynak kodunu indirip less kodlarındaki kuralları değiştirerek esnek bir grid'i isteğinize göre üretebilirsiniz, renk kurallarını veya kenar boşlukları, gibi bir çok şeyi less ile çok daha kolay şekilde değiştirebilirsiniz.

İster bir çatı kullanın ister sadece LESS, SASS gibi diller kullanın, yazdığınız css'lerinizi daha hızlı üretmenizi sağlayacak çok güzel araçlar var.


Hazırlayan: Mehmet Fatih YILDIZ

Less


Less dosyalarıyla çalışıyorsanız ve eğer arayüz geliştiriyorsanız yazdığınız kodu tarayıcıda anlık olarak görmek isteyeceksiniz. Less dosyalarını kaydettiğiniz gibi derleyen aşağıdaki araçlarla hangi platformda çalışıyor olursanız olun otomatik olarak derletebilirsiniz.

Less derleyicilerini toparladığım ufak bir yazı hazırladım:http://mfyz.com/dokuman/127/less-dosyalarinizi-anlik-csse-cevirin
Css yazmayı bırakıp Less ile çalışmaya başlamadınız mı? O zaman şu bökümandan devam edin ve less'in avantajlarına göz atıp size ne fayda sağlayabileceğiniz basitçe anlayabilirsiniz.

Less dosyalarıyla çalışıyorsanız ve eğer arayüz geliştiriyorsanız yazdığınız kodu tarayıcıda anlık olarak görmek isteyeceksiniz. Less dosyalarını kaydettiğiniz gibi derleyen aşağıdaki araçlarla hangi platformda çalışıyor olursanız olun otomatik olarak derletebilirsiniz. Hatta bazıları, açık olan tarayıcılarda, lokal geliştirme ortamınıza ait bir URL açıksa onu da otomatik yeniliyorlar. Dolayısıyla sadece tarayıcınızı kontrol etmeniz yetebiliyor değişiklikleri görmek için.

Bu derleyiciler aynı zamanda less kodunuzu denetleyerek hataları bildiriyorlar. Sonuç olarak yazdığınız less dosyalarınız da css dosyalarınız da geçerli css çıktısı olarak sitenizde yayınlanıyor.

Less.app

Sadece MacOSX'de çalışan bu uygulamaya çalıştığınız projeleri, klasörleri sürükleyip bırakarak otomatik tarattırıp proje olarak ekliyorsunuz. Size o projede bulduğu bütün less uzantılı dosyaları listeliyor. Dosyalar güncellendiği anda da dosyaları css dosyalarına derleyip growl uyarısı ile bildiriyor.
http://incident57.com/less/

Simple Less

Bu uygulama biraz daha basit bir arayüze sahip ve tüm platformlarda çalışıyor. Çok platformda çalışan geliştiriciler için oldukça ideal.
http://wearekiss.com/simpless

Winless

Sadece Windowsta çalışan, klasik Windows arayüzüne sahip ufak bir araç.
http://winless.org/


Hazırlayan: Mehmet Fatih YILDIZ

Popüler Etiketler

html jquery framework plugin twitter javascript widget imza signature mail social mfyz facebook windows linux fstab ntfs less css compile compiler macosx app on-the-fly php date sql diff svn subversion proje kurulum nasıl wordpress rss nedir startups music applications free mysql pear mdb2 prepare execute mssql pgsql kontrol yapıları if switch cache while meta share bootstrap css3 apple design zaman tarih api opengraph fql optimization örnek kod internet www subdomain redirect crossdomain form radio style optimizasyon analyse procedure tebrik phpstorm jetbrains ide editor xml dokuman portfolio newsletter git version control deployment network query select connect htaccess mod_rewrite url cookie assets session blog cms js gimp browsers support kitap ui development box service tool google search logo html5 injection wireless doritos tytz language export xmlhttprequest ajax ie browser statistics istatistik insanlar input textarea pharma hack seo apache parse button calendar media sosyal medya graph mobile mootools oyun link firefox download db database chart osx ipucu player license lisans developer table route router ux icons ios iphone ipad app store store in-app purchase purchase verification integration storekit itunes connect itunes server konsol terminal job iOS ruffles wanda code spam laptop notebook ubuntu workspace lifestream howto web app open source login webkit xhtml digital icon ikon grafik generator sitemap internet explorer screen object auth http regex subscription coding banner kampanya