HTML 5 ve Getirdiği Yenilikler

[N3CAT1]

Giriş

Html 4 yaklaşık 10 yıldır kullanımda ve şuana kadar önemli bir değişim geçirmedi. HTML5 eski sürüme bazı yeni özellikler eklenerek geldi. Çok fazla sayıda olmasa da çok kullanışlı özellikler barındırıyor. Çalışmalar 2004'de başlamıştı. HTML 5'de şuan ki en dikkat çekici ve kullanışlı element CANVAS olarak gösteriliyor.

Yeni Elementlere Göz Atalım

<canvas>

<canvas> Javascript ile kontrol edilen bir 2 boyutlu bir çizim alanı. Geniş bir kullanım alanı var. Grafikler, oyunlar, sunumlar ve bir çok alanda kullanılabilir. Javascript ile kontrol edildiği için kolaylıkla uyum sağlayabileceğiniz bir element. Canvas elementi ile ilgili örneklere bakmak isterseniz RGraph adresini ziyaret edin. Tabi ki HTML 5'i destekleyen bir browser ile. Şuanda IE 8 veya Firefox 3 kullanabilirsiniz. Aşağıda <canvas> elementi kullanılarak oluşturulmuş grafik örnekleri var.

Yukardaki gibi bir grafiği HTML 5 kullarak çizmek için aşağıdaki gibi javascript kodları yazmak yeterli oluyor.

window.onload = function ()

{
    var data = [280,45,133,166,84,259,266,960,219,311];
    var bar = new Bar('myCanvas', data);
    bar.Set('labels', ['Metin', 'ilhan', 'Osman', 'Sabri', 'Orhan', 'Ali', 'Hüseyin', 'Ismail', 'Veli', 'Deli']);
    bar.Set('gutter', 45);
    bar.Set('line', true);
    bar.Set('barcolor1', '#fff');
    bar.Set('barcolor2', '#fff');
    bar.Set('backgroundgrid', true);
    bar.Set('colors', ['#f00']);
    bar.Draw();
}

Yukarıdaki javascript kodunda gördüğünüz gibi canvas kütüphanesini kullanmak çok kolay.

<video>

Video tagı web sitenize video klipleri kolayca eklemenizi sağlayacak. Otomatik başlatma, döngüsel olarak çalıştırma gibi özellikleri olan video elementi videonuzu etiketlemeniz için birçok özellik içeriyor.

<audio>

Audio tagı video elementi ile aynı şekilde kullanılıyor, tek farkı video değil ses dosyalarını sitenize eklemeye yarıyor.

Context menüler

HTML5 context menü tanımlamak için yeni metotlar içeriyor. Context menüler genellikle web sitelerinde kullanılmazlar fakat web uygulamalarında kullanılan ve çok işe yarayan elementlerdendir.

HTML 5 ile gelen diğer elementler:

<progress> : İşlem süreci göstergesi ekler.
<caption> : Başlık olarak düşünülen metinleri düzenler.
<header> : Sitenin başlık ve açıklama içeriğini alır.
<nav> : Menüleri ve bir takım zaruri işlevleri içine alır.
<footer> : Sitelerin en alt kısmını içine alır.
<section> : Sitelerin ana içerik kısmını içine alır.
<aside> : Ana içerikte ayrı yazılan kısımdır.
<article> : Makale, deneme tarzı yazıları kapsar.
<embed> : Dışarıdan eklenen componentler için kullanılır. (Örn : .swf uzantılı dosyalar)
<details> : Detay bilgisi içerir.
<summary> : Yazının başlığını belirler.
<time> : Tarih, saat verilerini kapsar.
<mark> : Yazı içerisinde özellikle üstünde durulan kelimeleri belirler.
<fig>
<figure>
<hgroup>

Ayrıca HTML 5 ile yeni input (giriş) tipleri de geldi. Bunlar:

• datetime
• datetime-local
• date
• month
• week
• time
• number
• range
• email
• url

HTML 5 ile değişen veya devre dışı kalan elementler:

• acronym
• applet
• basefont
• big
• center
• dir
• font
• frame
• frameset
• isindex
• noframes
• noscript
• s
• strike
• tt
• u

HTML 5 içeren örnek siteler:

http://canvex.lazyilluminati.com/83/play.xhtml
http://www.benjoffe.com/code/games/torus/
http://ljouanneau.com/lab/html5/demodragdrop.html
http://html5demos.com/drag-anything


Kaynak1
Kaynak2
Kaynak3

 

[WordPress]

html 5 süper bişey.flasha elveda

 

[N3CAT1]

Aslında html5 ile ilgili bişeyler yapsak ufak ufak iyi olacak

 

[SwateR]

Destek verilse, geliştirilse çok güzel olacak.

 

[N3CAT1]

Destek verilse, geliştirilse çok güzel olacak.

Destek gelecektir. Youtube sadece mobil platform için html5 desteği vereceğini söyledi ama bana göre tamamına verecek. Sağ gösterip sol vurmak istiyor olabilir