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/

"Yil 20XX olmuş hala IE ile uğraşıyoruz" diyeceğiz herhalde yıllar sonra da. Bu süreçte ie'ye tekmeyle de olsa html5'i en azından etiketleri tanıması için en basit çözüm olarak iki şey yapmanız gerekiyor.

Birincisi IE'nin dom ağacında html5 etiketlerine ait hiçbir initialization yok. Bunu tetiklemek için kullandığınız her html5 etiketi için en az bir tane element üretmeniz yetiyor. Sonrasında IE dökümandaki tüm elementleri dom ağacınızda tanımaya başlıyor. Bunun için:

<script type="text/javascript">
	elements = "article footer header nav sidebar section".split(' ');
	for (i in elements) { document.createElement(elements[i]); }
</script>

Tamam etiketler tanınır hale geldi ama daha büyük problem ise IE görsel olarak bu etiketlerle ne yapacağını bilemediği için default stillerini uyguluyor. Anlam veremeyeceğiniz marginler, değişik element türleri olarak bütün etiketler birbirine girmiş oluyor arayüzde. CSS ile tüm html5 etiketlerini blok element ayarlayıp basitçe resetlemek için:

section, header, nav, footer, article {
    display: block;
    padding: 0;
    margin: 0;
}

yapabilirsiniz. Bu sayede IEnin eski sürümleri 6,7,8 (emin değilim belki 9 da) html5i bir parça olsun tanır ve insan gibi gösterir hale gelebiliyor. Ama unutmayın daha birçok sorunu düzeltmeye çalışmak uğraşmak zorunda kalabilirsiniz.

Bir suredir yavas da olsa yeniden duzenledigim mfyz.com kodlarini sonunda arayuz kismiyla daha cok zaman harcayip oynayabilecegim bur sekle soktum. Ozellikle tum arayuz parcalarini phptal, less ustune oturtmaya baslamistim. Simdi herhalde su ana kadarki en buyuk degisikligi yaptim ve giris sayfasini yeniledim.



Su an giris ve sifre hatirlatma sayfalari basit bir arayuzle goruntuleniyor, birkac adim sonrasinda bunu lightbox ile normal sayfalarin uzerinde cikacak sekile getirebilirim veya bu sayfalar javascripti olmayan insanlar icin failsafe sayfalar olarak da kalabilir.

Bol bol css3 ve webkit ozellikleri kullanarak hazirladim, sadece kapat tusundaki ikon imaj olarak bir sprite'dan geliyor, gerisi tamamen css3. Tabi less ile cok daha hizli yazip derliyorum css'leri.

Simdi tum bolumleri tek tek sadelestirip eski arayuze ait kodlari temizlemeye calisiyorum. Bitirdigimde artik UX, fonksiyonaliteye odaklanabilirim. Tabi icerigi de ihmal etmemeye calisacagim.

LESS hakkinda daha once ufak tefek seyler yazmistim fakat dokuman haline getirip neler yapabileceginizi anlatmadim.

Artik neredeyse tum projelerimde kullandigim LESS'in artik vazgecilmez oldugunu hissetmeye basladim benim icin. Eger surekli oynadiginiz ve yapisini dogru tutmak istediginiz buyuk css dosyalarina sahipseniz projelerinizde, iste size kisaca less'in ne oldugu, ne gibi avantajlari olacagini anlattigim bir dokuman hazirladim:

http://mfyz.com/dokuman/125/less-ile-hiyerarsik-ve......css-yazmak

Bu aralar cufon, flir gibi web syfalarında kendi fontunuzu kullanabilmenizi sağlayan araçların kullanılabilirliği konusunda yeni nesil css çözümüne alternatif olarak kullanılabilirliğini test ediyordum. Aslında biraz sevindirici bir sonuç aldım. Çünkü css2 ile gelen font-face'in css3 ile tekrar gündeme gelmesinin yanı sıra aslında birçok tarayıcıda sorunsuz kullanılabildiğini gördüm.

Aşağıda @font-face attribute'u ve hangi tarayıcıların hangi sürümden beri desteklediğini görebilirsiniz.

CSS Property	@font-face	format
IE6		EOT
IE7		EOT
IE8		EOT
Safari	3.2	TTF/OTF
iPhone		3.1 supports SVG
Chrome	4.0.249.78	TTF/OTF support added 1/25/10 SVG supported by default
Firefox	3.5	TTF/OTF
Opera	10	TTF/OTF

Kaynak: http://is.gd/id6se

Aslında bu bu tercih edilebiliriği sağlayan bir etken de Microsoft'un herkesten önce bunu implemente etmiş olması. Çünkü IE cephesinin birçok yeni feature'u desteklememesinin yanı sıra XmlHttpRequest gibi birçok tarayıcıdan önce davranmış olduğu konular var. Doğal olarak bu, geliştiricilerin önünü tıkamadığı için webde örnekleri çoğaldıkça kullanımı hızlı yayılıyor. Çünkü her zaman karşımıza çıkan ie problemleri olmuyor.

Tabi bir sorunumuz var, kullanmak istediğiniz fontun her tarayıcının render edebileceği formatlarda sunuyor olmanız gerek. Bu öyle kolay bir iş değil. Zira zaten font kullanımının birçok lisans bağlantısı ve kullanımının açık olmaması gibi bir durum yaygın. Tabi ki SVG gibi formatlar bunu kırıyor fakat yine de bu crossbrowser destek verebilmenizi sağlamıyor. En azından fontunuzun, EOT, SVG, TTF ve OTF formatlarında sunuyor olmanız gerek.

Tabi ücretsiz ve non-commercial kullanımı ücretsiz olan fontları size kit olarak sunan siteler var. Aralarından en sevdiğim olan Fonts Squirrel'i kullanabilirsiniz. Hatta bu ücretsiz font-face kitlerini inceleyip indirebileceğiniz bir sayfaları da var: http://www.fontsquirrel.com/fontface

Sonuç olarak cufon, flir gibi alternatifleri kullanmayı düşünmeden önce fontunuzu bu şekilde çok formatlı sunabiliyor musunuz bunu test etmelisiniz.