Web осень 2012 лекция 10

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>

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

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

Web осень 2012 лекция 10

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 – не связан патентами

Поддержка браузерами
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 плееру

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.js
var 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 MANIFEST
FALLBACK:
/ /offline.html
CACHE:
/style.css
/script.js
/index.html
NETWORK:
/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 фреймворк
Преимущества:
● кроссбраузерность
● может использовать не-верстальщик
● как правило более семантичная разметка
● скорость разработки
Подходит для:
● внутренние интерфейсы (админка)
● прототипы сайтов
● сайты-приложения, технические сайты

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

Twitter Bootstrap
<div class="btn-group">
<button class="btn">1</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">

</ul>
</div>

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

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

Web осень 2012 лекция 10

More Related Content

What's hot (20)

Viewers also liked (18)

Similar to Web осень 2012 лекция 10 (20)

More from Technopark (20)

Web осень 2012 лекция 10