öncelikle html kısmını yazalım 2 adet kutu oluşturuyorum.

<div style="margin=auto; width:500px; height:200px; display:block; position:relative;"><!--kapsayıcı kutu-->
 <div>Taşı</div>
 <div>Sepete Ekle</div>
</div>

ve css ile biçimlendiriyorum

.dosya {
 position: absolute;
 top: 5px;
 left: 5px;
 border: 2px solid #C4D7ED;
 background-color: #E1E6FA;
 width: 75px;
 height: 75px;
 margin: 10px;
 z-index: 100;
}
.drop {
 background-color: #e9b96e;
 border: 3px double #c17d11;
 width: 150px;
 height: 100px;
 margin: 10px;
 position: absolute;
 top: 5px;
 right: 5px;
 opacity: 0.7;
 overflow:auto;
}
.droppable-active {
 opacity: 1.0;
}
.droppable-hover {
 outline: 1px dotted black;
}

sonra dosyamıza jquery dosyalarını ekliyoruz

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script src="http://ui.jquery.com/latest/ui/ui.core.js"></script>
<script src="http://ui.jquery.com/latest/ui/ui.draggable.js"></script>
<script src="http://ui.jquery.com/latest/ui/ui.droppable.js"></script>

son olarak da scriptimizi yazıyoruz

<script>

 $(document).ready(function(){
 $(".dosya").draggable({helper: 'clone'});//sürüklenen objenin kopyalanmasi için
$(".drop").droppable({
 accept: ".dosya",// buraya sürükle bırak olayı için eklenecek class lari koyuyoruz
 activeClass: 'droppable-active',
 hoverClass: 'droppable-hover',//kutunun üstüne gelindiği zaman çalıştırılacak class
 drop: function(ev, ui) {
 $(this).append("<br>Eklendi!");
 }
 });
 });
 </script>

dosyamızı görmek için tıklayınız (Link Güncellenmiştir 17.06.2010)

Öncelikle jquery.js dosyasını projemize ekliyoruz

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>

sonrasında html olarak 1 adet div ve 2 link oluşturuyoruz

<a href="#">Kutuyu Aç / Kapat</a>
<div>
 Slide panel kutusunu ister <a href="#">Kutuyu Kapat</a> butonu ile kapatınız isterseniz kutuyu aç butonu ile kapatabilirsiniz
</div>

ve style kodumuzu yerleştirip kabaca bir düzen içinde olmasını sağluyoruz

<style>
body
{
 background:#0f1923;
}
.kutu
{
 width:200px;
 height:200px;
 border:#ccc 1px dashed;
 background:#fff;
}
.butonn
{
 text-decoration:none;
 color:#fff;
 font-weight:bold;
}
.kutu a
{
 text-decoration:none;
 color:#ff9900;
}
</style>

ardından scriptimizi yazıyoruz

<script type="text/javascript">
 $(document).ready(function(){
 $(".kutu").hide() /*açılışta kutumuzun kapalı şekilde olması için gizliyoruz*/

 $(".butonn").click(function(){
      $(".kutu").slideToggle('normal'); /*animasyonu burada gerçekleştiriyoruz normal fast slow şeklinde kullanabiliriz*/
 });
 /* div içindeki kapat butonu eğer toggle şeklinde kullanılmıyacaksa bunu kullanabiliriz*/
 $(".kapa").click(function()
 {
      $(".kutu").slideUp('fast');
 });

 });

</script>

projenin bitmiş halini buradan görebilirsiniz…

• Yapı olarak sadece javascript kütüphanelerini kullanıyor. Bu da hızlı bir yükleme olanağı sağlıyor.
• Sadece kendi dosyalarını kullanıyor bunlar dışında bir dosyaya ihtiyaç duymuyor olması cazip kılıyor.
• Basit bir kullanımı var.
• Javascript dosyanızı oluştururken yazı kalitesini seçerek dosyanızın boyutunun büyük ya da küçük olmasını seçebiliyorsunuz.

Eksik yönleri

css in tüm özelliklerini desteklememesi bu yüzden sıkıntı oluşabilir. Desteklemediği özellikleri  buradan görebilirsiniz

Kullanımı ise

1. js dosyasını sayfaya import edin dosyayı  buradan indirin.
2. Ardından kullanacağınız fontu buraya yükleyip js dosyasına çevirip indirin. Yazı tipini yüklediğinizde Türkçe karakterler için “.. and also these single characters” şeklinde başlayan kutuya şu Türkçe karakterleri girmeyi unutmayın. ğĞçÇöÖıIiİüÜ.
3. Bir üstteki maddeye ek olarak The EULAs of these fonts allow Web Embedding (without Adobe Flash) yazan kutu ile I acknowledge and accept these terms yazan kutuyu mutlaka işaretleyiniz.
4. İndirdiğiniz dosyayı sayfanıza import edin.
   
<script type="text/javascript" src="cufon-yui.js"></script>
<script type="text/javascript" src="NancysHand_500.font.js"></script>
<script type="text/javascript">
Cufon.replace('h1');
</script>
5. Çalışmanızı kaydederken UTF-8 formatında kaydetmelisiniz. 

Yapmış olduğum örnek için tıklayınız. 

sIFR tekniği ile bu sorun ortadan kalkıyor bunu yaparken teknoloji javascript kütüphanesini ve flash ı kullanıyor böylece hem indexlenme sorunu hem de html sayfasının sunucudan isteği azalıyor(5 dosya isteği ) bunu nasılmı yapıyor. Bu çok karmaşık gibi gözüksede çok basit bir uygulaması var. Kısaca bahsedeyim

Bunun için yayınlayan kişide sadece flash yüklü olması gerekiyor çünkü fontu flash dosyasında belirleyip swf olarak servera atacağız.

Javascript dosyasında ufak değişiklikler yapacağız ve işlem tamamdır.

1. Dosyayı http://wiki.novemberborn.net/sifr3/ adresinden indiriyoruz.

2. İndirdiğimiz dosya içindeki flash klasörünü açıp içindeki yazıtipini kullanmak istediğimiz yazıtipi ile değiştiriyoruz.(ben futura seçtim ve swf dosyamın adını futura.swf olarak kaydettim)

3. font stili olarak ne kullanılacaksa onu atıyoruz (bold, normal, italic…)

4.flash da işimizi bitirdikten sonra publish ederken jpeg quality 100 şeklinde ayarlayıp publish edelim.

5.sifr-config.js dosyasında ufak değişiklikler yapılması gerekiyor. Buradaki kodumuzu sifr-config.js dosyasına yapıştırıp düzenleyebilirsiniz.
var futura = {
src: ‘flash/futura.swf’
};
sIFR.activate(futura);
sIFR.replace(futura, {
selector: ‘h1′,//h1 tagında kullanılacak ise
css: [
'.sIFR-root { font-size:24px; font-weight:normal; color:#9f0000; }',
'em { font-style:italic; }',//h1 tagının içinde hangi taglar kullanılacak ise onları yazıyoruz
'strong { font-weight:bold; color:#000; }'
],
wmode: ‘transparent’
});
6.Html kodumuza bazı dosyaları import ediyoruz. Aşağıdaki kodu dosyaları import etmek için kullanabilirsiniz kendi dizin yapınıza göre değiştirmeniz yeterli olacaktır

<link rel="stylesheet" href="css/sIFR-screen.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/sIFR-print.css" type="text/css" media="print">
<script src="js/sifr.js" type="text/javascript"></script>
<script src="js/sifr-config.js" type="text/javascript"></script>

Önizleme: http://www.hamzaerbay.com/ornekler/sIFR/
http://www.hamzaerbay.com/ornekler/sIFR2/

Not: sIFR server a atıldığı zaman sağlıklı olarak çalışıyor

sIFR hakkında yararlı birkaç site

sIFR son sürüm http://dev.novemberborn.net/sifr3/nightlies/

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/

örnek site

http://www.lightweb.pl/