Разработка приложений с HTML 5 Дмитрий Миндра Developer Tools SSP, Microsoft Ukraine. - презентация

1 Разработка приложений с HTML 5 Дмитрий Миндра Developer Tools SSP, Microsoft Ukraine

2 Веб разработка БЕЗ AJAXAJAX

3 Откуда берутся веб приложения ? Немного вдохновения … Надежный разработчик Профит

4 У меня есть идея … Гипертекст.

5

6 Что такое HTML? < html> < body> 1> h1>Semantic web

7 Что такое HTML5? HTML+CSS3 + JavaScript === Love HTML5

8

9 Типичный XHTML Untitled Page Hello World!

10 Простые вещи сложнее чем они должны быть. DRY – не повторяй себя В чем проблема с HTML ?

11 Untitled Page Hello World!

12 Untitled Page Hello World!

13 Untitled Page Hello World!

14 Untitled Page Hello World!

15 Untitled Page Hello World!

16 Untitled Page Hello World! Было

17 Untitled Page Hello World! Стало

18

19

20 Старый добрый JavaScript + Новые возможности браузеов.

21 Multimedia Defines sound content Defines a video or movie Defines multiple media resources for and Defines a container for an external application or interactive content (a plug-in) Defines text tracks for and

22 Graphics

23 Applications Local data storage Local file access Local SQL database Application cache Javascript workers XHTMLHttpRequest 2 Geolocation

24 New Semantic/Structural Elements Defines an article Defines content aside from the page content Isolates a part of text that might be formatted in a different direction from other text outside it Defines a command button that a user can invoke Defines additional details that the user can view or hide Defines a dialog box or window Defines a visible heading for a element Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. Defines a caption for a element Defines a footer for a document or section Defines a header for a document or section Groups a set of to elements when a heading has multiple levels Defines marked/highlighted text Defines a scalar measurement within a known range (a gauge) Defines navigation links Represents the progress of a task Defines a ruby annotation (for East Asian typography) Defines an explanation/pronunciation of characters (for East Asian typography) Defines what to show in browsers that do not support ruby annotations Defines a section in a document Defines a date/time Defines a possible line-break

25 New Form Elements Specifies a list of pre-defined options for input controls Defines a key-pair generator field (for forms) Defines the result of a calculation …

26 CSS 3 CSS 3 Layouts CSS 3 Transforms CSS 3 Animation CSS 3 Transition CSS 3 Gradients

27 Web приложения Тонкий клиент Трудолюбивый сервер

28 Web приложения Трудолюбивый Ответственный клиент Трудолюбивый сервер

29 Canvas Для тех, кто мечтал делать игрушки!

30 Используйте requestAnimationFrame для анимации window.requestAnimationFrame(renderLoop); 16.7

31 А ваше приложение сейчас отображается? Page Visibility API document.hidden (property) Visibilitychange (event)

32

33 Offline приложения Позволяют пользователю загрузить ресурсы и продолжать работу в случае сбоя сети или в разъединенном окружении Несколько механизмов AppCache DOM Storage Offline/Online events IndexedDB Синхронизация ресурсов через WebSockets и XmlHttpRequest

34 AppCache Возможность создавать веб-приложения, позволяющие кешировать содержимое Кеш управляется с помощью manifest файла: CACHE: FALLBACK: NETWORK: Подключение манифеста происходит в теге html с помощью атрибута manifest Программный доступ с помощью ApplicationCache объекта (window.applicationCache)

35 DOM Storage Используется для хранения небольших объемов информации внутри сессии или на уровне домена Реализовано с Internet Explorer 8 Общий размер хранилища до 10Мб Не передает информацию на сервер Выделяют два типа хранилища: sessionStorage localStorage

36 Offline/Online events navigator.onLine – получение текущего состояния document.body.ononline – событие при переходе в online document.body.onoffline – событие при переходе в offline

37 Работа с файлами Позволяет программно получать доступ к файлам и их содержимому FileReader объект Доступ как к текстовой, так и к бинарной информации Поддержка выбора файла как через input, так и с помощью drag&drop

38 Indexed DB Предоставляет механизмы для построения реляционных запросов к хранимым данным Поддерживает асинхронную модель работы (взаимодействие реализуется через события) var dbReq = ixDB.open( "Database1" ); dbReq.onsuccess = function( evt ) { oDB = evt.target.result; }; 39 Запуск скриптов в фоновом режиме Специальная служба, позволяющая запускать скрипты в фоновом режиме Комуникации осуществляются посредством отправки сообщений (чем-то сходна с worker ролью, выбирающей данные из очереди) postmessage – отправляет сообщение службе или интерфейсы onmessage – позволяет обрабатывать сообщения

40 Media Query Поддержка как CSS 3 Media Query так и событий, связанных с изменением параметров Позволяет задавать различные стили для различных разрешений экрана Позволяет динамически загружать контент, базируясь на параметрах экрана var mediaQueryList = window.msMatchMedia("(min-width:950px)"); mediaQueryList.addListener(mediaSizeChange);

41 Touch events Demo Demo Набор событий для работы с «указателем» (мышью, пальцем, любым другим устройством) Возможность отключать поведение браузера по умолчанию (например, увеличение экрана при движении пальцами) Также поддерживается обработка жестов: События MSGestureStart, MSGestureChange и MSGestureEnd

42 Core 1Core 2 Core 3Core 4 GPU Как сделать приложение производительным ?

43 Принципы построения быстрых приложений 1)Скорость ответа на сетевые запросы 2)Количество скачанных байт 3)Хорошо структурированная разметка 4)Оптимизация использования медиа 5)Быстрый JavaScript 6)Понимание того, на что ваше приложение тратит время.

44 Опыт участия в JS1K

45 Really Big Applications? Попробуйте TypeScript

46 А еще вы можете делать приложения под

47 Windows 8 Windows Core OS Services JavaScript (Chakra) C C++ C# VB Windows Store Apps Communication & Data Application Model Devices & Printing WinRT APIs Graphics & Media XAMLHTML / CSS HTML JavaScript C C++ C# VB Desktop Apps Win32. NET / SL Internet Explorer System Services View Model Controller Core

48 Windows 8 Windows Core OS Services JavaScript (Chakra) C C++ C# VB Windows Store Apps Communication & Data Application Model Devices & Printing WinRT APIs Graphics & Media XAMLHTML / CSS HTML JavaScript C C++ C# VB Desktop Apps Win32. NET / SL Internet Explorer System Services View Model Controller Core

49 Windows 8 Windows Core OS Services JavaScript (Chakra) C C++ C# VB Windows Store Apps Communication & Data Application Model Devices & Printing WinRT APIs Graphics & Media XAMLHTML / CSS HTML JavaScript C C++ C# VB Desktop Apps Win32. NET / SL Internet Explorer System Services View Model Controller Core

50 Windows 8 Demo

51 Спасибо !

52 Где демки ?