Разработка приложений с HTML 5 Дмитрий Миндра Developer Tools SSP, Microsoft Ukraine Веб разработка БЕЗ AJAX AJAX Откуда берутся веб приложения ? Немного вдохновения … Надежный разработчик Профит У меня есть идея… “ Гипертекст.” Что такое HTML? <html > <body> <h1>Semantic web</h 1> ... </body> </html > Что такое HTML5? HTML5 HTML + CSS3 + JavaScript === Love http://www.exploretouch.ie/ Типичный XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Page</title> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <p>Hello World!</p> </body></html> В чем проблема с HTML ? Простые вещи сложнее чем они должны быть. DRY – не повторяй себя <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Page</title> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <p>Hello World!</p> </body></html> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Page</title> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <p>Hello World!</p> </body></html> <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Page</title> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <p>Hello World!</p> </body></html> <!DOCTYPE html> <html lang="en"> <head> <meta charset=utf-8 /> <title>Untitled Page</title> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <p>Hello World!</p> </body></html> <!DOCTYPE html> <html lang="en"> <head> <meta charset=utf-8 /> <title>Untitled Page</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <p>Hello World!</p> </body></html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Page</title> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <p>Hello World!</p> </body></html> Было <!DOCTYPE html> <html lang="en"> <head> <meta charset=utf-8 /> <title>Untitled Page</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <p>Hello World!</p> </body> </html> Стало Старый добрый JavaScript + Новые возможности браузеов. http://repl.it/ Multimedia http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video_bear <audio> Defines sound content <video> Defines a video or movie <source> Defines multiple media resources for <video> and <audio> <embed> Defines a container for an external application or interactive content (a plug-in) <track> Defines text tracks for <video> and <audio> Graphics http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_svg_ex <canvas> <svg> Applications Local data storage Local file access Local SQL database Application cache Javascript workers XHTMLHttpRequest 2 Geolocation New Semantic/Structural Elements <article> Defines an article <header> <aside> Defines content aside from the page content <hgroup> <bdi> Isolates a part of text that might be formatted in a different direction from other text outside it <mark> <command> Defines a command button that a user can invoke <details> Defines additional details that the user can view or hide <nav> <progress> <dialog> Defines a dialog box or window <ruby> <summary> Defines a visible heading for a <details> element <figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. <figcaption> Defines a caption for a <figure> element <footer> Defines a footer for a document or section <meter> <rt> <rp> <section> <time> <wbr> Defines a header for a document or section Groups a set of <h1> to <h6> 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 New Form Elements <datalist> Specifies a list of pre-defined options for input controls <keygen> Defines a key-pair generator field (for forms) <output> Defines the result of a calculation … CSS 3 CSS 3 Layouts CSS 3 Transforms CSS 3 Animation CSS 3 Transition CSS 3 Gradients http://www.anthonycalzadilla.com/css3-ATAT/index-bones.html http://letterheads.simurai.com/ Web приложения Тонкий клиент Трудолюбивый сервер Web приложения Трудолюбивый Ответственный клиент Трудолюбивый сервер Canvas Для тех, кто мечтал делать игрушки! http://subprotocol.com/verlet-js/examples/cloth.html Используйте requestAnimationFrame для анимации 16.7 16.7 16.7 window.requestAnimationFrame(renderLoop); А ваше приложение сейчас отображается? Page Visibility API document.hidden (property) Visibilitychange (event) Offline приложения • Позволяют пользователю загрузить ресурсы и продолжать работу в случае сбоя сети или в разъединенном окружении • Несколько механизмов • • • • • AppCache DOM Storage Offline/Online events IndexedDB Синхронизация ресурсов через WebSockets и XmlHttpRequest AppCache http://html5demos.com/offlineapp • Возможность создавать веб-приложения, позволяющие кешировать содержимое • Кеш управляется с помощью manifest файла: • CACHE: • FALLBACK: • NETWORK: • Подключение манифеста происходит в теге html с помощью атрибута manifest • Программный доступ с помощью ApplicationCache объекта (window.applicationCache) DOM Storage http://html5demos.com/storage • Используется для хранения небольших объемов информации внутри сессии или на уровне домена • Реализовано с Internet Explorer 8 • Общий размер хранилища до 10Мб • Не передает информацию на сервер • Выделяют два типа хранилища: • sessionStorage • localStorage Offline/Online events http://html5demos.com/offline • navigator.onLine – получение текущего состояния • document.body.ononline – событие при переходе в online • document.body.onoffline – событие при переходе в offline Работа с файлами http://ie.microsoft.com/testdrive/HTML5/TypedArrays/ • Позволяет программно получать доступ к файлам и их содержимому • FileReader объект • Доступ как к текстовой, так и к бинарной информации • Поддержка выбора файла как через input, так и с помощью drag&drop Indexed DB • Предоставляет механизмы для построения реляционных запросов к хранимым данным • Поддерживает асинхронную модель работы (взаимодействие реализуется через события) var dbReq = ixDB.open( "Database1" ); dbReq.onsuccess = function( evt ) { oDB = evt.target.result; }; Запуск скриптов в фоновом режиме http://html5demos.com/worker • Специальная служба, позволяющая запускать скрипты в фоновом режиме • Комуникации осуществляются посредством отправки сообщений (чем-то сходна с worker ролью, выбирающей данные из очереди) • postmessage – отправляет сообщение службе или интерфейсы • onmessage – позволяет обрабатывать сообщения Media Query • Поддержка как CSS 3 Media Query так и событий, связанных с изменением параметров • Позволяет задавать различные стили для различных разрешений экрана • Позволяет динамически загружать контент, базируясь на параметрах экрана var mediaQueryList = window.msMatchMedia("(min-width:950px)"); mediaQueryList.addListener(mediaSizeChange); Touch events Demo • Набор событий для работы с «указателем» (мышью, пальцем, любым другим устройством) • Возможность отключать поведение браузера по умолчанию (например, увеличение экрана при движении пальцами) • Также поддерживается обработка жестов: • События MSGestureStart, MSGestureChange и MSGestureEnd Как сделать приложение производительным ? Core 1 Core 2 GPU Core 3 Core 4 Принципы построения быстрых приложений 1) Скорость ответа на сетевые запросы 2) Количество скачанных байт 3) Хорошо структурированная разметка 4) Оптимизация использования медиа 5) Быстрый JavaScript 6) Понимание того, на что ваше приложение тратит время. Опыт участия в JS1K http://js1k.com/2013-spring/demo/1313 Really Big Applications? Попробуйте TypeScript А еще вы можете делать приложения под Windows 8 Core System Services Model Controller View Windows Store Apps XAML C C++ Desktop Apps HTML / CSS C# VB JavaScript (Chakra) HTML JavaScript C C++ C# VB Win32 .NET / SL WinRT APIs Communication & Data Graphics & Media Devices & Printing Application Model Windows Core OS Services Internet Explorer Windows 8 Core System Services Model Controller View Windows Store Apps XAML C C++ Desktop Apps HTML / CSS C# VB JavaScript (Chakra) HTML JavaScript C C++ C# VB Win32 .NET / SL WinRT APIs Communication & Data Graphics & Media Devices & Printing Application Model Windows Core OS Services Internet Explorer Windows 8 Core System Services Model Controller View Windows Store Apps XAML C C++ Desktop Apps HTML / CSS C# VB JavaScript (Chakra) HTML JavaScript C C++ C# VB Win32 .NET / SL WinRT APIs Communication & Data Graphics & Media Devices & Printing Application Model Windows Core OS Services Internet Explorer Windows 8 Demo Спасибо ! Где демки ? http://ie.microsoft.com/testdrive/