97 terim

Web Tasarım SözlüğüWeb Tasarım Terimleri A–Z

Web tasarımın arayüz, deneyim ve uygulama tarafındaki temel kavramları: responsive tasarım, tasarım sistemleri, erişilebilirlik, görüntü alanı ve sayfa performansını etkileyen yükleme teknikleri.

Tanımlar tasarım ile geliştirme arasındaki köprüyü kurar: bir kavramın kullanıcıya nasıl yansıdığını ve tarayıcıda teknik olarak nasıl çalıştığını birlikte anlatır.

A

A/B TestiA/B testi, bir sayfanın veya öğenin mevcut sürümü (A, kontrol) ile değiştirilmiş sürümünü (B, varyant) eş zamanlı olarak rastgele ayrılmış ziyaretçi gruplarına gösterip hangisinin belirlenmiş bir metrikte daha iyi sonuç verdiğini istatistiksel olarak ölçen deney yöntemidir. Sonucun tesadüf olmadığından emin olmak için örneklem büyüklüğü testten önce hesaplanır ve test bu büyüklüğe ulaşmadan sonlandırılmaz.
Above the Fold (Ekranın Üst Kısmı)Above the fold (ekranın üst kısmı), bir web sayfası açıldığında kullanıcının hiç kaydırmadan görebildiği ilk bölümdür. Terim, katlanmış hâlde satılan gazetelerin görünen üst yarısından gelir. Web'de bu sınır sabit bir piksel değeri değildir; cihaza, ekran boyutuna ve tarayıcı penceresine göre değişir. Sayfanın ana mesajı ve çoğu zaman LCP öğesi bu alanda bulunur.
Açılış Sayfası (Landing Page)Açılış sayfası (landing page), iki anlamda kullanılır: analitikte bir oturumun başladığı ilk sayfayı, pazarlamada ise reklam, e-posta veya kampanya trafiğini tek bir hedefe (form doldurma, kayıt, satın alma) yönlendirmek için özel olarak tasarlanmış sayfayı ifade eder. Kampanya odaklı açılış sayfası, ziyaretçiyi getiren mesajla birebir uyumlu bir başlık, tek bir ana eylem çağrısı ve dikkat dağıtan öğelerin azaltıldığı bir düzen kullanır.
Alt Metni (Alt Text)Alt metni, HTML'deki bir görselin alt özniteliğine (alt attribute) yazılan ve görseli göremeyen biri için onun yerine geçen kısa metindir. Öncelikle ekran okuyucu kullanan ziyaretçiler ve görselin yüklenemediği durumlar için yazılır; arama motorları da görselin konusunu anlamak için bu metinden yararlanır. Yalnızca süs amaçlı görsellerde alt özniteliği boş bırakılır (alt="").
Anlamsal HTML (Semantic HTML)Anlamsal HTML, içeriği görünüşüne göre değil anlamına göre işaretlemektir: gezinme için nav, ana içerik için main, başlıklar için h1–h6, eylemler için button, bağlantılar için href değeri olan a öğesi kullanmak gibi. Bu sayede tarayıcılar, ekran okuyucular, arama motoru tarayıcıları ve yapay zekâ sistemleri sayfanın yapısını ve her parçanın işlevini koddan doğrudan anlayabilir.
ARIA (WAI-ARIA)ARIA (WAI-ARIA, Accessible Rich Internet Applications), W3C'nin HTML öğelerine rol, durum ve özellik bilgisi eklemek için tanımladığı bir nitelik setidir. Bu bilgi, ekran okuyucu gibi yardımcı teknolojilere bir öğenin ne olduğunu ve hangi durumda bulunduğunu iletir. ARIA yalnızca anlamı değiştirir, davranış eklemez. Güncel W3C Önerisi WAI-ARIA 1.2'dir ve temel ilke, yerel HTML yetiyorsa ARIA kullanmamaktır.
Aşamalı Geliştirme (Progressive Enhancement)Aşamalı geliştirme (progressive enhancement), bir web sayfasını önce her tarayıcıda çalışan anlamlı bir HTML temeli üzerine kurup CSS ve JavaScript'i bu temelin üstüne, yalnızca destekleyen ortamlarda devreye giren katmanlar olarak eklemeyi öngören yaklaşımdır. Böylece bir script yüklenemediğinde, bağlantı yavaş olduğunda ya da tarayıcı bir özelliği desteklemediğinde temel içerik ve işlevler kullanılabilir kalır.
Atomik Tasarım (Atomic Design)Atomik tasarım, Brad Frost'un ortaya koyduğu ve arayüzleri beş seviyeli bir hiyerarşiyle kurmayı öneren tasarım sistemi metodolojisidir: atomlar, moleküller, organizmalar, şablonlar ve sayfalar. Kimyadan ödünç alınan bu model, en küçük parçalardan (etiket, input, buton) başlayıp bunları giderek daha karmaşık bileşenlere ve gerçek içerikli sayfalara birleştirmeyi anlatır. Doğrusal bir iş akışı değil, bir zihinsel modeldir.
AVIFAVIF (AV1 Image File Format), Alliance for Open Media'nın geliştirdiği AV1 video kodeğinin tek kare sıkıştırmasını HEIF kapsayıcısıyla birleştiren bir görsel formatıdır. Kayıplı ve kayıpsız sıkıştırma, şeffaflık, animasyon, HDR ve geniş renk gamını destekler. Fotoğraflarda benzer görsel kalitede çoğu zaman JPEG'den ve WebP'den küçük dosya üretir; buna karşılık kodlaması yavaştır ve kademeli (progressive) görüntülemeyi desteklemez.

B

C

Ç

Çerez (Cookie)Çerez (cookie), bir web sunucusunun Set-Cookie yanıt başlığıyla tarayıcıya kaydettirdiği, ad ve değerden oluşan küçük veri parçasıdır. Tarayıcı çerezi saklar ve kapsamına uyan sonraki isteklerde Cookie başlığıyla sunucuya geri gönderir. Oturumu açık tutmak, sepeti ve dil tercihini hatırlamak, ölçümleme yapmak için kullanılır; Domain, Path, Expires, Max-Age ve Secure gibi öznitelikler çerezin hangi adreslere gideceğini ve ne kadar yaşayacağını belirler.

D

E

Etkileşim Tasarımı (Interaction Design)Etkileşim tasarımı (IxD), kullanıcının bir arayüzle nasıl iletişim kurduğunu, yani hangi eylemi nasıl yapabildiğini ve sistemin bu eyleme nasıl tepki verdiğini tasarlama disiplinidir. Butonların, formların, menülerin ve animasyonların davranışını; yükleme, hata ve başarı gibi durumları ve geri bildirimin zamanlamasını kapsar. Amaç, kullanıcının ne yapabileceğini ve ne olduğunu her an anlayabilmesidir.

F

G

H

I

J

K

L

M

N

Next.jsNext.js, Vercel tarafından geliştirilen ve React üzerine kurulu açık kaynak bir web framework'üdür. Dosya sistemi tabanlı yönlendirme, Server Component'ler, derleme anında ve istek anında render, veri önbellekleme, görsel ve font optimizasyonu gibi ihtiyaçları tek pakette toplar. Aynı uygulamada önceden üretilmiş statik sayfalarla her istekte sunucuda oluşturulan sayfaları bir arada kullanmaya imkân verdiği için kurumsal sitelerde ve full-stack web uygulamalarında yaygın olarak tercih edilir.

O

Open GraphOpen Graph, bir sayfa sosyal medyada veya mesajlaşma uygulamalarında paylaşıldığında görünecek başlığı, açıklamayı, görseli ve URL'yi belirleyen meta etiket protokolüdür. Facebook tarafından geliştirilmiştir; etiketler HTML'in head bölümüne og: önekiyle eklenir. X (eski adıyla Twitter) kendi twitter: kart etiketlerini kullanır, ancak başlık, açıklama ve görsel eksikse Open Graph değerlerine başvurur.

Ö

Önbellek (Cache)Önbellek (cache), sık erişilen ya da üretilmesi maliyetli verilerin bir kopyasının daha hızlı ulaşılabilecek bir yerde geçici olarak saklanmasıdır. Aynı veri yeniden istendiğinde asıl kaynağa, örneğin veritabanına veya uzak sunucuya gidilmeden önbellekten sunulur. Web'de önbellek tarayıcıda, CDN'de, sunucuda ve uygulama katmanında bulunabilir. Doğru kullanıldığında yanıt sürelerini ve sunucu yükünü azaltır; yanlış kullanıldığında güncelliğini yitirmiş verinin gösterilmesine yol açar.

P

R

S

T

U

V

Viewport (Görüntü Alanı)Viewport (görüntü alanı), tarayıcı penceresinde web sayfasının o anda görülebilen dikdörtgen bölümüdür. Masaüstünde pencere boyutuna, mobilde ise ekran genişliğine ve yakınlaştırma düzeyine bağlıdır. CSS yerleşimi ve vw/vh gibi birimler bu alana göre hesaplanır. Mobil cihazlarda sayfanın ekran genişliğine göre çizilmesi için HTML'in head bölümünde meta viewport etiketi kullanılır.

W

Diğer kategoriler

← Sözlüğe dön