Up next in 10
Auzef Web Tasarımı 2025-2026 Vize Soruları
https://lolonolo.com
Show More Show Less View Video Transcript
0:00
Herkese merhaba. Web tasarımı 2025-2026
0:03
vize konularını, mercek altına aldığımız
0:05
bu özel açıklayıcı rehbere hoş geldiniz.
0:08
Biliyorum şu an sınav haftası stresi tam
0:10
anlamıyla üzerinizde. Notlar birbirine
0:12
girmiş. Masanızın üzeri kağıtlarla dolu
0:14
değil mi? Ama derin bir nefes alın,
0:16
endişelenmeyin. Bugün tüm o karmaşayı
0:18
bir kenara bırakıyoruz. Amacımız
0:20
inanılmaz net. Yaklaşan o web tasarımı
0:22
vizenizden en yüksek notu almanızı
0:24
sağlamak, sizi sıkıcı kitap cümlelerine
0:26
boğmak yerine bilmeniz gereken her şeyi
0:28
gerçekten akılda kalıcı parçalara
0:30
ayıracağız. Hazırsanız not
0:32
defterlerinizi açın ve dijital dünyanın
0:34
perde arkasına doğru yolculuğumuza
0:35
başlayalım. Tamam. Hadi buna bir
0:37
dalalım. Her gün defalarca web
0:39
sitelerine giriyoruz, tıklıyoruz,
0:40
sayfaları kaydırıyoruz. Peki ama o
0:42
muazzam tasarımların, o renkli
0:44
metinlerin ve görsellerin arkasında
0:46
gerçekte ne dönüyor? Bunu anlamak için
0:48
aslında biraz dijital mimari gibi
0:50
düşünmemiz gerekiyor. Bir web sitesi
0:52
yaratmayı gerçekten fiziksel bir
0:54
göktelen inşa etmeye benzetebilirsiniz.
0:56
O ekranda gördüğünüz harika sayfalar
0:58
sağlam bir temelin üzerine ustalıkla
1:00
dizilmiş görünmez tuğlalardan oluşuyor.
1:02
Biz de bugün tam olarak o tuğlaları
1:04
nasıl dizeceğinizi ve o temeli nasıl
1:06
atacağınızı konuşacağız. Gündemimiz
1:08
oldukça net. İlk olarak web'in görünmez
1:11
temeliyle internetin nasıl işlediğine
1:13
bakacağız. Ardından HTML blokları ile
1:15
inşa etme kısmına geçip dijital
1:17
tuğlalarımızı dizeceğiz ve son olarak
1:20
rüya tasarım ekibi ile binamızın o
1:22
harika mimarisini konuşacağız. Birinci
1:24
bölümümüz web'in görünmez temeli.
1:27
Kodlamaya girmeden önce o kodların
1:29
üzerinde yaşayacağı altyapıyı bir
1:31
anlayalım. Bir web sitesi internette tam
1:33
olarak nasıl var oluyor? Bakın perde
1:36
arkasında tıkır tıkır işleyen harika bir
1:38
üçlü sistem var. Birinci adımda o devasa
1:41
ağ yani internet var. Optik ve kablosuz
1:44
ağlarla birbirine bağlanmış inanılmaz
1:46
büyüklükte bir ekosistem. İkinci adım
1:48
işin kalbi diyebileceğimiz TCP/ı IP
1:50
protokolü. Siz bir siteye girmek
1:52
istediğinizde verileri alıyor,
1:54
paketliyor, doğru adrese yönlendiriyor
1:56
ve hatasız iletilmesini sağlıyor. Tıpkı
1:58
devasa kusursuz bir kargo şirketi gibi
2:00
düşünün bunu. Ve üçüncü adım hosting
2:03
yani barındırma. Yaptığınız o harika
2:05
sitenin sadece sizin bilgisayarınızda
2:07
tozlanmaması, internette 7 gün 24 saat
2:10
kesintisiz herkese açık olması için
2:12
yüksek performanslı sunucularda
2:14
saklanması gerekir. İşin sırrı bu. Şimdi
2:16
bu kısımla ilgili gerçekten ilginç olan
2:18
şey sunucunuz ile tarayıcınızın arka
2:20
planda nasıl gizlice fısıldaştığını
2:22
göstermesi. Siz bir siteye
2:24
tıkladığınızda tarayıcınız sunucuya bir
2:26
istek gönderir ve sunucu da ona bir
2:28
durum kodu fırlatır. Eğer her şey
2:30
yolunda, al sayfam burada diyorsa 200'lü
2:33
kodlar gelir. Bu bir başarıdır. Sayfanın
2:35
yeri değiştiyse 300'lü yönlendirme
2:37
kodları devreye girer. Ama işler ters
2:39
giderse eğer hata sizdeyse yani
2:41
tarayıcınızdan veya girdiğiniz bozuk bir
2:43
linkten kaynaklanıyorsa 400'de hataları
2:45
görürsünüz. O meşhur 404 hatası gibi.
2:48
Yok eğer sorun sizde değil de karşı
2:50
taraftaki dev sunuculardaysa o zaman
2:52
500'lü kodlar karşınıza çıkar. Bu
2:53
tabloyu kesinlikle iyi bilin. Sınavda
2:55
hayatınızı kurtaracak. Evet işte tam
2:58
burada dikkatlerinizi bana vermenizi
3:00
istiyorum. Sınavlarda hocaların sormaya
3:02
bayıldığı o efsanevi tuzağa geldik.
3:04
şıklara tarayıcıları dizerler ve araya
3:07
sinsice next step'i sıkıştırırlar.
3:09
Öğrencilerin çoğu da aa bu kesin yeni ve
3:11
çok havalı bir tarayıcı diyerek hemen
3:13
atlarlar. Sakın ha next step bir
3:15
tarayıcı falan değildir. Çok eski bir
3:18
işletim sistemidir. Web sayfalarını
3:20
görüntülemek için kullandığımız modern
3:22
tarayıcılar bildiğimiz Chrome, Firefox
3:24
gibi yazılımlardır. Bu tuzağa düşmeyip o
3:26
tatlı ekstra puanları cebinize koyun.
3:29
İkinci bölüm: HTML bloklarıyla inşa
3:32
etmek. Temeli attığımıza göre artık
3:35
dijital bin çerçevesini dikmeye
3:37
başlayabiliriz. HTML'in yapısını tıpkı
3:40
bir bina gibi düşünün. Bir tarafta
3:42
görünmez tesisat, diğer tarafta süslü
3:44
dış cepi vardır. Yani temelde iki ana
3:47
yüzü vardır. Görünmez olan head bölümü
3:49
sitenin tam anlamıyla beynidir. Arama
3:51
motorlarına veya tarayıcıya teknik
3:53
talimatlar verir. Body bölümü ise işin
3:56
vitrinidir. O süslü odalardır.
3:58
Kullanıcının doğrudan etkileşime girdiği
4:00
resimler, yazılar, videolar, kısacası
4:03
gözünüzle gördüğünüz her şey tamamen bu
4:05
body etiketlerinin arasında yer alır.
4:08
Tabii görünmüyor dedik diye head
4:09
etiketini sakın es geçmeyin. Bu arka
4:12
plan bölümü siteniz için hayati
4:14
etiketler barındırır. Mesela title
4:16
etiketi. Bu sitenizin adıdır.
4:19
Tarayıcının en üstündeki o minik sekmede
4:21
görünür. Bir de meta etiketleri var
4:23
tabii. Sitenin kendini birkaç saniyede
4:25
bir otomatik yenilemesi veya içeriğin
4:28
arama motorlarına tanıtılması gibi o
4:30
görünmez ama inanılmaz kritik işler
4:32
tamamen burada meta etiketleriyle
4:34
halledilir. Hazır olun. Dev bir sınav
4:37
tuzağı daha. Profesörlerin sizi köşeye
4:39
sıkıştırmaya çalışacağı bir başka nokta.
4:42
Body tikinin sayfa görünümünü değiştiren
4:44
parametreleri olduğunu biliyoruz. Arka
4:46
plan rengi için BG color, yazı rengi
4:48
için text kullanıyoruz. Tamam. Ama
4:50
sınavda şıklara kocaman bir T link
4:53
parametresi koyacaklar. Bakın çok net
4:55
söylüyorum. Tink diye bir parametre
4:57
kelimenin tam anlamıyla uydurmadır.
4:59
Yoktur. Tıklanmış bağlantıların rengini
5:01
değiştirmek için sadece Aink kullanılır.
5:04
Bunu notlarınıza büyük harflerle altını
5:06
çizerek yazın. Şimdi geldik body
5:08
kısmının içine. Odalarımızı hızla
5:10
döşüyoruz. Sınavda eşleştirme sorusu
5:12
olarak garanti gelecek temel etiketlere
5:15
bakalım. Görsel mi ekliyorsunuz? İMG
5:17
etiketini yapıştırıyorsunuz ama yetmez.
5:19
O görselin nereden geleceğini söyleyen
5:22
SC parametresi olmazsa olmazdır. Yazının
5:25
altını mı çizeceksiniz? U etiketi. Bir
5:28
yere link mi vereceksiniz? A etiketi.
5:30
Peki diyelim ki kullanıcı o linke
5:32
tıkladığında sitenizden kopmasın.
5:35
Yepyeni bir sekme açılsın istiyorsunuz.
5:37
İşte o zaman A etiketinin içine target
5:39
eşittir tırnak içinde alt çizgi blank
5:41
yazıyorsunuz. Bütün sihir bu. Yani
5:44
buradaki kritik nokta hizalamadır. O
5:47
dijital mobilyalarınızı odanın tam
5:49
olarak neresine koyacaksınız? Metinleri
5:52
sola mı dayayacaksınız, sağa mı yoksa
5:54
tam merkeze mi alacaksınız? Klasik HTML
5:57
yapısında bu iş satır içi
5:58
konumlandırmayı sağlayan align
6:00
parametresi ile yapılır. Sayfanızın
6:03
derli toplu ve profesyonel görünmesini
6:05
sağlayan küçücük ama inanılmaz güçlü bir
6:08
komuttur kendisi. 3üncü ve son bölümümüz
6:11
Rüya Tasarım ekibi. Kaba inşaatımız
6:14
bitti. Şimdi o gökteleni yaşanabilir
6:16
kılacak asıl kahramanları sahneye davet
6:19
edelim. Artık modern web tasarımı bir
6:22
garajda tek başına kod yazan birinin
6:23
yapabileceği bir şey değil. Bu tam bir
6:26
multidisipliner ekip işi. İki dev rol
6:29
var karşımızda. Bir yanda proje mimarı.
6:32
O büyük resmi gören vizyoner kişidir.
6:34
Müşteri ne istiyor? Konsept ne olmalı?
6:36
Sitenin ana iskeleti nasıl olmalı?
6:39
Bunları belirler. Diğer yandaysa bir
6:41
nevi sistemin bekçisi olan test uzmanı
6:44
var. Bu site yeterince güvenli mi?
6:46
Kodlarda bir açık var mı? En başındaki
6:48
gereksinimler gerçekten karşılandı mı?
6:50
Test uzmanı bunlara bakar. İşte bu
6:53
ikilinin kusursuz dengesi projeyi
6:55
başarıya taşır. Tabii ekibimizin elinde
6:58
sihirli bir araç seti olmalı. O muazzam
7:00
tasarımları gerçeğe dönüştürürken
7:02
dijital fırçalarımız olan Photoshop,
7:05
Illüstratör veya Corel Drive gibi
7:07
yazılımlar kullanılıyor. Ama işite
7:09
siteyi yayına almakla bitmiyor maalesef.
7:12
İnsanların sizi devasa internet
7:13
okyanusunda bulması lazım. Arama
7:16
motorlarında üst sıralara tırmanmak için
7:18
yaptığımız o stratejik sihirbazlığa SEO
7:21
yani arama motoru optimizasyonu diyoruz.
7:24
Seonuz yoksa inanın bana siteniz ıssız
7:26
bir adadaki dünyanın en güzel malikanesi
7:29
gibidir. Kimse yerini bilemez. Sonuçta
7:32
günün sonunda her şey kullanıcı deneyimi
7:33
için. Dünyanın en harika, en şık
7:36
göklerenini dikmiş olabilirsiniz. Ama
7:38
insanlar kapıdan içeri girdiğinde
7:40
merdivenleri bulamıyorsa bunun hiçbir
7:42
anlamı kalmaz, değil mi? İşte
7:45
işlevsellik tam olarak budur. Kullanıcı
7:47
sitenize adım attığında kaybolmamalı.
7:50
Aradığı içeriğe zahmetsizce en mantıklı
7:52
yollardan ulaşabilmeli. Yani işin özü
7:55
iyi bir tasarım sadece göze güzel
7:57
görünmez. Aynı zamanda kusursuz bir
7:59
şekilde işlevseldir. Ve işte bu kadar.
8:02
Vizemiz için ihtiyacımız olan tüm
8:04
cephaneyi topladık. İnternetin görünmez
8:06
temelinden o meşhur HTML etiketlerine
8:08
sakın düşmeyin dediğim TL tuzağından
8:11
tasarım ekibinin kritik rollerine kadar
8:13
her şeyi harika bir şekilde parçalara
8:14
ayırdık. Sınav kağıdı önünüze geldiğinde
8:17
bu anlattıklarımın nasıl zihninizde bir
8:19
bir canlandığını göreceksiniz. Hepinize
8:21
yaklaşan web tasarımı vizenizde şimdiden
8:23
kocaman başarılar diliyorum. Gidin ve o
8:25
puanları toplayın. Peki artık bu güçlü
8:28
temeli bildiğinize göre sadece
8:29
sınavlarda değil gerçek dünyada nasıl
8:31
bir dijital mimari irşa edeceksiniz?
8:33
Şimdilik hoşça kalın. Kendinize çok iyi
8:35
bakın.
Jobs & Education