1 / 80

I nternet Explorer и HTML5 . Н астоящее и будущее веб-технологий

I nternet Explorer и HTML5 . Н астоящее и будущее веб-технологий. Константин Кичинский, Microsoft @ kichinsky konkich@microsoft.com. 1. История. HTML 4.01 1999-н.в. Adobe Flash Player Microsoft Silverlight JavaScript Frameworks + удачные практики. эволюция “client side”.

christine-thulani
Download Presentation

I nternet Explorer и HTML5 . Н астоящее и будущее веб-технологий

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. Internet Explorerи HTML5.Настоящее и будущее веб-технологий Константин Кичинский, Microsoft @kichinsky konkich@microsoft.com

  2. 1. История

  3. HTML 4.01 1999-н.в.

  4. Adobe Flash Player Microsoft Silverlight JavaScript Frameworks + удачные практики эволюция “client side”

  5. RIA, AJAX & Web Apps Web 2.0 & Social Networks Online Video & Audio WebCam & Mic Mobile Web & Geolocation CPU, MultiCore & GPU JavaScript Performance

  6. Веб изменился. • (и ожидания от веба тоже)

  7. HTML нет. (без измененийболее 11 лет)

  8. Нативная поддержка Полноправные элементы Открытые технологии

  9. — Мы все любим HTML5!

  10. 2. Что такое HTML5?

  11. Разработчики могут использовать HTML5 уже сегодня и мы призываем их делать это. Ian Jacobs, W3C

  12. *Как мы смотри на стандарты • Приоритезация • Функциональность vs. скорость vs. безопасность • Стабильные • Реализация в основной версии Internet Explorer • Вполне стабильные • Префиксы -ms- • Нестабильные, но интересные • http://html5labs.com • IndexedDB • WebSockets • FileAPI • MediaCapture API (скоро)

  13. Есть два HTML5.

  14. Спецификация HTML5 Другие спецификации

  15. HTML5 “HTML5“

  16. “HTML5Core” “HTML5 Extended“

  17. Семантика Мультимедиа Динамичная графика Веб-формы JavaScript APIs

  18. Самое время для демок!

  19. 3. Семантика

  20. семантика == смысл

  21. содержание != представление таблицы для таблиц блоки для блоков id & class микроформаты сегодня

  22. семантическая структура семантический текст больше смысла нет«стилевым» элементам атрибуты со смыслом завтра* * на самом деле, тоже уже сегодня

  23. Семантика вчера и сегодня <div class="header"> <h1>...</h1> <h2>...</h2> </div> <div class="section"> <div class="article">...</div> </div> <div class="sidebar">...</div> <div class="footer">...</footer>

  24. Семантика сегодня и завтра <header> <h1>...</h1> <h2>...</h2> </header> <section> <article>...</article> </section> <aside>...</aside> <footer>...</footer>

  25. <header> <hgroup> <nav> <section> <article> <figure>& <figcapture> <aside> <footer> структура

  26. Семантические элементы И как заставить их работать в старых браузерах?

  27. <mark> <ruby>, <rt> & <rp> <bdi> <wbr> <summary> & <details> <time> <embed>(добавлен официально) контент

  28. <dl> <cite> <menu> <address> <hr> <small> <em>& <i> <strong>& <b> <s> Больше смысла

  29. Разметка текста И отделение верстки от представления.

  30. data-* собственные атрибуты для хранения данных

  31. role&aria-* для совместимости с WAI-ARIA (Accessible Rich Internet Applications)

  32. 4. Мультимедиа и графика

  33. <audio> & <video>

  34. Audio и Video • Доступны через DOM • Управление из JavaScript • Интеграция с другими элементами

  35. Audio <audioid="myAudio"controls loop > <source src="elvis.mp3" /> <source src="elvis.ogg" /> </audio>

  36. Video <videoid="myVideo"width="640" height="480" poster="images/elvis.jpg"/> <script> functionloadVideo() { varplayer = document.getElementById("myVideo"); player.src = "media/elvis.mp4"; player.setAttribute("autoload", "autoload"); player.play(); } </script>

  37. ПримерыAudio и Video

  38. <audio> + MP3 & AAC

  39. <video> + MPEG-4/H.264 & VP8 (WebM) (аппаратное ускорение, GPU-декодирование)

More Related