Your SlideShare is downloading. ×
0
Михаил Черномордиков   Ie9
Михаил Черномордиков   Ie9
Михаил Черномордиков   Ie9
Михаил Черномордиков   Ie9
Михаил Черномордиков   Ie9
Михаил Черномордиков   Ie9
Михаил Черномордиков   Ie9
Михаил Черномордиков   Ie9
Михаил Черномордиков   Ie9
Михаил Черномордиков   Ie9
Михаил Черномордиков   Ie9
Михаил Черномордиков   Ie9
Михаил Черномордиков   Ie9
Михаил Черномордиков   Ie9
Михаил Черномордиков   Ie9
Михаил Черномордиков   Ie9
Михаил Черномордиков   Ie9
Михаил Черномордиков   Ie9
Михаил Черномордиков   Ie9
Михаил Черномордиков   Ie9
Михаил Черномордиков   Ie9
Михаил Черномордиков   Ie9
Михаил Черномордиков   Ie9
Михаил Черномордиков   Ie9
Михаил Черномордиков   Ie9
Михаил Черномордиков   Ie9
Михаил Черномордиков   Ie9
Михаил Черномордиков   Ie9
Михаил Черномордиков   Ie9
Михаил Черномордиков   Ie9
Михаил Черномордиков   Ie9
Михаил Черномордиков   Ie9
Михаил Черномордиков   Ie9
Михаил Черномордиков   Ie9
Михаил Черномордиков   Ie9
Михаил Черномордиков   Ie9
Михаил Черномордиков   Ie9
Михаил Черномордиков   Ie9
Михаил Черномордиков   Ie9
Михаил Черномордиков   Ie9
Михаил Черномордиков   Ie9
Михаил Черномордиков   Ie9
Михаил Черномордиков   Ie9
Михаил Черномордиков   Ie9
Михаил Черномордиков   Ie9
Михаил Черномордиков   Ie9
Михаил Черномордиков   Ie9
Михаил Черномордиков   Ie9
Михаил Черномордиков   Ie9
Михаил Черномордиков   Ie9
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

873

Published on

Published in: Technology, Art & Photos
1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total Views
873
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
4
Comments
1
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML5, CSS3 и новый Internet Explorer 9 Михаил Черномордиков Эксперт по стратегическим технологиям Microsoft @mixen
  • 2. Содержание 2 История и эволюция Скорость Открытые стандарты Простота и чистота интерфейса
  • 3. История и эволюция
  • 4. 4
  • 5. 5
  • 6. 6
  • 7. 7
  • 8. 8
  • 9. Internet Explorer 9 в России HTML5.rutube.ru http://habrahabr.ru/special/microsoft/ie9/
  • 10. Открыли онлайн-красоту Onlinekrasota.ru
  • 11. Скорость
  • 12. 12 Multi-System Performance
  • 13. WebKit SunSpider JavaScript Benchmark 13
  • 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
  • 16. Flying Images Demo
  • 17. Flying Images – One Animation 17 IE8 IE9
  • 18. Использование всей мощности ПК 18
  • 19. У всех есть GPU 19
  • 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 Открытый путь измерения производительности
  • 22. Единая разметка Открытые стандарты
  • 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
  • 43. Pinning Demo
  • 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

×