Web’de font özgürlüğü: sIFR

Kategori: Tasarım19.01.06(36)

Dikkat: Bu yazı güncel olmayan bilgiler içerir. Güncel yazıyı okumak için tıklayınız.

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.

Etiketler: , ,

YORUMLAR

TOPLAM 36 YORUM.

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

Abdullah Dağlı, (#) - 21.1.2006

bunu ben de arıyordum açıkçası.Ancak benim merak ettiğim web sayfamızda standart fontlar dışındaki fontları flash yöntemi dışında bir yöntemle kullanamıyor muyuz?Yani bir html koduyla (ve ya dinamik bir dille) fontları kodlarımıza import ederek bunun tanınmasını sağlıyamıyor muyuz.Ancak bu flash işini ilk defa duyduğumu itiraf edeyim…

Muhammet Sevim, (#) - 21.1.2006

sIFR kullanmadan sade HTML kodları ile kullanıcının bilgisayarında olmayan fontları göstermek de tabii ki mümkün, ancak sIFR kadar sağlıklı değil. Bunun için Microsoft’un bir küçük ve eski(!) programı olan Weft’i kullanmak gerekiyor. Uğraştırıcı, sağlıksız. Bununla ilgili Azerice’den çevirdiğim (ya da çevirmeye çalıştığım) bir makale vardı. http://www.sadecedizayn.com/??=ders&DersID=60 adresinden ulaşman mümkün.

Abdullah Dağlı, (#) - 21.1.2006

makale açılmıyor.Ama dediğin gibi bu en iyisi gibi görünüyor.Ancak denemedim ama inşallah sistemde hız farkı oluşturmaz… :)

Muhammet Sevim, (#) - 21.1.2006

Sistemde hız farkı oluşmaz, daha önceden dediğim gibi 10 kb’den küçük bir boyutu olduğu gibi sadece bir kez yükleniyor. Ama yinede uzun makaleleri sIFR ile yazdırmanı tavsiye etmem, başlıklar kafidir :)

Abdullah Dağlı, (#) - 21.1.2006

:) bunu kullanacağım sağol bu yazın ve yardımların için…

Erhan BAYRAK, (#) - 20.3.2006

evet çok teşekkürler yazıda çok güzel ve anlaşılır olmuş. ilk denememde becerdim :)

oky, (#) - 30.5.2006

bir gün bunun yapılacağını biliyordum!
kullanmayı planlıyorum, teşekkürler.

esatergun, (#) - 14.6.2006

çok anlaşılır açıklanmış ama uzun iş gibi geldi bana.

skykhan, (#) - 19.6.2006

Evet mümkün hatta bir eklentisi bile var wordpress de. Ama şu şekilde çalışıyor; yazı başlığına senin yazdığın yazı çıkıyor onun üstünede istediğin font çıkıyor. Bazen yazı ile font birbirine giriyor baya kötü bir şey.

Mesut Murt, (#) - 6.7.2006

Anlatomlarınız için teşekürler. Fakat ben 2-3 defa denediysemde olumlu bir sonuç alamadım .. örnek bir dosyayı sitenize koyma imkanınız var mı.. indirip incelesek .. ve hatamızın nerde olduğunu tesbit edebilsek iyi olur gibi…

yakuter, (#) - 21.7.2006

Her ne kadar ingilizcesini okuyup sitemde kullandıktan sonra makaleni görmüş olsam da :( çok güzel bir makale ;) teşekkür ederim. :) Ha bu arada sitemde bu makalenden de bahsettim ;)

Bora Dan, (#) - 20.8.2006

Verdiğin bilgiler için çok sağol. Baya İşime Yaradı ve aradığım şeydi tam olarak. 3. denememde yapmış olsamda o kadar zorlanmadım :). bu yazıyı(linkini belirterek) sitemde insanlarla paylaşıcam inşallah.
kolay Gelsin

Ömer Sinan Ağacan, (#) - 30.8.2006

Gerçekten çok güzel bir şey. Yeni tasarımlarımda h3 niyetine sürekli sFIR tekniği ile çok güzel fontlar kullanıyorum.

Bu arada sFIR ın CSS dosyalarını tüm sayfalara eklemek yerine asıl CSS dosyamıza eklesek daha pratik olmaz mı?

Ömer Sinan Ağacan, (#) - 31.8.2006

Herşey güzel de, ben wordpress kullanıcısıyım, kendi temamı yaparken onlarca temadan esinlendim ve sFIR dosyasını da başka bir temadan aldım. Fakat o dosyada türkçe karakter desteği yok, font türkçe karakterleri destekliyor ama türkçe karatker yazdığımda boşluk oluşuyor, acaba türkçe karakterleri nasıl tanıtabilirm?

Sanalmanyak, (#) - 31.10.2006

evet ben de Ömer le aynı sorunu yasıyorum nasıl Türkçe karakter sorununu da hallederiz bu konuda da yardımcı olur musun

Muhammet Sevim, (#) - 31.10.2006

Merhaba,
Bu sayfa üzerinden sorununuzun çözümün ulaşabilirsiniz. Kolay gelsin.

Sanalmanyak, (#) - 1.11.2006

yapamadım desem :( abi sen bunun türkçeleşmiş halini yollasan çok mu olurum:S

sIFR İle Güzelleşelim « En iyi Blog SiteLeri, (#) - 7.11.2006

[...] Sanırım iki resim arasındaki 7 farkı görebiliyorsunuzdur sIFR, sitenizdeki normal karakterleri javascript kullanarak flash dosyasındaki karakterler ile değiştiriyor. Bu da doğal olarak görünümü resimdeki gibi pürüzsüzleştiriyor. Tabi bunu duyunca hemen atladım siteye. Biraz uğraştırdı ama yine de düzelttim büyük karakterlerimi. Daha sonra da her zaman yaptığım gibi bu öğrendiklerimi bir makaleye dökmeye ve sIFR ‘ın kullanımını anlatmaya karar verdim. Ta ki Muhammet Sevim‘in bunu zaten çok güzel bir şekilde anlattığını görene kadar [...]

Türkçe CSS kaynakları | Blog ve Wolkanca - işimiz gücümüz blog!, (#) - 15.2.2007

[...] Web’de font özgürlüğü: ’sIFR’ [...]

code64, (#) - 11.4.2007

Çok güzel bir açıklama olmuş eline sağlık ama benim gibi acemiler için biraz zor görünüyor

code64, (#) - 11.4.2007

Ya hocam çok güzel anlatmıssın ama ben 7. adımda takıldım oradaki kodu nereye yapıştırıcaz

bunu nereye koyucam anlamadım

Ömer, (#) - 4.8.2007

hocam 6. adındaki dosyaları nereye ve nasıl ekleyebiliriz.

Muhammet Sevim, (#) - 4.8.2007

@ömer,
kısa süre içerisinde sIFR’in yeni versiyonu olan 3′ün ayrıntılı kullanım kılavuzunu yazacağım. Hem daha ayrıntılı olacak, hem de yeni versiyonun kullanımını anlatacağı için, bu gece veya yarına kadar beklemeni rica ediyorum.

Ömer, (#) - 4.8.2007

teşekkürler..

Muhammet Sevim » sIFR 3: Kullanım Kılavuzu · Dijital Medya Tasarımı, Web standartları (CSS/XHTML) ve dünyada olup bitenler üzerine…, (#) - 6.8.2007

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

ikra.web.tr, (#) - 27.10.2007

bu güzel paylaşımınızdan dolayı çok teşekkür ederim
buna ihtiyacım v ardı denedim çok uğraştım ama bir sonuca ulaşamadım.
şu aşağıdaki linke bakarak sorunun nerede olduğunu tahmin edebilir misiniz?
http://www.ikra.web.tr/site/sifr.php
acaba hangi aşamada hata yapmışım? teşekkürler…

bu arada szie ulaşabileceğim bir iletişim linki aradım bulamadım…

insomniac, (#) - 11.6.2008

güzel anlatmışsın teşekkürler…denedim yaptım ama bi font için bu kadar işkence çekilmez ya :)

cn_erdem, (#) - 5.9.2008

Merhaba!

Açıklamaların için çok teşekkür ederim yanlız bu sistemin kurulumunu video şeklinde anlatman mümkün mü ? Bu tür karışık gözüken işlemleri pek bilmeyen arkadaşlar için video yapıldığı takdirde çok yaralı olacağı zannındayım ayrıca Herhalde bu konuda yapılmış tek Türkçe video kaynak olma husunda da çok önemli bir görev üstlenecektir.

Teşekkürler…

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

[...] 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 Davidson’ın konu hakkındaki [...]

» 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 Davidson’ın konu hakkındaki [...]

sIFR 3.0 Kurulumu : gurcell technology, (#) - 8.2.2009

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

Ajans, (#) - 15.2.2009

Arkadaşlar ben bu olayı ne yaptıysam çalıştıramadım, acaba sorun sunucudamı bendemi yoksa dildemi çözemedim gitti, hemde herşeyi okuduğum halde..

Muhammet Sevim, (#) - 15.2.2009

Bu yazıyı değil de, aşağıdaki linkten ulaşabileceğiniz yazıdaki talimatları uygulayıp güncel versiyonu bir de o şekilde uygulamanızı öneririm. Eğer local veya gerçek bir sunucudan çalıştırmayı denerseniz script sorunsuz olarak işleyecektir.

http://www.muhammetsevim.com/yazi/sifr-3-kullanim-kilavuzu/

sIFR 3.0 Kurulumu | gurcell technology, (#) - 21.2.2009

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

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

[...] http://www.muhammetsevim.com/yazi/webde-font-ozgurlugu-sifr/ [...]

Türkçe CSS Kaynakları ve Yazıları « WebeGe Blog, (#) - 12.12.2009

[...] Web’de font özgürlüğü: ’sIFR’ [...]

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