Internet Explorer и HTML5. Настоящее и будущее вебтехнологий Константин Кичинский, Microsoft @kichinsky [email protected] 1. История HTML 4.01 1999-н.в. Adobe Flash Player эволюция Microsoft Silverlight JavaScript Frameworks “client side” + удачные практики RIA, AJAX & Web Apps Web 2.0 & Social Networks Online Video & Audio WebCam & Mic Mobile Web & Geolocation CPU, MultiCore & GPU JavaScript Performance Веб изменился. (и ожидания от веба тоже) HTML нет. (без изменений более 11 лет) Нативная поддержка Полноправные элементы Открытые технологии — Мы все любим HTML5! 2. Что такое HTML5? Разработчики могут использовать HTML5 уже сегодня и мы призываем их делать это. Ian Jacobs, W3C *Как мы смотри на стандарты Приоритезация Функциональность vs. скорость vs. безопасность Стабильные Реализация в основной версии Internet Explorer Вполне стабильные Префиксы -ms- Нестабильные, но интересные http://html5labs.com IndexedDB WebSockets FileAPI MediaCapture API (скоро) Есть два HTML5. Спецификация HTML5 Другие спецификации HTML5 “HTML5“ “HTML5 Core” “HTML5 Extended“ Семантика Мультимедиа Динамичная графика Веб-формы JavaScript APIs Самое время для демок! 3. Семантика семантика == смысл сегодня содержание != представление таблицы для таблиц блоки для блоков id & class микроформаты завтра* семантическая структура семантический текст больше смысла нет «стилевым» элементам атрибуты со смыслом * на самом деле, тоже уже сегодня Семантика вчера и сегодня <div class="header"> <h1>...</h1> <h2>...</h2> </div> <div class="section"> <div class="article">...</div> </div> <div class="sidebar">...</div> <div class="footer">...</footer> Семантика сегодня и завтра <header> <h1>...</h1> <h2>...</h2> </header> <section> <article>...</article> </section> <aside>...</aside> <footer>...</footer> структура <header> <hgroup> <nav> <section> <article> <figure> & <figcapture> <aside> <footer> Семантические элементы И как заставить их работать в старых браузерах? контент <mark> <ruby>, <rt> & <rp> <bdi> <wbr> <summary> & <details> <time> <embed> (добавлен официально) Больше смысла <dl> <cite> <menu> <address> <hr> <small> <em> & <i> <strong> & <b> <s> Разметка текста И отделение верстки от представления. data-* собственные атрибуты для хранения данных role & aria-* для совместимости с WAIARIA (Accessible Rich Internet Applications) 4. Мультимедиа и графика <audio> & <video> Audio и Video Доступны через DOM Управление из JavaScript Интеграция с другими элементами Audio <audio id="myAudio" controls loop > <source src="elvis.mp3" /> <source src="elvis.ogg" /> </audio> Video <video id="myVideo" width="640" height="480" poster="images/elvis.jpg" /> <script> function loadVideo() { var player = document.getElementById("myVideo"); player.src = "media/elvis.mp4"; player.setAttribute("autoload", "autoload"); player.play(); } </script> Примеры Audio и Video <audio> + MP3 & AAC <video> + MPEG-4/H.264 & VP8 (WebM) (аппаратное ускорение, GPUдекодирование) MP3 WAV AAC Ogg Vorbis H.264 VP8 (WebM) Ogg Theora MS Plugin Go Plugin * if codec MS Plugin DRM адаптации качества нет (Smooth Streaming in Silverligt) fullscreen-режима одного стандартного кодека общего стиля для контролов (и стилизации контролов) <canvas> & <svg> <canvas> <svg> Что такое Canvas? Canvas — холст для растровой графики + JS API для отрисовки базовых примитивов (линии, прямоугольники, текст, изображения, трансформации…) HTML5: <canvas> HTML Canvas 2D Context http://www.w3.org/TR/2dcontext/ Что такое SVG? SVG = Scalable Vector Graphics + XML-based + DOM + JS для манипуляций HTML5: <svg> + <img src="elvis.svg" … /> + <object data="elvis.svg" type="image/svg+xml" … /> http://www.w3.org/TR/SVG/ Примеры Canvas и SVG Сложные сцены с множеством объектов Динамичные изображения Интерактивные диаграммы и графики Статичные изображения <svg> <canvas> 2D-игры Обработка видео и графики Веб-реклама Документы с высокой точностью для просмотра и печати 5. Специальные API Новые API для JavaScript API для аудио и видео API для работы веб-приложений в offline Editing API (+contenteditable) Drag & Drop API для перетаскивания элементов History API для контроля над историей сессии Polyfill: https://github.com/balupton/history.js Примеры работы с JS APIs 6. Будущее ? маркетинг? игрушки? новые сценарии развития веба 1. Веб-стандарты и плагины 2. > { Markup + Style + Script } 3. Web Apps ~ Apps Новые сценарии развития веба 1. Веб-стандарты и плагины 2. > { Markup + Style + Script } 3. Web Apps ~ Apps + будущее веба (не только) маркетинг большая спецификация (пока) не закончена хотим совместимости хотим надежности это круто! Обратная связь Ваше мнение очень важно для нас. Пожалуйста, оцените доклад, заполните анкету и сдайте ее при выходе из зала Спасибо! Вопросы CL 603 Константин Кичинский [email protected] @kihcinsky blogs.msdn.com/kichinsky Вы сможете задать вопросы докладчику в зоне «Спроси эксперта» в течение часа после завершения этого доклада