live_tv
Livestream Starting Soon
00
Hours
:
00
Minutes
:
00
Seconds
Up next in 10
Ata Aöf Web Tasarımının Temelleri 2024 2025 Final Soruları
https://lolonolo.com/2026/01/01/ata-aof-web-tasariminin-temelleri-2024-2025-final-sorulari/
Bu kaynaklar, Atatürk Üniversitesi Açıköğretim Fakültesi bünyesindeki Web Tasarımının Temelleri dersine ait 2024-2025 yılı final sınavı sorularını ve konu özetlerini içermektedir. Metinlerde, modern web standartları, HTML5’in getirdiği yenilikler ve kullanıcı deneyimini iyileştiren duyarlı (responsive) tasarım teknikleri detaylandırılmaktadır. Özellikle CSS yerleşim modelleri, Flexbox yapısı, form düzenleme yöntemleri ve tasarım sürecinde kullanılan profesyonel araçlar üzerinde durulmaktadır. Ayrıca, ön yüz (front-end) ve arka yüz (back-end) geliştiricilerin sorumlulukları ile API test süreçlerine dair teknik bilgiler paylaşılmaktadır. Kaynak, öğrencilerin sınav başarısını artırmayı hedefleyen açıklayıcı cevap anahtarları ve teknik tanımlarla zenginleştirilmiştir.
https://lolonolo.com
Show More Show Less View Video Transcript
0:00
Selamlar. Her gün kullandığımız, hayran
0:02
kaldığımız o web sitelerinin arkasında
0:04
neler olduğunu hiç merak ettiniz mi?
0:06
İşte şimdi o sır perdesini aralıyoruz.
0:09
Gelin modern bir web sitesinin temel
0:11
taşlarını hep birlikte döşeyelim. Şöyle
0:13
bir düşünün. Bazı siteler vardır hem çok
0:16
şık hem de tıkır tıkır çalışır. Peki
0:18
onları bu kadar iyi yapan şey ne? Sadece
0:21
güzel bir tasarımdan mı ibaret yoksa
0:23
işin içinde başka bir sihir mi var? İşte
0:26
biz de tam olarak bu sorunun cevabını
0:28
arıyoruz. Hadi bunu daha iyi anlamak
0:30
için bir benzetme yapalım. Bir web
0:33
sitesi yapmak aslında tıpkı bir ev inşa
0:36
etmek gibidir. Önce sağlam bir plan yani
0:40
projesi olmalı. Sonra o evi
0:42
güzelleştirecek bir iç tasarım. Tabii bu
0:45
işi yapacak bir ekip ve en sonunda da
0:47
her şey yolunda mı diye bakacak bir
0:49
denetim lazım. Şimdi bu adımların
0:52
hepsine tek bakacağız. E her inşaatın
0:54
bir temeli olur değil mi? Bizim de ilk
0:56
durağımız projenin ta kendisi. Yani web
0:58
sitemizin iskeletini oluşturacak o temel
1:01
yapı modern HTML 5. HTML5 bir sitenin
1:05
iskeletidir. Ama bu basit bir iskelet
1:07
değil. Sadece burada metin var demez.
1:10
Tarayıcıya der ki, "Bak bu bir ana
1:12
başlık. Bu önemli bir paragraf. Şurası
1:14
da sayfanın en altındaki bildiler. Yani
1:17
içeriye bir kimlik, bir anlam
1:19
kazandırır. HTML 5 ile birlikte alet
1:22
çantamıza müthiş şeyler eklendi. Düşünün
1:25
artık videoları oynatmak için ek bir
1:27
programa ihtiyaç yok. Hatta siteler
1:29
internetiniz olmadığında bile bir
1:31
uygulama gibi çalışmaya devam
1:33
edebiliyor. Ve tabii ki en önemlisi her
1:36
şey en başından mobil cihazlar
1:38
düşünülerek tasarlanıyor. Mesela şu
1:40
foter etiketini ele alalım. Bunu
1:42
kullandığınızda sadece bir bölüm
1:44
oluşturmuş olmuyorsunuz. Arama
1:45
motorlarına ve tarayıcılara net bir
1:47
şekilde diyorsunuz ki burası sayfanın
1:49
altı, iletişim bilgileri, telif hakkı
1:51
gibi şeyler burada. İşte bu içeriye
1:53
anlam katmak demek. Tamam, projemiz
1:56
hazır. İskeletimiz ayakta ama boş bir
1:58
iskelet pek bir şeye benzemez, değil mi?
2:00
İşte şimdi işin sihirli kısmına yani bu
2:03
iskeleti giydirip ona renk, stil ve
2:06
hayat katacak olan CSS'e geçiyoruz.
2:09
Şimdi burası gerçekten ilginç. Çünkü
2:11
çoğumuz CSS'e nispeten yeni bir
2:14
teknoloji sansak da aslında ilk olarak
2:16
1994'te
2:18
yani web'in ilk zamanlarında önerilmiş
2:20
temel bir yapı taşı. Ama asıl devrim
2:23
2010'lu yıllarda CSS3 ile gelen
2:26
yeniliklerle yaşandı ve web'in çehresi
2:28
tamamen değişti. İşte milyon dolarlık
2:31
soru bu. Nasıl oluyor da aynı web sitesi
2:33
o dev gibi ofis monitöründe de
2:35
avucumuzun içindeki o küçücük telefonda
2:37
da sanki özel olarak tasarlanmış gibi
2:40
kusursuz görünebiliyor? Bu sihrin adı
2:42
duyarlı web tasarımı yani responsive
2:45
design. Olay şu: Web sitesi sizin
2:48
ekranınızın ne kadar büyük olduğunu
2:50
anlıyor ve kendini anında o ekrana göre
2:52
yeniden şekillendiriyor. Tek bir tasarım
2:55
binlerce farklı cihazla mükemmel
2:57
çalışıyor. Peki bu adaptasyonun
3:00
arkasındaki teknik sır ne? Adı Media
3:02
Queries. Bu özellik sayesinde CSS'e
3:05
şöyle komutlar verebiliyoruz. Eğer ekran
3:08
600 pikselden darsa yazıları büyüt,
3:11
menüyü değiştir. Ama 1200 pikselden
3:14
genişse her şeyi yan yana diz. İşte bu
3:17
kadar basit ama bir o kadar da güçlü.
3:20
Modern CSS'in süper güçlerinden biri de
3:22
Flexbox. sayfa düzeniyle uğraşmayı adeta
3:25
bir keyfe dönüştürüyor. Mesela align
3:28
items komutuyla bir grup kutuyu tek
3:30
satırda dikey olarak ortalamak saniyeler
3:33
sürüyor. Ya da flex rap sayesinde ekrana
3:36
sığmayan üyeler otomatik olarak ve
3:38
düzenli bir şekilde alt satıra geçiyor.
3:40
Eskiden saatler süren işler şimdi çok
3:42
kolay. Ma tüm bu harika teknolojileri
3:45
konuştuk ama bunları kim kullanıyor?
3:47
Yani bizim dijital inşaat şantiyesindeki
3:50
ekibimiz kimlerden oluşuyor ve hangi
3:52
aletleri kullanıyorlar? Gelin şimdi
3:54
onlarla tanışalım. Sahada temel olarak
3:57
iki ana rol var. Frontend
3:59
geliştiricileri evin dış cephesi,
4:01
duvarların rengi, mobilyalar gibi sizin
4:03
gördüğünüz ve dokunduğunuz her şeyden
4:05
sorumlu. Yani kullanıcı deneyimini onlar
4:07
tasarlar. Backend geliştiricileri ise
4:10
işin görünmeyen kahramanları. Onlar da
4:12
binanın su tesisatı, elektrik altyapısı
4:14
gibi sistemin çalışmasını sağlayan
4:16
kısımlarla ilgilenir. Tabii bu ustaların
4:19
da son teknoloji alet çantaları var.
4:21
Mesela MOC Plus'la City'nin daha kod
4:23
yazılmadan nasıl görüneceğini
4:24
tasarlıyorlar. Webflow gibi araçlar ise
4:27
bu tasarımları alıp neredeyse sihirli
4:29
bir şekilde çalışan bir web sitesine
4:30
dönüştürüyor. Postman ise sistemin
4:33
farklı parçalarının birbiriyle sorunsuz
4:35
konuştuğundan emin olmak için
4:36
kullanılıyor. Evimiz bitti. Harika
4:39
görünüyor. Eşyalar yerleşti ama anahtarı
4:41
teslim alıp içeri girmeden önce son bir
4:44
çok önemli bir kontrol yapmamız lazım.
4:46
Uyumluluk. Yani bu ev her türlü hava
4:48
koşulunda ayakta kalabiliyor mu? Herkes
4:50
rahatça kullanabiliyor mu? İşte kod
4:52
uyumluluğu tam olarak bu demek.
4:55
Yazdığınız kodun sadece sizin
4:56
bilgisayarınızdaki Chrome'da değil
4:58
Firefox'ta, Edge'de hatta daha az
5:00
bilinen tarayıcılarda bile aynı şekilde
5:03
sorunsuz çalışmasını sağlamak. Bu adımı
5:05
atlarsanız potansiyel ziyaretçilerinizin
5:08
bir kısmını kapı dışarı etmiş olursunuz.
5:10
Bakın bu tablo durumu çok net özetliyor.
5:13
Mesela çok popüler bir araç olan
5:14
Bootstrap 5'i ele alalım. Windows'daki
5:17
neredeyse tüm modern tarayıcıları
5:18
destekliyor ama Windows için
5:20
geliştirmesi yıllar önce durdurulan
5:22
Safari'yi desteklemiyor. İşte bu yüzden
5:24
hangi teknolojiyi kullandığınızın ve
5:26
onun kimleri desteklediğinin farkında
5:28
olmak çok önemli. Uyumluluk sadece
5:30
tarayıcılarla da sınırlı değil kodun
5:32
kendi içindeki davranışları da önemli.
5:34
Mesela bir form alanı düşünün. Eğer onu
5:37
read only yaparsanız kullanıcı
5:38
değiştiremez ama o bilgi yine de
5:40
sunucuya gönderilir. Ama eğer disabled
5:43
yaparsanız kullanıcı yine değiştiremez.
5:45
Ama bu sefer o bilgi sunucuya asla
5:47
gönderilmez. Bakın bu küçücük bir fark
5:50
ama gözden kaçarsa çok büyük sorunlara
5:52
yol açabilir. Hadi şöyle bir
5:54
toparlayalım o zaman. Modern bir web
5:56
sitesinin dört temel direği var. Anlamlı
5:59
bir yapı kuran HTML 5 iskeleti, bu
6:01
iskeleti her cihaza uygun hale getiren
6:04
duyarlı CSS, bu yapıyı inşa eden doğru
6:07
roller ve araçlar ve son olarak herkesin
6:10
bu deneyimi yaşayabilmesini sağlayan
6:12
uyumluluk kontrolü. Artık temel
6:14
prensipleri biliyorsunuz. Bir web sitesi
6:16
inşaatının arkasındaki mantığı ve
6:18
adımları gördünüz. Peki şimdi top sizde.
6:21
Bu bilgilerle sizin hayata geçireceğiniz
6:24
bir sonraki harika proje ne olacak?
#Education