Geçen sene söylediklerimiz gerçekleşti: sIFR, gerçekten de birçok siteye renk kattı. Tasarımcılar hem arama motoru dostu, hem de güzel görünümlü başlıklarla mutlu oladursun, sIFR el değiştirdi ve daha da geliştirilmiş yeni versiyonuyla kendisini beğendirmek için tekrar yollara çıktı.
Yeniliklerden geri kalmamamız için, yeni versiyonun getirdiği gelişme ve avantajlardan bahsedip, yepyeni kullanım tekniğine bir göz atmak istiyorum.
Dikkat: Eğer girişten pek de birşey anlamadıysanız ve “sIFR” kelimesini yanlış yazdığımızı düşünüyorsanız, tekniğin tanıtıldığı yazının giriş bölümünü okumanızı tavsiye ederim.
Yenilikler
sIFR 3′ün getirdiği yenilikler, gerek metnin gösterilmesi, gerek kullanım kolaylığı açısından birçok şeyi geliştirdi, kolaylaştırdı.
- Daha kolay ve iyi font boyutu ayarlama
- FlashCSS; genel anlamda birden çok renk ve metin stillerini bir arada kullanma
- Pixel font desteği
- Daha kolay ve ayrıntılı kurulum
- Flash dosyasının içinden arkaplan atama desteği
Kurulum
Öncelikle şu anki en güncel versiyon olan ‘Revision 278‘i bu bağlantı üzerinden indiriniz. İndirmiş olduğunuz ’sifr3-r278.zip’ dosyasının içinden aşağıdaki dosyaların çıkması gerekiyor;- changelog.txt
- css klasörü
- demo klasörü
- flash klasörü
- js klasörü
- LICENCE
‘CSS’ klasörü gerekli olan CSS dosyalarını, ‘demo’ klasörü çalışan bir demoyu, ‘flash’ klasörü gerekli SWF dosyasını oluşturabilmeniz için gerekli dosyaları, ‘js’ klasörü ile gerekli javascript dosyalarını içeriyor.
Dikkat: En önemli kurulum değişikliklerinden biri, sIFR’in artık sadece bir sunucu üzerinde çalışması. Yani HTML dosyalarını direk açtığınızda hatalı veya eksik gösterim olabileceğinden, sIFR’i ya bir sunucu üzerine, ya da local sunucunuz üzerinde kurmanız tavsiye olunur.
Flash dosyası
‘Flash’ klasöründe bulunan sIFR.fla dosyasını Adobe Flash programı ile açınız (30 günlük test versiyonunu Adobe sitesi üzerinden indirebilirsiniz.). Aynı klasörde bulunan diğer 3 dosyanın yerini değiştirmemeye dikkat ediniz. SWF dosyasının kaydı sırasında bu 3 dosyanın aynı klasörde bulunması gerektiğini lütfen unutmayınız.
Dosyayı açtıktan sonra, karşınıza gelen beyaz alana çift tıklayınız. “Bold Italic Normal” şeklinde bir metinle karşılaşacaksınız.
Dosya boyutunu yüksek tutmamak için tüm metni silin. Ardından, istediğiniz fontu seçip 3 harf girdikten sonra sırasıyla kalın, italik ve normal versiyonlarını seçin. Eğer özel karakterleri de Flash dosyanıza eklemek istiyorsanız (örneğin Türkçe karakterler, rakamlar ve noktalama işaretleri) aşağı palette bulunan ‘embed’ butonuna tıklayıp eklemek istediğiniz karakterleri karşınıza gelen alana girin.
Son olarak, File -> Export -> Export Movie üzerinden Flash dosyasını çıkartın. Şimdi, işin HTML bölümü için hazırsınız.
HTML dosyası
HTML dosyanızda yapmanız gereken tek şey, gerekli CSS ve Javascript dosyalarını kodlarınıza entegre etmek.
1 2 |
<link rel="stylesheet" href="sIFR-screen.css" type="text/css" media="screen"> <link rel="stylesheet" href="sIFR-print.css" type="text/css" media="print"> |
Şimdi de JS kodlarının yerlerine gitme vakti geldi;
1 2 |
<script src="sifr.js" type="text/javascript"></script> <script src="sifr-config.js" type="text/javascript"></script> |
Kodları kopyaladıktan sonra, lütfen dosyaların çağrıldığı adresin doğru olduğuna emin olunuz.
JS dosyası
Ve en büyük yeniliklerin olduğu alandayız. JS üzerinde yapacağımız değişikliklerle sIFR’li başlıklarımızı güzelleştireceğiz.
Eskiden HTML dosyasının içerisine yazdığımız sIFR başlık görünüm kodları, artık sifr-config.js dosyasının içinde olduğundan, bu dosyayı favori metin editörünüzle açın. Bu boş sayfada öncelikle sIFR başlığımızın adını tanımlayacağız, ardından font dosyamızı çağıracağız. Resmi sitede verilen ‘cochin’ isimli fontun örneğini alırsak, kodumuz aşağıdaki şekilde olabilir.
1 |
var cochin = {src: 'cochin.swf'};
|
var kodunun yanına istediğiniz herhangi bir ismi verebilirsiniz. Bu ismi daha sonra aktifleştirme sırasında çağıracağız. cochin.swf dosyasının yolunu sunucuya göre verdiğimizden, dosyanın yolunu, bulunduğu klasöre göre /cochin.swf ve ../../cochin.swf şeklinde de çağırabiliriz.
Şimdi, başlıkarı çağırma ve aktifleştirme zamanı;
1 2 |
sIFR.prefetch(cochin); sIFR.activate(cochin); |
Eğer birden fazla başlık stili tanımladıysanız (örneğin cochin, times, ornek gibi…), bunları bir virgül yardımıyla çağırıp aktifleştirebilirsiniz;
1 2 |
sIFR.prefetch(cochin, times, ornek); sIFR.activate(cochin, times, ornek); |
Ve son olarak, standart başlığın sIFR ile değiştirilmesi için ihtiyaç duyduğumuz kodu ekleyelim. Bu aynı zamanda tüm stillerin ve özelliklerin verildiği bölüm olacak;
1 |
sIFR.replace(cochin, { selector: 'h1'});
|
Bu şekilde, oluşturduğumuz cochin ismindeki stil, cochin.swf ile tüm h1‘lerin yerine görüntülenecek. Yukarıda h1′in tanımlanmış olduğu selektöre hangi başlık ve stilleri tanımlayabileceğinizi öğrenmek için, resmi sitedeki bu kaynak yeterli olacaktır.
Ve şimdi işin en güzel yanına gelelim; bu versiyonla gelen taze bir özelliğin yardımıyla, başlıklarımıza artık direk JS üzerinden, kolayca stil verebiliyor, link stillerini atayabiliyoruz;
1 2 3 4 5 6 |
sIFR.replace(cochin, {selector: 'h1',css: [
'.sIFR-root { text-align: center; font-weight: bold; }'
,'a { text-decoration: none; }'
,'a:link { color: #000000; }'
,'a:hover { color: #CCCCCC; }'
]});
|
Ve CSS…
Javascript’i aktif olmayan, veya Flash Player’a sahip olmayan kullanıcıların başlıklarınızı en iyi şekilde görebilmeleri için, CSS dosyasında düzenleme yapabilirsiniz. Ayrıca sIFR’li başlıklarınızın metin boyutları da bu dosyadan alınacaktır. Bunun için sIFR-screen.css dosyasını açın.
1 2 3 4 5 6 |
.sIFR-active h1 {
visibility: hidden;
font-family: Verdana;
line-height: 1em;
font-size: 18px;
}
|
sIFR-active‘e yapı gereği ihtiyaç duyulmakta. visibility: hidden; sIFR aktif olduğunda normal metni saklıyor. font-family ise deaktif durumda gösterilen başlığın fontunu belirliyor. İdeal gösterim için line-height: 1em kodunu da stilinize ekleyin. font-size başlıkların genel font boyutunu belirliyor.
