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

Презентация:



Advertisements
Похожие презентации
Построение HTML5&JavaScript приложений для Windows 8.
Advertisements

Overview HTML? Editing HTML HTML Examples Headers Linking Images Special characters and more line breaks Unordered list Nested and ordered list References.
Unity3d Fomin Maxim 394 group. Unity is an integrated authoring tool for creating 3D video games or other interactive content such as architectural visualizations.
Basic Computer Terms. Instructions executed( исполнять, выполнять ) by a computer – software Applications- прикладная программа Complete, self-contained.
Using Dreamweaver MX Slide 1 Window menu Manage Sites… Window menu Manage Sites… 2 2 Open Dreamweaver 1 1 Set up a website folder (1). Click New…
Lesson 3 - HTML Formatting. Text Formatting Tags TagDescription Defines bold text Defines big text Defines emphasized text Defines italic text Defines.
© 2006 Cisco Systems, Inc. All rights reserved.CIPT2 v Monitor and Manage IP Telephony Introducing Cisco Unified CallManager Serviceability.
S11-1PAT301, Section 11, October 2003 SECTION 11 ANALYSIS SETUP.
Java Server Pages(JSP). JavaServer Pages (JSP) позволяют вам отделить динамическую часть ваших страниц от статического HTML. Вы, как обычно, пишете обычный.
© 2009 Avaya Inc. All rights reserved.1 Chapter Four, UMS Web Services Module One – UMS.
S11-1 PAT318, Section 11, March 2005 SECTION 11 ANALYSIS SETUP.
Copyright ® 2000 MSC.Software Results S17-1 PAT301, Section 17, October 2003 SECTION 17 FILE MANAGEMENT.
WiseImage Open Architecture. Why to open? Modern technology demands A growing amount of customers demands for custom commands The limited development.
Running Commands & Getting Help. Running Commands Commands have the following syntax: command options arguments Each item is separated by a space Options.
PAT312, Section 21, December 2006 S21-1 Copyright 2007 MSC.Software Corporation SECTION 21 GROUPS.
PAT312, Section 16, December 2006 S16-1 Copyright 2007 MSC.Software Corporation SECTION 16 MATERIALS.
Занятие 2 Инструменты Роман Здебский Тренинг Введение в разработку приложений на Windows Presentation.
Разработчици Кемпински Хотел Зографски София. Разработчици 28 Юни 2012 г.2 Веселин Георгиев, SharePoint &.NET Developer Мартин Караиванов, SharePoint.
Lets look at some interesting and popular devices which have touchscreens.
Республиканский институт повышения квалификации руководящих и научно-педагогических работников системы образования Республики Казахстан Филиал АО «НЦПК.
Транксрипт:

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

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

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

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

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

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

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

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

Untitled Page Hello World!

Untitled Page Hello World!

Untitled Page Hello World!

Untitled Page Hello World!

Untitled Page Hello World!

Untitled Page Hello World! Было

Untitled Page Hello World! Стало

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

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

Graphics

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

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

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 …

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

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

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

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

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

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

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 Demo Demo Набор событий для работы с «указателем» (мышью, пальцем, любым другим устройством) Возможность отключать поведение браузера по умолчанию (например, увеличение экрана при движении пальцами) Также поддерживается обработка жестов: События MSGestureStart, MSGestureChange и MSGestureEnd

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

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

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

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

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

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

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

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

Windows 8 Demo

Спасибо !

Где демки ?