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

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