Bu yazıda HTML 5 ve HTML 5 ile gelen Canvas özelliğini sizin için inceleyeceğim.HTML 5, HTML dilinin şu andaki en son sürümüdür. İlk kez 22 Ocak 2008 de duyurulmuştu.
HTML 5 Internet Explorer, Mozilla Firefox ve Opera tarayıcılarının güncel sürümleri tarafından kısmen desteklenmektedir, Google Chrome ve Safari tarayıcılarının güncel sürümleri üzerinde, deneme aşamasında da olsa çok daha iyi bir şekilde çalışmaktadır. Günümüzde kullanılan HTML 4.1 sürümü, CSS desteğiyle ne kadar düzenli ve sağlam bir yapıda kodlarsak kodlayalım, yine de fazladan yazılan kodlar işlevselliği bozmaktadır. Bu yüzden HTML 5 bu ihtiyaçları karşılamak adına geliştirilmeye başlanmıştır.
HTML5 kullanmak aynı zamanda UI (kullanıcı arayüzü) mühendislerinin ve back end (sunucu uygulama) geliştiricilerinin sadece tek codebase kullanımından yararlanabiliyor olmaları demektir. Yapının temelleri aynı kalsa da, her platforma entegre edilmiş back end layerlar ve görüntüler olabilecekti.Bu, birbirine bağlı bir ürün tecrübesinin yaratılmasına yardım eden ürün çizgisinin karşısında, gelişimin yayılma sürecini hızlandırmaktadır.
Audio veya video etiketleri gibi bir çok spesifik yönleriyle birlikte kullanılması gereken HTML 5, sadece bir biçimleme dili olmasından ziyade web aplikasyonları yaratmakta da kullanılabilmektedir. CSS3 ve JS ile birleştirmek çok daha güçlü uyumlu ve sağlam uygulamaları mümkün kılmaktadır. Uygulamalar bu sayede binlerce cihazda bir çok ihtimale uygun şekilde kullanılabilmektedir. Özellikle de iliştirilmiş platformlar ve bağlanmış cihazlarla çok daha güçlü olacaklardır.
Peki HTML 4’den sonra gelen yenilikler nelerdi ?
HTML 5 ile birlikte pek çok yenilik göze çarpıyor. Eklenen bazı yeni etiketlere gözatmak gerekirse;
<canvas> : Sayfada bir çizim alanı oluşturur. İlgili alana Javascript kullanarak çizim yapılabilir.(Bu etiket üzerine daha da ayrıntılı bilgi vereceğiz ) <audio>: Sayfaya ses oynatıcı bir modül ekler. <video> : Video oynatıcı bir modül ekler. <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>
HTML 4 teki bazı etiketler ise aynı işlevleri CSS kullanılarak yapılabildiği için kaldırıldı. Bunlara örnek olarak;
<center> <font>
etiketlerini verebiliriz.
Ayrıca HTML 5 söz dizimi artık *SGML tabanlı değil. Buna sebep olarak SGML nin programcıyı kısıtlıyor olması gösteriliyor.
*SGML:html ve xml’i içeren bir metalanguage olarak tanımlanabilir. SGML metin belgelerini ve diğer veri formlarını çeşitli ortamlarda kullanabilmek amacıyla yapılarını kodlamak için kullanılan kapsamlı bir sistemdir.
HMTL 5 CANVAS
Canvas elementi javascript ile web sayfalarında grafik çizmek için kullanılır. Canvas, her pikselini kontrol edebileceğiniz dikdörtgen bir alan ya da tuval olarak ifade edilebilir
Canvas, dinamik olarak 2D fotolar yapmamızı sağlayan HTML 5 elementidir. Daha önceki sürümlerde bulunmayan canvas, HTML 5 ile web teknolojilerine yeni bir soluk getirmiştir. Canvas’ın çalışma prensipi tam olarak olmasa bile genelde JavaScripte üzerine kuruludur. JavaScript ile birlikte çalıştıkları zaman Kaliteli işler ortaya çıkabilir.
<canvas id="myCanvas" width="200" height="100"> Tarayıcınız Canvas elementini desteklememektedir. </canvas>
Yukarıdaki kullanım genel kullanım şeklidir
Elementin içine yazdığımız mesaj canvas elementini desteklemeyen tarayıcılar içindir. Eğer kullanılan tarayıcı bu elementi desteklemiyorsa ziyaretçiye bu mesaj gösterilecektir.
Canvas elementi ile çizim yapabilmek için javascript kullanmak gerekmektedir.
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(10,5,180,90);
</script>
var c=document.getElementById("Canvas");
Yukarıdaki javascript kodu ile, kodda id (bizim örneğimizdeki id : Canvas) kullanarak çizimin sayfadaki hangi element için üretildiğini belitmiş oluruz.
var cxt=c.getContext("2d");
Bu kod ile 2 boyutlu bir çizim alanı tanımlamış olduk.
cxt.fillStyle="#FF0000";
fillStyle metodu ile renk tanımlaması yaptık.
cxt.fillRect(10,5,180,90);
Formatı : [.fillRect(x,y,width,height)] Burada x ve y çizimin koordinatlarını, width, height ise çizimin ebatlarını ifade eder.
Genel olarak HTML 5 VE Canvas’ı bu şekilde özetleyebiliriz.
Kaynaklar
http://www.libersite.com/?p=3543
http://www.whosayin.com/y/html-5/
http://www.whosayin.com/y/html-5-ile-html-4-arasindaki-farklar/
http://www.whosayin.com/y/html-5-canvas-ornekleri/
http://tr.wikipedia.org/wiki/HTML5
http://en.wikipedia.org/wiki/Canvas_element