+ удачные практики

Internet Explorer и HTML5.
Настоящее и будущее вебтехнологий
Константин Кичинский, Microsoft
@kichinsky
konkich@microsoft.com
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
 Константин Кичинский
 konkich@microsoft.com
 @kihcinsky
 blogs.msdn.com/kichinsky
 Вы сможете задать вопросы докладчику в зоне «Спроси
эксперта» в течение часа после завершения этого
доклада