HTML 5 by Sergiy Baydachnyy (Microsoft Ukraine)

1. HTML 5: будущее уже
сегодня
Сергей Байдачный
Специалист по разработке программного
обеспечения
Майкрософт Украина

2. Что-то изменилось….
http://samples.msdn.microsoft.com/ietestcenter

3. WebMatrix 2 beta
 http://www.microsoft.com/web/webmatrix/next
 Поддержка IntelliSense
 Полный спектр возможностей HTML 5

4. Visual Studio 2010 & 11
 Легкое переключение между режимами
 Система IntelliSense
 Поддержка Razor

5. Geolocation API
 Позволяет определить текущее положение
пользователя
 Объект geolocation имеет следующие методы:
 getCurrentPosition – возвращает позицию
единажды
 watchPosition – следит за изменением позиции
 clearWatch – удаляет «слушатель» позиции
 Требует согласие пользователя

6. Формы
 Новые типы элементов:
 email
 url
 number
 Обязательные поля
 Атрибут required
 Автоматическая установка фокуса
 Атрибут autofocus
 Установка диапазона для элемента number
 Атрибуты max, min, step
 «Подложка» поля с помощью атрибута
placeholder
 Ввод по маске (регулярное выражение) с
помощью атрибута pattern

7. Формы: настройка уведомлений и
стилей
 Сообщение об ошибке
 Устанавливается текст с помощью атрибута title
 Стиль подложки
 Устанавливается с помощью селектора -ms-
input-placeholder
 Дополнительные псевдо классы, используемые
при валидации:
 valid
 invalid
 required
 optional

8. Формы: валидация
 Атрибут formnovalidate
 Устанавливается у формы, которая игнорирует
проверку содержимого при отправке данных на
сервер
 Атрибут novalidate
 Устанавливается у кнопки
(submit), позволяющей не проверять данные в
форме (сохранение данных для дальнейшей
работы)

9. Формы: DOM методы
 checkValidity – проверяет форму или поле на
валидность
 willValidate – проверяет, будет ли поле
валидироваться
 validity – возвращает объект ValidityState
 validationMessage – сообщение в случае, если
валидация не прошла
 setCustomValidity – позволяет установить
сообщение

10. Offline приложения
 Позволяют пользователю загрузить ресурсы и
продолжать работу в случае сбоя сети или в
разъединенном окружении
 Несколько механизмов
 AppCache
 DOM Storage
 Offline/Online events
 IndexedDB
 Синхронизация ресурсов через WebSockets и
XmlHttpRequest

11. AppCache
 Возможность создавать веб-
приложения, позволяющие кешировать
содержимое
 Кеш управляется с помощью manifest файла:
 CACHE:
 FALLBACK:
 NETWORK:
 Подключение манифеста происходит в теге
html с помощью атрибута manifest
 Программный доступ с помощью
ApplicationCache объекта
(window.applicationCache)

12. DOM Storage
 Используется для хранения небольших
объемов информации внутри сессии или на
уровне домена
 Реализовано с Internet Explorer 8
 Общий размер хранилища до 10Мб
 Не передает информацию на сервер
 Выделяют два типа хранилища:
 sessionStorage
 localStorage

13. Offline/Online events
 navigator.onLine – получение текущего
состояния
 document.body.ononline – событие при
переходе в online
 document.body.onoffline – событие при
переходе в offline

14. Работа с файлами
 Позволяет программно получать доступ к
файлам и их содержимому
 FileReader объект
 Доступ как к текстовой, так и к бинарной
информации
 Поддержка выбора файла как через input, так
и с помощью drag&drop

15. Indexed DB
 Предоставляет механизмы для построения
реляционных запросов к хранимым данным
 Поддерживает асинхронную модель работы
(взаимодействие реализуется через события)
var dbReq = ixDB.open( "Database1" );
dbReq.onsuccess = function( evt )
{
oDB = evt.target.result;
};

16. Запуск скриптов в фоновом режиме
 Специальная служба, позволяющая запускать
скрипты в фоновом режиме
 Комуникации осуществляются посредством
отправки сообщений (чем-то сходна с worker
ролью, выбирающей данные из очереди)
 postmessage – отправляет сообщение службе
или интерфейсы
 onmessage – позволяет обрабатывать
сообщения

17. Media Query
 Поддержка как CSS 3 Media Query так и
событий, связанных с изменением параметров
 Позволяет задавать различные стили для
различных разрешений экрана
 Позволяет динамически загружать
контент, базируясь на параметрах экрана
var mediaQueryList = window.msMatchMedia("(min-
width:950px)");
mediaQueryList.addListener(mediaSizeChange);

18. Touch events
 Набор событий для работы с «указателем»
(мышью, пальцем, любым другим устройством)
 Возможность отключать поведение браузера
по умолчанию (например, увеличение экрана
при движении пальцами)
 Также поддерживается обработка жестов:
 События MSGestureStart, MSGestureChange и
MSGestureEnd

19. Продолжаем развивать CSS 3
 CSS 3 Layouts
 CSS 3 Transforms
 CSS 3 Animation
 CSS 3 Transition
 CSS 3 Gradients

20. И другие возможности
 Text Shadow
 WebSokets
 SVG
 Поддержка strict режима и др.
 Spellchecker

21. Ресурсы
 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/a15
c3ce9-f58f-42b7-8668-53f6cdc2cd83

22. Вопросы?