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

Константин Кичинский, Microsoft@kichinskykonkich@microsoft.com

1. История

HTML 4.011999-н.в.

http://blogs.msdn.com/cfs-file.ashx/__key/CommunityServer-Blogs-Components-WeblogFiles/00-00-00-30-25-metablogapi/0172.image_5F00_53861350.png

Adobe Flash PlayerMicrosoft SilverlightJavaScript Frameworks+ удачные практики

эволюция“client side”

RIA, AJAX & Web AppsWeb 2.0 & Social NetworksOnline Video & AudioWebCam & MicMobile Web & GeolocationCPU, MultiCore & GPUJavaScript 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-*для совместимости с WAI-

ARIA(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 MS Plugin MS Plugin

VP8 (WebM)

Go Plugin * if codec

Ogg Theora

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

Динамичные

изображения

Сложные сцены

с множеством объектов

Обработка видео и графики

Веб-реклама

Интерактивные

диаграммы и графики

Статичные изображения

Документы с высокой

точностью для просмотра и

печати

2D-игры

<canvas> <svg>

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

Вы сможете задать вопросы докладчику в зоне «Спроси эксперта» в течение часа после завершения этого доклада