jQuery sIFR eklentisinin kullanımını açıklamadan önce , sIFR'in ne olduğunu ufaktan anlatmak istiyorum.
sIFR in açılımı "scalable inman flash replacement" yani ölçeklebilir flaş içerik değiştirici. sIFR projesini Mike Davidson önderliğinde bir çok kişi geliştirmektedir.
sIFR , (x)html sayfalarında gösterilen fontların, sayfanın görüntülendiği bilgisayarda yüklü olması zorunluluğunu ortadan kaldıran bir javascript çatısıdır. Web sitesini yapan kişinin belirlediği taglerin (h1 , kendi belirledğiniz bir class olur, şu olur, bu olur) içindeki yazılar yerine bu script sayesinde on the fly olarak flash movie'ler yaratılıp yerleştirilmektedir. Javascript'in etkin olmadığı , veya flash player'ın yüklü olmadığı tarayıcılarda ise sayfanın kullandığı css dosyasında belirlenmiş stil kuralları ile normal şekilde gösterilmektedir böylece her zaman kaliteli bir tipografiye sahip siter yapabilirsiniz.
Peki bu sIFR nasıl kullanılıyor ? (jQuery ile)
ilk olarak gerekli eklentiyi jQuery sIFR Plugin | Description adresinden indirmemiz gerek (all-in-one olanını indirirsek daha iyi olur).
Ardından sayfamızda <head> ve </head> taglarının içerisine JQuery ve diğer sIFR bileşenlerini tanımlamamız gerekir :
Üçüncü aşamada ise flash fontlarımızın (sIFR) oldu font klasörünü ve sIFR'i kullanıcağımız tagların belirlenmesine geldi ilk olarak sIFR'in değerlerini girelim ve aktifleştirelim.
evet sIRF'i tanımladık. şimdi ise h1 taglarına sIFR'i atayalım:
tüm işlemleri henüz tamamlamadık. bu tanımlamaları sayfa yüklendikten hemen sonra yapmamız gerek. bu iki javascript kodunu birleştirerek <head> ve </head> taglarına yerleştirmeliyiz :
Şimdi sIRF devrede ve h1 taglarımızda AvantGarde Bk BT fontu var. tabiki unutmamamız gereken ise sIFR fontlarının sIFR için özel yapılmış flash swf dosyaları olmasıdır. resources/ kalsörümüz içerisinde mutlaka AvantGarde Bk BT.swf adında özel bir swf dosyamız olması gerekiyor.
Peki ben nasıl kendime uygun bir sIFR fontu oluştururum ?
ilk etapta sIFR'i indirmek gerek bunu Mike Davidson - sIFR adresinden yapabiliriz.
gerekli dosyaları bir klasöre çıkarttıktan sonra ,
resimde görülen sifr.fla dosyasını Adobe Flash ile açmamız gerekiyor.
Adobe flash ile açtığımız zaman dosyamızı karşımıza beyaz bir sayfa gelecektir. Burada bulunan holder movie clip'ine çift tıklayınız.
karşınıza yukarda görünen alan gelecektir. txtF dinamik yazısına bir kez tıklayın ve kullanmak istediğiniz fontu seçiniz. ardından türkçe uyumlu hale getirmek için character embeding bölümüne tıklayınız.
karşımıza çıkan pencerede Include these characters kısmına " _&ŞİışÇçÖöÜüĞğ" verisini giriniz.
ardından File > Export > Export Movie menülerini kullanarak resources/ klasörüne fontumuza vermek istediğimiz ismi vererek export ediniz. artık sIFR fontunuz kullanıma açıktır.
NOT : Adobe Flash CS4 kullanıyorsanız sifr'i Novemberborn: sIFR 2.0.7: Flash 10 / Safari Compatibility Release adresinden idirerek sifr-cs3-and-up.fla dosyasını çalıştırın.
sIFR in açılımı "scalable inman flash replacement" yani ölçeklebilir flaş içerik değiştirici. sIFR projesini Mike Davidson önderliğinde bir çok kişi geliştirmektedir.
sIFR , (x)html sayfalarında gösterilen fontların, sayfanın görüntülendiği bilgisayarda yüklü olması zorunluluğunu ortadan kaldıran bir javascript çatısıdır. Web sitesini yapan kişinin belirlediği taglerin (h1 , kendi belirledğiniz bir class olur, şu olur, bu olur) içindeki yazılar yerine bu script sayesinde on the fly olarak flash movie'ler yaratılıp yerleştirilmektedir. Javascript'in etkin olmadığı , veya flash player'ın yüklü olmadığı tarayıcılarda ise sayfanın kullandığı css dosyasında belirlenmiş stil kuralları ile normal şekilde gösterilmektedir böylece her zaman kaliteli bir tipografiye sahip siter yapabilirsiniz.
Peki bu sIFR nasıl kullanılıyor ? (jQuery ile)
ilk olarak gerekli eklentiyi jQuery sIFR Plugin | Description adresinden indirmemiz gerek (all-in-one olanını indirirsek daha iyi olur).
Ardından sayfamızda <head> ve </head> taglarının içerisine JQuery ve diğer sIFR bileşenlerini tanımlamamız gerekir :
Kod:
<script type="text/javascript" src="javascript/jquery.min.js"></script>
<script type="text/javascript" src="javascript/jquery.flash.min.js"></script>
<script type="text/javascript" src="javascript/jquery.sifr.min.js"></script>Üçüncü aşamada ise flash fontlarımızın (sIFR) oldu font klasörünü ve sIFR'i kullanıcağımız tagların belirlenmesine geldi ilk olarak sIFR'in değerlerini girelim ve aktifleştirelim.
Kod:
$.sifr({
path: 'resources/', //sIFR fontlarımızın olduğu path
save: true //ayarları tüm sayfada uygula
});evet sIRF'i tanımladık. şimdi ise h1 taglarına sIFR'i atayalım:
Kod:
$('h1').sifr({ font: 'AvantGarde Bk BT' });tüm işlemleri henüz tamamlamadık. bu tanımlamaları sayfa yüklendikten hemen sonra yapmamız gerek. bu iki javascript kodunu birleştirerek <head> ve </head> taglarına yerleştirmeliyiz :
Kod:
<script type="text/javascript">
$(document).ready(function(){
$.sifr({
path: 'resources/',
save: true
});
$('h1').sifr({ font: 'AvantGarde Bk BT' });
});
</script>Şimdi sIRF devrede ve h1 taglarımızda AvantGarde Bk BT fontu var. tabiki unutmamamız gereken ise sIFR fontlarının sIFR için özel yapılmış flash swf dosyaları olmasıdır. resources/ kalsörümüz içerisinde mutlaka AvantGarde Bk BT.swf adında özel bir swf dosyamız olması gerekiyor.
Peki ben nasıl kendime uygun bir sIFR fontu oluştururum ?
ilk etapta sIFR'i indirmek gerek bunu Mike Davidson - sIFR adresinden yapabiliriz.
gerekli dosyaları bir klasöre çıkarttıktan sonra ,
resimde görülen sifr.fla dosyasını Adobe Flash ile açmamız gerekiyor.
Adobe flash ile açtığımız zaman dosyamızı karşımıza beyaz bir sayfa gelecektir. Burada bulunan holder movie clip'ine çift tıklayınız.
karşınıza yukarda görünen alan gelecektir. txtF dinamik yazısına bir kez tıklayın ve kullanmak istediğiniz fontu seçiniz. ardından türkçe uyumlu hale getirmek için character embeding bölümüne tıklayınız.
karşımıza çıkan pencerede Include these characters kısmına " _&ŞİışÇçÖöÜüĞğ" verisini giriniz.
ardından File > Export > Export Movie menülerini kullanarak resources/ klasörüne fontumuza vermek istediğimiz ismi vererek export ediniz. artık sIFR fontunuz kullanıma açıktır.
NOT : Adobe Flash CS4 kullanıyorsanız sifr'i Novemberborn: sIFR 2.0.7: Flash 10 / Safari Compatibility Release adresinden idirerek sifr-cs3-and-up.fla dosyasını çalıştırın.
