Rich Internet Applications
Дмитрий Смаль
Что плохо в HTML / CSS / JS ?
Что плохо ?
● Плохая поддержка мультимедиа
– векторная графика
– Поддержки аудио и видео
– Графика с помощью JS
● Ограничено использование ресурсов клиента
– Хранение данных
– Фоновые вычисления
– Сетевые соединения
● Множество мелких недочетов (inputs и т.д.)
Платформы
Java Applets – полноценный GUI на Java
Java Fx – платформа, JavaFXScript
Adobe Flash – векторная графика + ActionScript
Adobe Flex – расширение Flash, XML интерфейс
MS SilverLight – аналог Adobe Flash
Возможности
● Доступ к файловой системе (ограниченный)
● Локальное хранилище данных
● Поддержка аудио и видео
● Поддержка сетевых соединений (сокеты)
● 2D / 3D графика
● Работа непосредственно с HTTP протоколом
● Работа с DOM
● Прямые и обратные вызовы JavaScript
● Регистрация своих протоколов
Как подключить ?
Устревший способ:<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>
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-java-applet;jpi-version=1.4.2"> <PARAM name="model" value="models/HyaluronicAcid.xyz"> <PARAM name="scriptable" value="true"> Java Applets are not supported !!!</OBJECT>
Достоинства платформ
● Расширенный доступ к ресурсам
● Обеспечение безопасности, “песочница”
● Скорость работы
● Поставляются вместе со средой разработки
● Независимость от браузера
Недостатки платформ
● Объем загружаемого кода может быть большим
● Отдельная технология отдельный программист→
● Переносимость плагина
● Как правило, плагин нужно загружать
HTML 5
● Почему не прижился XHTML?
● HTML5 - не только язык разметки, это группа технологий (JS API, CSS 3)
● Совместим с HTML4
● DOCTYPE html
● Реализуется непосредственно в браузере
● Может быть реализован частично
● Часть функционала может быть эмулирована с помощью JS (Modernizr.js, HTML5 Enabling)
● И уже работает! http://html5readiness.com/
Совместимость ...
Graceful Degradation
vs.
Progressive Enhancement
Разметка: новые тэги
<header> - выделяет шапку страницы
<footer> - выделяет подвал страницы
<section> - раздел сайта, логическая группировка
<article> - “сущность”, предназначенная для самостоятельного распространения
<nav> - блок навигационных ссылок, например рубрикатор или пагинатор
<aside> - имеет косвенное отношение к содержимому, реклама, перелинковка
Разметка: новые тэги
<canvas> - для рисования JavaScript ом
<audio> - для управления аудио
<video> - вывод видео без flash
<hgroup><h1></h1><h2></h2></hgroup>
<time datetime=”2012-05-15”>сегодня</time>
HTML5: video
<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>
Как это делалось раньше:
Flash, QuickTime, RealPlayer (плагины)
Что предлагает HTML5:
Видеоконтейнеры
Определяют формат файла, позволяют хранить в одном файле видео и аудио дорожки
● MPEG-4 (mp4, m4v)
● FlashVideo (flv)
● OGG (ogv)
● WebM (только кодеки VP8 и Vorbis)
● Audio Video Interactive (avi)
Видео и аудио кодеки
Непосредственно декодирование видео и аудио потоков. В Internet используются кодеки с потерей качества.
Видео:
● H.264 – основан на патенте, профили, Blu-ray
● Theora – не связан патентами
● VP8 – все патенты открыты, принадлежит Google
Видео и аудио кодеки
Аудио:
● MP3 – запатентован, поддерживается всем
● AAC – запатентован, профили, Apple, iTunes
● Vorbis – не связан патентами
Видео и аудио кодеки
Аудио:
● MP3 – запатентован, поддерживается всем
● AAC – запатентован, профили, Apple, iTunes
● Vorbis – не связан патентами
Поддержка браузерами
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(*)
Нужно несколько копий
Для работы со всеми браузерами нужно хранить несколько копий видеоролика в разных форматах:
WebM (VP8 + Vorbis)
MP4 (H.264 + AAC low)
OGG (Theora + Vorbis)
Откат к Flash плееру
JavaScript API
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+
Методы рисования
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) – вывод текста
Градиенты и изображения
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);};
Геолокация
if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( positionDetected, detectionFailed, { enableHighAccuracy: false, timeout: 5000, maximumAge: 60000 } );}
Обычный способ:
REMOTE_ADDR whois регион→ →
Еще варианты: подключение к беспроводной сети, подключение к сотовой сети, GPS
Геолокация
function positionDetected(position) { position.lattitude; // в градусах position.longitude; // в градусах position.accuracy; // в метрах}
function detectionFailed(error) { if (error.code == 1) { // пользователь отказался }}
Альтернативы: GoogleGears, Native API, geo.js
Локальное хранилище
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]) }
Недостатки cookies: размер, передача, скорость
Фоновые вычисления
setInterval(function() { // do some calculations // post events}, 100);
Обычный способ: setInterval, setTimeout
Недостатки:
● вычисления в 1 поток
● блокирует работу UI
● сложность event-driven разработки
WebWorkers
// создаем тредvar worker = new Worker("worker.js");// подписываемся на событияworker.onmessage = function(event) { console.log(event.data);} // отправляем сообщениеworker.postMessage(33);// и когда-нибудь закрываем егоworker.close();
WebWorkers
// worker.jsvar i = 0;var iv = null;function tick() { postMessage(i++);}
// подписываемся на внешние событияonmessage = function(ev) { i = ev.data; clearInterval(iv); iv = setInterval(tick, 500);};
Offline приложения
<html manifest="/cache.manifest">MIME-тип: text/cache-manifest
CACHE MANIFESTFALLBACK:/ /offline.htmlCACHE:/style.css/script.js/index.htmlNETWORK:/counter.cgi
Улучшение форм
<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> - отключает встроенную валидацию
SASS – CSS препроцессор
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;}
Переменные и вложенность
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; }
Функции и интерполяция
SASS
@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); }
Mixins
CSS фреймворки
CSS фреймворк
Преимущества:
● кроссбраузерность
● может использовать не-верстальщик
● как правило более семантичная разметка
● скорость разработки
Подходит для:
● внутренние интерфейсы (админка)
● прототипы сайтов
● сайты-приложения, технические сайты
Twitter Bootstrap
● Использует less.js
● Требует DOCTYPE html
● Включает: 12 колоночная сетка, layoutы страниц, стили для основных тэгов
● Компоненты: кнопки, меню, закладки, пагинатор
● Адаптируется под разные устройства: телефоны, планшеты, мониторы
● Альтернативы: 960 Grid, Blueprint, YAML
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>
SVG
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>
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 – дуги
SVG: Достоинства
● открытый текстовый формат
● векторная графика, масштабируемость
● интеграция с растровой графикой, CSS, JS
● является частью DOM анимация и события→
SVG
Достоинства:
● открытый текстовый формат
● векторная графика, масштабируемость
● интеграция с растровой графикой, CSS, JS
● является частью DOM анимация и события→
Недостатки:
● размер файла, чуствителен к мелким деталям
● сложно отобразить только часть картинки
SVG: Поддержка
Chrome 3+, FF 1.5+, Opera 8+, IE 9+
Для IE <9 существует технология VML
Raphael.js
Спасибо за вниманиеДмитрий Смаль, [email protected]