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.
- Buraya tıklayarak sIFR’in 2. versiyonunu indirin.
- Dosyayı arşivden çıkardıktan sonra sifr.fla dosyasını açın.
- Program tamamen açıldıktan sonra ortada görülen beyaz çalışma alanına çift tıklayın.
- ‘Don’t remove this text’ yazısı belirdikten sonra, bu yazıya iki kez tıklayın.
- 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.
sIFR-print.cssvesIFR-screen.cssdosyalarını sayfalarınıza ekleyin.sifr.jsadlı javascript dosyasını sayfanıza ekleyin;
- Sakın sıkılmayın, nerede bitiyor :)
- 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> - (tam kodu zip dosyasından çıkan ‘documentation’ klasöründen alınız.)Burada
sFlashSrckodu 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. - CSS dosyamızda bir headline oluşturuyoruz, örneğin;
h1 {Bu headline’ı HTML dosyamızda istediğimiz yere ekliyoruz, bu sIFR tarafından değiştirilecek olan yazımız olacak.
font-size: 16px;
font-family:'Lucida Grande', 'Lucida Sans Unicode', Arial;
color:#FFFFFF;
font-weight:normal;
}<h1>İşte bu kadar kolay</h1> - Son olarak ’sIFR-screen.css’ dosyasında headline’ı oluşturup işlemi tamamlıyoruz.
.sIFR-hasFlash h1 {}Burada visibility: hidden; kodunda bir değişiklik yapmamaya dikkat edin.
visibility: hidden;
font-size: 16px;
text-align:center;
- 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.
Yorumlar
27 kişi yazı hakkındaki fikrini belirtmiş.
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…
Abdullah Dağlı, 21.1.2006 tarihinde yazmış.
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.
Muhammet Sevim, 21.1.2006 tarihinde yazmış.
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… :)
Abdullah Dağlı, 21.1.2006 tarihinde yazmış.
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 :)
Muhammet Sevim, 21.1.2006 tarihinde yazmış.
:) bunu kullanacağım sağol bu yazın ve yardımların için…
Abdullah Dağlı, 21.1.2006 tarihinde yazmış.
evet çok teşekkürler yazıda çok güzel ve anlaşılır olmuş. ilk denememde becerdim :)
Erhan BAYRAK, 20.3.2006 tarihinde yazmış.
bir gün bunun yapılacağını biliyordum!
kullanmayı planlıyorum, teşekkürler.
oky, 30.5.2006 tarihinde yazmış.
çok anlaşılır açıklanmış ama uzun iş gibi geldi bana.
esatergun, 14.6.2006 tarihinde yazmış.
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.
skykhan, 19.6.2006 tarihinde yazmış.
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…
Mesut Murt, 6.7.2006 tarihinde yazmış.
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 ;)
yakuter, 21.7.2006 tarihinde yazmış.
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
Bora Dan, 20.8.2006 tarihinde yazmış.
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, 30.8.2006 tarihinde yazmış.
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?
Ömer Sinan Ağacan, 31.8.2006 tarihinde yazmış.
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
Sanalmanyak, 31.10.2006 tarihinde yazmış.
Merhaba,
Bu sayfa üzerinden sorununuzun çözümün ulaşabilirsiniz. Kolay gelsin.
Muhammet Sevim, 31.10.2006 tarihinde yazmış.
yapamadım desem :( abi sen bunun türkçeleşmiş halini yollasan çok mu olurum:S
Sanalmanyak, 1.11.2006 tarihinde yazmış.
[…] 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 […]
sIFR İle Güzelleşelim « En iyi Blog SiteLeri, 7.11.2006 tarihinde yazmış.
[…] Web’de font özgürlüğü: ’sIFR’ […]
Türkçe CSS kaynakları | Blog ve Wolkanca - işimiz gücümüz blog!, 15.2.2007 tarihinde yazmış.
Ç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 tarihinde yazmış.
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
code64, 11.4.2007 tarihinde yazmış.
hocam 6. adındaki dosyaları nereye ve nasıl ekleyebiliriz.
Ömer, 4.8.2007 tarihinde yazmış.
@ö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.
Muhammet Sevim, 4.8.2007 tarihinde yazmış.
teşekkürler..
Ömer, 4.8.2007 tarihinde yazmış.
[…] 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 […]
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 tarihinde yazmış.
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…
ikra.web.tr, 27.10.2007 tarihinde yazmış.
güzel anlatmışsın teşekkürler…denedim yaptım ama bi font için bu kadar işkence çekilmez ya :)
insomniac, 11.6.2008 tarihinde yazmış.
E-posta adresiniz hiçbir zaman yayınlanmaz. Temel HTML metin şekillendirilmesi izinlidir.