1 / 29

Rafet DURGUT 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>. Destekçileri. Apple ( apple .com/ html5 / ) Google (html5rocks.com) Mozilla ( developer. mozilla .org/en-US/ docs /HTML/HTML5 )

cybele
Download Presentation

Rafet DURGUT Doç. Dr. Abdülkadir ÇAKIR

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML5’İn Sunduğu Yenİlİkler ve Örnek Bİr Uygulama Rafet DURGUT Doç. Dr. Abdülkadir ÇAKIR

  2. HTML ( HyperTextMarkup Language )

  3. <!DOCTYPE html>

  4. 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)

  5. HTML4 vs HTML5

  6. Yeni Etiketler

  7. Uygulama Programlama Arayüzleri (UPA)

  8. UPA örnekleri

  9. 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>

  10. Çoklu Ortam Erişimleri • Eklentilere gerek yok. • Zengin format desteği (Mp4, Ogg,WebM). • Geliştirmelere sahip.

  11. Yeni Web Form Özellikleri tel search url email datetime date month week time datetime-local number range color placeholder required

  12. 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>

  13. Güvenlik x Güvenlik açıkları ihtimali x Yakın takip gereksinimi

  14. Tarayıcı Destekleri

  15. Platform Bağımsızlığı • Çoklu platform desteği • Native ve Hybrid uygulamalar • Tek noktadan kontrol

  16. Örnek bir uygulama

  17. Genel Yapı

  18. Anlamsal Yapı

  19. Anlamsal Yapı

  20. Anlamsal Yapı

  21. Anlamsal Yapı

  22. Performans

  23. Performans

  24. Platform Desteği

  25. Sonuç

  26. Dinlediğiniz İçin Teşekkürler

  27. Sorular

More Related