Up next in 10
Auzef Web Tasarımı 2025-2026 Final Soruları
https://lolonolo.com/2026/06/08/web-tasarimi-2025-2026-final-sorulari/
https://lolonolo.com
Show More Show Less View Video Transcript
0:00
Selamlar. Finaller yaklaşıyor. Stresi
0:02
yavaş yavaş hissetmeye başladığınızı
0:04
biliyorum ama derin bir nefes alın.
0:06
Çünkü bugün o gözünüzde büyüyen web
0:09
tasarımı dünyasını baştan sona harika
0:12
bir web sitesi anatomisi metaforuyla
0:14
çözeceğiz. Bu incelememizde 2025-2026
0:18
Web tasarımı final sorularının en temel
0:20
bileşenlerini adım adım aydınlatacağız.
0:23
Hazırsanız hemen konuya dalalım ve
0:25
sınavdan o yüksek notu almanızı
0:27
sağlayacak yapıyı birlikte inşa edelim.
0:30
Şimdi her gün onlarca web sitesinde
0:32
geziniyoruz değil mi? Peki ama ekranda
0:34
gördüğümüz o hamveriler, o kodlar nasıl
0:37
oluyor da her gün kullandığımız bu şık,
0:39
etkileşimli, tıkır tıkır çalışan grafik
0:41
arayüzlerine dönüşüyor? Ekranda
0:43
gördüğünüz o sihrin arkasında yatan asıl
0:45
mekanizma nedir? Gelin tam da finans
0:48
sınavınızın merkezinde yer alan kaynak
0:49
materyal üzerinden bu sorunun kalbini
0:51
inelim. Bugünkü yol haritamız çok net.
0:54
Beraber dört ana duraktan geçeceğiz.
0:57
Önce internet altyapısı ve HTML 5
1:00
diyeceğiz. Sonra CSS ile görsel
1:02
şekillendirme aşamasına geçeceğiz.
1:04
Ardından formlar, etkileşim ve
1:06
JavaScript'le işi hareketlendirecek ve
1:09
son olarak profesyonel süreç ve duyarlı
1:11
tasarım ile çatımızı kapatacağız. Hiç
1:14
vakit kaybetmeden ilk bölümümüzle yani
1:18
internet altyapısı ve HTML 5'ile
1:21
temelleri atmaya başlayalım. Bilirsiniz
1:24
sağlam duvarlar örebilmek için önce o
1:26
evi taşıyacak görünmez ama sapa sağlam
1:29
bir altyapı inşa etmeniz gerekir. Web
1:31
tasarımı da sadece ekranda
1:33
gördüklerimizden ibaret değil elbette.
1:36
Arka planda devasa görünmez bir ağ
1:38
katmanı tıkır tıkır çalışıyor.
1:41
Kaynağımız internetin yapısını oluşturan
1:43
bu temeli üç ana unsurla özetliyor. Kök
1:46
sunucular, DNS ve TCP/ı IP ağları. Bu
1:50
üçlü web sitenizin dünyada fiziksel
1:52
olarak var olmasını ve küresel ağa
1:54
bağlanarak her yerden ulaşılabilir
1:56
olmasını sağlayan temel altyapı. Sınavda
1:59
bu kavramları gördüğünüzde aklınıza
2:01
hemen sitemizin oturduğu o arsanın ve
2:03
yolların altyapısı gelsin. Arsayı aldık,
2:06
yolları da çektik. E peki şimdi sıra
2:10
iskeleti kurmakta. Tam bu noktada
2:12
sahneye HTML 5 çıkıyor. HTML 5 içerik
2:16
iskeletini oluşturmak için kullanılan
2:18
biçimlendirme dillerinin en güncel
2:20
versiyonu. Düşünün HTML 5 olmasaydı web
2:24
siteniz boşlukta süzülen hiçbir anlam
2:26
ifade etmeyen metin yığınlarından ibaret
2:28
olurdu. O sitemize yapısal bir kimlik
2:31
kazandıran esas iskeletimiz. Ve iskelet
2:34
demişken HTML 5 ile hayatımıza giren çok
2:37
kritik bir detay var. Semantik yani
2:41
kendi başına anlam ifade eden etiketler.
2:44
Örneğin article veya section gibi
2:46
etiketler. Bunlar sayesinde kod sadece
2:49
tarayıcı için değil geliştiriciler ve
2:52
arama motorları için de anlamlı hale
2:54
geliyor. Yani iskeletimizin hangi
2:56
parçasının kol hangisinin bacak olduğunu
2:58
sisteme açıkça söylüyoruz. Harika.
3:02
İskeletimiz tamam. Gelelim ikinci
3:04
bölümümüze. CSS'le görsel şekillendirme.
3:08
Dürüst olalım. Kimse sadece gri beton
3:10
kolonlardan oluşan sıvsız bir evde
3:12
yaşamak istemez. İşte o çıplak iskeleti
3:15
alıp adeta bir sanat eserine
3:16
dönüştürdüğümüz dil CSS yani Cascading
3:19
Style Sheets. Kaynağımız CSS'i
3:22
içeriklerin görsel olarak
3:23
şekillendirilmesini sağlayan dil olarak
3:25
tanımlıyor. Renkler, boyutlar,
3:27
hizalamalar, aklınıza gelebilecek tüm
3:29
estetik kurallar CSS'in elinden çıkıyor.
3:32
O web sitenizin dış görünüşünü
3:34
belirleyen nihai kural kitabınız. Tabii
3:37
CSS'in içinde bu kuralları hayata
3:39
geçirdiğimiz temel araçlar var. Örneğin
3:42
o küçük yıldız işareti yani evrensel
3:45
seçici sayfanızdaki her şeye tek bir
3:47
hamlede dokunmanızı sağlıyor. Ya da text
3:50
align komutuyla metinlerinizi saniyeler
3:53
içinde sağa, sola veya tam ortaya
3:55
hizalayabiliyorsunuz. Bunlar elinizdeki
3:57
sihirli tasarım fırçasının en temel
4:00
darbeleri. Kısacası sınavda CSS
4:02
dendiğinde doğrudan estetik ve görsel
4:05
şekillendirme aklınıza gelmeli. Temeller
4:08
atıldı, boyalar yapıldı. Hız kesmeden 3.
4:10
bölüme geçiyoruz. Formlar, etkileşim ve
4:13
JavaScript. Evimiz sapa sağlam ve çok
4:16
şık duruyor ama ufak bir sorun var.
4:18
Elektrik yok, su yok. Düğmelere
4:21
basıyorsunuz ama hiçbir şey çalışmıyor.
4:23
Sistemi canlandırmak, sitelerimizi o
4:25
sıkıcı statik yapısından kurtarmak
4:28
zorundayız. Dinamik bir grafiksel
4:30
kullanıcı arayüzü yani GUI tam da burada
4:33
oyunu değiştiriyor. Bu yapı sayesinde
4:35
siteler sadece okuyup geçtiğimiz
4:37
sayfalar olmaktan çıkıyor. Artık onlarla
4:40
konuşabiliyoruz, dokunabiliyoruz ve bize
4:42
yanıt veriyorlar. Bu dinamik etkileşimin
4:45
ilk adımı formlardır. Onları evinizdeki
4:48
elektrik düğmeleri gibi düşünün.
4:49
Kullanıcının sisteme üye olması, bilgi
4:52
formlarına veli girmesi veya bir
4:53
checkbox ile çoklu seçim yapması.
4:56
Bunların hepsi form etiketleri sayesinde
4:58
oluyor. Yani kullanıcının sitemizle
5:00
fiziksel olarak el sıkıştığı yer tam
5:02
olarak burası. Şimdi dikkat. Çünkü
5:05
sınavların en sevdiği, en klasik
5:07
karşılaştırmalardan birine geldik.
5:09
Veriyi forma girdik diyelim. Peki bu
5:11
veri sunucuya nasıl gidecek? İki yol
5:13
var. Get ve post. Eğer verinin adres
5:16
çubuğunda açıkça görünmesini
5:17
istiyorsanız, mesela bir arama
5:19
yapıyorsanız get metodunu kullanırsınız.
5:21
paylaşması da inanılmaz kolaydır. Ama
5:24
eğer şifre gibi hassas veriler
5:26
gönderiyorsanız kaynağımızın çok net
5:28
belirttiği gibi verinin arka planda
5:30
gizli ve güvenli bir şekilde
5:31
iletilmesini sağlayan post metodunu
5:33
kullanmak zorundasınız. Bu ayrım hayati
5:36
önem taşıyor. Tamam verilerimizi
5:38
gönderdik. Peki anlık tıklamalarımız,
5:40
mouse hareketlerimiz ne olacak? İşte
5:43
karşınızda her hareketinizi an be an
5:45
izleyen o kritik sistem DOM yani
5:47
document object model. Kaynağımız onu
5:50
sayfadaki kullanıcı eylemlerini dinleyen
5:52
ve yakalayan adeta bir köprü gibi
5:54
çalışan bir sistem olarak
5:55
konumlandırıyor. DOM sürekli tetiktedir.
5:58
Nereye tıkladınız? Sayfa yüklendi mi?
6:00
Her şeyi izler. Ve DOM bir hareketi
6:02
yakaladığı an bunu hemen JavaScript'te
6:04
fısıldar. Örneğin sayfanın yüklenmesi
6:07
yani onload veya bir yere tıklanması, on
6:10
click gibi olaylar DOM tarafından
6:12
yakalanır. Daha sonra bu olaylar
6:14
JavaScript'teki LED ve constlerle canlı
6:17
bir etkileşime sokulur. Siz tıklarsınız
6:20
ve o menü yukarıdan zarifçe aşağı iner.
6:23
İşte o sihir tam olarak böyle
6:24
gerçekleşiyor.
6:26
Geldik 4. Ve son bölümümüze. Profesyonel
6:30
süreç ve duyarlı tasarım. Şunu asla
6:33
unutmamak lazım. Modern bir web projesi
6:36
öyle bilgisayar başına geçip rastgele
6:38
kod yazarak başlamaz. Ortada çok ciddi
6:41
adım adım ilerleyen bir mühendislik
6:43
disiplini olmalı. Olaylar katı bir
6:45
hiyerarşiyile ilerler. Önce hedef
6:47
belirlenir, ardından tasarım başlar.
6:50
Sonra geliştirme aşamasına geçilir.
6:52
Peşinden bolca test ve en nihayetinde
6:55
yayın ve bakım aşaması. Sınavda bu beşli
6:57
sırayı doğru hatırlamak emin olun size
6:59
çok güzel puanlar kazandıracak. Peki,
7:03
evimizi inşa ettik. Her şey
7:05
profesyonelce tamamlandı ama günümüzde
7:08
devasa bir problemimiz var. İnsanlar
7:10
sitemize sadece masadaki
7:12
bilgisayarlardan girmiyor. İşte
7:14
responsive yani duyarlı tasarım kavramı
7:17
burada devreye giriyor. Kaynağımız bunun
7:19
artık bir seçenek değil kesinlikle bir
7:22
zorluluk olduğunun altını çiziyor.
7:24
Siteniz o küçücük cep telefonlarında,
7:26
tabletlerde veya devasa akıllı
7:29
ekranlarda aynı kusursuzlukta görünmeli
7:31
ve esnemeli. İyi ama bu duyarlı olma
7:34
işini teknik olarak nasıl başarıyoruz
7:36
derseniz sihirli gelimemiz @ media
7:39
queries.
7:40
CSS'in içinde yer alan bu medya
7:41
sorguları tarayıcının ekran boyutunu
7:44
anında algılamasını ve bizim önceden
7:46
yazdığımız kurallara göre sitenin
7:48
görünümünü şak diye o ekrana adapte
7:50
etmesini sağlıyor. Teknik incelememizi
7:53
toparlarken modern ve cihaz bağımsız
7:55
arayüzlerin olmazsa olmazı iki düzen
7:57
aracına da değinelim. İlki kutu modeli
8:00
namı diğer box model. İçindeki padding
8:02
yani iç boşluk ve margin dış boşluk
8:04
değerleri ile elementlerin birbirine
8:06
girmesini engeller. tasarıma rahat bir
8:08
nefes aldırırsınız. İkincisi ise
8:10
position fixed gibi hayat kurtaran
8:12
özellikler. Bu sayede kullanıcı sayfayı
8:14
ne kadar aşağı kaydırırsa kaydırsın
8:17
menünüz ekranın üstünde hep sabit kalır.
8:19
Tüm bu teknikler bir araya geldiğinde o
8:21
muazzam pürüzsüz kullanıcı deneyimi
8:23
ortaya çıkıyor. İşte bu incelememizin
8:26
sonuna gelirken sizi ufak bir düşünce
8:28
deneyiyle başa bırakmak istiyorum. Bugün
8:30
mobil cihazlara, tabletlere uyum
8:32
sağlamayı çok iyi öğrendik. Peki ya
8:34
yarın geleceğin henüz icat bile
8:36
edilmemiş o bilinmeyen cihazlarında,
8:39
akıllı gözlüklerde belki de
8:40
hologramlarda web sitelerimiz nasıl
8:43
ayakta kalacak? İşte duyarlı tasarımın
8:45
ve semantik web'in asıl gücü bizi bu
8:47
bilinmeyen geleceğe hazırlamasında
8:49
yatıyor. Umarım bu anlattıklarımız final
8:51
sınavınız için o taşları yerine
8:53
oturtmuştur. İşin temel mantığını
8:55
anladıktan sonrası inanın bana sadece
8:57
eğlenceli bir kodlama oyunu. Sınavınızda
8:59
şimdiden harikalar yaratmanızı
9:01
diliyorum. Merak etmeye ve o mükemmel
9:03
web sitelerini inşa etmeye devam edin.
9:05
Görüşmek üzere.
Jobs & Education