SlideShare a Scribd company logo
HTML5, CSS3 и
новый
Internet Explorer 9
Михаил Черномордиков
Эксперт по стратегическим технологиям
Microsoft
@mixen
Содержание
2
История и эволюция
Скорость
Открытые стандарты
Простота и чистота интерфейса
История и эволюция
4
5
6
7
8
Internet Explorer 9 в России
HTML5.rutube.ru http://habrahabr.ru/special/microsoft/ie9/
Открыли онлайн-красоту
Onlinekrasota.ru
Скорость
12
Multi-System Performance
WebKit SunSpider JavaScript Benchmark
13
Движок JavaScript
14
Source
Code
Parser AST InterpreterByteCode
Foreground
Source
Code
Parser AST InterpreterByteCode
Foreground
Новый движок Chakra
15
Background
Background
Compiler
Native
Code
Compiled JavaScript In The Background Using Multiple Cores
Flying Images
Demo
Flying Images – One Animation
17
IE8
IE9
Использование всей мощности ПК
18
У всех есть GPU
19
1 2 3 4 5 6 7 8
Windows Experience Index - GPU
20
Windows Experience Index
Графика у пользователей Vista и Win7
4% 15% 32% 27% 12% 10%
window.msPerformance
21
<script type="text/javascript">
var w = window;
var navStart = w.msPerformance.timing.navigationStart + "ms";
var navStartTime = Date(w.msPerformance.timing.navigationStart);
</script>
Новый набор метрик, интегрированных с DOM
Открытый путь измерения производительности
Единая разметка
Открытые стандарты
Использование Web API
7000 top sites
API (by rank)1 50 700
Numberofsites
7000
0
API Rank Percent of Sites
indexOf 1 94%
getElementById 13 80%
addEventListener 27 65%
getComputedStyle 62 26%23
The HTML
Working Group
Работа в группах по стандартам
24
Участники многих
Рабочих групп
W3C
Лидерство в
работе с W3C
HTML5 Тестами
40 W3C Member
Organizations
411 group participants
280 invited experts
9 mailing lists
~4000 emails on
public-html
Same Markup – единая разметка
25
Internet Explorer Testing Center
26
http://samples.msdn.microsoft.com/ietestcenter/
HTML5: быстрый обзор
27
Обычно используется для определения
современных открытых веб-стандартов -
HTML5, CSS3 и других.
Добавляет интерактивные медиа и графику
(canvas, video, audio, inline SVG…)
Стандартизирует поведение производителей
браузеров, обеспечивает единую разметку.
W3C HTML5 specification является
черновиком, содержит более 1100 страниц и
продолжается развиваться
GPU-Powered HTML5…
28
Canvas
SVG 1.1 2nd Edition, Full
CSS3 Backgrounds & Borders
Module
CSS3 Color Models
RGBA, HSLA, Opacity
CSS3 Media Queries
Web Fonts
Hardware Accelerated
<video>
Hardware Accelerated
<audio>
<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>
Canvas
 Блочный элемент, который позволяет разработчикам рисовать 2d графику
через JavaScript
 Методы включают paths, boxes, circles, text and rasterized images
30
 Создает и рисует 2D векторную графику через XML
 Векторные изображения состоят из фигур вместо пикселей
 Базируется на SVG 1.1 2nd Edition Full specification
 Поддержка:
 Полный доступ через DOM к элементам SVG
 Document structure, scripting, styling, paths, shapes, colors, transforms, gradients,
patterns, masking, clipping, markers, linking and views
Scalable Vector Graphics (SVG)
31
<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>
HTML5 <video>
 Поддержка элемента <video>
 Индустриальный стандарт MPEG-4/H.264
 Видео может быть объединено с другими элементами на странице
 HTML content, images, SVG graphics
 Hardware accelerated, GPU-based decoding
 Атрибуты
 src – источник видео
 autoplay – автозапуск видео после загрузки
 controls – отображение элементов управления
 preload – загрузка при запуске страницы
 loop – зацикливание проигрывания
 height & width – размеры плеера
32
<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>
33
<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>
HTML5 <audio>
 Поддержка элемента <audio>
 Индустриальные стандарты MP3 и AAC
 Полный доступ через DOM
 Атрибуты
 src – источник аудио
 autoplay – автозапуск после загрузки
 controls – отображение элементов управления
 preload – загрузка источника после загрузки страницы
34
<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>
WOFF Fonts & @font-face
 Снято ограничение на список шрифтов “web safe”!
 Web Open Font Format позволяет упаковывать и доставлять шрифты,
которые вам нужны, на уровне сайта
 Использование через декларирование в @font-face
 Легкое использование OpenType или TrueType
 Из W3C Fonts Working Group
CSS3 Media Queries
 Selectively style page based on properties of the media
35
<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" />
36
div.top {
background-color: rgba(0, 0, 0, 0.5);
color: azure;
}
div.bottom {
background-color: hlsa(0, 0%, 0%, 0.5);
color: cornsilk;
}
CSS3 Colors
 CSS3 Color
 Альфа цвет с rgba() и hsla()
 Настройка прозрачности
 CSS3 Color Keywords
 Полная поддержка CSS3 color keywords
 Может быть использовано с любым свойстовом, где определяется цвет
37
CSS3 Backgrounds & Borders
 CSS3 Backgrounds and Borders
 Скругленные углы с определением border-radius
 Несколько фоновых рисунков на элемент
 Свойство box-shadow для блочных элементов
div {
border-radius: 152px 304px 228px 152px;
border-style: double;
border-width: 42px;
padding: 12px;
}
DOM и возможности JavaScript
addEventListener DOMContentLoaded
Полная поддержка событий DOM Level 2 и Level 3
Новые возможности ECMAScript 5
DOM Style
DOM Core
DOM Traversal and Range
HTML5 and XHTML Parsing Enhancements
getComputedStyle(element, pseudoElement)
getSelection()
getElementsByClassName(class)
38
F12 Developer Tools
Встроенный визуальный интерфейс Document Object Model
Эксперименты на лету
Новое для Internet Explorer 9
Network inspection
UA String Picker
Console Tab
SVG Support
39
С фокусом на содержание сайтов
Простота и чистота
интерфейса
41
42
43
Pinning Demo
Pinned Site
Pinned Site режим
не требует изменений
для ваших сайтов
Pinned Sites
45
Дополнительная информация
Программная установка в Pinned Mode
Иконка с текущим статусом
Список действий через Jump Lists
Кнопки в окне предпросмотра
Дополнительная информация о сайте
46
<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" />
Использование meta-элементов для дополнительной информации
Программная установка в Pinned mode
47
if (window.external.msIsSiteMode) {
if (window.external.msIsSiteMode()) {
// we are already in site mode
}
else {
// add site to the Programs menu
window.external.msAddSiteMode()
}
}
Иконка с текущим статусом
48
window.external.msSiteModeSetIconOverlay(
'http://host/overlay1.ico','Overlay 1');
window.external.msSiteModeClearIconOverlay();
Уведомления и сообщения о прогрессе
Добавление списка задач
49
<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"/>
Интеграция с Windows 7
Internet Explorer 9
50
Скорость Простота и чистота
интерфейса
Поддержка открытых
стандартов
Uses the full power of your
PC to provide GPU
powered HTML5 and
platform enhancements
including Chakra, the
new JavaScript
engine.
A clean, streamlined,
speedier interface that
puts the focus on your
sites, rather than the
browser.
Improved standards
support to enable
“same markup”
across browsers.
http://msdn.com/ie
HTML5, CSS3 и
новый
Internet Explorer 9
Михаил Черномордиков
Эксперт по стратегическим технологиям
Microsoft
@mixen

More Related Content

Viewers also liked

Soc camp Coord team
Soc camp Coord teamSoc camp Coord team
Soc camp Coord team
Pes Pse
 
Srinivas, Nirmalaya - Testing a massively multi-player online game
Srinivas, Nirmalaya - Testing a massively multi-player online gameSrinivas, Nirmalaya - Testing a massively multi-player online game
Srinivas, Nirmalaya - Testing a massively multi-player online game
vodQA
 
30.05
30.0530.05
30.05sknsz
 
Java getstarted
Java getstartedJava getstarted
Java getstarted
Nobin নবীন
 
10 lat po 11 września. Jak zmieniła się Ameryka? Jak zmienił się świat?
10 lat po 11 września. Jak zmieniła się Ameryka? Jak zmienił się świat?10 lat po 11 września. Jak zmieniła się Ameryka? Jak zmienił się świat?
10 lat po 11 września. Jak zmieniła się Ameryka? Jak zmienił się świat?sknsz
 
23.05
23.0523.05
23.05sknsz
 
Web ve
Web veWeb ve
Web ve
Anam
 
äänenhuoltoa oppaille
äänenhuoltoa oppailleäänenhuoltoa oppaille
äänenhuoltoa oppailleHeidi Jakkula
 
Financial crisis done
Financial crisis doneFinancial crisis done
Financial crisis done
Ely Twiggs
 
Drugi dzień przeglądu filmów dokumentalnych z międzynarodowego festiwalu
Drugi dzień przeglądu filmów dokumentalnych z międzynarodowego festiwaluDrugi dzień przeglądu filmów dokumentalnych z międzynarodowego festiwalu
Drugi dzień przeglądu filmów dokumentalnych z międzynarodowego festiwalusknsz
 
Ap stlye help
Ap stlye helpAp stlye help
Rola polskiej prezydencji
Rola polskiej prezydencjiRola polskiej prezydencji
Rola polskiej prezydencjisknsz
 
Presentation to create awareness in the top management of sport organization ...
Presentation to create awareness in the top management of sport organization ...Presentation to create awareness in the top management of sport organization ...
Presentation to create awareness in the top management of sport organization ...
Pedro Sobreiro
 
Mining the social web ch8 - 1
Mining the social web ch8 - 1Mining the social web ch8 - 1
Mining the social web ch8 - 1
scor7910
 
Yapcasia2011 - Hello Embed Perl
Yapcasia2011 - Hello Embed PerlYapcasia2011 - Hello Embed Perl
Yapcasia2011 - Hello Embed Perl
Hideaki Ohno
 
Installation of Go Server and Go Agent
Installation of Go Server and Go AgentInstallation of Go Server and Go Agent
Installation of Go Server and Go Agent
vodQA
 
Geographically Disjunctive Distribution
Geographically Disjunctive DistributionGeographically Disjunctive Distribution
Geographically Disjunctive Distribution
Henry OConnor
 
Afp toronto create an engaged passionate board2
Afp toronto create an engaged passionate board2Afp toronto create an engaged passionate board2
Afp toronto create an engaged passionate board2
gailperry
 

Viewers also liked (20)

Soc camp Coord team
Soc camp Coord teamSoc camp Coord team
Soc camp Coord team
 
Srinivas, Nirmalaya - Testing a massively multi-player online game
Srinivas, Nirmalaya - Testing a massively multi-player online gameSrinivas, Nirmalaya - Testing a massively multi-player online game
Srinivas, Nirmalaya - Testing a massively multi-player online game
 
30.05
30.0530.05
30.05
 
Java getstarted
Java getstartedJava getstarted
Java getstarted
 
10 lat po 11 września. Jak zmieniła się Ameryka? Jak zmienił się świat?
10 lat po 11 września. Jak zmieniła się Ameryka? Jak zmienił się świat?10 lat po 11 września. Jak zmieniła się Ameryka? Jak zmienił się świat?
10 lat po 11 września. Jak zmieniła się Ameryka? Jak zmienił się świat?
 
23.05
23.0523.05
23.05
 
Oporrak!
Oporrak!Oporrak!
Oporrak!
 
Web ve
Web veWeb ve
Web ve
 
äänenhuoltoa oppaille
äänenhuoltoa oppailleäänenhuoltoa oppaille
äänenhuoltoa oppaille
 
Financial crisis done
Financial crisis doneFinancial crisis done
Financial crisis done
 
Drugi dzień przeglądu filmów dokumentalnych z międzynarodowego festiwalu
Drugi dzień przeglądu filmów dokumentalnych z międzynarodowego festiwaluDrugi dzień przeglądu filmów dokumentalnych z międzynarodowego festiwalu
Drugi dzień przeglądu filmów dokumentalnych z międzynarodowego festiwalu
 
Ap stlye help
Ap stlye helpAp stlye help
Ap stlye help
 
Rola polskiej prezydencji
Rola polskiej prezydencjiRola polskiej prezydencji
Rola polskiej prezydencji
 
Presentation to create awareness in the top management of sport organization ...
Presentation to create awareness in the top management of sport organization ...Presentation to create awareness in the top management of sport organization ...
Presentation to create awareness in the top management of sport organization ...
 
Mining the social web ch8 - 1
Mining the social web ch8 - 1Mining the social web ch8 - 1
Mining the social web ch8 - 1
 
Yapcasia2011 - Hello Embed Perl
Yapcasia2011 - Hello Embed PerlYapcasia2011 - Hello Embed Perl
Yapcasia2011 - Hello Embed Perl
 
Edge 2 Architecture
Edge 2 ArchitectureEdge 2 Architecture
Edge 2 Architecture
 
Installation of Go Server and Go Agent
Installation of Go Server and Go AgentInstallation of Go Server and Go Agent
Installation of Go Server and Go Agent
 
Geographically Disjunctive Distribution
Geographically Disjunctive DistributionGeographically Disjunctive Distribution
Geographically Disjunctive Distribution
 
Afp toronto create an engaged passionate board2
Afp toronto create an engaged passionate board2Afp toronto create an engaged passionate board2
Afp toronto create an engaged passionate board2
 

Similar to Михаил Черномордиков Ie9

Евгений Батовский, Николай Птущук "Современный станок верстальщика"
Евгений Батовский, Николай Птущук "Современный станок верстальщика"Евгений Батовский, Николай Птущук "Современный станок верстальщика"
Евгений Батовский, Николай Птущук "Современный станок верстальщика"
Yandex
 
Cовременный станок верстальщика
Cовременный станок верстальщикаCовременный станок верстальщика
Cовременный станок верстальщикаmcslayer
 
Yuri Trukhin - IE9 Launch
Yuri Trukhin - IE9 LaunchYuri Trukhin - IE9 Launch
Yuri Trukhin - IE9 Launchbeloslab
 
Web весна 2012 лекция 10
Web весна 2012 лекция 10Web весна 2012 лекция 10
Web весна 2012 лекция 10Technopark
 
Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware
Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftwareКак сделать Instagram в браузере — Дмитрий Дудин, xbSoftware
Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware
Yandex
 
State of the Standardized Web. YaC 2014
State of theStandardized Web. YaC 2014State of theStandardized Web. YaC 2014
State of the Standardized Web. YaC 2014
Yandex
 
Ваш CSS нас не устраивает, мы придумаем свой / Роман Прудников (2ГИС)
Ваш CSS нас не устраивает, мы придумаем свой / Роман Прудников (2ГИС)Ваш CSS нас не устраивает, мы придумаем свой / Роман Прудников (2ГИС)
Ваш CSS нас не устраивает, мы придумаем свой / Роман Прудников (2ГИС)
Ontico
 
State of the Standardized Web
State of the Standardized WebState of the Standardized Web
State of the Standardized Web
Yandex
 
Moscow js 26 webpack
Moscow js 26   webpackMoscow js 26   webpack
Moscow js 26 webpack
lgordey
 
MoscowJS 26 webpack presentation
MoscowJS 26 webpack presentationMoscowJS 26 webpack presentation
MoscowJS 26 webpack presentation
lgordey
 
Проектирование сетевой инфраструктуры под SOA проекты ASP.NET
Проектирование сетевой инфраструктуры под SOA проекты ASP.NETПроектирование сетевой инфраструктуры под SOA проекты ASP.NET
Проектирование сетевой инфраструктуры под SOA проекты ASP.NET
GoSharp
 
Desktop app based on node js and html5
Desktop app based on node js and html5Desktop app based on node js and html5
Desktop app based on node js and html5
Provectus
 
Алексей Морозов (Россия), Rambler.ru. ASP.NET в помощь хакеру и не только....
Алексей Морозов (Россия), Rambler.ru. ASP.NET в помощь хакеру и не только....Алексей Морозов (Россия), Rambler.ru. ASP.NET в помощь хакеру и не только....
Алексей Морозов (Россия), Rambler.ru. ASP.NET в помощь хакеру и не только....
KazHackStan
 
FrontEndConf 2015: Microsoft Edge and Web Apps Platfrom in Windows 10
FrontEndConf  2015: Microsoft Edge and Web Apps Platfrom in Windows 10FrontEndConf  2015: Microsoft Edge and Web Apps Platfrom in Windows 10
FrontEndConf 2015: Microsoft Edge and Web Apps Platfrom in Windows 10
Constantin Kichinsky
 
Microsoft Edge и платформа веб-приложений в Windows 10 / Константин Кичинский...
Microsoft Edge и платформа веб-приложений в Windows 10 / Константин Кичинский...Microsoft Edge и платформа веб-приложений в Windows 10 / Константин Кичинский...
Microsoft Edge и платформа веб-приложений в Windows 10 / Константин Кичинский...
Ontico
 
самоучитель по креативному Web дизайну
самоучитель по креативному Web дизайнусамоучитель по креативному Web дизайну
самоучитель по креативному Web дизайну
StAlKeRoV
 
Moving from Flash to HTML5 – converting large projects
Moving from Flash to HTML5 – converting large projectsMoving from Flash to HTML5 – converting large projects
Moving from Flash to HTML5 – converting large projects
DevGAMM Conference
 
CodeFest 2012. Сошников Д. — Разработка мобильных приложений на платформе Mic...
CodeFest 2012. Сошников Д. — Разработка мобильных приложений на платформе Mic...CodeFest 2012. Сошников Д. — Разработка мобильных приложений на платформе Mic...
CodeFest 2012. Сошников Д. — Разработка мобильных приложений на платформе Mic...CodeFest
 
Bootstrap 3. Адаптивная верстка для WordPress
Bootstrap 3. Адаптивная верстка для WordPressBootstrap 3. Адаптивная верстка для WordPress
Bootstrap 3. Адаптивная верстка для WordPress
Igor Sazonov
 
Миграция БД - практический_подход с инструментами Embarcadero
Миграция БД - практический_подход с инструментами EmbarcaderoМиграция БД - практический_подход с инструментами Embarcadero
Миграция БД - практический_подход с инструментами Embarcadero
Andrew Sovtsov
 

Similar to Михаил Черномордиков Ie9 (20)

Евгений Батовский, Николай Птущук "Современный станок верстальщика"
Евгений Батовский, Николай Птущук "Современный станок верстальщика"Евгений Батовский, Николай Птущук "Современный станок верстальщика"
Евгений Батовский, Николай Птущук "Современный станок верстальщика"
 
Cовременный станок верстальщика
Cовременный станок верстальщикаCовременный станок верстальщика
Cовременный станок верстальщика
 
Yuri Trukhin - IE9 Launch
Yuri Trukhin - IE9 LaunchYuri Trukhin - IE9 Launch
Yuri Trukhin - IE9 Launch
 
Web весна 2012 лекция 10
Web весна 2012 лекция 10Web весна 2012 лекция 10
Web весна 2012 лекция 10
 
Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware
Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftwareКак сделать Instagram в браузере — Дмитрий Дудин, xbSoftware
Как сделать Instagram в браузере — Дмитрий Дудин, xbSoftware
 
State of the Standardized Web. YaC 2014
State of theStandardized Web. YaC 2014State of theStandardized Web. YaC 2014
State of the Standardized Web. YaC 2014
 
Ваш CSS нас не устраивает, мы придумаем свой / Роман Прудников (2ГИС)
Ваш CSS нас не устраивает, мы придумаем свой / Роман Прудников (2ГИС)Ваш CSS нас не устраивает, мы придумаем свой / Роман Прудников (2ГИС)
Ваш CSS нас не устраивает, мы придумаем свой / Роман Прудников (2ГИС)
 
State of the Standardized Web
State of the Standardized WebState of the Standardized Web
State of the Standardized Web
 
Moscow js 26 webpack
Moscow js 26   webpackMoscow js 26   webpack
Moscow js 26 webpack
 
MoscowJS 26 webpack presentation
MoscowJS 26 webpack presentationMoscowJS 26 webpack presentation
MoscowJS 26 webpack presentation
 
Проектирование сетевой инфраструктуры под SOA проекты ASP.NET
Проектирование сетевой инфраструктуры под SOA проекты ASP.NETПроектирование сетевой инфраструктуры под SOA проекты ASP.NET
Проектирование сетевой инфраструктуры под SOA проекты ASP.NET
 
Desktop app based on node js and html5
Desktop app based on node js and html5Desktop app based on node js and html5
Desktop app based on node js and html5
 
Алексей Морозов (Россия), Rambler.ru. ASP.NET в помощь хакеру и не только....
Алексей Морозов (Россия), Rambler.ru. ASP.NET в помощь хакеру и не только....Алексей Морозов (Россия), Rambler.ru. ASP.NET в помощь хакеру и не только....
Алексей Морозов (Россия), Rambler.ru. ASP.NET в помощь хакеру и не только....
 
FrontEndConf 2015: Microsoft Edge and Web Apps Platfrom in Windows 10
FrontEndConf  2015: Microsoft Edge and Web Apps Platfrom in Windows 10FrontEndConf  2015: Microsoft Edge and Web Apps Platfrom in Windows 10
FrontEndConf 2015: Microsoft Edge and Web Apps Platfrom in Windows 10
 
Microsoft Edge и платформа веб-приложений в Windows 10 / Константин Кичинский...
Microsoft Edge и платформа веб-приложений в Windows 10 / Константин Кичинский...Microsoft Edge и платформа веб-приложений в Windows 10 / Константин Кичинский...
Microsoft Edge и платформа веб-приложений в Windows 10 / Константин Кичинский...
 
самоучитель по креативному Web дизайну
самоучитель по креативному Web дизайнусамоучитель по креативному Web дизайну
самоучитель по креативному Web дизайну
 
Moving from Flash to HTML5 – converting large projects
Moving from Flash to HTML5 – converting large projectsMoving from Flash to HTML5 – converting large projects
Moving from Flash to HTML5 – converting large projects
 
CodeFest 2012. Сошников Д. — Разработка мобильных приложений на платформе Mic...
CodeFest 2012. Сошников Д. — Разработка мобильных приложений на платформе Mic...CodeFest 2012. Сошников Д. — Разработка мобильных приложений на платформе Mic...
CodeFest 2012. Сошников Д. — Разработка мобильных приложений на платформе Mic...
 
Bootstrap 3. Адаптивная верстка для WordPress
Bootstrap 3. Адаптивная верстка для WordPressBootstrap 3. Адаптивная верстка для WordPress
Bootstrap 3. Адаптивная верстка для WordPress
 
Миграция БД - практический_подход с инструментами Embarcadero
Миграция БД - практический_подход с инструментами EmbarcaderoМиграция БД - практический_подход с инструментами Embarcadero
Миграция БД - практический_подход с инструментами Embarcadero
 

More from Siel01

Евгений Кирпичёв Многопоточное программирование (Full)
Евгений Кирпичёв   Многопоточное программирование (Full)Евгений Кирпичёв   Многопоточное программирование (Full)
Евгений Кирпичёв Многопоточное программирование (Full)Siel01
 
Макс Лапшин Erlyvideo
Макс Лапшин   ErlyvideoМакс Лапшин   Erlyvideo
Макс Лапшин ErlyvideoSiel01
 
Никита Фролов Разработка приложений под iPhone
Никита Фролов   Разработка приложений под iPhoneНикита Фролов   Разработка приложений под iPhone
Никита Фролов Разработка приложений под iPhoneSiel01
 
Евгений Кирпичёв Многопоточное программирование
Евгений Кирпичёв   Многопоточное программированиеЕвгений Кирпичёв   Многопоточное программирование
Евгений Кирпичёв Многопоточное программированиеSiel01
 
Олег Царев, Кирилл Коринский Сравнительный анализ хранилищ данных
Олег Царев, Кирилл Коринский   Сравнительный анализ хранилищ данныхОлег Царев, Кирилл Коринский   Сравнительный анализ хранилищ данных
Олег Царев, Кирилл Коринский Сравнительный анализ хранилищ данныхSiel01
 
Ольга Кочкина Что творится на рынке труда в сфере IT
Ольга Кочкина Что творится на рынке труда в сфере ITОльга Кочкина Что творится на рынке труда в сфере IT
Ольга Кочкина Что творится на рынке труда в сфере IT
Siel01
 
Николай Мациевский Насколько открыт Open source ADD-2010
Николай Мациевский   Насколько открыт Open source ADD-2010Николай Мациевский   Насколько открыт Open source ADD-2010
Николай Мациевский Насколько открыт Open source ADD-2010
Siel01
 

More from Siel01 (7)

Евгений Кирпичёв Многопоточное программирование (Full)
Евгений Кирпичёв   Многопоточное программирование (Full)Евгений Кирпичёв   Многопоточное программирование (Full)
Евгений Кирпичёв Многопоточное программирование (Full)
 
Макс Лапшин Erlyvideo
Макс Лапшин   ErlyvideoМакс Лапшин   Erlyvideo
Макс Лапшин Erlyvideo
 
Никита Фролов Разработка приложений под iPhone
Никита Фролов   Разработка приложений под iPhoneНикита Фролов   Разработка приложений под iPhone
Никита Фролов Разработка приложений под iPhone
 
Евгений Кирпичёв Многопоточное программирование
Евгений Кирпичёв   Многопоточное программированиеЕвгений Кирпичёв   Многопоточное программирование
Евгений Кирпичёв Многопоточное программирование
 
Олег Царев, Кирилл Коринский Сравнительный анализ хранилищ данных
Олег Царев, Кирилл Коринский   Сравнительный анализ хранилищ данныхОлег Царев, Кирилл Коринский   Сравнительный анализ хранилищ данных
Олег Царев, Кирилл Коринский Сравнительный анализ хранилищ данных
 
Ольга Кочкина Что творится на рынке труда в сфере IT
Ольга Кочкина Что творится на рынке труда в сфере ITОльга Кочкина Что творится на рынке труда в сфере IT
Ольга Кочкина Что творится на рынке труда в сфере IT
 
Николай Мациевский Насколько открыт Open source ADD-2010
Николай Мациевский   Насколько открыт Open source ADD-2010Николай Мациевский   Насколько открыт Open source ADD-2010
Николай Мациевский Насколько открыт Open source ADD-2010
 

Михаил Черномордиков Ie9

  • 1. HTML5, CSS3 и новый Internet Explorer 9 Михаил Черномордиков Эксперт по стратегическим технологиям Microsoft @mixen
  • 2. Содержание 2 История и эволюция Скорость Открытые стандарты Простота и чистота интерфейса
  • 4. 4
  • 5. 5
  • 6. 6
  • 7. 7
  • 8. 8
  • 9. Internet Explorer 9 в России HTML5.rutube.ru http://habrahabr.ru/special/microsoft/ie9/
  • 14. Движок JavaScript 14 Source Code Parser AST InterpreterByteCode Foreground
  • 15. Source Code Parser AST InterpreterByteCode Foreground Новый движок Chakra 15 Background Background Compiler Native Code Compiled JavaScript In The Background Using Multiple Cores
  • 17. Flying Images – One Animation 17 IE8 IE9
  • 20. 1 2 3 4 5 6 7 8 Windows Experience Index - GPU 20 Windows Experience Index Графика у пользователей Vista и Win7 4% 15% 32% 27% 12% 10%
  • 21. window.msPerformance 21 <script type="text/javascript"> var w = window; var navStart = w.msPerformance.timing.navigationStart + "ms"; var navStartTime = Date(w.msPerformance.timing.navigationStart); </script> Новый набор метрик, интегрированных с DOM Открытый путь измерения производительности
  • 23. Использование Web API 7000 top sites API (by rank)1 50 700 Numberofsites 7000 0 API Rank Percent of Sites indexOf 1 94% getElementById 13 80% addEventListener 27 65% getComputedStyle 62 26%23
  • 24. The HTML Working Group Работа в группах по стандартам 24 Участники многих Рабочих групп W3C Лидерство в работе с W3C HTML5 Тестами 40 W3C Member Organizations 411 group participants 280 invited experts 9 mailing lists ~4000 emails on public-html
  • 25. Same Markup – единая разметка 25
  • 26. Internet Explorer Testing Center 26 http://samples.msdn.microsoft.com/ietestcenter/
  • 27. HTML5: быстрый обзор 27 Обычно используется для определения современных открытых веб-стандартов - HTML5, CSS3 и других. Добавляет интерактивные медиа и графику (canvas, video, audio, inline SVG…) Стандартизирует поведение производителей браузеров, обеспечивает единую разметку. W3C HTML5 specification является черновиком, содержит более 1100 страниц и продолжается развиваться
  • 28. GPU-Powered HTML5… 28 Canvas SVG 1.1 2nd Edition, Full CSS3 Backgrounds & Borders Module CSS3 Color Models RGBA, HSLA, Opacity CSS3 Media Queries Web Fonts Hardware Accelerated <video> Hardware Accelerated <audio>
  • 29. <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> Canvas  Блочный элемент, который позволяет разработчикам рисовать 2d графику через JavaScript  Методы включают paths, boxes, circles, text and rasterized images 30
  • 30.  Создает и рисует 2D векторную графику через XML  Векторные изображения состоят из фигур вместо пикселей  Базируется на SVG 1.1 2nd Edition Full specification  Поддержка:  Полный доступ через DOM к элементам SVG  Document structure, scripting, styling, paths, shapes, colors, transforms, gradients, patterns, masking, clipping, markers, linking and views Scalable Vector Graphics (SVG) 31 <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>
  • 31. HTML5 <video>  Поддержка элемента <video>  Индустриальный стандарт MPEG-4/H.264  Видео может быть объединено с другими элементами на странице  HTML content, images, SVG graphics  Hardware accelerated, GPU-based decoding  Атрибуты  src – источник видео  autoplay – автозапуск видео после загрузки  controls – отображение элементов управления  preload – загрузка при запуске страницы  loop – зацикливание проигрывания  height & width – размеры плеера 32 <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>
  • 32. 33 <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> HTML5 <audio>  Поддержка элемента <audio>  Индустриальные стандарты MP3 и AAC  Полный доступ через DOM  Атрибуты  src – источник аудио  autoplay – автозапуск после загрузки  controls – отображение элементов управления  preload – загрузка источника после загрузки страницы
  • 33. 34 <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> WOFF Fonts & @font-face  Снято ограничение на список шрифтов “web safe”!  Web Open Font Format позволяет упаковывать и доставлять шрифты, которые вам нужны, на уровне сайта  Использование через декларирование в @font-face  Легкое использование OpenType или TrueType  Из W3C Fonts Working Group
  • 34. CSS3 Media Queries  Selectively style page based on properties of the media 35 <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" />
  • 35. 36 div.top { background-color: rgba(0, 0, 0, 0.5); color: azure; } div.bottom { background-color: hlsa(0, 0%, 0%, 0.5); color: cornsilk; } CSS3 Colors  CSS3 Color  Альфа цвет с rgba() и hsla()  Настройка прозрачности  CSS3 Color Keywords  Полная поддержка CSS3 color keywords  Может быть использовано с любым свойстовом, где определяется цвет
  • 36. 37 CSS3 Backgrounds & Borders  CSS3 Backgrounds and Borders  Скругленные углы с определением border-radius  Несколько фоновых рисунков на элемент  Свойство box-shadow для блочных элементов div { border-radius: 152px 304px 228px 152px; border-style: double; border-width: 42px; padding: 12px; }
  • 37. DOM и возможности JavaScript addEventListener DOMContentLoaded Полная поддержка событий DOM Level 2 и Level 3 Новые возможности ECMAScript 5 DOM Style DOM Core DOM Traversal and Range HTML5 and XHTML Parsing Enhancements getComputedStyle(element, pseudoElement) getSelection() getElementsByClassName(class) 38
  • 38. F12 Developer Tools Встроенный визуальный интерфейс Document Object Model Эксперименты на лету Новое для Internet Explorer 9 Network inspection UA String Picker Console Tab SVG Support 39
  • 39. С фокусом на содержание сайтов Простота и чистота интерфейса
  • 40. 41
  • 41. 42
  • 42. 43
  • 44. Pinned Site Pinned Site режим не требует изменений для ваших сайтов Pinned Sites 45 Дополнительная информация Программная установка в Pinned Mode Иконка с текущим статусом Список действий через Jump Lists Кнопки в окне предпросмотра
  • 45. Дополнительная информация о сайте 46 <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" /> Использование meta-элементов для дополнительной информации
  • 46. Программная установка в Pinned mode 47 if (window.external.msIsSiteMode) { if (window.external.msIsSiteMode()) { // we are already in site mode } else { // add site to the Programs menu window.external.msAddSiteMode() } }
  • 47. Иконка с текущим статусом 48 window.external.msSiteModeSetIconOverlay( 'http://host/overlay1.ico','Overlay 1'); window.external.msSiteModeClearIconOverlay(); Уведомления и сообщения о прогрессе
  • 48. Добавление списка задач 49 <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"/> Интеграция с Windows 7
  • 49. Internet Explorer 9 50 Скорость Простота и чистота интерфейса Поддержка открытых стандартов Uses the full power of your PC to provide GPU powered HTML5 and platform enhancements including Chakra, the new JavaScript engine. A clean, streamlined, speedier interface that puts the focus on your sites, rather than the browser. Improved standards support to enable “same markup” across browsers. http://msdn.com/ie
  • 50. HTML5, CSS3 и новый Internet Explorer 9 Михаил Черномордиков Эксперт по стратегическим технологиям Microsoft @mixen