Günümüz teknolojisinin getirileri biz kullanıcıları yeni teknolojilere adapte olmak zorunda bırakıyor. HTML 5 bu gereksinimleri gidermek için geçtiğimiz günlerde duyuruldu. Şuan Firefox, Opera, Internet Explorer 8 tarayıcıları tarafından destekleniyor. Özellikle CSS ile gösterdiği uyum geçtiğimiz sürümlere oranla daha da güçlendirildi. Web sitelerindeki yapısal bozukluklara belirli noktalarda çözümler getirilerek uyumluluk oranı arttırıldı.
Mükemmele yakın uyumlu tasarımlar yapmak artık yeni elementler ile mümkün oluyor. Yapısal elementlerde yapılan değişiklikler yazılım geliştiriciler için ilk zamanlarda alışılagelmiş element tanımlamalarından farklı olacak ancak kısa bir sürede yeni elementlere adapte olacağınızdan hiç şüpheniz olmasın.
Yeni Elementleri İnceliyoruz
Yeni elementler JavaScript ve CSS ile uyumlu olarak çalışabiliyor ve verimli sonuçlar ortaya çıkarıyor.
Canvas Elementi
<canvas> elementi HTML 5 ile duyurulan yeni bir elementtir. Önceden canvas ile yapılan işlemleri salt javascript kodlarıyla gerçekleştiriyorduk. Yeni gelen bu özellik ile javascript desteğiyle iki boyutlu grafikler çizebiliyoruz. Grafiklerimizi raporlama gibi kurumsal tarafta kullanabileceğimiz gibi başta oyunlarda olmak üzere birçok alanda kullanabiliyoruz.
Canvas elementi ile bar chart grafikler hazırlayabiliyoruz.
Örnek kod yapısı:
window.onload = function ()
{ var data = [280,45,133,166,84,259,266,960,219,311];
var bar = new Bar('myCanvas', data); bar.Set('labels', ['Richard', 'Alex', 'Nick', 'Scott', 'Kjnell', 'Doug', 'Charles', 'Michelle', 'Mark', 'Alison']); bar.Set('gutter', 45); bar.Set('line', true); // Defunct bar.Set('barcolor1', '#fff'); bar.Set('barcolor2', '#fff'); bar.Set('backgroundgrid', true); bar.Set('colors', ['#f00']); bar.Draw();
}
Donut Chart biçimdeki grafiklerimizi raporlama da dâhil olmak üzere birçok alanda kullanıyoruz. Grafik tabletini andıran görüntüsüyle tasarımlarınıza hoş görünümler kazandırabilirsiniz.
Örnek kod yapısı:
window.onload = function ()
{ var data = [45,57,48,32];
var donut = new Donut('myDonut', data); donut.Set('labels', ['Jan', 'Ben', 'Mark', 'Lucy']); donut.Set('linewidth', 5); donut.Set('strokestyle', '#fff'); donut.Set('tooltips', ['Jan', 'Ben', 'Mark', 'Lucy']); donut.Draw();
}
Gantt chart özellikle sistem analizi ile uğraşanların yakından tanıdığı Microsoft Project programıyla oluşturdukları planlama ve raporlama işlemlerinde sıkça kullanılıyor.HTML 5’in getirmiş olduğu yeni element canvas ile artık tasarım yeteneğinize bağlı olarak farklı grafik biçimleri oluşturabilirsiniz.
Örnek kod yapısı:
window.onload = function ()
{ var gantt = new Gantt('gantt'); gantt.Set('xmax', 365); gantt.Set('gutter', 35); gantt.Set('labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']); gantt.Set('title', 'Holiday schedule for Xyz Ltd'); gantt.Set('defaultcolor', '#f00'); gantt.Set('tooltips', ["<b>Richard</b><br />Richard is going on holiday to Malta.<br />He'll be away for 28 days.", "<b>Fred</b><br />Fred is also going away for 28 days",
"<b>Barney</b><br />Barney is off work for two weeks",
"<b>Gloria</b><br />Gloria is off for 3 weeks",
"<b>Paul</b><br /> Away for 31 days",
"<b>Harry</b><br />Away for three weeks",
"<b>Shane</b><br />Away for one week",
"<b>Barry</b><br />Away for two weeks",
"<b>Cynthia</b><br />Away for two weeks",
"<b>Graham</b><br />Away for August and September",
"<b>Paul</b><br />Away for 31 days"]);
gantt.Set('events'[ [31, 28, null, 'Richard'],
[31, 28, null, 'Fred'],
[59, 14, null, 'Barney'],
[59, 21, null, 'Gloria'],
[59, 31, null, 'Paul'],
[80, 21, null, 'Harry'],
[94, 7, null, 'Shane'],
[120, 14, null, 'Barry'],
[130, 14, null, 'Cynthia'],
[211, 61, null, 'Graham'],
[334, 31, null, 'Paul'],
]);
gantt.Set('vbars', [ [0, 31, 'rgba(192,255,192,0.5)'],
[59, 31, 'rgba(192,255,192,0.5)'],
[120, 31, 'rgba(192,255,192,0.5)'],
[181, 31, 'rgba(192,255,192,0.5)'],
[243, 30, 'rgba(192,255,192,0.5)'],
[304, 30, 'rgba(192,255,192,0.5)'],
]);
gantt.Draw();
}
Genelde Pasta dilimi olarak adlandırdığımız Pie Chart ile istatistik bilgilerinizi kolayca sunabilirsiniz.
Örnek kod yapısı:
window.onload = function ()
{ var data = [564,155,499,611,322];
var pie = new Pie('myPie', data); pie.Set('labels', ['Abc', 'Def', 'Ghi', 'Jkl', 'Mno']); pie.Set('linewidth', 5); pie.Set('strokestyle', '#fff'); pie.Draw();
}
Odometer olarak adlandırılan canvas ürünü grafik ile sanayi tabanlı istatistik bilgilerini kolayca hazırlayabilirsiniz.
Örnek kod yapısı:
window.onload = function ()
{ // ID, MINIMUM, MAXIMUM, INDICATED VALUE
var odo = new Odometer('myOdo', 0, 100, 18);
odo.Set('greenstart', 0); odo.Set('greenend', 75); odo.Set('yellowstart', 75); odo.Set('yellowend', 90); odo.Set('redstart', 90); odo.Set('redend', 100); odo.Set('labelspace', 50); odo.Set('needlethickness', 2);
odo.Draw();
}
Line chart bizlere tanıdık geliyor. Genelde borsa haberlerinde sıkça karşılıyoruz. Ekonomi verilerinde sıkça tercih edilen bu grafiği gerçekleştirmek artık canvas elementinin javascript uyumu ile kısa bir süre içinde gerçekleştirebiliyorsunuz.
Örnek kod yapısı:
window.onload = function ()
{ var data = [10,4,17,50,25,19,20,25,30,29,30,29];
var line = new Line("myLine", data); line.Set('barcolor1', '#fff'); line.Set('barcolor2', '#fff'); line.Set('gridcolor', '#eee'); line.Set('linecolor', '#f00'); line.Set('tickmarks', null); line.Set('linewidth', 2); line.Set('filled', true); line.Set('hmargin', 5); line.Set('labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']); line.Set('border', '#fff'); line.Set('gutter', 40); line.Draw();
}
Bir başka canvas grafiği ise LED grid. Web sitelerinde kullanıcı istatistiklerine benzeyen görünüşüyle uygulamalarınızda yer verebilirsiniz.
Canvas elementi için sunulan grafikler bunlarla sınırlı değil. Progress bar, Pseudo radar chart, Scatter chart, Traditional radar chart grafiklerinden sizin için en uygun olanı belirleyip çalışmalarınızda kolaylıkla kullanabilirsiniz.
Örnek kod yapısı:
window.onload = function ()
{ var led = new LED('myCanvas', '456461'); led.Set('dark', '#666'); led.Set('light', '#fff'); led.Draw();
}
Medya Elementleri
Audio Elementi
<audio> elementi ile artık ses dosyalarınızı kolayca HTML çalışmalarınıza ekleyebileceksiniz.
Birçok ses formatını desteklemesiyle birlikte önceden <embed src =””> tagı biçiminde ekledğimiz ses dosyalarımız artık <audio src=””> biçiminde kullanılarak web sayfalarımıza ekleyebiliyoruz. Öznitelik bakımından autoplay ve loop özelliklerini destekliyor.
Video Elementi
Medya elementlerinden bir diğeri ise <video> elementidir. Birçok medya türünü destekleyen video elementi, görsel medya dosyalarını web sitenize eklemenizde büyük kolaylık sağlıyor.
Dinamik Elementler
HTML 5 ile dinamik içerik yönetimini kolaylaştıracak datagrid,datalist ve details gibi çeşitli elementler hazırlandı.Tabi hepsi bunlarla sınırlı değil.En çok kullanılanları sizler için belirledik.
Datagrid ve Datalist elementleri ile veri tablolarıyla yapacağımız işlemlerde javascript desteğini kullanarak bize büyük kolaylık getiriyor. Details elementini de dipnot olarak belirtmek istediğimiz değerleri tanımlamak için çalışmalarımızda kullanabiliyoruz.
Progress elementi özellikle dinamik işlemler sırasında işimize en çok yarayacak elementlerden biri olarak karşımıza çıkıyor.Yüklenme zamanını artık ziyaretçilerimize daha kolay bir biçimde yansıtabileceğiz.
Yapısal Elementler
Web sitelerinin yapısal tasarımı için önceden kullanılan birçok element mevcuttu. HTML 5 ile bu elementler yerlerini daha pratik ve statik yapılara bıraktılar.
HTML 5 öncesinde yapısal olarak tanımlama yapılma biçimi
Header elementi ile web sitelerimizin üst yapısına ait işlemler yaptığımızda bize kolaylık getiren eskiden <div id=”header”> biçimdeki tanımlamalar ile belirttiğimiz değerler doğrultusunda CSS tarafındaki nitelikleri web sitemize aktarıyorduk. HTML 5 ile birlikte artık bu tanımlamayı <header> </header> taglarını kullanarak gerçekleştirebiliyoruz. Web sitemizde üst kısımda yapacağımız işlemler <header> elementiyle bir standart haline getirildi.
Footer elementiyle web sitemizin alt kısmında işlem yapmak istediğimizde <div id=”footer”> gibi bir tanımlama yaparak kullanıyorduk. Yeni standartlarda <footer> </footer> tanımlaması ile aynı işlemi gerçekleştirebiliyoruz.
Nav elementini menü uygulamalarını gerçekleştirmek istediğimiz noktalarda kullanabiliyoruz. Ekstra tanımlamalar gerektirmeden <nav></nav> tanımlaması yapılarak belirtilen nitelikleri web sitelerimizde kullanabiliyoruz.
Section elementi bize diğer tanımlamalardan farklı HTML yapılarını kullanmak istediğimiz noktalarda imdadımıza yetişiyor. Kullanımı belirttiğimiz diğer yapılar ile aynı olarak <section></section> şeklinde kullanılıyor.
HTML 5 ile yapısal olarak getirilen standartlar.
Görüldüğü üzere yapısal olarak önemli sayılabilecek nitelikte elementler getirildi.
Performans ve zaman açısından bizler için gerekli ve çok yerinde bir çalışma yapıldığı şüphesiz ki ortadadır.
HTML 5 yeni bir standart yeni bir anlayış olarak karşımıza çıkıyor. Birçok tarayıcı zaman içerisinde kendini HTML 5’e uyumlu hale getirecek ve biz kullanıcıları daha hızlı ve dinamik siteler bekliyor olacak. Firefox, Opera, Internet Explorer 8 ve Chrome tarayıcıları HTML 5 desteği barındıran tarayıcıların başında geliyor. Daima güncel kalmayı ihmal etmeyin :)