Doç. Dr. Abdülkadir ÇAKIR HTML5’İn Sunduğu Yenİlİkler ve Örnek Bİr Uygulama Rafet DURGUT Doç. Dr. Abdülkadir ÇAKIR
HTML ( Hyper Text Markup Language )
<!DOCTYPE html> Kısa ve öz HTML5 Güçlü Geliştirilmeye açık Daha az eklenti Geliştirici odaklı Geliştirilmeye açık Güçlü Kısa ve öz HTML5 <!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> <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 Özellikleri tel search url email datetime date month week time datetime-local number range color placeholder required
<input type=email required> HTML4 <form> <input name="email" type="text"> 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])+)\]) HTML5 <input type=email required>
Güvenlik x Güvenlik açıkları ihtimali x 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 [1] Robbins, J.N., ”HTML & XHTML Pocket Reference fourth edition”, O’reilly media, Sebastopol, (2009) [2] Berjon, R., Head, T. L., Novara, E. D., Oconner, E., ve Pfeiffer, S., “HTML 5.1 Nightly.”. http://www.w3.org/html/wg/drafts/html/master/, 26.12.2012 [27.12.2012] [3] Kesteren, A. V., ve Pieters, S. , “HTML5 differences from HTML4.”, http://www.w3.org/TR/html5-diff/, 25.10.2012 [27.12.2012] [4] Daniel, Y.N., ve Brian, C.D., “HTML5: What’s Different for User Experience Design and the Web”, Sigma, Vol.11, no.1: 45-51 (2011) [5] Morrison,J., “HTML5 & CSS3 Support”, http://findmebyip.com/litmus, 27.12.2012 [27.12.2012] [6] Burcu Ardıç, Mehmet Göktürk, “Kullanılabilir Uygulama Programlama Arayüzleri”, 4. ULUSAL YAZILIM MÜHENDİSLİĞİ SEMPOZYUMU – UYMS,İstanbul (2009) [7] Sharp, R., “HTML5 Demos & Example”, http://html5demos.com, 2010 [27.12.2012] [8] Öztürk, M.M. , Ekşi, Z. , Akgül A., Uçar, M.K. , “HTML5 İLE MANTIK DEVRELERİ DERSİNİN MODELLENMESİ VE PERFORMANS ANALİZİ “,Geleceğin Mühendislik Eğitiminden Endüstri ile İşbirliği Sempozyumu,Isparta,(186:190),2012 [9] Çakır, E. “HTML5 Güvenliği Yeni Nesil Web Tehditleri”, IV.AĞ VE BİLGİ GÜVENLİĞİ ULUSAL SEMPOZYUMU, Ankara, 58-65 (2011) [10] Kessin, Z., “Programming HTML5 Applications”, O’reilly Media, Sebastopol,3 (2011) [11] ] Yang, X. Yang, L., Lan, S., Tong,X. “Application of HTML5 Multimedia”, International Conference on Computer Science and Information Processing (CSIP) ,Xi’an (2012 )