sIFR’i Optimum Şekilde Kullanın

11 Yorum

Image Replacement teknikleri arasında en popüleri sIFR‘dir. Her tarafta gördüğümüz ve bazı projelerde uyguladığımız bu teknikle kullandığımız işletim sistemindeki standart yazıtiplerine bağlı olmadan herhangi bir yazıtipini başlıklarımızda kullanabiliyoruz. Hem de daha düzgün bir Anti-Alias tekniği ile. Aşağıdaki görüntüde sonuca dair bir örnek görebilirsiniz. Veya sIFR 3′ün demosuna bakıp canlı olarak görmeniz de mümkün.

sIFR Kullanımı

Bu yazımda size sIFR‘in temelde nasıl kullanılacağını değil, bu tekniği nasıl daha optimum bir şekilde kullanabiliriz buna değineceğim. Zaten etrafta yeterince kullanımı anlatan yazılar var. Mesela bunun için sevgili dostum Muhammet Sevim‘in yazdığı sIFR 3 Kullanım Kılavuzu adlı makaleyi okuyabilirsiniz. Ayrıca sIFR Tutorial: Use Your Own Fonts, This is How You Get sIFR to Work ve sIFR 3 Documentation & FAQ adlı makaleleri de okuyabilirsiniz.

Eğer sIFR ile daha önce hiç tanışmamışsanız mutlaka yukarıda bağlantılarını verdiğim yazılardan en azından birini okumanızı ve sIFR‘in kullanımına aşina olmanızı öneririm.

sIFR‘in yukarıdaki makalelerde anlatılan normal kullanımlarında HTML dosyamıza birçok dosya eklememiz gerektiğini söylüyorlar. Ben sIFR‘i projelerimde kullanırken böyle yapmıyorum. Genelde mümkün olduğunca az dosyayı HTML sayfamdan çağırıyorum.

Yani normal kullanımda HTML dosyanızda aşağıdaki CSS dosyalarını;

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

ve aşağıdaki dosyaları JS dosyalarını çağırmamız gerekiyor:

1
2

<script src="sifr.js" type="text/javascript"></script>
<script src="sifr-config.js" type="text/javascript"></script>

Toplamda 4 dosyayı çağırıyoruz. Sizce çok değil mi? Peki şimdi burada ben size sadece üstteki <script src="sifr.js" type="text/javascript"></script> dosyasını HTML sayfamıza ekleyerek sIFR‘i kullanabileceğimizi söylesem nasıl olur? İyi olur değil mi? :)

Böyle bir yöntem izleyince sunucuya daha az istek göndermiş ve ayrıca kullanımı daha da basitleştirmiş olacağız.

Neden daha az istek göndermemiz gerektiğini ise daha önce Siberkültür‘de Sitenizin Performansını Arttırın adlı yazıdaki aşağıdaki paragrafta gayet iyi bir şekilde açıklanmıştı:

Sayfanızda ne kadar çok öğe bulunuyorsa, sunucuya gidecek istek de o kadar fazlalaşacaktır. Sunucuya giden her istek ise milisaniyelerle talep/cevap paralelini uzatacaktır. Sayfanızdaki öğelerden kastım tabiki de CSS dosyaları, JavaScript dosyaları ve imaj gibi harici dosyalar.

Hareket Vakti

Şimdi ilk olarak sifr.js dosyasını ve web sayfamız için diğer gerekli fonksiyonları taşıyan functions.js dosyasını aşağıdaki şekilde HTML sayfanıza ekleyin.

1
2

<script src="scripts/sifr.js" type="text/javascript"></script>
<script src="scripts/functions.js" type="text/javascript"></script>

Bakın ben yukarda bütün JS veya gerekli olabilecek küçük PHP betiklerini scripts adlı klasörde tutuyorum. Siz hangi klasörde bu dosyaları tutuyorsanız yukarıdaki kodu ona göre düzenlemeniz gerekir.

Az önce tek bir JS dosyası ile bu işi halledebileceğimizi söyledim. Evet bu doğru. Çünkü çoğu web sayfasında ufak tefekte olsa muhakkak JS kodları kullanıyoruz. Ben genelde yukarıdaki örnekteki gibi bu dosyamın ismini functions.js veriyor ve kodlarımı o dosya içinde tutuyorum.

Sonra functions.js dosyanızı açın, aşağıdaki örnek kodu yapıştırın ve tabi ki kendi kullanım ihtiyacınıza göre yeniden düzenleyin:

1
2
3

var agora_regular = {src: 'images/swf/agora_regular.swf' };
sIFR.activate(agora_regular);
sIFR.replace(agora_regular, {selector: 'div#content h1, div#content h2', css: ['.sIFR-root { color: #3e3e3e; font-weight:bold; letter-spacing:-1 }'], wmode: 'transparent', tuneHeight: '-5'});

Yine burada ilk satırda Flash’da ürettiğim Agora Regular adlı yazıtipini barındıran agora_regular.swf dosyasını images/swf klasöründen çağırıyorum. Yine siz kendi gereksinimlerinize göre yuarıdaki kodu düzenleyebilirsiniz.

Son olarak varsayılan olarak kullandığınız CSS dosyanızı açıp aşağıdaki kodları dosyanızdaki uygun bir yere yapıştırın:

1
2
3
4
5
6
7
8
9
10
11
12

.sIFR-flash { visibility:visible !important; margin:0; padding:0 }
.sIFR-unloading .sIFR-flash { visibility:hidden !important }
.sIFR-replaced, .sIFR-ignore { visibility:visible !important }
.sIFR-alternate { position:absolute; left:0; top:0; width:0; height:0; display:block; overflow:hidden }
.sIFR-replaced div.sIFR-fixfocus { margin:0pt; padding:0pt; overflow:auto; letter-spacing:0px; float:none }
 
@media print {
    .sIFR-flash { display:none !important; height:0; width:0; position: absolute; overflow:hidden; }
    .sIFR-alternate { visibility:visible !important; display:block !important; position:static !important; left:auto !important; top:auto !important; width:auto !important; height:auto !important }
}
 
.sIFR-active div#content h1 { visibility:hidden; font-size:30px; line-height:1em }

Yukarıdaki kodda 1. satırdan 5. satıra kadar sIFR için gerekli CSS kodlarını (yani standart kurulumdaki sifr-screen.css dosyasındaki gerekli satırları), 7. satırdan 10. satıra kadar normalde sifr-print.css adlı sIFR için gerekli dosyadaki kodları ve 12. satırda da sIFR tekniği uyguladığımız başlığın boyutunu belirliyoruz.

Yukarıda @media print kodu sayesinde gereksiz yere sifr-print.css dosyasını HTML sayfamıza gömmekten kurtardık. Ama burada dikkat etmemiz gereken birşey var. Yukarıdaki kodu eklediğiniz ana CSS dosyasını (ben genelde screen.css olarak adlandırırım) HTML dosyasına gömerken <link href="styles/screen.css" rel="stylesheet" type="text/css" media=”screen” /> şeklinde media="screen" özelliğini kullanarak verirseniz az önce bahsettiğim @media print arasındaki kodlar çalışmayacaktır. Çünkü bu CSS dosyasını tanımlarken sadece ekran için çalışmasını söylediniz.

Dolayısıyla web sayfanızı yazdırırken sIFR‘in ürettiği .SWF dosyaları yüzünden kimi boşluklar veya birtakım gariplikler görebilirsiniz.

Kısacası HTML sayfamıza ana stil sayfamızı çağırırken media="screen" özelliğini kullanmamamız gerekir.

Ayrıca eğer hali hazırda yazıcı için bir CSS dosyası kullanıyorsanız yukarıdaki örnekte yer alan @media print {} arasındaki kodları o dosya içine de atabilirsiniz.

Sonuç olarak web sayfalarımızı kodlarken mümkün olduğunca az dosya kullanmamız iyi olacaktır. Gerektiğinde bu yazımda anlattığım tarzda bir değişiklik yapmamız da optimizasyon adına iyi olacaktır.

Yorumlar

Bu yazı hakkında 11 yorum yazıldı. Yorumları RSS üzerinden de takip edebilirsiniz. Siz de yorum yazmak ister misiniz?

  1. Çok değerli bilgiler bunlar dostum, arşive aldım bile :) Çok teşekkürler…

    Muhammet Sevim → http://www.muhammetsevim.com 20 Eylül 2008 00:02

  2. Güzel bir yazı olmuş,teşekkürler.
    Merak ettiğim 2 konu var.
    1. Türkçe karakter sorunu oluyor mu?
    2. IE6 dahil tüm browserlarda çalışıyor mu acaba?

    Uğur ÇELENK → http://www.ugurcelenk.com/ 20 Eylül 2008 00:33

  3. @Muhammet Sevim: Teşekkürler. ;)

    @Uğur Çelenk: Türkçe karakterlerde normalde sorun olmuyor (eğer sIFR’de kullandığınız yazıtipinde Türkçe karakter desteği varsa).

    Diğer yandan Flash ile .SWF dosyasını üretirken de bazı Türkçe karakterleri “Embed” yapmak lazım. Yukarıdaki bağlantısını verdiğim dökümanlarda bu “Embed” mevzusundan bahsediliyor olması gerekir.

    Ayrıca Opera 9.50′ye kadar (umarım yanlış hatırlamıyorumdur) olan tarayıcılar hariç bütün tarayıcılarda çalışıyor sIFR. Kısacası şu andaki güncel tarayıcılarda çalışıyor.

    fatihturan → http://www.fatihturan.com 20 Eylül 2008 00:56

  4. Tekrar teşekkürler.
    Bu arada jQuery ile kullanımı çok rahatmış –> http://www.malsup.com/jquery/media/sifr.html?v2

    Uğur ÇELENK → http://www.ugurcelenk.com/ 20 Eylül 2008 01:07

  5. @Uğur Çelenk: Rahat olabilir fakat sadece bu işlev için 14KB’lik jquery.media.js dosyasını eklememiz gerekecek. Bu da üstte anlattığım performans önerisine ters olur. :)

    Kısacası sIFR kullanımı için bence biraz gereksiz bir jQuery eklentisi.

    fatihturan → http://www.fatihturan.com 20 Eylül 2008 01:14

  6. Yazdıklarına eleştiri gibi olacak biraz ;
    Öncelikle 14kblık bu js dosyasındaki commentleri kaldırdım, http://javascriptcompressor.com/ adresinden js kodlarını sıkıştırdım ve boyut 14kb’tan 7,8kb’a düştü.
    ~8kb lık bir javascript dosyası boyutu, js dosyalarının ilk giriş dışında cache’ten okunduğu düşünüldüğünde o kadar da önemsenecek bir boyut olmadığı anlaşılıyor aslında.
    (sifr.js ve sifr-config.js dosyaları da verdiğim adresteki örneğin kaynak kodlarında ekli değil gibi sanki, üşendim teker teker js dosyalarının içlerine bakmaya ama anladığım kadarıyla zaten bu js dosyası diğer 2 dosyanın yerine kullanılıyor.)

    sIFR olayını hep duyuyordum ama bir türlü kullanma fırsatı bulamamıştım, makalenle birlikte sIFR olayına giriş yapmış olduk ama jQuery delisi olaraktan jQuery eklentili olanı tercih edeceğim sanırım :)

    Uğur ÇELENK → http://www.ugurcelenk.com/ 20 Eylül 2008 02:00

  7. @Uğur Çelenk: Şimdi bu bahsettiğin eklentinin demosunu ayrıntılı olarak inceledim hatta eklentinin kodlarını da inceledim de sIFR ile ilgili herhangi bir dosya demoya dahil edilmemiş (sifr.js yani). Kodlarda da sIFR ile ilgili herhangi bir kısma rastlamadım.

    Bu adamlar nasıl yapmışlar ki böyle sifr.js’siz veya onunla ilgili herhangi bir kod kullanmadan sIFR’i kullanabiliyorlar. Hayret… :)

    Yanlız sIFR 3 devamlı güncellenen bir uygulama. Bu jQuery eklentisindeki sIFR mevzusu nereden geliyor anlamadım. Yani her zaman en son sIFR sürümünü mü kullanıyor? Eğer öyle değilse yani sabit bir versiyon kullanıyorsa bu bizim için pek iyi olmaz. Çünkü her yeni sIFR sürümünde bazı hatalar gideriliyor.

    Bu arada eleştirilere her zaman açığım Uğur. Bunu belirtmekte fayda var. ;)

    fatihturan → http://www.fatihturan.com 20 Eylül 2008 10:51

  8. Güzel fontlar kullancam diye her başlık için bir resim kullanmaktansa bu yöntem çok daha harika.

    Volkan Görgülü → http://webdeneyimleri.donanimhaber.com 23 Eylül 2008 22:44

  9. Elinize sağlık.

    Sedat Kumcu → http://www.sedat.web.tr 15 Ekim 2008 05:31

  10. Merhabalar, benim sormak istedigim bir soru var
    sifr da kullanıyorum projede..
    Ajax updatepanel kullandıktan sonra css bozuluyor. . acaba bu sorunun üstesinden nasıl gelebilirim.

    Yazı içinde Eline sağlık

    Fethi Ata 31 Ekim 2008 12:23

  11. @Fethi: Bahsettiğiniz sorunu biraz daha açıklayabilirseniz belki yardımcı olabilirim. Şu aşamada pek birşey anlayamadım.

    fatihturan → http://www.fatihturan.com 31 Ekim 2008 17:54

Reaksiyonlar

Bu yazı hakkında 2 pingback ve 0 trackback yapıldı.

  1. sIFR Nedir? Ne Değildir? Videolu Anlatım
  2. Web’de sIFR Teknolojisi | Sinerjik Günlük

Yorum Yaz

Yorum yazabilmeniz için adınız, soyadınız ve e-posta adresinizi mutlaka girmeniz gerekiyor. E-posta adresiniz burada gösterilmeyecektir.

Lütfen yorumunuzu yazdıkdan sonra önizleme düğmesine basıp yazım hatalarınızı kontrol edin. Konu ile alakasız ve çok fazla yazım hatası bulunan yorumlar onaylanmayacaktır.

Ben Kimim?

Fatih Turan Benim adım Fatih Turan. 25 yaşındayım ve Rize’de yaşıyorum. Serbest web tasarımcılığı ve XHTML KITCHEN adını verdiğimiz servisimizde tasarımları XHTML/CSS’ye dönüştürmekle görevli front-end developerlardan biri olarak çalışıyorum. Anadolu Üniversitesi Açıköğretim Fakültesi İşletme bölümü mezunuyum. Okumaya Devam Et...

Bu blog Wordpress altyapısında çalışıyor olup Fatih Turan tarafından yapılmış olan Emerald adlı temayı kullanıyor. Fatih Turan ©