HTML5 ile Browserlarda Bildirim (Notification) Kullanımı

Malum, kış geldi. İş yerine gitmeyip evden çalışmaya karar verdik. İşyerinde kullandığımız Hipchat’i indirmek için web sayfasına girdiğimde online application’unun olduğunu farkedince gireyim dedim. Konuşmaların sağ taraf köşelerde bildirim olarak gelmesi beni araştırmaya iten sebep oldu.

Bildirim Özelliğinin Desteklenip Desteklenmemesi

CSS3, HTML5 derken kimi özellikler browser’lara hemen implemente ediliyor kimisi de gecikmeyle geliyor. Bu konuda yardımımıza da Modernizr koşuyor ki burada da bu nimetten faydalanalım.

[code lang=”js”]
if ( "Notification" in window ) {
console.log("Destekeniyor.");
} else {
console.log("Desteklenmiyor.");
}
[/code]

Bildirim Özelliği için İzin Alımı ve Uygulanması

Bu bölümde kullanıcıdan bildirim gösterimleri için izin almamız gerekiyor. Genellikle bu bölümü herhangi bir trigger ‘a bağlamak gerekebilir ki kullanıcının karşısına web sayfasına girince izin barı çıkmasın. Bilgilendirme API’si için bilgilendirme şart.

[code lang=”js”]
if (Notification.permission === "granted") {
var notification = new Notification("Merhaba İbrahim!");
}
[/code]

Basit bir şekilde izin alımını sağladıktan sonra uygulama için de :

[code lang=”js”]
if (Notification.permission === "granted") {
var notification = new Notification(‘Merhaba İbrahim!’, {
body: ‘Buraya göstermek istediğimiz mesajı yazıyoruz.’,
icon: ‘http://phyesix.com/img/Ibrahim-Nergiz.jpg’,
tag: ‘demo’,
dir: ‘auto’,
lang: ”
});
}
[/code]

See the Pen dPvmMp by Ibrahim Nergiz (@phyesix) on CodePen.

HTML5 “track” Elementine Toplu Bir Bakış

Günümüzde, HTML5 ile birlikte gelen video ve ses dosyalarında önemli bir sayıda artış mevcut. Google’a baktığımızda internet aramalarının yaklaşık %40‘ı gibi bir değere ulaşması da bunun bi’ göstergesi. Bu yazımda HTML5 ile birlikte gelen <track> elementi ile birlikte gelen, video dosyalarınıza altyazı ekleme gibi önemli bir işlevden bahsedeceğim. Önemli diyorum çünkü, video ile SEO konusunun yıldızları bu noktada barışıyor.

“<track>” Elementine Genel Bakış

<track> elementi, web sitenizde video dosyası oynatımı sırasında gösterilecek herhangi bir text / yazı’yı tanımlamamızı sağlıyor. Bu text / yazı; altyazı, içerik, açıklama, bölüm veya metadata bilgileri içeriyor olabilir. Bunları içerirken tahmin edersiniz ki <video> veya <audio> tag’leri arasında yer alıyor. Doğal olarak bu elementimizi </track> olarak kapatma ihtiyacımızın bulunmaması da genel özelliklerinden birisi. Kısa bir örnek verecek olursam:

[code lang=”html”]
<video width="640" height="320" controls="controls">
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
<track src="altyazi.srt" kind="subtitles" srclang="tr" label="Turkish_subs">
</video>
[/code]

“src” Attribute’u

Bu attribute tahmin edebileceğiniz üzere, video veya ses dosyalarınıza entegre etmek istediğiniz dosyanın yolunu belirteeceğiniz attribute ve doğal olarak da gerekli.

[code lang=”html”]
<track src="altyazi.srt">
[/code]

“srclang” Attribute’u

srclang, eklediğiniz altyazının dilini belirtebileceğiniz bi’ attribute. Eğer “kind” attribute’unda “subtitle” kullanılmışsa ( birazdan aşağıda değineceğiz ) kesinlikle doldurulması gereken alanlardan birisi. Eklediğiniz text / yazı dosyasının dili İngilizce ise “en”, Türkçe ise “tr” olarak kullanabilir. Diğer dilleri de kontrol edebilirsiniz.

[code lang=”html”]
<track src="video_subtitles.srt" kind="subtitles" srclang="tr">
[/code]

“kind” Attribute’u

kind attribute’u ile eklediğimiz text / yazı dosyasının türünü belirtmeye yarıyor. Aşağıda bunları sıralayalım:

subtitles

Video veya ses dosyasında geçen konuşmaların çevirisini sunar. srclang attribute’u ile kullanılmalıdır.

[code lang=”html”]
<track src="video_subtitles.srt" kind="subtitles" srclang="tr">
[/code]

captions

Video dosyasında bi’ brief verirken kullanılır.

[code lang=”html”]
<track src="video_captions.srt" kind="captions">
[/code]

descriptions

Video veya ses dosyası içeriğini açıklarken kullanılır. Video dosyasına erişilemediği zaman bu gösterilir.

[code lang=”html”]
<track src="video_descriptions.srt" kind="descriptions">
[/code]

metadata

[code lang=”html”]
<track src="video_metadata.srt" kind="metadata">
[/code]

chapters

Video veya ses dosyasında bölüm başlığı gibi durumları belirtirken kullanılır.

[code lang=”html”]
<track src="video_chapters.srt" kind="chapters">   
[/code]

“label” Attribute’u

Bu attribute video veya ses dosyanızda kullanmak istediğiniz text / dosya ‘nın başlığını belirler. “label” attribute’u kullandığınız zaman boş bırakmamanız gerekiyor, eğer ki bırakırsanız kod hatası almanız mümkün.

[code lang=”html”]
<track src="video_subtitles.srt" kind="subtitles" srclang="tr" label="Turkce_altyazi">
[/code]

“default” Attribute’u

Birden fazla <track> elementi kullanıldığında, default olarak neyi seçeceğimizi belirtiriz.

[code lang=”html”]
<track kind="subtitles" src="video_subtitles_tr.srt" srclang="tr" default>
<track kind="subtitles" src="video_subtitles_en.srt" srclang="en">
<track kind="subtitles" src="video_subtitles_ja.srt" srclang="ja">
[/code]

Yukarıda bahsettimiz bütün attribute ve değerlerini tek bir örnek üzerinde toplamak istersek:

[code lang=”html”]
<video src="video.ogv">
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
   <track kind="captions" src="video_captions.srt" srclang="tr">
   <track kind="descriptions" src="video_desciptions.srt" srclang="tr">
   <track kind="chapters" src="video_chapters.srt" srclang="tr">
   <track kind="subtitles" src="video_subtitles_tr.srt" srclang="tr" default>
   <track kind="subtitles" src="video_subtitles_en.srt" srclang="en">
   <track kind="metadata" src="video_metadata1.srt" srclang="tr" label="Metadata 1">
   <track kind="metadata" src="video_metadata2.srt" srclang="tr" label="Metadata 2">
</video>
[/code]

“<track>” Elementi ve SEO Değeri

Video ve ses dosyaları hakkında bilgi sahibi olamayan arama motorları artık <track> elementi sayesinde video veya ses dosyasının içeriğinin ne olduğunu görebiliyor duruma geçti. Bu da doğal olarak SEO konusunda önemli yerlere gelinebileceğinin kapısını araladı. Bunların yanında:

  • Video ve ses dosyalarındaki cümle ve kelimeleri örümcekler rahat rahat gezip video hakkında bilgi sahibi olacaklar.
  • Videonun spesifik bir yerinde linklemeyi okuyup algılayabilecekler.
  • Altyazı ve captionslar yardımıyla kullanıcı deneyimindeki artış.
  • Arama sonuçlarında video tumbnail’leri.

gibi bir çok artıyı da beraberinde getiriyor. Ek olarak video, altyazı ve SEO üçlüsü hakkında daha fazla bilgi sahibi olabilirsiniz.

 

“<track>” Elementi ve Browser Desteği

Hepinizin merak ettiği bu sorunun cevabı ise:

  • Chrome
  • Firefox 31+
  • IE10+
  • Safari 6+
  • Opera 15+

HTML5 ile FileReader ( File API )

HTML5 ile yeni gelen özelliklerden birisi de lokaldeki dosyalarla etkileşim içerisine girebilmemiz ve bunu da File API ile yapabilmemiz olsa gerek. File API ile gelen özelliklerden birkaçından bahsetmek istersem; herhangi bir imajın önizlemesini sunucuya göndermeden anında görebilmek, dosya içeriğini ( düzenlenme tarihi, ismi, boyutu … vs ) görebilmek gibi bir çok şeye izin veriyor. Güncel browserın desteği bulunmakla birlikte bu özelliği:

[code lang=”js”]
if (window.File &amp;&amp; window.FileReader &amp;&amp; window.FileList &amp;&amp; window.Blob) {
alert(‘File API destekleniyor.’);
} else {
alert(‘File API desteklenmiyor.’);
}
[/code]

Yukarıdaki kod bloğu yardımıyla kullanıcının browserinin File API destekleyip desteklemediğini öğrenebiliriz.

Form içerisinde Input Kullanımı

Dosya seçimi için form içerisinde standart olarak  <input type=”file” />  kod bloğunu kullanıyoruz. Javascript seçilen dosyaların listesini FileList adı altında dönüyor. Aşağıda da ‘multiple’ yani çoklu dosya seçimi olan bir form örneğini görebilirsiniz:

[code lang=”html”]
<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>
[/code]

[code lang=”js”]
<script>
function handleFileSelect(evt) {
var files = evt.target.files;

var output = [];
for (var i = 0, f; f = files[i]; i++) {
output.push(‘<li><strong>’, escape(f.name), ‘</strong> (‘, f.type || ‘n/a’, ‘) – ‘,
f.size, ‘ byte, son düzenlenme: ‘,
f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : ‘n/a’,
‘</li>’);
}
document.getElementById(‘list’).innerHTML = ‘<ul>’ + output.join(”) + ‘</ul>’;
}

document.getElementById(‘files’).addEventListener(‘change’, handleFileSelect, false);
</script>
[/code]

Canlı örneği ile sonuçları görebilirsiniz:

See the Pen BLuln by Ibrahim Nergiz (@PhyesiX) on CodePen.

Form içerisinde Sürükle Bırak

Aşağıda da browser desteği ile sunulan drag and drop ( sürükle bırak ) yönetmiyle, form içerisine dosyalarınızı sürükleyerek oluşturduğunuz bir form:

[code lang=”html”]
<div id="drop_zone">Sürükle Bırak</div>
<output id="list"></output>
[/code]

[code lang=”js”]
<script>
function handleFileSelect(evt) {
evt.stopPropagation();
evt.preventDefault();

var files = evt.dataTransfer.files; // FileList object.

// files is a FileList of File objects. List some properties.
var output = [];
for (var i = 0, f; f = files[i]; i++) {
output.push(‘<li><strong>’, escape(f.name), ‘</strong> (‘, f.type || ‘n/a’, ‘) – ‘,
f.size, ‘ bytes, last modified: ‘,
f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : ‘n/a’,
‘</li>’);
}
document.getElementById(‘list’).innerHTML = ‘<ul>’ + output.join(”) + ‘</ul>’;
}

function handleDragOver(evt) {
evt.stopPropagation();
evt.preventDefault();
evt.dataTransfer.dropEffect = ‘copy’; // Explicitly show this is a copy.
}

// Setup the dnd listeners.
var dropZone = document.getElementById(‘drop_zone’);
dropZone.addEventListener(‘dragover’, handleDragOver, false);
dropZone.addEventListener(‘drop’, handleFileSelect, false);
</script>
[/code]

Canlı örneği ile sonuçları görebilirsiniz: See the Pen qCJxD by Ibrahim Nergiz (@PhyesiX) on CodePen.

Dosyaları Okumak

En güzel bölüm de burası. Hani anında önizleme özelliği var ya … Formumuzda bulunan input yardımıyla dosyamızıı seçip FileReader yardımıyla objeyi bellek içerisinden okuyabiliyoruz. FileReader komutuyla dosya özelliğini okumak için 4 farklı şekil mevcut:

  • FileReader.readAsBinaryString : Dosyayı binary ile görüntüler
  • FileReader.readAsText : Dosyayı text olarak okur. Text ‘UTF-8’ olarak sunulur.
  • FileReader.readAsDataURL: dataURL’i sunar.
  • FileReader.readAsArrayBuffer: ArrayBuffer olarak sunar.

Bunların yanında onloadstart, onprogress, onload, onabort, onerror ve onloadend gibi seçenekler yardımıyla da dosyamızın durumunu görebiliriz. Durumuna göre de fonksiyonlar tetikleyebiliriz … Aşağıdaki kod bloğunda seçilen imajın: FileReader.readAsDataURL yardımıyla url’ini alıp, img src içerisine yazdıralım ve sonucu aşağıda canlı canlı görelim:

[code lang=”html”]
<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>
[/code]

[code lang=”js”]
<script>
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object

// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {

// Only process image files.
if (!f.type.match(‘image.*’)) {
continue;
}

var reader = new FileReader();

// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
// Render thumbnail.
var span = document.createElement(‘span’);
span.innerHTML = [‘<img class="thumb" src="’, e.target.result,
‘" title="’, escape(theFile.name), ‘"/>’].join(”);
document.getElementById(‘list’).insertBefore(span, null);
};
})(f);

// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}

document.getElementById(‘files’).addEventListener(‘change’, handleFileSelect, false);
</script>
[/code]

Canlı örnek için:

See the Pen tkesc by Ibrahim Nergiz (@PhyesiX) on CodePen.

LocalStorage ile Popup Örneği

Daha önceki yazımda localStorage hakkında temel bilgilere değindikten sonra bu yazımda da sizlere güzel bir örnek vermek istiyorum. Çalıştığım takımdaki arkadaşlarımdan, web sitemize giriş yapan kullanıcı karşısına direk olarak sosyal medya bağlantılarımızın olduğu “takip et” butonlarının ( Facebook, Twitter, Google Plus ) bulunduğu bir popup çıkarma isteği geldi. Ama burada küçücük bir sorun vardı. Siteye giriş yapan her kullanıcı, her giriş yaptığında bu popup’u görmek zorunda mıydı ?

LocalStorage ile Popup’ı Belirli Zaman Dilimlerinde Çıkarsak ?

İşte bu noktada yardımıma localStorage koştu. Web sitesine gelen x kullanıcısına bir “değer” atasaydık, her geldiğinde çıkmasaydı ama arada da sosyal medya hesaplarımızı hatırlatmak isteseydik fena mı olurdu ? Yapılacak adımları sıralayacak olursak:

  • İlk defa gelen kullanıcının localStorage’na erişilecek.
  • Değerin olup olmadığına bakacak.
  • Varsa değeri okuyup farklı bir davranışa yönlendirecek.
  • Yoksa değeri oluşturacak.

Harekete Geçelim

Yapacağımız işi kısaca özetlemek istersek, kullanıcı web sitesine girdiğinde sosyal medya ikonlarının bulunduğu popup çıkacak. Ardından localStorage yardımıyla çıktığına dair browser’inde bilgi saklayacağız. Her siteye girdiğinde o bilgiyi okuyup bir ay geçti mi geçmedi mi kontrol edeceğiz. Eğer geçtiyse de tekrardan popup gösterip yeni değerleri localStorage‘a gireceğiz.

Ayda bir kere popup çıkaracağımız için, bulunduğumuz ayı çekmekle başlıyoruz ve şu an bulunduğumuz ayı currentMonth değerine atıyoruz. 3. satır ile de socialpopupdate value’sunun olup olmadığını localStorage altından bakıp durumunu localMonth değerine atıyoruz:

[code lang=”js”]
var d = new Date();
var currentMonth = (d.getMonth()+1);
var localMonth = localStorage.getItem(‘socialpopupdate’);
[/code]

Eğer localStorage’da socialpopupdate diye bir kayıt yoksa, kullanıcı web sitemize ilk defa gelmiş demektir. Doğal olarak hemen kaydımızı oluşturup şu an bulunduğumuz ayı localStorage‘ına kaydediyip “popupGoster()” ile popupu açıyoruz:

[code lang=”js”]
if( localMonth == null){
localStorage.setItem(‘socialpopupdate’,currentMonth);
popupGoster()
}
[/code]

Son olarak da ayda bir kere popup çıkarma işine geldi. Burada da localStorage‘da bulunan ay bilgisi, şu an bulunduğumuz ay’a eşit değilse, socialpopupupdate değerimizi siliyoruz. Ardından içinde bulunduğumuz ayın değerini güncelleyip tekrardan popup’u gösteriyoruz:

[code lang=”js”]
if( localMonth != currentMonth ){
localStorage.removeItem(‘socialpopupdate’);
localStorage.setItem(‘socialpopupdate’,currentMonth);
popupGoster()
}
[/code]

HTML5 ile Gelen “Local Storage” Nedir ? Nerelerde Kullanılır ?

Front-end Developerlar için kullanıcının bilgisayarında bilgi saklamak güzel bir şey olsa gerek. Bu yazı içerisinde, kolay bir şekilde kullanıcı bilgisayarında küçük bilgiler saklamak, sonradan onları okumak ve bunlarla neler yapılacağını açıklamaya çalışacağım.

Neden “Local Storage” ?

Web sitenizde bir uygulama olduğunu düşünelim. Uygulamayı web sitesi üzerinde kullanıp kapattıktan sonra tekrardan açmak istediğinizde her şey sıfırlanmış olur. Eğer aynı şeyi masaüstü uygulamalarda yapmak isterseniz tam tersi durumda, nerede kaldıysanız oradan devam etme şansı tanır.

Yukarıdaki sebepten ötürü, Front-end Developer bazı durumlarda bu bilgilerin bir yerde saklanmasına ihtiyaç duyar. Normalde bu back-end development tarafında, kullanıcı adı şifresi girilerek kurtarılabilir. Peki sisteme giriş yapmayan, daha da öte back-end tarafı ile ilişiğimiz olmadan bu işlemleri yapmak istediğimizde ne olacak ? İşte burada local storage devreye giriyor. Böylelikle sistemimize gelen kullanıcıyı, küçük bir “değer” ile tanıyabileceğiz!

Cookie Vardı, Local Storage ile Cookie Farkı Ne ?

Local Storage gelmeden önce cookie’leri kullanıyorduk. Cookie, kullanıcının bilgisayarında bulunun küçük bir text dosyası olarak tanımlayabilir, bu dosya sizin web siteniz açıldığı sırada domain ile eşleşip işlem görebilecek güce sahiptir de diyebiliriz. Bu dosya içerisine istediğiniz gibi “data” yazabilir, okuyabilir veya silebilirsiniz. Buraya kadar her şey güzel ama bazı noktalar ile limitlendirilmiş durumda:

  • Web sitesine her girilip sayfa yüklendiğinde okunurlar.
  • 4 KB’lık data saklarlar.
  • Bazı güvenlik sorunlarına da neden olabilirler.

HTML5 Destekleyen Browserlarda Local Storage Kullanımı

Local Storage‘n kullanımı sandığınız kadar zor değil. Javascript içerisinde localStorage objesi ile her şeyi yapabilirsiniz. setItem() ve getItem() methodlarını kullanarak bunu yapabiliriz:

[code lang=”js”]
localStorage.setItem(‘socialpopupdate’,’02.12.2013′);
[/code]

Eğer socialpopupdate key’ini okumaya çalışırsak, bize 02.12.2013 değerini dönecektir.

[code lang=”js”]
var tarih = localStorage.getItem(‘socialpopupdate’);
// ->; "02.12.2013"
[/code]

Eğer bu değeri silmek istersek de sizin de tahmin edebileceğiniz üzere removeItem() methodunu kullanabiliriz:

[code lang=”js”]
localStorage.removeItem(‘socialpopupdate’);
var tarih = localStorage.getItem(‘socialpopupdate’);
// ->; null
[/code]

Evet, bu kadar. Küçük bir tüyo verecek olursam da, localStorage yerine sessionStorage’i kullanırsak browser penceresi kapanana kadar data saklayabiliriz.