ATA-AÖF Web Tasarımının Temelleri Çıkmış Sorular

Ders, web sayfalarının temel yapı taşları olan HTML, CSS ve JavaScript ile duyarlı tasarım, kütüphaneler, API kavramı, alan adı ve hosting mantığı ile prototip araçlarını tanıtır. Ayrıca HTML5 yenilikleri, form özellikleri ve CSS düzen teknikleri ele alınır.

Web teknolojilerinin görev paylaşımı

• HTML sayfanın iskeletini kurar, CSS görünümü belirler, JavaScript etkileşim ve dinamik işlemleri yönetir.
• Renk, boyut ve yerleşim kararları CSS'in işidir; JavaScript yalnızca bu değerleri değiştirebilir.
• Front-end geliştirici arayüz tasarımı ve kullanıcı memnuniyetiyle ilgilenir.
• Veri tabanı işlemleri sunucu tarafındadır ve back-end geliştiricinin görevidir.
• Tarayıcılar yalnızca mobilde değil, masaüstü, tablet ve akıllı televizyonda da çalışır.

HTML yapısı ve etiketler

• Belge doctype bildirimiyle başlar; html etiketi belgenin kök elemanıdır ve başlangıç ile bitişi gösterir.
• html etiketine eklenen lang özniteliği sayfanın dilini bildirir.
• Meta etiketleri head bölümünde yer alır; karakter seti, yazar, açıklama gibi üst verileri tanımlar.
• Footer sayfanın alt bölümünü, header üst bölümü belirtir.
• a etiketi bağlantı verir, tablo için table etiketi kullanılır.
• Özel karakterler ad (') ya da sayısal kod (') ile yazılır.

HTML5 yenilikleri ve API'ler

• canvas etiketi JavaScript ile grafik, resim ve animasyon çizmek için tuval sağlar.
• Sürüklenebilir nesne için draggable="true" özniteliği eklenir.
• Geolocation API kullanıcının konumunu saptar; Google Maps gibi uygulamalar bu veriyi kullanır.
• Metin barındırmak HTML5'in yeniliği değildir, ilk sürümden beri vardır.
• Salesforce.com, 2000 yılında ilk modern web API'sini yayımlayan site olarak kabul edilir.
• API test araçları arasında SoapUI, Postman, Apigee, Jmeter ve Karate DSL sayılır.

Form özellikleri

• required özelliği alanın boş bırakılmasını engeller.
• disabled verilen öğenin değeri sunucuya gönderilmez.
• readonly yalnızca düzenlemeyi engeller, değer yine gönderilir.
• Meta robots etiketinde follow bağlantıların izlenmesini sağlar, karşıtı nofollow'dur.

CSS temelleri

• Geçerli yazım Seçici { Özellik: Değer; } biçimindedir; örnek: #baslik{ color:red; }.
• margin, border, background ve padding kısa yazım özelliğidir; color tek değer alır.
• display, position, z-index ve resize Görsel Biçimlendirme Modeli grubundadır.
• CSS 1994'te önerilmiş, 1996'da W3C standardı olmuştur; 2010'lar CSS3'ün yaygınlaştığı dönemdir.
• transform içinde Scale boyutlandırır, Translate taşır, Rotate döndürür, Skew eğer.

Düzen, duyarlı tasarım ve kütüphaneler

• Flexbox'ta flex-wrap sığmayan öğeleri alt satıra kaydırır.
• align-items, align-self, align-content ve flex Flexbox özelliğidir; border değildir.
• Duyarlı web tasarımı aynı içeriği ekran boyutuna göre uyarlar; temelinde Media Query vardır.
• Bootstrap bir CSS framework'üdür; jQuery, Angular, React ve Vue JavaScript tabanlıdır.
• Foundation mobil uyumlu front-end kütüphanesidir.
• Bootstrap 5 Windows'ta Chrome, Firefox, Edge ve Opera'yı destekler; Safari yalnızca macOS ve iOS'ta desteklenir.
• table-hover sınıfı fare üzerindeki satırı renklendirir.

Alan adı, hosting ve test

• DNS sayesinde kullanıcılar IP yerine alan adı yazarak sitelere ulaşır.
• edu eğitim kurumlarına, com ticari siteye, org kuruluşa, gov devlet kurumlarına ayrılmıştır.
• Çapraz tarayıcı testinde CSS ve JavaScript'in farklı tarayıcılarda çalışması kod uyumluluğu kapsamındadır.
• Webflow görsel tasarımdan temiz HTML/CSS kodu üretip tamamlanmış site teslim edebilir.
• MockPlus, Moqups ve Mockup Builder mock-up araçlarıdır; Origami Studio etkileşimli prototip içindir.

doctype

Belgenin hangi HTML sürümüyle hazırlandığını tarayıcıya bildiren en üst satır bildirimidir.

Meta etiketi

Head içinde yer alıp sayfaya ilişkin üst veri tanımlayan etikettir.

canvas

JavaScript ile çizim yapılan HTML5 tuval alanıdır.

Media Query

Ekran genişliği gibi ölçütlere göre farklı CSS kuralları uygulayan CSS3 teknolojisidir.

Duyarlı web tasarımı

Aynı içeriğin farklı ekranlara kendiliğinden uyum sağlamasıdır.

Flexbox

Öğeleri esnek biçimde hizalayan ve gerektiğinde satırlara yayan CSS düzen modelidir.

Shorthand

Birden çok değerin tek satırda yazıldığı kısa CSS yazımıdır.

Skew

Nesneyi x ve y eksenlerinde eğip yamultan transform işlevidir.

DNS

Alan adlarını IP adreslerine çeviren Alan Adı Sistemi'dir.

required

Form alanının doldurulmasını zorunlu kılan özelliktir.

Geolocation API

Cihazın coğrafi konumunu almaya yarayan API'dir.

• disabled değeri göndermez, readonly gönderir; bu ikisi sık karıştırılır.
• Bootstrap CSS framework'üdür, JavaScript kütüphanesi sayılmaz.
• Geolocation bir API özelliğidir, test aracı değildir; test araçları Postman, SoapUI gibidir.
• Olumsuz sorularda (yanlıştır, değildir, yer almaz) şıkları tek tek elemek gerekir; border, color ve Safari bu tür tuzak şıklardır.
• Görsel tasarım CSS'e, etkileşim JavaScript'e, veri tabanı back-end'e aittir.