close

Вход

Забыли?

вход по аккаунту

?

Стандарты HTML5 и CSS3:рождение

код для вставкиСкачать
DT 201
Гайдар Магдануров
Веб-евангелист
Microsoft
Веб-стандарты
Участие Microsoft в комитетах W3C
Поддержка стандартов в IE9
HTML 5
CSS 3
Стандарты – это нужно
HTML 5, SVG, CSS 3, DOM L2 и L3, ECMAScript
Стандартны – это сложно
Рабочая группа HTML – 1100 страниц, 40
организаций, 411 участников, 280
приглашенных экспертов
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
HTML 5
XHTML
CSS 3
SVG
DOM Level2 и Level3
ECMAScript 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' />
Не требуются плагины
Управление 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>
Зависимости от возможностей устройств
<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");
ECMAScript 5 и производительность
DOM Storage
SVG
Canvas
Аналог 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();
}
Спецификация 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-cheatsheet.html
Более 300 официальных курсов Microsoft доступно в России.
Официальные курсы можно прослушать только в авторизованных
учебных центрах Microsoft
под руководством опытного сертифицированного инструктора Microsoft
интенсивное обучение с акцентом на практику
более 80-и учебных центров более чем в 20-и городах России (+ дистанционные и
выездные курсы)
Сертификат Microsoft - показатель квалификации ИТ-специалиста для
работодателя .
Microsoft предлагает гибкую систему сертификаций.
•
40 %
Доказательство № 75
сертифицированных специалистов
считают, что сертификация помогла
им получить работу или повышение
•
57 %
Доказательство № 119
рекрутеров считают сертификацию
сотрудников одним из критериев
для повышения в должности
Все курсы, учебные центры и центры тестирования:
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 бесплатно
для слушателей курсов.
Количество ограничено!
Ваше мнение очень важно для нас.
Пожалуйста, оцените доклад, заполните
анкету и сдайте ее при выходе из зала
Спасибо!
DT 201
Гайдар Магдануров
Веб-евангелист
GaidarMa@microsoft.com
Blogs.msdn.com/gaidar
Twitter.com/gaidar
Ищите меня в зоне «Спроси эксперта»
после 15.30.
Документ
Категория
Презентации
Просмотров
12
Размер файла
2 149 Кб
Теги
1/--страниц
Пожаловаться на содержимое документа