Web tasarımı

Bir web sitesi nasıl çalışır

Bir site adresi yazdığınızda tarayıcınız önce alan adını sayısal bir adrese çevirir, arkasında oturan bilgisayara bağlanır, bir HTML metni alır ve sayfayı o metinden kurar. Web sitesi bu kısa gidiş dönüştür ve gördüğünüz her sorun bu zincirin bir halkasında olmuştur.

  • Ders 1 / 12
  • Başlangıç
  • Ücretsiz, kayıt yok

Bir web sitesinin iki tarafı ve aralarında duran şey

Tarayıcı

kullanıcının cihazında; işi resim almak değil, kurmaktır

  • İsteği gönderir ve yanıtı alır
  • HTML ve CSS okur, sayfayı kurar
  • JavaScript'i orada çalıştırır
bir istek, bir yanıt

Sunucu

hiç kapatılmayan ve istekleri bekleyen bir bilgisayar

  • Web sunucusu: isteği alır, yanıtı verir
  • Site uygulaması: HTML üretir
  • Veritabanı: metni, kullanıcıları ve siparişleri tutar

Bu ikisini buluşturan şey, alan adının sayısal bir adrese çevrilmesidir

Alan adı ve DNS

internetin telefon rehberi: isimden adrese

  • Alan adı yalnızca kiralanmış bir isimdir, depolama alanı değil
  • DNS yanıtı bir süre saklanır, bu yüzden değişiklik hemen görünmez
  • Verdiği adres bir ara katmana ait olabilir

Bu çizim sadeleştirilmiştir: pratikte tarayıcıyla sunucu arasında genelde bir içerik dağıtım ağı ve birkaç önbellek katmanı da oturur.

Son kontrol: Bu dersteki bilgiler ve araç adları bu tarihte kaynaklarıyla yeniden doğrulanır.

Adresi yazıp enter'a basıyorsunuz; sonra ne oluyor?

Bu bir gidiş dönüştür, canlı yayın değil. Tarayıcınız bir istek gönderir, başka bir bilgisayar yanıt verir ve bağlantı orada biter. Sayfanın ihtiyaç duyduğu her görsel, her CSS dosyası ve her yazı tipi kendi ayrı isteğine sahiptir; yani basit görünen bir sayfanın arkasında genellikle onlarca gidiş dönüş vardır.

Sıra sabittir. Önce alan adının sayısal bir adrese çevrilmesi gerekir. Sonra tarayıcıyla o adres arasında şifreli bir bağlantı açılır; adres çubuğunun yanındaki asma kilidin gösterdiği şey budur. Sonra tarayıcı hangi sayfayı istediğini söyler. Karşı taraf da bir metin bloğu döndürür.

Geri gelen şey sayfanın bir resmi değil, metindir. Aynı metin telefonda bir biçim, monitörde başka bir biçim alır; ekran okuyucu kullanan biri içinse hiç biçimi yoktur, sesli okunur. Fark küçük görünür ve web tasarımı işinin tamamını açıklar: siz son görünümü değil, onu kurma talimatını gönderirsiniz.

Şimdi görmek isterseniz herhangi bir sitede sağ tıklayıp sayfa kaynağını görüntüle seçeneğini seçin. Açılan şey, tarayıcınızın aldığı metnin ta kendisidir.

Tek bir ziyaret, enter tuşundan gördüğünüz ilk şeye

  1. 1

    Adı çevirmek

    Tarayıcı bu alan adının nerede olduğunu sorar ve sayısal bir adres alır.

  2. 2

    Güvenli bağlantı açmak

    Adresin yanındaki asma kilit; o olmadan tarayıcı sizi uyarır.

  3. 3

    Sayfayı istemek

    Tarayıcı hangi adresi istediğini söyler ve kendini tanıtır.

  4. 4

    Yanıtın üretilmesi

    Ya hazır bir dosya teslim edilir ya da uygulama çalışıp HTML kurar.

  5. 5

    Sayfanın çizilmesi

    Tarayıcı metni okur, gerekenleri getirir ve sayfayı kurar.

Bu beş aşama yalnızca ilk dosya içindir. Görseller, yazı tipleri ve betiklerin her biri aynı döngüden yeniden geçer.

Alan adı bir isimdir, IP ise adres; çeviriyi kim yapar?

Bilgisayarlar isimlerle değil sayılarla çalışır. DNS internetin telefon rehberidir: rgb.ir nerede diye sorarsınız, sayısal bir adres alırsınız. Bu soru ve yanıt saniyenin yüzde birkaçında biter; yanıt sonra bir süre kendi makinenizde ve yol üstündeki sunucularda saklanır. O bildik cümlenin başlıca sebebi budur: bende açılıyor, sende açılmıyor.

Çeviriyi kendiniz izleyebilirsiniz. Linux ya da Mac terminalinde:

dig +short A rgb.ir
dig +short NS rgb.ir

İlk komut sayısal adresi verir, ikincisi o alan adı hakkındaki soruları yanıtlamaktan kimin sorumlu olduğunu söyler. Windows'ta aynı işi nslookup rgb.ir yapar.

Yeni başlayanları şaşırtan bir nokta: dönen adres mutlaka gerçek sunucunun adresi değildir. Pek çok site bir içerik dağıtım ağının arkasında oturur; DNS'in size verdiği şey o ağın en yakın durağıdır ve gerçek sunucu bir katman geride kalır. Kendi sitemiz de tam olarak böyledir, sayıları da kendi yaptığımız iş bölümünde duruyor.

Alan adıyla barındırmayı da karıştırmayın: alan adı yalnızca bir isimdir ve yıllık kiralanır, barındırma ise dosyaların yaşadığı yerdir. Bu ayrım hâlâ bulanıksa, alan adı açıklaması tam oradan başlıyor.

Hattın öbür ucunda ne oturuyor?

Hiç kapatılmayan bir bilgisayar. Sunucuyu dizüstünüzden ayıran şey içindeki parçaların türü değildir; makinenin hep açık olması, hızlı bir bağlantıda durması ve istekleri bekleyen bir yazılım çalıştırmasıdır.

Üzerinde genelde üç şey yan yana çalışır. Önce web sunucusu: isteği alıp yanıtı geri veren nginx ya da Apache gibi bir program. Sonra site uygulaması: PHP ya da başka bir dil olabilir, işi HTML üretmektir. Son olarak veritabanı: yazıların metni, kullanıcılar ve siparişler orada tutulur.

Yalnızca birkaç satır metinden ibaret basit bir sayfa son ikisi olmadan da çalışabilir. Ama site bir form almak, kullanıcıları olmak ya da içeriği yönetim panelinden değişmek istediği anda uygulama ve veritabanı devreye girer. WordPress tam olarak budur: içeriği veritabanından okuyup ondan HTML kuran bir PHP uygulaması.

Paylaşımlı barındırma, sanal sunucu ya da özel sunucu okuduğunuzda tartışma hep bu bilgisayar üzerinedir: bir makinede kaç site oturur ve kaynakları nasıl bölünür. Bunu fiyat ve özellikleriyle barındırma sayfasına koyduk; yine de bu dersi izlemek için şimdi bir karar vermeniz gerekmiyor.

Neden bazı sayfalar hazır, bazıları her ziyarette kuruluyor?

İki model var ve ikisi de doğru. Birincisinde HTML dosyası sunucuda zaten hazırdır ve web sunucusu onu yalnızca teslim eder: hızlı, ucuz, dertsiz. İkincisinde sayfa o anda kurulur: uygulama çalışır, veritabanına sorar, HTML üretir ve gönderir. WordPress, mağazalar ve her kullanıcıya farklı yanıt veren her şey buraya girer.

İkinci model esneklik satın alır ve bedeli vardır. Her ziyaret birkaç veritabanı sorgusu ve birkaç yüz milisaniyelik işlemci işi demektir. Eski ve basit yanıt önbellektir: sonuç bir kez kurulur, hazır bir dosya olarak saklanır ve sonraki ziyaretçi o dosyayı alır. Yani dinamik site geçici olarak durağan bir siteye çevrilir.

Şu bitmeyen soruyu da bu yanıtlar: panelde yaptığım değişiklik neden sitede görünmüyor? Çünkü ziyaretçiye hâlâ daha önce saklanmış kopya veriliyor. O kopya silinene ya da süresi dolana kadar değişikliğiniz yalnızca size görünür, çünkü oturumunuz açıktır.

Bütün bunların üstünde bir katman daha var: içerik dağıtım ağı sayfanın bir kopyasını kullanıcının yakınında tutar, yani bazen istek sunucunuza hiç ulaşmaz. Siteyi kuran için bu iyi haberdir; ta ki eski sürümün neden hâlâ ekranda olduğunu çözmesi gereken güne kadar.

Hazır dosya mı, o anda kurulan sayfa mı

Durağan: dosya önceden hazır

  • Web sunucusu onu yalnızca teslim eder, hiçbir şey çalışmaz
  • Olabilecek en hızlı ve en ucuz durum
  • Her değişiklik dosyayı yeniden kurup yüklemek demektir
  • Formlar, hesaplar ve sepet için tek başına yetmez

Dinamik: o anda kurulur

  • Uygulama çalışır ve veritabanına sorar
  • İçerik yönetim panelinden, kod yazmadan değişir
  • Her kullanıcıya farklı yanıt verebilir
  • Her ziyaret işlemci işi demektir, bu yüzden genelde önbellek gerekir

Bu ikisinden biri diğerinden iyi değildir. Seçim, içeriğin ne sıklıkta değiştiğine ve kaç kişinin onu değiştirebilmesi gerektiğine bağlıdır.

Bu zincir nerede kopar ve siz hangi parçayı görürsünüz?

İyi haber şu: hata mesajı genelde kopan halkanın adını verir; yalnızca onu okumayı bilmeniz gerekir.

Tarayıcı siteyi bulamadığını ya da sunucu adının çözülemediğini söylüyorsa istek sunucunuza hiç ulaşmamıştır ve sorun ad çevirisindedir: yanlış bir DNS kaydı ya da süresi dolmuş bir alan adı. Bir güvenlik uyarısı görüyorsanız çeviri çalışmış ve bağlantı açılmıştır, ama SSL sertifikası bozuk ya da süresi dolmuştur. Boş bir sayfa ya da 500 hatası geliyorsa istek varmış ve site uygulaması yolun ortasında düşmüştür; burada tarayıcıya değil sunucunun hata günlüğüne bakılır. Her şey açılıyor ama içerik eskiyse hiçbir şey bozuk değildir: önbellek önceki kopyayı veriyordur.

Bir de arıza olmayan ama arıza gibi görünen bir sınıf var: site açılıyor, ama yavaş. Orada zincir kopmamıştır, halkalardan biri yalnızca vakit alıyordur; bunun peşine düşmek ayrı bir iştir ve onu site hızı yolu üstleniyor.

Bir alışkanlık hepsini kolaylaştırır: tahmin etmeden önce yanıt başlıklarına bakın. Kısa bir komut, yanıtın nereden geldiğini, hangi kodu taşıdığını ve önbelleğin işe karışıp karışmadığını söyler:

curl -I https://example.com/

Bu tek satır, site çökmüş ile site sağlam, önbellek dünkü kopyayı veriyor arasındaki farkı ortaya koyar.

Bu işte yapay zeka

Yeni başlayan biri için bir dil modelinin en iyi kullanımı, siteyi sizin yerinize kurması değildir; anlamadığınız bir hata mesajını çevirmesidir. Hatanın tam metnini kopyalayın, nerede gördüğünüzü ve hemen öncesinde ne yaptığınızı söyleyin, kontrol edilecek şeylerin listesini isteyin. Bu, eskiden forumlarda bir saatlik arama isteyen işti.

Gerçekten işe yarayan araçlar

  • Claude Bir hatayı açıklamakta ve günlük parçası okumakta iyi. İran, Anthropic'in desteklenen ülkeler listelerinin hiçbirinde yok; bunu ağ testiyle değil, Anthropic'in kendi sayfasında okuduk.
  • Gemini Farsçayı iyi anlar ve alan adı ile barındırma hakkındaki temel sorular için yeterlidir. Google'ın kendi sayfası Gemini web uygulamasının 230'dan fazla ülke ve bölgede çalıştığını söylüyor ve İran o listede yok.
  • ChatGPT En yaygın seçim ve bu iş için kabul edilebilir. Yapay zeka bölümümüzde henüz ona ait bir kayıt yok, bu yüzden erişimi ya da fiyatı hakkında burada bir iddiada bulunmuyoruz.

Nerede geri teper

Buradaki risk belirgindir ve seyrek değildir: model, sunucunuz hakkında aynı kendinden emin tonla var olmayan bir şey uydurur. Bir yapılandırma dosyasının yolu, kontrol panelinizdeki bir ekranın adı ya da barındırmanızda hiç açık olmayan bir komut. Anthropic bunu kendi belgelerinde halüsinasyon diye adlandırıp azaltma yollarını anlatıyor; yani üretici de bunu söylenti değil, gerçek bir zayıflık sayıyor. Kural basit: modelin sunucunuz hakkında söylediği her şey gerçek çıktıyla ölçülmelidir; yani hata günlüğü, barındırma paneli ya da aynı curl -I. Hatayı açıklamak modelin işi, gerçeği doğrulamak sizin işiniz. Bu araçların İran'dan nasıl ödenebileceği için satın alma rehberine bakın.

Kaynaklar: Anthropic: reduce hallucinations Anthropic: supported countries Google: where Gemini Apps are available

Bu tavsiyenin sınırı

Bu model bilerek sadeleştirildi. Bugün gerçek bir istek genelde burada çizilmeyen birkaç katmandan daha geçer: içerik dağıtım ağı, yük dengeleyici, daha yeni taşıma protokolleri ve tarayıcının içinde saklanan kod. Daha önemlisi, zinciri anlamak hiçbir şeyi onarmaz; yalnızca onarırken doğru yere bakmanızı sağlar. Her halkanın kendi araçları ve bilgisi gerekir.

Kendi işimizden

Bu dersin denetlendiği gün bu komutları kendi alan adımız üzerinde çalıştırdık. dig +short NS rgb.ir iki Cloudflare ad sunucusu döndürüyor, dig +short A rgb.ir ise hiçbiri bizim sunucumuzun adresi olmayan iki adres veriyor; yani DNS'in tarayıcınıza verdiği şey ağın en yakın durağı, gerçek sunucu ise bir katman geride kalıyor. Ardından curl -I https://rgb.ir/ hem cf-cache-status: HIT hem de saniye cinsinden bir sayı taşıyan age başlığı içeren bir yanıt döndürdü; yani aldığımız kopya uçtan geldi ve orada o kadar süredir duruyordu. En ilginç parçası şu: aynı yanıtta x-flying-press-source: PHP da görünüyor. Saklanan kopyayı bir zaman PHP kurmuş, ama bugünkü istek PHP'ye hiç ulaşmamış. Üç komutu da aynı alan adı üzerinde siz de tekrarlayabilirsiniz.

Gerçek devam soruları

Alan adıyla barındırma arasındaki fark tam olarak nedir?

Alan adı bir isim, barındırma bir yerdir. İsmi yıllık, yeri aylık ya da yıllık kiralarsınız; barındırması olmayan alan adı hiçbir yeri göstermez, alan adı olmayan barındırma ise yalnızca sayısal bir adresle açılır. İkisini iki ayrı şirketten de alabilirsiniz.

Site neden bende açılıyor da başkasında açılmıyor?

Çoğu zaman yanıt DNS'tir: eski adres karşı tarafın cihazında ya da ağında hâlâ saklıdır ve süresi dolana kadar onu alır. Sonraki adaylar tarayıcı önbelleği, içerik dağıtım ağındaki saklı kopya ve yolun belirli bir ağda engellenmesidir. İlk hamle siteyi başka bir bağlantıda, örneğin mobil veride denemektir.

Bir site kurmak için bunların hepsini bilmem gerekir mi?

Hayır. Bir barındırma hizmeti ve WordPress ile bunların hiçbirini bilmeden site ayağa kaldırılabilir. Bu ders, bir şeyin çalışmayı bıraktığı gün içindir: o zaman zinciri bilen kişi hangi şirkete ya da hangi ayara gideceğini dakikalar içinde bulur.