4 Eylül Çarşamba ´13   —   5 Yorum
Yeni bir web projesine başlarken Twitter Bootstrap'ı kullanmamak, artık zaman kaybı anlamına gelmişken, her gün, bootstrap'ın uzantısı olan bir çok ufak proje, arayüz eklentisi, tema vs çıkıyor.

Bootstrap ekibi de, çoğunlukla mobil ve responsive özellikleri geliştirilmiş olarak, görsel olarak da son dönemdeki flat design akımına uyarak yeni bir sürüm çıkardılar.

Görsel olarak hâlâ flat design akımının günümüze hazır olmadığını düşünsem de, fonksiyonellik açısından iyi bir gelişme olarak görüyorum. Bootstrap da buna uygun doğru bir hamle yaptı diyebiliriz. Beni en sevindiren tarafı ise, daha mobil dostu olması. Önceki sürümleri de mobile uyumlu idi fakat sitenizi hem mobil hem masaüstü için uyumlu yaparken, birçok ufak düzeltme yapmak durumunda kalıyordunuz. Bu sürümde ise mobil, öncelik haline gelmiş ve masaüstü ikincil planda desteklenmiş.

Yeni sürümü şuradan deneyebilir ve yeniliklerini görebilirsiniz:http://getbootstrap.com

Güncelleme: Şuradaki:http://www.designshock.com/bootstrap-3-psd Photoshop UI Kit'ini kullanarak tasarımları da bootstrap ile şekillendirebilirsiniz kodlamadan önce.
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
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/

Popüler Etiketler

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