Web Tabanlı Kodlama Dersi 7. Ünite Sorularla Öğrenelim
Önemli Web Çatıları Ve Kullanımı
- Sorularla Öğrenelim
- Özet
Web çatısı nedir?
Web çatısı (web framework) ya da web uygulaması çatıları (web application framework) internet ortamında çalışan siteler, servisler, kaynaklar ve arayüzler üretmek için tasarlanmış yazılımlardır.
CGI nedir?
Bu sistemde, sunucu bilgisayarda çalışan programlar kullanıcıdan gelen veriyi işleyerek statik sonuç sayfaları üretebilmekteydi. 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ı. Basit işlemler için oluşturulmuş olsalar bile, tüm süreçlerin toplam iş yükü sunucularda önemli bir darboğaz oluşturabiliyordu.
Web çatılarının kullanım alanlar nelerdir?
Web çatılarının kullanım alanları bir dilin yeteneklerini geliştirmekten, uygulama yazılımları ile programlama üretmeye kadar değişkenlik gösterebilmektedir.
MVC nedir?
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 arayü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 arayüzler (views) sağlayabilmesidir.
Web çatılarının yararları nelerdir?
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.
“Front-end” ve “back-end” ne anlama gelmektedir?
Programlama literatüründe kullanıcının gördüğü arayüzlere ön 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 ön yüz ve arka yüz geliştirici takımları işbirliği içinde çalışmaktadır.
Tepkisel tasarım (responsive design) nedir?
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 nasıldır?
HTML dokümanı, CSS dokümanı, Javascript dokümanları ve Simgelerden oluşur.
Bootstrap projeleri için gerekli dokümanlar projeye kaç yöntem ile eklenebilir?
Bootstrap projeleri için gerekli dokümanlar projeye iki yöntemle eklenebilir. Bu yöntemlerin kendilerine özgü avantaj ve dezavantajları bulunmaktadır. Kullanılabilecek ilk yöntem, içerik dağıtım ağları (Content Delivery Network) üzerinden sunulan uzak dosyaları projeye eklemektir. İkinci yöntemde ise, gerekli dosyalar sunuculardan indirilerek yerel dosyalar hâlinde projeye eklenir. Aşağıda bu yöntemlerin avantajları, sınırlılıkları ve gerçekleştirilme yolları sunulmuştur.
Uzak yöntem ile oluşturulan bir Bootstrap projesinde dosya bağlatısı nereye yazılmalıdır?
Uzak yöntemle oluşturulacak bir Bootstrap projesinin giriş sayfası Resim 7.2’de görüldüğü şekilde kodlanmalıdır. İlk satırdaki doctype etiketi ile bu dokümanın bir HTML 5 dokümanı olduğu tarayıcıya bildirilmektedir. İkinci satırda dokümanın içeriğinin Türkçe dilinde olduğu belirtilmektedir. Üçüncü satırda başlayan HEAD bloğu 11. satıra kadar devam etmektedir. HEAD bloğundaki ilk üç meta etiketinin öncelikli yazılması zorunludur.
Uzak yöntem ile oluşturulacak bir Bootstrap projesinde dosya bağlantısındaki min (bootstrap.min.css) ne ifade etmektedir?
Bu dosyaların isimlerindeki min ifadesi dosyaların küçültülmüş (minified) sürümlerini ifade etmektedir. Bu sürümlerde dosya boyutuna katkı getirebilecek boşluk ve paragraf sonu karakterlerinin hepsi kaldırılır. Bu nedenle dosya içerikleri çok uzun bir satır olarak gösterilir. Bu dosyalar daha küçük boyutlu olsa da, içeriklerinin okunması ve düzenlenmesi daha zordur. Dosyaları incelemek ve düzenlemek isteyen programcılar isminde “min” ifadesi bulunmayan dosyaları tercih etmelidir.
Tipografi (typography) nedir?
Tipografi (typography) yazılı materyallerin okunaklı, kavranabilir ve çekici hazırlanması ile ilgilenen bir sanat dalıdır. Tipografinin araçları arasında, yazı tipi (font), yazı yüksekliği, satır yüksekliği, satırlar arası boşluklar, metin elementleri arasındaki boşluklar gibi özellikler yer almaktadır.
Bootstrap projesinde temel işaretleme etiketleri nelerdir?
Mark - Metnin arkasını boyayarak vurgular. <mark>metin</mark>
S - Metnin üstünü çizer. <s >metin</ s>
del - Silinmiş metni vurgulamak için üstünü çizer. < del>metin</del >
ins - Eklenmiş metni vurgulamak için altını çizer. <ins >metin</ins >
u - Metni vurgulamak için altını çizer. < u>metin</ u>
small - Metni bulunduğu ortamda %85 oranında küçültür. <small >metin</small >
strong - Metni vurgulamak için kalın yazar. <strong >metin</ strong>
em - Metni vurgulamak için yatık yazar. < em>metin</em >
Bootstrap projesinde listeler nelerdir?
Bootstrap, HTML dilinde tanımlı üç liste türüne destek vermektedir: sırasız listeler (<ul>), sıralı listeler (<ol>) ve tanımlama listeleri (<dl>).
Bootstrap projesinde Table etiketinde kullanılabilecek sınıflar nelerdir?
table-striped - Tablo satırlarını bir koyu, bir açık olacak şekilde boyar.
table-bordered - Tablonun dış kenarlıklarını ve hücreler arasındaki dikey kenarlıkları ekler.
table-hover - Fare üzerine geldiğinde tablo satırlarını vurgular.
table-condensed - Hücreler arası boşlukları azaltarak daha yoğun bir tablo oluşturur.
Bootstrap projesinde tablolarda kullanılabilecek kavramsal sınıflar nelerdir?
active - İçeriği vurgulamak için kullanılır.
success - Olumlu ya da başarılı bir içeriği belirtir.
info - Düşük vurgulu, bilgilendirici içerikleri belirtir.
warning - Okuyucu dikkatini gerektiren içerikleri belirtir.
danger - Olumsuz ya da tehlikeli içerikleri beliritr.
Bootstrap sistemindeki kırılma noktaları ve genişlik belirteçleri nelerdir?
Xs - x < 768px
Sm - 768px ? x ? 991px
Md - 992px ? x ? 1199px
Lg - x ? 1200px
Container nedir?
Container sınıfı sayfa içeriğini ve kurulacak ızgara sistemini kapsamak için üretilmiştir. Sayfa içerikleri ve ızgara sistemi container özellikli bir element içine yerleştirilmelidir. Akışkan ve sabit genişlikli olmak üzere iki container sınıfı bulunmaktadır. Akışkan container sınıfı (container-fluid) her zaman tarayıcı genişliğinin tümünü kapsayacak şekilde boyutlandırılır.
HTML’de kaç farklı şekilde elementler düğme olarak kullanılır?
Üç farklı HTML elementi düğme olarak kullanılabilir: <a>, <button> ve <input>. Aşağıda bu elementlerin düğme görünümü kazanması için gerekli işaretlemeler ve etkiler gösterilmiştir.
Bootstrap sisteminde giriş elementleri nelerdir?
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. input elementine verilen id değeri, label elementinin for özelliğine yazılarak eşleşme sağlanır. Bu kullanım sayesinde açıklama metnine tıklandığında ilgili element aktif hâle geçebilmektedir. Özellikle işaret kutusu (checkbox) ve radyo düğmeleri gibi küçük elementler için bu kullanım oldukça kullanıcı dostudur. 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.