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
● Регистрация своих протоколов
8. Достоинства платформ
● Расширенный доступ к ресурсам
● Обеспечение безопасности, “песочница”
● Скорость работы
● Поставляются вместе со средой разработки
● Независимость от браузера
9. Недостатки платформ
● Объем загружаемого кода может быть большим
● Отдельная технология отдельный программист→
● Переносимость плагина
● Как правило, плагин нужно загружать
10.
11. HTML 5
● Почему не прижился XHTML?
● HTML5 - не только язык разметки, это группа технологий
(JS API, CSS 3)
● Совместим с HTML4
● DOCTYPE html
● Реализуется непосредственно в браузере
● Может быть реализован частично
● Часть функционала может быть эмулирована с помощью
JS (Modernizr.js, HTML5 Enabling)
● И уже работает! http://html5readiness.com/
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
<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:
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. Видео и аудио кодеки
Аудио:
● MP3 – запатентован, поддерживается всем
● AAC – запатентован, профили, Apple, iTunes
● Vorbis – не связан патентами
21. Нужно несколько копий
Для работы со всеми браузерами нужно хранить несколько
копий видеоролика в разных форматах:
WebM (VP8 + Vorbis)
MP4 (H.264 + AAC low)
OGG (Theora + Vorbis)
Откат к Flash плееру
23. 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+
24. Методы рисования
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) – вывод текста
27. Геолокация
function positionDetected(position) {
position.lattitude; // в градусах
position.longitude; // в градусах
position.accuracy; // в метрах
}
function detectionFailed(error) {
if (error.code == 1) {
// пользователь отказался
}
}
Альтернативы: GoogleGears, Native API, geo.js
28. Локальное хранилище
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: размер, передача, скорость
29. Фоновые вычисления
setInterval(function() {
// do some calculations
// post events
}, 100);
Обычный способ: setInterval, setTimeout
Недостатки:
● вычисления в 1 поток
● блокирует работу UI
● сложность event-driven разработки
30. WebWorkers
// создаем тред
var worker = new Worker("worker.js");
// подписываемся на события
worker.onmessage = function(event) {
console.log(event.data);
}
// отправляем сообщение
worker.postMessage(33);
// и когда-нибудь закрываем его
worker.close();
31. 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);
};
39. CSS фреймворк
Преимущества:
● кроссбраузерность
● может использовать не-верстальщик
● как правило более семантичная разметка
● скорость разработки
Подходит для:
● внутренние интерфейсы (админка)
● прототипы сайтов
● сайты-приложения, технические сайты
40. Twitter Bootstrap
● Использует less.js
● Требует DOCTYPE html
● Включает: 12 колоночная сетка, layoutы страниц, стили
для основных тэгов
● Компоненты: кнопки, меню, закладки, пагинатор
● Адаптируется под разные устройства: телефоны,
планшеты, мониторы
● Альтернативы: 960 Grid, Blueprint, YAML
44. 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 – дуги
45. SVG: Достоинства
● открытый текстовый формат
● векторная графика, масштабируемость
● интеграция с растровой графикой, CSS, JS
● является частью DOM анимация и события→
46. SVG
Достоинства:
● открытый текстовый формат
● векторная графика, масштабируемость
● интеграция с растровой графикой, CSS, JS
● является частью DOM анимация и события→
Недостатки:
● размер файла, чуствителен к мелким деталям
● сложно отобразить только часть картинки
