Herkese selam, video gelmeyecek mi diye sorduğunuz duymuyor gibiyim. Hiç sormadınız :(. Neyse önce bir anlatayım sonra bir örnek yapacağım videoda.
Konumuz: Bootstrap & Responsive
Kitaplarımızın 15. sayfasını açıyoruz. heheh lisedeymişim gibi oldu birden. Neyse devam edelim.
Aslında bunu web dünyasının milattan önce ve milattan sonraki kısmı diye ikiye ayırabilirsiniz.
Örnek bir site atmayacağım çünkü imaj zedeleme gibi bir durum olmasın. Önceden hatırlarsınzı bazı sitelere girdiğinizde farklı boyutlarda ekranlarda ya küçük çıkar veya büyükse kaydırma çubukları çıkardı.
İşte dediler ki hoooooooooooooop. Bu böyle olmaz kullanıcı deneyimi kötü olur. O yüzden biz elementlerin kendi kendini cihaza göre ayarlayabildiği bir şey kullanalım demiş olmalalır ki responsive tasarım çıktı. Bu tasarım şekli Ethan Morcotte tarafından 2010 yılında ortaya çıktı. Ne kadar güzel bir abi. Teşekkürler super web developer kalp. Responsive’in kelime anlamı “duyarlı” demektir. Çevreye duyarlı, insanlığa… Tüm cihazlara uygun olarak şekillenen ve bunun için ek bir çaba sarf etmeden bunu yapan bir şey. Şöyle düşünün cagriel.com diye bir sitemiz var içinde yazılarım var ve bir de mobil kullanıcılar için ayrıca m.cagriel.com diye bir alt alan adım var. İki tasarım, iki ayrı uğraş ve Google’ın sevmediği bir durum. Tek url, daha az yük, daha çok indexleme = responsive.
Tabi her responsive tasarımı da şaha çıkarmıyor Google. Bakınız benim sitem. Azcık paylaşıp destek olun yahu :).
Şimdi geçelim Bootstrap’a.(Söylemesi çok hoş)
Aslında o günden günde eriyen borsada değer kaybeden 200 kişiyi işten çıkaran o 140 karakteri 280’e çıkara Twitter geliştirici ekibinin elinden çıkan bir şey.
Bootstrap bizlere düzgün bir grid(ızgara) sistemi, tarayıcı uyumluluğu konusunda duyarlılık, sayfalarımız içerisinde kullanacağımız bir çok elementin değişik bir çok seçeneğiyle birlikte hazır olarak alınabilmesi olanağı sağlıyor.
Izgara yapısı aşağıdaki gibi :
Çok fazla detaya girmeyeceğim çünkü iki yazıdan oluşan oldukça detaylı bir anlatım buldum. Biz paylaşamayı seven insanlarız o yüzden Fatih Hayrioğlu’nun makalelerini okuyun.
http://fatihhayrioglu.com/bootstrap-izgara-Grid-sistemi-1/
http://fatihhayrioglu.com/bootstrap-izgara-grid-sistemi-2/
Ayrıca twitter adresi :
twitter.com/fatihhayri
Şimdi bootstrap için kaynaklara geçelim. Aşağıya linkleyeceğim kalan kısmı videoda bir demo yaparak göstereceğim.
http://trbootstrap.com/getting-started/
Buradan ücretsiz başlangıç temalarını indirip üzerine yazabilir veya bootstrap’ı projenize dahil ederek kullanmaya başlayabilirsiniz.
Bir daha ki yazımda bir bootstrap & responsive site yapacağız hatta aklımda bir proje var onu güzel bir şekilde yapabiliriz diye düşünüyorum 🙂 Kendinize iyi bakın görüşmek üzere :).