HTML contenteditable – Düzenlenebilir İçerik

Html’de bir etiketin değerini düzenlenebilir yapmak için contenteditablekullanılıyor.

Örnek vermek gerekirse;

<div id="test" contenteditable="true">buraya tıkla ve beni düzenle!</div>

Ya da diğer nesneler içinde kullanmak isterseniz contenteditable="true"demeniz yeterli.

jQuery’de Değişikliği Yakalamak

Düzenlenebilir içerik değiştirildiğinde bunu input eventı ile yakalayabiliyoruz.

$('#test').on('input', function(e){
   alert( $(this).text() );
});

kolay gelsin.

Mail Tasarımı Kodlarken Dikkat Edilmesi Gerekenler

Front-end‘ci arkadaşlarım eminim ki mail tasarımı kodlama işi alıyorlardır.
Ancak mail tasarımlarını dökerken dikkat etmemiz gereken bazı durumlar var, bunlardan biraz bahsetmek istiyorum.

Bütün mail tasarımlarının dökümünde tablo yapısı kullanılır, çünkü mail servisleri çok kısıtlı imkanlar veriyor bizlere.

Elbette başka elemanlarda kullanılabilir ancak taslağın tablo yapısı üzerine inşa edildiğini incelerseniz hepsinde görebilirsiniz.

Dolayısı ile normal bir web sitesi gibi döküm rahatlığı yoktur.

<style></style> ve <link /> etiketleri çalışmaz

Outlook ve gmail‘e baktığımda ne style etiketi içinde css yazımını ne de dış bir css dosyası çalıştırmayı kabul ediyor.

Dolayısı ile tablo yapısı ve inline css yazımı ile hazırlamamız gerekiyor mail tasarımlarını.

<div style="color: darkred; font: 15px Arial, sans-serif; border: 1px solid red;">
test et
</div>

(Tam emin değilim aslında bu konuda, yine de ben tüm denemelerime rağmen çalıştıramadım.)

Script kodlarını boşuna yazmayın

Yüksek ihtimalle güvenlikten dolayı yazdığınız kodlar çalışmayacaktır, basit düşünün. Mail tasarımı dediğiniz şey basittir, web sitesi yapmıyoruz burada 🙂

Hazır mail tasarımları kullanabilirsiniz

Eğer uğraşacak vaktiniz yok ise themeforest’te satılan hazır mail tasarımlarını alıp kendi yapınıza göre düzenleyebilirsiniz.

Mail servislerinin desteklediği CSS özellikleri

Sizlere güzel bir kaynak vereceğim, hangi mail servisinin hangi kodları çalıştırdığını buradan inceleyebilirsiniz.

https://www.campaignmonitor.com/css/

HTML5 autofocus Özelliği

Form elemanlarına otomatik odaklanmasını istiyorsanız html5 ile birlikte gelen autofocus=”autofocus” özelliğini kullanabilirsiniz. Yani artık bunun için jquery kullanmanıza gerek yok 🙂

<!-- hepsi çalışıyor! -->
<input autofocus="autofocus" />
<button autofocus="autofocus">Selam!</button>
<textarea autofocus="autofocus"></textarea>

HTML5 Audio (Ses Özelliği)

HTML5 ile birlikte sesler üzerindeki hakimiyetimiz arttı. Ses dosyasının bir çok event (olay) ını kontrol edebiliyoruz buna göre işlem yaptırabiliyoruz. Ben size bu yazıda (video daha sonra eklenecek) html5 de seslerle çalışmayı göstereceğiz..

Öncelikle bir ses dosyasını <audio> etiketi ile kullanıyoruz.

<audio controls>
  <source src="ses.mp3" type="audio/mpeg">
  Tarayıcınız bu özelliği desteklemiyor.
</audio>

HTML5 Audio ile Hangi Ses Formatlarını Oynatabiliyoruz?

Sadece Mp3, Wav ve Ogg formatlarını oynatabilirsiniz. Bunların her birinin mime tipi farklıdır. Kısaca göstereyim;

<!-- mp3 -->
<source src="ses.mp3" type="audio/mpeg">

<!-- wav -->
<source src="ses.wav" type="audio/wav">

<!-- ogg -->
<source src="ses.ogg" type="audio/ogg">

Otomatik Başlatma (autoplay)

Sesin otomatik başlaması için audio etiketine autoplay niteliği eklenir.

<audio controls autoplay>

Sürekli Olarak Çalması (loop)

Sesin bittikten sonra tekrar başlaması ve buna sürekli devam etmesi için audio etiketine loop niteliği eklenir.

<audio controls autoplay loop>

Sessida Çalması (muted)

Sesin sessizde çalması için audio etiketine muted niteliği eklenir.

<audio controls autoplay muted>

Ön yüklemeyi iptal etme (preload)

Sesin başlamadan önce ön yüklemesini iptal etmek için audio etiketine preload=”none” niteliği eklenir.

<audio controls autoplay preload="none">

Oynatma (play) ve Durdurma (pause) Özelliği

Artık biraz daha eğlenceli kısma geçelim. JavaScript ile (tabi biz jquery’i dahil ederek kullanacağız) oynatma ve durdurma işlemlerini yapalım. Öncelikle html yapımız şöyle olsun;

<audio controls>
  <source src="ses.mp3" type="audio/mpeg">
  Tarayıcınız bu özelliği desteklemiyor.
</audio>

<button id="play">Oynat</button> <button id="pause">Durdur</button>

Şimdi jquery’de click olaylarına ses dosyamızı durdurup oynatalım. Bunun için play() ve pause() metodlarını kullanacağız.

// html audio nesnesi
var audio = $('audio');

// oynatma olayı
$('#play').on('click', function(e){
    audio[0].play();
    e.preventDefault();
});

// durdurma olayı
$('#pause').on('click', function(e){
    audio[0].stop();
    e.preventDefault();
});

$(‘audio’) sonuna [0] yazarak html ses elemanına çevirdim. Aksi halde bir jquery nesnesi olacaktı. Ancak ses metodları sadece ses elemanlarında çalışacağı için bunu yapmak zorundayız.

Oynatma Olayı

Ses dosyası oynarken bunu yakalamak istersek timeupdate event’ını kullanacağız. Örnek vermek gerekirse;

var audio = $('audio');
audio.bind('timeupdate', function(){
   console.log('ses oynatılıyor..');
});

ancak tabi bu şekilde bir anlamı yok. Bir alttaki örnek ile daha anlamlı olacaktır.

Toplam Süreyi (duration) ve Geçen Süreyi (currentTime) Hesaplamak

Ses dosyasının toplam süresini ve oynatırken ki mevcut süresini hesaplatmak için duration ve currentTime kullanılır.
Mevcut süresi yukarıdaki oynatma olayını kullanarak alacağız.

// saniyeyi çeviren fonksiyon
function readableDuration(seconds) {
    sec = Math.floor( seconds );    
    min = Math.floor( sec / 60 );
    min = min >= 10 ? min : '0' + min;    
    sec = Math.floor( sec % 60 );
    sec = sec >= 10 ? sec : '0' + sec;    
    return min + ':' + sec;
}

// html audio nesnesi
var audio = $('#audio');

// oynatma olayı
$('#play').on('click', function(e){
    audio[0].play();
    e.preventDefault();
});

// durdurma olayı
$('#pause').on('click', function(e){
    audio[0].pause();
    e.preventDefault();
});

// hazır olduğunda toplam süreyi yazdır
audio.bind('canplay', function(){
    var duration = audio[0].duration;
    $('.duration').text( readableDuration(duration) );
});

// değişiklik olduğunda mevcut süreyi yazdır
audio.bind('timeupdate', function(){
    var current = audio[0].currentTime;
    $('.current').text( readableDuration(current) );
});

Saniyeyi düzgün gösterebilmek için şuradaki fonksiyonu kullandık.
canplay eventı da ses dosyası hazır olduğunda çalışmakta. Bu yüzden toplam süreyi bu event içinde aldık yoksa sıkıntı büyük 🙂

Progress Bar

Kendimize özel bir progress bar yapmak istersek önce % değeri hesaplamalıyız. Sonra bu değeri progress bar’da göstermek çocuk oyuncağı 🙂
Bir değerin 100% ünü hesaplamak için formül şöyledir;

MEVCUT DEĞER / TOPLAM DEĞER * 100

Burada mevcut değer currentTime toplam değer duration olacağından bizim % dilimimizi bulduk bile 🙂 Hadi şimdi bunu kodlara dökelim.

// saniyeyi çeviren fonksiyon
function readableDuration(seconds) {
    sec = Math.floor( seconds );    
    min = Math.floor( sec / 60 );
    min = min >= 10 ? min : "0" + min;    
    sec = Math.floor( sec % 60 );
    sec = sec >= 10 ? sec : "0" + sec;    
    return min + ":" + sec;
}

// html audio nesnesi
var audio = $('#audio'),
    trackbar = $('.trackbar'),
    percent = $('.percent'),
    duration = 0;

// oynatma olayı
$('#play').on('click', function(e){
    audio[0].play();
    e.preventDefault();
});

// durdurma olayı
$('#pause').on('click', function(e){
    audio[0].pause();
    e.preventDefault();
});

// hazır olduğunda toplam süreyi yazdır
audio.bind('canplay', function(){
    duration = audio[0].duration;
    $('.duration').text( readableDuration(duration) );
});

// değişiklik olduğunda mevcut süreyi yazdır
audio.bind('timeupdate', function(){
    
    var current = audio[0].currentTime;
    $('.current').text( readableDuration(current) );
    
    // yüzdeyi hesapla
    var currentPercent = Math.ceil( (current / duration) * 100 );
    trackbar.width( currentPercent + '%' );

});

Ancak bu şekilde çok kullanışlı değil.. Progress bar a tıkladığımızda da tıklanan yerden çalmaya devam etmeli.. Bu yüzden kodlarımızda ufak değişiklikler yapalım ve bu sorunu da çözelim.

// saniyeyi çeviren fonksiyon
function readableDuration(seconds) {
    sec = Math.floor( seconds );    
    min = Math.floor( sec / 60 );
    min = min >= 10 ? min : '0' + min;    
    sec = Math.floor( sec % 60 );
    sec = sec >= 10 ? sec : '0' + sec;    
    return min + ':' + sec;
}

// html audio nesnesi
var audio = $('#audio'),
    progress = $('.progress'),
    trackbar = $('.trackbar'),
    percent = $('.percent'),
    duration = 0;

// oynatma olayı
$('#play').on('click', function(e){
    audio[0].play();
    e.preventDefault();
});

// durdurma olayı
$('#pause').on('click', function(e){
    audio[0].pause();
    e.preventDefault();
});

// hazır olduğunda toplam süreyi yazdır
audio.bind('canplay', function(){
    duration = audio[0].duration;
    $('.duration').text( readableDuration(duration) );
});

// değişiklik olduğunda mevcut süreyi yazdır
audio.bind('timeupdate', function(){
    
    var current = audio[0].currentTime;
    $('.current').text( readableDuration(current) );
    
    // yüzdeyi hesapla
    var currentPercent = Math.ceil( (current / duration) * 100 );
    trackbar.width( currentPercent + '%' );

});

progress.on('click', function(e){
    
    // farenin  x konumu
    var posX = $(this).offset().left;
    
    // progress barın toplam genişliği
    var totalWidth = $(this).width(),
    
        // farenin tıklanan nesneden x ekseninda uzaklığı (genişliği)
        currentWidth = e.pageX - posX;
    
    // tıklanan yere göre % değeri
    var clicked = (currentWidth / totalWidth) * 100;

    // bilinen % değerine göre zaman hesabı
    var resultSecond = duration * clicked / 100;

    trackbar.width(clicked + '%');
    audio[0].currentTime = resultSecond;
    
    audio[0].play();
    
});

Yükleneni Progressda Gösterme (buffered)

Bunun için progress eventını kullanacağız. Ve bu event içinde oynatmadan önce yüklenmiş ya da yüklenmekte olan değeri alacağız.

// saniyeyi çeviren fonksiyon
function readableDuration(seconds) {
    sec = Math.floor( seconds );    
    min = Math.floor( sec / 60 );
    min = min >= 10 ? min : '0' + min;    
    sec = Math.floor( sec % 60 );
    sec = sec >= 10 ? sec : '0' + sec;    
    return min + ':' + sec;
}

// html audio nesnesi
var audio = $('#audio'),
    progress = $('.progress'),
    trackbar = $('.trackbar'),
    percent = $('.percent'),
    buffered = $('.buffered'),
    duration = 0;

// oynatma olayı
$('#play').on('click', function(e){
    audio[0].play();
    e.preventDefault();
});

// durdurma olayı
$('#pause').on('click', function(e){
    audio[0].pause();
    e.preventDefault();
});

// hazır olduğunda toplam süreyi yazdır
audio.bind('canplay', function(){
    duration = audio[0].duration;
    $('.duration').text( readableDuration(duration) );
});

// değişiklik olduğunda mevcut süreyi yazdır
audio.bind('timeupdate', function(){
    
    var current = audio[0].currentTime;
    $('.current').text( readableDuration(current) );
    
    // yüzdeyi hesapla
    var currentPercent = Math.ceil( (current / duration) * 100 );
    trackbar.width( currentPercent + '%' );

});

progress.on('click', function(e){
    
    // farenin  x konumu
    var posX = $(this).offset().left;
    
    // progress barın toplam genişliği
    var totalWidth = $(this).width(),
    
        // farenin tıklanan nesneden x ekseninda uzaklığı (genişliği)
        currentWidth = e.pageX - posX;
    
    // tıklanan yere göre % değeri
    var clicked = (currentWidth / totalWidth) * 100;

    // bilinen % değerine göre zaman hesabı
    var resultSecond = duration * clicked / 100;

    trackbar.width(clicked + '%');
    audio[0].currentTime = resultSecond;
    
    audio[0].play();
    
});

audio.bind('progress', function(){
    try {
        var currentBuffered = audio[0].buffered.end(audio[0].buffered.length - 1) / duration * 100;
        buffered.width(currentBuffered + '%');
    } catch ( err ){
        // err
    }
});

Sesin Bittiğini Anlamak (ended)

Ses bittiğinde bunu yakalamak için ended eventını kullanıyoruz.

audio[0].addEventListener("ended", function() {
    alert("ses bitti!");
});

Diğer Bazı İşe Yarar Şeyler

var audio = $('#audio')[0];

// sesi kapatma
audio.muted = true;

// sesin ayarını oynama
audio.voluma = 0.2;

// sesin mevcut zamanını alma
audio.currentTime;

// sesion toplam zamanını alma
audio.duration;

// sesion zamanını ayarlama
audio.currentTime = 15; // 15. sn

// sesi otomatik oynatma
audio.autoplay = true;
audio.load();

// sesin kontrollerini açmak ya da gizlemek için
audio.controls = true;
audio.controls = false;

// sesion kaynak adresini almak için
audio.currentSrc;

// sesin durup durmadığını anlamak için
audio.paused;

// sesin oynayıp oynamadığını anlamak için
audio.played;

// ön yüklemeyi kapatma
audio.preload = "none";

Dosya Seçerken Filtreleme İşlemi Yapmak (accept)

Örneğin fotoğraf yükleteceğiniz bir alanda gözat butonuna bastığında bilgisayarda ki tüm dosyaların değilde sadece fotoğraf olan görsellerin listelenmesi her zaman yükleyen kişiye bir avantaj sağlar ve buda sitenizde olumlu feedback’ler demektir 🙂 Bu yüzden sitenizi kullanan kişileri fazla yormamak en sağlıklısıdır. Yani bir profil fotoğrafı yüklemek için binlerce dosyanın içerisinde küçücük bir imaj dosyasını aratmaktansa sadece imaj dosyalarını göstermek çok daha mantıklıdır öyle değil mi?

İşte bunu html‘de bulunan accept niteliği ile yapabiliyoruz.

Alabileceği değerler

  • audio/* —— Tüm ses dosyaları
  • video/* —— Tüm video dosyaları
  • image/* —— Tüm resim dosyaları
  • Mime Tipleri —— Gözatmak için tıklayın!


Kullanımı

<input type="file" accept="image/*" />
ya da 
<input type="file" accept="text/html, image/png" />

Geolocation Kullanımı [HTML5] [Google Maps Örneği ile]

Geolocation ile bulunduğunuz yerin konumunu alabiliyorsunuz. Böylece en basitinden herhangi bir harita servisi ile bulunduğunuz yeri doğrudan haritada görüntüleyebilirsiniz. Öncelikle bunun çalışma mantığını anlayalım, daha sonra ise google maps ile entegreli bir örnek hazırlayalım sizinle.Geolocation ile bulunduğunuz yerin konumunu alabiliyorsunuz. Böylece en basitinden herhangi bir harita servisi ile bulunduğunuz yeri doğrudan haritada görüntüleyebilirsiniz. Öncelikle bunun çalışma mantığını anlayalım, daha sonra ise google maps ile entegreli bir örnek hazırlayalım sizinle.

İlk olarak tarayıcının bu özelliği destekleyip desteklemediğini şu şekilde anlıyoruz;

if ( navigator.geolocation ){
    // sorun yok devam edebiliriz..
} else {
    // özellik desteklenmiyor
}

Eğer destekliyorsa buradan devam ediyoruz. Ve konumumuzu almak için işlemi başlatıyoruz, zaten bunu yaparken kullanıcı izin vermediği taktirde konumunu alamıyoruz.

navigator.geolocation.getCurrentPosition(function(pos){
     alert("Enlem: " + pos.coords.latitude + "\nBoylam:" + pos.coords.longitude);
});

Sonuç olarak kodlarımızın son hali şöyle olmalı;

if ( navigator.geolocation ){
	navigator.geolocation.getCurrentPosition(function(pos){
		alert("Enlem: " + pos.coords.latitude + "\nBoylam:" + pos.coords.longitude);
	});
} else {
	alert('Tarayıcınız bu özelliği desteklemiyor.');
}

Bunu bir fonksiyon içerisine alalım, işin içine hiç jquery katmadan bir butona bastığımızda çalıştıralım.

function getCoords(){
	if ( navigator.geolocation ){
		navigator.geolocation.getCurrentPosition(function(pos){
			alert("Enlem: " + pos.coords.latitude + "\nBoylam:" + pos.coords.longitude);
		});
	} else {
		alert('Tarayıcınız bu özelliği desteklemiyor.');
	}
}

Ve bir buton oluşturup, onclick içerisinde bu fonksiyonu tanımlayalım.

<button onclick="getCoords()">Koordinatları Getir</button>

Google Maps ile Bulunduğumz Yeri Haritada Göstermek

Evet artık enlem ve boylam değerlerine sahibiz.. Şimdi bu değerleri kullanarak google maps ile bulunduğumuz yeri haritada gösterelim.

İlk olarak yine mevcut script kodlarımızı yazıyoruz.. Ancak bu sefer enlem ve boylam değerlerini değişkenlere aktaralım;

function getMapCoords(){
	
	if ( navigator.geolocation ){
		
		navigator.geolocation.getCurrentPosition(function(pos){
			
			var enlem = pos.coords.latitude,
				boylam = pos.coords.longitude;
			
			// harita kodları buraya gelecek
			
		});

	} else {
		alert('Tarayıcınız bu özelliği desteklemiyor.');
	}
	
}

Evet şimdi sıra geldi harita kodlarımıza.. İlk olarak harita ayarlarımızı yapalım;

var haritaAyarlari = {
	center: new google.maps.LatLng (enlem, boylam),
	zoom: 15
};

Burada zoom değeri ne kadar çok olursa o kadar yakınlaşacaktır. enlem ve boylam değerlerinide LatLng() metodu içerisinde belirttik.

Şimdi harita id’li nesnemizi gösterelim ve daha sonra haritayı içerisine gömelim.
(Bu nereden geldi diyebilirsiniz 🙂 Birazdan html oluşturduğumuzda id’si harita olan ve genişlik yükseklik değerleri belirlenmiş bir nesne oluşturacağız)

document.getElementById("harita").style.display = 'block';
var harita = new google.maps.Map(document.getElementById("harita"), haritaAyarlari);

Ve son olarak bulunduğumuz yeri haritada işaretleyelim 🙂

/**
 * Bulunduğumuz Yeri İşaretleyelim
 */
new google.maps.Marker({
	position: harita.getCenter(),
	map: harita,
	title: 'Sen Buradasın!'
});

Evet şimdi son olarak google maps’in script dosyasını dahil etmemiz gerekiyor;

<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script>

Siz burada kendi key’iniz kullanmak isterseniz buradan google hesabınızla giriş yapın ve google maps 3’ü aktif edin. Daha sonra oradan create project deyip gerekli key’leriniz alın ve kendinizinkini kullanın 🙂

Yapamayanlar olursa ing. anlatımı: http://www.w3schools.com/googleAPI/google_maps_api_key.asp

Neyse efendim, son olarak kodlarımız şöyle olmalı;

<!DOCTYPE HTML>
<html lang="en-US">
<head>

	<meta charset="UTF-8">
	<title>Erbilen.NET</title>
	
	<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script>
	<script type="text/javascript">
	function getMapCoords(){
		
		if ( navigator.geolocation ){
			
			navigator.geolocation.getCurrentPosition(function(pos){
				
				var enlem = pos.coords.latitude,
					boylam = pos.coords.longitude;
				
				/**
				 * Harita Ayarları
				 */
				var haritaAyarlari = {
					center: new google.maps.LatLng (enlem, boylam),
					zoom: 15
				};
				document.getElementById("harita").style.display = 'block';
				var harita = new google.maps.Map(document.getElementById("harita"), haritaAyarlari);
				
				/**
				 * Bulunduğumuz Yeri İşaretleyelim
				 */
				var marker = new google.maps.Marker({
					position: harita.getCenter(),
					map: harita,
					title: 'Sen Buradasın!'
				});
				
			});

		} else {
			alert('Tarayıcınız bu özelliği desteklemiyor.');
		}
		
	}
	</script>
	
</head>
<body>

<div id="harita" style="display: none; width: 500px; height: 300px; background: #eee"></div>
<button onclick="getMapCoords()">Haritada Yerimi Bul</button>

</body>
</html>

Harita Tipini Belirlemek

Şuan çizim şeklinde gözüküyor harita.. Bunu uydu görünümüne getirebiliriz. O zaman kodlarımızda harita ayarlarını şöyle değiştirmemiz gerekecek sadece;

var haritaAyarlari = {
	center: new google.maps.LatLng (enlem, boylam),
	zoom: 19,
	mapTypeId: google.maps.MapTypeId.SATELLITE
};

İNDİR

http://yadi.sk/d/_lKHKY029ZPGL

Not: Bu örneği çalışır test edebilmek için sunucu üzerinde deneyin.

Form İçinde Submit Butonunun Önemi

Eğer ajax ile form işlemleri yapıyorsanız bu durum başınıza gelmiştir.. Olası bir senaryo şöyle olabilir.. Üye giriş işlemi yaptığımızı farz edelim.. Kod yapımız şöyle olsun;

<form action="" method="post" onsubmit="return false">
Kullanıcı Adı: <input type="text" name="kadi" /><br />
Şifre: <input type="password" name="sifre" /><br />
<a href="#" onclick="$.login()">Giriş Yap</a>
</form>

Şimdi bunda herhangi bir sorun yok.. Ama kullanıcı adı ve şifremizi doldurup şifre bölümünde enter’a basınca form submit edilmez.. Ya da şöyle söyleyeyim, ajax işlemi gerçekleşmez.. İllaha giriş yap butonuna tıklamamız gerekir.. Böyle durumlarda form içinde bir submit butonu koyup ona onclick işlemi atamamız en sağlıklısı.. Böylece herhangi bir form elemanında enter tuşuna basarakta formu submit ettirmiş oluruz.. Yani şöyle değiştirirsek sorunumuz çözülür;

<form action="" method="post" onsubmit="return false">
Kullanıcı Adı: <input type="text" name="kadi" /><br />
Şifre: <input type="password" name="sifre" /><br />
<button type="submit" onclick="$.login()">Giriş Yap</button>
</form>

Sayfa Yenilenmeden Link Yapısını Değiştirmek (history.pushState)

Modern tarayıcılarda çalışan HTML5’in güzel nimetlerinden olan history.pushState metodu ile, sayfa yenilenmeden link yapımızı dinamik olarak değiştirebileceğiz.. Ve ajax’ın da işin içine girmesi ile baştan aşağı dinamik ve hiç yenilenmeden içerik ve linklerin değiştiği bir site hazırlayacağız.. Yararlı olması dileğiyle..

Düzelme Videosu

Ders bittikten sonra bir hatayı farkettim, ve hemen bir düzeltme videosu hazırladım.. Ben kaynak dosyaları bu şekilde güncelledim, eğer bundan önce indirenleriniz var ise, tekrar indirmeleri rica olunur 🙂

Html5 Notification (Bildirim) Özelliği

Bu dersimde henüz bir taslak olmasına rağmen işe yarayan html5 nimetlerinden olan notifications özelliğinden bahsetmek istiyorum. Yararlı olması dileğiyle..Bu dersimde henüz bir taslak olmasına rağmen işe yarayan html5 nimetlerinden olan notifications özelliğinden bahsetmek istiyorum. Yararlı olması dileğiyle..

Kullanıcıdan İzin Almak

Bildirimlerin gözükmesi için kullanıcıdan izin alınması gerekir.. İzin almak içinse aşağıdaki işlemler yapılmalıdır;

if ( window.webkitNotifications.checkPermission() == 1 ){
	window.webkitNotifications.requestPermission();
} else {
	alert('Zaten bu site için işlem yapılmış');
}

checkPermission => izin kontrolüdür. Değeri 1 ise izin istenme işlemi yapılmamış, 0 ise yapılmış anlamındadır.
requestPermission => izin isteme metodudur.

Bildirimin Gözükmesi

Bildirimin kullanıcıya gözükmesi için aşağıdaki şekilde işlem yapılmalıdır;

var test = window.webkitNotifications.createNotification(
	'http://www.gravatar.com/avatar/be2da7976e64ff4211a4ff7b22b10b58',
	'Tayfun Erbilen',
	'Bu bir test içeriğidir..'
);
test.show();

createNotification => bildirim oluşturmak için gerekli metottur. 3 parametre alır bunlar sırasıyla resim, başlık ve açıklamadır.

Bildirim Göründü ve Kapatıldı Fonksiyonları

Bunun için aşağıdaki kodları kullanmanız yeterlidir;

test.ondisplay = function(){
	alert('bildirim göründü');
}
test.onclose = function(){
	alert('bildirim kapatıldı!');
}

Burada test değişkeni bir yukarıda oluşturulan bildirimi temsil etmektedir.