WTK207U-WEB TABANLI KODLAMA
Ünite 7: Önemli Web Çatıları ve Kullanımları
Giriş
Firmaların dünyaya açılan kapıları olan internet sitelerinin ya da milyonlarca kullanıcısı olan sosyal ağ sitelerinin hizmet dışı kalmaları günümüz koşullarında bir seçenek değildir. Bu çerçevede yazılım geliştiriciler üretim, düzenleme, bakım ve yenileme süreçlerini hızlandırmak için yardımcı araçlara ihtiyaç duymaktadır. Bugün pek çok ortamda duyduğumuz Angular.JS, Django, Bootstrap gibi projeler bu sorunu çözmek için üretilmiş web çatılarıdır.
Web Çatıları
Web çatısı ya da web uygulaması çatıları internet ortamında çalışan siteler, servisler, kaynaklar ve arayüzler üretmek için tasarlanmış yazılımlardır. Web çatılarının temel amacı, web uygulamalarının geliştirilmesinde önemli bir iş yükü yaratan rutin işlemlerin otomatikleştirilmesi ve böylece programcılar üzerindeki rutin iş yükünü en aza indirgeyerek çevik ve dinamik web uygulamalarının geliştirilmesine destek olmaktır.
Web Çatılarının Gelişimi
İnternetin erken dönemlerinde, yeni bir sayfa üretmek için yazarların/tasarımcıların tüm içerikleri el ile kodlaması, birleştirmesi ve sunucuya göndermesi gerekiyordu. Bu çalışma yapısı kullanıcı etkileşimine engel olmanın yanında, internetin gelişimini de sınırlamaktaydı. Basit bir hesap makinesi gibi, kullanıcı girdisine cevap verecek dinamik sayfaların üretilmesi için CGI (Common Gateway Interface) standardı tanıtıldı. Bu yaklaşımın en büyük problemi her bir istek için sunucu bilgisayarda ayrı bir süreç (process) çalıştırılmasıydı. Sonrasında, internet sunucuları ile entegre çalışabilen betik (script) dilleri geliştirildi. WebBase, ColdFusion, PHP ve ASP gibi işleyiciler sunucu yükü sorununa çözüm getirdi. Bir sonraki adımda, geliştirici ve tasarımcıların iş yüklerini azaltmaya yönelik web çatıları geliştirilmeye başlandı.
Web Çatılarının Kullanım Alanları
Sayfalar sunucular tarafından dağıtılır, tarayıcılar tarafından kullanıcıya eriştirilir. Bu çerçevede, web çatılarının çalışabileceği iki nokta sunucular ve tarayıcılardır. Sunucu tarafındaki işlemler tipik olarak sayfaların yeniden yüklenmesini gerektirir. Sunucu taraflı üretimde pek çok dil ve araç kullanılabilmektedir. Bu araçlar arasında Django, “Zend Framework” ve “Ruby on Rails” sayılabilir. Tarayıcı taraflı yaklaşımda ise sayfanın tamamı yerine küçük bölümlerinde düzenlemeler ve güncelleştirmeler yapılabilmektedir. Bu yaklaşımın dezavantajı kullanılabilecek tek dilin Javascript olması ve işlem gücünün kullanıcı bilgisayarı ve tarayıcısı ile sınırlı olmasıdır. Bu senaryoda kullanılabilecek web çatıları arasında Backbone.js, AngularJS, EmberJS, ReactJS ve Bootstrap sayılabilir.
MVC (model-view-controller) bir yazılım geliştirme desenidir. Bu desen veri soyutlanması esasına dayanır. Buna göre, kontrolcü (controller) adı verilen bir ara sistem, veri (model) ve ara yüzler (view) arasında
köprülük görevi görmektedir. Sistemin avantajı, yazılan kodların tekrar tekrar kullanılabilmesi ve çeşitli uygulamalar için ara yüzler (views) sağlayabilmesidir. Örneğin internet sitesi kullanıcıları için görsel bir ara yüz oluşturulabilirken, uzaktaki uygulamalarla veri alışverişi için farklı bir ara yüz (web servisleri) üretilebilmektedir.
Web Çatılarının Yararları
Bir web çatısı kullanmanın en önemli avantajı, kodların tekrar kullanılabilir olmasıdır. Web çatıları deneyimli geliştiriciler ve geliştirici takımları tarafından tekrar kullanılabilirlik ilkesi ile üretilir. Web çatısı kullanmanın bir diğer yararı ise ücretsiz yardım kanallarını kullanıma sunmasıdır.
Web çatısı kullanmanın bir diğer yararı ise ücretsiz yardım kanallarını kullanıma sunmasıdır. Güncel web çatıları dünya genelinde pek çok yazılımcı tarafından kullanılmakta ve geliştirilmektedir. Bir web çatısı kullanmaya başladığınızda bu çatıyı kullanan tüm geliştiricilerin ve yazılımcıların desteğini almış olursunuz.
Web çatıları genellikle MVC gibi yazılım geliştirme yaklaşımlarını kullanmaktadır. Bu durum projenizin temel kabul görmüş geliştirme yaklaşımları çerçevesinde ilerlemesini sağlayacaktır. Kullanıcı girişi, veri tabanı yönetimi gibi pek çok proje için gerekli işlevleri hazır olarak sunması da web çatılarının yararlarından biridir. Bu sayede, programcıların iş gücü projenin ana problemlerine yönlendirilebilmektedir. Ayrıca web çatılarının sürekli gelişim hâlinde olduğu söylenebilir.
Güncel Bir Web Çatısı: Bootstrap
Bootstrap, internet siteleri ve internet tabanlı uygulamaların kullanıcı arayüzlerini (front-end) geliştirmek için kullanılabilecek bir web çatısıdır. Bootstrap, tarayıcı tarafında çalışan bir web çatısı olduğundan, temelinde HTML, CSS ve Javascript teknolojileri yer almaktadır. Bootstrap, web siteleri ve uygulamaların kullanıcı arayüzlerini hızlı ve kolay geliştirmek için gerekli araçları sağlamaktır. Günümüz tarayıcı ve ekran boyutları ekosistemi oldukça dinamik ve çeşitlidir. Ekranların boyutları, en boy oranları ve tarayıcı genişlikleri cihazdan cihaza önemli farklılıklar göstermektedir.
Programlama literatüründe kullanıcının gördüğü ara yüzlere on yüz (front-end) denmektedir. Bunun yanında, uygulamaların arkasında çalışan veri tabanı erişimi, hesaplama rutinleri gibi işlevlere ise arka yüz (back-end) adı verilmektedir. Büyük ölçekli uygulamaların on yüz ve arka yüz geliştirici takımları işbirliği içinde çalışmaktadır.
Birleşmiş Milletler’in teknoloji alanındaki araştırma kolu olan ITU’ya (2015) göre, dünya genelinde mobil internet kullanıcısının oranı (%47,2), sabit bağlantı kullanan internet kullanıcısı oranından (%46,4) daha fazladır. Bu durum, üretilen içeriklerin mobil cihazlarda düzgün görünmesini zorunlu kılmaktadır.
Tepkisel tasarım (responsive design), sitelerin ve uygulamaların çeşitli ekran ve tarayıcı genişliklerine göre kendilerini yeniden düzenleyebildiği bir tasarım yaklaşımıdır. Bu yaklaşımın amacı, sitenin tasarım ve ölçeklendirmesini değiştirerek, okunurluğu desteklemek ve kullanıcı etkileşimini iyileştirmektir. Yaklaşımın temelinde CSS 3 tanımlamaları ile birlikte gelen medya sorguları (media querries) yer almaktadır.
Bir Bootstrap Projesinin Anatomisi
Bootstrap tepkisel tasarım özellikleriyle, ürünlerin tarayıcı boyutlarına göre ölçeklendirilmesi ya da farklı yerleşimlerle sunulmasını sağlayabilmektedir. Temel bir Bootstrap projesinde şu bileşenler yer almalıdır:
HTML Dokümanı: Temelinde internet teknolojileri yatan Bootstrap projeleri, HTML dokümanları üzerinden sunulur. Bu nedenle HTML dokümanı tüm içerikler için kapsayıcı rolündedir.
CSS Dokümanı: Boostrap ile birlikte gelen görsel özellikler CSS dosyasında tutulmaktadır. Zorunlu hâller dışında bu dosya üzerinde değişiklik yapılmamalıdır.
Javascript Dokümanları: Bootstrap projeleri açılır menüler ve kayan resimler gibi kullanıcı etkileşimli bileşenler içerebilir. Bu bileşenlerin doğru çalıştırılabilmesi için bootstrap.js dosyası projeye eklenmelidir. Bunun yanında, bootstrap.js dosyasındaki kodların düzgün çalışabilmesi için, başka bir web çatısı olan JQuery’e ihtiyaç duyulmaktadır.
Simgeler: Bootstrap ile birlikte gelen görsellerin kullanılabilmesi için fonts klasörü projeye dâhil edilmelidir. Simgelerin projeye eklenmesi için herhangi bir kod yazılmaz. Simgeler, css dosyası içinden otomatik olarak çağırılır.
Bootstrap Projesi Başlatmak
Bootstrap projeleri için gerekli dokümanlar projeye iki yöntemle eklenebilir. Kullanılabilecek ilk yöntem, içerik dağıtım ağları üzerinden sunulan uzak dosyaları projeye eklemektir. İkinci yöntemde ise, gerekli dosyalar sunuculardan indirilerek yerel dosyalar hâlinde projeye eklenir. Uzak yöntemi kullanmanın ilk avantajı, bu dosyalar için sunucu disk alanı harcanmamasıdır. Bunun yanında, Bootstrap pek çok projede kullanılan bir web çatısı olduğundan, bu dosyaların projeler arasında paylaşılması olasıdır. Projenizin kullanıcı bilgisayarına yüklenmesi sırasında, başka bir proje için zaten indirilmiş olan dosyalar tekrar kullanılabilir. Bu sayede projenizin yüklenme süresi kısalarak performansı artacaktır. Bununla birlikte, uzak dosya kullanımının önemli sınırlılıkları da bulunmaktadır. Öncelikle uzak sistemde proje geliştirmek için internet bağlantısı gerekmektedir. Bu çerçevede internet erişimi sağlanamayan durumlarda geliştirme süreci aksayabilecektir. Bir diğer sınırlılık ise projenin dış kaynağa bağımlı olmasıdır. Kullanıcıların sizin sayfanıza erişebildiği, fakat içerik dağıtım ağlarına erişemediği senaryolarda projeniz düzgün görüntülenemeyecektir.
Uzak dosya kullanma yaklaşımının son sınırlılığı bu dosyaları kendi ihtiyacınıza göre düzenleyememenizdir. Projenizin bu sınırlılıklardan etkileneceğini düşünüyorsanız, yerel yöntemi tercih etmeniz faydalı olacaktır.
Yerel yöntem ile proje başlatmak için Bootstrap dosyaları ve Jquery dosyalarının ilgili sunuculardan indirilmesi gerekmektedir. “Bootstrap İndir” bağlantısı tıklandığında gerekli tüm dosyalar sıkıştırılmış bir paket hâlinde bilgisayarınıza transfer edilir. Bu paketin içinde css, fonts ve js isimli üç klasör gelmektedir. CSS klasörünün içinde bootstrap.css dosyası, sıkıştırılmış (min) hâli ve map dosyası bulunabilir. Bunun yanında görsel olarak daha zengin bir deneyim sunan bootstrap-theme. css dosyası, sıkıştırılmış hâli ve map dosyası bulunmaktadır. Fonts klasörü içinde kullanılabilecek simgeler pek çok formatta sunulmaktadır. Bu dosyalara dokunulmadan fonts klasörü, css klasörü ile aynı yerde tutulmalıdır. js klasörü içinde bootstrap.js ve sıkıştırılmış hâli olan bootstrap. min.js dosyaları bulunmaktadır. Bunlardan biri jquery dosyasından sonra projeye eklenmelidir.
Metin Etiketleri
Bootstrap, sayfalardaki metinlerin okunurluğunu arttırmak için CSS kuralları ve pek çok uygulama sınıfı sağlamaktadır.
Temel Metin Etiketleri
Bootstrap HTML dilindeki tüm başlık düzeylerini destekler. Bunun yanında, düz metinler üzerinde başlıklardaki görsel etkileri oluşturan araç sınıfları bulunmaktadır. Bilindiği gibi HTML dilindeki başlık etiketleri blok elementlerdir. Bu elementlerin etkilerini metin içinde kullanmak için aynı isimli araç sınıfları kullanılabilmektedir.
İşaretleme Etiketleri
Bootstrap düz metinleri işaretlemek için pek çok HTML etiketini desteklemektedir. Bu etiketleri kullanmak için bir p etiketinin içinde aşağıdaki metinleri kullanabilirsiniz.
Hizalama Sınıfları
metinleri bulundukları ortamda hizalamak için beş adet hizalama sınıfı sağlanmaktadır.
Vurgulama Sınıfları
Metinleri renklendirmek için altı adet vurgulama sınıfı kullanılabilir. Bu sınıflar, bağlantılar da dâhil olmak üzere, tüm metin elementlerine uygulanabilir.
Bootsrap Listeleri
Bootstrap, sırasız listeler, sıralı listeler ve tanımlama listeleri olmak üzere HTML dilinde tanımlı üç liste türüne destek vermektedir. Sırasız listelerde elementlerin birbirleri ile herhangi bir sıra ya da hiyerarşi ilişkisi yoktur. Bu nedenle veriliş sıraları önemli değildir. Sıralı listelerde ise elementler arasında hiyerarşi ya da sıralama ilişkisi bulunmaktadır. Bu listeler varsayılan olarak numaralandırılmış olarak gelmekle beraber, ol etiketinin
type özelliği ile bu davranış değiştirilebilir. Son olarak tanımlama listeleri başlık ve açıklama çiftlerinden oluşan listelerdir. Örnek olarak, sayfada geçen terimlerden oluşan küçük bir sözlük oluşturmak için tanımlama listeleri kullanılabilir.
Bootstrap Tabloları
Tablolar en çok kullanılan HTML yapıları arasındadır. Bootstrap tabloların stillenmesi için pek çok seçenek sunmaktadır. Yeni bir tablo üretildiğinde Bootstrap temel tipografik öğeler dışında herhangi bir düzenleme yapmaz. Table etiketine table sınıfı eklendiğinde tablonun sunumunda önemli değişiklikler gözlenecektir. Öncelikle tablo bulunduğu ortamı kapsayacak kadar genişletilir. Bunun yanında hücrelere padding eklenerek hücreler arası boşluklar yükseltilir. Son olarak satırlara alt kenarlık eklenerek tablonun okunması kolaylaştırılır. Ayrıca tabloların satırları ve hücreleri kavramsal sınıflar kullanılarak boyanabilir.
Bootstrap Boyut Sistemi
Bootstrap öncelikle mobil cihazları hedef alan tepkisel bir sistemdir. Bu sistemde içerikler farklı ekran boyutları, oranları ve tarayıcı genişliklerinde tepki verecek şekilde tasarlanabilmektedir. Bu tepkisel sistemin yönetilmesi için boyut sisteminin anlaşılması oldukça önemlidir. Boyut sistemi ön tanımlı kırılma noktaları ve bu noktalar arasındaki aralıklara verilen kısa belirteçlerle işlemektedir.
Bootstrap Izgara Sistemi
Bootstrap sisteminin en önemli elementlerinden biri sayfa içeriğinin yerleşimini düzenleyen ızgara (grid) sistemidir. Bootstrap ızgara sistemi container, row ve column olmak üzere üç temel bileşenden oluşmaktadır:
Container: Container sınıfı sayfa içeriğini ve kurulacak ızgara sistemini kapsamak için üretilmiştir. Akışkan ve sabit genişlikli olmak üzere iki container sınıfı bulunmaktadır. Akışkan container sınıfı her zaman tarayıcı genişliğinin tümünü kapsayacak şekilde boyutlandırılır. Sabit genişlikli container sınıfı ise tarayıcı genişliğine tepki verecek şekilde boyutlandırılır.
Row: Satırlar (row) yatay sütun grupları oluşturmak için kullanılır. Düzgün hizalama ve boşluk bırakılabilmesi için her satır sabit genişlikli (container) ya da akışkan (container-fluid) bir container element içine girmelidir.
Column: Sayfadaki içeriği dikey olarak düzenlemek için sütunlar kullanılır. Bootstrap sisteminde yatay genişlikler 12 parçaya bölünerek işlenir. Sütunlar oluşturulurken hangi ekran genişliğinde kaç yatay dilim kapsayacağı belirlenir. Her sütun isimlendirmesi “col-” ön eki ile başlar. Bundan sonra yapılan belirlemenin hangi tarayıcı genişliği için geçerli olduğu, genişlik belirteçleri ile bildirilir. Bunun ardından bu sütunun belirlenen tarayıcı genişliğinde ne kadar yer kaplayacağı sayısal olarak verilir.
Bootstrap sisteminde bir tarayıcı boyutu için belirlenen yerleşim kuralları üst tarayıcı boyutları için geçerli kalır. Örneğin sm tarayıcı boyutunda oluşturulan iki sütunlu bir yapı, üst tarayıcı boyutları olan md ve lg için farklı bir kural belirtilmemişse aynen korunur. Sitenin sunumu md ve lg boyutları için iki sütunlu olacak şekilde düzenlenecektir. Alt tarayıcı boyutlarına geçildiğinde, bu boyutlar için farklı kurallar belirtilmemişse en küçük tarayıcı boyutu olan xs boyutundaki kurallar işletilir. xs boyutu için herhangi bir sütun tanımlaması yapılmadıysa, varsayılan olarak her sütun ekranı kaplayacak şekilde düzenlenecektir. Bu nedenle, sunum yapısı tek sütunlu hâle geçirilir.
Form Elementleri
Bootstrap HTML dilindeki form elementleri için önemli zenginleştirme seçenekleri sunmaktadır. Bu elementler Bootstrap ile işlendiklerinde tüm tarayıcılarda aynı etki ve görünümlere kavuşur.
Düğmeler
Oluşturulurken btn sınıfı ile birlikte, en az bir kavramsal sınıf ya da btndefault sınıfının eklenmesi gerekmektedir. Kavramsal sınıfların yanında, düğmelerin ebatlarını belirlemek için kullanılabilecek dört sınıf daha bulunmaktadır. Ebat sınıflarının kullanımı kavramsal sınıflar gibi zorunlu değildir. Bu durumda btn sınıfından gelen değerler kullanılır. Sayfa tasarımlarında daha az yer kaplaması için düğmeler gruplanarak araç kutuları oluşturulabilir. Bu amaçla, gruplanacak düğmeler btn- group sınıflı bir div elementinin içine eklenebilir. Düğme sunumlarını zenginleştirmek için simgeler kullanılabilir. Bootstrap sisteminde simgeler span elementleri kullanılarak eklenmektedir. Bu elementlere glyphicon sınıfı ile birlikte simgeyi belirten bir sınıf eklenir.
Giriş Elementleri
Bootstrap sisteminde input, textarea ve select elementleri formlarda kullanılmak üzere desteklenmektedir. Elementler için açıklama metinleri label etiketleri içinde verilmelidir. Label etiketleri ile input elementleri bağlantısı id-for eşleşmesi ile sağlanır. Bu kullanım sayesinde açıklama metnine tıklandığında ilgili element aktif hâle geçebilmektedir. Her label-input çifti form- group sınıflı div elementleri içine alınmalıdır. Bu yolla form elementlerinin düzgün yerleşimi sağlanır. Input elementlerinin Bootstrap görüntü ve etkileşim özelliklerini kazanması için form-control sınıfı eklenir. Bu sınıf eklendiğinde element bulunduğu ortamdaki genişliğin tamamını kaplayacaktır. Label ve input yerleşimi varsayılan olarak dikeydir. Bu yerleşimin yataya çevrilmesi için form elementine form-inline sınıfı eklenmelidir. Bu durumda label ve input aynı satıra getirilecek, input nesnesinin genişliği daraltılacaktır. Bu görünüm xs tarayıcı boyutu dışındaki tüm boyutlarda korunur. Tarayıcı boyutu xs olduğunda, form otomatik olarak dikey hâle geçecektir.
Element Grupları
Ekran alanını daha ekonomik kullanmak için form elementleri birleştirilebilir. Bu sistemde düğmeler ve giriş elementleri tek element olarak gösterilir. Giriş elementlerinin her iki tarafına da düğme eklenebilir. lement gruplarında düğmelerin yanında işaretleme kutuları ve radyo düğmeleri gibi elementler de kullanılabilir. Ek olarak bilgilendirme amaçlı karakterler ya da simgeler de eklenebilir. Bu durumda inputgroup-btn sınıfı yerine input-group-addon sınıfı kullanılır.
Görsel Element Sınıfları
Bootstrap görsellerin sunumu ve boyutlandırılması için çeşitli olanaklar sunmaktadır. Bunların ilki görsellerin bulundukları ortam ve ekran boyutlarına göre boyutlandırılmasını sağlayan img-responsive sınıfıdır. Resimlerin sunumlarını düzenlemek için kullanılabilecek üç sınıf daha bulunmaktadır. Bunlar resimleri çerçeveler içine yerleştirmek için kullanılır. img-thumbnail sınıfı, görseli beyaz zeminli ve gri çerçeveli bir kutu içine alır. Özellikle artalan rengi olmayan ya da beyaz olan görsellerin sınırlarının belirtilmesi için kullanılabilecek bir sınıftır. img-rounded sınıfı görsellerin kenarlarında 6px yarıçaplı bir yumuşatma uygular. img-circle sınıfı ise görseli bir daire içinde sunmak için kullanılır.
Menü Sınıfları
Bootstrap, sitelerdeki yönlendirme işlemleri için kullanılabilecek menü seçenekleri sunmaktadır. Menüler ul elementlerine uygulanan sınıflar yoluyla oluşturulmaktadır. Menü çubukları nav elementleri içinde oluşturulmalıdır. nav elementine Bootstrap menü çubuğu görüntüsü kazanmak için “navbar” sınıfının yanında bir de tema sınıfı eklenir. Menü çubuğunda açık (navbar-default) ve koyu (navbar-inverse) olmak üzere iki tema kullanılabilir. Menü çubuğu içinde kullanılacak ilk element site kimliğini belirleyen metin ya da ikonları tutan, başlık bölümü olarak düşünülebilecek “navbar- header” elementidir. Menü çubuğunda asıl menü bölümü ise ul elementi ile oluşturulur.
Kayan Resimler
İnternet sitelerinde marka imajları, reklamlar, duyurular, ürün tanıtımları gibi amaçlarla kullanılan, en önemli görsel araçlardan biri kayan resimlerdir. Kayan resim elementi kapsayıcı bir div elementi içinde oluşturulur. Daha sonra oluşturulacak oklar ve madde işaretleri gibi kontrol elementleriyle kullanmak için bu div elementine bir id verilmelidir. Kapsayıcı div elementine ilk olarak carousel sınıfı eklenir. İsteğe bağlı olarak, resimlerin kayarak geçişini sağlamak için slide sınıfı kullanılabilir. Slide sınıfının kullanılması zorunlu değildir, bu sınıf kullanılmadığında resimler kaymadan değişmeye devam edebilir. Son olarak div elementinin data-ride özelliği carousel olarak belirlenir. Bu sayede Bootstrap’in Javascript sınıfları elemente uygulanarak resimlerin otomatik değişimini sağlayacaktır.