Flash dosyalarını html sayfalarımıza eklemek baştan beri tam oturmamış
bir konudur. Farklı tarayıcılar için farklı kod blokları yazılması,
flash olmaması durumu için hazırlanan resimler veya yazılar vs. Ancak bu
sorunlar yetmiyormuş gibi birde İnternet Explorer’ın ActiveX güncellemesi sonrası yeni sorunlar çıktı.
O zamanı(Mart-Nisan 2006) hatırlıyorum Turkline’da çalışıyordum ve
Microsoft’un Eolas ile lisans sorunları nedeni ile bir gün için tüm
flash içeren siteleri kontrol etmemiz gerekmişti. Çözümünü bulup tüm
dosyaları değiştirmemiz gerekmişti. Hey gidi günler.
Bu sorundan önce genelde Dreamweaver ki o zamanlar Macromedia
Dreamweaver idi, Dreamweaver ile açıp swf ekle diyorduk ve o kendi
kodunu ekliyordu.
Tabi internet explorer sorunu sonrası bu işi javascript ile yapmaya
başladık. Bir çok yöntem çıktı bu işi javascript ile yapan.
Eskileri bırakıp şimdiki zamana gelelim. Ben html sayfalarına flash(swf)
dosyaları eklemek için SwfObject kullanıyorum. Bir çok alternatifine
göre avantajlı.
Avantajlarını sıralarsak;
Diğer flash kodlarına göre daha optimize ve esnek
Herkes için tek çözüm sunuyor. HTML, javascript ve flashçılar için
Web standartlarına uygun kod üretiyor ve sorun çıktığında alternatif
çözüm sunuyor.
Çok basit bir javascript kodu var
Kullanımı kolay
Boyutu 10kb’dan daha az.(Gzip hali 3.9kb)
SwfObject’in 2.2 sürümü çıktı son olarak. İşi iyice standart haline
getirmişler ve scriptsiz çalışan bir metot daha eklemişler. Statik ve
Dinamik kod diye iki kısma ayırmışlar kodu.
Kaynak kodları Google Code‘dan indireceğiz. İndirdiğimiz dosyada
expressInstall.swf, swfobject.js, index.html,
index_dynamic.html, test.swf dosyaları yer alır. Ayrııca src
klasörüde yer alır.
Statik Kod ile Flash Dosyalarını Eklemek
SWFObject’in önceki sürümlerinde olmayan bu metot yeni sürüm ile
birlikte gelmiştir. Bu kod eski(ie eolas lisans sorunu öncesi) statik
metoda benzer bir yapıya sahiptir. Bu kod sayesinde javascript desteği
olmaya durumlar için kod üretmiş oluyoruz.
Bu metodun avantajı object ile eklenen kodların daha performanslı sonuç
verecektir. Dezavantajı ise eski tarayıcısı olan kullanıcıların gri
kenarlık sorunu ve tıklama sorunu yaşamalarıdır. Microsoft daha sonra bu
hatayı düzeltti ise de hala bu güncellemeyi yapmayan kullanıcılar
vardır.
Kodu iki kısıma ayıralım. İlk head içerisindeki javascript kısmı ve body
içerisindeki html kısmı
head içerisindeki javascript kısmı
registerObject fonksiyonuna html içindeki elemanın id’sini(myId), flash
sürümünü ve flash olmayanlar için yüklemeye yönlendiren dosyanın
adı(expressInstall.swf)
Kodun ikinci kismina gelirsek body içerisine yazılan html kodumuz
var
Bu kodumuz iç içe object elemanlarından oluşur. Ayrıca ie sürümlerinin
yorumlanması için ie yorum kodları yer alır.
id(id=”myId”) swfobject ile yakalamamız için gereklidir.
width - swf dosyasının genişlik değeri
height - swf dosyasının yükseklik değeri
Diğer atamalar sabittir. Ayrıca ek özellikler eklemek istediğimizde(örn:
flashvars, transparent vd.) etiketi ile bunları eklemeliyiz.
Ayrıntılı bilgi için tıklayınız
Dinamik Kod ile Flash Dosyaları Eklemek
Dinamik yöntem ile kod ekleme yöntemi swfobject’in eski sürümleri ile
aynıdır. Bu yöntem daha basit uygulanabilirliği vardır. Ayrica dinamik
olarak eklendiği için javacscript ve ajax ile müdahale imkanı daha
kolaydır.
Bu yöntem kullanıldığında internet explorer’daki tıklama ve gri kenar
sorunu olmayacaktır.
İndirdiğimiz dosya içerisindeki index_dynamic.html bu kodlama
örneğini içerir.
Bu kodumuzda head içindeki ve body içindeki kısımları ile ikiye ayrılır.
body içerisindeki kısmı
Dinamik kodlama ile flash(swf) dosyalarının eklenme mantığı şöyledir;
bir eleman oluşturulur ve bu elemana dinamik olarak özellikleri atanır
ve sayfa içerisindeki id tanımlı alan ile bu içerik yer değiştirilir. Bu
şöyle bir avantaj sağlıyor bize eğer flash yok ise bu eleman içerisine
yazdığımız içeriği kullanıcı görüyor, flash var ise de flash görünüyor.
head içindeki kısımları
swfobject.js dosyasını ekliyoruz. Sonrada html içerisine ekleyeceğimiz
swf dosyasının bilgilerini giriyoruz. Sırası ile incelersek
test.swf - Eklenecek swf dosyasının yolu ve adı, burada aynı
klasörde olduğu için sadece adı yazılmıştır.
“myContent” - body içerisindeki içine eklenecek elemanın id’si
“300” - swf dosyasının genişliği
“120” - swf dosyasının yüksekliği
“9.0.0”- flash sürümü
expressInstall.swf- flash olmayanlar için yüklemeye yönlendiren
dosyanın adı
Dinamik yöntemin avantajlarını sayarken kolay kullanımı olduğunu
söylemiştik. Mesela yeni parametre eklerken kodumuzu söyle değiştirmemiz
yeterli olacaktır
İlk başta değişkenleri tanımlayıp sonra embed kodu içine ekliyoruz. Bir
başka şekli ile
şeklinde de yazabiliyoruz. Parametre olarak ben genelde ya flashvars ile
xml yolunu yazıyorum, yada wmode özelliğini yazıyorum. Diğerlerini pek
kullanmıyorum. Bana eski sürümdeki parametre ekleme şekli daha kolay
geliyordu açıkçası.
wmode özelliği
Yeri gelmişken wmode özelliğinede değinelim. window , opaque ve
transparent özelliklerini alıyor. Ben genelde bu özelliği diğer
elemanlar flash altında kalınca kullanıyorum. window hiç kullanmadım,
eskiden transparent kullanıyordum ancak transparent kullanınca flash çok
yavaşlatıyor sayfayı bu nedenle opaque kullanıyorum. Tabi eğer flash
zemini saydam olmayacak ise ki genelde olmuyor.
Sonuç
SwfObject 2.2’in yanında google code içerisinde “SWFObject 2 HTML and
JavaScript generator v1.2” yukarıdaki kodu üretmek için bir sayfa
hazırlanmış işi daha kolay hale getiren bir araç.
Genel hatları ile bir web sayfasına swf dosyasını bu yöntem ile
ekleyebiliriz. Bunun dışında da javascript ile yapılmış bir çok yöntem
var, jquery eklentisi var. Ancak ben swfobject’i kullanıyorum. Sizlerede
kullanmanızı öneriyorum. Kendinize iyi bakın. Görüşmek dileğiyle.
Hoşçakalın.
Son zamanlarda bir çok yerde gözüme çarpan bir menü tipi var; iki
kolonlu, üç kolonlu vb. menü tipleri. CSS ile en optimum şekilde bu
menüyü nasıl yapabilirim diye araştırdım ve sizlerle paylaşmaya karar
verdim. Konuyu inceledikçe çok kolonlu yapıların sadece menülerde değil
site içeriklerinde de kullanabileceğimizi gördüm. İlk olarak yapının
nasıl olduğunu göstereceğim, sonrada menüde nasıl kullanıldığını.
Web mecrası geliştikçe ihtiyaçlarımızda gelişiyor ve ihtiyaçlarımızı
karşılayacak metotlar arıyoruz. Çok kolonlu yapılarda böyle bir metot
aslında. Sitemizi kullanan insanlar genelde menü vb. erişim ve gezinti
araçlarını kullanarak sitemizi dolaşırlar. Menü gibi gezinti araçları
site yapısı düşünüldüğünde sayfamızın en önemli alanlarıdır. Bu alanları
en iyi şekilde tasarlanması ve düşünülmesi sitemizi daha kullanışlı ve
etkin hale getirecektir.
Bu düşünceler ile bir çok web site geliştiricisi çeşitli yöntemler
denedi ve denemeye devam ediyor. Kullanılabilirliği en üst düzeye
çıkarmak için çeşitli metotlar üretilmektedir. Bence bunlardan en
güzellerinden biridir çok kolonlu menüler.
Yatay ve dikey örneklerimiz olmasına karşın genelde yatay ve üst
menüdeki örnekler daha kullanışlıdır. Kullanıcıya uzun menü alanlarına
erişebilmek için kaydırma çubuğunu kullanırlar buda bizim için bir
dezavantajdır. Çok kolonlu menüler bu gibi durumlardan bizi kurtarır.
Sitemizi daha derli toplu gösterir.
Çok kolonlu menü örneklerini incelediğimizde belli başlı 2-3 yöntem ile
oluşturulduğunu görürüz. Bunları aşağıda inceleyeceğiz. Projelerimizde
çoklu menü kullanmaya karar verdiğimizde hangisi projemize uygun ise onu
kullanacağız.
Ayrıca javascript yardımı ile ve css3 yardımı ile de çoklu menü
oluşturabiliriz bunlarıda göreceğiz.
Burada anlatacağımız metotlar sadece menülerde kullanılmaz, site
içeriğindeki benzer yapılar içinde aynı metotlar kullanılabilir.
1. Yol: float uygulanmış liste ögeleri
Bu yöntemde ul elemanına sabit bir genişlik verip, her bir li
elemanına float ve sabit genişlik tanımı yaparak yan yana dizeriz.
Çok kolonlu yapılarını oluşturmak için en basit metottur.
Dezavantajı listelemek istediğimiz ögeleri yan yana dizer. Normalde
istenen birinci kolonu bitirdikten sonra ikinci kolona geçmesidir.
Çok kolonlu yapıları oluşturmak için diğer bir yöntemde ikinci ve üçüncü
kolonlara sağdan ve üstten margin değerleri vererek yapmaktır. Bu
metodun avantajı kolon dizilişinin istediğimiz gibi olmasıdır. Bu
metotta çoğaltacağımız kolonlara ek sınıflar eklemeliyiz.
Yukarıdaki kodda ilk li tanımımız bir önceki metot ile neredeyse
aynıdır. Tek farklı olan kısım position:relativetanımıdır, bu tanım
ie’deki sorunları gidermek için eklenmiştir. Her kolonun soldan mesafesi
margin-left değerleri tanımlanarak sağlanmıştır. İkinci ve üçüncü
kolonları yukarı çekmek içinde menü yüksekliği kadar eksi margin değeri
verilerek yukarı çekilmiştir.
Margin yönlendirmeleri ile menü oluşturmak pek mantıklı değildir. Esnek
olmayan bu yöntem menü ekleme ve çıkarmalarında osurn çıkarır.
3. Metot: Kapsayıcı katman ile bölmek
Bu metotta çoklu kolonlara ayrılacak listeler kapsayıcı katmanlar ile
ayrılarak her bir kolon oluşturulur. Bu metotta yükseklik ile ilgi bir
şey yapmaya gerek yoktur ve esnek bir yapıya sahiptir.
Diğer metotlara göre avantajlı görünen bu metodun da kendince sorunları
vardır. Menü yaparken kapsayıcı bir katman(div) atayıp bu katman içinde
ul’leri float ve genişlik vererek yan yana koyarız.
İlk menü kısmını ilk yaptığımız ile aynı kodlara sahip olacaktır.
Daha sonra kapsayıcı katman tanımlarını yapıyoruz. Tabi öncesine
kapsayamama sorunu kodunu ekleyerek. Kapsayamama sorunu kodlarını başa
ekliyoruz çünkü bu kısmı sayfa normal gösteriminde gizlememiz gerekiyor.
Üst menüde en sağdaki menü elemanının altında açılan menü sağ doğru
değilde sola doğru açılacak, bunun için
Üç kolonlu yapıyı oluşturmak için katman içindeki ul’lere genişlik ve
float tanımı yapıyoruz.
üst menülerin üzerine gelince açılması için
ie6 için javascript kodumuzu yazıyoruz. Yukarıdaki kodun aynısı.
Farklı tarayıcılar için yazılan bu kod maalesef ie ve opera’nın desteği
olmadığı için uygulaması şimdilik yok.
5. Metot: Javascript yardımı ile
Aslında bu yöntem bir önceki metodun tamamlayıcı bir metodudur.
Bu metotta css3 column-count özelliği ile yine css ile kodu yazacağız,
javascript ile de desteklemeyen tarayıcılara uyumlu hale getireceğiz.
Bu javascript kodunu csscripting.com sitende yayınlanmış, ancak bu
site yayında değil cvwdesign.com sitesinde kodu buldum. Açıkça
söylemek gerekirse bunun dışında çalışan javascript kodu bulamadım.
Bu kodu kullanırken css kodunuzu harici kullanmalıyız aksi halde kod
çalışmıyor.
Bu javascript dosyasını ekleyince css3 aşağıdaki özelliklere karşılık
gelen özellikleri
column-count
column-width
column-gap
column-rule
destekliyor. Mevcut açık kodun boyutu fazla gelince çevrimiçi yui kompresor ile javascript dosyasını sıkıştırdım. Gayet güzel bir oran
ile dosya boyutunu 37 kb’dan 19 kb’a kadar düşürdüm.
Bazen kullandığım programların alternatiflerini araştırıyorum. Amacım
eğer daha güzel ve daha kullanışlı özellikleri varsa onlardan
yararlanmak.
Opera 10.50 çıkınca bir inceleyeyim dedim. Gayet hoş, güzel, hızlı.
Birde beni Firefox’a bağlayan en büyük etken olan FireBug’ın Opera’daki
alternatifi DragonFly’ı inceleyeyim dedim.
DragonFly ilk çıktığından buyana bayağı bir yol kat etmiş açıkçası.
Aslında FireBug’ı taklitten başka bir şey değil ama olsun oda bir
marifet. Microsoft gibi bir firma bile beceremediğine göre büyük bir şey
olsa gerek.
DragonFly gerçekten güzel. FireBug’a alternatif bir kaç görsel
güzellikleri var.
Gelelim küçük ipucumu yazmama neden olan kısıma. FireBug’da beni
cezbeden şey, ayrıntılarında bir çok avantajın gizli olması. Bunlardan
biri seçtiğimiz elemanı etkilyen tanımların hangi doküman içinde yer
aldığını göstermesi ve hangi satırda olduğunu belirtmesi. Belki küçük
bir ayrıntı ama benim çok işime yarıyor. Hemde çok.
4-5 ay önce ben css kodlarımı her tanım bir satıra gelecek şekilde
yazıyordum. Sebebi çok açık kodların okunabilirliği artıyordu böylece.
Sonra fark ettim ki ben kodları okumuyorum artık FireBug ile yakalıyorum
ve satır numarasından ilgili dokümanı açıp müdahele ediyorum. Bununda
etkisi ile her satırda bir tanım yerine her satırda bir seçici şeklinde css dosyalarımı yazmaya başladım ve bu bana çok büyük bir yer
kazandırdı.
Evet bazı küçük özellikleri fark etmesekde bize çok büyük faydalar
sağlayabiliyor.
Sağol FireBug. Sen olmasan bu iş gerçekten zor olurdu.