SlideShare uma empresa Scribd logo
1 de 22
Baixar para ler offline
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
Вопросы?

Mais conteúdo relacionado

Semelhante a HTML 5: будущее уже сегодня, Сергей Байдачный, Microsoft Ukraine

Мировые информационные ресурсы. Лекция 5
Мировые информационные ресурсы. Лекция 5Мировые информационные ресурсы. Лекция 5
Мировые информационные ресурсы. Лекция 5Dmitriy Krukov
 
Олег Крут (DataArt) "Что такое интернет вещей и как с ним работать"
Олег Крут (DataArt) "Что такое интернет вещей и как с ним работать"Олег Крут (DataArt) "Что такое интернет вещей и как с ним работать"
Олег Крут (DataArt) "Что такое интернет вещей и как с ним работать"DataArt
 
Web deployment
Web deploymentWeb deployment
Web deploymentGetDev.NET
 
IT talk Odessa. Device Hive
IT talk Odessa. Device HiveIT talk Odessa. Device Hive
IT talk Odessa. Device HiveMarina Peregud
 
IOP202 DevCon 2012 Apache Lucene in Windows Azure
IOP202 DevCon 2012 Apache Lucene in Windows AzureIOP202 DevCon 2012 Apache Lucene in Windows Azure
IOP202 DevCon 2012 Apache Lucene in Windows AzureVadim Novitskiy
 
Microsoft Visual Studio 2010
Microsoft Visual Studio 2010Microsoft Visual Studio 2010
Microsoft Visual Studio 2010Alexander Babich
 
Построение высоконагруженных приложений на базе Windows Azure
Построение высоконагруженных приложений на базе Windows AzureПостроение высоконагруженных приложений на базе Windows Azure
Построение высоконагруженных приложений на базе Windows AzureAlexander Feschenko
 
Построение высоконагруженных приложений на базе Windows Azure
Построение высоконагруженных приложений на базе Windows AzureПостроение высоконагруженных приложений на базе Windows Azure
Построение высоконагруженных приложений на базе Windows AzureAlexander Feschenko
 
МАИ, Сети ЭВМ, Лекция №4
МАИ, Сети ЭВМ, Лекция №4МАИ, Сети ЭВМ, Лекция №4
МАИ, Сети ЭВМ, Лекция №4Dima Dzuba
 
The Old New ASP.NET
The Old New ASP.NETThe Old New ASP.NET
The Old New ASP.NETVitaly Baum
 
Как легко и быстро поднять стартап на облаке
Как легко и быстро поднять стартап на облакеКак легко и быстро поднять стартап на облаке
Как легко и быстро поднять стартап на облакеTatiana Smetanina
 
архитектура приложений mfc
архитектура приложений mfcархитектура приложений mfc
архитектура приложений mfcmcroitor
 
Взломать сайт на ASP.NET
Взломать сайт на ASP.NETВзломать сайт на ASP.NET
Взломать сайт на ASP.NETPositive Hack Days
 
Вебинар "Оптимизация производительности мобильных веб-приложений"
Вебинар "Оптимизация производительности мобильных веб-приложений"Вебинар "Оптимизация производительности мобильных веб-приложений"
Вебинар "Оптимизация производительности мобильных веб-приложений"MobiDev
 
Droidcon Moscow 2015. Clean Architecture и MVP. Алексей Макаров - Zvooq
Droidcon Moscow 2015. Clean Architecture и MVP. Алексей Макаров - ZvooqDroidcon Moscow 2015. Clean Architecture и MVP. Алексей Макаров - Zvooq
Droidcon Moscow 2015. Clean Architecture и MVP. Алексей Макаров - ZvooqMail.ru Group
 
Диагностика проблем в рабочей среде при помощи IntelliTrace и Visual Studio 2...
Диагностика проблем в рабочей среде при помощи IntelliTrace и Visual Studio 2...Диагностика проблем в рабочей среде при помощи IntelliTrace и Visual Studio 2...
Диагностика проблем в рабочей среде при помощи IntelliTrace и Visual Studio 2...Герман Криммель
 
C# Web. Занятие 03.
C# Web. Занятие 03.C# Web. Занятие 03.
C# Web. Занятие 03.Igor Shkulipa
 

Semelhante a HTML 5: будущее уже сегодня, Сергей Байдачный, Microsoft Ukraine (20)

Мировые информационные ресурсы. Лекция 5
Мировые информационные ресурсы. Лекция 5Мировые информационные ресурсы. Лекция 5
Мировые информационные ресурсы. Лекция 5
 
Олег Крут (DataArt) "Что такое интернет вещей и как с ним работать"
Олег Крут (DataArt) "Что такое интернет вещей и как с ним работать"Олег Крут (DataArt) "Что такое интернет вещей и как с ним работать"
Олег Крут (DataArt) "Что такое интернет вещей и как с ним работать"
 
Web deployment
Web deploymentWeb deployment
Web deployment
 
IT talk Odessa. Device Hive
IT talk Odessa. Device HiveIT talk Odessa. Device Hive
IT talk Odessa. Device Hive
 
IOP202 DevCon 2012 Apache Lucene in Windows Azure
IOP202 DevCon 2012 Apache Lucene in Windows AzureIOP202 DevCon 2012 Apache Lucene in Windows Azure
IOP202 DevCon 2012 Apache Lucene in Windows Azure
 
Microsoft Visual Studio 2010
Microsoft Visual Studio 2010Microsoft Visual Studio 2010
Microsoft Visual Studio 2010
 
Построение высоконагруженных приложений на базе Windows Azure
Построение высоконагруженных приложений на базе Windows AzureПостроение высоконагруженных приложений на базе Windows Azure
Построение высоконагруженных приложений на базе Windows Azure
 
Построение высоконагруженных приложений на базе Windows Azure
Построение высоконагруженных приложений на базе Windows AzureПостроение высоконагруженных приложений на базе Windows Azure
Построение высоконагруженных приложений на базе Windows Azure
 
ASP.NET MVC: new era?
ASP.NET MVC: new era?ASP.NET MVC: new era?
ASP.NET MVC: new era?
 
МАИ, Сети ЭВМ, Лекция №4
МАИ, Сети ЭВМ, Лекция №4МАИ, Сети ЭВМ, Лекция №4
МАИ, Сети ЭВМ, Лекция №4
 
The Old New ASP.NET
The Old New ASP.NETThe Old New ASP.NET
The Old New ASP.NET
 
Как легко и быстро поднять стартап на облаке
Как легко и быстро поднять стартап на облакеКак легко и быстро поднять стартап на облаке
Как легко и быстро поднять стартап на облаке
 
архитектура приложений mfc
архитектура приложений mfcархитектура приложений mfc
архитектура приложений mfc
 
Взломать сайт на ASP.NET
Взломать сайт на ASP.NETВзломать сайт на ASP.NET
Взломать сайт на ASP.NET
 
Вебинар "Оптимизация производительности мобильных веб-приложений"
Вебинар "Оптимизация производительности мобильных веб-приложений"Вебинар "Оптимизация производительности мобильных веб-приложений"
Вебинар "Оптимизация производительности мобильных веб-приложений"
 
Silverlight 5
Silverlight 5Silverlight 5
Silverlight 5
 
Droidcon Moscow 2015. Clean Architecture и MVP. Алексей Макаров - Zvooq
Droidcon Moscow 2015. Clean Architecture и MVP. Алексей Макаров - ZvooqDroidcon Moscow 2015. Clean Architecture и MVP. Алексей Макаров - Zvooq
Droidcon Moscow 2015. Clean Architecture и MVP. Алексей Макаров - Zvooq
 
Диагностика проблем в рабочей среде при помощи IntelliTrace и Visual Studio 2...
Диагностика проблем в рабочей среде при помощи IntelliTrace и Visual Studio 2...Диагностика проблем в рабочей среде при помощи IntelliTrace и Visual Studio 2...
Диагностика проблем в рабочей среде при помощи IntelliTrace и Visual Studio 2...
 
C# Web. Занятие 03.
C# Web. Занятие 03.C# Web. Занятие 03.
C# Web. Занятие 03.
 
Genome
GenomeGenome
Genome
 

Mais de Volha Banadyseva

Андрей Светлов. Aiohttp
Андрей Светлов. AiohttpАндрей Светлов. Aiohttp
Андрей Светлов. AiohttpVolha Banadyseva
 
Сергей Зефиров
Сергей ЗефировСергей Зефиров
Сергей ЗефировVolha Banadyseva
 
Валерий Прытков, декан факультета КСиС, БГУИР
Валерий Прытков, декан факультета КСиС, БГУИРВалерий Прытков, декан факультета КСиС, БГУИР
Валерий Прытков, декан факультета КСиС, БГУИРVolha Banadyseva
 
Елена Локтева, «Инфопарк»
Елена Локтева, «Инфопарк»Елена Локтева, «Инфопарк»
Елена Локтева, «Инфопарк»Volha Banadyseva
 
Татьяна Милова, директор института непрерывного образования БГУ
Татьяна Милова, директор института непрерывного образования БГУТатьяна Милова, директор института непрерывного образования БГУ
Татьяна Милова, директор института непрерывного образования БГУVolha Banadyseva
 
Trillhaas Goetz. Innovations in Google and Global Digital Trends
Trillhaas Goetz. Innovations in Google and Global Digital TrendsTrillhaas Goetz. Innovations in Google and Global Digital Trends
Trillhaas Goetz. Innovations in Google and Global Digital TrendsVolha Banadyseva
 
Александр Чекан. 28 правДИвых слайдов о белорусах в интернете
Александр Чекан. 28 правДИвых слайдов о белорусах в интернетеАлександр Чекан. 28 правДИвых слайдов о белорусах в интернете
Александр Чекан. 28 правДИвых слайдов о белорусах в интернетеVolha Banadyseva
 
Мастер-класс Ильи Красинского и Елены Столбовой. Жизнь до и после выхода в store
Мастер-класс Ильи Красинского и Елены Столбовой. Жизнь до и после выхода в storeМастер-класс Ильи Красинского и Елены Столбовой. Жизнь до и после выхода в store
Мастер-класс Ильи Красинского и Елены Столбовой. Жизнь до и после выхода в storeVolha Banadyseva
 
Бахрам Исмаилов. Продвижение мобильного приложение - оптимизация в App Store
Бахрам Исмаилов. Продвижение мобильного приложение - оптимизация в App StoreБахрам Исмаилов. Продвижение мобильного приложение - оптимизация в App Store
Бахрам Исмаилов. Продвижение мобильного приложение - оптимизация в App StoreVolha Banadyseva
 
Евгений Пальчевский. Что можно узнать из отзывов пользователей в мобильных ма...
Евгений Пальчевский. Что можно узнать из отзывов пользователей в мобильных ма...Евгений Пальчевский. Что можно узнать из отзывов пользователей в мобильных ма...
Евгений Пальчевский. Что можно узнать из отзывов пользователей в мобильных ма...Volha Banadyseva
 
Евгений Невгень. Оптимизация мета-данных приложения для App Store и Google Play
Евгений Невгень. Оптимизация мета-данных приложения для App Store и Google PlayЕвгений Невгень. Оптимизация мета-данных приложения для App Store и Google Play
Евгений Невгень. Оптимизация мета-данных приложения для App Store и Google PlayVolha Banadyseva
 
Евгений Козяк. Tips & Tricks мобильного прототипирования
Евгений Козяк. Tips & Tricks мобильного прототипированияЕвгений Козяк. Tips & Tricks мобильного прототипирования
Евгений Козяк. Tips & Tricks мобильного прототипированияVolha Banadyseva
 
Егор Белый. Модели успешной монетизации мобильных приложений
Егор Белый. Модели успешной монетизации мобильных приложенийЕгор Белый. Модели успешной монетизации мобильных приложений
Егор Белый. Модели успешной монетизации мобильных приложенийVolha Banadyseva
 
Станислав Пацкевич. Инструменты аналитики для мобильных платформ
Станислав Пацкевич. Инструменты аналитики для мобильных платформСтанислав Пацкевич. Инструменты аналитики для мобильных платформ
Станислав Пацкевич. Инструменты аналитики для мобильных платформVolha Banadyseva
 
Артём Азевич. Эффективные подходы к разработке приложений. Как найти своего п...
Артём Азевич. Эффективные подходы к разработке приложений. Как найти своего п...Артём Азевич. Эффективные подходы к разработке приложений. Как найти своего п...
Артём Азевич. Эффективные подходы к разработке приложений. Как найти своего п...Volha Banadyseva
 
Дина Сударева. Развитие игровой команды и ее самоорганизация. Роль менеджера ...
Дина Сударева. Развитие игровой команды и ее самоорганизация. Роль менеджера ...Дина Сударева. Развитие игровой команды и ее самоорганизация. Роль менеджера ...
Дина Сударева. Развитие игровой команды и ее самоорганизация. Роль менеджера ...Volha Banadyseva
 
Юлия Ерина. Augmented Reality Games: становление и развитие
Юлия Ерина. Augmented Reality Games: становление и развитиеЮлия Ерина. Augmented Reality Games: становление и развитие
Юлия Ерина. Augmented Reality Games: становление и развитиеVolha Banadyseva
 
Александр Дзюба. Знать игрока: плейтест на стадии прототипа и позже
Александр Дзюба. Знать игрока: плейтест на стадии прототипа и позжеАлександр Дзюба. Знать игрока: плейтест на стадии прототипа и позже
Александр Дзюба. Знать игрока: плейтест на стадии прототипа и позжеVolha Banadyseva
 

Mais de Volha Banadyseva (20)

Андрей Светлов. Aiohttp
Андрей Светлов. AiohttpАндрей Светлов. Aiohttp
Андрей Светлов. Aiohttp
 
Сергей Зефиров
Сергей ЗефировСергей Зефиров
Сергей Зефиров
 
Eugene Burmako
Eugene BurmakoEugene Burmako
Eugene Burmako
 
Heather Miller
Heather MillerHeather Miller
Heather Miller
 
Валерий Прытков, декан факультета КСиС, БГУИР
Валерий Прытков, декан факультета КСиС, БГУИРВалерий Прытков, декан факультета КСиС, БГУИР
Валерий Прытков, декан факультета КСиС, БГУИР
 
Елена Локтева, «Инфопарк»
Елена Локтева, «Инфопарк»Елена Локтева, «Инфопарк»
Елена Локтева, «Инфопарк»
 
Татьяна Милова, директор института непрерывного образования БГУ
Татьяна Милова, директор института непрерывного образования БГУТатьяна Милова, директор института непрерывного образования БГУ
Татьяна Милова, директор института непрерывного образования БГУ
 
Trillhaas Goetz. Innovations in Google and Global Digital Trends
Trillhaas Goetz. Innovations in Google and Global Digital TrendsTrillhaas Goetz. Innovations in Google and Global Digital Trends
Trillhaas Goetz. Innovations in Google and Global Digital Trends
 
Александр Чекан. 28 правДИвых слайдов о белорусах в интернете
Александр Чекан. 28 правДИвых слайдов о белорусах в интернетеАлександр Чекан. 28 правДИвых слайдов о белорусах в интернете
Александр Чекан. 28 правДИвых слайдов о белорусах в интернете
 
Мастер-класс Ильи Красинского и Елены Столбовой. Жизнь до и после выхода в store
Мастер-класс Ильи Красинского и Елены Столбовой. Жизнь до и после выхода в storeМастер-класс Ильи Красинского и Елены Столбовой. Жизнь до и после выхода в store
Мастер-класс Ильи Красинского и Елены Столбовой. Жизнь до и после выхода в store
 
Бахрам Исмаилов. Продвижение мобильного приложение - оптимизация в App Store
Бахрам Исмаилов. Продвижение мобильного приложение - оптимизация в App StoreБахрам Исмаилов. Продвижение мобильного приложение - оптимизация в App Store
Бахрам Исмаилов. Продвижение мобильного приложение - оптимизация в App Store
 
Евгений Пальчевский. Что можно узнать из отзывов пользователей в мобильных ма...
Евгений Пальчевский. Что можно узнать из отзывов пользователей в мобильных ма...Евгений Пальчевский. Что можно узнать из отзывов пользователей в мобильных ма...
Евгений Пальчевский. Что можно узнать из отзывов пользователей в мобильных ма...
 
Евгений Невгень. Оптимизация мета-данных приложения для App Store и Google Play
Евгений Невгень. Оптимизация мета-данных приложения для App Store и Google PlayЕвгений Невгень. Оптимизация мета-данных приложения для App Store и Google Play
Евгений Невгень. Оптимизация мета-данных приложения для App Store и Google Play
 
Евгений Козяк. Tips & Tricks мобильного прототипирования
Евгений Козяк. Tips & Tricks мобильного прототипированияЕвгений Козяк. Tips & Tricks мобильного прототипирования
Евгений Козяк. Tips & Tricks мобильного прототипирования
 
Егор Белый. Модели успешной монетизации мобильных приложений
Егор Белый. Модели успешной монетизации мобильных приложенийЕгор Белый. Модели успешной монетизации мобильных приложений
Егор Белый. Модели успешной монетизации мобильных приложений
 
Станислав Пацкевич. Инструменты аналитики для мобильных платформ
Станислав Пацкевич. Инструменты аналитики для мобильных платформСтанислав Пацкевич. Инструменты аналитики для мобильных платформ
Станислав Пацкевич. Инструменты аналитики для мобильных платформ
 
Артём Азевич. Эффективные подходы к разработке приложений. Как найти своего п...
Артём Азевич. Эффективные подходы к разработке приложений. Как найти своего п...Артём Азевич. Эффективные подходы к разработке приложений. Как найти своего п...
Артём Азевич. Эффективные подходы к разработке приложений. Как найти своего п...
 
Дина Сударева. Развитие игровой команды и ее самоорганизация. Роль менеджера ...
Дина Сударева. Развитие игровой команды и ее самоорганизация. Роль менеджера ...Дина Сударева. Развитие игровой команды и ее самоорганизация. Роль менеджера ...
Дина Сударева. Развитие игровой команды и ее самоорганизация. Роль менеджера ...
 
Юлия Ерина. Augmented Reality Games: становление и развитие
Юлия Ерина. Augmented Reality Games: становление и развитиеЮлия Ерина. Augmented Reality Games: становление и развитие
Юлия Ерина. Augmented Reality Games: становление и развитие
 
Александр Дзюба. Знать игрока: плейтест на стадии прототипа и позже
Александр Дзюба. Знать игрока: плейтест на стадии прототипа и позжеАлександр Дзюба. Знать игрока: плейтест на стадии прототипа и позже
Александр Дзюба. Знать игрока: плейтест на стадии прототипа и позже
 

HTML 5: будущее уже сегодня, Сергей Байдачный, Microsoft Ukraine

  • 1. HTML 5: будущее уже сегодня Сергей Байдачный Специалист по разработке программного обеспечения Майкрософт Украина
  • 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