Стандарты HTML5 и CSS3 и рождение нового веба вместе с Internet...

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

DT 201

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

Стандарты в WWWСтандарты – это нужно

HTML 5, SVG, CSS 3, DOM L2 и L3, ECMAScript

Стандартны – это сложноРабочая группа HTML – 1100 страниц, 40 организаций, 411 участников, 280 приглашенных экспертов

Стандарты - правда сложно!

1991 - HTML 1.01995 - HTML 2.01997 - HTML 3.01997 - HTML 4.02000 - XHTML 1.02000 - Начало работы над XHTML 2.02006 - XHTLM 2.02008 - Первый черновик HTML 5.02009 - XHTML 2.0… 2222 - HTML 5.0

Стандарты в Internet Explorer 9

HTML 5XHTMLCSS 3SVGDOM Level2 и Level3ECMAScript 5

Стандарты в Internet Explorer 9

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

HTML 5

Структура документаУпрощенный DOCType

<!doctype html> Разрешены перекрывающиеся теги

<b><i>Да, так можно, но не нужно!</b></i>

Не обязательны кавычки атрибутов<div class=myClass>Можно, но …</div>

Атрибуты без значений (binary)<video controls>Важно наличие присутствия</video>

Структура документаНе обязательны структурные тегов

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

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

Поддерживаются, однако помечены устаревшими

Новая жизнь старых элементов

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

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

Новые элементы формСтрогая типизация и валидация вводаСпецификация не описывает изображение

<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' />

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

Рамки

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

Импорт шрифтов

@font-face { font-family: AyitaPro; src: url('media/AyitaPro.woff'); } <div style="font: bold 18pt AyitaPro, sans-serif;">ALL ABOARD</div>

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" />

Селекторы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");

Цвета в HSL

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

ECMAScript 5 и производительностьDOM StorageSVGCanvas

Разное…

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();

}

Canvas

Ресурсы Спецификация 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

http://dev.w3.org/html5/spec/Overview.html

http://dev.w3.org/html5/spec/Overview.html

http://www.w3.org/TR/css3-roadmap/

http://www.w3.org/TR/css3-roadmap/

http://www.w3.org/TR/SVG/

http://www.w3.org/TR/SVG/




Официальные курсы и сертификация Microsoft

Более 300 официальных курсов Microsoft доступно в России. Официальные курсы можно прослушать только в авторизованных учебных центрах Microsoft

под руководством опытного сертифицированного инструктора Microsoftинтенсивное обучение с акцентом на практикуболее 80-и учебных центров более чем в 20-и городах России (+ дистанционные и выездные курсы)

Сертификат Microsoft - показатель квалификации ИТ-специалиста для работодателя .

• Microsoft предлагает гибкую систему сертификаций.

• Все курсы, учебные центры и центры тестирования: www.microsoft.com/rus/learning

40% Доказательство № 75

сертифицированных специалистов считают, что сертификация помогла им получить работу или повышение

57% Доказательство № 119

рекрутеров считают сертификацию сотрудников одним из критериев для повышения в должности

http://www.microsoft.com/rus/learning

Специальные предложенияСертификационный пакет со вторым шансом

Пакеты экзаменационных ваучеров со скидкой от 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

бесплатно для слушателей курсов.

Количество ограничено!

http://www.microsoft.com/rus/learning

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

Спасибо!

Вопросы DT 201Гайдар Магдануров

Веб-евангелист[email protected]/gaidarTwitter.com/gaidar

Ищите меня в зоне «Спроси эксперта» после 15.30.

Стандарты HTML5 и CSS3 и рождение нового веба вместе с Internet...

Technology

Transcript of Стандарты HTML5 и CSS3 и рождение нового веба вместе с Internet...