1. Rich Internet Applications
Дмитрий Смаль

2. Что плохо в
HTML / CSS / JS ?

3. Что плохо ?
●
Плохая поддержка мультимедиа
– Векторная графика
– Поддержки аудио и видео
– Графика с помощью JS
●
Ограничено использование ресурсов клиента
– Хранение данных
– Фоновые вычисления
– Сетевые соединения
●
Множество мелких недочетов (inputs и т.д.)

4. Платформы
Java Applets – полноценный GUI на Java
Java Fx – платформа, JavaFXScript
Adobe Flash – векторная графика + ActionScript
Adobe Flex – расширение Flash, XML интерфейс
MS SilverLight – аналог Adobe Flash

5. Возможности
●
Доступ к файловой системе (ограниченный)
●
Локальное хранилище данных
●
Поддержка аудио и видео
●
Поддержка сетевых соединений (сокеты)
●
2D / 3D графика
●
Работа непосредственно с HTTP протоколом
●
Работа с DOM
●
Прямые и обратные вызовы JavaScript
●
Регистрация своих протоколов

6. Как подключить ?
Устревший способ:
<embed src="mouse.swf"
type="application/x-shockwave-flash"
pluginspage="http://get.adobe.com/flashplayer/">
Хороший способ:
<object data="player.swf"
type="application/x-shockwave-flash">
<param name="flashvars" value="url=rolik.mp4">
<param name="quality" value="high">
<param name="wmode" value="opaque">
<embed … >
</object>

7. Java Applets
<OBJECT width="200" height="200" align="baseline"
classid="clsid:CAFEEFAC-0014-0002-0000-ABCDEFFEDCBA"
codebase="http://java.sun.com/products/plugin/autodl
/jinstall-1_4_2-windows-i586.cab#Version=1,4,2,0">
<PARAM name="code" value="XYZApp.class">
<PARAM name="codebase" value="html/">
<PARAM name="type" value="application/x-javaapplet;jpi-version=1.4.2">
<PARAM name="model"
value="models/HyaluronicAcid.xyz">
<PARAM name="scriptable" value="true">
Java Applets are not supported !!!
</OBJECT>

8. Достоинства платформ
●
Расширенный доступ к ресурсам
●
Обеспечение безопасности, “песочница”
●
Скорость работы
●
Поставляются вместе со средой разработки
●
Независимость от браузера

9. Недостатки платформ
●
Объем загружаемого кода может быть большим
●
Отдельная технология → отдельный программист
●
Переносимость плагина
●
Как правило, плагин нужно загружать

11. HTML 5
●
Почему не прижился XHTML?
HTML5 - не только язык разметки, это группа технологий
(JS API, CSS 3)
●
●
Совместим с HTML4
●
DOCTYPE html
●
Реализуется непосредственно в браузере
●
Может быть реализован частично
Часть функционала может быть эмулирована с помощью
JS (Modernizr.js, HTML5 Enabling)
●
●
И уже работает! http://html5readiness.com/

12. Совместимость ...
Graceful Degradation
vs.
Progressive Enhancement

13. Разметка: новые тэги
<header> - выделяет шапку страницы
<footer> - выделяет подвал страницы
<section> - раздел сайта, логическая группировка
<article> - “сущность”, предназначенная для
самостоятельного распространения
<nav> - блок навигационных ссылок, например
рубрикатор или пагинатор
<aside> - имеет косвенное отношение к содержимому,
реклама, перелинковка

14. Разметка: новые тэги
<canvas> - для рисования JavaScript ом
<audio> - для управления аудио
<video> - вывод видео без flash
<hgroup><h1></h1><h2></h2></hgroup>
<time datetime=”2012-05-15”>сегодня</time>

15. HTML5: video
Как это делалось раньше:
Flash, QuickTime, RealPlayer (плагины)
Что предлагает HTML5:
<video id="movie" width="400" height="320"
preload controls poster="poster.jpeg">
<source src="video/snowman.mp4" />
<source src="video/snowman.webm"
type='video/webm; codecs="vp8, vorbis"' />
<source src="video/snowman.ogv"
type='video/ogg; codecs="theora, vorbis"' />
</video>

16. Видеоконтейнеры
Определяют формат файла, позволяют хранить в одном
файле видео и аудио дорожки
●
MPEG-4 (mp4, m4v)
●
FlashVideo (flv)
●
OGG (ogv)
●
WebM (только кодеки VP8 и Vorbis)
●
Audio Video Interactive (avi)

17. Видео кодеки
Непосредственно декодирование видео и аудио потоков. В
Internet используются кодеки с потерей качества.
Видео:
●
H.264 – основан на патенте, профили, Blu-ray
●
Theora – не связан патентами
●
VP8 – все патенты открыты, принадлежит Google

18. Аудио кодеки
Аудио:
●
MP3 – запатентован, поддерживается всем
●
AAC – запатентован, профили, Apple, iTunes
●
Vorbis – не связан патентами

19. Поддержка браузерами
FF(4+): Theora + Vorbis + OGG, WebM
Opera(10.6+): Theora + Vorbis + OGG, WebM
Chrome(6+): Theora + Vorbis + OGG, WebM, H.264 + AAC +
MP4
IPhone, Android, Flash(!): H.264 + AAC + MP4
IE(9+): H.264 + AAC + MP4, WebM(*)

20. Совместимость
Для работы со всеми браузерами нужно хранить несколько
копий видеоролика в разных форматах:
WebM (VP8 + Vorbis)
MP4 (H.264 + AAC low)
OGG (Theora + Vorbis)
Откат к Flash плееру

21. JavaScript API

22. Canvas: рисование
<canvas id=”a” width=”200” height=”200”>
</canvas>
<script>
var canv = document.getElementById("a");
var ctx = canv.getContext("2d");
ctx.fillRect(50, 25, 150, 100);
</script>
Context – API для рисования
2d – стандартно (система координат – top left)
3d – не во всех браузерах (WebGL)
Поддержка: IE 7+, FF 3+, Chrome 3+, Opera 10+

23. Методы рисования
ctx.fillStyle – стиль заполнения (цвет)
ctx.strokeStyle – стиль росчерка (цвет)
ctx.font – стиль шрифта
ctx.strokeRect(x, y, width, height)
ctx.fillRect(x, y, width, height)
ctx.moveTo(x, y) – переместить перо в точку
ctx.lineTo(x, y) – провести линию в точку
ctx.stroke() - вывести линию с нужным стилем
ctx.fillText(“phrase”, x, y) – вывод текста

24. Градиенты и изображения
grd = ctx.createLinearGradient(x0, y0, x1, y1);
grd.addColorStop(0, “black”);
grd.addColorStop(1, “white”);
ctx.fillStyle = grd;
img = Image();
img.src = “images/cat.jpg”;
img.onload = function() {
ctx.drawImage(img, x, y, width, height);
};

25. Геолокация
Обычный способ:
REMOTE_ADDR → whois → регион
Еще варианты: подключение к беспроводной сети,
подключение к сотовой сети, GPS
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
positionDetected, detectionFailed,
{ enableHighAccuracy: false,
timeout: 5000, maximumAge: 60000 }
);
}

26. Геолокация
function positionDetected(position) {
position.lattitude; // в градусах
position.longitude; // в градусах
position.accuracy; // в метрах
}
function detectionFailed(error) {
if (error.code == 1) {
// пользователь отказался
}
}
Альтернативы: GoogleGears, Native API, geo.js

27. Локальное хранилище
Недостатки cookies: размер, передача, скорость
var ls = window.localStorage;
if (ls) {
ls.setItem('str', 'value');
var str = ls.getItem('name');
ls.removeItem('str');
ls['num'] = 3.33;
var num = parseFloat(ls['num']);
ls.length; // количество записей
for (var key in ls)
console.log(key, ls[key])
}

28. Фоновые вычисления
Обычный способ: setInterval, setTimeout
Недостатки:
●
вычисления в 1 поток
●
блокирует работу UI
●
сложность event-driven разработки
setInterval(function() {
// do some calculations
// post events
}, 100);

29. WebWorkers
// создаем тред
var worker = new Worker("worker.js");
// подписываемся на события
worker.onmessage = function(event) {
console.log(event.data);
}
// отправляем сообщение
worker.postMessage(33);
// и когда-нибудь закрываем его
worker.close();

30. WebWorkers
// worker.js
var i = 0;
var iv = null;
function tick() {
postMessage(i++);
}
// подписываемся на внешние события
onmessage = function(ev) {
i = ev.data;
clearInterval(iv);
iv = setInterval(tick, 500);
};

31. Offline приложения
<html manifest="/cache.manifest">
MIME-тип: text/cache-manifest
CACHE MANIFEST
FALLBACK:
/ /offline.html
CACHE:
/style.css
/script.js
/index.html
NETWORK:
/counter.cgi

32. Улучшение форм
<input type=”text” placeholder=”скажи слово”>
<input type=”text” autofocus>
<input type=”text” required>
Новые типы input: email, url, search, number,
range, date, time, week, month, …, color
Валидация форм – по умолчанию
<form novalidate> - отключает встроенную валидацию

33. SASS – CSS препроцессор

34. SASS
Переменные и вложенность
$bgcolor: gray;
$fgcolor: green;
.txt {
color: $fgcolor;
background: $bgcolor;
a {
color: red;
&:hover {
text-decoration: none;
}
}
}
.txt {
color: green;
background: gray;
}
.txt a {
color: red;
}
.txt a:hover {
text-decoration: none;
}

35. SASS
Функции и интерполяция
$side: top;
$brd-width: 3px;
$clr: red;
.btn {
color: $clr;
border-#{$side}: lighten($clr, 30%) $brd-width;
width: 70px - $brd-width;
}
.btn {
color: red;
border-top: #ff9999 3px;
width: 67px;
}

36. SASS
Mixins
@mixin rounded($side, $radius: 10px) {
border-#{$side}-radius: $radius;
-moz-border-radius-#{$side}: $radius;
-webkit-border-#{$side}-radius: $radius;
}
#navbar li { @include rounded(top); }
#footer { @include rounded(top, 5px); }
#sidebar { @include rounded(left, 8px); }

37. CSS фреймворки

38. CSS фреймворк
Преимущества:
●
кроссбраузерность
●
может использовать не-верстальщик
●
как правило более семантичная разметка
●
скорость разработки
Подходит для:
●
внутренние интерфейсы (админка)
●
прототипы сайтов
●
сайты-приложения, технические сайты

39. Twitter Bootstrap
●
Использует less.js
●
Требует DOCTYPE html
Включает: 12 колоночная сетка, layoutы страниц, стили для
основных тэгов
●
●
Компоненты: кнопки, меню, закладки, пагинатор
Адаптируется под разные устройства: телефоны,
планшеты, мониторы
●
●
Альтернативы: 960 Grid, Blueprint, YAML

40. Twitter Bootstrap
<div class="btn-group">
<button class="btn">1</button>
<button class="btn">2</button>
<button class="btn">3</button>
</div>
<div class="btn-group">
<button class="btn">Action</button>
<button class="btn dropdown-toggle"
data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<!-- dropdown menu links -->
</ul>
</div>

41. SVG

42. SVG
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version = "1.1"
baseProfile="full"
xmlns = "http://www.w3.org/2000/svg"
xmlns:xlink = "http://www.w3.org/1999/xlink"
xmlns:ev = "http://www.w3.org/2001/xml-events"
height = "400px" width = "400px">
<rect x="0" y="0" width="400" height="400" fill="none"
stroke="black" stroke-width="5px" stroke-opacity="0.5"/>
<g fill-opacity="0.6" stroke="black" stroke-width="0.5px">
<circle cx="200px" cy="200px" r="104px" fill="red"
transform="translate(0,-52)" />
<circle cx="200px" cy="200px" r="104px" fill="blue"
transform="translate(60, 52)" />
<circle cx="200px" cy="200px" r="104px" fill="green"
transform="translate(-60, 52)" />
</g>
</svg>

43. SVG: пути
<path stroke="black" d="M 227 239 L 328 90 L 346 250 L 201
124 L 410 150 L 228 238" />
M – перемещение пера
L H V – прямые
C S Q T – кривые Безье
A – дуги

44. SVG: Достоинства
●
открытый текстовый формат
●
векторная графика, масштабируемость
●
интеграция с растровой графикой, CSS, JS
●
является частью DOM → анимация и события

45. SVG
Достоинства:
●
открытый текстовый формат
●
векторная графика, масштабируемость
●
интеграция с растровой графикой, CSS, JS
●
является частью DOM → анимация и события
Недостатки:
●
размер файла, чуствителен к мелким деталям
●
сложно отобразить только часть картинки

46. SVG: Поддержка
Chrome 3+, FF 1.5+, Opera 8+, IE 9+
Для IE <9 существует технология VML
Raphael.js

47. Спасибо за внимание
Дмитрий Смаль, smal@corp.mail.ru