Arayüz Tasarımcıları ve geliştiricileri için Front-end HTML5 Framework'leri | Kemal Şahin'nin Eskiz Defteri
Framework’ler üzerine yazmayı ve seviyorum. Eskiz defterinin sayfalarında zaman zaman farklı alanlardaki frameworkler üzerine ayırdığım oldu. Bu sefer de HTML5 üzerine bir derleme sunacağım.Yanlız şunu belirtmekte fazda var; burada anlatacağım framework’ler front-end konusunda uzmanlaşmış HTML5 destekli duyarlı uygulama iskeletleri. Yani katıksız bir HTML5 uygulama geliştirme konusunda pek hünerli değiller. (O konuda da çok başarılı framework’ler. Onları da ayrıca başka bir yazı da değineceğim.)
Ünlü arayüz tasarımcısı ve geliştiricisi, Ethan Marcotte bir konuşmasında her front-end developer’ların az ve çok muhakkak bir miktar korsan şapkası giymesi gerektiğini belirtmişti. Özellikle web dünyası başta olmak üzere arayüz tasarımında, artık kabul edilmesi gereken grafik elementler çok yaygınlaştı ve benimsendi. Hatta kullanıcı dostu bir uygulama geliştirmek istiyorsanız muhakkak bu standartlara dikkat etmeniz gerekiyor.
Bu nedenle Marcotte, arayüz geliştiricilerinin bu durumdan kaçamayacağını ve muhakkak geçtiği yollarda izleri takip etmesi gerektiğini vurgulamıştı. Böylece uygulamaların yol üzerindeki, bariz ve büyük çukurlara düşmesinin engellenebileceğini savunmuştu. Bence de çok haklıydı. Hem böylece uygulamaların yaşam döngüsü çok hızlı ilerliyor ve bir an önce kullanıcısına kavuşuyordu.
Bu hızlanma ve tutarlığı destekleyen en önemli teknolojik araçlardan biri de tabii ki Framework’ler. Türkçesi ile uygulama iskeletleri. Browser uyumluğu, medya tutarlığı gibi kritik konulara büyük çözümler üreten HTML5 framework’ler, uygulama sahibinin fikre odaklanmasını sağlıyor ve üzerindeki yükleri hafifletiyor. Büyük komünitelerin ve kurumların desteklediği bu framework’ler her geçen gün daha fazla yaygınlaşıp daha çok uygulamanın eti kemiğine bürünüyor. Şimdi sırasıyla bunları inceleyelim
Söze, Twitter Bootstrap ile başlayınca diğer alternatiflerin pek bir önemi kalmıyor. HTML5 konusunda en güçlü ve pratik framework herkesin ortak kaanati ile kesinlikle Bootstrap‘ dır. Geliştiricilere ve tasarımcılara zengin seçenekler sunan framework, tüm medyaları da sorunsuz destekliyor. Adaptasyon problemi yaşamıyor. O nedenle yapacağız uygulamaların, sitelerin mobile, tablet ve pc uyumluluğunu çok rahat ve hızlı bir şekilde sağlayabilirsiniz. 12 sütunluk bir iskelet desteği sunan paket, 724px, 940px ve 1170px olmak üzere 3 farklı sabit sayfa düzeni ile de hazır olarak geliyor. (Tabii isterseniz bu standartlara da müdahale edebiliyorsunuz. ) Hızlı prototipleme için de oldukça kullanışlı olan set, github üzerinden yönetilebiliyor ve bir çok browser sürümü tarafından sorunsuzca destekliyor.
Bootstrap‘ın en büyük alternatiflerden biri olan Foundation, Zurb firması tarafından açık kaynak olarak geliştiriliyor. mobile-first yaklaşımı ile geliştirilen framework, zengin bir ızgara yapısı sunuyor. 16 sütunluk ızgara yapısı eğer size yetersiz gibi geldiyse, ihtiyacınıza göre çok daha fazla özelleştirebilirsiniz. Zengin mobil desteği ile gelen paket bir çok browser ile de sorunsuz çalışabiliyor. Ekstra hiçbir eklentiye ihtiyaç duymadan standart pakete bir çok UI elementi dahil olarak geliyor. Tooltip, uyarı, hata ve geri bildirim ifadeleri mobil ile birebir uyumlu halde paketin içerisinde sizin emirlerinizi bekliyor. Joyride desteği de olan Foundation şke çok rahat bir şekilde CSS veya SCSS parametrelerini özelleştirebiliyorsunuz. Diğer bir tadına doyamayacağınız özelliği de Magellan adındaki sayfa pozisyon yönetimi. Sayfa içinde yapışkan sabit bölümler oluşturabilmek için harika kolaylıklar sunuyor.
Yüksek performans ve farklı bir yaklaşıma ihtiyaç duyuyorsanız bu framework tam size göre olabilir. Noarmalize.css adını verdikleri css sıfırlama derlemesi ile farklı bir bakış açısı getiren paket, sağlam referans portfolyosu ile de göz dolduruyor. Google Microsoft ve Nasa gibi firmalarında tercihi olan Boilerplate, JQuery’nin yanı sıra Modernizr kütüphanesini de destekliyor.
Responsive Design (Duyarlı Tasarım) konusunda oldukça iddialı olan Skeleton, 12 sütunluk ızgara sistemi ile geliştirilmiş bir HTML5 framework’ü. Çok ufak boyutu ile göz dolduran paket, hızlı geliştirme konusunda güzel bir alternatif olarak karşımıza çıkıyor. 17″ gibi büyük ekran laptop’lar için de destek veren Skeleton mobil aygıtları da desteklemekten vazgeçmiyor.
Şimdi, HTML KickStart’a göz atalım. Oldukça kolay ve hızlı öğrenebileceğiniz bu framework ile çok hızlı bir şekilde geliştirebilirsiniz. İçerisinde onlarca hazır UI öğesi barındıran paket sayesinde, hazır elementleri kullanarak hızlı HTML5 prototipler hazırlayabilirsiniz.
CSS3′ün tüm nimetlerinden faydalanan, içerisinde HTML5 video oynatıcı olan güzel düşük boyutlu bir paket olan 52framework, serinin en son alternatifi. Tam olarak duyarlı web konusunda büyük iddiaları olmasa, sahip olduğu hünerler konusunda yadsınamayacak bir seçenek gibi duruyor.
İlk okunduğu zaman insanın iştahını kabartan bu framework’ler bilinçsizce ve dikkatsizce kullanımlarda başınızı ağrıtabilir. Proje kapsamı ve detayı çok iyi belirlendikten sonra artıları ve eksileri çıkartarak iyi bir SWOT analizi ile framework seçimi yapılmalı. Aksi takdirde, dört nala koşup hızlıca projemi çıkartayım derken ayağınız takılıp düşebilir ve büyük yaralar alabilirsiniz. Bu noktada en büyük görev yazılım mimarisini hazırlayan kişilere düşüyor. Bu analizler ve değerlendirmeleri iyi yaparak karar vermeli. Bol bol başarılı projelere imza atmanızı diliyorum!
Nokia için uygulama geliştirme: Qt Nedir?
WRT araçları ile Nokia Platformlarına Uygulama Geliştirmek
Herşeyin çoklusu : Çoklu Twitter, çoklu facebook, çoklu wordpress
iPhone’daki Safari’ye alternatif 10 Browser
52framework Bootstrap css CSS3 Ethan Marcotte Foundation framework front end google html 5 HTML 5 Video Player HTML KickStart HTML5 Boilerplate html5 framework HTML5 video oynatıcı jquery Magellan microsoft mobile-first Modernizr Nasa Responsive Design SCSS Skeleton SWOT Twitter Bootstrap ux web design web designer Web Tasarım web tasarımı yazılım geliştirme Yazılım mimarisi Zurb
Elinize sağlık, güzel bir ön bilgi olmuş.. seçim konusunda kararsız kaldığım noktalar vardı