HTML 5 Temelleri
1990 yılında fizik üstadı Tim Berners-Lee tarafından tasarlanan ve 12 adet Tag(Etiket)’ten oluşan HTML dili, değişen ihtiyaçlar doğrultusunda en son şeklini 1999 yılında HTML 4.1 olarak almıştı. Üzerine konan her sürümde yeni elementler geliştirildi ya da işe yaramayan elementler kaldırıldı. HTML 4.1’den sonra geçen 9 yılın ardından 2008 yılında W3C Konsorsiyumu tarafından yeni HTML5 sürüm tavsiyesi duyuruldu.
World Wide Web Consortium, veya W3C (www.w3c.org) web’in standartlarını belirleyen bir örgüttür. HTML5 de dahil olmak üzere tüm HTML sürümleri bu Konsorsiyum tarafından yapılmıştır. Az önce bir tavsiye kelimesi kullandık, belki kulağınızı tırmalamıştır. W3C Konsorsiyumu bu konuda oldukça dikkatli davranıyor. Hiçbir zaman standart yaratan bir örgüt olarak kendilerini tanımlamıyorlar, yaptıkları işler web’in gelişimine katkıda bulunan tavsiyeler oluyor. Ama tabii ilerleyen zamanlarda diğer geliştiriciler tarafından(Örneğin Browser geliştiriciler) standart haline getiriliyor.
HTML5‘i HTML dilinin en son sürümü olarak belirttik. Literatürde HTML5 sürümünü bu konunun uzmanları, scripting ve HTML arasındaki engellerin yıkıldığı ve daha fazla script yoğunluğuna sahip bir sürüm olduğu şeklinde belirtmektedirler.
HTLM5; scripting( javascript kodlama) işlemlerinin yoğun olması özelliğinin yanında, gerçekten de çok ciddi yenilikleri beraberinde getiren bir sürüm olmuştur. 1997’de duyurusu yapılan HTML 4.1 sürümünün ardından günümüze kadar geçen zamanda, teknolojik alt yapının da gelişimiyle internet ciddi anlamda büyük bir gelişme göstermiştir. Bu yenilikler nelerdik dersek, yeni nesneye yönelik web tabanlı dillerin çıkması, Web 2.0’ın getirdiği yeni özellikler, mobil sistemlerin yaygınlaşması, AJAX ve güçlü Javascript framework’leri (jQuery, dojo), yeni sosyal paylaşım platformları, Facebook, Twitter, Youtube, Google uygulamaları ve alışkanlık haline gelen daha bir çok yenilik. Bu yenilikler ile birlikte gelen ve en önemlisi olarak düşündüğüm, internet yayıncılığına header, sidebar, footer gibi yapıları kazandıran ve internet sayfalarında blog kavramıyla tanışmamızı sağlayan İçerik Yönetim Sistemleri (CMS).
Şöyle bir geçmişe baktığımızda gerçekten de ne kadar büyük bir değişim olduğu görülmektedir. Bu durumda HTML’in de kendisini yenilemesi ve ciddi yenilik ve özellikler getirmesi kaçınılmaz olmuştur. HTML5 web sayfasında ses ve video oynatma, 2 boyutlu canvas çizimler yapma, progress dediğimiz hazır işlem süreç göstergeleri, blog yapısına uygun header, footer ve makale metni tanımlama, site içi navigasyon ve menü etiketleri tanımlama gibi daha birçok yeni ve radikal değişiklere imza atmaktadır. İlerleyen yazılarda daha detaylı bahsedeceğimiz yeniliklerin en başında değerlendirdiğim ve ilgi çeken HTML içerisinde video etiketinin olması geliyor. Herhangi bir Flash vb. eklentiye gerek kalmadan video izleyebilecek olmak muhakkak sizinde ilginizi çekmiştir diye düşünüyorum. Bu paragrafta son olarak şunu söylemekte yarar var, HTML5’te yeni özelliklerin kullanımı demek, daha güçlü bir Javascript bilgisi demektir. Bunu da vurgulamadan geçmeyelim.
Şimdi HTML5’in getirdiği yeni özellikleri kısaca tanıyalım. Daha sonraki yazılarda özelliklere uygulamalı anlatımlara daha detaylı gireceğiz.
1. Canvas Elementi ile Çizim Yapmak
Canvas kelimesinin Türkçe karşılığı “tuval” demektir. Adından anlaşılacağı üzere, Bu element, web sayfalarında basit veya karmaşık şekiller çizilebilmesini sağlar. Çizgiler, daireler, yaylar, dikdörtgenler, eğriler ve daha birçok şekil. Yapılan çizimlere belli renkler ve hatta resimler katmanız mümkün. Aslında Canvas elementi, uzun bir süredir beklenmekteydi. Daha öncesinde çoğunlukla Flash ile yapılan, ya da bazı programlama dillerinin kendilerine has kodlama teknikleriyle geliştirdikleri(java appletler gibi) yapıları, bazı uygulamalarda ortadan kaldırabilecek bir elementtir kendisi diye değerlendiriyorum.
Canvas güçlü ve dinamik grafikler oluşturulabilecek bir kontroldür, çünkü kullanıcın hareketine göre şekillenebilen bir yapısı vardır. Tabii kullanıcının değişikliklerini yakalamak ve şekillendirme yapmak için Javascript bilmeniz şart. Yapılan çizimlerin hepsini aslında Javascript ile yapıyorsunuz bu elementte. Bunun o kadarda zor olduğunu düşünmeyin, Birçok şekli basit javascript fonksiyonları ile yapabilmektesiniz. Örneğin lineTo() veya fill() metotları. Daha sonraki yazılarda buna benzer metotların nasıl kullanıldığını göreceğiz.
2. Sürükle ve Bırak(Dragging ve Dropping)
HTML5’in bir diğer güçlü özelliği de kullanıcıya web sayfalarında sürükle-bırak ile işlemler yaptırmak. Gayet şık görünen bu yapıları, eskiden ad hoc denilen özel ve güçlü javascript frameworklerinde ve Flash uygulamalarında rastlıyorduk. Tabii bu tarayıcıdan tarayıcıya değişmekte idi, HTML5 ile bu tek bir yapıya bürünmüş oluyor. İşin güzel yanı kullanımının çok basit olması. HTML5’te bir çok görsel elemnete “draggable” özelliği eklenmiş durumda. Bu özelliği true veya false yaparak, kullanıcın kontrolü sürükle-bırak yapmasını sağlayabiliyorsunuz. Bununla ilgili uygulamaları ilerleyen yazılarda yaratacağız.
3. Yeni Web Form Kontrolleri
HTML5, zaten öncesinde olduğu gibi yeni bünyesinde de barındırdığı onay kutuları(checkboxes), seçenek düğmeleri (option buttons) gibi kontrollerle birlikte önemli ölçüde yeni kontrollerle de gelmektedir. Örneğin bir ColorPicker olarak ifade edilen bir renk seçici, bir Email alan kutusu, Datetime kontrolü ve hatta bir telefon alan kutusu gibi daha birçok yeni kontrol.
4. Web Sayfalarının Enteraktif Bir Yapıda Düzenlenmesi
HTML5 ile web sayfalarına enteraktif bir yapı kazandırılıyor. Kullanıcılar web sayfasındaki içeriği sayfanın görüntülenme modunda değiştirme imkânına sahip olacaklar. Örneğin bu yazı da tespit ettiğiniz yazım hatalarını değiştirmeniz ne güzel olurdu değil mi?
5. Tarayıcı Geçmişini Hatırlamak
HTML5 bize tarayıcı geçmişini yakalamamızı sağlıyor. Sayfalar arasında veri tutma ve taşıma işlemlerine farklı bir boyut getirecek gibi gözüküyor. Daha sonraki yazılarda bu konuyla ilgili anlaşılır ve faydalı uygulamalar yapacağım.
6. Ses ve Video Desteği İle Radikal Yenilik
HTML5’in getirdiği en büyük yenilik, video ve ses desteğidir. <video>…video adresi… </video> elementi ile video oynatma ; <audio>…ses dosyası adresi… </audio> ile ses dosyası çalma işlemlerini web sitenizde Flash veya QuickTime eklentisine ihtiyaç kalmadan yapabiliyorsunuz. Burada hangi tarayıcının hangi ses veya video dosyasını çaldığını bilmek gerekmekte, Bu detayı daha sonraki yazılarda bulacaksınız. Örneğin Firefox, Opera, ve Chrome .ogg uzantısı ile biten Theora video formatını desteklemektedir.
7. Web Depolama Kullanımı
Bu yenilikte diğer özelliklerde olduğu gibi önemli bir özelliktir. Kullanıcıya ait verilerin browser(tarayıcı) üzerinde tutulması olarak özetlenebilir. Nasıl ki kullanıcı oturum açtığında sunucu tarafında duran kullanıcıya ait session verileri vardı ve bu session bilgileri oturumu kapatınca sona eriyordu. Bu yapıda da kullanıcı web sitesine bağlandıktan sonra, tarayıcıyı açıp kapatana kadar bilgiler tarayıcıda depolanıyor. Gayet mantıklı bir veri saklama şekli değil mi? Geçmişte kullanılan Çerezler(Cookies) mantığının daha gelişmiş bir sürümü gibi görünüyor. Daha detaylı bilgiye ilerleyen yazılarda değinmeye çalışırız.