‘flash’ Etiketi Arşivi
sIFR
Merhaba arkadaşlar. Bu yazımda size jQuery’ nin sayısız nimetlerinden birisi olan sIFR tekniği hakkında bilgi vereceğim.
Öncelikle sIFR nedir ona bakalım?
sIFR jQuery eklentilerinden birisi ve özelliği web sitelerinizdeki metinleri flash tabanlı olarak istediğiniz yazı tipine çevirmenize yarıyor.
Peki jQuery nedir?
jQuery bir Javascript kütüphanesi. Bu kütüphane aracılı ile çok basit şekilde web sitelerinizde çok güzel uygulamalar yapabilirsiniz. Yazımı kolay ve kısadır.
sIFR’ i kullanabilmemiz için gerekli dosyalar nelerdir?
- jQuery kütüphanesi - jquery-1.2.1.pack.js
- jQuery Flash eklentisi - jquery.flash.js
- jQuery sIFR eklentisi - jquery.sifr.js
- Embed (sanırım Türkçesi içine gömmek oluyor) edeceğimiz yazı tipini hazırlayacağımız fla dosyamız - sifr.fla
- fonts dizini
Tüm bu dosyaları ve örnek dosyayı buradan indirebilirsiniz.
Adım 1 - Yazı Tipini Embed Etme (Flash içine gömme)
zipli dosyamız içinden çıkan sifr.fla isimli dosyamızı flash programı ile açın. İç içe gömülü movieclipler göreceksiniz. Metin kutusunu görünceye kadar moviecliplerin içine girin. Karşınıza örnek bir metin gelecek. Orada bulunan metni seçin ve değiştirmek istediğiniz yazı tipini seçerek metnin yazı tipini değiştirin. Değişikliği yaptıktan sonra metin ayarlarının bulunduğu yerde “Embed” isimli bir düğme göreceksiniz işte o düğmeye tıklayın. Karşınıza gelen pencerede “Basic Latin (95glyphs)” seçin ve aşağısında bulunan “Include these characters” isimli kutucuğa şunları ekleyin; “ŞşİiÖöÇçÜüIıĞğ” (tırnaklar olmadan ekleyin). Bu yaptığımız işlem şunun içindir; seçtiğimiz yazı tipi Türkçe karakterleri desteklemiyor ise buraua girdiğimiz karakterleri de almasını sağlayacağız.
Bu işlemleri yaptıysanız eğer son olarak ctrl+enter tuşları yardımı ile swf dosyanızı oluşturun. Bu dosyayı kendi belirleyeceğiniz bir dizin içine atın. Ben fonts olarak ayarladım ve fonts dizini içine attım.
Adım 2 - Javascript dosyalarını tanıtmak
zip dizini içinden çıkan
- jquery-1.2.1.pack.js
- jquery.flash.js
- jquery.sifr.js
dosyalarımızın yolunu <head></head> etiketleri arasında göstererek tanıtın.
Adım 3 - jQuery tetikleyicisini eklemek
Bildiğiniz gibi javascript kodları bir tetikleyici kod satırı ile çalışmaktadır işte jQuery’ de tetikliyici kod bloğu da şu şekilde olmaktadır;
$(document).ready(function(){
// Your code here
});
Şimdi de sIFR için kullanacağımız kodu yazalım
$(function(){
$.sifr({path:'fonts'});
$('h3.KadirGunay, p.KadirGunay').sifr({font:'NeoSans'});
});
Burada dikkat etmemiz gereken şu; $(’.KadirGunay’).sifr({font:’NeoSans’}); bu kısımda .KadirGunay olarak geçen kısım CSS dosyamızda KadirGunay sınıfına atadığımız özellikleri alacaktır ve yine aynı şekilde KadirGunay sınıfındaki değişkenleri sIFR eklentisi ile belirlediğimiz yazı tipine değiştirecektir.
Hepsi bu kadar arkadaşlar 
www.maylo.com.tr
www.maylo.com.tr
Lila Kağıt ürünlerinden olan Maylo markası için çalıştığım ajans Ping Dijital’ in tasarladığı Maylo ürünü resmi web sitesi. Proje dahilinde benim görev aldığım alanlar;
- XHTML
- CSS
- Flash CS3
- jQuery
Sitede Maylo ürünü ile ilgili detaylı bilgilerin haricinde, oyunlar, pratik bilgiler, yemek tarifleri ve reklam filmlerini de bulabilirsiniz.
www.lilakagit.com
www.lilakagit.com
Çalıştığım firma Ping Dijital’ in Lila Kağıt için tasarladığı .net platformunda hazırlanan ve VB.Net ile yazılan Lila Kağıt resmi web sitesi. Bu proje evresinde benim yaptığım alanlar;
- XHTML
- CSS
- Flash Animasyonlar (Markalarımız alanında bulunan Maylo-Sofia-Nua)
- jQuery
CSS + Mootools ile Kayan DIV’ ler
CSS’ in güzelliği ile Mootools’ un kullanılabilirliği birleştiği zaman ortaya çok güzel işler çıkıyor. İşte onlardan birisi de farenizin konumuna göre kayan divler Aynı flashda paralax mantığı ile hareket eden bir sistem.
css ve mootools ile yapılmış kayan div örneği
Bu sistemi yapmak çok basit arkadaşlar. Bunun için öncelikle mootools.svn isimli javascript dosyasına ihtiyacımız var. Buradan indirebilirsiniz. Daha sonra ise normal bir html sayfası açıp şu kodları giriyoruz;
<div id="icerik">
<div id="kayanAlan">
<div class="bolum">
Bölüm1
</div>
<div class="bolum">
Bölüm2
</div>
<div class="bolum">
Bölüm 3
</div>
<div class="bolum">
Bölüm 4
</div>
<div class="bolum">
Bölüm 5
</div>
</div>
</div>
icerik ID’ sine sahip alan genel alanımız, kayanAlan ID’ si içeriğimiz olduğu ve faremizin hareketi ile kayan alan, geri kalan alanlarımız ise bolum sınıfı ile tanımlanmış içerik alanlarımız.
Şimdi bu alanlarımızın CSS kodlarını yazalım;
Devamını Oku »
www.zenaresort.com.tr
www.zenaresort.com.tr
5 yıldızlı Zena Resort için hazırladığım ve 5 dilde yayın yapan resmi internet sitesi.
- Tasarım
- Flash Intro
- XHTML + CSS yazılımı
- Dinamik Rezervasyon Formu
- jQuery ile güçlendirilmiş İletişim Formu