Ünite 14: Bootstrap ile Duyarlı Web Tasarımı — Alıştırmalar
Ders kitabının açık uçlu alıştırmaları. Bunlar çoktan seçmeli sınav sorusu değil — düşünmeni, araştırmanı, kendi cümlelerinle anlatmanı isteyen etkinlikler. Kitabın verdiği örnek yanıtlar kapalı duruyor; önce kendin dene.
Alıştırma 1myders hazırladı
Bootstrap kurulumunda kullanılan CDN (Content Delivery Network) yöntemi ile yerel (lokal) kurulum yöntemini avantaj ve dezavantajları açısından karşılaştırarak hangi durumlarda hangi yöntemi tercih etmeniz gerektiğini açıklayınız.
Yanıt / ipucu
CDN yöntemi hızlı kurulum ve güncellik sağlarken internet bağlantısı gerektirir; yerel kurulum ise internet bağımsız çalışmaya izin verir ancak manuel güncelleme gerektirir. Geliştirme aşamasında veya çevrimdışı çalışırken yerel kurulum, canlıya alınan ve hızlı yüklenmesi istenen projelerde ise CDN tercih edilmelidir.
Alıştırma 2myders hazırladı
Duyarlı (Responsive) web tasarımında 'viewport' meta etiketinin işlevini araştırınız ve bu etiket kullanılmadığında mobil cihazlarda web sayfasının nasıl görüntüleneceğini örnekleyerek açıklayınız.
Yanıt / ipucu
Viewport meta etiketi, tarayıcıya sayfa genişliğini cihazın ekran genişliğine göre ayarlamasını söyler. Bu etiket kullanılmazsa, mobil tarayıcılar sayfayı standart bir masaüstü ekranı gibi varsayıp sığdırmak için küçültecek, bu da metinlerin ve görsellerin okunamayacak kadar küçük görünmesine neden olacaktır.
Alıştırma 3myders hazırladı
Bootstrap'in 12 sütunlu ızgara (grid) sistemini kullanarak, bir web sayfasında yan yana duran 4 eşit sütunlu bir yerleşim oluşturmak için yazılması gereken HTML ve Bootstrap sınıf yapısını tasarlayınız.
Yanıt / ipucu
Yerleşim için öncelikle bir 'container' sınıfı, içerisine bir 'row' sınıfı ve onun da içine her biri 'col-md-3' sınıfına sahip 4 adet div elementi eklenmelidir. 12 birimlik toplam alan, her bir sütuna 3 birim verilerek (4x3=12) eşit şekilde paylaştırılmış olur.
Alıştırma 4myders hazırladı
Mobil öncelikli (mobile-first) tasarım yaklaşımının ne anlama geldiğini araştırınız ve Bootstrap'in bu yaklaşıma uygun olarak sunduğu 'col-sm-*' gibi sınıf isimlendirmelerinin mantığını açıklayınız.
Yanıt / ipucu
Mobil öncelikli tasarım, arayüzün önce en küçük ekran boyutuna göre tasarlanıp ardından büyük ekranlara doğru genişletilmesidir. Bootstrap'te 'col-sm-*' gibi sınıflar, belirtilen ekran boyutundan (small ve üzeri) itibaren geçerli olacak sütun genişliklerini tanımlayarak bu hiyerarşiyi destekler.
Alıştırma 5myders hazırladı
Bootstrap ile oluşturulan bir menü çubuğunun (navbar) mobil cihazlarda hamburger menüye dönüşmesini sağlayan mekanizmayı ve bu yapıda kullanılan temel bileşenlerin rollerini inceleyerek açıklayınız.
Yanıt / ipucu
Bu yapı, ekran daraldığında menü elemanlarını gizleyen bir CSS sınıfı ve bu elemanları açıp kapatmayı sağlayan bir buton (hamburger menü) tetikleyicisi içerir. Bootstrap'in JavaScript kütüphanesi, butona tıklandığında menü listesinin görünürlüğünü dinamik olarak değiştirerek bu etkileşimi sağlar.
