Aynı tasarım. Sekiz düzeltme.

Ne değişti

Her düzeltme, fiyat listesindeki Site Düzeltme kapsamından bir maddedir. Kod parçaları iki sürümün dosyalarından birebir alınmıştır.

1. 1HızAna görsel ekrana göre boyutlandı

   Önce 3000 piksellik özgün görsel olduğu gibi yükleniyordu; telefonda en çok 390 piksel gösteriliyordu. Şimdi ekranın genişliğine uyan üç boydan biri iner; görüntü aynı.

   Önce · index.html

   <img class="hero-gorsel" src="img/salon.jpg">

   Sonra · index.html

   <img class="hero-gorsel" src="img/salon-800.webp" srcset="img/salon-480.webp 480w, img/salon-800.webp 800w, img/salon-1200.webp 1200w" sizes="(min-width: 900px) 50vw, 100vw" width="1200" height="800" fetchpriority="high" alt="Kuaför aynasının önünden geçen kestane, bakır ve bal rengi saç tutamları">

2. 2HızGörünmeyen eski görsel kaldırıldı

   2023 yaz kampanyasının afişi gizlenmiş ama sayfada kalmıştı; görünmese de her ziyarette iniyordu. Satır kaldırıldı.

   Önce · index.html

   <img class="eski-kampanya" src="img/kampanya.jpg">

   Sonra · index.html

   satır kaldırıldı

3. 3Telefon görünümüTelefonda yatay taşma bitti

   Fiyat tablosunun sabit genişliği, tek satıra zorlanan menü ve sarmayan üst şerit, sayfayı telefonda yana kaydırıyordu. Tablo ekrana, menü iki satıra sığar; masaüstünde görünüş aynı.

   Önce · site.css

   .fiyat-tablo { width: 640px; white-space: nowrap; }
   .menu { display: flex; gap: 2rem; white-space: nowrap; }
   .ust { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

   Sonra · site.css

   .fiyat-tablo { width: 100%; max-width: 640px; }
   .menu { display: flex; flex-wrap: wrap; gap: 0.25rem 2rem; }
   .ust { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
   @media (max-width: 600px) { .ust nav { order: 3; flex-basis: 100%; } }

4. 4Telefon görünümüKartela adları görselden metne geçti

   Boya adları görselin içine basılıydı: telefonda okunmayacak kadar küçülüyor, aramada görünmüyordu. Şimdi adlar metin, çizim aynı; telefonda kartela dört sütuna iner ve adlar okunur.

   Önce · index.html

   <img class="kartela-gorsel" src="img/kartela.png">

   Sonra · index.html

   <ul class="kartela">

5. 5KünyeKünye eklendi

   Sayfanın altında yalnız telif satırı vardı. Şimdi işletmenin adı, adresi, telefonu, e-postası ve vergi bilgisi künye başlığı altında duruyor.

   Önce · index.html

   <footer class="alt">
   <p>© 2019 Örnek Kuaför. Tüm hakları saklıdır.</p>
   </footer>

   Sonra · index.html

   <h2 id="kunye-baslik">Künye</h2>

6. 6Aydınlatma ve çerez bağlantılarıAydınlatma ve çerez bağlantıları kuruldu

   Formun altına aydınlatma metni, sayfanın altına aydınlatma ve çerez bağlantısı eklendi. Gerçek işte metin ve sayfası işletmeden gelir; biz bağlarız. Bu örnekte iki sayfa yer tutucudur.

   Önce · index.html

   bağlantı yok

   Sonra · index.html

   <nav class="yasal" aria-label="Yasal bağlantılar"><a href="aydinlatma.html">Aydınlatma metni</a><a href="cerez.html">Çerez politikası</a></nav>

7. 7FormForm cevap veriyor

   Alanların etiketi yoktu, telefon alanı sayı klavyesi açmıyordu, Gönder'e basınca hiçbir şey olmuyordu. Şimdi her alanın etiketi var, eksik alan yazıyla söylenir, gönderince onay görünür.

   Önce · index.html + site.js

   <input type="text" name="telefon" placeholder="Telefon">
   form.addEventListener('submit', (olay) => olay.preventDefault());

   Sonra · index.html + site.js

   <label for="telefon">Telefon</label>
   <input id="telefon" name="telefon" type="tel" autocomplete="tel" required aria-describedby="telefon-hata">
   durum.textContent = 'Talebiniz alındı. Salon sizi arayıp saati onaylar. (Örnek site: bu formdan hiçbir bilgi gönderilmez.)';

8. 8Temel arama ayarlarıSayfa başlığı, açıklama ve dil

   Arama sonucunda görünen başlık "Ana Sayfa" idi; açıklama, dil bilgisi ve ana başlık yoktu, görsellerin açıklaması yoktu. Başlık, açıklama, dil ve ana başlık eklendi; kalan görsele açıklama yazıldı, öteki ikisi 2. ve 4. düzeltmede kalktı. Arama sırası vaat edilmez.

   Önce · index.html

   <html>
   <head>
   <meta charset="utf-8">
   <title>Ana Sayfa</title>
   <div class="hero-baslik">Kesim, boya, fön. Randevuyla.</div>

   Sonra · index.html

   <html lang="tr">
   <head>
   <meta charset="utf-8">
   <title>Örnek Kuaför · Kurgu Sokak'ta kesim, boya ve fön</title>
   <meta name="description" content="Kadın ve erkek kuaförü. Kesim, boya, röfle ve keratin bakımı; Salı–Pazar 10:00–20:00, randevuyla. Fiyatlar sitede yazılı.">
   <h1 class="hero-baslik">Kesim, boya, fön. Randevuyla.</h1>