sIFR her ne kadar basit kullanımlı, iyi bir çözüm olsa da düzenleme için Flash programına ihtiyaç duyulması ve .swf formatını kullanması iki büyük dezavantaj. Bu yazıda da, size FLIR’i, yani webde Flash olmadan istediğiniz fontu nasıl kullanacağınızı göstermek istiyorum. Siz metninizi yazıyorsunuz, FLIR onu istediğiniz stilde bir grafiğe dönüştürüyor.

Örnek için tıklayınız.

1) Flir’in son versiyonunu indirin

Bu adres üzerinden Flir’in son versiyonunu indirin ve dosyaları sunucunuza aktarın. Zip dosyasındaki klasörü (örn. facelift-1.2b3-3) öncesinde ‘facelift’ olarak yeniden adlandırmanız kurulumda kolaylık sağlayacaktır. Unutmamanız gereken bir diğer şey ise Flir’in sorunsuz çalışmak için PHP5′e ihtiyaç duyması, eğer hala PHP4 versiyonunu kullanmaktaysanız ve başlıklarınız bir türlü görünmüyorsa kontrol paneliniz üzerinden PHP versiyonunuzu yükseltiniz.

2) Dosyaları çağırın

Sunucunuza ‘facelift’ isimli klasörü de attığımıza göre, artık gerekli JS dosyalarını web sayfamızdan çağırabiliriz. Örnek olarak index.html sayfamızı açıp bölümüne aşağıdaki kodu ekleyin:

1

<script src="facelift/flir.js" type="text/javascript"></script>

Eğer JS dosyalarınız ayrı bir klasördeyse, ve flir.js dosyasını da o klasöre atıp oradan çağırmak isterseniz, dosyayı açıp 30. satırdan tam adresi belirlemeniz gerekmekte. Diyelim ki flir.js dosyasını ‘js’ isimli bir klasöre attıysanız, dosyanın 30. satırı aşağıdaki gibi görünmelidir:

1

,path: 'facelift/'

Ve gelelim index.html sayfamızdaki son işleme. Flir’in çalışma komutunu alabilmesi ve normal başlıkları resimlere dönüştürmesi için aşağıdaki kodu </body>’nin hemen önüne koymanız gerekmektedir.

1
2
3
4

<script type="text/javascript"> 
    FLIR.init(); 
    FLIR.auto(); 
</script>

3) Fontlarınızı seçin ve çağırın

Bitti bile, Flir’i sitemize neredeyse entegre ettik. Öncelikle fontlarınızı ‘facelift -> fonts’ klasörüne atın. Sonrasında yapmamız gereken ‘facelift’ klasörü içerisinde bulunan ‘config-flir.php’ dosyasını açıp 39. satırdan itibaren fontlarımızı eklemek/düzenlemek.

37
38
39
40
41
42
43
44

// Each font you want to use should have an entry in the fonts array. 
$fonts = array(); 
$fonts['css-font-ismi']   = 'font.ttf'; 
$fonts['css-font-ismi-2']       = 'font2.ttf'; 
$fonts['css-font-ismi-3']  = 'font3.ttf';   
 
// The font will default to the following (put your most common font here). 
$fonts['default']       = $fonts['css-font-ismi'];

‘conflig-flir.php’ dosyasında 37. satırdan itibaren başlayan bölümde yazı tiplerinizi yukarıdaki şekilde ekleyebilir, varolan yazı tiplerini düzenleyebilirsiniz. Dilediğiniz kadar font ekleyebilir, çağırabilirsiniz. Yukarıda ‘css-font-ismi’ olarak geçen bölümde tanımlayacağınız isim CSS dosyanızdan çağıracağınız font ismi olacaktır.

4) CSS ile başlıklarınızı şekillendirin

Ve son adımımızda işlemin başında eklemiş olduğumuz ‘flir.auto()’ komutunu (bkz. Adım 2) düzenleyecek, Flir’i dilediğimiz başlık ve CSS sınıflarına atayacağız.

1

FLIR.auto([ 'h1', 'h2', 'h2.kirmizi', 'strong' ]);

Yukarıdaki komut ile tüm h1, h2 başlıkları ile ‘kirmizi’ sınıflı h2 başlıklarına ve aynı zamanda tüm kalın yazılara (strong) FLIR atanacaktır. Bu adımdan sonra yapmanız gereken son şey, CSS’den yukarıda belirtmiş olduğunuz başlıklara istediğiniz fontu ve rengi atamak. FLIR gerisini sizin için halledecek, başlıklarınız resim olarak görüntülenecektir.

1
2
3

h1 { font-family: css-font-ismi, Arial, serif; }  
h2 { font-family: css-font-ismi-2, Arial, sans-serif; }  
h2.kirmizi { font-family: css-font-ismi-3, Arial, sans-serif; color: red; }

Örnek dosya için tıklayınız.

FLIR’ın artı yönleri

• Kurulumu SIFR’e göre çok daha basit.
• Kurulum için herhangi bir yardımcı program gerektirmiyor (örn. Adobe Flash)
• Flash Player gerektirmediği için her tarayıcıda sorunsuzca görüntülenebiliyor.
• Flash Player gerektirmediğinden dolayı daha stabil bir çözüm sunuyor

FLIR’ın eksi yönleri

• Fontları Photoshop’un ’sharp’ tekniğiyle yorumladığından daha ayrıntılı yazı tiplerinde sorun çıkarabiliyor. sIFR’e göre daha kalitesiz bir görüntü sunuyor.
• Henüz Türkçe karakter desteği sorununu çözemedim. Ancak gelişticiyle iletişime geçtim, kısa süre sonra bir çözüm bulacaktır diye umuyorum.
• FLIR henüz beta versiyonunda olduğundan büyük projelerde kullanmak için biraz daha beklemek gerekiyor.

FLIR, tüm tarayıcılar CSS3 ile birlikte gelen ‘evrimsel’ her yazı tipini destekleme özelliğini sunana kadar sIFR için iyi bir alternatif olacağa benziyor. Bundan sonra bazı projelerimde kullanmayı düşündüğüm bu güzel skripti XHTMLMutfağı olarak sIFR’in yanında desteklemeye başlayacağız.

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.

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.

Bağlantı

Diyelim ki kız arkadaşınıza bir site yaptınız, ona yazdığınız şiirleri – ki böyle biri var mıdır bilmiyorum – web sitenizde yayınlıyorsunuz. Ya her başlığı grafik olarak düzenleyerek o ana göre hoş bir yazı tipi kullanacak ya da Times New Roman, Arial gibi klasik fontlara mahkum olacaksınız.
Bir çocuk siteniz var, düzenli haberler giriyorsunuz. Haber başlıklarını grafik olarak düzenleyerek çocukların ilgisini çekecek bir font kullanacak, ya da Times New Roman, Arial gibi fontların kölesi olacaksınız.

İşte çekilecek bu eziyeti önceden farkedip dayanamayan, günlerce annesinin ‘Mike oğlum uyu artık, Mike çocuğum yemeğe gel!’ laflarının arasında bu güzel, şirin, bir o kadar da küçük ve kullanışlı (şeyi) yazan Mike Davidson‘ın ’sIFR’ adlı eklentisini burada inceliyor, kullanımına göz atıyoruz.

sIFR küçük bir flash, birkaç javascript ve css dosyasıyla çok iyi işler çıkarabiliyor. Bu küçük uygulama CSS’den tanıdığımız headline (h1, h2 vb.) normal yazınızı, karşıdaki kişinin bilgisayarında olmasa bile, istediğiniz her font ve renge dönüştürme olanağı sağlıyor. Ayrıca sIFR;

• web standartlarına tam uyumluluk gösterir.
• Windows, Mac veya Linux yüklü, Javascript ve Flash Player 6′ya sahip olan her bilgisayarda çalışır. Aksi taktirde normal yazınız görüntülenir, tasarımda bir bozukluk meydana gelmez.
• Boyutu 10 kb’den küçüktür ve sadece 1 kez yüklenerek trafiğinizi israf etmenize neden olmaz.

Şimdi de sIFR’i nasıl kullanacağımıza değinelim.

1. Buraya tıklayarak sIFR’in 2. versiyonunu indirin.
2. Dosyayı arşivden çıkardıktan sonra sifr.fla dosyasını açın.
3. Program tamamen açıldıktan sonra ortada görülen beyaz çalışma alanına çift tıklayın.
4. ‘Don’t remove this text’ yazısı belirdikten sonra, bu yazıya iki kez tıklayın.
5. Yazının renk veya boyutunu kesinlikle değiştirmeyin, sadece istediğiniz fontu seçip menüden File (Dosya) seçeneğine tıklayarak Export -> Export Movie’yi seçin, kullanmış olduğunuz fontun ismini bu dosyaya verin, örneğin; ‘arial.swf’. Bu işlemi uygularken indirdiğiniz zip dosyasından çıkan ‘customize_me.as’ ve ‘dont_customize_me.as’ dosyalarının bu fla dosyasıyla aynı klasörde olduğuna emin olun. Aynı zamanda ‘customize_me.as’ dosyasını açarak sIFR’i kullanmak istediğiniz siteleri belirtebilirsiniz.
6. sIFR-print.css ve sIFR-screen.css dosyalarını sayfalarınıza ekleyin.
7. sifr.js adlı javascript dosyasını sayfanıza ekleyin;

8. Sakın sıkılmayın, nerede bitiyor :)
9. Değiştirme sözdizimi, sayfamıza koyacağımız son javascript kodu olacak. Bu kodda CSS’den alınacak olan headlinelar tanınacak ve sIFR’e gönderilecek.

   <script type="text/javascript">
   
   if(typeof sIFR == "function"){
   
   sIFR.replaceElement("h1",
   
   named({sFlashSrc: "./flashadi.swf",
   
   sColor: "#000", sCase: "upper"}));
   
   };
   
   </script>

10. (tam kodu zip dosyasından çıkan ‘documentation’ klasöründen alınız.)Burada sFlashSrc kodu ile hazırladığımız swf dosyamızın yolunu belirtiyor, sColor:ile yazımının rengini belirliyoruz. Tam listeye zip dosyasından çıkan ‘documentation’ bölümünden ulaşınız.
11. CSS dosyamızda bir headline oluşturuyoruz, örneğin;h1 {
font-size: 16px;
font-family:'Lucida Grande', 'Lucida Sans Unicode', Arial;
color:#FFFFFF;
font-weight:normal;
}Bu headline’ı HTML dosyamızda istediğimiz yere ekliyoruz, bu sIFR tarafından değiştirilecek olan yazımız olacak.<h1>İşte bu kadar kolay</h1>
12. Son olarak ’sIFR-screen.css’ dosyasında headline’ı oluşturup işlemi tamamlıyoruz..sIFR-hasFlash h1 {
visibility: hidden;
font-size: 16px;
text-align:center;}Burada visibility: hidden; kodunda bir değişiklik yapmamaya dikkat edin.

• Kendi css dosyamızda oluşturduğumuz headline sadece javascript’i devre dışı bırakılmış veya herhangi bir nedenden dolayı gösterilemeyen sIFR yerine kullanılacak ve ancak o zaman devreye girecektir. sIFR için yazdığınız yazı headline kodunuza göre şekil alacaktır.
• Oluşturacağınız yeni stiller için yeni headlinelar oluşturun, örneğin; h1, h2, h3 vs.
• Flash dosyasında kesinlikle font değişiminden başka bir değişiklik yapmayın, dosyayı export ederken indirdiğiniz zip dosyasından çıkan ‘customize_me.as’ ve ‘dont_customize_me.as’ dosyalarının bu fla dosyasıyla aynı klasörde olduğuna emin olun.