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.
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
Ö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.
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.
<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;
<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.
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ı;
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;
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;
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;
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.
.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.Laf aramızda…
Hem estetiksel, hem fonksiyonel açıdan ziyaretçilerinizi rahatlatmak için sitenize 5 dk. ayırın, ve gerekli gördüğünüz yerlerde sIFR’in sunduÄŸu güzelliklerden yararlanın. Yeni resmi sitesine buradan, resmi (Ä°ngilizce) kurulum kılavuzuna buradan, makyaj konuları hakkınd ayrıntılı bilgilere buradan, Javascript’le yapabileceÄŸiniz sihirlerin kullanım kılavuzuna buradan, bu kadar baÄŸlantı yeter diyorsanız da, internetin sonuna buradan ulaÅŸabilirsiniz.
Güncelleme
Volkan Görgülü sIFR tekniÄŸini kullanma yöntemlerini güzel bir video ile anlatmış. Kelimelerin size yetmediÄŸini düşünüyorsanız video’yu buradan izleyebilirsiniz.
Alıntıdır:Muhammet Sevim sIFR 3: Kullanım Kılavuzu · Görsel iletiÅŸim tasarımı, Web standartları (CSS/XHTML) ve dünyada olup bitenler üzerine…
