Bilgi ve İletişim Güvenliği Rehberi (BİGR) Danışmanlığı Hizmeti

Beyaz.Net İpucu

HTML 5 Nedir ?

resim

HTML 5 nedir?

HTML 5 HTML dilinin son sürümüdür.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 kodlanırsa kodlansın, yine de fazladan yazılan kodların işlevselliği bozduğu bilinmektedir. Bu yüzden HTML 5 bu ihtiyaçları karşılamak adına geliştirilmeye başlanmıştır. Video paylaşım sitesi Youtube, deneme aşamasında HTML5'i kullanıcılarına sunmaktadır.

HTML5 kullanmak aynı zamanda UI (kullanıcı arabirimi) 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 olabilecektir. 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 JavaScript ile birleştirmek çok daha güçlü uyumlu ve sağlam aplikasyonları mümkün kılmaktadır. Aplikasyonlar 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.

HTML 5 ile tasarlanmış bir siteyi örnek göstererek anlatmaya başlıyorum gerçi daha yeni yeni yazmaya başladı insanlar ama tam olarak 2022 yılında gelişimi tamamlanacak onuda belirterek sitenin link'ini Gönderiyorum : http://www.w3.org/html/logo/index.html

Bu da Video Oynatma Örneği : http://html5demos.com/video

HTML 5'e neden ihtiyaç duyuldu ?

Eski sürümlerdeki hata ayıklama sorunlarında daha etkili

Yapısal Ögeler ve Etiketler

Yerleşik Apiler Sayesinde Web Uygulamaları geliştirme kolaylaşacak

Yeni Gelen Kodlarla Ses ve Video kullanımında Kolaylık

Web tasarımın şu günlerde Javascript üzerinde yoğunlaşması nedeni ile html5 de 3.parti yazılımlara

araçlar ve eklenti desteği

HTML 5 ' nasıl ortaya çıktı ?

2004 yılında html den memnun olmayan Opera,Mozilla,Apple gibi şirketler tarafından html4 standartı belirlendi Daha sonra 2005 yılında web application1.0 taslağı oluştu.

2007 yılında geliştirilen standartlar doğrultusunda html 5 teknolojisi gelişti

html 5'in tamamlanması yaklaşık 2022 yılını bulabileceğide konuşulmakta

HTML 5'i Tarayıcıların Destekleme Durumu:


	CHROME	FIREFOX	EXPLORER	OPERA	SAFARI
New semantic tags	4.0*	3.6*	x	10.1*	4.0*
Canvas	4.0*	3.5*	x	9*	3.0*
Video element	4.0	3.0	x	10.5	3.2
localStorage	4.0	3.0	8	10.5	4.0
Offline apps	4.0	3.6	8*	x	4.0
HTML5 Forms	4.0*	x	x	10.1*	5.0*
Drag and drop	4.0	3.5	7*	x	4.0

HTML5 ile HTML4 Arasındaki Farklılıklar

Örnek Göstermek Gerekirse Doctype Tagı :

HTML4 : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

HTML5: <!DOCTYPE html >

Karakter Kodlaması :

HTML4 : < meta http-equiv="Content-Type" content="text/html; charset=iso-UTF-8" />

HTML5:

Audio
Header
Footer
Section
Time
Video

Gibi Özelliklerin Kullanımı daha Kolay ve Özelliklerinin Artması sağlanmış

Yeni Araçlar web 2.0 uyumludur mesela submit butona url verilebilecek artık

Yeni gelecek özellikler

Tarih ve Renk Araçları

Formlara Özel E-posta alanları

Özel Arama ve Url alanları

Delete ve Put Metodları

HTML5 ile gelen yeni yapısal etiketler

<section> </section> Etiketi :

Uygulama yada Dökümanın genel bölümünü belirtir bu etiket yardımı ile aynı temayı içeren içerikleri bir arada sunabilirsiniz

<article> </article> Etiketi:

Bölümlerdeki makale içeriklerini belirlemek için kullanırız

<aside></aside> Etiketi:

Manşet Bloklarını belirlemek için kullanabiliriz birde blog tarzı yani benim sitemin sağ tarafta bulunan sidebarlar gibi bölümler oluşturulabilir

ve oluşturulan bölümler düzenlenebilir.

<header></header> Etiketi:

Başlık Eklemek İçin Kullanabiliriz oldukça sadece ve kolay şekilde HTML5 de düzenlenmiş

<hgroup></hgroup> Etiketi:

Alt Başlıkları gruplandırmak için kullanabiliriz.

<footer></footer> Etiketi:

Footer Etiketi sayfanın altındaki copyright @ felan gibi yazıları yazabileceğiniz etiket.

<nav></nav> Etiketi:

Sayfa Sonunu Belirtmek için kullanırız bir sonraki sayfaya geçileceğinide burdan belirtiriz.

HTML5 ile Gelen İçerik Etiketleri:

<figure></figure> Etiketi:

Medya ögeleri ile bağlantı kurmak için Kullanılacak tag

<video></video> Etiketi:

Video kodlarını gömüceğimiz taglar.

<audio></audio> Etiketi:

Ses İçeriklerini Gömeceğimiz taglar.

<embed></embed> Etiketi:

HTML4'de kullanılan bir oluşumdu ama HTML5 de sadeleştirilmiş ve problemleri giderilmiş şekilde karşımızda , Flash ve Ortam Dosyalarını Gömmek için kullanılacak tagdır.

<canvas></canvas> Etiketi:

Grafik çizimler oluşturmak için veya resim boyutlandırmak kesmek gibi kullanılacak bir tag.

HTML5 ile Gelen Uygulama Etiketleri:

<meter></meter> Etiketi:

Belirli yer ve belirli ölçülerin tanımlanması için mesela 720px div genişliği

<progress></progress>

Uygulamanın şuanda hangi görevi yaptığını belirtir.

<time></time>

Zaman veya süreyi ifade eden tagdır.

<details></details>

Şuanda Kendi Sitem de denediğim bir tagdır 13 temmuz 2011 çarşamba günü bu tag hiç bir tarayıcıda çalışmamıştır. W3org da belirtildiği üzere yazılan dökümanın detayları belirtmektedir

<command></command>

Kullanıcaya özel alanlar eklemek için kullanılan tagdır.

HTML5 ile Gelen Hata ayıklama etiketleri:

HTML 4 de kullanılan hata ayıklama kodlarının pekde işe yaradığı söylenemez daha önce var olup şimdi kullanımdan kaldırılan html hata ayıklama etiketleri şunlardı.

Base font
big
center
font
s
strike
tt
u
frame
frameset
noframes
acronym
applet
isindex

HTML5 ile API lere genel bakış:

Daha önce dhtml xhtml gibi api destekli uygulamalar artık html5'in içerisinde yer alacak tabi buda daha kolay geliştirlebilir apiler demek

Apilerin HTML5'e dahil olması ile birlikte mobil cihazlardan , tarayıcı ve bilgisayar uyumluluğu sağlanacak

Online Editing API : Özelliği ile bir sayfada yönetim panelini ihtiyaç duymaksızın kullanıcı istediği içeriği çok rahat düzenleyebilir duruma gelecek mesela kendi blogumu istediğim zaman yönetim paneline ihtiyaç duymadan güncelleyebilirim.

Offline Editing API: Eğer Ben Blogumda bir makale yazarken internet bağlantısı kesilmişse güncelle dediğimde Sayfa Görüntülenemiyor hatası alabilirim ve yazdıklarım kaybolabilir. Artık bu sistemde değişecek bu API sayesinde yazdığım makale hafızada kalıcak internet geldiğinde güncellenecek

History API : Tarayıcının geçmişte ziyaret etmiş olduğu bir sayfayı çağırtmak için kullanılabilecek mesela siz daha önce benim bloguma 'a girmişseniz ve ben anasayfamda bir değişiklik yapmamışsam sayfa History API den çağırtılıp daha hızlı yüklenmesi sağlanacak.

Drag and Drop API : Sayfadaki Sürükle Bırak ögelerin çalışmasını sağlaycak yani artık web siteler birer masaüstü gibi olucak istediğiniz ögeyi sürükle bırak şeklinde taşıyacaksınız .

HTML5 'de İçerik Modelleri

İçerik modellemede HTML4 de kullanılan özellikler HTML5 geliştirilerek devam edilme kararı alınmıştır. Bunlar

Metadata, embeded,interactive,heading,flow,phrasing,sectioning

Şimdi Bunları Modelleri İnceleyelim.

MetaData: Sayfanın üst kısımnda yer alan ve sayfa ile ilgili bilgileri barındıran kısımdır.bazı temel etiketleri şunlardır.

Base
command
link
meta
noscript
script
style
title

Embedded : Dış Ögeleri eklemek için kullanılan özelliktir temel tagları.

Audio
canvas
embed
iframe
image
math
object
svg
video

Heading : Başlıkları Tanımlamak için kullanılır buna tablo başlıklarıda dahildir.etiketleri

h1
h2
hgroup

Phrasing : Dökümanın metin bölümünü tanımlar ve temel tagları

iframe
cite
script

Flow: Dökümanın normal akışını sağlayan içerik modelini oluşturur.

Sectioning : başlık ile dipnot arasında belirtilir temel tagları

article
aside
nav
section

HTML5 de Div Etiketinin Rolü

Bazı eklenen etiketlerden sonra içeriği göstermek için div den daha güzel etiketler bulunmaktadır zaten div etiketinden şikayetçi olan kullanıcılara gün doğuyor div HTML5 ile bitecek.

Şimdi diğer etiketleri inceleyelim

İçerik Modeli uygunsa sadece seciton ve article etiketi kullanın bu etiketleri yeni bir bölüm başlığı oluşturmak için kullanırız

İçiçe İçerik ekleyecekseniz aside etiketi kullanın çünkü bu etiket içiçe eklenen içeriğin arasında anlamsal bir bağ olduğunu gösterir

Başlık oluştururken header dipnot için ise footer kullanın

Yani sitenin başlığı belirlerken tutup div etiketi kullanırsanız çok büyük google seo sorunları yaşıyabilirsiniz artık tasarımlarınızı bu şekilde yönlendirin

HTML5'de ID ve Class Özelliklerini Kullanmak.

Bir Sayfanın style'ni oluşturmak için genelde kullandığımız taglar

<div id="wrapper"> , <h1> dı şimdi bunlarıda bir kenara koyalım ve HTML5'ile gelen yenilikleri araştıralım

HTML 4

HTML5

<h1>Deneme</h1>

</div>

<h2> baslik</h2>

</div>

<h1>Deneme</h1>

</header>

<h2> baslik</h2>

</header>

</section>

Gördüğünüz gibi çok sade ve kolay artık HTML5 de 2 adet başlığı aynı anda kullanabildiğiniz için kodlamayı çok rahat şekilde yapabilirsiniz

HTML5'de En Üst Seviye Elemanları Yapılandırmak:

Başlık alanlarında div etiketi yerine header etiketini kullanabiliriz.

Örnek :

<h1><span>Ahmet Bozkurt</span></h1>

Tasarımlarınızı Yapıcağınız yerde

Şeklinde yapılandırabilirsiniz

seciton tagları içerinde ayrıca footer ve aside taglarınıda duruma göre kullanabilirsiniz

Yine Sayfanın Bir sonraki bölüme geçiş bölümlerinde div yerine <nav>ve<article> etiketlerinden yararlanabilirsiniz

Birbirine bağlı etiketlerde <hgroup> özelliğini kullanabilirsiniz

HTML5 de Form Oluşturmak:

Şimdi nasılki eskiden textbox eklediğimizde type'nı password yaptığımızda yazdığımız yazı şifre türünde gözüküyordu şimdide e-postaya özel textboxlar gelecek

diğer bir özellik olan tarih ve saat özelliği ilede otomatik kontrol yapıları çalıştıralbilirsiniz

Eskiden bildiğiniz gibi input butonlarına herhangi bir URL tanımlayamıyorduk artık o özellikde mümkün <input type = "url"> şeklinde URL gösterebilirsiniz

Bir yeni özellikde otomatik odaklanma özelliği örnek olarak forma tıklama zorunluluğunu ortadan kaldırabilirsiniz

Formlarınıza Yer Tutucu Özelliği Ekleyip girilecek alan hakkında bilgi verebiliriniz mesela kutucuğun üzerine gelindiğinde adınızı giriniz gibi özellikler ekleyebilirsiniz kod olarak placeholder'i kullanabilirsiniz

Numerik alanlar kullanmak için input tanımlaması yapıldıktan sonra min = 10 max =100 şekilde komutlar verilerek inputlarda numaralarla çalışmayı kolaylaştırabiliriz

HTML5 API Desteği:

Sürükle Bırak Uygulamaları Geliştirebilirsiniz: yazdığınız kodu kapatmadan sonuna draggable kodunu eklemeniz yeterli olacaktır ayrıca fotoğrafın sürüklenip bırakılacağı alanlarıda belirleyebiliriz bununla ilgili kodlar ise Dragenterhandler , drapoverhandler,drophandler

Offline Editing API de anlattığımız olayı burada tekrar açıklamak istiyorum : internetiniz gittiğinde dosyalar html manifest dosyasına aktarılır ve siz bu depolanacak cache dosyasını daha önceden header taglarına tanımlamış olmanız gerekmektedir