1. Internet Explorer 9:
Обзор для разработчиков
Beta
Алексей Желтов
Конусльтант по технологиям
V-alzhel@microsoft.com

2. Программа
История и эволюция
веб-технологий
Все о скорости
Удобство
Совместимость
2

3. История и эволюция
технологий

4. 4

5. 5

6. 6

7. 7

8. 8

9. Все о скорости

10. Быстродействие веб-платформ
10

11. Результаты тестирования
11

12. Движок JavaScript
Foreground
Source
Parser AST ByteCode Interpreter
Code
12

13. Новый движок JavaScript– “Chakra”
Foreground
Source
Parser AST ByteCode Interpreter
Code
Background Native
Background Compiler Code
Компилированный С использованием
В фоне
JavaScript нескольких ядер
13

14. Демонстрация
Летающие картинки

15. Летающие картинки – одна анимация
IE8
IE9
15

16. Используя всю мощность компьютера
16

17. У всех есть GPU
17

18. Индекс производительности GPU
4% 15% 32% 27% 12% 10%
1 2 3 4 5 6 7 8
Индекс производительности Windows
Графическая подсистема Vista и Win7
18

19. window.msPerformance
Новый набор метрик производительности интегрированных
на уровне DOM
Универсальный механизм оценки производительности
<script type="text/javascript">
var w = window;
var navStart = w.msPerformance.timing.navigationStart + "ms";
var navStartTime = Date(w.msPerformance.timing.navigationStart);
</script>
19

20. Простота
Основное внимание вашим сайтам

21. 21

22. 22

23. 23

24. Демонстрация
Закрепление сайта

25. Как работает закрепление сайтов
Для того чтобы закрепить
сайт не требуется вносить
изменения в сайт
Улучшите свой сайт
Предоставьте свою информацию
Добавьте закрепленный сайт программно
Настройте значок
Добавьте контекстное меню
25

26. Настройте отображение для узла
Используйте элемент meta для вывода дополнительной информации
<meta name="application-name" content="Site Name" />
<meta name="msapplication-tooltip"
content="Start the Pinned Site" />
<meta name="msapplication-starturl"
content="http://example.com/start.htm" />
26

27. Закрепите свой сайт через скрипт
if (window.external.msIsSiteMode) {
if (window.external.msIsSiteMode()) {
// we are already in site mode
}
else {
// add site to the Programs menu
window.external.msAddSiteMode()
}
}
27

28. Добавление значков
Выдать пользователям уведомление или обновление состояния процесса
window.external.msSiteModeSetIconOverlay(
'http://host/overlay1.ico','Overlay 1');
window.external.msSiteModeClearIconOverlay();
28

29. Добавление списков для перехода
Интеграция с Windows 7
<meta name="msapplication-task"
content="name=Task 1;action-uri=http://host/Page1.htm;
icon-uri=http://host/icon1.ico"/>
<meta name="msapplication-task"
content="name=Task 2;action-uri=http://host2/Page2.htm;
icon-uri=http://host2/icon2.ico"/>
29

30. Совместимость
Идентичная разметка

31. Статистика по использованию Web API
7000 top sites
7000
Number of sites
0
1 50 API (by rank) 700
API Rank Percent of Sites
indexOf 1 94%
getElementById 13 80%
addEventListener 27 65%
31
getComputedStyle 62 26%

32. Работа с разработчиками стандартов
Рабочая группа
HTML
40 организаций участников Возглавляем
Участие во многих W3C
группу
рабочих группах 411 участников в группе тестирования
W3C 280 приглашенных экспертов W3C HTML5
9 списков рассылки
~4000 сообщений в
public-html
32

33. Что такое одинаковая разметка
33

34. Internet Explorer Testing Center
http://samples.msdn.microsoft.com/ietestcenter/
34

35. HTML5: краткий обзор
Часто используется как ссылка на
современный открытые веб-стандарты
HTML5, CSS3, и т.д.
Добавляет поддержку мультимедие контента
и графики (canvas, video, audio, SVG…)
Стандартизирует действия для разработчиков
браузеров определяя стандартную разметку.
Спецификация W3C HTML5 имеет статус
черновика содержит более 1100 страниц и
35
продолжает уточняться.

36. Обработка HTML5 на GPU означает…
Canvas
SVG 1.1 2nd Edition, Full CSS3 Media Queries
CSS3 Backgrounds & Borders Web Fonts
Module
CSS3 Color Models Hardware Accelerated
RGBA, HSLA, Opacity <video>
Hardware Accelerated
<audio>
36

37. Canvas
 Блочный элемент позволяющий разработчикам использовать 2d графику с
использованием JavaScript
 Методы для рисования: кривые, прямоугольники, окружности, текст и
растровые образы
<canvas id="myCanvas" width="200" height="200">
Your browser doesn’t support Canvas, sorry.
</canvas>
<script type="text/javascript">
var example = document.getElementById("myCanvas");
var context = example.getContext("2d");
context.fillStyle = "rgb(255,0,0)";
context.fillRect(30, 30, 50, 50);
</script>
38

38. Scalable Vector Graphics (SVG)
 Создание и отрисовка 2D векторной графики с использованием XML
 Векторные изображения формируются из геометрических фигур, а не из
пикселей
 Построено на полной спецификации SVG 1.1 2nd Edition
 Поддержка:
 Полный доступ с помощью DOM к элементам SVG
 Структура документа, стили, цвета, градиентные заливки и т.д.
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
<rect fill="red" x="20" y="20" width="100" height="75" />
<rect fill="blue" x="50" y="50" width="100" height="75" />
</svg>
39

39. HTML5 <video>
 Поддерживается элемент HTML5 <video>
 Видео формата MPEG-4/H.264
 Видео может быть совмещено с другими элементами на странице
 HTML контент, картинки, графика SVG
 Аппаратное декодирование с использованием GPU
 Атрибуты
 src – указывает месторасположение файла
 autoplay – начать проигрывание видео по мере готовности
 controls – отображать управляющие элементы
 preload – загружать файл с видео при загрузке страницы
 loop – перемотка на начало видеоролика
 height & width – ширина и высота плеера
<video src="video.mp4" id="videoTag" width="640px" height="360px">
<!-- Only shown when browser doesn’t support video -->
<!-- You Could Embed Flash or Silverlight Video Here -->
</video>
40

40. HTML5 <audio>
 Поддержка элемента HTML5 <audio>
 Вывод аудио в форматах MP3 и AAC
 Fully scriptable via the DOM
 Атрибуты
 src – определяет месторасположение исходного файла
 autoplay – проигрывать звук по мере готовности
 controls – отображать элементы управления
 preload – загружать при загрузке страницы
<audio src="audio.mp3" id="audioTag" autoplay controls>
<!-- Only shown when browser doesn’t support audio -->
<!-- You could embed Flash or Silverlight audio here -->
</video>
41

41. WOFF Fonts & @font-face
 Нет ограничений по использованию “web safe” шрифтов!
 Web Open Font Format позволяет упаковывать и загружать шрифты по
необходимости для каждого сайта
 Используется вместе с тегом @font-face
 Простая переупаковка шрифтов OpenType или TrueType
 Разработано W3C Fonts Working Group
<style type="text/css">
@font-face {
font-family:MyFontName;
src: url('FontFile.woff');
}
</style>
<div style="font: 24pt MyFontName, sans-serif;">
This will render using MyFontName in FontFile.woff
</div>
42

42. CSS3 Media Queries
 Выбираем стиль в зависимости от свойств устройства
<link href=“mobile.css" rel="stylesheet"
media="screen and (max-width:480px)" type=“
text/css" />
<link href=“netbook.css" rel="stylesheet"
media="screen and (min-width:481px) and (max-
width: 1024px)"
type="text/css" />
<link href=“laptop.css" rel="stylesheet"
media="screen and (min-width:1025px)" type="text/css" />
43

43. CSS3 Backgrounds & Borders
 CSS3 фон и границы
 Скругленные углы с использованием свойства border-radius
 Несколько фоновых картинок на элемент
 Свойство box-shadow для блочных элементов
div {
border-radius: 152px 304px 228px 152px;
border-style: double;
border-width: 42px;
padding: 12px;
}
45

44. Возможности DOM и JavaScript
Полная поддержка событий DOM Level 2 и Level 3
addEventListener DOMContentLoaded
Новые возможности ECMAScript 5
DOM Traversal and Range
DOM Style
DOM Core
Улучшен разбор HTML5 и XHTML
getComputedStyle(element, pseudoElement)
getSelection()
getElementsByClassName(class)
46

45. Средства для разработчика - F12
Встроенный визуальный интерфейс Document Object Model
Быстрые эксперименты
Новое в Internet Explorer 9
Анализ сетевых запросов
Вкладка «Консоль»
Поддержка SVG
47

46. Internet Explorer 9
Скорость Простота с фокусом Совместимость
на ваших веб-сайтах
По максимуму использует Простой, изящный Улучшена поддержка
возможности вашего быстрый интерфейс стандартов для
Компьютера ускоряя фокусирует внимание одинакового отображения
отрисовку HTML 5 и на просмотре страниц во всех
новый движок JavaScript сайтов, а не на браузерах.
Chakra функционале браузера
48

47. Internet Explorer 9 Beta: Доступен
Переносите ваши Разработан в Загрузите Internet
приложения с соответствии со Explorer 9 Beta
Internet Explorer 6 стандартами! и протестируйте
свой сайт!
Дополнительная информация…
49
http://msdn.com/ie

48. Вопросы

49. © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Internet Explorer and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market
conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation.
MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.