html 5
DESCRIPTION
HTML 5 by Sergiy Baydachnyy (Microsoft Ukraine)TRANSCRIPT
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
Вопросы?