Giriş

Bu websitem de bitmeyecek olan projelerimden birisi. Bununla, html ve css kullanarak site tasarımını öğreniyorum; javascript kullanarak da içeriği canlı hale getiriyorum. Burayı inceleyerek bu siteyi neden yaptığımı öğrenebilirsiniz.

Açıklama

Sayfalar

Bu site, giriş sayfası ve içerik sayfası olacak şekilde 2 ana sayfaya bölünmüştür. Giriş sayfasında çok bir şey yok, sizi bu içerik sayfasındaki istediğiniz bir bölüme getirecek bağlantılar var sadece, bu bilgi de adreste tutuluyor:

Sihrin büyük bir kısmı içerik sayfasındadır; bu sayfa da çevirilerden, gezinme işlemlerinden ve tema değişikliklerinden sorumludur.

Gezgin

Sol tarafta süslü bir yazı tipinde "Gezgin" diye yazan küçük bir kutu göreceksiniz. Bu gezgin, sayfanın başlıklarını gösterir; sayfalarda dolanırken kolaylık sağlar. Her başlığın yanında camsı bir düğme vardır, bu düğmeler şu anda görebildiğiniz başlıklarda parlar. Ve bu düğmelere basarak (vAy anasını sayın seyirciler!) istediğiniz bir başlığa gidebilirsiniz.

Gezginin dibinde ise 6 tane düğme bulunmaktadır. Mavi(-msi) düğmeler sırayla sizi sayfanın en üst ve en altına götütür. İçteki kırmızı düğmeler ise sırayla önceki ve sonraki başlıklara geçmenizi sağlar. Alttaki yeşil düğmeler biraz farklı: bu düğmeler sizi sadece en büyük başlıklara götürür, bunlar da kırmızı düğmelerle belirtilmiştir.

Renkler

Her başlığın yanında seviyesini belirten farklı renk ve büyüklüklerde düğmeler bulunmaktadır, bunlar da alttaki tabloda belirtilmiştir:

Dil

Bu sitedeki içerikler farlı dillerde görüntülenebilir; şu anki diller ise ingilizce ve türkçedir. Gelecekte başka diller de eklenebilir, ama var olan içeriklerin çevrilmesi zaman alacaktır.

Her sayfa önce ingilize yazılmakta olup sonra hedef dilde, dilin özellikleri kullanılarak (deyim, medya vb.), çevrilmektedir. Bu amaçla:

• Tuhaf çevirilerin önüne geçilerek, içerik daha doğal hissettirilir; çünkü her dilin aynı şeyi belirtirken kullandığı kendine has özellikleri vardır (deyimler aklınıza gelsin mesela).
• Çeviri yaptığım dilin yetkinliğini geliştiriyorum.

Aklınıza takılabilecek olan şeylerden biri de ingilizce seçeneğindeki bayrağın aslında 4 ayrı bayrağın karışımı olması. Sebebi ise ingilizce benim ana dilim değil ve hangi lehçeyi konuştuğumu bilmiyorum, o yüzden kapsayıcı bir şey olsun dedim (belki bayrağı başka bir şeyle değiştirebilrim, tavsiyeniz varsa haberdar edin).

Resimler

Şu anda 2 tane kategori bulunmakta, bunlar bilgisayar grafikleri (daha bu başlığın altında bir şey yok henüz) ve fotoğraflar. İstediğiniz resmi seçtikten sonra karşınıza böyle bir arayüz çıkacaktır:

En sol tarafta göreceğiniz üzere, gezgin artık bir küçük resim listesi gibi davranır; yeşille işaretli resim şu anki görüntülediğiniz resimdir. Tek seferde kaç tane küçük resim yükleneceğini ayarlayabilirsiniz, bu miktarı arttırarak yükleme sıklığını süreden feragat ederek azaltabilirsiniz. Bu ayar oturumlar arası kaydedilir.

Ortada ise resmin kendisi ve ona bağlı detaylı bilgiler bulunmaktadır. Sol taraftaki arkaplanı siyah olan kutuda şu anki resmi bulabilirsiniz. Nikon'un D80 model kameramın optik vizöründen esinlenerek tasarlanmış olup, kısa resim bilgilerini gösterir. Sol alttan başlayarak, bu bilgiler

1. ISO, veya film hassaslığı
2. F, veya diyafram
3. S, veya perde hızı
4. Pozlama farkı, genellikle yarı otomatik ayarlarda kullanılır
5. Flaş

Ve üstte resmin adı bulunmaktadır. Bu kutunun altında ise gezinme bölümünüz var; dıştaki düğmeler sırayla sizi ilk ve son resime, içteki düğmeler ise sırayla önceki ve sonraki resimlere götürür. Ama eğer tembellik yapmak istiyorsanız, soldaki resim sayacına tıklayarak istediğinz resim numarasına gidebilirsiniz. Sağ taraftaki kutular ise resmin en cazip detaylarını görmek isteyenler (yada inekler) içindir, bu kutular EXIF verisini gösterir.

Son olarak, en dipte, şu anki resmin yorumu vardır.

Sahne Arkası

Bu site için metin düzenleyici olarak genellikle emacs kullanıyorum. Gerçek zamanda değişişlikleri görebilmek içinse live-server (npx live-server) adlı bir yazılım kullanıyorum. Resim listesi oluşturmak içinse biraz ruby kullanıyorum, çünkü servis sağlayıcım neocities her kim olursa olsun (yani ben de dahil) site dizinini bir anahtar olmadan görmesine izin vermiyor, güvenlik açısından dolayı da bu anahtarı dahil etmek istemiyorum.

Bağımlı kutüphaneleri yönetmek içinse herkesin en sevdiği paket yönecitisi npm'i kullanıyorum. Ama sadece küçültülmüş kütüphaneleri siteme dahil ediyorum, çünkü node_modules klasörü fazla büyüyebiliyor. Kodlamada yardımcı kütüphane olarak jQuery, fotoğrafların EXIF verisini ayıklamak için exifr, matematikleri (yada kabusları) güzel bir şekilde biçimlendirmek içinse MathJax ve kaynak kodlarını renklerdirmek içinse highlight.js kullanıyorum. Kullanılan MathJax kütüphanesi kolay dağıtım için özel olarak yapılmıştır, ama siteyi çevrim dışı görüntülerken kullanışlı olabilir.

Sitedeki görselleri POV-Ray adlı bir yazılımla oluşturuyorum. POV-Ray özel bir ışın izleyicidir, bu yazılımdaki sahneleri de bir metin dosyası kullanarak tanımlarsınız. Bir örnek:

#version 3.7;
#include "textures.inc"

global_settings {
  assumed_gamma 1
}

camera {
  location <0, 5, 0>
  look_at <0, 5, 3>

  angle 110
  right image_width / image_height * x
}

light_source {
  <70, 100, -100>
  color rgb <0.8, 0.8, 0.8>
}

sky_sphere {
  pigment {
    gradient y

    color_map {
      [0.0 color rgb <1, 1, 1>]
      [0.13 color rgb <0.1, 0.25, 0.75>]
      [0.8 color rgb <0.1, 0.25, 0.75>]
      [1.0 color rgb <1, 1, 1>]
    }
  }
}

plane {
  y, -2

  pigment {
    checker

    color srgb<1, 0, 0>
    color srgb<1, 1, 1>

    scale 2
  }
}

box {
  <-1, -1, -1>
  <1, 1, 1>

  texture {
    Silver_Metal
  }

  finish {
    phong 0.3
    phong_size 60
    reflection 1
    ambient 0.2
    metallic
  }

  rotate<0, -50, -55>
  translate<2, 6, 6>
}

sphere {
  <-2, 4, 5>, 1

  pigment {
    color srgb<0.3, 0.7, 0.8>
  }

  finish {
    phong 1
    phong_size 60
    reflection 0.2
    ambient 0.2

    irid {
      0.25
      thickness 1
    }
  }
}
                

POV-Ray'in kullandığı dil turing bütünlülüğnü sağlar ve kendi içinde bir ışın izleyici yapılabilecek kadar güçlüdür. Ben de çerçeveleri, zeminleri, düğmeleri, anahtarlari ve daha fazlasını POV-Ray ile neredeyse bu şekilde yapıyorum. Yazılımın tek kötü tarafı ise bu bir modelleme programı değil. Basit şekil işlemlerinden daha fazlasını istiyorsanız Blender gibi bir program kullanmalısınız.

Dosyaların eski sürümlerini kaydetmek için git kullanıyorum, bununla birlikte sitemin eski sürümlerini görebiliyorum. Şu anda git sağlayıcısı olarak Codeberg kullanıyorum. Değişiklikleri neocities'e paylaşmaya karar verdiğimde de neocities-cli adlı bir program kullanıyorum.