tarihinde Fatih Hayrioğlu

CSS Sprite yöntemini birçok yerde uyguladım, CSS Sprite tekniği ile ilgili uzunca bir makalede yazmayı düşünüyorum, ama öncesinde küçük bir ipucu yazayım istedim.

CSS Sprite tekniğini kısa açıklarsam sunucu tarafında çok fazla resim isteğini azaltmak için kullanılan sitelerimize hız kazandıran bir yöntem diyebiliriz. Uygulamada kullandığımız resimleri tek bir resim altında toplayıp ilgili alanlara background-position özelliğinden yararlanarak ilgili resimleri atama işidir. Bir background kaydırma yöntemidir işin aslı.

Birçok yerde kullandım bu yöntemi sizlerede anlattım çeşitli makalelerimde, bunlardan bir tanesi PSD’den HTML’e – fanatikmarslar.com Sitesinin Kodlaması II adlı makale.

CSS Sprite tekniğinde sorunlardan bir tanesi hazırladığımız toplu resim üzerinde ilgili elemana atanacak background-position değerlerini bulmaktır.

Yukarıdaki şekilde resmi birleştirdik, bu resimdeki ilgili bölümleri ilgili elemanlara atamak için tek tek background-position değerlerini girmeliyiz. Bunu her eleman için tek tek yapmalıyız. Bu işlem çok can sıkıcı haller alabiliyor bazen, ama burada yardımımıza sağ olsun Firefox’un eklentisi FireBug yetişiyor.

FireBug’ın anında müdahale etme yeteneği sayesinde bizler css sprite resimlerindeki background-position değerlerini çok kolay bir şekilde bulabiliyoruz.

Örneği takım logoları için bir css sprite resmi hazırladık. Bu resimdeki her takım için konum bulmak çok zor olur.

İlk olarak tekrarı engellemek için genel bağlantıya tanımımızı yapalım

a.takimLogo{ 
    display:block; 
    background:url(../images/takim_logolari.gif) right 0 no-repeat; 
    padding:8px 30px 8px 0; 
    color:#0c2b90; 
    text-decoration:underline
}

Daha sonra her takımın logosunun yerini Firebug yardımı ile bulup atayalım. Trabzonspor’un ki ile başlayalım. Resim hareketli gif olduğu için biraz geç yüklenebilir, ama açıklayıcı olması için hareketli gif’i tercih ettim.

div#icerikAlani table td div.logoTrabzon{
	background-position:-3px -107px
}

Yukarı aşağı tuşları yardımı ile bulduğumuz değeri(-107px) background-position değeri olarak tanımlıyoruz.

Buradaki örnek daha kolay isede daha zor sprite uygulama durumlarında konum belirlemek daha çetrefilli olabilir, bu ve benzeri durumlar için Firebug’ın çok büyük yardımı dokunuyor. Bunuda bir ipucu olarak sizlerle paylaşmak istedim.

tarihinde Fatih Hayrioğlu

Jquery ipuçları - 1 Jquery ipuçları - 2 Jquery ipuçları - 3

1 - Mümkünse Class yerine Id kullanmayı tercih edin

jQuery ile kod yazarken bize çok büyük kolaylıklar kazandırır. Bunlardan bir tanesi elemana atanmış sınıfı yardımı ile kolayca seçebilme özelliğidir, ancak burada şöyle bir durum söz konusudur; jquery id ile atanmış elemanları normal javascriptteki gibi getElementById ile yakaladığı için daha hızlı çalışırken normal olarak sınıf ile yakalamalarda daha yavaş çalışacaktır.

Bu nedenle mümkün olduğunca seçicilerde id kullanmaya dikkat edilmelidir. Tabi bazı durumlarda sınıf kullanmak zorunda kalabiliriz o başka.

kaynak: net.tutsplus.com

2 - next() ve prev() kullanımı

Bu özelliklerin kullanımı bazen can kurtarıyor ancak kullanırken dikkat etmek lazım, bazende sorunlara yol açabiliyor. Sonradan eklediğiniz bir eleman sizin next ve prev kabullerinizi mahvedebiliyor

next() : next fonksiyonu bir sonraki elemanı yakalar. Sadece sonraki elemanı yakalar alt elemanlarını yakalamaz.

next fonksiyonu filtreleme özelliği vardır, yani next(‘li.secili’) tanımı ile en yakın bir sonraki secili sınıfı tanımlı li elemanını yakalayabiliriz.

Bir örnek verelim.

<ul>
    <li>Adana</li>
    <li>Ankara</li>
    <li class="secili">İstanbul</li>
    <li>İzmir</li>
    <li>Trabzon</li>
</ul>

Şeklindeki bir html kodundan

$('li.secili').next().css('border-bottom', '1px solid #999');

next() fonksiyonu yardımı ile bir sonraki elemanı yakalayabiliriz.

prev() : prev fonksiyonu bir önceki elemanı yakalar. Sadece önceki elemanı yakalar alt elemanlarını yakalamaz.

prev fonksiyonu filtreleme özelliği vardır, yani prev(‘li.secili’) tanımı ile en yakın bir onceki secili sınıfı tanımlı li elemanını yakalayabiliriz.

Bir örnek verelim.

<ul>
    <li>Adana</li>
    <li>Ankara</li>
    <li class="secili">İstanbul</li>
    <li>İzmir</li>
    <li>Trabzon</li>
</ul>

Şeklindeki bir html kodundan

$('li.secili').prev().css('border-bottom', '1px solid #999');

prev() fonksiyonu yardımı ile bir önceki elemanı yakalayabiliriz.

3 - Üst Eleman Bulma - parent(), parents() ve closest()

parent()

Bir üst elemanı bulma. Geriye bir adet üst eleman döndürür.

$('td.secili').parent().css('border-bottom', '#999');
$('div').parent('.large').css('font-size', '14px');

İlk kod üst elemanı yakalarken, ikinci satırda ise seçme işlemini biraz daha daraltarak .large sınıfı tanımlı olan üst  elmanı yakala diyoruz.

parents()

Belirlenen elemanın tüm üst elemanlarını bulmaya yarar.

$('li').parents().css('background-color', 'red');
$('li').parents(&quot;ul&quot;).css('background-color', 'red');

İlk satır li’nin tüm üst elemanlarını yakalarken, ikinci satır li’nin tüm ul etiketli üst elemanlarını yakalar.

closest()

En yakın üst elemanı bulmak içindir.

$(document).ready(function() {
	$('li.urunler').closest('ul').css('background-color', 'red');
});

HTML

<ul>
    <li>Üst Menü
        <ul>
        <li class="urunler">Ürün 1</li>
        <li class="urunler">Ürün 2</li>
        </ul>
    </li>
</ul>

İçiçe girmiş birçok listede yukarıdaki tanım ‘urunler’ sınıfı tanımlanmış öğenin ilk üst ul elemanını yakalamamıza yardım eder.

4 - Firebug ve console.log ile kodumuzu izlemek

Firebug’ın çalışma hayatımızdaki yerini biliyoruz. jquery ile hata yakalama amacı ile console.log kullanıyoruz. Daha önceleri javascript ile kod yazarken alert fonksiyonun çok kullanırdım. Şimdi aynı işi console.log yapıyor ancak popup çıkarıp bizi rahatsız etmiyor.

var count = 0; while(count < 1000) {
	count++;
	console.log(count);
	setTimeout("takistHesapla";, 1000);
}

yazın ve Firebug’ın console sekmesine bakın. Bu kod Chrome’da da çalışıyor.

Örneği görmek için tıklayınız. Tabi takistHesapladiye bieşy bulamadım diye size bin tane hata verecek oda gayet normal.

Bir uyarı işinizi yayına atarken bu satırı silin yoksa ie’de hata verir.

5 - Animasyon ve Efektleri Geciktirme (delay)

jQuery 1.4 ile birlikte gelen yeni bir özellik olan delay() animasyonlarımıza belli bir süre ara vermemizi sağlat, daha önceleri bu işi yapmak için setTimeout metodunu kullanıyorduk.

$("div").fadeIn().delay(4000).fadeOut();

Örneği görmek için tıklayınız.

seçtiğimiz katmana fadeIn efekti ver ve sonra 4000 milisaniye bekle ve sonra fadeOut efekti ver diyoruz.

6 - has() Metodu

jQuery 1.4 ile birlikte gelen bir başka yeni özellik has() metodudur. Daha önceki sürümlerde :has seçicisi vardı, şimdi has() metodu ile daha kolay yakalama işi yapabileceğiz.

<ul>
<li>list item 1</li>
<li>list item 2
    <ul>
    <li>list item 2-a</li>
    <li>list item 2-b</li>
    </ul>
</li>
<li>list item 3</li>
<li>list item 4</li>
</ul>

Yukarıdaki kodda alt menüsü olan li elemanını yakalamak için bu metodu kullanabiliriz.

$('li').has('ul').css('background-color', 'red');

Örneği görmek için tıklayınız.

Şeklinde altında ul etiketi olan li’leri ki burada bir tane var oda list item 2 içeriğine sahip olandır.

Kaynaklar

tarihinde Fatih Hayrioğlu

Adobe Dreamweaver editör olarak beğenerek kullandığım bir editör. Burada sizlere yeni sürümü ve yeniliklerini anlatmaya çalışacağım ve son olarakta beklentilerimi ve yeni sürümün bunları ne kadar karşıladığımı yazacağım.

Yeni sürüm ile birlikte gelen yenilikler ;

CSS Inspection

Aslında Live View özelliği bir önce sürümde de mevcut ancak bu sürümden tam anlamıyla geliştirilmiş bu özellik Inspect butonu yardımı ile gerçek zamanlı kodumuza müdahale edebiliyor, düzenleme yapabiliyoruz.

Bu özelliğe biz pek yabancı değiliz Firefox’un FireBug eklentisi bize bu imkanı sağlıyor aslında ve daha fazlasını sağlıyor. Bir önceki sürümde bunu tam ekleyemediklerini söylemiştik, bu sefer tam anlamıyla eklenmiş.

En büyük yeniliklerden birisi bu olmuş.

Adobe BrowserLab

Adobe firmasının daha önce açtığı bu çevirimiçi tarayıcı test etme aracı bu yeni sürüm ile birlikte programdan direk erişilebilir hale getirilmiş. Örnek sayfanızı direk siteye gönderip test edebiliyoruz.

Ben aslında bu konuda pek tatmin olmadım. Çünkü BrowserLab zaten yeterli bir araç değildi. IETester tarzı bir test aracı daha makbul olacak bir araç olabilirdi.

Her şeye rağmen bir artıdır ama eksik olduğu kesin.

CSS Aktik/Pasif

Mevcut kod üzerinde gezerken elemanlara atanan css özellikleri bir tıklama ile aktif ve pasif hale getirme özelliği.

FireBug ile alışık olduğumuz bu özellik yeni sürüm ile birlikte kullanıcının kullanımına sunulmaktadır. Güzel bir özellik.

CSS başlangıç sayfaları

Bir önceki sürüme göre daha fazla hazır sayfa yapısı imkanı sunuyor yeni sürüm bizlere.

Ben bu özelliği kullanmasam da kullananlar için artı bir özellik.

HTML5 ve CSS3 Desteği

Program ilk çıktığında beraber çıkmaması çok büyük bir eksiklikti, ancak sonradan bir güncelleme ile bu paketi eklemeleri hatalarını çok çabuk anlamları güzel oldu. HTML5 ve CSS3 tanımlarını otomatik tamamlama ile ekleyebliyoruz artık.

Hele CSS3’te farklı tarayıcılardaki bu önek karmaşasına bir çzöüm olması güzel oldu.

PHP Tabanlı CMS Desteği

Bu sürümdeki en büyük atılım bence bu dur. PHP tabanlı CMS’leri WordPress, Drupal ve Joomla tam anlamıyla düzenleme imkanı sağlıyor bu yeni sürüm.

Bu CMS’leri geliştirenler için biçilmiş kaftan bence yeni sürüm.

Kolay entegrasyon, düzenleme, dosya upload etme vb. özellikleri ile tam bir CMS editörü olmuş Dreamweaver. Dinamik yapılı bu CMS’leri tam anlamıyla bir statik sayfa gibi kolayca değiştirebilme ve test edebilmeyi sağlıyor bizlere. Ayrıca otomatik tamamlama özelliği ile çok büyük kolaylık sağlıyor.

PHP özel sınıfı kod ipuçları

PHP ile oluşturulan özel sınıflar içinde otomatik tamamlama özelliği eklenmiş. PHP’ye yönelik bir editör olma eğilimi sergilemiş yeni sürümde Dreamweaver, bence mantıklı Visual Studio’yu geçemeyeceğini anlayınca PHP’ye yönelmiş.

Dinamik İlişkili Dosyalar

Bir önceki sürümde statik sayfalar için sunulan ilişkili dosyalar özelliği şimdi dinamik dosyalar içinde eklenmiş. Dreamweaver üzerinden PHP yaznalar için çok güzel bir özellik bence.

SVN(Subversion) Desteği Geliştirilmiş

Daha öncedende sunulan SVN(Subversion) özelliği bu sürüm ile birlikte bayağı bir geliştirilmiş. Diğer SVN programları ile uyum ve çerçevenin geliştirilmesi bu özelliği daha kullanılabilir yapmış.

Business Catalyst® ile uyum

Programlamaya gerek kalmadan güçlü çevrimiçi işletmeler oluşturmak için Dreamweaver ile Adobe Business Catalyst® hizmeti uyumu sağlanmış.

Basit Site Kurulumu

Mevcut site kurulumu penceresi biraz daha geliştirilerek kullanıcıya daha fazla seçenek ve kolaylık sunulmuş. Site kontrolünü Dreamweaver üzerinden sağlayanlar için güzel bir gelişme.

Widget Browser Özelliği

Bu özellik bize diğer insanların geliştiridiği yapıları sitemize ekleme imkanı sunuyor. Güzel bir özellik eğer uygulama sayısı artarsa gayet kullanışlı bir özellik

Özellik hakkında daha fazla bilgi için  http://tv.adobe.com/watch/learn-dreamweaver-cs5/using-the-widget-browser/ videoyu izlemenizi tavsiye ederim.

İlişkili Dosyaları Filtreleme

Dreamweaver çalıştığımız doküman ile ilgili dosyalarıda gösteriyor, yeni sürüm ile birlikte dinamik dosyalarıda göstermeye başlıyor. Bu bazen karmşaya neden oluyor, bunu içni bir çözü üretilmiş. Filtreleme menüsünden itediğimiz dosya tipini veya dosyaları filtreleye biliyoruz. Bu sayede ilişkili dosyaları daha düzenli bir hale getirme imkanımız oluyor.

Sonuç

Yeni sürümün CSS ve PHP üzerine yoğunlaşmış bir sürüm olmuş. PHP CMS geliştirenler için bir çok yenilik var. CSS için getirilen yenilikler ve daha fazlası zaten mevcut kullanımımda vardı benim. Gerek FireBug ve gerekse IETester. Benim asıl beklentim büyük bir ivme kazana javascript kütüphaneleri hakkında bir gelişme idi. Örneği jquery kütüphanesi ile çok çalışan biri olarak jquery otomatik tamamlama özelliği olması benim çok sevindirirdi, ne yapalım bundan sonraki sürümleri bekleyeceğiz artık bunun için.

Yukarıda belirttiğim gibi sitelerimiz farklı platformlarda ve tarayıcılarda test için AdobeLabs yeterli gelmiyor bence daha fazla gelişmiş bir araç ile bu açık kapatılmalıdır.

Kalın sağlıcakla.

Kaynaklar