JQuery sIFR eklentisi ve Kullanımı / sIFR Nedir ?

Web Tasarımı - JQuery sIFR eklentisi ve Kullanımı / sIFR Nedir ? ...

Cevapla
JQuery sIFR eklentisi ve Kullanımı / sIFR Nedir ?
xcoder isimli Üye şimdilik offline konumundadır

xcoder(35)

xxx

Webmaster / Yalova

Standart
Alt 05-06-2009 #1
Sponsorlu Bağlantılar

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 :
<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.

$.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:

$('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 :

<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 ,

JQuery sIFR eklentisi ve Kullanımı / sIFR Nedir ?

resimde görülen sifr.fla dosyasını Adobe Flash ile açmamız gerekiyor.


JQuery sIFR eklentisi ve Kullanımı / sIFR Nedir ?

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.

JQuery sIFR eklentisi ve Kullanımı / sIFR Nedir ?

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.

JQuery sIFR eklentisi ve Kullanımı / sIFR Nedir ?

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.
Bu mesajdan alıntı yap
Sponsor Links

Grafikerler.net Reklamları

Selim MERCANO isimli Üye şimdilik offline konumundadır

Selim MERCANO(38)

Grafiker / İstanbul

Standart
Alt 05-06-2009 #2
                             Sponsorlu Bağlantılar
Profesiyonel detayı Başarılı anlatmıssın kardeşim
eline sağlık.
Bu mesajdan alıntı yap
xcoder isimli Üye şimdilik offline konumundadır

xcoder(35)

xxx

Webmaster / Yalova

Standart
Alt 05-06-2009 #3
Profesiyonel detayı Başarılı anlatmıssın kardeşim
eline sağlık.
teşekkürler kardeşim.
Bu mesajdan alıntı yap
Gökhan TEKİN isimli Üye şimdilik offline konumundadır

Gökhan TEKİN

ARTniyetli

Fotoğrafçı / Bursa

Standart
Alt 05-06-2009 #4
Bu bilgiler internette bulunmayacak nimetler, ilgi alanım olmasada makaleyi bir kere okudum, tebrik ederim eline sağlık güzel yorumlamış ve anlatmışsınız.
Bu mesajdan alıntı yap
g.ecglr isimli Üye şimdilik offline konumundadır

g.ecglr(30)

Özel

Hiç Biri / İstanbul

Standart
Alt 05-06-2009 #5
Gerçekten çok yararlı bir paylaşım olmuş
Sizi emeğinizden dolayı yürekten kutlarım :alkis:
Paylaşımlarınızın devamını bekliyoruz
Saygılar
Bu mesajdan alıntı yap
asit isimli Üye şimdilik offline konumundadır

asit

Webmaster / Ankara

Standart
Alt 05-06-2009 #6
çok teşekkürler işime yarıyacak j query e yabancıydım bir giriş oldu en azından
Bu mesajdan alıntı yap
xcoder isimli Üye şimdilik offline konumundadır

xcoder(35)

xxx

Webmaster / Yalova

Standart
Alt 07-06-2009 #7
Bu bilgiler internette bulunmayacak nimetler, ilgi alanım olmasada makaleyi bir kere okudum, tebrik ederim eline sağlık güzel yorumlamış ve anlatmışsınız.
teşekkür ederim JQuery sIFR eklentisi ve Kullanımı / sIFR Nedir ?

Gerçekten çok yararlı bir paylaşım olmuş
Sizi emeğinizden dolayı yürekten kutlarım :alkis:
Paylaşımlarınızın devamını bekliyoruz
Saygılar
teşekkür ederim. tabiki vakit buldukça daha ayrıntılı daha üst seviyeye yönelik yazılarımızda olacak.

çok teşekkürler işime yarıyacak j query e yabancıydım bir giriş oldu en azından
birşey değil. yakında jQuery ile ilgili daha fazla bilgi ve örnek ekleyeceğim.
Bu mesajdan alıntı yap
Cevapla

Tags
jquery, sifr, tipografi teknikleri, web tasarımı

Benzer Konular
Konu Konu Bilgileri Forum Cevaplar Son Mesaj
Adobe Photoshop makyaj yapımı (blur eklentisi) photoshop_18 Plugin 54 10-02-2012 12:21:13
Adobe Camera Raw 3.7 eklentisi poseidon Fotoğraf Makineleri ve Donanımları 2 11-11-2009 20:18:48
shape eklentisi nasıl yapılır? laciverd Shape 3 22-10-2009 10:39:24
Wordpress'e Forum Eklentisi el_chancho Php, Asp, Perl, Html 2 06-06-2009 22:26:40
Firefox için hız optimizasyon eklentisi, Fasterfox 2.0.0 jokermen Yazılım Rehberi 0 14-05-2008 10:37:12

Kapat
Şifremi Unuttum?