HTML 5: будущее уже сегодня

Сергей БайдачныйСпециалист по разработке программного обеспеченияМайкрософт Украина

Что-то изменилось….

http://samples.msdn.microsoft.com/ietestcenter

WebMatrix 2 beta

http://www.microsoft.com/web/webmatrix/next

Поддержка IntelliSense Полный спектр возможностей HTML 5

Visual Studio 2010 & 11

Легкое переключение между режимами Система IntelliSense Поддержка Razor

Geolocation API

Позволяет определить текущее положение пользователя

Объект geolocation имеет следующие методы: getCurrentPosition – возвращает

позицию единажды watchPosition – следит за изменением

позиции clearWatch – удаляет «слушатель»

позиции Требует согласие пользователя

Формы Новые типы элементов:

email url number

Обязательные поля Атрибут required

Автоматическая установка фокуса Атрибут autofocus

Установка диапазона для элемента number Атрибуты max, min, step

«Подложка» поля с помощью атрибута placeholder

Ввод по маске (регулярное выражение) с помощью атрибута pattern

Формы: настройка уведомлений и стилей

Сообщение об ошибке Устанавливается текст с помощью

атрибута title Стиль подложки

Устанавливается с помощью селектора -ms-input-placeholder

Дополнительные псевдо классы, используемые при валидации: valid invalid required optional

Формы: валидация

Атрибут formnovalidate Устанавливается у формы, которая

игнорирует проверку содержимого при отправке данных на сервер

Атрибут novalidate Устанавливается у кнопки (submit),

позволяющей не проверять данные в форме (сохранение данных для дальнейшей работы)

Формы: DOM методы

checkValidity – проверяет форму или поле на валидность

willValidate – проверяет, будет ли поле валидироваться

validity – возвращает объект ValidityState validationMessage – сообщение в случае,

если валидация не прошла setCustomValidity – позволяет установить

сообщение

Offline приложения

Позволяют пользователю загрузить ресурсы и продолжать работу в случае сбоя сети или в разъединенном окружении

Несколько механизмов AppCache DOM Storage Offline/Online events IndexedDB Синхронизация ресурсов через

WebSockets и XmlHttpRequest

AppCache

Возможность создавать веб-приложения, позволяющие кешировать содержимое

Кеш управляется с помощью manifest файла: CACHE: FALLBACK: NETWORK:

Подключение манифеста происходит в теге html с помощью атрибута manifest

Программный доступ с помощью ApplicationCache объекта (window.applicationCache)

DOM Storage

Используется для хранения небольших объемов информации внутри сессии или на уровне домена

Реализовано с Internet Explorer 8 Общий размер хранилища до 10Мб Не передает информацию на сервер Выделяют два типа хранилища:

sessionStorage localStorage

Offline/Online events

navigator.onLine – получение текущего состояния

document.body.ononline – событие при переходе в online

document.body.onoffline – событие при переходе в offline

Работа с файлами

Позволяет программно получать доступ к файлам и их содержимому FileReader объект Доступ как к текстовой, так и к бинарной

информации Поддержка выбора файла как через

input, так и с помощью drag&drop

Indexed DB

Предоставляет механизмы для построения реляционных запросов к хранимым данным

Поддерживает асинхронную модель работы (взаимодействие реализуется через события)

var dbReq = ixDB.open( "Database1" );

dbReq.onsuccess = function( evt ) { oDB = evt.target.result;};

Запуск скриптов в фоновом режиме

Специальная служба, позволяющая запускать скрипты в фоновом режиме

Комуникации осуществляются посредством отправки сообщений (чем-то сходна с worker ролью, выбирающей данные из очереди)

postmessage – отправляет сообщение службе или интерфейсы

onmessage – позволяет обрабатывать сообщения

Media Query

Поддержка как CSS 3 Media Query так и событий, связанных с изменением параметров Позволяет задавать различные стили для

различных разрешений экрана Позволяет динамически загружать

контент, базируясь на параметрах экранаvar mediaQueryList = window.msMatchMedia("(min-width:950px)");mediaQueryList.addListener(mediaSizeChange);

Touch events

Набор событий для работы с «указателем» (мышью, пальцем, любым другим устройством)

Возможность отключать поведение браузера по умолчанию (например, увеличение экрана при движении пальцами)

Также поддерживается обработка жестов: События MSGestureStart,

MSGestureChange и MSGestureEnd

Продолжаем развивать CSS 3

CSS 3 Layouts CSS 3 Transforms CSS 3 Animation CSS 3 Transition CSS 3 Gradients

И другие возможности

Text Shadow WebSokets SVG Поддержка strict режима и др. Spellchecker

Ресурсы

Internet Explorer 10 Developer Guide http://msdn.microsoft.com/en-us/ie/gg192966

IE Testing Center http://samples.msdn.microsoft.com/ietestcenter

Project Silk http://msdn.microsoft.com/en-us/library/hh396380.aspx

WebMatrix http://www.microsoft.com/web/webmatrix/next

WebStandards Update for VS2010 SP 1 http://visualstudiogallery.msdn.microsoft.com/a15c3ce9-f58f-42b7-8668-53f6cdc2cd83

Вопросы?