sIFR 3: Kullanım Kılavuzu

Kategori: Tasarım7.08.07(43)

Geçen sene söylediklerimiz gerçekleşti: sIFR, gerçekten de birçok siteye renk kattı. Tasarımcılar hem arama motoru dostu, hem de güzel görünümlü başlıklarla mutlu oladursun, sIFR el değiştirdi ve daha da geliştirilmiş yeni versiyonuyla kendisini beğendirmek için tekrar yollara çıktı.

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.

sIFR 3 Kullanım Kılavuzu

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.

sIFR 3: Kullanım Kılavuzu

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.

Etiketler: , , , , ,

YORUMLAR

TOPLAM 43 YORUM.

Yorumlarınız değerlidir. Bu yazıyla ilgili düşüncelerinizi belirtebilir, yardım talebinde bulunabilirsiniz.

Ömer, (#) - 7.8.2007

teşekkürler bunu bekliyordum

Kadir Doğan, (#) - 7.8.2007

Harika bir makale olmuş Muhammet. Ellerine sağlık.

Ferhat Besler, (#) - 7.8.2007

Çok güzel sunum teşekkür ederiz. Bu sistemi daha çok nerelerde kullanmak işimizi görür? indexleme de herhangi bir sorun çıkarır mı?

Fatih Hayrioğlu’nun not defteri » 08 Ağustos 2007 Web’den Seçme Haberler, (#) - 8.8.2007

[...] Muhammet Sevim sFIR 3.0 versiyonu ve yeniliklerini anlatmış. Link [...]

Hackover, (#) - 8.8.2007

Teşekkürler Muhammet. Zannediyorum indexlemede bir sorun oluşmaz. Çünkü sıkça kullanılan bir uygulama…

enver, (#) - 8.8.2007

hoş : ) hep gıcık olmuşumdur saten kısıtlı font kullanmaya : )

Muhammet Sevim, (#) - 11.8.2007

Ferhat Besler, sIFR’ı daha çok başlık bölgelerinde, küçük bağlantılarda ve benzeri alanlarda kullanabilirsiniz. Doğru kullanıldığı taktirde indekslemede hiçbir sorun çıkarmayacaktır. Hackover’ın da dediği gibi zaten çok sık kullanılan bir uygulamadır…

oceangray, (#) - 14.8.2007

multi color sifr

http://webdesign.maratz.com/lab/multi_color_sifr/

Tufan, (#) - 7.4.2008

Hocam sitem joomla, joomla için çıkan botu yükledim. Tarifiniz üzere karakter dosyası hazırladım. Ancak Türkçe karakterler görünmüyor. Yinede teşekkürler.

Mehmet, (#) - 17.6.2008

peki transparan zemin verebiliyormuyuz

Muhammet Sevim » SifrGenerator.com · Görsel iletişim tasarımı, Web standartları (CSS/XHTML) ve dünyada olup bitenler üzerine…, (#) - 11.10.2008

[...] fazla yazıda konuştuk, tartıştık. sIFR’de herşey günlük gülistanlık olsa da, kurulumu zahmetsiz de değil hani. En can sıkan noktası şüphesiz Flash programına ihtiyaç duymak; web [...]

sIFR Nedir? Ne Değildir? Videolu Anlatım, (#) - 18.10.2008

[...] arada, okumayı seven arkadaşlar, Muhammet Sevim’in, sIFR 3 Kullanım Kılavuzu adlı paylaşımını [...]

0 n 8 = ? » Blog Archive » Flash kullanmadan sIFR yapımı, (#) - 3.11.2008

[...] yazıtiplerini sitenizde kullanabilmenizi sağlıyor. Bu konu hakkında Muhammet Sevim’in kullanım kılavuzu makalesini ve sIFR tanıtım makalesini okuyabilirsiniz. Ayrıca uygulamanın fikir babası olan Mike [...]

Sosyal İm - Teknoloji haberleri » Flash kullanmadan sIFR yapımı » Blog Arşivi » Flash kullanmadan sIFR yapımı, (#) - 3.11.2008

[...] yazıtiplerini sitenizde kullanabilmenizi sağlıyor. Bu konu hakkında Muhammet Sevim’in kullanım kılavuzu makalesini ve sIFR tanıtım makalesini okuyabilirsiniz. Ayrıca uygulamanın fikir babası olan Mike [...]

ahmet kaya, (#) - 4.11.2008

çok güzel bir makale paylaşımın için teşekkürler

Flash kullanmadan sIFR yapımı | Güncel Türkçe Bilgi Sitesi, (#) - 4.11.2008

[...] yazı tiplerini sitenizde kullanabilmenizi sağlıyor. Bu konu hakkında Muhammet Sevim’in kullanım kılavuzu makalesini ve sIFR tanıtım makalesini okuyabilirsiniz. Ayrıca uygulamanın fikir babası olan Mike [...]

bekir, (#) - 4.11.2008

istediğimiz font kullanmak derken arapça fontlar bu sınıfa girebilir mi acaba ?

» sIFR için vazgeçilmez servis: SifrGenerator.com | Araş.Gör. İlker Ali ÖZKAN Kişisel Güncesi, (#) - 4.11.2008

[...] fazla yazıda konuştuk, tartıştık. sIFR’de herşey günlük gülistanlık olsa da, kurulumu zahmetsiz de değil hani. En can sıkan noktası şüphesiz Flash programına ihtiyaç duymak; web [...]

Arda, (#) - 7.11.2008

Teşekkürler, çok bilgilendirici olmuş. Bir veya iki tane de Türkçe font olsaydı örnek çok iyi olurdu bence. Bir çok kişi için Flash indirmek bir eziyet :)

» Adobe Flash kullanmadan sIFR yapımı &raquo&raquo» adobe, coffeecup, design, flash, font, font maker, generator, opentype, sifr, sifr font maker, sifrgenerator, swf, tasarım, truetype, üreteç, yaratıcı, yazıtipi chat odaları , (#) - 8.11.2008

[...] konu hakkında Muhammet Sevim’in kullanım kılavuzu makalesini ve sIFR tanıtım makalesini okuyabilirsiniz. Ayrıca uygulamanın fikir babası olan Mike [...]

Erhan ASLAN, (#) - 17.11.2008

Bilmiyorum ben mi yanlış yapıyorum ancak bir türlü javascript üzerinden color verdiremedim

var vag = {src: 'vagrounded.swf'};
sIFR.prefetch(vag);
sIFR.activate(vag);
sIFR.replace(vag, { selector: 'h1'});

sIFR.replace(vag, {selector: 'h1',css: [
'.sIFR-root { text-align: center; font-weight: bold; }'
,'a { text-decoration: none; }'
,'a:link { color: #000000; }'
,'a:hover { color: #CCCCCC; }'
]});

sIFR.replace(vag, { selector: 'h2'});

sIFR.replace(vag, {
selector: 'h2',
css: [ '.sIFR-root { color: #FF0000; }']
}
);

burdaki kodları sallamıyor flash dosyam burda renk olarak linklere farklı verilmesine rağmen lin verdiğim de yine altı çizili standar mavi ile çıkıyor nerde yanlış yapmış olabilirim. Başına gelen arkadaşlardan yardım istiyorum..

ikinci el makina, (#) - 21.11.2008

çok farklı bir uygulama çalışmayı deneyeceğim teşekkürler

Gürsel, (#) - 3.12.2008

Muhammet kardeşim çok teşekkürler. Çok güzel bi malae olmuş. Eline sağlık..

» Adobe Flash kullanmadan sIFR yapımı Duymadim.com: Bunudamı duymadın? Araç Bilgisayar Bilim Donanım Fragmanlar Genel Komedi Magazin Müzik Mobil Oyunlar Son Dakika Spor Teknoloji Uzay Video Yazılım İnternet Yeni teknolojiler Yeni telefonla, (#) - 3.1.2009

[...] konu hakkında Muhammet Sevim’in kullanım kılavuzu makalesini ve sIFR tanıtım makalesini okuyabilirsiniz. Ayrıca uygulamanın fikir babası olan Mike [...]

Black, (#) - 7.1.2009

Adobe Flash Player 10 güncellemesiyle birlikte Firefox ve Chromeda, sifr flash olarak çalıştırmıyor bunla ilgili bir güncelleme çıktımı?

Fatma Tanrısevdi Doğan, (#) - 13.1.2009

Yazın için çok teşekkür ederim. Çok işime yaradı ;)

ümran, (#) - 16.2.2009

Çok teşekkürler.
Anlatım süper.
Denedim çok güzel oldu.
Bütün html elemanlarına uygulayabiliyoruz değil mi?

rasim coşkun, (#) - 16.3.2009

Bu güzel anlatım için teşekkürler.

iS34.Net Güncel Haberler » sIFR’i Optimum Şekilde Kullanın, (#) - 21.3.2009

[...] 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 [...]

iS34.Net» sIFR’i Optimum Şekilde Kullanın, (#) - 3.4.2009

[...] 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 [...]

oztecnic - XHTML, CSS, JavaScript, Fireworks, Web Standartları, Erişilebilirlik, (#) - 5.6.2009

sIFR Üzerine Notlar…

İmaj yerine koyma tekniklerinin temel felsefesi web ortamında kullanılamayan fontların, web uygulamalarında kullanılabilmesine odaklanıyor. Klasik imaj yerine koyma tekniklerinin yetmediği noktada, web geliştiricileri değişik yöntemler üze…

Murat BEŞER, (#) - 23.7.2009

Selamlar,

elinize sağlık güzel bir makale fakat ben araştırdım ama a:active için bir çözüm yolu bulamadım.

Bilginiz varmıydı bu konuda

Golge, (#) - 6.8.2009

Selamlar…Yazınız cok ıı olmus ancak benım bır sorunum var.

Sıfr kullandıgımda metın ıcerısınde resım konumlandıramıyorum.
metnın soluna ya da sagına alamıyorum. float:left kodunu ve benzerlerını kullandıgımda resım sayfada gorunmuyor.

ACIL YARDIM!!!

Tesekkurler…

Muhammet Sevim, (#) - 6.8.2009

Selamlar,

SIFR aslında sadece başlık ve o tip alanlarda kullanılmak için düşünüldüğü için uzun metinlerde kullanıldığında sorun yaşayabilirsiniz. Zaten kullanılabilirlik açısından da akıcı metinlerde sIFR metodunu kullanmamalısınız. Sanırım ilgili resmi de orada konumlandırmak istediğinizden o bölgede sorun çıkmakta…

Golge, (#) - 7.8.2009

ilginiz için teşekkür ederim. düz yazıda kullanmama konusunda da haklısınız. bir çok css kodunda da sorun çıkarıyor. ama dediğiniz gibi başlıklar için oldukça ideal..

sanırım düz yazı denemesi biraz zorlama olmuş :D

Web’de Yazı Tipi Özgürlüğü | UBenzer | Umut Benzer | O da kim?, (#) - 27.8.2009

[...] kadar anlatmayacağım. Çünkü hem kullanmanızı önermiyorum hem de burada İngilizce, burada da Türkçe bir şekilde kurulumu uzuuun uzuun [...]

sIFR Teknolojisi | Hamza ERBAY, (#) - 30.9.2009

[...] http://www.muhammetsevim.com/yazi/sifr-3-kullanim-kilavuzu/ http://css-tricks.com/video-screencasts/39-how-to-use-sifr-3/ http://webdeneyimleri.donanimhaber.com/sifr-nedir-nedegildir/ [...]

yavuz, (#) - 9.11.2009

Öncelikle makale için çok teşekkürler..
Benim açıkcası biraz kafam karıştı. Yapmış olduğunuz tam bir örnek mevcut mu sizin (indirdiğimiz dışında)?
Ve acaba bu yöntemin daha kısa ve pratik bir hali mevcut mu?
Kolay gelisin, makale için bir kere daha teşekkürler.

sIFR Üzerine Notlar - CSS - oztecnic - XHTML, CSS, JavaScript, Fireworks, Web Standartları, Erişilebilirlik, (#) - 14.11.2009

[...] tekniğiyle ilgili daha detaylı Türkçe içeriğe buradan, buradan ve de şuradan [...]

Yunus, (#) - 19.12.2009

bu güzel makale için öncelikle teşekkürler.

Benim sorum, sıkıntım line-height ile ilgili sanırım bu atamyı görmüyor?

angels, (#) - 16.1.2010

güzel paylaşım

chat, (#) - 16.1.2010

sağol admin

Sitenizdeki fontlardan sıkıldınız mı? | newpageflip I blog, (#) - 18.1.2010

[...] görün vee buradan da indirin. Ancak bu açıklamaları iyice okumunız gerekiyor. SFIR için burayı ve burayı okumalısınız. Size bu site kolay bir yöntem sunuyor. Bu site ise online olarak size [...]

Yorumunuzu ekleyin

E-posta adresiniz hiçbir zaman yayınlanmayacaktır. Temel HTML metin şekillendirilmesi izinlidir. Sadece bu konuyla ilgili yorum yapmayı unutmayınız. Teşekkürler :)