HTML 5
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

HTML 5

  • 905 views
Uploaded on

HTML 5 by Sergiy Baydachnyy (Microsoft Ukraine)

HTML 5 by Sergiy Baydachnyy (Microsoft Ukraine)

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
905
On Slideshare
905
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
1
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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. Вопросы?