Saya no Uta Haftası – Bir HTML/CSS/JS Hikayesi

Öyle bir şey yok tabi… 2011 Aralık’ında bu kısa görsel roman için incelememi yazmıştım zaten. Aradan geçen zaman boyunca bir kere daha okumaya cesaret edemedim. Ne var ki o muhteşem soundtrack albümünden parçaları dinlemeye devam ettim, ettikçe de o hikâyenin içinde takılı kalmaya devam ettim. Madem dedim, madem öyle dedim o zaman geç kaldım ama bundan sonra her yıl bu haftayı Saya no Uta haftası ilan ediyorum.

İlgili tivitimde de Shoes of Glass (Camdan Ayakkabılar) parçasını ekleyip bir bilinç yaratmaya çalıştım.

Sonrasında düşündüm boş boş geçirilmez bu hafta, dedim hazır sitemin anasayafası olan tanshaydar.com‘un index’ini mahvetmişken…
Ha evet, önce oraya dönelim. Silent Hill 2 Kitap çevirisini kendi sayfasında güncellerken index.html dosyasını atıyorum sadece. Normal anasayfam ise yanıp sönen bir sokak lambasının önündeki sis efekti ile harika bir hal almıştı ve Silent Hill havasını blog temasından daha iyi yansıtıyordu.
Ben yine çeviriyi güncelleyip siteye yüklerken index.html dosyasını ilgili klasöre attırmak yerine gidip de root klasörüne atınca (ya da ben öyle olduğunu sanıyorum) giriş sayfası mahvoldu. Bir gün ansayfaya girdiğimde Silent Hill 2 Novel Çevirisi’nin resimsiz halini gördüm ve şok oldum. Aptal gibi yedek de almamıştım!

Eee, madem öyle, yeni bir tasarıma vesile olsun bu rezalet diyerek kolları sıvadım. Peki neler yaptım?

1) Resimleri Araklamak

Saya no Uta bilgisayarımda yüklü olduğu için pakteleri bir şekilde (Data_extractor 1.2) açıp içinden menü resimlerini çaldım.
Novel’ın orjinal çözünürlüğü 800×600 olduğu için websitesinin yer alacağı yer de 800×600 çözünürlükte bir kutu olacaktı.

Hemen div’leri yazarak CSS’te boyutları verdim ve resimleri fotoşoktan geçirip arka plan, üst, alt ve ortadaki olmak üzere yerleştirdim.

Sitenin ana çatısı oluşmuştu.

2) Boyutlandırma ve Yerlestirme

HTML vs CSS konusunda çok tecrübeli olmadığım için baya bir sıkıntı çektim ama en sonunda halloldu. Sıradaki sıkıntı siteyi tam merkeze yerleştirmekti. CSS kodları ile tam beceremeyince ben de bastım javascript’i. Yazdığım Javascript’te herhangi bir çözünürlük için otomatik hesaplama yapılıyor ve menü doğrudan tarayıcının merkezine yerleştiriliyor. Javascript geç çalışırsa çakozluyor site tabi… Bunu çözemedim…

3) Fontlar

Google Web Fonts‘tan arakladığım fontları, js ve css kodlarını implement ederek hemen menüye yerleştirdim. Efekt olarak da hafif bir derinlik katması için 3 boyut efekti seçtim. Opera, Chrome, Safari ve Firefox’ta çalışıyor. IE tırt. Oyunun menü fontlarına benziyor mu? Eh işte; ama en azından resim kullanmak yerine doğrudan yazı kullanmak daha çok sindi içime.

4) Efektler

Gel gelelim en sıkıntılı bölüme.
HTML ve CSS’i işime yarayacak kadar biliyorum. Hayatımda ilk defa sıfırdan yazdım CSS dosyasını. JavaScript’i ise hiç bilmiyorum. Syntax’ına bile hakim değilim.
Yapmak istediğim iki efektten biri, menü bağlantılarının üzerine gelindiğinde bir anda transparanlaşıp, transparandan normale dönme efekti, diğeri ise bağlantıların üzerine gelindiğinde titreşim efekti olmasıydı.

Böylece Saya no Uta’nın novel menüsüne bir nebze daha yaklaşmış olacaktım. Her ne kadar oyunun menüsünde titreşim efekti olmasa da, rasgele görünüp kaybolan butonların yerine böyle bir seçim daha şık durdu.

En büyük sıkıntı id ve class ayrımıydı. Aynı kodu her class ve id için ayrı ayrı tekrar yazıp js dosyasına eklemem gerekti. Bir ara bir menünün üzerine geldiğimde tüm menüler titreşiyor, ya da bir menü üzerine geldiğimde bambaşka bir menü öğesi titreşiyordu. Ya da hiç çalışmıyordu.

Ben de en sonunda hardcoding’e girip here menüye ayrı div ve class verip hepsi için aynı kod yazdım JavaScript’te. Sonuçtan oldukça memnunum. Menünün üzerine gelindiğinde 0.04 opasiteden 96’ya kadar şeffaflık değişiyor, ve aynı süreç içerisinde menü titriyor. İki efektin aynı anda başlaması kolay, onmouseover ve hover şeklinde iki keyword ile hallettim; ama ikisinin aynı anda bitmesi şansa oldu.

5) Müzik

E elbetteki Saya no Uta’nın menü müziğini koymam gerekiyordu. Bunu Flash’ta yapmak yerine, HTML 5’in kendisini kullanmaya karar verdim. Baktım oyunun içerisinde sadece ogg var, ama bazı tarayıcılar OGG’yi desteklerken, bazıları MP3’ü destekliyor. OGG’nin yanına bir de Türkçe çevirisini yaptığım Format Factory‘yi kullanarak MP3 de ekledim ve her tarayıcıda çalışır hale getirdim.

Zaten loop olarak çalan müziği en başta otomatik olarak başlattım. Ama otomatik müzik başlayan sitelerden hemen herkes nefret eder. Ben de bu ısrarımdan vazgeçerek, onun yerine müzik için kontrol çubuğu yerleştirdim. İsteyen başlatır dinler, isteyen es geçer. Görselliği biraz bozdu, ama bence değdi.

6) Arkaplan

Tamam, site çalışıyor, efektler filan güzel oldu, görsellik on numara; ama 800×600’lük bir kutuyu 1920×1080 23″ monitörde açınca arka taraf çok boş kaldı. Siyah yaptım gitmedi, beyaz yaptım gitmedi, pattern yaptım gitmedi. Sonra Onur isimli arkadaş Saya no Uta temalı bir arka plan kullanmamı önerince ben de şu andaki arka planı yerleştirdim siteye.

Saya’nın gözleri menü kutusunun hemen üzerinde, ve biraz büyük bir çözünürlüğünüz varsa o masum ifadesini de görebilirsiniz.

Beyaz menü fontunun görünümü çok zor olabilir diye, tıpkı novel’daki gibi bir yere tıkladığınızda arka planın komple değişmesi (koyu yeşil) olayını da yaptım. Böylece isteyen tek tıkla arka planı değiştirip menüleri daha rahat görebilecektir.