Building Apps with HTML5

Transcript Building Apps with HTML5

Разработка
приложений с 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/

Building Apps with HTML5

Transcript Building Apps with HTML5

Directory