javascript alert fancy

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

şeklinde ürettiğiniz onay/hata/mesaj kutusunu

çok benzer kullanımla

şeklinde kullanabileceğiniz daha zengin içeriğe sahip bir kutuya çevirmeye.

Okumaya devam et “javascript alert fancy”

Sayfa görsellerini sayfa yüklendiğinde değil ekranda görüntülendiğinde yüklemek

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 1×1 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.

Sonra jquery ve lazyload’ı sayfanıza ekledikten sonra bu imajları bir seçiciyle seçip lazyload’ı çalıştırıyoruz.

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

Easy Framework


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.

WordPress araştırmaları ve

Ş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 😉

Jquery Kaynakları

Biliyorsunuz mootools adamı idim, ancak son dönemde jquery’nin daha sıkı gitmesi ve ihtiyaçlara daha ekonomik çözümler sunması daha çekici yaptı ve okuduklarım/duyduklarım ile jquery’ye geçme kararı almıştım. Birkaç gündür jquery kaynakları toplayıp kolları sıvamaya başlıyorum. Topladığım kaynakları paylaşmak istedim :

Jquery Siteleri, Dökümantasyonlar

  • http://jquery.com/
  • http://ui.jquery.com/
  • http://www.learningjquery.com/
  • http://15daysofjquery.com/
  • http://www.detacheddesigns.com/
  • ⭐️ (Learning jQuery in 30 minutes) http://tinyurl.com/5vof6b
  • http://www.visualjquery.com/
  • http://ajaxian.com/archives/prototype-and-jquery-a-code-comparison
  • http://interface.eyecon.ro/demos/?page=demos

Plug-in ve Eklentiler

  • http://www.jqueryplugins.com/
  • ⭐️ http://www.malsup.com/jquery/block/
  • http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
  • http://code.google.com/p/jquery-lightbox/
  • http://methvin.com/jquery/jq-corner.html
  • http://gsgd.co.uk/sandbox/jquery/easing/
  • http://sorgalla.com/jcarousel/
  • http://www.jeremymartin.name/projects.php?project=kwicks
  • http://t.wits.sg/2008/06/20/jquery-progress-bar-11/
  • http://plugins.jquery.com/project/tickertype
  • http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/
  • http://jmaps.digitalspaghetti.me.uk/
  • http://markitup.jaysalvat.com/home/
  • http://bassistance.de/jquery-plugins/jquery-plugin-validation/
  • http://remysharp.com/2007/12/28/jquery-tag-suggestion/
  • http://odyniec.net/projects/imgareaselect/
  • http://eyebulb.com/dropshadow/
  • http://lab.berkerpeksag.com/jGrow
  • http://widowmaker.kiev.ua/checkbox/
  • http://projects.bundleweb.com.ar/jWYSIWYG/
  • http://bassistance.de/jquery-plugins/jquery-plugin-treeview/
  • http://digitalbush.com/projects/masked-input-plugin
  • http://webplicity.net/flexigrid/
  • http://fancy.klade.lv/
  • http://p.sohei.org/jquery-plugins/tablehover/
  • http://www.freewebs.com/flesler/jQuery.ScrollTo/
  • http://www.malsup.com/jquery/cycle/
  • http://labs.parkerfox.co.uk/cornerz/
  • (EasyDrag jQuery Plugin) http://tinyurl.com/29sxqp
  • (Developing an accessible slider) http://tinyurl.com/35osbo

Makaleler, NASIL Belgeleri

  • http://jquery.bassistance.de/jquery-getting-started.html
  • http://www.eburhan.com/jquery-dunyasina-adim-atiyoruz/
  • (Load Data From Other Pages) http://tinyurl.com/6mq3ed
  • (Load Content While Scrolling) http://tinyurl.com/3g9nju
  • http://www.eburhan.com/jquery-ile-hazirladigim-kalan-karakter-eklentisi/
  • http://nettuts.com/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/
  • http://jqueryfordesigners.com/coda-slider-effect/
  • http://nettuts.com/javascript-ajax/how-to-create-a-keypress-navigation-using-jquery/
  • http://www.ibm.com/developerworks/library/x-ajaxjquery.html
  • (Wrap It Up) http://tinyurl.com/272efl
  • http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/
  • http://www.sitepoint.com/article/ajax-jquery
  • http://15daysofjquery.com/style-sheet-switcheroo/12/
  • http://jqueryfordesigners.com/slide-out-and-drawer-effect/
  • (Zebra Tables) http://tinyurl.com/5uaygu
  • http://jqueryfordesigners.com/slider-gallery/
  • http://www.eburhan.com/jquery-ve-olaylar/
  • http://www.eburhan.com/jquery-ve-seciciler/
  • http://gmarwaha.com/blog/?p=7

Diğer

  • ( 50+ Amazing Jquery Examples) http://tinyurl.com/2vw92f
  • ( 37 More Shocking jQuery Plugins) http://tinyurl.com/6xd7dp
  • http://www.sastgroup.com/jquery/240-plugins-jquery
  • ( 51+ Best of jQuery Tutorials) http://tinyurl.com/6pwr9d
  • http://groups.google.com/group/jquery-turkish