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 имеет следующие методы:   getCu...
Формы Новые типы элементов:   email   url   number Обязательные поля   Атрибут required Автоматическая установка фо...
Формы: настройка уведомлений истилей Сообщение об ошибке   Устанавливается текст с помощью атрибута title Стиль подложк...
Формы: валидация Атрибут formnovalidate   Устанавливается у формы, которая игнорирует    проверку содержимого при отправ...
Формы: DOM методы checkValidity – проверяет форму или поле на  валидность willValidate – проверяет, будет ли поле  валид...
Offline приложения Позволяют пользователю загрузить ресурсы и  продолжать работу в случае сбоя сети или в  разъединенном ...
AppCache Возможность создавать веб-  приложения, позволяющие кешировать  содержимое Кеш управляется с помощью manifest ф...
DOM Storage Используется для хранения небольших  объемов информации внутри сессии или на  уровне домена Реализовано с In...
Offline/Online events navigator.onLine – получение текущего  состояния document.body.ononline – событие при  переходе в ...
Работа с файлами Позволяет программно получать доступ к  файлам и их содержимому   FileReader объект   Доступ как к тек...
Indexed DB Предоставляет механизмы для построения  реляционных запросов к хранимым данным Поддерживает асинхронную модел...
Запуск скриптов в фоновом режиме Специальная служба, позволяющая запускать  скрипты в фоновом режиме Комуникации осущест...
Media Query Поддержка как CSS 3 Media Query так и  событий, связанных с изменением параметров   Позволяет задавать разли...
Touch events Набор событий для работы с «указателем»  (мышью, пальцем, любым другим устройством) Возможность отключать п...
Продолжаем развивать 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://samp...
Вопросы?
Upcoming SlideShare
Loading in...5
×

HTML 5

626

Published on

HTML 5 by Sergiy Baydachnyy (Microsoft Ukraine)

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
626
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML 5

  1. 1. HTML 5: будущее ужесегодняСергей БайдачныйСпециалист по разработке программногообеспеченияМайкрософт Украина
  2. 2. Что-то изменилось…. http://samples.msdn.microsoft.com/ietestcenter
  3. 3. WebMatrix 2 beta http://www.microsoft.com/web/webmatrix/next Поддержка IntelliSense Полный спектр возможностей HTML 5
  4. 4. Visual Studio 2010 & 11 Легкое переключение между режимами Система IntelliSense Поддержка Razor
  5. 5. Geolocation API Позволяет определить текущее положение пользователя Объект geolocation имеет следующие методы:  getCurrentPosition – возвращает позицию единажды  watchPosition – следит за изменением позиции  clearWatch – удаляет «слушатель» позиции Требует согласие пользователя
  6. 6. Формы Новые типы элементов:  email  url  number Обязательные поля  Атрибут required Автоматическая установка фокуса  Атрибут autofocus Установка диапазона для элемента number  Атрибуты max, min, step «Подложка» поля с помощью атрибута placeholder Ввод по маске (регулярное выражение) с помощью атрибута pattern
  7. 7. Формы: настройка уведомлений истилей Сообщение об ошибке  Устанавливается текст с помощью атрибута title Стиль подложки  Устанавливается с помощью селектора -ms- input-placeholder Дополнительные псевдо классы, используемые при валидации:  valid  invalid  required  optional
  8. 8. Формы: валидация Атрибут formnovalidate  Устанавливается у формы, которая игнорирует проверку содержимого при отправке данных на сервер Атрибут novalidate  Устанавливается у кнопки (submit), позволяющей не проверять данные в форме (сохранение данных для дальнейшей работы)
  9. 9. Формы: DOM методы checkValidity – проверяет форму или поле на валидность willValidate – проверяет, будет ли поле валидироваться validity – возвращает объект ValidityState validationMessage – сообщение в случае, если валидация не прошла setCustomValidity – позволяет установить сообщение
  10. 10. Offline приложения Позволяют пользователю загрузить ресурсы и продолжать работу в случае сбоя сети или в разъединенном окружении Несколько механизмов  AppCache  DOM Storage  Offline/Online events  IndexedDB  Синхронизация ресурсов через WebSockets и XmlHttpRequest
  11. 11. AppCache Возможность создавать веб- приложения, позволяющие кешировать содержимое Кеш управляется с помощью manifest файла:  CACHE:  FALLBACK:  NETWORK: Подключение манифеста происходит в теге html с помощью атрибута manifest Программный доступ с помощью ApplicationCache объекта (window.applicationCache)
  12. 12. DOM Storage Используется для хранения небольших объемов информации внутри сессии или на уровне домена Реализовано с Internet Explorer 8 Общий размер хранилища до 10Мб Не передает информацию на сервер Выделяют два типа хранилища:  sessionStorage  localStorage
  13. 13. Offline/Online events navigator.onLine – получение текущего состояния document.body.ononline – событие при переходе в online document.body.onoffline – событие при переходе в offline
  14. 14. Работа с файлами Позволяет программно получать доступ к файлам и их содержимому  FileReader объект  Доступ как к текстовой, так и к бинарной информации Поддержка выбора файла как через input, так и с помощью drag&drop
  15. 15. Indexed DB Предоставляет механизмы для построения реляционных запросов к хранимым данным Поддерживает асинхронную модель работы (взаимодействие реализуется через события) var dbReq = ixDB.open( "Database1" ); dbReq.onsuccess = function( evt ) { oDB = evt.target.result; };
  16. 16. Запуск скриптов в фоновом режиме Специальная служба, позволяющая запускать скрипты в фоновом режиме Комуникации осуществляются посредством отправки сообщений (чем-то сходна с worker ролью, выбирающей данные из очереди) postmessage – отправляет сообщение службе или интерфейсы onmessage – позволяет обрабатывать сообщения
  17. 17. Media Query Поддержка как CSS 3 Media Query так и событий, связанных с изменением параметров  Позволяет задавать различные стили для различных разрешений экрана  Позволяет динамически загружать контент, базируясь на параметрах экрана var mediaQueryList = window.msMatchMedia("(min- width:950px)"); mediaQueryList.addListener(mediaSizeChange);
  18. 18. Touch events Набор событий для работы с «указателем» (мышью, пальцем, любым другим устройством) Возможность отключать поведение браузера по умолчанию (например, увеличение экрана при движении пальцами) Также поддерживается обработка жестов:  События MSGestureStart, MSGestureChange и MSGestureEnd
  19. 19. Продолжаем развивать CSS 3 CSS 3 Layouts CSS 3 Transforms CSS 3 Animation CSS 3 Transition CSS 3 Gradients
  20. 20. И другие возможности Text Shadow WebSokets SVG Поддержка strict режима и др. Spellchecker
  21. 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. 22. Вопросы?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×