HTML 5
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

HTML 5

on

  • 880 views

HTML 5 by Sergiy Baydachnyy (Microsoft Ukraine)

HTML 5 by Sergiy Baydachnyy (Microsoft Ukraine)

Statistics

Views

Total Views
880
Views on SlideShare
880
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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