En önemli neden olarak Photoshop taslaklarının »tıklanabilir« olmamasının gösterildiği yazıda, grafik editöründe detaylara harcanan sürenin tamamen kayıp zaman olduğu anlatılmış. Ayrıca bu programda metinlerin normal bir HTML sayfasına göre çok farklı olduğuna da değinilmiş. Daha birçok madde sıralamışlar, tamamına buradan ulaşabilirsiniz.

37signals‘daki bu arkadaşlar farklı bir konuya değinmiş olsalar bile, bu konuya dar bir açıdan baktıklarını düşünüyorum. Hoş, eğer siz de sadece kendi projeleriniz için çalışmaktaysanız, Photoshop’ta detaylarla uğraşmak zaman kaybetmek için en kolay yöntemdir. Bu durumda kağıda çizim yapabilir veya favori text editörünüzle işe koyulabilirsiniz; sonuçta taslağınızı CSS/XHTML’e çevirecek, tüm detayları son olarak orada vereceksiniz.

Fakat müşterileriniz için çalışmaktaysanız, durum yazının yazarlarının bahsettiği kadar kolay olmuyor. Müşteriniz ilk görüşmede de, son konuşmada da birçok detay görmek isteyeceğinden Photoshop’la biraz daha fazla zaman geçirmeniz gerekmekte. Böyle bir durumda müşteriyle önceden görüşmek, ve onun isteklerine göre bir yol izlemek en iyisi. Unutulmaması gereken şu ki, eğer CSS/XHMTL çevirimini siz yapmayacaksanız, Photoshop’la biraz daha haşır neşir olmalı, en küçük detaylara bile inmelisiniz. 

Alman tasarımcı Manuela Hoffmann‘a göre ise, ilk görüşmede kesinlikle birden fazla grafik taslalığının müşteriye sunulmaması gerekiyor. Bu, zaman kaybından başka birşey değilmiş. Bence de :-).

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.

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.

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.

Bağlantı

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.