'

Гайдар Магдануров Веб-евангелист Microsoft DT 201Веб-стандарты Участие Microsoft в комитетах W3C Поддержка стандартов в IE9 HTML 5 CSS 3.

Понравилась презентация – покажи это...





Слайд 0


Слайд 1

Стандарты HTML 5 и CSS 3: рождение нового веба вместе с Internet Explorer 9 Гайдар Магдануров Веб-евангелист Microsoft DT 201


Слайд 2

Содержание Веб-стандарты Участие Microsoft в комитетах W3C Поддержка стандартов в IE9 HTML 5 CSS 3


Слайд 3

Стандарты в WWW Стандарты – это нужно HTML 5, SVG, CSS 3, DOM L2 и L3, ECMAScript Стандартны – это сложно Рабочая группа HTML – 1100 страниц, 40 организаций, 411 участников, 280 приглашенных экспертов


Слайд 4

Стандарты - правда сложно! 1991 - HTML 1.0 1995 - HTML 2.0 1997 - HTML 3.0 1997 - HTML 4.0 2000 - XHTML 1.0 2000 - Начало работы над XHTML 2.0 2006 - XHTLM 2.0 2008 - Первый черновик HTML 5.0 2009 - XHTML 2.0 … 2222 - HTML 5.0


Слайд 5

Стандарты в Internet Explorer 9 HTML 5 XHTML CSS 3 SVG DOM Level2 и Level3 ECMAScript 5


Слайд 6

Стандарты в Internet Explorer 9 Кросс-браузерная совместимость Высокая интерактивность Богатый пользовательский интерфейс Высокая производительность Ощущение настольного приложения


Слайд 7

HTML 5


Слайд 8

Структура документа Упрощенный DOCType <!doctype html> Разрешены перекрывающиеся теги <b><i>Да, так можно, но не нужно!</b></i> Не обязательны кавычки атрибутов <div class=myClass>Можно, но …</div> Атрибуты без значений (binary) <video controls>Важно наличие присутствия</video>


Слайд 9

Структура документа Не обязательны структурные тегов <!doctype html> <meta charset=utf-8> <title>Моя Страница</title> <p>Да, это корректный документ, но…</p>


Слайд 10

Устаревшие элементы <applet> - следует использовать <embed> <big>- следует использовать CSS <blink> - следует использовать CSS <center> - следует использовать CSS <font> - следует использовать CSS <marquee> - дурацкая затея ранних IE… Поддерживаются, однако помечены устаревшими


Слайд 11

Новая жизнь старых элементов <ol> - устаревший HTML 4, вернулся в HTML 5 <dl> - испольование для имен/значений <cite> - указание на название статьи/книги <address> - контактная информация автора <em> - выделение <i> - «интонация» текста <strong> - указание на важность <b> - изменение стиля, без важности <hr> - разбиение текста на уровне параграфа <small> - мелкий шрифт (например, copyright)


Слайд 12

Новые элементы <header> - заголовок документа указания <footer> - «подвал» предшественника <nav> - элементы навигации <aside> - врезка <article> - самостоятельный блок контента <section> - группировка контента <audio> - аудио без плагинов <video> - видео без плагинов <svg>- векторные изображения в XML <canvas> - поверхность «для рисования»


Слайд 13

Новые элементы форм Строгая типизация и валидация ввода Спецификация не описывает изображение <input type='range' min='0' max='50' value='0' /> <input results='10' type='search' /> <input type='text' placeholder='Search inside' /> <input type='color' /> <input type='number' /> <input type='email' /> <input type='url' /> <input type='tel' /> <input type='date' /> <input type='time' /> <input type='month' /> <input type='week' />


Слайд 14

Элементы Audio и Video Не требуются плагины Управление JavaScript Простое добавление тегов на страницу Кодеки аудио: MP3, AAC Кодеки видео: H.264 Нет DRM Нет простых средств управления загрузкой канала (привет, Silverlight!)


Слайд 15

Audio


Слайд 16

Video


Слайд 17

CSS 3


Слайд 18

Рамки


Слайд 19

Фоновые изображения


Слайд 20

Импорт шрифтов @font-face { font-family: AyitaPro; src: url('media/AyitaPro.woff'); } <div style="font: bold 18pt AyitaPro, sans-serif;"> ALL ABOARD</div>


Слайд 21

Media Queries Зависимости от возможностей устройств <link href="No.css" rel="stylesheet" media="screen and (max-width:1199px)" type="text/css" /> <link href="No.css" rel="stylesheet" media="screen and (min-width:1301px)" type="text/css" /> <link href="Yes.css" rel="stylesheet" media="screen and (min-width:1200px) and (max-width: 1300px)" type="text/css" />


Слайд 22

Селекторы function makeAllH2Red() { var elem = document.querySelectorAll("h2 + p"); var count = elem.length; var i = 0; for (i = 0; i <= count; i++) { elem[i].style.color = "red"; } } var elem = document.querySelectorAll("ul li:nth-child(odd)");// var elem = document.querySelectorAll("table.test > tr > td");


Слайд 23

Цвета в HSL


Слайд 24

Прозрачность


Слайд 25

ECMAScript 5 и производительность DOM Storage SVG Canvas Разное…


Слайд 26

DOM хранилище Аналог Cookie файлов на клиенте Уровень сеанса sessionStorage.myKeyName = “hello”; var result = sessionStorage.myKeyName; Локальное хранилище localStorage.myKeyName = “Hi!”; var local = localStorage.myKeyName; Использование function offlineEventReceived() { var elemText = document.getElementById("blogPostInput"); var textToSave = elemText.value; localStorage.savedBlogPost = textToSave; localStorage.savedBlogPostTime = (new Date()).getTime(); }


Слайд 27

Canvas


Слайд 28

SVG


Слайд 29

Ресурсы Спецификация HTML 5 http://dev.w3.org/html5/spec/Overview.html Спецификация CSS 3 http://www.w3.org/TR/css3-roadmap/ Спецификация SVG http://www.w3.org/TR/SVG/ «Шпаргалка» про Canvas http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html


Слайд 30

Официальные курсы и сертификация Microsoft Более 300 официальных курсов Microsoft доступно в России. Официальные курсы можно прослушать только в авторизованных учебных центрах Microsoft под руководством опытного сертифицированного инструктора Microsoft интенсивное обучение с акцентом на практику более 80-и учебных центров более чем в 20-и городах России (+ дистанционные и выездные курсы) Сертификат Microsoft - показатель квалификации ИТ-специалиста для работодателя . Microsoft предлагает гибкую систему сертификаций. Все курсы, учебные центры и центры тестирования: www.microsoft.com/rus/learning


Слайд 31

Специальные предложения Сертификационный пакет со вторым шансом Пакеты экзаменационных ваучеров со скидкой от 15 до 20% и бесплатной пересдачей («вторым шансом»). Все экзамены сдаются одним человеком. Сэкономьте 15% на сертификации вашей ИТ-команды Пакет из 10-и экзаменационных ваучеров со скидкой 15% для сотрудников ИТ-отдела. «Второй шанс» включен. Ваучеры можно произвольно распределять между сотрудниками. Microsoft Certified Career Conference Первая 24-часовая глобальная виртуальная конференция с 18 ноября с 15.00 (моск. время) по 19 ноября 2010 г. Сессии по технологиям и построению карьеры Скидка 50% для сертифицированных специалистов Microsoft и студентов Бесплатная подписка на TechNet для слушателей официальных курсов Некоторые курсы по SharePoint, Windows 7; Windows Server 2008; SQL Server 2008 Детали: www.microsoft.com/rus/learning С 22 ноября 2010 г. – подписка TechNet бесплатно для слушателей курсов. Количество ограничено!


Слайд 32

Обратная связь Ваше мнение очень важно для нас. Пожалуйста, оцените доклад, заполните анкету и сдайте ее при выходе из зала Спасибо!


Слайд 33

Вопросы DT 201 Гайдар Магдануров Веб-евангелист GaidarMa@microsoft.com Blogs.msdn.com/gaidar Twitter.com/gaidar Ищите меня в зоне «Спроси эксперта» после 15.30.


Слайд 34


×

HTML:





Ссылка: