HTML 5
Upcoming SlideShare
Loading in...5
×
 

HTML 5

on

  • 821 views

HTML 5 by Sergiy Baydachnyy (Microsoft Ukraine)

HTML 5 by Sergiy Baydachnyy (Microsoft Ukraine)

Statistics

Views

Total Views
821
Views on SlideShare
821
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 HTML 5 Presentation 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/a15 c3ce9-f58f-42b7-8668-53f6cdc2cd83
    • Вопросы?