Merakla beklediğim(iz) HTML 5 standartlarının taslağı bitti gibi. Bugün (13 Aralık 2007 ) itibari ile yeni belirteçler ve izahat sunuldu. İlk gözüme çarpan şeyler elbetteki yeni taglar. Web 2.0 ‘nin hayatımıza hızlıca girmesi ve bir web sitesinden çok web uygulamalarının önem kazanması, eski hantal ve programcıya takla attıran tagların yerine yeni kısa ve işlevsel taglar getirdi.

<div> çok yoruldu…

Gözüme ilk çarpan taglar <section>, <nav>, <article>, <aside>, <header> ve <footer>. Taglara baktığımızda HTML 5′in Blog’lardan epey etkilendiği izlenimi edindim. Tagları incelediğimde tüm bu tagların block-level element olduğunu görüyorum. Tagların kullanım şekilleri ve extra yeni özelliklerin olmadığını gördüğümüzde <div> elementi ile bir farkı olmadığını zannediyoruz. Ancak bu; bu elementlerin boş yere eklendiği manasını taşımıyor. WEB 2.0 standartlarını kullanan programcılar için daha az kod yazması, dahada kilo veren HTML 4 ve içeriğe element seviyesinde izin veren taglar anlamına geliyor.

Bidiğiniz gibi ortalama bir sitede bölümler, başlıklar, açıklamalar, alt kısım, menü ve bloklar gibi çeşitli kısımlar bulunuyor. Önceden <div id=”header”>, <div c lass=”nav”>, <div id=”footer”> gibi bir id veya class atayarak belirttiğimiz div elementinin çok yorulduğunu düşünen HTML 5 grubu bu tag’ları icad etmiş. Yani artık header’a, menümüze, içeriğimize gerek CSS gerek JavaScript ile doğrudan ve daha az kodla erişmiş olacağız. Zekice ve bizi düşünen bir yaklaşım.

Medyatik Taglar

Bir diğer dikkatimi çeken ve sizlerin de çok seveceği <video> ve <audio> tagları. YouTube ‘un internette çığır açtığı video çılgınlığı ve onu takip yüzlerce video ve audio paylaşım siteleri dünyanın en ücra köşesindeki olup biteni ayaklarımızın dibine hemde saniyesinde getirmesi HTML 5 grubunu baya etkilemiş.

Biz programcıların en baş ağrıtıcı konusu onlarca farklı video ve audio formatı için standart bir web player’in olmayışı ve medyamızı web sitemizde yayınlamak için Flash yada Java gibi yazılımlarla (kendisi bile başa dert 3. parti yazılımlarla) bir player yazmak yada bazı hazır olarak dağıtılan bir web video player ve framework’lardan faydalanmamız gerekiyordu.

İşte <video> ve <audio> tagları bu konuda derdimize derman olacak gibi (Gerekli testleri yaptıktan sonra daha kendinden emin bir cümle ile değiştireceğim) duruyor. Yayınlamak istediğimiz video yada audiyi kullanıcının bilgisayarında bulunan varsayılan player ile oynatıyor. Üstelik player için kontrol düğmeleri, bize özel arabirim koymamız bile mümkün.

Şimdilik bildiğim (araştırdığım) kadarıyla <video> elementi için Opera ve Webkit (Mac Kullanıcıları için), Firefox 3 (Henüz yayınlanmadı) destek veriyor.

Örnek:<video> elementinin kullanımı

<video src=”videomuz.mov” controls poster=”bizim_arabirim.jpg” width=”640″ height=”480″>
Tarayıcınız video oynatmayı Desteklemiyor…
‘ Eğer kullanıcı eski bir tarayıcı
‘ kullanıyorsa bir hata mesajı yazdırabilir
‘ yada diğer kodlarımızı çalıştırabiliriz.
</video>

Formlarımız artık kendini kontrol edebiliyor

HTML 5 in getirdiği bir diğer yenilik client tabanlı veri giriş kontrolünün de sağlandığı Web Forms 2 elemanları. HTML 4 ile <input type=text /> <input type=password.. /> gibi genel, sınırlı ve verileri extra kod yazmadan doğrulanamayan textbox’lar vardı.

HTML 5 bu veri giriş tiplerine(type) ek olarak bir çok yeni tip ekledi, üstelik bunlar client tarafından extrra kod yazmadan test edilebilen akıllı textbox’lar. HTML 4 ile formlardaki verilerin doğruluğunu onlarca satır JavaScript yazarak sınardık. Artık kendi doğruluğunu test eden form elemanlarımız var, bu elemanlarımızın tipini belirtip verinin doğruluğu client (kullanıcının tarayıcısı) tarafından test edilmesini sağlayabiliyoruz. Pattern’ler tanımlarak da test edilen Inputların sonucunu yine HTML 5 elementi olan <output> tagı ile gösterebilirz.

Yeni veri tipleri:

<input
type=email:
type=url:
type=date:
type=range:
/>

<input name=“sayi_araligi” type=“range”>
<output onformchange=“value=sayi_araligi.value”>0</output>

<label> Kredi Kartı Numaranız :
<input pattern=“[0-9]{13,16}” name=“cc”>
</label>

Bir diğer elaman ise datalist. Google Suggest‘i bilirsiniz biz kutucuğa yazmaya başladığımız an yazdığımız harflerle ilgili verileri bulup aşağıda seçmemiz için bize gösteriyor ve bizde aşağıdan onu seçiyorduk. İşte datalist elemanı yine onlarca satır JavaScript yazma derdinden bizi kurtarıyor.

<input list=”Sehirler”>
<datalist id=”Sehirler”>
<option value=”Adana”>
<option value=”Adıyaman”>
<option value=”Gaziantep”>
<option value=”Istanbul”>
</datalist>

kodlardan da görebileceğiniz gibi #ID’si “Sehirler” olan datalist elemanı altına sehirlerimizi yazdık. Sehirlerin gösterileceği input’umuza list=”Sehirler” diye bir atama yapıyoruz. Bu atama ile input’umuza sadece #Sehirler datalistine ait value’leri göstermesini istiyoruz.

Diğer yenilikler

Değişen bir çok şey var ama bugünlük yeter. Yeni Elementleri ve HTML 4 ile HTML 5 arasındaki farklılıkları merak ediyorsanız http://www.w3.org/html/wg/html5/diff/ linkini tıklayabilirsiniz.

Not: Bu makalede tanıtmaya çalıştığım bir çok bilgiyi (Uyumlu tarayıcı eksikliğinden) test etme imkanım olmadı. Bilgileri referanslara dayanarak anladığım gibi anlatmaya çalıştım. Özellikle yeni elemanlarının kullanım biçimleri ve örnekleri en kısa zamanda doğrulamaya çalışacağım. Gördüğünüz hataları lütfen bana iletiniz.