19 Eylül Çarşamba ´12   —   4 Yorum
Javascript alert'in tarayıcılara göre farklı pencere şekillerinde çizdirildiğini biliyorsunuz. Sadece farklı pencere şekilleri değil aynı zamanda içinde sistem fontu kullanılması, pencere başlığına veya onay tuşunda yazan yazıya müdahale edilememesi veya sayfanın çalışmasını durdurması gibi engelleri olduğunu zaten biliyorsunuz.

Şimdi gelelim çok basit bir kullanımıyla
alert('Mesajınız başarıyla iletildi. En kısa sürede cevaplamaya çalışacağım.');
şeklinde ürettiğiniz onay/hata/mesaj kutusunu



çok benzer kullanımla
alertf('<h3>Mesajiniz başarıyla iletildi.</h3> En kısa sürede cevaplamaya çalışacağım.\
<br /><br /> Bu sırada <a href="/blog">blogumu</a> inceleyebilirsiniz.');
şeklinde kullanabileceğiniz daha zengin içeriğe sahip bir kutuya



çevirmeye.

Gereksinimler

Projenizde jQuery kullandığınızı varsayıyorum. jQuery ile kullanabileceğiniz hatta belki halihazırda kullanmakta olduğunuz lightbox kütüphanesi olan fancybox'u kullanarak basit bir javascript alert fonksiyonu hazırlayacağız. fancybox yerine kendi lightbox kütüphanenizi veya jquery dışında kullandığınız framework'ü de kullanabilirsiniz. Aşağıda kodu doğrudan vererek açıklayacağım.
function alertf(html){
	if (arguments[1]) closehref = arguments[1];
	else closehref = 'javascript:$.fancybox.close();';

	contentHTML  = '<div style="text-align:center; font-size: 18px; min-width: 200px; margin: 20px 40px;">'+ html +'</div>';
	contentHTML += '<div style="text-align:center;"><a href="' + closehref + '" class="button">Tamam</a></div>';

	$.fancybox({
		content: contentHTML
	});
}
Hem alert fonksiyonuna yakın olması hem de "alert fancy" yani süslü/havalı mesaj kutusu anlamına geldiği için de "alerf" adında bir fonksiyon yazarak, zorunlu tek parametre tanımlayacağız. Zorunlu olan tek ve ilk parametre mesajınızın içeriği olacaktır. Bu parametre HTML de olabilir düz metin de olabilir.

Her lightbox kütüphanesinin, bir şekilde sadece javascript çağrısı yapılarak bir kullanımı vardır. fancybox'un bu şekildeki kullanımı için, basitçe $.fancybox fonksiyonu çağrılıp içeriği "content" parametresiyle belirtiyoruz.
$.fancybox({
	content:"Merhaba dostlar"
});
alertf fonksiyonunda aslında basitçe içinde mesaj ve buton olan bir lightbox kutusu çizdiriyoruz. "button" sınıfıyla da link olarak tanımlanan elementi buton görüntüsüne çeviriyoruz. Bunun için herhangi bir css buton stili yeterli olacaktır. Mesaji çevreleyen div'i, stillerini, butonu temsil eden linki ve onu çevreleyen div'i ve stillerini javascript fonksiyonumuzda string olarak kodluyoruz. Sonrasında zaten fancybox ile ekrana çizdirmek kalıyor.

Fonksiyonun ilk satırlarında dikkatinizi çekeceği üzere, basit bir kontrolle, bu fonksiyon cağırıldığında ikinci bir parametre belirlenip belirlenmediğini kontrol ediyoruz. Bunun nedeni ise, tek buton olan "Tamam" butonuna basıldığında yapılacak aksiyonu değişitebilme kabiliyeti eklemek. Bir çok noktada ihtiyacınız olabilecek olan bu özellik, bir mesaj kutusu çizdirdiğinizde butona basıldığında başka bir sayfaya yönlendirme veya kutuyu kapatmak yerine başka bir javascript cağrısı yapmak gibi şeyler yapmanızı sağlayacak. Bunu da alertf fonksiyonunun ikinci parametresini kullanarak yapabileceksiniz.

Örneğin
alertf('<h3>Mesajiniz başarıyla iletildi.</h3>', 'tesekkurler.html');
kullanımı, "Tamam" butonuna basıldığında kullanıcıyı tesekkurler.html sayfasına yönlendirecektir.

Bu methodla normal alert fonksiyonu yerine alertf fonksiyonunu kullanarak çok daha zengin bir mesaj kutusu çizdirebilirsiniz. Bu noktadan sonra projenizdeki tüm alert çağrılarınızda fonksiyon adına f eklemeniz, javascript kutularını havalı hale getirmeye yeterli olacaktır.
Uzun bir dönem flash'ın webdeki baskınlığının sonucu olarak ekrana sığan sayfalar tercih edilmeye başlanmıştı ama hem mobil cihazların popülerleşmesi, hem blogların şu an internette çoğunluk içeriği sağlıyor olması hem de flash'ın hayatımızdan biraz daha çıkmasıyla, uzun sayfalar tekrar günlük web gezintimizde en sık karşılaştığımız sayfalar oldu. Uzun bir sayfanız var ise ve eğer metin ağırlıklı bir içeriğe sahip değilseniz muhtemelen içeriğiniz, resimler/fotograflar barındırıyor olacaktır. Bunun yanı sıra sayfanızda üst, alt veya yan alanlarda da görüntülediğiniz yardımcı içerikler olabilir.

Örnek ile basit bir wordpress blogunu gözünüzde canlandırırsanız sayfa başlığı, alt metni ve yan navigasyonda ilgili yazılar (ve bunlara ait küçük görseller) sayfanızın altında bulunan görseller, mesela sponsor logoları, statik reklamlar, birkaç ufak ikon (sosyal medya ikonlari) vs küçük büyük bir çok görseliniz olacaktır (footer, header, sidebar).

Uzun bir sayfanın en büyük tehlikesi içinde barındırdığı medya içeriği sayısı olacaktır. Eğer medya içeriği sayınız, dosya boyutları ufak medya içerikleri dahi olsa yüklenmesi uzun zaman alacaktır. Bu konuya birçok web opimizasyonu yazısında karşılaşabilirsiniz.

Şimdi çok daha anlaşılır bir örnekle bu konuyu hızlıca kod üstünde anlatacağım.

Kısa süre önce bir facebook uygulaması hazırlarken, hazırladığım bir sayfada o kullanıcının arkadaş listesini her satırda 4 avatar görünecek şekilde bir tablo şeklinde gösteren bir sayfa hazırladım. Kendi hesabımla sayfayı açtığımda 500+ arkadaş listeleniyordu ve bu da 500 avatar'ın bir sayfada olması anlamına geliyor. Sorun tabi ki internet hızı değil. Asıl problem tarayıcılar. Tarayıcılar, Her domain için, paralel iki yüklemeye izin verir ve her imajın 100 milisaniyede yükleniyor olduğunu varsayarsak, saniyede 20 fotoğraf yükleniyor diyebiliriz. 500 fotografın yüklenmesi de 25 saniye sürecektir.

Sayfa ilk açıldığında çok garip görünmüyor ama daha sayfa yüklenmeden sayfayı aşağı kaydırdığımda ekranda daha yüklenmemiş görseller görüyor oluyorum.

Bundan daha tehlikelisi bu görseller sayfanızdaki diğer kaynakların yüklenmesini geciktiriyor ve javascript akışınızı etkiliyor. Dolayısıyla iyi bir kullanıcı deneyimi değil. Zaten teorik olarak düşündüğünüzde de ekranda görüntülenmemiş belki de hiç aşşağı kaydırılarak görüntülenmeyecek medya içeriği yüklenmeye çalışıyor ve ideal olarak bunların ekranda görüntülenmeden yüklenmemesi gerekir.

Wordpress blogu örneğindeki problem şöyle olabilir. Her girdinizin bir görseli olduğunu düşünürsek ve arşiv sayfanızda her sayfada 10 girdi gösterdiğinizi düşünürsek sayfanızdaki diğer medyaların dışında uzun bir sayfada 10 görsel (yüksek çözünürlükte olabilir) görüntülenmeye çalışması performans kaybına neden olabilir.

Bu problemi bir javascript çözümü olan lazyload ile çözebilirsiniz. jQuery eklentisi olarak bulabileceğiniz eklentinin yaptığı şey her görseli jenerik bir yer tutucusu olarak yükledikten sonra o görselin ekranda görünür alanda olup olmadığını tespit ederek gerçek kaynaktan yüklemek.

Yani sayfanız yüklendiğinde bütün görseller aynı imajı yüklüyor. Genelde bu imaj 1 piksellik tek renk (gri örneğin) ufak bir görsel oluyor. Anında yüklenip tüm imajlarda yer tutucu olarak yerleşiyor. Sayfanız yüklendikten sonra lazyload, o sayfanın pozisyonunu ve görüntülenebilir alanını hesaplıyor ve görselin o alanın içinde veya yakınında olup olmadığını hesapladıktan sonra görünen imajlari yükleyip daha kaydırma pozisyonuna göre ekranda omayan veya uzak olan imajlari yüklemiyor.

Bir javascript eventi ile sayfa kaydırma hareketinizi izleyerek imajlari gösterdiğiniz anda yüklüyor.

Lazyload'i sayfanıza nasıl entegre edersiniz?

Önce bir yer tutucu görseli hazırlamalısınız, bunun için transparan veya sabır bir renk 1x1 boyutunda bir gif imaj hazırlayın.

Sayfanızdaki tüm görsel adreslerini bu imajı yükleyecek şekilde ayarlayın. İmajlarin gerçek adreslerini de "data-original" özelliğine alıyorsunuz.
<img data-original=“img/example.jpg” src=“img/grey.gif”>

Sonra jquery ve lazyload'ı sayfanıza ekledikten sonra bu imajları bir seçiciyle seçip lazyload'ı çalıştırıyoruz.
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

$("img.lazy").lazyload();
Yukarıdaki kod "lazy" sınıfındaki resimleri yükleyecektir. Daha genel bir kullanım istiyorsanız sadece img etiketlerini belirterek sayfanızdaki tüm görsellerin lazyload ile yüklenmesini sağlayabilirsiniz.

Bundan sonra sayfanızdaki görseller ekranda görüntülendikleri anda yüklenecekler. Lazyload dökümantasyonunu inceleyerek tolerans ataması yapmayı (yani görselin, sayfa kaydırılırken ekranda görüntülenmeden önce yüklenmesini saglayabilir) veya görüntülenirken bir geçiş animasyonu belirleyebilirsiniz.

Proje adresi:http://www.appelsiini.net/projects/lazyload
12 Aralık Cumartesi ´09   —   6 Yorum

Easyframework, core jquery framework üzerine geliştirilen, css+javascript ile işlerinizi kolaylaştıracak bir framework. Ne css framework, ne de javascript framework. İkisinin güzel bir kombinasyonu.

Easy Framework ile navigasyon, tablolar, basit paragraf stilleri, basit grid yapısı, form kontrolleri, ipucu, lightbox gibi bir çok günümüzde sık kullanılan işleri yapabilirsiniz. jQuery ile beraber 1 js 1 css dosyası ile basit html yapınızı javascript kodu yazmadan sadece sınıflandırarak bu efekt/yerleşimi sağlayabiliyorsunuz.

Demo sayfasını inceleyip proje sayfasından indirebilir veya daha fazla bilgi alabilirsiniz.
9 Eylül Çarşamba ´09   —   1 Yorum

Wordpress

Şu aralar işten dolayı birkaç projemizi wordpress üzerinde sosyal medya kullanımı ile ilgili bir alanda odaklandığımız için bu konuları derinlemesine araştırmam gerekti. Zaten basit olan wordpress altyapısı üstünde api'ler, dış kaynakları kullanarak güçlü ve dışarıyla etkileşimli bloglar oluşturma konusunda hem oldukça tecrübe edindim hem de uygulama noktasında bu eklentilerin özelleştirilmesi konusunda güzel şeyler öğrendim.

Bunun anlamı şu : yakında mfyz.com'da wordpress konusunda güzel dökümanlar bulabilirsiniz. Yakın zamanda bir derleme yazısı yazacağım, devamında da bu özelleştirilebilirliği ele alıp, wordpress bloglarda sosyal medya entegrasyonu üstüne birşeyler yazabilirim.

Beklentilerinizi çok yükseltmeyin ama takip etmeye devam edin ;-)

Popüler Etiketler

regex css radio button switch javascript jquery wordpress dokuman plugin html sitemap seo google konsol terminal iphone macosx apple osx player wireless share kurulum nasıl pear mdb2 db database mysql mssql pgsql while www subdomain redirect crossdomain social integration api service network blog search kitap js login session php sql optimizasyon analyse procedure ide editor phpstorm jetbrains deployment version control svn git less imza signature mail optimization media screen twitter bootstrap form wanda proje kampanya kontrol yapıları if workspace spam tebrik cookie injection mobile startups mfyz ipucu css3 license lisans firefox linux export tool app iOS webkit web app music facebook developer subversion rss xml nedir framework ui design development lifestream parse ubuntu gimp newsletter url örnek kod ios itunes banner sosyal medya html5 browsers table chart grafik auth ipad generator style ux icons internet ruffles doritos xmlhttprequest ajax http server textarea connect box code calendar input select apache oyun zaman mootools howto istatistik statistics graph meta insanlar compile compiler windows on-the-fly cache htaccess laptop notebook coding digital app store store in-app purchase purchase subscription verification storekit itunes connect language link route router mod_rewrite query portfolio tytz logo icon ikon download xhtml job ie internet explorer date diff free opengraph fql object open source support applications cms prepare execute tarih fstab ntfs widget pharma hack assets browser