HTML5 nedir?
Web kullanıcılarının ve geliştiricilerinin bildiği üzere HTML, web üzerinde içerik ya da veri tanımlamak için kullanılan bir işaretleme dilidir.
HTML 5, HTML dilinin son sürümüdür.
HTML5, sadece WC3(World Wide Web Consortium) ve çalışma grubunun önerdiği yeni standart değil, bu standartlardan daha fazlasıdır.
Mobil teknolojilerin gelişmesi ile daha da önem kazanan HTML5 aynı zamanda
oSemantik etiketler,
oSes ve Video,
oÇizim Alanı,
oÇevrimdışı Web Uygulamaları ve Depolama,
oWeb Soket,
oWeb Worker,
oSürükle - Bırak teknolojileri ve uygulamaları
ile öne çıkmaktadır.
HTML5 için CSS3 Gerekir mi?
HTML5 ile geliştirme yaparken Semantik Class isimleri ve CSS3 tanımlamaları kullanmak mantıklıdır fakat zorunluluk değildir.
HTML5 sadece biçimlendirme tekniğidir, CSS2 ile birlikte de iyi bir görünüm elde edilir fakat bu durum tamamen tasarımınız ve gereksiniminizle ilgilidir.
Siteme HTML5 Doctype Eklersem HTML5 Olur mu?
Hayır, siteniz tarayıcı tarafından HTML5 olarak algılanacaktır fakat HTML5, Doctype'dan daha fazlasıdır.
<header>
<nav>
<section>
<article>
<footer>
gibi HTML5 öğelerinin kullanılması ve semantik yapının uygulanması HTML5 desteğini üst seviyelere çıkarır ve sitenizin HTML5 yapısına uygun hale getirir.
Web Uygulamaları Geliştirmek için Platform
HTML5 in birçok yeni özelliği web tabanlı uygulamalar için daha iyi platform geliştirme amacı etrafında toplanmaktadır.
Açıklayıcı etiketler(tags),
cross-site ve cross-window iletişiminden, animasyonlar, multimedya destekleri geliştirmeye kadar, HTML5 ile uygulama geliştirenler kullanıcı deneyimlerini iyileştirmek için birçok yeni araca sahiptir (Hogan, 2011).
Bunları inceleyecek olursak;
Daha Tanımlayıcı Biçimlendirme Etiketleri
HTML5 ile ilgili kaynakları incelediğinizde hemen hepsi semantik bir yapıya sahip olduğundan bahseder.
Burada semantik kavramı en basit, temel anlamıyla kullanılmıştır. Yani HTML5 tagları, aslında ne dediklerini ifade ederler.
Ses ve Video
HTML’in önceki sürümlerinde medya içeriklerini kendi içerisinde barındıramamakta ve bu yüzden web uygulamaları Flash, QuickTime, MediaPlayer gibi plug-in’lerin kullanımına ihtiyaç duyulmaktadır.
HTML5 bu alanda kullanımıyla artık video, ses, ve vektör grafikleri için Flash veya Silverlight gerekmemektedir. Bu noktada Apple ve Google öncü davranarak Flash Video Player tabanlı uygulamaları yerine HTML5 kullanmak için çalışmalara başlamışlardır.
Google, dünyanın en popüler video sitesi Youtube için HTML5 Video Player denemelerine başladı. Şu anda deneme sürümünde olan HTML5 tabanlı video içerik sitesine http://www.youtube.com/html5 adresinden erişebilirsiniz.
Canvas (Çizim Alanı)
HTML5 ile birlikte yeni gelen etiketlerden biri de web sayfası üzerinde 2 boyutlu ya da 3 boyutlu çizim yapılmasına olanak kılan ve herhangi bir plug-in (eklenti yazılı) ihtiyacı olmadan kullanılabilen
<canvas> (Çizim alanı)
etiketidir.
Çizim alanı JavaScript ile kontrol edilmektedir. Canvas bir dikdörtgen alanıdır ve bu dikdörtgenin her bir pikseli kontrol edebilmenize imkân sağlar.
Geniş bir kullanım alanına sahip olan canvas etiketi özellikle
grafikler,
oyunlar,
sunumlar,
kurumsal web projeleri,
CRM yazılımları raporlama
gibi birçok alanda kullanılabilir.
Örnek Kod Yapısı:
win dow.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();
}
Çevrimdışı Web Uygulamaları ve Depolama (Offline Applications & Web Storage)
Tipik çevrimiçi (online) Web uygulamalarında kullanıcılar sadece İnternet bağlantısı mevcut olduğu sürece uygulamalarını kullanmaları mümkündür. İnternet bağlantısı olmadığında bu uygulamalar ile artık e-postanızı kontrol edemez, takvim olaylarınızı görüntüleyemez, ya da çevrimiçi araçlar ile sunum hazırlayamazsınız.
Bu durum için HTML5 iki çözüm sağlamaktadır.
SQL tabanlı yerel veri depolamak için bir SQL veritabanı API (SQL-based database API) ’si,
Uygulamalara erişimi sağlamak için bir çevrimdışı uygulama HTTP önbelleği (offline application HTTP cache)
Böylece kullanıcı internet ağına bağlı değilken bile uygulamalara erişimi mevcut kılınabilmektedir.
HTML5 istemci tarafı SQL veritabanı yapılandırılmış veri depolama ve SQL veritabanı API’si sağlar. Bu özellik bahsedildiği gibi,
eposta uygulamasında e-postaların veya
bir çevrimiçi (online) alışveriş sitesinin alışveriş sepeti içeriğin yerel olarak saklanmasında kullanılabilir.
Mobil uygulamalarda HTML5’inbu özellikleri öne çıkmaktadır ve tüm mobil internet tarayıcıları bu teknolojiye destekleme çabası göstermektedirler.
Web Soket (Web Sockets) HTML5 ile gelen en güzel özelliklerden biri de AJAX kullanmadan sunucu ile iletişime geçmemizi sağlayan WebSockets teknolojisi.
WebSockets tek bir soket(TCP) üzerinden çift yönlü bağlantı kurmayı sağlayan bir tekniktir. Örneğin tarayıcı bazlı gerçek zamanlı bir strateji oyunu yazmayı planlıyorsanız WebSockets ilginizi kesinlikle çekecek. Şuan hala W3C tarafından standartlaştırılıyor lakin Chrome ve Safari’nin WebSockets desteği bulunmakta.
AJAX ile farkı nedir?
AJAX sunucu ile HTTP üzerinden haberleşir. Bu yüzden fazladan header yolladığı için tek bir byte’ı kilobyte’lara çıkarabilir. WebSockets’da ise sunucuyla bağlantınızı kurduktan sonra (Handshake) geri kalan hiç bir haberleşmede gereken veri dışında bir şey transfer etmezsiniz.
AJAX her bir veri transferi için yeni bir bağlantı kurar.
WebSockets ise tek bir bağlantı üzerinden (bağlantı kopmadıkça) sürekli bir veri transferi yapabilir.
http://rumpetroll.com
(web soket-canvas özellikleri) html5 tekbolojisi ile neler yapılabileceğini görmek için yapılmış.
Web Worker
Web İşçisi, işlemcide (CPU) işlenmek üzere JavaScript iş parçacıkları (threads) oluşturmamızı sağlayan bir API ‘dir.
Web Workers, birbirinden bağımsız olarak çalışacak birden fazla JavaScript iş parçacığı (thread) oluşturmamıza izin verir ve ayrıca aynı anda birden fazla iş yapabilme olanağı sunar (World Wide Web Consortium ak. Uzun, Demirel-Uzun, & Özden, 2011). B:u sayede tarayıcıda çökme ya da bir işlem sırasında diğerlerinin durdurulması gibi sorunlar ortadan kaldırılmış olur.
Sürükle Bırak
Sürekle ve Bırak özelliği sıralamak, kopyalamak yada taşımak gibi bir çok işlemi kolaylaştıran önemli bir HTML5 kullanıcı ara yüz fonksiyonudur. Bu kullanıcılara nesneye tıklayıp basılı tutarak istediği yere sürükleyip nesneyi oraya bırakmasını sağlamaktadır.
Örneğin Google görsellerde, bilgisayarınızdaki resmi arama kutucuğuna sürükleyerek benzer resimleri veya resimdeki eleman bulunabilmektedir. Bu işlem, 3-4 satır kod parçacığı ile sağlanabilmektedir.
Daha önceki HTML sürümlerinde bu fonksiyonelliği sağlamak için geliştiriciler kompleks JavaScript kodları yada JQuery gibi JavaScript kütüphaneleri kullanmak zorundaydı. Şimdi HTML5 deki Sürekle Bırak API desteği ile tarayıcı üzerinde kodu çok daha kolay hale getirdi.
HTML5 ve Web Tarayıcı Desteği
HTML5 başlangıcından itibaren Opera ve Mozilla tarafından geliştirildi ve bu tarayıcılar tarafından desteklemektedir.
HTML5 kodlarınızın (etiketleme) çalışması için browser’ımızın HTML 5 uyumlu olması gerekiyor. Günümüzdeki hemen her browser en yeni sürümleriyle HTML 5’i desteklemektedir. Bazısı bazı HTML5 özelliklerini desteklerken bazısı desteklememektedir.
Bunun sebebi de şudur. HTML5 halen geliştirilme aşamasındadır. Browser üreticileri her yeni sürümde bazı yeni özellikleri eklemektedir. Dolayısı ile mutlak bir ortak uyumluluktan şu an için söz etmek zor. Ancak pek çok bilinen HTML5 özelliğini hemen her bilinen browser desteklemektedir.
Şu an küçük Javascript eklentileriyle eski tarayıcılardaki sorunları hallederek gönül rahatlığıyla HTML5 kullanmaya başlayabilir, karmaşık Canvas uygulamaları geliştirebilirsiniz.
Dikkatli olmanız gereken konu HTML değil daha çok CSS'dir. CSS Reset ile eski tarayıcılardaki sorunları halledebilir, CSS'i tarayıcı desteğine göre eski ve yeni tarayıcılara uygun olarak ayırıp CSS3 kullanabilirsiniz.
Browser’ınızın Hangi HTML5 özelliklerini desteklediğini öğrenmek istiyorsanız,
http://www.html5test.com/ sitesinden, kullandığınız browserın hangi HTML5 özelliklerini desteklediğini maddeler halinde görebilirsiniz.
HTML5 ve Mobil Uygulamalar
HTML5, mobil araçlarda kullanılan bütün tarayıcılar tarafından desteklenen
oCSS3 renk ve donukluk,
oCanvas API,
oWeb Depolama,
oSVG,
oCSS3 kavisli köşeler,
oÇevrimdışı Web uygulamaları
gibi birçok yeni özellikleri ve teknolojileri içerir.(Goldstein, Lazaris, & Weyl, 2011).
Aslında, HTML5 ile gelen Çevrimdışı Web Uygulamaları ve Web Depolama gibi birçok teknoloji mobil araçlar düşünülerek geliştirilmiştir.
Modernizr, HTML5 Kontrol Kütüphanesi
Modernizr , açık kaynak kodlu bir javascript kütüphanesidir.
Otomatik olarak çalışıp, tarayıcının bir çok HTML5 & CSS3 özelliğini destekleyip desteklemediğine bakar.
<canvas> için kullanımı;
if (Modernizr.canvas) {
// let's draw some shapes!
} else {
// no native canvas support available :(
}
Modernizr (1.5 or later) versiyonu ile html5 video formatlarını kontrol edebiliriz;
if (Modernizr.video) {
// let's play some video! but what kind?
if (Modernizr.video.webm) {
// try WebM
} else if (Modernizr.video.ogg) {
// try Ogg Theora + Vorbis in an Ogg container
} else if (Modernizr.video.h264){
// try H.264 video + AAC audio in an MP4 container
}
}
Diğer ek bilgiler...
DOCTYPE bildirimi gerekiyor, DocType; sayfada kullanılan standartı browsera (tarayıcı) bildirmek için kullanılan bir yöntemdir. Xhtml'deki gibi kullanılır.
HTML 5 de XML e ait açılan tag kapanır gibi yazım teknikleri geçerlidir.
Form özelliklerinden placeholder, İnput field'ın içerisine metin yazmaya ve kullanıcı metin girmeye başladığında, yazının kaybolmasını sağlar.
Placeholder özelliğine resim eklenemez, sadece text eklenir, ancak css ile düzenleme yapılabilir.
Html5 ile yapılmış çalışmalar
http://www.hakankahraman.tv
http://www.aysanakliyat.com
http://lamoulade.com/#!/home
http://www.tart.com.tr/
http://www.trinitywebtech.com/
http://slaveryfootprint.org/
http://1minus1.com/
http://pixelpimps.net/#!/home
http://www.soul-reaper.com/
http://www.ro.me/ html5 canvas elementi ile çalışan 3d grafikleri plug-ine ihtiyaç duymadan görmemizi sağlayan, WebGL ile yapılmıştır.
http://cinema-series.orange.fr/evenement/universeries/en/
http://www.thewildernessdowntown.com/#
oyun:http://luxahoy.com/
