Sürekli yeni projeler üretiyor, çoğunlukla hızlı bir şekilde basit arayüzler hazırlıyorsanız elinizin altında bir ui library oluşturmuşsunuz veya hazır bir arayüz setini kullanıyor olabilirsiniz. İnternette onlarcasını bulabileceğiniz kitlerin hepsi farklı amaçlara hizmet eden farklı çözümler sunan kitler genelde.

Çok basit bir örnek senaryo vereceğim, php tabanlı bir proje hazırlıyorsunuz, on yüzünü yazdınız ve implemente ettiniz. Sırada bir yönetim paneli hazırlamak var yazdığını koda ve veritabanına. Bunun için çok farklı yollar izledim yıllardır, son birkaç yıldır artık oturttuğum bir html4, less/css altyapım var. Basit bir MVC ile phptal ile view'lar phptal templateleri olarak buluyor ve less'leri derleyerek sade bir arayüzde kullanıyorum herşeyi.

Ama twitter bootstrap fikirlerimi biraz değiştirmeye başladı. View'larima çok fazla dökünmadan sadece html çıktılarımı biraz oynayarak twitter bootstrap'i projelerimden birine çok pratikçe entegre etmeyi başardım ve her geçen gün isimi daha kolaylaştırdığını görüyorum.

Güzel yani twitter tarafından geliştirilen bir arayüz kiti, daha da güzel yani açık kaynak kodlu ve birçok kişinin geliştirilmesine katkıda bulunduğu bir proje. Dolayısıyla crossbrowser problemleri çok fazla yok. Hatta eğer arayüzünüzü doğru tasarlarsanız responsive bir arayüzü de çok kafa yormadan sağlayabiliyorsunuz. http://twitter.github.com/bootstrap/scaffolding.html

Neredeyse bütün arayüz elementlerini düşünmüşler. Dolayısıyla bir web uygulaması için birçok hammal is yükünü üstünüzden alıyor. http://twitter.github.com/bootstrap/components.html

Neyse, proje sayfasından örnek uygulamaları, jquery geliştirmelerini ve github deposuna ulaşacağınız linki bulabilisiniz.

http://twitter.github.com/bootstrap/

Biliyorsunuz site ustunde buyuk degisikliklerle mesguldum. Nihayet mimari degisiklikler sonuclanmaya basladi, cogu bitti diyebilirim. Hala var fakat artik on yuzde gorunur seyleri de degistirmeye basliyorum. Bunun bir kismi 2-3 haftadir mootools ile jquerynin beraber calisarak bir tasima surecinde olmasi seklinde gecti.

Simdi mootools bagimliligi olan herseyi temizledim. Bazi seyleri sadelestirdim, zamaninda fazla gorseli destekleyen bir javascript yaklasimda kodluyormusum.

Sonuc olarak site artik tamamen jquery ustunde sekilleniyor, eski seyleri tasima bitti. Simdi yavas yavas bunun uzerine gelistirme olarak ilerleyecegim.
Gorunur degisikliklerden biri de footer oldu. Yakinda eskisine yakin bir hale getirecegim fakat tamamen tasarim degisimine de ugrayabilir. Su an fonksiyonel olarak bir kayip yok eskisine gore.

Html'deki button tagleri form elementler içinde kullanılan bir element. Kapanabilen ve içine span, img gibi elementler koyarak css ile butonları şekillendirmenizi kolaylaştırdığı için tercih edilebiliyor. Fakat eğer type'ını button olarak ayarlamazsanız default değeri olan submit şeklinde hareket edip, tıklandığında formu submit ediyor.

$('form button').each(function(){
	if( !$(this).attr('type') ){
		$(this).attr('type', 'button');
	}
});

ile type'ı belirlenmemiş tüm button elementlerine button type'ını atayabilirsiniz. Sonuç olarak artık butonlar fromlarınızı submit etmeyecektir.

Easyframework, core jquery framework üzerine geliştirilen, css+javascript ile işlerinizi kolaylaştıracak bir framework. Ne css framework, ne de javascript framework. İkisinin güzel bir kombinasyonu.

Easy Framework ile navigasyon, tablolar, basit paragraf stilleri, basit grid yapısı, form kontrolleri, ipucu, lightbox gibi bir çok günümüzde sık kullanılan işleri yapabilirsiniz. jQuery ile beraber 1 js 1 css dosyası ile basit html yapınızı javascript kodu yazmadan sadece sınıflandırarak bu efekt/yerleşimi sağlayabiliyorsunuz.

Demo sayfasını inceleyip proje sayfasından indirebilir veya daha fazla bilgi alabilirsiniz.

Biliyorsunuz mootools adamı idim, ancak son dönemde jquery'nin daha sıkı gitmesi ve ihtiyaçlara daha ekonomik çözümler sunması daha çekici yaptı ve okuduklarım/duyduklarım ile jquery'ye geçme kararı almıştım. Birkaç gündür jquery kaynakları toplayıp kolları sıvamaya başlıyorum. Topladığım kaynakları paylaşmak istedim :

Jquery Siteleri, Dökümantasyonlar

• http://jquery.com/
• http://ui.jquery.com/
• http://www.learningjquery.com/
• http://15daysofjquery.com/
• http://www.detacheddesigns.com/
• (Learning jQuery in 30 minutes) http://tinyurl.com/5vof6b
• http://www.visualjquery.com/
• http://ajaxian.com/archives/prototype-and-jquery-a......comparison
• http://interface.eyecon.ro/demos/?page=demos

Plug-in ve Eklentiler

• http://www.jqueryplugins.com/
• http://www.malsup.com/jquery/block/
• http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
• http://code.google.com/p/jquery-lightbox/
• http://methvin.com/jquery/jq-corner.html
• http://gsgd.co.uk/sandbox/jquery/easing/
• http://sorgalla.com/jcarousel/
• http://www.jeremymartin.name/projects.php?project=kwicks
• http://t.wits.sg/2008/06/20/jquery-progress-bar-11/
• http://plugins.jquery.com/project/tickertype
• http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/
• http://jmaps.digitalspaghetti.me.uk/
• http://markitup.jaysalvat.com/home/
• http://bassistance.de/jquery-plugins/jquery-plugin-validation/
• http://remysharp.com/2007/12/28/jquery-tag-suggestion/
• http://odyniec.net/projects/imgareaselect/
• http://eyebulb.com/dropshadow/
• http://lab.berkerpeksag.com/jGrow
• http://widowmaker.kiev.ua/checkbox/
• http://projects.bundleweb.com.ar/jWYSIWYG/
• http://bassistance.de/jquery-plugins/jquery-plugin-treeview/
• http://digitalbush.com/projects/masked-input-plugin
• http://webplicity.net/flexigrid/
• http://fancy.klade.lv/
• http://p.sohei.org/jquery-plugins/tablehover/
• http://www.freewebs.com/flesler/jQuery.ScrollTo/
• http://www.malsup.com/jquery/cycle/
• http://labs.parkerfox.co.uk/cornerz/
• (EasyDrag jQuery Plugin) http://tinyurl.com/29sxqp
• (Developing an accessible slider) http://tinyurl.com/35osbo

Makaleler, NASIL Belgeleri

• http://jquery.bassistance.de/jquery-getting-started.html
• http://www.eburhan.com/jquery-dunyasina-adim-atiyoruz/
• (Load Data From Other Pages) http://tinyurl.com/6mq3ed
• (Load Content While Scrolling) http://tinyurl.com/3g9nju
• http://www.eburhan.com/jquery-ile-hazirladigim-kal......eklentisi/
• http://nettuts.com/javascript-ajax/how-to-load-in-......th-jquery/
• http://jqueryfordesigners.com/coda-slider-effect/
• http://nettuts.com/javascript-ajax/how-to-create-a......ng-jquery/
• http://www.ibm.com/developerworks/library/x-ajaxjquery.html
• (Wrap It Up) http://tinyurl.com/272efl
• http://www.webdesignerwall.com/tutorials/jquery-tu......designers/
• http://www.sitepoint.com/article/ajax-jquery
• http://15daysofjquery.com/style-sheet-switcheroo/12/
• http://jqueryfordesigners.com/slide-out-and-drawer-effect/
• (Zebra Tables) http://tinyurl.com/5uaygu
• http://jqueryfordesigners.com/slider-gallery/
• http://www.eburhan.com/jquery-ve-olaylar/
• http://www.eburhan.com/jquery-ve-seciciler/
• http://gmarwaha.com/blog/?p=7

DiÄŸer

• ( 50+ Amazing Jquery Examples) http://tinyurl.com/2vw92f
• ( 37 More Shocking jQuery Plugins) http://tinyurl.com/6xd7dp
• http://www.sastgroup.com/jquery/240-plugins-jquery
• ( 51+ Best of jQuery Tutorials) http://tinyurl.com/6pwr9d
• http://groups.google.com/group/jquery-turkish