HTML5 ile Ziyaretçilerinize Değiştirilebilir İçerikler Sunun

Merhaba arkadaşlar. HTML5 ‘in getirdiği avantajlı yenilikleri konuşmaya devam ediyoruz. Bu makalemde ise “contenteditable” özelliği ile düzenlenebilir içerikler hazırlayacağız.

HTML5 öncesinde Ajax ve form öğeleri desteğiyle benzeri içerikler hazırlamak mümkündü. Fakat bu işlem için bile kırk takla atmamız gerekiyordu. HTML5 desteği ile bu işlemi yapmak saniyeler sürüyor. Şimdi konuyu biraz genişletelim, sonrasında ise sizler için hazırladığım örnek ile devam edelim.

HTML5’in Contenteditable özelliğini tanıyalım

Contenteditable’ı biraz açalım. En basit haliyle kullanım şekli :

<article>Bu düzenlenebilir bir makaledir.</article>

Tanımlamasını True dışında, Inherit veya False olarak da düzenleyebiliyoruz. Inherit hiyerarşide daha üst bulunan elementlerdeki özelliği direkt olarak alırken False ise düzenlemeyi kapatıyor.

Değişiklik nasıl kayıt edilir?

Kayıt etmek veriyi nereye depolayacağımıza göre değişmekte. Bir veritabanımız olmadığını varsayalım ve bu işlemi localStorage üzerinden halledelim. Bu teknik için ise jQuery yardımına ihtiyaç duyacağız.

Öncelikle içeriğimizin altında Kaydet buttonu ekleyerek başlayalım.

<article id="adobewordpress">Yukarı çıktığımızda kapının eşiğine geçtim ve herkesin geçmesini bekledim. Erdal ve Zeynep peşi sıra geçti. Elif ise yavaş adımlarla geliyordu. Kısa bir süre göz göze geldik. Yüzünde küçük bir gülümseme yakaladım. Dudaklarından “Elveda.” sözcüğü döküldü. Çığlıklarımız arasında elindeki tabancayı kafasına götürdü ve tetiği çekti.

“Elveda Elif.” dedim içimden. Seni çok özleyeceğim.</article>
<button id="kaydet">Değişikliği Kaydet</button>

Böylece Değişikliği Kaydet buttonuna basıldığında kayıt işlemimiz başlayacak. Şimdi ise yazılım ile devam edelim.

var theContent = $('#adobewordpress');
$('#kaydet').on('click', function(){
 var editedContent = theContent.html();
 localStorage.newContent = editedContent;
});

Bu kod localStorage üzerine güncel verileri içeren yeni bir anahtar oluşturacak. Firebug veya diğer web geliştirici araç sayesinde verilerin sağlıklı kayıt edilip edilmediğini kontrol edebilirsiniz. Firefox kullanıcıları DOM panelinden localStorage diye arama yaparlarsa verilere erişebilirler. Chrome ve Safari kullanıcıları ise Kaynaklar (Resources) alanına gitmeliler.

Şimdi içeriği güncellemek için aktif verileri alabiliriz.

if(localStorage.getItem('newContent')) {
 theContent.html(localStorage.getItem('newContent'));
}

Yukarıdaki newContent alanı eğer içerik güncellenmişse onu yayınlar. Eğer içerik alanı boşsa HTML5 içerisindeki varsayılan veriyi yayınlar. Bütün bu işlemlerimizi detaylıca test etmekte fayda var.

Kapanış

Bu makalemde HTML5’in yeni özelliklerinden Contenteditable’ı tanıdık ve inceledik. Ayrıca jQuery ve localStorage sayesinde mükemmel bir interaktif içerik sunumu hazırladık. Bir sonraki makalemde görüşmek üzere, hoşça kalın.