Web Storage özelliği tarayıcı tarafında verir saklamamızı sağlıyor yani basit bir veritabanı diyebiliriz. Bir anahtar(key) birde bu anahtara bağlı olan değer(value) vasıtası ile verilerimizi depoluyoruz Web Storage ile.

Tarayıcı tarafında veri saklamak yeni bir özellik değil, yıllardır çerezler(cookies) ile bu işlemi yapıyorduk ve hala yapmaya devam ediyoruz aslında.

Peki Web Storage’ın bize getirdiği avantajlar neler?

1. Bildiğiniz üzere çerezler sadece tarayıcı tarafındaki uygulamaların bilgi bilgi saklaması için geliştirilmemiştir. Çerezler aynı zamanda sunucu üzerinden tarayıcıda bilgi saklamak içinde kullanılır. Bu  yüzden her çerez sunucuya gönderilmek zorundadır.Açmak gerekirse siz tarayıcıda javascript kullanarak bir çerez oluşturup bu çereze teorik olarak 1MB boyunda bir değer girdiğinizde her http isteği için tarayıcı bu 1MB boyuntundaki veriyi sunucuya gönderecektir ve bu şekildeki kullanım gereksiz bir hantallığa yol açacaktır. Bu noktada imdadımıza Web Storage yetişiyor. Web Storage ile sakladığımız veriler http isteklerinde sunucuya gönderilmeyecektir.
2. Web Storage ile çerezlerden daha kullanışlı ve kolay veri saklıyabiliyoruz.

Web Storage kaça ayrılır.

Web Storage ikiye ayrılır;

1. Session Storage.
2. Local Storage.

Session Storage: “Storage” nesnesinden türetilmiştir. Session Storage ile sakladığımız verilerin ömrü tarayıcı kapana kadardır. Tarayıcı kapandıktan sonra bu veriler imha edilir.

Local Storage: Session Storage da olduğu gibi yine “Storage” nesnesinden türetilmiştir. Local Storage daki verilerin ömrü ise sonsuzdur. Yani Local Storage ile şuan yazdığımız bir veriyi bir yıl sonrada okuyabiliriz. Tabi ki tarayıcının başına kötü birşey gelmez ise

Session Storage ile Local Storage aynı method ve özelliklere sahiptir bunlar;

• “length” yazılmış verilerin adet olarak toplam sayısını verir.
• “getItem(anahtar)” girilen anahtar ismine ait veriyi döndürür.
• “setItem(anahtar, değer)” girilen anahtar ismi ve değere göre veriyi depoda saklar.
• “removeItem(anahtar)” girilen anahtar ismine göre veriyi depodan siler.
• “clear()” depoda saklanan tüm verileri siler.

Hangi tarayıcılar Geolocation destekliyor?

Buradan hangi tarayıcıların Geolocation’a destek verdiğine bakabilirsiniz. Ayrıca buradan kullandığınız tarayıcının destek verip vermediğini test edebilirsiniz.

Nasıl Kullanabiliriz?

Çok basit bir sayaç uygulaması ile kullanımına bakalım.

  var sayac = localStorage.getItem("sayac");
  sayac++;
  localStorage.setItem("sayac", sayac);
  $("#sayac").html("Sayac: " + sayac);

var sayac = localStorage.getItem(“sayac”) ile sayac anahtarına bağlı değeri çekiyoruz.

sayac++ ile bu değeri bir artırıyoruz.

localStorage.setItem(“sayac”,  sayac) kodu ile sayac anahtarına yeni sayac değerini ayarlıyoruz ve yeni sayac değerini #sayac elementine aktarıyoruz. Hepsi bu kadar!

Bundan sonra tarayıcımız kapansa dahi yine sayacın bulunduğu sayfa açıldığında sayaç değeri kaldığı yerden artmaya devam edecektir.

DEMO

Kaynaklar:

• http://dev.w3.org/html5/webstorage/
• http://www.quirksmode.org/blog/archives/2009/06/html5_storage_t.html
• http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-learning-about-html5-local-storage/

İnternetin ilk dönemlerinde insanlar genellikle rumuzlar(nickname) ile internette var olmayı tercih ederken, günümüzde gerçek isimleri ve gerçek kişilikleri ile var olmayı tercih ediyorlar. Eğilim bu yönde olunca sadece ad ve soyad paylaşmak da yetmiyor haliyle. Kullanıcılar gittikleri mekanları, o an bulundukları yerleri de bir şekilde paylaşmak istiyorlar. W3C konsorsiyumu da bu ihtiyacı görmüş olacak ki HTML5′e  Geolocation özelliğini ekledi. Bende bu yazımda basit olarak Geolocation’dan bahsetmek istiyorum.

Peki Geolocation nedir?

Geolocation eğer kullandığımız cihazda bir GPS aygıtı var ise GPS’den gelen veriler ile konumumuz tespit ediyor. Eğer herhangi bir GPS aygıtımız yoksa cihazımızda, “IP address, RFID, WiFi and Bluetooth MAC addresses, and GSM/CDMA cell IDs” bu bilgilerden yararlanarak konumuzu tespit etmeye çalışıyor. Çalışıyor diyorum çünkü bu yöntem ile pek doğru sonuçlar elde edemiyoruz .  Geolocation bu işleri bizim adımıza yapan API’dir.

Hangi tarayıcılar Geolocation destekliyor?

Buradan hangi tarayıcıların Geolocation’a destek verdiğine bakabilirsiniz. Ayrıca buradan kullandığınız tarayıcının destek verip vermediğini test edebilirsiniz.

Nasıl kullanabiliriz?

Aslında kullanmak oldukça kolay. “navigator” nesnesi ile kolayca konumu tespit edebiliriz. Aşağıda kullanımını görebilirsiniz.

	if (navigator.geolocation) {
		navigator.geolocation.getCurrentPosition(function(position) {
			var lat = position.coords.latitude;
			var lng = position.coords.longitude;
		});
	} else {
		alert('Tarayıcınız Geolocation desteklemiyor.');
	}

“navigator” nesnesi üzerinden “getCurrentPosition” methodu ile kullanıcının konumunu öğreniyoruz. Ancak bu işlemin gerçekleşmesi tarayıcıdan izin almamız gerekiyor, bu işlemi “getCurrentPosition” methodu bizim adımıza kendi gerçekleştiriyor.

“lat” değişkenimizin değeri enlemi “lng” değişkenimizin değeri ise boylam değerlerini veriyor.

Hepsi bu kadar. Aşağıdaki linkte google maps ile hazırladığım Geolocation demosuna bakabilirsiniz.

DEMO

Kaynaklar:

http://dev.w3.org/geo/api/spec-source.html

Yazının başlığında HTML5 ile gelen yeni bir özellik desem de şuan için sadece Google Chrome 4.x ve üstü tarafından desteklenen bir özellik. Peki nedir bu desktop notification(Masaüstü bildirimi).

Aslında Türk internet kullanıcısı olarak aşina olduğumuz bir kavram, yıllardır ayça 22 olarak tarayıcımızın sağ alt köşesinde oturum açtığını gösteren kutucuk olarak tanımlayabiliriz bildirim kavramını. Masaüstü bildirimin ise bu bildirimlerden ayıran bir farkı var her ne şarta olursa olsun tarayıcı uygulamamız açık olduğu müddetçe bildirimi görüntüleyebileceğimiz. Açmak gerekirse bu şartları, tarayıcı simge durumda küçültülmüş de olsa veya arkaplan da kalmış da olsa bildirimiz görüntülenecektir.

Bildirim konusu, internet ile  etkileşimin bu denli arttığı bir dönemde oldukça önemli bir konu. Ancak şuan için sadece Google Chrome 4.x ve üzerinde destek gördüğü için kullanmak içinde oldukça erken bir zaman. Yine de bazı özel uygulamalarımızda kullanabilmemiz mümkün. Şimdi kullanımına bir göz atalım.

Öncellikle kullanıcıya bildirim göndermemiz için izin almamız gerekiyor. Bunu için aşağıdaki metodu uygulamalıyız.

window.webkitNotifications.requestPermission();

İzin aldıktan sonra kullanıcıya bildirim göndermemiz artık mümkün. Bildirim göndermek için ise aşağıdaki metod’dan faydalanıyoruz.

window.webkitNotifications.createNotification(
'Herhangi bir image dosyasını buraya ikon olarak koyabiliyoruz ',
'Bildirim başlığı buraya gelecek', 'Bildirim ile ilgili genel açıklama ise buraya geliyor'
).show();

Gördüğünüz gibi kullanımı oldukça basit. Aşağıdaki linkten faydalanarak Masaüstü Bildiriminden faydalanabilirsiniz.

DEMO

Kaynaklar:

• http://www.chromium.org/developers/design-documents/desktop-notifications
• http://apirocks.com/html5/html5.html#slide12

HTML5 ve CSS3 web’in geleceği olmaktan çıktı artık. Internet Explorer dışında birçok popüler tarayıcı bu standartları şuan destekler konumda. Internet Explorer 9. versiyonu ile bu standartları tam olarak destekleyecek. Tarayıcıların neleri tam olarak desteklediklerine detaylı olarak burdan bakabilirsiniz. HTML5 ile gelen birçok yenilik var bu yeniliklere kullanmak için yeni tagler eklenmiş. Bu yazımda bu yeni gelen tagleri anlatmaya çalışacağım.

HTML5 ile Gelen Yeni Tagler

1. DOCTYPE
2. Charset
3. Header
4. Nav
5. Aside
6. Article
7. Figure
8. Hgroup
9. Section
10. Address
11. Footer

DOCTYPE

DOCTYPE(Döküman Türü) kısacası sayfamızın ne olduğunu tanımladığımız tag. Mutlaka tanımlamamız gereken bir tag’dır. Çünkü burda yapacağımız tanımlamaya göre tarayıcı sayfamızı yorumlayacaktır.

Örnek Kullanımı:

<!DOCTYPE html>

CHARSET

Tarayıcıların sayfamızı hangi karakter seti ile yorumlaması gerektiğini tanımladığımız tag.

Örnek Kullanımı:

<meta charset="utf-8">

HEADER

Header tag’ı bundan önceki tagler den biraz farklı çünkü header tag’i ile herhangi bir bilgiyi deklere etmiyoruz. Bir konteynır olarak tanımlıyoruz.

Peki bu konyetnır’ın içine ne koyuyoruz? Genel de içerisine ana navigasyon linkleri konulur. Peki neden header tagı içerisine koyuyoruz? Semantic web(Anlamsal web) geçiş yapmamızı sağlıyor header tag’i. Arama motorları bu taglari ne olduğunu bildiği için içindeki elementlere bir anlam veriyor ve daha iyi bir arama algoritması kurabiliyor. Bu sayede daha fazla ziyaretçi elde etmemizi sağlayabiliriz.

Örnek Kullanımı

<header>
<nav>
<ul>
<li><a href="#">Ana Sayfa</a></li>
<li><a href="#">Kullanıcılar</a></li>
<li><a href="#">Hakkımızda</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</nav>
</header>

NAV

Sitemizin navigasyonunun yer aldığını konteynir tag’i.

Örnek Kullanımı

<nav>
<ul>
<li><a href="#">Ana Sayfa</a></li>
<li><a href="#">Kullanıcılar</a></li>
<li><a href="#">Hakkımızda</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</nav>

ASIDE

Sayfada yer alan içerikle ilgili ancak önemli bir bilgi yer aldığını anlatmaya çalıştığımız konteynır tag’i.

Örnek Kullanımı

<aside>
<p>Buraya dikkat...</p>
</aside>

ARTICLE

Web sayfaları bildiğiniz üzere sadece içerikten meydana gelmez menüler, reklamlar ve çeşitli tanımlamalar da olur. Ama kullanıcı genelikle bunlarla ilgilenmez. İlgilendiği konu girdiği sayfada ki içeriktir. Bunu belirtiğimiz tag de article tag’i dir.

Örnek Kullanım

<article>
Bu yazımda....
</article>

FIGURE

Figure konteynir’ı ise aside’ın tam zıttı. Yani içerikten farklı bir bilgi girdiğinizi deklere ettiğimiz tag.

Örnek Kullanımı

<figure>
<img src="figure.jpg" alt="figure resmi" />
<figcaption>Burda yeni bir figure var</figcaption>
</figure>

HGROUP

Benzer elementleri gruplamak için kullandığımız tag.

Örnek Kullanım

<hgroup>
<h1>Ana Başlık</h1>
<h2>Alt Başlık</h2>
</hgroup>

SECTION

İçeriğimizin içinde  yeni bir bölüm oluşturmamızı sağlayan tag. Mesela içeriğin içinde giriş bölümü, haberler,  iletişim bilgileri gibi bölümler olsun ve biz bu bilgileri hepsini yeni ayrı bölümler içine yazalım.

Örnek Kullanım

<article>
<hgroup>
<h1>Ana Başlık</h1>
<h2>Alt Başlık</h2>
<hgroup>
<p>Ana section</p>
<section>
<h1>Katergori 1</h1>
<p>Kategori 1 ile ilgli tanımlama</p>
</section>
<section>
<h1>Kategori 2</h1>
<p>Kategori 2 ile ilgili tanımala</p>
</section>
</article>

ADDRESS

İletişim bilgilerini yer aldığını belirlediğimiz tag.

Örnek Kullanım

<address>
<a href="#">Ahmet</a>,
<a href="#">Mehmet</a>,
</address>

FOOTER
İçeriğin bittiğini belirlediğimiz tag. Eğer bir blog sayfası ise içersine o blog yazısı ile ilgili yorumları bu tag’ın içine koyabiliriz.
Örnek Kullanım

<article>
<header>
<h1>Sayfa ile ilgil başlık</h1>,
</header>
<p>İçerik</p>
<footer>
<p>Yorumlar</p>
</footer>
</article>

HTML5 taglerini aktif hale getirelim
Şimdilik bu tagleri kullanmak için bu tagleri display değerlerinin block yapmamız gerekiyor.

header, nav, article, section, footer, figure, aside {
display: block;
}

Gördüğümüz gibi CHARSET ve DOCTYPE dışındaki tagler Şemantik Web’e katkı sağlamak için oluşturulmuş tagler. Şemantik web’e artık yavaş yavaş geçiyoruz. O yüzden HTML5 ile gelen tagleri zaman içerisinde projelerimizde kullanmamız gerekiyor.