Merhaba sevgili e-bergi okurları, bu yazımda sizlere HTML5’ten bahsedeceğim.

HTML5, internet sayfalarının yapısını oluşturan dil olan HTML standartlarının hem insanlar hem de bilgisayarlar tarafından daha uyumlu bir şekilde anlaşılması ve bazı eklentilerle giderilen ihtiyaçların belirli bir standart altında toplanması amacıyla ortaya çıkmıştır. Şu an halen geliştirilme aşamasındadır.

HTML niye yeterli değildi?

Öncelikle HTML’de sayfayı belli kısımlara ayırmak için "div"(division, bölüm) etiket(tag)'i ve sadece div etiketi kullanılıyordu. HTML5 ile birlikte gelen "nav", "article", "header", "section" vb. etiketler ile birlikte sayfa daha mantıklı bölümlere ayrılabiliyor. Bu da arama motorlarının işini kolaylaştırıyor diyebiliriz.

Sonra bütün bilgisayarların %98'inde yüklü olduğu söylenen Flash... Neredeyse herkesin bilgisayarında yüklü olsa da Apple'ın flash desteğini kaldırmasıyla başlayan olaylardan sonra herkes Flash'ı terketmeye hazırdı. Tabi bunda bir bilgisayar kadar işlem gücü olmayan mobil cihazların hızlı yükselişi de göz ardı edilemez. Youtube da “Hadi HTML5 çıktı neymiş bu?” diyenlerdendi. Deneme sürümü altında HTML5 kullandılar ama istedikleri performansı alamadıklarını söyleyerek tamamen HTML5 kullanımına geçmediler. Görünüşe göre Flash'tan vazgeçmek o kadar da kolay olmayacak.

Şu özelliklere daha yakından bakalım:

Canvas

"canvas"(canvas, tual) etiketi adından da anlaşılacağı gibi 2 boyutlu ya da 3 boyutlu çizim yapmamıza yarıyor. Bunun sayesinde basit dikdörtgenler, eğriler veya vektör çizimler yapılabiliyor. "canvas" kullanılarak oldukça iyi oyunlar bile yapılabilir.

Birçok sitede buna ait dersler ve örnekler mevcut, öğrenmek de zor değil. Geriye bir tek hayal gücünüz kaldı herhalde. :)

Web Depolama ve Web SQL Veritabanı

Web depolama yıllardır var olan kurabiyelerin(cookie) daha iyisi gibi düşünülebilir. Temelde daha fazla ve daha kalıcı veri tutmamıza yarıyor diyebiliriz. Bunlar localStorage(yerel depolama) ve sessionStorage(oturum için depolama) nesneleri ile yapılıyor. Yerel depolamada sakladığımız veriler özellikle silinmezse tutulmaya devam ediliyor; ama oturum için depolamada tarayıcı penceresi veya sekmesi kapatıldığında otomatik temizleniyor. Web SQL veritabanında ise kullanıcının tarayıcısında bize ait bir SQLite veritabanı kullanıyoruz.

Yerel depolama kullanımı da şu şekilde:

if(window.localStorage) { //window.localStorage öznesi varsa tarayıcımız bunu destekliyor demektir o zaman kullanabiliriz. window.localStorage.setItem("isim", "veri"); // Yerel depolamada 'isim' isimli bir veri tutuyoruz bunun içeriği de 'veri' oluyor. }

var isim = "" //isim değişkeninin varsayılan değerini giriyoruz. yani yerel depolamada veri bulunamazsa bu kullanılacak. if(window.localStorage) { isim = window.localStorage.getItem("isim"); }

Uygulama Önbelleği

Bu özellik sayesinde web sitemiz ziyaret edildiğinde tekrar indirilmesi gerekmeyen dosyalar tarayıcı önbelleğinden kullanılabilecek. Şu anda tarayıcılarda kullanıcıların web sitelerine daha hızlı erişmesi için önbellek özelliği var ama HTML5 ile birlikte geliştiriciler de önbelleğe erişebilecek.

Donanım Desteği

Web Workers(işçiler) özelliği sayesinde sadece tarayıcının işlemleri ile değil kendimize ait işlemlerde de javascript çalıştırabileceğiz. Bunun için yeni bir worker(işçi) nesnesi oluşturuyoruz ve karmaşık işlerimizi başka bir işlem üzerinden yapıyoruz. Bu sayede tarayıcının işlemiyle sınırlı kalmamış, son yıllarda en az 2 olan çekirdek sayısından yararlanmış ve tarayıcıyı da sıkıntıya sokmamış oluyoruz. Yani tarayıcıya fazla yüklenilip çökme yaşanmıyor veya tarayıcı bizim işlemimiz bitene kadar diğer işlerini durdurmak zorunda kalmıyor.

Web Sockets

Ajax’la birlikte sayfanın belli bir kısmını güncelleme özelliği hemen hemen her web sayfasında kullanılıyor. Socket, türkçede bağlantı, priz anlamına geliyor ama bağlantı kelimesinin anlamı tam karşılamaması ve prizin de çeviri faciası olması nedeniyle soket kelimesini kullanacağım. Soket ile birlikte Ajax’la gelen bu özellik bir adım daha öteye gidiyor ve iletişim iki taraflı oluyor. Bu iletişim sırasında HTTP headers(başlıklar) yükü kalkıyor ki bu bant genişliğini azaltmak için çok iyi bir gelişme.

Sürükle Bırak

Google Görseller'de, masaüstünüzdeki resmi arama kutucuğuna sürükleyerek benzer resimleri veya resimdeki elemanı bulabiliyorsunuz. Bu işlem çok kolay olmasa da artık sürükle bırak kısmı 2-3 satır kodla sağlanabilecek.

Ses ve Video

Bir de ses ve video var. Bunlar "audio" ve "video" etiketleri ile sağlanabiliyor. Hem de tarayıcıların varsayılan kontrol çubuğu, ses çubuğu ve oynat/duraklat butonları sayesinde çok da kolay oluyor. Tabii kendi kontrollerinizi yapmak istiyorsanız bu da mümkün.

Bir başka yazımızda görüşmek üzere...