Post on 23-Jan-2016
description
Rafet DURGUTDoç. Dr. Abdülkadir ÇAKIR
HTML5’İN SUNDUĞU YENİLİKLER VE ÖRNEK BİR UYGULAMA
HTML ( Hyper Text Markup Language )
HTML5
Daha az eklenti
Geliştirici odaklı
Geliştirilmeye açık
Güçlü
Kısa ve öz
<!DOCTYPE html>
Destekçileri
• Apple (apple.com/html5/)
• Google (html5rocks.com)
• Mozilla (developer.mozilla.org/en-US/docs/HTML/HTML5)
• Microsoft (http://ie.microsoft.com/testdrive/)
• Youtube (http://www.youtube.com/html5)
• Facebook (https://developers.facebook.com/html5)
HTML4 vs HTML5
Yeni Etiketler
Tarayıcı Destekleri
Anlamsal Ağ
Uygulama Programlama Arayüzleri
Çoklu Ortam Erişimleri
Web Form Özellikleri
Güvenlik
Yeni Etiketler
section article footer nav hgroup header
figure figcaption aside video audio track
embed mark progress time ruby rt
rp bdi wbr canvas command details
datalist keygen output
Uygulama Programlama Arayüzleri (UPA)
video audio draganddrop
geolocation atob btoa
print webworker webstorage
websocket
UPA örnekleri
Anlamsal Ağ (Semantic Web)<div class=”makale”>
<h1>Makale Başlığı</h1><p >Makale İçeriği</p><div class=”makaleDetaylari”> Detaylar </div>
</div>
<article><h1> Makale Başlığı</h1><p>Makale İçeriği</p><details>Detaylar</details>
</article>
Çoklu Ortam Erişimleri
• Eklentilere gerek yok.• Zengin format desteği (Mp4, Ogg,WebM).• Geliştirmelere sahip.
Yeni Web Form Özellikleritelsearchurlemaildatetimedatemonthweektimedatetime-localnumberrangecolorplaceholderrequired
HTML4
<form> <input name="email" type="text">
HTML5
<input type=email required>
onaylama süreci
(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])
Güvenlik
x Güvenlik açıkları ihtimalix Yakın takip gereksinimi
Tarayıcı Destekleri
Platform Bağımsızlığı
• Çoklu platform desteği• Native ve Hybrid uygulamalar• Tek noktadan kontrol
Örnek bir uygulama
Genel Yapı
Anlamsal Yapı
Anlamsal Yapı
Anlamsal Yapı
Anlamsal Yapı
Performans
Performans
Platform Desteği
Sonuç
Dinlediğiniz İçin Teşekkürler
Sorular