Asistan varken neden elle yazıyoruz?
Bir sonraki derste asistanın her çıktısını dokuz maddelik bir kontrolden geçireceksiniz. Maddelerden biri şu: işaretleme semantik mi? Hiç semantik HTML yazmamış biri bu soruya cevap veremez. Bugünkü bir saatlik emeğin karşılığı, beş ay boyunca asistanın önünüze koyduğu sayfaya bakıp neyin eksik olduğunu görebilmek.
Görünümü, yani CSS’i bilerek asistana bırakıyoruz. İlkemiz şu: yalnızca sonradan denetleyeceğiniz şeyi elle yazarsınız. Bir düğmenin köşe yarıçapını denetlemeniz gerekmiyor; sayfada kaç tane h1 olduğunu denetlemeniz gerekiyor.
Git: sitenizin tamamı için geri al tuşu
Pro Git kitabının anlatımıyla Git, verisini farkların listesi olarak değil, projenin anlık görüntülerinin dizisi olarak tutuyor. Her commit, o anda bütün dosyalarınızın nasıl göründüğünün bir fotoğrafı. Neredeyse her işlem yerelde yapılıyor; geçmişe bakmak ya da iki sürümü karşılaştırmak için internet gerekmiyor.
Bir dosya üç durumdan birinde bulunuyor. Değiştirilmiş: dosyayı düzenlediniz ama henüz kaydetmediniz. Hazırlanmış: bir sonraki commit’e gireceğini işaretlediniz. Kaydedilmiş: fotoğraf çekildi. Derste bu üçünü index.html üzerinde tek tek görüyoruz.
Bu düzen asıl değerini gelecek derste gösterecek. Asistan on dosyayı birden değiştirdiğinde sizi koruyan şey commit geçmişidir: beğenmediğiniz değişikliği tek komutla geri alırsınız. Bu yüzden kabul ettiğiniz her adımdan sonra commit atıyoruz ve mesaja ne yapıldığını yazıyoruz. “Güncelleme” bir commit mesajı değildir.
Sayfanın iskeleti: bölgeler, başlıklar, görseller
W3C’nin erişilebilirlik rehberi sayfa bölgelerini beş öğeyle tarif ediyor: header, nav, main, aside ve footer. Bu öğeler sayfaya bir görünüm kazandırmaz. Yaptıkları iş, tarayıcıların ve yardımcı teknolojilerin bölümleri tanımasını sağlamak. Ekran okuyucu kullanan biri main öğesine tek tuşla atlayabilir; sayfanın tamamı div ise atlayacak bir yer yoktur.
Başlıklar için aynı rehberin kuralı sade: başlıkları düzeylerine göre iç içe yerleştirin ve mümkün olduğunca düzey atlamayın; bir h2’nin hemen ardından h4 gelmesin. Biz programda sayfanın içerik başlığını h1 yapıyoruz ve her sayfada bir tane kullanıyoruz.
Görsellerde alt metnine W3C’nin karar ağacıyla karar veriyoruz. Görsel bilgi taşıyorsa kısa bir tarif yazılır. Bir bağlantının ya da düğmenin içindeyse alt, o bağlantının nereye götürdüğünü söyler. Yalnızca süs ise alt özniteliği yazılır ama boş bırakılır; böylece ekran okuyucu görseli atlar.
Arama sonucundaki iki satır
Google başlık bağlantısını çoğunlukla title etiketinden üretiyor, ama ona mecbur değil: h1’i, og:title’ı, hatta sayfaya verilen bağlantıların metnini de kullanabiliyor. title boşsa, sayfayla ilgisizse ya da her sayfada aynıysa başlığı kendisi yazıyor. Önerileri dört madde: açıklayıcı ve kısa yazın, “Ana Sayfa” gibi belirsiz sözlerden kaçının, aynı kelimeyi tekrar tekrar kullanmayın, marka adını bir ayraçla ayırıp kısa tutun.
Arama sonucunda başlığın altındaki metin için Google önce sayfanın kendi içeriğine bakıyor. Meta açıklamayı, sayfayı içerikten alınacak bir parçadan daha iyi anlatıyorsa kullanıyor. Bu yüzden açıklamayı her sayfa için ayrı yazıyoruz; bütün sayfalarda aynı olan bir açıklamanın kimseye yararı yok.
İki satır için de Google bir karakter sınırı vermiyor; metin cihazın genişliğine göre kesiliyor. Programda başlıkları 60, açıklamaları 160 karakterin altında tutuyoruz. Bu Google’ın kuralı değil, metnin çoğu ekranda kesilmeden görünmesi için kendi koyduğumuz sınır.
