CDN: Content Delivery Network'ün kısaltması ve İçerik Dağıtım Ağı olarak Türkçe'ye çevirebilecek bir kavram. CDN'ler, statik içeriklerinizin normalde daha hızlı tarayıcıya ulaştırılması için düşünülmüş bir dağıtım yapısıdır.

Statik içerik nedir?

Statik içerik grubuna, javascript, css, görseller, statik html dosyaları gibi, bir sunucu programlama dili ile dinamik şekilde oluşturulmayan tüm içerikleri dahil edebilirsiniz. Bir kere hazırlanıp sunucuya konduktan sonra değişmeyeceği planlanan içerikleri, farklı coğrafyalardaki veri merkezlerine dağıtarak, kullanıcılara daha hızlı iletmeyi amaçlayan içerik dağıtım ağları sadece bulut servis sağlayıcıları tarafından sağlanıyor.

Basitçe, iki tür CDN vardır, biri genel amaçlara yönelik tasarlanan, herkese açık ve dökümante edilmiş CDN'ler, diğeri de özel tasarlanmış ve genellikle kapalı kullanım için tasarlanmış olanlardır.

İkinci model, ileri aşamada yapacağınız bir geliştirme olacağı için şu an detaylarına girmeyeceğim. Size bu yazıda, özetle ilk model açıklayıp örnekleyeceğim. İlk modeli kullandığınız kütüphane bazlı projeler (örnegin jQuery, twitter bootstrap, angular, backbone...) kendi networkleri aracılığıyla sağlıyorlar veya google, microsoft gibi büyük bulut servis sağlayıcıları, birden fazla projeyi içeren herkese açık CDN servisleri sağlıyorlar.

Nasıl çalışıyor?

Bir websitesi hazırladınız; arayüzü twitter bootstrap ile şekillendirdiniz; jQuery kullanan birkaç kütüphane ile sitenizi interaktifleştirdiniz ve fontwesome kullanarak da elementlerinize semboller ekleyerek arayüzünüzü güçlendirdiniz. Bu kütüphanelerden bazısı sadece tek bir javascript dosyası, bazısı da css ve başka formatlarda dosyalar kullanmanızı gerektiriyor. Normalde, bütün bu dosyaları geliştirme ortamınızda sitenizin asıl dosyaları ile beraber sunmanız ve öyle kullanmanız gerekiyor.

Sitenize giren kullanıcı, tarayıcıda bir sayfa bile ziyaret etse hem sayfanızı istiyor hem de bütün javascriptleri, kütüphaneleri, görselleri, css stil dosyalarını istiyor. Sayfanızı her halükarda sunmak zorundasınız ancak sayfanızda kullandığınız statik dosyaları bu CDN servislerinden adresleyerek tarayıcıların o kütüphaneleri o servislerin domainlerinden indirmesini sağlayabilirsiniz. Bu servisler bu statik dosyaları olabilecek en hızlı şekilde sunmak üzere tasarlandıkları için her zaman sizden daha iyi çalışacaklardır. Ayrıca fakrlı bir domainde oldukları için daha önce yüklenmeye başlayacaklar (parallel download) ve muhtemelen başka bir sitede kullanıcı o dosyayı daha önce indirdiği ve uzun cache periyodlarıyla kullanıcının bilgisayarında saklandıkları için de muhtemelen tekrar indirilmeden doğrudan tarayıcıya yükleneceklerdir. Sitenizde belirli bir kutuphane icin CDN kullanmak için:
<script src="js/jquery-2.0.2.min.js"></script>
yerine
<script src="http://code.jquery.com/jquery-2.0.2.min.js"></script>
kullanmanız yeterli olacak. Gördüğünüz gibi bu jquery'e özel tanımlanmış bir CDN adresi. Herkese açık ve birden fazla kütühane içeren ortak CDN servislerini tercih etmeniz daha iyi performans almanızı sağlayabilir.

Sonuç olarak bu servisler sadece bu amaca hizmet etmek için çalıştıkları için siz sitenizi veya bu statik içeriklerinizi ne kadar optimize ederseniz edin en iyi ihtimalle onlara yakın, çoğu zaman daha düşük bir performansta çalışacağı için CDN'leri kullanarak zaman ve performans kazanabilirsiniz.

Peki, hangi servis?

Ufak bir araştırma ile herkese açık bir çok CDN servisi bulabilirsiniz hem de kafanızı karıştıracak miktarda. Aralarından en çok kütüphaneyi bir arada bulabileceğiniz bir tanesini tavsiye edip bitireceğim. Cloudflare'in bir çok popüler kütüphaneyi içeren herkese açık CDN servisini kullanarak büyük dağıtma ağına sahip performansından yararlanabilirsiniz.

http://cdnjs.com adresinden kullanmak istediğiniz kütüphaneyi seçip kullandığınız sürümüne ait adresini kodunuzdaki adreslemeyle değiştirebilirsiniz.
23 Ekim Salı ´12   —   3 Yorum
HTML5 git gide daha popülerleşiyor ve eski html kodlarının yerini, daha sade html5 kodlarına bıraktığını, daha önce javascript eklentileriyle yaptığımız bazı şeyleri yeni html5 tanımlamasında yeni özellikler olarak görmeye başladık.

Özellikle mobile web uyumlu sayfalar yaygınlaştıktan sonra html5 tanımlamaları sadece masaüstü bilgisayar tarayıcıları değil mobil tarayıcılar için de özel yetenekler içermeye başladı.

Eğer birkaç yıldır güncellenmeyen bir tarayıcınız varsa HTML5 formların tüm özelliklerini desteklemeyebilir fakat güncel ve modern tüm tarayıcılar birçok html5 form özelliğini destekliyor.

İşte yeni html5 form özelliklerinden bazıları...

Devamını Oku →
19 Eylül Çarşamba ´12   —   5 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

Popüler Etiketler

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